/* =============================================




   SHREE RAM INTERNATIONAL PRE SCHOOL




   Premium Design System v2.0




   ============================================= */









/* --- Design Tokens --- */




:root {




    --primary-color: #3E236C;




    --primary-light: #5A3A8E;




    --primary-dark: #2A164C;




    --accent-yellow: #FFD54F;
    --accent-blue: #81D4FA;
    --accent-green: #A5D6A7;
    --accent-purple: #604B99;
    --accent-orange: #FF725E;
    --accent-rose: #F48FB1;




    --text-dark: #333333;




    --text-muted: #666666;




    --text-light: #FFFFFF;




    --bg-white: #FFFFFF;




    --bg-light: #F9F9FB;




    --bg-soft-purple: #F3F0F9;




    --font-heading: 'Playfair Display', Georgia, serif;




    --font-body: 'DM Sans', 'Segoe UI', sans-serif;




    --container-width: 1200px;




    --header-height: 72px;




    --radius-sm: 6px;




    --radius-md: 10px;




    --radius-lg: 16px;




    --radius-xl: 20px;




    --radius-pill: 50px;




    --shadow-xs: 0 1px 3px rgba(62, 35, 108, 0.04);




    --shadow-sm: 0 2px 8px rgba(62, 35, 108, 0.06);




    --shadow-md: 0 8px 24px rgba(62, 35, 108, 0.08);




    --shadow-lg: 0 16px 48px rgba(62, 35, 108, 0.12);




    --shadow-xl: 0 24px 64px rgba(62, 35, 108, 0.16);




    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);




    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);




    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);




}









/* --- Utility Animations --- */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal {
    opacity: 0;
    transition: all 0.8s ease-out;
}

.reveal.revealed {
    opacity: 1;
}

/* --- Reset & Base --- */




*,




*::before,




*::after {




    margin: 0;




    padding: 0;




    box-sizing: border-box;




}









html {




    scroll-behavior: smooth;




    -webkit-text-size-adjust: 100%;




}









::selection {




    background: rgba(62, 35, 108, 0.15);




    color: var(--primary-dark);




}









body {




    font-family: var(--font-body);




    color: var(--text-dark);




    line-height: 1.7;




    background: var(--bg-white);




    overflow-x: hidden;




    -webkit-font-smoothing: antialiased;




    -moz-osx-font-smoothing: grayscale;




    text-rendering: optimizeLegibility;




}




.perf-section {




    content-visibility: auto;




    contain-intrinsic-size: 1px 900px;




}









h1,




h2,




h3,




h4,




h5,




h6 {




    font-family: var(--font-heading);




    font-weight: 800;




    color: var(--primary-color);




    line-height: 1.15;




    letter-spacing: -0.02em;




}









a {




    text-decoration: none;




    color: inherit;




    transition: var(--transition-base);




}









ul {




    list-style: none;




}









img {




    max-width: 100%;




    display: block;




    height: auto;




}




iframe[loading="lazy"],
video[data-deferred-media] {




    background: rgba(62, 35, 108, 0.04);




}




@media (prefers-reduced-motion: reduce) {




    html {




        scroll-behavior: auto;




    }




    *,




    *::before,




    *::after {




        animation-duration: 0.01ms !important;




        animation-iteration-count: 1 !important;




        transition-duration: 0.01ms !important;




        scroll-behavior: auto !important;




    }




    .fade-in-up,




    .reveal {




        opacity: 1;




        transform: none;




    }




}









/* --- Utilities --- */




.container {




    max-width: var(--container-width);




    margin: 0 auto;




    padding: 0 24px;




}









.text-center {




    text-align: center;




}









.text-primary {




    color: var(--primary-color);




}









.h-100 {




    height: 100%;




    display: flex;




    align-items: center;




}









/* --- Buttons --- */




.btn {




    display: inline-flex;




    align-items: center;




    justify-content: center;




    gap: 8px;




    padding: 13px 28px;




    border-radius: var(--radius-sm);




    font-weight: 600;




    font-size: 0.95rem;




    cursor: pointer;




    border: 2px solid transparent;




    transition: var(--transition-base);




    font-family: var(--font-body);




    letter-spacing: 0.01em;




    text-decoration: none;




}









.btn-primary {




    background: var(--primary-color);




    color: var(--text-light);




}









.btn-primary:hover {




    background: var(--primary-dark);




    transform: translateY(-2px);




    box-shadow: var(--shadow-md);




}









.btn-secondary {




    background: var(--accent-yellow);




    color: var(--primary-dark);




}









.btn-secondary:hover {




    background: #FFCA28;




    transform: translateY(-2px);




    box-shadow: 0 8px 20px rgba(255, 213, 79, 0.35);




}









.btn-outline {




    background: transparent;




    border: 2px solid var(--primary-color);




    color: var(--primary-color);




}









.btn-outline:hover {




    background: var(--primary-color);




    color: white;




}









.btn-outline-light {




    background: transparent;




    border: 2px solid rgba(255, 255, 255, 0.5);




    color: white;




    padding: 13px 28px;




    border-radius: var(--radius-sm);




    font-weight: 600;




    transition: var(--transition-base);




    display: inline-flex;




    align-items: center;




    gap: 8px;




    text-decoration: none;




    font-size: 0.95rem;




}









.btn-outline-light:hover {




    background: white;




    color: var(--primary-color);




    border-color: white;




}









.btn-lg {




    padding: 16px 36px;




    font-size: 1.05rem;




}









.btn-block {




    width: 100%;




    display: flex;




    justify-content: center;




    align-items: center;




    gap: 10px;




}









.shadow-pulse {




    animation: pulse 2.5s infinite;




}









@keyframes pulse {




    0% {




        box-shadow: 0 0 0 0 rgba(62, 35, 108, 0.5);




    }









    70% {




        box-shadow: 0 0 0 12px rgba(62, 35, 108, 0);




    }









    100% {




        box-shadow: 0 0 0 0 rgba(62, 35, 108, 0);




    }




}









/* --- Sections --- */




.section {




    padding: 100px 0;




}









.section-header {




    margin-bottom: 56px;




    max-width: 640px;




    margin-left: auto;




    margin-right: auto;




}









.section-header h2 {




    font-size: 2.4rem;




    margin-bottom: 12px;




}









.section-header p {




    color: var(--text-muted);




    font-size: 1.05rem;




    line-height: 1.6;




}









.heading-line {




    width: 48px;




    height: 3px;




    background: var(--accent-yellow);




    margin: 0 auto 20px;




    border-radius: 2px;




}









.heading-line-center {




    width: 48px;




    height: 3px;




    background: var(--accent-yellow);




    margin: 12px auto 24px;




    border-radius: 2px;




}









.sub-heading-caps,




.sub-heading-caps-blue {




    font-weight: 700;




    text-transform: uppercase;




    letter-spacing: 2px;




    font-size: 0.8rem;




    display: block;




    margin-bottom: 8px;




}









.sub-heading-caps {




    color: var(--accent-blue);




}









.sub-heading-caps-blue {




    color: var(--accent-blue);




}









.section-desc {




    max-width: 640px;




    margin: 0 auto;




    color: var(--text-muted);




    font-size: 1.05rem;




}









.section-desc-left {




    margin-bottom: 28px;




    font-size: 1.05rem;




    color: var(--text-muted);




}









/* --- Badge Pills --- */




.badge-pill {




    display: inline-flex;




    align-items: center;




    gap: 6px;




    background: var(--bg-soft-purple);




    color: var(--primary-color);




    padding: 6px 16px;




    border-radius: var(--radius-pill);




    font-weight: 700;




    font-size: 0.82rem;




    letter-spacing: 0.5px;




    border: 1px solid rgba(62, 35, 108, 0.08);




}









.badge-pill-white {




    background: rgba(255, 255, 255, 0.15);




    backdrop-filter: blur(8px);




    border: 1px solid rgba(255, 255, 255, 0.3);




    color: white;




    padding: 6px 16px;




    border-radius: var(--radius-pill);




    text-transform: uppercase;




    font-size: 0.8rem;




    font-weight: 700;




    letter-spacing: 1.5px;




    display: inline-block;




    margin-bottom: 20px;




}









.badge-pill-soft {




    background: #E3F2FD;




    color: #039BE5;




    padding: 6px 16px;




    border-radius: var(--radius-pill);




    font-weight: 700;




    font-size: 0.8rem;




    text-transform: uppercase;




    letter-spacing: 1.5px;




    display: inline-block;




    margin-bottom: 16px;




}









/* --- Navigation --- */




.navbar {




    height: var(--header-height);




    background: rgba(255, 255, 255, 0.92);




    backdrop-filter: blur(12px);




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




    position: fixed;




    top: 0;




    left: 0;




    width: 100%;




    z-index: 1000;




    display: flex;




    align-items: center;




    border-bottom: 1px solid rgba(62, 35, 108, 0.06);




    transition: var(--transition-base);




}









.navbar.scrolled {




    box-shadow: var(--shadow-sm);




    background: rgba(255, 255, 255, 0.97);




}









.nav-container {




    display: flex;




    justify-content: space-between;




    align-items: center;




    width: 100%;




}









.logo img {




    height: 52px;




}









.nav-links {




    display: flex;




    gap: 32px;




}









.nav-links li a {




    color: var(--text-dark);




    font-weight: 500;




    font-size: 0.92rem;




    position: relative;




    padding: 4px 0;




    letter-spacing: 0.01em;




}









.nav-links li a::after {




    content: '';




    position: absolute;




    bottom: -2px;




    left: 0;




    width: 0;




    height: 2px;




    background: var(--primary-color);




    transition: var(--transition-base);




}









.nav-links li a:hover {




    color: var(--primary-color);




}









.nav-links li a:hover::after {




    width: 100%;




}









.nav-links li a.active {




    color: var(--primary-color);




}









.nav-links li a.active::after {




    width: 100%;




}









.nav-buttons .btn {




    padding: 10px 22px;




    font-size: 0.88rem;




}









.mobile-menu-btn {




    display: none;




    background: none;




    border: none;




    font-size: 1.4rem;




    color: var(--primary-color);




    cursor: pointer;




    padding: 8px;




}









/* Mobile Menu Overlay */




.mobile-menu-overlay {




    position: fixed;




    top: 0;




    left: 0;




    width: 100%;




    height: 100vh;




    background: rgba(255, 255, 255, 0.98);




    backdrop-filter: blur(20px);




    z-index: 2000;




    display: flex;




    flex-direction: column;




    align-items: center;




    justify-content: center;




    gap: 0;




    opacity: 0;




    visibility: hidden;




    transition: var(--transition-slow);




}









.mobile-menu-overlay.active {




    opacity: 1;




    visibility: visible;




}









.mobile-menu-close {




    position: absolute;




    top: 20px;




    right: 24px;




    background: none;




    border: none;




    font-size: 2rem;




    color: var(--primary-color);




    cursor: pointer;




}









.mobile-menu-overlay .mobile-nav-links {




    text-align: center;




}









.mobile-menu-overlay .mobile-nav-links li {




    margin-bottom: 8px;




}









.mobile-menu-overlay .mobile-nav-links li a {




    font-size: 1.6rem;




    font-weight: 700;




    color: var(--primary-color);




    font-family: var(--font-heading);




    padding: 12px 0;




    display: block;




    transition: var(--transition-base);




}









.mobile-menu-overlay .mobile-nav-links li a:hover {




    color: var(--primary-light);




}









.mobile-menu-overlay .btn {




    margin-top: 24px;




}









/* --- Hero Section --- */




.hero {




    min-height: 92vh;




    background: linear-gradient(135deg, #f3f0f9 0%, #fff 100%);




    background-size: cover;




    background-position: center;




    position: relative;




    display: flex;




    align-items: center;




    padding-top: var(--header-height);




    overflow: hidden;




}









.hero-bg-overlay {




    position: absolute;




    top: 0;




    left: 0;




    width: 100%;




    height: 100%;




    background: linear-gradient(100deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.88) 45%, rgba(255, 255, 255, 0.15) 100%);




    z-index: 1;




}









.hero-container {




    position: relative;




    z-index: 2;




    display: flex;




    align-items: center;




    justify-content: space-between;




    width: 100%;




}









.hero-content {




    max-width: 580px;




    padding: 40px 0;




    color: var(--text-dark);




}









.hero h1 {




    font-size: 3.4rem;




    margin-bottom: 20px;




    line-height: 1.08;




    color: var(--primary-color);




}









.hero .highlight {




    color: #E6A800;




    position: relative;




    z-index: 1;




}









.hero .highlight::after {




    content: '';




    position: absolute;




    bottom: 4px;




    left: 0;




    width: 100%;




    height: 8px;




    background: rgba(255, 213, 79, 0.25);




    z-index: -1;




    border-radius: 4px;




}









.hero p {




    font-size: 1.1rem;




    margin-bottom: 28px;




    color: var(--text-muted);




    font-weight: 400;




    line-height: 1.7;




}









.hero-buttons {




    display: flex;




    gap: 12px;




    margin-bottom: 36px;




}









.trust-indicators {




    display: flex;




    gap: 28px;




    padding-top: 24px;




    border-top: 1px solid rgba(62, 35, 108, 0.08);




}









.trust-item {




    display: flex;




    align-items: center;




    gap: 8px;




    font-weight: 600;




    font-size: 0.9rem;




    color: var(--text-dark);




}









.trust-item i {




    color: var(--accent-green);




    font-size: 1rem;




}









/* Hero Visual */




.hero-visual {




    position: relative;




    width: 42%;




    height: 420px;




    display: none;




}









@media (min-width: 992px) {




    .hero-visual {




        display: block;




    }




}









.floating-card {




    position: absolute;




    background: white;




    padding: 14px 20px;




    border-radius: var(--radius-md);




    box-shadow: var(--shadow-lg);




    display: flex;




    align-items: center;




    gap: 14px;




    animation: float 5s ease-in-out infinite;




    z-index: 3;




}









.floating-card h5 {




    margin: 0;




    font-size: 0.95rem;




    color: var(--text-dark);




}









.floating-card small {




    color: var(--text-muted);




    font-size: 0.8rem;




}









.active-card {




    top: 18%;




    right: 8%;




}









.happy-card {




    bottom: 18%;




    left: -2%;




    animation-delay: 2.5s;




}









.icon-circle {




    width: 42px;




    height: 42px;




    background: var(--bg-soft-purple);




    color: var(--primary-color);




    border-radius: var(--radius-sm);




    display: flex;




    align-items: center;




    justify-content: center;




    font-size: 1.1rem;




}









@keyframes float {









    0%,




    100% {




        transform: translateY(0);




    }









    50% {




        transform: translateY(-12px);




    }




}









/* Shapes */




.shape {




    position: absolute;




    border-radius: 50%;




    opacity: 0.07;




    z-index: 0;




}









.shape-1 {




    width: 320px;




    height: 320px;




    background: var(--primary-color);




    top: -60px;




    right: -60px;




}









.shape-2 {




    width: 200px;




    height: 200px;




    background: var(--accent-yellow);




    bottom: 60px;




    left: -50px;




}









/* Wave Divider */




.custom-shape-divider-bottom-1680000000 {




    position: absolute;




    bottom: 0;




    left: 0;




    width: 100%;




    overflow: hidden;




    line-height: 0;




    z-index: 2;




}









.custom-shape-divider-bottom-1680000000 svg {




    position: relative;




    display: block;




    width: calc(100% + 1.3px);




    height: 50px;




}









.custom-shape-divider-bottom-1680000000 .shape-fill {




    fill: #FFFFFF;




}









/* --- Features Section --- */




.features {




    background: var(--bg-white);




}









.features-grid {




    display: grid;




    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));




    gap: 24px;




}









.feature-card {




    background: var(--bg-white);




    padding: 36px 28px;




    border-radius: var(--radius-md);




    text-align: center;




    border: 1px solid rgba(62, 35, 108, 0.06);




    transition: var(--transition-base);




    position: relative;




}









.feature-card::before {




    content: '';




    position: absolute;




    top: 0;




    left: 50%;




    transform: translateX(-50%);




    width: 40px;




    height: 3px;




    background: var(--accent-yellow);




    border-radius: 0 0 2px 2px;




    transition: var(--transition-base);




    opacity: 0;




}









.feature-card:hover {




    transform: translateY(-6px);




    box-shadow: var(--shadow-md);




    border-color: transparent;




}









.feature-card:hover::before {




    opacity: 1;




    width: 60px;




}









.icon-box {




    width: 64px;




    height: 64px;




    background: var(--bg-soft-purple);




    color: var(--primary-color);




    border-radius: var(--radius-sm);




    display: flex;




    align-items: center;




    justify-content: center;




    font-size: 1.6rem;




    margin: 0 auto 20px;




    transition: var(--transition-base);




}









.feature-card:hover .icon-box {




    background: var(--primary-color);




    color: var(--text-light);




}









.feature-card h3 {




    font-size: 1.15rem;




    margin-bottom: 10px;




}









.feature-card p {




    color: var(--text-muted);




    font-size: 0.92rem;




    line-height: 1.6;




}









/* --- Programs Section --- */




.programs {




    background: var(--bg-light);




    position: relative;




    overflow: hidden;




}









.programs::before {




    content: '';




    position: absolute;




    top: -100px;




    right: -100px;




    width: 500px;




    height: 500px;




    background: radial-gradient(circle, rgba(129, 212, 250, 0.08) 0%, transparent 70%);




    border-radius: 50%;




    z-index: 0;




}









.programs-grid {




    display: grid;




    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));




    gap: 32px;




    padding: 10px 4px;




    position: relative;




    z-index: 1;




}









.program-card {




    background: var(--bg-white);




    border-radius: var(--radius-lg);




    overflow: hidden;




    box-shadow: var(--shadow-sm);




    transition: var(--transition-base);




    border: 1px solid rgba(62, 35, 108, 0.04);




    display: flex;




    flex-direction: column;




}









.program-card:hover {




    transform: translateY(-8px);




    box-shadow: var(--shadow-lg);




}









.program-img-wrapper {




    height: 240px;




    width: 100%;




    position: relative;




    overflow: hidden;




}









.program-img-wrapper img {




    width: 100%;




    height: 100%;




    object-fit: cover;




    transition: transform 0.6s ease;




}









.program-card:hover .program-img-wrapper img {




    transform: scale(1.06);




}









.program-overlay {




    position: absolute;




    top: 0;




    left: 0;




    width: 100%;




    height: 100%;




    background: linear-gradient(0deg, rgba(42, 22, 76, 0.5) 0%, transparent 60%);




    opacity: 0.5;




    transition: var(--transition-base);




}









.program-card:hover .program-overlay {




    opacity: 0.3;




}









.program-content {




    padding: 28px 24px;




    flex-grow: 1;




    display: flex;




    flex-direction: column;




}









.program-header {




    display: flex;




    justify-content: space-between;




    align-items: flex-start;




    margin-bottom: 12px;




    flex-wrap: wrap;




    gap: 8px;




}









.program-content h4 {




    color: var(--primary-color);




    font-size: 1.35rem;




    font-weight: 800;




    margin: 0;




    width: 100%;




}









.age-badge {




    display: inline-flex;




    align-items: center;




    background: var(--bg-soft-purple);




    color: var(--primary-color);




    padding: 4px 12px;




    border-radius: var(--radius-sm);




    font-size: 0.78rem;




    font-weight: 700;




    letter-spacing: 0.5px;




}









.program-desc {




    color: var(--text-muted);




    font-size: 0.95rem;




    line-height: 1.65;




    margin-bottom: 20px;




    flex-grow: 1;




}









.program-features {




    margin-bottom: 20px;




    padding-top: 16px;




    border-top: 1px solid rgba(62, 35, 108, 0.06);




}









.program-features li {




    display: flex;




    align-items: center;




    gap: 8px;




    margin-bottom: 6px;




    color: var(--text-dark);




    font-size: 0.9rem;




    font-weight: 500;




}









.program-features li i {




    color: var(--accent-green);




    font-size: 0.95rem;




}









.btn-link {




    color: var(--primary-color);




    font-weight: 700;




    font-size: 0.92rem;




    display: inline-flex;




    align-items: center;




    gap: 6px;




    margin-top: auto;




    width: fit-content;




    padding: 6px 0;




    position: relative;




}









.btn-link::after {




    content: '';




    position: absolute;




    bottom: 0;




    left: 0;




    width: 0;




    height: 2px;




    background: var(--accent-yellow);




    transition: var(--transition-base);




}









.btn-link:hover::after {




    width: 100%;




}









.btn-link i {




    transition: var(--transition-fast);




}









.btn-link:hover i {




    transform: translateX(4px);




}









/* --- Activities Section --- */




.activities {




    background: var(--bg-white);




}









.activities-wrapper {




    display: grid;




    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));




    gap: 24px;




    max-width: 900px;




    margin: 0 auto;




}









.activity-item {




    display: flex;




    flex-direction: column;




    align-items: center;




    text-align: center;




    padding: 24px 12px;




    border-radius: var(--radius-md);




    transition: var(--transition-base);




}









.activity-item:hover {




    transform: translateY(-6px);




    background: var(--bg-soft-purple);




}









.activity-item i {




    width: 64px;




    height: 64px;




    background: var(--bg-soft-purple);




    border-radius: var(--radius-sm);




    display: flex;




    align-items: center;




    justify-content: center;




    font-size: 1.6rem;




    color: var(--primary-color);




    margin-bottom: 14px;




    transition: var(--transition-base);




}









.activity-item:hover i {




    background: var(--primary-color);




    color: white;




}









.activity-item span {




    font-weight: 600;




    color: var(--text-dark);




    font-size: 0.9rem;




}









/* --- Safety Section --- */




.safety {




    background: var(--bg-light);




}









.safety-row {




    display: flex;




    align-items: center;




    gap: 60px;




    flex-wrap: wrap;




}









.col-text {




    flex: 1;




    min-width: 300px;




}









.col-img {




    flex: 1;




    min-width: 300px;




}









.col-text h2 {




    margin-bottom: 16px;




    font-size: 2.2rem;




}









.safety-list {




    list-style: none;




    margin-top: 28px;




}









.safety-list li {




    display: flex;




    align-items: center;




    gap: 16px;




    margin-bottom: 18px;




    font-size: 1rem;




    color: var(--text-dark);




    font-weight: 500;




}









.safety-list li i {




    color: var(--primary-color);




    font-size: 1.1rem;




    width: 36px;




    height: 36px;




    background: var(--bg-soft-purple);




    border-radius: var(--radius-sm);




    display: flex;




    align-items: center;




    justify-content: center;




    flex-shrink: 0;




}









/* --- Testimonials --- */




.testimonials {




    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);




}









.testimonials .section-header h2 {




    color: white;




}









.testimonials .section-header p {




    color: rgba(255, 255, 255, 0.75);




}









.testimonials .heading-line {




    background: var(--accent-yellow);




}









.testimonial-grid {




    display: grid;




    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));




    gap: 24px;




}









.testimonial-card {




    background: white;




    color: var(--text-dark);




    padding: 32px;




    border-radius: var(--radius-md);




    position: relative;




    transition: var(--transition-base);




}









.testimonial-card:hover {




    transform: translateY(-4px);




    box-shadow: var(--shadow-lg);




}









.quote-icon {




    font-size: 1.6rem;




    color: var(--accent-yellow);




    margin-bottom: 16px;




}









.testimonial-card p {




    font-style: italic;




    color: var(--text-muted);




    margin-bottom: 20px;




    line-height: 1.7;




    font-size: 0.95rem;




}









.parent-info {




    display: flex;




    align-items: center;




    gap: 14px;




}









.parent-img {




    width: 44px;




    height: 44px;




    border-radius: var(--radius-sm);




    background-color: var(--bg-soft-purple);




    flex-shrink: 0;




}









.parent-info h5 {




    margin-bottom: 2px;




    font-weight: 700;




    color: var(--primary-color);




    font-size: 0.95rem;




}









.parent-info small {




    font-size: 0.82rem;




    color: #888;




}









/* --- CTA Banner --- */




.cta-banner {




    padding: 100px 0;




    background:
        linear-gradient(135deg, rgba(42, 22, 76, 0.92) 0%, rgba(62, 35, 108, 0.86) 100%),
        radial-gradient(circle at top left, rgba(255, 213, 79, 0.18), transparent 40%),
        radial-gradient(circle at bottom right, rgba(129, 212, 250, 0.14), transparent 42%);




    background-attachment: fixed;




    position: relative;




    display: flex;




    align-items: center;




    justify-content: center;




}









.cta-banner::before {




    content: '';




    position: absolute;




    inset: 0;




    background: linear-gradient(135deg, rgba(42, 22, 76, 0.92) 0%, rgba(62, 35, 108, 0.85) 100%);




    z-index: 1;




}









.cta-card {




    position: relative;




    z-index: 2;




    background: rgba(255, 255, 255, 0.08);




    backdrop-filter: blur(16px);




    border: 1px solid rgba(255, 255, 255, 0.12);




    border-radius: var(--radius-lg);




    padding: 56px;




    text-align: center;




    max-width: 840px;




    margin: 0 auto;




    overflow: hidden;




}









.cta-content {




    position: relative;




    z-index: 2;




}









.cta-badge {




    display: inline-block;




    background: var(--accent-yellow);




    color: var(--primary-dark);




    padding: 5px 14px;




    border-radius: var(--radius-sm);




    font-weight: 700;




    font-size: 0.78rem;




    margin-bottom: 20px;




    text-transform: uppercase;




    letter-spacing: 1.5px;




}









.cta-banner h2 {




    color: white;




    font-size: 2.6rem;




    margin-bottom: 12px;




}









.highlight-text {




    color: var(--accent-blue);




    font-style: italic;




}









.cta-banner p {




    color: rgba(255, 255, 255, 0.9);




    font-size: 1.1rem;




    margin-bottom: 32px;




    max-width: 600px;




    margin-left: auto;




    margin-right: auto;




}









.cta-actions {




    display: flex;




    justify-content: center;




    gap: 16px;




    flex-wrap: wrap;




}









.cta-visual .floating-icon {




    position: absolute;




    color: rgba(255, 255, 255, 0.06);




    font-size: 3.5rem;




    z-index: 0;




    animation: float-slow 7s ease-in-out infinite;




}









.cta-visual .icon-1 {




    top: 20px;




    left: 30px;




}









.cta-visual .icon-2 {




    bottom: 20px;




    right: 30px;




    animation-delay: 2.3s;




}









.cta-visual .icon-3 {




    top: -20px;




    right: 20%;




    font-size: 5rem;




    animation-delay: 4.5s;




}









@keyframes float-slow {









    0%,




    100% {




        transform: translateY(0);




    }









    50% {




        transform: translateY(-16px);




    }




}



















/* --- Gallery --- */




.gallery-grid {




    display: grid;




    grid-template-columns: repeat(3, 1fr);




    gap: 16px;




}









.gallery-item {




    height: 220px;




    border-radius: var(--radius-md);




    cursor: pointer;




    background-size: cover;




    background-position: center;




    position: relative;




    overflow: hidden;




    transition: var(--transition-base);




}









.gallery-item:hover {




    transform: scale(1.02);




    box-shadow: var(--shadow-md);




}









/* --- Footer --- */




.footer {




    background: var(--primary-dark);




    color: white;




    padding: 72px 0 20px;




}









.footer-grid {




    display: grid;




    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));




    gap: 40px;




    margin-bottom: 48px;




}









.footer h3,




.footer h4 {




    color: white;




    margin-bottom: 18px;




}









.footer h3 {




    font-size: 1.3rem;




}









.footer p {




    color: rgba(255, 255, 255, 0.65);




    font-size: 0.95rem;




    line-height: 1.6;




}









.social-links {




    margin-top: 20px;




    display: flex;




    gap: 10px;




}









.social-links a {




    width: 38px;




    height: 38px;




    background: rgba(255, 255, 255, 0.08);




    display: flex;




    align-items: center;




    justify-content: center;




    border-radius: var(--radius-sm);




    color: rgba(255, 255, 255, 0.7);




    transition: var(--transition-base);




    font-size: 0.9rem;




}









.social-links a:hover {




    background: var(--accent-yellow);




    color: var(--primary-dark);




}









.footer ul li {




    margin-bottom: 10px;




}









.footer ul li a {




    color: rgba(255, 255, 255, 0.65);




    font-size: 0.92rem;




}









.footer ul li a:hover {




    color: var(--accent-yellow);




}









.contact-info li {




    display: flex;




    gap: 10px;




    color: rgba(255, 255, 255, 0.65);




    font-size: 0.92rem;




}









.contact-info li i {




    color: var(--accent-yellow);




    margin-top: 4px;




    flex-shrink: 0;




}









.footer-bottom {




    border-top: 1px solid rgba(255, 255, 255, 0.08);




    padding-top: 20px;




    color: rgba(255, 255, 255, 0.4);




    font-size: 0.85rem;




}









/* --- Animations --- */




.fade-in-up {




    opacity: 0;




    transform: translateY(24px);




    transition: opacity 0.6s ease, transform 0.6s ease;




}









.fade-in-up.visible {




    opacity: 1;




    transform: translateY(0);




}









.delay-1 {




    transition-delay: 0.15s;




}









.delay-2 {




    transition-delay: 0.3s;




}









.hero .fade-in-up,




.about-hero-new .fade-in-up,




.admissions-hero .fade-in-up,




.programs-hero .fade-in-up {




    opacity: 1;




    transform: none;




    animation: fadeInUp 0.7s ease forwards;




}









@keyframes fadeInUp {




    from {




        opacity: 0;




        transform: translateY(24px);




    }









    to {




        opacity: 1;




        transform: translateY(0);




    }




}









.reveal {




    opacity: 0;




    transform: translateY(30px);




    transition: opacity 0.7s ease, transform 0.7s ease;




}









.reveal.revealed {




    opacity: 1;




    transform: translateY(0);




}









/* --- Base Responsive --- */




@media (max-width: 992px) {




    .hero h1 {




        font-size: 2.8rem;




    }









    .section {




        padding: 80px 0;




    }









    .section-header h2 {




        font-size: 2rem;




    }




}









@media (max-width: 768px) {
    .nav-links {
        display: none;
    }
    .nav-buttons {
        display: flex;
        order: 2;
        margin-left: auto;
        margin-right: 15px;
    }
    .nav-buttons .btn {
        padding: 8px 16px;
        font-size: 0.85rem;
    }
    .logo {
        order: 1;
    }
    .mobile-menu-btn {
        display: flex;
        order: 3;
    }









    .hero {




        min-height: 80vh;




    }









    .hero h1 {




        font-size: 2.2rem;




    }









    .hero-buttons {




        flex-direction: column;




    }









    .btn-lg {




        width: 100%;




        text-align: center;




    }









    .section {




        padding: 64px 0;




    }









    .section-header h2 {




        font-size: 1.8rem;




    }









    .section-header {




        margin-bottom: 40px;




    }









    .programs-grid {




        grid-template-columns: 1fr;




    }









    .gallery-grid {




        grid-template-columns: 1fr;




    }









    .safety-row {




        flex-direction: column;




        gap: 32px;




    }









    .trust-indicators {




        flex-wrap: wrap;




        gap: 16px;




    }









    .cta-banner h2 {




        font-size: 1.8rem;




    }









    .cta-card {




        padding: 32px 20px;




    }









    .cta-actions {




        flex-direction: column;




    }









    .cta-actions .btn {




        width: 100%;




    }









    .footer-grid {




        grid-template-columns: 1fr;




        gap: 32px;




    }




}









@media (max-width: 480px) {




    .hero h1 {




        font-size: 1.9rem;




    }









    .container {




        padding: 0 16px;




    }









    .activities-wrapper {




        grid-template-columns: repeat(2, 1fr);




    }









    .gallery-grid {




        grid-template-columns: 1fr;




    }




}









/* =============================================




   CONTACT PAGE STYLES




   ============================================= */




