:root {
    --bg: #fcfcfc;
    --heroGreen: #3f765d;
    --white: #ffffff;
    --muted: rgba(255, 255, 255, .82);
    --muted2: rgba(255, 255, 255, .68);
    --stroke: rgba(255, 255, 255, .18);

    --yellow: #f5c443;
    --blue: #76a7ff;

    --cta: #f0a64b;
    --shadow: 0 18px 55px rgba(0, 0, 0, .40);
    --headerH: 86px;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: "Quicksand", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--white);
}

.page-wrap {
    min-height: 100vh;
    padding-top: var(--headerH);
}

.site-header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;

    background: transparent;
    /* ✅ default */
    border-bottom: 1px solid rgba(255, 255, 255, .10);

    transition: background .22s ease, backdrop-filter .22s ease, border-color .22s ease;
}

/* FORCE green header on scroll (more reliable than body selector) */
.site-header-fixed.is-scrolled {
    background-color: var(--heroGreen) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom-color: rgba(255, 255, 255, .12);
}


/* Mobile: transparent at top, green after scroll */
@media (max-width: 991px) {
    .site-header-fixed {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .site-header-fixed.is-scrolled {
        background-color: var(--heroGreen) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border-bottom-color: rgba(255, 255, 255, .12) !important;
    }
}



.hero-container {
    max-width: 1320px;
    /* try 1200px if you want tighter */
}

/* HERO SHELL */
.hero-shell {
    margin-top: -90px;
    /* match your header height */
    padding-top: 90px;
    background: var(--heroGreen);
    padding: 26px 0 40px;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.hero-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    padding: 0;
}

/* ===== HEADER (professional alignment) ===== */
.site-header {
    display: grid;
    grid-template-columns: 220px 1fr auto;
    align-items: center;
    column-gap: 22px;
    min-height: var(--headerH);
    padding: 12px 6px;
}


.brand-logo {
    height: 70px;
    width: auto;
    display: block;
}

.site-nav {
    justify-content: center;
    gap: 28px;
}

.site-nav a {
    color: rgba(255, 255, 255, .92);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .2px;
    opacity: .92;
}

.site-nav a:hover {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 6px;
}

/* right actions */
.site-actions {
    justify-self: end;
}

.icon-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .95);
    text-decoration: none;
}

.icon-btn span {
    font-weight: 800;
    transform: translateY(-.5px);
}

/* Pills */
.btn-pill {
    border-radius: 999px !important;
    padding: 11px 16px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    border: 1px solid transparent;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.btn-virtual {
    background: rgba(255, 255, 255, .10) !important;
    border: 1px solid rgba(255, 255, 255, .30) !important;
    color: #fff !important;
}

.btn-virtual:hover {
    background: rgba(255, 255, 255, .12) !important;
}

.btn-talk {
    background: linear-gradient(90deg, #ffcc4a, #f07aa6) !important;
    border: 0 !important;
    color: #fff !important;
}

.btn-talk:hover {
    filter: brightness(.98);
}

/* Hamburger */
.hamburger-btn {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-direction: column;
}

.hamburger-btn span {
    width: 18px;
    height: 2px;
    background: rgba(255, 255, 255, .92);
    border-radius: 2px;
}

/* ===== HERO GRID (clean rhythm) ===== */
.hero-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    align-items: center;
    gap: 18px;
    padding: 90px 6px 0;
    min-height: 520px;
}

/* Left column width control */
.hero-left {
    max-width: 780px;
    padding-right: 10px;
}

.sun-row {
    display: flex;
    gap: 10px;
    opacity: .95;
    font-size: 18px;
    margin-bottom: 14px;
}

.sun {
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .18));
}

