/* =========================================================
   SREE BALAJI COLLEGE OF NURSING — MODERN STYLESHEET
   Brand colors:
   --primary-dark : #0B2D72  deep institutional blue
   --primary      : #0992C2  teal blue
   --accent       : #0AC4E0  bright cyan
   --light-bg     : #F6E7BC  warm cream
   --gold         : #F5C140  warm gold accent (derived)
   ========================================================= */

:root {
    --primary-dark: #0B2D72;
    --primary-darker: #07194A;
    --primary: #0992C2;
    --accent: #0AC4E0;
    --light-bg: #F6E7BC;
    --gold: #F5C140;
    --gold-strong: #E8A613;

    --ink: #0B1E3F;
    --ink-soft: #4A5876;
    --bg: #FFFFFF;
    --surface: #F7FAFD;
    --surface-2: #EEF4FA;
    --border: #E3EAF2;

    --primary-grad: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    --primary-dark-grad: linear-gradient(135deg, #0A1F55 0%, var(--primary-dark) 60%, #0E3FA0 100%);
    --gold-grad: linear-gradient(135deg, var(--gold) 0%, var(--gold-strong) 100%);

    --shadow-sm: 0 4px 14px rgba(11, 45, 114, 0.08);
    --shadow-md: 0 14px 30px rgba(11, 45, 114, 0.10);
    --shadow-lg: 0 24px 60px rgba(11, 45, 114, 0.18);

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;

    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.65;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
}
a { text-decoration: none; transition: color 0.2s ease; }
img { max-width: 100%; height: auto; display: block; }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn { font-weight: 500; transition: all 0.25s ease; border: none; }
.btn-pill { border-radius: 999px; padding: 10px 22px; }
.btn-lg.btn-pill { padding: 14px 28px; font-size: 16px; }

.btn-gold {
    background: var(--gold-grad);
    color: var(--primary-darker) !important;
    font-weight: 600;
    box-shadow: 0 8px 18px rgba(245, 193, 64, 0.35);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 24px var(--gold-strong); color: var(--primary-darker); }

.btn-light-cta {
    background: #fff;
    color: var(--primary-darker);
    font-weight: 600;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.btn-light-cta:hover { transform: translateY(-2px); color: var(--primary-darker); background: var(--light-bg); }

/* Hero CTA row + Online Fee Payment button */
.hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 8px;
}
.btn-fee-cta {
    background: linear-gradient(135deg, #18A957, #0E7A3E);
    color: #fff !important;
    border: none;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(24, 169, 87, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-fee-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(24, 169, 87, 0.45);
    color: #fff;
}
@media (max-width: 576px) {
    .hero-cta-row .btn { flex: 1 1 100%; text-align: center; justify-content: center; display: inline-flex; align-items: center; }
}

.btn-outline-primary-c {
    background: transparent;
    color: var(--primary-dark);
    border: 1.5px solid var(--primary-dark);
    font-weight: 600;
}
.btn-outline-primary-c:hover { background: var(--primary-dark); color: #fff; }

.text-primary-c { color: var(--primary); }
.text-gold { color: var(--gold) !important; }
.text-gold-dark { color: var(--gold-strong) !important; }

/* =========================================================
   TOP BAR
   ========================================================= */
.top-bar {
    background: var(--primary-dark);
    color: #fff;
    font-size: 13.5px;
    padding: 10px 0;
    letter-spacing: 0.01em;
}
.top-bar i { color: var(--accent); margin-right: 4px; }
.top-bar .btn-gold { padding: 6px 14px; font-size: 13px; }
.top-bar .btn-gold i { color: var(--primary-darker); margin-right: 4px; }

/* =========================================================
   NAVBAR
   ========================================================= */
.modern-nav {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
    padding: 14px 0;
    transition: all 0.25s ease;
    z-index: 1030;
}
.modern-nav.scrolled { box-shadow: var(--shadow-sm); padding: 10px 0; }

.brand-mark {
    width: 86px; height: 86px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center; justify-content: center;
    color: #fff;
    font-size: 22px;
}
.brand-mark--light { background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.18); }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    color: var(--primary-dark);
    letter-spacing: -0.01em;
}
.brand-subtitle {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
    font-weight: 600;
}
.navbar-brand { display: flex; align-items: center; gap: 12px; }
.modern-nav .nav-link {
    color: var(--ink) !important;
    font-weight: 500;
    font-size: 14px;
    padding: 8px 12px !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
}
.modern-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 12px; right: 12px; bottom: 4px;
    height: 2px;
    background: var(--gold-grad);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
    border-radius: 2px;
}
.modern-nav .nav-link:hover::after,
.modern-nav .nav-link.active::after { transform: scaleX(1); }
.modern-nav .nav-link:hover { color: var(--primary) !important; }
.modern-nav .dropdown-toggle::after { font-size: 9px; vertical-align: middle; margin-left: 4px; }

.modern-dropdown {
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-md) !important;
    margin-top: 8px !important;
    padding: 8px !important;
    min-width: 220px;
}
.modern-dropdown .dropdown-item {
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--ink);
    font-weight: 500;
    font-size: 14px;
}
.modern-dropdown .dropdown-item:hover {
    background: var(--surface);
    color: var(--primary);
    padding-left: 16px;
}

.nav-megaphone {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--gold-grad);
    color: var(--primary-darker);
    border: none;
    align-items: center; justify-content: center;
    font-size: 20px;
    box-shadow: 0 6px 14px rgba(245, 193, 64, 0.35);
    cursor: pointer;
    margin-left: 12px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nav-megaphone i { animation: bell 4s ease-in-out infinite; }
.nav-megaphone:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(245, 193, 64, 0.45); }
.megaphone-pulse {
    position: absolute;
    top: -3px; right: -3px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #E63946;
    border: 2px solid #fff;
}
.megaphone-pulse::after {
    content: "";
    position: absolute; inset: -4px;
    border-radius: 50%;
    background: rgba(230, 57, 70, 0.35);
    animation: pulse-ring 1.6s ease-out infinite;
}
@keyframes pulse-ring {
    0%   { transform: scale(0.6); opacity: 1; }
    100% { transform: scale(2);   opacity: 0; }
}
@keyframes bell {
    0%, 90%, 100% { transform: rotate(0); }
    93% { transform: rotate(-12deg); }
    96% { transform: rotate(10deg); }
}

/* =========================================================
   QUICK SIDEBAR (offcanvas)
   ========================================================= */
.quick-sidebar {
    width: 360px !important;
    max-width: 90vw;
    background: #fff;
    border-left: 1px solid var(--border);
    box-shadow: -20px 0 60px rgba(11, 30, 63, 0.15);
    display: flex;
    flex-direction: column;
}
.quick-sidebar__head {
    background: var(--primary-dark-grad);
    color: #fff;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.quick-sidebar__head::before {
    content: "";
    position: absolute;
    top: -60px; right: -60px;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 193, 64, 0.25), transparent 65%);
}
.quick-sidebar__eyebrow {
    position: relative;
    z-index: 1;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gold);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.quick-sidebar__eyebrow i { font-size: 16px; }

.btn-close-custom {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    width: 34px; height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 1;
}
.btn-close-custom:hover { background: var(--gold); color: var(--primary-darker); border-color: var(--gold); }

.quick-sidebar__body {
    padding: 22px;
    overflow-y: auto;
    flex: 1;
}
.quick-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    margin-bottom: 20px;
}

.quick-sidebar__list {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}
.quick-sidebar__list li { margin: 0; }
.quick-sidebar__list a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    color: var(--ink);
    font-weight: 500;
    font-size: 14.5px;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    border: 1px solid transparent;
}
.quick-sidebar__list a i {
    width: 22px;
    color: var(--primary);
    font-size: 17px;
    text-align: center;
}
.quick-sidebar__list a:hover {
    background: var(--surface);
    color: var(--primary-dark);
    border-color: var(--border);
    padding-left: 20px;
}
.quick-sidebar__list a.quick-cta {
    background: var(--gold-grad);
    color: var(--primary-darker);
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(245, 193, 64, 0.35);
    margin-top: 6px;
}
.quick-sidebar__list a.quick-cta i { color: var(--primary-darker); }
.quick-sidebar__list a.quick-cta:hover { transform: translateX(4px); padding-left: 14px; }

.quick-sidebar__list--minor a { font-size: 13.5px; padding: 10px 14px; color: var(--ink-soft); }
.quick-sidebar__list--minor a i { color: var(--gold-strong); font-size: 15px; }
.quick-sidebar__list--minor a:hover { color: var(--primary-dark); }

.quick-sidebar__section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border);
}

.quick-sidebar__foot {
    background: var(--primary-darker);
    color: #fff;
    padding: 20px 22px;
}
.quick-sidebar__foot .quick-sidebar__section-title {
    color: var(--gold);
    border-bottom-color: rgba(255, 255, 255, 0.15);
    margin-bottom: 14px;
}
.quick-sidebar__socials {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.quick-sidebar__socials a {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    display: inline-flex;
    align-items: center; justify-content: center;
    transition: all 0.2s ease;
    font-size: 15px;
}
.quick-sidebar__socials a:hover {
    background: var(--gold);
    color: var(--primary-darker);
    border-color: var(--gold);
    transform: translateY(-2px);
}

/* Make the megaphone visible on smaller screens too, as a floating button */
@media (max-width: 991.98px) {
    .nav-megaphone-mobile {
        display: inline-flex !important;
    }
}
/* =========================================================
   HERO YEARS BADGE
========================================================= */

.hero-years-badge {
    margin-top: 32px;
}

.hero-years-badge img {
    width: 140px;
    height: auto;
    display: block;

    filter: drop-shadow(
        0 14px 30px rgba(0,0,0,0.25)
    );

    animation: floatBadge 4s ease-in-out infinite;
}

/* FLOAT EFFECT */
@keyframes floatBadge {

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

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

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

}

/* MOBILE */
@media (max-width: 767px) {

    .hero-years-badge {
        margin-top: 24px;
        text-align: center;
    }

    .hero-years-badge img {
        width: 110px;
        margin: 0 auto;
    }

}
/* =========================
   BIHER SOLID SECTION
========================= */
.biher-section-solid {
    background: #0b1e3f; /* solid deep navy */
    padding: 90px 0;
    color: #fff;
}

/* TITLE */
.biher-title {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 16px;
    color: #fff;
}

/* TEXT */
.biher-text {
    color: rgba(255,255,255,0.85);
    line-height: 1.75;
    margin-bottom: 14px;
}

/* CARD */
.biher-card-solid {
    background: #ffffff; /* strong contrast */
    border-radius: 16px;
    padding: 28px;
    border: 1px solid #e6eaf0;

    box-shadow: 0 18px 40px rgba(0,0,0,0.12);
    transition: 0.3s;
}

.biher-card-solid:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 60px rgba(0,0,0,0.18);
}

/* CARD TITLE */
.biher-card-solid h5 {
    font-weight: 700;
    margin-bottom: 18px;
    color: #0b1e3f;
}

/* LIST */
.biher-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.biher-list li {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 15px;
    color: #2c3e50;
}

.biher-list i {
    color: #f5c140; /* gold accent */
    font-size: 18px;
    margin-top: 2px;
}

/* MOBILE */
@media(max-width:768px){
    .biher-title {
        font-size: 26px;
    }

    .biher-card-solid {
        padding: 20px;
    }
}
/* =========================
   INSTITUTION DETAILS
========================= */
.institution-details {
    padding: 80px 0;
    background: #f8fafc;
}

/* TEXT */
.inst-text {
    color: #5a6b7b;
    line-height: 1.8;
    margin-bottom: 14px;
}

/* CARD */
.inst-card {
    background: #fff;
    border-radius: 14px;
    padding: 26px;
    border: 1px solid #e6eaf0;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
    height: 100%;
    transition: 0.3s;
}

.inst-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.1);
}

/* TITLE */
.inst-card-title {
    font-weight: 700;
    margin-bottom: 16px;
    color: #0b1e3f;
    display: flex;
    align-items: center;
    gap: 10px;
}

.inst-card-title i {
    color: #f5c140;
}

/* LIST */
.inst-list {
    padding-left: 0;
    list-style: none;
}

.inst-list li {
    margin-bottom: 10px;
    padding-left: 18px;
    position: relative;
    color: #2c3e50;
}

.inst-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #f5c140;
    font-weight: bold;
}

/* ACCOLADES */
.inst-accolades {
    margin-top: 20px;
}