.page-header {




    margin-top: var(--header-height);




    background: linear-gradient(135deg, var(--bg-soft-purple) 0%, #fff 100%);




    padding: 56px 0;




}









.page-header h1 {




    font-size: 2.8rem;




    margin-bottom: 8px;




    color: var(--primary-color);




}









.page-header p {




    font-size: 1.1rem;




    color: var(--text-muted);




    max-width: 560px;




    margin: 0 auto;




}









.contact-wrapper {




    display: flex;




    gap: 32px;




    flex-wrap: wrap;




}









.contact-info-card,




.contact-form-card {




    flex: 1;




    min-width: 300px;




    background: white;




    padding: 36px;




    border-radius: var(--radius-md);




    box-shadow: var(--shadow-sm);




    border: 1px solid rgba(62, 35, 108, 0.04);




}









.contact-info-card {




    background: var(--bg-soft-purple);




    border: none;




}









.contact-info-card h3,




.contact-form-card h3 {




    margin-bottom: 16px;




    font-size: 1.6rem;




}









.contact-details {




    list-style: none;




    margin-top: 28px;




}









.contact-details li {




    display: flex;




    gap: 14px;




    margin-bottom: 24px;




}









.icon-circle-small {




    width: 40px;




    height: 40px;




    background: white;




    border-radius: var(--radius-sm);




    display: flex;




    align-items: center;




    justify-content: center;




    color: var(--primary-color);




    box-shadow: var(--shadow-xs);




    font-size: 0.95rem;




    flex-shrink: 0;




}









.contact-details h5 {




    margin: 0 0 4px 0;




    font-size: 1rem;




    color: var(--primary-dark);




}









.contact-details p {




    margin: 0;




    color: var(--text-muted);




    font-size: 0.92rem;




}









.social-connect {




    margin-top: 36px;




}









.social-connect h4 {




    margin-bottom: 12px;




    color: var(--primary-dark);




}









.form-group {




    margin-bottom: 18px;




}









.form-row {




    display: flex;




    gap: 16px;




}









.form-row .form-group {




    flex: 1;




}









.form-group label {




    display: block;




    margin-bottom: 6px;




    font-weight: 600;




    color: var(--text-dark);




    font-size: 0.88rem;




    letter-spacing: 0.02em;




}









.form-group input,




.form-group select,




.form-group textarea {




    width: 100%;




    padding: 11px 14px;




    border: 1px solid rgba(62, 35, 108, 0.1);




    border-radius: var(--radius-sm);




    font-family: var(--font-body);




    font-size: 0.95rem;




    transition: var(--transition-base);




    background: var(--bg-light);




}









.form-group input:focus,




.form-group select:focus,




.form-group textarea:focus {




    outline: none;




    border-color: var(--primary-color);




    box-shadow: 0 0 0 3px rgba(62, 35, 108, 0.06);




    background: white;




}









.map-container {




    border-radius: var(--radius-md);




    overflow: hidden;




    box-shadow: var(--shadow-md);




}









@media (max-width: 768px) {




    .page-header h1 {




        font-size: 2rem;




    }









    .form-row {




        flex-direction: column;




        gap: 0;




    }









    .contact-wrapper {




        flex-direction: column;




    }




}









/* =============================================




   ADMISSIONS PAGE STYLES




   ============================================= */




.admissions-hero {




    height: 65vh;




    min-height: 480px;




    background: url("../images/image-assets/hero-classroom.jpg") no-repeat center center/cover;




    background-blend-mode: overlay;




    position: relative;




    display: flex;




    align-items: center;




    justify-content: center;




    margin-top: var(--header-height);




}









.hero-bg-overlay-dark {




    position: absolute;




    inset: 0;




    background: linear-gradient(135deg, rgba(42, 22, 76, 0.75), rgba(62, 35, 108, 0.6));




    z-index: 1;




}









.hero-content-centered {




    position: relative;




    z-index: 2;




    color: white;




    max-width: 720px;




    margin: 0 auto;




}









.hero-content-centered h1 {




    font-size: 3.2rem;




    margin-bottom: 16px;




    color: white;




}









.highlight-text-yellow {




    color: var(--accent-yellow);




    font-style: italic;




}









.hero-content-centered p {




    font-size: 1.15rem;




    color: rgba(255, 255, 255, 0.92);




    margin-bottom: 36px;




}









.hero-buttons-centered {




    display: flex;




    justify-content: center;




    gap: 16px;




}









.process-section-premium {




    padding: 100px 0;




    background: #fff;




}









.process-timeline {




    display: flex;




    justify-content: space-between;




    position: relative;




    margin-top: 56px;




}









.process-timeline::before {




    content: '';




    position: absolute;




    top: 40px;




    left: 50px;




    right: 50px;




    height: 2px;




    background: rgba(62, 35, 108, 0.08);




    z-index: 0;




}









.timeline-item {




    position: relative;




    z-index: 1;




    text-align: center;




    flex: 1;




    padding: 0 12px;




}









.timeline-icon {




    width: 72px;




    height: 72px;




    background: white;




    border: 2px solid var(--accent-blue);




    border-radius: var(--radius-md);




    display: flex;




    align-items: center;




    justify-content: center;




    margin: 0 auto 20px;




    color: var(--primary-color);




    font-size: 1.6rem;




    transition: var(--transition-base);




    box-shadow: var(--shadow-sm);




}









.step-num {




    position: absolute;




    top: -4px;




    right: -4px;




    background: var(--primary-color);




    color: white;




    width: 22px;




    height: 22px;




    border-radius: var(--radius-sm);




    font-size: 0.7rem;




    display: flex;




    align-items: center;




    justify-content: center;




    font-weight: 700;




}









.timeline-item:hover .timeline-icon {




    background: var(--primary-color);




    color: white;




    transform: translateY(-4px);




    border-color: var(--primary-color);




    box-shadow: var(--shadow-md);




}









.timeline-content h3 {




    font-size: 1.1rem;




    margin-bottom: 8px;




    color: var(--text-dark);




}









.timeline-content p {




    font-size: 0.88rem;




    color: var(--text-muted);




}









.criteria-section-premium {




    padding: 80px 0;




    background: var(--bg-light);




}









.criteria-grid {




    display: grid;




    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));




    gap: 20px;




    margin-top: 36px;




}









.criteria-card {




    background: white;




    padding: 28px 18px;




    border-radius: var(--radius-md);




    text-align: center;




    box-shadow: var(--shadow-xs);




    border-top: 3px solid transparent;




    transition: var(--transition-base);




}









.criteria-card:hover {




    transform: translateY(-6px);




    box-shadow: var(--shadow-md);




}









.criteria-card h4 {




    font-size: 1.1rem;




    margin: 12px 0 4px;




    color: var(--text-dark);




}









.age-display {




    display: inline-block;




    background: var(--bg-light);




    padding: 4px 10px;




    border-radius: var(--radius-sm);




    font-size: 0.85rem;




    font-weight: 700;




    color: var(--primary-color);




    margin-bottom: 12px;




}









.criteria-card p {




    font-size: 0.82rem;




    color: var(--text-muted);




}









.card-purple {




    border-color: #BA68C8;




}









.card-purple .icon-box-small {




    color: #BA68C8;




    background: #F3E5F5;




}









.card-blue {




    border-color: #4FC3F7;




}









.card-blue .icon-box-small {




    color: #4FC3F7;




    background: #E1F5FE;




}









.card-green {




    border-color: #81C784;




}









.card-green .icon-box-small {




    color: #81C784;




    background: #E8F5E9;




}









.card-yellow {




    border-color: #FFD54F;




}









.card-yellow .icon-box-small {




    color: #FFD54F;




    background: #FFF8E1;




}









.card-red {




    border-color: #E57373;




}









.card-red .icon-box-small {




    color: #E57373;




    background: #FFEBEE;




}









.icon-box-small {




    width: 48px;




    height: 48px;




    border-radius: var(--radius-sm);




    margin: 0 auto;




    display: flex;




    align-items: center;




    justify-content: center;




    font-size: 1.1rem;




}









.enquiry-split {




    padding: 100px 0;




}









.split-wrapper {




    display: flex;




    gap: 48px;




    align-items: flex-start;




    flex-wrap: wrap;




}









.docs-side {




    flex: 0.8;




    min-width: 300px;




}









.form-side {




    flex: 1.2;




    min-width: 300px;




}









.docs-list-premium {




    list-style: none;




    margin-top: 28px;




}









.docs-list-premium li {




    display: flex;




    gap: 16px;




    margin-bottom: 22px;




}









.docs-list-premium li i {




    font-size: 1.3rem;




    color: var(--accent-green);




    margin-top: 4px;




    flex-shrink: 0;




}









.docs-list-premium h6,




.docs-list-premium strong {




    display: block;




    font-size: 1.05rem;




    color: var(--primary-color);




    margin-bottom: 4px;




}









.docs-list-premium span {




    font-size: 0.92rem;




    color: var(--text-muted);




}









.info-note {




    background: var(--bg-soft-purple);




    padding: 18px;




    border-radius: var(--radius-md);




    display: flex;




    gap: 12px;




    align-items: center;




    color: var(--primary-color);




    margin-top: 28px;




    font-size: 0.92rem;




}









.admission-form-card {




    background: white;




    padding: 36px;




    border-radius: var(--radius-md);




    box-shadow: var(--shadow-md);




    border: 1px solid rgba(62, 35, 108, 0.04);




}









.form-header {




    margin-bottom: 28px;




}









.form-header h3 {




    font-size: 1.6rem;




    margin-bottom: 4px;




}









.why-choose-bg {




    background: linear-gradient(135deg, var(--bg-soft-purple) 0%, #fff 100%);




    padding: 100px 0;




}









.features-grid-iconless {




    display: grid;




    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));




    gap: 24px;




    margin-top: 48px;




}









.feature-box {




    background: white;




    padding: 28px;




    border-radius: var(--radius-md);




    box-shadow: var(--shadow-xs);




    transition: var(--transition-base);




}









.feature-box:hover {




    transform: translateY(-4px);




    box-shadow: var(--shadow-sm);




}









.f-icon {




    font-size: 2rem;




    color: var(--primary-color);




    margin-bottom: 16px;




    opacity: 0.85;




}









.urgent-cta {




    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));




    padding: 56px 0;




    color: white;




    text-align: center;




}









.urgent-content h2 {




    color: white;




    margin-bottom: 8px;




}









.urgent-content p {




    color: rgba(255, 255, 255, 0.8);




    margin-bottom: 28px;




    font-size: 1.1rem;




}









@media (max-width: 768px) {




    .admissions-hero {




        height: auto;




        padding: 100px 0 56px;




    }









    .hero-content-centered h1 {




        font-size: 2.4rem;




    }









    .process-timeline {




        flex-direction: column;




        gap: 32px;




    }









    .process-timeline::before {




        display: none;




    }









    .split-wrapper {




        flex-direction: column;




    }









    .hero-buttons-centered {




        flex-direction: column;




    }




}









/* =============================================




   PROGRAMS PAGE STYLES




   ============================================= */




.programs-hero {




    height: 55vh;




    min-height: 420px;




    background: url("../images/image-assets/hero-playground.jpg") no-repeat center center/cover;




    position: relative;




    display: flex;




    align-items: center;




    margin-top: var(--header-height);




}









.hero-overlay-gradient {




    position: absolute;




    inset: 0;




    background: linear-gradient(100deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.15) 100%);




    z-index: 1;




}









.hero-content-programs {




    position: relative;




    z-index: 2;




    max-width: 600px;




}









.hero-content-programs h1 {




    font-size: 3rem;




    color: var(--primary-dark);




    margin-bottom: 16px;




    line-height: 1.12;




}









.highlight-text-blue {




    color: #039BE5;




    position: relative;




    display: inline-block;




}









.highlight-text-blue::after {




    content: '';




    position: absolute;




    bottom: 4px;




    left: 0;




    width: 100%;




    height: 8px;




    background: rgba(129, 212, 250, 0.25);




    z-index: -1;




}









.hero-content-programs p {




    font-size: 1.1rem;




    color: var(--text-muted);




    margin-bottom: 32px;




}









.shadow-lift {




    box-shadow: var(--shadow-md);




    transition: var(--transition-base);




}









.shadow-lift:hover {




    transform: translateY(-2px);




    box-shadow: var(--shadow-lg);




}









.philosophy-section {




    padding: 80px 0;




    background: #fff;




}









.philosophy-grid {




    display: grid;




    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));




    gap: 32px;




    margin-top: 56px;




}









.philosophy-item {




    text-align: center;




    padding: 20px;




}









.phil-icon {




    width: 68px;




    height: 68px;




    border-radius: var(--radius-md);




    display: flex;




    align-items: center;




    justify-content: center;




    font-size: 1.8rem;




    margin: 0 auto 20px;




    transition: var(--transition-base);




}









/* no rotate needed in new design */









.philosophy-item:hover .phil-icon {




    transform: scale(1.08);




}









.icon-yellow {




    background: #FFF8E1;




    color: #FFB300;




}









.icon-blue {




    background: #E1F5FE;




    color: #039BE5;




}









.icon-green {




    background: #E8F5E9;




    color: #43A047;




}









.icon-purple {




    background: #F3E5F5;




    color: #8E24AA;




}









.philosophy-item h4 {




    font-size: 1.1rem;




    margin-bottom: 8px;




    color: var(--text-dark);




}









.philosophy-item p {




    font-size: 0.92rem;




    color: var(--text-muted);




}









.programs-showcase-bg {




    background: var(--bg-light);




    padding: 100px 0;




}









.all-programs-grid {




    display: grid;




    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));




    gap: 32px;




    margin-top: 56px;




}









.program-detail-card {




    background: white;




    border-radius: var(--radius-md);




    overflow: hidden;




    box-shadow: var(--shadow-sm);




    transition: var(--transition-base);




    display: flex;




    flex-direction: column;




}









.program-detail-card:hover {




    transform: translateY(-6px);




    box-shadow: var(--shadow-lg);




}









.card-wide {




    grid-column: span 1;




}









@media (min-width: 992px) {




    .card-wide {




        grid-column: span 2;




    }




}









.prog-img-wrap {




    height: 230px;




    position: relative;




    overflow: hidden;




}









.prog-img-wrap img {




    width: 100%;




    height: 100%;




    object-fit: cover;




    transition: transform 0.5s ease;




}









.program-detail-card:hover .prog-img-wrap img {




    transform: scale(1.06);




}









.prog-age-badge {




    position: absolute;




    bottom: 0;




    right: 0;




    background: var(--primary-color);




    color: white;




    padding: 6px 16px;




    border-radius: var(--radius-md) 0 0 0;




    font-weight: 700;




    font-size: 0.85rem;




}









.prog-content {




    padding: 28px;




    flex-grow: 1;




    display: flex;




    flex-direction: column;




}









.prog-content h3 {




    font-size: 1.35rem;




    margin-bottom: 12px;




    color: var(--text-dark);




}









.prog-content p {




    color: var(--text-muted);




    font-size: 0.95rem;




    margin-bottom: 20px;




    line-height: 1.6;




}









.prog-focus-areas {




    display: flex;




    gap: 8px;




    flex-wrap: wrap;




    margin-bottom: 24px;




}









.prog-focus-areas span {




    background: var(--bg-soft-purple);




    color: var(--primary-color);




    padding: 4px 10px;




    border-radius: var(--radius-sm);




    font-size: 0.8rem;




    font-weight: 600;




    display: flex;




    align-items: center;




    gap: 4px;




}









.btn-link-styled {




    margin-top: auto;




    color: var(--primary-color);




    font-weight: 700;




    text-decoration: none;




    display: inline-flex;




    align-items: center;




    gap: 6px;




    transition: gap var(--transition-base);




    font-size: 0.92rem;




}









.btn-link-styled:hover {




    gap: 10px;




}









.day-timeline-section {




    padding: 100px 0;




    background: white;




}









.day-flow {




    display: flex;




    justify-content: center;




    align-items: flex-start;




    margin-top: 56px;




    flex-wrap: wrap;




}









.day-step {




    text-align: center;




    position: relative;




    width: 140px;




    margin-bottom: 24px;




}









.time-pill {




    background: var(--primary-color);




    color: white;




    padding: 3px 10px;




    border-radius: var(--radius-sm);




    font-size: 0.72rem;




    font-weight: 700;




    display: inline-block;




    margin-bottom: 12px;




}









.day-icon {




    width: 52px;




    height: 52px;




    background: white;




    border: 2px solid var(--accent-yellow);




    border-radius: var(--radius-sm);




    display: flex;




    align-items: center;




    justify-content: center;




    margin: 0 auto 12px;




    color: var(--accent-yellow);




    font-size: 1.1rem;




    position: relative;




    z-index: 1;




}









.day-step h5 {




    font-size: 0.92rem;




    color: var(--text-dark);




}









.day-connector {




    flex-grow: 1;




    height: 2px;




    background: rgba(62, 35, 108, 0.08);




    margin-top: 48px;




    min-width: 24px;




    max-width: 80px;




}









.safe-support-bg {




    padding: 100px 0;




    background: linear-gradient(135deg, #F3E5F5 0%, #fff 100%);




}









.align-center {




    align-items: center;




}









.lead-text {




    font-size: 1.1rem;




    color: var(--text-muted);




    margin-bottom: 36px;




}









.assurance-list {




    list-style: none;




}









.assurance-list li {




    display: flex;




    gap: 16px;




    margin-bottom: 22px;




}









.icon-check {




    width: 36px;




    height: 36px;




    background: white;




    border-radius: var(--radius-sm);




    color: var(--accent-green);




    display: flex;




    align-items: center;




    justify-content: center;




    box-shadow: var(--shadow-xs);




    flex-shrink: 0;




}









.col-visual {




    position: relative;




    flex: 1;




    min-width: 300px;




}









.visual-card-stack {




    position: relative;




    height: 380px;




    width: 100%;




}









.v-card {




    position: absolute;




    border-radius: var(--radius-lg);




    overflow: hidden;




    box-shadow: var(--shadow-lg);




}









.v-card-1 {




    width: 80%;




    height: 340px;




    top: 0;




    left: 0;




    z-index: 2;




}









.v-card-1 img {




    width: 100%;




    height: 100%;




    object-fit: cover;




}









.v-card-2 {




    width: 80%;




    height: 340px;




    top: 32px;




    left: 32px;




    background: var(--accent-yellow);




    z-index: 1;




    opacity: 0.25;




}









.urgent-cta-programs {




    background: url("../images/image-assets/gallery-snack.jpg") no-repeat center center/cover;




    position: relative;




    padding: 72px 0;




}









.urgent-cta-programs::before {




    content: '';




    position: absolute;




    inset: 0;




    background: rgba(42, 22, 76, 0.88);




}









.cta-content-wide {




    position: relative;




    z-index: 1;




    display: flex;




    justify-content: space-between;




    align-items: center;




    color: white;




    flex-wrap: wrap;




    gap: 24px;




}









.cta-content-wide h2 {




    color: white;




    margin-bottom: 8px;




    font-size: 2.2rem;




}









.cta-content-wide p {




    font-size: 1.1rem;




    color: rgba(255, 255, 255, 0.9);




    margin: 0;




}









.btn-white-pulse {




    background: white;




    color: var(--primary-color);




    font-weight: 700;




    padding: 14px 32px;




    border-radius: var(--radius-sm);




    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);




    animation: pulse-white 2.5s infinite;




    text-decoration: none;




    display: inline-flex;




    align-items: center;




    gap: 8px;




}









@keyframes pulse-white {




    0% {




        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);




    }









    70% {




        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);




    }









    100% {




        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);




    }




}









@media (max-width: 768px) {




    .hero-content-programs h1 {




        font-size: 2.4rem;




    }









    .day-connector {




        display: none;




    }









    .day-step {




        width: 100%;




        display: flex;




        align-items: center;




        gap: 16px;




        text-align: left;




    }









    .day-icon {




        margin: 0;




    }









    .time-pill {




        margin: 0;




        width: 72px;




        text-align: center;




    }









    .col-visual {




        display: none;




    }









    .cta-content-wide {




        text-align: center;




        justify-content: center;




    }




}









/* =============================================




   ABOUT PAGE STYLES




   ============================================= */




.about-hero {




    height: 50vh;




    min-height: 380px;




    background: url("../images/image-assets/gallery-snack.jpg") no-repeat center center/cover;




    position: relative;




    display: flex;




    align-items: center;




    margin-top: var(--header-height);




}









.hero-overlay-warm {




    position: absolute;




    inset: 0;




    background: linear-gradient(135deg, rgba(42, 22, 76, 0.72), rgba(255, 167, 38, 0.35));




    z-index: 1;




}









.hero-content-about {




    position: relative;




    z-index: 2;




    color: white;




    max-width: 640px;




}









.hero-content-about h1 {




    font-size: 2.8rem;




    color: white;




    margin-bottom: 16px;




}









.hero-content-about p {




    font-size: 1.1rem;




    color: rgba(255, 255, 255, 0.92);




    font-weight: 400;




}









/* --- New About Hero Design --- */




.about-hero-new {




    padding: 100px 0;




    margin-top: var(--header-height);




    background: linear-gradient(135deg, #FFFDE7 0%, #E0F2F1 50%, #F3E5F5 100%);




    position: relative;




    overflow: hidden;




}









.hero-grid {




    display: grid;




    grid-template-columns: 1fr 1fr;




    gap: 60px;




    align-items: center;




}









.hero-text {




    max-width: 540px;




}









.badge-about {




    display: inline-block;




    background: #E0F2F1;




    color: #00796B;




    padding: 6px 16px;




    border-radius: var(--radius-pill);




    font-weight: 700;




    font-size: 0.85rem;




    margin-bottom: 24px;




}









.hero-text h1 {




    font-size: 3.5rem;




    color: var(--primary-dark);




    margin-bottom: 24px;




    line-height: 1.1;




    font-weight: 800;




}









.highlight-blue {




    color: #039BE5;




}









.hero-text p {




    font-size: 1.1rem;




    color: var(--text-muted);




    margin-bottom: 36px;




    line-height: 1.7;




}









.trust-markers {




    display: flex;




    gap: 32px;




}









.trust-marker {




    display: flex;




    gap: 12px;




    align-items: center;




}









.tm-icon {




    width: 48px;




    height: 48px;




    border-radius: var(--radius-md);




    display: flex;




    align-items: center;




    justify-content: center;




    font-size: 1.2rem;




}









.tm-icon.green-bg {




    background: #E8F5E9;




    color: #43A047;




}









.tm-icon.orange-bg {




    background: #FFF3E0;




    color: #FB8C00;




}









.tm-content strong {




    display: block;




    color: var(--primary-dark);




    font-size: 1rem;




    font-weight: 700;




}









.tm-content span {




    font-size: 0.8rem;




    color: var(--text-muted);




}









/* Image Collage */




.hero-collage {




    position: relative;




    z-index: 1;




}









.collage-grid {




    display: grid;




    grid-template-columns: 1fr 1fr;




    gap: 20px;




    max-width: 500px;




    margin-left: auto;




}









.collage-item {




    border-radius: var(--radius-lg);




    overflow: hidden;




    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);




    aspect-ratio: 1/1;




}









.collage-item img {




    width: 100%;




    height: 100%;




    object-fit: cover;




    transition: transform 0.5s ease;




}









.collage-item:hover img {




    transform: scale(1.08);




}









.item-1 {




    margin-top: 0;




}









.item-2 {




    margin-top: 40px;




}









.item-3 {




    margin-top: -40px;




}









.item-4 {




    margin-top: 0;




}









@media (max-width: 992px) {




    .hero-grid {




        grid-template-columns: 1fr;




        gap: 48px;




        text-align: center;




    }









    .hero-text {




        margin: 0 auto;




    }









    .trust-markers {




        justify-content: center;




    }









    .collage-grid {




        margin: 0 auto;




    }









    .hero-text h1 {




        font-size: 2.8rem;




    }




}









@media (max-width: 480px) {




    .trust-markers {




        flex-direction: column;




        gap: 20px;




        align-items: center;




    }




}









.vision-mission-bg {




    padding: 80px 0;




    background: transparent;




    margin-top: -48px;




    position: relative;




    z-index: 3;




}









.vision-mission-grid {




    display: flex;




    gap: 24px;




    flex-wrap: wrap;




}









.vm-card {




    flex: 1;




    min-width: 300px;




    background: white;




    padding: 36px;




    border-radius: var(--radius-md);




    box-shadow: var(--shadow-md);




    position: relative;




    overflow: hidden;




    transition: var(--transition-base);




}









.vm-card:hover {




    transform: translateY(-4px);




}









.vision-card {




    border-top: 3px solid var(--primary-color);




}









.mission-card {




    border-top: 3px solid var(--accent-yellow);




}









.vm-icon {




    width: 52px;




    height: 52px;




    border-radius: var(--radius-sm);




    display: flex;




    align-items: center;




    justify-content: center;




    font-size: 1.3rem;




    margin-bottom: 18px;




}









.vision-card .vm-icon {




    background: var(--bg-soft-purple);




    color: var(--primary-color);




}









.mission-card .vm-icon {




    background: #FFF8E1;




    color: var(--accent-yellow);




}









.vm-card h3 {




    font-size: 1.3rem;




    margin-bottom: 12px;




    color: var(--text-dark);




}









.vm-card p {




    color: var(--text-muted);




    line-height: 1.65;




    font-size: 0.95rem;




}









.philosophy-summary {




    padding: 80px 0;




    background: var(--bg-light);




}









.row-flex {




    display: flex;




    gap: 48px;




    flex-wrap: wrap;




}









.gap-50 {




    gap: 48px;




}









.phil-list-grid {




    display: grid;




    grid-template-columns: repeat(2, 1fr);




    gap: 20px;




}









.phil-list-item {




    display: flex;




    gap: 14px;




}









.phil-list-item i {




    width: 36px;




    height: 36px;




    background: var(--bg-soft-purple);




    color: var(--primary-color);




    border-radius: var(--radius-sm);




    display: flex;




    align-items: center;




    justify-content: center;




    font-size: 0.95rem;




    flex-shrink: 0;




    margin-top: 2px;




}









.phil-list-item h5 {




    font-size: 1rem;




    margin-bottom: 4px;




    color: var(--text-dark);




}









.phil-list-item p {




    font-size: 0.88rem;




    color: var(--text-muted);




}









.image-frame-organic {




    border-radius: var(--radius-lg);




    overflow: hidden;




    box-shadow: var(--shadow-lg);




    position: relative;




}









.image-frame-organic img {




    width: 100%;




    display: block;




}









.floating-badge {




    position: absolute;




    bottom: 20px;




    right: 20px;




    background: white;




    padding: 10px 16px;




    border-radius: var(--radius-sm);




    box-shadow: var(--shadow-md);




    display: flex;




    align-items: center;




    gap: 8px;




    font-weight: 700;




    color: var(--primary-color);




    font-size: 0.85rem;




}









.floating-badge i {




    color: var(--accent-yellow);




}









.educators-section {




    padding: 80px 0;




    background: white;




}









.educators-grid {




    display: grid;




    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));




    gap: 28px;




    margin-top: 48px;




}









.educator-card {




    text-align: center;




    background: var(--bg-light);




    border-radius: var(--radius-md);




    padding: 32px 20px;




    transition: var(--transition-base);




}









.educator-card:hover {




    transform: translateY(-6px);




    box-shadow: var(--shadow-md);




}









.educator-card img {




    width: 100px;




    height: 100px;




    border-radius: var(--radius-sm);




    object-fit: cover;




    margin: 0 auto 18px;




    border: 3px solid white;




    box-shadow: var(--shadow-sm);




}









.educator-card h4 {




    font-size: 1.1rem;




    margin-bottom: 4px;




    color: var(--text-dark);




}









.educator-card .role {




    color: var(--primary-color);




    font-weight: 600;




    font-size: 0.85rem;




    margin-bottom: 10px;




    display: block;




}









.educator-card p {




    font-size: 0.88rem;




    color: var(--text-muted);




}









/* --- Corporate Solutions Styles --- */




.corporate-solutions-section {




    padding: 100px 0;




    background: var(--bg-soft-purple);




}









.service-models-grid {




    display: grid;




    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));




    gap: 30px;




    margin: 50px 0 80px;




}









.model-card {




    background: var(--bg-white);




    padding: 40px 30px;




    border-radius: var(--radius-lg);




    text-align: center;




    transition: var(--transition-base);




    box-shadow: var(--shadow-sm);




    border: 1px solid rgba(62, 35, 108, 0.05);




}









.model-card:hover {




    transform: translateY(-10px);




    box-shadow: var(--shadow-lg);




}









.model-icon {




    width: 70px;




    height: 70px;




    background: var(--bg-soft-purple);




    color: var(--primary-color);




    border-radius: var(--radius-md);




    display: flex;




    align-items: center;




    justify-content: center;




    font-size: 2rem;




    margin: 0 auto 24px;




    transition: var(--transition-base);




}









.model-card:hover .model-icon {




    background: var(--primary-color);




    color: white;




}









.association-types-row {




    display: grid;




    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));




    gap: 40px;




    margin-top: 60px;




    text-align: left;




}









.assoc-type-card {




    background: var(--bg-white);




    padding: 35px;




    border-radius: var(--radius-lg);




    border-left: 5px solid var(--accent-blue);




    box-shadow: var(--shadow-sm);




}









.assoc-type-card h4 {




    color: var(--primary-color);




    margin-bottom: 15px;




    display: flex;




    align-items: center;




    gap: 12px;




}









.corporate-benefits-box {




    margin-top: 80px;




    padding: 50px;




    background: var(--primary-color);




    color: white;




    border-radius: var(--radius-xl);




    display: grid;




    grid-template-columns: 1.2fr 0.8fr;




    gap: 40px;




    align-items: center;




    text-align: left;




}









.corporate-benefits-box h3 {




    color: var(--accent-yellow);




    margin-bottom: 20px;




    font-size: 2.2rem;




}









.corporate-benefits-box ul {




    list-style: none;




    margin-top: 20px;




}









.corporate-benefits-box ul li {




    margin-bottom: 12px;




    display: flex;




    align-items: flex-start;




    gap: 12px;




    font-size: 1.05rem;




}









.corporate-benefits-box ul li i {




    color: var(--accent-yellow);




    margin-top: 5px;




}









.hub-spoke-badge {




    background: rgba(255, 255, 255, 0.1);




    padding: 25px;




    border-radius: var(--radius-lg);




    border: 1px dashed rgba(255, 255, 255, 0.3);




    text-align: center;




}









.hub-spoke-badge h5 {




    color: var(--accent-blue);




    margin-bottom: 10px;




    text-transform: uppercase;




    letter-spacing: 1px;




}









@media (max-width: 768px) {




    .association-types-row {




        grid-template-columns: 1fr;




    }









    .corporate-benefits-box {




        grid-template-columns: 1fr;




        padding: 30px;




    }




}









/* --- Leadership & Board Specific Styles --- */




.leadership-grid {




    display: grid;




    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));




    gap: 30px;




    margin-top: 50px;




}









.bio-card {




    text-align: center;




    background: var(--bg-white);




    border-radius: var(--radius-lg);




    padding: 40px 30px;




    transition: var(--transition-base);




    border: 1px solid rgba(62, 35, 108, 0.05);




    box-shadow: var(--shadow-sm);




    display: flex;




    flex-direction: column;




    align-items: center;




}









.bio-card:hover {




    transform: translateY(-10px);




    box-shadow: var(--shadow-lg);




    border-color: var(--accent-blue);




}









.placeholder-avatar {




    width: 90px;




    height: 90px;




    border-radius: 50%;




    display: flex;




    align-items: center;




    justify-content: center;




    font-size: 2.2rem;




    margin-bottom: 24px;




    box-shadow: var(--shadow-sm);




    border: 4px solid white;




}









.edu-qual {




    font-family: var(--font-body);




    font-size: 0.9rem;




    font-weight: 500;




    color: var(--text-muted);




    margin: 8px 0 16px;




    line-height: 1.4;




}









.edu-bio {




    font-size: 0.92rem;




    line-height: 1.7;




    color: var(--text-dark) !important;




    text-align: center;




    margin-top: 15px;




    border-top: 1px solid rgba(0, 0, 0, 0.05);




    padding-top: 15px;




}









.edu-role {




    font-family: var(--font-heading);




    font-weight: 700;




    color: var(--primary-color);




    text-transform: uppercase;




    letter-spacing: 1px;




    font-size: 0.85rem;




    margin-bottom: 5px;




}









.infrastructure-section {




    padding: 80px 0;




    background: var(--bg-soft-purple);




}









.infra-grid {




    display: grid;




    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));




    gap: 24px;




    margin-top: 48px;




}









.infra-card {




    background: white;




    padding: 28px;




    border-radius: var(--radius-md);




    box-shadow: var(--shadow-xs);




    transition: var(--transition-base);




}









.infra-card:hover {




    transform: translateY(-4px);




    box-shadow: var(--shadow-md);




}









.infra-card i {




    font-size: 2rem;




    color: var(--primary-color);




    margin-bottom: 16px;




}









.infra-card h4 {




    font-size: 1.1rem;




    margin-bottom: 8px;




    color: var(--text-dark);




}









.infra-card p {




    font-size: 0.88rem;




    color: var(--text-muted);




}









