/* ==========================================================================
   1. BRAND VARIABLES & RESET
   ========================================================================== */
:root {
    --brand-purple: #481A7E;           /* Deep Royal Purple from Reference */
    --brand-purple-dark: #381266;      
    --brand-yellow: #065517;           /* Warm Yellow from Reference */
    --text-dark: #1E1A29;              /* Nav Links Color */
    --bg-white: #FFFFFF;
    
    /* Scallop Ribbon Geometry */
    --scallop-solid-height: 14px;      /* Top solid strip */
    --scallop-wave-height: 18px;       /* Wave depth */
    --nav-top-gap: 34px;               /* Clean breathable gap below scallop */
    
    /* Layout Dimensions */
    --header-total-height: 104px;
    --font-heading: 'Fredoka', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --transition: all 0.22s ease-in-out;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    background-color: #FAF8F5;
    color: var(--text-dark);
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* ==========================================================================
   2. HEADER & SCALLOPED CANOPY
   ========================================================================== */
.xk-header {
    position: relative;
    width: 100%;
    background-color: var(--bg-white);
    box-shadow: 0 4px 18px rgba(72, 26, 126, 0.05);
    z-index: 1000;
}

/* Top Purple Ribbon */
.xk-scallop-ribbon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--scallop-solid-height);
    background-color: var(--brand-purple);
    z-index: 1;
}

/* Exact Downward Scallop Semi-circle Canopy */
.xk-scallop-ribbon::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: var(--scallop-wave-height);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 18" width="34" height="18"><path d="M0,0 L34,0 C34,9.94 26.39,18 17,18 C7.61,18 0,9.94 0,0 Z" fill="%23481A7E"/></svg>');
    background-repeat: repeat-x;
    background-size: 34px 18px;
}

/* Container */
.xk-header-container {
    max-width: 1540px;
    margin: 0 auto;
    padding: 0 2rem;
    height: var(--header-total-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   3. LOGO CARD
   ========================================================================== */
.xk-logo-card {
    position: relative;
    z-index: 5;
    background-color: var(--bg-white);
    padding: 4px 14px 6px 14px;
    border-radius: 0 0 16px 16px;
   
    flex-shrink: 0;
}

.xk-logo-anchor {
    display: flex;
    align-items: center;
}

.xk-brand-logo {
    height: 100px;
    width: 100x;
   
    object-fit: contain;
    display: block;
}

/* ==========================================================================
   4. DESKTOP NAVIGATION WITH AUTHENTIC SPACING (THE GAP)
   ========================================================================== */
.xk-main-nav {
    display: flex;
    align-items: center;
    margin-top: var(--nav-top-gap); /* Creates the exact gap under the scallop */
}

.xk-nav-menu {
    display: flex;
    align-items: center;
    gap: 1.95rem; /* Spacious horizontal gap between links */
}

.xk-menu-link {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-dark);
    padding: 4px 0;
    position: relative;
    display: inline-block;
    letter-spacing: 0.15px;
    transition: var(--transition);
    white-space: nowrap;
}

.xk-menu-link:hover {
    color: var(--brand-purple);
}

/* Active Nav State: Yellow Text + Crisp Solid Yellow Underline */
.xk-menu-link.is-active {
    color: var(--brand-yellow);
    font-weight: 700;
}

.xk-menu-link.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 3.5px;
    background-color: var(--brand-yellow);
    border-radius: 3px;
}

/* ==========================================================================
   5. ENQUIRE NOW CTA BUTTON
   ========================================================================== */
.xk-header-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: var(--nav-top-gap); /* Vertically aligned with nav links */
    flex-shrink: 0;
}

.xk-enquire-btn {
    background-color: var(--brand-purple);
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    padding: 0.65rem 1.45rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    box-shadow: 0 4px 14px rgba(72, 26, 126, 0.25);
    transition: var(--transition);
}

.xk-plane-icon {
    transform: rotate(0deg);
    transition: transform 0.25s ease;
}

.xk-enquire-btn:hover {
    background-color: var(--brand-purple-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(72, 26, 126, 0.35);
}

.xk-enquire-btn:hover .xk-plane-icon {
    transform: translate(2px, -2px) rotate(6deg);
}

/* ==========================================================================
   6. STICKY HEADER
   ========================================================================== */
.xk-header.is-sticky {
    position: sticky;
    top: 0;
    box-shadow: 0 6px 22px rgba(72, 26, 126, 0.12);
}

/* ==========================================================================
   7. HAMBURGER & MOBILE DRAWER
   ========================================================================== */
.xk-hamburger-btn {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    flex-direction: column;
    gap: 5px;
    z-index: 105;
}

.xk-hamburger-bar {
    width: 26px;
    height: 3px;
    background-color: var(--brand-purple);
    border-radius: 3px;
    transition: var(--transition);
}

.xk-mobile-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(45, 15, 80, 0.5);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1100;
}

.xk-mobile-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
}

.xk-mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 310px;
    max-width: 85vw;
    height: 100%;
    background-color: #FFFFFF;
    box-shadow: -8px 0 25px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1200;
    display: flex;
    flex-direction: column;
}

.xk-mobile-drawer.is-open {
    transform: translateX(0);
}

.xk-drawer-head {
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #F3EEFA;
}

.xk-drawer-close {
    background: #F3EEFA;
    border: none;
    color: var(--brand-purple);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.xk-drawer-close:hover {
    background-color: var(--brand-purple);
    color: #FFFFFF;
}

.xk-drawer-body {
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.xk-drawer-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.xk-drawer-link {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    display: block;
    transition: var(--transition);
}

.xk-drawer-link:hover,
.xk-drawer-link.is-active {
    color: var(--brand-purple);
    background-color: #F6F0FF;
}

.xk-drawer-link.is-active {
    border-left: 4px solid var(--brand-yellow);
}

.xk-btn-full {
    width: 100%;
    justify-content: center;
    padding: 0.85rem;
    font-size: 1.05rem;
}

/* ==========================================================================
   8. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Laptops (1280px - 1440px) */
@media (max-width: 1400px) {
    .xk-nav-menu {
        gap: 1.35rem;
    }
    .xk-menu-link {
        font-size: 0.98rem;
    }
    .xk-enquire-btn {
        padding: 0.62rem 1.25rem;
        font-size: 0.95rem;
    }
}

@media (max-width: 1200px) {
    .xk-nav-menu {
        gap: 0.95rem;
    }
    .xk-menu-link {
        font-size: 0.9rem;
    }
    .xk-brand-logo {
        height: 68px;
    }
}

/* Tablet & Mobile (<= 1024px) */
@media (max-width: 1024px) {
    :root {
        --header-total-height: 84px;
        --nav-top-gap: 14px;
    }
    .xk-main-nav {
        display: none;
    }
    .xk-hamburger-btn {
        display: flex;
    }
    .xk-enquire-btn {
        display: none;
    }
    .xk-brand-logo {
        height: 58px;
    }
}

@media (max-width: 480px) {
    .xk-header-container {
        padding: 0 1rem;
    }
    .xk-brand-logo {
        height: 50px;
    }
}








/* ==========================================================================
   HERO SECTION STYLES (XAVIER KIDS)
   ========================================================================== */

/* 1. Hero Container & Base Layout */
.hero {
    position: relative;
    width: 100%;
    min-height: 620px;
    background: radial-gradient(circle at 20% 30%, #FFFFFF 0%, #FBF9F5 60%, #F5EFE6 100%);
    overflow: hidden;
    padding-top: 1.5rem;
    padding-bottom: 5rem; /* Room for overlapping marquee strip */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-container {
    max-width: 1540px;
    margin: 0 auto;
    padding: 0 2.5rem;
    width: 100%;
    display: grid;
    grid-template-columns: 1.05fr 1.15fr;
    align-items: center;
    gap: 2rem;
    position: relative;
    z-index: 10;
}

/* ==========================================================================
   2. HERO LEFT COLUMN CONTENT
   ========================================================================== */
.hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 12;
    padding-left: 2.5rem;
}

.hero-eyebrow {
    margin-bottom: 0.4rem;
}

.hero-eyebrow-text {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 600;
    color: #381464;
    letter-spacing: 0.2px;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 4.4vw, 4.4rem);
    font-weight: 700;
    line-height: 1.12;
    margin-bottom: 1.25rem;
    letter-spacing: -0.5px;
}

.text-learn { color: #381464; }
.text-play { color: #E84855; }
.text-amp { color: #381464; font-weight: 600; }
.text-grow { color: var(--brand-yellow); }
.text-together { color: #381464; }

.hero-title-line2 {
    position: relative;
    display: inline-block;
}

.hero-title-underline {
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 100%;
    max-width: 320px;
    pointer-events: none;
    z-index: -1;
}

.hero-description {
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 600;
    color: #4A4458;
    line-height: 1.6;
    max-width: 540px;
    margin-bottom: 1.75rem;
}

/* ==========================================================================
   3. ADMISSION BANNER (CENTER ALIGNED & NO ICON)
   ========================================================================== */
.hero-admission {
    background: linear-gradient(135deg, #3B1569 0%, #2A0B50 100%);
    border-radius: 20px;
    padding: 0.95rem 2.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 10px 24px rgba(56, 20, 100, 0.28);
    border: 2px solid rgba(255, 184, 0, 0.3);
    margin-bottom: 2rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hero-admission:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(56, 20, 100, 0.36);
}

.hero-admission-title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.25;
}

.hero-admission-year {
    color: #FFC72C;
    font-weight: 700;
}

.hero-admission-subtitle {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 700;
    color: #E2D4F8;
    letter-spacing: 0.4px;
    margin-top: 2px;
}

/* ==========================================================================
   4. HERO CTA BUTTON GROUP (2 BUTTONS)
   ========================================================================== */
.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.hero-btn {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    padding: 0.75rem 1.6rem;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
}

.hero-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease;
}

.hero-btn-secondary {
    background-color: #FFFFFF;
    color: #381464;
    border: 2px solid #381464;
    box-shadow: 0 4px 14px rgba(56, 20, 100, 0.08);
}

.hero-btn-secondary:hover {
    background-color: #F6EFFF;
    transform: translateY(-2.5px);
    box-shadow: 0 8px 20px rgba(56, 20, 100, 0.16);
    color: #240A44;
}

.hero-btn-secondary:hover .hero-btn-icon {
    transform: scale(1.15);
}

/* ==========================================================================
   5. HERO RIGHT COLUMN (STUDENT MEDIA)
   ========================================================================== */
.hero-media {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-image-frame {
    position: relative;
    width: 100%;
    max-width: 760px;
    border-radius: 40px 180px 40px 40px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(56, 20, 100, 0.12);
    border: 6px solid #FFFFFF;
    background-color: #E2ECE9;
}

.hero-students-img {
    width: 100%;
    height: auto;
    min-height: 440px;
    max-height: 520px;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.6s ease;
}

.hero-image-frame:hover .hero-students-img {
    transform: scale(1.02);
}

.hero-image-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0) 75%, rgba(103,176,42,0.2) 100%);
}

/* ==========================================================================
   6. STATIONERY & SHARPENER IMAGE LOCATION
   ========================================================================== */
.hero-stationery {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 15;
}

.hero-pencil-wrap {
    position: absolute;
    top: 24%;
    left: -15px;
    transform: rotate(-18deg);
    filter: drop-shadow(4px 12px 20px rgba(0, 0, 0, 0.18));
}

.hero-pencil-svg {
    height: 360px;
    width: auto;
}

/* Custom Sharpener Image Container (Bottom-Left) */
.hero-sharpener-image-container {
    position: absolute;
    bottom: 30px;
    left: 25px;
    z-index: 16;
    pointer-events: auto;
    transition: transform 0.3s ease;
}

.hero-sharpener-image-container:hover {
    transform: scale(1.06) rotate(-4deg);
}

.hero-sharpener-img {
    max-width: 130px;
    height: auto;
    display: block;
    filter: drop-shadow(0 10px 18px rgba(65, 19, 117, 0.28));
}

/* Doodles & Sun */
.hero-doodles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

.hero-plane-wrap {
    position: absolute;
    top: 60px;
    left: 36%;
    animation: planeDrift 7s ease-in-out infinite alternate;
}

.hero-sun-wrap {
    position: absolute;
    top: 20px;
    right: 3%;
    z-index: 12;
    animation: sunPulse 6s ease-in-out infinite alternate;
}

.sun-rays {
    transform-origin: center;
    animation: sunSpin 24s linear infinite;
}

@keyframes planeDrift {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(12px, -8px) rotate(5deg); }
}

@keyframes sunPulse {
    0% { transform: scale(0.95); }
    100% { transform: scale(1.05); }
}

@keyframes sunSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.hero-cloud-1 {
    position: absolute;
    top: 70px;
    right: 14%;
    opacity: 0.85;
    animation: cloudDrift 9s ease-in-out infinite alternate;
}

@keyframes cloudDrift {
    0% { transform: translateX(0); }
    100% { transform: translateX(-15px); }
}

.hero-sparkle {
    position: absolute;
    animation: sparkleTwinkle 3s ease-in-out infinite alternate;
}

.hero-sparkle-1 { top: 75px; left: 29%; animation-delay: 0.2s; }
.hero-sparkle-2 { bottom: 200px; left: 45%; animation-delay: 0.8s; }

@keyframes sparkleTwinkle {
    0% { transform: scale(0.75) rotate(0deg); opacity: 0.5; }
    100% { transform: scale(1.15) rotate(15deg); opacity: 1; }
}

/* ==========================================================================
   7. ORGANIC BOTTOM GRASS TRANSITION
   ========================================================================== */
.hero-bottom-transition {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    z-index: 8;
    pointer-events: none;
}

.hero-grass-wave {
    width: 100%;
    height: 100%;
    display: block;
}

/* ==========================================================================
   8. ATTACHED MARQUEE FEATURE STRIP
   ========================================================================== */
.hero-strip-wrapper {
    max-width: 1480px;
    margin: 2.5rem auto 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 20;
    width: 100%;
}

.hero-strip-card {
    background: #FFFFFF;
    border-radius: 40px;
    box-shadow: 0 12px 35px rgba(56, 20, 100, 0.08), 0 2px 6px rgba(0,0,0,0.02);
    border: 2px solid rgba(84, 35, 130, 0.08);
    padding: 1.25rem 2rem;
    overflow: hidden;
    display: flex;
}

.hero-strip-track {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

.hero-strip-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-shrink: 0;
    gap: 1.25rem;
}

.hero-feature-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-shrink: 0;
}

.hero-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.hero-feature-item:hover .hero-feature-icon {
    transform: scale(1.12);
}

.hero-feature-text {
    display: flex;
    flex-direction: column;
    font-family: var(--font-heading);
    line-height: 1.2;
}

.hero-feature-text strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-dark);
}

.hero-feature-text span {
    font-size: 0.85rem;
    font-weight: 600;
    color: #554D64;
}

.hero-strip-divider {
    width: 1px;
    height: 36px;
    background-color: rgba(84, 35, 130, 0.12);
    flex-shrink: 0;
}

/* ==========================================================================
   9. RESPONSIVE BREAKPOINTS & CONTINUOUS MARQUEE ANIMATION
   ========================================================================== */

/* Tablet Marquee Animation (<= 1200px) */
@media (max-width: 1200px) {
    .hero-strip-card {
        padding: 1rem 0;
    }
    .hero-strip-track {
        display: flex;
        width: max-content;
        animation: marqueeScroll 24s linear infinite;
    }
    .hero-strip-card:hover .hero-strip-track {
        animation-play-state: paused;
    }
    .hero-strip-group {
        width: auto;
        gap: 2rem;
        padding: 0 1rem;
    }
}

@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (max-width: 991px) {
    .hero {
        padding-top: 2rem;
        padding-bottom: 3.5rem;
    }
    .hero-container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .hero-content {
        padding-left: 0;
        align-items: center;
        text-align: center;
    }
    .hero-title-underline {
        left: 50%;
        transform: translateX(-50%);
    }
    .hero-actions {
        justify-content: center;
    }
    .hero-stationery {
        display: none;
    }
    .hero-image-frame {
        max-width: 600px;
        border-radius: 28px;
    }
    .hero-students-img {
        min-height: 320px;
        max-height: 400px;
    }
}

@media (max-width: 576px) {
    .hero-container {
        padding: 0 1.2rem;
    }
    .hero-title {
        font-size: 2.3rem;
    }
    .hero-admission {
        width: 100%;
        padding: 0.8rem 1.2rem;
    }
    .hero-actions {
        width: 100%;
        flex-direction: column;
    }
    .hero-btn {
        width: 100%;
        justify-content: center;
    }
    .hero-strip-card {
        border-radius: 24px;
    }
}




/* ==========================================================================
   ABOUT XAVIER KIDS SCHOOL SECTION
   ========================================================================== */

.about-section {
    position: relative;
    width: 100%;
    background-color: #FAF8F5;
    padding-top: 5rem;
    padding-bottom: 7rem;
    overflow: hidden;
}

.about-container {
    max-width: 1540px;
    margin: 0 auto;
    padding: 0 2.5rem;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 3.5rem;
    position: relative;
    z-index: 10;
}

/* --- Left Column (Image Gallery) --- */
.about-media-col {
    position: relative;
    z-index: 5;
}

.about-gallery-grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: relative;
    z-index: 2;
}

.about-img-card {
    border-radius: 28px;
    overflow: hidden;
    background-color: #FFFFFF;
    border: 5px solid #FFFFFF;
    box-shadow: 0 14px 35px rgba(72, 26, 126, 0.1);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.about-img-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(72, 26, 126, 0.16);
}

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

.about-img-main {
    height: 330px;
    border-radius: 32px;
}

.about-img-subgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.about-img-sub {
    height: 195px;
    border-radius: 24px;
}

/* Slide Decor */
.about-slide-decor {
    position: absolute;
    bottom: -25px;
    left: -40px;
    z-index: 8;
    pointer-events: none;
    filter: drop-shadow(4px 10px 18px rgba(0, 0, 0, 0.15));
    animation: gentleBob 5s ease-in-out infinite alternate;
}

@keyframes gentleBob {
    0% { transform: translateY(0); }
    100% { transform: translateY(-6px); }
}

/* --- Right Column (Content) --- */
.about-content-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 6;
}

.about-eyebrow {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    margin-bottom: 0.75rem;
}

.about-eyebrow-text {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: #481A7E;
    letter-spacing: 0.2px;
}

.about-eyebrow-underline {
    margin-top: 2px;
}

.about-heading {
    font-family: var(--font-heading);
    font-size: clamp(2.3rem, 3.4vw, 3.4rem);
    font-weight: 700;
    color: #1E1A29;
    line-height: 1.18;
    margin-bottom: 1.35rem;
    letter-spacing: -0.3px;
}

.text-bright-future {
    color: #5E239D;
}

.about-body {
    font-family: var(--font-body);
    font-size: 1.12rem;
    font-weight: 600;
    color: #4A4458;
    line-height: 1.65;
    margin-bottom: 2rem;
    max-width: 580px;
}

/* 3 Key Points */
.about-key-points {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    margin-bottom: 2.2rem;
    width: 100%;
}

.about-point-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.about-point-icon {
    width: 44px;
    height: 44px;
    background-color: #F4EFFF;
    border: 2px solid #5E239D;
    color: #5E239D;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.about-point-item:hover .about-point-icon {
    transform: scale(1.12) rotate(6deg);
    background-color: #5E239D;
    color: #FFFFFF;
}

.about-point-text {
    font-family: var(--font-heading);
    font-size: 1.08rem;
    font-weight: 600;
    color: #1E1A29;
    line-height: 1.3;
}

/* CTA Button */
.about-action-wrap {
    margin-bottom: 1rem;
    position: relative;
    z-index: 10;
}

.about-btn-cta {
    background-color: #381464;
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    padding: 0.85rem 1.65rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    box-shadow: 0 6px 20px rgba(56, 20, 100, 0.25);
    border: 2px solid rgba(255, 255, 255, 0.4);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.about-btn-arrow {
    width: 28px;
    height: 28px;
    background-color: #FFB800;
    color: #381464;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease;
}

.about-btn-cta:hover {
    background-color: #260B48;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 25px rgba(56, 20, 100, 0.35);
}

.about-btn-cta:hover .about-btn-arrow {
    transform: translateX(3px);
}

/* Child Illustration */
.about-illustration-wrap {
    position: absolute;
    bottom: -45px;
    right: -20px;
    z-index: 1;
    pointer-events: none;
}

.about-illustration-img {
    max-width: 290px;
    height: auto;
    display: block;
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.12));
}

/* --- Doodles & Accents --- */
.about-decors {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.about-decor-rainbow { position: absolute; top: 25px; left: 20px; opacity: 0.9; }
.about-decor-sun { position: absolute; top: 30px; right: 45px; animation: sunPulse 6s ease-in-out infinite alternate; }
.about-decor-cloud { position: absolute; top: 75px; right: 125px; opacity: 0.85; }
.about-decor-pencil { position: absolute; top: 160px; right: 35px; transform: rotate(8deg); filter: drop-shadow(2px 6px 12px rgba(0, 0, 0, 0.12)); }
.about-decor-plane { position: absolute; top: 290px; right: 55px; transform: rotate(-10deg); }

.about-star { position: absolute; opacity: 0.7; animation: starPulse 4s ease-in-out infinite alternate; }
.about-star-1 { top: 40px; left: 26%; }
.about-star-2 { top: 60px; right: 28%; animation-delay: 1s; }
.about-star-3 { top: 350px; right: 18%; animation-delay: 2s; }

@keyframes starPulse {
    0% { transform: scale(0.8) rotate(0deg); opacity: 0.4; }
    100% { transform: scale(1.15) rotate(20deg); opacity: 0.9; }
}

/* --- Bottom Wave Transition --- */
.about-bottom-transition {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75px;
    z-index: 8;
    pointer-events: none;
}

.about-wave-svg { width: 100%; height: 100%; display: block; }
.about-edge-flowers { position: absolute; bottom: 12px; left: 60px; z-index: 9; display: flex; gap: 1.5rem; }
.edge-flower { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15)); }

/* --- Responsive Media Queries --- */
@media (max-width: 1400px) {
    .about-container { gap: 2.5rem; }
    .about-img-main { height: 290px; }
    .about-img-sub { height: 175px; }
    .about-heading { font-size: 2.8rem; }
    .about-illustration-img { max-width: 250px; }
}

@media (max-width: 1199px) {
    .about-container { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .about-heading { font-size: 2.4rem; }
    .about-body { font-size: 1rem; }
    .about-img-main { height: 260px; }
    .about-img-sub { height: 155px; }
    .about-slide-decor { display: none; }
    .about-illustration-img { max-width: 210px; bottom: -20px; }
}

@media (max-width: 991px) {
    .about-section { padding-top: 3.5rem; padding-bottom: 5.5rem; }
    .about-container { grid-template-columns: 1fr; gap: 3rem; }
    .about-content-col { order: 1; align-items: center; text-align: center; }
    .about-media-col { order: 2; }
    .about-body { margin-left: auto; margin-right: auto; }
    .about-key-points { align-items: center; }
    .about-point-item { justify-content: center; }
    .about-illustration-wrap { position: relative; bottom: 0; right: 0; margin-top: 1.5rem; }
    .about-decor-pencil, .about-decor-plane, .about-decor-rainbow { display: none; }
}

@media (max-width: 576px) {
    .about-container { padding: 0 1.2rem; }
    .about-heading { font-size: 2.1rem; }
    .about-img-main { height: 200px; }
    .about-img-subgrid { grid-template-columns: 1fr; }
    .about-img-sub { height: 160px; }
    .about-point-text { font-size: 0.98rem; }
    .about-btn-cta { width: 100%; justify-content: center; }
}


/* ==========================================================================
   LEARNING PROGRAMS SECTION STYLES (XAVIER KIDS)
   ========================================================================== */

/* 1. Programs Section Container */
.programs-section {
    position: relative;
    width: 100%;
    background: radial-gradient(circle at 80% 20%, #FFFFFF 0%, #FAF8F5 60%, #F6F1EA 100%);
    padding-top: 4.5rem;
    padding-bottom: 7rem;
    overflow: hidden;
}

.programs-container {
    max-width: 1540px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 10;
}

/* ==========================================================================
   2. PROGRAMS HEADER & CBSE BADGE
   ========================================================================== */
.programs-header-block {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 3.2rem;
}

.programs-main-title {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 3.5vw, 3.4rem);
    font-weight: 700;
    color: #1E1238;
    line-height: 1.2;
    margin-bottom: 0.9rem;
    letter-spacing: -0.5px;
}

.text-every-stage {
    color: #EA526F;
    position: relative;
    display: inline-block;
}

/* CBSE Accreditation Badge */
.programs-cbse-badge {
    background-color: #3D1A68;
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    padding: 0.45rem 1.4rem;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    box-shadow: 0 6px 18px rgba(61, 26, 104, 0.22);
    border: 2px solid rgba(255, 184, 0, 0.35);
    margin-bottom: 0.8rem;
    transition: transform 0.25s ease;
}

.programs-cbse-badge:hover {
    transform: translateY(-2px);
}

.cbse-rosette {
    display: flex;
    align-items: center;
    justify-content: center;
}

.programs-subtitle {
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 600;
    color: #4A4458;
    letter-spacing: 0.2px;
}

.sub-sparkle {
    color: var(--brand-yellow);
    font-size: 1.1rem;
    margin: 0 4px;
}

/* ==========================================================================
   3. 7 PROGRAM CARDS GRID
   ========================================================================== */
.programs-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1.15rem;
    margin-bottom: 3.8rem;
}

.prog-card {
    border-radius: 22px;
    padding: 1.6rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 2px solid transparent;
    box-shadow: 0 8px 22px rgba(72, 26, 126, 0.05);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: default;
}

.prog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 30px rgba(72, 26, 126, 0.12);
}

/* Specific Card Pastel Themes */
.prog-card-playgroup {
    background-color: #FFF9ED;
    border-color: #FDE68A;
}
.prog-card-prenursery {
    background-color: #EDFAF1;
    border-color: #A7F3D0;
}
.prog-card-nursery {
    background-color: #FDF2F4;
    border-color: #FECDD3;
}
.prog-card-lkg {
    background-color: #F0F8FF;
    border-color: #BAE6FD;
}
.prog-card-ukg {
    background-color: #F5F1FD;
    border-color: #DDD6FE;
}
.prog-card-primary {
    background-color: #FFF6E9;
    border-color: #FED7AA;
}
.prog-card-daycare {
    background-color: #EFF7FC;
    border-color: #BFDBFE;
}

/* Icon Box */
.prog-icon-box {
    width: 78px;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.9rem;
    transition: transform 0.3s ease;
}

.prog-card:hover .prog-icon-box {
    transform: scale(1.1) rotate(4deg);
}