/* RANK CARD */
.rank-card {
    background: #fff;
    padding: 22px;
    border-radius: 12px;
    border: 1px solid #e6eaf0;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

.rank-card h6 {
    font-weight: 700;
    margin-bottom: 10px;
    color: #0b1e3f;
}

.rank-card ul {
    padding-left: 16px;
}

.rank-card li {
    margin-bottom: 6px;
    color: #444;
}
/* =========================================
   NIRF MODERN SECTION
========================================= */

.nirf-modern-section{
    background:
        linear-gradient(135deg,#f4f8ff 0%,#ffffff 100%);
    position:relative;
    overflow:hidden;
}

/* HEADING */

.nirf-section-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 22px;
    border-radius:100px;
    background:rgba(13,110,253,.1);
    color:#0d6efd;
    font-weight:700;
    margin-bottom:20px;
}

.nirf-main-title{
    font-size:clamp(2rem,4vw,3.2rem);
    font-weight:900;
    color:#0f172a;
    margin-bottom:15px;
}

.nirf-main-subtitle{
    max-width:760px;
    margin:auto;
    color:#64748b;
    font-size:1.05rem;
    line-height:1.8;
}

/* MAIN CARD */

.nirf-ultra-card{
    background:
        linear-gradient(135deg,#0d1b3d 0%,#172554 100%);
    border-radius:35px;
    padding:45px;
    overflow:hidden;
    position:relative;

    box-shadow:
        0 25px 60px rgba(13,27,61,.25);
}

/* TOP */

.nirf-card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:35px;
}

.nirf-title-wrap{
    display:flex;
    align-items:center;
    gap:18px;
}

.nirf-icon-box{
    width:75px;
    height:75px;
    border-radius:24px;

    background:
        linear-gradient(135deg,#f6c343,#e0a800);

    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;

    font-size:1.8rem;

    box-shadow:
        0 15px 35px rgba(246,195,67,.3);
}

.nirf-mini-label{
    display:block;
    color:#f6c343;
    font-size:.85rem;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:5px;
}

.nirf-title-wrap h3{
    color:#fff;
    font-size:2rem;
    font-weight:800;
    margin:0;
}

.nirf-years{
    display:flex;
    gap:12px;
}

.nirf-years span{
    padding:10px 18px;
    border-radius:100px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.1);

    color:#fff;
    font-weight:700;
}


/* INNER PANELS */

.nirf-info-panel{
    background:rgba(255,255,255,.96);
    border-radius:28px;
    padding:30px;
    height:100%;
}

.nirf-info-panel.dark-panel{
    background:
        linear-gradient(135deg,#1e293b 0%,#0f172a 100%);
}

.nirf-info-panel h4{
    display:flex;
    align-items:center;
    gap:10px;

    font-size:1.3rem;
    font-weight:800;
    margin-bottom:28px;
    color:#0f172a;
}

.nirf-info-panel.dark-panel h4{
    color:#fff;
}

/* RANK LIST */

.nirf-rank-list{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.nirf-rank-item{
    display:flex;
    align-items:center;
    gap:16px;

    padding:16px 18px;
    border-radius:18px;

    background:#f8fbff;

    transition:.3s ease;
}

.nirf-info-panel.dark-panel .nirf-rank-item{
    background:rgba(255,255,255,.06);
}

.nirf-rank-item:hover{
    transform:translateX(6px);
}

.rank-num{
    min-width:68px;
    height:50px;

    border-radius:14px;

    background:
        linear-gradient(135deg,#0d6efd,#0a58ca);

    color:#fff;

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

    font-size:1.1rem;
    font-weight:900;

    box-shadow:
        0 10px 25px rgba(13,110,253,.25);
}

.nirf-rank-item p{
    margin:0;
    font-weight:600;
    color:#1e293b;
    line-height:1.5;
}

.nirf-info-panel.dark-panel .nirf-rank-item p{
    color:#e2e8f0;
}

/* TAGS */

.nirf-highlight-tags{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:28px;
}

.nirf-highlight-tags span{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:12px 16px;
    border-radius:100px;

    background:rgba(13,110,253,.08);

    color:#0d6efd;
    font-weight:700;
    font-size:.9rem;
}

.nirf-info-panel.dark-panel .nirf-highlight-tags span{
    background:rgba(246,195,67,.12);
    color:#f6c343;
}

/* MOBILE */

@media (max-width:991px){

    .nirf-ultra-card{
        padding:28px;
    }

    .nirf-card-top{
        flex-direction:column;
        align-items:flex-start;
    }

    .nirf-title-wrap{
        align-items:flex-start;
    }

    .nirf-title-wrap h3{
        font-size:1.6rem;
    }

    .nirf-info-panel{
        padding:24px;
    }

}
/* =========================
   MODERN BIHER SECTION
========================= */

.modern-biher-section{
    background:#f4f7fb;
    position:relative;
    overflow:hidden;
}

.section-tag{
    color:#0b8bdc;
    font-weight:700;
    letter-spacing:3px;
    font-size:13px;
    text-transform:uppercase;
}

.main-title{
    font-size:52px;
    font-weight:800;
    color:#0b1f4d;
    margin-top:10px;
    line-height:1.2;
}

.title-line{
    width:90px;
    height:4px;
    background:#e3a008;
    border-radius:30px;
    margin:18px auto 0;
}

/* =========================
   INFO CARD
========================= */

.modern-info-card{
    background:#fff;
    border-radius:28px;
    padding:45px;
    position:relative;
    overflow:hidden;
    transition:.4s ease;
    min-height:100%;
    border:1px solid #dfe7f3;
    box-shadow:
        0 15px 40px rgba(0,0,0,0.05),
        0 5px 15px rgba(0,0,0,0.03);
}

.modern-info-card:hover{
    transform:translateY(-10px);
    box-shadow:
        0 25px 60px rgba(0,0,0,0.08),
        0 10px 25px rgba(0,0,0,0.06);
}

.top-border{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:6px;
}

.blue-card .top-border{
    background:#143d8d;
}

.gold-card .top-border{
    background:#e3a008;
}

/* ICON */

.icon-box{
    width:72px;
    height:72px;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:25px;
    font-size:30px;
    transition:.4s ease;
}

.blue-icon{
    background:#143d8d;
    color:#fff;
}

.gold-icon{
    background:#e3a008;
    color:#fff;
}

.modern-info-card:hover .icon-box{
    transform:scale(1.08) rotate(-4deg);
}

/* TEXT */

.mini-title{
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
    color:#0b8bdc;
    text-transform:uppercase;
}

.modern-info-card h3{
    font-size:36px;
    font-weight:800;
    line-height:1.3;
    color:#0b1f4d;
    margin:18px 0;
}

.modern-info-card p{
    color:#5d6b82;
    font-size:17px;
    line-height:1.9;
}

/* HIGHLIGHT */

.card-highlight{
    margin-top:25px;
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:600;
    color:#0b1f4d;
    font-size:15px;
}


/* =========================
   COUNTER
========================= */

.counter{
    font-weight:800;
}

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

@media(max-width:991px){

    .main-title{
        font-size:38px;
    }

    .modern-info-card{
        padding:35px;
    }

    .ranking-card h2{
        font-size:54px;
    }

}

@media(max-width:576px){

    .main-title{
        font-size:30px;
    }

    .modern-info-card h3{
        font-size:28px;
    }

}
/* =========================================================
   NEWS TICKER
   ========================================================= */
.news-ticker {
    background: linear-gradient(90deg, #FBF1D2 0%, var(--light-bg) 100%);
    border-bottom: 1px solid #E9DEC0;
    overflow: hidden;
}
.ticker-wrapper { display: flex; align-items: stretch; }
.ticker-label {
    background: var(--primary-dark);
    color: #fff;
    padding: 10px 18px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
.ticker-label i { color: var(--gold); }
.ticker-content {
    overflow: hidden;
    flex: 1;
    position: relative;
    padding: 10px 0;
}
.ticker-content::before, .ticker-content::after {
    content: "";
    position: absolute; top: 0; bottom: 0;
    width: 60px; z-index: 2;
    pointer-events: none;
}
.ticker-content::before { left: 0; background: linear-gradient(90deg, var(--light-bg), transparent); }
.ticker-content::after { right: 0; background: linear-gradient(270deg, var(--light-bg), transparent); }
.ticker-move {
    display: inline-flex;
    gap: 36px;
    white-space: nowrap;
    animation: tickerScroll 50s linear infinite;
    padding-left: 24px;
}
.ticker-move a {
    color: var(--primary-dark);
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ticker-move a:hover { color: var(--primary); }
.news-badge {
    background: #E63946;
    color: #fff;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
@keyframes tickerScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}



/* Hero arrows */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: 22px;
    display: inline-flex;
    align-items: center; justify-content: center;
    z-index: 5;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease, background 0.2s ease, transform 0.2s ease;
}
.hero-section:hover .hero-arrow { opacity: 1; }
.hero-arrow:hover { background: var(--gold); color: var(--primary-darker); border-color: var(--gold); }
.hero-arrow--prev { left: 24px; }
.hero-arrow--next { right: 24px; }
.hero-arrow--prev:hover { transform: translateY(-50%) translateX(-2px); }
.hero-arrow--next:hover { transform: translateY(-50%) translateX(2px); }

/* Hero indicators */
.hero-indicators {
    position: absolute;
    bottom: 28px; left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 5;
}
.hero-indicators button {
    width: 28px; height: 4px;
    border: none;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.35);
    transition: all 0.3s ease;
    cursor: pointer;
    padding: 0;
}
.hero-indicators button.active {
    width: 48px;
    background: var(--gold);
}
.hero-indicators button:hover { background: rgba(255, 255, 255, 0.7); }

@media (max-width: 768px) {
    .hero-arrow { width: 40px; height: 40px; font-size: 18px; opacity: 1; background: rgba(0,0,0,0.25); }
    .hero-arrow--prev { left: 12px; }
    .hero-arrow--next { right: 12px; }
    .hero-indicators { bottom: 18px; }
    .hero-indicators button { width: 22px; }
    .hero-indicators button.active { width: 36px; }
}
/* =========================================
   HERO SLIDER
========================================= */

.hero-section{
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.hero-section .carousel,
.hero-section .carousel-inner,
.hero-section .carousel-item{
    height: 100%;
}

.hero-section .carousel-item{
    position: relative;
}

.hero-section .carousel-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* OVERLAY */

.hero-overlay{
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,0.72) 0%,
            rgba(0,0,0,0.18) 45%,
            rgba(0,0,0,0.08) 100%
        );

    z-index: 1;
}

/* =========================================
   HERO CONTENT POSITION
========================================= */

.hero-slide-content{
    position: absolute;

    left: 24px;
    bottom: 18px;

    z-index: 5;

    width: auto;
    max-width: 100%;
}

/* =========================================
   SMALL FLOATING CARD
========================================= */

.hero-content-card{

    width: 100%;
    max-width: 360px;

    padding: 16px 18px;

    border-radius: 18px;

    background:
        rgba(7,12,22,0.48);

    backdrop-filter: blur(14px);

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

    box-shadow:
        0 12px 30px rgba(0,0,0,0.22);
}

/* =========================================
   TOP ROW
========================================= */

.hero-mini-top{
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 10px;
}

/* =========================================
   YEARS BADGE
========================================= */

.hero-years-badge{
    width: 42px;
    flex-shrink: 0;
}

.hero-years-badge img{
    width: 100%;
    display: block;
}

/* =========================================
   PILL
========================================= */

.hero-pill{
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 12px;

    border-radius: 999px;

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

    color: #fff;

    font-size: 11px;
    font-weight: 600;
}

.pill-dot{
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--gold);
}

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

.hero-title{
    font-size: clamp(1.2rem, 2vw, 2rem);

    line-height: 1.15;

    font-weight: 800;

    color: #fff;

    margin-bottom: 8px;
}

.hero-accent{
    color: var(--gold);
}

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

.hero-sub{
    font-size: 0.82rem;

    line-height: 1.5;

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

    margin-bottom: 12px;

    max-width: 300px;
}

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

.hero-cta-row{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.hero-cta-row .btn{
    padding: 8px 16px;
    font-size: 0.8rem;
}

/* =========================================
   INDICATORS
========================================= */

.hero-indicators{
    position: absolute;

    bottom: 20px;
    right: 24px;
    left: auto;

    margin: 0;

    z-index: 10;

    display: flex;
    gap: 10px;
}

.hero-indicators button{

    width: 10px;
    height: 10px;

    border: none;

    border-radius: 50%;

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

    transition: all 0.3s ease;

    opacity: 1;
}

.hero-indicators button.active{

    width: 28px;

    border-radius: 999px;

    background: var(--gold);
}

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

@media (max-width:768px){

    .hero-slide-content{
        left: 12px;
        right: 12px;
        bottom: 12px;
    }

    .hero-content-card{
        max-width: 290px;
        padding: 14px;
    }

    .hero-title{
        font-size: 1.1rem;
    }

    .hero-sub{
        font-size: 0.74rem;
        margin-bottom: 10px;
    }

    .hero-cta-row .btn{
        padding: 7px 12px;
        font-size: 0.72rem;
    }

    .hero-indicators{
        right: 12px;
        bottom: 14px;
    }

}
/* =========================================================
   FLOATING SIDE PANELS (Online Enquiry + Admissions)
   ========================================================= */
.float-wrap {
    position: fixed;
    top: 50%;
    z-index: 1040;
    display: flex;
    align-items: center;
    transition: transform 0.4s cubic-bezier(.4,.2,.2,1);
}
.float-wrap--right {
    right: 0;
    transform: translateY(-50%);
    flex-direction: row-reverse;
}
/* LEFT FLOAT */
.float-wrap--left.is-closed {
    transform: translate(-85%, -50%);
}

/* RIGHT FLOAT */
.float-wrap--right.is-closed {
    transform: translate(85%, -50%);
}

/* Hide only content */
.float-wrap.is-closed .float-item {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.float-reopener {
    position: relative;
    z-index: 10;
}
/* Show reopen button */
.float-wrap.is-closed .float-reopener {
    display: inline-flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.float-item { display: inline-flex; align-items: stretch; position: relative; }

/* Online Enquiry vertical tab */
.online-enquiry-tab {
    background: var(--gold-grad);
    color: var(--primary-darker);
    font-weight: 700;
    letter-spacing: 0.18em;
    font-size: 13px;
    padding: 22px 10px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    border-radius: 0 8px 8px 0;
    box-shadow: 6px 0 22px rgba(0, 0, 0, 0.18);
    transition: padding 0.2s ease, background 0.2s ease;
}
.online-enquiry-tab:hover {
    color: var(--primary-darker);
    padding-left: 14px;
    background: linear-gradient(135deg, var(--gold-strong), var(--gold));
}

/* Admissions floating banner */
.admissions-floating {
    background: linear-gradient(135deg, #18A957, #0E7A3E);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    padding: 14px 22px 14px 18px;
    border-radius: 12px 0 0 12px;
    box-shadow: -6px 0 22px rgba(0, 0, 0, 0.18);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: padding 0.2s ease;
}
.admissions-floating:hover { color: #fff; padding-right: 28px; }
.admissions-floating i { font-size: 18px; }

/* Close button on each floating tab */
.float-close {
    position: absolute;
    top: 4px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    border: 1.5px solid #fff;
    font-size: 11px;
    display: inline-flex;
    align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 2;
    padding: 0;
    transition: all 0.2s ease;
}
.float-close:hover { background: #E63946; transform: scale(1.1); }
.float-wrap--left  .float-close { right: -10px; }
.float-wrap--right .float-close { left: -10px; }

/* Reopener handle (visible only when closed) */
.float-reopener {
    width: 36px; height: 56px;
    background: var(--primary-dark);
    color: #fff;
    border: none;
    display: none;
    align-items: center; justify-content: center;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    transition: background 0.2s ease;
    padding: 0;
}
.float-reopener:hover { background: var(--primary); }
.float-reopener--left  { border-radius: 0 8px 8px 0; }
.float-reopener--right { border-radius: 8px 0 0 8px; }

/* =========================================================
   CLOSED STATE FIX
   ========================================================= */

.float-wrap--left.is-closed {
    transform: translate(
        calc(-100% + 36px),
        -50%
    );
}

.float-wrap--right.is-closed {
    transform: translate(
        calc(100% - 36px),
        -50%
    );
}

/* HIDE CONTENT SMOOTHLY */
.float-wrap.is-closed .float-item {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* SHOW REOPEN BUTTON */
.float-wrap.is-closed .float-reopener {
    display: inline-flex;
}

/* NORMAL STATE */
.float-wrap .float-item {
    opacity: 1;
    transition: opacity 0.25s ease;
}
.float-reopener {
    width: 42px;
    height: 60px;
    background: linear-gradient(
        135deg,
        var(--primary-dark),
        var(--primary)
    );
    color: #fff;
    border: none;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
    transition: all 0.3s ease;
    padding: 0;
}

.float-reopener:hover {
    transform: scale(1.05);
}
/* =========================================================
   MOBILE BOTTOM PANEL
   ========================================================= */
.mobile-panel {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1045;
    background: #fff;
    box-shadow: 0 -10px 30px rgba(11, 30, 63, 0.18);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    transform: translateY(0);
    transition: transform 0.35s cubic-bezier(.4,.2,.2,1);
}
.mobile-panel.is-closed {
    transform: translateY(calc(100% - 52px));
}

.mobile-panel__handle {
    width: 100%;
    background: var(--primary-dark-grad);
    color: #fff;
    border: none;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    padding: 8px 16px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}
.float-wrap,
.mobile-panel {
    z-index: 1030;
}

.modal {
    z-index: 2000;
}
.handle-bar {
    width: 40px; height: 4px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    margin-bottom: 2px;
}
.handle-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--gold);
}
.handle-arrow { transition: transform 0.3s ease; font-size: 14px; }
.mobile-panel.is-closed .handle-arrow { transform: rotate(180deg); }

.mobile-panel__body {
    display: flex;
    gap: 10px;
    padding: 14px;
}
.mobile-panel__btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 10px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 13px;
    color: #fff;
    text-align: center;
    transition: transform 0.2s ease;
}
.mobile-panel__btn:hover { color: #fff; transform: translateY(-2px); }
.mobile-panel__btn i { font-size: 22px; }
.mobile-panel__btn--enquiry {
    background: var(--gold-grad);
    color: var(--primary-darker);
}
.mobile-panel__btn--enquiry:hover { color: var(--primary-darker); }
.mobile-panel__btn--admissions {
    background: linear-gradient(135deg, #18A957, #0E7A3E);
}

/* Show desktop tabs on >= 768px, mobile panel under 768px */
@media (max-width: 767.98px) {
    .float-wrap { display: none !important; }
    .mobile-panel { display: block; }
    .back-to-top { bottom: 150px !important; } /* lift above mobile panel */
}

/* =========================================================
   VISION & MISSION SECTION
   ========================================================= */
.vision-mission {
    padding: 90px 0;
    background: var(--surface);
    position: relative;
    overflow: hidden;
}
.vision-mission::before {
    content: "";
    position: absolute;
    top: -100px; right: -100px;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(9, 146, 194, 0.10), transparent 70%);
}
.vm-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    box-shadow: 0 12px 30px rgba(11, 30, 63, 0.06);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.vm-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(11, 30, 63, 0.12);
}
.vm-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
}
.vm-card--vision::before { background: var(--primary-dark-grad); }
.vm-card--mission::before { background: var(--gold-grad); }

.vm-card__icon {
    width: 64px; height: 64px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 28px;
    margin-bottom: 18px;
    color: #fff;
}
.vm-card--vision .vm-card__icon {
    background: var(--primary-dark-grad);
    box-shadow: 0 10px 20px rgba(11, 45, 114, 0.25);
}
.vm-card--mission .vm-card__icon {
    background: var(--gold-grad);
    color: var(--primary-darker);
    box-shadow: 0 10px 20px rgba(245, 193, 64, 0.30);
}
.vm-card__eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 10px;
}
.vm-card--mission .vm-card__eyebrow { color: var(--gold-strong); }
.vm-card__title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-darker);
    margin-bottom: 14px;
    line-height: 1.3;
}
.vm-card__text {
    color: var(--ink-soft);
    line-height: 1.7;
    margin: 0;
}
.vm-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.vm-card__list li {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    color: var(--ink);
    line-height: 1.55;
    font-size: 15px;
    border-bottom: 1px dashed var(--border);
}
.vm-card__list li:last-child { border-bottom: none; }
.vm-card__list li i {
    color: var(--gold-strong);
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* =========================================================
   PHILOSOPHY SECTION
   ========================================================= */
.philosophy-section {
    padding: 90px 0;
    background:
        linear-gradient(135deg, #fff 0%, var(--surface) 100%);
    position: relative;
}
.philosophy-quote {
    background: #fff;
    border-left: 4px solid var(--gold);
    padding: 18px 22px;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(11, 30, 63, 0.06);
    position: relative;
}
.philosophy-quote i {
    color: var(--gold);
    font-size: 28px;
    line-height: 1;
}
.philosophy-quote p {
    margin: 6px 0 0;
    font-family: var(--font-display);
    font-size: 18px;
    font-style: italic;
    color: var(--primary-darker);
    line-height: 1.5;
}
.philosophy-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.philosophy-item {
    display: flex;
    gap: 18px;
    background: #fff;
    padding: 22px 24px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.philosophy-item:hover {
    transform: translateX(6px);
    border-color: transparent;
    box-shadow: 0 14px 32px rgba(11, 30, 63, 0.10);
}
.philosophy-item::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--gold-grad);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s ease;
}
.philosophy-item:hover::before { transform: scaleY(1); }
.philosophy-num {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--gold-strong);
    line-height: 1;
    flex-shrink: 0;
    width: 50px;
}
.philosophy-item h5 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-darker);
    margin: 0 0 6px;
}
.philosophy-item p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 14.5px;
    line-height: 1.65;
}

/* =========================================================
   LATEST EVENTS — HOME SECTION
   ========================================================= */
.latest-events {
    padding: 90px 0;
    background: #fff;
}
.event-card {
    display: block;
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(11, 30, 63, 0.07);
    border: 1px solid var(--border);
    color: var(--ink);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}
