/* =========================================================
   GOOGLE FONTS
========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Oswald:wght@400;500;600;700&display=swap");


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {
     --school-blue: #082f87;
            --school-dark-blue: #061f63;
            --school-orange: #f58220;
            --school-light-blue: #eef5fc;
            --school-border: #e4ebf3;
            --school-text: #26364d;
            --school-muted: #68768a;

            --school-header-height: 92px;
            --school-header-small-height: 68px;
}
         html {
            scroll-behavior: smooth;
        }

/* =========================================================
   BODY
========================================================= */

body {
     margin: 0;
     padding: 0;
            font-family: "Inter", sans-serif;
            color: var(--school-text);
            background: #ffffff;
}

/* @media(max-width:993px) { body{text-align: center;} } */
a{text-decoration: none;}
        img { display: block;  max-width: 100%;}
h1, h2, h3, h4, h5, h6 {
  font-family:"Urbanist", sans-serif;
  font-weight:500;
 
  margin: 0;
}
ul { margin: 0; padding: 0; list-style: none; }
.container { width: 80%; max-width: 100%; }
@media (max-width: 1401px) {
   .container {
        width: 80%;
    }
}
@media (max-width: 1204px) {
   .container {
        width: 95%;
    }
}

figcaption, figure{margin: 0; padding: 0;}
 button {
            font-family:
                "Poppins",
                sans-serif;
        }

.cr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.smv-school-slider .carousel-item figure,
.achievement-photo figure,
.event-image figure,
.principal-image figure,
.facilities-image-wrap figure,
.club-card-thumb figure,
.sig-media figure,
.act-gallery-item figure,
.curr-stage-hero-media figure,
.curr-hero-visual figure,
.cm-portrait-frame figure,
.lead-collage figure,
.cca-welcome-visual figure,
.cca-card-img-wrap figure,
.ee-approach-visual figure,
.ee-commitment-visual figure,
.curriculum-image-wrap figure,
.founder-portrait-wrap figure,
.gal-hero-frame figure,
.history-hero-grid figure,
.hero-shape-frame figure,
.about-image-wrap figure,
.panchang-image-wrap figure,
.principal-portrait-wrap figure,
.fac-visual figure,
.sa-card-img-clip figure,
.sa-item figure,
.fac-hero-image-wrap figure,
.ach-champ-img figure,
.ach-district-img figure,
.ach-art-thumb figure,
.ach-feature-img figure,
.ach-gallery-item figure,
.tm-philosophy-visual figure {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    padding: 0;
}










/* =========================================================
           MAIN HEADER
        ========================================================= */

        .school-main-header {
            width: 100%;
          
            background: rgba(255, 255, 255, 0.98);
            border-bottom: 1px solid rgba(8, 47, 135, 0.08);
            position: relative;
            z-index: 1040;
            transition:
                height 0.35s ease,
                box-shadow 0.35s ease,
                background 0.35s ease;
                padding-top: 10px;
                padding-bottom: 10px;
        }

        .school-main-header.school-header-scrolled {
            position: fixed;
            top: 0;
            left: 0;
            height: var(--school-header-small-height);
            box-shadow: 0 8px 30px rgba(8, 47, 135, 0.12);
            background: rgba(255, 255, 255, 0.98);
        }


        /* =========================================================
           HEADER INNER
        ========================================================= */

        .school-header-inner {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }


        /* =========================================================
           LOGO
        ========================================================= */

        .school-header-logo {
            height: auto;
            max-height: 65px;
            max-width: 280px;
            width: auto;
            display: block;
            object-fit: contain;
            transition:
                height 0.35s ease,
                transform 0.35s ease;
        }

        .school-main-header.school-header-scrolled .school-header-logo {
            max-height: 52px;
        }


        /* =========================================================
           HEADER RIGHT AREA
        ========================================================= */

        .school-header-right {
            display: flex;
            align-items: center;
            gap: 18px;
        }


        /* =========================================================
           TAGLINE
        ========================================================= */

        .school-header-tagline {
            text-align: right;
            font-family: "Playfair Display", serif;
            font-size: 14px;
            line-height: 1.3;
            color: var(--school-blue);
            max-width: 145px;
        }

        .school-header-tagline span {
            display: block;
            font-size: 11px;
            font-family: "Inter", sans-serif;
            color: var(--school-muted);
            margin-top: 4px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
        }

        .school-main-header.school-header-scrolled .school-header-tagline {
            display: none;
        }


        /* =========================================================
           CREATIVE NAVBAR TOGGLER
        ========================================================= */

        .school-menu-trigger {
            width: 48px;
            height: 48px;
            border: 0;
            border-radius: 50%;
            background: var(--school-blue);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            cursor: pointer;
            box-shadow: 0 7px 20px rgba(8, 47, 135, 0.20);
            transition:
                width 0.3s ease,
                height 0.3s ease,
                background 0.3s ease,
                transform 0.3s ease;
        }

        .school-menu-trigger:hover {
            background: var(--school-dark-blue);
            transform: translateY(-2px);
        }

        .school-menu-trigger::before,
        .school-menu-trigger::after,
        .school-menu-trigger span {
            content: "";
            position: absolute;
            width: 19px;
            height: 2px;
            background: #ffffff;
            border-radius: 10px;
            transition: 0.3s ease;
        }

        .school-menu-trigger::before {
            transform: translateY(-6px);
        }

        .school-menu-trigger span {
            transform: translateY(0);
        }

        .school-menu-trigger::after {
            transform: translateY(6px);
        }

        .school-main-header.school-header-scrolled .school-menu-trigger {
            width: 42px;
            height: 42px;
        }


        /* =========================================================
           HEADER SPACER
           Prevents content jumping when header becomes fixed
        ========================================================= */

        .school-header-spacer {
            display: none;
            height: var(--school-header-small-height);
        }

        .school-header-spacer.school-spacer-active {
            display: block;
        }


        /* =========================================================
           OFFCANVAS
        ========================================================= */

        .school-navigation-offcanvas {
            width: 390px !important;
            max-width: 92vw;
            border: 0 !important;
            box-shadow: -15px 0 50px rgba(0, 0, 0, 0.16);
            z-index: 1200 !important;
        }

        /*
           IMPORTANT:
           Bootstrap's normal offcanvas z-index is lower.
           We deliberately place this above every website section.
        */

        .offcanvas-backdrop {
            z-index: 1190 !important;
        }

        .school-navigation-offcanvas .offcanvas-header {
            padding: 22px 25px;
            border-bottom: 1px solid var(--school-border);
            background: #ffffff;
        }

        .school-offcanvas-brand {
            height: 62px;
            width: auto;
            object-fit: contain;
        }

        .school-navigation-offcanvas .btn-close {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background-color: var(--school-light-blue);
            opacity: 1;
            box-shadow: none;
            transition: 0.25s ease;
        }

        .school-navigation-offcanvas .btn-close:hover {
            background-color: #dce9f8;
        }


        /* =========================================================
           OFFCANVAS BODY
        ========================================================= */

        .school-navigation-offcanvas .offcanvas-body {
            padding: 12px 18px 25px;
            background: #ffffff;

            /*
               Makes the menu itself scrollable.
            */
            overflow-y: auto;
        }


        /* =========================================================
           MAIN MENU
        ========================================================= */

        .school-menu-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .school-menu-item {
            border-bottom: 1px solid #edf1f6;
        }

        .school-menu-link,
        .school-menu-parent {
            width: 100%;
            min-height: 48px;
            padding: 12px 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: var(--school-dark-blue);
            background: transparent;
            border: 0;
            font-size: 14px;
            font-weight: 600;
            text-align: left;
            transition: 0.25s ease;
        }

        .school-menu-link:hover,
        .school-menu-parent:hover {
            color: var(--school-orange);
            background: #fff8f2;
            padding-left: 18px;
        }


        /* =========================================================
           ACTIVE MENU
        ========================================================= */

        .school-menu-link.school-menu-active {
            color: #ffffff;
            background: var(--school-blue);
            border-radius: 7px;
        }

        .school-menu-link.school-menu-active:hover {
            color: #ffffff;
            background: var(--school-dark-blue);
            padding-left: 12px;
        }

        .school-submenu a.school-menu-active,
        .school-submenu a.active {
            color: var(--school-dark-blue);
            font-weight: 700;
            padding-left: 21px;
        }


        /* =========================================================
           ARROW
        ========================================================= */

        .school-menu-arrow {
            width: 8px;
            height: 8px;
            border-right: 2px solid currentColor;
            border-bottom: 2px solid currentColor;
            transform: rotate(45deg);
            transition: transform 0.25s ease;
            margin-right: 4px;
            margin-bottom: 4px;
        }

        .school-menu-parent[aria-expanded="true"] .school-menu-arrow {
            transform: rotate(225deg);
            margin-bottom: -3px;
        }


        /* =========================================================
           SUB MENU
        ========================================================= */

        .school-submenu {
            list-style: none;
            padding: 3px 0 8px 20px;
            margin: 0;
        }

        .school-submenu li {
            position: relative;
        }

        .school-submenu li::before {
            content: "";
            position: absolute;
            left: 1px;
            top: 50%;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--school-orange);
            transform: translateY(-50%);
        }

        .school-submenu a {
            display: block;
            padding: 8px 10px 8px 17px;
            color: #465671;
            font-size: 13px;
            font-weight: 500;
            transition: 0.2s ease;
        }

        .school-submenu a:hover {
            color: var(--school-blue);
            padding-left: 21px;
        }


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

        .school-offcanvas-footer {
            margin-top: 20px;
            padding: 18px;
            background: var(--school-light-blue);
            border-radius: 10px;
            border-left: 4px solid var(--school-orange);
        }

        .school-offcanvas-footer-title {
            font-family: "Playfair Display", serif;
            color: var(--school-blue);
            font-size: 17px;
            margin-bottom: 4px;
        }

        .school-offcanvas-footer-text {
            margin: 0;
            color: var(--school-muted);
            font-size: 12px;
            line-height: 1.6;
        }




         /* =========================================
           SCHOOL HERO SLIDER
        ========================================= */

        .smv-school-slider {
            position: relative;
            width: 100%;
            overflow: hidden;
            background: #041c4b;
        }

        .smv-school-slider .carousel-item {
            position: relative;
            min-height: 560px;
            height: clamp(560px, 75vh, 680px);
        }

        .smv-school-slider .carousel-item img {
            width: 100%;
            height: 100%;
            min-height: inherit;
            object-fit: cover;
            object-position: center;
            display: block;
        }

        /* Dark overlay */

        .smv-school-slider .smv-slider-overlay {
            position: absolute;
            inset: 0;
            background:
                linear-gradient(
                    90deg,
                    rgba(4, 28, 75, 0.88) 0%,
                    rgba(4, 28, 75, 0.65) 45%,
                    rgba(4, 28, 75, 0.28) 75%,
                    rgba(4, 28, 75, 0.10) 100%
                );
            pointer-events: none;
        }

        /* Content */

        .smv-slider-content {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            transform: translateY(-50%);
            z-index: 2;
            pointer-events: auto;
        }

        .smv-slider-content-inner {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 40px;
            text-align: left;
            box-sizing: border-box;
        }

        .smv-slider-label {
            display: inline-block;
            margin-bottom: 15px;
            color: #f28a24;
            font-family: "Inter", sans-serif;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 3px;
            text-transform: uppercase;
        }

        .smv-slider-title {
            max-width: 720px;
            margin: 0 0 18px;
            color: #ffffff;
            font-family: "Playfair Display", serif;
            font-size: clamp(34px, 4.8vw, 60px);
            font-weight: 600;
            line-height: 1.15;
            word-break: normal;
            overflow-wrap: break-word;
        }

        .smv-slider-description {
            max-width: 600px;
            margin: 0 0 28px;
            color: rgba(255, 255, 255, 0.92);
            font-family: "Inter", sans-serif;
            font-size: 17px;
            line-height: 1.65;
            word-break: normal;
            overflow-wrap: break-word;
        }

        .smv-slider-button {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 13px 26px;
            border: 2px solid #f28a24;
            border-radius: 30px;
            background: #f28a24;
            color: #ffffff;
            font-family: "Inter", sans-serif;
            font-size: 14px;
            font-weight: 700;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .smv-slider-button:hover {
            background: #ffffff;
            border-color: #ffffff;
            color: #062b70;
        }

        /* Secondary button */

        .smv-slider-button.smv-outline-button {
            margin-left: 10px;
            border-color: #ffffff;
            background: transparent;
        }

        .smv-slider-button.smv-outline-button:hover {
            background: #ffffff;
            color: #062b70;
        }

        /* Carousel indicators */

        .smv-school-slider .carousel-indicators {
            right: auto;
            left: 40px;
            bottom: 35px;
            margin: 0;
            justify-content: flex-start;
            z-index: 5;
        }

        .smv-school-slider .carousel-indicators [data-bs-target] {
            width: 35px;
            height: 4px;
            margin: 0 6px 0 0;
            border: 0;
            border-radius: 2px;
            opacity: 0.5;
            background-color: #ffffff;
            transition: all 0.3s ease;
        }

        .smv-school-slider .carousel-indicators .active {
            width: 45px;
            opacity: 1;
            background-color: #f28a24;
        }

        /* Carousel arrows */

        .smv-school-slider .carousel-control-prev,
        .smv-school-slider .carousel-control-next {
            width: 50px;
            height: 50px;
            top: auto;
            bottom: 25px;
            opacity: 1;
            z-index: 5;
        }

        .smv-school-slider .carousel-control-prev {
            right: 95px;
            left: auto;
        }

        .smv-school-slider .carousel-control-next {
            right: 35px;
        }

        .smv-school-slider .carousel-control-prev-icon,
        .smv-school-slider .carousel-control-next-icon {
            width: 45px;
            height: 45px;
            border: 1px solid rgba(255,255,255,0.7);
            border-radius: 50%;
            background-size: 18px;
            background-color: rgba(0,0,0,0.25);
            transition: background-color 0.3s ease, border-color 0.3s ease;
        }

        .smv-school-slider .carousel-control-prev:hover .carousel-control-prev-icon,
        .smv-school-slider .carousel-control-next:hover .carousel-control-next-icon {
            background-color: #f28a24;
            border-color: #f28a24;
        }


        /* =========================================
           SLIDER RESPONSIVE BREAKPOINTS
        ========================================= */

        @media (max-width: 991px) {

            .smv-school-slider .carousel-item {
                min-height: 500px;
                height: 520px;
            }

            .smv-slider-content-inner {
                padding: 0 30px;
                text-align: left;
            }

            .smv-slider-title {
                max-width: 620px;
                font-size: clamp(30px, 4.2vw, 44px);
            }

            .smv-slider-description {
                max-width: 540px;
                font-size: 16px;
                margin-bottom: 24px;
            }

        }

        @media (max-width: 767px) {

            .smv-school-slider .carousel-item {
                min-height: 460px;
                height: 480px;
            }

            .smv-school-slider .carousel-item img {
                object-position: center;
            }

            .smv-school-slider .smv-slider-overlay {
                background:
                    linear-gradient(
                        135deg,
                        rgba(4, 28, 75, 0.88) 0%,
                        rgba(4, 28, 75, 0.72) 55%,
                        rgba(4, 28, 75, 0.60) 100%
                    );
            }

            .smv-slider-content {
                padding-bottom: 25px;
            }

            .smv-slider-content-inner {
                padding: 0 24px;
                text-align: left;
            }

            .smv-slider-label {
                font-size: 11px;
                letter-spacing: 2px;
                margin-bottom: 10px;
            }

            .smv-slider-title {
                margin-bottom: 14px;
                font-size: clamp(24px, 5.2vw, 32px);
                line-height: 1.2;
                max-width: 100%;
            }

            .smv-slider-description {
                margin-bottom: 22px;
                font-size: 14px;
                line-height: 1.55;
                max-width: 100%;
            }

            .smv-slider-button {
                padding: 11px 20px;
                font-size: 13px;
                margin-bottom: 6px;
            }

            .smv-slider-button.smv-outline-button {
                margin-left: 8px;
            }

            .smv-school-slider .carousel-indicators {
                left: 24px;
                bottom: 18px;
            }

            .smv-school-slider .carousel-indicators [data-bs-target] {
                width: 25px;
                height: 3px;
            }

            .smv-school-slider .carousel-indicators .active {
                width: 35px;
            }

            .smv-school-slider .carousel-control-prev,
            .smv-school-slider .carousel-control-next {
                display: none;
            }
        }

        @media (max-width: 480px) {

            .smv-school-slider .carousel-item {
                min-height: 420px;
                height: 440px;
            }

            .smv-slider-content-inner {
                padding: 0 16px;
            }

            .smv-slider-label {
                font-size: 10px;
                letter-spacing: 1.5px;
                margin-bottom: 8px;
            }

            .smv-slider-title {
                font-size: clamp(21px, 6vw, 26px);
                line-height: 1.22;
                margin-bottom: 10px;
            }

            .smv-slider-description {
                font-size: 13px;
                line-height: 1.5;
                margin-bottom: 18px;
            }

            .smv-slider-button {
                padding: 9px 18px;
                font-size: 12px;
            }

            .smv-slider-button.smv-outline-button {
                margin-left: 6px;
                padding: 9px 16px;
            }

            .smv-school-slider .carousel-indicators {
                left: 16px;
                bottom: 14px;
            }
        }




        
        /* =========================================================
   WELCOME SECTION
========================================================= */

.school-welcome {
    position: relative;
    overflow: hidden;
    padding: 90px 0 70px;
    background: #ffffff;
}


/* =========================================================
   DECORATIVE BACKGROUND SHAPES
========================================================= */

.school-welcome::before {
    content: "";
    position: absolute;

    width: 650px;
    height: 650px;

    left: -300px;
    top: -320px;

    background: var(--school-light-blue);

    border-radius: 50%;

    opacity: 0.55;

    pointer-events: none;
}


.school-welcome::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -280px;
    bottom: -300px;

    background: var(--school-light-blue);

    border-radius: 50%;

    opacity: 0.45;

    pointer-events: none;
}


/* =========================================================
   CONTENT WRAPPER
========================================================= */

.welcome-content {
    position: relative;
    z-index: 2;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.welcome-label {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 20px;

    color: var(--school-orange);

    font-size: 15px;
    font-weight: 700;

    letter-spacing: 0.8px;
    text-transform: uppercase;
}


.welcome-label::before {
    content: "";

    width: 40px;
    height: 3px;

    background: var(--school-orange);

    display: inline-block;

    border-radius: 10px;
}


.welcome-title {
    margin: 0 0 22px;

    font-family: "Playfair Display", serif;

    font-size: clamp(42px, 4vw, 68px);
    line-height: 1.08;

    font-weight: 700;

    color: var(--school-blue);
}


.welcome-title .orange {
    color: var(--school-orange);
}


.welcome-description {
    max-width: 580px;

    margin-bottom: 30px;

    color: var(--school-muted);

    font-size: 18px;
    line-height: 1.75;
}


/* =========================================================
   BUTTON
========================================================= */

.school-button {
    display: inline-flex;
    align-items: center;

    padding: 7px 8px 7px 28px;

    background: var(--school-blue);
    color: #ffffff;

    border-radius: 50px;

    font-size: 16px;
    font-weight: 700;

    text-decoration: none;

    transition: all 0.3s ease;
}


.school-button span {
    margin-right: 25px;
}


.school-button i {
    width: 50px;
    height: 50px;

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

    background: var(--school-orange);
    color: #ffffff;

    border-radius: 50%;

    font-size: 22px;

    transition: all 0.3s ease;
}


.school-button:hover {
    background: var(--school-dark-blue);
    color: #ffffff;
}


.school-button:hover i {
    transform: translateX(3px);
}


/* =========================================================
   CAMPUS IMAGE
========================================================= */

.campus-wrapper {
    position: relative;

    padding: 15px;

    background: #ffffff;

    border: 1px solid var(--school-border);

    border-radius: 18px;

    box-shadow:
        0 20px 50px rgba(8, 47, 135, 0.10);

    margin-left: 20px;
}


/* Blue decorative bar */

.campus-wrapper::before {
    content: "";

    position: absolute;

    width: 55%;
    height: 30px;

    top: -32px;
    left: 40px;

    background: var(--school-blue);

    border-radius: 15px 15px 0 0;

    z-index: -1;
}


/* Orange corner */

.campus-wrapper::after {
    content: "";

    position: absolute;

    width: 55px;
    height: 55px;

    top: -6px;
    right: -6px;

    border-top: 7px solid var(--school-orange);
    border-right: 7px solid var(--school-orange);

    border-radius: 0 18px 0 0;
}


.campus-image {
    width: 100%;
    height: auto;

    display: block;

    border-radius: 12px;

    object-fit: cover;
}


/* =========================================================
   DECORATIVE SCHOOL ICONS
========================================================= */

.school-decoration {
    position: absolute;

    color: var(--school-blue);

    opacity: 0.10;

    z-index: 1;

    pointer-events: none;
}


.school-decoration.books {
    left: 10px;
    bottom: 280px;

    font-size: 110px;

    transform: rotate(-8deg);
}


.school-decoration.leaf {
    right: 20px;
    top: 40px;

    font-size: 110px;

    transform: rotate(25deg);
}


/* =========================================================
   FEATURE CARDS
========================================================= */

.school-features {
    position: relative;

    z-index: 3;

    margin-top: 65px;
}


.feature-card {
    height: 100%;

    padding: 28px 24px;

    background: #ffffff;

    border: 1px solid var(--school-border);

    border-radius: 15px;

    text-align: center;

    transition: all 0.3s ease;
}


.feature-card:hover {
    transform: translateY(-7px);

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

    box-shadow:
        0 18px 35px rgba(8, 47, 135, 0.10);
}


/* =========================================================
   FEATURE ICON
========================================================= */

.feature-icon {
    width: 86px;
    height: 86px;

    margin: 0 auto 20px;

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

    background: var(--school-light-blue);

    color: var(--school-blue);

    border-radius: 50%;

    font-size: 42px;

    position: relative;
}


.feature-icon::after {
    content: "";

    position: absolute;

    width: 13px;
    height: 13px;

    right: 5px;
    bottom: 7px;

    background: var(--school-orange);

    border-radius: 50%;
}


/* =========================================================
   FEATURE TITLE
========================================================= */

.feature-title {
    margin: 0 0 12px;

    color: var(--school-blue);

    font-size: 20px;

    font-weight: 700;
}


.feature-line {
    width: 45px;
    height: 3px;

    margin: 0 auto 15px;

    background: var(--school-orange);

    border-radius: 10px;
}


.feature-text {
    margin: 0;

    color: var(--school-muted);

    font-size: 15px;

    line-height: 1.7;
}


/* =========================================================
   CAMPUS SCHOOL NAME
========================================================= */

.campus-name {
    margin-top: 14px;

    text-align: center;

    color: var(--school-blue);

    font-family: "Playfair Display", serif;

    font-size: 18px;

    font-weight: 700;

    letter-spacing: 0.3px;
}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1199.98px) {

    .school-welcome {
        padding: 75px 0 60px;
    }

    .welcome-title {
        font-size: 52px;
    }

    .welcome-description {
        font-size: 17px;
    }

    .campus-wrapper {
        margin-left: 0;
    }

    .school-features {
        margin-top: 55px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .school-welcome {
        padding: 70px 0 55px;
    }

    .welcome-content {
        text-align: center;
    }

    .welcome-label {
        justify-content: center;
    }

    .welcome-description {
        margin-left: auto;
        margin-right: auto;
    }

    .campus-wrapper {
        margin-top: 70px;
    }

    .school-decoration.books {
        display: none;
    }

    .school-decoration.leaf {
        right: -20px;
        top: 20px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .school-welcome {
        padding: 55px 0 45px;
    }

    .welcome-title {
        font-size: 40px;
        line-height: 1.15;
    }

    .welcome-description {
        font-size: 16px;
        line-height: 1.65;
    }

    .welcome-label {
        font-size: 13px;
    }

    .welcome-label::before {
        width: 30px;
    }

    .campus-wrapper {
        margin-top: 65px;

        padding: 10px;

        border-radius: 14px;
    }

    .campus-wrapper::before {
        height: 22px;

        top: -24px;
        left: 25px;
    }

    .campus-wrapper::after {
        width: 40px;
        height: 40px;

        border-width: 5px;

        border-radius: 0 13px 0 0;
    }

    .campus-name {
        font-size: 15px;
        line-height: 1.4;
    }

    .school-features {
        margin-top: 40px;
    }

    .feature-card {
        padding: 25px 20px;
    }

    .feature-icon {
        width: 75px;
        height: 75px;

        font-size: 35px;
    }

    .feature-title {
        font-size: 18px;
    }

    .feature-text {
        font-size: 14px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .school-welcome {
        padding: 45px 0 40px;
    }

    .welcome-title {
        font-size: 34px;
    }

    .welcome-description {
        font-size: 15px;
    }

    .school-button {
        padding-left: 20px;

        font-size: 14px;
    }

    .school-button span {
        margin-right: 15px;
    }

    .school-button i {
        width: 45px;
        height: 45px;
    }

    .campus-wrapper {
        margin-top: 55px;
    }

    .campus-name {
        font-size: 14px;
    }

    .feature-card {
        padding: 25px 18px;
    }
}



/* =========================================================
           PANCHANGASHIKSHAN SECTION
        ========================================================= */

        .panchangashikshan-section {
            position: relative;
            overflow: hidden;

            padding: 90px 0 85px;

            background:
                linear-gradient(
                    180deg,
                    var(--school-light-blue) 0%,
                    #ffffff 100%
                );
        }


        /* =========================================================
           DECORATIVE BACKGROUND
        ========================================================= */

        .panchangashikshan-section::before {
            content: "";

            position: absolute;

            width: 430px;
            height: 430px;

            left: -260px;
            top: 100px;

            border: 2px solid var(--school-border);

            border-radius: 50%;

            opacity: 0.8;
        }


        .panchangashikshan-section::after {
            content: "";

            position: absolute;

            width: 330px;
            height: 330px;

            right: -180px;
            bottom: -100px;

            border: 2px solid var(--school-border);

            border-radius: 50%;

            opacity: 0.7;
        }


        /* =========================================================
           MAIN WRAPPER
        ========================================================= */

        .panchang-wrapper {
            position: relative;
            z-index: 2;
        }


        /* =========================================================
           DECORATIVE LEAVES
        ========================================================= */

        .panchang-leaf-left {
            position: absolute;

            left: -20px;
            bottom: 20px;

            color: var(--school-blue);

            opacity: 0.12;

            font-size: 115px;

            transform: rotate(-25deg);
        }


        .panchang-leaf-right {
            position: absolute;

            right: -5px;
            top: 15px;

            color: var(--school-blue);

            opacity: 0.12;

            font-size: 100px;

            transform: rotate(25deg);
        }


        /* =========================================================
           SECTION INTRO
        ========================================================= */

        .panchang-intro {
            text-align: center;

            max-width: 800px;

            margin: 0 auto 55px;
        }


        .panchang-label {
            display: inline-flex;

            align-items: center;

            gap: 12px;

            margin-bottom: 12px;

            color: var(--school-orange);

            font-size: 13px;

            font-weight: 700;

            letter-spacing: 3px;

            text-transform: uppercase;
        }


        .panchang-label::before,
        .panchang-label::after {
            content: "";

            width: 28px;

            height: 2px;

            background: var(--school-orange);
        }


        .panchang-title {
            margin: 0 0 14px;

            color: var(--school-blue);

            font-family: "Playfair Display", serif;

            font-size: clamp(38px, 4vw, 55px);

            line-height: 1.15;

            font-weight: 700;
        }


        .panchang-description {
            max-width: 700px;

            margin: 0 auto;

            color: var(--school-muted);

            font-size: 16px;

            line-height: 1.7;
        }


        /* =========================================================
           FIVE AREA WRAPPER
        ========================================================= */

        .panchang-items {
            position: relative;
        }


        /* =========================================================
           INDIVIDUAL ITEM
        ========================================================= */

        .panchang-item {
            text-align: center;

            position: relative;

            height: 100%;
        }


        /* =========================================================
           CIRCLE
        ========================================================= */

        .panchang-circle {
            width: 155px;
            height: 155px;

            margin: 0 auto 25px;

            display: flex;

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

            position: relative;

            background: #fff;

            border: 1px solid var(--school-border);

            border-radius: 50%;

            box-shadow:
                0 12px 35px rgba(8, 47, 135, 0.08);

            transition: all 0.35s ease;
        }


        /* inner circle */

        .panchang-circle::before {
            content: "";

            position: absolute;

            inset: 10px;

            border: 1px solid var(--school-border);

            border-radius: 50%;
        }


        /* orange small decorative dot */

        .panchang-circle::after {
            content: "";

            position: absolute;

            width: 13px;
            height: 13px;

            right: 22px;
            bottom: 20px;

            background: var(--school-orange);

            border-radius: 50%;
        }


        .panchang-icon {
            position: relative;
            z-index: 2;

            font-size: 55px;

            color: var(--school-blue);

            transition: 0.35s ease;
        }


        /* =========================================================
           HOVER
        ========================================================= */

        .panchang-item:hover .panchang-circle {
            transform: translateY(-10px);

            background: var(--school-blue);

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

            box-shadow:
                0 20px 45px rgba(8, 47, 135, 0.18);
        }


        .panchang-item:hover .panchang-circle::before {
            border-color: rgba(255, 255, 255, 0.25);
        }


        .panchang-item:hover .panchang-icon {
            color: #fff;

            transform: scale(1.08);
        }


        /* =========================================================
           ITEM TITLE
        ========================================================= */

        .panchang-item-title {
            margin: 0 0 8px;

            color: var(--school-blue);

            font-size: 18px;

            font-weight: 700;
        }


        /* =========================================================
           ORANGE LINE
        ========================================================= */

        .panchang-line {
            width: 42px;
            height: 3px;

            margin: 0 auto 12px;

            background: var(--school-orange);

            border-radius: 10px;
        }


        /* =========================================================
           ITEM DESCRIPTION
        ========================================================= */

        .panchang-item-description {
            max-width: 180px;

            margin: 0 auto;

            color: var(--school-muted);

            font-size: 13px;

            line-height: 1.6;
        }


        /* =========================================================
           BOTTOM QUOTE
        ========================================================= */

        .panchang-quote {
            display: flex;

            align-items: center;

            justify-content: center;

            gap: 20px;

            margin-top: 65px;

            color: var(--school-blue);

            font-family: "Playfair Display", serif;

            font-size: 18px;

            font-style: italic;

            text-align: center;
        }


        .panchang-quote::before,
        .panchang-quote::after {
            content: "";

            width: 85px;

            height: 1px;

            background: var(--school-border);
        }


        /* =========================================================
           TABLET
        ========================================================= */

        @media (max-width: 991.98px) {

            .panchangashikshan-section {
                padding: 75px 0 70px;
            }

            .panchang-intro {
                margin-bottom: 45px;
            }

            .panchang-circle {
                width: 135px;
                height: 135px;
            }

            .panchang-icon {
                font-size: 48px;
            }

            .panchang-item-title {
                font-size: 17px;
            }

        }


        /* =========================================================
           MOBILE
        ========================================================= */

        @media (max-width: 767.98px) {

            .panchangashikshan-section {
                padding: 60px 0;
            }

            .panchang-title {
                font-size: 36px;
            }

            .panchang-description {
                font-size: 15px;
            }

            .panchang-items {
                max-width: 500px;

                margin: auto;
            }

            .panchang-circle {
                width: 125px;
                height: 125px;

                margin-bottom: 18px;
            }

            .panchang-icon {
                font-size: 44px;
            }

            .panchang-item-title {
                font-size: 16px;
            }

            .panchang-item-description {
                font-size: 13px;
            }

            .panchang-quote {
                margin-top: 50px;

                font-size: 16px;

                gap: 12px;
            }

            .panchang-quote::before,
            .panchang-quote::after {
                width: 35px;
            }

            .panchang-leaf-left,
            .panchang-leaf-right {
                display: none;
            }
        }


        /* =========================================================
           SMALL MOBILE
        ========================================================= */

        @media (max-width: 575.98px) {

            .panchangashikshan-section {
                padding: 50px 0;
            }

            .panchang-label {
                font-size: 11px;

                letter-spacing: 2px;
            }

            .panchang-title {
                font-size: 32px;
            }

            .panchang-circle {
                width: 115px;
                height: 115px;
            }

            .panchang-icon {
                font-size: 40px;
            }

            .panchang-item-title {
                font-size: 15px;
            }

            .panchang-item-description {
                font-size: 12px;
            }
        }



        /* =========================================================
   MAIN SECTION
========================================================= */

.school-admission-banner {

    position: relative;

    overflow: hidden;

    padding: 95px 0;

    background:
        linear-gradient(
            120deg,
            var(--school-dark-blue) 0%,
            var(--school-blue) 55%,
            #0b3d9e 100%
        );

}


/* =========================================================
   DECORATIVE SHAPES
========================================================= */

.admission-shape {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

}


.admission-shape-one {

    width: 420px;

    height: 420px;

    top: -250px;

    right: -100px;

    border: 70px solid rgba(255,255,255,0.035);

}


.admission-shape-two {

    width: 280px;

    height: 280px;

    bottom: -180px;

    left: -100px;

    background: rgba(245,130,32,0.08);

}


/* =========================================================
   DECORATIVE DOTS
========================================================= */

.admission-dots {

    position: absolute;

    width: 130px;

    height: 90px;

    right: 42%;

    bottom: 30px;

    opacity: 0.15;

    background-image: radial-gradient(
        rgba(255,255,255,0.8) 1.5px,
        transparent 1.5px
    );

    background-size: 12px 12px;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.admission-banner-content {

    position: relative;

    z-index: 2;

}


.admission-banner-label {

    display: flex;

    align-items: center;

    gap: 12px;

    color: var(--school-orange);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 20px;

}


.admission-banner-label span {

    width: 35px;

    height: 2px;

    background: var(--school-orange);

    border-radius: 20px;

}


.admission-banner-content h2 {

    margin: 0 0 22px;

    color: #ffffff;

    font-size: clamp(42px, 5vw, 68px);

    line-height: 1.08;

    font-weight: 700;

    letter-spacing: -1px;

}


.admission-banner-content h2 strong {

    color: var(--school-orange);

    font-weight: 700;

}


.admission-banner-content p {

    max-width: 620px;

    margin: 0 0 32px;

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

    font-size: 17px;

    line-height: 1.8;

}


/* =========================================================
   BUTTONS
========================================================= */

.admission-banner-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 25px;

}


.admission-primary-btn {

    display: inline-flex;

    align-items: center;

    gap: 18px;

    padding: 7px 8px 7px 25px;

    color: var(--school-blue);

    background: #ffffff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    border-radius: 50px;

    transition: all 0.3s ease;

}


.admission-primary-btn span {

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--school-orange);

    color: #ffffff;

    border-radius: 50%;

    font-size: 18px;

    transition: all 0.3s ease;

}


.admission-primary-btn:hover {

    color: #ffffff;

    background: var(--school-orange);

}


.admission-primary-btn:hover span {

    background: var(--school-dark-blue);

    transform: translateX(3px);

}


.admission-secondary-btn {

    color: #ffffff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    display: inline-flex;

    align-items: center;

    gap: 8px;

}


.admission-secondary-btn i {

    color: var(--school-orange);

    transition: transform 0.3s ease;

}


.admission-secondary-btn:hover {

    color: var(--school-orange);

}


.admission-secondary-btn:hover i {

    transform: translate(3px, -3px);

}


/* =========================================================
   RIGHT INFORMATION CARD
========================================================= */

.admission-info-card {

    position: relative;

    z-index: 3;

    padding: 30px;

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

    border-radius: 24px;

    box-shadow:

        0 25px 60px rgba(0,0,0,0.18);

}


/* =========================================================
   CARD TOP
========================================================= */

.admission-info-top {

    display: flex;

    align-items: center;

    gap: 16px;

}


.admission-info-icon {

    width: 58px;

    height: 58px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--school-light-blue);

    color: var(--school-blue);

    border-radius: 16px;

    font-size: 25px;

}


.admission-info-top span {

    display: block;

    color: var(--school-muted);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    margin-bottom: 4px;

}


.admission-info-top strong {

    display: block;

    color: var(--school-blue);

    font-size: 22px;

}


/* =========================================================
   DIVIDER
========================================================= */

.admission-divider {

    width: 100%;

    height: 1px;

    background: var(--school-border);

    margin: 25px 0;

}


/* =========================================================
   INFO GRID
========================================================= */

.admission-info-grid {

    display: grid;

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

    gap: 15px;

}


.admission-info-item {

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 14px;

    border: 1px solid var(--school-border);

    border-radius: 13px;

    transition: all 0.3s ease;

}


.admission-info-item:hover {

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

    transform: translateY(-2px);

}


.admission-info-item > i {

    color: var(--school-orange);

    font-size: 19px;

}


.admission-info-item small {

    display: block;

    color: var(--school-muted);

    font-size: 10px;

    margin-bottom: 2px;

}


.admission-info-item strong {

    display: block;

    color: var(--school-blue);

    font-size: 12px;

}


/* =========================================================
   CARD BOTTOM
========================================================= */

.admission-info-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 25px;

    padding-top: 20px;

    border-top: 1px solid var(--school-border);

}


.admission-info-bottom small {

    color: var(--school-muted);

    font-size: 11px;

}


/* =========================================================
   STEPS
========================================================= */

.admission-steps {

    display: flex;

    gap: 5px;

}


.admission-steps span {

    width: 22px;

    height: 4px;

    border-radius: 10px;

    background: #dbe5f1;

}


.admission-steps span.active {

    width: 38px;

    background: var(--school-orange);

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

    .school-admission-banner {

        padding: 75px 0;

    }

    .admission-banner-content {

        text-align: center;

    }

    .admission-banner-label {

        justify-content: center;

    }

    .admission-banner-content p {

        margin-left: auto;

        margin-right: auto;

    }

    .admission-banner-actions {

        justify-content: center;

    }

}


@media (max-width: 767.98px) {

    .school-admission-banner {

        padding: 60px 0;

    }

    .admission-banner-content h2 {

        font-size: 42px;

    }

    .admission-banner-content p {

        font-size: 15px;

    }

    .admission-info-card {

        padding: 24px;

    }

}


@media (max-width: 575.98px) {

    .admission-banner-content h2 {

        font-size: 36px;

    }

    .admission-banner-actions {

        flex-direction: column;

        gap: 18px;

    }

    .admission-primary-btn {

        width: 100%;

        justify-content: space-between;

    }

    .admission-info-grid {

        grid-template-columns: 1fr;

    }

    .admission-info-bottom {

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;

    }

}






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

.school-facilities {

    position: relative;

    padding: 100px 0;

    background: #ffffff;

    overflow: hidden;

}


/* =========================================================
   IMAGE
========================================================= */

.facilities-image-wrap {

    position: relative;

    padding: 14px;

}


/* Orange decorative corner */

.facilities-image-accent {

    position: absolute;

    width: 100px;

    height: 100px;

    top: 0;

    left: 0;

    border-top: 5px solid var(--school-orange);

    border-left: 5px solid var(--school-orange);

    border-radius: 18px 0 0 0;

    z-index: 1;

}


.facilities-image-wrap::after {

    content: "";

    position: absolute;

    width: 100px;

    height: 100px;

    right: 0;

    bottom: 0;

    border-right: 5px solid var(--school-blue);

    border-bottom: 5px solid var(--school-blue);

    border-radius: 0 0 18px 0;

    z-index: 1;

}


/* Campus image */

.facilities-image {

    position: relative;

    z-index: 2;

    display: block;

    width: 100%;

    /* height: 480px; */

    object-fit: cover;

    border-radius: 20px;

    border: 8px solid #ffffff;

    box-shadow:
        0 20px 50px rgba(8, 47, 135, .15);

}


/* =========================================================
   IMAGE CAPTION
========================================================= */

.facilities-image-caption {

    position: absolute;

    z-index: 3;

    left: 35px;

    bottom: 35px;

    right: 35px;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 15px 18px;

    background: rgba(255, 255, 255, .95);

    border-radius: 12px;

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

}


.caption-icon {

    width: 48px;

    height: 48px;

    flex: 0 0 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background: var(--school-blue);

    color: #ffffff;

    font-size: 22px;

}


.facilities-image-caption strong {

    display: block;

    color: var(--school-blue);

    font-size: 15px;

}


.facilities-image-caption span {

    display: block;

    margin-top: 2px;

    color: var(--school-muted);

    font-size: 12px;

}


/* =========================================================
   CONTENT
========================================================= */

.facilities-content {

    padding-left: 15px;

}


/* Label */

.facilities-label {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 15px;

    color: var(--school-orange);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

}



.facilities-label span {

    width: 30px;

    height: 3px;

    background: var(--school-orange);

}




/* =========================================================
   TITLE
========================================================= */

.facilities-title {

    margin: 0;

    color: var(--school-blue);

    font-size: clamp(32px, 3.5vw, 45px);

    line-height: 1.15;

    font-weight: 700;

}


.facilities-title span {

    color: var(--school-orange);

}


/* =========================================================
   DESCRIPTION
========================================================= */

.facilities-description {

    max-width: 600px;

    margin: 20px 0 28px;

    color: var(--school-muted);

    font-size: 15px;

    line-height: 1.8;

}


/* =========================================================
   FACILITIES LIST
========================================================= */

.facilities-list {

    display: grid;

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

    gap: 12px;

}


/* Item */

.facility-list-item {

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 14px;

    background: var(--school-light-blue);

    border: 1px solid transparent;

    border-radius: 12px;

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

}


.facility-list-item:hover {

    transform: translateY(-3px);

    background: #ffffff;

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

    box-shadow: 0 8px 25px rgba(8,47,135,.07);

}


/* Icon */

.facility-list-icon {

    width: 46px;

    height: 46px;

    flex: 0 0 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    background: #ffffff;

    color: var(--school-blue);

    font-size: 20px;

    transition: all .3s ease;

}


.facility-list-item:hover .facility-list-icon {

    background: var(--school-orange);

    color: #ffffff;

}


/* Text */

.facility-list-item h3 {

    margin: 0 0 3px;

    color: var(--school-blue);

    font-size: 14px;

    font-weight: 700;

}


.facility-list-item p {

    margin: 0;

    color: var(--school-muted);

    font-size: 11px;

    line-height: 1.4;

}


/* =========================================================
   BOTTOM MESSAGE
========================================================= */

.facilities-more {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 22px;

    color: var(--school-text);

    font-size: 13px;

}


.facilities-more span {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #fff4eb;

    color: var(--school-orange);

}


.facilities-more strong {

    font-weight: 600;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .school-facilities {

        padding: 75px 0;

    }


    .facilities-content {

        padding-left: 0;

    }


    .facilities-image {

        height: 420px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .school-facilities {

        padding: 60px 0;

    }


    .facilities-image {

        height: 350px;

    }


    .facilities-image-caption {

        left: 25px;

        right: 25px;

        bottom: 25px;

    }


    .facilities-list {

        grid-template-columns: 1fr;

    }


    .facilities-title {

        font-size: 32px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .facilities-image-wrap {

        padding: 8px;

    }


    .facilities-image {

        height: 280px;

        border-width: 5px;

        border-radius: 15px;

    }


    .facilities-image-caption {

        left: 18px;

        right: 18px;

        bottom: 18px;

        padding: 10px;

    }


    .caption-icon {

        width: 40px;

        height: 40px;

        flex-basis: 40px;

        font-size: 18px;

    }


    .facilities-image-caption strong {

        font-size: 13px;

    }


    .facilities-image-caption span {

        font-size: 10px;

    }

}



/* ================================
   NEWS & EVENTS
================================ */

.school-events {
    padding: 100px 0;
    background: #f4f8fd;
    overflow: hidden;
}

.events-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 45px;
}

.events-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #f58220;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.events-label span {
    width: 35px;
    height: 2px;
    background: #f58220;
    display: inline-block;
}

.events-heading h2 {
    margin: 0;
    color: #082f87;
    font-size: 42px;
    line-height: 1.15;
    font-weight: 700;
}

.events-heading h2 span {
    display: block;
    color: #f58220;
}

.events-heading > p {
    max-width: 390px;
    margin: 0 0 4px;
    color: #68768a;
    font-size: 15px;
    line-height: 1.8;
}


/* ================================
   EVENT CARD
================================ */

.event-item {
    padding: 8px 2px 15px;
}

.event-card {
    background: #ffffff;
    border: 1px solid #e4ebf3;
    border-radius: 18px;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 8px 30px rgba(8, 47, 135, 0.07);
    transition: all 0.35s ease;
}

.event-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(8, 47, 135, 0.13);
}


/* Image */

.event-image {
    position: relative;
    height: 245px;
    overflow: hidden;
}

.event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.event-card:hover .event-image img {
    transform: scale(1.06);
}


/* Date */

.event-date {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 64px;
    height: 78px;
    background: #ffffff;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.event-date strong {
    color: #082f87;
    font-size: 22px;
    line-height: 1;
    font-weight: 800;
}

.event-date span {
    color: #f58220;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-top: 4px;
}

.event-date small {
    color: #68768a;
    font-size: 9px;
    line-height: 1;
    font-weight: 600;
    margin-top: 4px;
}


/* Category */

.event-category {
    position: absolute;
    right: 16px;
    bottom: 16px;
    background: #082f87;
    color: #ffffff;
    padding: 7px 13px;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}


/* Content */

.event-content {
    padding: 25px 24px 27px;
}

.event-location {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #f58220;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 11px;
}

.event-location i {
    font-size: 14px;
}

.event-content h3 {
    color: #082f87;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 700;
    margin: 0 0 10px;
}

.event-content p {
    color: #68768a;
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 20px;
}


/* Read More */

.event-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #082f87;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.event-link span {
    width: 30px;
    height: 30px;
    border: 1px solid #dbe4ef;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.event-link:hover {
    color: #f58220;
}

.event-link:hover span {
    background: #f58220;
    border-color: #f58220;
    color: #ffffff;
    transform: rotate(45deg);
}


/* ================================
   OWL CAROUSEL
================================ */

.school-events-carousel .owl-stage {
    display: flex;
}

.school-events-carousel .owl-item {
    display: flex;
}

.school-events-carousel .event-item {
    width: 100%;
}


/* Navigation */

.school-events-carousel .owl-nav {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 25px;
}

.school-events-carousel .owl-nav button.owl-prev,
.school-events-carousel .owl-nav button.owl-next {
    width: 44px;
    height: 44px;
    border: 1px solid #dce5ef !important;
    border-radius: 50%;
    background: #ffffff !important;
    color: #082f87 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    margin: 0 !important;
    transition: all 0.3s ease;
}

.school-events-carousel .owl-nav button:hover {
    background: #082f87 !important;
    border-color: #082f87 !important;
    color: #ffffff !important;
}


/* Dots */

.school-events-carousel .owl-dots {
    text-align: left;
    margin-top: -38px;
    position: relative;
    z-index: 2;
}

.school-events-carousel .owl-dot span {
    width: 7px !important;
    height: 7px !important;
    margin: 5px 4px !important;
    background: #d9e2ee !important;
    transition: all 0.3s ease;
}

.school-events-carousel .owl-dot.active span {
    width: 25px !important;
    border-radius: 10px !important;
    background: #f58220 !important;
}


/* View All */

.events-view-all {
    text-align: center;
    margin-top: 45px;
}

.events-view-all a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 22px;
    border-radius: 50px;
    background: #082f87;
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.events-view-all a:hover {
    background: #f58220;
    transform: translateY(-2px);
}

.events-view-all i {
    font-size: 16px;
}


/* ================================
   RESPONSIVE
================================ */

@media (max-width: 991.98px) {

    .school-events {
        padding: 80px 0;
    }

    .events-heading {
        display: block;
    }

    .events-heading > p {
        margin-top: 20px;
        max-width: 600px;
    }

    .events-heading h2 {
        font-size: 36px;
    }

    .school-events-carousel .owl-dots {
        margin-top: 25px;
        text-align: center;
    }

    .school-events-carousel .owl-nav {
        justify-content: center;
        margin-top: 15px;
    }
}


@media (max-width: 575.98px) {

    .school-events {
        padding: 65px 0;
    }

    .events-heading {
        margin-bottom: 30px;
    }

    .events-heading h2 {
        font-size: 30px;
    }

    .events-heading > p {
        font-size: 14px;
        line-height: 1.7;
    }

    .event-image {
        height: 220px;
    }

    .event-content {
        padding: 22px 20px 24px;
    }

    .event-content h3 {
        font-size: 18px;
    }

    .event-item {
        padding-left: 2px;
        padding-right: 2px;
    }
}


/* =========================================
   PRINCIPAL'S MESSAGE
========================================= */

.principal-message {
    position: relative;
    padding: 105px 0;
    background: #eef5fc;
    overflow: hidden;
}


/* =========================================
   IMAGE AREA
========================================= */

.principal-image-wrap {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
    padding: 25px 20px 20px 15px;
}


/* Orange Decorative Shape */

.principal-orange-shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 250px;
    height: 210px;
    background: #f58220;
    border-radius: 30px 30px 70px 30px;
    transform: rotate(2deg);
}


/* Cream Decorative Shape */

.principal-cream-shape {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 220px;
    height: 190px;
    background: #fff1dc;
    border-radius: 40px 25px 45px 70px;
    transform: rotate(-3deg);
}


/* Main Image */

.principal-image {
    position: relative;
    z-index: 2;
    overflow: hidden;
    border-radius: 20px 20px 28px 20px;
    box-shadow: 0 18px 45px rgba(8, 47, 135, 0.16);
    background: #ffffff;
}

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


/* =========================================
   CONTENT
========================================= */

.principal-content {
    position: relative;
    z-index: 2;
    padding-left: 25px;
}


/* Label */

.principal-label {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #f58220;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    margin-bottom: 18px;
}

.principal-label span {
    width: 42px;
    height: 2px;
    background: #f58220;
    display: inline-block;
}

.principal-label span:last-child {
    width: 42px;
}


/* Heading */

.principal-content h2 {
    margin: 0 0 30px;
    color: #082f87;
    font-family: "Playfair Display", serif;
    font-size: 48px;
    line-height: 1.12;
    font-weight: 700;
    max-width: 720px;
}

.principal-content h2 span {
    display: block;
    color: #f58220;
}


/* =========================================
   QUOTE
========================================= */

.principal-quote {
    position: relative;
    display: flex;
    gap: 18px;
    margin-bottom: 25px;
    max-width: 720px;
}

.quote-mark {
    flex-shrink: 0;
    color: #dbe8f7;
    font-size: 65px;
    line-height: 0.8;
}

.principal-quote p {
    margin: 0;
    padding-top: 3px;
    color: #082f87;
    font-size: 20px;
    line-height: 1.65;
    font-style: italic;
    font-weight: 500;
}


/* =========================================
   DESCRIPTION
========================================= */

.principal-description {
    max-width: 720px;
    margin: 0 0 35px;
    color: #526277;
    font-size: 15px;
    line-height: 1.85;
}


/* =========================================
   BOTTOM AREA
========================================= */

.principal-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    max-width: 720px;
}


/* Principal Name */

.principal-name {
    display: flex;
    align-items: center;
    gap: 14px;
}

.name-line {
    width: 4px;
    height: 58px;
    background: #f58220;
    border-radius: 5px;
}

.principal-name h4 {
    margin: 0 0 4px;
    color: #082f87;
    font-size: 20px;
    font-weight: 700;
}

.principal-name p {
    margin: 0;
    color: #68768a;
    font-size: 15px;
}


/* =========================================
   BUTTON
========================================= */

.principal-button {
    display: inline-flex;
    align-items: center;
    gap: 25px;
    padding: 10px 10px 10px 25px;
    background: #082f87;
    color: #ffffff;
    border-radius: 50px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.principal-button i {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #f58220;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.3s ease;
}

.principal-button:hover {
    background: #061f63;
    color: #ffffff;
    transform: translateY(-2px);
}

.principal-button:hover i {
    transform: translateX(3px);
}


/* =========================================
   BACKGROUND DECORATIONS
========================================= */

.principal-bg-circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.principal-bg-circle-one {
    width: 260px;
    height: 260px;
    top: -140px;
    right: -70px;
    border: 1px solid rgba(8, 47, 135, 0.06);
}

.principal-bg-circle-two {
    width: 360px;
    height: 180px;
    bottom: -120px;
    left: -100px;
    background: rgba(8, 47, 135, 0.035);
    transform: rotate(-10deg);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1199.98px) {

    .principal-content {
        padding-left: 10px;
    }

    .principal-content h2 {
        font-size: 42px;
    }

    .principal-quote p {
        font-size: 18px;
    }

    .principal-image img {
        height: 480px;
    }

}


@media (max-width: 991.98px) {

    .principal-message {
        padding: 80px 0;
    }

    .principal-image-wrap {
        max-width: 650px;
    }

    .principal-image img {
        height: 500px;
    }

    .principal-content {
        padding-left: 0;
        margin-top: 25px;
    }

    .principal-label {
        font-size: 11px;
        letter-spacing: 2px;
        justify-content: center;
    }

    .principal-content h2 {
        font-size: 40px;
    }

    .principal-bottom {
        max-width: 100%;
    }

}


@media (max-width: 767.98px) {

    .principal-message {
        padding: 65px 0;
    }

    .principal-image-wrap {
        padding: 18px 12px 15px 10px;
    }

    .principal-image img {
        height: 420px;
    }

    .principal-orange-shape {
        width: 180px;
        height: 150px;
    }

    .principal-cream-shape {
        width: 160px;
        height: 140px;
    }

    .principal-content h2 {
        font-size: 34px;
    }

    .principal-label {
        font-size: 11px;
        letter-spacing: 2px;
        justify-content: center;
    }

    .principal-label span {
        width: 28px;
    }

    .principal-quote p {
        font-size: 17px;
    }

    .principal-description {
        font-size: 14px;
    }

    .principal-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

}


@media (max-width: 575.98px) {

    .principal-message {
        padding: 55px 0;
    }

    .principal-image img {
        height: 350px;
    }

    .principal-content h2 {
        font-size: 29px;
        line-height: 1.18;
    }

    .principal-quote {
        gap: 10px;
    }

    .quote-mark {
        font-size: 48px;
    }

    .principal-quote p {
        font-size: 15px;
        line-height: 1.6;
    }

    .principal-description {
        font-size: 13px;
        line-height: 1.75;
    }

    .principal-button {
        width: 100%;
        justify-content: space-between;
    }

}



/* ==========================================
   SCHOOL ACHIEVEMENTS
========================================== */

.school-achievements {
    position: relative;
    padding: 100px 0;
    background: #fff8ed;
    overflow: hidden;
}


/* Decorative Shapes */

.school-achievements::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(8, 47, 135, 0.035);
    top: -150px;
    left: -120px;
}

.school-achievements::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 220px;
    border-radius: 50%;
    background: rgba(245, 130, 32, 0.05);
    right: -150px;
    bottom: -100px;
}


/* ==========================================
   INTRO
========================================== */

.achievement-intro {
    position: relative;
    z-index: 2;
    margin-bottom: 45px;
}

.achievement-label {
    display: flex;
    align-items: center;
    gap: 12px;

    color: #f58220;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;

    margin-bottom: 14px;
}

.achievement-label span {
    width: 42px;
    height: 2px;
    background: #f58220;
    display: inline-block;
}


.achievement-title {
    margin: 0;
    max-width: 850px;

    color: #082f87;

    font-family: "Playfair Display", serif;
    font-size: 48px;
    line-height: 1.12;
    font-weight: 700;
}

.achievement-title strong {
    display: block;
    color: #f58220;
    font-weight: 700;
}


.achievement-description {
    max-width: 820px;

    margin: 20px 0 0;

    color: #5f6f82;

    font-size: 15px;
    line-height: 1.8;
}


/* ==========================================
   MAIN
========================================== */

.achievement-main {
    position: relative;
    z-index: 2;
}


/* ==========================================
   STATISTICS
========================================== */

.achievement-stats {
    margin-bottom: 25px;
}


.achievement-stat {
    height: 100%;
    min-height: 170px;

    padding: 22px 14px;

    background: #ffffff;

    border: 1px solid #eadfce;

    border-radius: 16px;

    text-align: center;

    box-shadow: 0 10px 30px rgba(8, 47, 135, 0.06);

    transition: all 0.3s ease;
}

.achievement-stat:hover {
    transform: translateY(-6px);

    box-shadow: 0 16px 35px rgba(8, 47, 135, 0.11);
}


.achievement-stat-icon {
    width: 52px;
    height: 52px;

    margin: 0 auto 12px;

    border-radius: 50%;

    background: #fff0df;

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

    color: #f58220;

    font-size: 23px;
}


.achievement-stat strong {
    display: block;

    color: #082f87;

    font-size: 30px;
    line-height: 1;

    font-weight: 800;

    margin-bottom: 7px;
}


.achievement-stat span {
    display: block;

    color: #53657b;

    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
}


/* ==========================================
   ACHIEVEMENT CATEGORIES
========================================== */

.achievement-categories {
    margin-top: 10px;
}


.achievement-category {
    height: 100%;

    display: flex;
    align-items: flex-start;

    gap: 16px;

    padding: 22px;

    border-radius: 16px;

    border: 1px solid transparent;

    transition: all 0.3s ease;
}


.achievement-category-blue {
    background: #edf5fc;
    border-color: #dceaf7;
}


.achievement-category-orange {
    background: #fff2e3;
    border-color: #f7dfc4;
}


.achievement-category:hover {
    transform: translateY(-4px);
}


.achievement-category-icon {
    flex: 0 0 52px;

    width: 52px;
    height: 52px;

    border-radius: 50%;

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

    color: #ffffff;

    font-size: 21px;
}


.achievement-category-blue .achievement-category-icon {
    background: #082f87;
}


.achievement-category-orange .achievement-category-icon {
    background: #f58220;
}


.achievement-category h3 {
    margin: 3px 0 8px;

    color: #082f87;

    font-family: "Playfair Display", serif;

    font-size: 17px;
    font-weight: 700;
}


.achievement-category p {
    margin: 0;

    color: #607086;

    font-size: 13px;
    line-height: 1.65;
}


/* ==========================================
   RIGHT VISUAL
========================================== */

.achievement-visual {
    position: relative;

    min-height: 530px;

    padding: 25px 10px 30px;
}


/* ==========================================
   CALENDAR
========================================== */

.achievement-calendar {
    position: relative;
    z-index: 3;

    width: 88%;

    margin-left: 3%;

    background: #ffffff;

    border-radius: 16px;

    overflow: hidden;

    transform: rotate(-3deg);

    box-shadow: 0 18px 40px rgba(8, 47, 135, 0.13);

    border: 1px solid #e3e9f0;
}


.calendar-header {
    padding: 17px 20px;

    background: #082f87;

    color: #ffffff;

    font-size: 17px;
    font-weight: 700;

    letter-spacing: 0.5px;
}


.calendar-row {
    display: grid;
    grid-template-columns: 105px 1fr;

    gap: 15px;

    padding: 14px 18px;

    border-bottom: 1px solid #e8edf3;
}


.calendar-row:last-child {
    border-bottom: 0;
}


.calendar-row strong {
    color: #082f87;

    font-size: 12px;
}


.calendar-row span {
    color: #607086;

    font-size: 11px;
    line-height: 1.55;
}


/* ==========================================
   PHOTOS
========================================== */

.achievement-photo {
    position: absolute;

    z-index: 5;

    background: #ffffff;

    padding: 7px;

    box-shadow: 0 12px 30px rgba(8, 47, 135, 0.15);
}


.achievement-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.achievement-photo-one {
    width: 175px;
    height: 145px;

    right: -5px;
    top: 25px;

    transform: rotate(5deg);
}


.achievement-photo-two {
    width: 185px;
    height: 145px;

    right: 15px;
    bottom: 110px;

    transform: rotate(-5deg);
}


/* ==========================================
   TROPHY
========================================== */

.achievement-trophy {
    position: absolute;

    z-index: 6;

    right: 35px;
    bottom: 25px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 13px 18px;

    background: #ffffff;

    border-radius: 12px;

    box-shadow: 0 10px 25px rgba(8, 47, 135, 0.12);
}


.achievement-trophy > i {
    color: #f58220;
    font-size: 35px;
}


.achievement-trophy strong {
    display: block;

    color: #082f87;

    font-size: 14px;
}


.achievement-trophy span {
    display: block;

    color: #68768a;

    font-size: 10px;

    margin-top: 2px;
}


/* ==========================================
   BOTTOM BUTTON
========================================== */

.achievement-bottom {
    position: relative;
    z-index: 3;

    text-align: center;

    margin-top: 45px;
}


.achievement-button {
    display: inline-flex;
    align-items: center;

    gap: 14px;

    padding: 8px 8px 8px 24px;

    background: #082f87;

    color: #ffffff;

    text-decoration: none;

    border-radius: 50px;

    font-size: 13px;
    font-weight: 600;

    transition: all 0.3s ease;
}


.achievement-button span {
    width: 40px;
    height: 40px;

    border-radius: 50%;

    background: #f58220;

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

    font-size: 17px;

    transition: all 0.3s ease;
}


.achievement-button:hover {
    background: #061f63;
    color: #ffffff;
}


.achievement-button:hover span {
    transform: translateX(3px);
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 991.98px) {

    .school-achievements {
        padding: 80px 0;
    }

    .achievement-title {
        font-size: 40px;
    }

    .achievement-visual {
        min-height: 500px;
        max-width: 600px;
        margin: 20px auto 0;
    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 575.98px) {

    .school-achievements {
        padding: 65px 0;
    }

    .achievement-title {
        font-size: 31px;
    }

    .achievement-description {
        font-size: 14px;
    }

    .achievement-label {
        font-size: 11px;
        letter-spacing: 1.5px;
    }

    .achievement-stat {
        min-height: 150px;
        padding: 18px 10px;
    }

    .achievement-stat strong {
        font-size: 25px;
    }

    .achievement-category {
        padding: 18px;
    }

    .achievement-visual {
        min-height: 430px;
        padding: 15px 0;
    }

    .achievement-calendar {
        width: 94%;
        margin-left: 0;
    }

    .calendar-header {
        font-size: 14px;
    }

    .calendar-row {
        grid-template-columns: 80px 1fr;
        padding: 11px 13px;
    }

    .calendar-row strong,
    .calendar-row span {
        font-size: 10px;
    }

    .achievement-photo-one {
        width: 125px;
        height: 105px;

        right: -3px;
        top: 70px;
    }

    .achievement-photo-two {
        width: 135px;
        height: 105px;

        right: 5px;
        bottom: 85px;
    }

    .achievement-trophy {
        right: 5px;
        bottom: 10px;
        padding: 9px 13px;
    }

    .achievement-trophy > i {
        font-size: 28px;
    }

    .achievement-trophy strong {
        font-size: 12px;
    }

}

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

.smv-footer {
    background: #fffaf2;;
    color: #26364d;
    font-family: "Segoe UI", Arial, sans-serif;
}


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

.smv-footer-main {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1.25fr;
    gap: 70px;
    padding: 65px 0 55px;
}


/* =========================================
   BRAND
========================================= */

.smv-footer-brand img {
    width: 290px;
    height: auto;
    margin-bottom: 17px;
}

.smv-footer-brand h3 {
    margin: 0;
    color: #082f87;
    font-size: 23px;
    line-height: 1.25;
    font-weight: 800;
    text-transform: uppercase;
}

.smv-footer-location {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    color: #f58220;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
}

.smv-footer-location::before,
.smv-footer-location::after {
    content: "";
    width: 38px;
    height: 2px;
    background: #f58220;
}

.smv-footer-brand p {
    max-width: 330px;
    margin: 17px 0 22px;
    color: #68768a;
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================
   SOCIAL
========================================= */

.smv-social {
    display: flex;
    gap: 10px;
}

.smv-social a {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: #082f87;
    text-decoration: none;
    transition: .3s ease;
}

.smv-social a:nth-child(2) {
    background: #e62117;
}

.smv-social a:nth-child(3) {
    background: #d62976;
}

.smv-social a:nth-child(4) {
    background: #111;
}

.smv-social a:hover {
    transform: translateY(-4px);
}


/* =========================================
   HEADINGS
========================================= */

.smv-footer-menu h4,
.smv-footer-contact h4 {
    margin: 8px 0 0;
    color: #082f87;
    font-size: 22px;
    font-weight: 750;
}

.smv-footer-line {
    width: 45px;
    height: 3px;
    margin: 12px 0 24px;
    border-radius: 10px;
    background: #f58220;
}


/* =========================================
   MENU
========================================= */

.smv-footer-menu a {
    display: block;
    margin-bottom: 13px;
    color: #425873;
    text-decoration: none;
    font-size: 15px;
    transition: .25s ease;
}

.smv-footer-menu a::before {
    content: "›";
    margin-right: 9px;
    color: #f58220;
    font-weight: 700;
}

.smv-footer-menu a:hover {
    color: #082f87;
    transform: translateX(3px);
}


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

.smv-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 19px;
}

.smv-contact-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;

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

    border-radius: 50%;

    color: #f58220;
    background: rgba(245, 130, 32, .12);
}

.smv-contact-icon.blue {
    color: #082f87;
    background: rgba(8, 47, 135, .08);
}

.smv-contact-row p {
    margin: 4px 0 0;
    color: #425873;
    font-size: 14px;
    line-height: 1.65;
}
.smv-contact-row p a {
    color: #425873;
    text-decoration: none;
    transition: all 0.25s ease;
}

.smv-contact-row p a:hover {
    color: #082f87;
}


/* =========================================
   BOTTOM BAR
========================================= */

.smv-footer-bottom {
    background: #061f63;
    border-top: 3px solid #f58220;
}

.smv-footer-bottom-inner {
    min-height: 78px;

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

    position: relative;
}


/* Copyright */

.smv-copyright {
    color: rgba(255,255,255,.82);
    font-size: 13px;
}


/* Powered By */

.smv-powered {
    color: rgba(255,255,255,.60);
    font-size: 12px;
}

.smv-powered a {
    color: #f58220;
    font-weight: 700;
    text-decoration: none;
}

.smv-powered a:hover {
    color: #fff;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991.98px) {

    .smv-footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 45px;
    }

    .smv-footer-brand {
        grid-column: span 2;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 575.98px) {

    .smv-footer-main {
        display: block;
        padding: 50px 0 35px;
    }

    .smv-footer-brand,
    .smv-footer-menu,
    .smv-footer-contact {
        margin-bottom: 40px;
    }

    .smv-footer-brand h3 {
        font-size: 20px;
    }

    .smv-footer-bottom-inner {
        min-height: 105px;
        padding: 20px 0 25px;

        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        gap: 8px;
    }

    .smv-powered {
        font-size: 11px;
    }

}

/* =========================================================
   FAC-HERO (SHARED INNER PAGE HERO BANNER)
========================================================= */

.fac-hero {
    position: relative;
    background: var(--school-light-blue);
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 500px;
    max-height: 70vh;
    height: 70vh;
    padding: 40px 0;
}
.fac-hero::before {
    content: "";
    position: absolute;
    width: 620px; height: 620px;
    top: -320px; right: -240px;
    border: 80px solid rgba(8, 47, 135, 0.045);
    border-radius: 50%;
    pointer-events: none;
}
.fac-hero::after {
    content: "";
    position: absolute;
    width: 340px; height: 340px;
    bottom: -180px; left: -140px;
    background: rgba(245, 130, 32, 0.07);
    border-radius: 50%;
    pointer-events: none;
}
.fac-hero .container {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1600px;
}
.fac-hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.fac-crumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.fac-crumb a {
    color: var(--school-muted);
    text-decoration: none;
    transition: color 0.25s ease;
}
.fac-crumb a:hover { color: var(--school-orange); }
.fac-crumb i { color: var(--school-orange); font-size: 10px; }
.fac-crumb .current { color: var(--school-blue); }
.fac-hero-title {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(32px, 3.8vw, 52px);
    line-height: 1.05;
    font-weight: 700;
    margin: 0 0 18px;
    letter-spacing: -0.5px;
}
.fac-hero-title em {
    color: var(--school-orange);
    font-style: italic;
    font-weight: 600;
}
.fac-hero-desc {
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.7;
    max-width: 540px;
    margin: 0 0 24px;
}
.fac-hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
    padding-top: 20px;
    border-top: 1px solid rgba(8, 47, 135, 0.10);
}
.fac-hero-facts span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--school-blue);
    font-family: "Inter", sans-serif;
    font-size: 12.5px;
    font-weight: 600;
}
.fac-hero-facts i {
    color: var(--school-orange);
    font-size: 15px;
}

/* =========================================================
   CHAIRMAN'S MESSAGE PAGE
========================================================= */

.chairman-hero {
    background: var(--school-light-blue);
    padding: 80px 0;
}
.chairman-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 60px;
    align-items: center;
}

.chairman-portrait-wrap {
    position: relative;
    max-width: 440px;
}
.chairman-portrait-wrap::before {
    content: "";
    position: absolute;
    top: -14px;
    left: -14px;
    right: 14px;
    bottom: 14px;
    border: 2px solid var(--school-orange);
    border-radius: 22px;
    z-index: 0;
}
.chairman-portrait {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: 22px;
    box-shadow: 0 20px 45px rgba(8, 47, 135, 0.14);
}

.chairman-hero-text { max-width: 560px; }
.chairman-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    color: var(--school-orange);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3.5px;
    text-transform: uppercase;
}
.chairman-eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--school-orange);
}
.chairman-hero-text h1 {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 22px;
}
.chairman-hero-text h1 em {
    font-style: italic;
    color: var(--school-orange);
    font-weight: 600;
}
.chairman-hero-text p {
    color: var(--school-muted);
    font-size: 16.5px;
    line-height: 1.85;
    margin-bottom: 18px;
}
.chairman-hero-text p:last-of-type { margin-bottom: 0; }
.chairman-hero-text strong { color: var(--school-blue); font-weight: 600; }

.chairman-name-block {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid rgba(8, 47, 135, 0.12);
}
.chairman-name-block .line {
    width: 4px;
    height: 46px;
    background: var(--school-orange);
    border-radius: 3px;
}
.chairman-name-block h4 {
    color: var(--school-blue);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 3px;
}
.chairman-name-block span {
    color: var(--school-muted);
    font-size: 13px;
}

.chairman-message {
    background: #ffffff;
    padding: 90px 0 100px;
}
.chairman-message-inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 15px;
}

.chairman-message-inner > p {
    color: var(--school-muted);
    font-size: 16.5px;
    line-height: 1.95;
    margin-bottom: 24px;
}
.chairman-message-inner > p:last-of-type { margin-bottom: 0; }
.chairman-message-inner strong { color: var(--school-blue); font-weight: 600; }

.chairman-message-inner > p:first-of-type::first-letter {
    font-family: "Playfair Display", serif;
    font-size: 66px;
    line-height: 0.85;
    font-weight: 700;
    color: var(--school-orange);
    float: left;
    margin: 6px 14px 0 0;
}

.chairman-signature {
    margin-top: 55px;
    padding-top: 40px;
    border-top: 1px solid var(--school-border);
    text-align: center;
}
.chairman-signature i {
    color: var(--school-orange);
    font-size: 26px;
    display: block;
    margin-bottom: 14px;
}
.chairman-signature h4 {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-style: italic;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
}
.chairman-signature span {
    color: var(--school-muted);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
}

/* =========================================================
   ACADEMIC CALENDAR PAGE
========================================================= */

.calendar-hero {
    position: relative;
    background: var(--school-light-blue);
    overflow: hidden;
    display: flex;
    align-items: center;
    height: 70vh;
    min-height: 70vh;
}
.calendar-hero::before {
    content: "";
    position: absolute;
    width: 620px; height: 620px;
    top: -320px; right: -240px;
    border: 80px solid rgba(8, 47, 135, 0.045);
    border-radius: 50%;
    pointer-events: none;
}
.calendar-hero::after {
    content: "";
    position: absolute;
    width: 340px; height: 340px;
    bottom: -180px; left: -140px;
    background: rgba(245, 130, 32, 0.07);
    border-radius: 50%;
    pointer-events: none;
}
.calendar-hero .container {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1600px;
}

.calendar-hero-inner {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 60px;
    align-items: center;
}

.calendar-crumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.calendar-crumb a {
    color: var(--school-muted);
    text-decoration: none;
    transition: color 0.25s ease;
}
.calendar-crumb a:hover { color: var(--school-orange); }
.calendar-crumb i { color: var(--school-orange); font-size: 10px; }
.calendar-crumb .current { color: var(--school-blue); }

.calendar-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    color: var(--school-orange);
    font-family: "Inter", sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.calendar-eyebrow::before {
    content: "";
    width: 26px; height: 2px;
    background: var(--school-orange);
}

.calendar-hero-title {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(32px, 3.8vw, 52px);
    line-height: 1.05;
    font-weight: 700;
    margin: 0 0 18px;
    letter-spacing: -0.5px;
}
.calendar-hero-title em {
    color: var(--school-orange);
    font-style: italic;
    font-weight: 600;
}

.calendar-hero-desc {
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.7;
    max-width: 540px;
    margin: 0 0 24px;
}

.calendar-hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
    padding-top: 20px;
    border-top: 1px solid rgba(8, 47, 135, 0.10);
}
.calendar-hero-facts span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--school-blue);
    font-family: "Inter", sans-serif;
    font-size: 12.5px;
    font-weight: 600;
}
.calendar-hero-facts i {
    color: var(--school-orange);
    font-size: 15px;
}

/* Compact desk calendar illustration */
.deco-calendar {
    position: relative;
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
    padding-top: 32px;
}
.deco-rings {
    position: absolute;
    top: 6px; left: 0; right: 0;
    display: flex;
    justify-content: center;
    gap: 18px;
    z-index: 10;
}
.deco-rings span {
    display: block;
    width: 10px; height: 28px;
    border: 2px solid #c3cedd;
    border-top: 0;
    border-radius: 0 0 6px 6px;
    background: linear-gradient(180deg, #f4f7fb 0%, #dde5ee 60%, #c5d0de 100%);
    box-shadow: inset -1px -2px 3px rgba(8, 47, 135, 0.10), inset 1px 0 1px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(8, 47, 135, 0.14);
    position: relative;
}
.deco-rings span::before {
    content: "";
    position: absolute;
    top: 3px; left: 2px;
    width: 1.5px; height: 18px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.75);
}
.deco-cal {
    position: relative;
    background: #ffffff;
    border-radius: 9px;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(8, 47, 135, 0.16), 0 5px 12px rgba(8, 47, 135, 0.06);
    z-index: 2;
}
.deco-cal::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background: var(--school-dark-blue);
    z-index: 5;
}
.deco-cal::after {
    content: "";
    position: absolute;
    top: 3px; left: 50%;
    transform: translateX(-50%);
    width: 100px; height: 4px;
    background: radial-gradient(circle, rgba(255,255,255,0.9) 1.3px, transparent 1.8px) 0 0 / 25px 4px repeat-x;
    z-index: 6;
    pointer-events: none;
}
.deco-header {
    position: relative;
    background: linear-gradient(135deg, var(--school-blue) 0%, var(--school-dark-blue) 100%);
    padding: 20px 20px 16px;
    margin-top: 6px;
    overflow: hidden;
}
.deco-header::before {
    content: "";
    position: absolute;
    top: -30px; right: -30px;
    width: 100px; height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(245, 130, 32, 0.18) 0%, rgba(245, 130, 32, 0.04) 55%, transparent 70%);
    pointer-events: none;
}
.deco-header::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: var(--school-orange);
}
.deco-header-lines {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.deco-header-bar {
    display: block;
    height: 6px;
    border-radius: 4px;
}
.deco-header-bar.bar-lg { width: 58%; height: 9px; background: rgba(255, 255, 255, 0.92); }
.deco-header-bar.bar-md { width: 34%; background: var(--school-orange); opacity: 0.95; }
.deco-header-bar.bar-sm { width: 22%; height: 5px; background: rgba(255, 255, 255, 0.32); margin-top: 3px; }
.deco-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    background: #f6f9fc;
    padding: 8px 14px;
    border-bottom: 1px solid var(--school-border);
}
.deco-week span {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: #c3cedd;
    justify-self: center;
    width: 55%;
}
.deco-week span:nth-child(1),
.deco-week span:nth-child(7) { background: rgba(245, 130, 32, 0.7); }
.deco-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    padding: 13px 14px 15px;
    background: #ffffff;
}
.deco-cell {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #dfe7f1;
    transition: background 0.3s ease, transform 0.3s ease;
}
.deco-cell.faded { background: #eff3f8; }
.deco-cell.hot { background: var(--school-orange); box-shadow: 0 2px 5px rgba(245, 130, 32, 0.28); }
.deco-calendar:hover .deco-cell { transform: scale(1.06); }
.deco-calendar:hover .deco-cell.hot { transform: scale(1.14); }
.deco-tear {
    position: relative;
    height: 12px;
    background: repeating-linear-gradient(90deg, transparent 0px, transparent 4px, var(--school-border) 4px, var(--school-border) 6px);
    background-size: 100% 1px;
    background-position: 0 center;
    background-repeat: no-repeat;
    z-index: 3;
}
.deco-tear::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid var(--school-border);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='4' cy='4' r='1.4' fill='none' stroke='%23f58220' stroke-width='1.4'/><circle cx='12' cy='4' r='1.4' fill='none' stroke='%23f58220' stroke-width='1.4'/><path d='M5 5L11 11M11 5L5 11' stroke='%23f58220' stroke-width='1.4' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 9px;
}
.deco-foot {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    padding: 10px 14px 14px;
    background: #f6f9fc;
    border-top: 1px solid var(--school-border);
}
.deco-foot-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.deco-foot-block i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 6px;
    background: #ffffff;
    color: var(--school-blue);
    font-size: 10px;
    border: 1px solid var(--school-border);
    transition: 0.3s ease;
}
.deco-calendar:hover .deco-foot-block i {
    background: var(--school-orange);
    color: #ffffff;
    border-color: var(--school-orange);
}
.deco-foot-block span { display: block; height: 3px; border-radius: 2px; background: #d5dee9; }
.deco-foot-block:nth-child(1) span { width: 60%; }
.deco-foot-block:nth-child(2) span { width: 70%; }
.deco-foot-block:nth-child(3) span { width: 50%; }

.academic-months {
    position: relative;
    background: #ffffff;
    padding: 100px 0 110px;
    overflow: hidden;
}
.academic-months::before {
    content: "";
    position: absolute;
    width: 620px; height: 620px;
    top: -320px; right: -260px;
    background: var(--school-light-blue);
    border-radius: 50%;
    opacity: 0.4;
    pointer-events: none;
}
.academic-months::after {
    content: "";
    position: absolute;
    width: 340px; height: 340px;
    bottom: -180px; left: -140px;
    border: 2px solid var(--school-border);
    border-radius: 50%;
    opacity: 0.6;
    pointer-events: none;
}
.academic-months .container {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1600px;
}

.am-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 55px;
}
.am-head-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    color: var(--school-orange);
    font-family: "Inter", sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.am-head-label::before,
.am-head-label::after {
    content: "";
    width: 30px; height: 2px;
    background: var(--school-orange);
}
.am-head h2 {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(30px, 3.6vw, 44px);
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 14px;
}
.am-head h2 em {
    color: var(--school-orange);
    font-style: italic;
    font-weight: 600;
}
.am-head p {
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.75;
    max-width: 620px;
    margin: 0 auto;
}

.cal-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(8, 47, 135, 0.10);
    overflow: hidden;
}

.cal-controls {
    background: #f6f9fc;
    border-bottom: 1px solid var(--school-border);
    padding: 18px 24px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
}

.cal-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--school-border);
    background: #ffffff;
    color: var(--school-blue);
    padding: 11px 18px;
    border-radius: 12px;
    font-family: "Inter", sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}
.cal-nav-btn i {
    font-size: 14px;
    transition: transform 0.25s ease;
}
.cal-nav-btn:hover {
    background: var(--school-blue);
    border-color: var(--school-blue);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(8, 47, 135, 0.18);
}
.cal-nav-btn:hover i { color: var(--school-orange); }
.cal-nav-btn:active { transform: translateY(1px); }
.cal-nav-btn.prev:hover i { transform: translateX(-3px); }
.cal-nav-btn.next:hover i { transform: translateX(3px); }

.cal-search {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    z-index: 20;
}
.cal-search-icon {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: var(--school-muted);
    font-size: 15px;
    pointer-events: none;
    transition: color 0.25s ease;
}
.cal-search-input {
    width: 100%;
    border: 1px solid var(--school-border);
    background: #ffffff;
    color: var(--school-text);
    font-family: "Inter", sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    padding: 12px 18px 12px 44px;
    border-radius: 12px;
    outline: none;
    transition: all 0.25s ease;
}
.cal-search-input::placeholder {
    color: #9aa7b8;
    font-weight: 400;
}
.cal-search-input:focus {
    border-color: var(--school-orange);
    box-shadow: 0 0 0 4px rgba(245, 130, 32, 0.12);
}
.cal-search:focus-within .cal-search-icon {
    color: var(--school-orange);
}

.cal-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 14px;
    box-shadow: 0 20px 45px rgba(8, 47, 135, 0.14);
    max-height: 320px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all 0.22s ease;
}
.cal-search-results.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.cal-search-results::-webkit-scrollbar { width: 5px; }
.cal-search-results::-webkit-scrollbar-thumb {
    background: var(--school-border);
    border-radius: 3px;
}
.cal-search-results::-webkit-scrollbar-thumb:hover {
    background: var(--school-orange);
}

.cal-search-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 18px;
    cursor: pointer;
    border-bottom: 1px solid var(--school-border);
    transition: all 0.2s ease;
    position: relative;
}
.cal-search-item:last-child { border-bottom: 0; }
.cal-search-item:hover,
.cal-search-item.focused {
    background: var(--school-light-blue);
    padding-left: 24px;
}

.cal-search-item-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.cal-search-item-name {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}
.cal-search-item-year {
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
}
.cal-search-item-right {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.6px;
    white-space: nowrap;
}
.cal-search-item-right i {
    color: var(--school-orange);
    font-size: 11px;
}
.cal-search-item.active .cal-search-item-name {
    color: var(--school-orange);
}
.cal-search-item.active::before {
    content: "";
    width: 4px;
    height: 22px;
    border-radius: 3px;
    background: var(--school-orange);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.cal-search-empty {
    padding: 22px 18px;
    text-align: center;
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 12.5px;
}
.cal-search-empty i {
    display: block;
    font-size: 22px;
    color: var(--school-border);
    margin-bottom: 8px;
}

.cal-body {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
}

.cal-grid-side {
    padding: 32px 34px 32px;
    background: #ffffff;
    border-right: 1px solid var(--school-border);
}

.cal-month-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px dashed var(--school-border);
}
.cal-month-title {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.cal-month-name {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.5px;
    transition: all 0.3s ease;
}
.cal-month-year {
    color: var(--school-orange);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.6px;
}
.cal-workdays {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--school-light-blue);
    color: var(--school-blue);
    padding: 7px 14px;
    border-radius: 30px;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
}
.cal-workdays i { color: var(--school-orange); font-size: 13px; }

.cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-bottom: 8px;
}
.cal-weekdays span {
    text-align: center;
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 8px 0;
}
.cal-weekdays span:first-child { color: #d64545; }

.cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.cal-day {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--school-text);
    background: #f8fafd;
    border-radius: 10px;
    position: relative;
    transition: all 0.25s ease;
    animation: calDayIn 0.35s ease both;
}
@keyframes calDayIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}
.cal-day.empty { background: transparent; pointer-events: none; animation: none; }
.cal-day.sun { color: #d64545; background: #fdf2f2; }
.cal-day.event {
    background: var(--school-orange);
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(245, 130, 32, 0.28);
}
.cal-day.event::after {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #ffffff;
    opacity: 0.85;
}
.cal-day.event:hover {
    transform: translateY(-2px) scale(1.05);
    background: var(--school-blue);
    box-shadow: 0 8px 18px rgba(8, 47, 135, 0.28);
    z-index: 2;
}
.cal-day.event:hover::after { background: var(--school-orange); }

.cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px dashed var(--school-border);
}
.cal-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Inter", sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--school-muted);
}
.cal-legend-chip {
    width: 18px; height: 18px;
    border-radius: 5px;
    display: inline-block;
    position: relative;
}
.cal-legend-chip.regular { background: #f8fafd; border: 1px solid var(--school-border); }
.cal-legend-chip.sun { background: #fdf2f2; }
.cal-legend-chip.event { background: var(--school-orange); }
.cal-legend-chip.event::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #ffffff;
}

.cal-events-side {
    padding: 32px 34px 32px;
    background: #f8fafd;
    display: flex;
    flex-direction: column;
}
.cal-events-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--school-border);
}
.cal-events-title {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}
.cal-events-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--school-blue);
    color: #ffffff;
    padding: 5px 12px;
    border-radius: 30px;
    font-family: "Inter", sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.cal-events-count i { color: var(--school-orange); font-size: 11px; }

.cal-events-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-grow: 1;
    overflow-y: auto;
    max-height: 480px;
    padding-right: 6px;
}
.cal-events-list::-webkit-scrollbar { width: 5px; }
.cal-events-list::-webkit-scrollbar-track { background: transparent; }
.cal-events-list::-webkit-scrollbar-thumb {
    background: var(--school-border);
    border-radius: 3px;
}
.cal-events-list::-webkit-scrollbar-thumb:hover { background: var(--school-orange); }

.cal-event {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--school-border);
    align-items: flex-start;
    transition: 0.25s ease;
    animation: calEventIn 0.35s ease both;
}
@keyframes calEventIn {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: translateX(0); }
}
.cal-event:last-child { border-bottom: 0; }
.cal-event:hover { padding-left: 6px; }
.cal-event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 9px;
    padding: 6px 4px 5px;
    transition: 0.3s ease;
}
.cal-event:hover .cal-event-date {
    background: var(--school-orange);
    border-color: var(--school-orange);
}
.cal-event-num {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    transition: color 0.3s ease;
}
.cal-event:hover .cal-event-num { color: #ffffff; }
.cal-event-day {
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-top: 3px;
    transition: color 0.3s ease;
}
.cal-event:hover .cal-event-day { color: rgba(255, 255, 255, 0.85); }
.cal-event-text {
    color: var(--school-text);
    font-family: "Inter", sans-serif;
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
    padding-top: 3px;
}

.cal-footer {
    padding: 18px 34px;
    background: #ffffff;
    border-top: 1px solid var(--school-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
}
.cal-footer-left {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--school-blue);
    font-family: "Inter", sans-serif;
    font-size: 12.5px;
    font-weight: 600;
}
.cal-footer-left i { color: var(--school-orange); font-size: 15px; }
.cal-footer-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Inter", sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--school-muted);
}
.cal-footer-right span {
    padding: 4px 10px;
    background: var(--school-light-blue);
    border-radius: 20px;
    color: var(--school-blue);
}

/* =========================================================
   ADMISSION OVERVIEW PAGE
========================================================= */

.ao-hero-wrap {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 480px;
    margin: 0 auto;
}
.ao-hero-wrap::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 130px; height: 130px;
    background-image: radial-gradient(rgba(8, 47, 135, 0.18) 1.8px, transparent 1.8px);
    background-size: 15px 15px;
    z-index: 1;
    pointer-events: none;
}
.ao-hero-wrap::after {
    content: "";
    position: absolute;
    bottom: -20px; left: -20px;
    width: 120px; height: 120px;
    border: 22px solid rgba(245, 130, 32, 0.15);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}
.ao-glow {
    position: absolute;
    inset: 5%;
    background: radial-gradient(circle,
                rgba(8, 47, 135, 0.10) 0%,
                rgba(8, 47, 135, 0.04) 40%,
                transparent 70%);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}
.ao-ring {
    position: absolute;
    top: 8%; left: 8%;
    width: 84%; height: 84%;
    border: 2px dashed rgba(8, 47, 135, 0.20);
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
}
.ao-ring::before {
    content: "";
    position: absolute;
    inset: -14px;
    border: 1px dashed rgba(8, 47, 135, 0.10);
    border-radius: 50%;
    pointer-events: none;
}
.ao-hub {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 220px; height: 220px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--school-blue) 0%, var(--school-dark-blue) 100%);
    box-shadow:
        0 30px 70px rgba(8, 47, 135, 0.28),
        0 10px 25px rgba(8, 47, 135, 0.10),
        inset 0 -20px 40px rgba(0, 0, 0, 0.10);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    z-index: 4;
    color: #ffffff;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.ao-hub:hover {
    transform: translate(-50%, -50%) translateY(-6px) scale(1.02);
    box-shadow:
        0 40px 80px rgba(8, 47, 135, 0.32),
        0 14px 30px rgba(8, 47, 135, 0.12),
        inset 0 -20px 40px rgba(0, 0, 0, 0.10);
}
.ao-hub::before {
    content: "";
    position: absolute;
    top: -50px; right: -50px;
    width: 160px; height: 160px;
    border: 30px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    pointer-events: none;
}
.ao-hub::after {
    content: "";
    position: absolute;
    bottom: -40px; left: -40px;
    width: 120px; height: 120px;
    border: 22px solid rgba(245, 130, 32, 0.20);
    border-radius: 50%;
    pointer-events: none;
}
.ao-hub-icon {
    position: relative;
    z-index: 1;
    width: 56px; height: 56px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #ffffff;
    margin-bottom: 12px;
}
.ao-hub-title {
    position: relative;
    z-index: 1;
    color: var(--school-orange);
    font: 700 10px "Inter", sans-serif;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.ao-hub-year {
    position: relative;
    z-index: 1;
    color: #ffffff;
    font: 700 22px "Playfair Display", serif;
    letter-spacing: -0.3px;
    line-height: 1;
}
.ao-hub-label {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.72);
    font: 500 10.5px "Inter", sans-serif;
    letter-spacing: 0.5px;
    margin-top: 7px;
}
.ao-mini {
    position: absolute;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow:
        0 14px 30px rgba(8, 47, 135, 0.16),
        0 4px 10px rgba(8, 47, 135, 0.06);
    z-index: 5;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    cursor: pointer;
}
.ao-mini:hover { box-shadow: 0 20px 42px rgba(8, 47, 135, 0.22); }
.ao-mini-top { top: 8%; left: 50%; transform: translate(-50%, -50%); }
.ao-mini-top:hover { transform: translate(-50%, -50%) translateY(-4px) scale(1.08); }
.ao-mini-top i { color: var(--school-orange); }
.ao-mini-right { top: 50%; left: 92%; transform: translate(-50%, -50%); }
.ao-mini-right:hover { transform: translate(-50%, -50%) translateX(4px) scale(1.08); }
.ao-mini-right i { color: var(--school-blue); }
.ao-mini-bottom { top: 92%; left: 50%; transform: translate(-50%, -50%); }
.ao-mini-bottom:hover { transform: translate(-50%, -50%) translateY(4px) scale(1.08); }
.ao-mini-bottom i { color: #6f42c1; }
.ao-mini-left { top: 50%; left: 8%; transform: translate(-50%, -50%); }
.ao-mini-left:hover { transform: translate(-50%, -50%) translateX(-4px) scale(1.08); }
.ao-mini-left i { color: #198754; }
.ao-accent-dot {
    position: absolute;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--school-orange);
    z-index: 3;
    box-shadow: 0 0 0 0 rgba(245, 130, 32, 0.5);
    animation: aoPulseDot 2.4s ease-out infinite;
}
.ao-accent-dot.dot-1 { top: 18%; left: 18%; }
.ao-accent-dot.dot-2 { bottom: 18%; right: 18%; animation-delay: 1.2s; }
@keyframes aoPulseDot {
    0% { box-shadow: 0 0 0 0 rgba(245, 130, 32, 0.55); opacity: 1; }
    70% { box-shadow: 0 0 0 14px rgba(245, 130, 32, 0); opacity: 0.4; }
    100% { box-shadow: 0 0 0 0 rgba(245, 130, 32, 0); opacity: 1; }
}
.ao-float {
    position: absolute;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 16px 38px rgba(8, 47, 135, 0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    z-index: 6;
    transition: transform 0.4s ease;
}
.ao-float:hover { transform: translateY(-4px); }
.ao-float-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.ao-float-text { display: flex; flex-direction: column; line-height: 1.15; }
.ao-float-text small {
    font: 700 8.5px "Inter", sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--school-muted);
    margin-bottom: 3px;
}
.ao-float-text strong {
    font: 700 13px "Playfair Display", serif;
    color: var(--school-blue);
    white-space: nowrap;
}
.ao-float-1 { top: -8px; left: -30px; animation: aoFloatY 4s ease-in-out infinite; }
.ao-float-1 .ao-float-icon { background: #fff3e7; color: var(--school-orange); }
.ao-float-2 { bottom: -8px; right: -30px; animation: aoFloatY 4s ease-in-out infinite; animation-delay: 1.2s; }
.ao-float-2 .ao-float-icon { background: #e7f5ee; color: #198754; }
@keyframes aoFloatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

.ao-section {
    padding: 90px 0 100px;
    position: relative;
    overflow: hidden;
    background: #ffffff;
}
.ao-section.alt { background: var(--school-light-blue); }
.ao-section .container {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1200px;
}
.ao-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 46px;
}
.ao-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--school-orange);
    font: 600 12px "Inter", sans-serif;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}
.ao-title {
    margin: 0 0 12px;
    color: var(--school-blue);
    font: 700 clamp(26px, 3vw, 38px)/1.15 "Playfair Display", serif;
    letter-spacing: -0.3px;
}
.ao-title em { color: var(--school-orange); font-weight: 600; font-style: italic; }
.ao-sub {
    margin: 0;
    color: var(--school-muted);
    font: 400 15px/1.7 "Inter", sans-serif;
}

.ao-elig-card {
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 22px;
    padding: 40px 44px;
    box-shadow: 0 16px 44px rgba(8, 47, 135, 0.07);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 32px;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.ao-elig-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background: linear-gradient(180deg, var(--school-orange), var(--school-blue));
}
.ao-elig-card::after {
    content: "";
    position: absolute;
    right: -60px; bottom: -60px;
    width: 200px; height: 200px;
    border: 30px solid rgba(8, 47, 135, 0.04);
    border-radius: 50%;
    pointer-events: none;
}
.ao-elig-icon {
    width: 88px; height: 88px;
    border-radius: 22px;
    background: linear-gradient(135deg, #fff3e7 0%, #ffe1c2 100%);
    color: var(--school-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    box-shadow: 0 12px 28px rgba(245, 130, 32, 0.15);
}
.ao-elig-body { position: relative; z-index: 1; }
.ao-elig-body .ao-elig-label {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--school-orange);
    font: 700 11px "Inter", sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.ao-elig-body h3 {
    margin: 0 0 12px;
    color: var(--school-blue);
    font: 700 clamp(22px, 2.4vw, 30px)/1.2 "Playfair Display", serif;
    letter-spacing: -0.3px;
}
.ao-elig-body p {
    margin: 0;
    color: var(--school-muted);
    font: 400 15px/1.7 "Inter", sans-serif;
}
.ao-elig-body p strong {
    color: var(--school-blue);
    font-weight: 700;
}

.ao-apply-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
}
.ao-apply-card {
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 20px;
    padding: 34px 32px 30px;
    box-shadow: 0 10px 30px rgba(8, 47, 135, 0.05);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    position: relative;
    overflow: hidden;
}
.ao-apply-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 4px;
    background: linear-gradient(90deg, var(--school-blue), var(--school-orange));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}
.ao-apply-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px rgba(8, 47, 135, 0.10);
    border-color: #cfdcec;
}
.ao-apply-card:hover::before { transform: scaleX(1); }

.ao-apply-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border-radius: 12px;
    font: 700 14px "Inter", sans-serif;
    color: #ffffff;
    margin-bottom: 20px;
}
.ao-apply-card:nth-child(1) .ao-apply-num {
    background: linear-gradient(135deg, var(--school-orange), #ffb06a);
    box-shadow: 0 8px 18px rgba(245, 130, 32, 0.28);
}
.ao-apply-card:nth-child(2) .ao-apply-num {
    background: linear-gradient(135deg, var(--school-blue), var(--school-dark-blue));
    box-shadow: 0 8px 18px rgba(8, 47, 135, 0.22);
}
.ao-apply-card h3 {
    margin: 0 0 10px;
    color: var(--school-blue);
    font: 700 20px/1.3 "Playfair Display", serif;
    letter-spacing: -0.2px;
}
.ao-apply-card p {
    margin: 0 0 18px;
    color: var(--school-muted);
    font: 400 14px/1.65 "Inter", sans-serif;
}
.ao-apply-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--school-light-blue);
    color: var(--school-blue);
    font: 700 10.5px "Inter", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.ao-apply-tag i {
    color: var(--school-orange);
    font-size: 12px;
}
.ao-apply-card:nth-child(2) .ao-apply-tag {
    background: #e7f5ee;
    color: #198754;
}
.ao-apply-card:nth-child(2) .ao-apply-tag i {
    color: #198754;
}

.ao-dates-wrap {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
}
.ao-date-card {
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 20px;
    padding: 32px 30px 30px;
    box-shadow: 0 10px 30px rgba(8, 47, 135, 0.05);
    position: relative;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.ao-date-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px rgba(8, 47, 135, 0.10);
    border-color: #cfdcec;
}
.ao-date-card::after {
    content: "";
    position: absolute;
    top: -30px; right: -30px;
    width: 110px; height: 110px;
    border-radius: 50%;
    pointer-events: none;
}
.ao-date-card.opening::after {
    background: rgba(245, 130, 32, 0.08);
}
.ao-date-card.closing::after {
    background: rgba(8, 47, 135, 0.06);
}

.ao-date-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}
.ao-date-card.opening .ao-date-icon {
    background: #fff3e7;
    color: var(--school-orange);
}
.ao-date-card.closing .ao-date-icon {
    background: #eef5fc;
    color: var(--school-blue);
}

.ao-date-tag {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--school-orange);
    font: 700 10.5px "Inter", sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}
.ao-date-card h3 {
    margin: 0 0 12px;
    color: var(--school-blue);
    font: 700 22px/1.25 "Playfair Display", serif;
    letter-spacing: -0.3px;
    position: relative;
    z-index: 1;
}
.ao-date-card p {
    margin: 0;
    color: var(--school-muted);
    font: 400 14px/1.7 "Inter", sans-serif;
    position: relative;
    z-index: 1;
}
.ao-date-card p strong {
    color: var(--school-blue);
    font-weight: 700;
}

.ao-notice {
    margin-top: 46px;
    background: var(--school-light-blue);
    border: 1px dashed rgba(8, 47, 135, 0.35);
    border-radius: 16px;
    padding: 24px 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.ao-notice-icon {
    flex-shrink: 0;
    width: 50px; height: 50px;
    border-radius: 14px;
    background: #ffffff;
    color: var(--school-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 8px 20px rgba(8, 47, 135, 0.08);
}
.ao-notice-body strong {
    display: block;
    color: var(--school-blue);
    font: 700 15px "Playfair Display", serif;
    margin-bottom: 4px;
}
.ao-notice-body p {
    margin: 0;
    color: var(--school-muted);
    font: 400 13.5px/1.6 "Inter", sans-serif;
}
.ao-notice-body a {
    color: var(--school-orange);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(245, 130, 32, 0.5);
}
.ao-notice-body a:hover {
    color: var(--school-blue);
    border-bottom-color: var(--school-blue);
}

/* =========================================================
   ADMISSION ENQUIRY PAGE
========================================================= */

.ad-hero-wrap {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 480px;
    margin: 0 auto;
}
.ad-hero-wrap::before {
    content: "";
    position: absolute;
    top: 10px; left: 0;
    width: 150px; height: 150px;
    background-image: radial-gradient(rgba(8, 47, 135, 0.18) 1.8px, transparent 1.8px);
    background-size: 15px 15px;
    z-index: 1;
    pointer-events: none;
}
.ad-hero-wrap::after {
    content: "";
    position: absolute;
    bottom: -10px; left: -10px;
    width: 130px; height: 130px;
    border: 24px solid rgba(245, 130, 32, 0.15);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}
.ad-ring-blue {
    position: absolute;
    top: 10px; right: 20px;
    width: 140px; height: 140px;
    border: 26px solid rgba(8, 47, 135, 0.10);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

.ad-card {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 30px 70px rgba(8, 47, 135, 0.20),
                0 10px 25px rgba(8, 47, 135, 0.06);
    overflow: hidden;
    z-index: 3;
    transition: transform 0.4s ease;
}
.ad-card:hover {
    transform: translate(-50%, -50%) translateY(-6px);
}
.ad-card-head {
    position: relative;
    background: linear-gradient(135deg, var(--school-blue) 0%, var(--school-dark-blue) 100%);
    padding: 22px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    overflow: hidden;
}
.ad-card-head::after {
    content: "";
    position: absolute;
    right: -40px; top: -50px;
    width: 130px; height: 130px;
    border: 24px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    pointer-events: none;
}
.ad-card-icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    position: relative;
    z-index: 1;
}
.ad-card-head-text { position: relative; z-index: 1; }
.ad-card-head-text span {
    display: block;
    color: var(--school-orange);
    font: 700 9.5px "Inter", sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.ad-card-head-text strong {
    display: block;
    color: #ffffff;
    font: 700 16px "Playfair Display", serif;
    line-height: 1.2;
}

.ad-card-body { padding: 18px 22px 20px; }

.ad-field {
    padding: 11px 0;
    border-bottom: 1px dashed var(--school-border);
}
.ad-field:last-child { border-bottom: none; }
.ad-field-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--school-blue);
    font: 700 10px "Inter", sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.ad-field-label i {
    color: var(--school-orange);
    font-size: 12px;
}
.ad-field-bar {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: var(--school-border);
    overflow: hidden;
    position: relative;
    width: 100%;
}
.ad-field-bar::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--school-orange), #ffb06a);
}
.ad-field:nth-child(1) .ad-field-bar::after { width: 78%; }
.ad-field:nth-child(2) .ad-field-bar::after { width: 62%; }
.ad-field:nth-child(3) .ad-field-bar::after { width: 85%; }

.ad-chips {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.ad-chip {
    padding: 4px 10px;
    border-radius: 999px;
    font: 700 9.5px "Inter", sans-serif;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    background: var(--school-light-blue);
    color: var(--school-blue);
}
.ad-chip.active {
    background: var(--school-orange);
    color: #ffffff;
}

.ad-card-foot {
    padding: 14px 20px;
    background: #f8fafd;
    border-top: 1px solid var(--school-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.ad-card-foot-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--school-blue);
    font: 700 10px "Inter", sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.ad-card-foot-label i { color: var(--school-orange); font-size: 12px; }
.ad-card-foot-dots { display: flex; gap: 4px; }
.ad-card-foot-dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--school-border);
}
.ad-card-foot-dots span:nth-child(1) { background: var(--school-orange); width: 16px; border-radius: 4px; }
.ad-card-foot-dots span:nth-child(2) { background: var(--school-blue); }
.ad-card-foot-dots span:nth-child(3) { background: #198754; }

.ad-float {
    position: absolute;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 16px 38px rgba(8, 47, 135, 0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    z-index: 5;
    transition: transform 0.4s ease;
}
.ad-float:hover { transform: translateY(-4px); }
.ad-float-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.ad-float-text { display: flex; flex-direction: column; line-height: 1.15; }
.ad-float-text small {
    font: 700 8.5px "Inter", sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--school-muted);
    margin-bottom: 3px;
}
.ad-float-text strong {
    font: 700 13px "Playfair Display", serif;
    color: var(--school-blue);
    white-space: nowrap;
}
.ad-float-1 { top: 30px; left: 0; animation: adFloatY 4s ease-in-out infinite; }
.ad-float-1 .ad-float-icon { background: #fff3e7; color: var(--school-orange); }
.ad-float-2 { bottom: 40px; right: 0; animation: adFloatY 4s ease-in-out infinite; animation-delay: 1.2s; }
.ad-float-2 .ad-float-icon { background: #e7f5ee; color: #198754; }
@keyframes adFloatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

.ad-form-section {
    background: #ffffff;
    padding: 90px 0 100px;
    position: relative;
    overflow: hidden;
}
.ad-form-section::before {
    content: "";
    position: absolute;
    top: -180px; left: -180px;
    width: 420px; height: 420px;
    border: 64px solid rgba(8, 47, 135, 0.03);
    border-radius: 50%;
    pointer-events: none;
}
.ad-form-section::after {
    content: "";
    position: absolute;
    bottom: -160px; right: -140px;
    width: 340px; height: 340px;
    background: rgba(245, 130, 32, 0.05);
    border-radius: 50%;
    pointer-events: none;
}
.ad-form-section .container {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1200px;
}

.ad-form-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 46px;
}
.ad-form-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--school-orange);
    font: 600 12px "Inter", sans-serif;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}
.ad-form-title {
    margin: 0 0 14px;
    color: var(--school-blue);
    font: 700 clamp(26px, 3vw, 38px)/1.15 "Playfair Display", serif;
    letter-spacing: -0.3px;
}
.ad-form-title em { color: var(--school-orange); font-weight: 600; font-style: italic; }
.ad-sub {
    margin: 0;
    color: var(--school-muted);
    font: 400 15px/1.7 "Inter", sans-serif;
}

.ad-form-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 34px;
    align-items: start;
}

.ad-form-card {
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 22px;
    padding: 38px 38px 36px;
    box-shadow: 0 14px 40px rgba(8, 47, 135, 0.06);
}
.ad-form-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--school-border);
}
.ad-form-card-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--school-blue), var(--school-dark-blue));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 10px 24px rgba(8, 47, 135, 0.20);
}
.ad-form-card-head-text span {
    display: block;
    color: var(--school-orange);
    font: 700 10px "Inter", sans-serif;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.ad-form-card-head-text h3 {
    margin: 0;
    color: var(--school-blue);
    font: 700 20px "Playfair Display", serif;
    letter-spacing: -0.2px;
}

.ad-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.ad-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}
.ad-form-field label {
    color: var(--school-blue);
    font: 700 11px "Inter", sans-serif;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.ad-form-field label span {
    color: var(--school-orange);
    font-weight: 700;
}
.ad-form-field input,
.ad-form-field select,
.ad-form-field textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--school-border);
    border-radius: 12px;
    background: #f9fbfe;
    font: 500 14px "Inter", sans-serif;
    color: var(--school-text);
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    font-family: "Inter", sans-serif;
    outline: none;
}
.ad-form-field input::placeholder,
.ad-form-field textarea::placeholder {
    color: #a7b3c4;
}
.ad-form-field input:focus,
.ad-form-field select:focus,
.ad-form-field textarea:focus {
    border-color: var(--school-orange);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(245, 130, 32, 0.10);
}
.ad-form-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2368768a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 44px;
    cursor: pointer;
}
.ad-form-field textarea {
    resize: vertical;
    min-height: 110px;
}

.ad-form-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 6px 0 22px;
    color: var(--school-muted);
    font: 400 12.5px/1.6 "Inter", sans-serif;
}
.ad-form-consent input {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    accent-color: var(--school-orange);
    cursor: pointer;
}
.ad-form-consent a {
    color: var(--school-blue);
    font-weight: 600;
    text-decoration: none;
}
.ad-form-consent a:hover {
    color: var(--school-orange);
}

.ad-form-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 30px;
    background: var(--school-blue);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    font: 700 12px "Inter", sans-serif;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}
.ad-form-submit:hover {
    background: var(--school-orange);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(245, 130, 32, 0.32);
}
.ad-form-submit i { font-size: 14px; }

.ad-form-side {
    background: linear-gradient(135deg, var(--school-blue) 0%, var(--school-dark-blue) 100%);
    border-radius: 22px;
    padding: 38px 32px 34px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(8, 47, 135, 0.18);
}
.ad-form-side::before {
    content: "";
    position: absolute;
    top: -60px; right: -60px;
    width: 180px; height: 180px;
    border: 30px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    pointer-events: none;
}
.ad-form-side::after {
    content: "";
    position: absolute;
    bottom: -50px; left: -50px;
    width: 140px; height: 140px;
    border: 24px solid rgba(245, 130, 32, 0.18);
    border-radius: 50%;
    pointer-events: none;
}
.ad-form-side-inner { position: relative; z-index: 1; }

.ad-form-side-icon {
    width: 54px; height: 54px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: var(--school-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 18px;
}
.ad-form-side h3 {
    margin: 0 0 8px;
    color: #ffffff;
    font: 700 22px/1.2 "Playfair Display", serif;
    letter-spacing: -0.3px;
}
.ad-form-side > .ad-form-side-inner > p {
    margin: 0 0 26px;
    color: rgba(255, 255, 255, 0.75);
    font: 400 13.5px/1.65 "Inter", sans-serif;
}

.ad-form-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.ad-form-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.ad-form-step-num {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(245, 130, 32, 0.95);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 12.5px "Inter", sans-serif;
    box-shadow: 0 6px 14px rgba(245, 130, 32, 0.35);
}
.ad-form-step-body { padding-top: 5px; }
.ad-form-step-body strong {
    display: block;
    color: #ffffff;
    font: 700 14px "Inter", sans-serif;
    letter-spacing: 0.2px;
    margin-bottom: 3px;
}
.ad-form-step-body small {
    display: block;
    color: rgba(255, 255, 255, 0.68);
    font: 400 12.5px/1.55 "Inter", sans-serif;
}

.ad-section {
    background: var(--school-light-blue);
    padding: 90px 0 110px;
    position: relative;
    overflow: hidden;
}
.ad-section::before {
    content: "";
    position: absolute;
    top: -200px; left: -200px;
    width: 460px; height: 460px;
    border: 68px solid rgba(8, 47, 135, 0.03);
    border-radius: 50%;
    pointer-events: none;
}
.ad-section::after {
    content: "";
    position: absolute;
    bottom: -180px; right: -160px;
    width: 360px; height: 360px;
    background: rgba(245, 130, 32, 0.05);
    border-radius: 50%;
    pointer-events: none;
}
.ad-section .container {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1200px;
}

.ad-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 50px;
}
.ad-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--school-orange);
    font: 600 12px "Inter", sans-serif;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}
.ad-title {
    margin: 0 0 14px;
    color: var(--school-blue);
    font: 700 clamp(26px, 3vw, 38px)/1.15 "Playfair Display", serif;
    letter-spacing: -0.3px;
}
.ad-title em { color: var(--school-orange); font-weight: 600; font-style: italic; }

.ad-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.ad-contact-card {
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 20px;
    padding: 30px 30px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: 0 8px 26px rgba(8, 47, 135, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}
.ad-contact-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 4px;
    background: linear-gradient(90deg, var(--school-blue), var(--school-orange));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}
.ad-contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 44px rgba(8, 47, 135, 0.10);
    border-color: #cfdcec;
}
.ad-contact-card:hover::before {
    transform: scaleX(1);
}

.ad-contact-head {
    display: flex;
    align-items: center;
    gap: 16px;
}
.ad-contact-icon {
    flex-shrink: 0;
    width: 54px; height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.ad-contact-icon.orange { background: #fff3e7; color: var(--school-orange); }
.ad-contact-icon.blue   { background: #eef5fc; color: var(--school-blue); }

.ad-contact-head-text span {
    display: block;
    color: var(--school-orange);
    font: 700 10px "Inter", sans-serif;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.ad-contact-head-text h3 {
    margin: 0;
    color: var(--school-blue);
    font: 700 19px "Playfair Display", serif;
    letter-spacing: -0.2px;
}

.ad-phone-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ad-phone-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #f9fbfe;
    border: 1px solid var(--school-border);
    text-decoration: none;
    transition: all 0.28s ease;
}
.ad-phone-item:hover {
    background: var(--school-light-blue);
    border-color: #cfdcec;
    transform: translateX(3px);
}
.ad-phone-item i {
    color: var(--school-orange);
    font-size: 16px;
    flex-shrink: 0;
}
.ad-phone-item span {
    color: var(--school-blue);
    font: 600 14.5px "Inter", sans-serif;
    letter-spacing: 0.2px;
}

.ad-email-box {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    background: #f9fbfe;
    border: 1px solid var(--school-border);
    text-decoration: none;
    transition: all 0.28s ease;
}
.ad-email-box:hover {
    background: var(--school-light-blue);
    border-color: #cfdcec;
    transform: translateX(3px);
}
.ad-email-icon {
    flex-shrink: 0;
    width: 42px; height: 42px;
    border-radius: 12px;
    background: #fff3e7;
    color: var(--school-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.ad-email-body { min-width: 0; flex: 1; }
.ad-email-body small {
    display: block;
    color: var(--school-muted);
    font: 700 10px "Inter", sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.ad-email-body strong {
    display: block;
    color: var(--school-blue);
    font: 600 14.5px "Inter", sans-serif;
    letter-spacing: 0.2px;
    word-break: break-all;
}

/* =========================================================
   RESPONSIVE (FOR HERO, CHAIRMAN, CALENDAR, ADMISSIONS)
========================================================= */

@media (max-width: 1199.98px) {
    .fac-hero {
        height: auto;
        max-height: 70vh;
        min-height: 0;
        padding: 50px 0;
    }
    .fac-hero .container { width: 92%; }
    .fac-hero-inner { gap: 40px; }

    .calendar-hero {
        height: 70vh;
        min-height: 70vh;
    }
    .calendar-hero .container { width: 92%; }
    .calendar-hero-inner { gap: 40px; }
    .deco-calendar { max-width: 220px; }

    .academic-months .container { width: 92%; }
    .academic-months { padding: 80px 0 90px; }

    .cal-body { grid-template-columns: 1fr; }
    .cal-grid-side { border-right: 0; border-bottom: 1px solid var(--school-border); }

    .ao-hero-wrap { max-width: 440px; height: 440px; }
    .ao-hub { width: 200px; height: 200px; }
    .ao-mini { width: 58px; height: 58px; font-size: 20px; }
    .ao-section { padding: 80px 0 90px; }

    .ad-hero-wrap { max-width: 440px; height: 440px; }
    .ad-card { width: 300px; }
    .ad-form-section { padding: 80px 0 90px; }
    .ad-form-grid { grid-template-columns: 1fr; gap: 26px; }
    .ad-section { padding: 80px 0 96px; }
}

@media (max-width: 991.98px) {
    .fac-hero {
        height: auto;
        max-height: none;
        padding: 55px 0;
    }
    .fac-hero-inner {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .fac-hero-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .chairman-hero { padding: 60px 0; }
    .chairman-hero-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }
    .chairman-portrait-wrap {
        max-width: 400px;
        margin: 0 auto;
    }
    .chairman-portrait { height: 440px; }
    .chairman-hero-text {
        max-width: 100%;
        text-align: center;
        margin: 0 auto;
    }
    .chairman-eyebrow { justify-content: center; }
    .chairman-name-block {
        justify-content: center;
    }
    .chairman-message { padding: 70px 0 80px; }

    .calendar-hero {
        height: auto;
        min-height: 70vh;
        padding: 55px 0;
    }
    .calendar-hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .calendar-hero-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .calendar-hero-desc { max-width: 100%; }
    .deco-calendar { max-width: 220px; margin: 0 auto; }

    .ao-hero-wrap { max-width: 460px; height: 460px; margin-top: 20px; }
    .ao-elig-card {
        padding: 32px 30px;
        gap: 24px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .ao-elig-icon { width: 76px; height: 76px; font-size: 34px; }
    .ao-apply-grid {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .ao-dates-wrap { grid-template-columns: 1fr; }
    .ao-date-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .ad-hero-wrap { max-width: 460px; height: 460px; margin-top: 20px; }
}

@media (max-width: 767.98px) {
    .fac-hero { padding: 45px 0 60px; }
    .fac-hero .container { width: 95%; }
    .fac-hero-title { font-size: 32px; }
    .fac-hero-desc { font-size: 14.5px; }
    .fac-crumb { font-size: 10.5px; letter-spacing: 1.5px; }
    .fac-hero-facts { gap: 12px 22px; }
    .fac-hero-facts span { font-size: 12px; }

    .chairman-hero { padding: 50px 0; }
    .chairman-portrait { height: 380px; }
    .chairman-hero-text h1 { font-size: 30px; }
    .chairman-hero-text p { font-size: 15px; }
    .chairman-message { padding: 55px 0 65px; }
    .chairman-message-inner > p {
        font-size: 15.5px;
        line-height: 1.85;
    }
    .chairman-message-inner > p:first-of-type::first-letter {
        font-size: 54px;
        margin-right: 10px;
    }
    .chairman-signature h4 { font-size: 19px; }

    .calendar-hero { padding: 45px 0 50px; }
    .calendar-hero .container { width: 95%; }
    .calendar-hero-title { font-size: 32px; }
    .calendar-hero-desc { font-size: 14.5px; }
    .calendar-crumb { font-size: 10.5px; letter-spacing: 1.5px; }
    .calendar-hero-facts { gap: 12px 22px; }
    .calendar-hero-facts span { font-size: 12px; }
    .deco-calendar { max-width: 200px; padding-top: 28px; }

    .academic-months { padding: 60px 0 70px; }
    .academic-months .container { width: 95%; }
    .am-head { margin-bottom: 40px; }
    .am-head h2 { font-size: 26px; }
    .am-head p { font-size: 14.5px; }

    .cal-wrapper { border-radius: 16px; }
    .cal-controls {
        grid-template-columns: auto 1fr auto;
        gap: 10px;
        padding: 14px 18px;
    }
    .cal-nav-btn { padding: 10px 14px; font-size: 11.5px; }
    .cal-nav-btn span { display: none; }
    .cal-nav-btn i { font-size: 16px; }

    .cal-search { max-width: 100%; }
    .cal-search-input { padding: 10px 14px 10px 38px; font-size: 12.5px; }
    .cal-search-icon { left: 14px; font-size: 14px; }

    .cal-grid-side,
    .cal-events-side { padding: 24px 22px; }

    .cal-month-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .cal-month-name { font-size: 26px; }
    .cal-month-year { font-size: 12px; }

    .cal-day { font-size: 13px; border-radius: 8px; }
    .cal-weekdays span { font-size: 9.5px; padding: 6px 0; }
    .cal-events-list { max-height: none; }
    .cal-footer { padding: 16px 22px; }
    .cal-footer-left { font-size: 11.5px; }

    .ao-hero-wrap { max-width: 400px; height: 400px; }
    .ao-hub { width: 180px; height: 180px; padding: 20px; }
    .ao-hub-icon { width: 48px; height: 48px; font-size: 22px; margin-bottom: 10px; }
    .ao-hub-title { font-size: 9px; letter-spacing: 2px; }
    .ao-hub-year { font-size: 19px; }
    .ao-hub-label { font-size: 9.5px; margin-top: 5px; }
    .ao-mini { width: 54px; height: 54px; font-size: 19px; }
    .ao-hero-wrap::before { width: 100px; height: 100px; }
    .ao-hero-wrap::after { width: 100px; height: 100px; border-width: 18px; }
    .ao-float { padding: 9px 13px; gap: 8px; }
    .ao-float-1 { top: -4px; left: 0; }
    .ao-float-2 { bottom: -4px; right: 0; }
    .ao-float-icon { width: 30px; height: 30px; font-size: 13px; }
    .ao-float-text strong { font-size: 11.5px; }
    .ao-float-text small { font-size: 7.5px; letter-spacing: 1px; }

    .ao-section { padding: 60px 0 70px; }
    .ao-section .container { width: 95%; }
    .ao-head { margin-bottom: 34px; }
    .ao-sub { font-size: 14px; }

    .ao-elig-card {
        grid-template-columns: 1fr;
        padding: 28px 24px;
        gap: 20px;
    }
    .ao-elig-icon {
        width: 68px; height: 68px;
        font-size: 30px;
        border-radius: 18px;
    }
    .ao-elig-body h3 { font-size: 22px; }
    .ao-elig-body p { font-size: 14px; }

    .ao-apply-card { padding: 28px 24px 26px; }
    .ao-apply-card h3 { font-size: 18px; }
    .ao-date-card { padding: 26px 24px 24px; }
    .ao-date-card h3 { font-size: 20px; }
    .ao-notice {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px 24px;
        gap: 14px;
    }

    .ad-hero-wrap { max-width: 380px; height: 420px; }
    .ad-card { width: 290px; }
    .ad-card-head { padding: 18px 20px; }
    .ad-card-head-text strong { font-size: 14px; }
    .ad-card-icon { width: 40px; height: 40px; font-size: 18px; }
    .ad-card-body { padding: 14px 18px 16px; }
    .ad-field { padding: 9px 0; }
    .ad-field-label { font-size: 9.5px; }
    .ad-field-bar { height: 5px; }
    .ad-ring-blue { width: 110px; height: 110px; border-width: 20px; }
    .ad-float { padding: 9px 13px; gap: 8px; }
    .ad-float-icon { width: 30px; height: 30px; font-size: 13px; }
    .ad-float-text strong { font-size: 11.5px; }
    .ad-float-text small { font-size: 7.5px; letter-spacing: 1px; }

    .ad-form-section { padding: 55px 0 65px; }
    .ad-form-section .container { width: 95%; }
    .ad-form-head { margin-bottom: 32px; }
    .ad-form-sub { font-size: 14px; }
    .ad-form-card { padding: 26px 22px 24px; border-radius: 18px; }
    .ad-form-card-head { margin-bottom: 22px; padding-bottom: 18px; gap: 12px; }
    .ad-form-card-icon { width: 46px; height: 46px; font-size: 19px; border-radius: 12px; }
    .ad-form-card-head-text h3 { font-size: 18px; }
    .ad-form-row { grid-template-columns: 1fr; gap: 0; }
    .ad-form-field { margin-bottom: 16px; }
    .ad-form-side { padding: 30px 26px 28px; border-radius: 18px; }
    .ad-form-side h3 { font-size: 20px; }

    .ad-section { padding: 60px 0 70px; }
    .ad-section .container { width: 95%; }
    .ad-head { margin-bottom: 34px; }
    .ad-sub { font-size: 14px; }
    .ad-contact-grid { grid-template-columns: 1fr; gap: 20px; }
    .ad-contact-card { padding: 26px 24px 24px; border-radius: 18px; }
}

@media (max-width: 575.98px) {
    .fac-hero { padding: 40px 0 55px; }
    .fac-hero-title { font-size: 28px; }
    .fac-hero-desc { font-size: 13.5px; }
    .fac-hero-facts {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .chairman-portrait { height: 320px; border-radius: 18px; }
    .chairman-portrait-wrap::before {
        top: -10px; left: -10px;
        right: 10px; bottom: 10px;
        border-radius: 18px;
    }
    .chairman-hero-text h1 { font-size: 26px; }
    .chairman-eyebrow { font-size: 11px; letter-spacing: 2px; }
    .chairman-eyebrow::before { width: 20px; }
    .chairman-name-block h4 { font-size: 16px; }
    .chairman-message-inner > p { font-size: 15px; }
    .chairman-signature h4 { font-size: 17px; }

    .calendar-hero { padding: 40px 0 45px; }
    .calendar-hero-title { font-size: 28px; }
    .calendar-hero-desc { font-size: 13.5px; }
    .calendar-hero-facts {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .deco-calendar { max-width: 180px; padding-top: 26px; }

    .academic-months { padding: 50px 0 60px; }
    .am-head h2 { font-size: 22px; }
    .am-head-label { font-size: 10.5px; letter-spacing: 2px; }
    .am-head-label::before,
    .am-head-label::after { width: 22px; }

    .cal-controls {
        padding: 12px 14px;
        gap: 8px;
    }
    .cal-nav-btn { padding: 9px 11px; border-radius: 10px; }
    .cal-nav-btn i { font-size: 15px; }

    .cal-search-input {
        padding: 9px 12px 9px 34px;
        font-size: 12px;
        border-radius: 10px;
    }
    .cal-search-icon { left: 12px; font-size: 13px; }

    .cal-search-item { padding: 10px 14px; }
    .cal-search-item-name { font-size: 14px; }
    .cal-search-item-right { font-size: 9.5px; }

    .cal-grid-side,
    .cal-events-side { padding: 20px 16px; }

    .cal-month-name { font-size: 22px; }
    .cal-month-year { font-size: 11px; }
    .cal-workdays { font-size: 10px; padding: 6px 11px; letter-spacing: 1px; }

    .cal-days { gap: 4px; }
    .cal-day { font-size: 12px; border-radius: 7px; }
    .cal-weekdays span { font-size: 9px; }

    .cal-event { grid-template-columns: 40px 1fr; gap: 11px; padding: 11px 0; }
    .cal-event-date { padding: 5px 3px 4px; border-radius: 7px; }
    .cal-event-num { font-size: 14px; }
    .cal-event-text { font-size: 12px; }

    .cal-footer {
        padding: 14px 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .ao-hero-wrap { max-width: 320px; height: 340px; }
    .ao-hub { width: 150px; height: 150px; padding: 16px; }
    .ao-hub-icon { width: 40px; height: 40px; font-size: 19px; margin-bottom: 8px; border-radius: 12px; }
    .ao-hub-title { font-size: 8.5px; letter-spacing: 1.6px; margin-bottom: 3px; }
    .ao-hub-year { font-size: 16px; }
    .ao-hub-label { font-size: 8.5px; margin-top: 4px; }
    .ao-mini { width: 46px; height: 46px; font-size: 16px; }
    .ao-hero-wrap::before { width: 80px; height: 80px; }
    .ao-hero-wrap::after { width: 80px; height: 80px; border-width: 14px; bottom: -10px; left: -10px; }
    .ao-float-1 { top: 0; left: -8px; }
    .ao-float-2 { bottom: 0; right: -8px; }
    .ao-float { padding: 7px 10px; gap: 7px; }
    .ao-float-icon { width: 26px; height: 26px; font-size: 12px; border-radius: 8px; }
    .ao-float-text strong { font-size: 10.5px; }
    .ao-float-text small { font-size: 7px; letter-spacing: 0.8px; }
    .ao-accent-dot { width: 10px; height: 10px; }
    .ao-title { font-size: 24px; }
    .ao-sub { font-size: 13.5px; }
    .ao-elig-card { padding: 24px 20px; }
    .ao-elig-icon { width: 60px; height: 60px; font-size: 26px; border-radius: 16px; }
    .ao-elig-body h3 { font-size: 20px; }
    .ao-elig-body p { font-size: 13.5px; }
    .ao-apply-card { padding: 24px 20px 22px; }
    .ao-apply-num { width: 38px; height: 38px; font-size: 13px; border-radius: 10px; margin-bottom: 16px; }
    .ao-apply-card h3 { font-size: 17px; }
    .ao-apply-card p { font-size: 13px; }
    .ao-date-card { padding: 24px 20px 22px; }
    .ao-date-icon { width: 48px; height: 48px; font-size: 21px; border-radius: 12px; margin-bottom: 16px; }
    .ao-date-card h3 { font-size: 18px; }
    .ao-date-card p { font-size: 13px; }

    .ad-hero-wrap { max-width: 300px; height: 380px; }
    .ad-card { width: 270px; }
    .ad-card-head { padding: 16px 18px; }
    .ad-card-head-text strong { font-size: 13px; }
    .ad-card-head-text span { font-size: 8.5px; letter-spacing: 1.6px; }
    .ad-card-icon { width: 36px; height: 36px; font-size: 16px; border-radius: 10px; }
    .ad-field { padding: 8px 0; }
    .ad-field-label { font-size: 9px; letter-spacing: 1px; }
    .ad-field-label i { font-size: 11px; }
    .ad-field-bar { height: 5px; }
    .ad-chip { font-size: 8.5px; padding: 3px 8px; }
    .ad-float-1 { top: 5px; left: -5px; }
    .ad-float-2 { bottom: 10px; right: -5px; }
    .ad-float { padding: 8px 11px; }
    .ad-float-icon { width: 26px; height: 26px; font-size: 12px; border-radius: 8px; }
    .ad-float-text strong { font-size: 11px; }
    .ad-ring-blue { width: 90px; height: 90px; border-width: 16px; top: 0; right: 5px; }
    .ad-hero-wrap::before { width: 100px; height: 100px; }
    .ad-hero-wrap::after { width: 100px; height: 100px; border-width: 18px; }
    .ad-form-title { font-size: 24px; }
    .ad-form-sub { font-size: 13.5px; }
    .ad-form-card { padding: 22px 18px 20px; }
    .ad-form-card-head { gap: 10px; margin-bottom: 18px; padding-bottom: 16px; }
    .ad-form-card-icon { width: 42px; height: 42px; font-size: 17px; }
    .ad-form-card-head-text h3 { font-size: 16px; }
    .ad-form-card-head-text span { font-size: 9px; letter-spacing: 1.5px; }
    .ad-form-field input,
    .ad-form-field select,
    .ad-form-field textarea { padding: 12px 14px; font-size: 13.5px; }
    .ad-form-submit { padding: 14px 24px; font-size: 11.5px; }
    .ad-form-side { padding: 26px 22px 24px; }
    .ad-form-side h3 { font-size: 18px; }
    .ad-form-side-icon { width: 48px; height: 48px; font-size: 21px; }
    .ad-form-step-num { width: 30px; height: 30px; font-size: 11.5px; }
    .ad-form-step-body strong { font-size: 13px; }
    .ad-form-step-body small { font-size: 12px; }
    .ad-title { font-size: 24px; }
    .ad-sub { font-size: 13.5px; }
    .ad-contact-card { padding: 22px 20px 20px; }
    .ad-contact-head { gap: 12px; }
    .ad-contact-icon { width: 46px; height: 46px; font-size: 20px; border-radius: 12px; }
    .ad-contact-head-text h3 { font-size: 17px; }
    .ad-phone-item { padding: 11px 14px; }
    .ad-phone-item span { font-size: 13.5px; }
    .ad-email-box { padding: 14px 16px; }
    .ad-email-body strong { font-size: 13.5px; }
}

/* =========================================================
   CLASSES OFFERED PAGE STYLES
========================================================= */

.hero-image-panel {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin-left: auto;
}
.hero-image-frame {
    position: relative;
    padding: 12px;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 20px 45px rgba(8, 47, 135, 0.14);
    z-index: 2;
}
.hero-image {
    width: 100%;
    height: 340px;
    object-fit: cover;
    display: block;
    border-radius: 16px;
}
.hero-image-frame::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    width: 90px;
    height: 90px;
    border-top: 5px solid var(--school-orange);
    border-left: 5px solid var(--school-orange);
    border-radius: 22px 0 0 0;
    z-index: 3;
}
.hero-image-frame::after {
    content: "";
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 90px;
    height: 90px;
    border-right: 5px solid var(--school-blue);
    border-bottom: 5px solid var(--school-blue);
    border-radius: 0 0 22px 0;
    z-index: 3;
}
.hero-image-panel::before {
    content: "";
    position: absolute;
    top: 30px;
    left: -30px;
    width: 130px;
    height: 130px;
    background-image: radial-gradient(rgba(8, 47, 135, 0.16) 1.6px, transparent 1.6px);
    background-size: 14px 14px;
    z-index: 1;
    pointer-events: none;
}

.hero-range-badge {
    position: absolute;
    top: -35px;
    right: -18px;
    z-index: 5;
    background: #ffffff;
    padding: 12px 18px 12px 16px;
    border-radius: 60px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 14px 32px rgba(8, 47, 135, 0.14);
    border: 1px solid var(--school-border);
    transition: 0.3s ease;
}
.hero-range-badge:hover {
    transform: translateY(-3px);
    border-color: var(--school-orange);
    box-shadow: 0 20px 42px rgba(245, 130, 32, 0.20);
}
.hero-range-badge-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--school-blue);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.hero-range-badge-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.hero-range-badge-text small {
    font-family: "Inter", sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--school-orange);
    margin-bottom: 3px;
}
.hero-range-badge-text span {
    font-family: "Playfair Display", serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--school-blue);
    white-space: nowrap;
}

.hero-stages-card {
    position: absolute;
    bottom: -14px;
    left: -35px;
    z-index: 5;
    background: #ffffff;
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 18px 40px rgba(8, 47, 135, 0.16);
    border: 1px solid var(--school-border);
}
.hero-stage-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding-right: 18px;
    border-right: 1px dashed var(--school-border);
}
.hero-stage-pill:last-child {
    padding-right: 0;
    border-right: 0;
}
.hero-stage-pill i {
    color: var(--school-orange);
    font-size: 15px;
    margin-bottom: 2px;
}
.hero-stage-pill span {
    font-family: "Inter", sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--school-blue);
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.hero-stage-pill small {
    font-family: "Inter", sans-serif;
    font-size: 8.5px;
    font-weight: 600;
    color: var(--school-muted);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    white-space: nowrap;
}

.stage-intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 50px;
}
.stage-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--school-orange);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.stage-label::before,
.stage-label::after {
    content: "";
    width: 32px;
    height: 2px;
    background: var(--school-orange);
}
.stage-title {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 14px;
}
.stage-title em {
    color: var(--school-orange);
    font-style: italic;
    font-weight: 600;
}
.stage-sub {
    color: var(--school-muted);
    font-size: 16px;
    line-height: 1.75;
    max-width: 620px;
    margin: 0 auto;
}

.class-timeline {
    position: relative;
    padding: 90px 0 100px;
    background: #ffffff;
    overflow: hidden;
}
.class-timeline::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    top: -300px;
    right: -260px;
    background: var(--school-light-blue);
    border-radius: 50%;
    opacity: 0.4;
    pointer-events: none;
}
.class-timeline .container {
    position: relative;
    z-index: 2;
}

.timeline-flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 20px;
}
.timeline-step {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 16px;
    padding: 28px 22px 24px;
    transition: 0.3s ease;
    overflow: hidden;
}
.timeline-step:hover {
    border-color: var(--school-orange);
    transform: translateY(-5px);
    box-shadow: 0 20px 45px rgba(8, 47, 135, 0.09);
}
.timeline-step-number {
    display: inline-block;
    background: var(--school-light-blue);
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 13px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 30px;
    margin-bottom: 16px;
    letter-spacing: 0.5px;
    transition: 0.3s ease;
}
.timeline-step:hover .timeline-step-number {
    background: var(--school-orange);
    color: #ffffff;
}
.timeline-step h3 {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.3;
}
.timeline-step p {
    color: var(--school-muted);
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0;
}

.curriculum-unified-section {
    position: relative;
    padding: 95px 0 105px;
    background: #fdfdfd;
    overflow: hidden;
}
.curriculum-unified-section::before {
    content: "";
    position: absolute;
    width: 720px;
    height: 720px;
    top: -360px;
    right: -280px;
    background: var(--school-light-blue);
    border-radius: 50%;
    opacity: 0.55;
    pointer-events: none;
}
.curriculum-unified-section::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    bottom: -260px;
    left: -200px;
    border: 2px dashed rgba(8, 47, 135, 0.12);
    border-radius: 50%;
    pointer-events: none;
}
.curriculum-unified-section .container {
    position: relative;
    z-index: 2;
}

.curr-head {
    text-align: center;
    max-width: 840px;
    margin: 0 auto 52px;
}
.curr-head-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    color: var(--school-orange);
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.8px;
    text-transform: uppercase;
}
.curr-head-label::before,
.curr-head-label::after {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--school-orange);
}
.curr-head h2 {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(30px, 3.6vw, 42px);
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 14px;
}
.curr-head h2 em {
    color: var(--school-orange);
    font-style: italic;
    font-weight: 600;
}
.curr-head p {
    color: var(--school-muted);
    font-size: 15px;
    line-height: 1.75;
    max-width: 720px;
    margin: 0 auto;
}

.curr-dual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

.curr-side-col {
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 22px;
    padding: 24px 22px 30px;
    box-shadow: 0 8px 30px rgba(8, 47, 135, 0.04);
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    transition: all 0.3s ease;
}
.curr-side-col:hover {
    box-shadow: 0 16px 45px rgba(8, 47, 135, 0.08);
}
.curr-side-col-primary {
    border-top: 4px solid var(--school-blue);
}
.curr-side-col-middle {
    border-top: 4px solid var(--school-orange);
}

.curr-stage-hero-banner {
    position: relative;
    background: linear-gradient(135deg, #fffbf5 0%, #fff4e5 100%);
    border: 1px solid rgba(245, 130, 32, 0.22);
    border-radius: 18px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    overflow: hidden;
    margin-bottom: 22px;
    box-shadow: 0 4px 18px rgba(8, 47, 135, 0.03);
    min-height: 180px;
}
.curr-stage-hero-banner.middle-banner {
    background: linear-gradient(135deg, #f4f8ff 0%, #eaf2ff 100%);
    border-color: rgba(8, 47, 135, 0.18);
}

.curr-stage-hero-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}
.curr-stage-hero-shapes .shape-blob-1 {
    position: absolute;
    width: 170px;
    height: 170px;
    border-radius: 50% 50% 40% 60%;
    background: rgba(245, 130, 32, 0.14);
    right: 40px;
    top: -20px;
}
.curr-stage-hero-shapes .shape-blob-2 {
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 60% 40% 50% 50%;
    background: rgba(125, 175, 125, 0.18);
    right: -30px;
    bottom: -30px;
}
.curr-stage-hero-banner.middle-banner .curr-stage-hero-shapes .shape-blob-1 {
    background: rgba(8, 47, 135, 0.1);
}
.curr-stage-hero-shapes .shape-curve-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 90px;
    height: 12px;
    background: rgba(125, 175, 125, 0.35);
    border-radius: 0 0 30px 0;
}
.curr-stage-hero-banner.middle-banner .curr-stage-hero-shapes .shape-curve-top {
    background: rgba(245, 130, 32, 0.3);
}

.curr-stage-hero-text {
    position: relative;
    z-index: 2;
    padding: 22px 18px 22px 24px;
}
.curr-stage-hero-eyebrow {
    display: inline-block;
    font-family: "Inter", sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #b86e24;
    margin-bottom: 5px;
    position: relative;
    padding-bottom: 3px;
}
.curr-stage-hero-eyebrow::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: rgba(184, 110, 36, 0.35);
}
.curr-stage-hero-banner.middle-banner .curr-stage-hero-eyebrow {
    color: #082f87;
}
.curr-stage-hero-banner.middle-banner .curr-stage-hero-eyebrow::after {
    background: rgba(8, 47, 135, 0.3);
}
.curr-stage-hero-title {
    font-family: "Playfair Display", serif;
    font-size: clamp(22px, 2.2vw, 27px);
    font-weight: 700;
    color: #082f87;
    line-height: 1.2;
    margin: 4px 0 6px;
    position: relative;
}
.curr-stage-hero-title::after {
    content: "";
    display: block;
    width: 38px;
    height: 3px;
    background: #f58220;
    border-radius: 2px;
    margin-top: 6px;
}
.curr-stage-hero-p {
    font-size: 13px;
    color: #555555;
    line-height: 1.55;
    margin: 10px 0 0;
}

.curr-stage-hero-media {
    position: relative;
    z-index: 2;
    height: 100%;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
}
.curr-stage-hero-img {
    width: 100%;
    height: 100%;
    min-height: 180px;
    max-height: 210px;
    object-fit: cover;
    object-position: center 20%;
    display: block;
    border-radius: 0 16px 16px 0;
    mask-image: linear-gradient(to right, transparent 0%, black 20%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.curr-stage-hero-banner:hover .curr-stage-hero-img {
    transform: scale(1.05);
}

.curr-side-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.curr-row-item {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-left: 3.5px solid var(--school-light-blue);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(8, 47, 135, 0.02);
}
.curr-side-col-middle .curr-row-item {
    border-left-color: rgba(245, 130, 32, 0.25);
}
.curr-row-item:hover {
    border-color: var(--school-orange);
    border-left-color: var(--school-orange);
    transform: translateX(5px);
    box-shadow: 0 8px 22px rgba(8, 47, 135, 0.08);
    background: #ffffff;
}

.curr-row-item-num {
    font-family: "Playfair Display", serif;
    font-size: 13px;
    font-weight: 700;
    color: rgba(8, 47, 135, 0.35);
    min-width: 20px;
    padding-top: 3px;
    text-align: center;
    flex-shrink: 0;
    transition: color 0.3s ease;
}
.curr-row-item:hover .curr-row-item-num {
    color: var(--school-orange);
}

.curr-row-item-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 11px;
    background: var(--school-light-blue);
    color: var(--school-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: all 0.3s ease;
    margin-top: 1px;
}
.curr-row-item:hover .curr-row-item-icon {
    background: var(--school-orange);
    color: #ffffff;
    transform: rotate(-5deg) scale(1.06);
}

.curr-row-item-content {
    flex-grow: 1;
    min-width: 0;
    text-align: left;
}
.curr-row-item-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.curr-row-item-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.curr-row-item-tag {
    color: var(--school-orange);
    font-family: "Inter", sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    line-height: 1;
}
.curr-row-item-title {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    transition: color 0.3s ease;
}
.curr-row-item:hover .curr-row-item-title {
    color: var(--school-orange);
}
.curr-row-item-badge {
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 12px;
    background: var(--school-light-blue);
    color: var(--school-blue);
    white-space: nowrap;
    letter-spacing: 0.2px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}
.curr-row-item:hover .curr-row-item-badge {
    background: rgba(245, 130, 32, 0.12);
    color: var(--school-orange);
}
.curr-row-item-desc {
    color: var(--school-muted);
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
}

.curr-motivation-card {
    margin-top: 55px;
    padding: 38px 42px;
    background: linear-gradient(135deg, #082f87 0%, #0c3ea8 55%, #051d54 100%);
    border-radius: 20px;
    color: #ffffff;
    box-shadow: 0 16px 45px rgba(8, 47, 135, 0.18);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.curr-motivation-card::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(245, 130, 32, 0.22) 0%, rgba(245, 130, 32, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}
.curr-motivation-card::after {
    content: "";
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}
.curr-motivation-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 28px;
}
.curr-motivation-icon {
    width: 58px;
    height: 58px;
    min-width: 58px;
    border-radius: 16px;
    background: rgba(245, 130, 32, 0.18);
    border: 1px solid rgba(245, 130, 32, 0.35);
    color: var(--school-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
    transition: 0.3s ease;
}
.curr-motivation-card:hover .curr-motivation-icon {
    background: var(--school-orange);
    color: #ffffff;
    transform: scale(1.05) rotate(-5deg);
}
.curr-motivation-content {
    flex-grow: 1;
}
.curr-motivation-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: "Inter", sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--school-orange);
    background: rgba(255, 255, 255, 0.08);
    padding: 4px 13px;
    border-radius: 30px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.curr-motivation-quote {
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: clamp(18px, 2vw, 23px);
    font-style: italic;
    font-weight: 500;
    line-height: 1.48;
    margin: 0 0 10px 0;
    letter-spacing: 0.2px;
}
.curr-motivation-author-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-family: "Inter", sans-serif;
}
.curr-motivation-author {
    font-size: 14px;
    font-weight: 700;
    color: var(--school-orange);
    letter-spacing: 0.3px;
}
.curr-motivation-divider {
    color: rgba(255, 255, 255, 0.35);
    font-size: 12px;
}
.curr-motivation-sub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 400;
}

.admissions-cta {
    position: relative;
    padding: 80px 0;
    background: var(--school-blue);
    overflow: hidden;
    text-align: center;
}
.admissions-cta::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    top: -280px;
    right: -200px;
    border: 60px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    pointer-events: none;
}
.admissions-cta::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    bottom: -200px;
    left: -140px;
    background: rgba(245, 130, 32, 0.10);
    border-radius: 50%;
    pointer-events: none;
}
.admissions-cta .container {
    position: relative;
    z-index: 2;
}
.admissions-cta h2 {
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.2;
    font-weight: 700;
    max-width: 720px;
    margin: 0 auto 16px;
}
.admissions-cta h2 em {
    color: var(--school-orange);
    font-style: italic;
    font-weight: 600;
}
.admissions-cta p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 15.5px;
    line-height: 1.75;
    max-width: 620px;
    margin: 0 auto 30px;
}

.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}
.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 26px;
    background: var(--school-orange);
    color: #ffffff;
    border-radius: 50px;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
}
.cta-btn i {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--school-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    transition: 0.3s ease;
}
.cta-btn:hover {
    background: #ffffff;
    color: var(--school-blue);
}
.cta-btn:hover i {
    background: var(--school-orange);
    color: #ffffff;
    transform: translateX(3px);
}

.cta-btn.cta-outline {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    padding: 14px 28px;
}
.cta-btn.cta-outline i {
    display: none;
}
.cta-btn.cta-outline:hover {
    background: #ffffff;
    color: var(--school-blue);
    border-color: #ffffff;
}

/* =========================================================
   CLUBS & ACTIVITIES PAGE STYLES
========================================================= */

.cl-hero-wrap {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 480px;
    margin: 0 auto;
}
.cl-hero-wrap::before {
    content: "";
    position: absolute;
    top: 10px; left: 0;
    width: 150px; height: 150px;
    background-image: radial-gradient(rgba(8, 47, 135, 0.18) 1.8px, transparent 1.8px);
    background-size: 15px 15px;
    z-index: 1;
    pointer-events: none;
}
.cl-hero-wrap::after {
    content: "";
    position: absolute;
    bottom: -10px; left: -10px;
    width: 130px; height: 130px;
    border: 24px solid rgba(245, 130, 32, 0.15);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}
.cl-ring-blue {
    position: absolute;
    top: 10px; right: 20px;
    width: 140px; height: 140px;
    border: 26px solid rgba(8, 47, 135, 0.10);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

.cl-card {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 30px 70px rgba(8, 47, 135, 0.20),
                0 10px 25px rgba(8, 47, 135, 0.06);
    overflow: hidden;
    z-index: 3;
    transition: transform 0.4s ease;
}
.cl-card:hover {
    transform: translate(-50%, -50%) translateY(-6px);
}
.cl-card-head {
    position: relative;
    background: linear-gradient(135deg, var(--school-blue) 0%, var(--school-dark-blue) 100%);
    padding: 22px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    overflow: hidden;
}
.cl-card-head::after {
    content: "";
    position: absolute;
    right: -40px; top: -50px;
    width: 130px; height: 130px;
    border: 24px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    pointer-events: none;
}
.cl-card-icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    position: relative;
    z-index: 1;
}
.cl-card-head-text { position: relative; z-index: 1; }
.cl-card-head-text span {
    display: block;
    color: var(--school-orange);
    font: 700 9.5px "Inter", sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.cl-card-head-text strong {
    display: block;
    color: #ffffff;
    font: 700 16px "Playfair Display", serif;
    line-height: 1.2;
}

.cl-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    padding: 8px;
}
.cl-tile {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 12px;
    border-radius: 12px;
    transition: 0.3s ease;
}
.cl-tile:hover { background: var(--school-light-blue); }
.cl-tile-icon {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: 0.3s ease;
}
.cl-tile:nth-child(1) .cl-tile-icon { background: #fff3e7; color: var(--school-orange); }
.cl-tile:nth-child(2) .cl-tile-icon { background: #eef5fc; color: var(--school-blue); }
.cl-tile:nth-child(3) .cl-tile-icon { background: #f3e9ff; color: #6f42c1; }
.cl-tile:nth-child(4) .cl-tile-icon { background: #e7f5ee; color: #198754; }
.cl-tile:nth-child(5) .cl-tile-icon { background: #fdf2f2; color: #d64545; }
.cl-tile:nth-child(6) .cl-tile-icon { background: #fffae6; color: #b5870a; }
.cl-tile:hover .cl-tile-icon { transform: rotate(-6deg) scale(1.05); }
.cl-tile-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.cl-tile-text strong {
    display: block;
    color: var(--school-blue);
    font: 700 13px "Playfair Display", serif;
    line-height: 1.2;
    margin-bottom: 2px;
}
.cl-tile-text small {
    display: block;
    color: var(--school-muted);
    font: 700 9px "Inter", sans-serif;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.cl-card-foot {
    padding: 14px 20px;
    background: #f8fafd;
    border-top: 1px solid var(--school-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.cl-card-foot-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--school-blue);
    font: 700 10px "Inter", sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.cl-card-foot-label i { color: var(--school-orange); font-size: 12px; }
.cl-card-foot-dots { display: flex; gap: 4px; }
.cl-card-foot-dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--school-border);
}
.cl-card-foot-dots span:nth-child(1) { background: var(--school-orange); width: 16px; border-radius: 4px; }
.cl-card-foot-dots span:nth-child(2) { background: var(--school-blue); }
.cl-card-foot-dots span:nth-child(3) { background: #6f42c1; }
.cl-card-foot-dots span:nth-child(4) { background: #198754; }
.cl-card-foot-dots span:nth-child(5) { background: #d64545; }
.cl-card-foot-dots span:nth-child(6) { background: #b5870a; }

.cl-float {
    position: absolute;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 16px 38px rgba(8, 47, 135, 0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    z-index: 5;
    transition: transform 0.4s ease;
}
.cl-float:hover { transform: translateY(-4px); }
.cl-float-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.cl-float-text { display: flex; flex-direction: column; line-height: 1.15; }
.cl-float-text small {
    font: 700 8.5px "Inter", sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--school-muted);
    margin-bottom: 3px;
}
.cl-float-text strong {
    font: 700 13px "Playfair Display", serif;
    color: var(--school-blue);
    white-space: nowrap;
}
.cl-float-1 { top: 30px; left: 0; animation: clFloatY 4s ease-in-out infinite; }
.cl-float-1 .cl-float-icon { background: #fff3e7; color: var(--school-orange); }
.cl-float-2 { bottom: 40px; right: 0; animation: clFloatY 4s ease-in-out infinite; animation-delay: 1.2s; }
.cl-float-2 .cl-float-icon { background: #e7f5ee; color: #198754; }

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

.club-section {
    padding: 85px 0;
    position: relative;
}
.club-section.alt {
    background: var(--school-light-blue);
}
.club-section .container {
    width: 90%;
    max-width: 1600px;
}

.club-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 50px;
}
.club-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--school-orange);
    font: 700 12px/1 "Inter", sans-serif;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}
.club-eyebrow::before,
.club-eyebrow::after {
    content: "";
    width: 20px;
    height: 2px;
    background: var(--school-orange);
    display: inline-block;
}
.club-title {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 16px;
}
.club-title em {
    color: var(--school-orange);
    font-style: italic;
}
.club-lead {
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 15.5px;
    line-height: 1.7;
    margin: 0;
}

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: stretch;
}
.pillar-card {
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 18px;
    padding: 30px 24px;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.pillar-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(8, 47, 135, 0.09);
    border-color: rgba(245, 130, 32, 0.4);
}
.pillar-icon-box {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 22px;
    transition: transform 0.3s ease;
}
.pillar-card:hover .pillar-icon-box {
    transform: scale(1.08) rotate(-4deg);
}
.pillar-icon-blue { background: #eef5fc; color: var(--school-blue); }
.pillar-icon-orange { background: #fff3e7; color: var(--school-orange); }
.pillar-icon-green { background: #e7f5ee; color: #198754; }
.pillar-icon-purple { background: #f3e9ff; color: #6f42c1; }

.pillar-title {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.3;
}
.pillar-desc {
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 18px;
    flex-grow: 1;
}
.pillar-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
    border-top: 1px dashed var(--school-border);
    padding-top: 16px;
}
.pillar-features li {
    font-family: "Inter", sans-serif;
    font-size: 12.5px;
    color: var(--school-text);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}
.pillar-features li i {
    color: var(--school-orange);
    font-size: 14px;
}

.club-filter-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 42px;
}
.club-filter-btn {
    background: #ffffff;
    border: 1.5px solid var(--school-border);
    color: var(--school-blue);
    font-family: "Inter", sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.club-filter-btn:hover {
    border-color: var(--school-blue);
    color: var(--school-blue);
    background: var(--school-light-blue);
}
.club-filter-btn.active {
    background: var(--school-blue);
    border-color: var(--school-blue);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(8, 47, 135, 0.22);
}
.club-filter-btn.active i {
    color: var(--school-orange);
}

.clubs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: stretch;
}
.club-main-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--school-border);
    box-shadow: 0 12px 32px rgba(8, 47, 135, 0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.club-main-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 50px rgba(8, 47, 135, 0.12);
}

.club-card-thumb {
    position: relative;
    height: 285px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #000;
    width: 100%;
}
.club-card-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    transition: transform 0.5s ease;
    display: block;
}
.club-main-card:hover .club-card-thumb img {
    transform: scale(1.06);
}
.club-badge-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(6, 31, 99, 0.88);
    backdrop-filter: blur(8px);
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    z-index: 2;
}
.club-badge-tag i { color: var(--school-orange); }

.club-card-body {
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}
.club-subname {
    color: var(--school-orange);
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.club-card-title {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 21px;
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.3;
}
.club-card-desc {
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 13.5px;
    line-height: 1.6;
    margin-bottom: 16px;
}

.club-activity-list {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}
.club-activity-list li {
    font-family: "Inter", sans-serif;
    font-size: 12.5px;
    color: var(--school-text);
    display: flex;
    align-items: flex-start;
    gap: 9px;
    line-height: 1.45;
}
.club-activity-list li i {
    color: var(--school-orange);
    font-size: 14px;
    margin-top: 1px;
    flex-shrink: 0;
}

.club-card-footer-meta {
    border-top: 1px solid var(--school-border);
    padding-top: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    color: var(--school-muted);
}
.club-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--school-blue);
}
.club-meta-pill i { color: var(--school-orange); }

.sig-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    align-items: stretch;
}
.sig-card {
    background: #ffffff;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--school-border);
    box-shadow: 0 15px 35px rgba(8, 47, 135, 0.07);
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    height: 100%;
    min-height: 330px;
}
.sig-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(8, 47, 135, 0.13);
}
.sig-content {
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-width: 0;
}
.sig-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--school-orange);
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.sig-title {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.25;
}
.sig-desc {
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 13.5px;
    line-height: 1.6;
    margin-bottom: 14px;
}
.sig-highlights {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.sig-highlights li {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    color: var(--school-text);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}
.sig-highlights li i {
    color: var(--school-blue);
    font-size: 14px;
}
.sig-media {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-height: 280px;
}
.sig-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
    display: block;
    transition: transform 0.5s ease;
}
.sig-card:hover .sig-media img {
    transform: scale(1.06);
}
.sig-media-badge {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: rgba(6, 31, 99, 0.90);
    backdrop-filter: blur(8px);
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    z-index: 2;
}

.schedule-box {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid var(--school-border);
    box-shadow: 0 15px 40px rgba(8, 47, 135, 0.07);
    overflow: hidden;
}
.schedule-table-wrap {
    overflow-x: auto;
}
.schedule-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    text-align: left;
    font-family: "Inter", sans-serif;
}
.schedule-table th {
    background: linear-gradient(135deg, var(--school-blue) 0%, var(--school-dark-blue) 100%);
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 18px 22px;
    border: none;
    white-space: nowrap;
}
.schedule-table td {
    padding: 18px 22px;
    border-bottom: 1px solid var(--school-border);
    font-size: 14px;
    color: var(--school-text);
    vertical-align: middle;
}
.schedule-table tbody tr:hover {
    background: var(--school-light-blue);
}
.schedule-day-badge {
    display: inline-block;
    background: #fff3e7;
    color: var(--school-orange);
    font-weight: 700;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 6px;
}
.schedule-activity-name {
    font-weight: 700;
    color: var(--school-blue);
    display: block;
    margin-bottom: 2px;
}
.schedule-activity-venue {
    font-size: 12px;
    color: var(--school-muted);
}
.schedule-grade-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eef5fc;
    color: var(--school-blue);
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 50px;
}

.lead-wrap {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 50px;
    align-items: center;
}
.lead-collage {
    position: relative;
}
.lead-img-main {
    width: 85%;
    border-radius: 20px;
    box-shadow: 0 20px 45px rgba(8, 47, 135, 0.16);
    display: block;
}
.lead-img-sub {
    position: absolute;
    bottom: -25px;
    right: 0;
    width: 52%;
    border-radius: 16px;
    border: 5px solid #ffffff;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
}
.lead-card-box {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid var(--school-border);
    padding: 38px 34px;
    box-shadow: 0 15px 35px rgba(8, 47, 135, 0.06);
}
.lead-points-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 24px;
}
.lead-point {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.lead-point-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #fff3e7;
    color: var(--school-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.lead-point-text strong {
    display: block;
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 15px;
    margin-bottom: 2px;
}
.lead-point-text p {
    font-family: "Inter", sans-serif;
    font-size: 12.5px;
    color: var(--school-muted);
    margin: 0;
    line-height: 1.5;
}

.act-gallery-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 35px;
}
.act-gal-btn {
    background: #ffffff;
    border: 1px solid var(--school-border);
    color: var(--school-blue);
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.act-gal-btn:hover,
.act-gal-btn.active {
    background: var(--school-blue);
    border-color: var(--school-blue);
    color: #ffffff;
}

.act-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.act-gallery-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 240px;
    background: #000;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(8, 47, 135, 0.08);
}
.act-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.act-gallery-item:hover img {
    transform: scale(1.08);
}
.act-gal-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 31, 99, 0.85) 0%, rgba(6, 31, 99, 0.2) 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 18px;
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.act-gallery-item:hover .act-gal-overlay {
    opacity: 1;
}
.act-gal-overlay span {
    color: var(--school-orange);
    font-family: "Inter", sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.act-gal-overlay strong {
    font-family: "Playfair Display", serif;
    font-size: 16px;
    margin-top: 2px;
}

.join-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.join-step-card {
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 18px;
    padding: 32px 24px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.join-step-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(8, 47, 135, 0.10);
}
.join-step-num {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--school-light-blue);
    color: var(--school-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Playfair Display", serif;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 22px;
    outline: 2px solid transparent;
    transition: all 0.3s ease;
}
.join-step-card:hover .join-step-num {
    background: var(--school-orange);
    color: #ffffff;
    outline: 2px solid var(--school-orange);
}
.join-step-title {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}
.join-step-desc {
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0;
}

.club-cta-card {
    background: linear-gradient(135deg, var(--school-blue) 0%, var(--school-dark-blue) 100%);
    border-radius: 24px;
    padding: 60px 50px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(8, 47, 135, 0.25);
}
.club-cta-card::before {
    content: "";
    position: absolute;
    width: 400px; height: 400px;
    top: -150px; right: -100px;
    border: 60px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    pointer-events: none;
}
.club-cta-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
.club-cta-text h2 {
    font-family: "Playfair Display", serif;
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 700;
    margin: 0 0 12px;
    line-height: 1.2;
}
.club-cta-text h2 em {
    color: var(--school-orange);
    font-style: italic;
}
.club-cta-text p {
    font-family: "Inter", sans-serif;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    max-width: 620px;
    line-height: 1.65;
}
.club-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    flex-shrink: 0;
}
.btn-school-orange {
    background: var(--school-orange);
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 13px 28px;
    border-radius: 50px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
    box-shadow: 0 8px 22px rgba(245, 130, 32, 0.35);
}
.btn-school-orange:hover {
    background: #e06f10;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(245, 130, 32, 0.45);
}
.btn-school-outline {
    background: transparent;
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 13px 26px;
    border-radius: 50px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
}
.btn-school-outline:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #ffffff;
    color: #ffffff;
    transform: translateY(-2px);
}

.club-modal .modal-content {
    background: #000000;
    border: none;
    border-radius: 16px;
    overflow: hidden;
}
.club-modal .modal-body {
    padding: 0;
    position: relative;
}
.club-modal-img {
    width: 100%;
    max-height: 80vh;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
.club-modal-caption {
    padding: 18px 24px;
    background: #111111;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.club-modal-caption h5 {
    font-family: "Playfair Display", serif;
    font-size: 18px;
    margin: 0;
    color: #ffffff;
}
.club-modal-caption span {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    color: var(--school-orange);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* =========================================================
   CO-CURRICULAR ACTIVITIES PAGE STYLES
========================================================= */

.cca-hero {
    position: relative;
    background: var(--school-light-blue);
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 500px;
    max-height: 70vh;
    height: 70vh;
    padding: 40px 0;
}
.cca-hero::before {
    content: "";
    position: absolute;
    width: 620px; height: 620px;
    top: -320px; right: -240px;
    border: 80px solid rgba(8, 47, 135, 0.045);
    border-radius: 50%;
    pointer-events: none;
}
.cca-hero::after {
    content: "";
    position: absolute;
    width: 340px; height: 340px;
    bottom: -180px; left: -140px;
    background: rgba(245, 130, 32, 0.07);
    border-radius: 50%;
    pointer-events: none;
}
.cca-hero .container {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1600px;
}

.cca-hero-inner {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 60px;
    align-items: center;
}

.cca-crumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.cca-crumb a {
    color: var(--school-muted);
    text-decoration: none;
    transition: color 0.25s ease;
}
.cca-crumb a:hover { color: var(--school-orange); }
.cca-crumb i { color: var(--school-orange); font-size: 10px; }
.cca-crumb .current { color: var(--school-blue); }

.cca-hero-title {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(32px, 3.8vw, 52px);
    line-height: 1.05;
    font-weight: 700;
    margin: 0 0 18px;
    letter-spacing: -0.5px;
}
.cca-hero-title em {
    color: var(--school-orange);
    font-style: italic;
    font-weight: 600;
}

.cca-hero-desc {
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.7;
    max-width: 540px;
    margin: 0 0 24px;
}

.cca-hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
    padding-top: 20px;
    border-top: 1px solid rgba(8, 47, 135, 0.10);
}
.cca-hero-facts span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--school-blue);
    font-family: "Inter", sans-serif;
    font-size: 12.5px;
    font-weight: 600;
}
.cca-hero-facts i {
    color: var(--school-orange);
    font-size: 15px;
}

.cca-visual {
    position: relative;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
}
.cca-card {
    position: relative;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 25px 55px rgba(8, 47, 135, 0.16),
                0 8px 18px rgba(8, 47, 135, 0.07);
    overflow: hidden;
    z-index: 3;
}
.cca-card-head {
    background: linear-gradient(135deg, var(--school-blue) 0%, var(--school-dark-blue) 100%);
    padding: 20px 24px 18px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
}
.cca-card-head::after {
    content: "";
    position: absolute;
    right: -40px; top: -40px;
    width: 130px; height: 130px;
    border: 26px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    pointer-events: none;
}
.cca-card-head-icon {
    flex-shrink: 0;
    width: 42px; height: 42px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    position: relative;
    z-index: 1;
}
.cca-card-head-text { position: relative; z-index: 1; }
.cca-card-head-text span {
    display: block;
    color: var(--school-orange);
    font-family: "Inter", sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.cca-card-head-text strong {
    display: block;
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}
.cca-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    padding: 6px;
}
.cca-tile {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 12px;
    border-radius: 12px;
    transition: 0.3s ease;
}
.cca-tile:hover { background: var(--school-light-blue); }
.cca-tile-icon {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: 0.3s ease;
}
.cca-tile:nth-child(1) .cca-tile-icon { background: #fff3e7; color: var(--school-orange); }
.cca-tile:nth-child(2) .cca-tile-icon { background: var(--school-light-blue); color: var(--school-blue); }
.cca-tile:nth-child(3) .cca-tile-icon { background: #f3e9ff; color: #6f42c1; }
.cca-tile:nth-child(4) .cca-tile-icon { background: #e7f5ee; color: #198754; }
.cca-tile:nth-child(5) .cca-tile-icon { background: #fdf2f2; color: #d64545; }
.cca-tile:nth-child(6) .cca-tile-icon { background: #fffae6; color: #b5870a; }
.cca-tile:hover .cca-tile-icon { transform: rotate(-6deg) scale(1.05); }
.cca-tile-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}
.cca-tile-text strong {
    display: block;
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 2px;
}
.cca-tile-text small {
    display: block;
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.cca-card-foot {
    padding: 14px 20px 16px;
    background: #f8fafd;
    border-top: 1px solid var(--school-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.cca-card-foot-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--school-blue);
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.cca-card-foot-label i { color: var(--school-orange); font-size: 12px; }
.cca-card-foot-dots { display: flex; gap: 4px; }
.cca-card-foot-dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--school-border);
}
.cca-card-foot-dots span:nth-child(1) { background: var(--school-orange); width: 16px; border-radius: 4px; }
.cca-card-foot-dots span:nth-child(2) { background: var(--school-blue); }
.cca-card-foot-dots span:nth-child(3) { background: #6f42c1; }
.cca-card-foot-dots span:nth-child(4) { background: #198754; }
.cca-card-foot-dots span:nth-child(5) { background: #d64545; }

.cca-float {
    position: absolute;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(8, 47, 135, 0.14);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    z-index: 5;
    transition: transform 0.4s ease;
}
.cca-float:hover { transform: translateY(-3px); }
.cca-float-icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.cca-float-text { display: flex; flex-direction: column; line-height: 1.1; }
.cca-float-text small {
    font-family: "Inter", sans-serif;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--school-muted);
    margin-bottom: 3px;
}
.cca-float-text strong {
    font-family: "Playfair Display", serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--school-blue);
    white-space: nowrap;
}
.cca-float-1 {
    top: -35px; left: -22px;
    animation: ccaFloatY 4s ease-in-out infinite;
}
.cca-float-1 .cca-float-icon { background: #fff3e7; color: var(--school-orange); }
.cca-float-2 {
    bottom: -18px; right: -22px;
    animation: ccaFloatY 4s ease-in-out infinite;
    animation-delay: 1.2s;
}
.cca-float-2 .cca-float-icon { background: var(--school-light-blue); color: var(--school-blue); }
.cca-float-3 {
    top: 46%; right: -84px;
    animation: ccaFloatX 5s ease-in-out infinite;
    animation-delay: 0.6s;
}
.cca-float-3 .cca-float-icon { background: #f3e9ff; color: #6f42c1; }

@keyframes ccaFloatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes ccaFloatX {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-5px); }
}
.cca-visual::before {
    content: "";
    position: absolute;
    top: 24px;
    left: -22px;
    width: 130px; height: 130px;
    background-image: radial-gradient(rgba(8, 47, 135, 0.16) 1.6px, transparent 1.6px);
    background-size: 14px 14px;
    z-index: 1;
    pointer-events: none;
}

.cca-welcome {
    position: relative;
    background: #ffffff;
    padding: 100px 0 90px;
    overflow: hidden;
}
.cca-welcome::before {
    content: "";
    position: absolute;
    width: 620px; height: 620px;
    top: -320px; right: -260px;
    background: var(--school-light-blue);
    border-radius: 50%;
    opacity: 0.42;
    pointer-events: none;
}
.cca-welcome .container {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1600px;
}
.cca-welcome-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 70px;
    align-items: center;
}
.cca-welcome-text .cca-welcome-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--school-orange);
    font-family: "Inter", sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.cca-welcome-label::before {
    content: "";
    width: 30px; height: 2px;
    background: var(--school-orange);
}
.cca-welcome-text h2 {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(30px, 3.6vw, 44px);
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 22px;
}
.cca-welcome-text h2 em {
    color: var(--school-orange);
    font-style: italic;
    font-weight: 600;
}
.cca-welcome-text p {
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 15.5px;
    line-height: 1.85;
    margin-bottom: 18px;
}
.cca-welcome-text p:last-of-type { margin-bottom: 0; }
.cca-welcome-text strong {
    color: var(--school-blue);
    font-weight: 600;
}

.cca-welcome-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px dashed var(--school-border);
}
.cca-welcome-tags span {
    background: var(--school-light-blue);
    color: var(--school-blue);
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 40px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
    transition: 0.25s ease;
}
.cca-welcome-tags span:hover {
    background: #ffffff;
    border-color: var(--school-orange);
    transform: translateY(-2px);
}
.cca-welcome-tags i {
    color: var(--school-orange);
    font-size: 13px;
}

.cca-welcome-visual {
    position: relative;
    padding: 14px;
}
.cca-welcome-visual::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 90px; height: 90px;
    border-top: 5px solid var(--school-orange);
    border-left: 5px solid var(--school-orange);
    border-radius: 20px 0 0 0;
    z-index: 2;
}
.cca-welcome-visual::after {
    content: "";
    position: absolute;
    right: 0; bottom: 0;
    width: 90px; height: 90px;
    border-right: 5px solid var(--school-blue);
    border-bottom: 5px solid var(--school-blue);
    border-radius: 0 0 20px 0;
    z-index: 2;
}
.cca-welcome-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 460px;
    object-fit: cover;
    border-radius: 16px;
    border: 7px solid #ffffff;
    box-shadow: 0 20px 45px rgba(8, 47, 135, 0.14);
    display: block;
}

.cca-welcome-badge {
    position: absolute;
    z-index: 5;
    bottom: -20px;
    left: -20px;
    background: #ffffff;
    padding: 16px 22px 16px 18px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 18px 40px rgba(8, 47, 135, 0.16);
    border: 1px solid var(--school-border);
    transition: 0.3s ease;
}
.cca-welcome-badge:hover {
    transform: translateY(-4px);
    border-color: var(--school-orange);
}
.cca-welcome-badge-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--school-orange);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.cca-welcome-badge-text small {
    display: block;
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 3px;
}
.cca-welcome-badge-text strong {
    display: block;
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.cca-section {
    position: relative;
    background: var(--school-light-blue);
    padding: 100px 0 110px;
    overflow: hidden;
}
.cca-section::before {
    content: "";
    position: absolute;
    width: 620px; height: 620px;
    top: -320px; right: -260px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.4;
    pointer-events: none;
}
.cca-section::after {
    content: "";
    position: absolute;
    width: 340px; height: 340px;
    bottom: -180px; left: -140px;
    border: 2px solid var(--school-border);
    border-radius: 50%;
    opacity: 0.6;
    pointer-events: none;
}
.cca-section .container {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1600px;
}

.cca-sec-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 60px;
}
.cca-sec-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    color: var(--school-orange);
    font-family: "Inter", sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.cca-sec-label::before,
.cca-sec-label::after {
    content: "";
    width: 30px; height: 2px;
    background: var(--school-orange);
}
.cca-sec-head h2 {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(30px, 3.6vw, 44px);
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 14px;
}
.cca-sec-head h2 em {
    color: var(--school-orange);
    font-style: italic;
    font-weight: 600;
}
.cca-sec-head p {
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.75;
    max-width: 640px;
    margin: 0 auto;
}

.cca-activities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.cca-activity-card {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(8, 47, 135, 0.05);
}
.cca-activity-card:hover {
    border-color: rgba(245, 130, 32, 0.45);
    transform: translateY(-8px);
    box-shadow: 0 24px 50px rgba(8, 47, 135, 0.12);
}

.cca-card-img-wrap {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: var(--school-light-blue);
}
.cca-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.cca-activity-card:hover .cca-card-img {
    transform: scale(1.06);
}

.cca-card-tag-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(6px);
    color: var(--school-blue);
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(8, 47, 135, 0.08);
}

.cca-card-icon-badge {
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--school-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    box-shadow: 0 6px 18px rgba(8, 47, 135, 0.18);
    border: 2px solid #ffffff;
    transition: all 0.35s ease;
}
.cca-activity-card:hover .cca-card-icon-badge {
    background: var(--school-orange);
    color: #ffffff;
    border-color: var(--school-orange);
    transform: rotate(-8deg) scale(1.1);
}

.cca-card-body {
    padding: 26px 24px 26px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
}
.cca-act-title {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 10px;
    transition: color 0.3s ease;
}
.cca-activity-card:hover .cca-act-title {
    color: var(--school-orange);
}
.cca-act-line {
    width: 32px;
    height: 3px;
    background: var(--school-orange);
    border-radius: 3px;
    margin-bottom: 12px;
    transition: width 0.35s ease;
}
.cca-activity-card:hover .cca-act-line {
    width: 52px;
}
.cca-act-desc {
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0;
    flex-grow: 1;
}

/* =========================================================
   CONTACT US PAGE STYLES
========================================================= */

.ct-hero-wrap {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 480px;
    margin: 0 auto;
}
.ct-hero-wrap::before {
    content: "";
    position: absolute;
    top: 10px; left: 0;
    width: 150px; height: 150px;
    background-image: radial-gradient(rgba(8, 47, 135, 0.18) 1.8px, transparent 1.8px);
    background-size: 15px 15px;
    z-index: 1;
    pointer-events: none;
}
.ct-hero-wrap::after {
    content: "";
    position: absolute;
    bottom: -10px; left: -10px;
    width: 130px; height: 130px;
    border: 24px solid rgba(245, 130, 32, 0.15);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}
.ct-ring-blue {
    position: absolute;
    top: 10px; right: 20px;
    width: 140px; height: 140px;
    border: 26px solid rgba(8, 47, 135, 0.10);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

.ct-card {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 30px 70px rgba(8, 47, 135, 0.20),
                0 10px 25px rgba(8, 47, 135, 0.06);
    overflow: hidden;
    z-index: 3;
    transition: transform 0.4s ease;
}
.ct-card:hover {
    transform: translate(-50%, -50%) translateY(-6px);
}
.ct-card-head {
    position: relative;
    background: linear-gradient(135deg, var(--school-blue) 0%, var(--school-dark-blue) 100%);
    padding: 22px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    overflow: hidden;
}
.ct-card-head::after {
    content: "";
    position: absolute;
    right: -40px; top: -50px;
    width: 130px; height: 130px;
    border: 24px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    pointer-events: none;
}
.ct-card-icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    position: relative;
    z-index: 1;
}
.ct-card-head-text { position: relative; z-index: 1; }
.ct-card-head-text span {
    display: block;
    color: var(--school-orange);
    font: 700 9.5px "Inter", sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.ct-card-head-text strong {
    display: block;
    color: #ffffff;
    font: 700 16px "Playfair Display", serif;
    line-height: 1.2;
}

.ct-card-body { padding: 14px 12px 16px; }
.ct-line {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 12px;
    transition: background 0.3s ease;
}
.ct-line:hover { background: var(--school-light-blue); }
.ct-line-icon {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
.ct-line:nth-child(1) .ct-line-icon { background: #fff3e7; color: var(--school-orange); }
.ct-line:nth-child(2) .ct-line-icon { background: #eef5fc; color: var(--school-blue); }
.ct-line:nth-child(3) .ct-line-icon { background: #e7f5ee; color: #198754; }
.ct-line-text { min-width: 0; flex: 1; }
.ct-line-text strong {
    display: block;
    font: 600 12.5px "Inter", sans-serif;
    color: var(--school-blue);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ct-line-text small {
    display: block;
    font: 500 11px "Inter", sans-serif;
    color: var(--school-muted);
}

.ct-card-foot {
    padding: 14px 20px;
    background: #f8fafd;
    border-top: 1px solid var(--school-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.ct-card-foot-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--school-blue);
    font: 700 10px "Inter", sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.ct-card-foot-label i { color: var(--school-orange); font-size: 12px; }
.ct-card-foot-dots { display: flex; gap: 4px; }
.ct-card-foot-dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--school-border);
}
.ct-card-foot-dots span:nth-child(1) { background: var(--school-orange); width: 16px; border-radius: 4px; }
.ct-card-foot-dots span:nth-child(2) { background: var(--school-blue); }
.ct-card-foot-dots span:nth-child(3) { background: #198754; }

.ct-float {
    position: absolute;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 16px 38px rgba(8, 47, 135, 0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    z-index: 5;
    transition: transform 0.4s ease;
}
.ct-float:hover { transform: translateY(-4px); }
.ct-float-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.ct-float-text { display: flex; flex-direction: column; line-height: 1.15; }
.ct-float-text small {
    font: 700 8.5px "Inter", sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--school-muted);
    margin-bottom: 3px;
}
.ct-float-text strong {
    font: 700 13px "Playfair Display", serif;
    color: var(--school-blue);
    white-space: nowrap;
}
.ct-float-1 { top: 30px; left: 0; animation: ctFloatY 4s ease-in-out infinite; }
.ct-float-1 .ct-float-icon { background: #fff3e7; color: var(--school-orange); }
.ct-float-2 { bottom: 40px; right: 0; animation: ctFloatY 4s ease-in-out infinite; animation-delay: 1.2s; }
.ct-float-2 .ct-float-icon { background: #e7f5ee; color: #198754; }

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

.ct-section {
    background: #ffffff;
    padding: 90px 0 110px;
    position: relative;
    overflow: hidden;
}
.ct-section::before {
    content: "";
    position: absolute;
    top: -200px; left: -200px;
    width: 460px; height: 460px;
    border: 68px solid rgba(8, 47, 135, 0.03);
    border-radius: 50%;
    pointer-events: none;
}
.ct-section::after {
    content: "";
    position: absolute;
    bottom: -180px; right: -160px;
    width: 360px; height: 360px;
    background: rgba(245, 130, 32, 0.05);
    border-radius: 50%;
    pointer-events: none;
}
.ct-section .container {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1400px;
}

.ct-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 50px;
}
.ct-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--school-orange);
    font: 600 12px "Inter", sans-serif;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}
.ct-title {
    margin: 0 0 14px;
    color: var(--school-blue);
    font: 700 clamp(26px, 3vw, 38px)/1.15 "Playfair Display", serif;
    letter-spacing: -0.3px;
}
.ct-title em { color: var(--school-orange); font-weight: 600; font-style: italic; }
.ct-sub {
    margin: 0;
    color: var(--school-muted);
    font: 400 15px/1.7 "Inter", sans-serif;
}

.ct-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 34px;
}

.ct-form-card {
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 20px;
    padding: 34px 34px 32px;
    box-shadow: 0 10px 30px rgba(8, 47, 135, 0.06);
}
.ct-form-card h3 {
    margin: 0 0 8px;
    color: var(--school-blue);
    font: 700 22px "Playfair Display", serif;
    letter-spacing: -0.2px;
}
.ct-form-card > p {
    margin: 0 0 26px;
    color: var(--school-muted);
    font: 400 13.5px/1.6 "Inter", sans-serif;
}

.ct-form {
    display: grid;
    gap: 18px;
}
.ct-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ct-field label {
    color: var(--school-blue);
    font: 700 11px "Inter", sans-serif;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.ct-field input,
.ct-field textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--school-border);
    border-radius: 12px;
    background: #f9fbfe;
    font: 500 14px "Inter", sans-serif;
    color: var(--school-text);
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    font-family: "Inter", sans-serif;
}
.ct-field input::placeholder,
.ct-field textarea::placeholder {
    color: #a7b3c4;
}
.ct-field input:focus,
.ct-field textarea:focus {
    outline: none;
    border-color: var(--school-orange);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(245, 130, 32, 0.10);
}
.ct-field textarea {
    resize: vertical;
    min-height: 130px;
}

.ct-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.ct-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    background: var(--school-blue);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    font: 700 12px "Inter", sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    align-self: flex-start;
    margin-top: 6px;
}
.ct-submit:hover {
    background: var(--school-orange);
    transform: translateX(3px);
    box-shadow: 0 12px 26px rgba(245, 130, 32, 0.32);
}
.ct-submit i { font-size: 14px; }

.ct-info-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.ct-info-card {
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 18px;
    padding: 22px 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.ct-info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(8, 47, 135, 0.10);
    border-color: #cfdcec;
}
.ct-info-icon {
    flex-shrink: 0;
    width: 50px; height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.ct-info-icon.orange { background: #fff3e7; color: var(--school-orange); }
.ct-info-icon.blue   { background: #eef5fc; color: var(--school-blue); }
.ct-info-icon.green  { background: #e7f5ee; color: #198754; }
.ct-info-icon.purple { background: #f3e9ff; color: #6f42c1; }

.ct-info-body { min-width: 0; flex: 1; }
.ct-info-body span {
    display: block;
    color: var(--school-orange);
    font: 700 9.5px "Inter", sans-serif;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.ct-info-body h4 {
    margin: 0 0 6px;
    color: var(--school-blue);
    font: 700 15px "Playfair Display", serif;
    letter-spacing: -0.1px;
}
.ct-info-body p {
    margin: 0;
    color: var(--school-muted);
    font: 400 13px/1.6 "Inter", sans-serif;
}
.ct-info-body a {
    color: var(--school-blue);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.25s ease;
}
.ct-info-body a:hover { color: var(--school-orange); }

.ct-map {
    position: relative;
    padding: 0 0 100px;
    background: #ffffff;
}
.ct-map .container {
    width: 90%;
    max-width: 1400px;
    position: relative;
    z-index: 2;
}
.ct-map-frame {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(8, 47, 135, 0.10);
    border: 1px solid var(--school-border);
    aspect-ratio: 21 / 8;
    min-height: 320px;
    background: var(--school-light-blue);
}
.ct-map-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* =========================================================
   RESPONSIVE MEDIA QUERIES FOR CLASSES, CLUBS, CCA & CONTACT
========================================================= */

@media (max-width: 1199.98px) {
    /* Classes */
    .curr-row-meta { min-width: 230px; width: 230px; }

    /* Clubs */
    .pillars-grid { grid-template-columns: repeat(2, 1fr); }
    .clubs-grid { grid-template-columns: repeat(2, 1fr); }
    .club-card-thumb { height: 320px; aspect-ratio: 4 / 3; }
    .act-gallery-grid { grid-template-columns: repeat(3, 1fr); }
    .join-steps-grid { grid-template-columns: repeat(2, 1fr); }
    .cl-hero-wrap { max-width: 440px; height: 440px; }
    .cl-card { width: 300px; }

    /* CCA */
    .cca-hero {
        height: auto;
        max-height: 70vh;
        min-height: 0;
        padding: 50px 0;
    }
    .cca-hero .container { width: 92%; }
    .cca-hero-inner { gap: 40px; }
    .cca-visual { max-width: 360px; }
    .cca-float-3 { right: -18px; }
    .cca-welcome .container { width: 92%; }
    .cca-welcome { padding: 80px 0 70px; }
    .cca-welcome-grid { gap: 50px; }
    .cca-welcome-img { height: 420px; }
    .cca-section .container { width: 92%; }
    .cca-section { padding: 80px 0 90px; }
    .cca-activities-grid { gap: 22px; }

    /* Contact */
    .ct-hero-wrap { max-width: 440px; height: 440px; }
    .ct-card { width: 280px; }
    .ct-section { padding: 80px 0 96px; }
    .ct-grid { gap: 28px; }
}

@media (max-width: 991.98px) {
    /* Classes */
    .hero-image-panel {
        max-width: 520px;
        margin: 0 auto;
    }
    .hero-image { height: 300px; }
    .class-timeline { padding: 70px 0 80px; }
    .timeline-flow { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .timeline-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .curriculum-unified-section { padding: 70px 0 80px; }
    .curr-head { margin-bottom: 38px; }
    .curr-dual-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .curr-side-col {
        padding: 24px 20px 28px;
    }
    .curr-motivation-card {
        padding: 32px 28px;
        margin-top: 40px;
    }
    .curr-motivation-inner {
        gap: 22px;
    }
    .curr-motivation-icon {
        width: 50px;
        height: 50px;
        min-width: 50px;
        font-size: 26px;
        border-radius: 13px;
    }
    .admissions-cta { padding: 65px 0; }

    /* Clubs */
    .cl-hero-wrap { max-width: 460px; height: 460px; margin-top: 20px; }
    .sig-grid { grid-template-columns: 1fr; }
    .sig-card { grid-template-columns: 1fr; }
    .sig-media {
        height: 380px;
        min-height: 320px;
    }
    .sig-media img {
        object-position: center 55%;
    }
    .club-card-thumb { height: 320px; aspect-ratio: 4 / 3; }
    .lead-wrap { grid-template-columns: 1fr; gap: 40px; }
    .lead-img-sub { width: 45%; }
    .club-cta-inner { flex-direction: column; text-align: center; }
    .club-cta-text p { margin: 0 auto; }
    .club-cta-buttons { justify-content: center; }

    /* CCA */
    .cca-hero {
        height: auto;
        max-height: none;
        padding: 55px 0;
    }
    .cca-hero-inner {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .cca-hero-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .cca-visual { max-width: 380px; margin-top: 10px; }
    .cca-welcome { padding: 70px 0 60px; }
    .cca-welcome-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .cca-welcome-visual { max-width: 560px; margin: 0 auto; }
    .cca-welcome-img { height: 400px; }
    .cca-welcome-badge { bottom: -18px; left: -18px; }
    .cca-section { padding: 70px 0 80px; }
    .cca-activities-grid { grid-template-columns: repeat(2, 1fr); }

    /* Contact */
    .ct-hero-wrap { max-width: 460px; height: 460px; margin-top: 20px; }
    .ct-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    /* Classes */
    .hero-image { height: 240px; }
    .hero-range-badge {
        top: -12px;
        right: -6px;
        padding: 10px 16px 10px 12px;
        gap: 10px;
    }
    .hero-range-badge-icon { width: 36px; height: 36px; font-size: 16px; }
    .hero-range-badge-text span { font-size: 13px; }
    .hero-range-badge-text small { font-size: 8.5px; letter-spacing: 1px; }

    .hero-stages-card {
        bottom: -18px;
        left: -8px;
        padding: 12px 14px;
        gap: 12px;
    }
    .hero-stage-pill { padding-right: 12px; gap: 3px; }
    .hero-stage-pill i { font-size: 13px; }
    .hero-stage-pill span { font-size: 9.5px; }
    .hero-stage-pill small { font-size: 7.5px; }

    .stage-title { font-size: 30px; }
    .stage-sub { font-size: 15px; }

    .class-timeline { padding: 55px 0 65px; }
    .timeline-flow { grid-template-columns: 1fr; gap: 16px; }
    .timeline-step { padding: 24px 20px 20px; }

    .curriculum-unified-section { padding: 55px 0 65px; }
    .curr-head h2 { font-size: 26px; }
    .curr-head p { font-size: 14.5px; }

    .curr-side-col {
        padding: 18px 15px 24px;
        border-radius: 18px;
    }
    .curr-stage-hero-banner {
        grid-template-columns: 1fr 0.9fr;
        min-height: 160px;
        margin-bottom: 18px;
    }
    .curr-stage-hero-text {
        padding: 16px 12px 16px 16px;
    }
    .curr-stage-hero-title {
        font-size: 20px;
    }
    .curr-stage-hero-p {
        font-size: 12px;
        line-height: 1.45;
        margin-top: 6px;
    }
    .curr-stage-hero-media {
        min-height: 160px;
    }
    .curr-stage-hero-img {
        min-height: 160px;
    }
    .curr-row-item {
        padding: 12px 14px;
        gap: 12px;
    }
    .curr-row-item:hover {
        transform: translateY(-2px);
    }
    .curr-row-item-num {
        display: none;
    }
    .curr-row-item-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 16px;
        border-radius: 9px;
    }
    .curr-row-item-title {
        font-size: 15px;
    }
    .curr-row-item-desc {
        font-size: 12.5px;
    }

    .curr-motivation-card {
        padding: 26px 20px;
        margin-top: 36px;
    }
    .curr-motivation-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .curr-motivation-quote {
        font-size: 16.5px;
    }
    .curr-motivation-author-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .curr-motivation-divider {
        display: none;
    }

    .admissions-cta { padding: 55px 0; }
    .admissions-cta h2 { font-size: 26px; }
    .admissions-cta p { font-size: 14.5px; }
    .cta-buttons { flex-direction: column; align-items: center; }
    .cta-btn { width: 100%; max-width: 320px; justify-content: space-between; }
    .cta-btn.cta-outline { justify-content: center; }

    /* Clubs */
    .cl-hero-wrap { max-width: 380px; height: 420px; }
    .cl-card { width: 290px; }
    .cl-card-head { padding: 18px 20px; }
    .cl-card-head-text strong { font-size: 14px; }
    .cl-card-icon { width: 40px; height: 40px; font-size: 18px; }
    .cl-grid { padding: 6px; }
    .cl-tile { padding: 12px 10px; gap: 10px; }
    .cl-tile-icon { width: 32px; height: 32px; font-size: 14px; }
    .cl-tile-text strong { font-size: 12.5px; }
    .cl-tile-text small { font-size: 8.5px; }
    .cl-ring-blue { width: 110px; height: 110px; border-width: 20px; }
    .cl-float { padding: 9px 13px; gap: 8px; }
    .cl-float-icon { width: 30px; height: 30px; font-size: 13px; }
    .cl-float-text strong { font-size: 11.5px; }
    .cl-float-text small { font-size: 7.5px; letter-spacing: 1px; }

    .club-section { padding: 60px 0; }
    .pillars-grid { grid-template-columns: 1fr; }
    .clubs-grid { grid-template-columns: 1fr; }
    .club-card-thumb { height: 320px; min-height: 280px; aspect-ratio: 4 / 3; }
    .sig-card { grid-template-columns: 1fr; }
    .sig-media {
        height: 340px;
        min-height: 300px;
    }
    .sig-media img {
        object-position: center 55%;
    }
    .act-gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .lead-points-grid { grid-template-columns: 1fr; }
    .club-cta-card { padding: 40px 25px; }

    /* CCA */
    .cca-hero { padding: 45px 0 60px; }
    .cca-hero .container { width: 95%; }
    .cca-hero-title { font-size: 32px; }
    .cca-hero-desc { font-size: 14.5px; }
    .cca-crumb { font-size: 10.5px; letter-spacing: 1.5px; }
    .cca-hero-facts { gap: 12px 22px; }
    .cca-hero-facts span { font-size: 12px; }
    .cca-visual { max-width: 340px; }
    .cca-float-1 { left: -8px; top: -10px; }
    .cca-float-2 { right: -8px; bottom: -14px; }
    .cca-float-3 { display: none; }
    .cca-welcome .container { width: 95%; }
    .cca-welcome { padding: 60px 0 50px; }
    .cca-welcome-text h2 { font-size: 28px; }
    .cca-welcome-text p { font-size: 14.5px; }
    .cca-welcome-img { height: 340px; }
    .cca-welcome-badge { padding: 12px 16px 12px 14px; bottom: -14px; left: -10px; gap: 11px; border-radius: 13px; }
    .cca-welcome-badge-icon { width: 38px; height: 38px; font-size: 17px; border-radius: 10px; }
    .cca-welcome-badge-text strong { font-size: 14px; }
    .cca-welcome-badge-text small { font-size: 8.5px; }
    .cca-section .container { width: 95%; }
    .cca-section { padding: 60px 0 70px; }
    .cca-sec-head { margin-bottom: 40px; }
    .cca-sec-head h2 { font-size: 26px; }
    .cca-sec-head p { font-size: 14.5px; }
    .cca-activities-grid { grid-template-columns: 1fr; gap: 20px; }
    .cca-card-img-wrap { height: 210px; }
    .cca-card-body { padding: 24px 20px 24px; }
    .cca-act-title { font-size: 20px; }

    /* Contact */
    .ct-hero-wrap { max-width: 380px; height: 400px; }
    .ct-card { width: 270px; }
    .ct-card-head { padding: 18px 20px; }
    .ct-card-head-text strong { font-size: 14px; }
    .ct-card-icon { width: 40px; height: 40px; font-size: 18px; }
    .ct-card-body { padding: 10px 8px 12px; }
    .ct-line { padding: 10px 12px; gap: 10px; }
    .ct-line-icon { width: 30px; height: 30px; font-size: 13px; }
    .ct-line-text strong { font-size: 12px; }
    .ct-line-text small { font-size: 10.5px; }
    .ct-ring-blue { width: 110px; height: 110px; border-width: 20px; }
    .ct-float { padding: 9px 13px; gap: 8px; }
    .ct-float-icon { width: 30px; height: 30px; font-size: 13px; }
    .ct-float-text strong { font-size: 11.5px; }
    .ct-float-text small { font-size: 7.5px; letter-spacing: 1px; }

    .ct-section { padding: 55px 0 70px; }
    .ct-head { margin-bottom: 36px; }
    .ct-sub { font-size: 14px; }
    .ct-form-card { padding: 26px 22px 24px; border-radius: 18px; }
    .ct-form-card h3 { font-size: 20px; }
    .ct-form-row { grid-template-columns: 1fr; }
    .ct-submit { width: 100%; justify-content: center; }

    .ct-map { padding: 0 0 70px; }
    .ct-map-frame { width: 100%; aspect-ratio: 16 / 9; min-height: 260px; border-radius: 16px; }
}

@media (max-width: 575.98px) {
    /* Classes */
    .curr-stage-hero-banner {
        grid-template-columns: 1fr;
    }
    .curr-stage-hero-media {
        height: 145px;
        min-height: 145px;
    }
    .curr-stage-hero-img {
        border-radius: 0 0 16px 16px;
        mask-image: none;
        -webkit-mask-image: none;
    }
    .curr-stage-hero-text {
        padding: 18px 16px 14px;
    }
    .hero-image { height: 190px; }
    .hero-image-frame { padding: 10px; border-radius: 18px; }
    .hero-image-frame::before,
    .hero-image-frame::after { width: 60px; height: 60px; border-width: 4px; }
    .hero-image-panel::before { display: none; }

    .hero-range-badge {
        top: -8px;
        right: -4px;
        padding: 8px 14px 8px 10px;
        gap: 8px;
        border-radius: 40px;
    }
    .hero-range-badge-icon { width: 32px; height: 32px; font-size: 14px; }
    .hero-range-badge-text span { font-size: 12px; }
    .hero-range-badge-text small { font-size: 8px; }

    .hero-stages-card {
        bottom: -14px;
        left: 0;
        padding: 10px 12px;
        gap: 10px;
        border-radius: 12px;
    }
    .hero-stage-pill { padding-right: 10px; }
    .hero-stage-pill i { font-size: 12px; }
    .hero-stage-pill span { font-size: 9px; }
    .hero-stage-pill small { font-size: 7px; }

    .stage-title { font-size: 26px; }
    .stage-label { font-size: 11px; letter-spacing: 2px; }
    .stage-label::before,
    .stage-label::after { width: 22px; }

    .timeline-step h3 { font-size: 17px; }
    .timeline-step p { font-size: 13px; }

    .admissions-cta h2 { font-size: 22px; }
    .admissions-cta p { font-size: 13.5px; }
    .cta-btn { font-size: 13px; padding: 7px 7px 7px 22px; }
    .cta-btn i { width: 38px; height: 38px; font-size: 15px; }

    /* Clubs */
    .club-card-thumb {
        height: 290px;
        min-height: 260px;
        aspect-ratio: 4 / 3;
        width: 100%;
    }
    .club-card-thumb img {
        object-position: center 25%;
    }
    .club-badge-tag {
        top: 12px;
        left: 12px;
        padding: 4px 10px;
        font-size: 9.5px;
    }
    .sig-card {
        grid-template-columns: 1fr;
        border-radius: 18px;
    }
    .sig-content { padding: 24px 20px; }
    .sig-media {
        height: 340px;
        min-height: 280px;
        aspect-ratio: 4 / 3;
        width: 100%;
    }
    .sig-media img {
        object-position: center 55%;
    }
    .sig-media-badge {
        bottom: 12px;
        left: 12px;
        padding: 4px 10px;
        font-size: 10px;
    }
    .act-gallery-grid { grid-template-columns: 1fr; }
    .join-steps-grid { grid-template-columns: 1fr; }
    .lead-card-box { padding: 25px 20px; }
    .lead-img-main { width: 100%; }
    .lead-img-sub { position: static; width: 100%; margin-top: 14px; border-width: 3px; }

    .cl-hero-wrap { max-width: 300px; height: 380px; }
    .cl-card { width: 270px; }
    .cl-card-head { padding: 16px 18px; }
    .cl-card-head-text strong { font-size: 13px; }
    .cl-card-head-text span { font-size: 8.5px; letter-spacing: 1.6px; }
    .cl-card-icon { width: 36px; height: 36px; font-size: 16px; border-radius: 10px; }
    .cl-tile { padding: 10px 8px; gap: 9px; }
    .cl-tile-icon { width: 28px; height: 28px; font-size: 12px; border-radius: 8px; }
    .cl-tile-text strong { font-size: 11.5px; }
    .cl-tile-text small { font-size: 8px; }
    .cl-float-1 { top: 5px; left: -5px; }
    .cl-float-2 { bottom: 10px; right: -5px; }
    .cl-float { padding: 8px 11px; }
    .cl-float-icon { width: 26px; height: 26px; font-size: 12px; border-radius: 8px; }
    .cl-float-text strong { font-size: 11px; }
    .cl-ring-blue { width: 90px; height: 90px; border-width: 16px; top: 0; right: 5px; }
    .cl-hero-wrap::before { width: 100px; height: 100px; }
    .cl-hero-wrap::after { width: 100px; height: 100px; border-width: 18px; }

    /* CCA */
    .cca-hero { padding: 40px 0 55px; }
    .cca-hero-title { font-size: 28px; }
    .cca-hero-desc { font-size: 13.5px; }
    .cca-hero-facts {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .cca-visual { max-width: 300px; }
    .cca-float { padding: 8px 11px; gap: 8px; border-radius: 12px; }
    .cca-float-icon { width: 28px; height: 28px; font-size: 13px; border-radius: 8px; }
    .cca-float-text small { font-size: 7.5px; letter-spacing: 1px; margin-bottom: 2px; }
    .cca-float-text strong { font-size: 11.5px; }
    .cca-card-head { padding: 16px 18px 14px; gap: 11px; }
    .cca-card-head-icon { width: 38px; height: 38px; font-size: 17px; border-radius: 10px; }
    .cca-card-head-text strong { font-size: 15px; }
    .cca-card-head-text span { font-size: 8.5px; letter-spacing: 1.6px; }
    .cca-tile { padding: 11px 10px; gap: 9px; }
    .cca-tile-icon { width: 30px; height: 30px; font-size: 13px; border-radius: 9px; }
    .cca-tile-text strong { font-size: 12.5px; }
    .cca-tile-text small { font-size: 8.5px; }
    .cca-welcome-text h2 { font-size: 24px; }
    .cca-welcome-visual { padding: 10px; }
    .cca-welcome-visual::before,
    .cca-welcome-visual::after { width: 60px; height: 60px; border-width: 4px; }
    .cca-welcome-img { height: 260px; border-width: 5px; }
    .cca-welcome-badge { left: -4px; bottom: -12px; padding: 10px 14px 10px 12px; gap: 9px; }
    .cca-welcome-badge-icon { width: 34px; height: 34px; font-size: 15px; border-radius: 9px; }
    .cca-welcome-badge-text strong { font-size: 13px; }
    .cca-welcome-tags span { font-size: 11px; padding: 7px 12px; }
    .cca-section h2 { font-size: 22px; }
    .cca-sec-label { font-size: 10.5px; letter-spacing: 2px; }
    .cca-sec-label::before,
    .cca-sec-label::after { width: 22px; }
    .cca-card-img-wrap { height: 190px; }
    .cca-card-tag-badge { top: 10px; left: 10px; font-size: 9px; padding: 4px 10px; }
    .cca-card-icon-badge { width: 38px; height: 38px; font-size: 16px; bottom: 10px; right: 10px; }
    .cca-card-body { padding: 22px 18px 22px; }
    .cca-act-title { font-size: 18px; }
    .cca-act-desc { font-size: 13px; }

    /* Contact */
    .ct-hero-wrap { max-width: 300px; height: 360px; }
    .ct-card { width: 250px; }
    .ct-card-head { padding: 16px 18px; }
    .ct-card-head-text strong { font-size: 13px; }
    .ct-card-head-text span { font-size: 8.5px; letter-spacing: 1.6px; }
    .ct-card-icon { width: 36px; height: 36px; font-size: 16px; border-radius: 10px; }
    .ct-line { padding: 8px 10px; gap: 9px; }
    .ct-line-icon { width: 28px; height: 28px; font-size: 12px; border-radius: 8px; }
    .ct-line-text strong { font-size: 11.5px; }
    .ct-line-text small { font-size: 10px; }
    .ct-float-1 { top: 5px; left: -5px; }
    .ct-float-2 { bottom: 10px; right: -5px; }
    .ct-float { padding: 8px 11px; }
    .ct-float-icon { width: 26px; height: 26px; font-size: 12px; border-radius: 8px; }
    .ct-float-text strong { font-size: 11px; }
    .ct-ring-blue { width: 90px; height: 90px; border-width: 16px; top: 0; right: 5px; }
    .ct-hero-wrap::before { width: 100px; height: 100px; }
    .ct-hero-wrap::after { width: 100px; height: 100px; border-width: 18px; }
    .ct-title { font-size: 24px; }
    .ct-sub { font-size: 13.5px; }
    .ct-form-card { padding: 22px 18px 20px; }
    .ct-form-card h3 { font-size: 18px; }
    .ct-info-card { padding: 18px 20px; }
    .ct-info-icon { width: 44px; height: 44px; font-size: 19px; border-radius: 12px; }
    .ct-info-body h4 { font-size: 14px; }
}

/* =========================================================
   CURRICULUM — PAGE STYLES
========================================================= */
.page-banner {
    position: relative;
    min-height: 400px;
    max-height: 75vh;
    padding: 60px 0;
    background: var(--school-light-blue);
    overflow: hidden;
    display: flex;
    align-items: center;
}
.page-banner::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    top: -280px;
    right: -180px;
    border: 70px solid rgba(8, 47, 135, 0.04);
    border-radius: 50%;
    pointer-events: none;
}
.page-banner::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    bottom: -170px;
    left: -120px;
    background: rgba(245, 130, 32, 0.06);
    border-radius: 50%;
    pointer-events: none;
}
.page-banner .container {
    position: relative;
    z-index: 2;
}
.page-banner-crumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--school-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.page-banner-crumb a {
    color: var(--school-muted);
    transition: color 0.25s ease;
}
.page-banner-crumb a:hover { color: var(--school-orange); }
.page-banner-crumb i {
    color: var(--school-orange);
    font-size: 10px;
}
.page-banner-crumb .current { color: var(--school-blue); }

.page-banner-inner {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 55px;
    align-items: center;
}
.page-banner-text h1 {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(32px, 3.8vw, 48px);
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 18px;
}
.page-banner-text h1 span {
    color: var(--school-orange);
    font-style: italic;
    font-weight: 600;
}
.page-banner-text p {
    color: var(--school-muted);
    font-size: 15.5px;
    line-height: 1.75;
    margin: 0 0 22px;
    max-width: 540px;
}
.page-banner-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(8, 47, 135, 0.10);
}
.page-banner-facts span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--school-blue);
    font-size: 12.5px;
    font-weight: 600;
}
.page-banner-facts i {
    color: var(--school-orange);
    font-size: 15px;
}

.page-banner-visual {
    display: flex;
    justify-content: flex-end;
}
.banner-quote-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    padding: 6px 0 6px 34px;
    border-left: 3px solid var(--school-orange);
}
.banner-quote-mark {
    color: var(--school-orange);
    font-size: 26px;
    line-height: 1;
    opacity: 0.7;
    margin-bottom: 10px;
}
.banner-quote-text {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-style: italic;
    font-size: 21px;
    line-height: 1.45;
    font-weight: 600;
    margin: 0 0 22px;
}
.banner-quote-text em {
    color: var(--school-orange);
    font-style: italic;
}
.banner-quote-note {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--school-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.banner-quote-note::before {
    content: "";
    width: 30px;
    height: 2px;
    background: var(--school-orange);
    border-radius: 2px;
}
.banner-quote-icons {
    display: flex;
    gap: 18px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px dashed rgba(8, 47, 135, 0.15);
}
.banner-quote-icons span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--school-blue);
    font-size: 12px;
    font-weight: 600;
}
.banner-quote-icons i {
    color: var(--school-orange);
    font-size: 15px;
}

.curriculum-overview {
    position: relative;
    padding: 90px 0 50px;
    background: #ffffff;
    overflow: hidden;
}
.curriculum-overview::before {
    content: "";
    position: absolute;
    width: 680px;
    height: 680px;
    top: -340px;
    right: -260px;
    background: var(--school-light-blue);
    border-radius: 50%;
    opacity: 0.55;
    pointer-events: none;
}
.curriculum-overview::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    bottom: -200px;
    left: -160px;
    border: 2px solid var(--school-border);
    border-radius: 50%;
    opacity: 0.7;
    pointer-events: none;
}
.curriculum-overview .container {
    position: relative;
    z-index: 2;
}
.curriculum-heading {
    text-align: left;
    max-width: 100%;
    margin: 0 0 40px;
}
.curriculum-label {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    color: var(--school-orange);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.curriculum-label::before {
    content: "";
    width: 32px;
    height: 2px;
    background: var(--school-orange);
}
.curriculum-title {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(32px, 3.6vw, 46px);
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 0;
}
.curriculum-title .orange { color: var(--school-orange); }

.curriculum-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 40px;
    align-items: center;
}
.curriculum-text p {
    color: var(--school-muted);
    font-size: 15.5px;
    line-height: 1.9;
    margin-bottom: 20px;
}
.curriculum-text p:last-child { margin-bottom: 0; }
.curriculum-text strong { color: var(--school-blue); font-weight: 600; }

.curriculum-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px dashed var(--school-border);
}
.curriculum-tags span {
    background: var(--school-light-blue);
    color: var(--school-blue);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 40px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
    transition: 0.25s ease;
}
.curriculum-tags span:hover {
    background: #ffffff;
    border-color: var(--school-orange);
    transform: translateY(-2px);
}
.curriculum-tags i { color: var(--school-orange); font-size: 13px; }

.curriculum-visual { position: relative; }
.curriculum-image-wrap {
    position: relative;
    padding: 12px;
}
.curriculum-image-accent {
    position: absolute;
    width: 80px;
    height: 80px;
    top: 0;
    left: 0;
    border-top: 4px solid var(--school-orange);
    border-left: 4px solid var(--school-orange);
    border-radius: 16px 0 0 0;
    z-index: 1;
}
.curriculum-image-wrap::after {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    right: 0;
    bottom: 0;
    border-right: 4px solid var(--school-blue);
    border-bottom: 4px solid var(--school-blue);
    border-radius: 0 0 16px 0;
    z-index: 1;
}
.curriculum-image {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 18px;
    border: 7px solid #ffffff;
    box-shadow: 0 20px 50px rgba(8, 47, 135, .15);
}

.curriculum-accreditation {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 22px;
}
.accreditation-box {
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
    transition: 0.25s ease;
}
.accreditation-box:hover {
    border-color: var(--school-orange);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(8, 47, 135, 0.07);
}
.accreditation-box i {
    color: var(--school-orange);
    font-size: 20px;
    display: block;
    margin-bottom: 8px;
}
.accreditation-box strong {
    display: block;
    color: var(--school-blue);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 3px;
}
.accreditation-box span {
    display: block;
    color: var(--school-muted);
    font-size: 10.5px;
    line-height: 1.4;
}

.subjects-section {
    position: relative;
    padding: 50px 0 100px;
    background: #ffffff;
    overflow: hidden;
}
.subjects-section::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    bottom: -260px;
    right: -200px;
    background: var(--school-light-blue);
    border-radius: 50%;
    opacity: 0.4;
    pointer-events: none;
}
.subjects-section .container {
    position: relative;
    z-index: 2;
}
.subjects-block {
    padding-top: 50px;
    border-top: 1px solid var(--school-border);
}
.subjects-heading {
    text-align: left;
    max-width: 100%;
    margin: 0 0 40px;
}
.subjects-title {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(32px, 3.6vw, 46px);
    line-height: 1.15;
    font-weight: 700;
}
.subjects-title span {
    color: var(--school-orange);
    font-style: italic;
}

.curriculum-levels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
}

.level-card {
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 20px;
    overflow: hidden;
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.level-card:hover {
    border-color: var(--school-orange);
    transform: translateY(-5px);
    box-shadow: 0 22px 50px rgba(8, 47, 135, 0.10);
}

.level-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 28px;
    background: var(--school-light-blue);
    border-bottom: 3px solid var(--school-orange);
}
.level-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #ffffff;
    color: var(--school-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    transition: 0.3s ease;
}
.level-card:hover .level-icon {
    background: var(--school-orange);
    color: #ffffff;
}
.level-header-text {
    display: flex;
    flex-direction: column;
}
.level-tag {
    display: inline-block;
    align-self: flex-start;
    background: var(--school-orange);
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 4px 12px;
    border-radius: 30px;
    text-transform: uppercase;
    margin-bottom: 7px;
}
.level-card:nth-child(2) .level-tag {
    background: var(--school-blue);
}
.level-header h4 {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.level-subjects {
    padding: 22px 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-grow: 1;
}
.level-subject-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px dashed var(--school-border);
    transition: 0.25s ease;
}
.level-subject-row:last-child {
    border-bottom: 0;
}
.level-subject-row:hover {
    padding-left: 6px;
}
.level-subject-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--school-light-blue);
    color: var(--school-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: 0.3s ease;
    margin-top: 1px;
}
.level-subject-row:hover .level-subject-icon {
    background: var(--school-orange);
    color: #ffffff;
}
.level-subject-name {
    color: var(--school-blue);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}
.level-subject-row:hover .level-subject-name {
    color: var(--school-orange);
}
.level-subject-name small {
    display: block;
    color: var(--school-muted);
    font-size: 11px;
    font-weight: 400;
    margin-top: 2px;
}

.panchang-curriculum {
    position: relative;
    padding: 95px 0 100px;
    background: var(--school-light-blue);
    overflow: hidden;
}
.panchang-curriculum::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    bottom: -280px;
    right: -200px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    pointer-events: none;
}
.panchang-curriculum::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    top: -160px;
    left: -140px;
    border: 2px solid var(--school-border);
    border-radius: 50%;
    opacity: 0.7;
    pointer-events: none;
}
.panchang-curriculum .container {
    position: relative;
    z-index: 2;
}
.panchang-curriculum-heading {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 55px;
}
.panchang-curriculum-title {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 16px;
}
.panchang-curriculum-title .orange { color: var(--school-orange); }
.panchang-curriculum-sub {
    color: var(--school-muted);
    font-size: 16px;
    line-height: 1.75;
    max-width: 620px;
    margin: 0 auto;
}

.panchang-curriculum-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}
.panchang-curriculum-item {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px 18px 24px;
    text-align: center;
    border: 1px solid transparent;
    transition: 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.panchang-curriculum-item:hover {
    border-color: var(--school-orange);
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(8, 47, 135, 0.09);
}
.panchang-curriculum-icon {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--school-light-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--school-blue);
    font-size: 26px;
    margin-bottom: 16px;
    transition: 0.3s ease;
}
.panchang-curriculum-item:hover .panchang-curriculum-icon {
    background: var(--school-orange);
    color: #ffffff;
}
.panchang-curriculum-item h3 {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 8px;
}
.panchang-curriculum-item p {
    color: var(--school-muted);
    font-size: 12.5px;
    line-height: 1.6;
    margin: 0;
}

.methodology-section {
    position: relative;
    padding: 95px 0 100px;
    background: #ffffff;
    overflow: hidden;
}
.methodology-section::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    top: -300px;
    left: -240px;
    background: var(--school-light-blue);
    border-radius: 50%;
    opacity: 0.4;
    pointer-events: none;
}
.methodology-section .container {
    position: relative;
    z-index: 2;
}
.methodology-heading {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 55px;
}
.methodology-title {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 16px;
}
.methodology-title .orange { color: var(--school-orange); }
.methodology-sub {
    color: var(--school-muted);
    font-size: 16px;
    line-height: 1.75;
    max-width: 620px;
    margin: 0 auto;
}

.methodology-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}
.methodology-card {
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 18px;
    padding: 34px 30px 32px;
    transition: 0.3s ease;
    display: flex;
    gap: 22px;
    align-items: flex-start;
}
.methodology-card:hover {
    border-color: var(--school-orange);
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(8, 47, 135, 0.08);
}
.methodology-card-icon {
    flex-shrink: 0;
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: var(--school-light-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--school-blue);
    font-size: 25px;
    transition: 0.3s ease;
}
.methodology-card:hover .methodology-card-icon {
    background: var(--school-orange);
    color: #ffffff;
}
.methodology-card h3 {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 9px;
}
.methodology-card p {
    color: var(--school-muted);
    font-size: 14px;
    line-height: 1.75;
    margin: 0;
}

.classes-section {
    position: relative;
    padding: 95px 0 100px;
    background: var(--school-light-blue);
    overflow: hidden;
}
.classes-section::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    bottom: -280px;
    left: -200px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    pointer-events: none;
}
.classes-section .container {
    position: relative;
    z-index: 2;
}
.classes-heading {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 55px;
}
.classes-title {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 16px;
}
.classes-title .orange { color: var(--school-orange); }
.classes-sub {
    color: var(--school-muted);
    font-size: 16px;
    line-height: 1.75;
    max-width: 620px;
    margin: 0 auto;
}

.classes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
    align-items: stretch;
}
.classes-card {
    background: #ffffff;
    border-radius: 22px;
    padding: 40px 36px 36px;
    border: 1px solid transparent;
    box-shadow: 0 15px 40px rgba(8, 47, 135, 0.06);
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
}
.classes-card:hover {
    border-color: var(--school-orange);
    transform: translateY(-5px);
    box-shadow: 0 22px 50px rgba(8, 47, 135, 0.10);
}
.classes-card-icon {
    width: 58px;
    height: 58px;
    background: var(--school-light-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--school-blue);
    font-size: 26px;
    margin-bottom: 22px;
}
.classes-card h3 {
    color: var(--school-blue);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 18px;
}
.classes-card p {
    color: var(--school-muted);
    font-size: 15px;
    line-height: 1.85;
    margin-bottom: 18px;
}
.classes-card p:last-of-type { margin-bottom: 0; }
.classes-card strong { color: var(--school-blue); font-weight: 600; }

.classes-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 10px;
}
.classes-list-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px dashed var(--school-border);
    transition: 0.25s ease;
}
.classes-list-item:first-child { padding-top: 0; }
.classes-list-item:last-child { border-bottom: 0; padding-bottom: 0; }
.classes-list-item:hover { padding-left: 6px; }
.classes-list-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--school-light-blue);
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.25s ease;
    margin-top: 1px;
}
.classes-list-item:hover .classes-list-num {
    background: var(--school-orange);
    color: #ffffff;
}
.classes-list-body strong {
    display: block;
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 3px;
}
.classes-list-body span {
    display: block;
    color: var(--school-muted);
    font-size: 13px;
    line-height: 1.55;
}

.cocurricular-section {
    position: relative;
    padding: 95px 0 100px;
    background: #ffffff;
    overflow: hidden;
}
.cocurricular-section::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    top: -280px;
    right: -200px;
    background: var(--school-light-blue);
    border-radius: 50%;
    opacity: 0.5;
    pointer-events: none;
}
.cocurricular-section .container {
    position: relative;
    z-index: 2;
}
.cocurricular-heading {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 55px;
}
.cocurricular-title {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 16px;
}
.cocurricular-title .orange { color: var(--school-orange); }
.cocurricular-sub {
    color: var(--school-muted);
    font-size: 16px;
    line-height: 1.75;
    max-width: 620px;
    margin: 0 auto;
}

.cocurricular-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.cocurricular-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 22px;
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 14px;
    transition: 0.3s ease;
}
.cocurricular-item:hover {
    border-color: var(--school-orange);
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(8, 47, 135, 0.07);
}
.cocurricular-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--school-light-blue);
    color: var(--school-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: 0.3s ease;
}
.cocurricular-item:hover .cocurricular-icon {
    background: var(--school-orange);
    color: #ffffff;
}
.cocurricular-body strong {
    display: block;
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
}
.cocurricular-body span {
    display: block;
    color: var(--school-muted);
    font-size: 13px;
    line-height: 1.6;
}

.curriculum-closing {
    position: relative;
    padding: 80px 0 90px;
    background: var(--school-blue);
    overflow: hidden;
    text-align: center;
}
.curriculum-closing::before {
    content: "\201C";
    position: absolute;
    top: -30px;
    left: 40px;
    font-family: "Playfair Display", serif;
    font-size: 160px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}
.curriculum-closing::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    bottom: -240px;
    right: -160px;
    border: 60px solid rgba(255, 255, 255, 0.03);
    border-radius: 50%;
    pointer-events: none;
}
.curriculum-closing .container {
    position: relative;
    z-index: 2;
}
.curriculum-closing p {
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-style: italic;
    font-size: clamp(20px, 2.4vw, 28px);
    line-height: 1.5;
    font-weight: 500;
    max-width: 820px;
    margin: 0 auto 28px;
}
.curriculum-closing .closing-note {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.65);
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}
.curriculum-closing .closing-note::before,
.curriculum-closing .closing-note::after {
    content: "";
    width: 32px;
    height: 2px;
    background: var(--school-orange);
}

/* =========================================================
   EXAMINATION & EVALUATION — PAGE STYLES
========================================================= */
.exam-hero {
    position: relative;
    background: var(--school-light-blue);
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 500px;
    max-height: 70vh;
    height: 70vh;
    padding: 40px 0;
}
.exam-hero::before {
    content: "";
    position: absolute;
    width: 620px; height: 620px;
    top: -320px; right: -240px;
    border: 80px solid rgba(8, 47, 135, 0.045);
    border-radius: 50%;
    pointer-events: none;
}
.exam-hero::after {
    content: "";
    position: absolute;
    width: 340px; height: 340px;
    bottom: -180px; left: -140px;
    background: rgba(245, 130, 32, 0.07);
    border-radius: 50%;
    pointer-events: none;
}
.exam-hero .container {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1600px;
}
.exam-hero-inner {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 60px;
    align-items: center;
}
.exam-crumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.exam-crumb a {
    color: var(--school-muted);
    text-decoration: none;
    transition: color 0.25s ease;
}
.exam-crumb a:hover { color: var(--school-orange); }
.exam-crumb i { color: var(--school-orange); font-size: 10px; }
.exam-crumb .current { color: var(--school-blue); }

.exam-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    color: var(--school-orange);
    font-family: "Inter", sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.exam-eyebrow::before {
    content: "";
    width: 26px; height: 2px;
    background: var(--school-orange);
}
.exam-hero-title {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(32px, 3.8vw, 52px);
    line-height: 1.05;
    font-weight: 700;
    margin: 0 0 18px;
    letter-spacing: -0.5px;
}
.exam-hero-title em {
    color: var(--school-orange);
    font-style: italic;
    font-weight: 600;
}
.exam-hero-desc {
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.7;
    max-width: 540px;
    margin: 0 0 24px;
}
.exam-hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
    padding-top: 20px;
    border-top: 1px solid rgba(8, 47, 135, 0.10);
}
.exam-hero-facts span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--school-blue);
    font-family: "Inter", sans-serif;
    font-size: 12.5px;
    font-weight: 600;
}
.exam-hero-facts i {
    color: var(--school-orange);
    font-size: 15px;
}

.report-card {
    position: relative;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 25px 55px rgba(8, 47, 135, 0.18), 0 8px 18px rgba(8, 47, 135, 0.08);
    transform: rotate(-3deg);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.report-card:hover { transform: rotate(0deg) translateY(-6px); }
.report-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: var(--school-orange);
}
.report-head {
    background: linear-gradient(135deg, var(--school-blue) 0%, var(--school-dark-blue) 100%);
    padding: 22px 24px 20px;
    position: relative;
    overflow: hidden;
}
.report-head::after {
    content: "";
    position: absolute;
    right: -30px; top: -30px;
    width: 100px; height: 100px;
    border: 22px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    pointer-events: none;
}
.report-head-bar {
    display: block;
    height: 9px; width: 62%;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.92);
    margin-bottom: 8px;
}
.report-head-bar.short {
    height: 6px; width: 38%;
    background: var(--school-orange);
    margin-bottom: 0;
}
.report-head-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    position: relative;
    z-index: 1;
}
.report-head-meta span {
    display: block;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.28);
}
.report-head-meta span:nth-child(1) { width: 40px; }
.report-head-meta span:nth-child(2) { width: 60px; }
.report-rows { padding: 14px 24px 18px; }
.report-row {
    display: grid;
    grid-template-columns: 1fr 60px 22px;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px dashed var(--school-border);
}
.report-row:last-child { border-bottom: 0; }
.report-subject {
    display: block;
    height: 7px;
    border-radius: 4px;
    background: var(--school-light-blue);
}
.report-row:nth-child(1) .report-subject { width: 72%; }
.report-row:nth-child(2) .report-subject { width: 88%; }
.report-row:nth-child(3) .report-subject { width: 62%; }
.report-row:nth-child(4) .report-subject { width: 80%; }
.report-row:nth-child(5) .report-subject { width: 68%; }
.report-bar {
    position: relative;
    height: 6px;
    border-radius: 4px;
    background: var(--school-border);
    overflow: hidden;
}
.report-bar::before {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    background: linear-gradient(90deg, var(--school-orange), #ffb066);
    border-radius: 4px;
}
.report-row:nth-child(1) .report-bar::before { width: 92%; }
.report-row:nth-child(2) .report-bar::before { width: 86%; }
.report-row:nth-child(3) .report-bar::before { width: 78%; }
.report-row:nth-child(4) .report-bar::before { width: 88%; }
.report-row:nth-child(5) .report-bar::before { width: 82%; }
.report-grade {
    font-family: "Playfair Display", serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--school-blue);
    text-align: right;
}
.report-foot {
    padding: 14px 24px 20px;
    background: #f8fafd;
    border-top: 1px solid var(--school-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.report-seal { display: inline-flex; align-items: center; gap: 10px; }
.report-seal-icon {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--school-orange);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 4px 10px rgba(245, 130, 32, 0.30);
}
.report-seal-text span {
    display: block;
    height: 5px;
    border-radius: 3px;
    background: #c3cedd;
}
.report-seal-text span:nth-child(1) { width: 70px; margin-bottom: 5px; }
.report-seal-text span:nth-child(2) { width: 44px; background: var(--school-border); }
.report-verified {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--school-blue);
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.report-verified i { color: var(--school-orange); font-size: 12px; }

.ee-section { position: relative; overflow: hidden; }
.ee-section .container {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1600px;
}
.ee-sec-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 50px;
}
.ee-sec-head.left {
    text-align: left;
    max-width: 100%;
    margin: 0 0 30px;
}
.ee-sec-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    color: var(--school-orange);
    font-family: "Inter", sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.ee-sec-label::before,
.ee-sec-label::after {
    content: "";
    width: 30px; height: 2px;
    background: var(--school-orange);
}
.ee-sec-head.left .ee-sec-label::after { display: none; }
.ee-sec-head h2 {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(30px, 3.6vw, 44px);
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 14px;
}
.ee-sec-head h2 em {
    color: var(--school-orange);
    font-style: italic;
    font-weight: 600;
}
.ee-sec-head p {
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.75;
    max-width: 620px;
    margin: 0 auto;
}
.ee-sec-head.left p { margin: 0; max-width: 100%; }

.ee-approach {
    background: #ffffff;
    padding: 100px 0 90px;
}
.ee-approach::before {
    content: "";
    position: absolute;
    width: 620px; height: 620px;
    top: -320px; right: -260px;
    background: var(--school-light-blue);
    border-radius: 50%;
    opacity: 0.42;
    pointer-events: none;
}
.ee-approach-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}
.ee-approach-text .ee-sec-label {
    margin-bottom: 16px;
    color: var(--school-blue);
}
.ee-approach-text .ee-sec-label::before { background: var(--school-blue); }
.ee-approach-text h2 {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(30px, 3.6vw, 44px);
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 22px;
}
.ee-approach-text h2 em {
    color: var(--school-orange);
    font-style: italic;
    font-weight: 600;
}
.ee-approach-text p {
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 15.5px;
    line-height: 1.85;
    margin-bottom: 18px;
}
.ee-approach-text p:last-of-type { margin-bottom: 0; }
.ee-approach-text strong {
    color: var(--school-blue);
    font-weight: 600;
}

.ee-approach-visual {
    position: relative;
    padding: 14px;
}
.ee-approach-visual::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 90px; height: 90px;
    border-top: 5px solid var(--school-orange);
    border-left: 5px solid var(--school-orange);
    border-radius: 18px 0 0 0;
    z-index: 2;
}
.ee-approach-visual::after {
    content: "";
    position: absolute;
    right: 0; bottom: 0;
    width: 90px; height: 90px;
    border-right: 5px solid var(--school-blue);
    border-bottom: 5px solid var(--school-blue);
    border-radius: 0 0 18px 0;
    z-index: 2;
}
.ee-approach-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 14px;
    border: 6px solid #ffffff;
    box-shadow: 0 20px 45px rgba(8, 47, 135, 0.14);
    display: block;
}

.ee-components {
    background: var(--school-light-blue);
    padding: 95px 0 100px;
}
.ee-components::before {
    content: "";
    position: absolute;
    width: 520px; height: 520px;
    bottom: -280px; right: -200px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.55;
    pointer-events: none;
}

.ee-comp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.ee-comp-card {
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 18px;
    padding: 32px 26px 30px;
    text-align: center;
    transition: 0.35s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.ee-comp-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 4px;
    background: var(--school-blue);
    transition: background 0.3s ease;
}
.ee-comp-card:hover {
    border-color: var(--school-orange);
    transform: translateY(-6px);
    box-shadow: 0 22px 50px rgba(8, 47, 135, 0.10);
}
.ee-comp-card:hover::before {
    background: var(--school-orange);
}
.ee-comp-icon {
    width: 66px; height: 66px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: var(--school-light-blue);
    color: var(--school-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    transition: 0.35s ease;
}
.ee-comp-card:hover .ee-comp-icon {
    background: var(--school-orange);
    color: #ffffff;
    transform: rotate(-6deg);
}
.ee-comp-card h3 {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.3;
}
.ee-comp-card .ee-comp-line {
    width: 34px;
    height: 3px;
    margin: 0 auto 14px;
    background: var(--school-orange);
    border-radius: 3px;
    transition: width 0.35s ease;
}
.ee-comp-card:hover .ee-comp-line {
    width: 50px;
}
.ee-comp-card p {
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0;
    flex-grow: 1;
}

.ee-pattern {
    background: #ffffff;
    padding: 100px 0 110px;
}
.ee-pattern::before {
    content: "";
    position: absolute;
    width: 620px; height: 620px;
    top: -320px; left: -260px;
    background: var(--school-light-blue);
    border-radius: 50%;
    opacity: 0.42;
    pointer-events: none;
}

.ee-pattern-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 26px;
}

.ee-panel {
    border-radius: 20px;
    padding: 34px 30px 32px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.ee-panel::before {
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 140px; height: 140px;
    border: 24px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;
    pointer-events: none;
}

.ee-panel-blue {
    background: linear-gradient(160deg, #0a3a9c 0%, var(--school-blue) 100%);
    color: #ffffff;
}
.ee-panel-green {
    background: linear-gradient(160deg, #0d5c3a 0%, #198754 100%);
    color: #ffffff;
}
.ee-panel-orange {
    background: linear-gradient(160deg, #d96c12 0%, var(--school-orange) 100%);
    color: #ffffff;
}

.ee-panel-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.20);
    position: relative;
    z-index: 1;
}
.ee-panel-head-icon {
    flex-shrink: 0;
    width: 46px; height: 46px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.24);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ffffff;
}
.ee-panel-head h3 {
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 3px;
    line-height: 1.2;
}
.ee-panel-head small {
    display: block;
    color: rgba(255, 255, 255, 0.72);
    font-family: "Inter", sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.ee-panel-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    z-index: 1;
    flex-grow: 1;
}
.ee-panel-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    font-family: "Inter", sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.95);
    transition: 0.25s ease;
}
.ee-panel-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.ee-panel-list li:hover { padding-left: 6px; }
.ee-panel-list li i {
    flex-shrink: 0;
    color: var(--school-orange);
    font-size: 14px;
    margin-top: 2px;
    transition: transform 0.25s ease;
}
.ee-panel-green .ee-panel-list li i,
.ee-panel-orange .ee-panel-list li i {
    color: #ffffff;
    opacity: 0.85;
}
.ee-panel-list li:hover i {
    transform: translateX(2px);
}

.ee-commitment {
    position: relative;
    background: var(--school-dark-blue);
    padding: 0;
    overflow: hidden;
}
.ee-commitment::before {
    content: "";
    position: absolute;
    width: 500px; height: 500px;
    top: -280px; right: -200px;
    border: 60px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    pointer-events: none;
}
.ee-commitment::after {
    content: "";
    position: absolute;
    width: 380px; height: 380px;
    bottom: -200px; left: -140px;
    background: rgba(245, 130, 32, 0.10);
    border-radius: 50%;
    pointer-events: none;
}

.ee-commitment-inner {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 0;
    align-items: stretch;
    min-height: 380px;
    position: relative;
    z-index: 2;
}

.ee-commitment-visual {
    position: relative;
    overflow: hidden;
}
.ee-commitment-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 380px;
}
.ee-commitment-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(6, 31, 99, 0.15) 70%,
        rgba(6, 31, 99, 0.55) 100%);
    pointer-events: none;
}

.ee-commitment-content {
    padding: 70px 70px 70px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ee-commitment-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--school-orange);
    font-family: "Inter", sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.ee-commitment-label::before {
    content: "";
    width: 30px; height: 2px;
    background: var(--school-orange);
}

.ee-commitment-content h2 {
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 20px;
}
.ee-commitment-content h2 em {
    color: var(--school-orange);
    font-style: italic;
    font-weight: 600;
}
.ee-commitment-content p {
    color: rgba(255, 255, 255, 0.82);
    font-family: "Inter", sans-serif;
    font-size: 15.5px;
    line-height: 1.85;
    margin: 0 0 16px;
    max-width: 560px;
}
.ee-commitment-content p:last-of-type { margin-bottom: 0; }
.ee-commitment-content strong {
    color: #ffffff;
    font-weight: 600;
}

/* =========================================================
   FACILITIES — PAGE STYLES
========================================================= */
.fac-hero {
    position: relative;
    background: var(--school-light-blue);
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 500px;
    max-height: 70vh;
    height: 70vh;
    padding: 40px 0;
}
.fac-hero::before {
    content: "";
    position: absolute;
    width: 620px; height: 620px;
    top: -320px; right: -240px;
    border: 80px solid rgba(8, 47, 135, 0.045);
    border-radius: 50%;
    pointer-events: none;
}
.fac-hero::after {
    content: "";
    position: absolute;
    width: 340px; height: 340px;
    bottom: -180px; left: -140px;
    background: rgba(245, 130, 32, 0.07);
    border-radius: 50%;
    pointer-events: none;
}
.fac-hero .container {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1600px;
}

.fac-hero-inner {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 60px;
    align-items: center;
}

.fac-crumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.fac-crumb a {
    color: var(--school-muted);
    text-decoration: none;
    transition: color 0.25s ease;
}
.fac-crumb a:hover { color: var(--school-orange); }
.fac-crumb i { color: var(--school-orange); font-size: 10px; }
.fac-crumb .current { color: var(--school-blue); }

.fac-hero-title {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(32px, 3.8vw, 52px);
    line-height: 1.05;
    font-weight: 700;
    margin: 0 0 18px;
    letter-spacing: -0.5px;
}
.fac-hero-title em {
    color: var(--school-orange);
    font-style: italic;
    font-weight: 600;
}

.fac-hero-desc {
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.7;
    max-width: 540px;
    margin: 0 0 24px;
}

.fac-hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
    padding-top: 20px;
    border-top: 1px solid rgba(8, 47, 135, 0.10);
}
.fac-hero-facts span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--school-blue);
    font-family: "Inter", sans-serif;
    font-size: 12.5px;
    font-weight: 600;
}
.fac-hero-facts i {
    color: var(--school-orange);
    font-size: 15px;
}

.fac-visual {
    position: relative;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
}
.fac-card {
    position: relative;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 25px 55px rgba(8, 47, 135, 0.16),
                0 8px 18px rgba(8, 47, 135, 0.07);
    overflow: hidden;
    z-index: 3;
}
.fac-card-head {
    background: linear-gradient(135deg, var(--school-blue) 0%, var(--school-dark-blue) 100%);
    padding: 20px 24px 18px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
}
.fac-card-head::after {
    content: "";
    position: absolute;
    right: -40px; top: -40px;
    width: 130px; height: 130px;
    border: 26px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    pointer-events: none;
}
.fac-card-head-icon {
    flex-shrink: 0;
    width: 42px; height: 42px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    position: relative;
    z-index: 1;
}
.fac-card-head-text { position: relative; z-index: 1; }
.fac-card-head-text span {
    display: block;
    color: var(--school-orange);
    font-family: "Inter", sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.fac-card-head-text strong {
    display: block;
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}
.fac-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    padding: 6px;
}
.fac-tile {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 12px;
    border-radius: 12px;
    transition: 0.3s ease;
}
.fac-tile:hover { background: var(--school-light-blue); }
.fac-tile-icon {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: 0.3s ease;
}
.fac-tile:nth-child(1) .fac-tile-icon { background: #fff3e7; color: var(--school-orange); }
.fac-tile:nth-child(2) .fac-tile-icon { background: var(--school-light-blue); color: var(--school-blue); }
.fac-tile:nth-child(3) .fac-tile-icon { background: #f3e9ff; color: #6f42c1; }
.fac-tile:nth-child(4) .fac-tile-icon { background: #e7f5ee; color: #198754; }
.fac-tile:nth-child(5) .fac-tile-icon { background: #fdf2f2; color: #d64545; }
.fac-tile:nth-child(6) .fac-tile-icon { background: #fffae6; color: #b5870a; }
.fac-tile:hover .fac-tile-icon { transform: rotate(-6deg) scale(1.05); }
.fac-tile-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.fac-tile-text strong {
    display: block;
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 2px;
}
.fac-tile-text small {
    display: block;
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.fac-card-foot {
    padding: 14px 20px 16px;
    background: #f8fafd;
    border-top: 1px solid var(--school-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.fac-card-foot-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--school-blue);
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.fac-card-foot-label i { color: var(--school-orange); font-size: 12px; }
.fac-card-foot-dots { display: flex; gap: 4px; }
.fac-card-foot-dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--school-border);
}
.fac-card-foot-dots span:nth-child(1) { background: var(--school-orange); width: 16px; border-radius: 4px; }
.fac-card-foot-dots span:nth-child(2) { background: var(--school-blue); }
.fac-card-foot-dots span:nth-child(3) { background: #6f42c1; }
.fac-card-foot-dots span:nth-child(4) { background: #198754; }
.fac-card-foot-dots span:nth-child(5) { background: #d64545; }
.fac-card-foot-dots span:nth-child(6) { background: #b5870a; }

.fac-float {
    position: absolute;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(8, 47, 135, 0.14);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    z-index: 5;
    transition: transform 0.4s ease;
}
.fac-float:hover { transform: translateY(-3px); }
.fac-float-icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.fac-float-text { display: flex; flex-direction: column; line-height: 1.1; }
.fac-float-text small {
    font-family: "Inter", sans-serif;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--school-muted);
    margin-bottom: 3px;
}
.fac-float-text strong {
    font-family: "Playfair Display", serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--school-blue);
    white-space: nowrap;
}
.fac-float-1 { top: -38px; left: -22px; animation: facFloatY 4s ease-in-out infinite; }
.fac-float-1 .fac-float-icon { background: #fff3e7; color: var(--school-orange); }
.fac-float-2 { bottom: -32px; right: -22px; animation: facFloatY 4s ease-in-out infinite; animation-delay: 1.2s; }
.fac-float-2 .fac-float-icon { background: var(--school-light-blue); color: var(--school-blue); }
.fac-float-3 { top: 52%; right: -94px; animation: facFloatX 5s ease-in-out infinite; animation-delay: 0.6s; }
.fac-float-3 .fac-float-icon { background: #e7f5ee; color: #198754; }

.fac-visual::before {
    content: "";
    position: absolute;
    top: 24px;
    left: -22px;
    width: 130px; height: 130px;
    background-image: radial-gradient(rgba(8, 47, 135, 0.16) 1.6px, transparent 1.6px);
    background-size: 14px 14px;
    z-index: 1;
    pointer-events: none;
}

.infra-section {
    position: relative;
    background: #ffffff;
    padding: 100px 0 110px;
    overflow: hidden;
}
.infra-section::before {
    content: "";
    position: absolute;
    width: 620px; height: 620px;
    top: -320px; right: -260px;
    background: var(--school-light-blue);
    border-radius: 50%;
    opacity: 0.42;
    pointer-events: none;
}
.infra-section::after {
    content: "";
    position: absolute;
    width: 340px; height: 340px;
    bottom: -180px; left: -140px;
    border: 2px solid var(--school-border);
    border-radius: 50%;
    opacity: 0.6;
    pointer-events: none;
}
.infra-section .container {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1280px;
}

.infra-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 60px;
}
.infra-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    color: var(--school-orange);
    font-family: "Inter", sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.infra-label::before,
.infra-label::after {
    content: "";
    width: 30px; height: 2px;
    background: var(--school-orange);
}
.infra-head h2 {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(30px, 3.6vw, 44px);
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 14px;
}
.infra-head h2 em {
    color: var(--school-orange);
    font-style: italic;
    font-weight: 600;
}
.infra-head p {
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.75;
    max-width: 640px;
    margin: 0 auto;
}

.spec-row-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 24px;
    margin-bottom: 24px;
    align-items: stretch;
}

.spec-block {
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(8, 47, 135, 0.06);
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
}
.spec-block:hover {
    box-shadow: 0 20px 50px rgba(8, 47, 135, 0.09);
}

.spec-block.spec-block-stack {
    margin-top: 24px;
    margin-bottom: 24px;
}

.spec-row-grid .spec-block {
    height: 520px;
    max-height: 520px;
    position: relative;
}

.spec-row-grid .spec-block::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: linear-gradient(
        to top,
        rgba(212, 224, 240, 0.96) 0%,
        rgba(224, 234, 246, 0.82) 35%,
        rgba(236, 243, 252, 0.45) 70%,
        rgba(255, 255, 255, 0) 100%
    );
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
    z-index: 5;
    border-radius: 0 0 18px 18px;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.spec-row-grid .spec-block.no-scroll::after,
.spec-row-grid .spec-block.is-scrolled-bottom::after {
    opacity: 0;
}

.spec-row-grid .spec-list {
    overflow-y: auto;
    flex: 1 1 auto;
    scrollbar-width: thin;
    scrollbar-color: var(--school-border) transparent;
}
.spec-row-grid .spec-list::-webkit-scrollbar {
    width: 6px;
}
.spec-row-grid .spec-list::-webkit-scrollbar-track {
    background: transparent;
}
.spec-row-grid .spec-list::-webkit-scrollbar-thumb {
    background: #d5dde8;
    border-radius: 6px;
}
.spec-row-grid .spec-list::-webkit-scrollbar-thumb:hover {
    background: var(--school-muted);
}

.spec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    background: var(--school-blue);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.spec-head.orange { background: var(--school-orange); }
.spec-head.green { background: #198754; }
.spec-head.purple { background: #6f42c1; }
.spec-head::after {
    content: "";
    position: absolute;
    right: -50px; top: -50px;
    width: 170px; height: 170px;
    border: 30px solid rgba(255, 255, 255, 0.07);
    border-radius: 50%;
    pointer-events: none;
}
.spec-head-left {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
    min-width: 0;
}
.spec-head-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}
.spec-head-text { min-width: 0; }
.spec-head-text h3 {
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 2px;
    line-height: 1.25;
}
.spec-head-text span {
    display: block;
    color: rgba(255, 255, 255, 0.70);
    font-family: "Inter", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.spec-head-count {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #ffffff;
    padding: 5px 11px;
    border-radius: 30px;
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.spec-head-count i { font-size: 10px; }

.spec-list {
    display: flex;
    flex-direction: column;
}
.spec-row {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid #f0f3f8;
    transition: 0.25s ease;
    position: relative;
    flex-shrink: 0;
}
.spec-row:last-child { border-bottom: 0; }
.spec-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: var(--school-orange);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}
.spec-row:hover::before { transform: scaleY(1); }
.spec-row:hover { background: #f8fbfe; }
.spec-row:nth-child(even) { background: #fbfcfe; }
.spec-row:nth-child(even):hover { background: #f4f9ff; }

.spec-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--school-light-blue);
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 11.5px;
    font-weight: 700;
    transition: 0.3s ease;
    justify-self: start;
}
.spec-row:hover .spec-num {
    background: var(--school-orange);
    color: #ffffff;
    transform: rotate(-6deg);
}

.spec-label {
    color: var(--school-text);
    font-family: "Inter", sans-serif;
    font-size: 13.5px;
    line-height: 1.55;
}

.spec-value {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 15px;
    font-weight: 700;
    text-align: right;
    line-height: 1.2;
    white-space: nowrap;
}
.spec-value small {
    display: block;
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-top: 3px;
}

.spec-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 30px;
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    white-space: nowrap;
}
.spec-pill i { font-size: 10px; }
.spec-pill.yes { background: #e7f5ee; color: #198754; }
.spec-pill.no { background: #fdf2f2; color: #d64545; }

.spec-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 4px 11px;
    border-radius: 30px;
    background: var(--school-light-blue);
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

/* =========================================================
   FEE STRUCTURE — PAGE STYLES
========================================================= */
.fs-hero-wrap {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 480px;
    margin: 0 auto;
}
.fs-hero-wrap::before {
    content: "";
    position: absolute;
    top: 10px; left: 0;
    width: 150px; height: 150px;
    background-image: radial-gradient(rgba(8, 47, 135, 0.18) 1.8px, transparent 1.8px);
    background-size: 15px 15px;
    z-index: 1;
    pointer-events: none;
}
.fs-hero-wrap::after {
    content: "";
    position: absolute;
    bottom: -10px; left: -10px;
    width: 130px; height: 130px;
    border: 24px solid rgba(245, 130, 32, 0.15);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}
.fs-ring-blue {
    position: absolute;
    top: 10px; right: 20px;
    width: 140px; height: 140px;
    border: 26px solid rgba(8, 47, 135, 0.10);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

.fs-card {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 30px 70px rgba(8, 47, 135, 0.20),
                0 10px 25px rgba(8, 47, 135, 0.06);
    overflow: hidden;
    z-index: 3;
    transition: transform 0.4s ease;
}
.fs-card:hover {
    transform: translate(-50%, -50%) translateY(-6px);
}
.fs-card-head {
    position: relative;
    background: linear-gradient(135deg, var(--school-blue) 0%, var(--school-dark-blue) 100%);
    padding: 22px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    overflow: hidden;
}
.fs-card-head::after {
    content: "";
    position: absolute;
    right: -40px; top: -50px;
    width: 130px; height: 130px;
    border: 24px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    pointer-events: none;
}
.fs-card-icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    position: relative;
    z-index: 1;
}
.fs-card-head-text { position: relative; z-index: 1; }
.fs-card-head-text span {
    display: block;
    color: var(--school-orange);
    font: 700 9.5px "Inter", sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.fs-card-head-text strong {
    display: block;
    color: #ffffff;
    font: 700 16px "Playfair Display", serif;
    line-height: 1.2;
}

.fs-card-body { padding: 18px 22px 20px; }
.fs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--school-border);
}
.fs-row:last-child { border-bottom: none; }
.fs-row-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.fs-row-icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.fs-row:nth-child(1) .fs-row-icon { background: #fff3e7; color: var(--school-orange); }
.fs-row:nth-child(2) .fs-row-icon { background: #eef5fc; color: var(--school-blue); }
.fs-row:nth-child(3) .fs-row-icon { background: #f3e9ff; color: #6f42c1; }
.fs-row:nth-child(4) .fs-row-icon { background: #e7f5ee; color: #198754; }

.fs-row-bars {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.fs-bar-primary {
    display: block;
    height: 9px;
    border-radius: 5px;
    background: linear-gradient(90deg, #dbe4f0 0%, #c8d5e6 100%);
}
.fs-bar-secondary {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: #eef2f7;
}
.fs-row:nth-child(1) .fs-bar-primary { width: 82%; }
.fs-row:nth-child(1) .fs-bar-secondary { width: 55%; }
.fs-row:nth-child(2) .fs-bar-primary { width: 68%; }
.fs-row:nth-child(2) .fs-bar-secondary { width: 45%; }
.fs-row:nth-child(3) .fs-bar-primary { width: 90%; }
.fs-row:nth-child(3) .fs-bar-secondary { width: 62%; }
.fs-row:nth-child(4) .fs-bar-primary { width: 74%; }
.fs-row:nth-child(4) .fs-bar-secondary { width: 50%; }

.fs-amount {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--school-light-blue);
    color: var(--school-blue);
    font: 700 11.5px "Inter", sans-serif;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.fs-card-foot {
    padding: 14px 20px;
    background: #f8fafd;
    border-top: 1px solid var(--school-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.fs-card-foot-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--school-blue);
    font: 700 10px "Inter", sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.fs-card-foot-label i { color: var(--school-orange); font-size: 12px; }
.fs-card-foot-dots { display: flex; gap: 4px; }
.fs-card-foot-dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--school-border);
}
.fs-card-foot-dots span:nth-child(1) { background: var(--school-orange); width: 16px; border-radius: 4px; }
.fs-card-foot-dots span:nth-child(2) { background: var(--school-blue); }
.fs-card-foot-dots span:nth-child(3) { background: #198754; }

.fs-float {
    position: absolute;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 16px 38px rgba(8, 47, 135, 0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    z-index: 5;
    transition: transform 0.4s ease;
}
.fs-float:hover { transform: translateY(-4px); }
.fs-float-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.fs-float-text { display: flex; flex-direction: column; line-height: 1.15; }
.fs-float-text small {
    font: 700 8.5px "Inter", sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--school-muted);
    margin-bottom: 3px;
}
.fs-float-text strong {
    font: 700 13px "Playfair Display", serif;
    color: var(--school-blue);
    white-space: nowrap;
}
.fs-float-1 { top: 30px; left: 0; animation: fsFloatY 4s ease-in-out infinite; }
.fs-float-1 .fs-float-icon { background: #fff3e7; color: var(--school-orange); }
.fs-float-2 { bottom: 40px; right: 0; animation: fsFloatY 4s ease-in-out infinite; animation-delay: 1.2s; }
.fs-float-2 .fs-float-icon { background: #e7f5ee; color: #198754; }

.fee-section {
    background: #ffffff;
    padding: 90px 0 110px;
    position: relative;
    overflow: hidden;
}
.fee-section::before {
    content: "";
    position: absolute;
    top: -200px; left: -200px;
    width: 460px; height: 460px;
    border: 68px solid rgba(8, 47, 135, 0.03);
    border-radius: 50%;
    pointer-events: none;
}
.fee-section::after {
    content: "";
    position: absolute;
    bottom: -180px; right: -160px;
    width: 360px; height: 360px;
    background: rgba(245, 130, 32, 0.05);
    border-radius: 50%;
    pointer-events: none;
}
.fee-section .container {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 900px;
}

.fee-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 46px;
}
.fee-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--school-orange);
    font: 600 12px "Inter", sans-serif;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}
.fee-title {
    margin: 0 0 14px;
    color: var(--school-blue);
    font: 700 clamp(26px, 3vw, 38px)/1.15 "Playfair Display", serif;
    letter-spacing: -0.3px;
}
.fee-title em { color: var(--school-orange); font-weight: 600; font-style: italic; }
.fee-sub {
    margin: 0;
    color: var(--school-muted);
    font: 400 15px/1.7 "Inter", sans-serif;
}

.fee-table-wrap {
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(8, 47, 135, 0.06);
}

.fee-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
.fee-table thead th {
    background: linear-gradient(135deg, var(--school-blue) 0%, var(--school-dark-blue) 100%);
    padding: 20px 30px;
    color: #ffffff;
    font: 700 12px "Inter", sans-serif;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    position: relative;
}
.fee-table thead th:first-child { width: 70px; text-align: center; }
.fee-table thead th:last-child { text-align: right; }

.fee-table tbody td {
    padding: 18px 30px;
    border-bottom: 1px solid var(--school-border);
    font: 500 15px "Inter", sans-serif;
    color: var(--school-text);
    vertical-align: middle;
}
.fee-table tbody tr:last-child td {
    border-bottom: none;
}
.fee-table tbody tr:nth-child(even) {
    background: #fbfcfe;
}
.fee-table tbody tr {
    transition: background 0.25s ease;
}
.fee-table tbody tr:hover {
    background: var(--school-light-blue);
}

.fee-sn {
    text-align: center;
}
.fee-sn-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--school-light-blue);
    color: var(--school-blue);
    font: 700 13px "Inter", sans-serif;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.fee-table tbody tr:hover .fee-sn-badge {
    background: var(--school-blue);
    color: #ffffff;
    transform: scale(1.05);
}

.fee-grade-cell {
    display: flex;
    align-items: center;
    gap: 14px;
}
.fee-grade-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: transform 0.3s ease;
}
.fee-table tbody tr:hover .fee-grade-icon {
    transform: scale(1.08) rotate(-5deg);
}
.fee-grade-icon.orange { background: #fff3e7; color: var(--school-orange); }
.fee-grade-icon.blue   { background: #eef5fc; color: var(--school-blue); }
.fee-grade-icon.purple { background: #f3e9ff; color: #6f42c1; }
.fee-grade-icon.green  { background: #e7f5ee; color: #198754; }
.fee-grade-icon.red    { background: #fdf2f2; color: #d64545; }
.fee-grade-icon.yellow { background: #fffae6; color: #b5870a; }

.fee-grade-text strong {
    display: block;
    color: var(--school-blue);
    font: 700 15px "Inter", sans-serif;
    letter-spacing: -0.1px;
}
.fee-grade-text small {
    display: block;
    color: var(--school-muted);
    font: 500 11px "Inter", sans-serif;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

.fee-amount-cell {
    text-align: right;
}
.fee-amount-text {
    color: var(--school-blue);
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.1px;
    white-space: nowrap;
    transition: color 0.3s ease;
}
.fee-amount-text .amount-currency {
    font-size: 15px;
    font-weight: 600;
    color: var(--school-orange);
    margin-right: 2px;
}
.fee-amount-text .amount-period {
    font-size: 12px;
    font-weight: 500;
    color: var(--school-muted);
    margin-left: 4px;
}
.fee-table tbody tr:hover .fee-amount-text {
    color: var(--school-orange);
}
.fee-table tbody tr:hover .fee-amount-text .amount-currency {
    color: var(--school-blue);
}

.fee-note {
    margin-top: 40px;
    background: var(--school-light-blue);
    border: 1px dashed rgba(8, 47, 135, 0.35);
    border-radius: 16px;
    padding: 24px 30px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.fee-note-icon {
    flex-shrink: 0;
    width: 50px; height: 50px;
    border-radius: 14px;
    background: #ffffff;
    color: var(--school-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 8px 20px rgba(8, 47, 135, 0.08);
}
.fee-note-body strong {
    display: block;
    color: var(--school-blue);
    font: 700 15px "Playfair Display", serif;
    margin-bottom: 4px;
}
.fee-note-body p {
    margin: 0;
    color: var(--school-muted);
    font: 400 13.5px/1.6 "Inter", sans-serif;
}
.fee-note-body a {
    color: var(--school-orange);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(245, 130, 32, 0.5);
}
.fee-note-body a:hover {
    color: var(--school-blue);
    border-bottom-color: var(--school-blue);
}

/* =========================================================
   MEDIA QUERIES (1199.98px, 991.98px, 767.98px, 575.98px)
========================================================= */
@media (max-width: 1199.98px) {
    /* Curriculum */
    .panchang-curriculum-grid { grid-template-columns: repeat(3, 1fr); }

    /* Exam */
    .exam-hero { height: auto; max-height: 70vh; min-height: 0; padding: 50px 0; }
    .exam-hero .container { width: 92%; }
    .exam-hero-inner { gap: 40px; }
    .report-card { max-width: 280px; }
    .ee-section .container { width: 92%; }
    .ee-approach { padding: 80px 0 70px; }
    .ee-components { padding: 80px 0 85px; }
    .ee-pattern { padding: 80px 0 90px; }
    .ee-comp-grid { grid-template-columns: repeat(2, 1fr); }
    .ee-commitment-content { padding: 60px 50px; }

    /* Facilities */
    .fac-hero { height: auto; max-height: 70vh; min-height: 0; padding: 50px 0; }
    .fac-hero .container { width: 92%; }
    .fac-hero-inner { gap: 40px; }
    .fac-visual { max-width: 360px; }
    .fac-float-3 { right: -18px; }
    .infra-section .container { width: 92%; }
    .infra-section { padding: 80px 0 90px; }

    /* Fee Structure */
    .fs-hero-wrap { max-width: 440px; height: 440px; }
    .fs-card { width: 300px; }
    .fee-section { padding: 80px 0 96px; }
}

@media (max-width: 991.98px) {
    /* Curriculum */
    .page-banner { max-height: none; min-height: auto; padding: 55px 0; }
    .page-banner-inner { grid-template-columns: 1fr; gap: 35px; }
    .page-banner-text { display: flex; flex-direction: column; align-items: center; }
    .page-banner-text p { text-align: center; }
    .page-banner-visual { justify-content: flex-start; }
    .banner-quote-card { max-width: 100%; }
    .curriculum-overview { padding: 70px 0 40px; }
    .curriculum-heading { margin-bottom: 35px; }
    .curriculum-grid { grid-template-columns: 1fr; gap: 40px; }
    .curriculum-image { height: 380px; }
    .subjects-section { padding: 40px 0 80px; }
    .curriculum-levels { grid-template-columns: 1fr; gap: 26px; }
    .panchang-curriculum { padding: 70px 0 75px; }
    .panchang-curriculum-heading { margin-bottom: 45px; }
    .panchang-curriculum-grid { grid-template-columns: repeat(3, 1fr); }
    .methodology-section { padding: 70px 0 75px; }
    .methodology-heading { margin-bottom: 45px; }
    .methodology-grid { grid-template-columns: 1fr; gap: 22px; }
    .classes-section { padding: 70px 0 75px; }
    .classes-heading { margin-bottom: 45px; }
    .classes-grid { grid-template-columns: 1fr; gap: 28px; }
    .cocurricular-section { padding: 70px 0 75px; }
    .cocurricular-heading { margin-bottom: 45px; }
    .cocurricular-grid { grid-template-columns: repeat(2, 1fr); }
    .curriculum-closing { padding: 65px 0 70px; }

    /* Exam */
    .exam-hero { height: auto; max-height: none; padding: 55px 0; }
    .exam-hero-inner { grid-template-columns: 1fr; gap: 40px; }
    .exam-hero-text { display: flex; flex-direction: column; align-items: center; text-align: center; }
    .exam-hero-desc { max-width: 100%; }
    .report-card { max-width: 300px; }
    .ee-approach-grid { grid-template-columns: 1fr; gap: 40px; }
    .ee-approach-img { height: 340px; }
    .ee-pattern-grid { grid-template-columns: 1fr; }
    .ee-commitment-inner { grid-template-columns: 1fr; }
    .ee-commitment-visual img { min-height: 280px; }
    .ee-commitment-content { padding: 55px 40px; }

    /* Facilities */
    .fac-hero { height: auto; max-height: none; padding: 55px 0; }
    .fac-hero-inner { grid-template-columns: 1fr; gap: 50px; }
    .fac-hero-text { display: flex; flex-direction: column; align-items: center; text-align: center; }
    .fac-visual { max-width: 380px; margin-top: 10px; }
    .infra-section { padding: 70px 0 80px; }
    .spec-row-grid { grid-template-columns: 1fr; gap: 24px; margin-bottom: 24px; }
    .spec-row-grid .spec-block { height: auto; max-height: none; }
    .spec-row-grid .spec-list { overflow-y: visible; }
    .spec-row-grid .spec-block::after { display: none; }

    /* Fee Structure */
    .fs-hero-wrap { max-width: 460px; height: 460px; margin-top: 20px; }
}

@media (max-width: 767.98px) {
    /* Curriculum */
    .page-banner { padding: 45px 0; }
    .page-banner-text h1 { font-size: 28px; }
    .page-banner-text p { font-size: 14.5px; }
    .page-banner-crumb { font-size: 11px; letter-spacing: 1.5px; }
    .page-banner-facts { gap: 12px 20px; }
    .banner-quote-text { font-size: 19px; }
    .banner-quote-icons { gap: 14px; flex-wrap: wrap; }
    .curriculum-overview { padding: 55px 0 35px; }
    .curriculum-title { font-size: 30px; }
    .curriculum-text p { font-size: 14.5px; }
    .curriculum-image { height: 300px; }
    .curriculum-image-accent { width: 60px; height: 60px; border-width: 4px; }
    .curriculum-image-wrap::after { width: 60px; height: 60px; border-width: 4px; }
    .subjects-section { padding: 35px 0 65px; }
    .subjects-block { padding-top: 35px; }
    .subjects-title { font-size: 30px; }
    .level-header { padding: 20px 22px; gap: 14px; }
    .level-icon { width: 48px; height: 48px; font-size: 22px; border-radius: 12px; }
    .level-header h4 { font-size: 19px; }
    .level-subjects { padding: 18px 22px 22px; }
    .level-subject-name { font-size: 13.5px; }
    .level-subject-icon { width: 26px; height: 26px; font-size: 12px; }
    .panchang-curriculum { padding: 55px 0 65px; }
    .panchang-curriculum-title { font-size: 30px; }
    .panchang-curriculum-sub { font-size: 15px; }
    .panchang-curriculum-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .methodology-section { padding: 55px 0 65px; }
    .methodology-title { font-size: 30px; }
    .methodology-sub { font-size: 15px; }
    .methodology-card { padding: 26px 22px 24px; gap: 16px; }
    .methodology-card-icon { width: 48px; height: 48px; font-size: 21px; }
    .methodology-card h3 { font-size: 17px; }
    .methodology-card p { font-size: 13.5px; }
    .classes-section { padding: 55px 0 65px; }
    .classes-title { font-size: 30px; }
    .classes-sub { font-size: 15px; }
    .classes-card { padding: 28px 24px 26px; }
    .classes-card h3 { font-size: 19px; }
    .classes-card p { font-size: 14.5px; }
    .cocurricular-section { padding: 55px 0 65px; }
    .cocurricular-title { font-size: 30px; }
    .cocurricular-sub { font-size: 15px; }
    .cocurricular-grid { grid-template-columns: 1fr; gap: 16px; }
    .curriculum-closing { padding: 50px 0 55px; }
    .curriculum-closing p { font-size: 18px; }

    /* Exam */
    .exam-hero { padding: 45px 0 50px; }
    .exam-hero .container { width: 95%; }
    .exam-hero-title { font-size: 32px; }
    .exam-hero-desc { font-size: 14.5px; }
    .exam-crumb { font-size: 10.5px; letter-spacing: 1.5px; }
    .exam-hero-facts { gap: 12px 22px; }
    .exam-hero-facts span { font-size: 12px; }
    .report-card { max-width: 260px; }
    .ee-section .container { width: 95%; }
    .ee-approach { padding: 60px 0 50px; }
    .ee-approach-img { height: 280px; }
    .ee-approach-text h2 { font-size: 28px; }
    .ee-approach-text p { font-size: 14.5px; }
    .ee-components { padding: 60px 0 65px; }
    .ee-sec-head h2 { font-size: 26px; }
    .ee-sec-head p { font-size: 14.5px; }
    .ee-comp-grid { grid-template-columns: 1fr; gap: 18px; }
    .ee-comp-card { padding: 26px 22px 24px; }
    .ee-comp-icon { width: 58px; height: 58px; font-size: 23px; }
    .ee-comp-card h3 { font-size: 17.5px; }
    .ee-pattern { padding: 60px 0 70px; }
    .ee-panel { padding: 28px 24px 26px; }
    .ee-panel-head h3 { font-size: 18px; }
    .ee-commitment-content { padding: 45px 28px 50px; }
    .ee-commitment-content h2 { font-size: 26px; }
    .ee-commitment-content p { font-size: 14.5px; }

    /* Facilities */
    .fac-hero { padding: 45px 0 60px; }
    .fac-hero .container { width: 95%; }
    .fac-hero-title { font-size: 32px; }
    .fac-hero-desc { font-size: 14.5px; }
    .fac-crumb { font-size: 10.5px; letter-spacing: 1.5px; }
    .fac-hero-facts { gap: 12px 22px; }
    .fac-hero-facts span { font-size: 12px; }
    .fac-visual { max-width: 340px; }
    .fac-float-1 { left: -8px; top: -10px; }
    .fac-float-2 { right: -8px; bottom: -14px; }
    .fac-float-3 { display: none; }
    .infra-section .container { width: 95%; }
    .infra-section { padding: 60px 0 70px; }
    .infra-head { margin-bottom: 40px; }
    .infra-head h2 { font-size: 26px; }
    .infra-head p { font-size: 14.5px; }
    .spec-head { padding: 16px 18px; }
    .spec-head-icon { width: 36px; height: 36px; font-size: 15px; border-radius: 9px; }
    .spec-head-text h3 { font-size: 15.5px; }
    .spec-head-text span { font-size: 8.5px; letter-spacing: 1.4px; }
    .spec-head-count { font-size: 9.5px; padding: 4px 10px; }
    .spec-row { grid-template-columns: 36px 1fr auto; gap: 12px; padding: 13px 18px; }
    .spec-num { width: 26px; height: 26px; font-size: 11px; border-radius: 7px; }
    .spec-label { font-size: 13px; }
    .spec-value { font-size: 14px; }

    /* Fee Structure */
    .fs-hero-wrap { max-width: 380px; height: 420px; }
    .fs-card { width: 290px; }
    .fs-card-head { padding: 18px 20px; }
    .fs-card-head-text strong { font-size: 14px; }
    .fs-card-icon { width: 40px; height: 40px; font-size: 18px; }
    .fs-card-body { padding: 14px 18px 16px; }
    .fs-row { padding: 11px 0; }
    .fs-row-icon { width: 30px; height: 30px; font-size: 13px; }
    .fs-bar-primary { height: 8px; }
    .fs-bar-secondary { height: 5px; }
    .fs-amount { font-size: 11px; padding: 5px 10px; }
    .fs-ring-blue { width: 110px; height: 110px; border-width: 20px; }
    .fs-float { padding: 9px 13px; gap: 8px; }
    .fs-float-icon { width: 30px; height: 30px; font-size: 13px; }
    .fs-float-text strong { font-size: 11.5px; }
    .fs-float-text small { font-size: 7.5px; letter-spacing: 1px; }
    .fee-section { padding: 60px 0 70px; }
    .fee-head { margin-bottom: 34px; }
    .fee-sub { font-size: 14px; }
    .fee-table thead th { padding: 16px 20px; font-size: 11px; letter-spacing: 1.4px; }
    .fee-table thead th:first-child { width: 56px; }
    .fee-table tbody td { padding: 16px 20px; font-size: 14px; }
    .fee-sn-badge { width: 30px; height: 30px; font-size: 12px; }
    .fee-grade-icon { width: 34px; height: 34px; font-size: 14px; }
    .fee-grade-text strong { font-size: 14px; }
    .fee-grade-text small { font-size: 10.5px; }
    .fee-amount-text { font-size: 15px; }
    .fee-amount-text .amount-currency { font-size: 14px; }
    .fee-amount-text .amount-period { font-size: 11px; }
    .fee-note { flex-direction: column; align-items: flex-start; padding: 22px 24px; gap: 14px; }
}

@media (max-width: 575.98px) {
    /* Curriculum */
    .page-banner-text h1 { font-size: 25px; }
    .page-banner-facts { flex-direction: column; align-items: flex-start; gap: 10px; }
    .banner-quote-card { padding-left: 22px; border-left-width: 3px; }
    .banner-quote-text { font-size: 17px; }
    .banner-quote-note { font-size: 11px; letter-spacing: 1.2px; }
    .banner-quote-icons { gap: 12px; }
    .banner-quote-icons span { font-size: 11px; }
    .curriculum-title { font-size: 26px; }
    .curriculum-label { font-size: 11px; letter-spacing: 2px; }
    .curriculum-label::before { width: 22px; }
    .curriculum-image { height: 230px; border-width: 5px; }
    .curriculum-accreditation { grid-template-columns: 1fr; gap: 10px; }
    .accreditation-box { padding: 14px 12px; display: flex; align-items: center; text-align: left; gap: 14px; }
    .accreditation-box i { margin-bottom: 0; flex-shrink: 0; }
    .subjects-title { font-size: 26px; }
    .level-header { padding: 18px 20px; gap: 12px; }
    .level-icon { width: 44px; height: 44px; font-size: 20px; border-radius: 10px; }
    .level-header h4 { font-size: 17px; }
    .level-tag { font-size: 9px; padding: 3px 10px; }
    .level-subjects { padding: 16px 20px 20px; }
    .level-subject-row { padding: 10px 0; gap: 10px; }
    .level-subject-name { font-size: 12.5px; }
    .level-subject-icon { width: 24px; height: 24px; font-size: 11px; }
    .panchang-curriculum-title { font-size: 26px; }
    .panchang-curriculum-grid { grid-template-columns: 1fr; gap: 14px; }
    .panchang-curriculum-item { padding: 22px 18px 20px; }
    .methodology-title { font-size: 26px; }
    .methodology-card { flex-direction: column; gap: 14px; padding: 22px 20px; }
    .classes-title { font-size: 26px; }
    .classes-card { padding: 24px 20px 22px; border-radius: 18px; }
    .classes-card h3 { font-size: 18px; }
    .classes-list-num { width: 28px; height: 28px; font-size: 12px; }
    .cocurricular-title { font-size: 26px; }
    .cocurricular-item { padding: 20px 18px; }
    .curriculum-closing p { font-size: 16px; }
    .curriculum-closing .closing-note { font-size: 10.5px; letter-spacing: 2px; }
    .curriculum-closing .closing-note::before,
    .curriculum-closing .closing-note::after { width: 22px; }

    /* Exam */
    .exam-hero { padding: 40px 0 45px; }
    .exam-hero-title { font-size: 28px; }
    .exam-hero-desc { font-size: 13.5px; }
    .exam-hero-facts { flex-direction: column; align-items: flex-start; gap: 10px; }
    .report-card { max-width: 240px; }
    .ee-approach-text h2 { font-size: 24px; }
    .ee-sec-head h2 { font-size: 22px; }
    .ee-sec-label { font-size: 10.5px; letter-spacing: 2px; }
    .ee-sec-label::before,
    .ee-sec-label::after { width: 22px; }
    .ee-approach-img { height: 220px; }
    .ee-approach-visual::before,
    .ee-approach-visual::after { width: 60px; height: 60px; border-width: 4px; }
    .ee-panel-list li { font-size: 12.5px; padding: 10px 0; }
    .ee-commitment-content { padding: 40px 22px 45px; }
    .ee-commitment-content h2 { font-size: 22px; }
    .ee-commitment-label { font-size: 10.5px; letter-spacing: 2px; }
    .ee-commitment-label::before { width: 22px; }

    /* Facilities */
    .fac-hero { padding: 40px 0 55px; }
    .fac-hero-title { font-size: 28px; }
    .fac-hero-desc { font-size: 13.5px; }
    .fac-hero-facts { flex-direction: column; align-items: center; gap: 10px; }
    .fac-visual { max-width: 300px; }
    .fac-float { padding: 8px 11px; gap: 8px; border-radius: 12px; }
    .fac-float-icon { width: 28px; height: 28px; font-size: 13px; border-radius: 8px; }
    .fac-float-text small { font-size: 7.5px; letter-spacing: 1px; margin-bottom: 2px; }
    .fac-float-text strong { font-size: 11.5px; }
    .fac-card-head { padding: 16px 18px 14px; gap: 11px; }
    .fac-card-head-icon { width: 38px; height: 38px; font-size: 17px; border-radius: 10px; }
    .fac-card-head-text strong { font-size: 15px; }
    .fac-card-head-text span { font-size: 8.5px; letter-spacing: 1.6px; }
    .fac-tile { padding: 11px 10px; gap: 9px; }
    .fac-tile-icon { width: 30px; height: 30px; font-size: 13px; border-radius: 9px; }
    .fac-tile-text strong { font-size: 12.5px; }
    .fac-tile-text small { font-size: 8.5px; }
    .infra-section { padding: 50px 0 60px; }
    .infra-section h2 { font-size: 24px; }
    .infra-head p { font-size: 13.5px; }
    .infra-label { font-size: 10.5px; letter-spacing: 2px; }
    .infra-label::before,
    .infra-label::after { width: 22px; }
    .spec-head { padding: 14px 16px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
    .spec-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .spec-head-icon { width: 36px; height: 36px; font-size: 15px; border-radius: 9px; flex-shrink: 0; }
    .spec-head-text h3 { font-size: 15px; margin: 0 0 2px; line-height: 1.25; }
    .spec-head-text span { font-size: 8.5px; letter-spacing: 1.2px; }
    .spec-head-count { font-size: 9.5px; padding: 4px 9px; flex-shrink: 0; }
    .spec-row { grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 12px 14px; }
    .spec-num { width: 26px; height: 26px; font-size: 10.5px; border-radius: 7px; flex-shrink: 0; }
    .spec-label { font-size: 12.5px; line-height: 1.45; min-width: 0; word-break: break-word; }
    .spec-value { font-size: 13.5px; text-align: right; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; line-height: 1.15; }
    .spec-value small { display: block; font-size: 8px; letter-spacing: 0.5px; margin-top: 1px; text-align: right; }
    .spec-pill { font-size: 9.5px; padding: 3px 8px; }
    .spec-count { font-size: 12.5px; min-width: 32px; padding: 3px 8px; }

    /* Fee Structure */
    .fs-hero-wrap { max-width: 300px; height: 380px; }
    .fs-card { width: 270px; }
    .fs-card-head { padding: 16px 18px; }
    .fs-card-head-text strong { font-size: 13px; }
    .fs-card-head-text span { font-size: 8.5px; letter-spacing: 1.6px; }
    .fs-card-icon { width: 36px; height: 36px; font-size: 16px; border-radius: 10px; }
    .fs-row { padding: 10px 0; gap: 9px; }
    .fs-row-icon { width: 28px; height: 28px; font-size: 12px; border-radius: 8px; }
    .fs-bar-primary { height: 7px; }
    .fs-bar-secondary { height: 5px; }
    .fs-amount { font-size: 10.5px; padding: 4px 9px; }
    .fs-float-1 { top: 5px; left: -5px; }
    .fs-float-2 { bottom: 10px; right: -5px; }
    .fs-float { padding: 8px 11px; }
    .fs-float-icon { width: 26px; height: 26px; font-size: 12px; border-radius: 8px; }
    .fs-float-text strong { font-size: 11px; }
    .fs-ring-blue { width: 90px; height: 90px; border-width: 16px; top: 0; right: 5px; }
    .fs-hero-wrap::before { width: 100px; height: 100px; }
    .fs-hero-wrap::after { width: 100px; height: 100px; border-width: 18px; }
    .fee-head { text-align: center; margin-bottom: 28px; }
    .fee-title { font-size: 26px; }
    .fee-sub { font-size: 13.5px; }
    .fee-table-wrap { background: transparent; border: none; box-shadow: none; border-radius: 0; overflow: visible; }
    .fee-table thead { display: none; }
    .fee-table { display: block; width: 100%; background: transparent; }
    .fee-table tbody { display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 0; }
    .fee-table tbody tr { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; background: #ffffff !important; border: 1px solid var(--school-border); border-radius: 14px; padding: 16px; margin-bottom: 0; box-shadow: 0 4px 16px rgba(8, 47, 135, 0.05); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
    .fee-table tbody tr:hover { border-color: rgba(245, 130, 32, 0.35); box-shadow: 0 6px 20px rgba(8, 47, 135, 0.08); }
    .fee-table tbody td.fee-sn { grid-column: 2; grid-row: 1; display: flex !important; justify-content: flex-end; align-items: center; padding: 0; border: none; background: transparent; text-align: right; }
    .fee-table tbody td.fee-sn::before { display: none; }
    .fee-sn-badge { width: 30px; height: 30px; font-size: 12px; border-radius: 8px; background: var(--school-light-blue); color: var(--school-blue); font-weight: 700; }
    .fee-table tbody td:nth-child(2) { grid-column: 1; grid-row: 1; display: block; padding: 0; border: none; background: transparent; }
    .fee-table tbody td:nth-child(2)::before { display: none; }
    .fee-grade-cell { display: flex; align-items: center; gap: 12px; justify-content: flex-start; text-align: left; }
    .fee-grade-icon { width: 38px; height: 38px; font-size: 16px; border-radius: 10px; flex-shrink: 0; }
    .fee-grade-text strong { font-size: 14.5px; color: var(--school-blue); }
    .fee-grade-text small { font-size: 11px; color: var(--school-muted); }
    .fee-table tbody td.fee-amount-cell { grid-column: 1 / -1; grid-row: 2; display: flex !important; align-items: center; justify-content: space-between; padding: 12px 0 0 0 !important; margin-top: 12px; border: none !important; border-top: 1px dashed rgba(8, 47, 135, 0.14) !important; background: transparent; text-align: left !important; }
    .fee-table tbody td.fee-amount-cell::before { content: "TUITION FEE"; display: inline-block; font: 700 10.5px/1 "Inter", sans-serif; letter-spacing: 1.2px; color: var(--school-muted); text-transform: uppercase; }
    .fee-amount-text { font-size: 15.5px; font-weight: 700; color: var(--school-blue); }
    .fee-amount-text .amount-currency { font-size: 14.5px; font-weight: 700; color: var(--school-orange); }
    .fee-amount-text .amount-period { font-size: 11px; font-weight: 500; color: var(--school-muted); }
    .fee-table tbody tr:hover .fee-sn-badge { background: var(--school-blue); color: #ffffff; transform: none; }
    .fee-table tbody tr:hover .fee-grade-icon { transform: none; }
    .fee-note { padding: 18px 20px; border-radius: 14px; margin-top: 28px; gap: 14px; align-items: center; text-align: center; }
    .fee-note-icon { width: 44px; height: 44px; font-size: 20px; border-radius: 12px; margin: 0 auto; }
    .fee-note-body strong { font-size: 15px; }
    .fee-note-body p { font-size: 13px; }
}

/* =========================================================
   FOUNDER'S MESSAGE PAGE
========================================================= */
.founder-hero {
    background: var(--school-light-blue);
    padding: 80px 0;
}
.founder-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 60px;
    align-items: center;
}

.founder-portrait-wrap {
    position: relative;
    max-width: 440px;
}
.founder-portrait-wrap::before {
    content: "";
    position: absolute;
    top: -14px;
    left: -14px;
    right: 14px;
    bottom: 14px;
    border: 2px solid var(--school-orange);
    border-radius: 22px;
    z-index: 0;
}
.founder-portrait {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: 22px;
    box-shadow: 0 20px 45px rgba(8, 47, 135, 0.14);
}

.founder-hero-text { max-width: 560px; }
.founder-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    color: var(--school-orange);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3.5px;
    text-transform: uppercase;
}
.founder-eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--school-orange);
}
.founder-hero-text h1 {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 22px;
}
.founder-hero-text h1 em {
    font-style: italic;
    color: var(--school-orange);
    font-weight: 600;
}
.founder-hero-text p {
    color: var(--school-muted);
    font-size: 16.5px;
    line-height: 1.85;
    margin-bottom: 18px;
}
.founder-hero-text p:last-of-type { margin-bottom: 0; }
.founder-hero-text strong { color: var(--school-blue); font-weight: 600; }

.founder-name-block {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid rgba(8, 47, 135, 0.12);
}
.founder-name-block .line {
    width: 4px;
    height: 46px;
    background: var(--school-orange);
    border-radius: 3px;
}
.founder-name-block h4 {
    color: var(--school-blue);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 3px;
}
.founder-name-block span {
    color: var(--school-muted);
    font-size: 13px;
}

.founder-message {
    background: #ffffff;
    padding: 90px 0 100px;
}
.founder-message-inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 15px;
}

.founder-message-inner > p {
    color: var(--school-muted);
    font-size: 16.5px;
    line-height: 1.95;
    margin-bottom: 24px;
}
.founder-message-inner > p:last-of-type { margin-bottom: 0; }
.founder-message-inner strong { color: var(--school-blue); font-weight: 600; }

.founder-message-inner > p:first-of-type::first-letter {
    font-family: "Playfair Display", serif;
    font-size: 66px;
    line-height: 0.85;
    font-weight: 700;
    color: var(--school-orange);
    float: left;
    margin: 6px 14px 0 0;
}

.founder-signature {
    margin-top: 55px;
    padding-top: 40px;
    border-top: 1px solid var(--school-border);
    text-align: center;
}
.founder-signature i {
    color: var(--school-orange);
    font-size: 26px;
    display: block;
    margin-bottom: 14px;
}
.founder-signature h4 {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-style: italic;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
}
.founder-signature span {
    color: var(--school-muted);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
}

@media (max-width: 991.98px) {
    .founder-hero { padding: 60px 0; }
    .founder-hero-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }
    .founder-portrait-wrap {
        max-width: 400px;
        margin: 0 auto;
    }
    .founder-portrait { height: 440px; }
    .founder-hero-text {
        max-width: 100%;
        text-align: center;
        margin: 0 auto;
    }
    .founder-eyebrow { justify-content: center; }
    .founder-name-block {
        justify-content: center;
    }

    .founder-message { padding: 70px 0 80px; }
}
@media (max-width: 767.98px) {
    .founder-hero { padding: 50px 0; }
    .founder-portrait { height: 380px; }
    .founder-hero-text h1 { font-size: 30px; }
    .founder-hero-text p { font-size: 15px; }

    .founder-message { padding: 55px 0 65px; }
    .founder-message-inner > p {
        font-size: 15.5px;
        line-height: 1.85;
    }
    .founder-message-inner > p:first-of-type::first-letter {
        font-size: 54px;
        margin-right: 10px;
    }
    .founder-signature h4 { font-size: 19px; }
}
@media (max-width: 575.98px) {
    .founder-portrait { height: 320px; border-radius: 18px; }
    .founder-portrait-wrap::before {
        top: -10px; left: -10px;
        right: 10px; bottom: 10px;
        border-radius: 18px;
    }
    .founder-hero-text h1 { font-size: 26px; }
    .founder-eyebrow { font-size: 11px; letter-spacing: 2px; }
    .founder-eyebrow::before { width: 20px; }
    .founder-name-block h4 { font-size: 16px; }

    .founder-message-inner > p { font-size: 15px; }
    .founder-signature h4 { font-size: 17px; }
}

/* =========================================================
   GALLERY PAGE
========================================================= */
.gal-hero-wrap {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 480px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gal-hero-wrap::before {
    content: "";
    position: absolute;
    top: 20px; left: 0;
    width: 150px; height: 150px;
    background-image: radial-gradient(rgba(8, 47, 135, 0.18) 1.8px, transparent 1.8px);
    background-size: 15px 15px;
    z-index: 1;
    pointer-events: none;
}
.gal-hero-wrap::after {
    content: "";
    position: absolute;
    bottom: 30px; left: 10px;
    width: 90px; height: 90px;
    background: var(--school-orange);
    border-radius: 50%;
    opacity: 0.15;
    z-index: 1;
    pointer-events: none;
}
.gal-hero-frame {
    position: relative;
    width: 400px; height: 400px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(8, 47, 135, 0.22),
                0 10px 25px rgba(8, 47, 135, 0.08);
    border: 10px solid #ffffff;
    z-index: 3;
    background: #dbe4f0;
    transition: transform 0.5s ease;
}
.gal-hero-frame:hover { transform: scale(1.02); }
.gal-hero-frame img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.7s ease;
}
.gal-hero-frame:hover img { transform: scale(1.06); }

.gal-ring-1 {
    position: absolute;
    top: 0; right: 0;
    width: 180px; height: 180px;
    border: 32px solid rgba(8, 47, 135, 0.10);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}
.gal-ring-2 {
    position: absolute;
    bottom: 20px; right: 20px;
    width: 140px; height: 140px;
    border: 26px solid rgba(245, 130, 32, 0.18);
    border-radius: 50%;
    z-index: 4;
    pointer-events: none;
}
.gal-dot {
    position: absolute;
    top: 40px; left: 90px;
    width: 22px; height: 22px;
    background: var(--school-blue);
    border-radius: 50%;
    z-index: 5;
    opacity: 0.85;
}
.gal-badge {
    position: absolute;
    bottom: 30px; left: 0;
    background: #ffffff;
    border-radius: 18px;
    padding: 14px 20px;
    box-shadow: 0 20px 45px rgba(8, 47, 135, 0.18);
    display: flex;
    align-items: center;
    gap: 13px;
    z-index: 6;
    animation: galFloat 4s ease-in-out infinite;
}
.gal-badge-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: #fff3e7;
    color: var(--school-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    flex-shrink: 0;
}
.gal-badge-text small {
    display: block;
    font: 700 9.5px "Inter", sans-serif;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--school-muted);
    margin-bottom: 3px;
}
.gal-badge-text strong {
    font: 700 15px "Playfair Display", serif;
    color: var(--school-blue);
    white-space: nowrap;
}
@keyframes galFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.gal-sparkle {
    position: absolute;
    top: 20px; right: 60px;
    color: var(--school-orange);
    font-size: 24px;
    z-index: 5;
    animation: galSpin 8s linear infinite;
}
@keyframes galSpin {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.15); }
    100% { transform: rotate(360deg) scale(1); }
}

.gal-section {
    position: relative;
    background: #ffffff;
    padding: 90px 0 100px;
    overflow: hidden;
}
.gal-section::before {
    content: "";
    position: absolute;
    top: -220px; left: -200px;
    width: 480px; height: 480px;
    border: 72px solid rgba(8, 47, 135, 0.035);
    border-radius: 50%;
    pointer-events: none;
}
.gal-section::after {
    content: "";
    position: absolute;
    bottom: -170px; right: -140px;
    width: 340px; height: 340px;
    background: rgba(245, 130, 32, 0.06);
    border-radius: 50%;
    pointer-events: none;
}
.gal-section .container {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1600px;
}

.gal-head { text-align: center; max-width: 680px; margin: 0 auto 38px; }
.gal-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--school-orange);
    font: 600 12px "Inter", sans-serif;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}
.gal-title {
    margin: 0 0 12px;
    color: var(--school-blue);
    font: 700 clamp(26px, 3vw, 38px)/1.15 "Playfair Display", serif;
}
.gal-title em { color: var(--school-orange); font-weight: 600; }
.gal-sub {
    margin: 0;
    color: var(--school-muted);
    font: 400 15px/1.7 "Inter", sans-serif;
}

.gal-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 42px;
}
.gal-filter {
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid var(--school-border);
    background: #ffffff;
    color: var(--school-muted);
    font: 600 12px "Inter", sans-serif;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}
.gal-filter:hover {
    border-color: var(--school-orange);
    color: var(--school-orange);
    transform: translateY(-2px);
}
.gal-filter.is-active {
    background: var(--school-blue);
    border-color: var(--school-blue);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(8, 47, 135, 0.22);
}

.gal-grid {
    position: relative;
    width: 100%;
}

.gal-tile {
    position: absolute;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    background: transparent;
    box-shadow: 0 8px 22px rgba(8, 47, 135, 0.08);
    transition: box-shadow 0.35s ease, transform 0.35s ease, opacity 0.35s ease;
    line-height: 0;
    outline: none;
}
.gal-tile:focus-visible {
    outline: 3px solid var(--school-orange);
    outline-offset: 3px;
}
.gal-tile:hover {
    box-shadow: 0 18px 38px rgba(8, 47, 135, 0.16);
    z-index: 5;
}
.gal-tile.is-hidden { display: none !important; }

.gal-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.gal-tile:hover img { transform: scale(1.05); }

.gal-tile-cap {
    position: absolute;
    inset: auto 0 0 0;
    padding: 44px 16px 14px;
    background: linear-gradient(transparent, rgba(6, 31, 99, 0.88));
    color: #fff;
    text-align: left;
    line-height: 1.3;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
    margin: 0;
}
.gal-tile:hover .gal-tile-cap,
.gal-tile:focus-visible .gal-tile-cap {
    opacity: 1;
    transform: none;
}
.gal-tile-cap small {
    display: block;
    font: 700 9px "Inter", sans-serif;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--school-orange);
    margin-bottom: 3px;
}
.gal-tile-cap strong {
    display: block;
    font: 700 13px/1.25 "Playfair Display", serif;
}

.gal-tile::before {
    content: "\F52A";
    font-family: "bootstrap-icons";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    color: var(--school-blue);
    font-size: 13px;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 3;
    line-height: 1;
}
.gal-tile:hover::before,
.gal-tile:focus-visible::before {
    opacity: 1;
    transform: scale(1);
}

#galLightbox .modal-content { background: transparent; border: 0; }
#galLightbox img {
    width: 100%;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 12px;
}
#galLightbox .gal-lb-caption {
    margin-top: 12px;
    text-align: center;
    color: #fff;
    font: 500 14px "Inter", sans-serif;
}
#galLightbox .btn-close {
    position: absolute;
    top: -34px;
    right: 0;
    filter: invert(1);
    opacity: 1;
}

.gal-empty {
    text-align: center;
    padding: 50px 20px;
    color: var(--school-muted);
    font: italic 400 15px "Inter", sans-serif;
    background: var(--school-light-blue);
    border-radius: 18px;
    display: none;
}
.gal-empty.is-visible { display: block; }

@media (max-width: 1199.98px) {
    .gal-hero-wrap { max-width: 440px; height: 430px; }
    .gal-hero-frame { width: 340px; height: 340px; border-width: 8px; }
    .gal-ring-1 { width: 150px; height: 150px; border-width: 26px; }
    .gal-ring-2 { width: 120px; height: 120px; border-width: 22px; }
    .gal-section { padding: 80px 0 90px; }
    .gal-section .container { width: 92%; }
}

@media (max-width: 991.98px) {
    .gal-hero-wrap { max-width: 460px; height: 460px; margin-top: 20px; }
    .gal-hero-frame { width: 360px; height: 360px; }
    .gal-section { padding: 70px 0 80px; }
}

@media (max-width: 767.98px) {
    .gal-hero-wrap { max-width: 380px; height: 380px; }
    .gal-hero-frame { width: 300px; height: 300px; border-width: 7px; }
    .gal-ring-1 { width: 130px; height: 130px; border-width: 22px; }
    .gal-ring-2 { width: 100px; height: 100px; border-width: 18px; }

    .gal-badge { padding: 11px 16px; bottom: 10px; left: -10px; }
    .gal-badge-icon { width: 38px; height: 38px; font-size: 18px; }
    .gal-badge-text small { font-size: 8.5px; }
    .gal-badge-text strong { font-size: 13px; }

    .gal-section { padding: 55px 0 65px; }
    .gal-section .container { width: 95%; }
    .gal-head { margin-bottom: 28px; }
    .gal-sub { font-size: 14px; }
    .gal-filters { gap: 8px; margin-bottom: 30px; }
    .gal-filter { padding: 8px 15px; font-size: 11px; }
    .gal-tile { border-radius: 12px; }
    .gal-tile-cap { padding: 26px 11px 11px; }
    .gal-tile-cap strong { font-size: 12px; }
    .gal-tile::before { display: none; }
}

@media (max-width: 575.98px) {
    .gal-hero-wrap { max-width: 320px; height: 340px; }
    .gal-hero-frame { width: 250px; height: 250px; border-width: 6px; }
    .gal-ring-1 { width: 110px; height: 110px; border-width: 18px; top: 10px; }
    .gal-ring-2 { width: 85px; height: 85px; border-width: 14px; bottom: 30px; }
    .gal-dot { top: 20px; left: 60px; width: 16px; height: 16px; }
    .gal-sparkle { font-size: 18px; top: 10px; right: 40px; }

    .gal-badge {
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        padding: 9px 14px;
        gap: 10px;
    }
    .gal-badge-icon { width: 32px; height: 32px; font-size: 15px; border-radius: 9px; }
    .gal-badge-text small { font-size: 8px; letter-spacing: 1.3px; }
    .gal-badge-text strong { font-size: 12px; }

    .gal-tile { border-radius: 10px; }
}

/* =========================================================
   HISTORY OF THE INSTITUTION PAGE
========================================================= */
.history-hero { background: var(--school-light-blue); padding: 70px 0; }
.history-hero-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.history-hero-text { max-width: 520px; }
.history-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    margin-bottom: 20px; color: var(--school-orange);
    font-size: 12px; font-weight: 700; letter-spacing: 3.5px; text-transform: uppercase;
}
.history-hero-eyebrow::before {
    content: ""; width: 28px; height: 2px; background: var(--school-orange);
}
.history-hero-text h1 {
    color: var(--school-blue); font-family: "Playfair Display", serif;
    font-size: clamp(34px, 4vw, 50px); line-height: 1.15; font-weight: 700; margin-bottom: 22px;
}
.history-hero-text h1 em { font-style: italic; color: var(--school-orange); font-weight: 600; }
.history-hero-text p { color: var(--school-muted); font-size: 16px; line-height: 1.8; margin: 0; }
.history-hero-image {
    width: 100%; height: 340px; object-fit: cover;
    border-radius: 20px; box-shadow: 0 20px 45px rgba(8, 47, 135, 0.14);
}

.hist-section-1 {
    position: relative;
    padding: 90px 0 50px;
    background: #ffffff;
    overflow: hidden;
}
.hist-section-1::before {
    content: ""; position: absolute; width: 680px; height: 680px;
    top: -340px; right: -260px; background: var(--school-light-blue);
    border-radius: 50%; opacity: 0.55; pointer-events: none;
}
.hist-section-1 .container { position: relative; z-index: 2; }

.hist-heading {
    text-align: left; max-width: 100%; margin: 0 0 40px;
}
.hist-label {
    display: inline-flex; align-items: center; gap: 14px;
    margin-bottom: 16px; color: var(--school-orange);
    font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
}
.hist-label::before {
    content: ""; width: 32px; height: 2px; background: var(--school-orange);
}
.hist-title {
    color: var(--school-blue); font-family: "Playfair Display", serif;
    font-size: clamp(32px, 3.6vw, 46px); line-height: 1.15; font-weight: 700;
}
.hist-title .orange { color: var(--school-orange); }

.hist-grid {
    display: grid; grid-template-columns: 1.05fr 1fr;
    gap: 40px; align-items: center;
}
.hist-text p {
    color: var(--school-muted); font-size: 15.5px;
    line-height: 1.9; margin-bottom: 20px;
}
.hist-text p:last-child { margin-bottom: 0; }
.hist-text strong { color: var(--school-blue); font-weight: 600; }

.hist-tags {
    display: flex; flex-wrap: wrap; gap: 9px;
    margin-top: 26px; padding-top: 22px; border-top: 1px dashed var(--school-border);
}
.hist-tags span {
    background: var(--school-light-blue); color: var(--school-blue);
    font-size: 12px; font-weight: 600; padding: 8px 14px;
    border-radius: 40px; display: inline-flex; align-items: center;
    gap: 6px; border: 1px solid transparent; transition: 0.25s ease;
}
.hist-tags span:hover {
    background: #fff; border-color: var(--school-orange); transform: translateY(-2px);
}
.hist-tags i { color: var(--school-orange); font-size: 13px; }

.hist-visual { position: relative; }
.hist-image-wrap { position: relative; padding: 12px; }
.hist-image-accent {
    position: absolute; width: 80px; height: 80px;
    top: 0; left: 0;
    border-top: 4px solid var(--school-orange);
    border-left: 4px solid var(--school-orange);
    border-radius: 16px 0 0 0; z-index: 1;
}
.hist-image-wrap::after {
    content: ""; position: absolute; width: 80px; height: 80px;
    right: 0; bottom: 0;
    border-right: 4px solid var(--school-blue);
    border-bottom: 4px solid var(--school-blue);
    border-radius: 0 0 16px 0; z-index: 1;
}
.hist-image {
    position: relative; z-index: 2; display: block; width: 100%;
    height: 420px; object-fit: cover; border-radius: 18px;
    border: 7px solid #fff; box-shadow: 0 20px 50px rgba(8, 47, 135, .15);
}

.hist-accreditation {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px; margin-top: 22px;
}

.hist-section-2 {
    position: relative;
    padding: 50px 0 100px;
    background: #ffffff;
    overflow: hidden;
}
.hist-section-2::before {
    content: ""; position: absolute; width: 520px; height: 520px;
    bottom: -260px; left: -220px; background: var(--school-light-blue);
    border-radius: 50%; opacity: 0.5; pointer-events: none;
}
.hist-section-2 .container { position: relative; z-index: 2; }

.hist-block-2 {
    padding-top: 50px;
    border-top: 1px solid var(--school-border);
}

.hist-grid-2 {
    display: grid; grid-template-columns: 1fr 1.08fr;
    gap: 45px; align-items: center;
}

.hist-visual-2 { position: relative; }
.hist-image-wrap-2 { position: relative; padding: 12px; }
.hist-image-accent-2 {
    position: absolute; width: 80px; height: 80px;
    top: 0; left: 0;
    border-top: 4px solid var(--school-blue);
    border-left: 4px solid var(--school-blue);
    border-radius: 16px 0 0 0; z-index: 1;
}
.hist-image-wrap-2::after {
    content: ""; position: absolute; width: 80px; height: 80px;
    right: 0; bottom: 0;
    border-right: 4px solid var(--school-orange);
    border-bottom: 4px solid var(--school-orange);
    border-radius: 0 0 16px 0; z-index: 1;
}
.hist-image-2 {
    position: relative; z-index: 2; display: block; width: 100%;
    height: 420px; object-fit: cover; border-radius: 18px;
    border: 7px solid #fff; box-shadow: 0 20px 50px rgba(8, 47, 135, .15);
}

.hist-milestone-badges {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px; margin-top: 22px;
}
.milestone-badge-box {
    background: #fff; border: 1px solid var(--school-border);
    border-radius: 12px; padding: 16px 12px; text-align: center; transition: 0.25s ease;
}
.milestone-badge-box:hover {
    border-color: var(--school-orange); transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(8, 47, 135, 0.07);
}
.milestone-badge-box i {
    color: var(--school-orange); font-size: 20px; display: block; margin-bottom: 8px;
}
.milestone-badge-box strong {
    display: block; color: var(--school-blue); font-size: 12.5px;
    font-weight: 700; line-height: 1.3; margin-bottom: 3px;
}
.milestone-badge-box span {
    display: block; color: var(--school-muted); font-size: 10.5px; line-height: 1.4;
}

.hist-text-col-2 p {
    color: var(--school-muted); font-size: 15.5px;
    line-height: 1.9; margin-bottom: 20px;
}
.hist-text-col-2 p:last-child { margin-bottom: 0; }
.hist-text-col-2 strong { color: var(--school-blue); font-weight: 600; }

.hist-closing-note-2 {
    margin-top: 24px; padding: 18px 22px;
    background: var(--school-light-blue); border-radius: 14px;
    border-left: 4px solid var(--school-orange);
}
.hist-closing-note-2 p {
    margin: 0; color: var(--school-blue);
    font-family: "Playfair Display", serif; font-style: italic;
    font-size: 15px; line-height: 1.65; font-weight: 500;
}

.hist-milestones-row {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 24px; margin-top: 45px; padding-top: 40px;
    border-top: 1px dashed var(--school-border);
}
.hist-milestone-card {
    background: #ffffff; border-radius: 16px; padding: 26px 22px;
    border: 1px solid var(--school-border); text-align: left;
    transition: 0.25s ease;
}
.hist-milestone-card:hover {
    border-color: var(--school-orange);
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(8, 47, 135, 0.08);
}
.hist-milestone-card .hist-milestone-icon {
    width: 44px; height: 44px; border-radius: 10px;
    background: var(--school-light-blue); color: var(--school-blue);
    font-size: 18px; display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px; transition: 0.25s ease;
}
.hist-milestone-card:hover .hist-milestone-icon {
    background: var(--school-orange); color: #ffffff;
}
.hist-milestone-card strong {
    display: block; color: var(--school-blue);
    font-family: "Playfair Display", serif; font-size: 17px;
    font-weight: 700; margin-bottom: 6px; line-height: 1.3;
}
.hist-milestone-card span {
    display: block; color: var(--school-muted);
    font-size: 13.5px; line-height: 1.6;
}

.hist-section-3 {
    position: relative;
    padding: 80px 0 100px;
    background: var(--school-light-blue);
    overflow: hidden;
}
.hist-section-3::before {
    content: ""; position: absolute; width: 520px; height: 520px;
    bottom: -280px; right: -200px; background: #ffffff;
    border-radius: 50%; opacity: 0.5; pointer-events: none;
}
.hist-section-3::after {
    content: ""; position: absolute; width: 320px; height: 320px;
    top: -160px; left: -140px; border: 2px solid var(--school-border);
    border-radius: 50%; opacity: 0.7; pointer-events: none;
}
.hist-section-3 .container { position: relative; z-index: 2; }
.hist-section-3 .hist-heading { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.hist-section-3 .hist-label { justify-content: center; }
.hist-section-3 .hist-label::after {
    content: ""; width: 32px; height: 2px; background: var(--school-orange);
}

.hist-quote {
    margin: 0 auto 50px;
    padding: 48px 55px;
    background: var(--school-blue);
    border-radius: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    max-width: 900px;
}
.hist-quote::before {
    content: "\201C"; position: absolute; top: -20px; left: 40px;
    font-family: "Playfair Display", serif; font-size: 140px;
    line-height: 1; color: rgba(255, 255, 255, 0.08); pointer-events: none;
}
.hist-quote p {
    margin: 0; color: #fff; font-family: "Playfair Display", serif;
    font-style: italic; font-size: 22px; line-height: 1.5;
    position: relative; z-index: 1;
}

.hist-pillars {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 30px; max-width: 1000px; margin: 0 auto;
}
.hist-pillar {
    background: #fff; border-radius: 16px; padding: 28px 24px 26px;
    border: 1px solid var(--school-border); text-align: center;
    transition: 0.25s ease;
}
.hist-pillar:hover {
    border-color: var(--school-orange);
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(8, 47, 135, 0.08);
}
.hist-pillar-icon {
    width: 50px; height: 50px; margin: 0 auto 16px;
    border-radius: 50%; background: var(--school-light-blue);
    color: var(--school-blue); display: flex; align-items: center;
    justify-content: center; font-size: 22px; transition: 0.25s ease;
}
.hist-pillar:hover .hist-pillar-icon {
    background: var(--school-orange); color: #fff;
}
.hist-pillar strong {
    display: block; color: var(--school-blue);
    font-family: "Playfair Display", serif; font-size: 17px;
    font-weight: 700; margin-bottom: 8px;
}
.hist-pillar span {
    display: block; color: var(--school-muted);
    font-size: 13.5px; line-height: 1.6;
}

@media (max-width: 991.98px) {
    .history-hero { padding: 55px 0; }
    .history-hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .history-hero-text { max-width: 100%; text-align: center; }
    .history-hero-eyebrow { justify-content: center; }
    .history-hero-image { height: 300px; }

    .hist-section-1 { padding: 70px 0 40px; }
    .hist-heading { margin-bottom: 35px; }
    .hist-grid { grid-template-columns: 1fr; gap: 40px; }
    .hist-image { height: 380px; }

    .hist-section-2 { padding: 40px 0 80px; }
    .hist-block-2 { padding-top: 40px; }
    .hist-grid-2 { grid-template-columns: 1fr; gap: 40px; }
    .hist-image-2 { height: 380px; }
    .hist-milestones-row { grid-template-columns: 1fr; gap: 20px; }
    .hist-milestone-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;}

    .hist-section-3 { padding: 70px 0 80px; }
    .hist-pillars { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 767.98px) {
    .history-hero { padding: 45px 0; }
    .history-hero-text h1 { font-size: 30px; }
    .history-hero-text p { font-size: 15px; }
    .history-hero-image { height: 240px; border-radius: 16px; }

    .hist-section-1 { padding: 55px 0 35px; }
    .hist-title { font-size: 30px; }
    .hist-text p { font-size: 14.5px; }
    .hist-image { height: 300px; }
    .hist-image-accent { width: 60px; height: 60px; border-width: 4px; }
    .hist-image-wrap::after { width: 60px; height: 60px; border-width: 4px; }

    .hist-section-2 { padding: 35px 0 65px; }
    .hist-text-col-2 p { font-size: 14.5px; }
    .hist-closing-note-2 p { font-size: 14.5px; }
    .hist-image-2 { height: 300px; }
    .hist-image-accent-2 { width: 60px; height: 60px; border-width: 4px; }
    .hist-image-wrap-2::after { width: 60px; height: 60px; border-width: 4px; }
    .hist-milestones-row { margin-top: 35px; padding-top: 30px; }
    .hist-milestone-card { padding: 22px 18px; }
    .hist-milestone-card strong { font-size: 16px; }
    .hist-milestone-card span { font-size: 13px; }

    .hist-section-3 { padding: 55px 0 65px; }
    .hist-quote { padding: 32px 26px; border-radius: 16px; margin-bottom: 40px; }
    .hist-quote p { font-size: 18px; }
    .hist-pillar strong { font-size: 16px; }
    .hist-pillar span { font-size: 13px; }
}
@media (max-width: 575.98px) {
    .history-hero-text h1 { font-size: 26px; }
    .history-hero-eyebrow { font-size: 11px; letter-spacing: 2px; }
    .history-hero-eyebrow::before { width: 20px; }
    .history-hero-image { height: 190px; border-radius: 14px; }

    .hist-title { font-size: 26px; }
    .hist-label { font-size: 11px; letter-spacing: 2px; }
    .hist-label::before { width: 22px; }
    .hist-image { height: 230px; border-width: 5px; }
    .hist-accreditation { grid-template-columns: 1fr; gap: 10px; }
    .accreditation-box {
        padding: 14px 12px; display: flex; align-items: center;
        text-align: left; gap: 14px;
    }
    .accreditation-box i { margin-bottom: 0; flex-shrink: 0; }

    .hist-image-2 { height: 230px; border-width: 5px; }
    .hist-milestone-badges { grid-template-columns: 1fr; gap: 10px; }
    .milestone-badge-box {
        padding: 14px 12px; display: flex; align-items: center;
        text-align: left; gap: 14px;
    }
    .milestone-badge-box i { margin-bottom: 0; flex-shrink: 0; }
    .hist-milestone-card { padding: 18px 16px; }

    .hist-quote { padding: 28px 20px; }
    .hist-quote p { font-size: 16px; line-height: 1.55; }
    .hist-pillar { padding: 22px 18px 20px; }
}

/* =========================================================
   MANAGEMENT COMMITTEE PAGE
========================================================= */
.committee-band {
    background: var(--school-light-blue);
    padding: 70px 0 60px;
    text-align: center;
}
.committee-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--school-orange);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3.5px;
    text-transform: uppercase;
}
.committee-eyebrow::before,
.committee-eyebrow::after {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--school-orange);
}
.committee-band h1 {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 14px;
}
.committee-band h1 em {
    font-style: italic;
    color: var(--school-orange);
    font-weight: 600;
}
.committee-band p {
    color: var(--school-muted);
    font-size: 16px;
    line-height: 1.7;
    max-width: 640px;
    margin: 0 auto;
}

.committee-table-section {
    padding: 80px 0 60px;
    background: #ffffff;
}
.committee-table-heading {
    text-align: center;
    margin-bottom: 40px;
}
.committee-table-heading h2 {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 10px;
}
.committee-table-heading h2 em {
    font-style: italic;
    color: var(--school-orange);
    font-weight: 600;
}
.committee-table-heading p {
    color: var(--school-muted);
    font-size: 15px;
    margin: 0;
}

.committee-table-wrap {
    overflow-x: auto;
    border-radius: 18px;
    border: 1px solid var(--school-border);
    background: #ffffff;
    box-shadow: 0 15px 40px rgba(8, 47, 135, 0.06);
}

.committee-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 880px;
}

.committee-table thead th {
    background: var(--school-blue);
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 18px 16px;
    text-align: left;
    white-space: nowrap;
}

.committee-table tbody td {
    padding: 18px 16px;
    color: var(--school-text);
    font-size: 14px;
    line-height: 1.55;
    border-bottom: 1px solid var(--school-border);
    vertical-align: top;
}

.committee-table tbody tr:nth-child(even) td {
    background: #fafcff;
}

.committee-table tbody tr:last-child td {
    border-bottom: 0;
}

.committee-table tbody tr:hover td {
    background: var(--school-light-blue);
}

.committee-table .col-sl {
    width: 60px;
    text-align: center;
    color: var(--school-orange);
    font-weight: 700;
    font-size: 14px;
}

.committee-table .name-cell {
    font-weight: 700;
    color: var(--school-blue);
    font-size: 14.5px;
}

.committee-table .post-cell {
    display: inline-block;
    background: #fff3e7;
    color: var(--school-orange);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 5px 12px;
    border-radius: 30px;
    text-transform: uppercase;
}

.committee-table .post-cell.president {
    background: var(--school-blue);
    color: #ffffff;
}

.committee-table .mob-cell a {
    color: var(--school-blue);
    font-weight: 600;
    transition: color 0.2s ease;
}
.committee-table .mob-cell a:hover {
    color: var(--school-orange);
}

.committee-table .address-cell {
    color: var(--school-muted);
    font-size: 13px;
    line-height: 1.6;
}

.committee-cards-section {
    background: var(--school-light-blue);
    padding: 90px 0 100px;
}
.committee-cards-heading {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 55px;
}
.committee-cards-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--school-orange);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.committee-cards-eyebrow::before,
.committee-cards-eyebrow::after {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--school-orange);
}
.committee-cards-heading h2 {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 12px;
}
.committee-cards-heading h2 em {
    font-style: italic;
    color: var(--school-orange);
    font-weight: 600;
}
.committee-cards-heading p {
    color: var(--school-muted);
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

.committee-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 22px;
}

.member-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    text-align: center;
    box-shadow: 0 8px 25px rgba(8, 47, 135, 0.05);
}
.member-card:hover {
    transform: translateY(-6px);
    border-color: var(--school-orange);
    box-shadow: 0 20px 45px rgba(8, 47, 135, 0.12);
}

.member-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: linear-gradient(135deg, #dfeaf6 0%, #f0f6fc 100%);
}
.member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.member-card:hover .member-photo img {
    transform: scale(1.06);
}

.member-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--school-orange);
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 20px;
    box-shadow: 0 6px 15px rgba(245, 130, 32, 0.35);
}
.member-card.president .member-badge {
    background: var(--school-blue);
    box-shadow: 0 6px 15px rgba(8, 47, 135, 0.35);
}

.member-body {
    padding: 18px 16px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.member-name {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 5px;
}
.member-post {
    color: var(--school-orange);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.member-info {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--school-border);
}
.member-info-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--school-muted);
}
.member-info-row i {
    color: var(--school-orange);
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 1px;
}
.member-info-row a {
    color: var(--school-blue);
    font-weight: 600;
}
.member-info-row a:hover {
    color: var(--school-orange);
}

@media (max-width: 991.98px) {
    .committee-band { padding: 55px 0 45px; }
    .committee-table-section { padding: 60px 0 50px; }
    .committee-cards-section { padding: 70px 0 80px; }
    .committee-cards-heading { margin-bottom: 45px; }
}
@media (max-width: 767.98px) {
    .committee-band { padding: 45px 0 35px; }
    .committee-band h1 { font-size: 30px; }
    .committee-band p { font-size: 15px; }

    .committee-table-section { padding: 50px 0 40px; }
    .committee-table-heading h2 { font-size: 24px; }

    .committee-cards-section { padding: 55px 0 65px; }
    .committee-cards-heading h2 { font-size: 26px; }

    .committee-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 18px;
    }
}
@media (max-width: 575.98px) {
    .committee-band h1 { font-size: 26px; }
    .committee-eyebrow { font-size: 11px; letter-spacing: 2px; }
    .committee-eyebrow::before,
    .committee-eyebrow::after { width: 18px; }

    .committee-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 14px;
    }
    .member-body { padding: 15px 12px 16px; }
    .member-name { font-size: 13.5px; }
    .member-post { font-size: 9.5px; letter-spacing: 1px; margin-bottom: 12px; }
    .member-info { gap: 8px; padding-top: 12px; }
    .member-info-row { font-size: 11px; gap: 7px; }
    .member-badge { font-size: 8px; padding: 4px 8px; top: 8px; left: 8px; }
}

/* =========================================================
   MANDATORY DISCLOSURE — PAGE STYLES
========================================================= */
:root {
    --pdf-red: #dc2626;
}

/* HERO VISUAL */
.md-hero-wrap {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 480px;
    margin: 0 auto;
}
.md-hero-wrap::before {
    content: "";
    position: absolute;
    top: 10px; left: 0;
    width: 150px; height: 150px;
    background-image: radial-gradient(rgba(8, 47, 135, 0.18) 1.8px, transparent 1.8px);
    background-size: 15px 15px;
    z-index: 1;
    pointer-events: none;
}
.md-hero-wrap::after {
    content: "";
    position: absolute;
    bottom: -10px; left: -10px;
    width: 130px; height: 130px;
    border: 24px solid rgba(245, 130, 32, 0.15);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}
.md-ring-blue {
    position: absolute;
    top: 10px; right: 20px;
    width: 140px; height: 140px;
    border: 26px solid rgba(8, 47, 135, 0.10);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}
.md-card {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 290px;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 30px 70px rgba(8, 47, 135, 0.20),
                0 10px 25px rgba(8, 47, 135, 0.06);
    overflow: hidden;
    z-index: 3;
    transition: transform 0.4s ease;
}
.md-card:hover {
    transform: translate(-50%, -50%) translateY(-6px);
}
.md-card-head {
    position: relative;
    background: linear-gradient(135deg, var(--school-blue) 0%, var(--school-dark-blue) 100%);
    padding: 22px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    overflow: hidden;
}
.md-card-head::after {
    content: "";
    position: absolute;
    right: -40px; top: -50px;
    width: 130px; height: 130px;
    border: 24px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    pointer-events: none;
}
.md-card-icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    position: relative;
    z-index: 1;
}
.md-card-head-text { position: relative; z-index: 1; }
.md-card-head-text span {
    display: block;
    color: var(--school-orange);
    font: 700 9.5px "Inter", sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.md-card-head-text strong {
    display: block;
    color: #ffffff;
    font: 700 16px "Playfair Display", serif;
    line-height: 1.2;
}
.md-card-body { padding: 18px 22px 20px; }
.md-doc-line {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--school-border);
}
.md-doc-line:last-child { border-bottom: none; }
.md-doc-check {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 8px;
    background: #e7f5ee;
    color: #198754;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}
.md-doc-line:nth-child(2) .md-doc-check { background: #fff3e7; color: var(--school-orange); }
.md-doc-line:nth-child(3) .md-doc-check { background: #eef5fc; color: var(--school-blue); }
.md-doc-line:nth-child(4) .md-doc-check { background: #f3e9ff; color: #6f42c1; }
.md-doc-text { flex: 1; min-width: 0; }
.md-doc-text strong {
    display: block;
    font: 600 12.5px "Inter", sans-serif;
    color: var(--school-blue);
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.md-doc-bar {
    display: block;
    height: 5px;
    border-radius: 3px;
    background: var(--school-border);
    width: 100%;
    overflow: hidden;
    position: relative;
}
.md-doc-bar::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--school-orange), #ffb06a);
}
.md-doc-line:nth-child(1) .md-doc-bar::after { width: 82%; }
.md-doc-line:nth-child(2) .md-doc-bar::after { width: 65%; }
.md-doc-line:nth-child(3) .md-doc-bar::after { width: 90%; }
.md-doc-line:nth-child(4) .md-doc-bar::after { width: 55%; }
.md-card-foot {
    padding: 14px 20px;
    background: #f8fafd;
    border-top: 1px solid var(--school-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.md-card-foot-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--school-blue);
    font: 700 10px "Inter", sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.md-card-foot-label i { color: var(--school-orange); font-size: 12px; }
.md-card-foot-dots { display: flex; gap: 4px; }
.md-card-foot-dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--school-border);
}
.md-card-foot-dots span:nth-child(1) { background: var(--school-orange); width: 16px; border-radius: 4px; }
.md-card-foot-dots span:nth-child(2) { background: var(--school-blue); }
.md-card-foot-dots span:nth-child(3) { background: #198754; }

.md-float {
    position: absolute;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 16px 38px rgba(8, 47, 135, 0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    z-index: 5;
    transition: transform 0.4s ease;
}
.md-float:hover { transform: translateY(-4px); }
.md-float-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.md-float-text { display: flex; flex-direction: column; line-height: 1.15; }
.md-float-text small {
    font: 700 8.5px "Inter", sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--school-muted);
    margin-bottom: 3px;
}
.md-float-text strong {
    font: 700 13px "Playfair Display", serif;
    color: var(--school-blue);
    white-space: nowrap;
}
.md-float-1 { top: 30px; left: 0; animation: mdFloatY 4s ease-in-out infinite; }
.md-float-1 .md-float-icon { background: #fff3e7; color: var(--school-orange); }
.md-float-2 { bottom: 40px; right: 0; animation: mdFloatY 4s ease-in-out infinite; animation-delay: 1.2s; }
.md-float-2 .md-float-icon { background: #e7f5ee; color: #198754; }
@keyframes mdFloatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

/* DOCUMENTS SECTION */
.doc-section {
    background: #ffffff;
    padding: 90px 0 110px;
    position: relative;
    overflow: hidden;
}
.doc-section::before {
    content: "";
    position: absolute;
    top: -200px; left: -200px;
    width: 460px; height: 460px;
    border: 68px solid rgba(8, 47, 135, 0.03);
    border-radius: 50%;
    pointer-events: none;
}
.doc-section::after {
    content: "";
    position: absolute;
    bottom: -180px; right: -160px;
    width: 360px; height: 360px;
    background: rgba(245, 130, 32, 0.05);
    border-radius: 50%;
    pointer-events: none;
}
.doc-section .container {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1400px;
}

.doc-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 46px;
}
.doc-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--school-orange);
    font: 600 12px "Inter", sans-serif;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}
.doc-title {
    margin: 0 0 14px;
    color: var(--school-blue);
    font: 700 clamp(26px, 3vw, 38px)/1.15 "Playfair Display", serif;
    letter-spacing: -0.3px;
}
.doc-title em { color: var(--school-orange); font-weight: 600; font-style: italic; }
.doc-sub {
    margin: 0;
    color: var(--school-muted);
    font: 400 15px/1.7 "Inter", sans-serif;
}

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

.doc-card {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 20px rgba(8, 47, 135, 0.05);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.doc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 44px rgba(8, 47, 135, 0.12);
    border-color: #cfdcec;
}

.doc-preview {
    position: relative;
    background: linear-gradient(180deg, #f2f7fc 0%, #e8eff8 100%);
    padding: 22px 22px 0;
    height: 240px;
    overflow: hidden;
    border-bottom: 1px solid var(--school-border);
}
.doc-page {
    position: relative;
    background: #ffffff;
    border-radius: 6px;
    height: 100%;
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(8, 47, 135, 0.10);
}
.doc-page::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--school-blue), var(--school-orange));
}

.doc-page-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef2f7;
    margin-bottom: 14px;
}
.doc-page-logo {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--school-blue), var(--school-dark-blue));
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--school-orange);
    font-size: 11px;
}
.doc-page-title-block { flex: 1; min-width: 0; }
.doc-page-title-block span {
    display: block;
    height: 5px;
    border-radius: 2px;
    background: var(--school-blue);
}
.doc-page-title-block span:first-child {
    width: 72%;
    margin-bottom: 4px;
    opacity: 0.85;
}
.doc-page-title-block span:last-child {
    width: 42%;
    background: #b6c2d4;
}

.doc-page-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.doc-page-lines span {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: #dfe6ef;
}
.doc-page-lines span:nth-child(1) { width: 100%; }
.doc-page-lines span:nth-child(2) { width: 90%; }
.doc-page-lines span:nth-child(3) { width: 76%; }
.doc-page-lines span:nth-child(4) { width: 100%; }
.doc-page-lines span:nth-child(5) { width: 62%; background: rgba(245, 130, 32, 0.35); margin-top: 4px; }
.doc-page-lines span:nth-child(6) { width: 88%; }
.doc-page-lines span:nth-child(7) { width: 70%; }
.doc-page-lines span:nth-child(8) { width: 92%; }

.doc-page-seal {
    position: absolute;
    right: 14px;
    bottom: 22px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px dashed rgba(245, 130, 32, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--school-orange);
    font-size: 15px;
    background: rgba(245, 130, 32, 0.06);
    transform: rotate(-12deg);
}

.doc-page-num {
    position: absolute;
    left: 18px;
    bottom: 6px;
    color: #a7b3c4;
    font: 600 8px "Inter", sans-serif;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.doc-pdf-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    background: var(--pdf-red);
    color: #ffffff;
    font: 800 9px "Inter", sans-serif;
    letter-spacing: 1.2px;
    border-radius: 4px;
    z-index: 3;
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.25);
}
.doc-pdf-badge i { font-size: 10px; }

.doc-pages-count {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    background: rgba(8, 47, 135, 0.85);
    color: #ffffff;
    font: 700 9.5px "Inter", sans-serif;
    letter-spacing: 0.5px;
    border-radius: 4px;
    z-index: 3;
}
.doc-pages-count i { font-size: 10px; }

.doc-card-body {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.doc-card-meta-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.doc-card-ref {
    color: var(--school-orange);
    font: 700 10px "Inter", sans-serif;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.doc-card-tag {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--school-light-blue);
    color: var(--school-blue);
    font: 700 9.5px "Inter", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}
.doc-card-body h3 {
    margin: 0 0 16px;
    color: var(--school-blue);
    font: 700 17px/1.35 "Playfair Display", serif;
    letter-spacing: -0.2px;
}

.doc-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--school-border);
    margin-top: auto;
}
.doc-card-size {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--school-muted);
    font: 600 11px "Inter", sans-serif;
    letter-spacing: 0.5px;
}
.doc-card-size i {
    color: var(--school-blue);
    font-size: 13px;
}

.doc-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 16px;
    background: var(--school-blue);
    color: #ffffff;
    border-radius: 999px;
    font: 700 10.5px "Inter", sans-serif;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}
.doc-download-btn:hover {
    background: var(--school-orange);
    color: #ffffff;
    transform: translateX(2px);
    box-shadow: 0 8px 20px rgba(245, 130, 32, 0.32);
}
.doc-download-btn i { font-size: 12px; }

.doc-notice {
    margin-top: 48px;
    background: var(--school-light-blue);
    border: 1px dashed rgba(8, 47, 135, 0.35);
    border-radius: 16px;
    padding: 24px 30px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.doc-notice-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: #ffffff;
    color: var(--school-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 8px 20px rgba(8, 47, 135, 0.08);
}
.doc-notice-body strong {
    display: block;
    color: var(--school-blue);
    font: 700 15px "Playfair Display", serif;
    margin-bottom: 4px;
}
.doc-notice-body p {
    margin: 0;
    color: var(--school-muted);
    font: 400 13.5px/1.6 "Inter", sans-serif;
}
.doc-notice-body a {
    color: var(--school-orange);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(245, 130, 32, 0.5);
}
.doc-notice-body a:hover {
    color: var(--school-blue);
    border-bottom-color: var(--school-blue);
}

@media (max-width: 1199.98px) {
    .md-hero-wrap { max-width: 440px; height: 440px; }
    .md-card { width: 270px; }
    .doc-section { padding: 80px 0 96px; }
    .doc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991.98px) {
    .md-hero-wrap { max-width: 460px; height: 460px; margin-top: 20px; }
}

@media (max-width: 767.98px) {
    .md-hero-wrap { max-width: 380px; height: 400px; }
    .md-card { width: 260px; }
    .md-card-head { padding: 18px 20px; }
    .md-card-head-text strong { font-size: 14px; }
    .md-card-head-icon { width: 40px; height: 40px; font-size: 18px; }
    .md-card-body { padding: 14px 18px 16px; }
    .md-doc-line { padding: 9px 0; gap: 10px; }
    .md-doc-check { width: 24px; height: 24px; font-size: 12px; }
    .md-doc-text strong { font-size: 12px; }

    .md-ring-blue { width: 110px; height: 110px; border-width: 20px; }
    .md-float { padding: 9px 13px; gap: 8px; }
    .md-float-icon { width: 30px; height: 30px; font-size: 13px; }
    .md-float-text strong { font-size: 11.5px; }
    .md-float-text small { font-size: 7.5px; letter-spacing: 1px; }

    .doc-section { padding: 60px 0 70px; }
    .doc-head { margin-bottom: 34px; }
    .doc-sub { font-size: 14px; }

    .doc-grid { grid-template-columns: 1fr; gap: 20px; }
    .doc-preview { height: 230px; padding: 20px 20px 0; }

    .doc-notice {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px 24px;
        gap: 14px;
    }
}

@media (max-width: 575.98px) {
    .md-hero-wrap { max-width: 300px; height: 360px; }
    .md-card { width: 240px; }
    .md-card-head { padding: 16px 18px; }
    .md-card-head-text strong { font-size: 13px; }
    .md-card-head-text span { font-size: 8.5px; letter-spacing: 1.6px; }
    .md-card-head-icon { width: 36px; height: 36px; font-size: 16px; border-radius: 10px; }

    .md-doc-line { padding: 8px 0; gap: 9px; }
    .md-doc-check { width: 22px; height: 22px; font-size: 11px; border-radius: 7px; }
    .md-doc-text strong { font-size: 11.5px; }

    .md-float-1 { top: 5px; left: -5px; }
    .md-float-2 { bottom: 10px; right: -5px; }
    .md-float { padding: 8px 11px; }
    .md-float-icon { width: 26px; height: 26px; font-size: 12px; border-radius: 8px; }
    .md-float-text strong { font-size: 11px; }

    .md-ring-blue { width: 90px; height: 90px; border-width: 16px; top: 0; right: 5px; }
    .md-hero-wrap::before { width: 100px; height: 100px; }
    .md-hero-wrap::after { width: 100px; height: 100px; border-width: 18px; }

    .doc-title { font-size: 24px; }
    .doc-sub { font-size: 13.5px; }

    .doc-preview { height: 215px; padding: 18px 18px 0; }
    .doc-page { padding: 14px 16px 16px; }
    .doc-page-seal { width: 34px; height: 34px; font-size: 13px; bottom: 20px; }
    .doc-page-num { font-size: 7.5px; bottom: 5px; }

    .doc-card-body { padding: 18px 20px; }
    .doc-card-body h3 { font-size: 15.5px; }
    .doc-card-foot { flex-wrap: wrap; gap: 12px; }
    .doc-download-btn { flex: 1; justify-content: center; }
}

/* =========================================================
   NEWS & EVENTS — PAGE STYLES
========================================================= */
.news-hero-wrap {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 480px;
    margin: 0 auto;
}
.news-hero-wrap::before {
    content: "";
    position: absolute;
    top: 10px; left: 0;
    width: 150px; height: 150px;
    background-image: radial-gradient(rgba(8, 47, 135, 0.18) 1.8px, transparent 1.8px);
    background-size: 15px 15px;
    z-index: 1;
    pointer-events: none;
}
.news-hero-wrap::after {
    content: "";
    position: absolute;
    bottom: -10px; left: -10px;
    width: 130px; height: 130px;
    border: 24px solid rgba(245, 130, 32, 0.15);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}
.news-ring-blue {
    position: absolute;
    top: 10px; right: 20px;
    width: 140px; height: 140px;
    border: 26px solid rgba(8, 47, 135, 0.10);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}
.news-card {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 30px 70px rgba(8, 47, 135, 0.20),
                0 10px 25px rgba(8, 47, 135, 0.06);
    overflow: hidden;
    z-index: 3;
    transition: transform 0.4s ease;
}
.news-card:hover {
    transform: translate(-50%, -50%) translateY(-6px);
}
.news-card-head {
    position: relative;
    background: linear-gradient(135deg, var(--school-blue) 0%, var(--school-dark-blue) 100%);
    padding: 22px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    overflow: hidden;
}
.news-card-head::after {
    content: "";
    position: absolute;
    right: -40px; top: -50px;
    width: 130px; height: 130px;
    border: 24px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    pointer-events: none;
}
.news-card-icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    position: relative;
    z-index: 1;
}
.news-card-head-text { position: relative; z-index: 1; }
.news-card-head-text span {
    display: block;
    color: var(--school-orange);
    font: 700 9.5px "Inter", sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.news-card-head-text strong {
    display: block;
    color: #ffffff;
    font: 700 16px "Playfair Display", serif;
    line-height: 1.2;
}

.news-card-body { padding: 12px 8px; }
.news-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 14px;
    border-radius: 12px;
    transition: background 0.3s ease;
}
.news-item:hover { background: var(--school-light-blue); }
.news-date {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff3e7;
    color: var(--school-orange);
    font-family: "Inter", sans-serif;
    line-height: 1;
}
.news-date strong { font-size: 15px; font-weight: 700; }
.news-date small {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 2px;
}
.news-item:nth-child(2) .news-date { background: #eef5fc; color: var(--school-blue); }
.news-item:nth-child(3) .news-date { background: #e7f5ee; color: #198754; }

.news-info { min-width: 0; flex: 1; }
.news-info strong {
    display: block;
    font: 600 13.5px "Inter", sans-serif;
    color: var(--school-blue);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.news-info small {
    display: block;
    font: 500 11px "Inter", sans-serif;
    color: var(--school-muted);
}

.news-card-foot {
    padding: 14px 20px;
    background: #f8fafd;
    border-top: 1px solid var(--school-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.news-card-foot-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--school-blue);
    font: 700 10px "Inter", sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.news-card-foot-label i { color: var(--school-orange); font-size: 12px; }
.news-card-foot-dots { display: flex; gap: 4px; }
.news-card-foot-dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--school-border);
}
.news-card-foot-dots span:nth-child(1) { background: var(--school-orange); width: 16px; border-radius: 4px; }
.news-card-foot-dots span:nth-child(2) { background: var(--school-blue); }
.news-card-foot-dots span:nth-child(3) { background: #6f42c1; }

.news-float {
    position: absolute;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 16px 38px rgba(8, 47, 135, 0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    z-index: 5;
    transition: transform 0.4s ease;
}
.news-float:hover { transform: translateY(-4px); }
.news-float-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.news-float-text { display: flex; flex-direction: column; line-height: 1.15; }
.news-float-text small {
    font: 700 8.5px "Inter", sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--school-muted);
    margin-bottom: 3px;
}
.news-float-text strong {
    font: 700 13px "Playfair Display", serif;
    color: var(--school-blue);
    white-space: nowrap;
}

.news-float-1 { top: 20px; left: 0; animation: newsFloatY 4s ease-in-out infinite; }
.news-float-1 .news-float-icon { background: #fff3e7; color: var(--school-orange); }
.news-float-2 { bottom: 30px; right: 0; animation: newsFloatY 4s ease-in-out infinite; animation-delay: 1.2s; }
.news-float-2 .news-float-icon { background: #e7f5ee; color: #198754; }

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

/* NEWS SECTION */
.nw-section { padding: 90px 0 100px; position: relative; overflow: hidden; }
.nw-section.alt { background: var(--school-light-blue); }
.nw-section .container { width: 90%; max-width: 1600px; position: relative; z-index: 2; }

.nw-head { text-align: center; max-width: 680px; margin: 0 auto 46px; }
.nw-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--school-orange);
    font: 600 12px "Inter", sans-serif;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}
.nw-title {
    margin: 0 0 12px;
    color: var(--school-blue);
    font: 700 clamp(26px, 3vw, 38px)/1.15 "Playfair Display", serif;
}
.nw-title em { color: var(--school-orange); font-weight: 600; }
.nw-sub {
    margin: 0;
    color: var(--school-muted);
    font: 400 15px/1.7 "Inter", sans-serif;
}

.nw-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}
.nw-card {
    background: #fff;
    border: 1px solid var(--school-border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(8, 47, 135, 0.05);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    display: flex;
    flex-direction: column;
}
.nw-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px rgba(8, 47, 135, 0.12);
}

.nw-banner {
    position: relative;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.nw-banner::before {
    content: "";
    position: absolute;
    right: -40px; top: -50px;
    width: 130px; height: 130px;
    border: 22px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    pointer-events: none;
}
.nw-banner-icon {
    font-size: 52px;
    position: relative;
    z-index: 2;
    transition: transform 0.4s ease;
}
.nw-card:hover .nw-banner-icon {
    transform: scale(1.12) rotate(-6deg);
}

.nw-banner.blue   { background: linear-gradient(135deg, #eef5fc, #cfdff5); }
.nw-banner.orange { background: linear-gradient(135deg, #fff3e7, #ffdcb8); }
.nw-banner.green  { background: linear-gradient(135deg, #e7f5ee, #c5e8d6); }
.nw-banner.purple { background: linear-gradient(135deg, #f3e9ff, #e0caff); }
.nw-banner.red    { background: linear-gradient(135deg, #fdf2f2, #f6d5d5); }
.nw-banner.yellow { background: linear-gradient(135deg, #fffae6, #ffedb3); }

.nw-banner.blue   .nw-banner-icon { color: var(--school-blue); }
.nw-banner.orange .nw-banner-icon { color: var(--school-orange); }
.nw-banner.green  .nw-banner-icon { color: #198754; }
.nw-banner.purple .nw-banner-icon { color: #6f42c1; }
.nw-banner.red    .nw-banner-icon { color: #d64545; }
.nw-banner.yellow .nw-banner-icon { color: #b5870a; }

.nw-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff;
    color: var(--school-blue);
    font: 700 10px "Inter", sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    box-shadow: 0 6px 14px rgba(8, 47, 135, 0.10);
    z-index: 3;
}
.nw-tag.orange { color: var(--school-orange); }
.nw-tag.green  { color: #198754; }
.nw-tag.purple { color: #6f42c1; }
.nw-tag.red    { color: #d64545; }
.nw-tag.yellow { color: #b5870a; }

.nw-date {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--school-muted);
    font: 700 10px "Inter", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 6px 14px rgba(8, 47, 135, 0.08);
    z-index: 3;
}

.nw-body {
    padding: 22px 22px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.nw-body h3 {
    margin: 0 0 10px;
    font: 700 17px/1.3 "Playfair Display", serif;
    color: var(--school-blue);
}
.nw-body p {
    margin: 0 0 18px;
    color: var(--school-muted);
    font: 400 13.5px/1.65 "Inter", sans-serif;
    flex: 1;
}
.nw-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--school-orange);
    font: 700 11.5px "Inter", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    transition: gap 0.3s ease, color 0.3s ease;
}
.nw-link:hover {
    gap: 12px;
    color: var(--school-blue);
}

/* EVENTS LIST */
.ev-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 960px;
    margin: 0 auto;
}
.ev-item {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 24px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--school-border);
    border-radius: 18px;
    padding: 22px 26px;
    box-shadow: 0 10px 30px rgba(8, 47, 135, 0.05);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.ev-item:hover {
    transform: translateX(6px);
    box-shadow: 0 20px 46px rgba(8, 47, 135, 0.12);
    border-color: var(--school-orange);
}

.ev-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--school-blue), var(--school-dark-blue));
    color: #fff;
    line-height: 1;
    box-shadow: 0 10px 22px rgba(8, 47, 135, 0.22);
}
.ev-date strong {
    font: 700 26px/1 "Playfair Display", serif;
}
.ev-date strong.small {
    font-size: 18px;
}
.ev-date small {
    margin-top: 4px;
    font: 700 10px "Inter", sans-serif;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}

.ev-body h3 {
    margin: 0 0 8px;
    font: 700 18px/1.3 "Playfair Display", serif;
    color: var(--school-blue);
}
.ev-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    color: var(--school-muted);
    font: 500 12.5px "Inter", sans-serif;
}
.ev-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.ev-meta i {
    color: var(--school-orange);
    font-size: 13px;
}

.ev-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--school-light-blue);
    color: var(--school-blue);
    font-size: 18px;
    text-decoration: none;
    transition: all 0.35s ease;
    flex-shrink: 0;
}
.ev-item:hover .ev-cta {
    background: var(--school-orange);
    color: #fff;
    transform: rotate(-45deg);
    box-shadow: 0 10px 22px rgba(245, 130, 32, 0.35);
}

.ev-item.ev-highlight {
    background: linear-gradient(135deg, #fff9f0 0%, #ffffff 100%);
    border-color: rgba(245, 130, 32, 0.4);
}
.ev-item.ev-highlight .ev-date {
    background: linear-gradient(135deg, var(--school-orange), #ffb06a);
    box-shadow: 0 10px 22px rgba(245, 130, 32, 0.3);
}
.ev-item.ev-highlight .ev-cta {
    background: #fff3e7;
    color: var(--school-orange);
}
.ev-item.ev-highlight:hover .ev-cta {
    background: var(--school-orange);
    color: #fff;
}
.ev-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: #fff3e7;
    color: var(--school-orange);
    font: 700 9.5px "Inter", sans-serif;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

@media (max-width: 1199.98px) {
    .news-hero-wrap { max-width: 440px; height: 440px; }
    .news-card { width: 280px; }
    .nw-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991.98px) {
    .news-hero-wrap { max-width: 460px; height: 460px; margin-top: 20px; }
    .nw-section { padding: 70px 0 80px; }
    .nw-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .ev-item {
        grid-template-columns: 90px 1fr auto;
        gap: 18px;
        padding: 20px 22px;
    }
}

@media (max-width: 767.98px) {
    .news-hero-wrap { max-width: 380px; height: 400px; }
    .news-card { width: 260px; }
    .news-card-head { padding: 18px 20px; }
    .news-card-head-text strong { font-size: 14px; }
    .news-card-head-icon { width: 40px; height: 40px; font-size: 18px; }
    .news-item { padding: 10px 12px; gap: 12px; }
    .news-date { width: 40px; height: 40px; }
    .news-date strong { font-size: 14px; }
    .news-info strong { font-size: 12.5px; }

    .news-ring-blue { width: 110px; height: 110px; border-width: 20px; }
    .news-float { padding: 9px 13px; gap: 8px; }
    .news-float-icon { width: 30px; height: 30px; font-size: 13px; }
    .news-float-text strong { font-size: 11.5px; }
    .news-float-text small { font-size: 7.5px; letter-spacing: 1px; }

    .nw-section { padding: 55px 0 65px; }
    .nw-section .container { width: 95%; }
    .nw-head { margin-bottom: 32px; }
    .nw-sub { font-size: 14px; }
    .nw-grid { grid-template-columns: 1fr; gap: 18px; }
    .nw-banner { height: 130px; }
    .nw-banner-icon { font-size: 44px; }
    .nw-body { 
        padding: 20px 20px 22px; 
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .nw-body h3 { font-size: 16px; }

    .ev-item {
        grid-template-columns: 80px 1fr;
        gap: 16px;
        padding: 18px 18px;
    }
    .ev-cta { display: none; }
    .ev-date strong { font-size: 22px; }
    .ev-date strong.small { font-size: 15px; }
    .ev-date small { font-size: 9px; }
    .ev-body h3 { font-size: 16px; }
    .ev-meta { gap: 12px; }
    .ev-meta span { font-size: 11.5px; }
}

@media (max-width: 575.98px) {
    .news-hero-wrap { max-width: 300px; height: 360px; }
    .news-card { width: 240px; }
    .news-card-head { padding: 16px 18px; }
    .news-card-head-text strong { font-size: 13px; }
    .news-card-head-text span { font-size: 8.5px; letter-spacing: 1.6px; }
    .news-card-head-icon { width: 36px; height: 36px; font-size: 16px; border-radius: 10px; }

    .news-item { padding: 9px 10px; gap: 10px; }
    .news-date { width: 36px; height: 36px; border-radius: 10px; }
    .news-date strong { font-size: 13px; }
    .news-date small { font-size: 7.5px; }
    .news-info strong { font-size: 12px; }
    .news-info small { font-size: 10px; }

    .news-float-1 { top: 5px; left: -5px; }
    .news-float-2 { bottom: 10px; right: -5px; }
    .news-float { padding: 8px 11px; }
    .news-float-icon { width: 26px; height: 26px; font-size: 12px; border-radius: 8px; }
    .news-float-text strong { font-size: 11px; }

    .news-ring-blue { width: 90px; height: 90px; border-width: 16px; top: 0; right: 5px; }
    .news-hero-wrap::before { width: 100px; height: 100px; }
    .news-hero-wrap::after { width: 100px; height: 100px; border-width: 18px; }

    .ev-item {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 18px 16px;
    }
    .ev-date {
        flex-direction: row;
        gap: 10px;
        padding: 10px 0;
    }
    .ev-date strong { font-size: 20px; }
    .ev-date strong.small { font-size: 14px; }
    .ev-date small { margin-top: 0; }
}

/* =========================================================
   NON-TEACHING STAFF — DIRECTORY & HERO
========================================================= */
.fac-visual {
    position: relative;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
}
.fac-card {
    position: relative;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 25px 55px rgba(8, 47, 135, 0.16),
                0 8px 18px rgba(8, 47, 135, 0.07);
    overflow: hidden;
    z-index: 3;
}
.fac-card-head {
    background: linear-gradient(135deg, var(--school-blue) 0%, var(--school-dark-blue) 100%);
    padding: 20px 24px 18px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
}
.fac-card-head::after {
    content: "";
    position: absolute;
    right: -40px; top: -40px;
    width: 130px; height: 130px;
    border: 26px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    pointer-events: none;
}
.fac-card-head-icon {
    flex-shrink: 0;
    width: 42px; height: 42px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    position: relative;
    z-index: 1;
}
.fac-card-head-text { position: relative; z-index: 1; }
.fac-card-head-text span {
    display: block;
    color: var(--school-orange);
    font-family: "Inter", sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.fac-card-head-text strong {
    display: block;
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}
.fac-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    padding: 6px;
}
.fac-tile {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 12px;
    border-radius: 12px;
    transition: 0.3s ease;
}
.fac-tile:hover { background: var(--school-light-blue); }
.fac-tile-icon {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: 0.3s ease;
}
.fac-tile:nth-child(1) .fac-tile-icon { background: #fff3e7; color: var(--school-orange); }
.fac-tile:nth-child(2) .fac-tile-icon { background: var(--school-light-blue); color: var(--school-blue); }
.fac-tile:nth-child(3) .fac-tile-icon { background: #f3e9ff; color: #6f42c1; }
.fac-tile:nth-child(4) .fac-tile-icon { background: #e7f5ee; color: #198754; }
.fac-tile:nth-child(5) .fac-tile-icon { background: #fdf2f2; color: #d64545; }
.fac-tile:nth-child(6) .fac-tile-icon { background: #fffae6; color: #b5870a; }
.fac-tile:hover .fac-tile-icon { transform: rotate(-6deg) scale(1.05); }
.fac-tile-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.fac-tile-text strong {
    display: block;
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 2px;
}
.fac-tile-text small {
    display: block;
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.fac-card-foot {
    padding: 14px 20px 16px;
    background: #f8fafd;
    border-top: 1px solid var(--school-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.fac-card-foot-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--school-blue);
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.fac-card-foot-label i { color: var(--school-orange); font-size: 12px; }
.fac-card-foot-dots { display: flex; gap: 4px; }
.fac-card-foot-dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--school-border);
}
.fac-card-foot-dots span:nth-child(1) { background: var(--school-orange); width: 16px; border-radius: 4px; }
.fac-card-foot-dots span:nth-child(2) { background: var(--school-blue); }
.fac-card-foot-dots span:nth-child(3) { background: #6f42c1; }
.fac-card-foot-dots span:nth-child(4) { background: #198754; }
.fac-card-foot-dots span:nth-child(5) { background: #d64545; }
.fac-card-foot-dots span:nth-child(6) { background: #b5870a; }

.fac-float {
    position: absolute;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(8, 47, 135, 0.14);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    z-index: 5;
    transition: transform 0.4s ease;
}
.fac-float:hover { transform: translateY(-3px); }
.fac-float-icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.fac-float-text { display: flex; flex-direction: column; line-height: 1.1; }
.fac-float-text small {
    font-family: "Inter", sans-serif;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--school-muted);
    margin-bottom: 3px;
}
.fac-float-text strong {
    font-family: "Playfair Display", serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--school-blue);
    white-space: nowrap;
}
.fac-float-1 { top: -34px; left: -22px; animation: facFloatY 4s ease-in-out infinite; }
.fac-float-1 .fac-float-icon { background: #fff3e7; color: var(--school-orange); }
.fac-float-2 { bottom: -38px; right: -22px; animation: facFloatY 4s ease-in-out infinite; animation-delay: 1.2s; }
.fac-float-2 .fac-float-icon { background: var(--school-light-blue); color: var(--school-blue); }
.fac-float-3 { top: 46%; right: -54px; animation: facFloatX 5s ease-in-out infinite; animation-delay: 0.6s; }
.fac-float-3 .fac-float-icon { background: #e7f5ee; color: #198754; }
@keyframes facFloatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes facFloatX {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-5px); }
}
.fac-visual::before {
    content: "";
    position: absolute;
    top: 24px;
    left: -22px;
    width: 130px; height: 130px;
    background-image: radial-gradient(rgba(8, 47, 135, 0.16) 1.6px, transparent 1.6px);
    background-size: 14px 14px;
    z-index: 1;
    pointer-events: none;
}

.fac-staff {
    position: relative;
    background: #ffffff;
    padding: 90px 0 100px;
    overflow: hidden;
}
.fac-staff::before {
    content: "";
    position: absolute;
    top: -220px;
    left: -200px;
    width: 480px;
    height: 480px;
    border: 72px solid rgba(8, 47, 135, 0.035);
    border-radius: 50%;
    pointer-events: none;
}
.fac-staff::after {
    content: "";
    position: absolute;
    bottom: -170px;
    right: -140px;
    width: 340px;
    height: 340px;
    background: rgba(245, 130, 32, 0.06);
    border-radius: 50%;
    pointer-events: none;
}
.fac-staff .container {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1600px;
}
.fac-staff-head {
    max-width: 720px;
    margin: 0 auto 46px;
    text-align: center;
}
.fac-staff-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Inter", sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--school-orange);
    margin-bottom: 14px;
}
.fac-staff-eyebrow::before,
.fac-staff-eyebrow::after {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: rgba(245, 130, 32, 0.4);
}
.fac-staff-title {
    font-family: "Playfair Display", serif;
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 700;
    color: var(--school-blue);
    line-height: 1.15;
    margin: 0 0 16px;
    letter-spacing: -0.4px;
}
.fac-staff-title em {
    color: var(--school-orange);
    font-style: italic;
    font-weight: 600;
}
.fac-staff-desc {
    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.75;
    color: var(--school-muted);
    margin: 0;
}
.fac-staff-card {
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 22px;
    box-shadow: 0 26px 60px rgba(8, 47, 135, 0.09),
                0 6px 18px rgba(8, 47, 135, 0.04);
    overflow: hidden;
}
.fac-staff-card-head {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 30px;
    background: linear-gradient(135deg, var(--school-blue) 0%, var(--school-dark-blue) 100%);
}
.fac-staff-card-head::after {
    content: "";
    position: absolute;
    right: -46px;
    top: -70px;
    width: 190px;
    height: 190px;
    border: 32px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    pointer-events: none;
}
.fac-staff-card-title { position: relative; z-index: 1; }
.fac-staff-card-title span {
    display: block;
    color: var(--school-orange);
    font-family: "Inter", sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.fac-staff-card-title strong {
    display: block;
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}
.fac-staff-count {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    white-space: nowrap;
}
.fac-staff-count strong {
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}
.fac-staff-count span {
    color: rgba(255, 255, 255, 0.78);
    font-family: "Inter", sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.fac-staff-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.fac-table {
    width: 100%;
    min-width: 900px;
    border-collapse: separate;
    border-spacing: 0;
}
.fac-table thead th {
    background: #f4f8fd;
    font-family: "Inter", sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--school-blue);
    text-align: left;
    white-space: nowrap;
    padding: 16px 22px;
    border-bottom: 1px solid var(--school-border);
}
.fac-table tbody td {
    padding: 17px 22px;
    border-bottom: 1px solid var(--school-border);
    font-family: "Inter", sans-serif;
    font-size: 13.5px;
    color: var(--school-text);
    vertical-align: middle;
}
.fac-table tbody tr:last-child td {
    border-bottom: none;
}
.fac-empty {
    text-align: center !important;
    padding: 48px 20px !important;
    color: var(--school-muted) !important;
    font-style: italic;
    font-size: 14px;
}

@media (max-width: 1199.98px) {
    .fac-staff { padding: 80px 0 90px; }
    .fac-staff .container { width: 92%; }
    .fac-visual { max-width: 360px; }
    .fac-float-3 { right: -18px; }
}
@media (max-width: 991.98px) {
    .fac-staff { padding: 70px 0 80px; }
    .fac-visual { max-width: 380px; margin-top: 10px; }
}
@media (max-width: 767.98px) {
    .fac-visual { max-width: 340px; }
    .fac-float-1 { left: -8px; top: -10px; }
    .fac-float-2 { right: -8px; bottom: -14px; }
    .fac-float-3 { display: none; }

    .fac-staff { padding: 55px 0 65px; }
    .fac-staff .container { width: 95%; }
    .fac-staff-head { margin-bottom: 34px; }
    .fac-staff-desc { font-size: 14px; }
    .fac-staff-card { border-radius: 18px; }
    .fac-staff-card-head { padding: 18px 20px; gap: 12px; }
    .fac-staff-card-title strong { font-size: 15px; }
    .fac-staff-card-title span { font-size: 8.5px; letter-spacing: 1.6px; }
    .fac-staff-count { padding: 7px 13px; gap: 7px; }
    .fac-staff-count strong { font-size: 15px; }
    .fac-staff-count span { font-size: 8.5px; letter-spacing: 1.2px; }
    .fac-staff-scroll { overflow: visible; }
    .fac-table { min-width: 0; }
    .fac-table thead { display: none; }
    .fac-table,
    .fac-table tbody,
    .fac-table tr,
    .fac-table td { display: block; width: 100%; }
    .fac-table tbody { padding: 14px; }
    .fac-table tbody tr {
        border: 1px solid var(--school-border);
        border-radius: 16px;
        padding: 8px 4px;
        margin-bottom: 14px;
        background: #ffffff;
        box-shadow: 0 8px 20px rgba(8, 47, 135, 0.05);
    }
    .fac-table tbody tr:last-child { margin-bottom: 0; }
    .fac-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 8px 14px;
        border-bottom: none;
        text-align: right;
    }
    .fac-table tbody td::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-family: "Inter", sans-serif;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--school-muted);
        text-align: left;
    }
    .fac-empty {
        display: block !important;
        text-align: center !important;
        padding: 30px 16px !important;
    }
    .fac-empty::before { content: none !important; }
}

@media (max-width: 575.98px) {
    .fac-visual { max-width: 300px; }
    .fac-float { padding: 8px 11px; gap: 8px; border-radius: 12px; }
    .fac-float-icon { width: 28px; height: 28px; font-size: 13px; border-radius: 8px; }
    .fac-float-text small { font-size: 7.5px; letter-spacing: 1px; margin-bottom: 2px; }
    .fac-float-text strong { font-size: 11.5px; }

    .fac-card-head { padding: 16px 18px 14px; gap: 11px; }
    .fac-card-head-icon { width: 38px; height: 38px; font-size: 17px; border-radius: 10px; }
    .fac-card-head-text strong { font-size: 15px; }
    .fac-card-head-text span { font-size: 8.5px; letter-spacing: 1.6px; }

    .fac-tile { padding: 11px 10px; gap: 9px; }
    .fac-tile-icon { width: 30px; height: 30px; font-size: 13px; border-radius: 9px; }
    .fac-tile-text strong { font-size: 12.5px; }
    .fac-tile-text small { font-size: 8.5px; }
}

/* =========================================================
   OVERVIEW / ABOUT THE INSTITUTION — PAGE STYLES
========================================================= */
.page-banner {
    position: relative;
    min-height: 400px;
    max-height: 75vh;
    padding: 60px 0;
    background: var(--school-light-blue);
    overflow: hidden;
    display: flex;
    align-items: center;
}
.page-banner::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    top: -280px;
    right: -180px;
    border: 70px solid rgba(8, 47, 135, 0.04);
    border-radius: 50%;
    pointer-events: none;
}
.page-banner::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    bottom: -170px;
    left: -120px;
    background: rgba(245, 130, 32, 0.06);
    border-radius: 50%;
    pointer-events: none;
}
.page-banner .container {
    position: relative;
    z-index: 2;
}
.page-banner-crumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--school-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.page-banner-crumb a {
    color: var(--school-muted);
    transition: color 0.25s ease;
}
.page-banner-crumb a:hover { color: var(--school-orange); }
.page-banner-crumb i {
    color: var(--school-orange);
    font-size: 10px;
}
.page-banner-crumb .current { color: var(--school-blue); }

.page-banner-inner {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 55px;
    align-items: center;
}

.page-banner-text h1 {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(32px, 3.8vw, 48px);
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 18px;
}
.page-banner-text h1 span {
    color: var(--school-orange);
    font-style: italic;
    font-weight: 600;
}
.page-banner-text p {
    color: var(--school-muted);
    font-size: 15.5px;
    line-height: 1.75;
    margin: 0 0 22px;
    max-width: 540px;
}
.page-banner-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(8, 47, 135, 0.10);
}
.page-banner-facts span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--school-blue);
    font-size: 12.5px;
    font-weight: 600;
}
.page-banner-facts i {
    color: var(--school-orange);
    font-size: 15px;
}

.page-banner-visual {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.hero-shape-wrapper {
    position: relative;
    width: 100%;
    max-width: 480px;
    padding: 16px 14px;
}
.hero-shape-glow {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    background: radial-gradient(circle, rgba(245, 130, 32, 0.20) 0%, rgba(8, 47, 135, 0.12) 60%, transparent 80%);
    filter: blur(28px);
    z-index: 1;
    pointer-events: none;
}
.hero-shape-backdrop {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    border: 2px dashed rgba(245, 130, 32, 0.55);
    border-radius: 40px 100px 40px 100px;
    transform: rotate(-2.5deg);
    z-index: 1;
    transition: transform 0.4s ease, border-color 0.4s ease;
    pointer-events: none;
}
.hero-shape-wrapper:hover .hero-shape-backdrop {
    transform: rotate(0deg) scale(1.02);
    border-color: var(--school-orange);
}
.hero-shape-frame {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 360px;
    border-radius: 40px 100px 40px 100px;
    overflow: hidden;
    border: 8px solid #ffffff;
    box-shadow: 0 25px 50px rgba(8, 47, 135, 0.18);
    background: #ffffff;
}
.hero-shape-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.hero-shape-frame:hover .hero-shape-image {
    transform: scale(1.05);
}
.hero-badge {
    position: absolute;
    z-index: 3;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 9px 15px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 11px;
    box-shadow: 0 12px 30px rgba(8, 47, 135, 0.16);
    border: 1px solid rgba(8, 47, 135, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hero-badge:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(8, 47, 135, 0.22);
}
.hero-badge-top {
    top: -6px;
    right: -10px;
}
.hero-badge-bottom {
    bottom: -6px;
    left: -12px;
}
.hero-badge-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.hero-badge-icon.blue {
    background: var(--school-light-blue);
    color: var(--school-blue);
}
.hero-badge-icon.orange {
    background: #fff3e6;
    color: var(--school-orange);
}
.hero-badge-info {
    display: flex;
    flex-direction: column;
    text-align: left;
}
.hero-badge-title {
    color: var(--school-blue);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}
.hero-badge-sub {
    color: var(--school-muted);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.3;
}
.hero-shape-dots {
    position: absolute;
    bottom: -12px;
    right: 18px;
    display: grid;
    grid-template-columns: repeat(3, 7px);
    gap: 7px;
    z-index: 1;
    pointer-events: none;
}
.hero-shape-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--school-orange);
    opacity: 0.55;
}

/* SECTION 1A — ABOUT THE INSTITUTION */
.about-section {
    position: relative;
    padding: 90px 0 50px;
    background: #ffffff;
    overflow: hidden;
}
.about-section::before {
    content: "";
    position: absolute;
    width: 680px;
    height: 680px;
    top: -340px;
    right: -260px;
    background: var(--school-light-blue);
    border-radius: 50%;
    opacity: 0.55;
    pointer-events: none;
}
.about-section::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    bottom: -200px;
    left: -160px;
    border: 2px solid var(--school-border);
    border-radius: 50%;
    opacity: 0.7;
    pointer-events: none;
}
.about-section .container {
    position: relative;
    z-index: 2;
}
.about-heading {
    text-align: left;
    max-width: 100%;
    margin: 0 0 40px;
}
.about-label {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    color: var(--school-orange);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.about-label::before {
    content: "";
    width: 32px;
    height: 2px;
    background: var(--school-orange);
}
.about-title {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(32px, 3.6vw, 46px);
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 0;
}
.about-title .orange { color: var(--school-orange); }

.about-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 40px;
    align-items: center;
}
.about-text p {
    color: var(--school-muted);
    font-size: 15.5px;
    line-height: 1.9;
    margin-bottom: 20px;
}
.about-text p:last-child { margin-bottom: 0; }
.about-text strong { color: var(--school-blue); font-weight: 600; }

.about-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px dashed var(--school-border);
}
.about-tags span {
    background: var(--school-light-blue);
    color: var(--school-blue);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 40px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
    transition: 0.25s ease;
}
.about-tags span:hover {
    background: #ffffff;
    border-color: var(--school-orange);
    transform: translateY(-2px);
}
.about-tags i { color: var(--school-orange); font-size: 13px; }

.about-visual { position: relative; }
.about-image-wrap {
    position: relative;
    padding: 12px;
}
.about-image-accent {
    position: absolute;
    width: 80px;
    height: 80px;
    top: 0;
    left: 0;
    border-top: 4px solid var(--school-orange);
    border-left: 4px solid var(--school-orange);
    border-radius: 16px 0 0 0;
    z-index: 1;
}
.about-image-wrap::after {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    right: 0;
    bottom: 0;
    border-right: 4px solid var(--school-blue);
    border-bottom: 4px solid var(--school-blue);
    border-radius: 0 0 16px 0;
    z-index: 1;
}
.about-image {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 18px;
    border: 7px solid #ffffff;
    box-shadow: 0 20px 50px rgba(8, 47, 135, .15);
}

.about-accreditation {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 22px;
}
.accreditation-box {
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
    transition: 0.25s ease;
}
.accreditation-box:hover {
    border-color: var(--school-orange);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(8, 47, 135, 0.07);
}
.accreditation-box i {
    color: var(--school-orange);
    font-size: 20px;
    display: block;
    margin-bottom: 8px;
}
.accreditation-box strong {
    display: block;
    color: var(--school-blue);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 3px;
}
.accreditation-box span {
    display: block;
    color: var(--school-muted);
    font-size: 10.5px;
    line-height: 1.4;
}

/* SECTION 1B — PANCHANGASHIKSHAN */
.about-continuation {
    position: relative;
    padding: 60px 0 95px;
    background: #ffffff;
    overflow: hidden;
}
.about-continuation::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    bottom: -260px;
    right: -200px;
    background: var(--school-light-blue);
    border-radius: 50%;
    opacity: 0.4;
    pointer-events: none;
}
.about-continuation .container {
    position: relative;
    z-index: 2;
}

.panchang-block {
    padding-top: 50px;
    border-top: 1px solid var(--school-border);
}

.panchang-heading {
    text-align: left;
    max-width: 100%;
    margin: 0 0 35px;
}
.panchang-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--school-orange);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.panchang-label::before {
    content: "";
    width: 32px;
    height: 2px;
    background: var(--school-orange);
}
.panchang-title {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(32px, 3.6vw, 46px);
    line-height: 1.15;
    font-weight: 700;
}
.panchang-title span {
    color: var(--school-orange);
    font-style: italic;
}

.panchang-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 40px;
    align-items: stretch;
}

.panchang-text-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.panchang-text-col p {
    color: var(--school-muted);
    font-size: 15.5px;
    line-height: 1.9;
    margin-bottom: 18px;
}
.panchang-text-col p:last-of-type { margin-bottom: 0; }
.panchang-text-col strong { color: var(--school-blue); font-weight: 600; }

.panchang-closing-note {
    margin-top: 22px;
    padding: 20px 22px;
    background: var(--school-light-blue);
    border-radius: 14px;
    border-left: 4px solid var(--school-orange);
}
.panchang-closing-note p {
    margin: 0;
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-style: italic;
    font-size: 15.5px;
    line-height: 1.65;
    font-weight: 500;
}

.panchang-visual-col {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.panchang-image-wrap {
    position: relative;
    padding: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.panchang-image-accent {
    position: absolute;
    width: 70px;
    height: 70px;
    top: 0;
    right: 0;
    border-top: 4px solid var(--school-orange);
    border-right: 4px solid var(--school-orange);
    border-radius: 0 16px 0 0;
    z-index: 1;
}
.panchang-image-wrap::after {
    content: "";
    position: absolute;
    width: 70px;
    height: 70px;
    left: 0;
    bottom: 0;
    border-left: 4px solid var(--school-blue);
    border-bottom: 4px solid var(--school-blue);
    border-radius: 0 0 0 16px;
    z-index: 1;
}
.panchang-image {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 380px;
    object-fit: cover;
    border-radius: 18px;
    border: 7px solid #ffffff;
    box-shadow: 0 20px 50px rgba(8, 47, 135, .15);
    transition: transform 0.4s ease;
}
.panchang-image-wrap:hover .panchang-image {
    transform: scale(1.02);
}
.panchang-image-tag {
    position: absolute;
    bottom: 24px;
    left: 24px;
    z-index: 3;
    background: rgba(8, 47, 135, 0.90);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.panchang-image-tag i {
    color: var(--school-orange);
    font-size: 13px;
}

.panchang-pillars-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    margin-top: 45px;
    padding-top: 38px;
    border-top: 1px dashed var(--school-border);
}
.panchang-pillar-card {
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 16px;
    padding: 24px 18px 22px;
    transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 6px 20px rgba(8, 47, 135, 0.04);
}
.panchang-pillar-card:hover {
    transform: translateY(-6px);
    border-color: var(--school-orange);
    box-shadow: 0 16px 36px rgba(8, 47, 135, 0.12);
    background: #ffffff;
}
.panchang-pillar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.panchang-pillar-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--school-light-blue);
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease;
}
.panchang-pillar-card:hover .panchang-pillar-num {
    background: var(--school-orange);
    color: #ffffff;
}
.panchang-pillar-icon {
    color: var(--school-orange);
    font-size: 19px;
    transition: transform 0.3s ease;
}
.panchang-pillar-card:hover .panchang-pillar-icon {
    transform: scale(1.15);
}
.panchang-pillar-card h4 {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 8px;
}
.panchang-pillar-card p {
    color: var(--school-muted);
    font-size: 12.8px;
    line-height: 1.6;
    margin: 0;
    flex-grow: 1;
}

/* SECTION 2 — LEARNING ENVIRONMENT */
.learning-section {
    position: relative;
    padding: 95px 0 100px;
    background: var(--school-light-blue);
    overflow: hidden;
}
.learning-section::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    bottom: -280px;
    right: -200px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    pointer-events: none;
}
.learning-section::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    top: -160px;
    left: -140px;
    border: 2px solid var(--school-border);
    border-radius: 50%;
    opacity: 0.7;
    pointer-events: none;
}
.learning-section .container {
    position: relative;
    z-index: 2;
}
.learning-heading {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 55px;
}
.learning-title {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 16px;
}
.learning-title .orange { color: var(--school-orange); }
.learning-sub {
    color: var(--school-muted);
    font-size: 16px;
    line-height: 1.75;
    max-width: 620px;
    margin: 0 auto;
}
.learning-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
    align-items: stretch;
}
.learning-card {
    background: #ffffff;
    border-radius: 22px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--school-border);
    box-shadow: 0 15px 40px rgba(8, 47, 135, 0.06);
    transition: 0.35s ease;
    display: flex;
    flex-direction: column;
}
.learning-card:hover {
    border-color: var(--school-orange);
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(8, 47, 135, 0.12);
}
.learning-card-media {
    position: relative;
    height: 500px;
    overflow: hidden;
    background: var(--school-light-blue);
}
.learning-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.learning-card:hover .learning-card-img {
    transform: scale(1.06);
}
.learning-card-badge {
    position: absolute;
    bottom: 14px;
    left: 16px;
    background: rgba(8, 47, 135, 0.90);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 13px;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
.learning-card-badge i {
    color: var(--school-orange);
    font-size: 12px;
}
.learning-card-body {
    padding: 32px 30px 32px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.learning-card-icon {
    width: 52px;
    height: 52px;
    background: var(--school-light-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--school-blue);
    font-size: 24px;
    margin-bottom: 20px;
    transition: 0.3s ease;
}
.learning-card:hover .learning-card-icon {
    background: var(--school-orange);
    color: #ffffff;
    transform: scale(1.05);
}
.learning-card h3 {
    color: var(--school-blue);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 16px;
}
.learning-card p {
    color: var(--school-muted);
    font-size: 15px;
    line-height: 1.85;
    margin-bottom: 18px;
}
.learning-card p:last-of-type { margin-bottom: 0; }
.learning-card strong { color: var(--school-blue); font-weight: 600; }

.learning-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}
.learning-tags span {
    background: #fff8f2;
    color: var(--school-blue);
    font-size: 12.5px;
    font-weight: 600;
    padding: 8px 15px;
    border-radius: 40px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #fde4cd;
    transition: 0.25s ease;
}
.learning-tags span:hover {
    background: #ffffff;
    border-color: var(--school-orange);
    transform: translateY(-2px);
}
.learning-tags i { color: var(--school-orange); font-size: 14px; }

.learning-closing {
    text-align: center;
    color: var(--school-muted);
    font-size: 15px;
    line-height: 1.8;
    max-width: 700px;
    margin: 50px auto 0;
}
.learning-closing strong {
    color: var(--school-blue);
    font-weight: 600;
}

@media (max-width: 991.98px) {
    .page-banner {
        max-height: none;
        min-height: auto;
        padding: 55px 0;
    }
    .page-banner-inner {
        grid-template-columns: 1fr;
        gap: 35px;
    }
    .page-banner-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .page-banner-text p { text-align: center; }
    .page-banner-visual { justify-content: center; }
    .hero-shape-wrapper { max-width: 440px; }
    .hero-shape-frame { height: 320px; }

    .about-section { padding: 70px 0 40px; }
    .about-heading { margin-bottom: 35px; }
    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .about-image { height: 380px; }

    .about-continuation { padding: 40px 0 80px; }
    .panchang-heading { margin-bottom: 35px; }
    .panchang-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }
    .panchang-image { height: 320px; min-height: auto; }
    .panchang-pillars-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin-top: 35px;
        padding-top: 25px;
    }

    .learning-section { padding: 70px 0 75px; }
    .learning-heading { margin-bottom: 45px; }
    .learning-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .learning-card-media { height: auto; }
}

@media (max-width: 767.98px) {
    .page-banner { padding: 45px 0; }
    .page-banner-text h1 { font-size: 28px; }
    .page-banner-text p { font-size: 14.5px; }
    .page-banner-crumb { font-size: 11px; letter-spacing: 1.5px; }
    .page-banner-facts { gap: 12px 20px; }

    .hero-shape-frame { height: 280px; border-radius: 32px 80px 32px 80px; }
    .hero-shape-backdrop { border-radius: 32px 80px 32px 80px; }
    .hero-badge { padding: 7px 12px; gap: 8px; }
    .hero-badge-icon { width: 30px; height: 30px; font-size: 13px; }
    .hero-badge-title { font-size: 11px; }
    .hero-badge-sub { font-size: 9.5px; }

    .about-section { padding: 55px 0 35px; }
    .about-title { font-size: 30px; }
    .about-text p { font-size: 14.5px; }
    .about-image { height: 300px; }
    .about-image-accent { width: 60px; height: 60px; border-width: 4px; }
    .about-image-wrap::after { width: 60px; height: 60px; border-width: 4px; }

    .about-continuation { padding: 35px 0 65px; }
    .panchang-block { padding-top: 35px; }
    .panchang-title { font-size: 30px; }
    .panchang-text-col p { font-size: 14.5px; }
    .panchang-image { height: 260px; }
    .panchang-image-accent, .panchang-image-wrap::after { width: 50px; height: 50px; border-width: 3px; }
    .panchang-closing-note p { font-size: 14.5px; }
    .panchang-pillars-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .panchang-pillar-card { padding: 20px 16px; }

    .learning-section { padding: 55px 0 65px; }
    .learning-title { font-size: 30px; }
    .learning-sub { font-size: 15px; }
    .learning-card-media { height: 200px; }
    .learning-card-body { padding: 24px 20px 24px; }
    .learning-card h3 { font-size: 19px; }
    .learning-card p { font-size: 14.5px; }
}

@media (max-width: 575.98px) {
    .page-banner-text h1 { font-size: 25px; }
    .page-banner-facts { flex-direction: column; align-items: flex-start; gap: 10px; }

    .hero-shape-frame { height: 240px; border-radius: 26px 65px 26px 65px; border-width: 5px; }
    .hero-shape-backdrop { border-radius: 26px 65px 26px 65px; }
    .hero-badge-top { top: -8px; right: -4px; }
    .hero-badge-bottom { bottom: -8px; left: -6px; }

    .about-title { font-size: 26px; }
    .about-label { font-size: 11px; letter-spacing: 2px; }
    .about-label::before { width: 22px; }
    .about-image { height: 230px; border-width: 5px; }
    .about-accreditation {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .accreditation-box {
        padding: 14px 12px;
        display: flex;
        align-items: center;
        text-align: left;
        gap: 14px;
    }
    .accreditation-box i { margin-bottom: 0; flex-shrink: 0; }

    .panchang-title { font-size: 26px; }
    .panchang-label { font-size: 11px; letter-spacing: 2px; }
    .panchang-label::before { width: 20px; }
    .panchang-image { height: 220px; border-width: 5px; }

    .learning-title { font-size: 26px; }
    .learning-card-media { height: 180px; }
}

/* =========================================================
   PRINCIPAL'S MESSAGE — PAGE STYLES
========================================================= */

/* Section 1 — Portrait + intro */
.principal-hero {
    background: var(--school-light-blue);
    padding: 80px 0;
}
.principal-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 60px;
    align-items: center;
}

.principal-portrait-wrap {
    position: relative;
    max-width: 440px;
}
.principal-portrait-wrap::before {
    content: "";
    position: absolute;
    top: -14px;
    left: -14px;
    right: 14px;
    bottom: 14px;
    border: 2px solid var(--school-orange);
    border-radius: 22px;
    z-index: 0;
}
.principal-portrait {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: 22px;
    box-shadow: 0 20px 45px rgba(8, 47, 135, 0.14);
}

.principal-hero-text { max-width: 560px; }
.principal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    color: var(--school-orange);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3.5px;
    text-transform: uppercase;
}
.principal-eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--school-orange);
}
.principal-hero-text h1 {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 22px;
}
.principal-hero-text h1 em {
    font-style: italic;
    color: var(--school-orange);
    font-weight: 600;
}
.principal-hero-text p {
    color: var(--school-muted);
    font-size: 16.5px;
    line-height: 1.85;
    margin-bottom: 18px;
}
.principal-hero-text p:last-of-type { margin-bottom: 0; }
.principal-hero-text strong { color: var(--school-blue); font-weight: 600; }

.principal-name-block {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid rgba(8, 47, 135, 0.12);
}
.principal-name-block .line {
    width: 4px;
    height: 46px;
    background: var(--school-orange);
    border-radius: 3px;
}
.principal-name-block h4 {
    color: var(--school-blue);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 3px;
}
.principal-name-block span {
    color: var(--school-muted);
    font-size: 13px;
}

/* Section 2 — The message */
.principal-message {
    background: #ffffff;
    padding: 90px 0 100px;
}
.principal-message-inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 15px;
}

.principal-message-inner > p {
    color: var(--school-muted);
    font-size: 16.5px;
    line-height: 1.95;
    margin-bottom: 24px;
}
.principal-message-inner > p:last-of-type { margin-bottom: 0; }
.principal-message-inner strong { color: var(--school-blue); font-weight: 600; }

/* Drop cap on first paragraph */
.principal-message-inner > p:first-of-type::first-letter {
    font-family: "Playfair Display", serif;
    font-size: 66px;
    line-height: 0.85;
    font-weight: 700;
    color: var(--school-orange);
    float: left;
    margin: 6px 14px 0 0;
}

/* Signature-style closing */
.principal-signature {
    margin-top: 55px;
    padding-top: 40px;
    border-top: 1px solid var(--school-border);
    text-align: center;
}
.principal-signature i {
    color: var(--school-orange);
    font-size: 26px;
    display: block;
    margin-bottom: 14px;
}
.principal-signature h4 {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-style: italic;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
}
.principal-signature span {
    color: var(--school-muted);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
}

/* Principal's Message Responsive */
@media (max-width: 991.98px) {
    .principal-hero { padding: 60px 0; }
    .principal-hero-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }
    .principal-portrait-wrap {
        max-width: 400px;
        margin: 0 auto;
    }
    .principal-portrait { height: 440px; }
    .principal-hero-text {
        max-width: 100%;
        text-align: center;
        margin: 0 auto;
    }
    .principal-eyebrow { justify-content: center; }
    .principal-name-block {
        justify-content: center;
    }

    .principal-message { padding: 70px 0 80px; }
}
@media (max-width: 767.98px) {
    .principal-hero { padding: 50px 0; }
    .principal-portrait { height: 380px; }
    .principal-hero-text h1 { font-size: 30px; }
    .principal-hero-text p { font-size: 15px; }

    .principal-message { padding: 55px 0 65px; }
    .principal-message-inner > p {
        font-size: 15.5px;
        line-height: 1.85;
    }
    .principal-message-inner > p:first-of-type::first-letter {
        font-size: 54px;
        margin-right: 10px;
    }
    .principal-signature h4 { font-size: 19px; }
}
@media (max-width: 575.98px) {
    .principal-portrait { height: 320px; border-radius: 18px; }
    .principal-portrait-wrap::before {
        top: -10px; left: -10px;
        right: 10px; bottom: 10px;
        border-radius: 18px;
    }
    .principal-hero-text h1 { font-size: 26px; }
    .principal-eyebrow { font-size: 11px; letter-spacing: 2px; }
    .principal-eyebrow::before { width: 20px; }
    .principal-name-block h4 { font-size: 16px; }

    .principal-message-inner > p { font-size: 15px; }
    .principal-signature h4 { font-size: 17px; }
}

/* =========================================================
   REQUIRED DOCUMENTS — PAGE STYLES
========================================================= */
/* HERO VISUAL — ABSTRACT CHECKLIST */
.rd-hero-wrap {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 480px;
    margin: 0 auto;
}
.rd-hero-wrap::before {
    content: "";
    position: absolute;
    top: 10px; left: 0;
    width: 150px; height: 150px;
    background-image: radial-gradient(rgba(8, 47, 135, 0.18) 1.8px, transparent 1.8px);
    background-size: 15px 15px;
    z-index: 1;
    pointer-events: none;
}
.rd-hero-wrap::after {
    content: "";
    position: absolute;
    bottom: -10px; left: -10px;
    width: 130px; height: 130px;
    border: 24px solid rgba(245, 130, 32, 0.15);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}
.rd-ring-blue {
    position: absolute;
    top: 10px; right: 20px;
    width: 140px; height: 140px;
    border: 26px solid rgba(8, 47, 135, 0.10);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

.rd-card {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 30px 70px rgba(8, 47, 135, 0.20),
                0 10px 25px rgba(8, 47, 135, 0.06);
    overflow: hidden;
    z-index: 3;
    transition: transform 0.4s ease;
}
.rd-card:hover {
    transform: translate(-50%, -50%) translateY(-6px);
}
.rd-card-head {
    position: relative;
    background: linear-gradient(135deg, var(--school-blue) 0%, var(--school-dark-blue) 100%);
    padding: 22px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    overflow: hidden;
}
.rd-card-head::after {
    content: "";
    position: absolute;
    right: -40px; top: -50px;
    width: 130px; height: 130px;
    border: 24px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    pointer-events: none;
}
.rd-card-icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    position: relative;
    z-index: 1;
}
.rd-card-head-text { position: relative; z-index: 1; }
.rd-card-head-text span {
    display: block;
    color: var(--school-orange);
    font: 700 9.5px "Inter", sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.rd-card-head-text strong {
    display: block;
    color: #ffffff;
    font: 700 16px "Playfair Display", serif;
    line-height: 1.2;
}

.rd-card-body { padding: 18px 22px 20px; }
.rd-doc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--school-border);
}
.rd-doc-item:last-child { border-bottom: none; }
.rd-doc-check {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.rd-doc-item:nth-child(1) .rd-doc-check { background: #fff3e7; color: var(--school-orange); }
.rd-doc-item:nth-child(2) .rd-doc-check { background: #eef5fc; color: var(--school-blue); }
.rd-doc-item:nth-child(3) .rd-doc-check { background: #f3e9ff; color: #6f42c1; }
.rd-doc-item:nth-child(4) .rd-doc-check { background: #e7f5ee; color: #198754; }
.rd-doc-bars {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.rd-bar-primary {
    display: block;
    height: 9px;
    border-radius: 5px;
    background: linear-gradient(90deg, #dbe4f0 0%, #c8d5e6 100%);
}
.rd-bar-secondary {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: #eef2f7;
}
.rd-doc-item:nth-child(1) .rd-bar-primary { width: 82%; }
.rd-doc-item:nth-child(1) .rd-bar-secondary { width: 55%; }
.rd-doc-item:nth-child(2) .rd-bar-primary { width: 68%; }
.rd-doc-item:nth-child(2) .rd-bar-secondary { width: 45%; }
.rd-doc-item:nth-child(3) .rd-bar-primary { width: 90%; }
.rd-doc-item:nth-child(3) .rd-bar-secondary { width: 62%; }
.rd-doc-item:nth-child(4) .rd-bar-primary { width: 74%; }
.rd-doc-item:nth-child(4) .rd-bar-secondary { width: 50%; }

.rd-card-foot {
    padding: 14px 20px;
    background: #f8fafd;
    border-top: 1px solid var(--school-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.rd-card-foot-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--school-blue);
    font: 700 10px "Inter", sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.rd-card-foot-label i { color: var(--school-orange); font-size: 12px; }
.rd-card-foot-dots { display: flex; gap: 4px; }
.rd-card-foot-dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--school-border);
}
.rd-card-foot-dots span:nth-child(1) { background: var(--school-orange); width: 16px; border-radius: 4px; }
.rd-card-foot-dots span:nth-child(2) { background: var(--school-blue); }
.rd-card-foot-dots span:nth-child(3) { background: #198754; }

.rd-float {
    position: absolute;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 16px 38px rgba(8, 47, 135, 0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    z-index: 5;
    transition: transform 0.4s ease;
}
.rd-float:hover { transform: translateY(-4px); }
.rd-float-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.rd-float-text { display: flex; flex-direction: column; line-height: 1.15; }
.rd-float-text small {
    font: 700 8.5px "Inter", sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--school-muted);
    margin-bottom: 3px;
}
.rd-float-text strong {
    font: 700 13px "Playfair Display", serif;
    color: var(--school-blue);
    white-space: nowrap;
}
.rd-float-1 { top: 30px; left: 0; animation: rdFloatY 4s ease-in-out infinite; }
.rd-float-1 .rd-float-icon { background: #fff3e7; color: var(--school-orange); }
.rd-float-2 { bottom: 40px; right: 0; animation: rdFloatY 4s ease-in-out infinite; animation-delay: 1.2s; }
.rd-float-2 .rd-float-icon { background: #e7f5ee; color: #198754; }
@keyframes rdFloatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

/* SHARED SECTION HEADINGS */
.rd-section {
    padding: 90px 0 100px;
    position: relative;
    overflow: hidden;
    background: #ffffff;
}
.rd-section.alt { background: var(--school-light-blue); }
.rd-section .container {
    width: 90%;
    max-width: 1400px;
    position: relative;
    z-index: 2;
}
.rd-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 46px;
}
.rd-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--school-orange);
    font: 600 12px "Inter", sans-serif;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}
.rd-title {
    margin: 0 0 12px;
    color: var(--school-blue);
    font: 700 clamp(26px, 3vw, 38px)/1.15 "Playfair Display", serif;
    letter-spacing: -0.3px;
}
.rd-title em { color: var(--school-orange); font-weight: 600; font-style: italic; }
.rd-sub {
    margin: 0;
    color: var(--school-muted);
    font: 400 15px/1.7 "Inter", sans-serif;
}

/* DOCUMENTS LIST — CATEGORY CARDS */
.rd-cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
}
.rd-cat-card {
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 20px;
    padding: 28px 30px 26px;
    box-shadow: 0 10px 30px rgba(8, 47, 135, 0.05);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    position: relative;
    overflow: hidden;
}
.rd-cat-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 4px;
    background: linear-gradient(90deg, var(--school-blue), var(--school-orange));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}
.rd-cat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 46px rgba(8, 47, 135, 0.10);
    border-color: #cfdcec;
}
.rd-cat-card:hover::before {
    transform: scaleX(1);
}

.rd-cat-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--school-border);
}
.rd-cat-icon {
    width: 48px; height: 48px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}
.rd-cat-card:hover .rd-cat-icon {
    transform: scale(1.08) rotate(-5deg);
}
.rd-cat-icon.orange { background: #fff3e7; color: var(--school-orange); }
.rd-cat-icon.blue   { background: #eef5fc; color: var(--school-blue); }
.rd-cat-icon.green  { background: #e7f5ee; color: #198754; }
.rd-cat-icon.purple { background: #f3e9ff; color: #6f42c1; }

.rd-cat-head-text span {
    display: block;
    color: var(--school-orange);
    font: 700 9.5px "Inter", sans-serif;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 3px;
}
.rd-cat-head-text h3 {
    margin: 0;
    color: var(--school-blue);
    font: 700 18px "Playfair Display", serif;
    letter-spacing: -0.2px;
}

.rd-cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.rd-cat-list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    color: var(--school-text);
    font: 500 14px/1.5 "Inter", sans-serif;
}
.rd-cat-list li i {
    flex-shrink: 0;
    width: 20px; height: 20px;
    border-radius: 6px;
    background: #e7f5ee;
    color: #198754;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    margin-top: 2px;
}
.rd-cat-list li small {
    display: block;
    color: var(--school-muted);
    font: 500 12px "Inter", sans-serif;
    letter-spacing: 0.2px;
    margin-top: 2px;
}

/* PROCESS STEPS */
.rd-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    position: relative;
}
.rd-step {
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 18px;
    padding: 28px 24px 24px;
    text-align: center;
    position: relative;
    box-shadow: 0 10px 26px rgba(8, 47, 135, 0.05);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.rd-step:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(8, 47, 135, 0.10);
    border-color: #cfdcec;
}

.rd-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px; height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--school-blue), var(--school-dark-blue));
    color: #ffffff;
    font: 700 20px "Playfair Display", serif;
    margin: 0 auto 16px;
    position: relative;
    box-shadow: 0 10px 22px rgba(8, 47, 135, 0.22);
    transition: transform 0.35s ease;
}
.rd-step:hover .rd-step-num {
    transform: scale(1.08);
}
.rd-step-num::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px dashed var(--school-orange);
    opacity: 0.4;
    transition: opacity 0.35s ease;
}
.rd-step:hover .rd-step-num::after {
    opacity: 0.85;
}

.rd-step-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin: 0 auto 14px;
    background: #fff3e7;
    color: var(--school-orange);
}

.rd-step h3 {
    margin: 0 0 8px;
    color: var(--school-blue);
    font: 700 16px/1.3 "Playfair Display", serif;
}
.rd-step p {
    margin: 0;
    color: var(--school-muted);
    font: 400 13px/1.6 "Inter", sans-serif;
}

/* Required Documents Responsive */
@media (max-width: 1199.98px) {
    .rd-hero-wrap { max-width: 440px; height: 440px; }
    .rd-card { width: 300px; }

    .rd-section { padding: 80px 0 90px; }
    .rd-steps { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (max-width: 991.98px) {
    .rd-hero-wrap { max-width: 460px; height: 460px; margin-top: 20px; }
    .rd-cat-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    .rd-hero-wrap { max-width: 380px; height: 420px; }
    .rd-card { width: 290px; }
    .rd-card-head { padding: 18px 20px; }
    .rd-card-head-text strong { font-size: 14px; }
    .rd-card-icon { width: 40px; height: 40px; font-size: 18px; }
    .rd-card-body { padding: 14px 18px 16px; }
    .rd-doc-item { padding: 11px 0; gap: 10px; }
    .rd-doc-check { width: 30px; height: 30px; font-size: 13px; }
    .rd-bar-primary { height: 8px; }
    .rd-bar-secondary { height: 5px; }

    .rd-ring-blue { width: 110px; height: 110px; border-width: 20px; }
    .rd-float { padding: 9px 13px; gap: 8px; }
    .rd-float-icon { width: 30px; height: 30px; font-size: 13px; }
    .rd-float-text strong { font-size: 11.5px; }
    .rd-float-text small { font-size: 7.5px; letter-spacing: 1px; }

    .rd-section { padding: 55px 0 65px; }
    .rd-section .container { width: 95%; }
    .rd-head { margin-bottom: 32px; }
    .rd-sub { font-size: 14px; }

    .rd-cat-card { padding: 24px 22px 22px; border-radius: 18px; }
    .rd-cat-head { gap: 12px; padding-bottom: 16px; margin-bottom: 16px; }
    .rd-cat-icon { width: 44px; height: 44px; font-size: 19px; border-radius: 12px; }
    .rd-cat-head-text h3 { font-size: 16px; }
    .rd-cat-list li { font-size: 13px; }

    .rd-steps { grid-template-columns: 1fr; gap: 16px; }
    .rd-step { padding: 24px 20px 22px; }
}

@media (max-width: 575.98px) {
    .rd-hero-wrap { max-width: 300px; height: 380px; }
    .rd-card { width: 270px; }
    .rd-card-head { padding: 16px 18px; }
    .rd-card-head-text strong { font-size: 13px; }
    .rd-card-head-text span { font-size: 8.5px; letter-spacing: 1.6px; }
    .rd-card-icon { width: 36px; height: 36px; font-size: 16px; border-radius: 10px; }

    .rd-doc-item { padding: 10px 0; gap: 9px; }
    .rd-doc-check { width: 28px; height: 28px; font-size: 12px; border-radius: 8px; }
    .rd-bar-primary { height: 7px; }
    .rd-bar-secondary { height: 5px; }

    .rd-float-1 { top: 5px; left: -5px; }
    .rd-float-2 { bottom: 10px; right: -5px; }
    .rd-float { padding: 8px 11px; }
    .rd-float-icon { width: 26px; height: 26px; font-size: 12px; border-radius: 8px; }
    .rd-float-text strong { font-size: 11px; }

    .rd-ring-blue { width: 90px; height: 90px; border-width: 16px; top: 0; right: 5px; }
    .rd-hero-wrap::before { width: 100px; height: 100px; }
    .rd-hero-wrap::after { width: 100px; height: 100px; border-width: 18px; }

    .rd-title { font-size: 24px; }
    .rd-sub { font-size: 13.5px; }
    .rd-cat-card { padding: 20px 18px 18px; }
    .rd-cat-icon { width: 40px; height: 40px; font-size: 17px; }
    .rd-cat-head-text h3 { font-size: 15px; }
}

/* =========================================================
   STAFF ACTIVITIES — PAGE STYLES
========================================================= */
.fac-hero-image {
    width: 100%;
    height: auto;
    border-radius: 22px;
    box-shadow: 0 25px 55px rgba(8, 47, 135, 0.16),
                0 8px 18px rgba(8, 47, 135, 0.07);
    position: relative;
    z-index: 3;
    display: block;
}

/* SHARED SECTION HEADINGS */
.sa-section { padding: 80px 0; }
.sa-section.alt { background: var(--school-light-blue); }
.sa-section .container { width: 90%; max-width: 1600px; }

.sa-head { text-align: center; max-width: 680px; margin: 0 auto 46px; }
.sa-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--school-orange);
    font: 600 12px "Inter", sans-serif;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}
.sa-title {
    margin: 0 0 12px;
    color: var(--school-blue);
    font: 700 clamp(26px, 3vw, 38px)/1.15 "Playfair Display", serif;
}
.sa-title em { color: var(--school-orange); font-weight: 600; }
.sa-sub {
    margin: 0;
    color: var(--school-muted);
    font: 400 15px/1.7 "Inter", sans-serif;
}

/* HIGHLIGHT CARDS */
.sa-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.sa-card {
    background: #fff;
    border: 1px solid var(--school-border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(8, 47, 135, 0.06);
    transition: transform .3s ease, box-shadow .3s ease;
}
.sa-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(8, 47, 135, 0.12);
}
.sa-card-img { position: relative; aspect-ratio: 16 / 11; }
.sa-card-img-clip { position: absolute; inset: 0; overflow: hidden; }
.sa-card-img img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .5s ease;
}
.sa-card:hover .sa-card-img img { transform: scale(1.05); }
.sa-card-icon {
    position: absolute; left: 20px; bottom: -22px;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: var(--school-orange);
    color: #fff; font-size: 20px;
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(245, 130, 32, 0.35);
    z-index: 2;
}
.sa-card-body { padding: 36px 24px 26px; }
.sa-card-body h3 {
    margin: 0 0 8px;
    color: var(--school-blue);
    font: 700 20px "Playfair Display", serif;
}
.sa-card-body p {
    margin: 0;
    color: var(--school-muted);
    font: 400 14.5px/1.7 "Inter", sans-serif;
}

/* GALLERY */
.sa-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.sa-item {
    position: relative;
    padding: 0; border: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 14px;
    cursor: pointer;
    background: var(--school-border);
}
.sa-item img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .5s ease;
}
.sa-item::after {
    content: attr(data-caption);
    position: absolute; inset: auto 0 0 0;
    padding: 40px 14px 12px;
    color: #fff; text-align: left;
    font: 600 12.5px "Inter", sans-serif;
    background: linear-gradient(transparent, rgba(6, 31, 99, 0.85));
    opacity: 0; transform: translateY(8px);
    transition: opacity .3s ease, transform .3s ease;
}
.sa-item:hover img { transform: scale(1.07); }
.sa-item:hover::after,
.sa-item:focus-visible::after { opacity: 1; transform: none; }
.sa-item:focus-visible { outline: 3px solid var(--school-orange); outline-offset: 2px; }

.sa-item.wide { grid-column: span 2; aspect-ratio: 8 / 3; }

/* Lightbox */
#saLightbox .modal-content { background: transparent; border: 0; }
#saLightbox img {
    width: 100%; max-height: 82vh;
    object-fit: contain; border-radius: 12px;
}
#saLightbox .sa-lb-caption {
    margin-top: 10px; text-align: center;
    color: #fff; font: 500 14px "Inter", sans-serif;
}
#saLightbox .btn-close {
    position: absolute; top: -34px; right: 0;
    filter: invert(1); opacity: 1;
}

/* Staff Activities Responsive */
@media (max-width: 1199.98px) {
    .sa-gallery { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 991.98px) {
    .sa-section { padding: 60px 0; }
    .sa-cards { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}

@media (max-width: 767.98px) {
    .sa-gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .sa-item.wide { grid-column: span 2; aspect-ratio: 8 / 3; }
    .sa-item::after { opacity: 1; transform: none; font-size: 11.5px; }
}

@media (max-width: 575.98px) {
    .sa-gallery { grid-template-columns: 1fr; }
    .sa-item.wide { grid-column: auto; }
}

/* =========================================================
   STUDENT ACHIEVEMENTS — PAGE STYLES
========================================================= */
.fac-hero-image-wrap {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 25px 55px rgba(8, 47, 135, 0.16),
                0 8px 18px rgba(8, 47, 135, 0.07);
    z-index: 3;
    background: #ffffff;
}
.fac-hero-image-wrap .fac-hero-image {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.fac-hero-image-wrap:hover .fac-hero-image {
    transform: scale(1.03);
}

.fac-hero-badge {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(6, 31, 99, 0.92);
    backdrop-filter: blur(8px);
    color: #ffffff;
    padding: 10px 18px;
    border-radius: 12px;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    z-index: 4;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}
.fac-hero-badge i {
    color: var(--school-orange);
    font-size: 16px;
}

/* SHARED SECTION STYLES */
.ach-section {
    padding: 90px 0;
    position: relative;
}
.ach-section.alt {
    background: var(--school-light-blue);
}
.ach-section .container {
    width: 90%;
    max-width: 1600px;
}

.ach-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 50px;
}
.ach-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--school-orange);
    font: 700 12px/1 "Inter", sans-serif;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}
.ach-eyebrow::before,
.ach-eyebrow::after {
    content: "";
    width: 20px;
    height: 2px;
    background: var(--school-orange);
    display: inline-block;
}
.ach-title {
    margin: 0 0 14px;
    color: var(--school-blue);
    font: 700 clamp(26px, 3.2vw, 40px)/1.18 "Playfair Display", serif;
    letter-spacing: -0.3px;
}
.ach-title em {
    color: var(--school-orange);
    font-style: italic;
    font-weight: 600;
}
.ach-sub {
    margin: 0;
    color: var(--school-muted);
    font: 400 15px/1.75 "Inter", sans-serif;
}

/* STATS / HIGHLIGHTS BAR */
.ach-stats-bar {
    margin-top: -45px;
    position: relative;
    z-index: 10;
}
.ach-stats-card {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 20px 45px rgba(8, 47, 135, 0.10);
    border: 1px solid var(--school-border);
    padding: 30px 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.ach-stat-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 16px;
    border-right: 1px solid var(--school-border);
}
.ach-stat-item:last-child {
    border-right: none;
}
.ach-stat-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}
.ach-stat-icon.gold {
    background: var(--school-gold-bg);
    color: var(--school-gold);
    border: 1px solid var(--school-gold-border);
}
.ach-stat-icon.orange {
    background: var(--school-orange-light);
    color: var(--school-orange);
    border: 1px solid #ffd8b3;
}
.ach-stat-icon.blue {
    background: var(--school-light-blue);
    color: var(--school-blue);
    border: 1px solid #c9dff7;
}
.ach-stat-icon.green {
    background: #e8f8f0;
    color: #198754;
    border: 1px solid #b7ecd0;
}
.ach-stat-text strong {
    display: block;
    color: var(--school-blue);
    font: 700 24px/1.1 "Playfair Display", serif;
    margin-bottom: 4px;
}
.ach-stat-text span {
    display: block;
    color: var(--school-muted);
    font: 600 12px/1.3 "Inter", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* STATE ATHLETIC CHAMPIONS (SPOTLIGHT CARDS) */
.ach-spotlight-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 36px;
    align-items: stretch;
    margin-bottom: 40px;
}
.ach-champion-card {
    background: #ffffff;
    border-radius: 22px;
    border: 1px solid var(--school-border);
    overflow: hidden;
    box-shadow: 0 14px 36px rgba(8, 47, 135, 0.08);
    display: flex;
    flex-direction: column;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.ach-champion-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 50px rgba(8, 47, 135, 0.14);
}
.ach-champion-head {
    background: linear-gradient(135deg, var(--school-dark-blue) 0%, var(--school-blue) 100%);
    padding: 24px 28px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}
.ach-champion-head::after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -30px;
    width: 120px;
    height: 120px;
    border: 24px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
}
.ach-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(245, 130, 32, 0.9);
    color: #ffffff;
    font: 700 11px "Inter", sans-serif;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 30px;
    margin-bottom: 10px;
}
.ach-champion-head h3 {
    margin: 0 0 6px;
    color: #ffffff;
    font: 700 24px "Playfair Display", serif;
}
.ach-champion-head p {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font: 500 13px "Inter", sans-serif;
}
.ach-champion-body {
    padding: 28px;
    flex: 1;
    display: flex;
    gap: 24px;
    align-items: center;
}
.ach-champ-img {
    width: 140px;
    height: 175px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid #ffffff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    background: #f0f4f8;
}
.ach-champ-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ach-champ-info {
    flex: 1;
}
.ach-champ-info h4 {
    color: var(--school-blue);
    font: 700 20px "Playfair Display", serif;
    margin: 0 0 6px;
}
.ach-champ-role {
    color: var(--school-orange);
    font: 700 12.5px "Inter", sans-serif;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 12px;
}
.ach-medal-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ach-medal-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--school-text);
    font: 500 13.5px "Inter", sans-serif;
}
.ach-medal-list li i {
    font-size: 16px;
}
.ach-medal-list li i.gold { color: #f59e0b; }
.ach-medal-list li i.silver { color: #94a3b8; }
.ach-medal-list li i.bronze { color: #d97706; }

/* ATHLETIC MEDALISTS BADGE GRID */
.ach-medals-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.ach-mini-card {
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 16px;
    padding: 20px 16px;
    text-align: center;
    box-shadow: 0 6px 18px rgba(8, 47, 135, 0.04);
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.ach-mini-card:hover {
    transform: translateY(-4px);
    border-color: var(--school-orange);
}
.ach-mini-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 20px;
}
.ach-mini-card.gold .ach-mini-icon {
    background: #fef3c7;
    color: #d97706;
}
.ach-mini-card.silver .ach-mini-icon {
    background: #f1f5f9;
    color: #64748b;
}
.ach-mini-card.bronze .ach-mini-icon {
    background: #ffedd5;
    color: #c2410c;
}
.ach-mini-card h5 {
    color: var(--school-blue);
    font: 700 16px "Playfair Display", serif;
    margin: 0 0 4px;
}
.ach-mini-card span {
    display: block;
    color: var(--school-orange);
    font: 700 11px "Inter", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}
.ach-mini-card p {
    color: var(--school-muted);
    font: 400 12.5px/1.4 "Inter", sans-serif;
    margin: 0;
}

/* DISTRICT SPORTS MEET CARD */
.ach-district-banner {
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(8, 47, 135, 0.06);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    margin-top: 36px;
}
.ach-district-img {
    position: relative;
    height: 100%;
    min-height: 280px;
}
.ach-district-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ach-district-content {
    padding: 36px 40px;
}
.ach-district-content h3 {
    color: var(--school-blue);
    font: 700 24px "Playfair Display", serif;
    margin: 0 0 12px;
}
.ach-district-content p {
    color: var(--school-muted);
    font: 400 14.5px/1.7 "Inter", sans-serif;
    margin-bottom: 20px;
}
.ach-district-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.ach-district-badge {
    background: var(--school-light-blue);
    color: var(--school-blue);
    font: 600 12px "Inter", sans-serif;
    padding: 6px 14px;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(8, 47, 135, 0.12);
}
.ach-district-badge i {
    color: var(--school-orange);
}

/* KALOTSAVA & ARTS SECTION */
.ach-kalotsav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 0;
}
.ach-art-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid var(--school-border);
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(8, 47, 135, 0.06);
    display: flex;
    flex-direction: column;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.ach-art-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 42px rgba(8, 47, 135, 0.12);
}
.ach-art-thumb {
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background: #edf2f7;
}
.ach-art-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.ach-art-card:hover .ach-art-thumb img {
    transform: scale(1.06);
}
.ach-art-badge-overlay {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(6, 31, 99, 0.88);
    backdrop-filter: blur(6px);
    color: #ffffff;
    font: 700 11px "Inter", sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 2;
}
.ach-art-body {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.ach-art-body h4 {
    color: var(--school-blue);
    font: 700 19px "Playfair Display", serif;
    margin: 0 0 8px;
}
.ach-art-body p {
    color: var(--school-muted);
    font: 400 14px/1.65 "Inter", sans-serif;
    margin: 0 0 16px;
    flex: 1;
}
.ach-art-footer {
    padding-top: 14px;
    border-top: 1px solid var(--school-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--school-orange);
    font: 600 12.5px "Inter", sans-serif;
}
.ach-art-footer span i {
    margin-right: 5px;
}

/* SCIENCE & MATHS FAIR SECTION */
.ach-science-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}
.ach-science-box {
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 22px;
    padding: 32px 30px;
    box-shadow: 0 12px 32px rgba(8, 47, 135, 0.06);
    display: flex;
    flex-direction: column;
}
.ach-science-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 2px solid var(--school-light-blue);
}
.ach-science-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--school-orange-light);
    color: var(--school-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.ach-science-icon.blue {
    background: var(--school-light-blue);
    color: var(--school-blue);
}
.ach-science-header h3 {
    margin: 0 0 4px;
    color: var(--school-blue);
    font: 700 20px "Playfair Display", serif;
}
.ach-science-header span {
    color: var(--school-muted);
    font: 600 12px "Inter", sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}
.ach-winners-table-wrap {
    overflow-x: auto;
    flex: 1;
}
.ach-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}
.ach-table tr {
    background: #f8fafc;
    border-radius: 10px;
    transition: background 0.25s ease;
}
.ach-table tr:hover {
    background: var(--school-light-blue);
}
.ach-table td {
    padding: 11px 14px;
    font-family: "Inter", sans-serif;
    font-size: 13.5px;
    color: var(--school-text);
    vertical-align: middle;
}
.ach-table td:first-child {
    border-radius: 10px 0 0 10px;
    font-weight: 700;
    color: var(--school-blue);
    width: 38%;
}
.ach-table td:last-child {
    border-radius: 0 10px 10px 0;
    text-align: right;
    width: 25%;
}
.ach-rank-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ach-rank-pill.first {
    background: #fef3c7;
    color: #b45309;
}
.ach-rank-pill.second {
    background: #f1f5f9;
    color: #475569;
}
.ach-rank-pill.third {
    background: #ffedd5;
    color: #c2410c;
}

/* ACADEMIC HONORS & SCHOLARSHIP CARDS */
.ach-feature-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.ach-feature-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid var(--school-border);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(8, 47, 135, 0.06);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ach-feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(8, 47, 135, 0.12);
}
.ach-feature-img {
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
}
.ach-feature-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.ach-feature-card:hover .ach-feature-img img {
    transform: scale(1.06);
}
.ach-feature-icon {
    position: absolute;
    bottom: -20px;
    left: 20px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--school-orange);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    box-shadow: 0 6px 16px rgba(245, 130, 32, 0.35);
    z-index: 2;
}
.ach-feature-body {
    padding: 32px 24px 24px;
    flex: 1;
}
.ach-feature-body h3 {
    color: var(--school-blue);
    font: 700 20px "Playfair Display", serif;
    margin: 0 0 8px;
}
.ach-feature-body p {
    color: var(--school-muted);
    font: 400 14px/1.7 "Inter", sans-serif;
    margin: 0;
}

/* GALLERY & FILTER TABS */
.ach-gallery-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 36px;
}
.ach-filter-btn {
    background: #ffffff;
    border: 1px solid var(--school-border);
    color: var(--school-muted);
    font: 600 13px "Inter", sans-serif;
    padding: 9px 20px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.25s ease;
}
.ach-filter-btn:hover {
    border-color: var(--school-orange);
    color: var(--school-orange);
}
.ach-filter-btn.active {
    background: var(--school-blue);
    border-color: var(--school-blue);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(8, 47, 135, 0.25);
}

.ach-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.ach-gallery-item {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
    border: 0;
    padding: 0;
    background: var(--school-border);
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(8, 47, 135, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ach-gallery-item.wide {
    grid-column: span 2;
    aspect-ratio: 8 / 3;
}
.ach-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.ach-gallery-item:hover img {
    transform: scale(1.08);
}
.ach-gallery-item::after {
    content: attr(data-caption);
    position: absolute;
    inset: auto 0 0 0;
    padding: 45px 16px 14px;
    color: #ffffff;
    text-align: left;
    font: 600 13px/1.4 "Inter", sans-serif;
    background: linear-gradient(transparent, rgba(6, 31, 99, 0.88));
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.ach-gallery-item:hover::after,
.ach-gallery-item:focus-visible::after {
    opacity: 1;
    transform: none;
}
.ach-gallery-item:focus-visible {
    outline: 3px solid var(--school-orange);
    outline-offset: 2px;
}

/* Lightbox Modal */
#achLightbox .modal-content {
    background: transparent;
    border: 0;
}
#achLightbox .modal-body {
    padding: 0;
    text-align: center;
}
#achLightbox img {
    max-width: 100%;
    max-height: 82vh;
    border-radius: 14px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
    object-fit: contain;
}
#achLightbox .ach-lb-caption {
    margin-top: 14px;
    text-align: center;
    color: #ffffff;
    font: 600 15px "Inter", sans-serif;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}
#achLightbox .btn-close {
    position: absolute;
    top: -38px;
    right: 0;
    filter: invert(1);
    opacity: 1;
}

/* CTA / INSPIRATION BANNER */
.ach-cta {
    background: linear-gradient(135deg, var(--school-blue) 0%, var(--school-dark-blue) 100%);
    border-radius: 24px;
    padding: 60px 48px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(8, 47, 135, 0.2);
    text-align: center;
}
.ach-cta::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 260px;
    height: 260px;
    border: 40px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    pointer-events: none;
}
.ach-cta::after {
    content: "";
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 180px;
    height: 180px;
    background: rgba(245, 130, 32, 0.12);
    border-radius: 50%;
    pointer-events: none;
}
.ach-cta h2 {
    font: 700 clamp(24px, 3vw, 36px) "Playfair Display", serif;
    margin: 0 0 16px;
    color: #ffffff;
}
.ach-cta p {
    color: rgba(255, 255, 255, 0.85);
    font: 400 15.5px/1.8 "Inter", sans-serif;
    max-width: 680px;
    margin: 0 auto 30px;
}
.ach-cta-btns {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}
.ach-btn-primary {
    background: var(--school-orange);
    color: #ffffff;
    font: 600 14px "Inter", sans-serif;
    padding: 13px 28px;
    border-radius: 30px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 20px rgba(245, 130, 32, 0.35);
    transition: all 0.3s ease;
}
.ach-btn-primary:hover {
    background: #e06f0e;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(245, 130, 32, 0.45);
}
.ach-btn-secondary {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font: 600 14px "Inter", sans-serif;
    padding: 13px 28px;
    border-radius: 30px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.28);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}
.ach-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    transform: translateY(-2px);
}

/* Student Achievements Responsive */
@media (max-width: 1199.98px) {
    .ach-stats-card { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .ach-stat-item:nth-child(2) { border-right: none; }
    .ach-spotlight-grid { grid-template-columns: 1fr; }
    .ach-gallery { grid-template-columns: repeat(3, 1fr); }
    .ach-science-wrapper { grid-template-columns: 1fr; }
}

@media (max-width: 991.98px) {
    .ach-section { padding: 65px 0; }
    .ach-stats-bar { margin-top: -20px; }
    .ach-district-banner { grid-template-columns: 1fr; }
    .ach-district-img { min-height: 220px; }
    .ach-kalotsav-grid { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto 30px; }
    .ach-feature-row { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; }
    .ach-medals-card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    .ach-stats-card { grid-template-columns: 1fr; }
    .ach-stat-item { border-right: none; border-bottom: 1px solid var(--school-border); padding-bottom: 14px; }
    .ach-stat-item:last-child { border-bottom: none; }
    .ach-champion-body { flex-direction: column; text-align: center; }
    .ach-champ-img { width: 160px; height: 200px; margin: 0 auto; }
    .ach-medal-list li { justify-content: center; }

    .ach-gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .ach-gallery-item.wide { grid-column: span 2; aspect-ratio: 8 / 3; }
    .ach-gallery-item::after { opacity: 1; transform: none; font-size: 11.5px; }
    .ach-district-content { padding: 26px 20px; }
    .ach-cta { padding: 40px 24px; }
}

@media (max-width: 575.98px) {
    .ach-gallery { grid-template-columns: 1fr; }
    .ach-gallery-item.wide { grid-column: auto; }
}

/* =========================================================
   TEACHING METHODOLOGY — PAGE STYLES
========================================================= */
.tm-hero {
    position: relative;
    background: var(--school-light-blue);
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 500px;
    max-height: 70vh;
    height: 70vh;
    padding: 40px 0;
}
.tm-hero::before {
    content: "";
    position: absolute;
    width: 620px; height: 620px;
    top: -320px; right: -240px;
    border: 80px solid rgba(8, 47, 135, 0.045);
    border-radius: 50%;
    pointer-events: none;
}
.tm-hero::after {
    content: "";
    position: absolute;
    width: 340px; height: 340px;
    bottom: -180px; left: -140px;
    background: rgba(245, 130, 32, 0.07);
    border-radius: 50%;
    pointer-events: none;
}
.tm-hero .container {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1600px;
}
.tm-hero-inner {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 60px;
    align-items: center;
}
.tm-crumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.tm-crumb a {
    color: var(--school-muted);
    text-decoration: none;
    transition: color 0.25s ease;
}
.tm-crumb a:hover { color: var(--school-orange); }
.tm-crumb i { color: var(--school-orange); font-size: 10px; }
.tm-crumb .current { color: var(--school-blue); }
.tm-hero-title {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(32px, 3.8vw, 52px);
    line-height: 1.05;
    font-weight: 700;
    margin: 0 0 18px;
    letter-spacing: -0.5px;
}
.tm-hero-title em {
    color: var(--school-orange);
    font-style: italic;
    font-weight: 600;
}
.tm-hero-desc {
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.7;
    max-width: 540px;
    margin: 0 0 24px;
}
.tm-hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
    padding-top: 20px;
    border-top: 1px solid rgba(8, 47, 135, 0.10);
}
.tm-hero-facts span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--school-blue);
    font-family: "Inter", sans-serif;
    font-size: 12.5px;
    font-weight: 600;
}
.tm-hero-facts i {
    color: var(--school-orange);
    font-size: 15px;
}

/* TM Flow Card & Visual */
.tm-visual {
    position: relative;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
}
.tm-flow-card {
    position: relative;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 25px 55px rgba(8, 47, 135, 0.16),
                0 8px 18px rgba(8, 47, 135, 0.07);
    overflow: hidden;
    z-index: 3;
}
.tm-flow-head {
    background: linear-gradient(135deg, var(--school-blue) 0%, var(--school-dark-blue) 100%);
    padding: 22px 26px 20px;
    position: relative;
    overflow: hidden;
}
.tm-flow-head::after {
    content: "";
    position: absolute;
    right: -30px; top: -30px;
    width: 100px; height: 100px;
    border: 22px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    pointer-events: none;
}
.tm-flow-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #ffffff;
    font-size: 20px;
    position: relative;
    z-index: 1;
    margin-bottom: 14px;
}
.tm-flow-head-bar {
    display: block;
    height: 9px;
    width: 66%;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.92);
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}
.tm-flow-head-bar.short {
    height: 6px;
    width: 38%;
    background: var(--school-orange);
    margin-bottom: 0;
}
.tm-flow-steps {
    padding: 16px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.tm-flow-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--school-border);
    position: relative;
}
.tm-flow-step:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.tm-flow-step:first-child {
    padding-top: 4px;
}
.tm-flow-step-num {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--school-light-blue);
    color: var(--school-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Playfair Display", serif;
    font-size: 12px;
    font-weight: 700;
    position: relative;
    transition: 0.3s ease;
}
.tm-flow-step:nth-child(1) .tm-flow-step-num { background: var(--school-orange); color: #ffffff; }
.tm-flow-step:nth-child(2) .tm-flow-step-num { background: var(--school-blue); color: #ffffff; }
.tm-flow-step:nth-child(3) .tm-flow-step-num { background: var(--school-dark-blue); color: #ffffff; }
.tm-flow-step:nth-child(4) .tm-flow-step-num { background: #198754; color: #ffffff; }
.tm-flow-step-body {
    flex-grow: 1;
    padding-top: 1px;
}
.tm-flow-step-name {
    display: block;
    height: 7px;
    border-radius: 4px;
    background: var(--school-light-blue);
    margin-bottom: 6px;
}
.tm-flow-step:nth-child(1) .tm-flow-step-name { width: 68%; }
.tm-flow-step:nth-child(2) .tm-flow-step-name { width: 54%; }
.tm-flow-step:nth-child(3) .tm-flow-step-name { width: 74%; }
.tm-flow-step:nth-child(4) .tm-flow-step-name { width: 62%; }
.tm-flow-step-sub {
    display: block;
    height: 5px;
    border-radius: 3px;
    background: #e6ecf3;
    width: 40%;
}
.tm-flow-foot {
    padding: 14px 22px 18px;
    background: #f8fafd;
    border-top: 1px solid var(--school-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.tm-flow-foot-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--school-blue);
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.tm-flow-foot-label i {
    color: var(--school-orange);
    font-size: 12px;
}
.tm-flow-foot-dots {
    display: flex;
    gap: 5px;
}
.tm-flow-foot-dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--school-border);
}
.tm-flow-foot-dots span:first-child {
    background: var(--school-orange);
    width: 18px;
    border-radius: 4px;
}

/* Floating decorative badges */
.tm-float {
    position: absolute;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(8, 47, 135, 0.14);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    z-index: 5;
    transition: transform 0.4s ease;
}
.tm-float:hover { transform: translateY(-3px); }
.tm-float-icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.tm-float-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
}
.tm-float-text small {
    font-family: "Inter", sans-serif;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--school-muted);
    margin-bottom: 3px;
}
.tm-float-text strong {
    font-family: "Playfair Display", serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--school-blue);
    white-space: nowrap;
}
.tm-float-1 {
    top: -14px;
    left: -20px;
    animation: tmFloatY 4s ease-in-out infinite;
}
.tm-float-1 .tm-float-icon {
    background: #fff3e7;
    color: var(--school-orange);
}
.tm-float-2 {
    bottom: -18px;
    right: -20px;
    animation: tmFloatY 4s ease-in-out infinite;
    animation-delay: 1.2s;
}
.tm-float-2 .tm-float-icon {
    background: var(--school-light-blue);
    color: var(--school-blue);
}
.tm-float-3 {
    top: 42%;
    right: -32px;
    animation: tmFloatX 5s ease-in-out infinite;
    animation-delay: 0.6s;
}
.tm-float-3 .tm-float-icon {
    background: #e7f5ee;
    color: #198754;
}
@keyframes tmFloatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes tmFloatX {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-5px); }
}
.tm-visual::before {
    content: "";
    position: absolute;
    top: 20px;
    left: -20px;
    width: 130px;
    height: 130px;
    background-image: radial-gradient(rgba(8, 47, 135, 0.16) 1.6px, transparent 1.6px);
    background-size: 14px 14px;
    z-index: 1;
    pointer-events: none;
}

/* TM Shared Headings & Philosophy */
.tm-section { position: relative; overflow: hidden; }
.tm-section .container {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1600px;
}
.tm-sec-head {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 55px;
}
.tm-sec-head.left {
    text-align: left;
    max-width: 100%;
    margin: 0 0 30px;
}
.tm-sec-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    color: var(--school-orange);
    font-family: "Inter", sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.tm-sec-label::before,
.tm-sec-label::after {
    content: "";
    width: 30px; height: 2px;
    background: var(--school-orange);
}
.tm-sec-head.left .tm-sec-label::after { display: none; }
.tm-sec-head h2 {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(30px, 3.6vw, 44px);
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 14px;
}
.tm-sec-head h2 em {
    color: var(--school-orange);
    font-style: italic;
    font-weight: 600;
}
.tm-sec-head p {
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.75;
    max-width: 660px;
    margin: 0 auto;
}
.tm-sec-head.left p { margin: 0; max-width: 100%; }

.tm-philosophy {
    background: #ffffff;
    padding: 100px 0 90px;
}
.tm-philosophy::before {
    content: "";
    position: absolute;
    width: 620px; height: 620px;
    top: -320px; right: -260px;
    background: var(--school-light-blue);
    border-radius: 50%;
    opacity: 0.45;
    pointer-events: none;
}
.tm-philosophy-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 70px;
    align-items: center;
}
.tm-philosophy-text .tm-sec-label {
    margin-bottom: 16px;
    color: var(--school-blue);
}
.tm-philosophy-text .tm-sec-label::before { background: var(--school-blue); }
.tm-philosophy-text h2 {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(30px, 3.6vw, 44px);
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 22px;
}
.tm-philosophy-text h2 em {
    color: var(--school-orange);
    font-style: italic;
    font-weight: 600;
}
.tm-philosophy-text p {
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 15.5px;
    line-height: 1.85;
    margin-bottom: 18px;
}
.tm-philosophy-text strong {
    color: var(--school-blue);
    font-weight: 600;
}
.tm-philosophy-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--school-border);
}
.tm-philo-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--school-light-blue);
    padding: 8px 16px;
    border-radius: 30px;
    color: var(--school-blue);
    font-family: "Inter", sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid rgba(8, 47, 135, 0.10);
    transition: all 0.25s ease;
}
.tm-philo-pill i { color: var(--school-orange); font-size: 14px; }
.tm-philo-pill:hover {
    background: var(--school-blue);
    color: #ffffff;
    border-color: var(--school-blue);
    transform: translateY(-2px);
}
.tm-philo-pill:hover i { color: var(--school-orange); }

.tm-philosophy-visual {
    position: relative;
    padding: 14px;
}
.tm-philosophy-visual::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 90px; height: 90px;
    border-top: 5px solid var(--school-orange);
    border-left: 5px solid var(--school-orange);
    border-radius: 18px 0 0 0;
    z-index: 2;
}
.tm-philosophy-visual::after {
    content: "";
    position: absolute;
    right: 0; bottom: 0;
    width: 90px; height: 90px;
    border-right: 5px solid var(--school-blue);
    border-bottom: 5px solid var(--school-blue);
    border-radius: 0 0 18px 0;
    z-index: 2;
}
.tm-philosophy-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 14px;
    border: 6px solid #ffffff;
    box-shadow: 0 20px 45px rgba(8, 47, 135, 0.14);
    display: block;
}

/* TM Methods & Pillars */
.tm-methods {
    background: var(--school-light-blue);
    padding: 100px 0 110px;
}
.tm-methods::before {
    content: "";
    position: absolute;
    width: 520px; height: 520px;
    bottom: -280px; left: -200px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.6;
    pointer-events: none;
}
.tm-methods-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
}
.tm-card {
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 20px;
    padding: 32px 26px 28px;
    transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(8, 47, 135, 0.04);
}
.tm-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 4px;
    background: var(--school-blue);
    transition: background 0.3s ease;
}
.tm-card:hover {
    border-color: var(--school-orange);
    transform: translateY(-8px);
    box-shadow: 0 24px 50px rgba(8, 47, 135, 0.12);
}
.tm-card:hover::before {
    background: var(--school-orange);
}
.tm-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 20px;
}
.tm-card-icon {
    width: 60px; height: 60px;
    border-radius: 16px;
    background: var(--school-light-blue);
    color: var(--school-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    transition: all 0.35s ease;
    flex-shrink: 0;
}
.tm-card:hover .tm-card-icon {
    background: var(--school-orange);
    color: #ffffff;
    transform: rotate(-6deg) scale(1.05);
}
.tm-card-tag {
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--school-blue);
    background: rgba(8, 47, 135, 0.06);
    padding: 5px 10px;
    border-radius: 20px;
}
.tm-card:hover .tm-card-tag {
    background: rgba(245, 130, 32, 0.12);
    color: var(--school-orange);
}
.tm-card h3 {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.28;
}
.tm-card-sub {
    color: var(--school-orange);
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;
    font-style: italic;
    margin-bottom: 12px;
    display: block;
}
.tm-card-line {
    width: 32px;
    height: 3px;
    background: var(--school-orange);
    border-radius: 3px;
    margin-bottom: 14px;
    transition: width 0.35s ease;
}
.tm-card:hover .tm-card-line {
    width: 52px;
}
.tm-card p {
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0;
    flex-grow: 1;
}

/* TM Journey */
.tm-journey {
    background: #ffffff;
    padding: 100px 0 105px;
}
.tm-journey::before {
    content: "";
    position: absolute;
    width: 600px; height: 600px;
    top: -300px; left: -240px;
    background: var(--school-light-blue);
    border-radius: 50%;
    opacity: 0.45;
    pointer-events: none;
}
.tm-journey-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
}
.tm-journey-card {
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 18px;
    padding: 30px 24px;
    position: relative;
    transition: 0.3s ease;
    box-shadow: 0 12px 32px rgba(8, 47, 135, 0.05);
}
.tm-journey-card:hover {
    transform: translateY(-6px);
    border-color: var(--school-orange);
    box-shadow: 0 20px 45px rgba(8, 47, 135, 0.10);
}
.tm-journey-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--school-blue);
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    box-shadow: 0 8px 18px rgba(8, 47, 135, 0.20);
}
.tm-journey-card:nth-child(1) .tm-journey-num { background: var(--school-orange); }
.tm-journey-card:nth-child(2) .tm-journey-num { background: var(--school-blue); }
.tm-journey-card:nth-child(3) .tm-journey-num { background: var(--school-dark-blue); }
.tm-journey-card:nth-child(4) .tm-journey-num { background: #198754; }
.tm-journey-card h3 {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 10px;
}
.tm-journey-card p {
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0;
}

/* Teaching Methodology Responsive */
@media (max-width: 1199.98px) {
    .tm-hero {
        height: auto;
        max-height: 70vh;
        min-height: 0;
        padding: 50px 0;
    }
    .tm-hero .container { width: 92%; }
    .tm-hero-inner { gap: 40px; }
    .tm-visual { max-width: 320px; }
    .tm-float-3 { right: -18px; }

    .tm-section .container { width: 92%; }
    .tm-philosophy { padding: 80px 0 70px; }
    .tm-methods { padding: 80px 0 90px; }
    .tm-methods-grid { grid-template-columns: repeat(2, 1fr); }
    .tm-journey { padding: 80px 0 85px; }
    .tm-journey-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991.98px) {
    .tm-hero {
        height: auto;
        max-height: none;
        padding: 55px 0;
    }
    .tm-hero-inner {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .tm-hero-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .tm-visual { max-width: 340px; margin-top: 10px; }

    .tm-philosophy-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .tm-philosophy-img { height: 340px; }
}

@media (max-width: 767.98px) {
    .tm-hero { padding: 45px 0 60px; }
    .tm-hero .container { width: 95%; }
    .tm-hero-title { font-size: 32px; }
    .tm-hero-desc { font-size: 14.5px; }
    .tm-crumb { font-size: 10.5px; letter-spacing: 1.5px; }
    .tm-hero-facts { gap: 12px 22px; }
    .tm-hero-facts span { font-size: 12px; }

    .tm-visual { max-width: 300px; }
    .tm-float-1 { left: -8px; top: -10px; }
    .tm-float-2 { right: -8px; bottom: -14px; }
    .tm-float-3 { display: none; }

    .tm-section .container { width: 95%; }
    .tm-philosophy { padding: 60px 0 50px; }
    .tm-philosophy-img { height: 260px; }
    .tm-philosophy-text h2 { font-size: 28px; }
    .tm-philosophy-text p { font-size: 14.5px; }

    .tm-methods { padding: 60px 0 70px; }
    .tm-sec-head h2 { font-size: 26px; }
    .tm-sec-head p { font-size: 14.5px; }
    .tm-methods-grid { grid-template-columns: 1fr; gap: 20px; }

    .tm-journey { padding: 60px 0 65px; }
    .tm-journey-grid { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .tm-hero { padding: 40px 0 55px; }
    .tm-hero-title { font-size: 28px; }
    .tm-hero-desc { font-size: 13.5px; }
    .tm-hero-facts {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .tm-visual { max-width: 280px; }
    .tm-float { padding: 8px 11px; gap: 8px; border-radius: 12px; }
    .tm-float-icon { width: 28px; height: 28px; font-size: 13px; border-radius: 8px; }
    .tm-float-text small { font-size: 7.5px; letter-spacing: 1px; margin-bottom: 2px; }
    .tm-float-text strong { font-size: 11.5px; }

    .tm-philosophy-text h2 { font-size: 24px; }
    .tm-sec-head h2 { font-size: 22px; }
    .tm-sec-label { font-size: 10.5px; letter-spacing: 2px; }
    .tm-sec-label::before,
    .tm-sec-label::after { width: 22px; }
    .tm-philosophy-img { height: 210px; }
}

/* =========================================================
   TEACHING & NON-TEACHING STAFF — DIRECTORY & HERO
========================================================= */
.fac-card {
    position: relative;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 25px 55px rgba(8, 47, 135, 0.16),
                0 8px 18px rgba(8, 47, 135, 0.07);
    overflow: hidden;
    z-index: 3;
}
.fac-card-head {
    background: linear-gradient(135deg, var(--school-blue) 0%, var(--school-dark-blue) 100%);
    padding: 20px 24px 18px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
}
.fac-card-head::after {
    content: "";
    position: absolute;
    right: -40px; top: -40px;
    width: 130px; height: 130px;
    border: 26px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    pointer-events: none;
}
.fac-card-head-icon {
    flex-shrink: 0;
    width: 42px; height: 42px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    position: relative;
    z-index: 1;
}
.fac-card-head-text { position: relative; z-index: 1; }
.fac-card-head-text span {
    display: block;
    color: var(--school-orange);
    font-family: "Inter", sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.fac-card-head-text strong {
    display: block;
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}
.fac-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    padding: 6px;
}
.fac-tile {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 12px;
    border-radius: 12px;
    transition: 0.3s ease;
}
.fac-tile:hover { background: var(--school-light-blue); }
.fac-tile-icon {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: 0.3s ease;
}
.fac-tile:nth-child(1) .fac-tile-icon { background: #fff3e7; color: var(--school-orange); }
.fac-tile:nth-child(2) .fac-tile-icon { background: var(--school-light-blue); color: var(--school-blue); }
.fac-tile:nth-child(3) .fac-tile-icon { background: #f3e9ff; color: #6f42c1; }
.fac-tile:nth-child(4) .fac-tile-icon { background: #e7f5ee; color: #198754; }
.fac-tile:nth-child(5) .fac-tile-icon { background: #fdf2f2; color: #d64545; }
.fac-tile:nth-child(6) .fac-tile-icon { background: #fffae6; color: #b5870a; }
.fac-tile:hover .fac-tile-icon { transform: rotate(-6deg) scale(1.05); }
.fac-tile-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.fac-tile-text strong {
    display: block;
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 2px;
}
.fac-tile-text small {
    display: block;
    color: var(--school-muted);
    font-family: "Inter", sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.fac-card-foot {
    padding: 14px 20px 16px;
    background: #f8fafd;
    border-top: 1px solid var(--school-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.fac-card-foot-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--school-blue);
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.fac-card-foot-label i { color: var(--school-orange); font-size: 12px; }
.fac-card-foot-dots { display: flex; gap: 4px; }
.fac-card-foot-dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--school-border);
}
.fac-card-foot-dots span:nth-child(1) { background: var(--school-orange); width: 16px; border-radius: 4px; }
.fac-card-foot-dots span:nth-child(2) { background: var(--school-blue); }
.fac-card-foot-dots span:nth-child(3) { background: #6f42c1; }
.fac-card-foot-dots span:nth-child(4) { background: #198754; }
.fac-card-foot-dots span:nth-child(5) { background: #d64545; }
.fac-card-foot-dots span:nth-child(6) { background: #b5870a; }

/* Floating badges for Staff */
.fac-float-1 { top: -34px; left: -22px; animation: facFloatY 4s ease-in-out infinite; }
.fac-float-1 .fac-float-icon { background: #fff3e7; color: var(--school-orange); }
.fac-float-2 { bottom: -18px; right: -22px; animation: facFloatY 4s ease-in-out infinite; animation-delay: 1.2s; }
.fac-float-2 .fac-float-icon { background: var(--school-light-blue); color: var(--school-blue); }
.fac-float-3 { top: 46%; right: -87px; animation: facFloatX 5s ease-in-out infinite; animation-delay: 0.6s; }
.fac-float-3 .fac-float-icon { background: #e7f5ee; color: #198754; }
@keyframes facFloatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes facFloatX {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-5px); }
}

/* Staff Directory Section */
.fac-staff {
    position: relative;
    background: #ffffff;
    padding: 90px 0 100px;
    overflow: hidden;
}
.fac-staff::before {
    content: "";
    position: absolute;
    top: -220px;
    left: -200px;
    width: 480px;
    height: 480px;
    border: 72px solid rgba(8, 47, 135, 0.035);
    border-radius: 50%;
    pointer-events: none;
}
.fac-staff::after {
    content: "";
    position: absolute;
    bottom: -170px;
    right: -140px;
    width: 340px;
    height: 340px;
    background: rgba(245, 130, 32, 0.06);
    border-radius: 50%;
    pointer-events: none;
}
.fac-staff .container {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1600px;
}

.fac-staff-head {
    max-width: 720px;
    margin: 0 auto 46px;
    text-align: center;
}
.fac-staff-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Inter", sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--school-orange);
    margin-bottom: 14px;
}
.fac-staff-eyebrow::before,
.fac-staff-eyebrow::after {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: rgba(245, 130, 32, 0.4);
}
.fac-staff-title {
    font-family: "Playfair Display", serif;
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 700;
    color: var(--school-blue);
    line-height: 1.15;
    margin: 0 0 16px;
    letter-spacing: -0.4px;
}
.fac-staff-title em {
    color: var(--school-orange);
    font-style: italic;
    font-weight: 600;
}
.fac-staff-desc {
    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.75;
    color: var(--school-muted);
    margin: 0;
}

.fac-staff-card {
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 22px;
    box-shadow: 0 26px 60px rgba(8, 47, 135, 0.09),
                0 6px 18px rgba(8, 47, 135, 0.04);
    overflow: hidden;
}
.fac-staff-card-head {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 30px;
    background: linear-gradient(135deg, var(--school-blue) 0%, var(--school-dark-blue) 100%);
}
.fac-staff-card-head::after {
    content: "";
    position: absolute;
    right: -46px;
    top: -70px;
    width: 190px;
    height: 190px;
    border: 32px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    pointer-events: none;
}
.fac-staff-card-title { position: relative; z-index: 1; }
.fac-staff-card-title span {
    display: block;
    color: var(--school-orange);
    font-family: "Inter", sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.fac-staff-card-title strong {
    display: block;
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}
.fac-staff-count {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    white-space: nowrap;
}
.fac-staff-count strong {
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}
.fac-staff-count span {
    color: rgba(255, 255, 255, 0.78);
    font-family: "Inter", sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.fac-staff-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.fac-table {
    width: 100%;
    min-width: 900px;
    border-collapse: separate;
    border-spacing: 0;
}
.fac-table thead th {
    background: #f4f8fd;
    font-family: "Inter", sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--school-blue);
    text-align: left;
    white-space: nowrap;
    padding: 16px 22px;
    border-bottom: 1px solid var(--school-border);
}
.fac-table tbody td {
    padding: 17px 22px;
    border-bottom: 1px solid var(--school-border);
    font-family: "Inter", sans-serif;
    font-size: 13.5px;
    color: var(--school-text);
    vertical-align: middle;
}
.fac-table tbody tr {
    transition: background 0.25s ease;
}
.fac-table tbody tr:hover {
    background: var(--school-light-blue);
}
.fac-table tbody tr:last-child td {
    border-bottom: none;
}

.fac-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--school-light-blue);
    color: var(--school-blue);
    font-family: "Inter", sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    transition: 0.25s ease;
}
.fac-table tbody tr:hover .fac-num {
    background: var(--school-blue);
    color: #ffffff;
}

.fac-name {
    font-family: "Playfair Display", serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--school-blue);
    line-height: 1.25;
}

.fac-qual {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--school-muted);
    letter-spacing: 0.2px;
}

.fac-desig {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    font-family: "Inter", sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    white-space: nowrap;
}
.desig-principal { background: #fff3e7; color: #d9741a; }
.desig-vp        { background: var(--school-light-blue); color: var(--school-blue); }
.desig-pgt       { background: #f3e9ff; color: #6f42c1; }
.desig-tgt       { background: #e7f5ee; color: #198754; }
.desig-prt       { background: #e8f4fd; color: #1c74b8; }
.desig-pprt      { background: #fffae6; color: #b5870a; }
.desig-pet       { background: #fdf2f2; color: #d64545; }
.desig-asst      { background: #f1f3f7; color: #52627a; }

.fac-subject {
    font-size: 13px;
    font-weight: 600;
    color: var(--school-text);
}

/* Staff Responsive Styles */
@media (max-width: 1199.98px) {
    .fac-staff { padding: 80px 0 90px; }
    .fac-staff .container { width: 92%; }
}

@media (max-width: 991.98px) {
    .fac-staff { padding: 70px 0 80px; }
}

@media (max-width: 767.98px) {
    .fac-staff { padding: 55px 0 65px; }
    .fac-staff .container { width: 95%; }
    .fac-staff-head { margin-bottom: 34px; }
    .fac-staff-desc { font-size: 14px; }

    .fac-staff-card { border-radius: 18px; }
    .fac-staff-card-head {
        padding: 18px 20px;
        gap: 12px;
    }
    .fac-staff-card-title strong { font-size: 15px; }
    .fac-staff-card-title span { font-size: 8.5px; letter-spacing: 1.6px; }
    .fac-staff-count { padding: 7px 13px; gap: 7px; }
    .fac-staff-count strong { font-size: 15px; }
    .fac-staff-count span { font-size: 8.5px; letter-spacing: 1.2px; }

    /* Stacked card layout */
    .fac-staff-scroll { overflow: visible; }
    .fac-table { min-width: 0; }
    .fac-table thead { display: none; }
    .fac-table,
    .fac-table tbody,
    .fac-table tr,
    .fac-table td { display: block; width: 100%; }

    .fac-table tbody {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 14px;
    }

    .fac-table tbody tr {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 10px 14px;
        border: 1px solid var(--school-border);
        border-radius: 14px;
        padding: 14px 16px;
        margin-bottom: 0;
        background: #ffffff !important;
        box-shadow: 0 4px 16px rgba(8, 47, 135, 0.05);
        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }
    .fac-table tbody tr:hover {
        border-color: rgba(245, 130, 32, 0.35);
        box-shadow: 0 6px 20px rgba(8, 47, 135, 0.08);
    }

    /* 1. Serial Number (Top Left) */
    .fac-table tbody td[data-label="Sl No"] {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0;
        border: none;
        width: auto;
    }
    .fac-table tbody td[data-label="Sl No"]::before { display: none; }
    .fac-num {
        width: 32px;
        height: 32px;
        font-size: 12px;
        border-radius: 8px;
        background: var(--school-light-blue);
        color: var(--school-blue);
        font-weight: 700;
    }

    /* 2. Teacher Name (Top Center) */
    .fac-table tbody td[data-label="Name"] {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        align-items: center;
        padding: 0;
        border: none;
        text-align: left;
        min-width: 0;
    }
    .fac-table tbody td[data-label="Name"]::before { display: none; }
    .fac-name {
        font-size: 15px;
        font-weight: 700;
        color: var(--school-blue);
        line-height: 1.25;
    }

    /* 3. Designation Badge (Top Right) */
    .fac-table tbody td[data-label="Designation"] {
        grid-column: 3;
        grid-row: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 0;
        border: none;
        width: auto;
    }
    .fac-table tbody td[data-label="Designation"]::before { display: none; }
    .fac-desig {
        font-size: 10px;
        padding: 4px 11px;
        letter-spacing: 0.6px;
        white-space: nowrap;
    }

    /* 4. Qualification (Bottom Left) */
    .fac-table tbody td[data-label="Qualification"] {
        grid-column: 1 / 3;
        grid-row: 2;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 10px 0 0;
        border: none;
        border-top: 1px dashed rgba(8, 47, 135, 0.12);
        text-align: left;
        min-width: 0;
    }
    .fac-table tbody td[data-label="Qualification"]::before {
        content: "QUAL:";
        font-family: "Inter", sans-serif;
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: 1px;
        color: var(--school-muted);
        text-transform: uppercase;
        flex-shrink: 0;
    }
    .fac-qual {
        font-size: 12.5px;
        color: var(--school-text);
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 5. Subject / Section (Bottom Right) */
    .fac-table tbody td[data-label="Subject / Section"] {
        grid-column: 3;
        grid-row: 2;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        padding: 10px 0 0;
        border: none;
        border-top: 1px dashed rgba(8, 47, 135, 0.12);
        text-align: right;
        min-width: 0;
    }
    .fac-table tbody td[data-label="Subject / Section"]::before {
        content: "SUB:";
        font-family: "Inter", sans-serif;
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: 1px;
        color: var(--school-muted);
        text-transform: uppercase;
        flex-shrink: 0;
    }
    .fac-subject {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--school-blue);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 575.98px) {
    .fac-staff { padding: 45px 0 55px; }
    .fac-staff-head { text-align: center; margin-bottom: 26px; }
    .fac-staff-head h2 { font-size: 24px; }
    .fac-staff-desc { font-size: 13.5px; }

    .fac-staff-card-head {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        gap: 10px;
    }
    .fac-staff-card-title strong { font-size: 14.5px; }
    .fac-staff-count { padding: 5px 11px; gap: 6px; }
    .fac-staff-count strong { font-size: 14px; }
    .fac-staff-count span { font-size: 8px; letter-spacing: 1px; }

    .fac-table tbody {
        padding: 12px 10px;
        gap: 10px;
    }
    .fac-table tbody tr {
        padding: 12px 14px;
        gap: 8px 10px;
        border-radius: 12px;
    }
    .fac-num {
        width: 28px;
        height: 28px;
        font-size: 11px;
        border-radius: 7px;
    }
    .fac-name {
        font-size: 14px;
    }
    .fac-desig {
        font-size: 9px;
        padding: 3px 8px;
        letter-spacing: 0.5px;
    }
    .fac-qual {
        font-size: 11.5px;
    }
    .fac-subject {
        font-size: 11.5px;
    }
    .fac-table tbody td[data-label="Qualification"]::before,
    .fac-table tbody td[data-label="Subject / Section"]::before {
        font-size: 8.5px;
    }
}

/* =========================================================
   VISION & MISSION — PAGE STYLES
========================================================= */
.vm-section {
    position: relative;
    padding: 95px 0 105px;
    background: #ffffff;
    overflow: hidden;
}
.vm-section::before {
    content: "";
    position: absolute;
    width: 680px;
    height: 680px;
    top: -340px;
    right: -260px;
    background: var(--school-light-blue);
    border-radius: 50%;
    opacity: 0.55;
    pointer-events: none;
}
.vm-section::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    bottom: -200px;
    left: -160px;
    border: 2px solid var(--school-border);
    border-radius: 50%;
    opacity: 0.7;
    pointer-events: none;
}
.vm-section .container {
    position: relative;
    z-index: 2;
}

.vm-heading {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 60px;
}
.vm-label {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    color: var(--school-orange);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.vm-label::before,
.vm-label::after {
    content: "";
    width: 32px;
    height: 2px;
    background: var(--school-orange);
}
.vm-title {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: clamp(36px, 4.5vw, 54px);
    line-height: 1.12;
    font-weight: 700;
    margin-bottom: 16px;
}
.vm-title .orange { color: var(--school-orange); }

.vm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
    align-items: stretch;
}
.vm-card {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--school-border);
    border-radius: 24px;
    padding: 48px 42px 44px;
    box-shadow: 0 18px 45px rgba(8, 47, 135, 0.06);
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.vm-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--school-blue);
    transition: background 0.3s ease;
}
.vm-card:hover {
    border-color: var(--school-orange);
    transform: translateY(-6px);
    box-shadow: 0 25px 55px rgba(8, 47, 135, 0.12);
}
.vm-card:hover::before {
    background: var(--school-orange);
}
.vm-card-icon {
    width: 72px;
    height: 72px;
    background: var(--school-light-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--school-blue);
    font-size: 32px;
    margin-bottom: 26px;
    transition: 0.3s ease;
}
.vm-card:hover .vm-card-icon {
    background: var(--school-orange);
    color: #ffffff;
}
.vm-card h3 {
    color: var(--school-blue);
    font-family: "Playfair Display", serif;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
}
.vm-card p {
    color: var(--school-muted);
    font-size: 16px;
    line-height: 1.9;
    margin: 0;
}
.vm-card strong { color: var(--school-blue); font-weight: 600; }

/* Vision & Mission Responsive */
@media (max-width: 991.98px) {
    .vm-section { padding: 70px 0 80px; }
    .vm-heading { margin-bottom: 45px; }
    .vm-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .vm-card { padding: 40px 32px 36px; }
}
@media (max-width: 767.98px) {
    .vm-section { padding: 55px 0 65px; }
    .vm-title { font-size: 32px; }
    .vm-card h3 { font-size: 24px; }
    .vm-card p { font-size: 15px; }
    .vm-card-icon {
        width: 62px;
        height: 62px;
        font-size: 28px;
        margin-bottom: 22px;
    }
}
@media (max-width: 575.98px) {
    .vm-title { font-size: 27px; }
    .vm-label { font-size: 11px; letter-spacing: 2px; }
    .vm-label::before,
    .vm-label::after { width: 22px; }
    .vm-card { padding: 32px 24px 28px; border-radius: 18px; }
    .vm-card h3 { font-size: 22px; }
    .vm-card p { font-size: 14.5px; line-height: 1.8; }
}