.hero-title {
    font-size: clamp(34px, 3.6vw, 56px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -.4px;
    margin: 0 0 16px;
}

.accent-yellow {
    color: var(--yellow);
}

.accent-blue {
    color: var(--blue);
}

.hero-subtitle {
    font-size: 20px;
    font-weight: 600;
    color: var(--muted);
    margin: 0 0 12px;
}

.hero-desc {
    color: var(--muted2);
    font-size: 15px;
    line-height: 1.75;
    max-width: 680px;
    margin: 0 0 22px;
    font-weight: 600;
}

/* CTAs */
.hero-ctas {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

.btn-primary-cta {
    background: var(--cta) !important;
    color: #1f1f1f !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    padding: 12px 18px !important;
}

.btn-primary-cta:hover {
    filter: brightness(.98);
}

.btn-secondary-cta {
    background: rgba(255, 255, 255, .06) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .30) !important;
    padding: 12px 18px !important;
}

.btn-secondary-cta:hover {
    background: rgba(255, 255, 255, .10) !important;
}

.btn-arrow {
    margin-left: 10px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(0, 0, 0, .10);
}

.btn-arrow-solid {
    background: rgba(240, 166, 75, .95);
    color: #1f1f1f;
}

/* Right image */
.hero-right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-image {
    width: min(460px, 100%);
    height: auto;
    border-radius: 18px;
    object-fit: contain;
    filter: drop-shadow(0 20px 38px rgba(0, 0, 0, .35));
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 14px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    color: rgba(255, 255, 255, .92);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 12px 22px rgba(0, 0, 0, .14);
    backdrop-filter: blur(6px);
}

.hero-badge::before {
    content: "🏆";
}

.hero-badge-alt {
    background: rgba(240, 166, 75, .14);
    border-color: rgba(240, 166, 75, .35);
}

/* Placeholder sections */
.section-placeholder {
    background: #0f0f0f;
    margin-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

/* ===== MOBILE MENU ===== */
.menu-canvas {
    background: #ffffff;
    color: #111;
    width: min(360px, 90vw);
    border-left: 1px solid rgba(0, 0, 0, .08);
}

.menu-header {
    background: #198754;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.menu-logo {
    height: 34px;
    width: auto;
}

.menu-top {
    background: #198754;
    padding: 14px;
    border-radius: 16px;
}

.menu-icon {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .28);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
}

.btn-lets-talk {
    background: linear-gradient(90deg, #ffcc4a, #f07aa6) !important;
    border: 0 !important;
    color: #fff !important;
}

.menu-links a {
    padding: 14px 10px;
    text-decoration: none;
    color: #111;
    font-weight: 600;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.menu-links a:hover {
    background: rgba(0, 0, 0, .04);
}

@media (min-width: 1200px) {
    .hero-right {
        justify-content: flex-end;
    }

    /* Optional: slightly tighten the gap so it feels cohesive */
    .hero-grid {
        gap: 28px;
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
    :root {
        --headerH: 74px;
    }

    html,
    body {
        overflow-x: hidden;
    }

    .menu-logo {
        height: 70px;
    }

    .hero-card {
        padding-left: 0;
        padding-right: 0;
    }

    .site-header {
        grid-template-columns: 1fr auto;
        padding: 10px 4px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        min-height: unset;
        gap: 16px;
    }

    .hero-left {
        max-width: 100%;
        padding-right: 0;
    }

    .hero-title {
        font-size: 28px;
        line-height: 1.12;
        margin-bottom: 10px;
    }

    .hero-desc {
        max-width: 100%;
    }

    .hero-ctas {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-ctas .btn {
        width: 100%;
        position: relative;
    }

    .hero-image {
        width: min(520px, 100%);
    }

    .btn-pill {
        white-space: normal !important;
        line-height: 1.25;
    }

    hero-ctas .btn span,
    .hero-ctas .btn strong,
    .hero-ctas .btn p {
        flex: 1;
        text-align: center;
    }


    .hero-ctas .btn .btn-arrow {
        flex: 0 0 auto;
    }

    .hero-badges {
        display: flex;
        justify-content: center;
        align-items: stretch;
        gap: 12px;
        width: 100%;
        flex-wrap: nowrap;
    }

    .hero-badge {
        /* flex: 1 forces it to stretch. "auto" lets it size to content. */
        flex: 0 1 auto; 
        
        /* Remove the 200px limit. Allow it to fill the screen if needed. */
        max-width: 100%; 
        width: fit-content;
        
        justify-content: center;
        text-align: center;
        padding: 10px 16px;
        
        /* Allow text to wrap if the phone screen is very small */
        white-space: normal;
    }
}

@media (max-width: 420px) {
    .hero-ctas .btn {
        font-size: 14px;
    }
}


/* ==============================
   WHY SECTION (below hero)
============================== */

.why-section {
    background: #ffffff;
    padding: 56px 0 64px;
    color: #111;
}

.why-title-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 26px;
}

.why-title {
    position: relative;
    display: inline-block;
    font-weight: 700;
    font-size: clamp(18px, 2.2vw, 28px);
    color: #fff;
    padding: 14px 26px;
    text-align: center;
    background: #e0a04a;
    border-radius: 10px;
    letter-spacing: .2px;
}

/* ribbon ends (angled) */
.why-title::before,
.why-title::after {
    content: "";
    position: absolute;
    top: 0;
    width: 18px;
    height: 100%;
    background: #e0a04a;
}

.why-title::before {
    left: -14px;
    transform: skewX(-18deg);
    border-radius: 10px 0 0 10px;
}

.why-title::after {
    right: -14px;
    transform: skewX(-18deg);
    border-radius: 0 10px 10px 0;
}

.why-item {
    height: 100%;
    text-align: left;
    padding: 8px 6px;
}

.why-ico {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef0ff;
    border: 1px solid rgba(0, 0, 0, .06);
    margin-bottom: 12px;
    font-size: 18px;
}

.why-ico svg {
    width: 24px;
    height: 24px;
}

.why-item h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #111;
    line-height: 1.25;
}

.why-item p {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(0, 0, 0, .55);
    margin: 0;
    font-weight: 600;
}

.why-cta {
    margin-top: 28px;
    display: flex;
    justify-content: center;
}

.why-btn {
    background: linear-gradient(90deg, #ffcc4a, #f07aa6) !important;
    border: 0 !important;
    color: #fff !important;
    padding: 12px 22px !important;
    box-shadow: 0 10px 24px rgba(240, 122, 166, .22);
}

/* better spacing on mobile */
@media (max-width: 575px) {
    .why-section {
        padding: 44px 0 52px;
    }

    .why-item {
        padding: 6px 2px;
    }
}

.daycare-video-section {
    background: #ffffff;
    padding: 56px 0;
}

.video-wrapper {
    position: relative;
    max-width: 800px; /* ✅ FIX: Stops the player from getting too huge */
    margin: 0 auto;   /* ✅ FIX: Centers the player in the middle of the screen */
    padding-top: 56.25%; 
    padding-top: 56.25%;
    /* 16:9 */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.video-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.stats-strip {
    margin-top: 34px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: center;
}

.stat-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.stat-icon {
    width: 92px;
    height: 92px;
    border-radius: 0;
    /* square like your screenshot */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.stat-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.stat-number {
    font-weight: 800;
    font-size: clamp(44px, 4vw, 64px);
    line-height: 1;
    color: #76a7ff;
    /* matches your light-blue numbers */
}

.stat-label {
    margin-top: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #111;
}

/* mobile */
@media (max-width: 991px) {
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .stat-item {
        justify-content: flex-start;
    }
}

/* ==============================
   WHAT WE DO
============================== */

.whatwedo {
    position: relative;
    padding: 84px 0 96px;
    background: #6faeb0;
    color: #fff;
    overflow: hidden;
}

/* decorative ring + star like mock */
.whatwedo::before {
    content: "";
    position: absolute;
    right: -90px;
    top: 210px;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    border: 28px solid rgba(255, 255, 255, .9);
    opacity: .9;
}

.whatwedo::after {
    content: "";
    position: absolute;
    left: -70px;
    top: 240px;
    width: 160px;
    height: 160px;
    background: #f5d86a;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 67% 57%, 79% 91%, 50% 70%, 21% 91%, 33% 57%, 2% 35%, 39% 35%);
    opacity: .95;
}

.whatwedo-head {
    text-align: center;
    max-width: 1000px;
    margin: 0 auto 56px;
}

.whatwedo-pill {
    display: inline-flex;
    background: #f5c443;
    color: #111;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: .6px;
    padding: 7px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.whatwedo-title {
    margin: 0;
    font-weight: 800;
    font-size: clamp(40px, 3.8vw, 34px);
    line-height: 1.08;
}

.whatwedo-glass {
    margin: 0 auto 18px;
    max-width: 960px;
    padding: 26px;
    font-size: 18px;
    font-weight: 600;
}

.whatwedo-panel {
    background: transparent;
    border: 0;
    padding: 0;
}


/* ===== Desktop grid exactly like your screenshot ===== */
.whatwedo-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    grid-template-areas:
        "imgA daycare"
        "preschool imgB";
    gap: 34px 46px;
    align-items: start;
}

.whatwedo-img {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
    border: 1px solid rgba(255, 255, 255, .14);
}

.whatwedo-img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.whatwedo-img-a {
    grid-area: imgA;
    height: 210px;
}

.whatwedo-img-b {
    grid-area: imgB;
    height: 230px;
}

.whatwedo-daycare {
    grid-area: daycare;
    padding-top: 6px;
}

.whatwedo-preschool {
    grid-area: preschool;
    padding-top: 6px;
}

.whatwedo-h3 {
    margin: 0 0 6px;
    font-weight: 800;
    font-size: clamp(30px, 3vw, 48px);
    line-height: 1.05;
}

.whatwedo-p {
    margin: 0;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.85;
    color: rgba(255, 255, 255, .82);
    max-width: 520px;
}

/* ===== Floating small image on the right (Desktop) ===== */
.whatwedo-img-float {
    position: absolute;
    right: 10px;
    top: 170px;
    /* aligns beside daycare like your desktop */
    width: 260px;
    height: 155px;
    border-radius: 18px;
    z-index: 2;
}

/* Learn More button (yellow -> pink gradient pill like your screenshot) */
.btn-learn-more {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 10px 22px !important;
    border-radius: 999px !important;

    font-weight: 800 !important;
    font-size: 14px !important;
    line-height: 1 !important;

    color: #ffffff !important;
    text-decoration: none !important;

    /* softer multi-stop gradient like the reference */
    background: linear-gradient(90deg,
            #f8c84a 0%,
            #f5b15c 45%,
            #f08bb6 100%) !important;

    /* subtle “outline” like the sample */
    border: 1px solid rgba(255, 255, 255, .38) !important;

    /* softer shadow (the reference is not too heavy) */
    box-shadow:
        0 10px 20px rgba(0, 0, 0, .12),
        inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}

.btn-learn-more:hover {
    filter: brightness(1.02);
    transform: translateY(-1px);
}

.btn-learn-more:active {
    transform: translateY(0);
    filter: brightness(.99);
}


/* ===== Mobile order (matches your mobile screenshot) ===== */
@media (max-width: 991px) {

    /* 1st item = Baby Curriculum text block */
    .whatwedo-grid> :nth-child(1) {
        grid-row: 2;
        grid-column: 1;
    }

    /* 2nd item = Baby Curriculum image */
    .whatwedo-grid> :nth-child(2) {
        grid-row: 1;
        grid-column: 1;
    }

    .whatwedo-grid> :nth-child(5) {
        grid-row: 6;
    }

    .whatwedo-grid> :nth-child(6) {
        grid-row: 5;
    }

    .whatwedo {
        text-align: left;
        margin-bottom: 26px;
    }

    /* ✅ Center the decorative ring on mobile */
    .whatwedo::before {
        left: 50%;
        right: auto;
        transform: translateX(-50%) scale(.92);
    }

    /* (optional) keep the star from crowding the text */
    .whatwedo::after {
        opacity: .75;
    }

    .whatwedo-head {
        text-align: center;
        margin-bottom: 26px;
    }

    .whatwedo-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "imgA"
            "imgFloat"
            "daycare"
            "preschool"
            "imgB";
        gap: 22px;
    }

    .whatwedo-title {
        margin-top: 20px;
        font-size: 30px;
    }

    /* float becomes normal block + bigger like your mobile */
    .whatwedo-img-float {
        position: static;
        width: 100%;
        height: 220px;
        grid-area: imgFloat;
    }

    .whatwedo-img-a {
        height: 200px;
    }

    .whatwedo-img-b {
        height: 220px;
    }

    /* What We Do: keep same glass as Trust Hero (just resize) */
    .whatwedo-glass {
        margin: 0 auto;
        max-width: 520px;
        padding: 24px;
        border-radius: 22px;

        /* ✅ match the "Why Trust Us" glass look (no black inner box) */
        background: rgba(10, 10, 10, 0.28);
        border: 1px solid rgba(20, 18, 18, 0.22);

        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);

        box-shadow:
            0 26px 70px rgba(0, 0, 0, 0.22),
            inset 0 1px 0 rgba(17, 17, 17, 0.1);

        font-size: 18px;
        line-height: 1.85;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.88);
    }

    /* TEXT only */
    .whatwedo-sub {
        margin: 0;
        font-size: 16px;
        line-height: 1.85;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.88);
        text-align: center;
    }


    .whatwedo-block .btn-learn-more {
        display: flex !important;
        /* override inline-flex !important */
        width: fit-content !important;
        /* shrink to content */
        margin: 14px auto 0 !important;
        /* center */
    }
}

/* =========================
   WHAT WE DO – MOBILE ONLY glass + inner panel
========================= */
@media (max-width: 575px) {

    .whatwedo-glass {
        max-width: 92%;
        margin: 0 auto;
        padding: 20px;
    }


    /* text stays readable */
    .whatwedo-sub {
        margin: 0;
        text-align: center;
        font-size: 16px;
        line-height: 1.85;
    }
}


/* ==============================
   CURRICULUM SECTION
============================== */

.curriculum {
    background: #ffffff;
    color: #111;
    padding: 80px 0 86px;
}

.curriculum-ribbon-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.curriculum-ribbon {
    position: relative;
    margin: 0;
    padding: 14px 26px;
    font-size: clamp(22px, 2.6vw, 40px);
    font-weight: 800;
    color: #fff;
    background: #e0a04a;
    border-radius: 10px;
    line-height: 1.15;
}

/* angled ribbon ends */
.curriculum-ribbon::before,
.curriculum-ribbon::after {
    content: "";
    position: absolute;
    top: 0;
    width: 26px;
    height: 100%;
    background: #e0a04a;
}

.curriculum-ribbon::before {
    left: -18px;
    transform: skewX(-18deg);
    border-radius: 10px 0 0 10px;
}

.curriculum-ribbon::after {
    right: -18px;
    transform: skewX(-18deg);
    border-radius: 0 10px 10px 0;
}

.curriculum-sub {
    max-width: 980px;
    font-size: 20px;
    margin: 0 auto 40px;
    text-align: center;
    font-weight: 600;
    line-height: 1.8;
    color: rgba(0, 0, 0, .65);
}

/* 5 columns desktop, auto-wrap down */
.curriculum-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 26px;
    align-items: start;
}

.curriculum-card h3 {
    margin: 12px 0 10px;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
}

.curriculum-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
    font-weight: 600;
    color: rgba(0, 0, 0, .55);
}

.curriculum-ico {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f0ff;
    border: 1px solid rgba(0, 0, 0, .06);
    font-size: 18px;
}

.curriculum-cta {
    margin-top: 34px;
    display: flex;
    justify-content: center;
}

/* responsive */
@media (max-width: 1200px) {
    .curriculum-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .curriculum .btn-learn-more {
        display: flex !important;
        /* override inline-flex !important */
        width: fit-content !important;
        /* shrink to content */
        margin: 14px auto 0 !important;
        /* center */
    }
}

@media (max-width: 768px) {
    .curriculum {
        padding: 64px 0 70px;
    }

    .curriculum-sub {
        text-align: left;
        padding: 0 2px;
    }

    .curriculum-grid {
        grid-template-columns: 1fr;
    }

    .curriculum-cta {
        justify-content: flex-start;
    }

    .enroll-btn {
    margin-bottom: 130px; /* Adjust this value until the gap looks right */
    z-index: 10;          /* Ensures the button stays clickable if it touches the image */
    position: relative;
    }
    
}

/* Keep your existing .enroll-btn code as is, then add this below it */

/* =========================
   ENROLL CTA (BANNER)
========================= */

.enroll-cta {
    padding: 0 0 30px;
}

/* Full width like WhatWeDo background */
.enroll-cta .hero-container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.enroll-cta-card {
    border-radius: 0;
    /* optional: remove rounded if WhatWeDo is straight */
}

.enroll-cta-card {
    position: relative;
    overflow: hidden;
    border-radius: 36px;
    min-height: 420px;

    /* fallback bg if image doesn't load */
    background: linear-gradient(90deg, #d7a15b 0%, #6fb7c6 50%, #a8b05e 100%);
}

/* big background image */
.enroll-deco-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

/* Center content */
.enroll-content {
    position: relative;
    z-index: 2;
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
    padding: 90px 18px;
}

.enroll-title {
    margin: 0 0 18px;
    font-weight: 400;
    font-size: clamp(34px, 4vw, 62px);
    line-height: 1.05;
    color: #ffffff;
    letter-spacing: 0.2px;
}

.enroll-title .hl-yellow {
    color: #ffd24a;
    font-weight: 600;
}

.enroll-title .hl-green {
    color: #1a7a40;
    font-weight: 600;
}

.enroll-desc {
    margin: 0 auto 26px;
    max-width: 720px;
    font-size: 20px;
    line-height: 1.45;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
}

/* CTA button */
.enroll-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 26px;
    border-radius: 999px;

    background: #e2a24f;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;

    border: 3px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.enroll-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.16);
}