.event-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(11, 30, 63, 0.14);
    color: var(--ink);
}
.event-card__media {
    position: relative;
    height: 200px;
    overflow: hidden;
}
.event-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.event-card:hover .event-card__media img { transform: scale(1.08); }
.event-card__category {
    position: absolute;
    top: 12px; left: 12px;
    background: var(--gold-grad);
    color: var(--primary-darker);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 4px;
}
.event-card__date {
    position: absolute;
    bottom: 12px; right: 12px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    padding: 6px 10px;
    text-align: center;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.event-card__date strong {
    display: block;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-dark);
}
.event-card__date small {
    font-size: 10px;
    font-weight: 600;
    color: var(--ink-soft);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.event-card__body {
    padding: 18px 20px 22px;
}
.event-card__title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--primary-darker);
    line-height: 1.35;
    margin: 0 0 12px;
    min-height: 46px;
}
.event-card__more {
    color: var(--primary);
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.event-card:hover .event-card__more { color: var(--gold-strong); }
/* =========================================================
   EVENTS PAGE
========================================================= */

.page-header{
    position:relative;
    overflow:hidden;
    padding:110px 0;
    color:#fff;
    isolation:isolate;
}

.page-header__bg{
    position:absolute;
    inset:0;
    z-index:-2;
}

.page-header__bg img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.page-header__overlay{
    position:absolute;
    inset:0;
    z-index:-1;

    background:
        linear-gradient(
            135deg,
            rgba(11,45,114,.92),
            rgba(13,133,175,.78)
        );
}

.page-header__title{
    font-size:56px;
    font-weight:800;
    line-height:1.1;
    margin:14px 0 18px;
    font-family:var(--font-display);
}

.page-header__crumb{
    display:inline-flex;
    padding:10px 18px;
    border-radius:50px;

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

    backdrop-filter:blur(12px);

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

.page-header__crumb .breadcrumb-item a{
    color:rgba(255,255,255,.88);
}

.page-header__crumb .breadcrumb-item.active{
    color:var(--gold);
}

.page-header__crumb .breadcrumb-item + .breadcrumb-item::before{
    color:rgba(255,255,255,.55);
}

/* =========================================================
   FILTER BAR
========================================================= */

.events-filter-bar{
    position:relative;
    padding:40px 0;
    background:#f6f9ff;
}

.filter-bar{
    background:#fff;

    border-radius:28px;

    padding:26px;

    box-shadow:
        0 18px 45px rgba(11,30,63,.08);

    display:grid;

    grid-template-columns:
        1fr 1fr 1fr auto;

    gap:18px;

    align-items:end;
}

.filter-group label{
    display:block;

    margin-bottom:10px;

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

    text-transform:uppercase;
    letter-spacing:.12em;

    color:var(--primary);
}

.filter-group .form-select{
    height:54px;

    border-radius:14px;

    border:
        1px solid rgba(11,45,114,.12);

    font-weight:600;

    color:var(--primary-darker);

    padding-left:18px;

    box-shadow:none;
}

.filter-group .form-select:focus{
    border-color:var(--primary);

    box-shadow:
        0 0 0 4px rgba(13,133,175,.12);
}

.filter-group--reset .btn{
    height:54px;

    border-radius:14px;

    font-weight:700;

    padding:0 22px;
}

.filter-summary{
    text-align:center;
    margin-top:16px;

    color:var(--ink-soft);

    font-size:14px;
}

.filter-summary span{
    color:var(--primary);
    font-weight:800;
}

/* =========================================================
   EVENTS GALLERY
========================================================= */

.events-gallery{
    padding:70px 0 100px;

    background:
        linear-gradient(
            180deg,
            #f7faff 0%,
            #ffffff 100%
        );

    position:relative;
    overflow:hidden;
}

.events-gallery::before{
    content:"";

    position:absolute;

    top:-140px;
    right:-140px;

    width:320px;
    height:320px;

    border-radius:50%;

    background:
        rgba(13,133,175,.08);

    filter:blur(40px);
}

.events-gallery::after{
    content:"";

    position:absolute;

    bottom:-140px;
    left:-140px;

    width:300px;
    height:300px;

    border-radius:50%;

    background:
        rgba(115,170,227,.08);

    filter:blur(40px);
}

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

.event-cell{
    transition:
        opacity .3s ease,
        transform .3s ease;
}

.event-cell.is-hidden{
    display:none !important;
}

.event-tile{
    width:100%;

    border:none;

    padding:0;

    overflow:hidden;

    border-radius:28px;

    background:#fff;

    text-align:left;

    cursor:pointer;

    position:relative;

    box-shadow:
        0 12px 34px rgba(11,30,63,.08);

    transition:
        transform .4s ease,
        box-shadow .4s ease;

    isolation:isolate;
}

.event-tile:hover{
    transform:
        translateY(-10px);

    box-shadow:
        0 24px 60px rgba(11,30,63,.16);
}

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

.event-tile__media{
    position:relative;
    overflow:hidden;
    height:280px;
}

.event-tile__media::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(6,20,48,.95),
            rgba(6,20,48,.2),
            transparent
        );

    z-index:2;
}

.event-tile__media img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .8s ease;
}

.event-tile:hover .event-tile__media img{
    transform:scale(1.08);
}

/* =========================================================
   CATEGORY
========================================================= */

.event-tile__category{
    position:absolute;

    top:18px;
    left:18px;

    z-index:5;

    padding:8px 16px;

    border-radius:50px;

    background:
        linear-gradient(
            135deg,
            var(--gold),
            #ffe59f
        );

    color:var(--primary-darker);

    font-size:11px;
    font-weight:800;

    letter-spacing:.1em;

    text-transform:uppercase;
}

/* =========================================================
   OVERLAY
========================================================= */

.event-tile__overlay{
    position:absolute;

    left:20px;
    right:20px;
    bottom:18px;

    z-index:5;

    display:flex;

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

    opacity:0;

    transform:
        translateY(10px);

    transition:
        all .35s ease;
}

.event-tile:hover .event-tile__overlay{
    opacity:1;
    transform:translateY(0);
}

.event-photo-count{
    display:flex;
    align-items:center;
    gap:8px;

    color:#fff;

    font-size:14px;
    font-weight:600;
}

.event-photo-count i{
    color:var(--gold);
    font-size:18px;
}

.event-view-btn{
    width:46px;
    height:46px;

    border-radius:50%;

    background:#fff;

    color:var(--primary);

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

    font-size:18px;

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

    transition:
        all .3s ease;
}

.event-view-btn:hover{
    background:var(--gold);
    color:var(--primary-darker);

    transform:
        rotate(8deg)
        scale(1.06);
}

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

.event-tile__body{
    position:relative;
    padding:28px;
}

.event-tile__body::before{
    content:"";

    position:absolute;

    top:0;
    left:28px;

    width:70px;
    height:4px;

    border-radius:50px;

    background:
        linear-gradient(
            90deg,
            var(--gold),
            transparent
        );
}

.event-tile__date{
    display:inline-flex;
    align-items:center;
    gap:8px;

    margin-top:8px;
    margin-bottom:14px;

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

    letter-spacing:.08em;

    text-transform:uppercase;

    color:var(--primary);
}

.event-tile__date i{
    color:var(--gold-dark);
}

.event-tile__title{
    font-size:24px;
    line-height:1.35;
    font-weight:700;

    margin-bottom:12px;

    color:var(--primary-darker);

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

    transition:color .3s ease;
}

.event-tile:hover .event-tile__title{
    color:var(--primary);
}

.event-tile__desc{
    margin:0;

    color:var(--ink-soft);

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

/* =========================================================
   SHINE EFFECT
========================================================= */

.event-tile::after{
    content:"";

    position:absolute;

    top:-140%;
    left:-40%;

    width:60%;
    height:240%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.18),
            transparent
        );

    transform:rotate(25deg);

    transition:all .9s ease;
}

.event-tile:hover::after{
    left:130%;
}

/* =========================================================
   EMPTY
========================================================= */

.events-empty{
    text-align:center;
    padding:80px 20px;
}

.events-empty i{
    font-size:70px;
    color:var(--gold);

    margin-bottom:18px;

    display:block;
}

.events-empty h4{
    font-size:30px;
    font-weight:700;

    color:var(--primary-darker);

    margin-bottom:8px;

    font-family:var(--font-display);
}

.events-empty p{
    color:var(--ink-soft);
}

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

@media(max-width:992px){

    .filter-bar{
        grid-template-columns:
            1fr 1fr;
    }

    .filter-group--reset{
        grid-column:span 2;
    }

    .event-tile__media{
        height:240px;
    }

    .event-tile__title{
        font-size:22px;
    }
}

@media(max-width:768px){

    .page-header{
        padding:90px 0;
    }

    .page-header__title{
        font-size:40px;
    }

    .events-gallery{
        padding:50px 0 80px;
    }

    .event-tile{
        border-radius:24px;
    }

    .event-tile__media{
        height:220px;
    }

    .event-tile__body{
        padding:24px;
    }

    .event-tile__title{
        font-size:20px;
    }
}

@media(max-width:576px){

    .filter-bar{
        grid-template-columns:1fr;
    }

    .filter-group--reset{
        grid-column:unset;
    }

    .page-header__title{
        font-size:34px;
    }

    .event-tile__media{
        height:210px;
    }

    .event-tile__overlay{
        left:16px;
        right:16px;
    }
}
/* =========================================================
   PROFILE PAGES (Trust + Principal's Message)
   ========================================================= */
.profile-section {
    padding: 90px 0;
    background: #fff;
}
.profile-image-wrap {
    position: relative;
    padding: 18px;
}
.profile-image {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 40px rgba(11, 30, 63, 0.18);
    display: block;
    position: relative;
    z-index: 1;
}
.profile-image__corner {
    position: absolute;
    width: 60px; height: 60px;
    border: 4px solid var(--gold);
    z-index: 0;
}
.profile-image__corner--tl { top: 0; left: 0; border-right: none; border-bottom: none; border-radius: 12px 0 0 0; }
.profile-image__corner--br { bottom: 0; right: 0; border-left: none; border-top: none; border-radius: 0 0 12px 0; }
.profile-image__badge {
    position: absolute;
    bottom: 30px; right: -16px;
    background: var(--gold-grad);
    color: var(--primary-darker);
    border-radius: 14px;
    padding: 12px 18px;
    text-align: center;
    box-shadow: 0 12px 24px rgba(245, 193, 64, 0.4);
    z-index: 2;
    min-width: 92px;
}
.profile-image__badge strong {
    display: block;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
}
.profile-image__badge span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
}
.profile-image__badge--alt { padding: 18px 22px; }
.profile-image__badge--alt i { font-size: 28px; display: block; line-height: 1; }
.profile-image__badge--alt span { display: block; margin-top: 4px; }

.profile-lead {
    font-size: 17px;
    color: var(--ink);
    line-height: 1.75;
    font-weight: 500;
}
.profile-text {
    color: var(--ink-soft);
    line-height: 1.75;
    margin-bottom: 14px;
}
.profile-greeting {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--primary-dark);
    margin-bottom: 16px;
}
.profile-highlights {
    margin-top: 28px;
    display: grid;
    gap: 12px;
}
.profile-highlight {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--gold);
    color: var(--primary-darker);
    font-weight: 500;
}
.profile-highlight i { color: var(--gold-strong); font-size: 18px; }

.principal-signature {
    margin-top: 30px;
    padding: 18px 22px;
    background: linear-gradient(135deg, var(--surface), #fff);
    border-left: 3px solid var(--primary);
    border-radius: 8px;
}
.principal-signature__name {
    display: block;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-darker);
}
.principal-signature__title {
    display: block;
    font-size: 13px;
    color: var(--ink-soft);
    margin-top: 2px;
}
/* =========================================================
   COURSES PAGE (MODERNIZED)
   ========================================================= */

.courses-intro {
    position: relative;
    z-index: 2;
    padding: 60px 0 30px;
    background: #fff;
}

.courses-intro__text {
    font-size: 17px;
    color: var(--ink);
    line-height: 1.75;
}

.courses-intro__text strong {
    color: var(--primary-darker);
}

/* BADGES */
.courses-intro__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    justify-content: center;
}

.courses-intro__badges span {
    background: #f5f7fa;
    border: 1px solid #e6eaf0;
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: 0.3s;
}

.courses-intro__badges span:hover {
    background: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.courses-intro__badges i {
    color: #f5c140;
}

/* =========================================================
   COURSE CARD GRID (3D MODERN)
   ========================================================= */

.course-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.course-card-3d {
    perspective: 1200px;
    cursor: pointer;
}

.course-card-3d .card-inner {
    background: linear-gradient(145deg,#ffffff,#f3f6fa);
    border-radius: 18px;
    padding: 26px 18px;
    text-align: center;
    border: 1px solid #e6eaf0;

    box-shadow:
        0 12px 30px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.6);

    transition: all 0.4s ease;
}

.course-card-3d:hover .card-inner {
    transform: translateY(-10px) rotateX(6deg);
    box-shadow: 0 30px 60px rgba(0,0,0,0.15);
}

.course-card-3d.active .card-inner {
    border: 2px solid #0dcaf0;
    transform: translateY(-6px);
}

.card-front i {
    font-size: 36px;
    color: var(--primary);
    margin-bottom: 10px;
}

.card-front h5 {
    font-weight: 700;
    margin-bottom: 4px;
}

.card-front p {
    font-size: 13px;
    color: #777;
}

/* =========================================================
   COURSE DETAILS MODERN UI
   ========================================================= */

.course-details-modern {
    margin-top: 50px;
}

/* WRAPPER */
.details-wrapper {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
}

@media(max-width:768px){
    .details-wrapper {
        grid-template-columns: 1fr;
    }
}

/* =========================
   SIDEBAR (MODERN PILLS)
========================= */

.details-sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.details-sidebar button {
    border: none;
    padding: 12px 16px;
    border-radius: 999px;
    background: #f4f6f9;
    font-weight: 600;
    text-align: left;
    transition: all 0.3s ease;
}

.details-sidebar button:hover {
    background: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.details-sidebar button.active {
    background: linear-gradient(135deg,#0dcaf0,#0aa2c0);
    color: #fff;
    box-shadow: 0 8px 18px rgba(13,202,240,0.3);
}

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

.details-content {
    display: grid;
    gap: 20px;
}

/* GLASS CARD */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.tab-content {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    border-radius: 18px;
    padding: 26px;

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

    box-shadow:
        0 20px 40px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.6);

    transition: all 0.3s ease;
}

.tab-content:hover {
    transform: translateY(-5px);
}

/* HEADINGS */
.tab-content h4 {
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--primary-darker);
}

/* LIST */
.tab-content ul {
    padding-left: 0;
    list-style: none;
}

.tab-content ul li {
    margin-bottom: 10px;
    font-weight: 500;
    position: relative;
    padding-left: 20px;
}

.tab-content ul li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: #0dcaf0;
}

/* =========================================================
   YEAR TAB (PREMIUM BUTTON STYLE)
   ========================================================= */

.year-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.year-tabs button {
    border: none;
    padding: 8px 18px;
    border-radius: 999px;
    background: #eef2f7;
    font-weight: 600;
    transition: all 0.3s ease;
}

.year-tabs button:hover {
    background: #fff;
    box-shadow: 0 5px 12px rgba(0,0,0,0.08);
}

.year-tabs button.active {
    background: linear-gradient(135deg,#f5c140,#ffd76a);
    color: #222;
    box-shadow: 0 8px 18px rgba(245,193,64,0.3);
}

/* YEAR CONTENT */
.year-content {
    display: none;
}

.year-content.active {
    display: block;
}

/* INNER CARD */
.inner-year-card {
    background: #fff;
    border-radius: 14px;
    padding: 18px;
    border: 1px solid #eee;

    box-shadow: 0 10px 22px rgba(0,0,0,0.06);
}

/* TABLE */
.course-table {
    width: 100%;
    border-collapse: collapse;
}

.course-table th,
.course-table td {
    padding: 10px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

.course-table th {
    font-weight: 700;
    background: #f8fafc;
}

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

@media(max-width:576px){

    .courses-intro__text {
        font-size: 15px;
    }

    .card-front i {
        font-size: 30px;
    }

    .card-front h5 {
        font-size: 16px;
    }

    .tab-content {
        padding: 18px;
    }

    .details-sidebar {
        flex-direction: row;
        overflow-x: auto;
    }

    .details-sidebar button {
        white-space: nowrap;
        flex: 1;
        text-align: center;
    }
}
/* =========================================================
   PLACEMENTS PAGE
   ========================================================= */
.placement-intro { padding: 70px 0 30px; background: #fff; }
.placement-grid { padding: 30px 0 90px; background: #fff; }

.placement-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    text-align: center;
    border: 1px solid var(--border);
    box-shadow: 0 8px 22px rgba(11, 30, 63, 0.06);
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.placement-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(11, 30, 63, 0.14);
}
.placement-card__icon {
    width: 70px; height: 70px;
    margin: 0 auto 18px;
    background: var(--gold-grad);
    color: var(--primary-darker);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 10px 22px rgba(245, 193, 64, 0.35);
}
.placement-card h5 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--primary-darker);
    margin-bottom: 8px;
}
.placement-card p {
    color: var(--ink-soft);
    margin: 0;
    line-height: 1.6;
    font-size: 14.5px;
}

.placement-cta {
    margin-top: 40px;
    padding: 22px 28px;
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.placement-cta i { font-size: 32px; color: var(--gold-strong); }
.placement-cta h6 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--primary-darker);
    margin: 0 0 2px;
}
.placement-cta span {
    color: var(--ink-soft);
    font-size: 13px;
}
.placement-cta > div { flex: 1 1 240px; }
.placement-cta .btn { white-space: nowrap; }