.about-cta {




    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));




    padding: 56px 0;




    color: white;




    text-align: center;




}









.about-cta h2 {




    color: white;




    margin-bottom: 8px;




}









.about-cta p {




    color: rgba(255, 255, 255, 0.8);




    margin-bottom: 28px;




    font-size: 1.1rem;




}









@media (max-width: 768px) {




    .about-hero {




        height: auto;




        padding: 80px 0 48px;




    }









    .hero-content-about h1 {




        font-size: 2.2rem;




    }









    .phil-list-grid {




        grid-template-columns: 1fr;




    }









    .row-flex {




        flex-direction: column;




    }









    .vision-mission-grid {




        flex-direction: column;




    }




}









/* --- Corporate Callout (Index) --- */




.corporate-callout {




    padding: 60px 0;




    background: var(--bg-white);




    border-top: 1px solid rgba(0, 0, 0, 0.05);




}









.corp-callout-card {




    background: var(--bg-soft-purple);




    padding: 40px;




    border-radius: var(--radius-lg);




    display: flex;




    align-items: center;




    justify-content: space-between;




    gap: 30px;




}









.corp-callout-content h3 {




    color: var(--primary-color);




    margin-bottom: 10px;




}









@media (max-width: 768px) {




    .corp-callout-card {




        flex-direction: column;




        text-align: center;




    }




}









/* --- Accordion FAQ Styles --- */




.faq-section {




    padding: 100px 0;




    background: var(--bg-white);




}









.faq-container {




    max-width: 900px;




    margin: 50px auto 0;




}









.faq-item {




    background: var(--bg-soft-purple);




    border-radius: var(--radius-md);




    margin-bottom: 20px;




    overflow: hidden;




    transition: var(--transition-base);




    border: 1px solid rgba(62, 35, 108, 0.05);




}









.faq-header {




    padding: 24px 30px;




    display: flex;




    align-items: center;




    justify-content: space-between;




    cursor: pointer;




    user-select: none;




    transition: var(--transition-base);




}









.faq-header h4 {




    margin-bottom: 0;




    font-size: 1.1rem;




    color: var(--primary-color);




    padding-right: 20px;




    line-height: 1.4;




}









.faq-icon {




    width: 24px;




    height: 24px;




    display: flex;




    align-items: center;




    justify-content: center;




    color: var(--primary-color);




    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);




}









.faq-content {




    max-height: 0;




    overflow: hidden;




    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);




    padding: 0 30px;




}









.faq-content-inner {




    padding-bottom: 30px;




    color: var(--text-dark);




    line-height: 1.8;




    font-size: 0.95rem;




}









.faq-content p {




    margin-bottom: 15px;




}









.faq-content p:last-child {




    margin-bottom: 0;




}









/* Active State */




.faq-item.active {




    box-shadow: var(--shadow-md);




    background: var(--bg-white);




    border-color: var(--accent-blue);




}









.faq-item.active .faq-header {




    background: rgba(129, 212, 250, 0.05);




}









.faq-item.active .faq-icon {




    transform: rotate(180deg);




    color: var(--accent-blue);




}









.faq-item.active .faq-content {




    max-height: 1000px;




    /* Large enough to fit content */




}



/* --- Gallery Page Styles --- */



.gallery-hero {



    background: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);



    padding: 120px 0 80px;



    position: relative;



    overflow: hidden;



}







.gallery-hero::before {



    content: '';



    position: absolute;



    top: -50%;



    right: -10%;



    width: 600px;



    height: 600px;



    background: radial-gradient(circle, rgba(255, 233, 161, 0.4) 0%, transparent 70%);



    border-radius: 50%;



    z-index: 0;



}







.gallery-category {



    margin-bottom: 80px;



}







.category-header {



    text-align: center;



    margin-bottom: 40px;



}







.category-header h2 {



    font-size: 2.5rem;



    color: var(--text-dark);



    margin-bottom: 10px;



}







.category-header p {



    color: var(--text-light);



    font-size: 1.1rem;



}







.gallery-grid-detailed {



    display: grid;



    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));



    gap: 25px;



}







.gallery-item-detailed {



    position: relative;



    border-radius: 20px;



    overflow: hidden;



    aspect-ratio: 4/3;



    box-shadow: var(--shadow-sm);



    transition: all 0.4s ease;



}







.gallery-item-detailed img {



    width: 100%;



    height: 100%;



    object-fit: cover;



    transition: transform 0.6s ease;



}







.gallery-overlay {



    position: absolute;



    inset: 0;



    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent 60%);



    display: flex;



    align-items: flex-end;



    padding: 25px;



    opacity: 0;



    transition: opacity 0.4s ease;



}







.gallery-overlay span {



    color: white;



    font-weight: 600;



    font-size: 1.1rem;



    transform: translateY(10px);



    transition: transform 0.4s ease;



}







.gallery-item-detailed:hover {



    transform: translateY(-8px);



    box-shadow: var(--shadow-md);



}







.gallery-item-detailed:hover img {



    transform: scale(1.1);



}







.gallery-item-detailed:hover .gallery-overlay {



    opacity: 1;



}







.gallery-item-detailed:hover .gallery-overlay span {



    transform: translateY(0);



}







.gallery-masonry {



    display: grid;



    grid-template-columns: repeat(3, 1fr);



    gap: 25px;



}







.masonry-item {



    position: relative;



    border-radius: 20px;



    overflow: hidden;



    box-shadow: var(--shadow-sm);



    transition: all 0.4s ease;



}







.masonry-item:nth-child(1) {
    grid-column: span 2;
    aspect-ratio: 16/9;
}



.masonry-item:nth-child(2) {
    aspect-ratio: 1/1;
}



.masonry-item:nth-child(3) {
    grid-column: span 3;
    aspect-ratio: 21/9;
}







.masonry-item img {



    width: 100%;



    height: 100%;



    object-fit: cover;



    transition: transform 0.6s ease;



}







.masonry-item .gallery-overlay {



    position: absolute;



    inset: 0;



    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent 70%);



    display: flex;



    align-items: flex-end;



    padding: 20px;



    opacity: 0;



    transition: opacity 0.4s ease;



}







.masonry-item:hover {



    transform: translateY(-5px);



}







.masonry-item:hover img {



    transform: scale(1.05);



}







.masonry-item:hover .gallery-overlay {



    opacity: 1;



}







@media (max-width: 992px) {



    .gallery-masonry {



        grid-template-columns: 1fr 1fr;



    }



    .masonry-item:nth-child(1),



    .masonry-item:nth-child(3) {



        grid-column: span 2;



    }



}







@media (max-width: 576px) {



    .gallery-masonry {



        grid-template-columns: 1fr;



    }



    .masonry-item:nth-child(1),



    .masonry-item:nth-child(3) {



        grid-column: span 1;



    }



    .category-header h2 {



        font-size: 1.8rem;



    }



}








/* ============================================================



   ABOUT US PAGE V2 - Complete Redesign



   ============================================================ */







/* --- Hero V2 --- */