.enroll-btn-ico {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #ffffff;
    color: #40765e;
    /* blue arrow */
    display: grid;
    place-items: center;
    font-size: 18px;
    font-weight: 700;
}

/* Left + Right pinned photos */
.enroll-img {
    position: absolute;
    z-index: 2;
    width: 240px;
    height: 240px;
    border-radius: 42px;
    overflow: hidden;
}

.enroll-img img {
    width: 80%;
    height: 80%;
    object-fit: cover;
    display: block;
}

.enroll-img-left {
    left: 12px;
    top: 10px;
}

.enroll-img-right {
    right: -30px;
    bottom: -30px;
}

/* Responsive */
@media (max-width: 992px) {
    .enroll-cta-card {
        min-height: 520px;
    }

    .enroll-content {
        padding: 70px 18px 32px;
    }

    .enroll-img {
        width: 180px;
        height: 180px;
        border-radius: 34px;
    }

    .enroll-img-left {
        left: 10px;
        top: 10px;
    }

    .enroll-img-right {
        right: 0px;
        bottom: 8px;
    }

    .enroll-desc {
        font-size: 20px;
    }
}

@media (max-width: 576px) {
    .enroll-cta {
        padding: 16px 0 18px;
    }

    .enroll-cta-card {
        border-radius: 26px;
        min-height: 560px;
    }

    .enroll-content {
        padding: 150px 16px 26px;
        /* gives space for top image */
    }

    .enroll-img {
        width: 155px;
        height: 155px;
    }

    .enroll-img-left {
        left: 10px;
        top: 10px;
    }

    .enroll-img-right {
        right: -20px;
        bottom: -20px;
    }
}

/* =========================
   FOOTER
========================= */

.site-footer {
    background: #ffffff;
    color: #111;
    padding: 70px 0 34px;
}

.footer-inner {
    text-align: center;
    display: grid;
    gap: 14px;
    justify-items: center;
}

.footer-logo {
    height: 70px;
    width: auto;
    display: block;
}

.footer-line {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.75);
}

.footer-link {
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.75);
    text-decoration: none;
}

.footer-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin: 10px 0 14px;
}

.footer-social-btn {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #111;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    line-height: 1;
}

.footer-social-btn:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.footer-copy {
    margin: 6px 0 0;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.75);
}

.footer-dev {
    margin: 0;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.75);
}

.footer-dev-link {
    color: #e23b85;
    /* pink like screenshot */
    font-weight: 700;
    text-decoration: none;
}

.footer-dev-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.footer-social-btn svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* =========================
   WHY TRUST US - HERO (ENHANCED)
========================= */

.trust-hero {
    margin-top: -90px;
    /* match your header height */
    padding-top: 90px;
    position: relative;
    min-height: 560px;
    overflow: hidden;
    padding: 110px 0 70px;
    isolation: isolate;
}

/* background image */
.trust-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.trust-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
}

/* overlay gradient for contrast */
.trust-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(900px 420px at 25% 35%, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.40)),
        linear-gradient(90deg, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.35));
}

/* layout */
.trust-hero-inner {
    padding-top: 55px;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 34px;
    align-items: center;
}

/* title */
.trust-hero-title {
    margin: 0;
    font-size: clamp(46px, 5.2vw, 84px);
    line-height: 0.95;
    color: #fff;
    font-weight: 800;
    letter-spacing: -0.8px;
    text-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
}

/* pins */
.trust-pins {
    display: flex;
    gap: 18px;
    align-items: flex-end;
    margin-top: 34px;
    flex-wrap: wrap;
}

.trust-pin {
    width: 148px;
    height: 180px;
    border-radius: 999px 999px 999px 18px;
    position: relative;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 18px 14px 22px;

    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.28),
        inset 0 10px 22px rgba(255, 255, 255, 0.12);
}