/* Placement gallery */
.placement-gallery {
    padding: 80px 0 100px;
    background: var(--surface);
}
.placement-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}
.placement-gallery-item {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    box-shadow: 0 8px 20px rgba(11, 30, 63, 0.10);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: block;
    padding: 0;
    border: none;
    background: #000;
    cursor: pointer;
    width: 100%;
}
.placement-gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(11, 30, 63, 0.18);
}
.placement-gallery-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.placement-gallery-item:hover img { transform: scale(1.08); }
.placement-gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 30, 63, 0) 50%, rgba(11, 30, 63, 0.88) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 16px;
    opacity: 0;
    transition: opacity 0.3s ease;
    gap: 4px;
}
.placement-gallery-item:hover .placement-gallery-overlay { opacity: 1; }
.placement-gallery-overlay i {
    font-size: 22px;
    color: var(--gold);
}
.placement-gallery-overlay span {
    font-weight: 600;
    font-size: 14px;
}

/* =========================================================
   ADMISSIONS — Eligibility & Downloads
   ========================================================= */
.admission-downloads {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 36px 0 12px;
}
.admit-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-md);
    color: #fff;
    text-decoration: none;
    transition: all 0.25s ease;
    backdrop-filter: blur(6px);
}
.admit-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: var(--gold);
    transform: translateY(-3px);
    color: #fff;
}
.admit-btn i {
    font-size: 28px;
    color: var(--gold);
    flex-shrink: 0;
}
.admit-btn strong {
    display: block;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 2px;
}
.admit-btn span {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}
.admit-btn--accent {
    background: var(--gold-grad);
    color: var(--primary-darker);
    border-color: transparent;
}
.admit-btn--accent i { color: var(--primary-darker); }
.admit-btn--accent span { color: rgba(11, 45, 114, 0.7); }
.admit-btn--accent:hover {
    color: var(--primary-darker);
    background: var(--gold-grad);
    box-shadow: 0 14px 28px rgba(245, 193, 64, 0.35);
}

.eligibility-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    padding: 26px 24px;
    height: 100%;
    backdrop-filter: blur(8px);
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.eligibility-card:hover {
    transform: translateY(-6px);
    border-color: var(--gold);
}
.eligibility-card__head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.eligibility-icon {
    width: 50px; height: 50px;
    border-radius: 12px;
    background: var(--gold-grad);
    color: var(--primary-darker);
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.eligibility-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 4px;
}
.eligibility-card h4 {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.25;
}
.eligibility-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.eligibility-list li {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14.5px;
    line-height: 1.6;
}
.eligibility-list li i {
    color: var(--gold);
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}
.eligibility-list li strong { color: #fff; font-weight: 700; }

.admission-actions {
    margin-top: 36px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

/* =========================================================
   FACILITIES — Pill nav
   ========================================================= */
.facilities-section {
    padding: 90px 0;
    background: linear-gradient(
        180deg,
        #f8fbff 0%,
        #ffffff 100%
    );
    position: relative;
    overflow: hidden;
}

/* NAV PILLS */
.facilities-nav {
    margin-top: 40px;
    margin-bottom: 40px;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.facilities-nav .nav-link {
    border: none;
    background: #fff;
    color: var(--primary-dark);
    font-weight: 600;
    padding: 14px 22px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(11, 30, 63, 0.06);
    border: 1px solid rgba(11, 45, 114, 0.08);
}

.facilities-nav .nav-link i {
    font-size: 16px;
}

.facilities-nav .nav-link:hover {
    transform: translateY(-3px);
    background: #fff;
    color: var(--primary);
}

.facilities-nav .nav-link.active {
    background: linear-gradient(
        135deg,
        var(--primary-dark),
        var(--primary)
    );
    color: #fff;
    box-shadow: 0 14px 30px rgba(11, 45, 114, 0.18);
}

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

.facilities-tab-content {
    margin-top: 10px;
    position: relative;
}

/* REMOVE ALL PANES FROM LAYOUT */
.facilities-tab-content .tab-pane {
    display: none !important;
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
}

/* SHOW ONLY ACTIVE PANE */
.facilities-tab-content .tab-pane.active.show {
    display: block !important;
    opacity: 1;
    visibility: visible;
    height: auto;
    overflow: visible;

    background: #fff;
    border-radius: 28px;
    padding: 40px;
    box-shadow: 0 18px 50px rgba(11, 30, 63, 0.08);
    border: 1px solid rgba(11, 45, 114, 0.06);

    animation: fadeFacility 0.45s ease;
}

@keyframes fadeFacility {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* IMAGE */
.facility-image-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    height: 100%;
    min-height: 320px;
}

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

.facility-image-wrap:hover img {
    transform: scale(1.06);
}

/* TITLES */
.facility-title {
    font-size: 34px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 18px;
    font-family: var(--font-display);
}

.facility-subtitle {
    margin-top: 28px;
    margin-bottom: 18px;
    font-size: 20px;
    color: var(--primary-dark);
    font-weight: 700;
}

/* TEXT */
.facility-text {
    color: var(--ink-soft);
    line-height: 1.9;
    font-size: 15.5px;
    margin-bottom: 28px;
}

/* FEATURES GRID */
.facility-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px;
}

.facility-feature {
    background: linear-gradient(
        135deg,
        #f7faff,
        #ffffff
    );
    border: 1px solid rgba(11, 45, 114, 0.08);
    border-radius: 18px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.3s ease;
}

.facility-feature:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(11, 30, 63, 0.08);
}

.facility-feature i {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: linear-gradient(
        135deg,
        var(--gold),
        #ffdc73
    );
    color: var(--primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.facility-feature span {
    font-weight: 600;
    color: var(--primary-dark);
}

/* LISTS */
.facility-list {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
}

.facility-list li {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--ink-soft);
    line-height: 1.7;
}

.facility-list i {
    color: var(--gold);
    font-size: 18px;
    margin-top: 3px;
}

/* PROCEDURE */
.procedure-steps {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 30px;
}

.procedure-step {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 24px;
    border-radius: 20px;
    background: linear-gradient(
        135deg,
        #f9fbff,
        #ffffff
    );
    border: 1px solid rgba(11, 45, 114, 0.08);
}

.step-num {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        var(--primary-dark),
        var(--primary)
    );
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    flex-shrink: 0;
}

.procedure-step h6 {
    margin-bottom: 8px;
    color: var(--primary-dark);
    font-size: 18px;
    font-weight: 700;
}

.procedure-step p {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.7;
}

/* MOBILE */
@media (max-width: 991px) {

    .facilities-tab-content .tab-pane {
        padding: 30px;
    }

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

    .facility-feature-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {

    .facilities-section {
        padding: 70px 0;
    }

    .facilities-nav {
        gap: 10px;
    }

    .facilities-nav .nav-link {
        width: 100%;
        justify-content: center;
    }

    .facilities-tab-content .tab-pane {
        padding: 24px;
        border-radius: 22px;
    }

    .facility-image-wrap {
        min-height: 240px;
    }

    .facility-title {
        font-size: 24px;
    }

    .procedure-step {
        flex-direction: column;
    }
}
/* =========================================================
   FACILITY VIDEO
========================================================= */

.facility-video-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    min-height: 320px;
    height: 100%;
    box-shadow: 0 18px 40px rgba(11, 30, 63, 0.12);
    background: #000;
}

.facility-video-wrap video {
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
    display: block;
}

/* OPTIONAL HOVER EFFECT */
.facility-video-wrap:hover video {
    transform: scale(1.02);
    transition: transform 0.6s ease;
}

/* MOBILE */
@media (max-width: 767px) {

    .facility-video-wrap,
    .facility-video-wrap video {
        min-height: 240px;
    }

}
/* =========================================================
   CONTACT — Details card + Map
   ========================================================= */
.contact-top-row { margin-top: 40px; margin-bottom: 60px; }
.contact-form-row { padding-top: 30px; border-top: 1px solid var(--border); }
.contact-form-title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--primary-darker);
    margin: 6px 0 8px;
}
.contact-details-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 32px 30px;
    height: 100%;
    border: 1px solid var(--border);
    box-shadow: 0 10px 24px rgba(11, 30, 63, 0.06);
}
.contact-card-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-darker);
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--gold);
    display: flex;
    align-items: center;
    gap: 10px;
}
.contact-card-title i { color: var(--gold-strong); }
.contact-info-item p a {
    color: var(--ink);
    text-decoration: none;
    transition: color 0.2s ease;
}
.contact-info-item p a:hover { color: var(--gold-strong); }

.contact-map-wrap {
    height: 100%;
    min-height: 380px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(11, 30, 63, 0.12);
    border: 1px solid var(--border);
    background: var(--surface);
}
.contact-map-wrap iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 380px;
    border: 0;
}

/* =========================================================
   Floating wrap stack (Admissions + Fee Payment)
   ========================================================= */
.float-item--stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}
.fee-floating {
    background: linear-gradient(135deg, #0B2D72, #1746A2);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    padding: 14px 22px 14px 18px;
    border-radius: 12px 0 0 12px;
    box-shadow: -6px 0 22px rgba(0, 0, 0, 0.18);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: padding 0.2s ease;
    margin-top: 10px;
}

.fee-floating:hover {
    color: #fff;
    padding-right: 28px;
}

.fee-floating i {
    font-size: 18px;
}
/* Mobile panel fee button */
.mobile-panel__btn--fee {
    background: linear-gradient(135deg, #18A957, #0E7A3E);
}

/* =========================================================
   SECTION HEADERS
   ========================================================= */
section { padding: 20px 0; }

.section-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 12px;
}
.section-title {
    font-size: clamp(1.9rem, 3.6vw, 2.8rem);
    line-height: 1.15;
    margin-bottom: 14px;
    font-weight: 700;
}
.section-lead {
    color: var(--ink-soft);
    font-size: 1.02rem;
    line-height: 1.7;
}
.title-underline {
    display: block;
    width: 80px;
    height: 4px;
    background: var(--gold-grad);
    border-radius: 2px;
    margin: 6px 0 18px;
}
.title-underline--gold { background: var(--gold-grad); }
.mx-auto.title-underline { margin-left: auto; margin-right: auto; }

/* =========================================================
   ABOUT SECTION
   ========================================================= */
.about-section { background: var(--bg); }
/* =========================================================
   ABOUT VIDEO FRAME — MODERN REDESIGN
========================================================= */

.about-image{
    position: relative;

    width: 100%;
    max-width: 760px;

    margin: 0 auto;

    padding: 18px;

    border-radius: 34px;

    background:
        linear-gradient(
            145deg,
            rgba(15,23,42,1),
            rgba(30,41,59,1)
        );

    box-shadow:
        0 20px 60px rgba(15,23,42,0.22);

    overflow: hidden;
}

/* =========================================
   GLOW EFFECT
========================================= */

.about-image::before{
    content: "";

    position: absolute;

    inset: -80px;

    background:
        radial-gradient(
            circle at top left,
            rgba(250,204,21,0.22),
            transparent 45%
        );

    z-index: 1;

    pointer-events: none;
}

/* =========================================
   VIDEO FRAME
========================================= */

.about-image .image-frame{
    position: relative;
    z-index: 2;

    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: 24px;

    background: #000;

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

/* =========================================
   VIDEO
========================================= */

.about-image .image-frame video{
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}

/* =========================================
   OPTIONAL IMAGE SUPPORT
========================================= */

.about-image .image-frame img{
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}

/* =========================================
   MODERN CORNERS
========================================= */

.image-corners{
    position: absolute;

    width: 78px;
    height: 78px;

    border: 4px solid var(--gold);

    z-index: 3;

    opacity: 0.95;
}

/* TOP LEFT */
.corner-tl{
    top: 14px;
    left: 14px;

    border-right: 0;
    border-bottom: 0;

    border-radius: 22px 0 0 0;
}

/* TOP RIGHT */
.corner-tr{
    top: 14px;
    right: 14px;

    border-left: 0;
    border-bottom: 0;

    border-radius: 0 22px 0 0;
}

/* BOTTOM LEFT */
.corner-bl{
    bottom: 14px;
    left: 14px;

    border-right: 0;
    border-top: 0;

    border-radius: 0 0 0 22px;
}

/* BOTTOM RIGHT */
.corner-br{
    bottom: 14px;
    right: 14px;

    border-left: 0;
    border-top: 0;

    border-radius: 0 0 22px 0;
}

/* =========================================
   34 YEARS BADGE
========================================= */

.about-seal{
    position: absolute;

    right: -12px;
    bottom: -12px;

    z-index: 5;
}

.seal-image{
    width: 140px;
    height: auto;

    filter:
        drop-shadow(0 12px 30px rgba(0,0,0,0.35));

    animation: floatSeal 4s ease-in-out infinite;
}

@keyframes floatSeal{

    0%{
        transform: translateY(0);
    }

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

    100%{
        transform: translateY(0);
    }

}

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

@media (max-width: 991px){

    .about-image{
        border-radius: 28px;
        padding: 14px;
    }

    .about-image .image-frame{
        border-radius: 20px;
    }

    .image-corners{
        width: 60px;
        height: 60px;
    }

    .seal-image{
        width: 110px;
    }

}

@media (max-width: 576px){

    .about-image{
        padding: 10px;
        border-radius: 22px;
    }

    .about-image .image-frame{
        border-radius: 16px;
    }

    .image-corners{
        width: 42px;
        height: 42px;

        border-width: 3px;
    }

    .corner-tl,
    .corner-tr{
        top: 10px;
    }

    .corner-bl,
    .corner-br{
        bottom: 10px;
    }

    .corner-tl,
    .corner-bl{
        left: 10px;
    }

    .corner-tr,
    .corner-br{
        right: 10px;
    }

    .seal-image{
        width: 82px;
    }

}
/* =========================================================
   ABOUT YEARS SEAL IMAGE
========================================================= */

.about-seal {
    position: absolute;

    bottom: 10px;
    right: 0px;
    
    z-index: 3;
   
}

.seal-image {
    width: 150px;

    height: auto;

    object-fit: contain;
background-color: #eeeeee88;
 border-radius: 50%;
    filter:
        drop-shadow(0 12px 30px rgba(0,0,0,0.25));

    animation: floatSeal 4s ease-in-out infinite;
}

/* FLOAT EFFECT */
@keyframes floatSeal {

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

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

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

}

/* RESPONSIVE */
@media (max-width: 768px) {

    .seal-image {
        width: 120px;
    }

    .about-seal {
        top: 15px;
        right: 15px;
    }

}

.about-section p { color: var(--ink-soft); margin-bottom: 16px; }

/* =========================================================
   WHY CHOOSE US
   ========================================================= */
.why-section {
    background: var(--primary-dark-grad);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.why-section::before {
    content: "";
    position: absolute;
    top: -200px; right: -200px;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(10, 196, 224, 0.18), transparent 70%);
}
.why-section::after {
    content: "";
    position: absolute;
    bottom: -180px; left: -180px;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 193, 64, 0.10), transparent 70%);
}

.feature-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: 28px 24px;
    height: 100%;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    position: relative;
    z-index: 1;
}
.feature-card:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--gold);
    transform: translateY(-4px);
}
.feature-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: var(--gold-grad);
    color: var(--primary-darker);
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 24px;
    margin-bottom: 16px;
    box-shadow: 0 8px 18px rgba(245, 193, 64, 0.25);
}
.feature-card h5 {
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 8px;
}
.feature-card p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.92rem;
    margin: 0;
    line-height: 1.6;
}

/* =========================================================
   COURSE SECTION – MODERN 3D UI (FINAL)
   ========================================================= */