.about-hero-v2 {



    padding: 100px 0 60px;



    margin-top: var(--header-height);



    background: linear-gradient(135deg, #e0f7fa 0%, #f3e5f5 40%, #fff9c4 100%);



    position: relative;



    overflow: hidden;



    min-height: 480px;



}







.hero-decor-circle {



    position: absolute;



    border-radius: 50%;



    z-index: 0;



}







.hero-decor-yellow {



    width: 320px;



    height: 320px;



    background: rgba(255, 202, 40, 0.35);



    top: -60px;



    left: -80px;



}







.hero-decor-teal {



    width: 260px;



    height: 260px;



    background: rgba(0, 150, 136, 0.18);



    bottom: -40px;



    right: 5%;



    border: 40px solid rgba(0, 150, 136, 0.12);



    background: transparent;



}







.about-hero-v2-grid {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 40px;



    align-items: center;



    position: relative;



    z-index: 1;



}







.about-hero-v2-text h1 {



    font-size: 3.2rem;



    font-weight: 800;



    color: var(--primary-dark, #1a237e);



    line-height: 1.15;



    margin-bottom: 28px;



}







.about-hero-v2-text h1 em {



    font-style: italic;



}







.btn-visit-hero {



    display: inline-block;



    padding: 14px 36px;



    background: var(--primary, #7b1fa2);



    color: white;



    border-radius: var(--radius-pill, 50px);



    font-weight: 600;



    font-size: 1rem;



    text-decoration: none;



    transition: all 0.3s ease;



    box-shadow: 0 6px 24px rgba(123, 31, 162, 0.3);



}







.btn-visit-hero:hover {



    background: var(--primary-dark, #4a148c);



    transform: translateY(-2px);



    box-shadow: 0 8px 32px rgba(123, 31, 162, 0.4);



}







.about-hero-v2-image {



    position: relative;



}







.about-hero-v2-image img {



    width: 100%;



    max-width: 480px;



    border-radius: 24px;



    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);



    object-fit: cover;



}







/* --- Split Section Layout (used for all side-by-side sections) --- */



.about-split-section {



    padding: 70px 0;



}







.about-split-section.about-split-alt {



    background: #f9f9fb;



}







.about-split-grid {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 50px;



    align-items: start;



}







.about-split-heading {



    font-size: 1.6rem;



    font-weight: 700;



    color: var(--text-dark, #1a1a2e);



    margin-bottom: 28px;



    position: relative;



    padding-bottom: 12px;



}







.about-split-heading::after {



    content: '';



    position: absolute;



    bottom: 0;



    left: 0;



    width: 50px;



    height: 3px;



    background: var(--primary, #7b1fa2);



    border-radius: 2px;



}







.text-center .about-split-heading::after {



    left: 50%;



    transform: translateX(-50%);



}







/* --- Vision/Mission blocks --- */



.vm-pair {



    display: flex;



    flex-direction: column;



    gap: 28px;



}







.vm-block {



    display: flex;



    gap: 18px;



    align-items: flex-start;



}







.vm-icon-circle {



    width: 52px;



    height: 52px;



    min-width: 52px;



    border-radius: 50%;



    display: flex;



    align-items: center;



    justify-content: center;



    font-size: 1.2rem;



    background: #fff;



    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);



}







.vm-icon-circle.yellow-ring {



    border: 3px solid #ffca28;



    color: #f9a825;



}







.vm-icon-circle.purple-ring {



    border: 3px solid #7b1fa2;



    color: #7b1fa2;



}







.vm-block h4 {



    font-size: 1.05rem;



    font-weight: 700;



    color: var(--text-dark, #1a1a2e);



    margin-bottom: 6px;



}







.vm-block p {



    font-size: 0.92rem;



    color: var(--text-light, #555);



    line-height: 1.6;



}







/* --- Leadership Cards --- */



.leadership-row {



    display: grid;



    grid-template-columns: repeat(3, 1fr);



    gap: 20px;



}







.leader-card {



    text-align: center;



}







.leader-photo {



    width: 90px;



    height: 90px;



    border-radius: 50%;



    overflow: hidden;



    margin: 0 auto 12px;



    border: 3px solid transparent;



}







.leader-photo.purple-border {
    border-color: #7b1fa2;
}



.leader-photo.teal-border {
    border-color: #26a69a;
}



.leader-photo.yellow-border {
    border-color: #ffca28;
}







.leader-photo img {



    width: 100%;



    height: 100%;



    object-fit: cover;



}







.leader-card h5 {



    font-size: 0.92rem;



    font-weight: 700;



    color: var(--text-dark, #1a1a2e);



    margin-bottom: 2px;



    line-height: 1.3;



}







.leader-role {



    display: block;



    font-size: 0.78rem;



    font-weight: 600;



    color: var(--primary, #7b1fa2);



    text-transform: uppercase;



    letter-spacing: 0.5px;



    margin-bottom: 6px;



}







.leader-bio {



    font-size: 0.8rem;



    color: var(--text-light, #666);



    line-height: 1.5;



}







/* --- Compact Educator Cards --- */



.educator-row {



    display: grid;



    grid-template-columns: repeat(3, 1fr);



    gap: 20px;



}







.educator-row-centered {



    max-width: 800px;



    margin: 0 auto;



}







.edu-compact-card {



    text-align: center;



}







.edu-compact-photo {



    width: 95px;



    height: 95px;



    border-radius: 50%;



    overflow: hidden;



    margin: 0 auto 12px;



    border: 3px solid transparent;



}







.edu-compact-photo.yellow-border {
    border-color: #ffca28;
}



.edu-compact-photo.teal-border {
    border-color: #26a69a;
}



.edu-compact-photo.purple-border {
    border-color: #7b1fa2;
}







.edu-compact-photo img {



    width: 100%;



    height: 100%;



    object-fit: cover;



}







.edu-compact-card h5 {



    font-size: 0.92rem;



    font-weight: 700;



    color: var(--text-dark, #1a1a2e);



    margin-bottom: 2px;



}







.edu-compact-role {



    display: block;



    font-size: 0.78rem;



    font-weight: 600;



    color: var(--primary, #7b1fa2);



    text-transform: uppercase;



    letter-spacing: 0.5px;



    margin-bottom: 6px;



}







.edu-compact-bio {



    font-size: 0.8rem;



    color: var(--text-light, #666);



    line-height: 1.5;



}







/* --- FAQ compact for about page --- */



.about-faq-compact .faq-header {



    padding: 14px 18px;



}







.about-faq-compact .faq-header h4 {



    font-size: 0.92rem;



}







.about-faq-compact .faq-content-inner {



    padding: 14px 18px;



}







.about-faq-compact .faq-content-inner h5 {



    font-size: 0.9rem;



    font-weight: 700;



    color: var(--text-dark, #1a1a2e);



    margin-bottom: 10px;



}







.about-faq-compact .faq-content-inner ul {



    padding-left: 18px;



    margin: 0;



}







.about-faq-compact .faq-content-inner ul li {



    font-size: 0.85rem;



    color: var(--text-light, #555);



    line-height: 1.6;



    margin-bottom: 8px;



}







/* --- Educators Row 2 section --- */



.educators-row-2-section {



    padding: 60px 0;



}







/* --- Campus Showcase --- */



.campus-showcase {



    padding: 60px 0 80px;



    background: #fff;



}







.campus-carousel {



    position: relative;



    display: flex;



    align-items: center;



    gap: 16px;



}







.campus-track {



    display: grid;



    grid-template-columns: repeat(3, 1fr);



    gap: 24px;



    flex: 1;



}







.campus-slide {



    text-align: center;



}







.campus-slide img {



    width: 100%;



    aspect-ratio: 4/3;



    object-fit: cover;



    border-radius: 16px;



    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);



    transition: transform 0.3s ease;



}







.campus-slide img:hover {



    transform: scale(1.03);



}







.campus-slide p {



    margin-top: 12px;



    font-size: 0.95rem;



    font-weight: 600;



    color: var(--text-dark, #1a1a2e);



}







.campus-arrow {



    width: 44px;



    height: 44px;



    border-radius: 50%;



    border: 2px solid #ddd;



    background: #fff;



    color: var(--text-dark, #333);



    display: flex;



    align-items: center;



    justify-content: center;



    cursor: pointer;



    transition: all 0.3s ease;



    flex-shrink: 0;



}







.campus-arrow:hover {



    border-color: var(--primary, #7b1fa2);



    color: var(--primary, #7b1fa2);



    box-shadow: 0 2px 12px rgba(123, 31, 162, 0.15);



}







/* --- Responsive --- */



@media (max-width: 992px) {



    .about-hero-v2-grid {



        grid-template-columns: 1fr;



        text-align: center;



    }







    .about-hero-v2-text h1 {



        font-size: 2.4rem;



    }







    .about-hero-v2-image img {



        max-width: 360px;



        margin: 0 auto;



    }







    .about-split-grid {



        grid-template-columns: 1fr;



    }







    .about-split-heading::after {



        left: 0;



    }







    .leadership-row,



    .educator-row {



        grid-template-columns: repeat(3, 1fr);



        gap: 16px;



    }







    .campus-track {



        grid-template-columns: repeat(2, 1fr);



    }



}







@media (max-width: 576px) {



    .about-hero-v2-text h1 {



        font-size: 1.9rem;



    }







    .about-split-heading {



        font-size: 1.35rem;



    }







    .leadership-row,



    .educator-row {



        grid-template-columns: 1fr 1fr;



        gap: 16px;



    }







    .campus-track {



        grid-template-columns: 1fr;



    }







    .campus-arrow {



        display: none;



    }



}








/* --- Standalone Section Layout (each section on its own row) --- */



.about-standalone-section {



    padding: 70px 0;



}







.about-section-alt {



    background: #f9f9fb;



}







.about-section-title {



    font-size: 1.75rem;



    font-weight: 700;



    color: var(--text-dark, #1a1a2e);



    margin-bottom: 36px;



    position: relative;



    padding-bottom: 14px;



}







.about-section-title::after {



    content: '';



    position: absolute;



    bottom: 0;



    left: 0;



    width: 50px;



    height: 3px;



    background: var(--primary, #7b1fa2);



    border-radius: 2px;



}







.about-section-title.text-center::after {



    left: 50%;



    transform: translateX(-50%);



}







/* Vision/Mission row layout */



.vm-row {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 40px;



}







/* Leadership wide row */



.leadership-row-wide {



    display: grid;



    grid-template-columns: repeat(3, 1fr);



    gap: 32px;



    max-width: 900px;



    margin: 0 auto;



}







/* Educator wide row */



.educator-row-wide {



    display: grid;



    grid-template-columns: repeat(3, 1fr);



    gap: 32px;



    max-width: 900px;



    margin: 0 auto;



}







/* Full-width FAQ */



.about-faq-full {



    max-width: 800px;



    margin: 0 auto;



}







/* Responsive */



@media (max-width: 768px) {



    .vm-row {



        grid-template-columns: 1fr;



        gap: 24px;



    }







    .leadership-row-wide,



    .educator-row-wide {



        grid-template-columns: repeat(2, 1fr);



        gap: 24px;



    }







    .about-section-title {



        font-size: 1.4rem;



    }



}







@media (max-width: 480px) {



    .leadership-row-wide,



    .educator-row-wide {



        grid-template-columns: 1fr;



    }



}








/* --- Vision & Mission Card Design (matching reference) --- */



.vm-section {



    padding: 80px 0;



    position: relative;



    overflow: hidden;



    background: #fff;



}







.vm-decor {



    position: absolute;



    width: 200px;



    height: 200px;



    border-radius: 50%;



    z-index: 0;



}







.vm-decor-tl {



    top: -40px;



    left: -40px;



    border: 40px solid rgba(0, 188, 212, 0.08);



}







.vm-decor-br {



    bottom: -40px;



    right: -40px;



    border: 40px solid rgba(0, 188, 212, 0.08);



}







.vm-section-title {



    font-size: 2rem;



    font-weight: 800;



    color: var(--text-dark, #1a1a2e);



    text-align: center;



    margin-bottom: 48px;



    position: relative;



    z-index: 1;



}







.vm-cards {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 32px;



    max-width: 820px;



    margin: 0 auto;



    position: relative;



    z-index: 1;



}







.vm-card {



    background: #f5f7fa;



    border-radius: 20px;



    padding: 36px 30px;



    text-align: left;



    transition: transform 0.3s ease, box-shadow 0.3s ease;



}







.vm-card:hover {



    transform: translateY(-4px);



    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);



}







.vm-card-icon {



    width: 56px;



    height: 56px;



    border-radius: 50%;



    display: flex;



    align-items: center;



    justify-content: center;



    font-size: 1.3rem;



    margin-bottom: 20px;



}







.vm-card-icon.teal-icon {



    background: rgba(0, 188, 212, 0.12);



    border: 2px solid rgba(0, 188, 212, 0.3);



    color: #00838f;



}







.vm-card-icon.yellow-icon {



    background: rgba(255, 202, 40, 0.2);



    border: 2px solid rgba(255, 202, 40, 0.4);



    color: #f9a825;



}







.vm-card h4 {



    font-size: 1.15rem;



    font-weight: 700;



    color: var(--text-dark, #1a1a2e);



    margin-bottom: 12px;



}







.vm-card p {



    font-size: 0.92rem;



    color: var(--text-light, #555);



    line-height: 1.7;



}







@media (max-width: 640px) {



    .vm-cards {



        grid-template-columns: 1fr;



        gap: 20px;



    }







    .vm-section-title {



        font-size: 1.5rem;



    }



}














/* ==========================================================================




   PREMIUM ABOUT US REDESIGN




   ========================================================================== */









/* Typography Utils */




.text-highlight {




    color: var(--primary-color);




    position: relative;




    display: inline-block;




}




.text-highlight::after {




    content: '';




    position: absolute;




    bottom: 5px;




    left: 0;




    width: 100%;




    height: 12px;




    background: rgba(43, 166, 160, 0.2);




    z-index: -1;




    border-radius: 4px;




}




.text-purple {
    color: var(--secondary-color);
}




.text-teal {
    color: var(--primary-color);
}




.text-yellow {
    color: var(--tertiary-color);
}









.badge-premium {




    display: inline-block;




    padding: 8px 16px;




    background: rgba(43, 166, 160, 0.1);




    color: var(--primary-color);




    border-radius: 30px;




    font-size: 0.9rem;




    font-weight: 600;




    text-transform: uppercase;




    letter-spacing: 1.5px;




    margin-bottom: 1.5rem;




    border: 1px solid rgba(43, 166, 160, 0.2);




}









.section-bg-light {
    background-color: #fcfdfe;
}




.section-bg-teal-light {
    background-color: #f0fbfb;
    position: relative;
    overflow: hidden;
}









.section-header {




    max-width: 700px;




    margin: 0 auto 3rem;




}




.section-subtitle {




    display: block;




    font-size: 1rem;




    font-weight: 700;




    color: var(--secondary-color);




    text-transform: uppercase;




    letter-spacing: 2px;




    margin-bottom: 0.5rem;




}




.section-title {




    font-size: 2.5rem;




    font-weight: 800;




    color: var(--dark-text);




    margin-bottom: 1rem;




}




.section-title::after {
    display: none;
}

/* Remove old global after if it conflicts */




.section-desc {




    font-size: 1.1rem;




    color: var(--light-text);




    line-height: 1.6;




}









/* 1. PREMIUM HERO */




.about-hero-premium {




    position: relative;




    padding: 120px 0 80px;




    background: linear-gradient(135deg, #ffffff 0%, #f4fcfc 100%);




    overflow: hidden;




}




.about-hero-bg-shapes {




    position: absolute;




    top: 0;
    left: 0;
    width: 100%;
    height: 100%;




    overflow: hidden;




    z-index: 0;




    pointer-events: none;




}




.sp-shape {




    position: absolute;




    border-radius: 50%;




    filter: blur(60px);




    opacity: 0.4;




    animation: spFloat 10s infinite alternate ease-in-out;




}




.sp-shape-1 {




    width: 300px;
    height: 300px;




    background: var(--primary-color);




    top: -100px;
    left: -100px;




}




.sp-shape-2 {




    width: 400px;
    height: 400px;




    background: var(--tertiary-color);




    bottom: -150px;
    right: -100px;




    animation-delay: 2s;




}




.sp-shape-3 {




    width: 250px;
    height: 250px;




    background: var(--secondary-color);




    top: 20%;
    right: 20%;




    opacity: 0.2;




    animation-delay: 5s;




}









@keyframes spFloat {




    0% {
        transform: translate(0, 0) scale(1);
    }




    100% {
        transform: translate(30px, 50px) scale(1.1);
    }




}









.about-hero-container {




    position: relative;




    z-index: 1;




    display: grid;




    grid-template-columns: 1fr 1fr;




    gap: 4rem;




    align-items: center;




}




.about-hero-content .hero-title {




    font-size: 3.5rem;




    line-height: 1.2;




    margin-bottom: 1.5rem;




    font-weight: 800;




    color: var(--dark-text);




}




.about-hero-content .hero-subtitle {




    font-size: 1.2rem;




    line-height: 1.7;




    margin-bottom: 2rem;




    color: var(--light-text);




}




.pulse-hover {




    transition: all 0.3s ease;




    box-shadow: 0 10px 20px rgba(43, 166, 160, 0.3);




}




.pulse-hover:hover {




    transform: translateY(-3px);




    box-shadow: 0 15px 25px rgba(43, 166, 160, 0.4);




}









.about-hero-image-wrapper {




    position: relative;




}




.image-frame-premium {




    position: relative;




    border-radius: 30px;




    border: 15px solid white;




    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.08);




    transform: rotate(2deg);




    transition: transform 0.4s ease;




}




.image-frame-premium:hover {




    transform: rotate(0deg) scale(1.02);




}




.image-frame-premium img {




    border-radius: 15px;




    width: 100%;




    display: block;




}




.floating-badge {




    position: absolute;




    background: white;




    padding: 12px 20px;




    border-radius: 20px;




    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);




    font-weight: 700;




    font-size: 0.95rem;




    display: flex;




    align-items: center;




    gap: 10px;




    z-index: 2;




    animation: floatUpDown 4s infinite ease-in-out;




}




.badge-tl {




    top: -20px;




    left: -30px;




    color: var(--primary-color);




}




.badge-tl i {
    color: var(--tertiary-color);
}




.badge-br {




    bottom: -30px;




    right: -20px;




    color: var(--secondary-color);




    animation-delay: -2s;




}




.badge-br i {
    color: #ff6b6b;
}









@keyframes floatUpDown {




    0%,
    100% {
        transform: translateY(0);
    }




    50% {
        transform: translateY(-15px);
    }




}









/* 2. VISION & MISSION REDESIGNED */




.vision-mission-premium {




    background:
        radial-gradient(rgba(156, 122, 219, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 245, 253, 0.96));
    /* fallback */




    background-color: transparent;




}




.vm-premium-grid {




    display: grid;




    grid-template-columns: 1fr 1fr;




    gap: 2rem;




}




.vm-premium-card {




    background: white;




    border-radius: 24px;




    padding: 3rem 2.5rem;




    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);




    text-align: center;




    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);




    border-top: 5px solid transparent;




}




.vm-premium-card:hover {




    transform: translateY(-10px);




    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);




}




.vm-premium-card.card-teal {
    border-top-color: var(--primary-color);
}




.vm-premium-card.card-yellow {
    border-top-color: var(--tertiary-color);
}









.vm-icon-wrapper {




    width: 80px;
    height: 80px;




    margin: 0 auto 1.5rem;




    display: flex;




    align-items: center;




    justify-content: center;




    border-radius: 50%;




    font-size: 2rem;




}




.card-teal .vm-icon-wrapper {




    background: rgba(43, 166, 160, 0.1);




    color: var(--primary-color);




}




.card-yellow .vm-icon-wrapper {




    background: rgba(246, 172, 36, 0.1);




    color: var(--tertiary-color);




}




.vm-premium-card h3 {




    font-size: 1.8rem;




    margin-bottom: 1rem;




    color: var(--dark-text);




}




.vm-premium-card p {




    color: var(--light-text);




    font-size: 1.05rem;




    line-height: 1.7;




}









/* 3. LEADERSHIP PREMIUM */




.leadership-grid {




    display: grid;




    grid-template-columns: repeat(3, 1fr);




    gap: 2.5rem;




}




.leader-profile {




    display: flex;




    flex-direction: column;




    align-items: center;




    text-align: center;




}




.profile-img-container {




    width: 200px;
    height: 200px;




    border-radius: 50%;




    padding: 10px;




    margin-bottom: 1.5rem;




    position: relative;




    transition: transform 0.4s ease;




}




.leader-profile:hover .profile-img-container {




    transform: scale(1.05);




}




.pattern-bg-purple {
    background: linear-gradient(135deg, rgba(88, 59, 149, 0.1) 0%, rgba(88, 59, 149, 0.3) 100%);
}




.pattern-bg-teal {
    background: linear-gradient(135deg, rgba(43, 166, 160, 0.1) 0%, rgba(43, 166, 160, 0.3) 100%);
}




.pattern-bg-yellow {
    background: linear-gradient(135deg, rgba(246, 172, 36, 0.1) 0%, rgba(246, 172, 36, 0.3) 100%);
}









.profile-img-container img {




    width: 100%;
    height: 100%;




    object-fit: cover;




    border-radius: 50%;




    border: 5px solid white;




    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);




}




.profile-info h4 {




    font-size: 1.4rem;




    margin-bottom: 0.3rem;




}




.profile-info .role {




    font-weight: 700;




    font-size: 0.95rem;




    text-transform: uppercase;




    letter-spacing: 1px;




    margin-bottom: 1rem;




}




.profile-info .bio {




    font-size: 0.95rem;




    color: var(--light-text);




    line-height: 1.6;




}









/* 4. EDUCATORS CONSOLIDATED */




.educator-grid {




    display: grid;




    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));




    gap: 2rem;




}




.educator-card {




    background: white;




    border-radius: 20px;




    overflow: hidden;




    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);




    transition: all 0.3s ease;




    border: 1px solid rgba(0, 0, 0, 0.03);




}




.educator-card:hover {




    transform: translateY(-8px);




    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);




}




.educator-img {




    height: 280px;




    position: relative;




    overflow: hidden;




}




.educator-img img {




    width: 100%;
    height: 100%;




    object-fit: cover;




    object-position: top;




    transition: transform 0.5s ease;




}




.educator-card:hover .educator-img img {




    transform: scale(1.08);




}




.color-overlay {




    position: absolute;




    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;




    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);




    opacity: 0.5;




}




.overlay-yellow {
    background: linear-gradient(to top, var(--tertiary-color) 0%, transparent 100%);
    opacity: 0.8;
}




.overlay-teal {
    background: linear-gradient(to top, var(--primary-color) 0%, transparent 100%);
    opacity: 0.8;
}




.overlay-purple {
    background: linear-gradient(to top, var(--secondary-color) 0%, transparent 100%);
    opacity: 0.8;
}









.educator-details {




    padding: 1.8rem;




    text-align: center;




    position: relative;




    background: white;




}




.educator-details h5 {




    font-size: 1.25rem;




    margin-bottom: 0.2rem;




    color: var(--dark-text);




}




.educator-details .edu-role {




    font-size: 0.85rem;




    font-weight: 700;




    text-transform: uppercase;




    letter-spacing: 0.5px;




    margin-bottom: 0.8rem;




}




.educator-details .edu-bio {




    font-size: 0.9rem;




    color: var(--light-text);




    line-height: 1.5;




}









/* 5. HEALTH & SAFETY REDESIGNED */




.safety-bg-pattern {




    position: absolute;




    top: 0;
    right: 0;




    width: 50vw;
    height: 100%;




    background:
        radial-gradient(circle at 20% 20%, rgba(96, 75, 153, 0.22) 0 2px, transparent 2px),
        radial-gradient(circle at 80% 40%, rgba(255, 213, 79, 0.18) 0 2px, transparent 2px);
    background-size: 28px 28px, 34px 34px;




    opacity: 0.05;




    pointer-events: none;




}




.safety-premium-grid {




    display: grid;




    grid-template-columns: 1fr 1fr;




    gap: 4rem;




    align-items: center;




}




.safety-side-img-wrapper {




    margin-top: 2rem;




    border-radius: 20px;




    overflow: hidden;




    border: 10px solid white;




    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);




    transform: rotate(-2deg);




}




.safety-side-img {




    width: 100%;




    display: block;




    transition: transform 0.5s ease;




}




.safety-side-img-wrapper:hover .safety-side-img {




    transform: scale(1.05);




}









.modern-accordion .accordion-item {




    background: white;




    border-radius: 12px;




    margin-bottom: 1rem;




    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);




    overflow: hidden;




    border: 1px solid rgba(0, 0, 0, 0.04);




}




.modern-accordion .accordion-header {




    padding: 1.2rem 1.5rem;




    cursor: pointer;




    display: flex;




    justify-content: space-between;




    align-items: center;




    font-weight: 600;




    font-size: 1.05rem;




    transition: background 0.3s ease;




}




.accordion-header span i {




    width: 25px;




    text-align: center;




    margin-right: 10px;




    font-size: 1.1rem;




}




.accordion-header:hover {




    background: #fafafa;




}




.accordion-header .icon-toggle {




    color: var(--light-text);




    transition: transform 0.3s ease;




}




.accordion-item.active .accordion-header .icon-toggle {




    transform: rotate(45deg);




    color: var(--primary-color);




}




.accordion-content {




    padding: 0 1.5rem 1.5rem;




    color: var(--light-text);




    font-size: 0.95rem;




    line-height: 1.6;




    border-top: 1px solid rgba(0, 0, 0, 0.03);




    margin-top: 1rem;




    padding-top: 1rem;




}









/* 6. CAMPUS CAROUSEL TWEAKS */




.campus-carousel .slide-caption {




    position: absolute;




    bottom: 20px;




    left: 50%;




    transform: translateX(-50%);




    background: rgba(255, 255, 255, 0.9);




    padding: 10px 25px;




    border-radius: 30px;




    font-weight: 700;




    color: var(--dark-text);




    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);




}









/* RESPONSIVE */




@media (max-width: 991px) {




    .about-hero-container,
    .vm-premium-grid,
    .safety-premium-grid {




        grid-template-columns: 1fr;




    }




    .leadership-grid {




        grid-template-columns: repeat(2, 1fr);




    }




    .about-hero-content {
        text-align: center;
    }




    .about-hero-image-wrapper {
        margin-top: 2rem;
    }




    .badge-tl {
        top: -10px;
        left: -10px;
    }




    .badge-br {
        bottom: -10px;
        right: -10px;
    }




}









@media (max-width: 768px) {




    .leadership-grid,
    .educator-grid {




        grid-template-columns: 1fr;




    }




    .about-hero-content .hero-title {




        font-size: 2.5rem;




    }




}












/* --- Programs Page Redesign Styles --- */



.programs-showcase-detailed {



    padding: 80px 0 0 0;



}







.program-row-section {



    padding: 100px 0;



    position: relative;



    overflow: hidden;



}







.program-row-section:nth-child(even) .program-row-container {



    flex-direction: row-reverse;



}







.program-row-container {



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 60px;



}







.program-content-box {



    flex: 1;



    max-width: 550px;



}







.program-img-box {



    flex: 1;



    position: relative;



}







.prog-age-badge-large {



    display: inline-flex;



    align-items: center;



    gap: 8px;



    background: white;



    color: var(--primary-color);



    padding: 8px 18px;



    border-radius: var(--radius-pill);



    font-weight: 700;



    font-size: 0.95rem;



    box-shadow: var(--shadow-sm);



    margin-bottom: 24px;



}







.program-content-box h3 {



    font-size: 2.8rem;



    margin-bottom: 20px;



    color: var(--primary-dark);



}







.program-content-box p {



    font-size: 1.15rem;



    color: var(--text-dark);



    margin-bottom: 30px;



    line-height: 1.7;



}







.prog-feature-list {



    margin-bottom: 40px;



}







.prog-feature-list li {



    display: flex;



    align-items: flex-start;



    gap: 12px;



    margin-bottom: 16px;



    font-size: 1.1rem;



    font-weight: 500;



    color: var(--text-dark);



}







.prog-feature-list li i {



    color: var(--accent-blue);



    margin-top: 4px;



    font-size: 1.3rem;



}







.program-img-box .img-wrapper {



    position: relative;



    z-index: 2;



    border-radius: 40px;



    overflow: hidden;



    box-shadow: var(--shadow-lg);



    border: 8px solid white;



}







.program-img-box img {



    width: 100%;



    height: auto;



    object-fit: cover;



    aspect-ratio: 4/3;



    transition: transform 0.5s ease;



}







.program-row-section:hover .program-img-box img {



    transform: scale(1.05);



}







/* Pastel Backgrounds */



.bg-soft-peach {
    background-color: #FFF0E5;
}



.bg-soft-blue {
    background-color: #E8F4F8;
}



.bg-soft-yellow {
    background-color: #FFF9E5;
}



.bg-soft-green {
    background-color: #EAF5EA;
}



.bg-soft-purple {
    background-color: #F4EEFB;
}







/* Floating Elements */



.img-float {



    animation: float 6s ease-in-out infinite;



}







.accent-shape {



    position: absolute;



    border-radius: 50%;



    z-index: -1;



    opacity: 0.6;



}







.shape-yellow {



    width: 150px;



    height: 150px;



    background: var(--accent-yellow);



    top: -30px;



    right: -30px;



}







.shape-blue {



    width: 120px;



    height: 120px;



    background: var(--accent-blue);



    bottom: -20px;



    left: -20px;



}







.pulse {



    animation: pulse-soft 3s infinite;



}







@keyframes pulse-soft {



    0% {
        transform: scale(1);
        opacity: 0.6;
    }



    50% {
        transform: scale(1.1);
        opacity: 0.4;
    }



    100% {
        transform: scale(1);
        opacity: 0.6;
    }



}







@keyframes float {



    0% {
        transform: translateY(0px);
    }



    50% {
        transform: translateY(-15px);
    }



    100% {
        transform: translateY(0px);
    }



}







/* Wavy Divider */



.custom-shape-divider-bottom {



    position: absolute;



    bottom: 0;



    left: 0;



    width: 100%;



    overflow: hidden;



    line-height: 0;



    transform: rotate(180deg);



}



.custom-shape-divider-bottom svg {



    position: relative;



    display: block;



    width: calc(100% + 1.3px);



    height: 70px;



}



.custom-shape-divider-bottom .shape-fill {



    fill: #FFFFFF;



}







/* Responsive Programs Row */



@media (max-width: 992px) {



    .program-row-container,



    .program-row-section:nth-child(even) .program-row-container {



        flex-direction: column;



        text-align: center;



        gap: 40px;



    }







    .prog-feature-list li {



        justify-content: center;



        text-align: left;



    }







    .program-content-box {



        max-width: 100%;



    }







    .program-content-box h3 {



        font-size: 2.2rem;



    }



}












/* --- Programs Page Timeline Enhancement --- */



.day-timeline-section {



    background-color: var(--bg-white);



    padding: 100px 0;



    position: relative;



}







.day-flow {



    display: flex;



    justify-content: center;



    align-items: center;



    flex-wrap: wrap;



    gap: 15px;



    margin-top: 40px;



}







.day-step {



    text-align: center;



    background: white;



    padding: 30px 20px;



    border-radius: 20px;



    box-shadow: var(--shadow-sm);



    width: 180px;



    transition: transform 0.3s ease, box-shadow 0.3s ease;



    position: relative;



    border: 2px solid transparent;



}







.day-step:hover {



    transform: translateY(-10px);



    box-shadow: var(--shadow-md);



    border-color: var(--accent-yellow);



}







.time-pill {



    background: var(--bg-soft-purple);



    color: var(--primary-color);



    font-size: 0.85rem;



    font-weight: 700;



    padding: 6px 14px;



    border-radius: 20px;



    display: inline-block;



    margin-bottom: 20px;



}







.day-icon {



    width: 70px;



    height: 70px;



    background: var(--bg-soft-blue);



    color: var(--accent-blue);



    border-radius: 50%;



    display: flex;



    align-items: center;



    justify-content: center;



    font-size: 1.8rem;



    margin: 0 auto 20px;



    transition: all 0.3s ease;



}







.day-step:hover .day-icon {



    background: var(--accent-blue);



    color: white;



    transform: scale(1.1);



}







.day-step h5 {



    font-size: 1.1rem;



    color: var(--text-dark);



    margin: 0;



}







.day-connector {



    width: 30px;



    height: 3px;



    background: var(--accent-yellow);



    border-radius: 2px;



}







@media (max-width: 992px) {



    .day-flow {



        flex-direction: column;



    }







    .day-connector {



        width: 3px;



        height: 30px;



    }



}

/* --- Admission Process V2 - Extreme Premium Timeline --- */



.adm-process-v2 {



    padding: 120px 0;



    background: linear-gradient(135deg, #f8f5ff 0%, #eff8ff 40%, #fff5eb 100%);



    position: relative;



    overflow: hidden;



}







/* Decorative floating shapes */



.adm-process-deco {



    position: absolute;



    border-radius: 50%;



    opacity: 0.15;



    animation: float 8s ease-in-out infinite;



}



.adm-deco-1 {



    width: 300px;



    height: 300px;



    background: linear-gradient(135deg, var(--primary-color), var(--accent-blue));



    top: -80px;



    right: -80px;



    animation-delay: 0s;



}



.adm-deco-2 {



    width: 200px;



    height: 200px;



    background: linear-gradient(135deg, var(--accent-yellow), #FF8A65);



    bottom: -60px;



    left: -60px;



    animation-delay: 2s;



}



.adm-deco-3 {



    width: 140px;



    height: 140px;



    background: linear-gradient(135deg, #66BB6A, #42A5F5);



    top: 40%;



    left: 8%;



    animation-delay: 4s;



}







/* Steps track - horizontal layout */



.adm-steps-track {



    display: flex;



    align-items: center;



    justify-content: center;



    gap: 0;



    position: relative;



}







/* Individual Step Card - Glassmorphism */



.adm-step-card {



    background: rgba(255, 255, 255, 0.7);



    backdrop-filter: blur(16px);



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



    border: 1px solid rgba(255, 255, 255, 0.8);



    border-radius: 28px;



    padding: 40px 25px 30px;



    text-align: center;



    width: 230px;



    min-height: 300px;



    position: relative;



    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);



    box-shadow: 0 8px 32px rgba(62, 35, 108, 0.06);



}



.adm-step-card:hover {



    transform: translateY(-12px);



    box-shadow: 0 20px 50px rgba(62, 35, 108, 0.12);



    background: rgba(255, 255, 255, 0.9);



}







/* Step Number - floating corner */



.adm-step-number {



    position: absolute;



    top: 15px;



    right: 15px;



    font-family: var(--font-heading);



    font-weight: 800;



    font-size: 2.2rem;



    color: rgba(62, 35, 108, 0.06);



    line-height: 1;



    transition: color 0.3s ease;



}



.adm-step-card:hover .adm-step-number {



    color: rgba(62, 35, 108, 0.12);



}







/* Icon Ring - Gradient border with glow */



.adm-step-icon-ring {



    width: 90px;



    height: 90px;



    border-radius: 50%;



    display: flex;



    align-items: center;



    justify-content: center;



    margin: 0 auto 25px;



    padding: 4px;



    transition: all 0.4s ease;



}



.adm-ring-purple {



    background: linear-gradient(135deg, #7C4DFF, #B388FF);



    box-shadow: 0 8px 25px rgba(124, 77, 255, 0.25);



}



.adm-ring-blue {



    background: linear-gradient(135deg, #039BE5, #4FC3F7);



    box-shadow: 0 8px 25px rgba(3, 155, 229, 0.25);



}



.adm-ring-yellow {



    background: linear-gradient(135deg, #FFB300, #FFD54F);



    box-shadow: 0 8px 25px rgba(255, 179, 0, 0.25);



}



.adm-ring-green {



    background: linear-gradient(135deg, #43A047, #81C784);



    box-shadow: 0 8px 25px rgba(67, 160, 71, 0.25);



}







.adm-step-icon-inner {



    width: 100%;



    height: 100%;



    background: white;



    border-radius: 50%;



    display: flex;



    align-items: center;



    justify-content: center;



    font-size: 2rem;



    color: var(--primary-color);



    transition: all 0.4s ease;



}



.adm-step-card:hover .adm-step-icon-inner {



    background: transparent;



    color: white;



}



.adm-step-card:hover .adm-step-icon-ring {



    transform: scale(1.08);



}







/* Card typography */



.adm-step-card h4 {



    font-size: 1.3rem;



    margin-bottom: 10px;



    color: var(--primary-dark);



    font-weight: 700;



}



.adm-step-card p {



    font-size: 0.95rem;



    color: var(--text-dark);



    line-height: 1.5;



    margin-bottom: 20px;



}







/* Step Tag - bottom badge */



.adm-step-tag {



    display: inline-flex;



    align-items: center;



    gap: 6px;



    background: var(--bg-soft-purple);



    color: var(--primary-color);



    padding: 6px 14px;



    border-radius: 20px;



    font-size: 0.8rem;



    font-weight: 700;



    letter-spacing: 0.3px;



    transition: all 0.3s ease;



}



.adm-step-card:hover .adm-step-tag {



    background: var(--primary-color);



    color: white;



}







/* Connectors - animated dashed line + arrow */



.adm-step-connector {



    display: flex;



    align-items: center;



    justify-content: center;



    width: 60px;



    flex-shrink: 0;



    position: relative;



}



.adm-connector-line {



    width: 100%;



    height: 3px;



    background: repeating-linear-gradient(90deg,



            var(--accent-blue) 0px,



            var(--accent-blue) 8px,



            transparent 8px,



            transparent 14px);



    opacity: 0.4;



}



.adm-connector-arrow {



    position: absolute;



    color: var(--primary-color);



    font-size: 0.9rem;



    opacity: 0.5;



    animation: arrow-pulse 2s ease-in-out infinite;



}







@keyframes arrow-pulse {



    0%,
    100% {
        opacity: 0.3;
        transform: translateX(0);
    }



    50% {
        opacity: 0.8;
        transform: translateX(4px);
    }



}







/* Responsive - stack vertically on mobile */



@media (max-width: 992px) {



    .adm-steps-track {



        flex-direction: column;



        gap: 0;



    }



    .adm-step-card {



        width: 100%;



        max-width: 350px;



        min-height: auto;



    }



    .adm-step-connector {



        width: 3px;



        height: 50px;



        flex-direction: column;



    }



    .adm-connector-line {



        width: 3px;



        height: 100%;



        background: repeating-linear-gradient(180deg,



                var(--accent-blue) 0px,



                var(--accent-blue) 8px,



                transparent 8px,



                transparent 14px);



    }



    .adm-connector-arrow {



        transform: rotate(90deg);



    }



    @keyframes arrow-pulse {



        0%,
        100% {
            opacity: 0.3;
            transform: rotate(90deg) translateX(0);
        }



        50% {
            opacity: 0.8;
            transform: rotate(90deg) translateX(4px);
        }



    }



}








/* === ADMISSIONS PAGE --- TOP-CLASS OVERHAUL CSS === */







/* --- Hero Trust Stats Bar --- */



.hero-trust-stats {



    display: flex;



    align-items: center;



    justify-content: center;



    gap: 0;



    margin-top: 40px;



    background: rgba(255, 255, 255, 0.12);



    backdrop-filter: blur(12px);



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



    border: 1px solid rgba(255, 255, 255, 0.2);



    border-radius: 20px;



    padding: 18px 30px;



    flex-wrap: wrap;



}







.trust-stat {



    display: flex;



    flex-direction: column;



    align-items: center;



    padding: 0 25px;



}







.trust-num {



    font-family: var(--font-heading);



    font-weight: 800;



    font-size: 1.6rem;



    color: var(--accent-yellow);



    line-height: 1.2;



}







.trust-label {



    font-size: 0.8rem;



    color: rgba(255, 255, 255, 0.85);



    font-weight: 500;



    letter-spacing: 0.5px;



    text-transform: uppercase;



}







.trust-divider {



    width: 1px;



    height: 35px;



    background: rgba(255, 255, 255, 0.25);



}







@media (max-width: 768px) {



    .hero-trust-stats {



        gap: 10px;



        padding: 15px 15px;



    }







    .trust-stat {



        padding: 5px 12px;



    }







    .trust-num {



        font-size: 1.3rem;



    }







    .trust-divider {



        display: none;



    }



}







/* --- Eligibility Cards V2 --- */



.eligibility-v2 {



    padding: 100px 0;



    background: linear-gradient(180deg, #FFF9E5 0%, #FFFFFF 100%);



    position: relative;



}







.elig-cards-grid {



    display: grid;



    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));



    gap: 28px;



}







.elig-card {



    border-radius: 24px;



    padding: 40px 28px 35px;



    text-align: center;



    position: relative;



    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);



    border: 1px solid rgba(0, 0, 0, 0.04);



    overflow: hidden;



}







.elig-card:hover {



    transform: translateY(-10px);



    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);



}







/* Pastel card backgrounds */



.elig-card-peach {



    background: #FFF0E5;



}







.elig-card-blue {



    background: #E8F4F8;



}







.elig-card-yellow {



    background: #FFF9E5;



}







.elig-card-green {



    background: #EAF5EA;



}







.elig-card-purple {



    background: #F4EEFB;



}







.elig-icon-wrap {



    width: 80px;



    height: 80px;



    border-radius: 50%;



    display: flex;



    align-items: center;



    justify-content: center;



    margin: 0 auto 22px;



    font-size: 2rem;



    color: white;



    transition: all 0.3s ease;



}







.elig-icon-purple {



    background: linear-gradient(135deg, #7C4DFF, #B388FF);



    box-shadow: 0 8px 20px rgba(124, 77, 255, 0.2);



}







.elig-icon-blue {



    background: linear-gradient(135deg, #039BE5, #4FC3F7);



    box-shadow: 0 8px 20px rgba(3, 155, 229, 0.2);



}







.elig-icon-yellow {



    background: linear-gradient(135deg, #FFB300, #FFD54F);



    box-shadow: 0 8px 20px rgba(255, 179, 0, 0.2);



}







.elig-icon-green {



    background: linear-gradient(135deg, #43A047, #81C784);



    box-shadow: 0 8px 20px rgba(67, 160, 71, 0.2);



}







.elig-card:hover .elig-icon-wrap {



    transform: scale(1.1) rotate(5deg);



}







.elig-card h4 {



    font-size: 1.35rem;



    margin-bottom: 8px;



    color: var(--primary-dark);



}







.elig-age-pill {



    display: inline-block;



    padding: 5px 16px;



    background: white;



    color: var(--primary-color);



    font-weight: 700;



    font-size: 0.9rem;



    border-radius: 20px;



    margin-bottom: 15px;



    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);



}







.elig-card p {



    font-size: 0.95rem;



    color: var(--text-dark);



    line-height: 1.5;



    margin-bottom: 18px;



}







.elig-apply-link {



    display: inline-flex;



    align-items: center;



    gap: 6px;



    color: var(--primary-color);



    font-weight: 700;



    font-size: 0.9rem;



    transition: all 0.3s ease;



    text-decoration: none;
}

/* =============================================
   STATISTICS BAR (HOMEPAGE)
   ============================================= */
.hp-stats {
    position: relative;
    z-index: 10;
    margin-top: -60px;
    /* Pulls it up over the hero wave */
    padding: 0 20px;
}

.hp-stats-glass {
    background: #ffffff;
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 20px;
    padding: 30px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 15px 40px rgba(62, 35, 108, 0.08);
    border: 1px solid rgba(62, 35, 108, 0.05);
}

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

.hp-stat-icon {
    width: 48px;
    height: 48px;
    background: rgba(62, 35, 108, 0.06);
    color: var(--primary-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.hp-stat-body {
    display: flex;
    flex-direction: column;
}

.hp-stat-number {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.8rem;
    color: var(--primary-dark);
    line-height: 1;
}

.hp-stat-plus {
    color: var(--accent-yellow);
    font-weight: 700;
    font-size: 1.2rem;
    margin-left: 2px;
}

.hp-stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 4px;
}

.hp-stat-divider {
    width: 1px;
    height: 40px;
    background: rgba(0, 0, 0, 0.06);
}

@media (max-width: 900px) {
    .hp-stats-glass {
        flex-wrap: wrap;
        gap: 20px 0;
        padding: 25px 20px;
    }

    .hp-stat-item {
        flex: 0 0 45%;
        justify-content: flex-start;
    }

    .hp-stat-divider {
        display: none;
    }
}

@media (max-width: 500px) {
    .hp-stat-item {
        flex: 0 0 100%;
        justify-content: center;
    }
}





.elig-apply-link:hover {



    gap: 10px;



    color: var(--accent-blue);



}







/* --- Why Choose V2 --- Glassmorphism Cards --- */



.why-choose-v2 {



    padding: 100px 0;



    background: linear-gradient(135deg, #f8f5ff 0%, #eff8ff 50%, #fff5eb 100%);



    position: relative;



    overflow: hidden;



}







.why-cards-grid {



    display: grid;



    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));



    gap: 30px;



}







.why-card-v2 {



    background: rgba(255, 255, 255, 0.65);



    backdrop-filter: blur(14px);



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



    border: 1px solid rgba(255, 255, 255, 0.8);



    border-radius: 24px;



    padding: 45px 30px 35px;



    text-align: center;



    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);



    box-shadow: 0 8px 30px rgba(62, 35, 108, 0.05);



}







.why-card-v2:hover {



    transform: translateY(-10px);



    box-shadow: 0 20px 50px rgba(62, 35, 108, 0.1);



    background: rgba(255, 255, 255, 0.85);



}







.why-icon-ring {



    width: 85px;



    height: 85px;



    border-radius: 50%;



    display: flex;



    align-items: center;



    justify-content: center;



    margin: 0 auto 25px;



    padding: 4px;



    transition: all 0.4s ease;



}







.why-card-v2:hover .why-icon-ring {



    transform: scale(1.08);



}







.why-card-v2:hover .adm-step-icon-inner {



    background: transparent;



    color: white;



}







.why-card-v2 h4 {



    font-size: 1.3rem;



    margin-bottom: 12px;



    color: var(--primary-dark);



}







.why-card-v2 p {



    font-size: 0.95rem;



    color: var(--text-dark);



    line-height: 1.6;



}







/* --- CTA Urgency Badge --- */



.cta-urgency-badge {



    display: inline-flex;



    align-items: center;



    gap: 8px;



    background: rgba(255, 82, 82, 0.2);



    color: #FF5252;



    padding: 8px 20px;



    border-radius: 30px;



    font-weight: 700;



    font-size: 0.9rem;



    letter-spacing: 0.5px;



    margin-bottom: 15px;



    animation: urgency-pulse 2s ease-in-out infinite;



}







@keyframes urgency-pulse {







    0%,



    100% {



        transform: scale(1);



    }







    50% {



        transform: scale(1.05);



        background: rgba(255, 82, 82, 0.3);



    }



}







/* --- Timeline connector bolder --- */



.adm-connector-line {



    background: linear-gradient(90deg, var(--accent-blue), var(--primary-color)) !important;



    opacity: 0.3 !important;



    height: 4px !important;



}


/* =============================================
   HOMEPAGE v4.0 — Premium Redesign
   Playfair Display + DM Sans
   ============================================= */

/* --- Shared Section Styling --- */
.hp-section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 56px;
}

.hp-section-header h2 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin-bottom: 12px;
    color: var(--primary-color);
}

.hp-section-header h2 em {
    font-style: italic;
    color: var(--primary-light);
}

.hp-section-header p {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.7;
}

.hp-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(108, 93, 211, 0.12), rgba(108, 93, 211, 0.04));
    color: var(--accent-purple);
    font-weight: 700;
    font-size: 0.88rem;
    padding: 8px 24px;
    border-radius: 50px;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: var(--font-body);
    border: 1px solid rgba(108, 93, 211, 0.15);
    box-shadow: 0 4px 16px rgba(108, 93, 211, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* --- Button Variants --- */
.btn-accent {
    background: linear-gradient(135deg, #FFD54F 0%, #FFB300 100%);
    color: var(--primary-dark);
    border: none;
    font-weight: 700;
    box-shadow: 0 4px 20px rgba(255, 179, 0, 0.3);
}

.btn-accent:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(255, 179, 0, 0.45);
}

.btn-ghost {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}


/* ============================================
   HERO SECTION — Playful Preschool Theme
   ============================================ */
.hp-hero {
    position: relative;
    min-height: 85vh;
    background: linear-gradient(160deg, #E3F2FD 0%, #F3E5F5 30%, #FFF8E1 60%, #FCE4EC 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding-top: calc(var(--header-height) + 8px);
    padding-bottom: 90px;
}

/* Playful dot pattern overlay */
.hp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255, 183, 77, 0.15) 2px, transparent 2px),
        radial-gradient(circle, rgba(129, 212, 250, 0.15) 2px, transparent 2px),
        radial-gradient(circle, rgba(244, 143, 177, 0.12) 2px, transparent 2px);
    background-size: 60px 60px, 80px 80px, 100px 100px;
    background-position: 0 0, 30px 30px, 15px 45px;
    pointer-events: none;
    z-index: 0;
}

.hp-hero-bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.hp-hero-glow-1 {
    width: 500px;
    height: 500px;
    background: rgba(129, 212, 250, 0.3);
    top: -10%;
    left: -5%;
    animation: gentlePulse 8s ease-in-out infinite;
}

.hp-hero-glow-2 {
    width: 400px;
    height: 400px;
    background: rgba(255, 183, 77, 0.25);
    top: 20%;
    right: -5%;
    animation: gentlePulse 10s ease-in-out infinite reverse;
}

.hp-hero-glow-3 {
    width: 300px;
    height: 300px;
    background: rgba(165, 214, 167, 0.25);
    bottom: 10%;
    left: 30%;
    animation: gentlePulse 12s ease-in-out infinite 2s;
}

@keyframes gentlePulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Floating decorative elements */
.hp-hero-deco {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    font-size: 2.2rem;
    opacity: 0.5;
}

.hp-hero-deco-1 {
    top: 12%;
    left: 5%;
    animation: floatWiggle 7s ease-in-out infinite;
}

.hp-hero-deco-2 {
    top: 25%;
    right: 8%;
    animation: floatWiggle 9s ease-in-out infinite 1s;
    font-size: 1.8rem;
}

.hp-hero-deco-3 {
    bottom: 20%;
    left: 10%;
    animation: floatWiggle 8s ease-in-out infinite 2s;
    font-size: 2.5rem;
}

.hp-hero-deco-4 {
    top: 8%;
    right: 25%;
    animation: floatWiggle 6s ease-in-out infinite 0.5s;
    font-size: 1.5rem;
}

.hp-hero-deco-5 {
    bottom: 15%;
    right: 15%;
    animation: floatWiggle 10s ease-in-out infinite 3s;
    font-size: 2rem;
}

.hp-hero-deco-6 {
    top: 45%;
    left: 2%;
    animation: floatWiggle 11s ease-in-out infinite 1.5s;
    font-size: 1.6rem;
}

@keyframes floatWiggle {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-15px) rotate(5deg);
    }

    50% {
        transform: translateY(-8px) rotate(-3deg);
    }

    75% {
        transform: translateY(-20px) rotate(4deg);
    }
}

.hp-hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
    position: relative;
    z-index: 2;
}

.hp-hero-content {
    color: #2d1b4e;
}

.hp-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.85);
    border: 2px dashed rgba(255, 183, 77, 0.6);
    color: #e65100;
    padding: 8px 20px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 24px;
    box-shadow: 0 4px 15px rgba(255, 183, 77, 0.2);
}

.hp-hero-content h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.6rem, 5.5vw, 4.2rem);
    font-weight: 800;
    color: #2d1b4e;
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

.hp-hero-accent {
    background: linear-gradient(135deg, #FF7043, #FF4081, #7C4DFF, #448AFF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: italic;
    background-size: 200% 200%;
    animation: rainbowShift 4s ease-in-out infinite;
}

@keyframes rainbowShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.hp-typed-cursor {
    display: inline-block;
    background: linear-gradient(135deg, #FF7043, #FF4081);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: blink 1s step-end infinite;
    font-weight: 300;
    margin-left: 2px;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

.hp-hero-desc {
    font-size: 1.1rem;
    color: rgba(45, 27, 78, 0.75);
    line-height: 1.8;
    margin-bottom: 32px;
    max-width: 520px;
}

.hp-hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}

.hp-hero-trust {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hp-trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(129, 212, 250, 0.4);
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    color: #37474f;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: var(--transition-base);
}

.hp-trust-chip:hover {
    background: #fff;
    border-color: rgba(255, 183, 77, 0.6);
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.hp-trust-chip i {
    font-size: 0.85rem;
}

/* Hero Visual — Playful Frame */
.hp-hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hp-hero-blob {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1;
    border-radius: 60% 40% 55% 45% / 55% 60% 40% 45%;
    overflow: hidden;
    border: 6px solid #fff;
    box-shadow:
        0 0 0 6px rgba(255, 183, 77, 0.35),
        0 0 0 12px rgba(129, 212, 250, 0.2),
        0 20px 60px rgba(124, 77, 255, 0.15);
    animation: blobMorph 15s ease-in-out infinite;
    position: relative;
}

.hp-hero-blob img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes blobMorph {

    0%,
    100% {
        border-radius: 60% 40% 55% 45% / 55% 60% 40% 45%;
    }

    25% {
        border-radius: 45% 55% 40% 60% / 60% 45% 55% 40%;
    }

    50% {
        border-radius: 55% 45% 60% 40% / 40% 55% 45% 60%;
    }

    75% {
        border-radius: 40% 60% 45% 55% / 55% 40% 60% 45%;
    }
}

/* Floating Cards — Structured Badge System */
.hp-hero-float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 12px 18px 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 
        0 8px 32px rgba(45, 27, 78, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04);
    z-index: 3;
    animation: floatBounce 6s ease-in-out infinite;
    pointer-events: none;
    white-space: nowrap;
    transition: transform 0.3s ease;
}

.hp-float-icon-circle {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.85rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.hp-float-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.hp-float-text strong {
    font-size: 0.82rem;
    font-weight: 700;
    color: #2d1b4e;
    line-height: 1.2;
}

.hp-float-text small {
    font-size: 0.68rem;
    color: #90859e;
    font-weight: 500;
    line-height: 1.2;
}

/* Structured positions — diagonal symmetry */
.hp-float-top {
    top: -5%;
    right: -12%;
    animation-delay: 0s;
}

.hp-float-bottom {
    bottom: -5%;
    left: -8%;
    animation-delay: 2.5s;
}

@keyframes floatBounce {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    33% {
        transform: translateY(-12px) rotate(2deg);
    }

    66% {
        transform: translateY(-6px) rotate(-1deg);
    }
}

/* Hero Wave */
.hp-hero-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    z-index: 1;
    line-height: 0;
}

.hp-hero-wave svg {
    width: 100%;
    height: 80px;
}

/* ============================================
   HERO SLIDER
   ============================================ */
.hp-hero-slider-wrapper {
    position: relative;
    width: 100%;
}

.hp-hero-slide {
    display: none;
    width: 100%;
    min-height: 420px;
    animation: fadeSlideIn 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.hp-hero-slide.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes fadeSlideIn {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.hp-slider-controls {
    position: absolute;
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 10;
}

.hp-slider-arrow {
    background: #fff;
    border: 2px solid rgba(124, 77, 255, 0.3);
    color: #5e35b1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: var(--transition-base);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.hp-slider-arrow:hover {
    background: #7C4DFF;
    border-color: #7C4DFF;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(124, 77, 255, 0.3);
}

.hp-slider-dots {
    display: flex;
    gap: 12px;
}

.hp-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(94, 53, 177, 0.25);
    border: 2px solid rgba(94, 53, 177, 0.15);
    cursor: pointer;
    transition: var(--transition-base);
    padding: 0;
}

.hp-dot.active {
    background: #7C4DFF;
    border-color: #7C4DFF;
    transform: scale(1.3);
    box-shadow: 0 0 8px rgba(124, 77, 255, 0.4);
}


/* ============================================
   STATS BAR — Glassmorphic
   ============================================ */
.hp-stats {
    position: relative;
    z-index: 10;
    margin-top: -60px;
    padding: 0 0 10px;
}

.hp-stats-glass {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 0;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-xl);
    padding: 36px 40px;
    box-shadow: 0 20px 60px rgba(62, 35, 108, 0.1), 0 1px 3px rgba(62, 35, 108, 0.06);
}

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

.hp-stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--bg-soft-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.hp-stat-body {
    display: block;
}

.hp-stat-number {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1.1;
    display: inline;
}

.hp-stat-plus {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--accent-yellow);
    margin-left: 2px;
}

.hp-stat-label {
    display: block;
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 2px;
}

.hp-stat-divider {
    width: 1px;
    height: 48px;
    background: linear-gradient(180deg, transparent, rgba(62, 35, 108, 0.12), transparent);
    margin: 0 8px;
}


/* ============================================
   WHY CHOOSE US — BENTO GRID
   ============================================ */
.hp-why {
    padding: 100px 0;
    background: var(--bg-white);
}

.hp-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.hp-bento-card {
    background: var(--bg-light);
    border: 1px solid rgba(62, 35, 108, 0.06);
    border-radius: var(--radius-xl);
    padding: 40px 32px;
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

.hp-bento-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    opacity: 0;
    transition: var(--transition-base);
}

.hp-bento-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.hp-bento-card:hover::before {
    opacity: 1;
}

.hp-bento-wide {
    grid-column: span 2;
}

.hp-bento-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 20px;
    color: #fff;
}

.hp-icon-purple {
    background: linear-gradient(135deg, #5A3A8E, #3E236C);
}

.hp-icon-blue {
    background: linear-gradient(135deg, #64B5F6, #1E88E5);
}

.hp-icon-rose {
    background: linear-gradient(135deg, #F48FB1, #E91E63);
}

.hp-icon-green {
    background: linear-gradient(135deg, #81C784, #43A047);
}

.hp-icon-yellow {
    background: linear-gradient(135deg, #FFD54F, #FFB300);
    color: var(--primary-dark);
}

.hp-icon-orange {
    background: linear-gradient(135deg, #FFB74D, #F57C00);
}

.hp-bento-card h3 {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    margin-bottom: 10px;
    color: var(--primary-dark);
}

.hp-bento-card p {
    color: var(--text-muted);
    line-height: 1.7;
    font-size: 0.95rem;
}


/* ============================================
   PREMIUM MULTIPLE INTELLIGENCE SECTION
   ============================================ */
.hp-mi-premium {
    padding: 110px 0;
    background: #FFFAF8;
    /* very soft warm tint */
    position: relative;
    overflow: hidden;
}

/* Background Accents */
.mi-bg-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.mi-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.5;
}

.mi-blob-1 {
    width: 400px;
    height: 400px;
    background: rgba(126, 87, 194, 0.08);
    top: -100px;
    left: -100px;
}

.mi-blob-2 {
    width: 500px;
    height: 500px;
    background: rgba(239, 108, 0, 0.06);
    bottom: -150px;
    right: -100px;
}

.mi-dots {
    position: absolute;
    width: 200px;
    height: 200px;
    background-image: radial-gradient(rgba(62, 35, 108, 0.1) 2px, transparent 2px);
    background-size: 20px 20px;
    top: 15%;
    right: 5%;
    opacity: 0.6;
}

/* Header */
.mi-header-premium {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto 60px;
}

.mi-subtitle {
    font-size: 1.35rem;
    color: var(--primary-color);
    font-weight: 600;
    margin: -10px 0 20px;
    letter-spacing: 0.01em;
}

/* Premium 8-Card Grid */
.mi-grid-premium {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 60px;
}

.mi-card-premium {
    perspective: 1000px;
    cursor: pointer;
    height: 220px;
}

.mi-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-style: preserve-3d;
}

.mi-card-premium:hover .mi-card-inner {
    transform: rotateY(180deg);
}

.mi-card-front,
.mi-card-back {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Front Side */
.mi-card-front {
    background: #fff;
    border: 1px solid rgba(62, 35, 108, 0.04);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.mi-card-front .mi-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 16px;
    transition: transform 0.3s ease;
}

.mi-card-front h4 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}

.mi-card-front p {
    font-size: 0.88rem;
    color: var(--text-muted);
    font-weight: 500;
    margin: 0;
}

/* Back Side */
.mi-card-back {
    transform: rotateY(180deg);
    color: #fff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    padding: 30px 20px;
}

.mi-card-back p {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 500;
    opacity: 0.95;
    margin: 0 0 16px 0;
}

.mi-cta {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    backdrop-filter: blur(4px);
    transition: background 0.3s ease;
}

/* --- MI Interactive Wheel Graphic --- */
.mi-wheel-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 60px 0 80px;
    position: relative;
    z-index: 1;
}

.mi-wheel {
    position: relative;
    width: 640px;
    height: 640px;
    border-radius: 50%;
    background: conic-gradient(from -22.5deg,
            #604B99 0deg 45deg,
            #8A72C1 45deg 90deg,
            #604B99 90deg 135deg,
            #8A72C1 135deg 180deg,
            #604B99 180deg 225deg,
            #8A72C1 225deg 270deg,
            #604B99 270deg 315deg,
            #8A72C1 315deg 360deg);
    box-shadow: 0 20px 50px rgba(62, 35, 108, 0.18);
}

.mi-wheel-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.mi-wheel-center h3 {
    font-size: 1rem;
    font-weight: 800;
    text-align: center;
    line-height: 1.3;
    color: var(--primary-dark);
    font-family: var(--font-heading);
    margin: 0;
    letter-spacing: 0.05em;
}

.mi-wheel-item {
    position: absolute;
    width: 140px;
    text-align: center;
    color: #fff;
    transform: translate(-50%, -50%);
    z-index: 5;
    transition: transform 0.3s ease;
}

.mi-wheel-item:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

.mi-wheel-item i {
    font-size: 2rem;
    margin-bottom: 8px;
    opacity: 0.95;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    display: block;
}

.mi-wheel-item h4 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: #fff;
    font-family: var(--font-heading);
}

.mi-wheel-item p {
    font-size: 0.72rem;
    line-height: 1.4;
    opacity: 0.88;
    margin: 0;
}

/* Position each item radially around the circle */
.mi-pos-1 {
    top: 12%;
    left: 50%;
}

/* top center */
.mi-pos-2 {
    top: 23%;
    left: 82%;
}

/* top right */
.mi-pos-3 {
    top: 50%;
    left: 88%;
}

/* right */
.mi-pos-4 {
    top: 77%;
    left: 82%;
}

/* bottom right */
.mi-pos-5 {
    top: 88%;
    left: 50%;
}

/* bottom center */
.mi-pos-6 {
    top: 77%;
    left: 18%;
}

/* bottom left */
.mi-pos-7 {
    top: 50%;
    left: 12%;
}

/* left */
.mi-pos-8 {
    top: 23%;
    left: 18%;
}

/* top left */

/* Mobile Fallback List */
.mi-mobile-list {
    display: none;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}

.mi-mob-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    border-left: 4px solid;
}

.mi-mob-item i {
    font-size: 2rem;
    width: 40px;
    text-align: center;
    flex-shrink: 0;
}

.mi-mob-item h4 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 4px;
    color: var(--primary-dark);
}

.mi-mob-item p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}

/* Responsive: swap wheel for list on small screens */
@media (max-width: 800px) {
    .mi-wheel-wrapper {
        display: none !important;
    }

    .mi-mobile-list {
        display: flex !important;
    }
}

/* Benefit Strip */
.mi-strip-premium {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px 40px;
    padding: 30px 40px;
    background: #fff;
    border-radius: 100px;
    box-shadow: 0 10px 40px rgba(62, 35, 108, 0.05);
    margin-bottom: 60px;
}

.mi-strip-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary-dark);
}

.mi-strip-item i {
    color: var(--primary-color);
    font-size: 1.1rem;
}

.mi-strip-item span {
    font-weight: 600;
    font-size: 0.95rem;
}

/* Closing Statement */
.mi-closing-premium {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding-top: 20px;
}

.mi-closing-premium h3 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    line-height: 1.4;
    color: var(--primary-dark);
    font-weight: 700;
    opacity: 0.9;
}

