@font-face {
  font-family: 'Quicksand-Bold';
  src: url('/fonts/Quicksand-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Quicksand-Light';
  src: url('/fonts/Quicksand-Light.ttf') format('truetype');
  font-weight: light;
  font-style: normal;
}

@font-face {
  font-family: 'SukhumvitSet-Text';
  src: url('/fonts/SukhumvitSet-Text.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins-Thin';
  src: url('/fonts/Poppins-Thin.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
    padding-top: 70px;
    font-family: 'SukhumvitSet-Text', sans-serif;
}
    .fixed-top { backdrop-filter: blur(6px); }

/*
 * Hero sections ที่ต้องการเต็มจอตั้งแต่ขอบบน:
 * ดึงขึ้น 70px เพื่อซ่อนอยู่ใต้ fixed navbar
 * (body มี padding-top: 70px อยู่แล้ว section อื่นๆ ปกติไม่ถูกผลกระทบ)
 */
#hero,
.parents-hero {
    margin-top: -70px;
}

/*
 * Gradient overlay สำหรับ carousel หน้าแรก
 * วางบน #heroCarousel::after → ทับภาพสไลด์ แต่ใต้ caption และ controls
 */
#heroCarousel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #ffffff 0%, transparent 20%);
    pointer-events: none;
    z-index: 1;
}
/* ยก caption, controls และ indicators ขึ้นเหนือ gradient overlay */
.cover-caption {
    z-index: 2;
}
.carousel-control-prev,
.carousel-control-next {
    z-index: 2;
}
.carousel-indicators {
    z-index: 2;
    bottom: 1rem;
}
.carousel-indicators [data-bs-target] {
    background-color: #0a509d;
    opacity: .45;
}
.carousel-indicators .active {
    opacity: 1;
}

    .hero-video { height: 100vh; width: 100%; object-fit: cover; }
    .course-card img { height: 180px; object-fit: cover; }
    .testimonial-thumb { cursor: pointer; }
    .customer-logos img { max-height: 60px; opacity: 0.9; }

h1, h2, h3, h4, h5, h6 {
    font-family: 'sukhumvitset-text';
    font-weight: bold;
}

.display-1, .display-2, .display-3, .display-4 {
    font-family: 'Quicksand-Bold';
    color: #aac83c;
}

.page-courses {
    background-color: #f0fffe;
    background-image: url("/images/BG-PageCourse.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.page-courses-container {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 30px;
    border-radius: 15px;
}

.carousel-item {
    position: relative;
}

.cover-caption {
    background-color: rgba(255, 255, 255, 0.7);
    padding: 5%;
    border-radius: 10px;
    display: inline-block;
    max-width: fit-content;
    height: auto;
    width: auto;
    position: absolute;
    top: 5%;
    right: 5%;
}

.cover-caption h1 {
    font-family: 'Quicksand-Bold', sans-serif;
    font-size: 3.5rem;
    color: #0a509d;
}

/*
 * Carousel mobile: อัตราส่วน 1:1
 * - #hero margin-top: 0  → carousel ขึ้นต้นใต้ navbar ไม่ถูกทับ
 * - ภาพ height: 100vw    → 1:1 perfect square
 * - caption: floating box กว้าง 90%, bottom edge ที่ 5% จากขอบล่าง
 * - indicator: อยู่ใน zone 5% ล่างสุด ใต้ caption
 * (ใช้ !important เพื่อ override inline style="top:60%" ของ slide 2)
 */
@media (max-width: 767.98px) {
    /* Carousel เริ่มใต้ navbar — ไม่ซ่อนใต้ fixed bar */
    #hero {
        margin-top: 0;
    }

    /* 1:1 */
    #heroCarousel .carousel-item img {
        height: 100vw;
        object-fit: cover;
        object-position: center center;
    }

    /* Caption: floating 90% wide, bottom edge at 5% from carousel bottom */
    .cover-caption {
        position: absolute !important;
        top: auto      !important;
        bottom: 5%     !important;
        left: 5%       !important;
        right: 5%      !important;
        width: 90%     !important;
        max-width: 90% !important;
        border-radius: 10px !important;
        padding: 10px 14px  !important;
        background-color: rgba(255, 255, 255, 0.88) !important;
        text-align: left !important;
    }

    .cover-caption h1,
    .cover-caption h1.display-2 {
        font-size: 1rem !important;
        line-height: 1.3 !important;
        margin-bottom: 2px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cover-caption .lead,
    .cover-caption p.lead,
    .cover-caption h3.lead {
        font-size: 0.78rem !important;
        line-height: 1.4   !important;
        margin-bottom: 0   !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Indicators: centered in bottom 5% zone (below caption) */
    .carousel-indicators {
        bottom: 1.5%    !important;
        margin-bottom: 0 !important;
    }
}