/* GRID (NO SIDE SCROLL EVER) */
.course-grid-modern {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Responsive grid */
@media (max-width: 992px) {
    .course-grid-modern {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 576px) {
    .course-grid-modern {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   3D COURSE CARD
   ========================================================= */
.course-card-3d {
    perspective: 1200px;
    cursor: pointer;
}

.course-card-3d .card-inner {
    background: linear-gradient(145deg, #ffffff, #f4f7fb);
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    border: 1px solid var(--border);

    transform-style: preserve-3d;
    transition: transform 0.45s ease, box-shadow 0.45s ease;

    box-shadow:
        0 15px 35px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.6);
}

/* Hover depth */
.course-card-3d:hover .card-inner {
    transform: rotateX(8deg) rotateY(-6deg) translateY(-10px);
    box-shadow: 0 35px 60px rgba(0,0,0,0.18);
}

/* Icon */
.card-front i {
    font-size: 38px;
    color: var(--primary);
    margin-bottom: 12px;
}

/* Title */
.card-front h5 {
    font-weight: 700;
    color: var(--primary-darker);
    margin-bottom: 6px;
}

/* Subtitle */
.card-front p {
    font-size: 13px;
    color: #777;
}

/* =========================================================
   COURSE DETAILS LAYOUT
   ========================================================= */
.course-details-modern {
    margin-top: 40px;
}

.details-wrapper {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
}

/* MOBILE STACK */
@media (max-width: 768px) {
    .details-wrapper {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   SIDE NAV
   ========================================================= */
.details-sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.details-sidebar button {
    border: none;
    background: var(--surface);
    padding: 12px 14px;
    border-radius: 10px;
    font-weight: 600;
    text-align: left;
    transition: 0.3s;
}

.details-sidebar button:hover {
    background: #eef4ff;
}

.details-sidebar button.active {
    background: var(--primary);
    color: #fff;
}

/* MOBILE NAV → HORIZONTAL */
@media (max-width: 768px) {
    .details-sidebar {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .details-sidebar button {
        flex: 1;
        text-align: center;
    }
}

/* =========================================================
   CONTENT AREA
   ========================================================= */
.details-content {
    display: grid;
    gap: 20px;
}

/* =========================================================
   3D DETAIL CARD
   ========================================================= */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.course-detail-card {
    perspective: 1200px;
}

.card-3d-inner {
    background: linear-gradient(145deg, #ffffff, #f3f6fa);
    border-radius: 20px;
    padding: 24px;
    border: 1px solid var(--border);

    transform-style: preserve-3d;
    transition: transform 0.4s ease, box-shadow 0.4s ease;

    box-shadow:
        0 20px 40px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.6);
}

/* Hover depth */
.course-detail-card:hover .card-3d-inner {
    transform: rotateX(4deg) rotateY(-4deg) scale(1.01);
    box-shadow: 0 30px 60px rgba(0,0,0,0.14);
}

/* Headings */
.card-3d-inner h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--primary-darker);
    margin-bottom: 12px;
}

/* =========================================================
   BEST PRACTICES LIST
   ========================================================= */
.card-3d-inner ul {
    padding-left: 18px;
}

.card-3d-inner ul li {
    margin-bottom: 8px;
    font-weight: 500;
}

/* =========================================================
   YEAR WISE SECTION
   ========================================================= */

/* Year tabs */
.year-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.year-tabs button {
    border-radius: 999px;
    padding: 6px 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-weight: 600;
}

.year-tabs button.active {
    background: var(--primary);
    color: #fff;
}

/* Inner year card */
.inner-year-card {
    background: #fff;
    border-radius: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

/* Tables */
.course-table {
    width: 100%;
    border-collapse: collapse;
}

.course-table td,
.course-table th {
    padding: 10px;
    border: 1px solid #eee;
    font-size: 14px;
}

/* MOBILE TABLE FIX */
@media (max-width: 576px) {
    .course-table {
        font-size: 12px;
    }
}

/* =========================================================
   ELIGIBILITY
   ========================================================= */
.card-3d-inner h6 {
    font-weight: 700;
    margin-top: 14px;
}

/* =========================================================
   REMOVE OLD HORIZONTAL SCROLL SYSTEM
   ========================================================= */
.course-card-row {
    display: none !important;
}
/* =========================================================
   CARE CARDS STRIP
   ========================================================= */
.care-strip {
    background: var(--bg);
    padding: 60px 0;
}
.care-card {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    padding: 24px 12px;
    border-radius: var(--radius-md);
    color: #fff;
    transition: all 0.3s ease;
    aspect-ratio: 1;
    min-height: 140px;
    box-shadow: var(--shadow-sm);
}
.care-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    color: #fff;
}
.care-icon {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 24px;
    margin-bottom: 10px;
    backdrop-filter: blur(4px);
}
.care-label {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
}
.care-blue  { background: linear-gradient(135deg, #3B7DD8, #1E5FBF); }
.care-teal  { background: linear-gradient(135deg, #2EC4D6, #1A9CB8); }
.care-green { background: linear-gradient(135deg, #36C77A, #1E9956); }
.care-pink  { background: linear-gradient(135deg, #E84A8B, #C42770); }
.care-gold  { background: linear-gradient(135deg, #F5A623, #D78A0A); }
.care-mint  { background: linear-gradient(135deg, #4ECDC4, #2BA59C); }

/* =========================================================
   INSTITUTION STRIP
   ========================================================= */
.institution-strip {
    position: relative;
    padding: 90px 0;
    color: #fff;
    overflow: hidden;
}
.institution-bg { position: absolute; inset: 0; z-index: -2; }
.institution-bg img { width: 100%; height: 100%; object-fit: cover; }
.institution-overlay {
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(135deg, rgba(11, 30, 63, 0.92), rgba(11, 45, 114, 0.85));
}
.inst-stat {
    text-align: center;
    color: #fff;
    padding: 16px;
}
.inst-stat i {
    font-size: 36px;
    color: var(--gold);
    margin-bottom: 10px;
}
.inst-num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    line-height: 1;
    color: #fff;
}
.inst-label {
    margin-top: 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
}



/* =========================================================
   ADMISSIONS CTA
   ========================================================= */
.admissions-section {
    background: var(--primary-dark-grad);
    padding: 90px 0;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.admissions-section::before {
    content: "";
    position: absolute;
    top: -160px; right: -120px;
    width: 460px; height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 193, 64, 0.20), transparent 65%);
    pointer-events: none;
}
.admissions-section::after {
    content: "";
    position: absolute;
    bottom: -180px; left: -120px;
    width: 420px; height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(10, 196, 224, 0.18), transparent 70%);
    pointer-events: none;
}
.admissions-section > .container { position: relative; z-index: 1; }
.admissions-section .section-title { color: #fff; }
.admissions-section .section-eyebrow { color: var(--gold); }

/* =========================================================
   STUDENTS REVIEW
   ========================================================= */
.reviews-section {
    background: var(--primary-dark-grad);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.reviews-section::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 100%;
    background:
        radial-gradient(circle at 80% 20%, rgba(10, 196, 224, 0.15), transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(245, 193, 64, 0.10), transparent 50%);
}
.review-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: 28px;
    display: flex; gap: 22px;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    position: relative;
    z-index: 1;
}
.review-card:hover {
    background: rgba(255, 255, 255, 0.09);
    transform: translateY(-4px);
    border-color: rgba(245, 193, 64, 0.4);
}
.review-avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(245, 193, 64, 0.3);
    display: flex; align-items: center; justify-content: center;
    color: var(--gold);
    font-size: 32px;
    flex: 0 0 auto;
}
.review-body p {
    font-size: 0.98rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.7;
    margin-bottom: 14px;
    font-style: italic;
}
.review-body strong {
    display: block;
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 15px;
}
.review-role {
    display: block;
    color: var(--gold);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 4px;
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact-section { background: var(--bg); }

.contact-info { margin-top: 30px; }
.contact-info-item {
    display: flex; gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}
.contact-info-item:last-child { border-bottom: none; }
.contact-info-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--primary-grad);
    color: #fff;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 18px;
    flex: 0 0 auto;
    box-shadow: 0 6px 14px rgba(9, 146, 194, 0.25);
}
.contact-info-item strong {
    display: block;
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--primary-dark);
    margin-bottom: 4px;
}
.contact-info-item p { margin: 0; color: var(--ink-soft); font-size: 14.5px; }

.contact-form {
    background: var(--surface);
    padding: 36px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}
.contact-form .form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
}
.contact-form .form-control,
.contact-form .form-select {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    padding: 12px 14px;
    background: #fff;
    transition: all 0.2s ease;
    font-size: 14.5px;
}
.contact-form .form-control:focus,
.contact-form .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(9, 146, 194, 0.12);
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
    background: var(--primary-darker);
    color: #fff;
    padding: 80px 0 30px;
    position: relative;
}
.footer-title {
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 18px;
}
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: 10px; }
.footer-list a {
    color: rgba(255, 255, 255, 0.65);
    font-size: 14.5px;
    transition: color 0.2s ease;
}
.footer-list a:hover { color: var(--gold); }
.footer-contact li {
    color: rgba(255, 255, 255, 0.7);
    display: flex; gap: 8px;
    align-items: flex-start;
    font-size: 14px;
}
.footer-contact i { color: var(--gold); margin-top: 4px; }

.footer-social {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    display: inline-flex;
    align-items: center; justify-content: center;
    transition: all 0.25s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-social:hover {
    background: var(--gold);
    color: var(--primary-darker);
    transform: translateY(-2px);
    border-color: transparent;
}
.footer-bottom {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex; justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; gap: 12px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
}
.footer-legal a { color: rgba(255, 255, 255, 0.65); margin: 0 4px; }
.footer-legal a:hover { color: var(--gold); }
.footer-legal .dot { color: rgba(255, 255, 255, 0.3); }

/* =========================================================
   BACK TO TOP
   ========================================================= */
.back-to-top {
    position: fixed;
    bottom: 24px; left: 24px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--gold-grad);
    color: var(--primary-darker);
    border: none;
    box-shadow: var(--shadow-md);
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 18px;
    opacity: 0; visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1030;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { transform: translateY(-3px); }

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal {
     opacity: 1;
    transform: none;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal--delay { transition-delay: 0.15s; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .pill-dot, .ticker-move, .nav-megaphone, .hero-scroll-cue span { animation: none !important; }
    html { scroll-behavior: auto; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 992px) {
    section { padding: 70px 0; }
    .hero-section { padding: 80px 0; min-height: 520px; }
    .hero-inner { padding-left: 0; }
    .modern-nav .navbar-collapse {
        background: #fff;
        margin-top: 12px;
        padding: 16px;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
    }
    .nav-megaphone { display: none !important; }
    .about-image { max-width: 100%; }
    .about-seal { width: 100px; height: 100px; right: -10px; bottom: -20px; }
    .seal-num { font-size: 1.4rem; }
    .online-enquiry-tab { font-size: 11px; padding: 16px 8px; letter-spacing: 0.12em; }
    .admissions-floating { font-size: 12px; padding: 10px 14px; }
    .admissions-floating span { display: none; }
}

@media (max-width: 768px) {
    .top-bar { font-size: 12.5px; }
    .top-bar .top-left { gap: 12px !important; }
    .top-bar .top-right .btn-gold { padding: 4px 10px; font-size: 12px; }
    .review-card { flex-direction: column; }
    .review-avatar { width: 56px; height: 56px; font-size: 24px; }
    .ticker-label { font-size: 11px; padding: 10px 12px; }
    .news-badge { font-size: 9px; padding: 1px 6px; }
}

@media (max-width: 576px) {
    .hero-title { font-size: 2.2rem; }
    .hero-section { padding: 60px 0; }
    .contact-form { padding: 22px; }
    .focus-card { padding: 30px 20px; min-height: 380px; }
    .medal-circle { width: 110px; height: 110px; }
    .medal-num { font-size: 2rem; }
    .care-card { min-height: 120px; padding: 16px 8px; }
    .care-icon { width: 44px; height: 44px; font-size: 20px; }
    .care-label { font-size: 12px; }
    .online-enquiry-tab { display: none; }
}

.text-primary-c {
    color: var(--primary-dark);
    font-weight: 700;
}
/* ==========================================
   WELCOME SPLIT SECTION
========================================== */

.welcome-split-section {
    background: #f4f7fb;
    position: relative;
}

.welcome-split-card {
    background: #fff;
    border-radius: 34px;
    overflow: hidden;
    box-shadow:
        0 25px 70px rgba(15, 23, 42, 0.08),
        0 10px 30px rgba(15, 23, 42, 0.05);
}

/* LEFT */

.welcome-split-content {
    padding: 70px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.welcome-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(181, 140, 32, 0.12);
    color: #b58c20;
    padding: 10px 18px;
    border-radius: 60px;
    font-size: 14px;
    font-weight: 700;
    width: fit-content;
    margin-bottom: 24px;
}

.welcome-badge i {
    font-size: 15px;
}

.welcome-split-content h2 {
    font-size: 52px;
    line-height: 1.15;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 18px;
}

.welcome-split-content h2 span {
    color: #b58c20;
}

.welcome-divider {
    width: 90px;
    height: 4px;
    background: #b58c20;
    border-radius: 20px;
    margin-bottom: 30px;
}

.welcome-split-content p {
    font-size: 16px;
    line-height: 1.9;
    color: #5b6475;
    margin-bottom: 18px;
}

/* FEATURES */

.welcome-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 25px;
}

.welcome-feature {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f8fafc;
    padding: 16px 18px;
    border-radius: 18px;
    transition: all .35s ease;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.welcome-feature:hover {
    transform: translateY(-6px);
    background: #fff;
    box-shadow: 0 14px 30px rgba(0,0,0,0.08);
}

.welcome-feature i {
    width: 52px;
    height: 52px;
    background: #0f172a;
    color: #fff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.welcome-feature span {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

/* RIGHT IMAGE */

.welcome-image-side {
    position: relative;
    height: 100%;
    min-height: 720px;
    overflow: hidden;
    
}

.welcome-image-side img {
    width: 100%;
    height: 100%;
        background-color: #ffffff99;
    object-fit: cover;
}

.welcome-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.08),
            rgba(15,23,42,0.45)
        );
}

/* FLOATING CARD */
/* =========================================================
   WELCOME FLOATING YEARS BADGE
========================================================= */

.welcome-floating-card {
    position: absolute;

   bottom: 10px;
    left: 30px;
    width: 25%;
    z-index: 5;

    background: transparent;

    border: none;

    box-shadow: none;

    animation: floatingBadge 4s ease-in-out infinite;
}

.welcome-floating-badge {
    width: 170px;

    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(0 15px 35px rgba(0,0,0,0.25));
}

/* FLOATING EFFECT */
@keyframes floatingBadge {

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

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

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

}

/* MOBILE */
@media (max-width: 768px) {

    .welcome-floating-badge {
        width: 110px;
    }

    .welcome-floating-card {
        right: 15px;
        bottom: -15px;
    }

}

/* BUTTON */

.btn-gold {
    background: var(--gold);
    color: #fff;
    border: none;
    padding: 14px 28px;
    border-radius: 60px;
    font-weight: 700;
    transition: .3s ease;
}

.btn-gold:hover {
    background: var(--gold-strong);
    transform: translateY(-3px);
    color: #fff;
}

/* RESPONSIVE */

@media (max-width: 991px) {

    .welcome-split-content {
        padding: 45px 30px;
    }

    .welcome-split-content h2 {
        font-size: 38px;
    }

    .welcome-image-side {
        min-height: 420px;
    }

    .welcome-features {
        grid-template-columns: 1fr;
    }
}
/* =========================================
   INSTITUTION SHOWCASE
========================================= */
/* SECTION */

.institution-showcase{
    background:
        linear-gradient(135deg,#eef5ff 0%,#ffffff 100%);
    position:relative;
    overflow:hidden;
    padding:90px 0;
}

/* HEADING */

.showcase-heading{
    max-width:850px;
    margin:auto;
}

.showcase-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 22px;
    border-radius:100px;
    background:rgba(13,110,253,.1);
    color:var(--primary);
    font-weight:700;
    letter-spacing:.5px;
    margin-bottom:20px;
}

.showcase-heading h2{
    font-size:clamp(2.2rem,4vw,3.4rem);
    font-weight:900;
    color:var(--dark);
    margin-bottom:18px;
}

.showcase-heading p{
    color:var(--text);
    font-size:1.05rem;
    line-height:1.9;
}

/* PANELS */

.showcase-panel{
    background:var(--white);
    border-radius:32px;
    padding:38px;
    height:100%;
    border:1px solid rgba(13,110,253,.08);

    box-shadow:
        0 20px 50px rgba(13,110,253,.08);
}

.dark-panel{
    background:
        linear-gradient(135deg,#0d1b3d 0%,#0f172a 100%);
}

/* PANEL HEADER */

.panel-title-wrap{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:30px;
}

.panel-icon{
    width:68px;
    height:68px;
    border-radius:22px;
    background:
        linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.5rem;
    flex-shrink:0;

    box-shadow:
        0 12px 30px rgba(13,110,253,.25);
}

.gold-bg{
    background:
        linear-gradient(135deg,var(--secondary),var(--secondary-dark));

    box-shadow:
        0 12px 30px rgba(246,195,67,.25);
}

.panel-mini{
    display:block;
    color:var(--primary);
    font-size:.82rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:6px;
}

.panel-mini.light{
    color:var(--secondary);
}

.panel-title-wrap h3{
    margin:0;
    font-size:1.55rem;
    font-weight:800;
    color:var(--dark);
}

/* FEATURE LIST */

.compact-feature-list{
    display:flex;
    flex-direction:column;
    gap:18px;
}

/* CARDS */

.compact-feature-card{
    display:flex;
    align-items:flex-start;
    gap:18px;

    padding:20px;
    border-radius:24px;

    background:var(--light);

    border:1px solid rgba(13,110,253,.06);

    transition:all .35s ease;
}

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

    box-shadow:
        0 18px 35px rgba(13,110,253,.08);
}

.light-card{
    background:rgba(255,255,255,.97);
    border:1px solid rgba(255,255,255,.08);
}

/* ICONS */

.feature-icon{
    width:60px;
    height:60px;
    border-radius:20px;

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

    color:#fff;
    font-size:1.25rem;

    flex-shrink:0;
}

/* PRIMARY */

.feature-icon.blue{
    background:
        linear-gradient(135deg,var(--primary),var(--primary-dark));
}

/* SECONDARY */

.feature-icon.gold{
    background:
        linear-gradient(135deg,var(--gold),var(--gold-strong));
}

/* REUSE PRIMARY */

.feature-icon.green,
.feature-icon.red,
.feature-icon.purple{
    background:
        linear-gradient(135deg,var(--primary),var(--primary-dark));
}

/* CONTENT */

.feature-info h4{
    font-size:1.08rem;
    font-weight:800;
    margin-bottom:7px;
    color:var(--dark);
}

.feature-info p{
    margin:0;
    color:var(--text);
    line-height:1.7;
    font-size:.95rem;
}

.dark-panel .feature-info p{
    color:#64748b;
}

/* COUNTERS */

.counter{
    font-weight:900;
    color:var(--primary);
}

.dark-panel .counter{
    color:var(--secondary);
}

/* RESPONSIVE */

@media (max-width:991px){

    .institution-showcase{
        padding:70px 0;
    }

    .showcase-panel{
        padding:26px;
    }

    .panel-title-wrap{
        flex-direction:column;
        align-items:flex-start;
    }

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

}

/* =========================================================
   COURSE FOCUS MODERN SPLIT DESIGN
========================================================= */

.course-focus {
    padding: 90px 0;

    background:
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #eef5ff 100%
        );
}

.course-focus-wrapper {
    overflow: hidden;

    border-radius: 32px;

    box-shadow:
        0 25px 60px rgba(15, 23, 42, 0.08);

    position: relative;
}

/* =========================================================
   LEFT IMAGE SIDE
========================================================= */

.focus-image-side {
    position: relative;

    height: 100%;

    min-height: 650px;

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

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 60px 40px;

    overflow: hidden;
}

/* PATTERN */
.focus-pattern {
    position: absolute;

    inset: 0;

    background-image:
        radial-gradient(
            rgba(11,45,114,0.06) 1px,
            transparent 1px
        );

    background-size: 22px 22px;

    opacity: .8;
}

/* IMAGE */
.medal-image-wrap {
    position: relative;

    z-index: 2;

    margin-bottom: 25px;
}

.medal-image {
    width: 230px;

    max-width: 100%;

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

    filter:
        drop-shadow(0 20px 40px rgba(0,0,0,0.18));
}

/* TEXT */
.focus-image-content {
    position: relative;

    z-index: 2;
}

.focus-mini-title {
    display: inline-block;

    margin-bottom: 14px;

    color: var(--primary);

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;

    font-size: 13px;
}

.focus-image-content h3 {
    font-size: 44px;

    line-height: 1.2;

    font-weight: 700;

    color: var(--primary-darker);

    margin: 0;
}

/* =========================================================
   RIGHT CONTENT SIDE
========================================================= */

.focus-content-side {
    position: relative;

    height: 100%;

    padding: 70px 60px;

    background:
        linear-gradient(
            135deg,
            #071a3d 0%,
            #0b2d72 100%
        );

    overflow: hidden;
}

/* DARK PATTERN */
.focus-dark-pattern {
    position: absolute;

    inset: 0;

    background-image:
        radial-gradient(
            rgba(255,255,255,0.06) 1px,
            transparent 1px
        );

    background-size: 22px 22px;
}

.focus-content-side > * {
    position: relative;

    z-index: 2;
}

.focus-content-side p {
    color: rgba(255,255,255,0.78);

    font-size: 15px;

    line-height: 1.9;

    margin-bottom: 18px;
}

/* =========================================================
   LEARNING BOX
========================================================= */

.learning-box {
    margin-top: 35px;

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

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

    border-radius: 24px;

    padding: 30px;
}

.learning-title {
    color: #fff;

    font-size: 22px;

    margin-bottom: 20px;

    font-weight: 700;
}

.learning-list {
    list-style: none;

    padding: 0;

    margin: 0;
}

.learning-list li {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 16px;

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

    line-height: 1.6;
}

.learning-list li i {
    color: var(--gold);

    font-size: 18px;

    margin-top: 3px;
}

/* =========================================================
   ANIMATION
========================================================= */

@keyframes floatingMedal {

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

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

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

}

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

@media (max-width: 991px) {

    .focus-image-side,
    .focus-content-side {
        min-height: auto;
    }

    .focus-content-side {
        padding: 50px 30px;
    }

    .focus-image-content h3 {
        font-size: 34px;
    }

    .medal-image {
        width: 170px;
    }

}

.facilities-tab-content .tab-pane {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.facilities-tab-content .tab-pane.active.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.facilities-nav .nav-link {
    transition: all 0.3s ease;
}

.facilities-nav .nav-link.active {
    background: #0f172a;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* =========================================================
   EVENT DETAILS PAGE
   ========================================================= */

.event-details-page {
    background: #fff;
}

.event-details-header {
    text-align: center;
    max-width: 900px;
    margin: auto;
}

.event-details-header h1 {
    font-size: 42px;
    font-weight: 700;
    color: var(--primary-darker);
    margin: 14px 0;
}

.event-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(11, 45, 114, 0.08);
    color: var(--primary);
    padding: 10px 18px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
}

.event-details-header p {
    color: var(--ink-soft);
    line-height: 1.8;
    font-size: 16px;
}

/* GALLERY */

.event-gallery-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    cursor: pointer;
    height: 320px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.event-gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.event-gallery-card:hover img {
    transform: scale(1.08);
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,.7),
        rgba(0,0,0,.1)
    );

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

    opacity: 0;
    transition: .3s ease;
}

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

.gallery-overlay i {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--primary-darker);

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

    font-size: 28px;
}

/* =========================================================
   MODERN EVENT MODAL
========================================================= */

.event-lightbox-modal .modal-dialog {
    max-width: 1200px;
}

.event-lightbox-modal .modal-content {
    background: #ffffff;
    border: none;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}

/* HEADER */

.event-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    padding: 24px 28px;

    background: var(--primary-dark);

    color: #fff;
}

.event-modal-category {
    display: inline-flex;
    align-items: center;
    gap: 6px;

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

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

    padding: 6px 14px;

    border-radius: 50px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;

    margin-bottom: 12px;
}

.event-modal-header h3 {
    margin: 0 0 10px;
    color:var(--gold);
    font-size: 28px;
    font-weight: 700;

    line-height: 1.3;
}

.event-modal-date {
    display: flex;
    align-items: center;
    gap: 8px;

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

    font-size: 14px;
}

.event-modal-date i {
    color: var(--gold);
}

/* CLOSE BUTTON */

.event-modal-close {
    width: 46px;
    height: 46px;

    border-radius: 50%;

    border: none;

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

    color: #fff;

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

    font-size: 18px;

    transition: all .3s ease;
}

.event-modal-close:hover {
    background: var(--gold);

    color: var(--primary-dark);

    transform: rotate(90deg);
}

/* BODY */

.event-modal-body {
    position: relative;

    background: #0d1528;

    height: 72vh;

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

    overflow: hidden;
}

.event-modal-body img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

/* NAV BUTTONS */

.event-modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 54px;
    height: 54px;

    border-radius: 50%;

    border: none;

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

    color: #fff;

    font-size: 24px;

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

    z-index: 10;

    transition: all .3s ease;
}

.event-modal-nav:hover {
    background: var(--gold);

    color: var(--primary-dark);
}

.event-modal-nav.prev {
    left: 24px;
}

.event-modal-nav.next {
    right: 24px;
}

/* FOOTER */

.event-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 18px 28px;

    background: #fff;

    border-top: 1px solid #edf1f7;
}

.event-footer-title {
    font-size: 16px;
    font-weight: 700;

    color: var(--primary-dark);
}

.event-footer-count {
    font-size: 14px;
    font-weight: 600;

    color: var(--primary);
}

.event-footer-count span {
    color: var(--gold-dark);
    font-weight: 700;
}

/* MOBILE */

@media (max-width: 768px) {

    .event-modal-header {
        padding: 18px;
    }

    .event-modal-header h3 {
        font-size: 20px;
    }

    .event-modal-body {
        height: 50vh;
    }

    .event-modal-nav {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

    .event-modal-nav.prev {
        left: 12px;
    }

    .event-modal-nav.next {
        right: 12px;
    }

    .event-modal-footer {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
}

/* =========================================================
   EVENT DETAILS ACTIONS
========================================================= */

.event-details-actions {
    margin-top: 28px;
}

.event-details-actions .btn {
    height: 52px;

    padding: 0 28px;

    border-radius: 50px;

    font-weight: 600;

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

    gap: 8px;

    transition: all .3s ease;
}

.event-details-actions .btn:hover {
    transform: translateY(-3px);

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

/* =========================================================
   FEE STRUCTURE PAGE
   ========================================================= */

.fee-section {
    padding: 90px 0;
    background:
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #ffffff 100%
        );
}

/* TABLE WRAP */
.fee-table-wrap {
    margin-top: 50px;
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(11, 30, 63, 0.08);
    border: 1px solid rgba(11, 45, 114, 0.06);
}

/* TABLE */
.fee-table {
    margin: 0;
}

.fee-table thead {
    background:var(--primary-dark);
}

.fee-table thead th {
    color: #fff;
    background:var(--primary-dark);
    font-weight: 700;
    font-size: 15px;
    padding: 22px 20px;
    border: none;
    vertical-align: middle;
    white-space: nowrap;
}

/* BODY */
.fee-table tbody tr {
    transition: all 0.3s ease;
}

.fee-table tbody tr:nth-child(even) {
    background: #f9fbff;
}

.fee-table tbody tr:hover {
    background: #eef5ff;
}

.fee-table tbody td {
    padding: 20px;
    border-color: rgba(11, 45, 114, 0.06);
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.7;
    vertical-align: middle;
}

/* SERIAL */
.fee-table tbody td:first-child {
    font-weight: 700;
    color: var(--primary-dark);
}

/* COURSE NAME */
.fee-table tbody td:nth-child(2) {
    font-weight: 600;
    color: var(--primary-dark);
}

/* FEE */
.fee-amount {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
}

/* NOTE */
.fee-note {
    margin-top: 40px;
    background: #fff;
    border-radius: 24px;
    padding: 28px;
    display: flex;
    align-items: flex-start;
    gap: 22px;
    box-shadow: 0 14px 40px rgba(11, 30, 63, 0.06);
    border: 1px solid rgba(11, 45, 114, 0.06);
}

.fee-note-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            var(--gold),
            #ffdc73
        );
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fee-note-icon i {
    font-size: 28px;
    color: var(--primary-dark);
}

.fee-note h5 {
    margin-bottom: 10px;
    color: var(--primary-dark);
    font-weight: 700;
}

.fee-note p {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.8;
}

/* MOBILE */
@media (max-width: 991px) {

    .fee-table thead th,
    .fee-table tbody td {
        padding: 16px;
    }
}

@media (max-width: 767px) {

    .fee-section {
        padding: 70px 0;
    }

    .fee-table-wrap {
        border-radius: 22px;
    }

    .fee-table thead th {
        font-size: 13px;
        padding: 14px;
    }

    .fee-table tbody td {
        font-size: 14px;
        padding: 14px;
    }

    .fee-amount {
        font-size: 16px;
    }

    .fee-note {
        flex-direction: column;
        padding: 22px;
    }
}

/* =========================================
   NEW ADMISSION MODAL
========================================= */

.admission-modal-new {
    border: none;
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    position: relative;

    max-height: 94vh;
}

/* CLOSE BUTTON */

.admission-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    z-index: 20;

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

    backdrop-filter: blur(8px);

    transition: all 0.25s ease;
}

.admission-close:hover {
    background: #E63946;
    transform: rotate(90deg);
}

/* =========================================
   LEFT IMAGE SECTION
========================================= */

.admission-poster-slider,
.admission-poster-slider .carousel-inner,
.admission-poster-slider .carousel-item {
    height: 100%;
}

.admission-poster-slider .carousel-item img {

    width: 100%;
    height: 94vh;

    object-fit: contain;   /* IMPORTANT */

    background: #f5f7fa;

    display: block;
}
/* INDICATORS */

.admission-poster-slider .carousel-indicators {
    bottom: 20px;
}

.admission-poster-slider .carousel-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: #fff;
    opacity: 0.5;
}

.admission-poster-slider .carousel-indicators .active {
    opacity: 1;
    transform: scale(1.2);
}

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

.admission-content-wrap {

    padding: 30px 28px;

    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    overflow-y: auto;
}

/* BRAND */

.admission-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 30px;
}

.admission-logo {
    width: 62px;
    height: 62px;
    object-fit: contain;
}

.admission-brand .brand-title {
    display: block;
    font-size: 26px;
    font-weight: 800;
    color: var(--primary-dark);
    line-height: 1.1;
}

.admission-brand .brand-subtitle {
    display: block;
    color: var(--gold-strong);
    font-weight: 600;
}

/* BADGE */

.admission-badge {
    display: inline-block;
    background: rgba(212,175,55,0.12);
    color: var(--gold-strong);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 18px;
}

/* TEXT */

.admission-heading {
    font-size: 34px;
    font-weight: 800;
    color: var(--primary-dark);
    line-height: 1.2;
    margin-bottom: 16px;
}

.admission-desc {
    color: #667085;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 28px;
}

/* COURSES */

.admission-course-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 30px;
}