/* Responsive */
@media (max-width: 1024px) {
    .mi-grid-premium {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .mi-strip-premium {
        border-radius: 24px;
        padding: 24px;
        gap: 20px;
        justify-content: flex-start;
    }

    .mi-closing-premium h3 {
        font-size: 1.5rem;
    }
}

@media (max-width: 640px) {
    .mi-grid-premium {
        grid-template-columns: 1fr;
    }

    .mi-card-premium {
        height: 200px;
    }

    .mi-strip-item {
        width: 100%;
    }

    .mi-header-premium h2 {
        font-size: 2rem;
    }

    .mi-subtitle {
        font-size: 1.1rem;
    }
}

/* ============================================
   OUR PROGRAMS — Horizontal Scroll
   ============================================ */
/* ---- Program Card Grid ---- */
.hp-programs {
    padding: 100px 0;
    background: var(--bg-soft-purple);
}

.hp-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.hp-card-link {
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.hp-card-link:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.14);
}

.hp-card-img {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

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

.hp-card-link:hover .hp-card-img img {
    transform: scale(1.06);
}

.hp-card-label {
    padding: 16px 20px;
    text-align: center;
    color: #fff;
}

.hp-card-label span {
    display: block;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
}

.hp-card-label small {
    display: block;
    font-size: 0.82rem;
    opacity: 0.85;
    margin-top: 2px;
    font-weight: 500;
}

@media (max-width: 1024px) {
    .hp-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 480px) {
    .hp-card-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ---- Legacy program card styles (for extended programs) ---- */
.hp-programs-scroll {
    display: flex;
    gap: 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-light) transparent;
}

.hp-programs-scroll::-webkit-scrollbar {
    height: 6px;
}

.hp-programs-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.hp-programs-scroll::-webkit-scrollbar-thumb {
    background: var(--primary-light);
    border-radius: 10px;
}

.hp-prog-card {
    flex: 0 0 320px;
    background: #fff;
    border-radius: var(--radius-xl);
    overflow: hidden;
    scroll-snap-align: start;
    transition: var(--transition-base);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(62, 35, 108, 0.05);
}

.hp-prog-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.hp-prog-img {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.hp-prog-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.hp-prog-card:hover .hp-prog-img img {
    transform: scale(1.08);
}

.hp-prog-age {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--primary-color);
}

.hp-prog-body {
    padding: 24px;
}

.hp-prog-body h4 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    margin-bottom: 8px;
    color: var(--primary-dark);
}

.hp-prog-body p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 14px;
}

.hp-prog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.hp-prog-tags span {
    font-size: 0.78rem;
    color: var(--primary-color);
    background: var(--bg-soft-purple);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-weight: 500;
}

.hp-prog-tags span i {
    margin-right: 4px;
    font-size: 0.7rem;
    color: var(--accent-green);
}

.hp-prog-link {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hp-prog-link i {
    transition: transform 0.3s ease;
}

.hp-prog-link:hover i {
    transform: translateX(4px);
}



/* ============================================
   FUN ACTIVITIES
   ============================================ */
.hp-activities {
    padding: 80px 0 100px;
    background: var(--bg-white);
}

.hp-activities-track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}

.hp-act-card {
    text-align: center;
    cursor: default;
}

.hp-act-card-img {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.hp-act-card:hover .hp-act-card-img {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
}

.hp-act-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.hp-act-card:hover .hp-act-card-img img {
    transform: scale(1.08);
}

.hp-act-card-overlay {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--primary-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.hp-act-card:hover .hp-act-card-overlay {
    transform: scale(1.15) rotate(8deg);
}

.hp-act-card h4 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin-top: 16px;
    margin-bottom: 0;
}

@media (max-width: 1024px) {
    .hp-activities-track {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .hp-activities-track {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}


/* ============================================
   SAFE ENVIRONMENT
   ============================================ */
.hp-safety {
    padding: 100px 0;
    background: var(--bg-soft-purple);
    overflow: hidden;
}

.hp-safety-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hp-safety-text h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    margin-bottom: 8px;
}

.hp-safety-text h2 em {
    font-style: italic;
    color: var(--primary-light);
}

.hp-safety-intro {
    color: var(--text-muted);
    margin-bottom: 28px;
    line-height: 1.7;
}

.hp-safety-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hp-safety-list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #fff;
    padding: 18px 20px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(62, 35, 108, 0.06);
    transition: var(--transition-base);
}

.hp-safety-list li:hover {
    box-shadow: var(--shadow-md);
    transform: translateX(6px);
    border-color: var(--primary-light);
}

.hp-safety-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--bg-soft-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 1.3rem;
    flex-shrink: 0;
}

.hp-safety-list li strong {
    display: block;
    font-size: 1.1rem;
    color: var(--primary-dark);
    margin-bottom: 4px;
}

.hp-safety-list li span {
    font-size: 0.92rem;
    color: var(--text-muted);
}

.hp-safety-visual {
    position: relative;
    display: flex;
    justify-content: center;
}

.hp-safety-img-wrap {
    border-radius: 32px;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    max-width: 440px;
}

.hp-safety-img-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

.hp-safety-badge {
    position: absolute;
    bottom: -20px;
    right: 10%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: #fff;
    padding: 20px 24px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 12px 40px rgba(62, 35, 108, 0.25);
    animation: floatBounce 5s ease-in-out infinite;
}

.hp-safety-badge i {
    font-size: 1.6rem;
    color: var(--accent-yellow);
}

.hp-safety-badge span {
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.3;
}


/* ============================================
   TESTIMONIALS
   ============================================ */
.hp-testimonials {
    padding: 100px 0;
    background: var(--bg-white);
}

.hp-testi-carousel {
    max-width: 720px;
    margin: 0 auto;
    position: relative;
}

.hp-testi-track {
    position: relative;
    min-height: 320px;
}

.hp-testi-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}

.hp-testi-slide.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
    position: relative;
}

.hp-testi-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(62, 35, 108, 0.08);
    border-radius: var(--radius-xl);
    padding: 48px 44px;
    text-align: center;
    box-shadow: var(--shadow-md);
}

.hp-testi-quote {
    font-size: 2.2rem;
    color: var(--primary-light);
    opacity: 0.3;
    margin-bottom: 16px;
}

.hp-testi-stars {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 20px;
}

.hp-testi-stars i {
    color: #FFB300;
    font-size: 1rem;
}

.hp-testi-card p {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--text-dark);
    line-height: 1.8;
    font-style: italic;
    margin-bottom: 28px;
}

.hp-testi-author {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: center;
}

.hp-testi-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-size: cover;
    background-position: center top;
    border: 4px solid #fff;
    box-shadow: 0 8px 24px rgba(62, 35, 108, 0.15);
    flex-shrink: 0;
}

.hp-testi-author h5 {
    font-size: 0.95rem;
    color: var(--primary-dark);
    font-weight: 700;
    margin-bottom: 2px;
    line-height: 1.2;
    text-align: left;
}

.hp-testi-author small {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.hp-testi-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 32px;
}

.hp-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--primary-light);
    background: transparent;
    cursor: pointer;
    transition: var(--transition-base);
    padding: 0;
}

.hp-dot.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: scale(1.2);
}


/* ============================================
   CORPORATE PARTNERSHIPS
   ============================================ */
/* ============================================
   CORPORATE PARTNERSHIPS
   ============================================ */
.hp-corporate {
    padding: 100px 0;
    background: var(--bg-white);
    position: relative;
    overflow: hidden;
}

/* Base Card Redesign: Deep rich purple, high depth */
.hp-corporate-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    background: linear-gradient(135deg, var(--primary-dark) 0%, rgba(62, 35, 108, 0.95) 100%);
    border-radius: var(--radius-xl);
    padding: 60px 80px;
    overflow: hidden;
    color: white;
    box-shadow: 0 40px 80px rgba(62, 35, 108, 0.15);
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Organic swirling background glow */
.hp-corporate-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 213, 79, 0.15) 0%, transparent 65%);
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
    animation: gentleBreath 8s infinite alternate;
}

/* Floating interactive motif locked inside the card */
.hp-corporate-card::after {
    content: '';
    position: absolute;
    bottom: -30px;
    right: 320px;
    width: 180px;
    height: 180px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50,100 Q80,100 90,60 Q90,20 50,10 Q50,40 50,100 Z' fill='%23F48FB1' opacity='0.25'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: -1;
    pointer-events: none;
    animation: floatSlow 7s infinite alternate-reverse;
}

.hp-corporate-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 50px 100px rgba(62, 35, 108, 0.25);
}

.hp-corporate-content h3 {
    font-size: 2.5rem;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    color: white;
}

.hp-corporate-content h3 i {
    color: var(--accent-yellow);
    background: rgba(255, 255, 255, 0.1);
    padding: 16px;
    border-radius: 50%;
    font-size: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.hp-corporate-content p {
    color: rgba(255, 255, 255, 0.85);
    max-width: 600px;
    font-size: 1.15rem;
    line-height: 1.7;
}

/* Vibrant Action Button Override */
.hp-corporate-action .btn-primary {
    background: var(--accent-yellow) !important;
    color: var(--primary-dark) !important;
    border: none;
    font-weight: 700;
    padding: 16px 40px;
    font-size: 1.15rem;
    border-radius: var(--radius-full);
    box-shadow: 0 15px 35px rgba(255, 213, 79, 0.3);
    white-space: nowrap;
}

.hp-corporate-action .btn-primary:hover {
    background: white !important;
    color: var(--primary-dark) !important;
    box-shadow: 0 20px 45px rgba(255, 255, 255, 0.4);
    transform: scale(1.05) translateY(-2px);
}



/* ============================================
   MASONRY GALLERY
   ============================================ */
.hp-gallery {
    padding: 100px 0;
    background: var(--bg-soft-purple);
}

.hp-masonry {
    column-count: 3;
    column-gap: 20px;
}

.hp-masonry-item {
    break-inside: avoid;
    margin-bottom: 20px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.hp-masonry-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s ease, filter 0.4s ease;
}

.hp-masonry-item:hover img {
    transform: scale(1.06);
}

.hp-masonry-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(26, 14, 52, 0.8), transparent);
    transform: translateY(100%);
    transition: transform 0.4s ease;
}

.hp-masonry-item:hover .hp-masonry-caption {
    transform: translateY(0);
}

.hp-masonry-caption span {
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
}


/* ============================================
   CTA BANNER
   ============================================ */
.hp-cta {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(135deg, #1a0e34, #2A164C, #3E236C);
    overflow: hidden;
}

.hp-cta-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(255, 213, 79, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 30%, rgba(129, 212, 250, 0.06) 0%, transparent 50%);
    pointer-events: none;
}

.hp-cta-float-icon {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 213, 79, 0.5);
    font-size: 1.4rem;
    animation: floatBounce 8s ease-in-out infinite;
}

.hp-fi-1 {
    top: 15%;
    left: 8%;
    animation-delay: 0s;
}

.hp-fi-2 {
    top: 25%;
    right: 10%;
    animation-delay: 2s;
}

.hp-fi-3 {
    bottom: 20%;
    left: 20%;
    animation-delay: 4s;
}

.hp-cta-inner {
    text-align: center;
    position: relative;
    z-index: 2;
    max-width: 640px;
    margin: 0 auto;
}

.hp-cta-urgency {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 213, 79, 0.15);
    border: 1px solid rgba(255, 213, 79, 0.3);
    color: var(--accent-yellow);
    padding: 8px 20px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 24px;
    animation: subtlePulse 2s ease-in-out infinite;
}

@keyframes subtlePulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(255, 213, 79, 0.15);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(255, 213, 79, 0);
    }
}

.hp-cta-inner h2 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    color: #fff;
    margin-bottom: 16px;
}

.hp-cta-inner h2 span {
    background: linear-gradient(135deg, #FFD54F, #FFB300);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hp-cta-inner p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.05rem;
    margin-bottom: 36px;
    line-height: 1.7;
}

.hp-cta-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}


/* ============================================
   FOOTER GRADIENT TOP
   ============================================ */
.footer-gradient-top {
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-yellow), var(--primary-light));
}


/* ============================================
   FADE-IN ANIMATIONS
   ============================================ */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}


/* ============================================
   RESPONSIVE — HOMEPAGE
   ============================================ */
@media (max-width: 1024px) {
    .hp-hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .hp-hero-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .hp-hero-actions {
        justify-content: center;
    }

    .hp-hero-trust {
        justify-content: center;
    }

    .hp-hero-blob {
        max-width: 360px;
    }

    .hp-hero-float {
        display: none;
    }

    .hp-hero-deco {
        display: none;
    }

    .hp-stats-glass {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        padding: 28px;
    }

    .hp-stat-divider {
        display: none;
    }

    .hp-bento {
        grid-template-columns: 1fr 1fr;
    }

    .hp-bento-wide {
        grid-column: span 2;
    }

    .hp-safety-row {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hp-safety-visual {
        order: -1;
    }

    .hp-masonry {
        column-count: 2;
    }

    .hp-corporate-card {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 640px) {
    .hp-hero {
        padding-bottom: 80px;
    }

    .hp-hero-content h1 {
        font-size: 2.2rem;
    }

    .hp-hero-blob {
        max-width: 280px;
    }

    .hp-stats-glass {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 24px;
    }

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

    .hp-bento {
        grid-template-columns: 1fr;
    }

    .hp-bento-wide {
        grid-column: span 1;
    }

    .hp-prog-card {
        flex: 0 0 280px;
    }

    .hp-act-pill {
        padding: 10px 18px;
        font-size: 0.85rem;
    }

    .hp-masonry {
        column-count: 1;
    }

    .hp-testi-card {
        padding: 32px 24px;
    }

    .hp-testi-card p {
        font-size: 1rem;
    }

    .hp-corporate-card {
        padding: 32px 24px;
    }

    .hp-cta-actions {
        flex-direction: column;
        align-items: center;
    }

    .hp-section-header h2 {
        font-size: 1.7rem;
    }
}


/* =============================================
   ABOUT US PAGE v4.0 — Premium Redesign
   All ab- prefixed
   ============================================= */

/* ============================================
   ABOUT HERO — Premium v5.0
   ============================================ */
.ab-hero {
    position: relative;
    min-height: 85vh;
    background: linear-gradient(160deg, #0f0820 0%, #1a0e34 20%, #2A164C 45%, #3E236C 70%, #5A3A8E 100%);
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: calc(var(--header-height) + 60px);
    padding-bottom: 140px;
}

/* Subtle grid pattern overlay for texture */
.ab-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 0;
    pointer-events: none;
}

.ab-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
}

.ab-glow-1 {
    width: 500px;
    height: 500px;
    background: rgba(129, 212, 250, 0.1);
    top: -15%;
    right: 8%;
    animation: gentlePulse 8s ease-in-out infinite;
}

.ab-glow-2 {
    width: 400px;
    height: 400px;
    background: rgba(255, 213, 79, 0.07);
    bottom: -5%;
    left: 2%;
    animation: gentlePulse 10s ease-in-out infinite reverse;
}

.ab-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.ab-hero-content {
    color: #fff;
}

.ab-hero-content h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 22px;
    letter-spacing: -0.02em;
}

.ab-hero-content h1 em {
    font-style: italic;
    background: linear-gradient(135deg, #FFD54F, #FFB300, #FFC107);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ab-hero-content p {
    font-size: 1.08rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.85;
    margin-bottom: 32px;
    max-width: 480px;
}

.ab-hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* About Visual — Premium Image Treatment */
.ab-hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Decorative accent blob behind the image */
.ab-hero-visual::before {
    content: '';
    position: absolute;
    width: 110%;
    height: 110%;
    top: -5%;
    left: -5%;
    background: conic-gradient(
        from 0deg,
        rgba(255, 213, 79, 0.15),
        rgba(129, 212, 250, 0.12),
        rgba(165, 214, 167, 0.1),
        rgba(244, 143, 177, 0.12),
        rgba(255, 213, 79, 0.15)
    );
    border-radius: 30px;
    filter: blur(40px);
    animation: abHeroGlowRotate 12s linear infinite;
    z-index: 0;
    pointer-events: none;
}

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

.ab-hero-img-frame {
    position: relative;
    z-index: 1;
    border-radius: 20px;
    overflow: hidden;
    max-width: 440px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.25),
        0 32px 80px rgba(0, 0, 0, 0.2);
    border: 3px solid rgba(255, 255, 255, 0.15);
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.5s ease;
}

.ab-hero-img-frame:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.3),
        0 40px 100px rgba(0, 0, 0, 0.2);
}

/* Gradient shimmer overlay on the image */
.ab-hero-img-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 17px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.08) 0%,
        transparent 40%,
        transparent 60%,
        rgba(62, 35, 108, 0.25) 100%
    );
    pointer-events: none;
    z-index: 2;
}

.ab-hero-img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ab-hero-img-frame:hover img {
    transform: scale(1.05);
}

/* Floating Badges — Premium Glassmorphism */
.ab-hero-float {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    padding: 8px 16px 8px 8px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.01em;
    color: var(--primary-dark);
    z-index: 3;
    animation: floatBounce 6s ease-in-out infinite;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
    white-space: nowrap;
}

.ab-hero-float:hover {
    transform: translateY(-6px) scale(1.05);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.18),
        0 4px 12px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    z-index: 4;
    animation-play-state: paused;
}

.ab-float-icon-wrap {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.ab-float-icon-wrap i {
    font-size: 0.9rem;
}

.ab-float-tl {
    top: 2%;
    left: -12%;
    animation-delay: 0s;
}

.ab-float-tr {
    top: 10%;
    right: -10%;
    animation-delay: 1.5s;
}

.ab-float-bl {
    bottom: 14%;
    left: -10%;
    animation-delay: 4.5s;
}

.ab-float-br {
    bottom: 4%;
    right: -6%;
    animation-delay: 3s;
}

.ab-hero-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    z-index: 1;
    line-height: 0;
}

.ab-hero-wave svg {
    width: 100%;
    height: 80px;
}


/* ============================================
   VISION & MISSION
   ============================================ */
.ab-vm {
    padding: 80px 0 100px;
    background: #fff;
}

.ab-vm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.ab-vm-card {
    position: relative;
    padding: 48px 40px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: var(--transition-base);
}

.ab-vm-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.ab-vm-vision {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f5e9 100%);
    border: 1px solid rgba(0, 188, 212, 0.12);
}

.ab-vm-mission {
    background: linear-gradient(135deg, #fffde7 0%, #fff8e1 100%);
    border: 1px solid rgba(255, 179, 0, 0.12);
}

.ab-vm-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 24px;
    color: #fff;
}

.ab-vm-vision .ab-vm-icon {
    background: linear-gradient(135deg, #00BCD4, #00897B);
}

.ab-vm-mission .ab-vm-icon {
    background: linear-gradient(135deg, #FFD54F, #FFB300);
    color: var(--primary-dark);
}

.ab-vm-card h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-bottom: 12px;
    color: var(--primary-dark);
}

.ab-vm-card p {
    color: var(--text-muted);
    line-height: 1.75;
    font-size: 0.98rem;
}


/* ============================================
   LEADERSHIP
   ============================================ */
.ab-leadership {
    padding: 100px 0;
    background: var(--bg-soft-purple);
}

.ab-leaders-grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.ab-leader {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 36px;
    align-items: start;
    background: #fff;
    border-radius: var(--radius-xl);
    padding: 36px;
    border: 1px solid rgba(62, 35, 108, 0.06);
    transition: var(--transition-base);
}

.ab-leader:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.ab-leader-img {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 1;
}

.ab-leader-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.ab-leader:hover .ab-leader-img img {
    transform: scale(1.05);
}

.ab-leader-info h4 {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    color: var(--primary-dark);
    margin-bottom: 6px;
}

.ab-leader-role {
    display: inline-block;
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--primary-light);
    background: var(--bg-soft-purple);
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ab-leader-info p {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.7;
}


/* ============================================
   EDUCATORS
   ============================================ */
.ab-educators {
    padding: 100px 0;
    background: #fff;
}

.ab-edu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 28px;
}

.ab-edu-card {
    background: var(--bg-light);
    border: 1px solid rgba(62, 35, 108, 0.06);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: var(--transition-base);
}

.ab-edu-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.ab-edu-photo {
    height: 240px;
    overflow: hidden;
    position: relative;
}

.ab-edu-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.6s ease;
}

.ab-edu-card:hover .ab-edu-photo img {
    transform: scale(1.08);
}

.ab-edu-body {
    padding: 24px;
}

.ab-edu-body h5 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--primary-dark);
    margin-bottom: 6px;
}

.ab-edu-role {
    display: inline-block;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--primary-color);
    background: var(--bg-soft-purple);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ab-edu-body p {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.65;
}






/* ============================================
   CAMPUS TOUR — Horizontal Scroll
   ============================================ */
.ab-campus {
    padding: 100px 0;
    background: #fff;
}

.ab-campus-scroll {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-light) transparent;
}

.ab-campus-scroll::-webkit-scrollbar {
    height: 6px;
}

.ab-campus-scroll::-webkit-scrollbar-thumb {
    background: var(--primary-light);
    border-radius: 10px;
}

.ab-campus-card {
    flex: 0 0 380px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    scroll-snap-align: start;
    position: relative;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
}

.ab-campus-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.ab-campus-card img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.ab-campus-card:hover img {
    transform: scale(1.06);
}

.ab-campus-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(26, 14, 52, 0.8), transparent);
    transform: translateY(100%);
    transition: transform 0.4s ease;
}

.ab-campus-card:hover .ab-campus-caption {
    transform: translateY(0);
}

.ab-campus-caption span {
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
}


/* ============================================
   CTA STRIP
   ============================================ */
.ab-cta {
    padding: 80px 0;
    background: linear-gradient(135deg, #1a0e34, #2A164C, #3E236C);
    position: relative;
    overflow: hidden;
}

.ab-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    z-index: 2;
}

.ab-cta-text h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: #fff;
    margin-bottom: 8px;
}

.ab-cta-text p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
}

.ab-cta-actions {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
    flex-wrap: wrap;
}


/* ============================================
   ABOUT — RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .ab-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .ab-hero-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .ab-hero-actions {
        justify-content: center;
    }

    .ab-hero-float {
        display: none;
    }

    .ab-hero-img-frame {
        max-width: 380px;
        margin: 0 auto;
    }

    .ab-vm-grid {
        grid-template-columns: 1fr;
    }

    .ab-leader {
        grid-template-columns: 160px 1fr;
        gap: 24px;
        padding: 28px;
    }


    .ab-cta-inner {
        flex-direction: column;
        text-align: center;
    }

    .ab-cta-actions {
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .ab-hero {
        padding-bottom: 80px;
    }

    .ab-hero-content h1 {
        font-size: 2rem;
    }

    .ab-leader {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 16px;
    }

    .ab-leader-img {
        max-width: 180px;
        margin: 0 auto;
    }

    .ab-edu-grid {
        grid-template-columns: 1fr;
    }

    .ab-campus-card {
        flex: 0 0 300px;
    }

    .ab-campus-card img {
        height: 220px;
    }

    .ab-cta-actions {
        flex-direction: column;
        align-items: center;
    }
}


/* =============================================
   GALLERY PAGE v4.0 — Premium Redesign
   All gl- prefixed
   ============================================= */

/* ============================================
   GALLERY HERO
   ============================================ */
.gl-hero {
    position: relative;
    padding: calc(var(--header-height) + 100px) 0 160px;
    background: linear-gradient(160deg, #1a0e34 0%, #2A164C 30%, #3E236C 60%, #5A3A8E 100%);
    overflow: hidden;
    color: #fff;
}

.gl-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
}

.gl-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
}

.gl-glow-1 {
    width: 440px;
    height: 440px;
    background: rgba(255, 213, 79, 0.1);
    top: -10%;
    right: 5%;
    animation: gentlePulse 8s ease-in-out infinite;
}

.gl-glow-2 {
    width: 350px;
    height: 350px;
    background: rgba(138, 114, 193, 0.12);
    bottom: 10%;
    left: 10%;
    animation: gentlePulse 10s ease-in-out infinite reverse;
}

.gl-hero-content {
    position: relative;
    z-index: 2;
    text-align: left;
}

.gl-hero-content h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 800;
    color: var(--text-light);
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.gl-hero-content h1 em {
    font-style: italic;
    background: linear-gradient(135deg, var(--accent-yellow), #FFB300);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gl-hero-content p {
    font-size: 1.12rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
    max-width: 500px;
    margin-bottom: 0;
}

/* Gallery Hero Visual & Blob Container */
.gl-hero-visual {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
}

.gl-hero-blob {
    width: 100%;
    max-width: 440px;
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    overflow: hidden;
    animation: morphBlob 12s ease-in-out infinite alternate, floatSlow 6s ease-in-out infinite alternate;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.gl-hero-blob img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.gl-hero-blob:hover img {
    transform: scale(1.08);
}

.gl-hero-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    z-index: 1;
    line-height: 0;
}

.gl-hero-wave svg {
    width: 100%;
    height: 70px;
}


/* ============================================
   FILTER TABS
   ============================================ */
.gl-filters {
    padding: 0 0 20px;
    background: #fff;
    position: sticky;
    top: var(--header-height);
    z-index: 50;
    border-bottom: 1px solid rgba(62, 35, 108, 0.06);
}

.gl-filter-bar {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 20px 0 0;
    flex-wrap: wrap;
}

.gl-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: var(--radius-pill);
    border: 2px solid rgba(62, 35, 108, 0.1);
    background: transparent;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: var(--transition-base);
    font-family: var(--font-body);
}

.gl-filter-btn i {
    font-size: 0.82rem;
}

.gl-filter-btn:hover {
    border-color: var(--primary-light);
    color: var(--primary-color);
    background: var(--bg-soft-purple);
}

.gl-filter-btn.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 4px 16px rgba(62, 35, 108, 0.2);
}


/* ============================================
   GALLERY CATEGORY SECTIONS
   ============================================ */
.gl-category {
    padding: 80px 0;
    background: #fff;
}

.gl-category-alt {
    background: var(--bg-soft-purple);
}

.gl-cat-header {
    text-align: center;
    max-width: 540px;
    margin: 0 auto 48px;
}

.gl-cat-header h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    color: var(--primary-color);
    margin-bottom: 8px;
}

.gl-cat-header h2 em {
    font-style: italic;
    color: var(--primary-light);
}

.gl-cat-header p {
    font-size: 0.98rem;
    color: var(--text-muted);
    line-height: 1.6;
}