.trust-pin::after {
    content: "";
    position: absolute;
    left: 28px;
    bottom: -18px;
    width: 30px;
    height: 30px;
    background: inherit;
    transform: rotate(45deg);
    border-radius: 8px;
    border-right: 1px solid rgba(255, 255, 255, 0.16);
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

/* nicer colors */
.pin-green {
    background: linear-gradient(180deg, #55b156, #3b8c3b);
    color: #fff;
}

.pin-blue {
    background: linear-gradient(180deg, #89b7ff, #5e8fff);
    color: #fff;
}

.pin-orange {
    background: linear-gradient(180deg, #ffb24b, #f08a12);
    color: #fff;
}

.pin-value {
    font-size: 46px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.6px;
}

.pin-label {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 700;
    opacity: 0.95;
}

.pin-star {
    font-size: 26px;
    vertical-align: middle;
    margin-left: 2px;
}

.pin-mini-avatars {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.pin-mini-icon {
    width: 100px;
    height: 42px;
    display: block;
}

.pin-mini-avatars span {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

/* glass card */
.trust-hero-card {
    background: rgba(10, 10, 10, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(12px);
    border-radius: 22px;
    padding: 28px 28px 22px;

    box-shadow:
        0 26px 70px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.trust-hero-text {
    margin: 0 0 22px;
    color: rgba(255, 255, 255, 0.95);
    font-size: 18px;
    line-height: 1.55;
}

/* buttons (more premium) */
.trust-hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    line-height: 1;
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.btn-pill-fill {
    background: linear-gradient(90deg, #f2a44a, #e57cb7);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.20);
}

.btn-pill-outline {
    background: rgba(0, 0, 0, 0.10);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.55);
}

.btn-pill:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.26);
}

.btn-ico {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #2b63d9;
    display: grid;
    place-items: center;
    font-weight: 900;
}

/* responsive */
@media (max-width: 992px) {
    .trust-hero {
        padding: 84px 0 56px;
        min-height: 640px;
    }

    .trust-hero-inner {
        margin-top: 40px;
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .trust-hero-card {
        padding: 22px 18px 18px;
    }

    .trust-hero-text {
        font-size: 16px;
    }

    .trust-pin {
        width: 132px;
        height: 165px;
    }
}

/* =========================
   WHY TRUST US – MOBILE POLISH
========================= */
@media (max-width: 576px) {

    /* --- Pins: force 1 row --- */
    .trust-pins {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 10px;
    }

    .trust-pin {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        /* override fixed width */
        height: 138px;
        padding: 12px 8px 16px;
    }

    .pin-value {
        font-size: 32px;
    }

    .pin-label {
        font-size: 12px;
    }

    .pin-mini-avatars {
        margin-top: 8px;
    }

    .pin-mini-icon {
        width: 76px;
        height: 28px;
        display: block;
    }

    .trust-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        justify-items: center;
    }

    .trust-hero-actions .btn-pill {
        width: 100%;
        max-width: 320px;
        justify-content: center;
        text-align: center;
    }

    /* --- Glass card spacing --- */
    .trust-hero-card {
        margin-top: 26px;
        padding: 22px 18px;
    }

    /* --- Buttons: same width + centered text --- */
    .trust-hero-actions {
        flex-direction: column;
        align-items: center;
        gap: 14px;
    }

    .trust-hero-actions .btn-pill {
        width: 100%;
        max-width: 280px;
        justify-content: center;
        text-align: center;
    }

    .btn-pill .btn-ico {
        flex-shrink: 0;
    }

    .pin-mini-icon {
        width: 80px;
        height: 30px;
    }
}

/* =========================
  WTU NEXT SECTION (unique names)
========================= */
.wtu-sec {
    background: #fff;
    color: #111;
    padding: 72px 0 84px;
}

.wtu-block {
    margin-bottom: 64px;
}

.wtu-eyebrow {
    margin: 0 0 10px;
    text-align: center;
    font-weight: 800;
    letter-spacing: .22em;
    font-size: 25px;
    color: #e0a04a;
    text-transform: uppercase;
}

.wtu-ribbon {
    position: relative;
    margin: 0 auto 18px;
    width: fit-content;
    padding: 12px 26px;
    color: #fff;
    background: #e0a04a;
    border-radius: 10px;
    font-weight: 900;
    font-size: clamp(22px, 2.4vw, 44px);
    line-height: 1.1;
    text-align: center;
}

.wtu-ribbon::before,
.wtu-ribbon::after {
    content: "";
    position: absolute;
    top: 0;
    width: 22px;
    height: 100%;
    background: #e0a04a;
}

.wtu-ribbon::before {
    left: -16px;
    transform: skewX(-18deg);
    border-radius: 10px 0 0 10px;
}

.wtu-ribbon::after {
    right: -16px;
    transform: skewX(-18deg);
    border-radius: 0 10px 10px 0;
}

.wtu-grid--two {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 34px;
    align-items: start;
    margin-top: 14px;
}

.wtu-text {
    max-width: 560px;
}

.wtu-par {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.85;
    font-weight: 600;
    color: rgba(0, 0, 0, .72);
}

.wtu-media {
    overflow: hidden;
    transform: rotate(-1deg);
}

.wtu-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.wtu-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    border-radius: 999px;
    background: #e0a04a;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    border: 1px solid rgba(0, 0, 0, .04);
    box-shadow: 0 12px 26px rgba(224, 160, 74, .25);
}

.wtu-btn:hover {
    filter: brightness(1.02);
    transform: translateY(-1px);
}

.wtu-btn-ico {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: #fff;
    color: #2b63d9;
    display: grid;
    place-items: center;
    font-weight: 900;
}

.wtu-lead {
    margin: 0 auto 26px;
    max-width: 980px;
    text-align: center;
    font-size: 16px;
    line-height: 1.85;
    font-weight: 650;
    color: rgba(0, 0, 0, .72);
}

.wtu-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px 5px;
    align-items: start;
    justify-items: center;
    margin-top: 10px;
}

.wtu-feature {
    width: 100%;
    max-width: 260px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.wtu-ico {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #f3f0ff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wtu-ico img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.wtu-feature-title {
    font-weight: 800;
    font-size: 18px;
    color: #111;
    line-height: 1.15;
}

/* responsive */
@media (max-width: 991px) {
    .wtu-grid--two {
        grid-template-columns: 1fr;
    }

    .wtu-media {
        transform: none;
    }

    .wtu-text {
        max-width: 100%;
    }

    .wtu-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-items: start;
    }
}

@media (max-width: 575px) {
    .wtu-sec {
        padding: 56px 0 66px;
    }

    .wtu-lead {
        text-align: left;
    }

    .wtu-features {
        grid-template-columns: 1fr;
    }
    
}

/* =========================
  WTU – Teal Section (unique)
========================= */
.wtu-teal {
    position: relative;
    background: #6aa9b1;
    /* teal */
    padding: 84px 0 90px;
    overflow: hidden;
    color: #fff;
}

.wtu-teal-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 58px;
    align-items: start;
}

.wtu-kicker {
    margin: 0 0 10px;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    opacity: .95;
}

.wtu-kicker--center {
    text-align: center;
    margin-top: 22px;
}

.wtu-teal-title {
    margin: 0 0 14px;
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1.05;
    font-weight: 900;
}

.wtu-teal-title--center {
    text-align: center;
}

.wtu-teal-text {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.85;
    color: rgba(255, 255, 255, .92);
    max-width: 560px;
}

.wtu-teal-text--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    max-width: 520px;
}

/* photos */
.wtu-photo {
    border-radius: 14px;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, .55);
    box-shadow: 0 22px 60px rgba(0, 0, 0, .20);
    background: rgba(255, 255, 255, .08);
}

.wtu-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* match screenshot scale */
.wtu-photo--lg {
    max-width: 520px;
}

.wtu-photo--sm {
    max-width: 520px;
    margin-left: auto;
    /* push image to the right visually */
}

/* buttons */
.wtu-teal-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 22px;
}

.wtu-teal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    min-width: 240px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(90deg, #f2a44a, #e57cb7);
    border: 2px solid rgba(255, 255, 255, .25);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
    transition: transform .15s ease, filter .15s ease;
}

.wtu-teal-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
}

/* =========================
  Decorative shapes
========================= */
.wtu-shape {
    position: absolute;
    z-index: 1;
    opacity: .55;
    pointer-events: none;
}

.wtu-shape-star {
    left: -40px;
    top: 110px;
    width: 120px;
    height: 120px;
    background: #f7d67c;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%,
            79% 91%, 50% 70%, 21% 91%, 32% 57%,
            2% 35%, 39% 35%);
}

.wtu-shape-ring {
    right: -70px;
    top: 260px;
    width: 220px;
    height: 220px;
    border-radius: 999px;
    border: 36px solid rgba(255, 255, 255, .75);
    background: transparent;
    opacity: .35;
}

.wtu-shape-dots {
    right: 55px;
    top: 40px;
    width: 120px;
    height: 80px;
    background:
        radial-gradient(circle, rgba(247, 214, 124, .95) 52%, transparent 54%) 0 0/26px 26px;
    border-radius: 12px;
}

/* =========================
  Responsive
========================= */
@media (max-width: 991px) {
    .wtu-teal-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .wtu-photo--lg,
    .wtu-photo--sm {
        max-width: 100%;
        margin-left: 0;
    }

    .wtu-teal-text {
        max-width: 100%;
    }

    .wtu-teal-title--center,
    .wtu-teal-text--center {
        text-align: left;
        margin-left: 0;
        margin-right: 0;
    }

    .wtu-teal-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 575px) {
    .wtu-teal {
        padding: 64px 0 70px;
    }

    .wtu-teal-btn {
        width: 100%;
        min-width: 0;
        max-width: 360px;
    }
}

/* =========================
  WTU2 – Teal 2x2 Section (MATCH 1ST IMAGE)
========================= */
.wtu2-teal {
    position: relative;
    background: #6aa9b1;
    padding: 78px 0 88px;
    overflow: hidden;
    color: #fff;
}

.wtu2-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    grid-template-areas:
        "a b"
        "c d";
    gap: 46px 56px;
    align-items: start;
}

.wtu2-a {
    grid-area: a;
}

.wtu2-b {
    grid-area: b;
}

.wtu2-c {
    grid-area: c;
}

.wtu2-d {
    grid-area: d;
}

/* typography */
.wtu2-kicker {
    margin: 0 0 10px;
    font-weight: 900;
    font-size: 18px;
    letter-spacing: .24em;
    text-transform: uppercase;
    opacity: .95;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.wtu2-kicker--center {
    width: 100%;
    justify-content: center;
    text-align: center;
}

.wtu2-title {
    margin: 0 0 14px;
    font-size: clamp(30px, 3.1vw, 46px);
    line-height: 1.06;
    font-weight: 900;
}

.wtu2-title--center {
    text-align: center;
}

.wtu2-text {
    margin: 0;
    font-size: 18px;
    line-height: 1.85;
    color: rgba(255, 255, 255, .92);
    max-width: 640px;
}

.wtu2-text--center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 560px;
}

/* photos with multicolor border like screenshot */
.wtu2-photo {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, .12);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
}

/* gradient “frame” */
.wtu2-photo::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 22px;
    background: linear-gradient(90deg, #f2a44a, #e57cb7, #f7d67c);
    z-index: 0;
}

/* inner white border */
.wtu2-photo::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 14px;
    border: 2px solid rgba(255, 255, 255, .7);
    z-index: 1;
    pointer-events: none;
}

.wtu2-photo img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* sizing to match screenshot proportions */
.wtu2-photo--top {
    height: 320px;
    max-width: 520px;
    margin-left: auto;
}

.wtu2-photo--bottom {
    height: 320px;
    max-width: 520px;
}

/* bottom-right center block spacing */
.wtu2-d {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
    /* helps match the screenshot vertical alignment */
}

/* button */
.wtu2-actions {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

.wtu2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 900;
    font-size: 14px;
    color: #fff;
    background: linear-gradient(90deg, #f2a44a, #e57cb7);
    border: 2px solid rgba(255, 255, 255, .22);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
    transition: transform .15s ease, filter .15s ease;
}

.wtu2-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
}

/* =========================
  Decorative shapes like screenshot
========================= */
.wtu2-shape {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    opacity: .55;
}

/* top-right dots */
.wtu2-dots {
    top: 24px;
    right: 34px;
    width: 140px;
    height: 90px;
    background:
        radial-gradient(circle, rgba(247, 214, 124, .95) 52%, transparent 54%) 0 0/26px 26px;
    border-radius: 16px;
}

/* right-mid ring */
.wtu2-ring {
    right: -85px;
    top: 210px;
    width: 240px;
    height: 240px;
    border-radius: 999px;
    border: 42px solid rgba(255, 255, 255, .75);
    background: transparent;
    opacity: .35;
}