.admission-course-card {
    background: #f8fafc;
    border-radius: 18px;
    padding: 18px 20px;
    border: 1px solid rgba(15,23,42,0.06);
}

.admission-course-card h6 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--primary-dark);

    display: flex;
    align-items: center;
    gap: 8px;
}

.admission-course-card ul {
    margin: 0;
    padding-left: 18px;
}

.admission-course-card li {
    color: #475467;
    margin-bottom: 6px;
    font-size: 14px;
}

/* BUTTON */

.admission-btn {
    width: 100%;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 700;
}
.modal-dialog.modal-xl {
    max-width: min(1150px, 96vw);
    margin: 10px auto;
}
/* =========================================
   MOBILE
========================================= */
@media (max-width: 991px) {

    .admission-poster-slider .carousel-item img {

        height: 52vh;

        object-fit: contain;
    }

    .admission-content-wrap {

        padding: 20px;

    }

    .admission-heading {

        font-size: 24px;
        margin-bottom: 10px;

    }

    .admission-desc {

        font-size: 13px;
        line-height: 1.5;

        margin-bottom: 14px;
    }

    .admission-brand {

        margin-bottom: 14px;
    }

    .admission-course-grid {

        gap: 10px;
        margin-bottom: 16px;
    }

    .admission-course-card {

        padding: 12px 14px;
    }

    .admission-course-card h6 {

        font-size: 14px;
        margin-bottom: 8px;
    }

    .admission-course-card li {

        font-size: 12px;
        margin-bottom: 3px;
    }

    .admission-btn {

        padding: 11px 16px;
        font-size: 14px;
    }

}

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

@media (max-width: 767px) {

    .modal-dialog.modal-xl {

        max-width: calc(100vw - 12px);
        margin: 6px auto;
    }

    .admission-modal-new {

        max-height: 96vh;
        border-radius: 16px;
    }

    .admission-poster-slider .carousel-item img {

        height: 42vh;

        object-fit: contain;

        background: #f8fafc;
    }

    .admission-content-wrap {

        padding: 16px 14px;
    }

    .admission-logo {

        width: 44px;
        height: 44px;
    }

    .admission-brand .brand-title {

        font-size: 18px;
    }

    .admission-brand .brand-subtitle {

        font-size: 12px;
    }

    .admission-badge {

        font-size: 11px;
        padding: 5px 12px;

        margin-bottom: 8px;
    }

    .admission-heading {

        font-size: 18px;

        margin-bottom: 8px;
    }

    .admission-desc {

        font-size: 12px;

        margin-bottom: 10px;
    }

    .admission-course-grid {

        gap: 8px;

        margin-bottom: 12px;
    }

    .admission-course-card {

        padding: 10px 12px;

        border-radius: 12px;
    }

    .admission-course-card ul {

        padding-left: 16px;
    }

    .admission-btn {

        padding: 10px 14px;

        font-size: 13px;
    }

}
/* =========================================================
   PLACEMENT PAGE LIGHTBOX MODAL
========================================================= */

.event-lightbox {
    backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.72);
}

.event-lightbox .modal-dialog {
    max-width: min(1300px, 96vw);
    margin: 1rem auto;
}

.event-lightbox .modal-content {
    border: none;
    border-radius: 28px;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            #081120 0%,
            #0B1E3F 100%
        );

    box-shadow:
        0 30px 80px rgba(0,0,0,0.45),
        0 10px 30px rgba(0,0,0,0.25);

    position: relative;
}

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

.lightbox-close {
    position: absolute;
    top: 18px;
    right: 18px;

    width: 50px;
    height: 50px;

    border: none;
    border-radius: 50%;

    background: rgba(255,255,255,0.12);
    color: #fff;

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

    z-index: 50;

    backdrop-filter: blur(10px);

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease;
}

.lightbox-close i {
    font-size: 18px;
}

.lightbox-close:hover {
    background: #fff;
    color: #081120;
    transform: rotate(90deg);
}

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

#lightboxCarousel {
    background: #000;
}

#lightboxCarousel .carousel-inner {
    background: #000;
}

#lightboxCarousel .carousel-item {
    height: 78vh;
    min-height: 500px;
}

#lightboxCarousel .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

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

#lightboxCarousel .carousel-control-prev,
#lightboxCarousel .carousel-control-next {
    width: 8%;
    opacity: 1;
}