/* ============================================
   MASONRY GRID
   ============================================ */
.gl-masonry {
    display: grid;
    gap: 20px;
}

.gl-masonry-4 {
    grid-template-columns: repeat(4, 1fr);
}

.gl-masonry-3 {
    grid-template-columns: repeat(3, 1fr);
}

.gl-item {
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: var(--transition-base);
}

.gl-item:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.gl-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.gl-item:hover img {
    transform: scale(1.06);
}

.gl-item-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26, 14, 52, 0.85) 0%, rgba(26, 14, 52, 0.2) 40%, transparent 100%);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.gl-item:hover .gl-item-overlay {
    opacity: 1;
}

.gl-item-overlay span {
    color: #fff;
    font-weight: 600;
    font-size: 0.92rem;
    max-width: 70%;
}

.gl-item-overlay i {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.8rem;
    flex-shrink: 0;
    transition: var(--transition-fast);
}

.gl-item:hover .gl-item-overlay i {
    background: rgba(255, 255, 255, 0.35);
}


/* ============================================
   LIGHTBOX MODAL
   ============================================ */
.gl-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(10, 5, 20, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.gl-lightbox.active {
    opacity: 1;
    pointer-events: all;
}

.gl-lb-content {
    max-width: 85vw;
    max-height: 85vh;
    position: relative;
}

.gl-lb-content img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    display: block;
    transition: transform 0.3s ease;
}

.gl-lightbox.active .gl-lb-content img {
    transform: scale(1);
}

.gl-lb-caption {
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    font-size: 0.95rem;
    margin-top: 16px;
}

.gl-lb-close {
    position: absolute;
    top: 24px;
    right: 28px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-base);
    z-index: 10;
}

.gl-lb-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.gl-lb-prev,
.gl-lb-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-base);
    z-index: 10;
}

.gl-lb-prev {
    left: 24px;
}

.gl-lb-next {
    right: 24px;
}

.gl-lb-prev:hover,
.gl-lb-next:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
}


/* ============================================
   GALLERY — RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .gl-hero-grid {
        gap: 40px;
    }

    .gl-masonry-4 {
        grid-template-columns: repeat(3, 1fr);
    }

    .gl-masonry-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .gl-lb-prev {
        left: 12px;
    }

    .gl-lb-next {
        right: 12px;
    }
}

@media (max-width: 991px) {
    .gl-hero {
        padding-bottom: 120px;
    }

    .gl-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 50px;
    }

    .gl-hero-content {
        text-align: center;
    }

    .gl-hero-content p {
        margin: 0 auto;
    }

    .gl-hero-blob {
        max-width: 320px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .gl-masonry-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .gl-masonry-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .gl-filter-btn {
        padding: 8px 16px;
        font-size: 0.82rem;
    }

    .gl-item-overlay {
        opacity: 1;
    }

    .gl-category {
        padding: 60px 0;
    }

    .gl-lb-prev,
    .gl-lb-next {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {

    .gl-masonry-4,
    .gl-masonry-3 {
        grid-template-columns: 1fr;
    }

    .gl-hero-content h1 {
        font-size: 1.8rem;
    }

    .gl-hero {
        padding-bottom: 80px;
    }

    .gl-filter-bar {
        gap: 8px;
    }
}


/* =============================================
   PROGRAMS PAGE v4.0 — Premium Redesign
   All pg- prefixed
   ============================================= */

/* ============================================
   PROGRAMS HERO
   ============================================ */
.pg-hero {
    position: relative;
    padding: calc(var(--header-height) + 80px) 0 120px;
    background: linear-gradient(160deg, #1a0e34 0%, #2A164C 30%, #3E236C 60%, #5A3A8E 100%);
    text-align: center;
    overflow: hidden;
}

.pg-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
}

.pg-glow-1 {
    width: 420px;
    height: 420px;
    background: rgba(129, 212, 250, 0.1);
    top: -8%;
    left: 5%;
    animation: gentlePulse 8s ease-in-out infinite;
}

.pg-glow-2 {
    width: 350px;
    height: 350px;
    background: rgba(255, 213, 79, 0.08);
    bottom: 0;
    right: 8%;
    animation: gentlePulse 10s ease-in-out infinite reverse;
}

.pg-hero-content {
    position: relative;
    z-index: 2;
    max-width: 680px;
    margin: 0 auto;
}

.pg-hero-content h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.pg-hero-content h1 em {
    font-style: italic;
    background: linear-gradient(135deg, #FFD54F, #FFB300);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pg-hero-content p {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.7;
    max-width: 540px;
    margin: 0 auto 28px;
}

.pg-hero-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.pg-hero-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    z-index: 1;
    line-height: 0;
}

.pg-hero-wave svg {
    width: 100%;
    height: 70px;
}


/* ============================================
   LEARNING PHILOSOPHY PILLARS
   ============================================ */
.pg-philosophy {
    padding: 100px 0;
    background: #fff;
}

.pg-pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.pg-pillar {
    text-align: center;
    padding: 36px 24px;
    border-radius: var(--radius-xl);
    background: var(--bg-light);
    border: 1px solid rgba(62, 35, 108, 0.06);
    transition: var(--transition-base);
}

.pg-pillar:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.pg-pillar-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin: 0 auto 20px;
    color: #fff;
}

.pg-pillar h4 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--primary-dark);
    margin-bottom: 8px;
}

.pg-pillar p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}


/* ============================================
   PROGRAM SHOWCASE ROWS
   ============================================ */
.pg-program {
    padding: 80px 0;
    background: #fff;
}

.pg-bg-warm {
    background: var(--bg-soft-purple);
}

.pg-program-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.pg-row-reverse {
    direction: rtl;
}

.pg-row-reverse>* {
    direction: ltr;
}

.pg-age-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-soft-purple);
    color: var(--primary-color);
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 0.82rem;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pg-age-badge i {
    font-size: 0.85rem;
}

.pg-prog-text h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--primary-dark);
    margin-bottom: 12px;
}

.pg-prog-text>p {
    color: var(--text-muted);
    line-height: 1.75;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.pg-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.pg-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    color: var(--text-dark);
    font-weight: 500;
}

.pg-features li i {
    color: var(--accent-green);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.pg-prog-img {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.pg-prog-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
    min-height: 320px;
}

.pg-prog-img:hover img {
    transform: scale(1.04);
}


/* ============================================
   DAILY TIMELINE
   ============================================ */
.pg-timeline {
    padding: 100px 0;
    background: var(--bg-soft-purple);
}

.pg-timeline-track {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}

.pg-tl-step {
    text-align: center;
    flex: 0 0 140px;
    padding: 0 8px;
}

.pg-tl-time {
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--primary-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.pg-tl-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin: 0 auto 12px;
    box-shadow: 0 6px 20px rgba(62, 35, 108, 0.2);
}

.pg-tl-step h5 {
    font-family: var(--font-heading);
    font-size: 0.92rem;
    color: var(--primary-dark);
    line-height: 1.3;
}

.pg-tl-connector {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-light), rgba(90, 58, 142, 0.2));
    margin-top: 40px;
    flex-shrink: 0;
}


/* ============================================
   CORPORATE CHILDCARE
   ============================================ */
.pg-corporate {
    padding: 100px 0;
    background: linear-gradient(180deg, #fff 0%, var(--bg-soft-purple) 100%);
    position: relative;
    overflow: hidden;
}

.pg-models-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 48px;
}

.pg-model-card {
    text-align: center;
    padding: 40px 28px 32px;
    border-radius: var(--radius-xl);
    background: #fff;
    border: 1px solid rgba(62, 35, 108, 0.06);
    border-top: 5px solid var(--accent-purple);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    position: relative;
}

.pg-model-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(62, 35, 108, 0.12);
    border-left-color: rgba(62, 35, 108, 0.1);
    border-right-color: rgba(62, 35, 108, 0.1);
    border-bottom-color: rgba(62, 35, 108, 0.1);
}

.pg-model-icon-wrap {
    margin-bottom: 20px;
}

.pg-model-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin: 0 auto;
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.pg-model-card:hover .pg-model-icon {
    transform: scale(1.1) rotate(-5deg);
}

.pg-model-card h4 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--primary-dark);
    margin-bottom: 10px;
    font-weight: 700;
}

.pg-model-card p {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.7;
    margin-bottom: 16px;
}

.pg-model-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-top: 4px;
}

.pg-benefits-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    background: linear-gradient(135deg, var(--primary-dark) 0%, #4a2d8a 50%, rgba(62, 35, 108, 0.95) 100%);
    color: white;
    box-shadow: 0 30px 60px rgba(62, 35, 108, 0.2);
    border-radius: var(--radius-xl);
    padding: 40px 44px;
    position: relative;
    overflow: hidden;
}

.pg-benefits-strip::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.pg-benefits-strip h4,
.pg-benefits-strip ul li {
    color: white;
}

.pg-benefits-text h4 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: white;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pg-benefits-text h4 i {
    color: var(--accent-yellow);
}

.pg-benefits-text ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pg-benefits-text ul li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
}

.pg-benefits-text ul li i {
    color: var(--accent-green);
    font-size: 0.85rem;
}

.pg-benefits-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    flex-shrink: 0;
}




/* ============================================
   AIIMS BRANCH HIGHLIGHT
   ============================================ */
.pg-branch-highlight {
    display: flex;
    align-items: center;
    gap: 24px;
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
    border: 1px solid rgba(13, 71, 161, 0.12);
    border-radius: var(--radius-xl);
    padding: 28px 36px;
    margin-bottom: 40px;
}

.pg-branch-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, #1565C0, #0D47A1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 6px 20px rgba(13, 71, 161, 0.25);
}

.pg-branch-text h4 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: #0D47A1;
    margin-bottom: 6px;
}

.pg-branch-text p {
    color: #37474F;
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0;
}


/* ============================================
   CORPORATE PARTNER LOGOS
   ============================================ */
.pg-partners {
    margin-top: 56px;
    text-align: center;
    padding-top: 10px;
}

.pg-partners-divider {
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-purple), var(--accent-blue), var(--accent-green));
    border-radius: 3px;
    margin: 0 auto 32px;
}

.pg-partners-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--primary-dark);
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    letter-spacing: 0.01em;
}

.pg-partners-title i {
    color: var(--accent-yellow);
    font-size: 1.15rem;
}

.pg-partners-logos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 850px;
    margin: 0 auto;
    align-items: center;
}

.pg-partner-logo {
    width: 100%;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(62, 35, 108, 0.08);
    border-radius: 16px;
    padding: 16px 20px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.pg-partner-logo:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(62, 35, 108, 0.1);
    border-color: rgba(62, 35, 108, 0.15);
}

.pg-partner-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    filter: grayscale(15%);
    transition: filter 0.3s ease, transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.pg-partner-logo.aiims-highlight img {
    transform: scale(1.25);
    filter: grayscale(0%);
}

.pg-partner-logo:hover img {
    filter: grayscale(0%);
}

.pg-partner-logo.aiims-highlight:hover img {
    transform: scale(1.35);
}


/* ============================================
   PROGRAMS — RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .pg-pillars {
        grid-template-columns: 1fr 1fr;
    }

    .pg-program-row,
    .pg-row-reverse {
        grid-template-columns: 1fr;
        gap: 32px;
        direction: ltr;
    }

    .pg-prog-img img {
        min-height: 260px;
    }

    .pg-models-grid {
        grid-template-columns: 1fr;
    }

    .pg-benefits-strip {
        flex-direction: column;
        text-align: center;
    }

    .pg-branch-highlight {
        flex-direction: column;
        text-align: center;
        padding: 24px;
    }

    .pg-partners-logos {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        max-width: 550px;
    }

    .pg-partner-logo {
        height: 80px;
        padding: 12px 16px;
    }

    .pg-tl-connector {
        display: none;
    }

    .pg-timeline-track {
        gap: 24px;
        justify-content: center;
    }

    .pg-tl-step {
        flex: 0 0 auto;
    }
}

@media (max-width: 640px) {
    .pg-hero-content h1 {
        font-size: 1.9rem;
    }

    .pg-pillars {
        grid-template-columns: 1fr;
    }

    .pg-timeline-track {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .pg-tl-step {
        flex: unset;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 16px;
        text-align: left;
    }

    .pg-tl-icon {
        margin: 0;
        flex-shrink: 0;
    }

    .pg-tl-time {
        margin-bottom: 0;
        min-width: 70px;
    }

    .pg-benefits-strip {
        padding: 28px 24px;
    }

    .pg-branch-highlight {
        padding: 20px;
        gap: 16px;
    }

    .pg-partner-logo {
        height: 72px;
        padding: 10px 14px;
    }

    .pg-partners-logos {
        gap: 16px;
    }
}


/* ============================================
   SHARED ICON COLOR UTILITIES
   ============================================ */
.hp-icon-yellow {
    background: linear-gradient(135deg, #FFD54F, #FFB300);
}

.hp-icon-rose {
    background: linear-gradient(135deg, #f48fb1, #e91e63);
}

.hp-icon-green {
    background: linear-gradient(135deg, #66BB6A, #388E3C);
}

.hp-icon-purple {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
}

.hp-icon-blue {
    background: linear-gradient(135deg, #42A5F5, #1565C0);
}


/* =============================================
   ADMISSIONS PAGE v4.0 — Premium Redesign
   All ad- prefixed
   ============================================= */

/* ============================================
   ADMISSIONS HERO
   ============================================ */
.ad-hero {
    position: relative;
    padding: calc(var(--header-height) + 80px) 0 160px;
    background: linear-gradient(160deg, #1a0e34 0%, #2A164C 30%, #3E236C 60%, #5A3A8E 100%);
    text-align: center;
    overflow: hidden;
}

.ad-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
}

.ad-glow-1 {
    width: 420px;
    height: 420px;
    background: rgba(255, 183, 77, 0.1);
    top: -5%;
    right: 10%;
    animation: gentlePulse 8s ease-in-out infinite;
}

.ad-glow-2 {
    width: 350px;
    height: 350px;
    background: rgba(129, 212, 250, 0.08);
    bottom: 5%;
    left: 5%;
    animation: gentlePulse 10s ease-in-out infinite reverse;
}

.ad-hero-content {
    position: relative;
    z-index: 2;
    max-width: 680px;
    margin: 0 auto;
}

.ad-hero-content h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.ad-hero-content h1 em {
    font-style: italic;
    background: linear-gradient(135deg, #FFD54F, #FFB300);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ad-hero-content p {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.7;
    max-width: 540px;
    margin: 0 auto 28px;
}

.ad-hero-btns {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Trust Stats Bar */
.ad-trust-bar {
    position: relative;
    z-index: 2;
    margin-top: 48px;
}

.ad-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-xl);
    padding: 24px 0;
}

.ad-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
}

.ad-trust-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
    width: 1px;
    background: rgba(255, 255, 255, 0.15);
}

.ad-trust-num {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
}

.ad-trust-label {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ad-hero-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    z-index: 1;
    line-height: 0;
}

.ad-hero-wave svg {
    width: 100%;
    height: 70px;
}


/* ============================================
   ADMISSION PROCESS STEPS
   ============================================ */
.ad-process {
    padding: 100px 0;
    background: #fff;
}

.ad-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
}

.ad-step {
    text-align: center;
    flex: 0 0 200px;
    padding: 0 12px;
    position: relative;
}

.ad-step-num {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 800;
    color: rgba(62, 35, 108, 0.06);
    line-height: 1;
    margin-bottom: 12px;
}

.ad-step-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    margin: 0 auto 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.ad-step h4 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--primary-dark);
    margin-bottom: 8px;
}

.ad-step p {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 12px;
}

.ad-step-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-light);
    background: var(--bg-soft-purple);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
}

.ad-step-line {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-light), rgba(90, 58, 142, 0.15));
    margin-top: 65px;
    flex-shrink: 0;
}


/* ============================================
   ELIGIBILITY CARDS
   ============================================ */
.ad-eligibility {
    padding: 100px 0;
    background: var(--bg-soft-purple);
}

.ad-elig-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px;
}

.ad-elig-card {
    text-align: center;
    background: #fff;
    border: 1px solid rgba(62, 35, 108, 0.06);
    border-radius: var(--radius-xl);
    padding: 36px 24px 28px;
    transition: var(--transition-base);
}

.ad-elig-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.ad-elig-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    margin: 0 auto 16px;
}

.ad-elig-card h4 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--primary-dark);
    margin-bottom: 8px;
}

.ad-elig-age {
    display: inline-block;
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--primary-color);
    background: var(--bg-soft-purple);
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ad-elig-card p {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin-bottom: 14px;
}

.ad-elig-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition-fast);
}

.ad-elig-link:hover {
    color: var(--primary-dark);
    gap: 10px;
}


/* ============================================
   DOCUMENTS & FORM SPLIT
   ============================================ */
.ad-form-section {
    padding: 100px 0;
    background: #fff;
}

.ad-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

.ad-docs h3 {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    color: var(--primary-dark);
    margin-bottom: 8px;
}

.ad-docs h3 em {
    font-style: italic;
    color: var(--primary-light);
}

.ad-docs>p {
    color: var(--text-muted);
    margin-bottom: 24px;
    line-height: 1.6;
}

.ad-docs-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
}

.ad-docs-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.ad-docs-list li i {
    color: var(--accent-green);
    font-size: 1rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.ad-docs-list li strong {
    display: block;
    font-size: 0.95rem;
    color: var(--primary-dark);
    margin-bottom: 2px;
}

.ad-docs-list li span {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.ad-help-note {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-soft-purple);
    border: 1px solid rgba(62, 35, 108, 0.08);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
}

.ad-help-note i {
    color: var(--primary-color);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.ad-help-note p {
    font-size: 0.9rem;
    color: var(--text-dark);
}

/* Form Card */
.ad-form-card {
    background: var(--bg-light);
    border: 1px solid rgba(62, 35, 108, 0.06);
    border-radius: var(--radius-xl);
    padding: 36px;
    position: relative;
}

.ad-form-topbar {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--primary-color), #42A5F5, var(--accent-yellow));
    margin-bottom: 24px;
}

.ad-form-card h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--primary-dark);
    margin-bottom: 6px;
}

.ad-form-card>p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 24px;
}

.ad-field {
    margin-bottom: 16px;
}

.ad-field label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary-dark);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ad-field input,
.ad-field select,
.ad-field textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid rgba(62, 35, 108, 0.12);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--text-dark);
    background: #fff;
    transition: var(--transition-fast);
    outline: none;
}

.ad-field input:focus,
.ad-field select:focus,
.ad-field textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(62, 35, 108, 0.08);
}

.ad-field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%236b7280'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.ad-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.btn-block {
    width: 100%;
    text-align: center;
    justify-content: center;
}


/* ============================================
   WHY CHOOSE US
   ============================================ */
.ad-why {
    padding: 100px 0;
    background: var(--bg-soft-purple);
}

.ad-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.ad-why-card {
    text-align: center;
    background: #fff;
    border: 1px solid rgba(62, 35, 108, 0.06);
    border-radius: var(--radius-xl);
    padding: 36px 24px;
    transition: var(--transition-base);
}

.ad-why-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.ad-why-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
    margin: 0 auto 20px;
}

.ad-why-card h4 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--primary-dark);
    margin-bottom: 8px;
}

.ad-why-card p {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Urgency Pill */
.ad-urgency-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 87, 34, 0.15);
    color: #FF5722;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 0.82rem;
    margin-bottom: 12px;
    animation: gentlePulse 2s ease-in-out infinite;
}


/* ============================================
   ADMISSIONS — RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .ad-trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 20px;
    }

    .ad-trust-item:nth-child(2)::after {
        display: none;
    }

    .ad-steps {
        flex-wrap: wrap;
        gap: 24px;
        justify-content: center;
    }

    .ad-step-line {
        display: none;
    }

    .ad-step {
        flex: 0 0 180px;
    }

    .ad-elig-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .ad-form-grid {
        grid-template-columns: 1fr;
    }

    .ad-why-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .ad-hero-content h1 {
        font-size: 1.9rem;
    }

    .ad-hero {
        padding-bottom: 120px;
    }

    .ad-trust-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ad-trust-item::after {
        display: none !important;
    }

    .ad-step {
        flex: 0 0 100%;
        max-width: 260px;
    }

    .ad-elig-grid {
        grid-template-columns: 1fr;
    }

    .ad-field-row {
        grid-template-columns: 1fr;
    }

    .ad-why-grid {
        grid-template-columns: 1fr;
    }

    .ad-hero-btns {
        flex-direction: column;
        align-items: center;
    }
}


/* =============================================
   CONTACT PAGE v4.0 — Premium Redesign
   All ct- prefixed
   ============================================= */

/* ============================================
   CONTACT HERO
   ============================================ */
.ct-hero {
    position: relative;
    padding: calc(var(--header-height) + 80px) 0 120px;
    background: linear-gradient(160deg, #1a0e34 0%, #2A164C 30%, #3E236C 60%, #5A3A8E 100%);
    overflow: hidden;
}

.ct-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    align-items: center;
    gap: 60px;
    position: relative;
    z-index: 2;
}

.ct-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
}

.ct-glow-1 {
    width: 380px;
    height: 380px;
    background: rgba(165, 214, 167, 0.1);
    top: -10%;
    left: 8%;
    animation: gentlePulse 9s ease-in-out infinite;
}

.ct-glow-2 {
    width: 320px;
    height: 320px;
    background: rgba(255, 183, 77, 0.08);
    bottom: -5%;
    right: 10%;
    animation: gentlePulse 11s ease-in-out infinite reverse;
}

.ct-hero-content {
    text-align: left;
}

.ct-hero-content h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.ct-hero-content h1 em {
    font-style: italic;
    background: linear-gradient(135deg, #FFD54F, #FFB300);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ct-hero-content p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    margin-bottom: 0;
}

/* Hero Visual & Blob */
.ct-hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ct-hero-blob {
    position: relative;
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1 / 1;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: morph 8s ease-in-out infinite alternate;
}

.ct-hero-blob img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    transition: transform 0.5s ease;
}

@keyframes morph {
    0% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }

    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }

    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
}

@media (max-width: 992px) {
    .ct-hero {
        padding: calc(var(--header-height) + 60px) 0 80px;
        text-align: center;
    }

    .ct-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ct-hero-content {
        text-align: center;
    }

    .ct-hero-content p {
        margin: 0 auto;
    }

    .ct-hero-blob {
        max-width: 400px;
    }
}

.ct-hero-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    z-index: 1;
    line-height: 0;
}

.ct-hero-wave svg {
    width: 100%;
    height: 70px;
}


/* ============================================
   CONTACT SPLIT — INFO + FORM
   ============================================ */
.ct-main {
    padding: 100px 0;
    background: #fff;
}

.ct-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

/* Info Side */
.ct-info h3 {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    color: var(--primary-dark);
    margin-bottom: 8px;
}

.ct-info h3 em {
    font-style: italic;
    color: var(--primary-light);
}

.ct-info>p {
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 32px;
}

.ct-details {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 36px;
}

.ct-details li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.ct-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ct-details li h5 {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: var(--primary-dark);
    margin-bottom: 4px;
}

.ct-details li p {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.55;
}

/* Social */
.ct-social h4 {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--primary-dark);
    margin-bottom: 12px;
}

.ct-social-links {
    display: flex;
    gap: 10px;
}

.ct-social-links a {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--bg-soft-purple);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    text-decoration: none;
    transition: var(--transition-base);
}

.ct-social-links a:hover {
    background: var(--primary-color);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(62, 35, 108, 0.2);
}

/* Form Side (reuses ad-form-card and ad-field styles from admissions) */
.ct-form-card {
    background: var(--bg-light);
    border: 1px solid rgba(62, 35, 108, 0.06);
    border-radius: var(--radius-xl);
    padding: 36px;
}

.ct-form-card h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--primary-dark);
    margin-bottom: 6px;
}

.ct-form-card>p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 24px;
}


/* ============================================
   MAP SECTION
   ============================================ */
.ct-map {
    padding: 0 0 100px;
    background: #fff;
}

.ct-map-frame {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(62, 35, 108, 0.06);
}

.ct-map-frame iframe {
    display: block;
    width: 100%;
}


/* ============================================
   CONTACT — RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .ct-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 640px) {
    .ct-hero-content h1 {
        font-size: 1.9rem;
    }

    .ct-hero {
        padding-bottom: 70px;
    }

    .ct-form-card {
        padding: 28px 20px;
    }

    .ct-map-frame iframe {
        height: 280px;
    }
}


/* =============================================
   SHARED UTILITY CLASSES
   Used across all redesigned pages
   ============================================= */

/* Section Header */
.hp-section-header {
    text-align: center;
    max-width: 580px;
    margin: 0 auto 56px;
}

.hp-section-header h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    color: var(--primary-dark);
    margin-bottom: 12px;
}

.hp-section-header h2 em {
    font-style: italic;
    color: var(--primary-light);
}

.hp-section-header p {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.65;
}

/* Tag Pill (Inherits from base .hp-tag) */
.hp-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 24px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, rgba(108, 93, 211, 0.12), rgba(108, 93, 211, 0.04));
    color: var(--accent-purple);
    border: 1px solid rgba(108, 93, 211, 0.15);
    box-shadow: 0 4px 16px rgba(108, 93, 211, 0.08);
    margin-bottom: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Accent Button */
.btn-accent {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, #FFD54F, #FFB300);
    color: #1a0e34;
    font-weight: 700;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: var(--transition-base);
    text-decoration: none;
    font-family: var(--font-body);
    box-shadow: 0 8px 24px rgba(255, 183, 0, 0.25);
}

.btn-accent:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(255, 183, 0, 0.35);
}

/* Ghost Button */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: var(--radius-pill);
    background: transparent;
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: var(--transition-base);
    text-decoration: none;
    font-family: var(--font-body);
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}


/* =============================================
   CTA STRIP (Used on About, Gallery, Programs, Admissions)
   ============================================= */
.ab-cta {
    padding: 80px 0;
    background: linear-gradient(160deg, #1a0e34 0%, #2A164C 40%, #3E236C 100%);
    position: relative;
    overflow: hidden;
}

.ab-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.ab-cta-text h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: #fff;
    margin-bottom: 8px;
}

.ab-cta-text p {
    color: rgba(255, 255, 255, 0.65);
    font-size: 1rem;
}

.ab-cta-actions {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
    align-items: center;
}

@media (max-width: 768px) {
    .ab-cta-inner {
        flex-direction: column;
        text-align: center;
    }

    .ab-cta-actions {
        flex-direction: column;
        align-items: center;
    }
}


/* =============================================
   MODERNIZED FOOTER (Overrides old footer styles)
   ============================================= */
.footer {
    background: #110a22;
    color: #fff;
    padding: 0;
    position: relative;
}

.footer .footer-gradient-top {
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-yellow), var(--primary-light));
}

.footer .footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    padding-top: 64px;
    padding-bottom: 40px;
}

.footer .footer-col h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 14px;
    line-height: 1.35;
}

.footer .footer-col h4 {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: #fff;
    margin-bottom: 16px;
}

.footer .footer-col p {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.9rem;
    line-height: 1.6;
}

.footer .footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer .footer-col ul li {
    margin-bottom: 10px;
}

.footer .footer-col ul li a {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.95rem;
    text-decoration: none;
    transition: var(--transition-fast);
    display: inline-block;
    padding: 6px 0;
}

.footer .footer-col ul li a:hover {
    color: var(--accent-yellow);
    padding-left: 4px;
}

.footer .contact-info li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.88rem;
    line-height: 1.5;
    margin-bottom: 12px;
    word-break: break-word;
    /* Prevent long email from overflowing */
    overflow-wrap: anywhere;
}

.footer .contact-info li i {
    color: var(--accent-yellow);
    margin-top: 3px;
    flex-shrink: 0;
    font-size: 0.85rem;
}

.footer .social-links {
    margin-top: 16px;
    display: flex;
    gap: 10px;
}

.footer .social-links a {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    text-decoration: none;
    transition: var(--transition-base);
}

.footer .social-links a:hover {
    background: var(--accent-yellow);
    color: #1a0e34;
    border-color: var(--accent-yellow);
    transform: translateY(-2px);
}

.footer .map-mini {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.footer .map-mini iframe {
    display: block;
}

.footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 20px 0;
    text-align: center;
}

.footer .footer-bottom p {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.82rem;
    margin: 0;
}


/* =============================================
   ABOUT — VISION, MISSION & VALUES (Premium v3)
   ============================================= */
.ab-vm {
    padding: 100px 0 120px;
    background: linear-gradient(180deg, #fff 0%, #faf8ff 40%, #f5f0ff 100%);
    position: relative;
    overflow: hidden;
}

/* Subtle background texture */
.ab-vm::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(156,122,219,0.04) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
    z-index: 0;
}

/* Panel Container */
.ab-vm-panels {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    z-index: 2;
}

/* ── Panel Base ── */
.vm-panel {
    padding: 0;
}

/* ── Dividers ── */
.vm-divider {
    display: flex;
    justify-content: center;
    padding: 50px 0;
}

.vm-divider span {
    display: block;
    width: 80px;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, #FFD54F, #F48FB1, #9C7ADB);
    opacity: 0.5;
}

/* ── Icon Badges ── */
.vm-badge {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 18px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.vm-badge--purple {
    background: linear-gradient(135deg, #ede4f9, #dbc9f7);
    color: #7C4DFF;
}

.vm-badge--mint {
    background: linear-gradient(135deg, #e3f5e8, #c8e6c9);
    color: #43A047;
}

.vm-badge--pink {
    background: linear-gradient(135deg, #fce4ec, #f8bbd0);
    color: #E91E63;
}

/* ── Panel Headers ── */
.vm-panel__header {
    text-align: center;
    margin-bottom: 40px;
}

.vm-panel__header h3 {
    font-family: var(--font-heading);
    font-size: 2.4rem;
    color: var(--primary-dark);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.vm-panel__subtitle {
    font-size: 1.08rem;
    color: var(--text-muted);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.7;
}


/* ============================================
   1. VISION — Spotlight Layout
   ============================================ */
.vm-spotlight {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1100px;
    margin: 0 auto;
    background: #fff;
    border-radius: 28px;
    padding: 50px 55px;
    box-shadow:
        0 4px 20px rgba(156,122,219,0.06),
        0 20px 60px rgba(62,35,108,0.04);
    border: 1px solid rgba(156,122,219,0.1);
    position: relative;
    overflow: hidden;
}

/* Subtle accent corner */
.vm-spotlight::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(156,122,219,0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.vm-spotlight__content {
    flex: 1;
}

.vm-spotlight__content h3 {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--primary-dark);
    margin-bottom: 24px;
    letter-spacing: 0.5px;
}

.vm-quote-block {
    position: relative;
    padding-left: 28px;
}

.vm-quote-mark {
    position: absolute;
    top: -20px;
    left: -8px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 6rem;
    line-height: 1;
    color: #9C7ADB;
    opacity: 0.18;
    pointer-events: none;
    user-select: none;
}

.vm-quote-block p {
    font-family: var(--font-body);
    font-size: 1.2rem;
    font-style: italic;
    line-height: 1.85;
    color: #4a3a6a;
    border-left: 3px solid rgba(156,122,219,0.3);
    padding-left: 22px;
    margin: 0;
}

/* Vision Image */
.vm-spotlight__image {
    flex: 0 0 280px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.vm-img-ring {
    position: relative;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    padding: 6px;
    background: linear-gradient(135deg, #ede4f9, #FFD54F, #F48FB1, #9C7ADB);
    box-shadow: 0 16px 48px rgba(156,122,219,0.15);
    animation: floatSlow 6s ease-in-out infinite alternate;
}

.vm-img-ring img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #fff;
    display: block;
}


/* ============================================
   2. MISSION — Card Grid
   ============================================ */
.vm-mission-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.vm-mission-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    padding: 22px 24px;
    border-radius: 18px;
    box-shadow: 0 3px 14px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.04);
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.vm-mission-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-color: rgba(102,187,106,0.25);
}

.vm-mc-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.vm-mc-body {
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--text-body);
}

.vm-mc-body strong {
    color: var(--primary-dark);
    font-weight: 700;
}


/* ============================================
   3. VALUES — Pillow Cards
   ============================================ */
.vm-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
}

.vm-value-card {
    text-align: center;
    padding: 40px 28px 36px;
    border-radius: 22px;
    border: 1px solid rgba(0,0,0,0.04);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

/* Soft shimmer overlay */
.vm-value-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 22px 22px 0 0;
    opacity: 0.8;
    transition: height 0.3s ease;
}

.vm-value-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}

.vm-value-card:hover::before {
    height: 6px;
}

/* Icon circles */
.vm-vc-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin-bottom: 20px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vm-value-card:hover .vm-vc-icon {
    transform: scale(1.1) rotate(-5deg);
}

.vm-value-card h4 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--primary-dark);
    margin-bottom: 10px;
    letter-spacing: 0.01em;
}