/* left star-ish “sun” */
.wtu2-sun {
    left: -42px;
    top: 140px;
    width: 120px;
    height: 120px;
    background: #f7d67c;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%,
            79% 91%, 50% 70%, 21% 91%, 32% 57%,
            2% 35%, 39% 35%);
    opacity: .45;
}

/* =========================
  Responsive
========================= */
@media (max-width: 991px) {
    .wtu2-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "a"
            "b"
            "c"
            "d";
        gap: 30px;
    }

    .wtu2-photo--top,
    .wtu2-photo--bottom {
        max-width: 100%;
        margin-left: 0;
    }

    .wtu2-d {
        align-items: flex-start;
        margin-top: 0;
    }

    .wtu2-title--center,
    .wtu2-text--center,
    .wtu2-kicker--center {
        text-align: left;
        justify-content: flex-start;
        margin-left: 0;
        margin-right: 0;
    }

    .wtu2-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 575px) {
    .wtu2-teal {
        padding: 60px 0 70px;
    }

    .wtu2-photo--top {
        height: 210px;
    }

    .wtu2-photo--bottom {
        height: 260px;
    }

    .wtu2-btn {
        width: 100%;
        max-width: 360px;
    }

    .wtu2-kicker {
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 16px;
    }

    .wtu2-title {
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .wtu2-text {
        font-size: 16px;
        font-weight: 600;
        color: white;
    }
}

/* =========================
   HQ (High Quality Childcare) Section
   Unique CSS names only ✅
========================= */

.hq-sec {
    background: #fff;
    padding: 90px 0;
}

.hq-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

.hq-row {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: center;
    margin-bottom: 86px;
}

.hq-row:last-child {
    margin-bottom: 0;
}

.hq-row--reverse .hq-copy {
    order: 2;
}

.hq-row--reverse .hq-media {
    order: 1;
}

.hq-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 22px;
    color: #1a1a1a;
    margin-bottom: 14px;
}

.hq-title {
    font-size: 34px;
    line-height: 1.18;
    margin: 0 0 14px 0;
    color: #0f0f0f;
}

.hq-text {
    margin: 0;
    font-size: 18px;
    line-height: 1.75;
    color: #4b4b4b;
    font-weight: 550;
    max-width: 560px;
}

.hq-media {
    background: #fff;
    padding: 12px;
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .10);
    overflow: hidden;
    transform: rotate(-1deg);
}

.hq-media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

/* Frame colors (unique class names) */
.hq-frame--pink {
    border: 3px solid rgba(233, 116, 150, .65);
}

.hq-frame--gold {
    border: 3px solid rgba(245, 196, 67, .70);
}

/* Responsive */
@media (max-width: 991px) {
    .hq-sec {
        padding: 70px 0;
    }

    .hq-row {
        grid-template-columns: 1fr;
        gap: 22px;
        margin-bottom: 60px;
    }

    .hq-row--reverse .hq-copy,
    .hq-row--reverse .hq-media {
        order: initial;
    }

    .hq-title {
        font-size: 28px;
    }

    .hq-media {
        transform: none;
    }
}

/* =========================
   Scholarship Hero (NEW)
   Unique class names ✅
========================= */

.sch-hero {
    margin-top: -90px;
    padding-top: 90px;
    padding: 0;
    background-image: url("../images/sholarship/sc-hero-bg.webp");
    background-size: cover;
    /* fill wide */
    background-position: center;
    /* keep centered */
    background-repeat: no-repeat;
}

.sch-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .12);
    /* subtle dark overlay */
    pointer-events: none;
}

.sch-hero {
    position: relative;
}

.sch-hero__inner {
    display: flex !important;
    /* override grid */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 72vh;
    /* keep hero height */
    text-align: center;
    padding: 70px 24px;
    flex: 1;
}

.sch-hero__center {
    width: 100%;
    max-width: 980px;
    /* controls line length */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sch-hero__title,
.sch-hero__sub {
    text-align: center !important;
}

.sch-hero__title {
    margin: 0 0 12px 0;
    color: #fff;
    font-size: 58px;
    line-height: 1.05;
    text-align: center;
    font-weight: 800;
}

.sch-hero__sub {
    margin: 0 0 20px 0;
    color: rgba(255, 255, 255, .95);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 16px;
    text-align: center;
    font-weight: 700;
}

.sch-hero__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Button */
.sch-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    padding: 14px 18px 14px 26px;
    border-radius: 999px;

    border: 2px solid rgba(255, 255, 255, .95);
    text-decoration: none;
    color: #fff;

    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(6px);

    box-shadow: 0 14px 35px rgba(0, 0, 0, .12);
}

.sch-btn__text {
    font-size: 18px;
    font-weight: 700;
}

.sch-btn__icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: #fff;
    color: #1f9b99;
    display: grid;
    place-items: center;
    font-size: 20px;
    font-weight: 900;
}

.sch-btn:hover {
    transform: translateY(-1px);
}

.sch-btn:active {
    transform: translateY(0);
}

/* Left stacked photos */
.sch-stack {
    position: relative;
    width: 320px;
    max-width: 100%;
    height: 260px;
}

.sch-card {
    position: absolute;
    width: 560px;
    height: 560px;
    background: transparent;
    /* remove white */
    padding: 0;
    /* remove white spacing */
    border-radius: 18px;

    overflow: hidden;
}

.sch-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent;
    display: block;
}


.sch-card--top {
    top: -100px;
    left: -100px;
    transform: rotate(-10deg);
}

.sch-card--bottom {
    bottom: -10px;
    left: 64px;
    transform: rotate(-6deg);
}

.sch-card--gold {
    border: 4px solid rgba(245, 196, 67, .95);
}

.sch-card--pink {
    border: 4px solid rgba(233, 116, 150, .95);
}

/* Right cut image */
.sch-cut {
    width: 360px;
    max-width: 100%;
    height: 320px;
    margin-left: auto;

    background: #fff;
    padding: 0;
    overflow: hidden;

    /* “cut corner / steps” vibe */
    border-radius: 34px;
    clip-path: polygon(0% 0%,
            100% 0%,
            100% 78%,
            86% 78%,
            86% 88%,
            72% 88%,
            72% 100%,
            0% 100%);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}

.sch-cut img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Responsive */
@media (max-width: 1100px) {
    .sch-hero__inner {
        grid-template-columns: 1fr;
        padding: 40px 22px;
        border-radius: 36px;
        text-align: center;
    }

    .sch-hero__title {
        font-size: 44px;
    }

    .sch-hero__sub {
        font-size: 14px;
    }

    .sch-stack {
        margin: 0 auto;
        height: 240px;
    }

    .sch-cut {
        margin: 10px auto 0;
        width: min(520px, 100%);
        height: 300px;
    }

    .sch-card {
        width: 240px;
        height: 150px;
    }
}

@media (max-width: 768px) {

    .sch-hero,
    .sch-hero__inner {
        min-height: 78vh;
        padding: 70px 18px;
    }
}

@media (max-width: 520px) {
    .sch-hero {
        padding: 18px 12px;
    }

    .sch-hero__inner {
        padding: 34px 16px;
    }

    .sch-hero__title {
        font-size: 34px;
    }

    .sch-btn {
        width: 100%;
        justify-content: space-between;
        padding-left: 18px;
    }

    .sch-card {
        width: 220px;
        height: 140px;
    }
}

/* =========================================================
   SCHOLARSHIP AWARDS SECTION (NEW)
   Uses unique class prefix: sch-awards__*
   No conflicts with .sch-card hero styles ✅
========================================================= */

.sch-awards {
    background: #ffffff;
    padding: 72px 0 82px;
}

.sch-awards__wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 18px;
}

.sch-awards__title {
    margin: 0 0 36px;
    text-align: center;
    font-weight: 900;
    font-size: clamp(22px, 2.3vw, 34px);
    line-height: 1.15;
    color: #0f0f0f;
}

.sch-awards__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
    align-items: start;
}

.sch-awards__item {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* image */
.sch-awards__media {
    width: 100%;
    border-radius: 26px;
    overflow: hidden;
    background: #fff;
    border: 3px solid rgba(0, 0, 0, .08);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .10);
}

.sch-awards__media img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

/* border color variants (like your sample) */
.sch-awards__media--pink {
    border-color: rgba(233, 116, 150, .70);
}

.sch-awards__media--gold {
    border-color: rgba(245, 196, 67, .75);
}

/* label */
.sch-awards__label {
    width: fit-content;
    min-width: 220px;
    margin: 14px auto 14px;
    padding: 9px 18px;
    border-radius: 10px;
    color: #fff;
    font-weight: 900;
    letter-spacing: .04em;
    text-align: center;
    font-size: 16px;
    line-height: 1.15;
}

.sch-awards__label--olive {
    background: #9aa34b;
}

.sch-awards__label--teal {
    background: #4ea3a8;
}

.sch-awards__label--orange {
    background: #d88f3b;
}

.sch-awards__label--dark {
    background: #2f4b3f;
}

/* text */
.sch-awards__text {
    margin: 0 auto 18px;
    max-width: 290px;
    font-size: 16px;
    line-height: 1.75;
    color: rgba(0, 0, 0, .55);
    font-weight: 600;
    text-align: left;
}

/* button */
.sch-awards__btn {
    margin-top: auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    width: 270px;
    padding: 12px 18px 12px 22px;
    border-radius: 999px;

    text-decoration: none;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: .12em;
    color: #fff;

    border: 2px solid rgba(255, 255, 255, .60);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .12);
    transition: transform .18s ease, filter .18s ease;
}

.sch-awards__btn-ico {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: #fff;
    color: #40765e;
    display: grid;
    place-items: center;
    font-weight: 900;
    letter-spacing: 0;
}

.sch-awards__btn--olive {
    background: #9aa34b;
}