.ctrl-icon {
    width: 58px;
    height: 58px;

    border-radius: 50%;

    background: rgba(255,255,255,0.14);
    color: #fff;

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

    font-size: 24px;

    backdrop-filter: blur(12px);

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease;
}

.ctrl-icon:hover {
    background: #fff;
    color: #081120;
    transform: scale(1.08);
}

/* =========================================================
   CAPTION AREA
========================================================= */

.lightbox-caption {
    padding: 24px 30px;

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

    background:
        linear-gradient(
            180deg,
            #0B1E3F 0%,
            #081120 100%
        );
}

.lightbox-title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
    line-height: 1.3;
}

.lightbox-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

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

    font-size: 14px;
}

.lightbox-meta i {
    color: var(--gold);
}

.lightbox-cat {
    color: var(--gold);
    font-weight: 600;
}

.lightbox-counter {
    background: rgba(255,255,255,0.08);

    color: #fff;

    padding: 8px 14px;

    border-radius: 999px;

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

    white-space: nowrap;
}

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

@media (max-width: 991px) {

    .event-lightbox .modal-dialog {
        max-width: 98vw;
    }

    #lightboxCarousel .carousel-item {
        height: 65vh;
        min-height: 420px;
    }

    .lightbox-caption {
        padding: 20px;
    }

    .lightbox-title {
        font-size: 20px;
    }

}

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

@media (max-width: 767px) {

    .event-lightbox .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100%;
    }

    .event-lightbox .modal-content {
        border-radius: 0;
        min-height: 100vh;
    }

    #lightboxCarousel .carousel-item {
        height: 52vh;
        min-height: auto;
    }

    .lightbox-caption {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;

        padding: 18px 16px 22px;
    }

    .lightbox-title {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .lightbox-meta {
        font-size: 13px;
    }

    .lightbox-counter {
        font-size: 13px;
        padding: 6px 12px;
    }

    .ctrl-icon {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    .lightbox-close {
        width: 42px;
        height: 42px;
        top: 12px;
        right: 12px;
    }

}

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

@media (max-width: 480px) {

    #lightboxCarousel .carousel-item {
        height: 46vh;
    }

    .lightbox-title {
        font-size: 17px;
    }

}

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

.contact-page {
    position: relative;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f9fc 100%
        );
}

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

.contact-page-card {

    height: 100%;

    background: #fff;

    border-radius: 28px;

    padding: 38px;

    box-shadow:
        0 15px 40px rgba(11, 30, 63, 0.08);

    border: 1px solid rgba(11, 30, 63, 0.06);

}

.contact-page-title {

    display: flex;
    align-items: center;
    gap: 12px;

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

    color: var(--primary-dark);

    margin-bottom: 30px;

}

.contact-page-title i {

    color: var(--gold);

}

.contact-page-list {

    display: flex;
    flex-direction: column;
    gap: 24px;

}

.contact-page-item {

    display: flex;
    align-items: flex-start;
    gap: 18px;

}

.contact-page-icon {

    width: 56px;
    height: 56px;

    min-width: 56px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(201,162,39,0.15),
            rgba(11,30,63,0.08)
        );

    color: var(--primary-dark);

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

    font-size: 22px;

}

.contact-page-item strong {

    display: block;

    color: var(--primary-dark);

    margin-bottom: 6px;

    font-size: 16px;

}

.contact-page-item p {

    margin: 0;

    color: #5b6472;

    line-height: 1.7;

}

.contact-page-item a {

    color: inherit;
    text-decoration: none;

}

.contact-page-item a:hover {

    color: var(--primary);

}

/* =========================================================
   MAP
========================================================= */

.contact-page-map {

    height: 100%;

    min-height: 580px;

    border-radius: 28px;

    overflow: hidden;

    box-shadow:
        0 15px 40px rgba(11, 30, 63, 0.08);

}

.contact-page-map iframe {

    width: 100%;
    height: 100%;
    border: 0;

}

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

@media (max-width: 991px) {

    .contact-page-card {

        padding: 30px;

    }

    .contact-page-title {

        font-size: 24px;

    }

    .contact-page-map {

        min-height: 420px;

    }

}

@media (max-width: 767px) {

    .contact-page {

        padding-top: 70px;
        padding-bottom: 70px;

    }

    .contact-page-card {

        border-radius: 22px;

        padding: 24px;

    }

    .contact-page-title {

        font-size: 22px;

        line-height: 1.4;

    }

    .contact-page-item {

        gap: 14px;

    }

    .contact-page-icon {

        width: 48px;
        height: 48px;
        min-width: 48px;

        border-radius: 14px;

        font-size: 18px;

    }

    .contact-page-map {

        border-radius: 22px;

        min-height: 340px;

    }

}
/* =========================================================
   ADMISSIONS PAGE
========================================================= */

.admissions-page {

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f9fc 100%
        );

    position: relative;

}

/* =========================================================
   DOWNLOADS
========================================================= */

.admission-downloads {

    display: grid;

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

    gap: 20px;

}

.admit-btn {

    background: #fff;

    border-radius: 22px;

    padding: 22px;

    display: flex;
    align-items: center;
    gap: 18px;

    text-decoration: none;

    border: 1px solid rgba(11,30,63,0.08);

    box-shadow:
        0 10px 30px rgba(11,30,63,0.06);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}

.admit-btn:hover {

    transform: translateY(-5px);

    box-shadow:
        0 18px 40px rgba(11,30,63,0.12);

}

.admit-btn i {

    font-size: 34px;

    color: #E63946;

}

.admit-btn strong {

    display: block;

    color: var(--primary-dark);

    margin-bottom: 4px;

}

.admit-btn span {

    color: #6b7280;

    font-size: 14px;

}

/* =========================================================
   ELIGIBILITY CARD
========================================================= */

.eligibility-card {

    height: 100%;

    background: #fff;

    border-radius: 28px;

    padding: 30px;

    border: 1px solid rgba(11,30,63,0.06);

    box-shadow:
        0 12px 36px rgba(11,30,63,0.06);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.eligibility-card:hover {

    transform: translateY(-8px);

    box-shadow:
        0 22px 50px rgba(11,30,63,0.12);

}

.eligibility-card__head {

    display: flex;
    align-items: flex-start;
    gap: 16px;

    margin-bottom: 24px;

}

.eligibility-icon {

    width: 62px;
    height: 62px;

    min-width: 62px;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(201,162,39,0.18),
            rgba(11,30,63,0.08)
        );

    color: var(--primary-dark);

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

    font-size: 24px;

}

.eligibility-eyebrow {

    display: inline-block;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;

    color: var(--gold-strong);

    margin-bottom: 6px;

}

.eligibility-card h4 {

    font-size: 20px;

    color: var(--primary-dark);

    margin: 0;

    line-height: 1.4;

}

.eligibility-list {

    list-style: none;

    padding: 0;
    margin: 0;

    display: flex;
    flex-direction: column;
    gap: 18px;

}

.eligibility-list li {

    display: flex;
    align-items: flex-start;
    gap: 12px;

}

.eligibility-list i {

    color: #18A957;

    font-size: 18px;

    margin-top: 3px;

}

.eligibility-list p {

    margin: 0;

    color: #5b6472;

    line-height: 1.7;

    font-size: 15px;

}
.eligibility-list p strong {

    color: var(--primary-dark);

}

/* =========================================================
   ACTIONS
========================================================= */

.admission-actions {

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;

    margin-top: 50px;

}

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

@media (max-width: 1199px) {

    .admission-downloads {

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

    }

}

@media (max-width: 767px) {

    .admissions-page {

        padding-top: 70px;
        padding-bottom: 70px;

    }

    .admission-downloads {

        grid-template-columns: 1fr;

    }

    .admit-btn {

        padding: 18px;

        border-radius: 18px;

    }

    .eligibility-card {

        padding: 24px;

        border-radius: 22px;

    }

    .eligibility-card h4 {

        font-size: 18px;

    }

    .eligibility-icon {

        width: 54px;
        height: 54px;
        min-width: 54px;

        border-radius: 16px;

        font-size: 20px;

    }

}

/* =========================================================
   FACILITIES PAGE
========================================================= */

.facilities-intro {
    background: #fff;
}

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

.facility-gallery-section {
    background: #f7f9fc;
}

.facility-gallery-card {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    height: 100%;
    transition: 0.4s ease;
}

.facility-gallery-card:hover {
    transform: translateY(-6px);
}

.facility-gallery-image {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
}

.facility-gallery-image img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
    transition: 0.5s ease;
}

.facility-gallery-card--large img {
    height: 420px;
}

.facility-gallery-card--wide img {
    height: 500px;
}

.facility-gallery-card:hover img {
    transform: scale(1.08);
}

/* =========================================================
   OVERLAY
========================================================= */

.facility-gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.75),
        rgba(0,0,0,0.1)
    );
    display: flex;
    align-items: flex-end;
    padding: 30px;
}

.facility-gallery-overlay span {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

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

@media (max-width: 991px) {

    .facility-gallery-card--large img {
        height: 320px;
    }

    .facility-gallery-card--wide img {
        height: 320px;
    }

}

@media (max-width: 767px) {

    .facility-gallery-image img,
    .facility-gallery-card--large img,
    .facility-gallery-card--wide img {
        height: 250px;
    }

    .facility-gallery-overlay {
        padding: 20px;
    }

    .facility-gallery-overlay span {
        font-size: 1rem;
    }

}
/* =========================================================
   EVENTS LAYOUT
========================================================= */

.events-layout{
    background: #f7f9fc;
    padding: 0;
}

/* =========================================================
   SIDEBAR
========================================================= */

.events-sidebar{
    position: sticky;
    top: 90px;

    height: calc(100vh - 90px);

    overflow-y: auto;

    background: #fff;

    border-right: 1px solid rgba(0,0,0,.08);

    padding: 30px 18px;
}

.events-sidebar-title{
    font-size: 1.1rem;
    font-weight: 700;

    margin-bottom: 20px;
}

.events-sidebar-link{
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding: 14px 16px;

    border-radius: 14px;

    text-decoration: none;

    color: #222;

    margin-bottom: 10px;

    background: #f5f7fb;

    transition: .25s ease;
}

.events-sidebar-link span{
    font-size: .92rem;
    font-weight: 600;
}

.events-sidebar-link small{
    color: #777;
}

.events-sidebar-link:hover{
    background: #c59d5f;
    color: #fff;
    transform: translateX(4px);
}

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

.events-content{
    padding: 50px;
}

.event-gallery-section{
    margin-bottom: 80px;
}

.event-section-header{
    margin-bottom: 18px;
}

.event-section-date{
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-size: .9rem;
    color: #777;

    margin-bottom: 12px;
}

.event-section-header h2{
    font-size: 2rem;
    font-weight: 700;
}

.event-section-desc{
    color: #666;
    max-width: 900px;

    margin-bottom: 28px;
}

/* =========================================================
   GALLERY CARD
========================================================= */

.event-gallery-card{
    position: relative;

    border-radius: 22px;

    overflow: hidden;

    cursor: pointer;

    height: 280px;

    background: #ddd;
}

.event-gallery-card img{
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: .5s ease;
}

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

.gallery-overlay{
    position: absolute;
    inset: 0;

    background: linear-gradient(
        to top,
        rgba(0,0,0,.55),
        rgba(0,0,0,.05)
    );

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

    opacity: 0;

    transition: .3s ease;
}

.gallery-overlay i{
    font-size: 2rem;
    color: #fff;
}

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

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

@media(max-width:991px){

    .events-sidebar{
        position: relative;
        top: 0;

        height: auto;

        border-right: 0;
        border-bottom: 1px solid rgba(0,0,0,.08);

        display: flex;
        gap: 10px;

        overflow-x: auto;
        overflow-y: hidden;

        white-space: nowrap;
    }

    .events-sidebar-link{
        flex: 0 0 auto;
        margin-bottom: 0;
    }

    .events-content{
        padding: 25px 18px;
    }

}
/* =========================================
   ABOUT VIDEO
========================================= */

.about-video-frame{
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    height: 100%;
    min-height: 520px;
    background: #000;
}

.about-video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 32px;
}

/* MOBILE */

@media (max-width: 991px){

    .about-video-frame{
        min-height: 380px;
    }

}

@media (max-width: 576px){

    .about-video-frame{
        min-height: 300px;
        border-radius: 24px;
    }

    .about-video{
        border-radius: 24px;
    }

}
/* =========================================
   PROFILE 34 YEARS SEAL
========================================= */

.profile-image__badge--seal{
    background: transparent;
    padding: 0;
    box-shadow: none;
    border: none;
    width: 100px;
    height: 100px;

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

.profile-badge-seal{
    width: 100%;
    height: 100%;
    object-fit: contain;

    filter:
        drop-shadow(0 10px 20px rgba(0,0,0,0.25));
}

/* MOBILE */

@media (max-width: 576px){

    .profile-image__badge--seal{
        width: 80px;
        height: 80px;
    }

}

/* =========================================
   FACILITY CARDS
========================================= */

.facility-card{
    display: block;
    position: relative;
    overflow: hidden;

    background: #fff;
    border-radius: 28px;

    text-decoration: none;
    color: inherit;

    box-shadow:
        0 10px 40px rgba(15,23,42,0.08);

    transition: 0.4s ease;
    height: 100%;
}

.facility-card:hover{
    transform: translateY(-10px);

    box-shadow:
        0 20px 50px rgba(15,23,42,0.14);
}

.facility-card__image{
    position: relative;
    overflow: hidden;
    height: 260px;
}

.facility-card__image img{
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: 0.6s ease;
}

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

.facility-card__content{
    padding: 28px;
}

.facility-card__content h3{
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: #0f172a;
}

.facility-card__content p{
    color: #64748b;
    line-height: 1.7;
    margin: 0;
}

/* MOBILE */

@media (max-width: 768px){

    .facility-card__image{
        height: 220px;
    }

    .facility-card__content{
        padding: 22px;
    }

}
/* =========================================================
   FACILITY GALLERY PAGE
========================================================= */

.facility-gallery-hero{
    position: relative;
    overflow: hidden;

    min-height: 460px;

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

    padding: 120px 0 100px;
}

.facility-gallery-hero__bg{
    position: absolute;
    inset: 0;
    z-index: 1;
}

.facility-gallery-hero__bg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.facility-gallery-hero__overlay{
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.45),
            rgba(0,0,0,0.72)
        );

    z-index: 2;
}

.facility-gallery-hero .container{
    position: relative;
    z-index: 3;
}

.facility-gallery-title{
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 800;
    color: #fff;

    margin-bottom: 18px;
}

.facility-gallery-desc{
    max-width: 760px;
    margin: 0 auto;

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

    font-size: 1.08rem;
    line-height: 1.9;
}

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

.facility-gallery-section{
    background: #f8fafc;
}

/* =========================================================
   GALLERY CARD
========================================================= */

.facility-gallery-card{
    position: relative;
    overflow: hidden;

    border-radius: 28px;
    cursor: pointer;

    background: #fff;

    box-shadow:
        0 12px 40px rgba(15,23,42,0.08);

    transition: 0.45s ease;
}

.facility-gallery-card:hover{
    transform: translateY(-10px);

    box-shadow:
        0 24px 60px rgba(15,23,42,0.14);
}

.facility-gallery-card img{
    width: 100%;
    height: 320px;
    object-fit: cover;

    transition: 0.7s ease;

    display: block;
}

.facility-gallery-card:hover img{
    transform: scale(1.08);
}

/* =========================================================
   OVERLAY
========================================================= */

.facility-gallery-overlay{
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(15,23,42,0.65),
            rgba(15,23,42,0.12)
        );

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

    opacity: 0;
    transition: 0.4s ease;
}

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

.facility-gallery-overlay span{
    width: 74px;
    height: 74px;

    border-radius: 50%;

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

    backdrop-filter: blur(10px);

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

    color: #fff;
    font-size: 1.8rem;

    transform: scale(0.8);
    transition: 0.4s ease;
}

.facility-gallery-card:hover
.facility-gallery-overlay span{
    transform: scale(1);
}

/* =========================================================
   LIGHTBOX MODAL
========================================================= */

.facility-lightbox-modal .modal-dialog{
    max-width: 1300px;
    padding: 20px;
}

.facility-lightbox-modal .modal-content{
    background: #0f172a;
    border: none;

    border-radius: 32px;

    overflow: hidden;

    box-shadow:
        0 30px 80px rgba(0,0,0,0.45);
}

/* =========================================================
   MODAL HEADER
========================================================= */

.facility-modal-header{
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 24px 30px;

    background:
        linear-gradient(
            to right,
            rgba(255,255,255,0.02),
            rgba(255,255,255,0.04)
        );

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

.facility-modal-category{
    display: inline-flex;
    align-items: center;

    padding: 8px 16px;

    border-radius: 999px;

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

    color: #facc15;

    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;

    margin-bottom: 10px;
}

#facilityModalTitle{
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;

    margin: 0;
}

.facility-modal-close{
    width: 52px;
    height: 52px;

    border: none;
    outline: none;

    border-radius: 50%;

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

    color: #fff;
    font-size: 1.3rem;

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

    transition: 0.3s ease;
}

.facility-modal-close:hover{
    background: #ef4444;
    transform: rotate(90deg);
}

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