.vm-value-card p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.65;
    margin: 0;
}

/* ── Card Color Variants ── */
.vm-value-card--yellow {
    background: linear-gradient(145deg, #fffdf4, #fff8e1);
    box-shadow: 0 4px 16px rgba(255,202,40,0.08);
}
.vm-value-card--yellow::before { background: linear-gradient(90deg, #FFD54F, #FFCA28); }
.vm-value-card--yellow .vm-vc-icon { background: rgba(255,202,40,0.15); color: #F9A825; }

.vm-value-card--pink {
    background: linear-gradient(145deg, #fff5f8, #fce4ec);
    box-shadow: 0 4px 16px rgba(244,143,177,0.08);
}
.vm-value-card--pink::before { background: linear-gradient(90deg, #F48FB1, #E91E63); }
.vm-value-card--pink .vm-vc-icon { background: rgba(244,143,177,0.15); color: #E91E63; }

.vm-value-card--mint {
    background: linear-gradient(145deg, #f3faf5, #e8f5e9);
    box-shadow: 0 4px 16px rgba(102,187,106,0.08);
}
.vm-value-card--mint::before { background: linear-gradient(90deg, #A5D6A7, #66BB6A); }
.vm-value-card--mint .vm-vc-icon { background: rgba(102,187,106,0.15); color: #43A047; }

.vm-value-card--purple {
    background: linear-gradient(145deg, #f8f3fd, #ede4f9);
    box-shadow: 0 4px 16px rgba(156,122,219,0.08);
}
.vm-value-card--purple::before { background: linear-gradient(90deg, #CE93D8, #9C7ADB); }
.vm-value-card--purple .vm-vc-icon { background: rgba(156,122,219,0.15); color: #7C4DFF; }

.vm-value-card--orange {
    background: linear-gradient(145deg, #fffbf2, #fff3e0);
    box-shadow: 0 4px 16px rgba(255,167,38,0.08);
}
.vm-value-card--orange::before { background: linear-gradient(90deg, #FFB74D, #FFA726); }
.vm-value-card--orange .vm-vc-icon { background: rgba(255,167,38,0.15); color: #F57C00; }

.vm-value-card--cyan {
    background: linear-gradient(145deg, #f2fdfe, #e0f7fa);
    box-shadow: 0 4px 16px rgba(77,208,225,0.08);
}
.vm-value-card--cyan::before { background: linear-gradient(90deg, #80DEEA, #4DD0E1); }
.vm-value-card--cyan .vm-vc-icon { background: rgba(77,208,225,0.15); color: #00ACC1; }


/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .vm-spotlight {
        padding: 40px 35px;
        gap: 40px;
    }
    .vm-spotlight__image { flex: 0 0 220px; }
    .vm-img-ring { width: 210px; height: 210px; }
    .vm-mission-grid { grid-template-columns: repeat(2, 1fr); }
    .vm-values-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .ab-vm { padding: 70px 0 80px; }

    .vm-spotlight {
        flex-direction: column;
        text-align: center;
        padding: 35px 28px;
        gap: 30px;
    }
    .vm-spotlight__content { text-align: center; }
    .vm-quote-block { padding-left: 0; }
    .vm-quote-block p {
        border-left: none;
        padding-left: 0;
        font-size: 1.08rem;
    }
    .vm-quote-mark { display: none; }
    .vm-spotlight__image { flex: 0 0 auto; }
    .vm-img-ring { width: 180px; height: 180px; }

    .vm-panel__header h3 { font-size: 2rem; }

    .vm-mission-grid { grid-template-columns: 1fr; max-width: 400px; }
    .vm-values-grid { grid-template-columns: 1fr; max-width: 360px; }

    .vm-divider { padding: 35px 0; }
}



/* =============================================
   ABOUT — FACILITIES & SAFETY CARDS
   ============================================= */
.ab-facilities {
    padding: 100px 0;
    background: #fff;
}

.ab-fac-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.ab-fac-card {
    background: var(--bg-light);
    border: 1px solid rgba(62, 35, 108, 0.06);
    border-radius: var(--radius-xl);
    padding: 32px 24px;
    transition: var(--transition-base);
}

.ab-fac-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.ab-fac-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 16px;
}

.ab-fac-card h4 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--primary-dark);
    margin-bottom: 8px;
}

.ab-fac-card p {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.6;
}

@media (max-width: 1024px) {
    .ab-fac-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .ab-fac-grid {
        grid-template-columns: 1fr;
    }
}


/* Form Section Titles (Admissions) */
.ad-form-section-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary-dark);
    margin: 24px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--bg-soft-purple);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ad-form-section-title:first-of-type {
    margin-top: 8px;
}

.ad-form-section-title i {
    color: var(--primary-light);
    font-size: 0.85rem;
}


/* Daycare Sub-Plans (Programs Page) */
.pg-sub-plans {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 16px 0;
}

.pg-sub-plan {
    background: rgba(62, 35, 108, 0.04);
    border: 1px solid rgba(62, 35, 108, 0.08);
    border-radius: 12px;
    padding: 16px;
}

.pg-sub-plan h5 {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    color: var(--primary-dark);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pg-sub-plan h5 i {
    color: var(--primary-light);
    font-size: 0.8rem;
}

.pg-sub-plan p {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 640px) {
    .pg-sub-plans {
        grid-template-columns: 1fr;
    }
}


/* =============================================
   PROGRAMS — CARD GRID LAYOUT (3x2)
   ============================================= */
.pg-cards-section {
    padding: 100px 0 80px;
    background: #fff;
}

.pg-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.pg-card {
    background: var(--bg-light);
    border: 1px solid rgba(62, 35, 108, 0.06);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: var(--transition-base);
    display: flex;
    flex-direction: column;
}

.pg-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(62, 35, 108, 0.12);
    border-color: transparent;
}

/* Card Image */
.pg-card-img {
    position: relative;
    overflow: hidden;
    height: 200px;
}

.pg-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.pg-card:hover .pg-card-img img {
    transform: scale(1.05);
}

/* Age Badge on Image */
.pg-card-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
    backdrop-filter: blur(4px);
}

/* Card Body */
.pg-card-body {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pg-card-body h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--primary-dark);
    margin-bottom: 8px;
}

.pg-card-body>p {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.6;
    margin-bottom: 16px;
    flex: 1;
}

/* Feature Tags */
.pg-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.pg-card-tags span {
    background: rgba(62, 35, 108, 0.06);
    color: var(--primary-dark);
    font-size: 0.72rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pg-card-tags span i {
    color: var(--primary-light);
    font-size: 0.6rem;
}

/* Accent Tags (Daycare sub-plans) */
.pg-tag-accent {
    background: linear-gradient(135deg, rgba(62, 35, 108, 0.1), rgba(155, 89, 182, 0.1)) !important;
    border: 1px solid rgba(62, 35, 108, 0.12);
}

/* Card CTA Link */
.pg-card-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-light);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition-base);
}

.pg-card-link:hover {
    color: var(--primary-dark);
    gap: 10px;
}

/* Responsive */
@media (max-width: 1024px) {
    .pg-cards-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .pg-cards-grid {
        grid-template-columns: 1fr;
    }

    .pg-cards-section {
        padding: 60px 0 40px;
    }
}


/* =============================================
   PROGRAMS SHOWCASE — Single Row Grid
   ============================================= */
.pg-programs-showcase {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.pg-showcase-card {
    background: var(--bg-white);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(62, 35, 108, 0.06);
    box-shadow: 0 8px 32px rgba(62, 35, 108, 0.06);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
}

.pg-showcase-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 64px rgba(62, 35, 108, 0.14);
    border-color: rgba(62, 35, 108, 0.12);
}

/* Image */
.pg-showcase-img {
    position: relative;
    overflow: hidden;
    height: 220px;
}

.pg-showcase-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.pg-showcase-card:hover .pg-showcase-img img {
    transform: scale(1.08);
}

.pg-showcase-age {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(62, 35, 108, 0.08), rgba(155, 89, 182, 0.08));
    color: var(--primary-dark);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid rgba(62, 35, 108, 0.1);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}

/* Content */
.pg-showcase-content {
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.pg-showcase-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 1.2rem;
}

.pg-showcase-content h3 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--primary-dark);
    margin-bottom: 8px;
    line-height: 1.3;
}

.pg-showcase-content > p {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.65;
    margin-bottom: 16px;
    flex: 1;
}

/* Feature Tags */
.pg-showcase-features {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
}

.pg-showcase-features span {
    background: rgba(62, 35, 108, 0.05);
    color: var(--primary-dark);
    font-size: 0.72rem;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.pg-showcase-features span i {
    color: var(--primary-light);
    font-size: 0.6rem;
}

/* CTA Link */
.pg-showcase-cta {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--primary-light);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    margin-top: auto;
}

.pg-showcase-cta:hover {
    gap: 12px;
    opacity: 0.85;
}

/* Responsive */
@media (max-width: 1024px) {
    .pg-programs-showcase {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .pg-programs-showcase {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .pg-showcase-content h3 {
        font-size: 1.2rem;
    }
}

/* =============================================
   NAVBAR — PROGRAMS DROPDOWN MENU
   ============================================= */
.nav-dropdown {
    position: relative;
    white-space: nowrap;
}

.nav-dd-arrow {
    font-size: 0.55rem;
    margin-left: 3px;
    transition: transform 0.3s ease;
    opacity: 0.6;
}

.nav-dropdown:hover .nav-dd-arrow {
    transform: rotate(180deg);
    opacity: 1;
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 220px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(62, 35, 108, 0.08);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(62, 35, 108, 0.14), 0 4px 12px rgba(0, 0, 0, 0.04);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    z-index: 9999;
}

.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-dark);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.nav-dropdown-menu a:hover {
    background: linear-gradient(135deg, rgba(62, 35, 108, 0.06), rgba(155, 89, 182, 0.06));
    color: var(--primary-dark);
    padding-left: 18px;
}

.nav-dropdown-menu a i {
    width: 20px;
    text-align: center;
    font-size: 0.78rem;
    color: var(--primary-light);
    flex-shrink: 0;
}

/* Scrolled navbar dropdown */
.navbar.scrolled .nav-dropdown-menu {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(62, 35, 108, 0.1);
}

/* Hide dropdown on mobile — mobile menu handles it */
@media (max-width: 991px) {
    .nav-dropdown-menu {
        display: none !important;
    }

    .nav-dd-arrow {
        display: none;
    }
}


/* =============================================
   ADMISSIONS — FAQ ACCORDION
   ============================================= */
.ad-faq {
    padding: 80px 0;
    background: var(--bg-light);
}

.ad-faq-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ad-faq-item {
    background: #fff;
    border: 1px solid rgba(62, 35, 108, 0.06);
    border-radius: 14px;
    overflow: hidden;
    transition: var(--transition-base);
}

.ad-faq-item:hover {
    border-color: rgba(62, 35, 108, 0.12);
    box-shadow: 0 4px 20px rgba(62, 35, 108, 0.06);
}

.ad-faq-item.active {
    border-color: rgba(62, 35, 108, 0.15);
    box-shadow: 0 8px 32px rgba(62, 35, 108, 0.1);
}

.ad-faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    transition: color 0.2s ease;
}

.ad-faq-q:hover {
    color: var(--primary-dark);
}

.ad-faq-item.active .ad-faq-q {
    color: var(--primary-dark);
}

.ad-faq-icon {
    font-size: 0.8rem;
    color: var(--primary-light);
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(62, 35, 108, 0.06);
    border-radius: 50%;
    transition: transform 0.3s ease, background 0.3s ease;
}

.ad-faq-item.active .ad-faq-icon {
    transform: rotate(45deg);
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
    color: #fff;
}

.ad-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 24px;
}

.ad-faq-item.active .ad-faq-a {
    max-height: 300px;
    padding: 0 24px 20px;
}

.ad-faq-a p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 640px) {
    .ad-faq {
        padding: 50px 0;
    }

    .ad-faq-q {
        font-size: 0.92rem;
        padding: 16px 18px;
    }

    .ad-faq-item.active .ad-faq-a {
        padding: 0 18px 16px;
    }
}

/* ====== DAYCARE SCHEDULE & ACTIVITIES ====== */
.dc-schedule-wrapper {
    margin-top: 60px;
    background: #fff;
    border-radius: 24px;
    padding: 40px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.dc-schedule-title {
    text-align: center;
    font-size: 1.8rem;
    color: var(--primary-dark);
    margin-bottom: 40px;
    font-family: var(--font-heading);
}

.dc-timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.dc-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: rgba(108, 93, 211, 0.2);
    transform: translateX(-50%);
}

.dc-time-slot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    position: relative;
}

.dc-time-slot:last-child {
    margin-bottom: 0;
}

.dc-time {
    width: 45%;
    text-align: right;
    font-weight: 600;
    color: var(--accent-purple);
    font-size: 1.1rem;
    padding-right: 30px;
}

.dc-activity {
    width: 45%;
    background: var(--surface-light);
    padding: 16px 24px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.02);
    margin-left: auto;
}

.dc-activity h5 {
    color: var(--primary-dark);
    font-size: 1.05rem;
    margin: 0;
}

.dc-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background: var(--accent-rose);
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 0 0 4px rgba(255, 117, 140, 0.2);
    z-index: 1;
}

/* Alternate sides for timeline */
.dc-time-slot:nth-child(even) .dc-time {
    text-align: left;
    padding-right: 0;
    padding-left: 30px;
    order: 2;
}

.dc-time-slot:nth-child(even) .dc-activity {
    margin-left: 0;
    margin-right: auto;
    text-align: right;
    order: 1;
}

/* Activities Grid */
.dc-activities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 60px;
}

.dc-act-category {
    background: var(--surface-light);
    border-radius: 20px;
    padding: 32px;
    text-align: center;
}

.dc-act-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin: 0 auto 20px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.dc-act-category h4 {
    color: var(--primary-dark);
    margin-bottom: 16px;
    font-size: 1.3rem;
}

.dc-act-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.dc-act-list li {
    padding: 8px 0;
    color: var(--text-muted);
    border-bottom: 1px dashed rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 10px;
}

.dc-act-list li:last-child {
    border-bottom: none;
}

.dc-act-list li i {
    color: var(--accent-purple);
    font-size: 0.8rem;
}

@media (max-width: 768px) {
    .dc-activities-grid {
        grid-template-columns: 1fr;
    }

    .dc-timeline::before {
        left: 20px;
    }

    .dc-time-slot,
    .dc-time-slot:nth-child(even) {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 50px;
    }

    .dc-time,
    .dc-time-slot:nth-child(even) .dc-time {
        width: 100%;
        text-align: left;
        padding: 0 0 8px 0;
        order: 1;
    }

    .dc-activity,
    .dc-time-slot:nth-child(even) .dc-activity {
        width: 100%;
        margin: 0;
        text-align: left;
        order: 2;
    }

    .dc-dot {
        left: 20px;
        top: 10px;
        transform: translate(-50%, 0);
    }
}

/* ====== AWARDS SECTION ====== */
@keyframes drift {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(-30px, 30px) scale(1.1);
    }
}

.hp-award-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: var(--shadow-md) !important;
    border-color: rgba(62, 35, 108, 0.1) !important;
}

.hp-award-card:hover .hp-award-img-wrap img {
    transform: scale(1.05) !important;
}

/* ==========================================================================
   OUR STORY SECTION (About Page)
   ========================================================================== */

.ab-story {
    padding: 100px 0;
    background: var(--bg-white);
    position: relative;
    overflow: hidden;
}

.ab-story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.ab-story-content .hp-tag {
    margin-bottom: 20px;
}

.ab-story-content h2 {
    font-size: 3rem;
    color: var(--primary-dark);
    margin-bottom: 24px;
    line-height: 1.2;
}

.ab-story-content h2 em {
    font-style: normal;
    color: var(--accent-orange);
    position: relative;
    display: inline-block;
}

.ab-story-lead {
    font-size: 1.2rem;
    color: var(--primary-color);
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 1.6;
}

.ab-story-content p {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 30px;
}

.ab-story-highlights {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ab-story-highlights li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.1rem;
    color: var(--text-dark);
    font-weight: 500;
}

.ab-story-highlights li i {
    color: var(--accent-green);
    font-size: 1.4rem;
}

.ab-story-image {
    position: relative;
}

.ab-story-img-wrapper {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.ab-story-img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.ab-story-img-wrapper:hover img {
    transform: scale(1.03);
}

.ab-story-badge {
    position: absolute;
    bottom: -15px;
    right: 15px;
    background: var(--primary-color);
    color: white;
    padding: 18px 28px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(62, 35, 108, 0.25);
    display: flex;
    align-items: center;
    gap: 16px;
    border: 2px solid white;
    z-index: 5;
}

.ab-story-badge .badge-number {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--accent-yellow);
    line-height: 1;
}

.ab-story-badge .badge-text {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: left;
}

@media (max-width: 992px) {
    .ab-story-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .ab-story-content h2 {
        font-size: 2.5rem;
    }

    .ab-story-badge {
        bottom: -20px;
        right: 20px;
        padding: 16px 24px;
    }
}

@media (max-width: 768px) {
    .ab-story {
        padding: 60px 0;
    }

    .ab-story-content h2 {
        font-size: 2rem;
    }
}

/* =====================================================================
   PREMIUM PLAY-SCHOOL VISUAL ENHANCEMENT LAYER (Pure CSS)
   Objective: Immersive depth, soft shadows, fluid rhythms, morphing blobs
   Constraints: No HTML changes, no brand color changes, 0 text layout shifts
   ===================================================================== */

/* 1. Deep Soft Shadows & Floating Hover Depth for Cards */
.hp-bento-card,
.hp-prog-card,
.hp-testi-card,
.ad-elig-card,
.ad-why-card,
.ab-vm-card,
.pg-corp-card,
.cm-card,
.ad-step {
    border-radius: var(--radius-xl) !important;
    border: 1px solid rgba(62, 35, 108, 0.03) !important;
    box-shadow: 0 10px 30px rgba(62, 35, 108, 0.04) !important;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease !important;
    background: #fff;
    overflow: hidden;
}

.hp-bento-card:hover,
.hp-prog-card:hover,
.ad-elig-card:hover,
.hp-testi-card:hover,
.ad-why-card:hover,
.ab-vm-card:hover,
.pg-corp-card:hover,
.cm-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 20px 40px rgba(62, 35, 108, 0.08), 0 0 0 3px rgba(255, 213, 79, 0.1) !important;
    z-index: 10;
}

/* 2. Organic Icon Blob Shapes (Morphing on Hover) */
.hp-bento-icon,
.hp-stat-icon,
.ad-elig-icon,
.ad-why-icon,
.ab-vm-icon,
.ad-step-icon,
.hp-ap-f-icon,
.ct-icon {
    border-radius: 35% 65% 55% 45% / 45% 45% 55% 55% !important;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.4), 0 8px 16px rgba(0, 0, 0, 0.05) !important;
    position: relative;
}

.hp-bento-card:hover .hp-bento-icon,
.ad-elig-card:hover .ad-elig-icon,
.ad-why-card:hover .ad-why-icon,
.ab-vm-card:hover .ab-vm-icon {
    border-radius: 50% !important;
    /* morph to circle */
    transform: scale(1.1) rotate(-8deg) !important;
    box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.8), 0 12px 24px rgba(0, 0, 0, 0.1) !important;
}

/* 3. Playful Pill Buttons with Warm Glow */
.btn {
    border-radius: 50px !important;
    box-shadow: 0 6px 15px rgba(255, 213, 79, 0.15) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.btn:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 25px rgba(255, 213, 79, 0.35) !important;
}

/* 4. Fluid Layout Rhythm (Watercolor Blooms & Layered Depth) 
   Breaks up plain backgrounds without injecting HTML */
.hp-why,
.hp-programs,
.hp-activities,
.hp-testimonials,
.ab-story,
.ab-vm,
.ab-leadership,
.pg-philosophy,
.pg-corporate,
.ad-process,
.ad-eligibility,
.ad-why {
    position: relative;
    overflow: hidden;
    padding-top: 110px !important;
    padding-bottom: 110px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
}

/* Ensure foreground content floats above the background blooms */
.hp-programs .container,
.hp-why .container,
.hp-activities .container,
.hp-testimonials .container,
.ab-vm .container,
.ab-leadership .container,
.pg-philosophy .container,
.ad-process .container,
.ad-eligibility .container,
.ad-why .container {
    position: relative;
    z-index: 2;
}

/* Injecting organic radial watercolor blobs via CSS pseudo-elements entirely */
.hp-programs::before,
.ab-leadership::before,
.ad-process::before,
.hp-testimonials::before,
.pg-corporate::before {
    content: '';
    position: absolute;
    top: -150px;
    right: -100px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 213, 79, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.hp-why::after,
.hp-activities::before,
.ab-vm::before,
.pg-philosophy::after,
.ad-eligibility::after,
.ad-why::after {
    content: '';
    position: absolute;
    bottom: -150px;
    left: -150px;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(244, 143, 177, 0.06) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    animation: gentleBreath 12s ease-in-out infinite alternate;
}

/* 5. Breathing / Soft Floating Micro-Animations */
@keyframes gentleBreath {
    0% {
        transform: scale(1) translate(0px, 0px);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.08) translate(30px, -20px);
        opacity: 1;
    }
}

@keyframes imageFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

/* Make primary hero graphics and storytelling images float gently */
.hp-hero-image img,
.ab-story-img img,
.pg-corp-img img,
.ad-process-img img {
    animation: imageFloat 6s ease-in-out infinite;
}

/* Add a very subtle dotted background texture map to soft sections */
.hp-why,
.hp-activities,
.ab-vm,
.ad-eligibility {
    background-image: radial-gradient(rgba(62, 35, 108, 0.03) 2px, transparent 2px) !important;
    background-size: 30px 30px !important;
    background-position: 0 0, 15px 15px !important;
}

/* =====================================================================
   HP-WHY SECTION: PREMIUM WHITESPACE UTILITY (PLAY SCHOOL MOTIFS)
   Injecting scalable geometric SVGs (rainbows, dashes, blocks, sparkles) 
   around the grid using CSS pseudo-elements to keep HTML pure.
   ===================================================================== */

.hp-why .hp-section-header {
    position: relative;
}

.hp-why .hp-bento {
    position: relative;
}

/* 1. Top Left: Playful Arch / Rainbow */
.hp-why .hp-section-header::before {
    content: '';
    position: absolute;
    top: -40px;
    left: -12vw;
    width: 150px;
    height: 150px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,90 A40,40 0 0,1 90,90' fill='none' stroke='%233E236C' stroke-width='6' stroke-linecap='round' opacity='0.08'/%3E%3Cpath d='M25,90 A25,25 0 0,1 75,90' fill='none' stroke='%23FFD54F' stroke-width='6' stroke-linecap='round' opacity='0.7'/%3E%3Ccircle cx='50' cy='80' r='8' fill='%23F48FB1' opacity='0.8'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
    animation: floatSlow 6s ease-in-out infinite alternate;
}

/* 2. Top Right: Playful Dashed Swoosh */
.hp-why .hp-section-header::after {
    content: '';
    position: absolute;
    top: 20px;
    right: -15vw;
    width: 180px;
    height: 120px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 150 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,20 Q60,-20 90,50 T140,80' fill='none' stroke='%23F48FB1' stroke-width='5' stroke-linecap='round' stroke-dasharray='10 15' opacity='0.6'/%3E%3Ccircle cx='140' cy='80' r='5' fill='%23F48FB1' opacity='0.8'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
    animation: gentleBreath 8s ease-in-out infinite alternate-reverse;
}

/* 3. Bottom Left / Mid Left: Floating Sparkle Array */
.hp-why .hp-bento::before {
    content: '';
    position: absolute;
    top: 40px;
    left: -12vw;
    width: 120px;
    height: 120px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50,10 Q50,50 90,50 Q50,50 50,90 Q50,50 10,50 Q50,50 50,10 Z' fill='%23FFD54F' opacity='0.7'/%3E%3Cpath d='M80,10 Q80,20 90,20 Q80,20 80,30 Q80,20 70,20 Q80,20 80,10 Z' fill='%233E236C' opacity='0.15'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
    animation: floatSlow 7s ease-in-out infinite alternate;
}

/* 4. Bottom Right: Floating Play Shapes (Blob, Triangle, Block) */
.hp-why .hp-bento::after {
    content: '';
    position: absolute;
    bottom: -40px;
    right: -14vw;
    width: 180px;
    height: 180px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30,20 C60,-10 110,10 100,50 C90,90 40,120 10,80 C-20,40 0,50 30,20 Z' fill='%23F48FB1' opacity='0.1'/%3E%3Ccircle cx='90' cy='30' r='8' fill='%23FFD54F'/%3E%3Crect x='25' y='80' width='18' height='18' rx='4' fill='%233E236C' opacity='0.15' transform='rotate(15 25 80)'/%3E%3Cpath d='M60,40 L75,70 L45,70 Z' fill='%23F48FB1' opacity='0.6' transform='rotate(-20 60 40)' /%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
    animation: gentleBreath 9s ease-in-out infinite alternate;
}

/* =====================================================================
   HP-ACTIVITIES SECTION: FUN LEARNING (MOTIFS)
   Content: Arts, Sports, Culture 
   ===================================================================== */
.hp-activities .hp-section-header,
.hp-activities .hp-activities-track {
    position: relative;
}

/* 1. Top Left: Bouncing Ball (Sports) */
.hp-activities .hp-section-header::before {
    content: '';
    position: absolute;
    top: -30px;
    left: -10vw;
    width: 120px;
    height: 120px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,90 Q30,40 50,80 T90,50' fill='none' stroke='%233E236C' stroke-width='4' stroke-dasharray='6 6' opacity='0.15'/%3E%3Ccircle cx='90' cy='50' r='10' fill='%23FFD54F' opacity='0.9'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
    animation: gentleBreath 7s ease-in-out infinite alternate;
}

/* 2. Top Right: Musical Note (Culture) */
.hp-activities .hp-section-header::after {
    content: '';
    position: absolute;
    top: 10px;
    right: -12vw;
    width: 100px;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='80' r='15' fill='%23FFD54F' opacity='0.8'/%3E%3Ccircle cx='70' cy='70' r='15' fill='%23FFD54F' opacity='0.8'/%3E%3Cpath d='M45,80 L45,20 L85,10 L85,70' fill='none' stroke='%23F48FB1' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M45,20 L85,10' fill='none' stroke='%23F48FB1' stroke-width='12'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
    animation: floatSlow 8s ease-in-out infinite alternate;
}

/* 3. Bottom Left: Paint Palette / Blobs (Arts) */
.hp-activities .hp-activities-track::before {
    content: '';
    position: absolute;
    bottom: 20px;
    left: -14vw;
    width: 140px;
    height: 140px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20,50 C20,20 80,10 90,40 C100,70 70,90 40,90 C10,90 20,80 20,50 Z' fill='%233E236C' opacity='0.05'/%3E%3Ccircle cx='40' cy='40' r='10' fill='%23F48FB1' opacity='0.8'/%3E%3Ccircle cx='65' cy='35' r='12' fill='%23FFD54F' opacity='0.9'/%3E%3Ccircle cx='75' cy='65' r='8' fill='%233E236C' opacity='0.2'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
    animation: floatSlow 6s ease-in-out infinite alternate-reverse;
}

/* 4. Bottom Right: Paper Plane (Creation / Activity) */
.hp-activities .hp-activities-track::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -10vw;
    width: 120px;
    height: 120px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,90 L40,80 L110,10 L60,50 Z' fill='%23FFD54F' opacity='0.6'/%3E%3Cpath d='M40,80 L60,50 L50,90 Z' fill='%23F48FB1' opacity='0.8'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
    animation: gentleBreath 9s ease-in-out infinite alternate;
}

/* =====================================================================
   HP-TESTIMONIALS SECTION: HAPPY PARENTS (MOTIFS)
   Content: The SRIS Family, Love, Growth
   ===================================================================== */
.hp-testimonials .hp-section-header,
.hp-testimonials .hp-testi-carousel {
    position: relative;
}

/* 1. Top Left: Family Hearts (Love/Trust) */
.hp-testimonials .hp-section-header::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -10vw;
    width: 120px;
    height: 120px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50,80 C50,80 10,50 10,30 C10,15 25,10 35,20 C45,30 50,40 50,40 C50,40 55,30 65,20 C75,10 90,15 90,30 C90,50 50,80 50,80 Z' fill='%23F48FB1' opacity='0.7'/%3E%3Cpath d='M80,40 C80,40 60,25 60,15 C60,5 65,5 70,10 C75,15 75,20 75,20 C75,20 75,15 80,10 C85,5 90,5 90,15 C90,25 80,40 80,40 Z' fill='%23FFD54F' opacity='0.9'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
    animation: gentleBreath 8s ease-in-out infinite alternate;
}

/* 2. Top Right: Dialogue / Chat Bubble (Hearing from parents) */
.hp-testimonials .hp-section-header::after {
    content: '';
    position: absolute;
    top: 10px;
    right: -14vw;
    width: 140px;
    height: 140px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20,20 Q60,-10 100,20 Q120,40 100,60 Q80,80 50,80 L20,95 L25,70 Q-10,50 20,20 Z' fill='%233E236C' opacity='0.05'/%3E%3Ccircle cx='45' cy='40' r='6' fill='%23FFD54F' opacity='0.9'/%3E%3Ccircle cx='65' cy='40' r='6' fill='%23F48FB1' opacity='0.9'/%3E%3Ccircle cx='85' cy='40' r='6' fill='%233E236C' opacity='0.3'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
    animation: floatSlow 7s ease-in-out infinite alternate-reverse;
}

/* 3. Bottom Left: Shining Star (Success / Foundation) */
.hp-testimonials .hp-testi-carousel::before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: -10vw;
    width: 100px;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50,0 C50,40 60,50 100,50 C60,50 50,60 50,100 C50,60 40,50 0,50 C40,50 50,40 50,0 Z' fill='%23FFD54F' opacity='0.6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
    animation: floatSlow 9s ease-in-out infinite alternate;
}

/* 4. Bottom Right: Growing Leaf (Growth & Care) */
.hp-testimonials .hp-testi-carousel::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -12vw;
    width: 120px;
    height: 140px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50,100 Q80,100 90,60 Q90,20 50,10 Q50,40 50,100 Z' fill='%23F48FB1' opacity='0.5'/%3E%3Cpath d='M50,100 Q20,90 10,60 Q20,30 50,40 Q50,60 50,100 Z' fill='%23FFD54F' opacity='0.7'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
    animation: gentleBreath 6s ease-in-out infinite alternate-reverse;
}

/* Specific overrides to handle mobile bounds elegantly for ALL decorators */
@media (max-width: 1024px) {

    .hp-why .hp-section-header::before,
    .hp-activities .hp-section-header::before,
    .hp-testimonials .hp-section-header::before {
        left: -5vw;
    }

    .hp-why .hp-section-header::after,
    .hp-activities .hp-section-header::after,
    .hp-testimonials .hp-section-header::after {
        right: -5vw;
    }

    .hp-why .hp-bento::before,
    .hp-activities .hp-activities-track::before,
    .hp-testimonials .hp-testi-carousel::before {
        left: -5vw;
        top: -20px;
    }

    .hp-why .hp-bento::after,
    .hp-activities .hp-activities-track::after,
    .hp-testimonials .hp-testi-carousel::after {
        right: -5vw;
        bottom: -20px;
    }
}

/* Specific overrides to handle mobile bounds elegantly for ALL decorators */
@media (max-width: 1024px) {

    .hp-why .hp-section-header::before,
    .hp-activities .hp-section-header::before,
    .hp-testimonials .hp-section-header::before {
        left: -5vw;
    }

    .hp-why .hp-section-header::after,
    .hp-activities .hp-section-header::after,
    .hp-testimonials .hp-section-header::after {
        right: -5vw;
    }

    .hp-why .hp-bento::before,
    .hp-activities .hp-activities-track::before,
    .hp-testimonials .hp-testi-carousel::before {
        left: -5vw;
        top: -20px;
    }

    .hp-why .hp-bento::after,
    .hp-activities .hp-activities-track::after,
    .hp-testimonials .hp-testi-carousel::after {
        right: -5vw;
        bottom: -20px;
    }
}