.sch-awards__btn--teal {
    background: #4ea3a8;
}

.sch-awards__btn--orange {
    background: #d88f3b;
}

.sch-awards__btn--dark {
    background: #2f4b3f;
}

.sch-awards__btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
}

.sch-awards__btn:active {
    transform: translateY(0);
}

/* responsive */
@media (max-width: 1200px) {
    .sch-awards__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sch-awards__text {
        max-width: 320px;
    }
}

@media (max-width: 575px) {
    .sch-awards {
        padding: 56px 0 64px;
    }

    .sch-awards__grid {
        grid-template-columns: 1fr;
    }

    /* --- FIX START: Limit width and center cards --- */
    .sch-awards__item {
        /* This prevents the card (and image) from getting huge */
        max-width: 320px; 
        /* This centers the card in the middle of the screen */
        margin: 0 auto; 
        /* Optional: Centers the text/button content inside */
        align-items: center; 
        text-align: center; 
    }
    
    .sch-awards__media {
        /* Ensures the image container respects the max-width above */
        width: 90%; 
    }
    
    .sch-awards__label {
        /* Centers the colored labels */
        margin-left: auto;
        margin-right: auto;
    }
    /* --- FIX END --- */

    .sch-awards__text {
        max-width: 100%;
    }

    .sch-awards__btn {
        width: 100%;
        max-width: 360px;
    }
}


/* =========================================================
   PRESCHOOL SERVICE HERO (NEW)
   Unique class names: ps-*
========================================================= */

.ps-hero {
    margin-top: -90px;
    position: relative;
    overflow: hidden;
    min-height: 540px;
    background-image: url("../images/preschool/pre-school-hero-bg.webp");
    padding: 0;
    background-size: cover;
    /* fill wide */
    background-position: center;
    /* keep centered */
    background-repeat: no-repeat;
}

/* main container */
.ps-hero__wrap {
    min-height: 33vh;
    position: relative;
    z-index: 1;
    max-width: 1320px;
    margin: 0 auto;
    padding: 90px 18px;
}

.ps-hero__grid {
    padding-top: 30px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 34px;
    align-items: center;
}

/* left content */
.ps-hero__content {
    background: rgba(0, 0, 0, .18);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 20px;
    padding: 34px 30px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
}

.ps-hero__title {
    margin: 0 0 14px;
    color: #ffffff;
    font-weight: 900;
    line-height: 1.05;
    font-size: clamp(34px, 3.2vw, 62px);
    letter-spacing: -.02em;
}

.ps-hero__title span {
    font-weight: 300;
    opacity: .92;
}

.ps-hero__title strong {
    font-weight: 900;
}

.ps-hero__desc {
    margin: 0 0 22px;
    color: rgba(255, 255, 255, .92);
    font-weight: 700;
    line-height: 1.65;
    font-size: 16px;
    max-width: 720px;
}

/* buttons */
.ps-hero__actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.ps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px 14px 22px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 900;
    letter-spacing: .04em;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
    transition: transform .18s ease, filter .18s ease;
    min-width: 240px;
    color: #fff;
}

.ps-btn__ico {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #fff;
    color: #00706c;
    font-weight: 900;
}

.ps-btn--primary {
    background: linear-gradient(90deg, #f0a14f, #f59ca7);
    border: 2px solid rgba(255, 255, 255, .35);
}

.ps-btn--ghost {
    background: rgba(3, 47, 46, .55);
    border: 2px solid rgba(255, 255, 255, .65);
}

.ps-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
}

.ps-btn:active {
    transform: translateY(0);
}

/* right visual */
.ps-hero__visual {
    position: relative;
    min-height: 460px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.ps-hero__kids {
    width: 100%;
    max-width: 720px;
    height: auto;
    object-fit: contain;
    display: block;
    transform: translateY(10px);
}

/* bubbles */
.ps-bubbles {
    position: absolute;
    bottom: 34px;
    right: 30px;
    display: flex;
    gap: 18px;
    align-items: flex-end;
}

.ps-bubble {
    width: 150px;
    height: 170px;
    border-radius: 90px 90px 100px 100px;
    position: relative;
    padding: 18px 18px 22px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .22);
    color: #fff;
}

.ps-bubble:after {
    content: "";
    position: absolute;
    bottom: -18px;
    left: 50%;
    width: 38px;
    height: 38px;
    transform: translateX(-50%) rotate(45deg);
    border-radius: 10px;
    background: inherit;
    filter: brightness(.98);
}

.ps-bubble--green {
    background: #4da24f;
}

.ps-bubble--blue {
    background: #78aefc;
}

.ps-bubble--orange {
    background: #f39a22;
}

.ps-bubble__big {
    font-weight: 900;
    font-size: 40px;
    line-height: 1;
    margin-bottom: 10px;
}

.ps-bubble__small {
    font-weight: 800;
    opacity: .95;
    line-height: 1.2;
    font-size: 14px;
}

.ps-bubble__star {
    font-size: 26px;
    vertical-align: middle;
}

.ps-bubble__avatars {
    display: flex;
    gap: 6px;
}

.ps-bubble__avatars span {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

/* responsive */
@media (max-width: 1100px) {
    .ps-hero__grid {
        grid-template-columns: 1fr;
    }

    .ps-hero__visual {
        min-height: 420px;
    }

    .ps-bubbles {
        right: 16px;
        bottom: 18px;
        transform: scale(.92);
        transform-origin: right bottom;
    }
}

@media (max-width: 575px) {
    .ps-hero__visual {
        margin-top: -300px;
    }

    .ps-hero {
        padding: 20px 0 64px;
        min-height: auto;
    }

    .ps-hero__content {
        padding: 24px 18px;
    }

    .ps-hero__desc {
        font-size: 14px;
    }

    .ps-btn {
        width: 100%;
        min-width: 0;
    }

    .ps-bubbles {
        position: static;
        margin-top: 12px;
        justify-content: center;
        transform: none;
    }

    .ps-bubble {
        width: 122px;
        height: 150px;
    }

    .ps-bubble__big {
        font-size: 34px;
    }
}


/* =========================
   WHY TRUST US (NEXT SECTION)
========================= */
.wtus-next {
    position: relative;
    background: #ffffff;
    color: #111;
    padding: 64px 0 74px;
    overflow: hidden;
}

.wtus-next__top {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 16px;
}

.wtus-next__label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 20px;
    color: #111;
}

.wtus-next__sun {
    font-size: 18px;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .08));
}

.wtus-next__grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 34px;
    align-items: start;
}

.wtus-next__ribbon {
    position: relative;
    margin: 8px 0 18px;
    width: fit-content;
    padding: 12px 26px;

    color: #fff;
    background: #e0a04a;
    border-radius: 10px;

    font-weight: 900;
    font-size: clamp(22px, 2.4vw, 44px);
    line-height: 1.1;
    text-align: left;

    box-shadow: none;
    /* keep it flatter like the reference */
}

/* angled ribbon ends */
.wtus-next__ribbon::before,
.wtus-next__ribbon::after {
    content: "";
    position: absolute;
    top: 0;
    width: 22px;
    height: 100%;
    background: #e0a04a;
}

.wtus-next__ribbon::before {
    left: -16px;
    transform: skewX(-18deg);
    border-radius: 10px 0 0 10px;
}

.wtus-next__ribbon::after {
    right: -16px;
    transform: skewX(-18deg);
    border-radius: 0 10px 10px 0;
}

.wtus-next__lead {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.8;
    font-weight: 700;
    color: rgba(0, 0, 0, .72);
    max-width: 820px;
}

.wtus-next__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px;
}

.wtus-next__list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 15px;
    line-height: 1.75;
    font-weight: 700;
    color: rgba(0, 0, 0, .78);
}

.wtus-next__bullet {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(245, 196, 67, .25);
    border: 1px solid rgba(245, 196, 67, .55);
    margin-top: 2px;
}

.wtus-next__list li strong {
    text-transform: uppercase;
}

.wtus-next__right {
    display: flex;
    justify-content: flex-end;
}

.wtus-next__photo {
    width: min(560px, 100%);
    border-radius: 18px;
    overflow: hidden;
    background: #fff;

    border: 4px solid rgba(233, 116, 150, .85);
    box-shadow: 0 22px 55px rgba(0, 0, 0, .18);
}

.wtus-next__photo img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* soft corner shape (top-right) */
.wtus-next__corner {
    position: absolute;
    right: -80px;
    top: -120px;
    width: 520px;
    height: 520px;
    background: rgba(245, 196, 67, .14);
    transform: rotate(12deg);
    border-radius: 80px;
    pointer-events: none;
}

/* responsive */
@media (max-width: 991px) {
    .wtus-next__grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .wtus-next__right {
        justify-content: flex-start;
    }

    .wtus-next__ribbon {
        font-size: 30px;
        padding: 16px 16px;
    }

    .wtus-next__lead {
        font-size: 16px;
    }

    .wtus-next__list li {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .wtus-next__top {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
}


/* =========================
   PRESCHOOL PROGRAMS SECTION
   (Our Preschool Programs in Miami)
========================= */
.pprog-sec {
    position: relative;
    background: #ffffff;
    color: #111;
    padding: 74px 0 84px;
    overflow: hidden;
}

.pprog-top {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.pprog-label {
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 20px;
    color: #111;
}

.pprog-sun {
    font-size: 18px;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .08));
}

.pprog-ribbon {
    position: relative;
    margin: 0 auto 18px;
    width: fit-content;
    padding: 12px 26px;

    color: #fff;
    background: #e0a04a;
    border-radius: 10px;

    font-weight: 900;
    font-size: clamp(22px, 2.4vw, 44px);
    line-height: 1.1;
    text-align: center;
    box-shadow: none;
    /* optional: keep it flat like the screenshot */
}


/* top-right "tab" */
.pprog-ribbon::before,
.pprog-ribbon::after {
    content: "";
    position: absolute;
    top: 0;
    width: 22px;
    height: 100%;
    background: #e0a04a;
}

.pprog-ribbon::before {
    left: -16px;
    transform: skewX(-18deg);
    border-radius: 10px 0 0 10px;
}

.pprog-ribbon::after {
    right: -16px;
    transform: skewX(-18deg);
    border-radius: 0 10px 10px 0;
}

.pprog-lead {
    max-width: 980px;
    margin: 0 auto 42px;
    text-align: center;
    font-size: 18px;
    line-height: 1.75;
    font-weight: 700;
    color: rgba(0, 0, 0, .70);
}

.pprog-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    align-items: start;
    margin-top: 10px;
}