.facility-modal-body{
    position: relative;

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

    padding: 40px;

    min-height: 72vh;

    background: #020617;
}

#facilityModalImage{
    max-width: 100%;
    max-height: 72vh;

    object-fit: contain;

    border-radius: 24px;

    box-shadow:
        0 20px 60px rgba(0,0,0,0.4);
}

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

.facility-modal-nav{
    position: absolute;
    top: 50%;

    transform: translateY(-50%);

    width: 64px;
    height: 64px;

    border: none;
    outline: none;

    border-radius: 50%;

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

    backdrop-filter: blur(10px);

    color: #fff;
    font-size: 1.8rem;

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

    transition: 0.35s ease;

    z-index: 10;
}

.facility-modal-nav:hover{
    background: #facc15;
    color: #0f172a;

    transform:
        translateY(-50%)
        scale(1.08);
}

.facility-modal-nav.prev{
    left: 30px;
}

.facility-modal-nav.next{
    right: 30px;
}

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

.facility-modal-footer{
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 20px;

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

    background:
        linear-gradient(
            to right,
            rgba(255,255,255,0.02),
            rgba(255,255,255,0.04)
        );

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

    font-size: 0.95rem;
}

.facility-modal-footer strong{
    color: #fff;
}

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

@media (max-width: 991px){

    .facility-gallery-hero{
        min-height: 380px;
        padding: 100px 0 80px;
    }

    .facility-gallery-card img{
        height: 260px;
    }

    .facility-modal-body{
        min-height: auto;
        padding: 20px;
    }

    #facilityModalImage{
        max-height: 60vh;
    }

    .facility-modal-nav{
        width: 52px;
        height: 52px;

        font-size: 1.3rem;
    }

    .facility-modal-nav.prev{
        left: 12px;
    }

    .facility-modal-nav.next{
        right: 12px;
    }

}

@media (max-width: 576px){

    .facility-gallery-title{
        font-size: 2.2rem;
    }

    .facility-gallery-desc{
        font-size: 0.96rem;
        line-height: 1.8;
    }

    .facility-gallery-card{
        border-radius: 22px;
    }

    .facility-gallery-card img{
        height: 220px;
    }

    .facility-lightbox-modal .modal-dialog{
        padding: 10px;
    }

    .facility-lightbox-modal .modal-content{
        border-radius: 24px;
    }

    .facility-modal-header{
        padding: 18px;
    }

    #facilityModalTitle{
        font-size: 1.1rem;
    }

    .facility-modal-close{
        width: 44px;
        height: 44px;

        font-size: 1rem;
    }

    .facility-modal-body{
        padding: 14px;
    }

    #facilityModalImage{
        max-height: 55vh;
        border-radius: 18px;
    }

    .facility-modal-nav{
        width: 42px;
        height: 42px;

        font-size: 1rem;
    }

    .facility-modal-footer{
        padding: 16px;
        font-size: 0.85rem;
    }

}

/* =========================================================
   AWARDS & ACHIEVEMENTS PAGE
========================================================= */

/* =========================================
   PAGE HEADER DESCRIPTION
========================================= */

.page-header__desc{
    max-width: 760px;
    margin: 18px auto 0;

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

    font-size: 1.05rem;
    line-height: 1.9;
}

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

.awards-gallery-section{
    background: #f8fafc;
    position: relative;
    overflow: hidden;
}

/* =========================================================
   GALLERY CARD
========================================================= */

.award-gallery-card{
    position: relative;

    overflow: hidden;
    cursor: pointer;

    border-radius: 28px;

    background: #fff;

    box-shadow:
        0 10px 30px rgba(15,23,42,0.08);

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease;
}

.award-gallery-card:hover{
    transform: translateY(-10px);

    box-shadow:
        0 25px 60px rgba(15,23,42,0.14);
}

.award-gallery-card img{
    width: 100%;
    height: 320px;

    object-fit: cover;
    display: block;

    transition: transform 0.7s ease;
}

.award-gallery-card:hover img{
    transform: scale(1.08);
}

/* =========================================================
   OVERLAY
========================================================= */

.award-gallery-overlay{
    position: absolute;
    inset: 0;

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

    background:
        linear-gradient(
            to top,
            rgba(15,23,42,0.68),
            rgba(15,23,42,0.18)
        );

    opacity: 0;

    transition: opacity 0.4s ease;
}

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

.award-gallery-overlay span{
    width: 76px;
    height: 76px;

    border-radius: 50%;

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

    backdrop-filter: blur(10px);

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

    color: #fff;
    font-size: 1.8rem;

    transform: scale(0.7);

    transition: transform 0.4s ease;
}

.award-gallery-card:hover
.award-gallery-overlay span{
    transform: scale(1);
}

/* =========================================================
   MODAL
========================================================= */

.awards-lightbox-modal .modal-dialog{
    max-width: 1300px;
    padding: 20px;
}

.awards-lightbox-modal .modal-content{
    background: #020617;

    border: none;
    overflow: hidden;

    border-radius: 32px;

    box-shadow:
        0 30px 90px rgba(0,0,0,0.45);
}

/* =========================================================
   MODAL CLOSE
========================================================= */

.awards-modal-close{
    position: absolute;

    top: 20px;
    right: 20px;

    width: 54px;
    height: 54px;

    border: none;
    outline: none;

    border-radius: 50%;

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

    backdrop-filter: blur(10px);

    color: #fff;

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

    font-size: 1.2rem;

    z-index: 20;

    transition: 0.35s ease;
}

.awards-modal-close:hover{
    background: #ef4444;

    transform: rotate(90deg);
}

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

.awards-modal-body{
    position: relative;

    min-height: 82vh;

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

    padding: 50px;

    background:
        radial-gradient(
            circle at top,
            rgba(255,255,255,0.04),
            transparent 45%
        ),
        #020617;
}

#awardsModalImage{
    max-width: 100%;
    max-height: 76vh;

    object-fit: contain;

    border-radius: 24px;

    box-shadow:
        0 20px 60px rgba(0,0,0,0.4);
}

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

.awards-modal-nav{
    position: absolute;
    top: 50%;

    transform: translateY(-50%);

    width: 66px;
    height: 66px;

    border: none;
    outline: none;

    border-radius: 50%;

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

    backdrop-filter: blur(10px);

    color: #fff;

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

    font-size: 1.7rem;

    z-index: 15;

    transition: 0.35s ease;
}

.awards-modal-nav:hover{
    background: #facc15;
    color: #0f172a;

    transform:
        translateY(-50%)
        scale(1.08);
}

.awards-modal-nav.prev{
    left: 28px;
}

.awards-modal-nav.next{
    right: 28px;
}

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

.awards-modal-footer{
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 22px;

    background:
        linear-gradient(
            to right,
            rgba(255,255,255,0.03),
            rgba(255,255,255,0.05)
        );

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

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

    font-size: 0.95rem;
    font-weight: 500;
}

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

@media (max-width: 991px){

    .award-gallery-card img{
        height: 260px;
    }

    .awards-modal-body{
        min-height: auto;
        padding: 24px;
    }

    #awardsModalImage{
        max-height: 65vh;
    }

    .awards-modal-nav{
        width: 52px;
        height: 52px;

        font-size: 1.2rem;
    }

    .awards-modal-nav.prev{
        left: 12px;
    }

    .awards-modal-nav.next{
        right: 12px;
    }

}

@media (max-width: 576px){

    .page-header__desc{
        font-size: 0.95rem;
        line-height: 1.8;
    }

    .award-gallery-card{
        border-radius: 22px;
    }

    .award-gallery-card img{
        height: 220px;
    }

    .award-gallery-overlay span{
        width: 58px;
        height: 58px;

        font-size: 1.2rem;
    }

    .awards-lightbox-modal .modal-dialog{
        padding: 10px;
    }

    .awards-lightbox-modal .modal-content{
        border-radius: 24px;
    }

    .awards-modal-close{
        width: 42px;
        height: 42px;

        top: 14px;
        right: 14px;

        font-size: 1rem;
    }

    .awards-modal-body{
        padding: 14px;
    }

    #awardsModalImage{
        max-height: 55vh;
        border-radius: 16px;
    }

    .awards-modal-nav{
        width: 42px;
        height: 42px;

        font-size: 1rem;
    }

    .awards-modal-footer{
        padding: 16px;

        font-size: 0.85rem;
    }

}
/* =========================================================
   WORLD RECORD SECTION
========================================================= */

.world-record-section{
    position: relative;

    width: 100%;
    overflow: hidden;

    background: #000;
}

/* =========================================
   VIDEO WRAP
========================================= */

.world-record-video-wrap{
    position: relative;

    width: 100%;
    min-height: 88vh;

    overflow: hidden;
}

/* =========================================
   VIDEO
========================================= */

.world-record-video-wrap video{
    width: 100%;
    height: 100%;

    position: absolute;
    inset: 0;

    object-fit: cover;

    display: block;
}

/* =========================================
   OVERLAY
========================================= */

.world-record-overlay{
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(2,6,23,0.45),
            rgba(2,6,23,0.68)
        );

    z-index: 2;
}

/* =========================================
   CONTENT — BOTTOM LEFT MINIMAL
========================================= */

.world-record-content{
    position: absolute;

    left: 40px;
    bottom: 35px;

    z-index: 5;

    max-width: 520px;

    padding: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;

    text-align: left;
}

/* TITLE */

.world-record-title{
    color: #fff;

    font-size: clamp(1.8rem, 3vw, 3.4rem);
    font-weight: 800;

    line-height: 1.1;

    margin-bottom: 12px;

    text-shadow:
        0 8px 24px rgba(0,0,0,0.45);
}

/* TEXT */

.world-record-text{
    color: rgba(255,255,255,0.86);

    font-size: 0.98rem;
    line-height: 1.7;

    margin: 0;

    max-width: 460px;

    text-shadow:
        0 4px 16px rgba(0,0,0,0.35);
}

/* EYEBROW */

.world-record-content .section-eyebrow{
    margin-bottom: 14px;

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

    backdrop-filter: blur(8px);

    padding: 8px 14px;

    border-radius: 999px;

    font-size: 0.78rem;

    letter-spacing: 1px;
}

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

@media (max-width: 991px){

    .world-record-content{
        left: 24px;
        bottom: 24px;

        max-width: 420px;
    }

    .world-record-title{
        font-size: 2rem;
    }

    .world-record-text{
        font-size: 0.92rem;
        line-height: 1.65;
    }

}

@media (max-width: 576px){

    .world-record-content{
        left: 18px;
        right: 18px;
        bottom: 20px;

        max-width: 100%;
    }

    .world-record-title{
        font-size: 1.45rem;

        margin-bottom: 8px;
    }

    .world-record-text{
        font-size: 0.85rem;
        line-height: 1.6;

        max-width: 100%;
    }

    .world-record-content .section-eyebrow{
        padding: 6px 12px;

        font-size: 0.7rem;

        margin-bottom: 10px;
    }

}

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

@media (max-width: 991px){

    .world-record-video-wrap,
    .world-record-content{
        min-height: 72vh;
    }

    .world-record-title{
        font-size: clamp(2rem, 7vw, 3.8rem);
    }

    .world-record-text{
        font-size: 1rem;
        line-height: 1.8;

        max-width: 640px;
    }

}

@media (max-width: 576px){

    .world-record-video-wrap,
    .world-record-content{
        min-height: 58vh;
    }

    .world-record-content{
        padding:
            100px 18px 60px;
    }

    .world-record-title{
        font-size: 2rem;

        margin-bottom: 16px;
    }

    .world-record-text{
        font-size: 0.92rem;
        line-height: 1.75;
    }

}
/* =========================================================
   VIDEO CONTROLS
========================================================= */

.world-record-controls{
    position: absolute;

    right: 30px;
    bottom: 30px;

    z-index: 10;

    display: flex;
    align-items: center;
    gap: 14px;
}

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

.video-control-btn{
    width: 60px;
    height: 60px;

    border: none;
    outline: none;

    border-radius: 50%;

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

    backdrop-filter: blur(12px);

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

    color: #fff;

    font-size: 1.4rem;

    cursor: pointer;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.video-control-btn:hover{
    transform: scale(1.08);

    background: var(--gold);

    color: #0f172a;
}

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

@media (max-width: 768px){

    .world-record-controls{
        right: 18px;
        bottom: 18px;

        gap: 10px;
    }

    .video-control-btn{
        width: 48px;
        height: 48px;

        font-size: 1.1rem;
    }

}
/* =========================================
   BROCHURE BUTTON
========================================= */

.brochure-preview-btn{
    position: relative;

    padding: 0;
    border: none;
    background: transparent;

    border-radius: 24px;

    overflow: hidden;

    cursor: pointer;
}

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

.brochure-preview-btn img{
    width: 100%;
    max-width: 340px;

    display: block;

    border-radius: 24px;

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

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

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.brochure-preview-btn:hover img{

    transform:
        translateY(-6px)
        scale(1.02);

    box-shadow:
        0 28px 70px rgba(0,0,0,0.45);
}

/* =========================================
   OVERLAY
========================================= */

.brochure-preview-overlay{

    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    background:
        rgba(8,15,30,0.58);

    color: #fff;

    font-weight: 600;
    font-size: 1rem;

    opacity: 0;

    transition:
        opacity 0.35s ease;
}

.brochure-preview-btn:hover
.brochure-preview-overlay{

    opacity: 1;
}

.brochure-preview-overlay i{

    font-size: 1.2rem;

    color: var(--gold);
}

/* =========================================
   MODAL
========================================= */

.brochure-modal .modal-content{

    background: transparent;
    border: none;

    position: relative;

    box-shadow: none;
}

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

.brochure-modal-body{

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

.brochure-modal-body img{

    width: 100%;
    max-width: 850px;

    border-radius: 24px;

    box-shadow:
        0 30px 80px rgba(0,0,0,0.55);
}

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

.brochure-modal-close{

    position: absolute;

    top: -10px;
    right: -10px;

    width: 48px;
    height: 48px;

    border: none;

    border-radius: 50%;

    background: #fff;

    color: #111;

    z-index: 20;

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

    font-size: 1.1rem;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.brochure-modal-close:hover{

    background: var(--gold);

    transform: rotate(90deg);
}

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

@media (max-width:576px){

    .admission-brochure-preview img,
    .brochure-preview-btn img{

        max-width: 240px;

        border-radius: 18px;
    }

    .brochure-modal-body img{

        border-radius: 18px;
    }

    .brochure-modal-close{

        width: 40px;
        height: 40px;

        top: 0;
        right: 0;
    }

}
/* =========================================================
   COMPACT MODERN PAGE HEADER
========================================================= */

.modern-page-header{

    position: relative;

    min-height: 340px;

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    padding: 0 0 22px;
}

/* BACKGROUND */

.modern-page-header__bg{

    position: absolute;
    inset: 0;

    z-index: 1;
}

.modern-page-header__bg img{

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;
}

/* CONTAINER */

.modern-page-header .container{

    position: relative;
    z-index: 5;
}

/* FLOATING CONTENT CARD */

.modern-page-header__content{

    width: fit-content;

    max-width: 420px;

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

    backdrop-filter: blur(10px);

    padding: 18px 22px;

    border-radius: 20px;

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

    margin-left: 10px;
}

/* EYEBROW */

.modern-page-header__eyebrow{

    display: inline-flex;
    align-items: center;

    padding: 5px 12px;

    border-radius: 999px;

    background: rgba(183,143,60,0.12);

    color: var(--gold);

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.8px;

    text-transform: uppercase;

    margin-bottom: 10px;
}

/* TITLE */

.modern-page-header__title{

    font-size: clamp(1.8rem, 3vw, 3rem);

    line-height: 1.05;

    font-weight: 800;

    color: var(--primary-dark);

    margin-bottom: 14px;
}
.modern-page-header__desc{

    font-size: clamp(1.1rem, 2vw, 1.25rem);

    line-height: 0.85;

    font-weight: 400;

    color: var(--primary-dark);

    margin-bottom: 8px;
}

/* BREADCRUMB */

.modern-breadcrumb{

    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin: 0;
    padding: 8px 14px;

    list-style: none;

    background: rgba(8,27,53,0.92);

    border-radius: 999px;
}

.modern-breadcrumb li{

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

    font-size: 0.82rem;
}

.modern-breadcrumb li:not(:last-child)::after{

    content: "/";

    margin-left: 8px;

    color: rgba(255,255,255,0.3);
}

.modern-breadcrumb a{

    color: #fff;

    text-decoration: none;

    transition: 0.3s ease;
}

.modern-breadcrumb a:hover{

    color: var(--gold);
}

.modern-breadcrumb .active{

    color: var(--gold);
}

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

@media (max-width: 768px){

    .modern-page-header{

        min-height: 230px;

        padding-bottom: 14px;
    }

    .modern-page-header__content{

        max-width: 280px;

        padding: 12px 14px;

        border-radius: 16px;

        margin-left: 0;
    }

    .modern-page-header__eyebrow{

        font-size: 0.62rem;

        padding: 4px 10px;

        margin-bottom: 8px;
    }

    .modern-page-header__title{

        font-size: 1.35rem;

        margin-bottom: 10px;
    }

    .modern-breadcrumb{

        padding: 6px 10px;

        gap: 6px;
    }

    .modern-breadcrumb li{

        font-size: 0.72rem;
    }

}