/* Typography inside Cards */
.prog-title {
    font-family: var(--font-heading);
    font-size: 1.22rem;
    font-weight: 700;
    color: #1E1238;
    margin-bottom: 0.35rem;
    line-height: 1.15;
    min-height: 2.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prog-age {
    font-family: var(--font-heading);
    font-size: 0.96rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    display: inline-block;
}

.prog-age-yellow { color: #D97706; }
.prog-age-green  { color: #16A34A; }
.prog-age-pink   { color: #E11D48; }
.prog-age-blue   { color: #0284C7; }
.prog-age-purple { color: #7C3AED; }
.prog-age-orange { color: #EA580C; }
.prog-age-cyan   { color: #0284C7; }

.prog-desc {
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    color: #4A4458;
    line-height: 1.45;
}

/* ==========================================================================
   4. BEYOND CLASSROOM LEARNING STRIP
   ========================================================================== */
.beyond-learning-block {
    margin-bottom: 3.5rem;
}

.beyond-heading-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 1.4rem;
}

.beyond-title {
    font-family: var(--font-heading);
    font-size: 1.65rem;
    font-weight: 700;
    color: #3D1A68;
}

.beyond-sparkle {
    font-size: 1.3rem;
}

.beyond-strip-card {
    background: #FFFFFF;
    border-radius: 28px;
    padding: 1.5rem 1.8rem;
    box-shadow: 0 10px 28px rgba(72, 26, 126, 0.06);
    border: 2px solid rgba(84, 35, 130, 0.08);
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 0.75rem;
}

.beyond-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.25s ease;
}

.beyond-item:hover {
    transform: translateY(-4px);
}

.beyond-icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.55rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}

.bg-pastel-yellow { background-color: #FEF3C7; }
.bg-pastel-amber  { background-color: #FFFBEB; }
.bg-pastel-red    { background-color: #FEE2E2; }
.bg-pastel-cyan   { background-color: #E0F2FE; }
.bg-pastel-purple { background-color: #EDE9FE; }
.bg-pastel-green  { background-color: #DCFCE7; }
.bg-pastel-orange { background-color: #FFEDD5; }
.bg-pastel-pink   { background-color: #FCE7F3; }
.bg-pastel-indigo { background-color: #F3EEFA; }

.beyond-label {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    color: #1E1238;
    line-height: 1.25;
}

/* ==========================================================================
   5. DAYCARE HIGHLIGHT SECTION
   ========================================================================== */
.daycare-highlight-card {
    background: linear-gradient(135deg, #F5F0FD 0%, #EDE4FC 100%);
    border-radius: 36px;
    border: 2px solid rgba(131, 56, 236, 0.18);
    box-shadow: 0 14px 35px rgba(61, 26, 104, 0.08);
    padding: 2.2rem 2.8rem;
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    align-items: center;
    gap: 2.5rem;
}

.daycare-header-group {
    display: flex;
    align-items: flex-start;
    gap: 1.4rem;
    margin-bottom: 1.8rem;
}

.daycare-badge-icon {
    width: 64px;
    height: 64px;
    background-color: #481A7E;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(72, 26, 126, 0.25);
}

.daycare-heading {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: #3D1A68;
    margin-bottom: 0.35rem;
}

.daycare-desc {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 600;
    color: #4A4458;
    line-height: 1.55;
    max-width: 580px;
}

/* 4 Badges Grid */
.daycare-badges-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.daycare-badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #FFFFFF;
    padding: 0.95rem 0.6rem;
    border-radius: 18px;
    box-shadow: 0 4px 12px rgba(72, 26, 126, 0.04);
}

.daycare-item-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.bg-badge-purple { background-color: #F3EEFA; }
.bg-badge-pink   { background-color: #FFE4E6; }
.bg-badge-green  { background-color: #DCFCE7; }
.bg-badge-orange { background-color: #FFEDD5; }

.daycare-badge-label {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 600;
    color: #1E1238;
    line-height: 1.25;
}

/* Scene SVG Illustration */
.daycare-visual-col {
    display: flex;
    justify-content: center;
    align-items: center;
}

.daycare-scene-svg {
    width: 100%;
    max-width: 360px;
    height: auto;
    filter: drop-shadow(0 10px 18px rgba(72, 26, 126, 0.1));
}

/* ==========================================================================
   6. DECORATIVE ELEMENTS & DOODLES
   ========================================================================== */
.programs-decors {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.prog-plane-wrap {
    position: absolute;
    top: 35px;
    left: 4%;
    animation: planeDrift 7s ease-in-out infinite alternate;
}

.prog-sun-wrap {
    position: absolute;
    top: 25px;
    right: 4%;
    animation: sunPulse 6s ease-in-out infinite alternate;
}

.prog-cloud-1 {
    position: absolute;
    top: 70px;
    right: 12%;
    opacity: 0.85;
}

.prog-star {
    position: absolute;
    opacity: 0.7;
    animation: starPulse 4s ease-in-out infinite alternate;
}

.prog-star-1 { top: 90px; left: 24%; }
.prog-star-2 { top: 120px; right: 28%; animation-delay: 1.2s; }
.prog-star-3 { top: 40px; right: 22%; animation-delay: 2.2s; }

/* ==========================================================================
   7. WAVE BOTTOM TRANSITION
   ========================================================================== */
.programs-bottom-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75px;
    z-index: 8;
    pointer-events: none;
}

.programs-bottom-wave svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ==========================================================================
   8. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Laptops (1200px - 1440px) */
@media (max-width: 1400px) {
    .programs-grid {
        grid-template-columns: repeat(7, 1fr);
        gap: 0.75rem;
    }
    .prog-card {
        padding: 1.3rem 0.6rem;
    }
    .prog-title {
        font-size: 1.05rem;
    }
    .prog-age {
        font-size: 0.88rem;
    }
    .prog-desc {
        font-size: 0.82rem;
    }
}

/* Tablet Landscape (992px - 1199px) */
@media (max-width: 1199px) {
    .programs-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .prog-card-daycare {
        grid-column: span 2;
    }
    .beyond-strip-card {
        grid-template-columns: repeat(5, 1fr);
        gap: 1.2rem;
    }
    .daycare-highlight-card {
        grid-template-columns: 1fr;
    }
}

/* Tablet Portrait & Mobile (<= 991px) */
@media (max-width: 991px) {
    .programs-section {
        padding-top: 3.5rem;
        padding-bottom: 5.5rem;
    }
    .programs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .prog-card-daycare {
        grid-column: span 2;
    }
    .beyond-strip-card {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.2rem;
    }
    .daycare-badges-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .prog-plane-wrap,
    .prog-cloud-1 {
        display: none;
    }
}

/* Small Mobile (<= 576px) */
@media (max-width: 576px) {
    .programs-container {
        padding: 0 1.2rem;
    }
    .programs-main-title {
        font-size: 2.1rem;
    }
    .programs-grid {
        grid-template-columns: 1fr;
    }
    .prog-card-daycare {
        grid-column: span 1;
    }
    .beyond-strip-card {
        grid-template-columns: repeat(2, 1fr);
        padding: 1.2rem 1rem;
    }
    .daycare-highlight-card {
        padding: 1.5rem 1.2rem;
        border-radius: 24px;
    }
    .daycare-header-group {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .daycare-badges-grid {
        grid-template-columns: 1fr;
    }
}




/* ==========================================================================
   WHY CHOOSE XAVIER KIDS & OUR INFRASTRUCTURE (COMPACT)
   ========================================================================== */

.why-infra-section {
    position: relative;
    width: 100%;
    background-color: #FAF8F5;
    padding-top: 2.8rem;
    padding-bottom: 4.8rem;
    overflow: hidden;
}

.why-infra-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1.8rem;
    display: grid;
    grid-template-columns: 1.85fr 1.3fr;
    gap: 1.5rem;
    align-items: stretch;
    position: relative;
    z-index: 10;
}

/* --- Left Card: Why Choose --- */
.why-choose-card {
    background: #3D1A68;
    border-radius: 28px;
    padding: 1.8rem 1.6rem 3.2rem 1.6rem;
    box-shadow: 0 10px 28px rgba(61, 26, 104, 0.18);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.why-choose-title {
    font-family: var(--font-heading);
    font-size: clamp(1.45rem, 1.8vw, 1.85rem);
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.2;
    margin-bottom: 1.2rem;
}

.text-yellow-kids {
    color: #FFB800;
}

.why-choose-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
    z-index: 5;
}

.why-choose-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.why-check-badge {
    width: 24px;
    height: 24px;
    background-color: #FFB800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(255, 184, 0, 0.35);
}

.why-item-text {
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 1.25;
}

/* Giraffe Mascot Placement */
.why-choose-mascot-wrap {
    position: absolute;
    bottom: -8px;
    left: 8px;
    right: 8px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    pointer-events: none;
    z-index: 2;
}

.why-giraffe-img {
    max-width: 150px;
    height: 120px;
    display: block;
    filter: drop-shadow(2px 6px 12px rgba(0, 0, 0, 0.2));
}

.why-props-img {
    max-width: 360px;
    height: 400px;
  
    margin-left: 180px;
    margin-bottom: -10px;
    filter: drop-shadow(2px 4px 10px rgba(0, 0, 0, 0.15));
}

/* --- Right Card: Infrastructure --- */
.infra-main-card {
    background: #FFFFFF;
    border-radius: 28px;
    border: 2px solid rgba(84, 35, 130, 0.06);
    box-shadow: 0 10px 28px rgba(61, 26, 104, 0.06);
    padding: 1.6rem 1.8rem;
    display: flex;
    flex-direction: column;
}

.infra-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem;
}

.infra-title-wrap {
    position: relative;
    display: inline-flex;
    flex-direction: column;
}

.infra-card-title {
    font-family: var(--font-heading);
    font-size: clamp(1.45rem, 1.8vw, 1.85rem);
    font-weight: 700;
    color: #1E1238;
}

.text-purple-infra {
    color: #481A7E;
}

.infra-title-underline {
    margin-top: 1px;
}

.infra-view-all-btn {
    background-color: #FFB800;
    color: #1E1238;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.45rem 0.95rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 12px rgba(255, 184, 0, 0.28);
    transition: all 0.25s ease;
}

.infra-arrow-circle {
    width: 20px;
    height: 20px;
    background-color: #3D1A68;
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.infra-view-all-btn:hover {
    background-color: #FFAE00;
    transform: translateY(-2px);
}

/* 6 Photos Grid */
.infra-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem 0.95rem;
}

.infra-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.25s ease;
}

.infra-grid-item:hover {
    transform: translateY(-3px);
}

.infra-photo-card {
    width: 100%;
    height: 105px;
    border-radius: 16px;
    overflow: hidden;
    background-color: #F3EEFA;
    border: 2.5px solid #FFFFFF;
    box-shadow: 0 6px 14px rgba(72, 26, 126, 0.06);
}

.infra-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.infra-grid-item:hover .infra-photo {
    transform: scale(1.05);
}

.infra-badge-icon {
    width: 34px;
    height: 34px;
    background-color: #481A7E;
    border: 2.5px solid #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -17px;
    position: relative;
    z-index: 3;
    box-shadow: 0 3px 8px rgba(72, 26, 126, 0.25);
}

.infra-item-name {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    color: #1E1238;
    margin-top: 0.4rem;
    line-height: 1.2;
}

/* --- Doodles & Accents --- */
.why-infra-decors {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.why-infra-cloud { position: absolute; top: 15px; left: 44%; opacity: 0.8; }
.why-infra-plane { position: absolute; top: 140px; left: 35%; transform: rotate(15deg); }
.why-infra-pencil-wrap { position: absolute; top: 120px; right: 10px; transform: rotate(6deg); filter: drop-shadow(2px 6px 12px rgba(0, 0, 0, 0.12)); }

.why-star { position: absolute; opacity: 0.7; }
.why-star-1 { top: 25px; left: 3%; }
.why-star-2 { top: 60px; left: 33%; }

/* --- Wave Bottom Transition --- */
.why-infra-bottom-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    z-index: 8;
    pointer-events: none;
}

.why-infra-bottom-wave svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* --- Responsive Media Queries --- */
@media (max-width: 1199px) {
    .why-infra-container {
        grid-template-columns: 1fr;
        gap: 1.8rem;
    }
    .why-choose-card {
        padding-bottom: 2.5rem;
    }
    .why-choose-mascot-wrap {
        display: none;
    }
    .why-infra-pencil-wrap {
        display: none;
    }
}

@media (max-width: 768px) {
    .why-infra-section {
        padding-top: 2rem;
        padding-bottom: 4rem;
    }
    .why-infra-container {
        padding: 0 1rem;
    }
    .infra-main-card {
        padding: 1.4rem 1rem;
        border-radius: 22px;
    }
    .infra-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem 0.8rem;
    }
    .infra-photo-card {
        height: 95px;
    }
}

@media (max-width: 480px) {
    .infra-grid {
        grid-template-columns: 1fr;
    }
    .infra-photo-card {
        height: 130px;
    }
    .why-choose-card {
        padding: 1.5rem 1.2rem;
        border-radius: 22px;
    }
    .why-item-text {
        font-size: 0.88rem;
    }
}


/* ==========================================================================
   TESTIMONIALS SECTION (5-CARD SLIDER & AUTOPLAY)
   ========================================================================== */

.testimonials-section {
    position: relative;
    width: 100%;
    background: radial-gradient(circle at 20% 20%, #FFFFFF 0%, #FAF8F5 60%, #F5EFFB 100%);
    padding-top: 3rem;
    padding-bottom: 4.8rem;
    overflow: hidden;
}

.testi-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1.8rem;
    position: relative;
    z-index: 10;
}

/* --- Header Block --- */
.testi-header-block {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2.2rem;
}

.testi-eyebrow {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.4rem;
}

.testi-eyebrow-text {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #481A7E;
    letter-spacing: 0.5px;
}

.testi-eyebrow-underline {
    margin-top: 1px;
}

.testi-main-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 2.8vw, 2.6rem);
    font-weight: 700;
    color: #1E1238;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.text-growing-children {
    color: #481A7E;
}

.testi-intro-desc {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 600;
    color: #554D64;
    max-width: 580px;
    line-height: 1.5;
}

/* --- Sliding Carousel Wrapper & Track --- */
.testi-carousel-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 2.2rem;
    overflow: hidden;
    padding: 0.5rem 0;
}

.testi-track {
    display: flex;
    gap: 1.25rem;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

/* Card Item Width Calculations */
.testi-card-item {
    flex: 0 0 calc((100% - 2.5rem) / 3); /* 3 cards visible on Desktop */
    display: flex;
    box-sizing: border-box;
}

.testi-card {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 1.8rem 1.5rem 1.5rem 1.5rem;
    border: 2px solid rgba(84, 35, 130, 0.06);
    box-shadow: 0 8px 22px rgba(72, 26, 126, 0.05);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.testi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(72, 26, 126, 0.1);
    border-color: rgba(255, 184, 0, 0.4);
}

.testi-card-item.is-featured-card .testi-card {
    background: #FFFEFA;
    border-color: #FDE68A;
    box-shadow: 0 10px 26px rgba(255, 184, 0, 0.1);
}

/* Quote Icon Decoration */
.testi-quote-icon {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    opacity: 0.6;
}

/* Star Rating */
.testi-rating {
    display: flex;
    gap: 3px;
    margin-bottom: 0.85rem;
}

/* Feedback Text */
.testi-feedback-text {
    font-family: var(--font-body);
    font-size: 0.94rem;
    font-weight: 600;
    color: #4A4458;
    line-height: 1.55;
    margin-bottom: 1.25rem;
    font-style: italic;
}

/* Author Profile */
.testi-author-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding-top: 0.85rem;
    border-top: 1px dashed rgba(84, 35, 130, 0.1);
}

.testi-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bg-avatar-purple { background-color: #F3EEFA; }
.bg-avatar-yellow { background-color: #FEF3C7; }
.bg-avatar-blue   { background-color: #E0F2FE; }
.bg-avatar-pink   { background-color: #FFE4E6; }
.bg-avatar-green  { background-color: #DCFCE7; }

.testi-author-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.testi-parent-name {
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 700;
    color: #1E1238;
}

.testi-child-class {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: #7B7289;
}

/* --- Controls (Arrows & Dots) --- */
.testi-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    margin-top: 1.4rem;
}

.testi-arrow-btn {
    width: 36px;
    height: 36px;
    background: #FFFFFF;
    border: 1.5px solid rgba(84, 35, 130, 0.12);
    color: #481A7E;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
}

.testi-arrow-btn:hover {
    background: #481A7E;
    color: #FFFFFF;
    transform: scale(1.08);
}

.testi-dots {
    display: flex;
    align-items: center;
    gap: 6px;
}

.testi-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #DDD6FE;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    padding: 0;
}

.testi-dot.is-active {
    width: 22px;
    border-radius: 10px;
    background-color: #FFB800;
}

/* --- Featured Statement Banner --- */
.testi-featured-statement {
    background: linear-gradient(135deg, #481A7E 0%, #351061 100%);
    border-radius: 20px;
    padding: 1.3rem 1.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    box-shadow: 0 8px 22px rgba(72, 26, 126, 0.16);
    margin-bottom: 2rem;
    border: 1.5px solid rgba(255, 184, 0, 0.3);
}

.testi-statement-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.testi-statement-text {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 1.3;
    text-align: center;
    flex: 1;
}

.testi-statement-tag {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    color: #FFB800;
    white-space: nowrap;
}

/* --- Optional Video Testimonial --- */
.testi-video-block {
    display: flex;
    justify-content: center;
    margin-bottom: 2.2rem;
}

.testi-video-thumb-card {
    position: relative;
    max-width: 460px;
    width: 100%;
    height: 200px;
    border-radius: 20px;
    overflow: hidden;
    background-color: #3D1A68;
    border: 3px solid #FFFFFF;
    box-shadow: 0 8px 22px rgba(72, 26, 126, 0.08);
    cursor: pointer;
}

.testi-video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.85;
    transition: transform 0.35s ease;
}

.testi-video-thumb-card:hover .testi-video-thumb {
    transform: scale(1.03);
}

.testi-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: rgba(45, 15, 80, 0.35);
}

.testi-play-btn {
    width: 48px;
    height: 48px;
    background: #FFB800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(255, 184, 0, 0.35);
    transition: transform 0.25s ease;
}

.testi-video-thumb-card:hover .testi-play-btn {
    transform: scale(1.1);
}

.testi-video-label {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #FFFFFF;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* --- CTA Block --- */
.testi-cta-block {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5rem;
}

.testi-cta-heading {
    font-family: var(--font-heading);
    font-size: clamp(1.45rem, 2vw, 1.9rem);
    font-weight: 700;
    color: #1E1238;
    margin-bottom: 0.25rem;
}

.testi-cta-sub {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: #554D64;
    margin-bottom: 1.1rem;
}

.testi-cta-actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    justify-content: center;
}

.testi-btn {
    font-family: var(--font-heading);
    font-size: 0.94rem;
    font-weight: 600;
    padding: 0.65rem 1.4rem;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.testi-btn-primary {
    background-color: #FFB800;
    color: #2D1350;
    border: 2px solid #FFCA28;
    box-shadow: 0 4px 12px rgba(255, 184, 0, 0.3);
}

.testi-btn-primary:hover {
    background-color: #FFAE00;
    transform: translateY(-2px);
}

.testi-btn-secondary {
    background-color: #FFFFFF;
    color: #381464;
    border: 2px solid #381464;
    box-shadow: 0 4px 10px rgba(56, 20, 100, 0.05);
}

.testi-btn-secondary:hover {
    background-color: #F6EFFF;
    transform: translateY(-2px);
}

/* Mascot Graphic Location */
.testi-mascot-wrap {
    position: absolute;
    bottom: -10px;
    right: 25px;
    pointer-events: none;
    z-index: 5;
}

.testi-giraffe-img {
    max-width: 105px;
    height: auto;
    filter: drop-shadow(2px 6px 12px rgba(0, 0, 0, 0.15));
}

/* --- Doodles & Accents --- */
.testi-decors {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.testi-plane-wrap { position: absolute; top: 25px; right: 5%; transform: rotate(10deg); }
.testi-cloud { position: absolute; top: 20px; left: 4%; opacity: 0.8; }
.testi-star { position: absolute; opacity: 0.7; }
.testi-star-1 { top: 70px; left: 24%; }
.testi-star-2 { top: 100px; right: 26%; }
.testi-heart-1 { position: absolute; top: 320px; left: 4%; }

/* Wave Bottom */
.testi-bottom-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 45px;
    z-index: 8;
    pointer-events: none;
}

.testi-bottom-wave svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ==========================================================================
   RESPONSIVE MEDIA QUERIES
   ========================================================================== */
@media (max-width: 1024px) {
    .testi-card-item {
        flex: 0 0 calc((100% - 1.25rem) / 2); /* 2 cards on Tablet */
    }
    .testi-featured-statement {
        flex-direction: column;
        text-align: center;
        gap: 0.6rem;
    }
}

@media (max-width: 768px) {
    .testimonials-section {
        padding-top: 2.2rem;
        padding-bottom: 4rem;
    }
    .testi-container {
        padding: 0 1rem;
    }
    .testi-card-item {
        flex: 0 0 100%; /* 1 card on Mobile */
    }
    .testi-video-thumb-card {
        height: 170px;
    }
    .testi-cta-actions {
        flex-direction: column;
        width: 100%;
    }
    .testi-btn {
        width: 100%;
        justify-content: center;
    }
    .testi-mascot-wrap {
        display: none;
    }
}


/* ==========================================================================
   ADMISSIONS CTA & ENQUIRY SECTION (2026–27)
   ========================================================================== */

.admissions-section {
    position: relative;
    width: 100%;
    background: linear-gradient(135deg, #3D1A68 0%, #290E49 100%);
    padding-top: 3.8rem;
    padding-bottom: 4.8rem;
    color: #FFFFFF;
    overflow: hidden;
}

.admissions-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1.8rem;
    position: relative;
    z-index: 10;
}

/* --- 2-Column Main Grid --- */
.adm-main-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 2.8rem;
    align-items: center;
    margin-bottom: 3.2rem;
}

/* --- Left Column: Content --- */
.adm-content-col {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* CBSE Badge */
.adm-cbse-badge {
    background-color: rgba(255, 255, 255, 0.12);
    border: 1.5px solid rgba(255, 184, 0, 0.45);
    border-radius: var(--radius-pill);
    padding: 0.35rem 1rem;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.adm-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Titles */
.adm-main-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.2vw, 3.2rem);
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.15;
    margin-bottom: 0.45rem;
    letter-spacing: -0.5px;
}

.text-adm-yellow {
    color: #FFB800;
}

.adm-supporting-heading {
    font-family: var(--font-heading);
    font-size: 1.22rem;
    font-weight: 600;
    color: #FFD54F;
    line-height: 1.35;
    margin-bottom: 0.85rem;
}

.adm-body-copy {
    font-family: var(--font-body);
    font-size: 1.02rem;
    font-weight: 500;
    color: #E2D4F8;
    line-height: 1.55;
    margin-bottom: 1.2rem;
    max-width: 580px;
}

/* Program Range Summary Tag */
.adm-program-tagline {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px dashed rgba(255, 184, 0, 0.4);
    border-radius: 12px;
    padding: 0.55rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: #FFFFFF;
    margin-bottom: 1.6rem;
}

.adm-tag-sparkle {
    color: #FFB800;
}

.adm-tag-divider {
    color: #FFB800;
    font-weight: bold;
}

/* 4 Benefits Grid */
.adm-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    width: 100%;
    margin-bottom: 1.8rem;
}

.adm-benefit-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.07);
    padding: 0.65rem 0.95rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.25s ease, transform 0.25s ease;
}

.adm-benefit-item:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: translateX(3px);
}

.adm-benefit-icon {
    width: 36px;
    height: 36px;
    background: rgba(255, 184, 0, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.adm-benefit-label {
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 1.2;
}

/* Action Row & Direct Call */
.adm-action-row {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    flex-wrap: wrap;
}

.adm-btn-visit {
    background-color: #FFFFFF;
    color: #3D1A68;
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 700;
    padding: 0.65rem 1.4rem;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    transition: all 0.25s ease;
}

.adm-btn-arrow {
    transition: transform 0.25s ease;
}

.adm-btn-visit:hover {
    background-color: #F4EFFF;
    transform: translateY(-2px);
}

.adm-btn-visit:hover .adm-btn-arrow {
    transform: translateX(3px);
}

.adm-phone-cta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-size: 0.92rem;
    color: #E2D4F8;
}

.adm-phone-link {
    color: #FFB800;
    font-weight: 700;
    transition: color 0.2s ease;
}

.adm-phone-link:hover {
    color: #FFAE00;
    text-decoration: underline;
}

/* Child Illustration Placement */
.adm-child-mascot-wrap {
    position: absolute;
    bottom: -30px;
    right: -10px;
    pointer-events: none;
    z-index: 2;
}

.adm-child-img {
    max-width: 105px;
    height: auto;
    filter: drop-shadow(2px 6px 12px rgba(0, 0, 0, 0.3));
}

/* --- Right Column: Enquiry Form Card --- */
.adm-form-col {
    position: relative;
    z-index: 5;
}

.adm-form-card {
    background: #FFFFFF;
    border-radius: 28px;
    padding: 2.2rem 2rem;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
    border: 3px solid rgba(255, 184, 0, 0.35);
    color: #1E1238;
}

.adm-form-header {
    text-align: center;
    margin-bottom: 1.4rem;
}

.adm-form-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: #3D1A68;
    margin-bottom: 0.2rem;
}

.adm-form-subtitle {
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    color: #6B627B;
}

.adm-form-body {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.adm-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.adm-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.adm-form-label {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    color: #3D1A68;
}

.adm-form-label .required {
    color: #E11D48;
}

.adm-input,
.adm-select {
    width: 100%;
    padding: 0.72rem 0.95rem;
    border-radius: 12px;
    border: 1.5px solid #E2D4F8;
    background-color: #FAF8FD;
    font-family: var(--font-body);
    font-size: 0.94rem;
    font-weight: 600;
    color: #1E1238;
    transition: all 0.25s ease;
}

.adm-input:focus,
.adm-select:focus {
    outline: none;
    border-color: #3D1A68;
    background-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(61, 26, 104, 0.12);
}

.adm-select-wrap {
    position: relative;
}

/* Submit Button */
.adm-btn-submit {
    width: 100%;
    background-color: #FFB800;
    color: #2D1350;
    border: 2px solid #FFCA28;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    padding: 0.8rem 1.4rem;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(255, 184, 0, 0.45);
    transition: all 0.25s ease;
}

.adm-btn-submit:hover {
    background-color: #FFAE00;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(255, 184, 0, 0.55);
}

.adm-submit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease;
}

.adm-btn-submit:hover .adm-submit-icon {
    transform: translate(2px, -2px) rotate(8deg);
}

.adm-privacy-note {
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    color: #7B7289;
    margin-top: 0.2rem;
}

/* ==========================================================================
   5-STEP ADMISSION JOURNEY BLOCK
   ========================================================================== */
.adm-journey-block {
    background: rgba(0, 0, 0, 0.18);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 1.6rem 2rem;
    text-align: center;
}

.adm-journey-title-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
}

.adm-journey-heading {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: #FFB800;
}

.adm-journey-sparkle {
    font-size: 1.1rem;
}

.adm-journey-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.adm-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
}

.adm-step-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid #FFB800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.adm-step-num {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: #FFFFFF;
}

.adm-step-label {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    color: #FFFFFF;
    white-space: nowrap;
}

.adm-step-arrow {
    color: #FFB800;
    font-size: 1.2rem;
    font-weight: bold;
    opacity: 0.7;
}

.adm-step-item.is-final-step .adm-step-circle {
    background: #FFB800;
    border-color: #FFFFFF;
}

.adm-step-item.is-final-step .adm-step-label {
    color: #FFB800;
    font-weight: 700;
}

/* --- Doodles & Accents --- */
.adm-decors {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.adm-plane-wrap { position: absolute; top: 25px; right: 5%; transform: rotate(10deg); }
.adm-cloud { position: absolute; top: 25px; left: 4%; opacity: 0.6; }
.adm-star { position: absolute; opacity: 0.6; }
.adm-star-1 { top: 80px; left: 28%; }
.adm-star-2 { top: 140px; right: 32%; }

/* Wave Bottom */
.adm-bottom-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 45px;
    z-index: 8;
    pointer-events: none;
}

.adm-bottom-wave svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ==========================================================================
   RESPONSIVE MEDIA QUERIES
   ========================================================================== */
@media (max-width: 1199px) {
    .adm-main-grid {
        grid-template-columns: 1fr;
        gap: 2.2rem;
    }
    .adm-content-col {
        align-items: center;
        text-align: center;
    }
    .adm-benefits-grid {
        max-width: 600px;
    }
    .adm-child-mascot-wrap {
        display: none;
    }
    .adm-action-row {
        justify-content: center;
    }
    .adm-form-card {
        max-width: 620px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .admissions-section {
        padding-top: 2.5rem;
        padding-bottom: 4rem;
    }
    .admissions-container {
        padding: 0 1.1rem;
    }
    .adm-form-row {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
    .adm-form-card {
        padding: 1.6rem 1.2rem;
        border-radius: 22px;
    }
    .adm-benefits-grid {
        grid-template-columns: 1fr;
    }
    .adm-journey-steps {
        flex-direction: column;
        gap: 1rem;
    }
    .adm-step-arrow {
        transform: rotate(90deg);
    }
    .adm-action-row {
        flex-direction: column;
        width: 100%;
    }
    .adm-btn-visit {
        width: 100%;
        justify-content: center;
    }
}


/* Textarea & Full-Width Form Control */
.adm-form-full {
    width: 100%;
}

.adm-form-label .optional {
    font-size: 0.78rem;
    font-weight: 500;
    color: #8E849E;
    margin-left: 3px;
}

.adm-textarea {
    width: 100%;
    padding: 0.72rem 0.95rem;
    border-radius: 12px;
    border: 1.5px solid #E2D4F8;
    background-color: #FAF8FD;
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 600;
    color: #1E1238;
    resize: vertical;
    min-height: 72px;
    line-height: 1.45;
    transition: all 0.25s ease;
}

.adm-textarea:focus {
    outline: none;
    border-color: #3D1A68;
    background-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(61, 26, 104, 0.12);
}

.adm-textarea::placeholder {
    color: #A098AD;
    font-weight: 500;
}


/* ============================================================
   XAVIER KIDS FOOTER — REUSABLE STYLES
   ============================================================ */
:root {
    --xk-purple: #3D1A68;
    --xk-purple-dark: #260B48;
    --xk-gold: #FFB800;
    --xk-gold-light: #FFCA28;
    --xk-gold-pale: #FFD54F;
    --xk-text-light: #E2D4F8;
    --xk-text-muted: #C8B8E2;
    --xk-white: #FFFFFF;
    --xk-whatsapp: #25D366;
    --xk-radius-pill: 999px;
    --xk-font-heading: 'Baloo 2', 'Segoe UI', sans-serif;
    --xk-font-body: 'Nunito', 'Segoe UI', sans-serif;
    --xk-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.15);
    --xk-shadow-gold: 0 4px 12px rgba(255, 184, 0, 0.3);
    --xk-shadow-float: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.xk-footer {
    position: relative;
    width: 100%;
    background-color: var(--xk-purple);
    color: var(--xk-white);
    padding: 0;
    overflow: hidden;
    font-family: var(--xk-font-body);
}

.xk-footer-wave-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 48px;
    z-index: 1;
    pointer-events: none;
    line-height: 0;
}

.xk-footer-wave-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.xk-footer-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 3.5rem 1.8rem 1.8rem;
    position: relative;
    z-index: 5;
}

.xk-footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.8fr 0.85fr 1.25fr;
    gap: 2.2rem;
    margin-bottom: 2.5rem;
    align-items: start;
}

/* Brand Column */
.xk-footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.xk-footer-logo-card {
    display: inline-block;
    background: var(--xk-white);
    padding: 6px 14px;
    border-radius: 16px;
    box-shadow: var(--xk-shadow-sm);
    margin-bottom: 0.9rem;
    transition: transform 0.25s ease;
}

.xk-footer-logo-card:hover {
    transform: translateY(-2px);
}

.xk-footer-logo-img {
    height: 54px;
    width: auto;
    object-fit: contain;
    display: block;
}

.xk-footer-tagline {
    font-family: var(--xk-font-heading);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--xk-gold);
    margin: 0 0 0.5rem;
    letter-spacing: 0.2px;
}

.xk-footer-about {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--xk-text-light);
    line-height: 1.55;
    margin: 0 0 1.1rem;
    max-width: 380px;
}

.xk-footer-cbse-pill {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 184, 0, 0.4);
    border-radius: var(--xk-radius-pill);
    padding: 0.35rem 0.9rem;
    font-family: var(--xk-font-heading);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--xk-white);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
}

.xk-cbse-icon {
    color: var(--xk-gold);
    font-size: 0.95rem;
}

.xk-footer-social-block {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.xk-social-heading {
    font-family: var(--xk-font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--xk-gold-pale);
}

.xk-social-links {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.xk-social-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--xk-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.xk-social-icon:hover {
    background-color: var(--xk-gold);
    color: var(--xk-purple);
    border-color: var(--xk-gold);
    transform: translateY(-2px);
}

/* Navigation Columns */
.xk-footer-title {
    font-family: var(--xk-font-heading);
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--xk-gold);
    margin: 0 0 1.1rem;
    letter-spacing: 0.2px;
}

.xk-footer-menu {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.xk-footer-nav-link {
    font-family: var(--xk-font-heading);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--xk-text-light);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.xk-footer-nav-link i {
    color: var(--xk-gold);
    font-size: 0.78rem;
    transition: transform 0.2s ease;
}

.xk-footer-nav-link:hover {
    color: var(--xk-white);
    transform: translateX(3px);
}

.xk-footer-nav-link:hover i {
    transform: translateX(2px);
}

/* Contact Column */
.xk-footer-contact-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.xk-footer-contact-desc {
    font-size: 0.88rem;
    color: var(--xk-text-light);
    line-height: 1.5;
    margin: 0 0 1rem;
}

.xk-contact-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.3rem;
    width: 100%;
}

.xk-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.xk-contact-ico {
    color: var(--xk-gold);
    font-size: 0.95rem;
    margin-top: 3px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.xk-contact-anchor {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--xk-white);
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.2s ease;
}

.xk-contact-anchor:hover {
    color: var(--xk-gold);
    text-decoration: underline;
}

.xk-footer-cta-btn {
    background-color: var(--xk-gold);
    color: #2D1350;
    font-family: var(--xk-font-heading);
    font-size: 0.92rem;
    font-weight: 700;
    padding: 0.65rem 1.3rem;
    border-radius: var(--xk-radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border: 2px solid var(--xk-gold-light);
    box-shadow: var(--xk-shadow-gold);
    text-decoration: none;
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.xk-footer-cta-btn:hover {
    background-color: #FFAE00;
    transform: translateY(-2px);
}

/* Trust Strip */
.xk-footer-trust {
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 1.1rem 1.5rem;
    margin-bottom: 1.6rem;
}

.xk-trust-flex {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    align-items: center;
}

.xk-trust-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    text-align: center;
}

.xk-trust-ico-wrap {
    width: 34px;
    height: 34px;
    background: rgba(255, 184, 0, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--xk-gold);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.xk-trust-label {
    font-family: var(--xk-font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--xk-white);
    white-space: nowrap;
}

/* Bottom Bar */
.xk-footer-bottom-bar {
    background-color: var(--xk-purple-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.1rem 1.8rem;
}

.xk-bottom-container {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.xk-copyright-text {
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--xk-text-muted);
    margin: 0;
}

.xk-bottom-links-group {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-family: var(--xk-font-heading);
    font-size: 0.84rem;
    color: var(--xk-text-muted);
}

.xk-bottom-sep {
    color: var(--xk-gold);
    font-size: 0.75rem;
}

.xk-legal-link {
    color: var(--xk-text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.xk-legal-link:hover {
    color: var(--xk-gold);
    text-decoration: underline;
}

/* Floating Tools */
.xk-floating-tools {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}

.xk-tool-btn {
    pointer-events: auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    box-shadow: var(--xk-shadow-float);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s ease;
}

.xk-tool-btn:hover {
    transform: scale(1.1);
}

.xk-btn-backtotop {
    background-color: var(--xk-purple);
    color: var(--xk-gold);
    border: 2px solid var(--xk-gold);
    font-size: 0.95rem;
    opacity: 0;
    visibility: hidden;
}

.xk-btn-backtotop.is-visible {
    opacity: 1;
    visibility: visible;
}

.xk-btn-backtotop:hover {
    background-color: var(--xk-gold);
    color: var(--xk-purple);
}

.xk-btn-whatsapp {
    background-color: var(--xk-whatsapp);
    color: var(--xk-white);
}

.xk-btn-phone {
    background-color: var(--xk-gold);
    color: var(--xk-purple);
}

/* Responsive */
@media (max-width: 1199px) {
    .xk-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .xk-trust-flex {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .xk-trust-box {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .xk-footer-container {
        padding: 2.4rem 1.2rem 1.2rem;
    }
    .xk-footer-grid {
        grid-template-columns: 1fr;
        gap: 1.8rem;
    }
    .xk-trust-flex {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .xk-footer-bottom-bar {
        padding: 1rem 1.2rem;
    }
    .xk-bottom-container {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    .xk-bottom-links-group {
        flex-wrap: wrap;
        justify-content: center;
    }
    .xk-floating-tools {
        bottom: 16px;
        right: 16px;
        gap: 8px;
    }
    .xk-tool-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}






















/* =========================================
   XAVIER KIDS CONTACT PAGE
========================================= */

.contact-page-wrapper {
    position: relative;
    width: 100%;
    background-color: var(--bg-page, #FAF8F5);
    color: var(--text-main, #2D2738);
    overflow: hidden;
}

/* =========================================
   1. CONTACT PAGE HERO
========================================= */
.contact-hero {
    position: relative;
    width: 100%;
    background: radial-gradient(circle at 20% 30%, #FFFFFF 0%, #FAF8F5 60%, #F5EFFB 100%);
    padding: 3.5rem 1.8rem 3rem 1.8rem;
    text-align: center;
    border-bottom: 2px solid rgba(84, 35, 130, 0.06);
}

.contact-hero-container {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 5;
}

.contact-hero-badge {
    background-color: #3D1A68;
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 14px rgba(61, 26, 104, 0.15);
    border: 1.5px solid rgba(255, 184, 0, 0.4);
    margin-bottom: 0.85rem;
}

.contact-hero-badge i {
    color: #FFB800;
}

.contact-hero-eyebrow {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #481A7E;
    letter-spacing: 1px;
    margin-bottom: 0.35rem;
}

.contact-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 3.8vw, 3.4rem);
    font-weight: 700;
    color: #1E1238;
    line-height: 1.18;
    margin-bottom: 0.85rem;
}

.contact-hero-title .text-highlight {
    color: #481A7E;
    position: relative;
}

.contact-hero-subtitle {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 600;
    color: #554D64;
    max-width: 680px;
    line-height: 1.6;
}

.contact-hero-decors {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.contact-decor-plane {
    position: absolute;
    top: 30px;
    right: 8%;
    transform: rotate(8deg);
    animation: gentleDrift 6s ease-in-out infinite alternate;
}

.contact-decor-cloud {
    position: absolute;
    top: 25px;
    left: 6%;
    opacity: 0.85;
}

.contact-decor-star {
    position: absolute;
    opacity: 0.7;
    animation: gentleTwinkle 3.5s ease-in-out infinite alternate;
}

.contact-decor-star.star-1 { top: 75px; left: 24%; }
.contact-decor-star.star-2 { top: 110px; right: 26%; }

/* =========================================
   2. MAIN 2-COLUMN CONTACT SECTION
========================================= */
.contact-main-section {
    padding: 3.5rem 1.8rem;
    max-width: 1440px;
    margin: 0 auto;
}

.contact-main-container {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 2.8rem;
    align-items: start;
}

.contact-pill-tag {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: #481A7E;
    background-color: #F3EEFA;
    padding: 0.3rem 0.85rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-block;
    margin-bottom: 0.4rem;
}

.contact-col-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 2.5vw, 2.4rem);
    font-weight: 700;
    color: #1E1238;
    margin-bottom: 0.4rem;
}

.contact-col-desc {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: #554D64;
    margin-bottom: 1.8rem;
    line-height: 1.55;
}

/* 4 Contact Cards */
.contact-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.6rem;
}

.contact-card {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 1.15rem 1.4rem;
    border: 2px solid rgba(84, 35, 130, 0.08);
    box-shadow: 0 6px 18px rgba(72, 26, 126, 0.04);
    display: flex;
    align-items: center;
    gap: 1.1rem;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    backface-visibility: hidden;
}

.contact-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(72, 26, 126, 0.1);
    border-color: rgba(255, 184, 0, 0.4);
}

.contact-card-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.bg-soft-purple { background-color: #F3EEFA; color: #481A7E; }
.bg-soft-green  { background-color: #DCFCE7; color: #16A34A; }
.bg-soft-yellow { background-color: #FEF3C7; color: #D97706; }
.bg-soft-pink   { background-color: #FFE4E6; color: #E11D48; }

.contact-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    line-height: 1.35;
}

.contact-card-title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: #1E1238;
}

.contact-card-value {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: #481A7E;
}

.contact-card-sub {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: #7B7289;
    margin-top: 1px;
}

.contact-card-action-icon {
    color: #FFB800;
    font-size: 1.1rem;
    transition: transform 0.25s ease;
}

.contact-card:hover .contact-card-action-icon {
    transform: translateX(3px);
}

.contact-directions-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    color: #FFB800;
    background-color: #3D1A68;
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-pill, 9999px);
    margin-top: 0.4rem;
    width: fit-content;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.contact-directions-link:hover {
    background-color: #2D0E49;
    color: #FFAE00;
}

/* School Timings Card */
.contact-timings-card {
    background: #FFFDF8;
    border-radius: 20px;
    padding: 1.25rem 1.4rem;
    border: 2px dashed rgba(255, 184, 0, 0.5);
    box-shadow: 0 4px 14px rgba(255, 184, 0, 0.08);
}

.contact-timing-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.65rem;
}

.contact-timing-icon {
    width: 42px;
    height: 42px;
    background-color: #FEF3C7;
    color: #D97706;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.contact-timing-title {
    font-family: var(--font-heading);
    font-size: 1.08rem;
    font-weight: 700;
    color: #1E1238;
}

.contact-timing-placeholder {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: #D97706;
    font-style: italic;
}

.contact-timing-note {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: #6B627B;
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    line-height: 1.45;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(84, 35, 130, 0.08);
}

.contact-timing-note i {
    color: #481A7E;
    margin-top: 2px;
}

/* =========================================
   RIGHT COLUMN: ENQUIRY FORM CARD
========================================= */
.contact-form-card {
    background: #FFFFFF;
    border-radius: 28px;
    padding: 2.4rem 2rem;
    box-shadow: 0 14px 36px rgba(72, 26, 126, 0.08);
    border: 2px solid rgba(84, 35, 130, 0.08);
}

.contact-form-header {
    margin-bottom: 1.5rem;
    text-align: center;
}

.contact-form-badge {
    background-color: #DCFCE7;
    color: #16A34A;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-block;
    margin-bottom: 0.4rem;
}

.contact-form-title {
    font-family: var(--font-heading);
    font-size: 1.85rem;
    font-weight: 700;
    color: #1E1238;
    margin-bottom: 0.25rem;
}

.contact-form-desc {
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 600;
    color: #6B627B;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.contact-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.contact-form-group.full-width {
    width: 100%;
}

.contact-label {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    color: #3D1A68;
}

.contact-label .required {
    color: #E11D48;
}

.contact-label .optional {
    color: #8E849E;
    font-size: 0.78rem;
}

.contact-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.contact-input-wrap .input-icon {
    position: absolute;
    left: 14px;
    color: #8E849E;
    font-size: 0.9rem;
    pointer-events: none;
}

.contact-input,
.contact-select,
.contact-textarea {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border-radius: 14px;
    border: 1.5px solid #E2D4F8;
    background-color: #FAF8FD;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: #1E1238;
    transition: all 0.25s ease;
}

.contact-textarea {
    padding-left: 1rem;
    resize: vertical;
    min-height: 80px;
    line-height: 1.45;
}

.contact-input:focus,
.contact-select:focus,
.contact-textarea:focus {
    outline: none;
    border-color: #3D1A68;
    background-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(61, 26, 104, 0.12);
}

.contact-btn-submit {
    width: 100%;
    background-color: #FFB800;
    color: #2D1350;
    border: 2px solid #FFCA28;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    padding: 0.85rem 1.4rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(255, 184, 0, 0.35);
    transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.contact-btn-submit:hover {
    background-color: #FFAE00;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(255, 184, 0, 0.45);
}

.contact-privacy-note {
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    color: #7B7289;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.contact-privacy-note i {
    color: #16A34A;
}

/* =========================================
   3. SCHOOL VISIT CTA PANEL
========================================= */
.contact-visit-section {
    padding: 1.5rem 1.8rem 3.5rem 1.8rem;
    max-width: 1440px;
    margin: 0 auto;
}

.contact-visit-card {
    background: linear-gradient(135deg, #3D1A68 0%, #290E49 100%);
    border-radius: 32px;
    padding: 2.8rem 3rem;
    color: #FFFFFF;
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    align-items: center;
    gap: 2.5rem;
    box-shadow: 0 14px 36px rgba(61, 26, 104, 0.2);
    border: 2px solid rgba(255, 184, 0, 0.35);
    position: relative;
    overflow: hidden;
}

.contact-visit-pill {
    background-color: rgba(255, 184, 0, 0.2);
    color: #FFB800;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.3rem 0.9rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-block;
    margin-bottom: 0.6rem;
    border: 1px solid rgba(255, 184, 0, 0.4);
}

.contact-visit-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 2.5vw, 2.5rem);
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.2;
    margin-bottom: 0.6rem;
}

.contact-visit-desc {
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: #E2D4F8;
    line-height: 1.6;
    margin-bottom: 1.8rem;
    max-width: 580px;
}

.contact-visit-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.contact-btn-primary {
    background-color: #FFB800;
    color: #2D1350;
    border: 2px solid #FFCA28;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    padding: 0.8rem 1.6rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(255, 184, 0, 0.35);
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.contact-btn-primary:hover {
    background-color: #FFAE00;
    transform: translateY(-2px);
}

.contact-btn-secondary {
    background-color: transparent;
    color: #FFFFFF;
    border: 2px solid rgba(255, 255, 255, 0.6);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    padding: 0.8rem 1.5rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.contact-btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: #FFFFFF;
}

.contact-visit-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-visit-img {
    max-width: 260px;
    height: auto;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.3));
}

/* =========================================
   4. GOOGLE MAPS SECTION
========================================= */
.contact-map-section {
    padding: 2.5rem 1.8rem;
    max-width: 1440px;
    margin: 0 auto;
    text-align: center;
}

.contact-map-header {
    margin-bottom: 2rem;
}

.contact-map-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 2.5vw, 2.4rem);
    font-weight: 700;
    color: #1E1238;
    margin-bottom: 0.35rem;
}

.contact-map-subtitle {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 600;
    color: #554D64;
}

.contact-map-placeholder {
    position: relative;
    width: 100%;
    min-height: 320px;
    background: linear-gradient(135deg, #F3EEFA 0%, #E9DEFA 100%);
    border-radius: 28px;
    border: 2px solid rgba(84, 35, 130, 0.1);
    box-shadow: 0 10px 28px rgba(72, 26, 126, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    overflow: hidden;
}

.contact-map-inner-card {
    position: relative;
    z-index: 5;
    background: #FFFFFF;
    padding: 2rem 2.5rem;
    border-radius: 24px;
    box-shadow: 0 12px 30px rgba(61, 26, 104, 0.12);
    border: 2px solid #FFB800;
    max-width: 480px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.contact-map-pin {
    width: 52px;
    height: 52px;
    background-color: #E11D48;
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 0.85rem;
    box-shadow: 0 6px 16px rgba(225, 29, 72, 0.3);
    animation: mapPinBounce 2.5s infinite;
}

@keyframes mapPinBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.contact-map-school-name {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: #1E1238;
    margin-bottom: 0.2rem;
}

.contact-map-school-addr {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: #554D64;
    margin-bottom: 0.35rem;
}

.contact-map-school-cbse {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: #481A7E;
    background-color: #F3EEFA;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pill, 9999px);
    margin-bottom: 1.25rem;
}

.contact-btn-map {
    background-color: #3D1A68;
    color: #FFB800;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.75rem 1.4rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.contact-btn-map:hover {
    background-color: #260B48;
    color: #FFAE00;
    transform: translateY(-2px);
}

.contact-map-bg-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(84, 35, 130, 0.12) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    opacity: 0.6;
}

/* =========================================
   5. ADMISSION HELP 3-OPTIONS SECTION
========================================= */
.contact-help-section {
    padding: 2rem 1.8rem 3rem 1.8rem;
    max-width: 1440px;
    margin: 0 auto;
}

.contact-help-heading {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    font-weight: 700;
    color: #1E1238;
    text-align: center;
    margin-bottom: 1.8rem;
}

.contact-help-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}

.contact-help-card {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 1.3rem 1.5rem;
    border: 2px solid rgba(84, 35, 130, 0.08);
    box-shadow: 0 6px 18px rgba(72, 26, 126, 0.04);
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.contact-help-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(72, 26, 126, 0.1);
    border-color: #FFB800;
}

.contact-help-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.contact-help-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    line-height: 1.3;
}

.contact-help-text strong {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: #1E1238;
}

.contact-help-text span {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: #7B7289;
}

.contact-help-arrow {
    color: #FFB800;
    font-size: 1rem;
    transition: transform 0.25s ease;
}

.contact-help-card:hover .contact-help-arrow {
    transform: translateX(4px);
}

/* =========================================
   6. CONTACT TRUST POINTS STRIP
========================================= */
.contact-trust-strip {
    background: #FFFFFF;
    border-top: 1px solid rgba(84, 35, 130, 0.08);
    border-bottom: 1px solid rgba(84, 35, 130, 0.08);
    padding: 1.4rem 1.8rem;
}

.contact-trust-container {
    max-width: 1440px;
    margin: 0 auto;
}

.contact-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    align-items: center;
}

.contact-trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #3D1A68;
    text-align: center;
}

.contact-trust-icon {
    color: #FFB800;
    font-size: 1.2rem;
}

/* =========================================
   7. SOCIAL MEDIA SECTION
========================================= */
.contact-social-bar {
    padding: 2.5rem 1.8rem 3.5rem 1.8rem;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.contact-social-title {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: #1E1238;
    margin-bottom: 0.25rem;
}

.contact-social-subtitle {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: #6B627B;
    margin-bottom: 1.3rem;
}

.contact-social-links-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.contact-social-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.65rem 1.4rem;
    border-radius: var(--radius-pill, 9999px);
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.contact-social-btn.instagram-btn {
    background: linear-gradient(45deg, #F09433, #E6683C, #DC2743, #CC2366, #BC1888);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(220, 39, 67, 0.25);
}

.contact-social-btn.facebook-btn {
    background-color: #1877F2;
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(24, 119, 242, 0.25);
}

.contact-social-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* =========================================
   RESPONSIVE MEDIA QUERIES (CONTACT PAGE)
========================================= */
@media (max-width: 1199px) {
    .contact-main-container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .contact-visit-card {
        grid-template-columns: 1fr;
        padding: 2.2rem;
        text-align: center;
    }
    .contact-visit-actions {
        justify-content: center;
    }
    .contact-visit-visual {
        display: none;
    }
    .contact-help-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .contact-trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }
    .contact-trust-item {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .contact-hero {
        padding: 2.5rem 1.2rem 2rem 1.2rem;
    }
    .contact-main-section,
    .contact-visit-section,
    .contact-map-section,
    .contact-help-section {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
    .contact-form-card {
        padding: 1.8rem 1.2rem;
        border-radius: 22px;
    }
    .contact-form-row {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
    .contact-help-grid {
        grid-template-columns: 1fr;
    }
    .contact-trust-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
    .contact-visit-actions {
        flex-direction: column;
        width: 100%;
    }
    .contact-btn-primary,
    .contact-btn-secondary {
        width: 100%;
        justify-content: center;
    }
    .contact-map-inner-card {
        padding: 1.5rem 1.2rem;
    }
    .contact-btn-map {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================
   CENTER-ALIGNED SCHOOL VISIT CTA
========================================= */
.contact-visit-section {
    padding: 1.5rem 1.8rem 3.5rem 1.8rem;
    max-width: 1440px;
    margin: 0 auto;
}

.contact-visit-card.contact-visit-centered {
    background: linear-gradient(135deg, #3D1A68 0%, #290E49 100%);
    border-radius: 32px;
    padding: 3.5rem 2.5rem;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 14px 36px rgba(61, 26, 104, 0.2);
    border: 2px solid rgba(255, 184, 0, 0.35);
    position: relative;
    overflow: hidden;
}

.contact-visit-content {
    max-width: 780px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
}

.contact-visit-pill {
    background-color: rgba(255, 184, 0, 0.2);
    color: #FFB800;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-block;
    margin-bottom: 0.8rem;
    border: 1px solid rgba(255, 184, 0, 0.4);
}

.contact-visit-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.2;
    margin-bottom: 0.8rem;
}

.contact-visit-desc {
    font-family: var(--font-body);
    font-size: 1.08rem;
    color: #E2D4F8;
    line-height: 1.65;
    margin-bottom: 2rem;
}

.contact-visit-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}

/* =========================================
   EMBEDDED GOOGLE MAPS SECTION
========================================= */
.contact-map-section {
    padding: 2.5rem 1.8rem;
    max-width: 1440px;
    margin: 0 auto;
    text-align: center;
}

.contact-map-header {
    margin-bottom: 2rem;
}

.contact-map-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 2.5vw, 2.4rem);
    font-weight: 700;
    color: #1E1238;
    margin-bottom: 0.35rem;
}

.contact-map-subtitle {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 600;
    color: #554D64;
}

.contact-map-frame-wrapper {
    position: relative;
    width: 100%;
    border-radius: 28px;
    overflow: hidden;
    border: 3px solid #FFFFFF;
    box-shadow: 0 14px 36px rgba(72, 26, 126, 0.12);
    background-color: #E9DEFA;
}

.contact-map-iframe {
    width: 100%;
    height: 420px;
    display: block;
    border: 0;
}

/* Floating Overlay Card inside map */
.contact-map-overlay-card {
    position: absolute;
    bottom: 20px;
    left: 24px;
    right: 24px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 1rem 1.6rem;
    border-radius: 20px;
    border: 1.5px solid rgba(84, 35, 130, 0.1);
    box-shadow: 0 8px 24px rgba(61, 26, 104, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 620px;
}

.contact-map-card-info {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-align: left;
}

.contact-map-card-pin {
    width: 40px;
    height: 40px;
    background-color: #E11D48;
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.contact-map-card-name {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: #1E1238;
    display: block;
}

.contact-map-card-loc {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: #6B627B;
}

.contact-btn-get-directions {
    background-color: #3D1A68;
    color: #FFB800;
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 700;
    padding: 0.65rem 1.25rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.contact-btn-get-directions:hover {
    background-color: #260B48;
    color: #FFAE00;
    transform: translateY(-2px);
}

/* =========================================
   RESPONSIVE ADJUSTMENTS
========================================= */
@media (max-width: 768px) {
    .contact-visit-card.contact-visit-centered {
        padding: 2.2rem 1.4rem;
    }
    .contact-visit-actions {
        flex-direction: column;
        width: 100%;
    }
    .contact-visit-actions .contact-btn-primary,
    .contact-visit-actions .contact-btn-secondary {
        width: 100%;
        justify-content: center;
    }
    .contact-map-iframe {
        height: 360px;
    }
    .contact-map-overlay-card {
        position: static;
        margin: 1rem;
        flex-direction: column;
        text-align: center;
        max-width: none;
    }
    .contact-map-card-info {
        flex-direction: column;
        text-align: center;
    }
    .contact-btn-get-directions {
        width: 100%;
        justify-content: center;
    }
}



/* =========================================
   1. CONTACT HERO BANNER (OVERLAY & BREADCRUMB)
========================================= */
.contact-hero-banner {
    position: relative;
    width: 100%;
    background-image: url('../images/home/bread.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 3.8rem 1.8rem 4rem 1.8rem;
    text-align: center;
    color: #FFFFFF;
}

/* Royal Purple & Dark Gradient Overlay */
.contact-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(61, 26, 104, 0.92) 0%, rgba(41, 14, 73, 0.88) 100%);
    z-index: 1;
}

.contact-hero-container {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 5;
}

/* Breadcrumb Navigation */
.contact-breadcrumb-nav {
    margin-bottom: 1.2rem;
}

.contact-breadcrumb-list {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    background-color: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill, 9999px);
    list-style: none;
    margin: 0;
}

.contact-breadcrumb-list .breadcrumb-item {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
}

.contact-breadcrumb-list .breadcrumb-link {
    color: #FFB800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s ease;
}

.contact-breadcrumb-list .breadcrumb-link:hover {
    color: #FFAE00;
    text-decoration: underline;
}

.contact-breadcrumb-list .breadcrumb-sep {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
}

.contact-breadcrumb-list .breadcrumb-item.is-active {
    color: #FFFFFF;
}

/* CBSE Badge */
.contact-hero-badge {
    background-color: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    border: 1.5px solid rgba(255, 184, 0, 0.4);
    margin-bottom: 0.85rem;
}

.contact-hero-badge i {
    color: #FFB800;
}

.contact-hero-eyebrow {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #FFD54F;
    letter-spacing: 1px;
    margin-bottom: 0.35rem;
}

.contact-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 3.8vw, 3.4rem);
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.18;
    margin-bottom: 0.85rem;
}

.contact-hero-title .text-highlight {
    color: #FFB800;
}

.contact-hero-subtitle {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 500;
    color: #E2D4F8;
    max-width: 680px;
    line-height: 1.6;
}

.contact-hero-decors {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.contact-decor-plane {
    position: absolute;
    top: 35px;
    right: 7%;
    transform: rotate(10deg);
    animation: gentleDrift 6s ease-in-out infinite alternate;
}

.contact-decor-star {
    position: absolute;
    opacity: 0.7;
    animation: gentleTwinkle 3.5s ease-in-out infinite alternate;
}

.contact-decor-star.star-1 { top: 75px; left: 20%; }
.contact-decor-star.star-2 { top: 110px; right: 22%; }


/* ==========================================================================
   XAVIER KIDS CAREER PAGE
   ========================================================================== */

.career-page-wrapper {
    position: relative;
    width: 100%;
    background-color: var(--bg-page, #FAF8F5);
    color: var(--text-main, #2D2738);
    overflow: hidden;
}

/* =========================================
   1. HERO SECTION
========================================= */
.career-hero {
    position: relative;
    width: 100%;
    background: radial-gradient(circle at 20% 30%, #FFFFFF 0%, #FAF8F5 60%, #F5EFFB 100%);
    padding: 3.8rem 1.8rem 3.4rem 1.8rem;
    text-align: center;
    border-bottom: 2px solid rgba(84, 35, 130, 0.06);
}

.career-hero-container {
    max-width: 920px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 5;
}

.career-hero-badge {
    background-color: #3D1A68;
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 14px rgba(61, 26, 104, 0.15);
    border: 1.5px solid rgba(255, 184, 0, 0.4);
    margin-bottom: 0.85rem;
}

.career-hero-badge i {
    color: #FFB800;
}

.career-hero-eyebrow {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #481A7E;
    letter-spacing: 1px;
    margin-bottom: 0.35rem;
}

.career-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.1rem, 3.6vw, 3.2rem);
    font-weight: 700;
    color: #1E1238;
    line-height: 1.18;
    margin-bottom: 0.85rem;
}

.career-hero-title .text-highlight {
    color: #481A7E;
}

.career-hero-subtitle {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 600;
    color: #554D64;
    max-width: 720px;
    line-height: 1.6;
    margin-bottom: 1.8rem;
}

.career-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.career-btn-hero-primary {
    background-color: #FFB800;
    color: #2D1350;
    border: 2px solid #FFCA28;
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 700;
    padding: 0.75rem 1.6rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(255, 184, 0, 0.35);
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.career-btn-hero-primary:hover {
    background-color: #FFAE00;
    transform: translateY(-2px);
}

.career-btn-hero-secondary {
    background-color: #FFFFFF;
    color: #3D1A68;
    border: 2px solid #3D1A68;
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.career-btn-hero-secondary:hover {
    background-color: #F4EFFF;
    color: #2D0E49;
}

/* Doodles */
.career-hero-decors {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.career-decor-plane {
    position: absolute;
    top: 35px;
    right: 7%;
    transform: rotate(10deg);
    animation: gentleDrift 6s ease-in-out infinite alternate;
}

.career-decor-cloud {
    position: absolute;
    top: 30px;
    left: 6%;
    opacity: 0.85;
}

.career-decor-star {
    position: absolute;
    opacity: 0.7;
    animation: gentleTwinkle 3.5s ease-in-out infinite alternate;
}

.career-decor-star.star-1 { top: 80px; left: 22%; }
.career-decor-star.star-2 { top: 120px; right: 24%; }

/* =========================================
   COMMON SECTION HEADERS
========================================= */
.career-section-header {
    margin-bottom: 2.5rem;
}

.career-section-header.text-center {
    text-align: center;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

.career-pill-tag {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: #481A7E;
    background-color: #F3EEFA;
    padding: 0.3rem 0.9rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-block;
    margin-bottom: 0.5rem;
}

.career-section-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 2.6vw, 2.5rem);
    font-weight: 700;
    color: #1E1238;
    margin-bottom: 0.4rem;
}

.career-section-desc {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 600;
    color: #554D64;
    line-height: 1.55;
}

/* =========================================
   2. WHY WORK WITH US (CENTER-ALIGNED)
========================================= */
.career-benefits-section {
    padding: 4rem 1.8rem;
    max-width: 1440px;
    margin: 0 auto;
}

.career-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
}

.career-benefit-card {
    background: #FFFFFF;
    border-radius: 22px;
    padding: 2rem 1.8rem;
    border: 2px solid rgba(84, 35, 130, 0.08);
    box-shadow: 0 8px 24px rgba(72, 26, 126, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;      /* Centers the icon horizontally */
    text-align: center;        /* Centers the title and paragraph text */
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.career-benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(72, 26, 126, 0.1);
    border-color: rgba(255, 184, 0, 0.4);
}

.career-benefit-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 1.1rem;
}

.bg-soft-purple { background-color: #F3EEFA; color: #481A7E; }
.bg-soft-yellow { background-color: #FEF3C7; color: #D97706; }
.bg-soft-green  { background-color: #DCFCE7; color: #16A34A; }
.bg-soft-pink   { background-color: #FFE4E6; color: #E11D48; }
.bg-soft-blue   { background-color: #E0F2FE; color: #0284C7; }
.bg-soft-orange { background-color: #FFEDD5; color: #EA580C; }

.career-benefit-title {
    font-family: var(--font-heading);
    font-size: 1.18rem;
    font-weight: 700;
    color: #1E1238;
    margin-bottom: 0.5rem;
    text-align: center;
}

.career-benefit-desc {
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 600;
    color: #6B627B;
    line-height: 1.6;
    text-align: center;
}

/* =========================================
   3. CURRENT OPENINGS
========================================= */
.career-openings-section {
    padding: 3.5rem 1.8rem 4rem 1.8rem;
    background-color: #F8F5FC;
    border-top: 1px solid rgba(84, 35, 130, 0.06);
    border-bottom: 1px solid rgba(84, 35, 130, 0.06);
}

.career-openings-container {
    max-width: 1200px;
    margin: 0 auto;
}

.career-jobs-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 2.2rem;
}

.career-job-card {
    background: #FFFFFF;
    border-radius: 22px;
    padding: 1.8rem 2.2rem;
    border: 2px solid rgba(84, 35, 130, 0.08);
    box-shadow: 0 6px 20px rgba(72, 26, 126, 0.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.career-job-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(72, 26, 126, 0.08);
    border-color: #FFB800;
}

.career-job-main {
    flex: 1;
}

.career-job-badge-wrap {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.career-badge-type {
    background-color: #DCFCE7;
    color: #16A34A;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-pill, 9999px);
}

.career-badge-dept {
    background-color: #F3EEFA;
    color: #481A7E;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-pill, 9999px);
}

.career-job-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: #1E1238;
    margin-bottom: 0.4rem;
}

.career-job-summary {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: #554D64;
    line-height: 1.5;
    margin-bottom: 0.85rem;
}

.career-job-meta {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: #7B7289;
}

.career-job-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.career-job-meta i {
    color: #481A7E;
}

.career-btn-apply-role {
    background-color: #3D1A68;
    color: #FFB800;
    border: 2px solid #FFB800;
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 700;
    padding: 0.7rem 1.35rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s ease;
}

.career-btn-apply-role:hover {
    background-color: #FFB800;
    color: #2D1350;
    border-color: #FFCA28;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(255, 184, 0, 0.4);
}

/* Open Application Callout */
.career-open-callout {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 1.4rem 1.8rem;
    border: 2px dashed rgba(255, 184, 0, 0.6);
    display: flex;
    align-items: center;
    gap: 1.2rem;
    box-shadow: 0 4px 16px rgba(255, 184, 0, 0.08);
}

.career-callout-icon {
    width: 44px;
    height: 44px;
    background-color: #FEF3C7;
    color: #D97706;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.career-callout-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.4;
}

.career-callout-text strong {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: #1E1238;
}

.career-callout-text span {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: #554D64;
}

.career-btn-callout {
    background-color: #3D1A68;
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 700;
    padding: 0.65rem 1.3rem;
    border-radius: var(--radius-pill, 9999px);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.25s ease;
}

.career-btn-callout:hover {
    background-color: #2D0E49;
    color: #FFB800;
}

/* =========================================
   4. ONLINE APPLICATION FORM CARD
========================================= */
.career-apply-section {
    padding: 4rem 1.8rem;
    max-width: 1000px;
    margin: 0 auto;
}

.career-apply-card {
    background: #FFFFFF;
    border-radius: 28px;
    padding: 2.8rem 2.4rem;
    box-shadow: 0 16px 40px rgba(72, 26, 126, 0.08);
    border: 2px solid rgba(84, 35, 130, 0.08);
}

.career-apply-header {
    margin-bottom: 2rem;
}

.career-apply-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 2.5vw, 2.4rem);
    font-weight: 700;
    color: #1E1238;
    margin-bottom: 0.35rem;
}

.career-apply-subtitle {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: #6B627B;
    max-width: 620px;
    margin: 0 auto;
}

.career-form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.career-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
}

.career-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.career-form-group.full-width {
    width: 100%;
}

.career-label {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    color: #3D1A68;
}

.career-label .required {
    color: #E11D48;
}

.career-label .optional {
    color: #8E849E;
    font-size: 0.78rem;
}

.career-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.career-input-wrap .input-icon {
    position: absolute;
    left: 14px;
    color: #8E849E;
    font-size: 0.9rem;
    pointer-events: none;
}

.career-input,
.career-select,
.career-textarea {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border-radius: 14px;
    border: 1.5px solid #E2D4F8;
    background-color: #FAF8FD;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: #1E1238;
    transition: all 0.25s ease;
}

.career-textarea {
    padding-left: 1rem;
    resize: vertical;
    min-height: 85px;
    line-height: 1.45;
}

.career-input:focus,
.career-select:focus,
.career-textarea:focus {
    outline: none;
    border-color: #3D1A68;
    background-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(61, 26, 104, 0.12);
}

/* Custom File Upload Dropzone */
.career-file-dropzone {
    position: relative;
    border: 2px dashed #D6C7EE;
    background-color: #FAF8FD;
    border-radius: 16px;
    padding: 1.8rem 1.4rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
}

.career-file-dropzone:hover {
    border-color: #481A7E;
    background-color: #F6F0FC;
}

.career-file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.career-file-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    pointer-events: none;
}

.career-file-icon {
    font-size: 2rem;
    color: #481A7E;
    margin-bottom: 0.2rem;
}

.career-file-text {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #3D1A68;
}

.career-file-hint {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: #7B7289;
}

.career-btn-submit {
    width: 100%;
    background-color: #FFB800;
    color: #2D1350;
    border: 2px solid #FFCA28;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    padding: 0.85rem 1.4rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(255, 184, 0, 0.35);
    transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.career-btn-submit:hover {
    background-color: #FFAE00;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(255, 184, 0, 0.45);
}

.career-privacy-note {
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    color: #7B7289;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.career-privacy-note i {
    color: #16A34A;
}

/* =========================================
   5. HIRING PROCESS (4 STEPS)
========================================= */
.career-process-section {
    padding: 3.5rem 1.8rem 4rem 1.8rem;
    background: radial-gradient(circle at 50% 50%, #FAF8FD 0%, #F5EFFB 100%);
    border-top: 1px solid rgba(84, 35, 130, 0.06);
}

.career-process-container {
    max-width: 1200px;
    margin: 0 auto;
}

.career-process-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
}

.career-step-box {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 1.8rem 1.4rem;
    border: 2px solid rgba(84, 35, 130, 0.08);
    box-shadow: 0 6px 18px rgba(72, 26, 126, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    position: relative;
}

.career-step-number {
    position: absolute;
    top: -14px;
    background: #3D1A68;
    color: #FFB800;
    border: 2px solid #FFB800;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.career-step-icon {
    font-size: 1.8rem;
    color: #481A7E;
    margin-top: 0.4rem;
    margin-bottom: 0.8rem;
}

.career-step-title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: #1E1238;
    margin-bottom: 0.35rem;
}

.career-step-desc {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: #6B627B;
    line-height: 1.45;
}

.career-step-box.is-final {
    border-color: #FFB800;
    background-color: #FFFDF8;
}

.career-step-box.is-final .career-step-number {
    background: #FFB800;
    color: #2D1350;
    border-color: #3D1A68;
}

.career-step-box.is-final .career-step-icon {
    color: #D97706;
}

.career-step-connector {
    color: #FFB800;
    font-size: 1.2rem;
    opacity: 0.8;
}

/* =========================================
   6. DIRECT HR CONTACT STRIP
========================================= */
.career-hr-contact {
    padding: 2.5rem 1.8rem 3.5rem 1.8rem;
    max-width: 1200px;
    margin: 0 auto;
}

.career-hr-card {
    background: linear-gradient(135deg, #3D1A68 0%, #290E49 100%);
    border-radius: 24px;
    padding: 2.2rem 2.5rem;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 1.8rem;
    box-shadow: 0 12px 30px rgba(61, 26, 104, 0.18);
    border: 2px solid rgba(255, 184, 0, 0.3);
}

.career-hr-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 184, 0, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #FFB800;
    flex-shrink: 0;
}

.career-hr-content {
    flex: 1;
}

.career-hr-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 0.25rem;
}

.career-hr-desc {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #E2D4F8;
    margin-bottom: 0.85rem;
}

.career-hr-links {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    font-family: var(--font-heading);
    font-size: 0.92rem;
}

.career-hr-link {
    color: #FFB800;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.career-hr-link:hover {
    color: #FFAE00;
    text-decoration: underline;
}

.career-hr-sep {
    color: rgba(255, 255, 255, 0.4);
}

.career-hr-location {
    color: #E2D4F8;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

/* =========================================
   7. TRUST STRIP
========================================= */
.career-trust-strip {
    background: #FFFFFF;
    border-top: 1px solid rgba(84, 35, 130, 0.08);
    border-bottom: 1px solid rgba(84, 35, 130, 0.08);
    padding: 1.4rem 1.8rem;
}

.career-trust-container {
    max-width: 1440px;
    margin: 0 auto;
}

.career-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    align-items: center;
}

.career-trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #3D1A68;
    text-align: center;
}

.career-trust-item i {
    color: #FFB800;
    font-size: 1.2rem;
}

/* =========================================
   RESPONSIVE MEDIA QUERIES (CAREER PAGE)
========================================= */
@media (max-width: 1199px) {
    .career-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .career-process-steps {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.6rem;
    }
    .career-step-connector {
        display: none;
    }
    .career-trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }
    .career-trust-item {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .career-hero {
        padding: 2.5rem 1.2rem 2rem 1.2rem;
    }
    .career-benefits-section,
    .career-openings-section,
    .career-apply-section,
    .career-process-section,
    .career-hr-contact {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
    .career-benefits-grid {
        grid-template-columns: 1fr;
    }
    .career-job-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.5rem;
        gap: 1.2rem;
    }
    .career-btn-apply-role {
        width: 100%;
        justify-content: center;
    }
    .career-open-callout {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    .career-btn-callout {
        width: 100%;
        text-align: center;
    }
    .career-apply-card {
        padding: 1.8rem 1.2rem;
        border-radius: 22px;
    }
    .career-form-row {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
    .career-process-steps {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }
    .career-hr-card {
        flex-direction: column;
        text-align: center;
        padding: 1.6rem 1.2rem;
        gap: 1rem;
    }
    .career-hr-links {
        justify-content: center;
        flex-direction: column;
        gap: 0.4rem;
    }
    .career-hr-sep {
        display: none;
    }
    .career-trust-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
}




/* =========================================
   1. CAREER HERO BANNER (OVERLAY & BREADCRUMB)
========================================= */
.career-hero-banner {
    position: relative;
    width: 100%;
    background-image: url('../images/home/bread.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 3.8rem 1.8rem 4rem 1.8rem;
    text-align: center;
    color: #FFFFFF;
}

/* Royal Purple & Dark Gradient Overlay */
.career-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(61, 26, 104, 0.92) 0%, rgba(41, 14, 73, 0.88) 100%);
    z-index: 1;
}

.career-hero-container {
    max-width: 920px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 5;
}

/* Breadcrumb Navigation */
.career-breadcrumb-nav {
    margin-bottom: 1.2rem;
}

.career-breadcrumb-list {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    background-color: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill, 9999px);
    list-style: none;
    margin: 0;
}

.career-breadcrumb-list .breadcrumb-item {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
}

.career-breadcrumb-list .breadcrumb-link {
    color: #FFB800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s ease;
}

.career-breadcrumb-list .breadcrumb-link:hover {
    color: #FFAE00;
    text-decoration: underline;
}

.career-breadcrumb-list .breadcrumb-sep {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
}

.career-breadcrumb-list .breadcrumb-item.is-active {
    color: #FFFFFF;
}

/* CBSE Badge */
.career-hero-badge {
    background-color: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    border: 1.5px solid rgba(255, 184, 0, 0.4);
    margin-bottom: 0.85rem;
}

.career-hero-badge i {
    color: #FFB800;
}

.career-hero-eyebrow {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #FFD54F;
    letter-spacing: 1px;
    margin-bottom: 0.35rem;
}

.career-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 3.8vw, 3.4rem);
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.18;
    margin-bottom: 0.85rem;
}

.career-hero-title .text-highlight {
    color: #FFB800;
}

.career-hero-subtitle {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 500;
    color: #E2D4F8;
    max-width: 720px;
    line-height: 1.6;
    margin-bottom: 1.8rem;
}

.career-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.career-btn-hero-primary {
    background-color: #FFB800;
    color: #2D1350;
    border: 2px solid #FFCA28;
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 700;
    padding: 0.75rem 1.6rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(255, 184, 0, 0.35);
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.career-btn-hero-primary:hover {
    background-color: #FFAE00;
    transform: translateY(-2px);
}

.career-btn-hero-secondary {
    background-color: transparent;
    color: #FFFFFF;
    border: 2px solid rgba(255, 255, 255, 0.6);
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.career-btn-hero-secondary:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: #FFFFFF;
}

.career-hero-decors {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.career-decor-plane {
    position: absolute;
    top: 35px;
    right: 7%;
    transform: rotate(10deg);
    animation: gentleDrift 6s ease-in-out infinite alternate;
}

.career-decor-star {
    position: absolute;
    opacity: 0.7;
    animation: gentleTwinkle 3.5s ease-in-out infinite alternate;
}

.career-decor-star.star-1 { top: 75px; left: 20%; }
.career-decor-star.star-2 { top: 110px; right: 22%; }


/* ==========================================================================
   XAVIER KIDS GALLERY PAGE (HERO IMAGE OVERLAY & BREADCRUMB)
   ========================================================================== */

.gallery-page-wrapper {
    position: relative;
    width: 100%;
    background-color: var(--bg-page, #FAF8F5);
    color: var(--text-main, #2D2738);
    overflow: hidden;
}

/* =========================================
   1. HERO BANNER WITH OVERLAY & BREADCRUMB
========================================= */
.gallery-hero-banner {
    position: relative;
    width: 100%;
    background-image: url('../images/home/bread.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 3.8rem 1.8rem 4rem 1.8rem;
    text-align: center;
    color: #FFFFFF;
    position: relative;
}

/* Rich Royal Purple & Dark Gradient Overlay */
.gallery-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(61, 26, 104, 0.92) 0%, rgba(41, 14, 73, 0.88) 100%);
    z-index: 1;
}

.gallery-hero-container {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 5;
}

/* Breadcrumb Navigation */
.gallery-breadcrumb-nav {
    margin-bottom: 1.2rem;
}

.gallery-breadcrumb-list {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    background-color: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill, 9999px);
    list-style: none;
    margin: 0;
}

.breadcrumb-item {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
}

.breadcrumb-link {
    color: #FFB800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s ease;
}

.breadcrumb-link:hover {
    color: #FFAE00;
    text-decoration: underline;
}

.breadcrumb-sep {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
}

.breadcrumb-item.is-active {
    color: #FFFFFF;
}

/* CBSE Badge */
.gallery-hero-badge {
    background-color: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    border: 1.5px solid rgba(255, 184, 0, 0.4);
    margin-bottom: 0.85rem;
}

.gallery-hero-badge i {
    color: #FFB800;
}

.gallery-hero-eyebrow {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #FFD54F;
    letter-spacing: 1px;
    margin-bottom: 0.35rem;
}

.gallery-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 3.8vw, 3.4rem);
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.18;
    margin-bottom: 0.85rem;
}

.gallery-hero-title .text-highlight {
    color: #FFB800;
}

.gallery-hero-subtitle {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 500;
    color: #E2D4F8;
    max-width: 720px;
    line-height: 1.6;
}

.gallery-hero-decors {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.gallery-decor-plane {
    position: absolute;
    top: 35px;
    right: 7%;
    transform: rotate(10deg);
    animation: gentleDrift 6s ease-in-out infinite alternate;
}

.gallery-decor-star {
    position: absolute;
    opacity: 0.7;
    animation: gentleTwinkle 3.5s ease-in-out infinite alternate;
}

.gallery-decor-star.star-1 { top: 75px; left: 20%; }
.gallery-decor-star.star-2 { top: 110px; right: 22%; }

/* =========================================
   2. FILTER BAR & GALLERY GRID
========================================= */
.gallery-main-section {
    padding: 3.5rem 1.8rem 5rem 1.8rem;
    max-width: 1440px;
    margin: 0 auto;
}

.gallery-filter-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 2.8rem;
}

.gallery-filter-btn {
    background: #FFFFFF;
    color: #481A7E;
    border: 2px solid rgba(84, 35, 130, 0.12);
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 700;
    padding: 0.6rem 1.3rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(72, 26, 126, 0.04);
    transition: all 0.25s ease;
    backface-visibility: hidden;
}

.gallery-filter-btn i {
    color: #FFB800;
}

.gallery-filter-btn:hover {
    background-color: #F4EFFF;
    border-color: #481A7E;
    transform: translateY(-2px);
}

.gallery-filter-btn.is-active {
    background-color: #3D1A68;
    color: #FFFFFF;
    border-color: #3D1A68;
    box-shadow: 0 6px 18px rgba(61, 26, 104, 0.25);
}

.gallery-filter-btn.is-active i {
    color: #FFB800;
}

/* Grid Layout */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.8rem;
    transition: opacity 0.3s ease;
}

.gallery-item {
    display: block;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.gallery-item.is-hidden {
    display: none;
    opacity: 0;
    transform: scale(0.95);
}

.gallery-card {
    background: #FFFFFF;
    border-radius: 24px;
    overflow: hidden;
    border: 2px solid rgba(84, 35, 130, 0.08);
    box-shadow: 0 8px 24px rgba(72, 26, 126, 0.05);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.gallery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 34px rgba(72, 26, 126, 0.12);
    border-color: #FFB800;
}

.gallery-thumb-wrap {
    position: relative;
    width: 100%;
    height: 240px;
    overflow: hidden;
    background-color: #F3EEFA;
}

.gallery-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.gallery-card:hover .gallery-thumb {
    transform: scale(1.06);
}

.gallery-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pill, 9999px);
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.bg-badge-yellow { background-color: #FEF3C7; color: #D97706; }
.bg-badge-purple { background-color: #F3EEFA; color: #481A7E; }
.bg-badge-pink   { background-color: #FFE4E6; color: #E11D48; }
.bg-badge-green  { background-color: #DCFCE7; color: #16A34A; }

.gallery-hover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(61, 26, 104, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-card:hover .gallery-hover-overlay {
    opacity: 1;
}

.gallery-zoom-icon {
    width: 48px;
    height: 48px;
    background-color: #FFB800;
    color: #3D1A68;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transform: scale(0.85);
    transition: transform 0.25s ease;
}

.gallery-card:hover .gallery-zoom-icon {
    transform: scale(1);
}

.gallery-card-info {
    padding: 1.2rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.gallery-card-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: #1E1238;
    line-height: 1.3;
}

.gallery-card-sub {
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    color: #7B7289;
}

/* =========================================
   3. LIGHTBOX IMAGE POPUP MODAL
========================================= */
.gallery-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 1.5rem;
}

.gallery-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.gallery-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(30, 10, 56, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.gallery-modal-container {
    position: relative;
    z-index: 10;
    max-width: 820px;
    width: 100%;
    background: #FFFFFF;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    transform: scale(0.92);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-modal.is-open .gallery-modal-container {
    transform: scale(1);
}

.gallery-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    background-color: rgba(61, 26, 104, 0.85);
    color: #FFFFFF;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 12;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.gallery-modal-close:hover {
    background-color: #FFB800;
    color: #3D1A68;
    transform: scale(1.1);
}

.gallery-modal-body {
    display: flex;
    flex-direction: column;
}

.gallery-modal-img {
    width: 100%;
    max-height: 520px;
    object-fit: contain;
    background-color: #1E1238;
    display: block;
}

.gallery-modal-caption {
    padding: 1.2rem 1.8rem;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.gallery-modal-category {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    color: #FFB800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gallery-modal-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: #1E1238;
}

/* =========================================
   4. CAMPUS VISIT CTA
========================================= */
.gallery-cta-section {
    padding: 2rem 1.8rem 4.5rem 1.8rem;
    max-width: 1440px;
    margin: 0 auto;
}

.gallery-cta-card {
    background: linear-gradient(135deg, #3D1A68 0%, #290E49 100%);
    border-radius: 32px;
    padding: 3.5rem 2.5rem;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 14px 36px rgba(61, 26, 104, 0.2);
    border: 2px solid rgba(255, 184, 0, 0.35);
}

.gallery-cta-content {
    max-width: 780px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gallery-cta-pill {
    background-color: rgba(255, 184, 0, 0.2);
    color: #FFB800;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-block;
    margin-bottom: 0.8rem;
    border: 1px solid rgba(255, 184, 0, 0.4);
}

.gallery-cta-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.2;
    margin-bottom: 0.8rem;
}

.gallery-cta-desc {
    font-family: var(--font-body);
    font-size: 1.08rem;
    color: #E2D4F8;
    line-height: 1.65;
    margin-bottom: 2rem;
}

.gallery-cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.gallery-btn-primary {
    background-color: #FFB800;
    color: #2D1350;
    border: 2px solid #FFCA28;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    padding: 0.8rem 1.6rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(255, 184, 0, 0.35);
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.gallery-btn-primary:hover {
    background-color: #FFAE00;
    transform: translateY(-2px);
}

.gallery-btn-secondary {
    background-color: transparent;
    color: #FFFFFF;
    border: 2px solid rgba(255, 255, 255, 0.6);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    padding: 0.8rem 1.5rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.gallery-btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: #FFFFFF;
}

/* =========================================
   5. TRUST STRIP
========================================= */
.gallery-trust-strip {
    background: #FFFFFF;
    border-top: 1px solid rgba(84, 35, 130, 0.08);
    border-bottom: 1px solid rgba(84, 35, 130, 0.08);
    padding: 1.4rem 1.8rem;
}

.gallery-trust-container {
    max-width: 1440px;
    margin: 0 auto;
}

.gallery-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    align-items: center;
}

.gallery-trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #3D1A68;
    text-align: center;
}

.gallery-trust-item i {
    color: #FFB800;
    font-size: 1.2rem;
}

/* =========================================
   RESPONSIVE MEDIA QUERIES (GALLERY)
========================================= */
@media (max-width: 1199px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    .gallery-trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }
    .gallery-trust-item {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .gallery-hero-banner {
        padding: 2.8rem 1.2rem 2.8rem 1.2rem;
    }
    .gallery-main-section,
    .gallery-cta-section {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
    .gallery-thumb-wrap {
        height: 200px;
    }
    .gallery-filter-bar {
        gap: 0.5rem;
    }
    .gallery-filter-btn {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }
    .gallery-cta-card {
        padding: 2.2rem 1.4rem;
    }
    .gallery-cta-actions {
        flex-direction: column;
        width: 100%;
    }
    .gallery-btn-primary,
    .gallery-btn-secondary {
        width: 100%;
        justify-content: center;
    }
    .gallery-trust-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
}

















/* ==========================================================================
   XAVIER KIDS ACTIVITIES PAGE
   ========================================================================== */

.activities-page-wrapper {
    position: relative;
    width: 100%;
    background-color: var(--bg-page, #FAF8F5);
    color: var(--text-main, #2D2738);
    overflow: hidden;
}

/* =========================================
   1. HERO BANNER WITH OVERLAY & BREADCRUMB
========================================= */
.activities-hero-banner {
    position: relative;
    width: 100%;
    background-image: url('../images/home/bread.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 3.8rem 1.8rem 4rem 1.8rem;
    text-align: center;
    color: #FFFFFF;
}

.activities-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(61, 26, 104, 0.92) 0%, rgba(41, 14, 73, 0.88) 100%);
    z-index: 1;
}

.activities-hero-container {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 5;
}

/* Breadcrumb */
.activities-breadcrumb-nav {
    margin-bottom: 1.2rem;
}

.activities-breadcrumb-list {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    background-color: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill, 9999px);
    list-style: none;
    margin: 0;
}

.activities-breadcrumb-list .breadcrumb-item {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
}

.activities-breadcrumb-list .breadcrumb-link {
    color: #FFB800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s ease;
}

.activities-breadcrumb-list .breadcrumb-link:hover {
    color: #FFAE00;
    text-decoration: underline;
}

.activities-breadcrumb-list .breadcrumb-sep {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
}

.activities-breadcrumb-list .breadcrumb-item.is-active {
    color: #FFFFFF;
}

/* Badge & Headings */
.activities-hero-badge {
    background-color: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    border: 1.5px solid rgba(255, 184, 0, 0.4);
    margin-bottom: 0.85rem;
}

.activities-hero-badge i {
    color: #FFB800;
}

.activities-hero-eyebrow {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #FFD54F;
    letter-spacing: 1px;
    margin-bottom: 0.35rem;
}

.activities-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 3.8vw, 3.4rem);
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.18;
    margin-bottom: 0.85rem;
}

.activities-hero-title .text-highlight {
    color: #FFB800;
}

.activities-hero-subtitle {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 500;
    color: #E2D4F8;
    max-width: 720px;
    line-height: 1.6;
}

.activities-hero-decors {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.activities-decor-plane {
    position: absolute;
    top: 35px;
    right: 7%;
    transform: rotate(10deg);
    animation: gentleDrift 6s ease-in-out infinite alternate;
}

.activities-decor-star {
    position: absolute;
    opacity: 0.7;
    animation: gentleTwinkle 3.5s ease-in-out infinite alternate;
}

.activities-decor-star.star-1 { top: 75px; left: 20%; }
.activities-decor-star.star-2 { top: 110px; right: 22%; }

/* =========================================
   2. MAIN ACTIVITIES SECTION & HEADING ALIGNMENT
========================================= */
.activities-main-section {
    padding: 4rem 1.8rem 4.5rem 1.8rem;
    max-width: 1440px;
    margin: 0 auto;
}

.activities-heading-block {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto 3rem auto;
    max-width: 820px;
}

.activities-main-heading {
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 2.8vw, 2.7rem);
    font-weight: 700;
    color: #3D1A68;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
    line-height: 1.25;
    text-align: center;
    width: 100%;
}

.act-heart-icon {
    font-size: 1.3rem;
    color: #E11D48;
}

.activities-sub-heading {
    font-family: var(--font-body);
    font-size: 1.08rem;
    font-weight: 600;
    color: #554D64;
    text-align: center;
    line-height: 1.5;
    margin: 0 auto;
    width: 100%;
}

/* 6-Card Grid Layout (2 rows x 3 cols) */
.activities-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.8rem;
}

/* Individual Card */
.activity-card {
    border-radius: 28px;
    padding: 2rem 1.6rem 2rem 2rem;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: 1.4rem;
    border: 2px solid transparent;
    box-shadow: 0 10px 28px rgba(72, 26, 126, 0.05);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.activity-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(72, 26, 126, 0.12);
}

/* Color Themes */
.act-theme-purple {
    background-color: #F8F3FD;
    border-color: #EBDCF9;
}
.act-theme-purple .activity-icon-circle { background-color: #8A44C8; color: #FFFFFF; }
.act-theme-purple .bullet-dot { color: #8A44C8; }

.act-theme-green {
    background-color: #F0FAF3;
    border-color: #D1F2DC;
}
.act-theme-green .activity-icon-circle { background-color: #2E7D32; color: #FFFFFF; }
.act-theme-green .bullet-dot { color: #2E7D32; }

.act-theme-orange {
    background-color: #FFF8EF;
    border-color: #FEE7C8;
}
.act-theme-orange .activity-icon-circle { background-color: #E76F51; color: #FFFFFF; }
.act-theme-orange .bullet-dot { color: #E76F51; }

.act-theme-pink {
    background-color: #FDF2F4;
    border-color: #FCD6DC;
}
.act-theme-pink .activity-icon-circle { background-color: #E11D48; color: #FFFFFF; }
.act-theme-pink .bullet-dot { color: #E11D48; }

.act-theme-indigo {
    background-color: #F4F6FE;
    border-color: #DCE3FD;
}
.act-theme-indigo .activity-icon-circle { background-color: #3D1A68; color: #FFB800; }
.act-theme-indigo .bullet-dot { color: #3D1A68; }

.act-theme-blue {
    background-color: #F0F8FF;
    border-color: #D4ECFF;
}
.act-theme-blue .activity-icon-circle { background-color: #0284C7; color: #FFFFFF; }
.act-theme-blue .bullet-dot { color: #0284C7; }

/* Content Left */
.activity-card-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.activity-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 0.9rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.activity-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: #1E1238;
    line-height: 1.25;
    margin-bottom: 0.45rem;
}

.activity-desc {
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    color: #554D64;
    line-height: 1.45;
    margin-bottom: 1rem;
}

.activity-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.activity-bullets li {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    color: #2D2738;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    line-height: 1.3;
}

.bullet-dot {
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* Image Right (Arched Frame) */
.activity-card-photo {
    width: 100%;
    height: 230px;
    border-radius: 200px 200px 24px 24px;
    overflow: hidden;
    background-color: #FFFFFF;
    border: 3px solid #FFFFFF;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.activity-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.activity-card:hover .activity-img {
    transform: scale(1.06);
}

/* =========================================
   3. SCHOOL VISIT CTA PANEL (WITH IMAGE)
========================================= */
.activities-visit-section {
    padding: 1rem 1.8rem 4.5rem 1.8rem;
    max-width: 1440px;
    margin: 0 auto;
}

.activities-visit-panel {
    background: #FFFFFF;
    border-radius: 32px;
    padding: 2rem 2.5rem;
    border: 2px solid rgba(84, 35, 130, 0.08);
    box-shadow: 0 14px 36px rgba(72, 26, 126, 0.08);
    display: grid;
    grid-template-columns: 0.75fr 1.45fr 1fr;
    align-items: center;
    gap: 2rem;
}

.activities-visit-mascot-wrap {
    width: 100%;
    height: 160px;
    border-radius: 20px;
    overflow: hidden;
    background-color: #F3EEFA;
    border: 2px solid #FFFFFF;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

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

.activities-visit-center {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.visit-center-title {
    font-family: var(--font-heading);
    font-size: 1.55rem;
    font-weight: 700;
    color: #3D1A68;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.2rem;
}

.visit-heart-icon {
    font-size: 1.1rem;
    color: #E11D48;
}

.visit-center-highlight {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: #E11D48;
    margin-bottom: 0.35rem;
}

.visit-center-sub {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: #554D64;
    line-height: 1.45;
}

.activities-visit-btns {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    width: 100%;
}

.visit-btn-yellow {
    background-color: #FFB800;
    color: #2D1350;
    border: 2px solid #FFCA28;
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 700;
    padding: 0.75rem 1.4rem;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(255, 184, 0, 0.35);
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.visit-btn-yellow:hover {
    background-color: #FFAE00;
    transform: translateY(-2px);
}

.visit-btn-white {
    background-color: #FFFFFF;
    color: #3D1A68;
    border: 2px solid #3D1A68;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.75rem 1.4rem;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.visit-btn-white:hover {
    background-color: #F4EFFF;
    color: #2D0E49;
    transform: translateY(-2px);
}

/* =========================================
   4. TRUST STRIP
========================================= */
.activities-trust-strip {
    background: #FFFFFF;
    border-top: 1px solid rgba(84, 35, 130, 0.08);
    border-bottom: 1px solid rgba(84, 35, 130, 0.08);
    padding: 1.4rem 1.8rem;
}

.activities-trust-container {
    max-width: 1440px;
    margin: 0 auto;
}

.activities-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    align-items: center;
}

.activities-trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #3D1A68;
    text-align: center;
}

.activities-trust-item i {
    color: #FFB800;
    font-size: 1.2rem;
}

/* =========================================
   RESPONSIVE MEDIA QUERIES (ACTIVITIES)
========================================= */
@media (max-width: 1200px) {
    .activities-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    .activities-visit-panel {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 2.2rem 1.8rem;
    }
    .activities-visit-center {
        text-align: center;
        align-items: center;
    }
    .activities-visit-btns {
        max-width: 400px;
        margin: 0 auto;
    }
    .activities-trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }
    .activities-trust-item {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .activities-hero-banner {
        padding: 2.8rem 1.2rem;
    }
    .activities-main-section,
    .activities-visit-section {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
    .activities-cards-grid {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }
    .activity-card {
        grid-template-columns: 1fr;
        padding: 1.8rem 1.4rem;
    }
    .activity-card-photo {
        height: 200px;
        order: -1;
        border-radius: 20px;
    }
    .activities-visit-panel {
        padding: 1.8rem 1.2rem;
        border-radius: 24px;
    }
    .visit-center-title {
        font-size: 1.35rem;
        justify-content: center;
    }
    .activities-trust-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
}





/* ==========================================================================
   XAVIER KIDS INFRASTRUCTURE PAGE (MATCHING APPROVED REFERENCE)
   ========================================================================== */

.infra-page-wrapper {
    position: relative;
    width: 100%;
    background-color: var(--bg-page, #FAF8F5);
    color: var(--text-main, #2D2738);
    overflow: hidden;
}

/* =========================================
   1. HERO BANNER WITH OVERLAY & BREADCRUMB
========================================= */
.infra-hero-banner {
    position: relative;
    width: 100%;
    background-image: url('../images/home/bread.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 3.8rem 1.8rem 4rem 1.8rem;
    text-align: center;
    color: #FFFFFF;
}

.infra-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(61, 26, 104, 0.92) 0%, rgba(41, 14, 73, 0.88) 100%);
    z-index: 1;
}

.infra-hero-container {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 5;
}

/* Breadcrumb */
.infra-breadcrumb-nav {
    margin-bottom: 1.2rem;
}

.infra-breadcrumb-list {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    background-color: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill, 9999px);
    list-style: none;
    margin: 0;
}

.infra-breadcrumb-list .breadcrumb-item {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
}

.infra-breadcrumb-list .breadcrumb-link {
    color: #FFB800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s ease;
}

.infra-breadcrumb-list .breadcrumb-link:hover {
    color: #FFAE00;
    text-decoration: underline;
}

.infra-breadcrumb-list .breadcrumb-sep {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
}

.infra-breadcrumb-list .breadcrumb-item.is-active {
    color: #FFFFFF;
}

/* Badge & Headings */
.infra-hero-badge {
    background-color: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    border: 1.5px solid rgba(255, 184, 0, 0.4);
    margin-bottom: 0.85rem;
}

.infra-hero-badge i {
    color: #FFB800;
}

.infra-hero-eyebrow {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #FFD54F;
    letter-spacing: 1px;
    margin-bottom: 0.35rem;
}

.infra-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 3.8vw, 3.4rem);
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.18;
    margin-bottom: 0.85rem;
}

.infra-hero-title .text-highlight {
    color: #FFB800;
}

.infra-hero-subtitle {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 500;
    color: #E2D4F8;
    max-width: 720px;
    line-height: 1.6;
}

.infra-hero-decors {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.infra-decor-plane {
    position: absolute;
    top: 35px;
    right: 7%;
    transform: rotate(10deg);
    animation: gentleDrift 6s ease-in-out infinite alternate;
}

.infra-decor-star {
    position: absolute;
    opacity: 0.7;
    animation: gentleTwinkle 3.5s ease-in-out infinite alternate;
}

.infra-decor-star.star-1 { top: 75px; left: 20%; }
.infra-decor-star.star-2 { top: 110px; right: 22%; }

/* =========================================
   2. MAIN 16-CARD INFRASTRUCTURE GRID
========================================= */
.infra-main-section {
    padding: 4rem 1.8rem 5rem 1.8rem;
    max-width: 1440px;
    margin: 0 auto;
}

.infra-heading-block {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto 3.2rem auto;
    max-width: 820px;
}

.infra-main-heading {
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 2.8vw, 2.7rem);
    font-weight: 700;
    color: #3D1A68;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
    line-height: 1.25;
    text-align: center;
    width: 100%;
}

.infra-heart-icon {
    font-size: 1.3rem;
    color: #E11D48;
}

.infra-sub-heading {
    font-family: var(--font-body);
    font-size: 1.08rem;
    font-weight: 600;
    color: #554D64;
    text-align: center;
    line-height: 1.5;
    margin: 0 auto;
    width: 100%;
}

/* 4 Columns x 4 Rows Grid */
.infra-spaces-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

/* Individual Card */
.infra-space-card {
    background: #FFFFFF;
    border-radius: 24px;
    overflow: hidden;
    border: 2px solid rgba(84, 35, 130, 0.08);
    box-shadow: 0 8px 24px rgba(72, 26, 126, 0.04);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.infra-space-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 34px rgba(72, 26, 126, 0.12);
    border-color: #FFB800;
}

.infra-space-thumb-wrap {
    position: relative;
    width: 100%;
    height: 165px;
    overflow: hidden;
    background-color: #F3EEFA;
}

.infra-space-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.infra-space-card:hover .infra-space-img {
    transform: scale(1.06);
}

/* Floating Badge Icons */
.infra-space-badge {
    position: absolute;
    bottom: -18px;
    left: 16px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    z-index: 3;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.25s ease;
}

.infra-space-card:hover .infra-space-badge {
    transform: scale(1.1) rotate(6deg);
}

.badge-purple { background-color: #481A7E; color: #FFFFFF; }
.badge-orange { background-color: #D97706; color: #FFFFFF; }
.badge-green  { background-color: #16A34A; color: #FFFFFF; }
.badge-pink   { background-color: #E11D48; color: #FFFFFF; }
.badge-blue   { background-color: #0284C7; color: #FFFFFF; }

.infra-space-content {
    padding: 1.5rem 1.25rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.infra-space-title {
    font-family: var(--font-heading);
    font-size: 1.12rem;
    font-weight: 700;
    color: #1E1238;
    margin-bottom: 0.35rem;
    line-height: 1.25;
}

.infra-space-desc {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: #554D64;
    line-height: 1.45;
}

/* --- 16. SCHOOL VISIT CTA CARD --- */
.infra-cta-card {
    background: #FFFDF8;
    border-radius: 24px;
    border: 2px dashed #FFB800;
    box-shadow: 0 8px 24px rgba(255, 184, 0, 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.6rem 1.4rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.infra-cta-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 34px rgba(255, 184, 0, 0.25);
}

.infra-cta-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.infra-cta-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: #3D1A68;
    line-height: 1.25;
    margin-bottom: 0.25rem;
}

.infra-cta-highlight {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: #E11D48;
    margin-bottom: 0.35rem;
}

.infra-cta-sub {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: #554D64;
    line-height: 1.4;
    margin-bottom: 1rem;
}

.infra-cta-btn {
    background-color: #FFB800;
    color: #2D1350;
    border: 2px solid #FFCA28;
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 700;
    padding: 0.65rem 1.2rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(255, 184, 0, 0.3);
    transition: transform 0.25s ease, background-color 0.25s ease;
    white-space: nowrap;
}

.infra-cta-btn:hover {
    background-color: #FFAE00;
    transform: translateY(-2px);
}

/* =========================================
   3. TRUST STRIP
========================================= */
.infra-trust-strip {
    background: #FFFFFF;
    border-top: 1px solid rgba(84, 35, 130, 0.08);
    border-bottom: 1px solid rgba(84, 35, 130, 0.08);
    padding: 1.4rem 1.8rem;
}

.infra-trust-container {
    max-width: 1440px;
    margin: 0 auto;
}

.infra-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    align-items: center;
}

.infra-trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #3D1A68;
    text-align: center;
}

.infra-trust-item i {
    color: #FFB800;
    font-size: 1.2rem;
}

/* =========================================
   RESPONSIVE MEDIA QUERIES (INFRASTRUCTURE)
========================================= */
@media (max-width: 1200px) {
    .infra-spaces-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.4rem;
    }
    .infra-trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }
    .infra-trust-item {
        justify-content: flex-start;
    }
}

@media (max-width: 900px) {
    .infra-spaces-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .infra-hero-banner {
        padding: 2.8rem 1.2rem;
    }
    .infra-main-section {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
    .infra-spaces-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
    .infra-space-thumb-wrap {
        height: 180px;
    }
    .infra-trust-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
}




/* =========================================
   INFRASTRUCTURE CARDS & BADGE ICONS FIX
========================================= */

.infra-space-card {
    background: #FFFFFF;
    border-radius: 24px;
    overflow: hidden; /* Keeps outer card rounded */
    border: 2px solid rgba(84, 35, 130, 0.08);
    box-shadow: 0 8px 24px rgba(72, 26, 126, 0.04);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.infra-space-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 34px rgba(72, 26, 126, 0.12);
    border-color: #FFB800;
}

/* 1. Set overflow to visible so the badge does NOT get clipped */
.infra-space-thumb-wrap {
    position: relative;
    width: 100%;
    height: 165px;
    background-color: #F3EEFA;
    overflow: visible; /* FIXED: Allows the icon badge to pop out completely */
}

.infra-space-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 22px 22px 0 0;
    transition: transform 0.4s ease;
}

.infra-space-card:hover .infra-space-img {
    transform: scale(1.04);
}

/* 2. Floating Circular Badge Icon (Centered, Fully Visible, White Border) */
.infra-space-badge {
    position: absolute;
    bottom: -20px;
    left: 18px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3.5px solid #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(72, 26, 126, 0.2);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    backface-visibility: hidden;
}

.infra-space-badge i {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: #FFFFFF;
}

.infra-space-card:hover .infra-space-badge {
    transform: scale(1.12) rotate(6deg);
    box-shadow: 0 6px 16px rgba(72, 26, 126, 0.3);
}

/* Badge Color Themes */
.badge-purple { background-color: #481A7E; }
.badge-orange { background-color: #D97706; }
.badge-green  { background-color: #16A34A; }
.badge-pink   { background-color: #E11D48; }
.badge-blue   { background-color: #0284C7; }

/* 3. Card Text Content with comfortable breathing room below the badge */
.infra-space-content {
    padding: 1.6rem 1.35rem 1.35rem 1.35rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    z-index: 2;
}

.infra-space-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: #1E1238;
    margin-bottom: 0.35rem;
    line-height: 1.25;
}

.infra-space-desc {
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    color: #554D64;
    line-height: 1.45;
}









/* ==========================================================================
   XAVIER KIDS PROGRAMS PAGE (MATCHING APPROVED REFERENCE)
   ========================================================================== */

.programs-page-wrapper {
    position: relative;
    width: 100%;
    background-color: var(--bg-page, #FAF8F5);
    color: var(--text-main, #2D2738);
    overflow: hidden;
}

/* =========================================
   1. HERO BANNER WITH OVERLAY & BREADCRUMB
========================================= */
.programs-hero-banner {
    position: relative;
    width: 100%;
    background-image: url('../images/home/bread.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 3.8rem 1.8rem 4rem 1.8rem;
    text-align: center;
    color: #FFFFFF;
}

.programs-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(61, 26, 104, 0.92) 0%, rgba(41, 14, 73, 0.88) 100%);
    z-index: 1;
}

.programs-hero-container {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 5;
}

/* Breadcrumb */
.programs-breadcrumb-nav {
    margin-bottom: 1.2rem;
}

.programs-breadcrumb-list {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    background-color: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill, 9999px);
    list-style: none;
    margin: 0;
}

.programs-breadcrumb-list .breadcrumb-item {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
}

.programs-breadcrumb-list .breadcrumb-link {
    color: #FFB800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s ease;
}

.programs-breadcrumb-list .breadcrumb-link:hover {
    color: #FFAE00;
    text-decoration: underline;
}

.programs-breadcrumb-list .breadcrumb-sep {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
}

.programs-breadcrumb-list .breadcrumb-item.is-active {
    color: #FFFFFF;
}

/* Badge & Headings */
.programs-hero-badge {
    background-color: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    border: 1.5px solid rgba(255, 184, 0, 0.4);
    margin-bottom: 0.85rem;
}

.programs-hero-badge i {
    color: #FFB800;
}

.programs-hero-eyebrow {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #FFD54F;
    letter-spacing: 1px;
    margin-bottom: 0.35rem;
}

.programs-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 3.8vw, 3.4rem);
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.18;
    margin-bottom: 0.85rem;
}

.programs-hero-title .text-highlight {
    color: #FFB800;
}

.programs-hero-subtitle {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 500;
    color: #E2D4F8;
    max-width: 720px;
    line-height: 1.6;
}

.programs-hero-decors {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.programs-decor-plane {
    position: absolute;
    top: 35px;
    right: 7%;
    transform: rotate(10deg);
    animation: gentleDrift 6s ease-in-out infinite alternate;
}

.programs-decor-star {
    position: absolute;
    opacity: 0.7;
    animation: gentleTwinkle 3.5s ease-in-out infinite alternate;
}

.programs-decor-star.star-1 { top: 75px; left: 20%; }
.programs-decor-star.star-2 { top: 110px; right: 22%; }

/* =========================================
   2. EARLY YEARS PROGRAMS SECTION (5 COLUMNS)
========================================= */
.programs-early-section {
    padding: 3.8rem 1.8rem 2rem 1.8rem;
    max-width: 1440px;
    margin: 0 auto;
}

.early-heading-block {
    text-align: center;
    margin-bottom: 2.8rem;
}

.early-main-heading {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    font-weight: 700;
    color: #3D1A68;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
}

.early-flower-icon {
    font-size: 1.2rem;
}

.early-age-tag {
    color: #E11D48;
    font-size: 0.88em;
}

.early-sub-heading {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 600;
    color: #554D64;
}

/* 5 Column Grid */
.early-programs-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.2rem;
}

/* Individual Stage Card */
.early-stage-card {
    border-radius: 22px;
    padding: 1.6rem 1.2rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(72, 26, 126, 0.04);
    border: 2px solid transparent;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.early-stage-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 34px rgba(72, 26, 126, 0.12);
}

/* Color Palettes */
.stage-playgroup {
    background-color: #FFF8EF;
    border-color: #FEE7C8;
}
.stage-playgroup .stage-title { color: #D97706; }
.stage-playgroup .badge-yellow { background-color: #FEF3C7; color: #B45309; }
.stage-playgroup .stage-checklist li i { color: #D97706; }

.stage-prenursery {
    background-color: #FDF2F4;
    border-color: #FCD6DC;
}
.stage-prenursery .stage-title { color: #E11D48; }
.stage-prenursery .badge-pink { background-color: #FFE4E6; color: #BE123C; }
.stage-prenursery .stage-checklist li i { color: #E11D48; }

.stage-nursery {
    background-color: #F0FAF3;
    border-color: #D1F2DC;
}
.stage-nursery .stage-title { color: #16A34A; }
.stage-nursery .badge-green { background-color: #DCFCE7; color: #15803D; }
.stage-nursery .stage-checklist li i { color: #16A34A; }

.stage-lkg {
    background-color: #F0F8FF;
    border-color: #D4ECFF;
}
.stage-lkg .stage-title { color: #0284C7; }
.stage-lkg .badge-blue { background-color: #E0F2FE; color: #0369A1; }
.stage-lkg .stage-checklist li i { color: #0284C7; }

.stage-ukg {
    background-color: #FFF9ED;
    border-color: #FED7AA;
}
.stage-ukg .stage-title { color: #EA580C; }
.stage-ukg .badge-orange { background-color: #FFEDD5; color: #C2410C; }
.stage-ukg .stage-checklist li i { color: #EA580C; }

/* Card Header Content */
.stage-card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 1.1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1.5px dashed rgba(84, 35, 130, 0.12);
}

.stage-img-wrap {
    width: 100%;
    height: 125px;
    border-radius: 16px;
    overflow: hidden;
    background-color: #FFFFFF;
    margin-bottom: 0.85rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.stage-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.early-stage-card:hover .stage-img {
    transform: scale(1.06);
}

.stage-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.stage-age-badge {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-block;
}

/* Card Checklist Items */
.stage-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stage-checklist li {
    font-family: var(--font-heading);
    font-size: 0.84rem;
    font-weight: 600;
    color: #2D2738;
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    line-height: 1.35;
}

.stage-checklist li i {
    font-size: 0.82rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* =========================================
   3. PRIMARY, MIDDLE SCHOOL & DAYCARE
========================================= */
.programs-advanced-section {
    padding: 2rem 1.8rem 3.5rem 1.8rem;
    max-width: 1440px;
    margin: 0 auto;
}

.programs-advanced-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1.8rem;
    align-items: stretch;
}

.adv-card {
    border-radius: 28px;
    padding: 2.2rem 2rem;
    box-shadow: 0 10px 28px rgba(72, 26, 126, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* --- LEFT: Primary & Middle School --- */
.adv-primary-card {
    background-color: #FAF7FE;
    border: 2px solid #EBDCF9;
}

.adv-card-top-title {
    margin-bottom: 1.4rem;
}

.adv-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: #3D1A68;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.adv-badge-sub {
    color: #EA580C;
    font-size: 0.88em;
}

.primary-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin-bottom: 1.5rem;
}

.primary-pillar {
    display: flex;
    flex-direction: column;
}

.pillar-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.85rem;
}

.pillar-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.bg-icon-purple { background-color: #F3EEFA; color: #481A7E; }
.bg-icon-yellow { background-color: #FEF3C7; color: #D97706; }
.bg-icon-blue   { background-color: #E0F2FE; color: #0284C7; }

.pillar-name {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    color: #1E1238;
    line-height: 1.2;
}

.pillar-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pillar-list li {
    font-family: var(--font-heading);
    font-size: 0.84rem;
    font-weight: 600;
    color: #3D354B;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.pillar-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.purple-dot { background-color: #8A44C8; }
.yellow-dot { background-color: #F59E0B; }
.blue-dot   { background-color: #0284C7; }

.primary-students-thumb {
    margin-top: 1rem;
    width: 100%;
    height: 95px;
    border-radius: 14px;
    overflow: hidden;
    background-color: #FFFFFF;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

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

.primary-bottom-ribbon {
    background: #FFFFFF;
    border: 1px solid rgba(84, 35, 130, 0.12);
    border-radius: var(--radius-pill, 9999px);
    padding: 0.55rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-heading);
    font-size: 0.86rem;
    font-weight: 700;
    color: #3D1A68;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.ribbon-icon {
    color: #FFB800;
    font-size: 1rem;
}

/* --- RIGHT: Daycare Facility --- */
.adv-daycare-card {
    background-color: #F4FAF6;
    border: 2px solid #D1F2DC;
}

.daycare-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.daycare-title-left {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.daycare-house-icon {
    width: 36px;
    height: 36px;
    background-color: #DCFCE7;
    color: #16A34A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.daycare-main-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: #16A34A;
}

.daycare-time-badge {
    background-color: #16A34A;
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pill, 9999px);
}

.daycare-room-photo-wrap {
    width: 100%;
    height: 120px;
    border-radius: 16px;
    overflow: hidden;
    background-color: #FFFFFF;
    margin-bottom: 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

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

.daycare-features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.2rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.daycare-features-list li {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    color: #2D2738;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.daycare-features-list li i {
    color: #16A34A;
    font-size: 0.85rem;
}

.daycare-bottom-motto {
    background: #FFFFFF;
    border: 1px solid #D1F2DC;
    border-radius: var(--radius-pill, 9999px);
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: #16A34A;
}

.daycare-bottom-motto i {
    color: #16A34A;
}

/* =========================================
   4. CAMPUS VISIT CTA STRIP
========================================= */
.programs-cta-section {
    padding: 1.5rem 1.8rem 4rem 1.8rem;
    max-width: 1440px;
    margin: 0 auto;
}

.programs-cta-panel {
    background: linear-gradient(135deg, #3D1A68 0%, #290E49 100%);
    border-radius: 28px;
    padding: 2.8rem 3rem;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    box-shadow: 0 14px 36px rgba(61, 26, 104, 0.18);
    border: 2px solid rgba(255, 184, 0, 0.35);
}

.programs-cta-text {
    max-width: 650px;
}

.programs-cta-badge {
    background-color: rgba(255, 184, 0, 0.2);
    color: #FFB800;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.25rem 0.85rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-block;
    margin-bottom: 0.6rem;
    border: 1px solid rgba(255, 184, 0, 0.4);
}

.programs-cta-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 2.6vw, 2.3rem);
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.25;
    margin-bottom: 0.4rem;
}

.programs-cta-sub {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: #E2D4F8;
    line-height: 1.55;
}

.programs-cta-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.programs-btn-yellow {
    background-color: #FFB800;
    color: #2D1350;
    border: 2px solid #FFCA28;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.75rem 1.4rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(255, 184, 0, 0.35);
    transition: transform 0.25s ease, background-color 0.25s ease;
    white-space: nowrap;
}

.programs-btn-yellow:hover {
    background-color: #FFAE00;
    transform: translateY(-2px);
}

.programs-btn-white {
    background-color: transparent;
    color: #FFFFFF;
    border: 2px solid rgba(255, 255, 255, 0.6);
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.75rem 1.4rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    transition: background-color 0.25s ease, border-color 0.25s ease;
    white-space: nowrap;
}

.programs-btn-white:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: #FFFFFF;
}

/* =========================================
   5. TRUST STRIP
========================================= */
.programs-trust-strip {
    background: #FFFFFF;
    border-top: 1px solid rgba(84, 35, 130, 0.08);
    border-bottom: 1px solid rgba(84, 35, 130, 0.08);
    padding: 1.4rem 1.8rem;
}

.programs-trust-container {
    max-width: 1440px;
    margin: 0 auto;
}

.programs-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    align-items: center;
}

.programs-trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #3D1A68;
    text-align: center;
}

.programs-trust-item i {
    color: #FFB800;
    font-size: 1.2rem;
}

/* =========================================
   RESPONSIVE MEDIA QUERIES (PROGRAMS)
========================================= */
@media (max-width: 1300px) {
    .early-programs-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.2rem;
    }
}

@media (max-width: 1100px) {
    .programs-advanced-grid {
        grid-template-columns: 1fr;
    }
    .programs-cta-panel {
        flex-direction: column;
        text-align: center;
        padding: 2.2rem 1.8rem;
    }
    .programs-cta-actions {
        justify-content: center;
    }
    .programs-trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }
    .programs-trust-item {
        justify-content: flex-start;
    }
}

@media (max-width: 800px) {
    .early-programs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .primary-pillars-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 550px) {
    .early-programs-grid {
        grid-template-columns: 1fr;
    }
    .programs-hero-banner {
        padding: 2.8rem 1.2rem;
    }
    .programs-early-section,
    .programs-advanced-section,
    .programs-cta-section {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
    .programs-cta-actions {
        flex-direction: column;
        width: 100%;
    }
    .programs-btn-yellow,
    .programs-btn-white {
        width: 100%;
        justify-content: center;
    }
    .programs-trust-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
}












/* ==========================================================================
   XAVIER KIDS ABOUT US PAGE (FRESH, ALIGNED, FLICKER-FREE STYLES)
   ========================================================================== */

.about-page-wrapper {
    position: relative;
    width: 100%;
    background-color: var(--bg-page, #FAF8F5);
    color: var(--text-main, #2D2738);
    overflow: hidden;
}

/* Common Background Utility Tokens */
.bg-soft-purple { background-color: #F3EEFA; color: #481A7E; }
.bg-soft-yellow { background-color: #FEF3C7; color: #D97706; }
.bg-soft-green  { background-color: #DCFCE7; color: #16A34A; }
.bg-soft-pink   { background-color: #FFE4E6; color: #E11D48; }
.bg-soft-blue   { background-color: #E0F2FE; color: #0284C7; }
.bg-soft-orange { background-color: #FFEDD5; color: #EA580C; }

/* Common Section Headers */
.abt-section-header {
    margin-bottom: 2.5rem;
}

.abt-section-header.text-center {
    text-align: center;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.abt-pill-tag {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: #481A7E;
    background-color: #F3EEFA;
    padding: 0.35rem 0.95rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-block;
    margin-bottom: 0.55rem;
}

.abt-section-heading {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3vw, 2.8rem);
    font-weight: 700;
    color: #1E1238;
    margin-bottom: 0.6rem;
    line-height: 1.2;
}

.abt-section-desc {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 600;
    color: #554D64;
    line-height: 1.6;
}

/* =========================================
   1. HERO SECTION (CLEAN ARCHED PORTAL)
========================================= */
.abt-hero-section {
    position: relative;
    width: 100%;
    background: radial-gradient(circle at 15% 30%, #FFFFFF 0%, #FAF8F5 60%, #F5EFFB 100%);
    padding: 3.8rem 1.8rem 4.2rem 1.8rem;
    border-bottom: 2px solid rgba(84, 35, 130, 0.06);
}

.abt-hero-container {
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3.5rem;
    align-items: center;
    position: relative;
    z-index: 5;
}

.abt-breadcrumb-nav {
    margin-bottom: 1rem;
}

.abt-breadcrumb-list {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background-color: #FFFFFF;
    border: 1.5px solid rgba(84, 35, 130, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    padding: 0.35rem 0.95rem;
    border-radius: var(--radius-pill, 9999px);
    list-style: none;
    margin: 0;
}

.abt-breadcrumb-list .breadcrumb-item {
    font-family: var(--font-heading);
    font-size: 0.86rem;
    font-weight: 600;
}

.abt-breadcrumb-list .breadcrumb-link {
    color: #481A7E;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s ease;
}

.abt-breadcrumb-list .breadcrumb-link:hover {
    color: #FFB800;
}

.abt-breadcrumb-list .breadcrumb-sep {
    color: #B5AEC4;
    font-size: 0.72rem;
}

.abt-breadcrumb-list .breadcrumb-item.is-active {
    color: #1E1238;
}

.abt-hero-badge {
    background-color: #3D1A68;
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 14px rgba(61, 26, 104, 0.15);
    border: 1.5px solid rgba(255, 184, 0, 0.4);
    margin-bottom: 0.85rem;
}

.abt-hero-badge i {
    color: #FFB800;
}

.abt-hero-eyebrow {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #481A7E;
    letter-spacing: 1px;
    margin-bottom: 0.45rem;
    display: block;
}

.abt-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.3rem, 3.8vw, 3.4rem);
    font-weight: 700;
    color: #1E1238;
    line-height: 1.18;
    margin-bottom: 0.95rem;
    letter-spacing: -0.5px;
}

.abt-hero-title .text-highlight {
    color: #481A7E;
}

.abt-hero-subtitle {
    font-family: var(--font-body);
    font-size: 1.12rem;
    font-weight: 600;
    color: #554D64;
    max-width: 620px;
    line-height: 1.65;
    margin-bottom: 2rem;
}

.abt-hero-actions {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-wrap: wrap;
}

.abt-btn-primary {
    background-color: #FFB800;
    color: #2D1350;
    border: 2px solid #FFCA28;
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 700;
    padding: 0.8rem 1.65rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(255, 184, 0, 0.35);
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.abt-btn-primary:hover {
    background-color: #FFAE00;
    transform: translateY(-2px);
}

.abt-btn-secondary {
    background-color: #FFFFFF;
    color: #3D1A68;
    border: 2px solid #3D1A68;
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 700;
    padding: 0.8rem 1.6rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.abt-btn-secondary:hover {
    background-color: #F4EFFF;
    color: #2D0E49;
}

/* Hero Arched Portal Image Frame */
.abt-hero-media {
    display: flex;
    justify-content: center;
    align-items: center;
}

.abt-hero-portal-wrap {
    position: relative;
    width: 100%;
    max-width: 440px;
    height: 480px;
}

.abt-hero-portal-backdrop {
    position: absolute;
    inset: -12px -12px 12px 12px;
    border-radius: 220px 220px 32px 32px;
    background: linear-gradient(135deg, #FFB800 0%, #FF8C00 100%);
    opacity: 0.35;
    z-index: 1;
}

.abt-hero-portal-frame {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 220px 220px 32px 32px;
    overflow: hidden;
    background-color: #E2D4F8;
    border: 6px solid #FFFFFF;
    box-shadow: 0 16px 40px rgba(61, 26, 104, 0.15);
    z-index: 2;
}

.abt-hero-portal-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.abt-hero-portal-wrap:hover .abt-hero-portal-img {
    transform: scale(1.05);
}

/* =========================================
   2. QUICK NAVIGATION BAR
========================================= */
.abt-quick-nav-bar {
    position: sticky;
    top: 75px;
    z-index: 900;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 2px solid rgba(84, 35, 130, 0.08);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
    padding: 0.75rem 0;
}

.abt-quick-nav-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1.8rem;
}

.abt-quick-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.abt-quick-nav-list::-webkit-scrollbar {
    display: none;
}

.abt-quick-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.95rem;
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.abt-quick-link:hover,
.abt-quick-link.is-active {
    background-color: #F3EEFA;
    transform: translateY(-2px);
}

.abt-quick-link.is-active strong {
    color: #481A7E;
}

.quick-link-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.quick-link-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.quick-link-text strong {
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 700;
    color: #1E1238;
}

.quick-link-text span {
    font-family: var(--font-body);
    font-size: 0.76rem;
    font-weight: 600;
    color: #6B627B;
}

/* =========================================
   3. OUR STORY SECTION (CIRCULAR CLOUDY SHAPE)
========================================= */
.abt-story-section {
    padding: 5rem 1.8rem 4.5rem 1.8rem;
    max-width: 1440px;
    margin: 0 auto;
}

.abt-story-container {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 3.8rem;
    align-items: center;
}

.abt-story-cloud-wrapper {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 440px;
    margin: 0 auto;
}

.abt-cloud-blob-backdrop {
    position: absolute;
    inset: -15px;
    border-radius: 54% 46% 62% 38% / 45% 58% 42% 55%;
    background: linear-gradient(135deg, #F3EEFA 0%, #EBDCF9 100%);
    z-index: 1;
}

/* Main Cloudy Image Frame */
.abt-cloud-main-frame {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50% 50% 46% 54% / 54% 48% 52% 46%;
    overflow: hidden;
    border: 6px solid #FFFFFF;
    box-shadow: 0 16px 40px rgba(72, 26, 126, 0.12);
    z-index: 2;
    background-color: #F3EEFA;
}

.abt-cloud-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.abt-story-cloud-wrapper:hover .abt-cloud-img {
    transform: scale(1.05);
}

/* Floating Sub Bubbles */
.abt-bubble-sub {
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #FFFFFF;
    box-shadow: 0 8px 24px rgba(72, 26, 126, 0.16);
    z-index: 3;
    transition: transform 0.3s ease;
}

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

.abt-bubble-sub.bubble-1 {
    width: 130px;
    height: 130px;
    bottom: -15px;
    left: -20px;
}

.abt-bubble-sub.bubble-2 {
    width: 110px;
    height: 110px;
    top: -15px;
    right: -15px;
}

.abt-bubble-sub:hover {
    transform: scale(1.08);
}

.abt-lead-para {
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 700;
    color: #3D1A68;
    line-height: 1.6;
    margin-bottom: 0.95rem;
}

.abt-body-para {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: #554D64;
    line-height: 1.65;
    margin-bottom: 0.85rem;
}

/* 4 Highlight Blocks (2x2 Balanced Grid) */
.abt-highlights-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    margin-top: 1.8rem;
}

.abt-highlight-card {
    background: #FFFFFF;
    border-radius: 18px;
    padding: 1.2rem;
    border: 1.5px solid rgba(84, 35, 130, 0.08);
    box-shadow: 0 4px 14px rgba(72, 26, 126, 0.04);
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.abt-highlight-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(72, 26, 126, 0.08);
    border-color: #FFB800;
}

.abt-highlight-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.abt-highlight-title {
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 700;
    color: #1E1238;
    margin-bottom: 0.2rem;
    line-height: 1.3;
}

.abt-highlight-desc {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    color: #6B627B;
    line-height: 1.4;
}

/* =========================================
   4 & 5. PRINCIPAL & DIRECTOR DESK SECTIONS
========================================= */
.abt-desk-section {
    padding: 3.5rem 1.8rem;
    max-width: 1440px;
    margin: 0 auto;
}

.abt-desk-card {
    background: #FFFFFF;
    border-radius: 32px;
    padding: 3rem 3.2rem;
    box-shadow: 0 12px 36px rgba(72, 26, 126, 0.06);
    border: 2px solid rgba(84, 35, 130, 0.08);
    display: grid;
    grid-template-columns: 0.85fr 1.35fr;
    gap: 3.2rem;
    align-items: center;
}

.abt-desk-card.is-reversed {
    grid-template-columns: 1.35fr 0.85fr;
    background-color: #FFFDF9;
    border-color: #FEE7C8;
}

.abt-desk-photo-frame {
    position: relative;
    width: 100%;
    max-width: 360px;
    height: 420px;
    border-radius: 28px;
    overflow: hidden;
    background-color: #F3EEFA;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    border: 5px solid #FFFFFF;
    margin: 0 auto;
}

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

.abt-desk-role-badge {
    position: absolute;
    bottom: 16px;
    left: 16px;
    padding: 0.45rem 1.1rem;
    border-radius: var(--radius-pill, 9999px);
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.abt-desk-role-badge.badge-purple { background-color: #3D1A68; color: #FFFFFF; }
.abt-desk-role-badge.badge-yellow { background-color: #FFB800; color: #2D1350; }

.abt-desk-heading {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 2.6vw, 2.5rem);
    font-weight: 700;
    color: #1E1238;
    margin-bottom: 0.85rem;
}

.abt-desk-quote-mark {
    font-size: 2.2rem;
    color: #EBDCF9;
    line-height: 1;
    margin-bottom: 0.4rem;
}

.abt-desk-lead {
    font-family: var(--font-heading);
    font-size: 1.18rem;
    font-weight: 600;
    color: #481A7E;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.abt-desk-text {
    font-family: var(--font-body);
    font-size: 0.98rem;
    font-weight: 500;
    color: #554D64;
    line-height: 1.65;
    margin-bottom: 0.85rem;
}

.abt-desk-signature-block {
    margin-top: 1.4rem;
    padding-top: 1rem;
    border-top: 1.5px dashed rgba(84, 35, 130, 0.15);
    display: flex;
    flex-direction: column;
}

.abt-desk-sig-placeholder {
    font-family: 'Brush Script MT', cursive, sans-serif;
    font-size: 1.4rem;
    color: #8E849E;
    margin-bottom: 0.2rem;
}

.abt-desk-person-name {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: #1E1238;
}

.abt-desk-person-role {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: #7B7289;
}

/* =========================================
   6. OUR MANAGEMENT (3 BALANCED PROFILES)
========================================= */
.abt-mgmt-section {
    padding: 4rem 1.8rem;
    background-color: #F8F5FC;
}

.abt-mgmt-container {
    max-width: 1200px;
    margin: 0 auto;
}

.abt-mgmt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.abt-mgmt-card {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 2.2rem 1.8rem;
    box-shadow: 0 8px 24px rgba(72, 26, 126, 0.05);
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.abt-mgmt-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 34px rgba(72, 26, 126, 0.12);
}

.mgmt-theme-yellow { border-color: #FEE7C8; }
.mgmt-theme-purple { border-color: #EBDCF9; }
.mgmt-theme-green  { border-color: #D1F2DC; }

.mgmt-photo-wrap {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 1.3rem;
    border: 4px solid #FFFFFF;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.mgmt-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mgmt-role-tag {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    background: #3D1A68;
    color: #FFB800;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-pill, 9999px);
    white-space: nowrap;
}

.mgmt-title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: #1E1238;
    margin-bottom: 0.45rem;
}

.mgmt-desc {
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 600;
    color: #554D64;
    line-height: 1.55;
}

/* =========================================
   7 & 8. VISION & MISSION
========================================= */
.abt-vision-mission-section {
    padding: 4.5rem 1.8rem;
    max-width: 1440px;
    margin: 0 auto;
}

.abt-vm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.2rem;
}

.abt-vm-card {
    border-radius: 28px;
    padding: 2.8rem 2.4rem;
    box-shadow: 0 10px 28px rgba(72, 26, 126, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.abt-vm-card.vision-card {
    background-color: #F6F0FE;
    border: 2px solid #EBDCF9;
}

.abt-vm-card.mission-card {
    background-color: #FDF2F4;
    border: 2px solid #FCD6DC;
}

.vm-card-header {
    margin-bottom: 1.4rem;
}

.vm-icon-bubble {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 0.85rem;
}

.vm-card-title {
    font-family: var(--font-heading);
    font-size: 1.9rem;
    font-weight: 700;
    color: #1E1238;
    margin-top: 0.35rem;
}

.vm-lead-quote {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: #481A7E;
    line-height: 1.55;
    margin-bottom: 1.5rem;
}

.mission-points-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.mission-points-list li {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: #2D2738;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    line-height: 1.45;
}

.mission-bullet {
    color: #E11D48;
    font-size: 1.1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.vm-illustration-wrap {
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
}

.vm-fallback-art {
    display: flex;
    gap: 1.2rem;
    font-size: 2rem;
    color: rgba(72, 26, 126, 0.25);
}

/* =========================================
   9. CORE VALUES (8 BALANCED CARDS)
========================================= */
.abt-values-section {
    padding: 4rem 1.8rem 4.5rem 1.8rem;
    max-width: 1440px;
    margin: 0 auto;
}

.abt-values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.abt-val-card {
    background: #FFFFFF;
    border-radius: 22px;
    padding: 2rem 1.6rem;
    border: 2px solid rgba(84, 35, 130, 0.08);
    box-shadow: 0 6px 20px rgba(72, 26, 126, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.abt-val-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(72, 26, 126, 0.1);
    border-color: #FFB800;
}

.val-icon-box {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 1.1rem;
}

.val-purple .val-icon-box { background-color: #F3EEFA; color: #481A7E; }
.val-yellow .val-icon-box { background-color: #FEF3C7; color: #D97706; }
.val-pink   .val-icon-box { background-color: #FFE4E6; color: #E11D48; }
.val-green  .val-icon-box { background-color: #DCFCE7; color: #16A34A; }
.val-blue   .val-icon-box { background-color: #E0F2FE; color: #0284C7; }
.val-orange .val-icon-box { background-color: #FFEDD5; color: #EA580C; }
.val-indigo .val-icon-box { background-color: #EDE9FE; color: #7C3AED; }
.val-teal   .val-icon-box { background-color: #CCFBF1; color: #0D9488; }

.val-title {
    font-family: var(--font-heading);
    font-size: 1.18rem;
    font-weight: 700;
    color: #1E1238;
    margin-bottom: 0.4rem;
}

.val-desc {
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    color: #554D64;
    line-height: 1.55;
}

/* =========================================
   10. WHY PARENTS CHOOSE XAVIER KIDS
========================================= */
.abt-why-section {
    padding: 4rem 1.8rem 4.5rem 1.8rem;
    background-color: #FDFBFE;
    border-top: 1px solid rgba(84, 35, 130, 0.06);
}

.abt-why-container {
    max-width: 1440px;
    margin: 0 auto;
}

.abt-why-journey-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1.1rem;
}

.abt-why-step-card {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 1.5rem 1.1rem;
    border: 2px solid rgba(84, 35, 130, 0.08);
    box-shadow: 0 4px 14px rgba(72, 26, 126, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.abt-why-step-card:hover {
    transform: translateY(-4px);
    border-color: #FFB800;
}

.why-step-num {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    color: #FFB800;
    background-color: #3D1A68;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-pill, 9999px);
    margin-bottom: 0.75rem;
}

.why-step-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}

.why-step-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #1E1238;
    line-height: 1.25;
    margin-bottom: 0.4rem;
}

.why-step-desc {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    color: #6B627B;
    line-height: 1.45;
}

/* =========================================
   11. CLOSING SCHOOL VISIT CTA PANEL
========================================= */
.abt-closing-cta-section {
    padding: 2rem 1.8rem 5rem 1.8rem;
    max-width: 1440px;
    margin: 0 auto;
}

.abt-cta-panel {
    background: linear-gradient(135deg, #3D1A68 0%, #290E49 100%);
    border-radius: 32px;
    padding: 3.5rem 3.2rem;
    color: #FFFFFF;
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    align-items: center;
    gap: 2.8rem;
    box-shadow: 0 14px 36px rgba(61, 26, 104, 0.2);
    border: 2px solid rgba(255, 184, 0, 0.35);
}

.abt-cta-pill {
    background-color: rgba(255, 184, 0, 0.2);
    color: #FFB800;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-block;
    margin-bottom: 0.8rem;
    border: 1px solid rgba(255, 184, 0, 0.4);
}

.abt-cta-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.2;
    margin-bottom: 0.8rem;
}

.abt-cta-desc {
    font-family: var(--font-body);
    font-size: 1.08rem;
    color: #E2D4F8;
    line-height: 1.65;
    margin-bottom: 2rem;
    max-width: 620px;
}

.abt-cta-actions {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.abt-cta-btn-yellow {
    background-color: #FFB800;
    color: #2D1350;
    border: 2px solid #FFCA28;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    padding: 0.8rem 1.65rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(255, 184, 0, 0.35);
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.abt-cta-btn-yellow:hover {
    background-color: #FFAE00;
    transform: translateY(-2px);
}

.abt-cta-btn-white {
    background-color: transparent;
    color: #FFFFFF;
    border: 2px solid rgba(255, 255, 255, 0.6);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    padding: 0.8rem 1.5rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.abt-cta-btn-white:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: #FFFFFF;
}

.abt-cta-visual-wrap {
    display: flex;
    justify-content: center;
}

.abt-cta-img {
    max-width: 280px;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

/* =========================================
   RESPONSIVE MEDIA QUERIES (ABOUT PAGE)
========================================= */
@media (max-width: 1200px) {
    .abt-hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .abt-hero-actions {
        justify-content: center;
    }
    .abt-story-container {
        grid-template-columns: 1fr;
    }
    .abt-why-journey-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .abt-values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .abt-desk-card,
    .abt-desk-card.is-reversed {
        grid-template-columns: 1fr;
        padding: 2.5rem 2rem;
        text-align: center;
    }
    .abt-desk-signature-block {
        align-items: center;
    }
}

@media (max-width: 991px) {
    .abt-mgmt-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
    }
    .abt-vm-grid {
        grid-template-columns: 1fr;
    }
    .abt-why-journey-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .abt-cta-panel {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 2.4rem 1.8rem;
    }
    .abt-cta-actions {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .abt-hero-section {
        padding: 2.5rem 1.2rem;
    }
    .abt-story-section,
    .abt-desk-section,
    .abt-mgmt-section,
    .abt-vision-mission-section,
    .abt-values-section,
    .abt-why-section,
    .abt-closing-cta-section {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
    .abt-hero-portal-wrap {
        height: 380px;
    }
    .abt-story-cloud-wrapper {
        height: 360px;
    }
    .abt-highlights-grid {
        grid-template-columns: 1fr;
    }
    .abt-values-grid {
        grid-template-columns: 1fr;
    }
    .abt-why-journey-grid {
        grid-template-columns: 1fr;
    }
    .abt-cta-actions {
        flex-direction: column;
        width: 100%;
    }
    .abt-cta-btn-yellow,
    .abt-cta-btn-white {
        width: 100%;
        justify-content: center;
    }
}




/* ==========================================================================
   XAVIER KIDS CERTIFICATES PAGE
   ========================================================================== */

.cert-page-wrapper {
    position: relative;
    width: 100%;
    background-color: var(--bg-page, #FAF8F5);
    color: var(--text-main, #2D2738);
    overflow: hidden;
}

/* =========================================
   1. HERO BANNER WITH OVERLAY & BREADCRUMB
========================================= */
.cert-hero-banner {
    position: relative;
    width: 100%;
    background-image: url('../images/home/bread.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 3.8rem 1.8rem 4rem 1.8rem;
    text-align: center;
    color: #FFFFFF;
}

.cert-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(61, 26, 104, 0.92) 0%, rgba(41, 14, 73, 0.88) 100%);
    z-index: 1;
}

.cert-hero-container {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 5;
}

/* Breadcrumb Navigation */
.cert-breadcrumb-nav {
    margin-bottom: 1.2rem;
}

.cert-breadcrumb-list {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    background-color: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill, 9999px);
    list-style: none;
    margin: 0;
}

.cert-breadcrumb-list .breadcrumb-item {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
}

.cert-breadcrumb-list .breadcrumb-link {
    color: #FFB800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s ease;
}

.cert-breadcrumb-list .breadcrumb-link:hover {
    color: #FFAE00;
    text-decoration: underline;
}

.cert-breadcrumb-list .breadcrumb-sep {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
}

.cert-breadcrumb-list .breadcrumb-item.is-active {
    color: #FFFFFF;
}

/* Badge & Headings */
.cert-hero-badge {
    background-color: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    border: 1.5px solid rgba(255, 184, 0, 0.4);
    margin-bottom: 0.85rem;
}

.cert-hero-badge i {
    color: #FFB800;
}

.cert-hero-eyebrow {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #FFD54F;
    letter-spacing: 1px;
    margin-bottom: 0.35rem;
}

.cert-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 3.8vw, 3.4rem);
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.18;
    margin-bottom: 0.85rem;
}

.cert-hero-title .text-highlight {
    color: #FFB800;
}

.cert-hero-subtitle {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 500;
    color: #E2D4F8;
    max-width: 720px;
    line-height: 1.6;
}

.cert-hero-decors {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.cert-decor-plane {
    position: absolute;
    top: 35px;
    right: 7%;
    transform: rotate(10deg);
    animation: gentleDrift 6s ease-in-out infinite alternate;
}

.cert-decor-star {
    position: absolute;
    opacity: 0.7;
    animation: gentleTwinkle 3.5s ease-in-out infinite alternate;
}

.cert-decor-star.star-1 { top: 75px; left: 20%; }
.cert-decor-star.star-2 { top: 110px; right: 22%; }

/* =========================================
   2. 3 SQUARISH ROUNDED PDF CERTIFICATE SECTIONS
========================================= */
.cert-main-section {
    padding: 4.5rem 1.8rem 5rem 1.8rem;
    max-width: 1440px;
    margin: 0 auto;
}

.cert-section-header {
    margin-bottom: 3.2rem;
}

.cert-section-header.text-center {
    text-align: center;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.cert-pill-tag {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: #481A7E;
    background-color: #F3EEFA;
    padding: 0.35rem 0.95rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-block;
    margin-bottom: 0.55rem;
}

.cert-section-heading {
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 2.8vw, 2.7rem);
    font-weight: 700;
    color: #1E1238;
    margin-bottom: 0.6rem;
    line-height: 1.25;
}

.cert-section-desc {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 600;
    color: #554D64;
    line-height: 1.6;
}

/* 3-Column Grid */
.cert-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

/* Individual Squarish Card */
.cert-card {
    background: #FFFFFF;
    border-radius: 28px;
    padding: 1.8rem;
    border: 2px solid rgba(84, 35, 130, 0.08);
    box-shadow: 0 10px 30px rgba(72, 26, 126, 0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.cert-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(72, 26, 126, 0.12);
    border-color: #FFB800;
}

/* Card Header */
.cert-card-header {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    margin-bottom: 1.2rem;
}

.cert-header-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.cert-header-titles {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.cert-doc-type {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    color: #8A44C8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.cert-doc-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: #1E1238;
}

/* Squarish Rounded PDF Frame */
.cert-embed-frame {
    position: relative;
    width: 100%;
    height: 380px;
    border-radius: 20px;
    overflow: hidden;
    background-color: #F8F5FC;
    border: 2px solid rgba(84, 35, 130, 0.1);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.04);
}

.cert-pdf-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Hover Preview Overlay Button */
.cert-embed-overlay {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 5;
}

.cert-btn-preview {
    background: rgba(61, 26, 104, 0.9);
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.cert-btn-preview:hover {
    background-color: #FFB800;
    color: #3D1A68;
    transform: translateY(-2px);
}

/* Card Actions Footer */
.cert-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-top: 1.3rem;
    padding-top: 1.1rem;
    border-top: 1px dashed rgba(84, 35, 130, 0.12);
}

.cert-file-badge {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: #7B7289;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.cert-file-badge i {
    color: #E11D48;
}

.cert-btn-download {
    background-color: #FFB800;
    color: #2D1350;
    border: 2px solid #FFCA28;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(255, 184, 0, 0.35);
    transition: transform 0.25s ease, background-color 0.25s ease;
    white-space: nowrap;
}

.cert-btn-download:hover {
    background-color: #FFAE00;
    transform: translateY(-2px);
}

/* =========================================
   3. SCHOOL VISIT CTA PANEL
========================================= */
.cert-cta-section {
    padding: 1.5rem 1.8rem 4.5rem 1.8rem;
    max-width: 1440px;
    margin: 0 auto;
}

.cert-cta-panel {
    background: linear-gradient(135deg, #3D1A68 0%, #290E49 100%);
    border-radius: 28px;
    padding: 2.8rem 3rem;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    box-shadow: 0 14px 36px rgba(61, 26, 104, 0.18);
    border: 2px solid rgba(255, 184, 0, 0.35);
}

.cert-cta-text {
    max-width: 650px;
}

.cert-cta-badge {
    background-color: rgba(255, 184, 0, 0.2);
    color: #FFB800;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.25rem 0.85rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-block;
    margin-bottom: 0.6rem;
    border: 1px solid rgba(255, 184, 0, 0.4);
}

.cert-cta-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 2.6vw, 2.3rem);
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.25;
    margin-bottom: 0.4rem;
}

.cert-cta-sub {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: #E2D4F8;
    line-height: 1.55;
}

.cert-cta-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.cert-btn-yellow {
    background-color: #FFB800;
    color: #2D1350;
    border: 2px solid #FFCA28;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.75rem 1.4rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(255, 184, 0, 0.35);
    transition: transform 0.25s ease, background-color 0.25s ease;
    white-space: nowrap;
}

.cert-btn-yellow:hover {
    background-color: #FFAE00;
    transform: translateY(-2px);
}

.cert-btn-white {
    background-color: transparent;
    color: #FFFFFF;
    border: 2px solid rgba(255, 255, 255, 0.6);
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.75rem 1.4rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    transition: background-color 0.25s ease, border-color 0.25s ease;
    white-space: nowrap;
}

.cert-btn-white:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: #FFFFFF;
}

/* =========================================
   4. TRUST STRIP
========================================= */
.cert-trust-strip {
    background: #FFFFFF;
    border-top: 1px solid rgba(84, 35, 130, 0.08);
    border-bottom: 1px solid rgba(84, 35, 130, 0.08);
    padding: 1.4rem 1.8rem;
}

.cert-trust-container {
    max-width: 1440px;
    margin: 0 auto;
}

.cert-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    align-items: center;
}

.cert-trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #3D1A68;
    text-align: center;
}

.cert-trust-item i {
    color: #FFB800;
    font-size: 1.2rem;
}

/* =========================================
   RESPONSIVE MEDIA QUERIES (CERTIFICATES)
========================================= */
@media (max-width: 1200px) {
    .cert-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.6rem;
    }
    .cert-cta-panel {
        flex-direction: column;
        text-align: center;
        padding: 2.2rem 1.8rem;
    }
    .cert-cta-actions {
        justify-content: center;
    }
    .cert-trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }
    .cert-trust-item {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .cert-hero-banner {
        padding: 2.8rem 1.2rem;
    }
    .cert-main-section,
    .cert-cta-section {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
    .cert-cards-grid {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }
    .cert-embed-frame {
        height: 320px;
    }
    .cert-cta-actions {
        flex-direction: column;
        width: 100%;
    }
    .cert-btn-yellow,
    .cert-btn-white {
        width: 100%;
        justify-content: center;
    }
    .cert-trust-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
}


/* Transparent PNG Image Container & Contain Fix */
.stage-img-wrap {
    width: 100%;
    height: 130px;
    background-color: transparent;      /* REMOVED: White background */
    box-shadow: none;                   /* REMOVED: Rectangular box shadow */
    border-radius: 0;
    overflow: visible;
    margin-bottom: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stage-img {
    width: 100%;
    height: 100%;
    max-height: 130px;
    object-fit: contain;                /* FIXED: Fits entire image without cropping */
    object-position: center bottom;
    display: block;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.1)); /* Adds natural depth to transparent PNGs */
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.early-stage-card:hover .stage-img {
    transform: translateY(-4px) scale(1.06);
}


/* =========================================
   PRIMARY & DAYCARE TRANSPARENT PNG FIX
========================================= */

/* 1. Primary & Middle School Thumbnail (Pencil Sharpener / Students) */
.primary-students-thumb {
    margin-top: 0.8rem;
    width: 100%;
    height: 110px;
    background-color: transparent;       /* REMOVED: White box background */
    box-shadow: none;                    /* REMOVED: Rectangular shadow */
    border-radius: 0;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.primary-thumb-img {
    width: auto;
    max-width: 100%;
    height: 100%;
    max-height: 110px;
    object-fit: contain;                 /* FIXED: Fits entire image without cropping */
    display: block;
    filter: drop-shadow(0 8px 16px rgba(72, 26, 126, 0.15)); /* Soft natural shadow */
    transition: transform 0.4s ease;
}

.adv-primary-card:hover .primary-thumb-img {
    transform: scale(1.05) rotate(-2deg);
}

/* 2. Daycare Facility Image / Illustration Wrap */
.daycare-room-photo-wrap {
    width: 100%;
    height: 130px;
    background-color: transparent;       /* REMOVED: White box background */
    box-shadow: none;                    /* REMOVED: Rectangular shadow */
    border-radius: 0;
    overflow: visible;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.daycare-room-img {
    width: 100%;
    height: 100%;
    max-height: 130px;
    object-fit: contain;                 /* FIXED: Fits cleanly without distortion */
    border-radius: 16px;                 /* Keeps smooth rounded corners for photos */
    display: block;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.08));
    transition: transform 0.4s ease;
}

.adv-daycare-card:hover .daycare-room-img {
    transform: scale(1.04);
}




























/* ==========================================================================
   XAVIER KIDS INFRASTRUCTURE PAGE (LARGE CENTER-ALIGNED ICONS)
   ========================================================================== */

.infra-page-wrapper {
    position: relative;
    width: 100%;
    background-color: var(--bg-page, #FAF8F5);
    color: var(--text-main, #2D2738);
    overflow: hidden;
}

/* =========================================
   1. HERO BANNER WITH OVERLAY & BREADCRUMB
========================================= */
.infra-hero-banner {
    position: relative;
    width: 100%;
    background-image: url('../images/home/bread.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 3.8rem 1.8rem 4rem 1.8rem;
    text-align: center;
    color: #FFFFFF;
}

.infra-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(61, 26, 104, 0.92) 0%, rgba(41, 14, 73, 0.88) 100%);
    z-index: 1;
}

.infra-hero-container {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 5;
}

/* Breadcrumb Navigation */
.infra-breadcrumb-nav {
    margin-bottom: 1.2rem;
}

.infra-breadcrumb-list {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    background-color: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill, 9999px);
    list-style: none;
    margin: 0;
}

.infra-breadcrumb-list .breadcrumb-item {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
}

.infra-breadcrumb-list .breadcrumb-link {
    color: #FFB800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s ease;
}

.infra-breadcrumb-list .breadcrumb-link:hover {
    color: #FFAE00;
    text-decoration: underline;
}

.infra-breadcrumb-list .breadcrumb-sep {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
}

.infra-breadcrumb-list .breadcrumb-item.is-active {
    color: #FFFFFF;
}

/* Badge & Headings */
.infra-hero-badge {
    background-color: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    border: 1.5px solid rgba(255, 184, 0, 0.4);
    margin-bottom: 0.85rem;
}

.infra-hero-badge i {
    color: #FFB800;
}

.infra-hero-eyebrow {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #FFD54F;
    letter-spacing: 1px;
    margin-bottom: 0.35rem;
}

.infra-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 3.8vw, 3.4rem);
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.18;
    margin-bottom: 0.85rem;
}

.infra-hero-title .text-highlight {
    color: #FFB800;
}

.infra-hero-subtitle {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 500;
    color: #E2D4F8;
    max-width: 720px;
    line-height: 1.6;
}

.infra-hero-decors {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.infra-decor-plane {
    position: absolute;
    top: 35px;
    right: 7%;
    transform: rotate(10deg);
    animation: gentleDrift 6s ease-in-out infinite alternate;
}

.infra-decor-star {
    position: absolute;
    opacity: 0.7;
    animation: gentleTwinkle 3.5s ease-in-out infinite alternate;
}

.infra-decor-star.star-1 { top: 75px; left: 20%; }
.infra-decor-star.star-2 { top: 110px; right: 22%; }

/* =========================================
   2. MAIN 16-CARD INFRASTRUCTURE GRID
========================================= */
.infra-main-section {
    padding: 4.5rem 1.8rem 5.5rem 1.8rem;
    max-width: 1440px;
    margin: 0 auto;
}

.infra-heading-block {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto 3.2rem auto;
    max-width: 820px;
}

.infra-main-heading {
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 2.8vw, 2.7rem);
    font-weight: 700;
    color: #3D1A68;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
    line-height: 1.25;
    text-align: center;
    width: 100%;
}

.infra-heart-icon {
    font-size: 1.3rem;
    color: #E11D48;
}

.infra-sub-heading {
    font-family: var(--font-body);
    font-size: 1.08rem;
    font-weight: 600;
    color: #554D64;
    text-align: center;
    line-height: 1.5;
    margin: 0 auto;
    width: 100%;
}

/* 4 Columns x 4 Rows Grid */
.infra-spaces-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.6rem;
}

/* Individual Card (Clean Center-Aligned Structure) */
.infra-space-card {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 2.4rem 1.6rem 2rem 1.6rem;
    border: 2px solid rgba(84, 35, 130, 0.08);
    box-shadow: 0 8px 24px rgba(72, 26, 126, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.infra-space-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(72, 26, 126, 0.12);
    border-color: #FFB800;
}

/* Big Hero Icon Bubble (Center-Aligned) */
.infra-card-icon-hero {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    margin-bottom: 1.3rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    border: 3px solid #FFFFFF;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.infra-space-card:hover .infra-card-icon-hero {
    transform: scale(1.12) rotate(6deg);
}

/* Icon Bubble Color Palettes */
.bg-bubble-purple { background-color: #F3EEFA; color: #481A7E; }
.bg-bubble-orange { background-color: #FEF3C7; color: #D97706; }
.bg-bubble-green  { background-color: #DCFCE7; color: #16A34A; }
.bg-bubble-pink   { background-color: #FFE4E6; color: #E11D48; }
.bg-bubble-blue   { background-color: #E0F2FE; color: #0284C7; }

.infra-space-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.infra-space-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: #1E1238;
    margin-bottom: 0.45rem;
    line-height: 1.25;
}

.infra-space-desc {
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    color: #554D64;
    line-height: 1.5;
}

/* --- 16. SCHOOL VISIT CTA CARD --- */
.infra-cta-card {
    background: #FFFDF8;
    border-radius: 24px;
    border: 2px dashed #FFB800;
    box-shadow: 0 8px 24px rgba(255, 184, 0, 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1.6rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.infra-cta-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(255, 184, 0, 0.25);
}

.infra-cta-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.infra-cta-icon-wrap {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #3D1A68;
    color: #FFB800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 0.9rem;
    box-shadow: 0 6px 16px rgba(61, 26, 104, 0.25);
}

.infra-cta-title {
    font-family: var(--font-heading);
    font-size: 1.28rem;
    font-weight: 700;
    color: #3D1A68;
    line-height: 1.25;
    margin-bottom: 0.25rem;
}

.infra-cta-highlight {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: #E11D48;
    margin-bottom: 0.35rem;
}

.infra-cta-sub {
    font-family: var(--font-body);
    font-size: 0.84rem;
    font-weight: 600;
    color: #554D64;
    line-height: 1.45;
    margin-bottom: 1.1rem;
}

.infra-cta-btn {
    background-color: #FFB800;
    color: #2D1350;
    border: 2px solid #FFCA28;
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 700;
    padding: 0.65rem 1.25rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(255, 184, 0, 0.3);
    transition: transform 0.25s ease, background-color 0.25s ease;
    white-space: nowrap;
}

.infra-cta-btn:hover {
    background-color: #FFAE00;
    transform: translateY(-2px);
}

/* =========================================
   3. TRUST STRIP
========================================= */
.infra-trust-strip {
    background: #FFFFFF;
    border-top: 1px solid rgba(84, 35, 130, 0.08);
    border-bottom: 1px solid rgba(84, 35, 130, 0.08);
    padding: 1.4rem 1.8rem;
}

.infra-trust-container {
    max-width: 1440px;
    margin: 0 auto;
}

.infra-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    align-items: center;
}

.infra-trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #3D1A68;
    text-align: center;
}

.infra-trust-item i {
    color: #FFB800;
    font-size: 1.2rem;
}

/* =========================================
   RESPONSIVE MEDIA QUERIES (INFRASTRUCTURE)
========================================= */
@media (max-width: 1200px) {
    .infra-spaces-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.4rem;
    }
    .infra-trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }
    .infra-trust-item {
        justify-content: flex-start;
    }
}

@media (max-width: 900px) {
    .infra-spaces-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .infra-hero-banner {
        padding: 2.8rem 1.2rem;
    }
    .infra-main-section {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
    .infra-spaces-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
    .infra-card-icon-hero {
        width: 70px;
        height: 70px;
        font-size: 1.9rem;
    }
    .infra-trust-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
}




/* ==========================================================================
   XAVIER KIDS REGISTRATION & ADMISSIONS PAGE
   ========================================================================== */

.reg-page-wrapper {
    position: relative;
    width: 100%;
    background-color: var(--bg-page, #FAF8F5);
    color: var(--text-main, #2D2738);
    overflow: hidden;
}

/* =========================================
   1. HERO BANNER
========================================= */
.reg-hero-banner {
    position: relative;
    width: 100%;
    background-image: url('../images/home/bread.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 3.8rem 1.8rem 4rem 1.8rem;
    text-align: center;
    color: #FFFFFF;
}

.reg-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(61, 26, 104, 0.92) 0%, rgba(41, 14, 73, 0.88) 100%);
    z-index: 1;
}

.reg-hero-container {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 5;
}

/* Breadcrumb */
.reg-breadcrumb-nav {
    margin-bottom: 1.2rem;
}

.reg-breadcrumb-list {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    background-color: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill, 9999px);
    list-style: none;
    margin: 0;
}

.reg-breadcrumb-list .breadcrumb-item {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
}

.reg-breadcrumb-list .breadcrumb-link {
    color: #FFB800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s ease;
}

.reg-breadcrumb-list .breadcrumb-link:hover {
    color: #FFAE00;
    text-decoration: underline;
}

.reg-breadcrumb-list .breadcrumb-sep {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
}

.reg-breadcrumb-list .breadcrumb-item.is-active {
    color: #FFFFFF;
}

/* Badge & Headings */
.reg-hero-badge {
    background-color: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    border: 1.5px solid rgba(255, 184, 0, 0.4);
    margin-bottom: 0.85rem;
}

.reg-hero-badge i {
    color: #FFB800;
}

.reg-hero-eyebrow {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #FFD54F;
    letter-spacing: 1px;
    margin-bottom: 0.35rem;
}

.reg-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 3.8vw, 3.4rem);
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.18;
    margin-bottom: 0.85rem;
}

.reg-hero-title .text-highlight {
    color: #FFB800;
}

.reg-hero-subtitle {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 500;
    color: #E2D4F8;
    max-width: 720px;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.reg-scope-pill {
    background: rgba(0, 0, 0, 0.25);
    border: 1px dashed rgba(255, 184, 0, 0.5);
    border-radius: var(--radius-pill, 9999px);
    padding: 0.45rem 1.2rem;
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 600;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.scope-sep {
    color: #FFB800;
}

.reg-hero-decors {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.reg-decor-plane {
    position: absolute;
    top: 35px;
    right: 7%;
    transform: rotate(10deg);
    animation: gentleDrift 6s ease-in-out infinite alternate;
}

.reg-decor-star {
    position: absolute;
    opacity: 0.7;
    animation: gentleTwinkle 3.5s ease-in-out infinite alternate;
}

.reg-decor-star.star-1 { top: 75px; left: 20%; }
.reg-decor-star.star-2 { top: 110px; right: 22%; }

/* =========================================
   2. FORM HUB & TAB SWITCHER
========================================= */
.reg-form-section {
    padding: 3.5rem 1.8rem 4.5rem 1.8rem;
    max-width: 1040px;
    margin: 0 auto;
}

.reg-tab-switcher {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.reg-tab-btn {
    background: #FFFFFF;
    color: #481A7E;
    border: 2px solid rgba(84, 35, 130, 0.15);
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    padding: 0.8rem 1.8rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(72, 26, 126, 0.05);
    transition: all 0.25s ease;
}

.reg-tab-btn i {
    color: #FFB800;
    font-size: 1.15rem;
}

.reg-tab-btn:hover {
    background-color: #F4EFFF;
    border-color: #481A7E;
    transform: translateY(-2px);
}

.reg-tab-btn.is-active {
    background-color: #3D1A68;
    color: #FFFFFF;
    border-color: #3D1A68;
    box-shadow: 0 6px 20px rgba(61, 26, 104, 0.25);
}

.reg-tab-btn.is-active i {
    color: #FFB800;
}

/* Tab Panes */
.reg-tab-pane {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.reg-tab-pane.is-active {
    display: block;
    opacity: 1;
}

.reg-card {
    background: #FFFFFF;
    border-radius: 32px;
    padding: 3rem 2.8rem;
    box-shadow: 0 16px 40px rgba(72, 26, 126, 0.08);
    border: 2px solid rgba(84, 35, 130, 0.08);
}

.reg-pill-tag {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: #481A7E;
    background-color: #F3EEFA;
    padding: 0.35rem 0.95rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-block;
    margin-bottom: 0.55rem;
    text-align: center;
}

.reg-card-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 2.6vw, 2.4rem);
    font-weight: 700;
    color: #1E1238;
    margin-bottom: 0.4rem;
}

.reg-card-subtitle {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: #6B627B;
    max-width: 680px;
    margin: 0 auto 2.2rem auto;
    line-height: 1.55;
}

/* Form Styles */
.reg-form {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

.reg-form-fieldset {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1.5px dashed rgba(84, 35, 130, 0.12);
}

.reg-fieldset-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: #481A7E;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.reg-form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
}

.reg-form-grid-2.nested {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 1rem;
}

.reg-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.reg-form-group.full-width {
    width: 100%;
}

.reg-label {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    color: #3D1A68;
}

.reg-label .required {
    color: #E11D48;
}

.reg-label .optional {
    color: #8E849E;
    font-size: 0.8rem;
}

.reg-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.reg-input-wrap .input-icon {
    position: absolute;
    left: 14px;
    color: #8E849E;
    font-size: 0.95rem;
    pointer-events: none;
}

.reg-input,
.reg-select,
.reg-textarea {
    width: 100%;
    padding: 0.78rem 1rem 0.78rem 2.6rem;
    border-radius: 14px;
    border: 1.5px solid #E2D4F8;
    background-color: #FAF8FD;
    font-family: var(--font-body);
    font-size: 0.96rem;
    font-weight: 600;
    color: #1E1238;
    transition: all 0.25s ease;
}

.reg-textarea {
    padding-left: 1rem;
    resize: vertical;
    min-height: 85px;
    line-height: 1.45;
}

.reg-input:focus,
.reg-select:focus,
.reg-textarea:focus {
    outline: none;
    border-color: #3D1A68;
    background-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(61, 26, 104, 0.12);
}

.reg-btn-submit {
    background-color: #FFB800;
    color: #2D1350;
    border: 2px solid #FFCA28;
    font-family: var(--font-heading);
    font-size: 1.08rem;
    font-weight: 700;
    padding: 0.85rem 2.2rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(255, 184, 0, 0.35);
    transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.reg-btn-submit:hover {
    background-color: #FFAE00;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(255, 184, 0, 0.45);
}

.reg-privacy-notice {
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: #7B7289;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 0.75rem;
}

.reg-privacy-notice i {
    color: #16A34A;
}

/* =========================================
   3. 5-STEP ADMISSION PROCESS
========================================= */
.reg-steps-section {
    padding: 3.8rem 1.8rem 4.5rem 1.8rem;
    background: radial-gradient(circle at 50% 50%, #FAF8FD 0%, #F5EFFB 100%);
    border-top: 1px solid rgba(84, 35, 130, 0.06);
    border-bottom: 1px solid rgba(84, 35, 130, 0.06);
}

.reg-steps-container {
    max-width: 1300px;
    margin: 0 auto;
}

.reg-section-header {
    margin-bottom: 2.8rem;
}

.reg-section-header.text-center {
    text-align: center;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.reg-section-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 2.6vw, 2.5rem);
    font-weight: 700;
    color: #1E1238;
    margin-bottom: 0.4rem;
}

.reg-section-desc {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 600;
    color: #554D64;
    line-height: 1.55;
}

.reg-steps-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.reg-step-card {
    background: #FFFFFF;
    border-radius: 22px;
    padding: 1.8rem 1.2rem;
    border: 2px solid rgba(84, 35, 130, 0.08);
    box-shadow: 0 6px 18px rgba(72, 26, 126, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    position: relative;
    transition: transform 0.25s ease;
}

.reg-step-card:hover {
    transform: translateY(-4px);
    border-color: #FFB800;
}

.reg-step-num {
    position: absolute;
    top: -14px;
    background: #3D1A68;
    color: #FFB800;
    border: 2px solid #FFB800;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reg-step-icon {
    font-size: 1.8rem;
    color: #481A7E;
    margin-top: 0.4rem;
    margin-bottom: 0.8rem;
}

.reg-step-title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: #1E1238;
    margin-bottom: 0.35rem;
}

.reg-step-desc {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: #6B627B;
    line-height: 1.45;
}

.reg-step-card.is-final {
    border-color: #FFB800;
    background-color: #FFFDF8;
}

.reg-step-card.is-final .reg-step-num {
    background: #FFB800;
    color: #2D1350;
    border-color: #3D1A68;
}

.reg-step-card.is-final .reg-step-icon {
    color: #D97706;
}

.reg-step-arrow {
    color: #FFB800;
    font-size: 1.1rem;
    opacity: 0.8;
}

/* =========================================
   4. FAQ ACCORDION
========================================= */
.reg-faq-section {
    padding: 4rem 1.8rem;
    max-width: 900px;
    margin: 0 auto;
}

.reg-faq-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.reg-faq-item {
    background: #FFFFFF;
    border-radius: 20px;
    border: 2px solid rgba(84, 35, 130, 0.08);
    box-shadow: 0 4px 14px rgba(72, 26, 126, 0.03);
    overflow: hidden;
    transition: border-color 0.25s ease;
}

.reg-faq-item.is-open {
    border-color: #FFB800;
}

.reg-faq-question {
    width: 100%;
    padding: 1.3rem 1.5rem;
    background: none;
    border: none;
    font-family: var(--font-heading);
    font-size: 1.08rem;
    font-weight: 700;
    color: #1E1238;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.reg-faq-question:hover {
    color: #481A7E;
}

.faq-chevron {
    color: #FFB800;
    font-size: 0.95rem;
    transition: transform 0.3s ease;
}

.reg-faq-item.is-open .faq-chevron {
    transform: rotate(180deg);
}

.reg-faq-answer {
    padding: 0 1.5rem 1.3rem 1.5rem;
    display: none;
}

.reg-faq-item.is-open .reg-faq-answer {
    display: block;
}

.reg-faq-answer p {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    color: #554D64;
    line-height: 1.6;
    margin: 0;
}

/* =========================================
   5. SUPPORT STRIP
========================================= */
.reg-support-strip {
    padding: 1.5rem 1.8rem 4rem 1.8rem;
    max-width: 1100px;
    margin: 0 auto;
}

.reg-support-card {
    background: linear-gradient(135deg, #3D1A68 0%, #290E49 100%);
    border-radius: 24px;
    padding: 2.2rem 2.6rem;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 2rem;
    box-shadow: 0 12px 30px rgba(61, 26, 104, 0.18);
    border: 2px solid rgba(255, 184, 0, 0.3);
}

.reg-support-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 184, 0, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #FFB800;
    flex-shrink: 0;
}

.reg-support-content {
    flex: 1;
}

.reg-support-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 0.25rem;
}

.reg-support-desc {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #E2D4F8;
    margin-bottom: 1rem;
}

.reg-support-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.reg-support-btn {
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 700;
    padding: 0.65rem 1.3rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    transition: all 0.25s ease;
}

.reg-support-btn.btn-call {
    background-color: #FFB800;
    color: #2D1350;
    border: 2px solid #FFCA28;
}

.reg-support-btn.btn-call:hover {
    background-color: #FFAE00;
    transform: translateY(-2px);
}

.reg-support-btn.btn-whatsapp {
    background-color: #25D366;
    color: #FFFFFF;
}

.reg-support-btn.btn-whatsapp:hover {
    background-color: #20BA56;
    transform: translateY(-2px);
}

/* =========================================
   6. TRUST STRIP
========================================= */
.reg-trust-strip {
    background: #FFFFFF;
    border-top: 1px solid rgba(84, 35, 130, 0.08);
    border-bottom: 1px solid rgba(84, 35, 130, 0.08);
    padding: 1.4rem 1.8rem;
}

.reg-trust-container {
    max-width: 1440px;
    margin: 0 auto;
}

.reg-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    align-items: center;
}

.reg-trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #3D1A68;
    text-align: center;
}

.reg-trust-item i {
    color: #FFB800;
    font-size: 1.2rem;
}

/* =========================================
   RESPONSIVE MEDIA QUERIES
========================================= */
@media (max-width: 1199px) {
    .reg-steps-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    .reg-step-arrow {
        display: none;
    }
    .reg-trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }
    .reg-trust-item {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .reg-hero-banner {
        padding: 2.8rem 1.2rem;
    }
    .reg-form-section,
    .reg-steps-section,
    .reg-faq-section,
    .reg-support-strip {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
    .reg-card {
        padding: 2rem 1.4rem;
        border-radius: 24px;
    }
    .reg-form-grid-2,
    .reg-form-grid-2.nested {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }
    .reg-steps-grid {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }
    .reg-support-card {
        flex-direction: column;
        text-align: center;
        padding: 1.8rem 1.2rem;
        gap: 1.2rem;
    }
    .reg-support-actions {
        justify-content: center;
        flex-direction: column;
        width: 100%;
    }
    .reg-support-btn {
        width: 100%;
        justify-content: center;
    }
    .reg-trust-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
}









/* ==========================================================================
   HEADER & LOGO FIX (PROPORTIONATE, UNSTRETCHED & CLEANLY ATTACHED)
   ========================================================================== */

/* 1. Header Dimensions & Scallop Canopy */
:root {
    --header-total-height: 112px;
    --header-sticky-height: 80px;
    --scallop-solid-height: 18px;
    --scallop-wave-height: 18px;
    --brand-purple: #481A7E;
    --brand-yellow: #FFB800;
}

.xk-header {
    position: relative;
    width: 100%;
    background-color: #FFFFFF;
    box-shadow: 0 4px 20px rgba(72, 26, 126, 0.06);
    z-index: 1000;
    transition: height 0.3s ease, box-shadow 0.3s ease;
}

.xk-scallop-ribbon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--scallop-solid-height);
    background-color: var(--brand-purple);
    z-index: 1;
}

.xk-scallop-ribbon::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: var(--scallop-wave-height);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 18" width="34" height="18"><path d="M0,0 L34,0 C34,9.94 26.39,18 17,18 C7.61,18 0,9.94 0,0 Z" fill="%23481A7E"/></svg>');
    background-repeat: repeat-x;
    background-size: 34px 18px;
}

.xk-header-container {
    max-width: 1540px;
    margin: 0 auto;
    padding: 0 2rem;
    height: var(--header-total-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 5;
}

/* =========================================
   2. DESKTOP LOGO CARD (FLUSH WITH TOP & NO DISTORTION)
========================================= */
.xk-logo-card {
    position: relative;
    top: 0;
    align-self: flex-start;              /* Anchors directly to the very top edge */
    background-color: #FFFFFF;
    padding: 8px 16px 14px 16px;         /* Balanced padding around the logo */
    border-radius: 0 0 22px 22px;        /* Smooth rounded bottom edges */
    box-shadow: 0 8px 24px rgba(61, 26, 104, 0.12);
    border: 1.5px solid rgba(84, 35, 130, 0.08);
    border-top: none;                    /* Seamless connection with top */
    z-index: 20;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease, padding 0.25s ease, box-shadow 0.25s ease;
}

.xk-logo-card:hover {
    transform: translateY(2px);
    box-shadow: 0 12px 28px rgba(61, 26, 104, 0.18);
}

.xk-logo-anchor {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* Strictly Preserves Intrinsic Aspect Ratio (Never Stretches) */
.xk-brand-logo {
    height: 84px !important;
    width: auto !important;             /* Auto width prevents horizontal squishing */
    max-width: 110px;
    object-fit: contain;
    display: block;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    transition: height 0.3s ease;
}


/* =========================================
   4. NAVIGATION MENU & ACTIVE STATE HIERARCHY
========================================= */
.xk-main-nav {
    display: flex;
    align-items: center;
    margin-top: 24px;                    /* Aligns below the scallop canopy */
}

.xk-nav-menu {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.xk-menu-link {
    font-family: var(--font-heading, 'Fredoka', sans-serif);
    font-size: 1.02rem;
    font-weight: 600;
    color: #1E1A29;
    padding: 6px 0;
    position: relative;
    display: inline-block;
    letter-spacing: 0.15px;
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.xk-menu-link:hover {
    color: var(--brand-purple);
}

/* Active State: Vibrant Brand Purple with Yellow Underline */
.xk-menu-link.is-active {
    color: var(--brand-purple);
    font-weight: 700;
}

.xk-menu-link.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 3.5px;
    background-color: var(--brand-yellow);
    border-radius: 4px;
}

/* Right CTA Button */
.xk-header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 24px;
    flex-shrink: 0;
}

.xk-enquire-btn {
    background-color: var(--brand-purple);
    color: #FFFFFF;
    font-family: var(--font-heading, 'Fredoka', sans-serif);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.65rem 1.35rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(72, 26, 126, 0.25);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.xk-enquire-btn:hover {
    background-color: #371263;
    transform: translateY(-2px);
}

/* =========================================
   5. MOBILE DRAWER LOGO FIX (NO MORE SQUISHING)
========================================= */
.xk-drawer-header {
    padding: 1.2rem 1.5rem;
    display: flex;
    align-items: center;
   
    justify-content: space-between;
    border-bottom: 2px solid #F3EEFA;
    background-color: #FFFFFF;
}

.xk-drawer-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* FIXED: Mobile Drawer Logo Unstretched */
.xk-drawer-logo img,
.xk-drawer-head img {
    height: 62px !important;            /* Fixed vertical height */
    width: auto !important;              /* Auto width prevents horizontal distortion */
    max-width: 85px !important;
    object-fit: cover !important;
    display: block;
}

.xk-drawer-close {
    background: #F3EEFA;
    border: none;
    color: var(--brand-purple);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.xk-drawer-close:hover {
    background-color: var(--brand-purple);
    color: #FFFFFF;
    transform: rotate(90deg);
}

/* Mobile Active Link Styling */
.xk-mobile-link.is-active,
.xk-drawer-link.is-active {
    color: var(--brand-purple);
    background-color: #F6F0FF;
    font-weight: 700;
    border-left: 4px solid var(--brand-yellow);
}

/* =========================================
   6. RESPONSIVE BREAKPOINTS
========================================= */
@media (max-width: 1300px) {
    .xk-nav-menu {
        gap: 1.1rem;
    }
    .xk-menu-link {
        font-size: 0.94rem;
    }
    .xk-brand-logo {
        height: 76px !important;
        max-width: 95px;
    }
}

@media (max-width: 1024px) {
    :root {
        --header-total-height: 84px;
        --header-sticky-height: 72px;
    }
    .xk-main-nav,
    .xk-enquire-btn {
        display: none;
    }
    .xk-hamburger,
    .xk-hamburger-btn {
        display: flex;
    }
    .xk-header-actions {
        margin-top: 0;
    }
    .xk-logo-card {
        padding: 6px 12px 10px 12px;
        border-radius: 0 0 16px 16px;
    }
    .xk-brand-logo {
        height: 60px !important;
        max-width: 80px;
    }
}

@media (max-width: 480px) {
    .xk-header-container {
        padding: 0 1.2rem;
    }
    .xk-brand-logo {
        height: 52px !important;
        max-width: 70px;
    }
    .xk-logo-card {
        padding: 4px 10px 8px 10px;
    }
}


/* ==========================================================================
   MOBILE & DRAWER LOGO SIZE BOOST (UNSTRETCHED & PROMINENT)
   ========================================================================== */

/* 1. Mobile Drawer Logo (Inside the Side Menu) */
.xk-drawer-header,
.xk-drawer-head {
    padding: 1rem 1.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #F3EEFA;
    background-color: #FFFFFF;
}

.xk-drawer-logo {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
}

/* Increased drawer logo size */
.xk-drawer-logo img,
.xk-drawer-head img {
    height: 78px !important;            /* Increased from 62px for clear visibility */
    width: auto !important;             /* Strictly maintains aspect ratio */
    max-width: 115px !important;
    object-fit: cover !important;
    display: block;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* =========================================
   2. MOBILE HEADER BREAKPOINTS
========================================= */

/* Tablets & Large Mobile (<= 1024px) */
@media (max-width: 1024px) {
    :root {
        --header-total-height: 92px;     /* Increased slightly to fit larger logo */
        --header-sticky-height: 78px;
    }

    .xk-logo-card {
        padding: 6px 14px 12px 14px;
        border-radius: 0 0 18px 18px;
    }

    .xk-brand-logo {
        height: 72px !important;         /* Increased from 60px */
        max-width: 100px !important;
        width: auto !important;
    }
}

/* Standard Mobile Devices (<= 480px) */
@media (max-width: 480px) {
    :root {
        --header-total-height: 88px;
    }

    .xk-header-container {
        padding: 0 1.1rem;
    }

    .xk-logo-card {
        padding: 5px 12px 10px 12px;
        border-radius: 0 0 16px 16px;
    }

    /* Prominent Mobile Header Logo */
    .xk-brand-logo {
        height: 66px !important;         /* Increased from 52px */
        max-width: 90px !important;
        width: auto !important;
    }
}

/* Small Screen Phones (<= 360px) */
@media (max-width: 360px) {
    .xk-brand-logo {
        height: 58px !important;
        max-width: 80px !important;
        width: auto !important;
    }
}



/* ==========================================================================
   MOBILE HAMBURGER & CANOPY CLEARANCE FIX
   ========================================================================== */

@media (max-width: 1024px) {
    /* 1. Header Container height & alignment */
    :root {
        --header-total-height: 96px;
    }

    .xk-header-container {
        height: var(--header-total-height);
        align-items: center;
    }

    /* 2. Push right-side actions & hamburger safely below the canopy wave */
    .xk-header-actions {
        margin-top: 22px !important;     /* Creates clear gap below the purple wave */
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

  

  
}

/* Small Screen Phones (<= 480px) */
@media (max-width: 480px) {
    :root {
        --header-total-height: 92px;
    }

    .xk-header-actions {
        margin-top: 20px !important;     /* Clean breathing room on small screens */
    }

    .xk-hamburger,
    .xk-hamburger-btn {
        padding: 8px 9px;
    }
}


/* ==========================================================================
   LOGO SHARPNESS & ANTI-ALIASING FIX (SMOOTH & CRYSTAL CLEAR)
   ========================================================================== */

/* 1. Logo Card Container */
.xk-logo-card {
    position: relative;
    top: 0;
    align-self: flex-start;
    background-color: #FFFFFF;
    padding: 10px 20px 14px 20px;       /* Balanced breathing room */
    border-radius: 0 0 24px 24px;       /* Smooth rounded bottom corners */
    box-shadow: 0 8px 24px rgba(61, 26, 104, 0.12);
    border: 1.5px solid rgba(84, 35, 130, 0.08);
    border-top: none;
    z-index: 20;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}




/* 2. Smooth, High-DPI Anti-Aliased Logo */
.xk-brand-logo {
    
    /* FIXED: Restores smooth bilinear/bicubic browser anti-aliasing */
    image-rendering: auto !important;
    image-rendering: smooth !important;
    
}


/* ==========================================================================
   STATIC LOGO (NO HOVER MOVEMENT OR SHADOW JUMP)
   ========================================================================== */



/* Disabled all hover effects */
.xk-logo-card:hover

 {
    transform: none !important;

}


/* ==========================================================================
   1. BRAND VARIABLES & RESET
   ========================================================================== */
:root {
  
    --brand-yellow: #065517;           /* Warm Yellow from Reference */
   
}



/* ==========================================================================
   HIDE HERO FLOATING DOODLES (PLANE, STARS, CLOUDS) ON MOBILE & TABLETS
   ========================================================================== */

@media (max-width: 991px) {
    /* Hide Paper Plane, Clouds, and Sparkle Stars */
    .hero-plane-wrap,
    .hero-cloud,
    .hero-cloud-1,
    .hero-sparkle,
    .hero-sparkle-1,
    .hero-sparkle-2,
    .hero-sparkle-3 {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}











/* ==========================================================================
   XAVIER KIDS THANK YOU PAGE STYLES
   ========================================================================== */

.thankyou-page-wrapper {
    position: relative;
    width: 100%;
    background-color: var(--bg-page, #FAF8F5);
    color: var(--text-main, #2D2738);
    overflow: hidden;
}

/* =========================================
   1. HERO SECTION & CONFIRMATION CARD
========================================= */
.thankyou-hero-section {
    position: relative;
    width: 100%;
    background: radial-gradient(circle at 50% 30%, #FFFFFF 0%, #FAF8F5 60%, #F5EFFB 100%);
    padding: 4.5rem 1.8rem 4rem 1.8rem;
    text-align: center;
}

.thankyou-container {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

.thankyou-card {
    background: #FFFFFF;
    border-radius: 32px;
    padding: 3.5rem 2.8rem;
    box-shadow: 0 16px 45px rgba(72, 26, 126, 0.08);
    border: 2px solid rgba(84, 35, 130, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Animated Success Icon */
.thankyou-icon-wrap {
    position: relative;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.thankyou-icon-pulse {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background-color: #DCFCE7;
    animation: successPulse 2.5s infinite;
    z-index: 1;
}

.thankyou-icon-inner {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #16A34A 0%, #15803D 100%);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    box-shadow: 0 8px 24px rgba(22, 163, 74, 0.35);
    border: 4px solid #FFFFFF;
    z-index: 2;
}

@keyframes successPulse {
    0% { transform: scale(0.9); opacity: 0.8; }
    50% { transform: scale(1.15); opacity: 0.3; }
    100% { transform: scale(0.9); opacity: 0.8; }
}

.thankyou-pill-tag {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    color: #16A34A;
    background-color: #DCFCE7;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-block;
    margin-bottom: 0.85rem;
}

.thankyou-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    font-weight: 700;
    color: #1E1238;
    line-height: 1.2;
    margin-bottom: 0.85rem;
}

.thankyou-title .text-highlight {
    color: #481A7E;
}

.thankyou-desc {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 600;
    color: #554D64;
    max-width: 680px;
    line-height: 1.65;
    margin-bottom: 2.2rem;
}

/* Actions Buttons */
.thankyou-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.thankyou-btn-primary {
    background-color: #FFB800;
    color: #2D1350;
    border: 2px solid #FFCA28;
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 700;
    padding: 0.8rem 1.6rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(255, 184, 0, 0.35);
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.thankyou-btn-primary:hover {
    background-color: #FFAE00;
    transform: translateY(-2px);
}

.thankyou-btn-secondary {
    background-color: #FFFFFF;
    color: #3D1A68;
    border: 2px solid #3D1A68;
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 700;
    padding: 0.8rem 1.5rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.thankyou-btn-secondary:hover {
    background-color: #F4EFFF;
    color: #2D0E49;
}

.thankyou-btn-whatsapp {
    background-color: #25D366;
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 700;
    padding: 0.8rem 1.5rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.thankyou-btn-whatsapp:hover {
    background-color: #20BA56;
    transform: translateY(-2px);
}

/* Doodles */
.thankyou-hero-decors {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.thankyou-decor-plane {
    position: absolute;
    top: 40px;
    right: 8%;
    transform: rotate(10deg);
    animation: gentleDrift 6s ease-in-out infinite alternate;
}

.thankyou-star {
    position: absolute;
    opacity: 0.7;
    animation: gentleTwinkle 3.5s ease-in-out infinite alternate;
}

.thankyou-star.star-1 { top: 80px; left: 18%; }
.thankyou-star.star-2 { top: 130px; right: 20%; }

/* =========================================
   2. 3-STEP TIMELINE
========================================= */
.thankyou-steps-section {
    padding: 3.5rem 1.8rem 4rem 1.8rem;
    background-color: #F8F5FC;
    border-top: 1px solid rgba(84, 35, 130, 0.06);
    border-bottom: 1px solid rgba(84, 35, 130, 0.06);
}

.thankyou-steps-container {
    max-width: 1100px;
    margin: 0 auto;
}

.thankyou-section-header {
    margin-bottom: 2.8rem;
}

.thankyou-section-header.text-center {
    text-align: center;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.thankyou-section-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 2.6vw, 2.4rem);
    font-weight: 700;
    color: #1E1238;
    margin-bottom: 0.4rem;
}

.thankyou-section-desc {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 600;
    color: #554D64;
    line-height: 1.55;
}

.thankyou-steps-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
}

.thankyou-step-card {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 2rem 1.6rem;
    border: 2px solid rgba(84, 35, 130, 0.08);
    box-shadow: 0 6px 20px rgba(72, 26, 126, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    position: relative;
    transition: transform 0.25s ease;
}

.thankyou-step-card:hover {
    transform: translateY(-4px);
    border-color: #FFB800;
}

.step-card-number {
    position: absolute;
    top: -14px;
    background: #3D1A68;
    color: #FFB800;
    border: 2px solid #FFB800;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-card-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-top: 0.4rem;
    margin-bottom: 1rem;
}

.step-card-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: #1E1238;
    margin-bottom: 0.4rem;
}

.step-card-desc {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: #6B627B;
    line-height: 1.5;
}

.thankyou-step-card.is-final {
    border-color: #FFB800;
    background-color: #FFFDF8;
}

.thankyou-step-card.is-final .step-card-number {
    background: #FFB800;
    color: #2D1350;
    border-color: #3D1A68;
}

.step-card-arrow {
    color: #FFB800;
    font-size: 1.3rem;
    opacity: 0.8;
}

/* =========================================
   3. HELP & SUPPORT STRIP
========================================= */
.thankyou-help-section {
    padding: 3.5rem 1.8rem;
    max-width: 1100px;
    margin: 0 auto;
}

.thankyou-help-card {
    background: linear-gradient(135deg, #3D1A68 0%, #290E49 100%);
    border-radius: 28px;
    padding: 2.2rem 2.8rem;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 2rem;
    box-shadow: 0 12px 30px rgba(61, 26, 104, 0.18);
    border: 2px solid rgba(255, 184, 0, 0.3);
}

.thankyou-help-icon {
    width: 64px;
    height: 64px;
    background: rgba(255, 184, 0, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #FFB800;
    flex-shrink: 0;
}

.thankyou-help-content {
    flex: 1;
}

.thankyou-help-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 0.3rem;
}

.thankyou-help-desc {
    font-family: var(--font-body);
    font-size: 0.98rem;
    color: #E2D4F8;
    margin-bottom: 1rem;
    line-height: 1.55;
}

.thankyou-help-links {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    font-family: var(--font-heading);
    font-size: 0.94rem;
}

.thankyou-help-link {
    color: #FFB800;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.thankyou-help-link:hover {
    color: #FFAE00;
    text-decoration: underline;
}

.thankyou-help-sep {
    color: rgba(255, 255, 255, 0.4);
}

/* =========================================
   4. TRUST STRIP
========================================= */
.thankyou-trust-strip {
    background: #FFFFFF;
    border-top: 1px solid rgba(84, 35, 130, 0.08);
    border-bottom: 1px solid rgba(84, 35, 130, 0.08);
    padding: 1.4rem 1.8rem;
}

.thankyou-trust-container {
    max-width: 1440px;
    margin: 0 auto;
}

.thankyou-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    align-items: center;
}

.thankyou-trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #3D1A68;
    text-align: center;
}

.thankyou-trust-item i {
    color: #FFB800;
    font-size: 1.2rem;
}

/* =========================================
   RESPONSIVE MEDIA QUERIES (THANK YOU PAGE)
========================================= */
@media (max-width: 991px) {
    .thankyou-steps-grid {
        flex-direction: column;
        gap: 1.4rem;
    }
    .step-card-arrow {
        transform: rotate(90deg);
    }
    .thankyou-trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }
    .thankyou-trust-item {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .thankyou-hero-section {
        padding: 3rem 1.2rem 2.5rem 1.2rem;
    }
    .thankyou-card {
        padding: 2.2rem 1.4rem;
        border-radius: 24px;
    }
    .thankyou-actions {
        flex-direction: column;
        width: 100%;
    }
    .thankyou-btn-primary,
    .thankyou-btn-secondary,
    .thankyou-btn-whatsapp {
        width: 100%;
        justify-content: center;
    }
    .thankyou-help-card {
        flex-direction: column;
        text-align: center;
        padding: 1.8rem 1.4rem;
        gap: 1.2rem;
    }
    .thankyou-help-links {
        justify-content: center;
        flex-direction: column;
        gap: 0.5rem;
    }
    .thankyou-help-sep {
        display: none;
    }
    .thankyou-trust-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
}




/* ==========================================================================
   ABOUT US DROPDOWN STYLES (DESKTOP & MOBILE)
   ========================================================================== */

/* --- Desktop Dropdown --- */
.xk-has-dropdown {
    position: relative;
}

.xk-has-dropdown .xk-menu-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.xk-dropdown-arrow {
    font-size: 0.72rem;
    transition: transform 0.25s ease;
    color: #8E849E;
}

.xk-has-dropdown:hover .xk-dropdown-arrow {
    transform: rotate(180deg);
    color: #481A7E;
}

.xk-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: #FFFFFF;
    min-width: 240px;
    padding: 0.6rem;
    border-radius: 18px;
    box-shadow: 0 14px 35px rgba(61, 26, 104, 0.15);
    border: 2px solid rgba(84, 35, 130, 0.08);
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
    z-index: 100;
}

/* Invisible bridge so hover doesn't close on mouse movement */
.xk-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 0;
    width: 100%;
    height: 14px;
}

.xk-has-dropdown:hover .xk-dropdown-menu,
.xk-has-dropdown:focus-within .xk-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.xk-dropdown-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.95rem;
    border-radius: 12px;
    font-family: var(--font-heading, 'Fredoka', sans-serif);
    font-size: 0.92rem;
    font-weight: 600;
    color: #2D2738;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.xk-dropdown-link i {
    color: #FFB800;
    font-size: 0.88rem;
    width: 18px;
    text-align: center;
    transition: transform 0.2s ease;
}

.xk-dropdown-link:hover {
    background-color: #F6F0FF;
    color: #481A7E;
    transform: translateX(3px);
}

.xk-dropdown-link:hover i {
    transform: scale(1.15);
}

/* --- Mobile Drawer Dropdown / Accordion --- */
.xk-drawer-dropdown-item {
    display: flex;
    flex-direction: column;
}

.xk-drawer-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.xk-drawer-toggle-btn {
    background: transparent;
    border: none;
    color: #481A7E;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    transition: transform 0.25s ease, background-color 0.2s ease;
}

.xk-drawer-toggle-btn:hover {
    background-color: #F3EEFA;
}

.xk-drawer-dropdown-item.is-open .xk-drawer-toggle-btn {
    transform: rotate(180deg);
    background-color: #F3EEFA;
}

.xk-drawer-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-left: 0.8rem;
}

.xk-drawer-dropdown-item.is-open .xk-drawer-submenu {
    max-height: 240px;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.xk-drawer-sublink {
    display: block;
    padding: 0.5rem 0.85rem;
    font-family: var(--font-heading, 'Fredoka', sans-serif);
    font-size: 0.95rem;
    font-weight: 500;
    color: #554D64;
    text-decoration: none;
    border-radius: 8px;
    border-left: 2px solid rgba(84, 35, 130, 0.15);
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.xk-drawer-sublink:hover {
    color: #481A7E;
    background-color: #F6F0FF;
    border-left-color: #FFB800;
}




/* ==========================================================================
   REUSABLE SUBPAGE HERO BANNER WITH OVERLAY & BREADCRUMB
   ========================================================================== */

.subpage-hero-banner {
    position: relative;
    width: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 3.8rem 1.8rem 4rem 1.8rem;
    text-align: center;
    color: #FFFFFF;
}

/* Background Images for Each Specific Page */
.subpage-hero-banner.director-hero {
    background-image: url('../images/home/bread.webp');
}

.subpage-hero-banner.principal-hero {
    background-image: url('../images/home/bread.webp');
}

.subpage-hero-banner.management-hero {
    background-image: url('../images/home/bread.webp');
}

/* Royal Purple & Dark Gradient Overlay */
.subpage-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(61, 26, 104, 0.92) 0%, rgba(41, 14, 73, 0.88) 100%);
    z-index: 1;
}

.subpage-hero-container {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 5;
}

/* Breadcrumb Navigation */
.subpage-breadcrumb-nav {
    margin-bottom: 1.2rem;
}

.subpage-breadcrumb-list {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    background-color: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.35rem 1.1rem;
    border-radius: var(--radius-pill, 9999px);
    list-style: none;
    margin: 0;
}

.subpage-breadcrumb-list .breadcrumb-item {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
}

.subpage-breadcrumb-list .breadcrumb-link {
    color: #FFB800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s ease;
}

.subpage-breadcrumb-list .breadcrumb-link:hover {
    color: #FFAE00;
    text-decoration: underline;
}

.subpage-breadcrumb-list .breadcrumb-sep {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
}

.subpage-breadcrumb-list .breadcrumb-item.is-active {
    color: #FFFFFF;
}

/* Badge & Headings */
.subpage-hero-badge {
    background-color: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    border: 1.5px solid rgba(255, 184, 0, 0.4);
    margin-bottom: 0.85rem;
}

.subpage-hero-badge i {
    color: #FFB800;
}

.subpage-hero-eyebrow {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #FFD54F;
    letter-spacing: 1px;
    margin-bottom: 0.35rem;
}

.subpage-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 3.8vw, 3.4rem);
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.18;
    margin-bottom: 0.85rem;
}

.subpage-hero-title .text-highlight {
    color: #FFB800;
}

.subpage-hero-subtitle {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 500;
    color: #E2D4F8;
    max-width: 720px;
    line-height: 1.6;
}

/* Decorative Accents */
.subpage-hero-decors {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.subpage-decor-plane {
    position: absolute;
    top: 35px;
    right: 7%;
    transform: rotate(10deg);
    animation: gentleDrift 6s ease-in-out infinite alternate;
}

.subpage-decor-star {
    position: absolute;
    opacity: 0.7;
    animation: gentleTwinkle 3.5s ease-in-out infinite alternate;
}

.subpage-decor-star.star-1 { top: 75px; left: 20%; }
.subpage-decor-star.star-2 { top: 110px; right: 22%; }

@media (max-width: 768px) {
    .subpage-hero-banner {
        padding: 2.8rem 1.2rem;
    }
    .subpage-breadcrumb-list {
        flex-wrap: wrap;
        justify-content: center;
        padding: 0.4rem 0.8rem;
    }
}






/* ==========================================================================
   SEO PARENT GUIDE & HIGHLIGHTED FAQ SECTION
   ========================================================================== */

.seo-guide-section {
    position: relative;
    width: 100%;
    background-color: #FAF8F5;
    padding: 3.5rem 1.8rem 3rem 1.8rem;
    border-top: 1px solid rgba(84, 35, 130, 0.08);
}

.seo-guide-container {
    max-width: 1320px;
    margin: 0 auto;
}

/* =========================================
   1. COMPACT SEO TEXT CONTENT (SUBTLE)
========================================= */
.seo-subtle-block {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 2.2rem 2.4rem 1.8rem 2.4rem;
    border: 1.5px solid rgba(84, 35, 130, 0.06);
    box-shadow: 0 4px 18px rgba(72, 26, 126, 0.03);
    margin-bottom: 3.2rem;
}

.seo-subtle-head {
    max-width: 960px;
    margin: 0 auto 1.4rem auto;
    text-align: center;
}

.seo-subtle-main-title {
    font-family: var(--font-heading, 'Fredoka', sans-serif);
    font-size: 1.45rem;
    font-weight: 700;
    color: #2D2738;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.seo-subtle-lead {
    font-family: var(--font-body, 'Quicksand', sans-serif);
    font-size: 0.92rem;
    font-weight: 500;
    color: #555E68;
    line-height: 1.6;
    margin: 0;
}

.seo-subtle-lead strong,
.seo-article strong,
.seo-faq-answer strong,
.seo-bottom-summary strong {
    color: #3D1A68;
    font-weight: 700;
}

/* Collapsible Wrapper */
.seo-expandable-wrapper {
    position: relative;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
}

/* Default compact collapsed height (~180px) */
.seo-expandable-wrapper.is-collapsed {
    max-height: 180px;
}

.seo-expandable-wrapper.is-expanded {
    max-height: 2500px;
}

.seo-fade-mask {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 75px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 90%);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.seo-expandable-wrapper.is-expanded .seo-fade-mask {
    opacity: 0;
}

/* 3-Column Editorial Layout */
.seo-columns-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.8rem;
    padding-top: 1rem;
    margin-bottom: 1.2rem;
}

.seo-col-block {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.seo-article {
    border-bottom: 1px solid #F0EEF4;
    padding-bottom: 0.85rem;
}

.seo-article:last-child {
    border-bottom: none;
}

.seo-heading {
    font-family: var(--font-heading, 'Fredoka', sans-serif);
    font-size: 0.98rem;
    font-weight: 700;
    color: #481A7E;
    margin-bottom: 0.35rem;
    line-height: 1.35;
}

.seo-article p {
    font-family: var(--font-body, 'Quicksand', sans-serif);
    font-size: 0.86rem;
    color: #555E68;
    line-height: 1.55;
    margin: 0;
}

.seo-bottom-summary {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(84, 35, 130, 0.12);
}

.seo-bottom-summary p {
    font-family: var(--font-body, 'Quicksand', sans-serif);
    font-size: 0.85rem;
    color: #666;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.seo-inline-links {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-heading, 'Fredoka', sans-serif);
    font-size: 0.85rem;
    font-weight: 600;
}

.seo-inline-links a {
    color: #481A7E;
    text-decoration: underline;
}

.seo-inline-links a:hover {
    color: #FFB800;
}

.seo-inline-links .sep {
    color: #AAA;
}

/* "Read Full Guide" Button */
.seo-toggle-wrap {
    margin-top: 0.75rem;
}

.seo-toggle-btn {
    background: #FFFFFF;
    color: #481A7E;
    border: 1.5px solid #D5CEE0;
    font-family: var(--font-heading, 'Fredoka', sans-serif);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.45rem 1.2rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

.seo-toggle-btn:hover {
    background: #F3EEFA;
    border-color: #481A7E;
}

/* =========================================
   2. HIGHLIGHTED & ATTRACTIVE FAQ CARD
========================================= */
.seo-faq-highlight-card {
    background: #FFFFFF;
    border-radius: 28px;
    padding: 3rem 2.8rem;
    border: 2px solid rgba(84, 35, 130, 0.08);
    box-shadow: 0 10px 30px rgba(72, 26, 126, 0.05);
}

.seo-faq-header {
    max-width: 720px;
    margin: 0 auto 2.4rem auto;
}

.seo-badge-tag {
    font-family: var(--font-heading, 'Fredoka', sans-serif);
    font-size: 0.85rem;
    font-weight: 700;
    color: #481A7E;
    background-color: #F3EEFA;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-block;
    margin-bottom: 0.65rem;
}

.seo-faq-main-title {
    font-family: var(--font-heading, 'Fredoka', sans-serif);
    font-size: clamp(1.8rem, 2.6vw, 2.3rem);
    font-weight: 700;
    color: #1E1238;
    margin-bottom: 0.45rem;
    line-height: 1.25;
}

.seo-faq-subtitle {
    font-family: var(--font-body, 'Quicksand', sans-serif);
    font-size: 1rem;
    font-weight: 500;
    color: #6B627B;
    line-height: 1.5;
}

/* Accordion Container & Cards */
.seo-faq-container {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    max-width: 940px;
    margin: 0 auto;
}

.seo-faq-item {
    background: #FAF8FD;
    border: 1.5px solid #E2D4F8;
    border-radius: 18px;
    overflow: hidden;
    transition: all 0.25s ease;
}

.seo-faq-item:hover {
    border-color: #D6C7EE;
}

.seo-faq-item.is-open {
    border-color: #FFB800;
    background: #FFFFFF;
    box-shadow: 0 6px 18px rgba(255, 184, 0, 0.15);
}

.seo-faq-question {
    width: 100%;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    font-family: var(--font-heading, 'Fredoka', sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: #1E1238;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.seo-faq-question:hover {
    color: #481A7E;
}

.faq-icon {
    color: #FFB800;
    font-size: 0.95rem;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.seo-faq-item.is-open .faq-icon {
    transform: rotate(180deg);
}

.seo-faq-answer {
    padding: 0 1.5rem 1.25rem 1.5rem;
    display: none;
}

.seo-faq-item.is-open .seo-faq-answer {
    display: block;
}

.seo-faq-answer p {
    font-family: var(--font-body, 'Quicksand', sans-serif);
    font-size: 0.96rem;
    font-weight: 500;
    color: #554D64;
    line-height: 1.65;
    margin: 0;
}

/* =========================================
   RESPONSIVE MEDIA QUERIES
========================================= */
@media (max-width: 1024px) {
    .seo-columns-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .seo-guide-section {
        padding: 2.5rem 1.2rem;
    }
    .seo-subtle-block,
    .seo-faq-highlight-card {
        padding: 1.8rem 1.2rem;
        border-radius: 20px;
    }
    .seo-columns-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .seo-faq-question {
        padding: 1rem 1.2rem;
        font-size: 0.98rem;
    }
    .seo-faq-answer {
        padding: 0 1.2rem 1rem 1.2rem;
    }
}









/* ==========================================================================
   AFTERNOON BLOOM 🌸 (HIGH-IMPACT & 100% CENTER-ALIGNED)
   ========================================================================== */

.bloom-section-v2 {
    position: relative;
    width: 100%;
    background: radial-gradient(circle at 50% 20%, #FFF5F7 0%, #FAF8FD 50%, #FAF8F5 100%);
    padding: 5rem 1.8rem 5.5rem 1.8rem;
    overflow: hidden;
    border-top: 1px solid rgba(225, 29, 72, 0.12);
}

.bloom-v2-container {
    max-width: 1320px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Floating Flower Petals */
.bloom-floating-petals {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.bloom-fpetal {
    position: absolute;
    animation: gentlePetalDrift 7s ease-in-out infinite alternate;
}

.bloom-fpetal.p1 { top: 40px; right: 8%; }
.bloom-fpetal.p2 { top: 380px; left: 5%; animation-delay: 1.5s; }
.bloom-fpetal.p3 { bottom: 120px; right: 6%; animation-delay: 3s; }

@keyframes gentlePetalDrift {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-12px) rotate(20deg); }
}

/* =========================================
   1. CENTERED HERO TITLE & ANNOUNCEMENT
========================================= */
.bloom-v2-header {
    max-width: 900px;
    margin: 0 auto 3rem auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.bloom-v2-badge {
    background: linear-gradient(135deg, #FFE4E8 0%, #FFF1F3 100%);
    color: #BE123C;
    border: 1.5px solid #FDA4AF;
    font-family: var(--font-heading, 'Fredoka', sans-serif);
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.4rem 1.4rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.14);
    margin-bottom: 1rem;
    letter-spacing: 0.4px;
}

.bloom-v2-title {
    font-family: var(--font-heading, 'Fredoka', sans-serif);
    font-size: clamp(2.4rem, 4vw, 3.5rem);
    font-weight: 700;
    color: #3D1A68;
    line-height: 1.18;
    margin-bottom: 0.6rem;
}

.text-bloom-gradient {
    color: #E11D48;
    position: relative;
    display: inline-block;
}

.bloom-v2-subtitle {
    font-family: var(--font-body, 'Quicksand', sans-serif);
    font-size: 1.2rem;
    font-weight: 600;
    color: #554D64;
    line-height: 1.5;
    max-width: 760px;
}

.text-highlight-gold {
    color: #D97706;
    font-weight: 700;
}

/* =========================================
   2. HEROIC CENTERPIECE CARD (CENTERED)
========================================= */
.bloom-centerpiece-card {
    background: #FFFFFF;
    border-radius: 36px;
    padding: 3.2rem 3.5rem;
    box-shadow: 0 16px 45px rgba(72, 26, 126, 0.08);
    border: 2px solid rgba(225, 29, 72, 0.18);
    max-width: 1040px;
    width: 100%;
    margin: 0 auto 4.2rem auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

/* High-Impact Time Banner */
.bloom-time-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    margin-bottom: 1.8rem;
    flex-wrap: wrap;
}

.time-pill {
    background: #FFFDF0;
    color: #B45309;
    border: 2px solid #FCD34D;
    padding: 0.55rem 1.4rem;
    border-radius: var(--radius-pill, 9999px);
    font-family: var(--font-heading, 'Fredoka', sans-serif);
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.2);
}

.time-pill i {
    font-size: 1.15rem;
    color: #D97706;
}

.age-pill {
    background: #FFF1F3;
    color: #BE123C;
    border: 2px solid #FECDD3;
    padding: 0.55rem 1.4rem;
    border-radius: var(--radius-pill, 9999px);
    font-family: var(--font-heading, 'Fredoka', sans-serif);
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.15);
}

.age-pill i {
    font-size: 1.15rem;
    color: #E11D48;
}

.bloom-center-heading {
    font-family: var(--font-heading, 'Fredoka', sans-serif);
    font-size: clamp(1.7rem, 2.5vw, 2.2rem);
    font-weight: 700;
    color: #1E1238;
    margin-bottom: 1.2rem;
    line-height: 1.25;
}

.bloom-story-paragraphs {
    max-width: 860px;
    margin: 0 auto 2rem auto;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
}

.bloom-story-paragraphs p {
    font-family: var(--font-body, 'Quicksand', sans-serif);
    font-size: 1.05rem;
    font-weight: 500;
    color: #554D64;
    line-height: 1.7;
    margin: 0;
}

.bloom-story-paragraphs strong {
    color: #3D1A68;
    font-weight: 700;
}

.bloom-highlight-line {
    background: #FAF8FD;
    border-radius: 16px;
    padding: 0.85rem 1.4rem;
    font-family: var(--font-heading, 'Fredoka', sans-serif) !important;
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    color: #481A7E !important;
    border: 1.5px solid #EBDCF9;
}

/* Centered Motto Ribbon */
.bloom-motto-ribbon {
    background: linear-gradient(135deg, #FFF1F3 0%, #FFE4E8 100%);
    border: 2px dashed #FDA4AF;
    border-radius: var(--radius-pill, 9999px);
    padding: 0.85rem 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    box-shadow: 0 4px 16px rgba(225, 29, 72, 0.12);
}

.motto-text {
    font-family: var(--font-heading, 'Fredoka', sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: #881337;
    margin: 0;
    line-height: 1.35;
}

.motto-blossom-left,
.motto-blossom-right {
    font-size: 1.3rem;
}

/* =========================================
   3. 5 KEY ADVANTAGE CARDS (CENTERED)
========================================= */
.bloom-perks-section {
    width: 100%;
    margin-bottom: 4.5rem;
}

.bloom-perks-head {
    max-width: 800px;
    margin: 0 auto 3rem auto;
}

.perks-tag {
    font-family: var(--font-heading, 'Fredoka', sans-serif);
    font-size: 0.85rem;
    font-weight: 700;
    color: #481A7E;
    background-color: #F3EEFA;
    padding: 0.3rem 1rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-block;
    margin-bottom: 0.6rem;
}

.perks-title {
    font-family: var(--font-heading, 'Fredoka', sans-serif);
    font-size: clamp(1.8rem, 2.6vw, 2.4rem);
    font-weight: 700;
    color: #1E1238;
    margin-bottom: 0.45rem;
}

.perks-subtitle {
    font-family: var(--font-body, 'Quicksand', sans-serif);
    font-size: 1.05rem;
    font-weight: 500;
    color: #554D64;
    line-height: 1.55;
}

/* 5 Symmetrical Cards */
.bloom-perks-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.35rem;
}

.bloom-perk-card {
    background: #FFFFFF;
    border-radius: 26px;
    padding: 2.2rem 1.4rem 2rem 1.4rem;
    border: 2px solid transparent;
    box-shadow: 0 10px 28px rgba(72, 26, 126, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.bloom-perk-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 36px rgba(72, 26, 126, 0.12);
}

.perk-icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.2rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    border: 3px solid #FFFFFF;
}

/* Pastel Card Themes */
.perk-pink { background: #FFF9FA; border-color: #FCD6DC; }
.perk-pink .perk-icon-circle { background: #FFE4E8; color: #E11D48; }

.perk-blue { background: #F0F8FF; border-color: #BAE6FD; }
.perk-blue .perk-icon-circle { background: #E0F2FE; color: #0284C7; }

.perk-yellow { background: #FFFBF0; border-color: #FDE68A; }
.perk-yellow .perk-icon-circle { background: #FEF3C7; color: #D97706; }

.perk-purple { background: #F8F5FD; border-color: #DDD6FE; }
.perk-purple .perk-icon-circle { background: #EDE9FE; color: #7C3AED; }

.perk-green { background: #F2FAF5; border-color: #BBF7D0; }
.perk-green .perk-icon-circle { background: #DCFCE7; color: #16A34A; }

.perk-title {
    font-family: var(--font-heading, 'Fredoka', sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: #1E1238;
    line-height: 1.25;
    margin-bottom: 0.6rem;
    min-height: 2.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.perk-desc {
    font-family: var(--font-body, 'Quicksand', sans-serif);
    font-size: 0.88rem;
    font-weight: 500;
    color: #554D64;
    line-height: 1.55;
    margin: 0;
}

/* =========================================
   4. CENTERED CTA BANNER
========================================= */
.bloom-cta-center-card {
    background: linear-gradient(135deg, #3D1A68 0%, #250B47 100%);
    border-radius: 32px;
    padding: 3.5rem 3rem;
    color: #FFFFFF;
    box-shadow: 0 18px 45px rgba(61, 26, 104, 0.25);
    border: 2px solid rgba(255, 184, 0, 0.4);
    max-width: 1040px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cta-floating-badge {
    background: rgba(255, 184, 0, 0.2);
    color: #FFB800;
    font-family: var(--font-heading, 'Fredoka', sans-serif);
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.35rem 1.2rem;
    border-radius: var(--radius-pill, 9999px);
    border: 1px solid rgba(255, 184, 0, 0.45);
    margin-bottom: 1rem;
}

.bloom-cta-title {
    font-family: var(--font-heading, 'Fredoka', sans-serif);
    font-size: clamp(2rem, 3.2vw, 2.6rem);
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.25;
    margin-bottom: 0.75rem;
}

.bloom-cta-subtitle {
    font-family: var(--font-body, 'Quicksand', sans-serif);
    font-size: 1.1rem;
    font-weight: 500;
    color: #E2D4F8;
    line-height: 1.6;
    max-width: 760px;
    margin-bottom: 2.2rem;
}

.bloom-cta-subtitle strong {
    color: #FFD54F;
}

.bloom-cta-btn-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.btn-bloom-gold {
    background-color: #FFB800;
    color: #2D1350;
    border: 2px solid #FFCA28;
    font-family: var(--font-heading, 'Fredoka', sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    padding: 0.85rem 1.8rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(255, 184, 0, 0.4);
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.btn-bloom-gold:hover {
    background-color: #FFAE00;
    transform: translateY(-2px);
}

.btn-bloom-white {
    background-color: transparent;
    color: #FFFFFF;
    border: 2px solid rgba(255, 255, 255, 0.6);
    font-family: var(--font-heading, 'Fredoka', sans-serif);
    font-size: 1.02rem;
    font-weight: 700;
    padding: 0.85rem 1.6rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-bloom-white:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: #FFFFFF;
    transform: translateY(-2px);
}

.btn-bloom-whatsapp {
    background-color: #25D366;
    color: #FFFFFF;
    font-family: var(--font-heading, 'Fredoka', sans-serif);
    font-size: 1.02rem;
    font-weight: 700;
    padding: 0.85rem 1.6rem;
    border-radius: var(--radius-pill, 9999px);
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.btn-bloom-whatsapp:hover {
    background-color: #20BA56;
    transform: translateY(-2px);
}

/* =========================================
   RESPONSIVE LAYOUTS
========================================= */
@media (max-width: 1200px) {
    .bloom-perks-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 860px) {
    .bloom-centerpiece-card {
        padding: 2.4rem 1.6rem;
    }
    .bloom-motto-ribbon {
        border-radius: 20px;
        padding: 0.85rem 1.4rem;
    }
    .bloom-perks-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .bloom-cta-center-card {
        padding: 2.5rem 1.5rem;
    }
    .bloom-cta-btn-group {
        flex-direction: column;
        width: 100%;
    }
    .btn-bloom-gold,
    .btn-bloom-white,
    .btn-bloom-whatsapp {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 520px) {
    .bloom-section-v2 {
        padding: 3.5rem 1.2rem;
    }
    .bloom-time-banner {
        flex-direction: column;
        width: 100%;
    }
    .time-pill,
    .age-pill {
        width: 100%;
        justify-content: center;
    }
    .bloom-perks-grid {
        grid-template-columns: 1fr;
    }
}