.pprog-item {
    text-align: center;
    padding: 10px 8px;
}

.pprog-ico {
    width: 74px;
    height: 74px;
    margin: 0 auto 14px;
    border-radius: 999px;
    background: #eef0ff;
    /* light lavender circle */
    border: 1px solid rgba(0, 0, 0, .06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d99a4a;
    /* icon color */
}

.pprog-title {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.2;
    color: #111;
}

.pprog-text {
    margin: 0 auto;
    max-width: 270px;
    font-size: 15px;
    line-height: 1.75;
    font-weight: 700;
    color: rgba(0, 0, 0, .55);
}

/* Decorative dots (top-right + bottom-left) */
.pprog-dots {
    position: absolute;
    width: 150px;
    height: 100px;
    background: radial-gradient(circle, rgba(217, 154, 74, .95) 52%, transparent 54%) 0 0/30px 30px;
    border-radius: 16px;
    opacity: .9;
    pointer-events: none;
}

.pprog-dots--tr {
    top: 36px;
    right: 26px;
}

.pprog-dots--bl {
    bottom: 40px;
    left: 18px;
    transform: scale(1.05);
}

/* Responsive */
@media (max-width: 991px) {
    .pprog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pprog-lead {
        text-align: left;
    }

    .pprog-ribbon {
        margin-left: 0;
        margin-right: 0;
    }

    .pprog-top {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .pprog-label {
        font-size: 20px;
    }
    .wtu2-dots {
        display: none !important;
    }
}

@media (max-width: 575px) {
    .pprog-grid {
        grid-template-columns: 1fr;
    }

    .pprog-item {
        text-align: left;
    }

    .pprog-ico {
        margin-left: 0;
        margin-right: 0;
    }

    .pprog-text {
        font-size: 16px;
        max-width: 100%;
    }

    .pprog-dots {
        display: none !important;
    }
}

/* =========================
   FULL SECURITY + ENRICHMENT
========================= */

.fs-sec {
    position: relative;
    padding: 84px 0 92px;
    color: #fff;
    overflow: hidden;

    /* background image support */
    background: #6aa9b1;
    background-image:
        linear-gradient(0deg, rgba(7, 19, 24, 0.18), rgba(7, 19, 24, 0.18)),
        var(--fs-bg);
    background-size: cover;
    background-position: center;
}

/* Decorative ring (optional like screenshot) */
.fs-shape.fs-ring {
    position: absolute;
    left: -140px;
    top: 520px;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    border: 44px solid rgba(255, 255, 255, .22);
    pointer-events: none;
    z-index: 1;
}

/* Layout */
.fs-top {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    gap: 40px;
    align-items: start;
}

.fs-left {
    max-width: 720px;
}

.fs-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: 20px;
    opacity: .95;
    margin-bottom: 12px;
}

.fs-kicker--center {
    width: 100%;
    justify-content: center;
    margin-top: 74px;
    margin-bottom: 14px;
}

.fs-sun {
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .18));
}

.fs-title {
    margin: 0 0 18px;
    font-weight: 900;
    line-height: 1.08;
    font-size: clamp(28px, 3.2vw, 46px);
    text-shadow: 0 18px 40px rgba(0, 0, 0, .16);
}

.fs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px;
    max-width: 720px;
}

.fs-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-weight: 800;
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .92);
}

.fs-bullet {
    color: #ffd24a;
    flex: 0 0 auto;
    margin-top: 2px;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .18));
}

/* Photo */
.fs-right {
    display: flex;
    justify-content: flex-end;
}

.fs-photo {
    width: min(520px, 100%);
    border-radius: 22px;
    overflow: hidden;

    /* border treatment like screenshot */
    border: 3px solid rgba(255, 255, 255, .70);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .22);

    /* pink outline hint */
    outline: 3px solid rgba(233, 116, 150, .65);
    outline-offset: -6px;
}

.fs-photo img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Bottom content */
.fs-bottom {
    position: relative;
    z-index: 2;
    text-align: center;
}

.fs-subtitle {
    margin: 0 0 10px;
    font-weight: 900;
    font-size: clamp(24px, 2.6vw, 40px);
    line-height: 1.12;
}

.fs-subdesc {
    margin: 0 auto 34px;
    max-width: 780px;
    color: rgba(255, 255, 255, .88);
    font-weight: 700;
    line-height: 1.6;
    font-size: 16px;
}

/* Activity icons row */
.fs-cards {
    display: flex;
    gap: 34px;
    justify-content: center;
    flex-wrap: wrap;
}

.fs-card {
    width: 210px;
    text-align: center;
}

.fs-ico {
    width: 88px;
    height: 88px;
    border-radius: 999px;
    margin: 0 auto 12px;

    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .20);

    display: grid;
    place-items: center;
    font-size: 34px;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.fs-ico svg {
    width: 48px;
    height: 48px;
}

.fs-card-title {
    font-weight: 900;
    font-size: 14px;
    color: rgba(255, 255, 255, .92);
    line-height: 1.25;
}

/* Responsive */
@media (max-width: 991px) {
    .fs-top {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .fs-right {
        justify-content: flex-start;
    }

    .fs-kicker {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .fs-title {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .fs-subtitle {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .fs-subdesc {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .fs-bottom {
        text-align: left;
    }

    .fs-cards {
        justify-content: flex-start;
    }

    .fs-card-title {
        font-size: 15px;
    }
}

@media (max-width: 575px) {
    .fs-sec {
        padding: 64px 0 72px;
    }

    .fs-photo {
        outline: none;
    }

    .fs-card {
        width: 100%;
        max-width: 320px;
        display: grid;
        grid-template-columns: 88px 1fr;
        gap: 14px;
        align-items: center;
        text-align: left;
    }

    .fs-ico {
        margin: 0;
    }
}

/* =========================
   LOCATIONS
========================= */

.loc-sec {
    background: #fff;
    color: #111;
    padding: 84px 0 92px;
}

.loc-title {
    margin: 0 0 12px;
    text-align: center;
    font-weight: 900;
    font-size: clamp(28px, 3vw, 40px);
}

.loc-sub {
    margin: 0 auto 42px;
    max-width: 950px;
    text-align: center;
    font-size: 18px;
    line-height: 1.85;
    font-weight: 700;
    color: rgba(0, 0, 0, .62);
}

.loc-sub strong,
.loc-sub .bold-brickel {
    font-size: 20px;
    font-weight: 900 !important;
    color: #000000 !important;
}

.loc-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.loc-card {
    position: relative;
    min-height: 118px;
    border-radius: 18px;
    background: #fff;

    border: 3px solid rgba(224, 160, 74, .95);
    /* orange border */
    box-shadow: 0 18px 42px rgba(0, 0, 0, .06);

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;
    color: #111;

    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.loc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 55px rgba(0, 0, 0, .10);
    filter: brightness(1.01);
}

.loc-name {
    font-weight: 900;
    letter-spacing: .06em;
    font-size: 16px;
}

/* placeholder icon bottom-right (replace later with real image if you want) */
.loc-ph {
    position: absolute;
    right: 14px;
    bottom: 12px;
    font-weight: 900;
    font-size: 28px;
    line-height: 1;
    color: rgba(0, 0, 0, .18);
    user-select: none;
}

/* CTA button */
.loc-cta {
    margin-top: 34px;
    display: flex;
    justify-content: center;
}

.loc-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    padding: 14px 18px 14px 26px;
    border-radius: 999px;

    text-decoration: none;
    color: #fff;
    font-weight: 800;

    background: linear-gradient(90deg, #f2a44a 0%, #e57cb7 100%);
    border: 2px solid rgba(255, 255, 255, .65);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .12);

    transition: transform .18s ease, filter .18s ease;
}

.loc-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
}

.loc-btn-ico {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: #fff;
    color: #40765e;
    display: grid;
    place-items: center;
    font-weight: 900;
}


/* Responsive */
@media (max-width: 991px) {
    .loc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .loc-sub {
        text-align: center;
    }
}

@media (max-width: 575px) {
    .loc-sec {
        padding: 64px 0 72px;
    }

    .loc-grid {
        grid-template-columns: 1fr;
    }

    .loc-card {
        min-height: 110px;
    }

    .loc-cta {
        justify-content: flex-start;
    }

    .loc-btn {
        width: 100%;
        max-width: 360px;
        justify-content: space-between;
    }
}

/* =========================
   CONTACT HERO
========================= */

.cu-hero {
    /* REMOVE this (it's invalid CSS): padding-top: -100px; */

    /* Pull hero behind the fixed header so the top is green/image */
    margin-top: calc(-1 * var(--headerH));
    padding-top: calc(var(--headerH) + 24px);

    padding-bottom: 96px;
    background-image: url("../images/contact/contact-us-banner.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* You can REMOVE this extra push (or set it to 0) */
.cu-hero .hero-container {
    padding-top: 0;
}

.cu-kicker {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    margin-top: 20px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 30px;
    color: rgba(255, 255, 255, .95);
}

.cu-sun {
    font-size: 18px;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .18));
}

/* stage holds kids + glass */
.cu-stage {
    position: relative;
    border-radius: 26px;
    min-height: 360px;
    overflow: hidden;
    padding: 44px 18px;
}

/* kids */
.cu-kid {
    position: absolute;
    bottom: -14px;
    width: 320px;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
}

.cu-kid--left {
    left: 26px;
}

.cu-kid--right {
    right: 26px;
}

/* center glass */
.cu-glass {
    position: relative;
    z-index: 2;
    max-width: 980px;
    margin: 0 auto;

    background: rgba(0, 0, 0, .30);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 18px;

    padding: 26px 26px 22px;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow: 0 22px 70px rgba(0, 0, 0, .22);
    text-align: center;
}

.cu-lead {
    margin: 0 0 16px;
    font-weight: 900;
    font-size: 18px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .98);
}

.cu-body {
    margin: 0;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .88);
}

.cu-list {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    display: grid;
    gap: 8px;

    font-weight: 800;
    font-size: 14px;
    color: rgba(255, 255, 255, .92);
}

/* Responsive */
@media (max-width: 991px) {
    .cu-stage {
        display: flex;
        align-items: center;
        /* vertical */
        justify-content: center;
        /* horizontal */
        text-align: center;
        /* multi-line text */
        padding: 34px 14px;
    }

    .cu-kid {
        width: 240px;
        opacity: .95;
    }

    .cu-kid--left {
        left: 8px;
    }

    .cu-kid--right {
        right: 8px;
    }

    .cu-glass {
        text-align: left;
        padding: 22px 18px;
    }
}

@media (max-width: 575px) {
    .cu-hero {
        padding: 90px 0 72px;
    }

    /* hide kids to avoid overlap on small screens */
    .cu-kid {
        display: none;
    }

    .cu-glass {
        max-width: 100%;
        text-align: left;
    }
}

/* =========================
   ENROLL / SEE YOU SOON
========================= */

.enroll-sec {
    position: relative;
    background: #fffdf3;
    /* warm off-white */
    padding: 70px 0 92px;
    overflow: hidden;
}

/* soft star shapes in background */
.enroll-star {
    position: absolute;
    width: 520px;
    height: 520px;
    background: rgba(255, 214, 92, .18);
    clip-path: polygon(50% 0%,
            61% 35%,
            98% 35%,
            68% 57%,
            79% 91%,
            50% 70%,
            21% 91%,
            32% 57%,
            2% 35%,
            39% 35%);
    filter: blur(0px);
    pointer-events: none;
    z-index: 0;
}

.enroll-star--l {
    left: -260px;
    top: 40px;
}

.enroll-star--r {
    right: -260px;
    top: 70px;
}

/* top mini features row */
.enroll-top {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
    align-items: start;
    margin-bottom: 40px;
}

.enroll-mini {
    text-align: center;
}

.enroll-mini-ico {
    font-size: 44px;
    margin-bottom: 10px;
    color: #e0a04a;
}

.enroll-mini-txt {
    font-weight: 800;
    font-size: 16px;
    line-height: 1.35;
    color: rgba(0, 0, 0, .62);
}

/* main grid */
.enroll-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 44px;
    align-items: center;
}