/* =====================================================================
   GLOBAL SITE-WIDE SVG MOTIF MAPPINGS (Extending the Aesthetic)
   ===================================================================== */

/* Setup default relative states */
.hp-programs,
.ab-story,
.ab-vm,
.ab-leadership,
.pg-philosophy,
.pg-corporate,
.ad-process,
.ad-eligibility,
.ad-why-section {
    position: relative;
}

/* --- 1. OUR PROGRAMS (.hp-programs) --- */
.hp-programs::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 2%;
    width: 140px;
    height: 140px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30,20 C60,-10 110,10 100,50 C90,90 40,120 10,80 C-20,40 0,50 30,20 Z' fill='%23F48FB1' opacity='0.1'/%3E%3Ccircle cx='90' cy='30' r='8' fill='%23FFD54F'/%3E%3Crect x='25' y='80' width='18' height='18' rx='4' fill='%233E236C' opacity='0.15' transform='rotate(15 25 80)'/%3E%3Cpath d='M60,40 L75,70 L45,70 Z' fill='%23F48FB1' opacity='0.6' transform='rotate(-20 60 40)' /%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: floatSlow 7s infinite alternate;
}

.hp-programs::after {
    content: '';
    position: absolute;
    bottom: 10%;
    right: 2%;
    width: 120px;
    height: 120px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,90 L40,80 L110,10 L60,50 Z' fill='%23FFD54F' opacity='0.6'/%3E%3Cpath d='M40,80 L60,50 L50,90 Z' fill='%23F48FB1' opacity='0.8'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: gentleBreath 9s infinite alternate;
}

.hp-programs .container::before {
    content: '';
    position: absolute;
    top: -5%;
    right: 2%;
    width: 120px;
    height: 120px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,90 Q30,40 50,80 T90,50' fill='none' stroke='%233E236C' stroke-width='4' stroke-dasharray='6 6' opacity='0.15'/%3E%3Ccircle cx='90' cy='50' r='10' fill='%23FFD54F' opacity='0.9'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: floatSlow 6s infinite alternate-reverse;
}

.hp-programs .container::after {
    content: '';
    position: absolute;
    bottom: 5%;
    left: 2%;
    width: 150px;
    height: 150px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,90 A40,40 0 0,1 90,90' fill='none' stroke='%233E236C' stroke-width='6' stroke-linecap='round' opacity='0.08'/%3E%3Cpath d='M25,90 A25,25 0 0,1 75,90' fill='none' stroke='%23FFD54F' stroke-width='6' stroke-linecap='round' opacity='0.7'/%3E%3Ccircle cx='50' cy='80' r='8' fill='%23F48FB1' opacity='0.8'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: gentleBreath 8s infinite alternate;
}

/* --- 2. ABOUT US: OUR STORY (.ab-story) --- */
.ab-story::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 2%;
    width: 120px;
    height: 120px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50,100 Q80,100 90,60 Q90,20 50,10 Q50,40 50,100 Z' fill='%23F48FB1' opacity='0.5'/%3E%3Cpath d='M50,100 Q20,90 10,60 Q20,30 50,40 Q50,60 50,100 Z' fill='%23FFD54F' opacity='0.7'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: gentleBreath 6s infinite alternate;
}

.ab-story::after {
    content: '';
    position: absolute;
    bottom: 10%;
    right: 2%;
    width: 140px;
    height: 140px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50,80 C50,80 10,50 10,30 C10,15 25,10 35,20 C45,30 50,40 50,40 C50,40 55,30 65,20 C75,10 90,15 90,30 C90,50 50,80 50,80 Z' fill='%23F48FB1' opacity='0.7'/%3E%3Cpath d='M80,40 C80,40 60,25 60,15 C60,5 65,5 70,10 C75,15 75,20 75,20 C75,20 75,15 80,10 C85,5 90,5 90,15 C90,25 80,40 80,40 Z' fill='%23FFD54F' opacity='0.9'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: floatSlow 8s infinite alternate;
}

.ab-story .container::before {
    content: '';
    position: absolute;
    top: -5%;
    right: 2%;
    width: 180px;
    height: 120px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 150 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,20 Q60,-20 90,50 T140,80' fill='none' stroke='%23F48FB1' stroke-width='5' stroke-linecap='round' stroke-dasharray='10 15' opacity='0.6'/%3E%3Ccircle cx='140' cy='80' r='5' fill='%23F48FB1' opacity='0.8'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: floatSlow 7s infinite alternate-reverse;
}

.ab-story .container::after {
    content: '';
    position: absolute;
    bottom: 5%;
    left: 2%;
    width: 100px;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50,10 Q50,50 90,50 Q50,50 50,90 Q50,50 10,50 Q50,50 50,10 Z' fill='%23FFD54F' opacity='0.7'/%3E%3Cpath d='M80,10 Q80,20 90,20 Q80,20 80,30 Q80,20 70,20 Q80,20 80,10 Z' fill='%233E236C' opacity='0.15'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: gentleBreath 9s infinite alternate;
}

/* --- 3. ABOUT US: VISION & MISSION (.ab-vm) --- */
.ab-vm::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 2%;
    width: 120px;
    height: 120px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50,0 C50,40 60,50 100,50 C60,50 50,60 50,100 C50,60 40,50 0,50 C40,50 50,40 50,0 Z' fill='%23FFD54F' opacity='0.6'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: floatSlow 9s infinite alternate;
}

.ab-vm::after {
    content: '';
    position: absolute;
    bottom: 10%;
    right: 2%;
    width: 140px;
    height: 140px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20,20 Q60,-10 100,20 Q120,40 100,60 Q80,80 50,80 L20,95 L25,70 Q-10,50 20,20 Z' fill='%233E236C' opacity='0.05'/%3E%3Ccircle cx='45' cy='40' r='6' fill='%23FFD54F' opacity='0.9'/%3E%3Ccircle cx='65' cy='40' r='6' fill='%23F48FB1' opacity='0.9'/%3E%3Ccircle cx='85' cy='40' r='6' fill='%233E236C' opacity='0.3'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: gentleBreath 7s infinite alternate-reverse;
}

.ab-vm .container::before {
    content: '';
    position: absolute;
    top: -5%;
    right: 2%;
    width: 120px;
    height: 120px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,90 Q30,40 50,80 T90,50' fill='none' stroke='%233E236C' stroke-width='4' stroke-dasharray='6 6' opacity='0.15'/%3E%3Ccircle cx='90' cy='50' r='10' fill='%23FFD54F' opacity='0.9'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: floatSlow 6s infinite alternate;
}

.ab-vm .container::after {
    content: '';
    position: absolute;
    bottom: 5%;
    left: 2%;
    width: 150px;
    height: 150px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,90 A40,40 0 0,1 90,90' fill='none' stroke='%233E236C' stroke-width='6' stroke-linecap='round' opacity='0.08'/%3E%3Cpath d='M25,90 A25,25 0 0,1 75,90' fill='none' stroke='%23FFD54F' stroke-width='6' stroke-linecap='round' opacity='0.7'/%3E%3Ccircle cx='50' cy='80' r='8' fill='%23F48FB1' opacity='0.8'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: floatSlow 8s infinite alternate-reverse;
}

/* --- 4. ABOUT US: LEADERSHIP (.ab-leadership) --- */
.ab-leadership::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 2%;
    width: 140px;
    height: 140px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30,20 C60,-10 110,10 100,50 C90,90 40,120 10,80 C-20,40 0,50 30,20 Z' fill='%23F48FB1' opacity='0.1'/%3E%3Ccircle cx='90' cy='30' r='8' fill='%23FFD54F'/%3E%3Crect x='25' y='80' width='18' height='18' rx='4' fill='%233E236C' opacity='0.15' transform='rotate(15 25 80)'/%3E%3Cpath d='M60,40 L75,70 L45,70 Z' fill='%23F48FB1' opacity='0.6' transform='rotate(-20 60 40)' /%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: floatSlow 8s infinite alternate-reverse;
}

.ab-leadership::after {
    content: '';
    position: absolute;
    bottom: 10%;
    right: 2%;
    width: 150px;
    height: 150px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,90 A40,40 0 0,1 90,90' fill='none' stroke='%233E236C' stroke-width='6' stroke-linecap='round' opacity='0.08'/%3E%3Cpath d='M25,90 A25,25 0 0,1 75,90' fill='none' stroke='%23FFD54F' stroke-width='6' stroke-linecap='round' opacity='0.7'/%3E%3Ccircle cx='50' cy='80' r='8' fill='%23F48FB1' opacity='0.8'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: gentleBreath 7s infinite alternate;
}

.ab-leadership .container::before {
    content: '';
    position: absolute;
    top: -5%;
    right: 2%;
    width: 120px;
    height: 120px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,90 L40,80 L110,10 L60,50 Z' fill='%23FFD54F' opacity='0.6'/%3E%3Cpath d='M40,80 L60,50 L50,90 Z' fill='%23F48FB1' opacity='0.8'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: gentleBreath 6s infinite alternate-reverse;
}

.ab-leadership .container::after {
    content: '';
    position: absolute;
    bottom: 5%;
    left: 2%;
    width: 100px;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50,10 Q50,50 90,50 Q50,50 50,90 Q50,50 10,50 Q50,50 50,10 Z' fill='%23FFD54F' opacity='0.7'/%3E%3Cpath d='M80,10 Q80,20 90,20 Q80,20 80,30 Q80,20 70,20 Q80,20 80,10 Z' fill='%233E236C' opacity='0.15'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: floatSlow 9s infinite alternate;
}

/* --- 5. PROGRAMS: PHILOSOPHY (.pg-philosophy) --- */
.pg-philosophy::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 2%;
    width: 140px;
    height: 140px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20,50 C20,20 80,10 90,40 C100,70 70,90 40,90 C10,90 20,80 20,50 Z' fill='%233E236C' opacity='0.05'/%3E%3Ccircle cx='40' cy='40' r='10' fill='%23F48FB1' opacity='0.8'/%3E%3Ccircle cx='65' cy='35' r='12' fill='%23FFD54F' opacity='0.9'/%3E%3Ccircle cx='75' cy='65' r='8' fill='%233E236C' opacity='0.2'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: gentleBreath 7s infinite alternate;
}

.pg-philosophy::after {
    content: '';
    position: absolute;
    bottom: 10%;
    right: 2%;
    width: 180px;
    height: 120px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 150 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,20 Q60,-20 90,50 T140,80' fill='none' stroke='%23F48FB1' stroke-width='5' stroke-linecap='round' stroke-dasharray='10 15' opacity='0.6'/%3E%3Ccircle cx='140' cy='80' r='5' fill='%23F48FB1' opacity='0.8'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: floatSlow 8s infinite alternate-reverse;
}

.pg-philosophy .container::before {
    content: '';
    position: absolute;
    top: -5%;
    right: 2%;
    width: 120px;
    height: 120px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='80' r='15' fill='%23FFD54F' opacity='0.8'/%3E%3Ccircle cx='70' cy='70' r='15' fill='%23FFD54F' opacity='0.8'/%3E%3Cpath d='M45,80 L45,20 L85,10 L85,70' fill='none' stroke='%23F48FB1' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M45,20 L85,10' fill='none' stroke='%23F48FB1' stroke-width='12'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: floatSlow 6s infinite alternate;
}

.pg-philosophy .container::after {
    content: '';
    position: absolute;
    bottom: 5%;
    left: 2%;
    width: 150px;
    height: 150px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,90 A40,40 0 0,1 90,90' fill='none' stroke='%233E236C' stroke-width='6' stroke-linecap='round' opacity='0.08'/%3E%3Cpath d='M25,90 A25,25 0 0,1 75,90' fill='none' stroke='%23FFD54F' stroke-width='6' stroke-linecap='round' opacity='0.7'/%3E%3Ccircle cx='50' cy='80' r='8' fill='%23F48FB1' opacity='0.8'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: gentleBreath 9s infinite alternate;
}

/* --- 5.1. PROGRAMS: CORE DOUBLE-GRID (.pg-cards-section) --- */
.pg-cards-section {
    position: relative;
    overflow: visible;
    padding: 60px 0;
}

.pg-cards-section::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 2%;
    width: 140px;
    height: 140px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30,20 C60,-10 110,10 100,50 C90,90 40,120 10,80 C-20,40 0,50 30,20 Z' fill='%23F48FB1' opacity='0.1'/%3E%3Ccircle cx='90' cy='30' r='8' fill='%23FFD54F'/%3E%3Crect x='25' y='80' width='18' height='18' rx='4' fill='%233E236C' opacity='0.15' transform='rotate(15 25 80)'/%3E%3Cpath d='M60,40 L75,70 L45,70 Z' fill='%23F48FB1' opacity='0.6' transform='rotate(-20 60 40)' /%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: gentleBreath 9s infinite alternate;
}

.pg-cards-section::after {
    content: '';
    position: absolute;
    top: 45%;
    right: 2%;
    width: 100px;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50,10 Q50,50 90,50 Q50,50 50,90 Q50,50 10,50 Q50,50 50,10 Z' fill='%23FFD54F' opacity='0.7'/%3E%3Cpath d='M80,10 Q80,20 90,20 Q80,20 80,30 Q80,20 70,20 Q80,20 80,10 Z' fill='%233E236C' opacity='0.15'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: floatSlow 8s infinite alternate-reverse;
}

.pg-cards-section .container::before {
    content: '';
    position: absolute;
    bottom: 35%;
    left: 2%;
    width: 150px;
    height: 150px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50,100 Q80,100 90,60 Q90,20 50,10 Q50,40 50,100 Z' fill='%23F48FB1' opacity='0.5'/%3E%3Cpath d='M50,100 Q20,90 10,60 Q20,30 50,40 Q50,60 50,100 Z' fill='%23FFD54F' opacity='0.7'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: gentleBreath 6s infinite alternate;
}

.pg-cards-section .container::after {
    content: '';
    position: absolute;
    top: 15%;
    right: 2%;
    width: 150px;
    height: 150px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,90 A40,40 0 0,1 90,90' fill='none' stroke='%233E236C' stroke-width='6' stroke-linecap='round' opacity='0.08'/%3E%3Cpath d='M25,90 A25,25 0 0,1 75,90' fill='none' stroke='%23FFD54F' stroke-width='6' stroke-linecap='round' opacity='0.7'/%3E%3Ccircle cx='50' cy='80' r='8' fill='%23F48FB1' opacity='0.8'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: floatSlow 7s infinite alternate;
}

.pg-cards-section .pg-cards-grid:first-of-type::before {
    content: '';
    position: absolute;
    top: 8%;
    right: -2%;
    width: 120px;
    height: 120px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,90 Q30,40 50,80 T90,50' fill='none' stroke='%233E236C' stroke-width='4' stroke-dasharray='6 6' opacity='0.15'/%3E%3Ccircle cx='90' cy='50' r='10' fill='%23FFD54F' opacity='0.9'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: gentleBreath 8s infinite alternate-reverse;
}

.pg-cards-section .pg-cards-grid:last-of-type::after {
    content: '';
    position: absolute;
    bottom: 5%;
    right: 2%;
    width: 120px;
    height: 120px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,90 L40,80 L110,10 L60,50 Z' fill='%23FFD54F' opacity='0.6'/%3E%3Cpath d='M40,80 L60,50 L50,90 Z' fill='%23F48FB1' opacity='0.8'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: floatSlow 6s infinite alternate;
}

/* --- 6. PROGRAMS: CORPORATE (.pg-corporate) --- */
.pg-corporate::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 2%;
    width: 140px;
    height: 140px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50,80 C50,80 10,50 10,30 C10,15 25,10 35,20 C45,30 50,40 50,40 C50,40 55,30 65,20 C75,10 90,15 90,30 C90,50 50,80 50,80 Z' fill='%23F48FB1' opacity='0.7'/%3E%3Cpath d='M80,40 C80,40 60,25 60,15 C60,5 65,5 70,10 C75,15 75,20 75,20 C75,20 75,15 80,10 C85,5 90,5 90,15 C90,25 80,40 80,40 Z' fill='%23FFD54F' opacity='0.9'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: floatSlow 8s infinite alternate;
}

.pg-corporate::after {
    content: '';
    position: absolute;
    bottom: 10%;
    right: 2%;
    width: 140px;
    height: 140px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20,20 Q60,-10 100,20 Q120,40 100,60 Q80,80 50,80 L20,95 L25,70 Q-10,50 20,20 Z' fill='%233E236C' opacity='0.05'/%3E%3Ccircle cx='45' cy='40' r='6' fill='%23FFD54F' opacity='0.9'/%3E%3Ccircle cx='65' cy='40' r='6' fill='%23F48FB1' opacity='0.9'/%3E%3Ccircle cx='85' cy='40' r='6' fill='%233E236C' opacity='0.3'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: gentleBreath 7s infinite alternate-reverse;
}

/* --- 7. ADMISSIONS: PROCESS (.ad-process) --- */
.ad-process::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 2%;
    width: 120px;
    height: 120px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50,0 C50,40 60,50 100,50 C60,50 50,60 50,100 C50,60 40,50 0,50 C40,50 50,40 50,0 Z' fill='%23FFD54F' opacity='0.6'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: gentleBreath 9s infinite alternate;
}

.ad-process::after {
    content: '';
    position: absolute;
    bottom: 10%;
    right: 2%;
    width: 120px;
    height: 120px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,90 L40,80 L110,10 L60,50 Z' fill='%23FFD54F' opacity='0.6'/%3E%3Cpath d='M40,80 L60,50 L50,90 Z' fill='%23F48FB1' opacity='0.8'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: floatSlow 6s infinite alternate-reverse;
}

.ad-process .container::before {
    content: '';
    position: absolute;
    top: -5%;
    right: 2%;
    width: 120px;
    height: 120px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,90 Q30,40 50,80 T90,50' fill='none' stroke='%233E236C' stroke-width='4' stroke-dasharray='6 6' opacity='0.15'/%3E%3Ccircle cx='90' cy='50' r='10' fill='%23FFD54F' opacity='0.9'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: floatSlow 8s infinite alternate;
}

.ad-process .container::after {
    content: '';
    position: absolute;
    bottom: 5%;
    left: 2%;
    width: 150px;
    height: 150px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,90 A40,40 0 0,1 90,90' fill='none' stroke='%233E236C' stroke-width='6' stroke-linecap='round' opacity='0.08'/%3E%3Cpath d='M25,90 A25,25 0 0,1 75,90' fill='none' stroke='%23FFD54F' stroke-width='6' stroke-linecap='round' opacity='0.7'/%3E%3Ccircle cx='50' cy='80' r='8' fill='%23F48FB1' opacity='0.8'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: gentleBreath 7s infinite alternate;
}

/* --- 8. ADMISSIONS: ELIGIBILITY (.ad-eligibility) --- */
.ad-eligibility::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 2%;
    width: 140px;
    height: 140px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30,20 C60,-10 110,10 100,50 C90,90 40,120 10,80 C-20,40 0,50 30,20 Z' fill='%23F48FB1' opacity='0.1'/%3E%3Ccircle cx='90' cy='30' r='8' fill='%23FFD54F'/%3E%3Crect x='25' y='80' width='18' height='18' rx='4' fill='%233E236C' opacity='0.15' transform='rotate(15 25 80)'/%3E%3Cpath d='M60,40 L75,70 L45,70 Z' fill='%23F48FB1' opacity='0.6' transform='rotate(-20 60 40)' /%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: floatSlow 8s infinite alternate-reverse;
}

.ad-eligibility::after {
    content: '';
    position: absolute;
    bottom: 10%;
    right: 2%;
    width: 150px;
    height: 150px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,90 A40,40 0 0,1 90,90' fill='none' stroke='%233E236C' stroke-width='6' stroke-linecap='round' opacity='0.08'/%3E%3Cpath d='M25,90 A25,25 0 0,1 75,90' fill='none' stroke='%23FFD54F' stroke-width='6' stroke-linecap='round' opacity='0.7'/%3E%3Ccircle cx='50' cy='80' r='8' fill='%23F48FB1' opacity='0.8'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: gentleBreath 7s infinite alternate;
}

/* --- 9. ADMISSIONS: WHY CHOOSE US (.ad-why) --- */
.ad-why::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 2%;
    width: 140px;
    height: 140px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50,80 C50,80 10,50 10,30 C10,15 25,10 35,20 C45,30 50,40 50,40 C50,40 55,30 65,20 C75,10 90,15 90,30 C90,50 50,80 50,80 Z' fill='%23F48FB1' opacity='0.7'/%3E%3Cpath d='M80,40 C80,40 60,25 60,15 C60,5 65,5 70,10 C75,15 75,20 75,20 C75,20 75,15 80,10 C85,5 90,5 90,15 C90,25 80,40 80,40 Z' fill='%23FFD54F' opacity='0.9'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: floatSlow 7s infinite alternate;
}

.ad-why::after {
    content: '';
    position: absolute;
    bottom: 10%;
    right: 2%;
    width: 180px;
    height: 120px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 150 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,20 Q60,-20 90,50 T140,80' fill='none' stroke='%23F48FB1' stroke-width='5' stroke-linecap='round' stroke-dasharray='10 15' opacity='0.6'/%3E%3Ccircle cx='140' cy='80' r='5' fill='%23F48FB1' opacity='0.8'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: gentleBreath 8s infinite alternate-reverse;
}

.ad-why .container::before {
    content: '';
    position: absolute;
    top: -5%;
    right: 2%;
    width: 100px;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50,10 Q50,50 90,50 Q50,50 50,90 Q50,50 10,50 Q50,50 50,10 Z' fill='%23FFD54F' opacity='0.7'/%3E%3Cpath d='M80,10 Q80,20 90,20 Q80,20 80,30 Q80,20 70,20 Q80,20 80,10 Z' fill='%233E236C' opacity='0.15'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: floatSlow 6s infinite alternate;
}

.ad-why .container::after {
    content: '';
    position: absolute;
    bottom: 5%;
    left: 2%;
    width: 120px;
    height: 120px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50,100 Q80,100 90,60 Q90,20 50,10 Q50,40 50,100 Z' fill='%23F48FB1' opacity='0.5'/%3E%3Cpath d='M50,100 Q20,90 10,60 Q20,30 50,40 Q50,60 50,100 Z' fill='%23FFD54F' opacity='0.7'/%3E%3C/svg%3E") no-repeat center/contain;
    z-index: 1;
    pointer-events: none;
    animation: gentleBreath 9s infinite alternate;
}

/* Global Mobile Scale Down */
@media (max-width: 1024px) {

    .hp-programs::before,
    .hp-programs::after,
    .hp-programs .container::before,
    .hp-programs .container::after,
    .pg-cards-section::before,
    .pg-cards-section::after,
    .pg-cards-section .container::before,
    .pg-cards-section .container::after,
    .pg-cards-section .pg-cards-grid:first-of-type::before,
    .pg-cards-section .pg-cards-grid:last-of-type::after,
    .ab-story::before,
    .ab-story::after,
    .ab-story .container::before,
    .ab-story .container::after,
    .ab-vm::before,
    .ab-vm::after,
    .ab-vm .container::before,
    .ab-vm .container::after,
    .ab-leadership::before,
    .ab-leadership::after,
    .ab-leadership .container::before,
    .ab-leadership .container::after,
    .pg-philosophy::before,
    .pg-philosophy::after,
    .pg-philosophy .container::before,
    .pg-philosophy .container::after,
    .pg-corporate::before,
    .pg-corporate::after,
    .ad-process::before,
    .ad-process::after,
    .ad-process .container::before,
    .ad-process .container::after,
    .ad-eligibility::before,
    .ad-eligibility::after,
    .ad-why::before,
    .ad-why::after,
    .ad-why .container::before,
    .ad-why .container::after {
        transform: scale(0.6);
        opacity: 0.5;
    }
}

/* =====================================================================
   FORCE SVG STACKING CORRECTION (Tucking Motifs Behind Content)
   ===================================================================== */

/* 1. Motifs attached to the primary <section> wrapper go to Layer 0 */
.hp-programs::before,
.hp-programs::after,
.ab-story::before,
.ab-story::after,
.ab-vm::before,
.ab-vm::after,
.ab-leadership::before,
.ab-leadership::after,
.pg-philosophy::before,
.pg-philosophy::after,
.pg-cards-section::before,
.pg-cards-section::after,
.pg-corporate::before,
.pg-corporate::after,
.ad-process::before,
.ad-process::after,
.ad-eligibility::before,
.ad-eligibility::after,
.ad-why::before,
.ad-why::after {
    z-index: 0 !important;
}

/* 2. Motifs attached inside `.container` go to Layer -1 (bottom of container) */
.hp-programs .container::before,
.hp-programs .container::after,
.ab-story .container::before,
.ab-story .container::after,
.ab-vm .container::before,
.ab-vm .container::after,
.ab-leadership .container::before,
.ab-leadership .container::after,
.pg-philosophy .container::before,
.pg-philosophy .container::after,
.pg-cards-section .container::before,
.pg-cards-section .container::after,
.pg-cards-section .pg-cards-grid:first-of-type::before,
.pg-cards-section .pg-cards-grid:last-of-type::after,
.ad-process .container::before,
.ad-process .container::after,
.ad-why .container::before,
.ad-why .container::after {
    z-index: -1 !important;
}


/* Tucking Motifs Behind Content */
.hp-programs .container,
.ab-story .container,
.ab-vm .container,
.ab-leadership .container,
.pg-philosophy .container,
.pg-cards-section .container,
.pg-corporate .container,
.ad-process .container,
.ad-eligibility .container,
.ad-why .container,
.hp-programs .hp-section-header,
.pg-cards-section .hp-section-header,
.pg-cards-grid,
.pg-card {
    position: relative;
    z-index: 2;
}

/* ============================================
   GLOBAL BUTTON OVERRIDE: Rectangular with Slight Curve
   ============================================ */
.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-outline-light,
.btn-accent,
.btn-ghost,
.btn-lg,
.btn-block,
.btn-white-pulse,
.btn-visit-hero,
.hp-act-pill,
button[type="submit"] {
    border-radius: 8px !important; /* Rectangle shape with a slight, modern curve */
}

/* Hide Icons in CTA Buttons */
.btn i,
.hp-act-pill i,
button[type="submit"] i {
    display: none !important;
}
/* --- Announcement Strip --- */
.announcement-strip {
    display: block;
    background: linear-gradient(135deg, #2d1b4e 0%, #4a2d7a 50%, #3E236C 100%);
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 8px 0;
    overflow: hidden;
    position: relative;
    z-index: 1050;
    transition: filter 0.3s ease;
    box-shadow: 0 2px 12px rgba(45, 27, 78, 0.3);
    letter-spacing: 0.02em;
}

.announcement-strip:hover {
    filter: brightness(1.1);
}

.announcement-content {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
}

.announcement-track {
    display: inline-flex;
    white-space: nowrap;
    animation: scroll-announcement 30s linear infinite;
}

.announcement-strip:hover .announcement-track {
    animation-play-state: paused;
}

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

.announcement-track span {
    display: inline-block;
    padding-right: 50px;
    letter-spacing: 0.5px;
}


/* Enhancements for Announcement Strip */
.announce-item {
    display: inline-flex;
    align-items: center;
    padding-right: 40px;
    gap: 6px;
}
.announcement-badge {
    background: linear-gradient(135deg, #FFD54F, #FFB300);
    color: #2d1b4e;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 0.65rem;
    font-weight: 800;
    margin-right: 6px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(255, 179, 0, 0.3);
    white-space: nowrap;
}
.announce-highlight {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-right: 2px;
    color: #FFD54F;
    font-size: 0.82rem;
}
.announce-action {
    font-weight: 500;
    opacity: 0.85;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8rem;
}
.announce-icon {
    margin: 0 8px;
    color: #FFD54F;
    font-size: 0.7rem;
    opacity: 0.7;
}

/* ============================================
   GLOBAL MOBILE OPTIMIZATION
   ============================================ */
@media (max-width: 1024px) {
    .container {
        padding: 0 20px;
    }

    .nav-container {
        gap: 12px;
    }

    .hp-hero-container {
        grid-template-columns: 1fr;
        gap: 36px;
        text-align: center;
    }

    .pg-hero > .container,
    .ad-hero > .container {
        flex-direction: column !important;
        gap: 36px !important;
        text-align: center !important;
    }

    .pg-hero-content,
    .pg-hero-visual,
    .ad-hero-content,
    .ad-hero-visual,
    .daycare-hero-visual,
    .gl-vt-content,
    .gl-vt-iframe-wrapper {
        min-width: 0 !important;
        width: 100%;
        max-width: none !important;
    }

    .hp-hero-content,
    .ab-hero-content,
    .pg-hero-content,
    .ad-hero-content,
    .gl-vt-content {
        text-align: center !important;
    }

    .hp-hero-desc,
    .ab-hero-content p,
    .pg-hero-content p,
    .ad-hero-content p,
    .gl-vt-content p {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hp-hero-actions,
    .ab-hero-actions,
    .pg-hero-actions,
    .ad-hero-actions,
    .hp-cta-actions,
    .ab-cta-actions {
        flex-direction: column;
        align-items: center !important;
        justify-content: center !important;
        gap: 14px;
    }

    .hp-hero-actions > *,
    .ab-hero-actions > *,
    .pg-hero-actions > *,
    .ad-hero-actions > *,
    .hp-cta-actions > *,
    .ab-cta-actions > * {
        width: min(100%, 360px);
    }

    .hp-hero-trust {
        justify-content: center;
    }

    .hp-stats {
        margin-top: 0 !important;
    }

    .hp-stats-glass {
        grid-template-columns: 1fr 1fr !important;
        gap: 18px !important;
        padding: 24px !important;
    }

    .hp-stat-divider {
        display: none !important;
    }

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

    .hp-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }

    .footer .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
        padding-top: 48px;
        padding-bottom: 32px;
    }

    .footer .social-links {
        flex-wrap: wrap;
    }

    .daycare-hero-img img {
        height: 320px !important;
    }

    .mascot-badge {
        padding: 10px 18px !important;
        font-size: 0.78rem !important;
        gap: 8px !important;
    }

    .badge-top {
        left: -12px !important;
    }

    .badge-bottom {
        right: -12px !important;
    }

    .ad-why-img-badge {
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: 16px !important;
        max-width: calc(100% - 32px);
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }

    .navbar {
        height: auto;
    }

    .logo img {
        height: 42px !important;
    }

    .mobile-menu-overlay {
        justify-content: flex-start;
        padding: 88px 16px 28px;
        overflow-y: auto;
    }

    .mobile-menu-overlay .mobile-nav-links {
        width: 100%;
    }

    .mobile-menu-overlay .mobile-nav-links li a {
        font-size: clamp(1.2rem, 6vw, 1.5rem);
        padding: 10px 0;
        line-height: 1.2;
    }

    .mobile-menu-overlay .btn {
        width: 100%;
        max-width: 320px;
    }

    .hp-hero-content h1,
    .ab-hero-content h1,
    .gl-hero-content h1 {
        font-size: clamp(2rem, 9vw, 2.6rem) !important;
    }

    .hp-hero-desc,
    .ab-hero-content p,
    .gl-hero-content p {
        font-size: 1rem !important;
        line-height: 1.65 !important;
    }

    .hp-hero-float,
    .ab-hero-float {
        display: none !important;
    }

    .hp-stats-glass,
    .hp-card-grid,
    .footer .footer-grid {
        grid-template-columns: 1fr !important;
    }

    .hp-stat-item {
        justify-content: center !important;
    }

    .hp-trust-chip {
        width: min(100%, 320px);
        justify-content: center;
    }

    .footer .footer-bottom {
        padding: 16px 0 24px;
    }

    .footer .footer-bottom p {
        line-height: 1.6;
    }

    .daycare-hero-img img {
        height: 260px !important;
    }

    .mascot-badge {
        font-size: 0.72rem !important;
        padding: 8px 14px !important;
    }

    .badge-top {
        left: -6px !important;
        top: 58% !important;
    }

    .badge-bottom {
        right: -6px !important;
        bottom: 4% !important;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 14px;
    }

    .announcement-badge,
    .announce-highlight {
        font-size: 0.68rem;
    }

    .announce-action {
        display: none;
    }

    .hp-hero-actions > *,
    .ab-hero-actions > *,
    .pg-hero-actions > *,
    .ad-hero-actions > *,
    .hp-cta-actions > *,
    .ab-cta-actions > * {
        width: 100%;
        max-width: none;
    }

    .hp-trust-chip {
        width: 100%;
    }

    .daycare-hero-img img {
        height: 220px !important;
    }

    .mascot-badge {
        white-space: normal !important;
        max-width: 170px;
        text-align: center;
    }
}