/* kicker */
.enroll-kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: 20px;
    color: rgba(0, 0, 0, .74);
    margin-bottom: 14px;
}

.enroll-title {
    margin: 0 0 12px;
    font-weight: 900;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.05;
    color: #0f2940;
}

.enroll-desc {
    margin: 0 0 24px;
    max-width: 680px;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.75;
    color: rgba(0, 0, 0, .62);
}

/* buttons */
.enroll-cta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.enroll-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px 12px 22px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .10);
    border: 2px solid rgba(255, 255, 255, .65);
    transition: transform .18s ease, filter .18s ease;
}

.enroll-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
}

.enroll-btn--gold {
    background: linear-gradient(90deg, #f2a44a 0%, #e57cb7 100%);
}

.enroll-btn--green {
    background: #1c8b49;
    border-color: rgba(233, 116, 150, .65);
}

.enroll-arrow {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: #fff;
    color: #40765e;
    display: grid;
    place-items: center;
    font-weight: 900;
}

/* photo card */
.enroll-photo {

    padding: 6px;
}

.enroll-photo img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

/* Responsive */
@media (max-width: 991px) {
    .enroll-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .enroll-grid {
        grid-template-columns: 1fr;
    }

    .enroll-kicker {
        display: flex;
        align-items: center;
        /* vertical */
        justify-content: center;
        /* horizontal */
        text-align: center;
        /* multi-line text */
        padding: 18px 16px;
    }

}

@media (max-width: 575px) {
    .enroll-sec {
        padding: 56px 0 72px;
    }

    .enroll-top {
        gap: 18px;
    }

    .enroll-mini-ico {
        font-size: 40px;
    }

    .enroll-cta {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: 100%;
    }

    .enroll-cta .enroll-btn {
        width: min(340px, 100%);
        justify-content: space-between;
    }
}

/* CALL NOW button */
.btn-call {
    background: #ffffff;
    color: #1f7a55;
    border: 1px solid rgba(255, 255, 255, 0.65);
    font-weight: 700;
    letter-spacing: .2px;
}

.btn-call:hover {
    background: rgba(255, 255, 255, 0.92);
    color: #166545;
}

/* Mobile menu polish */
.menu-top {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    padding: 14px;
    display: grid;
    gap: 12px;
}

.menu-social {
    display: flex;
    gap: 10px;
    align-items: center;
}

.menu-actions {
    display: grid;
    gap: 10px;
}

/* Optional: make menu links feel cleaner */
.menu-links a {
    padding: 14px 10px;
    border-radius: 12px;
    font-weight: 600;
}

.menu-links a:hover {
    background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 575px) {
    .menu-top {
        margin-top: -50px;
    }

    .btn-call {
        background: #188754;
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.65);
        font-weight: 700;
        letter-spacing: .2px;
    }
}

/* ===== FORCE Virtual Tour button color (MOBILE MENU) ===== */
@media (max-width: 991px) {

    /* make the mobile menu buttons same width + centered */
    .menu-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* override bootstrap + existing styles for Virtual Tour */
    .menu-top .btn.btn-pill.btn-virtual {
        background-color: #118383 !important;
        /* ✅ change this color */
        border-color: rgba(255, 255, 255, 0.55) !important;
        color: #fff !important;
    }

    .menu-top .btn.btn-pill.btn-virtual:hover {
        background-color: #118383 !important;
        color: #fff !important;
    }
}

/* =========================
   CHATBOT (Floating)
========================= */
#chatbot-fab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    cursor: pointer;
    user-select: none;

    background: linear-gradient(90deg, #ffcc4a, #f07aa6);
    color: #fff;
    font-size: 22px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
    z-index: 1200;
}

#chatbot-container {
    position: fixed;
    right: 18px;
    bottom: 86px;
    width: min(360px, calc(100vw - 36px));
    height: 520px;

    display: flex;
    flex-direction: column;

    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .22);
    overflow: hidden;
    z-index: 1200;

    transform: translateY(10px) scale(.98);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

/* open state */
#chatbot-container.is-open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

/* IMPORTANT: fix the “faded” text (your body color is white) */
#chatbot-container,
#chatbot-container * {
    color: #132018 !important;
}

#chatbot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    padding: 12px 12px 12px 14px;
    background: linear-gradient(90deg, #f07aa6, #ffcc4a);
}

#chatbot-header span {
    font-weight: 800;
    letter-spacing: .2px;
    color: #fff !important;
}

#chatbot-close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .14);
    color: #fff !important;
    display: grid;
    place-items: center;
    cursor: pointer;
}

#chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    background: #f6f7f8;
}

/* bubbles */
.chatbot-message {
    max-width: 86%;
    padding: 10px 12px;
    border-radius: 14px;
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.4;
}

.bot-message {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .05);
}

.user-message {
    margin-left: auto;
    background: rgba(63, 118, 93, .12);
    border: 1px solid rgba(63, 118, 93, .22);
}

/* quick replies area */
#chatbot-input {
    padding: 12px;
    background: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, .08);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.chatbot-button {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, .10);
    background: #ffffff;
    padding: 10px 10px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;

    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.chatbot-button:hover {
    background: rgba(240, 122, 166, .10);
    border-color: rgba(240, 122, 166, .35);
    transform: translateY(-1px);
}

/* mobile: bigger panel */
@media (max-width: 575px) {
    #chatbot-container {
        right: 12px;
        left: 12px;
        width: auto;
        height: min(70vh, 560px);
        bottom: 84px;
    }

    #chatbot-fab {
        right: 14px;
        bottom: 14px;
    }

    #chatbot-input {
        grid-template-columns: 1fr;
    }
}

/* ✅ typing dots */
.chatbot-typing {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 10px 12px;
}

.chatbot-typing .dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .35);
    display: inline-block;
    animation: chatbotDot 1s infinite ease-in-out;
}

.chatbot-typing .dot:nth-child(2) {
    animation-delay: .15s;
}

.chatbot-typing .dot:nth-child(3) {
    animation-delay: .3s;
}

@keyframes chatbotDot {

    0%,
    80%,
    100% {
        transform: translateY(0);
        opacity: .35;
    }

    40% {
        transform: translateY(-3px);
        opacity: 1;
    }
}