.topbar-link {
    color: rgba(255,255,255,0.92) !important;
    text-decoration: none !important;
}
.topbar-link:hover { color: #fff !important; }

.btn-sm-square {
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
}

/* ================================================================
   FIX — HEADER WRAPPER: Remove bottom gap / corner gap
================================================================ */
.sticky-header-shell,
.header-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-radius: 0 !important;
    border-bottom: none !important;
}
.navbar {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.navbar-collapse,
.navbar-collapse.show {
    margin-bottom: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* ================================================================
   FIX — P TAG: Respect parent alignment, don't force left globally
================================================================ */
p,
.content p {
    text-align: inherit !important;
    overflow-wrap: break-word !important;
}
.about p,
.history-description,
.about-description,
.doc-card p,
.contact-form-card p,
article p,
.entry-body p {
    text-align: left !important;
}

/* ================================================================
   FIX — FAQ / Hero overlay p tags stay centered
================================================================ */
.faq-hero p,
[class*="hero-overlay"] p,
.page-header p,
.bg-breadcrumb p {
    text-align: center !important;
}
.faq-hero .text-start p,
[class*="hero-overlay"] .text-start p {
    text-align: left !important;
}


/* ================================================================
   ① LAPTOP LG — 1200px to 1399px
   ================================================================ */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {

    html, body { overflow-x: hidden !important; }

    /* ── Topbar ── */
    .container-fluid.bg-primary {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
    .container-fluid.bg-primary .row {
        height: 45px !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .container-fluid.bg-primary .col-lg-6 {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .container-fluid.bg-primary .col-lg-6:first-child .d-flex {
        height: 100% !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 24px !important;
    }
    .container-fluid.bg-primary .col-lg-6:last-child .d-flex {
        height: 100% !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 14px !important;
    }
    .container-fluid.bg-primary .topbar-link { font-size: 0.84rem !important; }
    .container-fluid.bg-primary .d-flex.gap-1.ms-2 { margin-left: 8px !important; gap: 5px !important; }
    .btn-sm-square { width: 26px !important; height: 26px !important; }
    .btn-sm-square i { font-size: 11px !important; }

    /* ── Carousel ── */
    .carousel-header { overflow: hidden !important; width: 100% !important; display: block !important; }
    .carousel-header .carousel,
    .carousel-header .carousel-inner { display: block !important; overflow: hidden !important; width: 100% !important; }

    .carousel-header .carousel-inner {
        position: relative !important;
        height: 72vh !important; min-height: 360px !important; max-height: 720px !important;
    }

    .carousel-header .carousel-item {
        position: absolute !important; top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.6s ease !important;
        display: block !important;
    }

    .carousel-header .carousel-item.active {
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
    }

    .carousel-header .carousel-item.carousel-item-next,
    .carousel-header .carousel-item.carousel-item-prev,
    .carousel-header .carousel-item.carousel-item-start,
    .carousel-header .carousel-item.carousel-item-end {
        opacity: 1 !important;
        visibility: visible !important;
        position: absolute !important;
    }

    .carousel-header .carousel-item img,
    .carousel-header .carousel-item video {
        position: absolute !important; top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
        object-fit: cover !important; display: block !important; z-index: 1 !important;
    }

    /* ── Navbar ── */
    .navbar { padding: 12px 20px !important; }
    .navbar .container, .navbar .container-fluid {
        display: flex !important; flex-wrap: nowrap !important; align-items: center !important;
        padding-left: 20px !important; padding-right: 20px !important; gap: 12px !important;
    }
    .navbar-brand {
        display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
        align-items: center !important; flex: 1 1 auto !important; min-width: 0 !important;
        overflow: visible !important; gap: 12px !important; padding: 0 !important;
    }
    .school-logo-img {
        width: 88px !important; height: 88px !important; min-width: 88px !important;
        flex-shrink: 0 !important; border-radius: 50% !important;
        display: flex !important; visibility: visible !important; opacity: 1 !important;
    }
    .school-logo-img img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
    .brand-text { padding: 0 16px !important; overflow: visible !important; flex: 1 1 auto !important; min-width: 0 !important; }
    .brand-text h3 {
        font-size: 22px !important; font-weight: 800 !important; color: #fba831 !important;
        white-space: normal !important; overflow: visible !important; letter-spacing: 1.5px !important;
        line-height: 1.2 !important; display: block !important; visibility: visible !important;
        word-break: break-word !important; margin: 0 0 2px 0 !important;
    }
    .brand-text span { font-size: 15px !important; display: block !important; overflow: visible !important; color: #F57C00 !important; }
    .brand-text small { font-size: 11px !important; display: block !important; color: #555 !important; }
    .nav-link { font-size: 12.5px !important; padding: 10px 12px !important; }

    /* ── Hero ── */
    [class*="hero-overlay"] h1, [class*="hero-overlay"] h2,
    .page-header h1, .page-header h2 {
        font-size: clamp(1.8rem, 3vw, 2.8rem) !important;
        white-space: normal !important; line-height: 1.2 !important;
    }

    /* ── Footer ── */
    .footer-brand { padding: 28px 60px !important; }
    .footer-columns { grid-template-columns: 1.4fr 1fr 1fr !important; padding: 36px 60px !important; }
    .footer-bottom { padding: 14px 60px !important; }
    .footer-logo-bar { padding: 28px 60px !important; }
    .footer-copyright { padding: 12px 60px !important; }
}


/* ================================================================
   ② LAPTOP SM — 992px to 1199px
   ================================================================ */
@media only screen and (min-width: 992px) and (max-width: 1199px) {

    html, body { overflow-x: hidden !important; }

    /* ── Topbar ── */
    .container-fluid.bg-primary {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
    .container-fluid.bg-primary .row {
        height: 45px !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .container-fluid.bg-primary .col-lg-6 {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .container-fluid.bg-primary .col-lg-6:first-child .d-flex {
        height: 100% !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 24px !important;
    }
    .container-fluid.bg-primary .col-lg-6:last-child .d-flex {
        height: 100% !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 14px !important;
    }
    .container-fluid.bg-primary .topbar-link { font-size: 0.82rem !important; }
    .container-fluid.bg-primary .d-flex.gap-1.ms-2 { margin-left: 8px !important; gap: 5px !important; }
    .btn-sm-square { width: 26px !important; height: 26px !important; }
    .btn-sm-square i { font-size: 11px !important; }

    /* ── Carousel ── */
    .carousel-header { overflow: hidden !important; width: 100% !important; display: block !important; }
    .carousel-header .carousel,
    .carousel-header .carousel-inner { display: block !important; overflow: hidden !important; width: 100% !important; }

    .carousel-header .carousel-inner {
        position: relative !important;
        height: 68vh !important; min-height: 340px !important; max-height: 680px !important;
    }

    .carousel-header .carousel-item {
        position: absolute !important; top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.6s ease !important;
        display: block !important;
    }

    .carousel-header .carousel-item.active {
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
    }

    .carousel-header .carousel-item.carousel-item-next,
    .carousel-header .carousel-item.carousel-item-prev,
    .carousel-header .carousel-item.carousel-item-start,
    .carousel-header .carousel-item.carousel-item-end {
        opacity: 1 !important;
        visibility: visible !important;
        position: absolute !important;
    }

    .carousel-header .carousel-item img,
    .carousel-header .carousel-item video {
        position: absolute !important; top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
        object-fit: cover !important; display: block !important; z-index: 1 !important;
    }

    /* ── Navbar ── */
    .navbar { padding: 10px 16px !important; }
    .navbar .container, .navbar .container-fluid {
        display: flex !important; flex-wrap: nowrap !important; align-items: center !important;
        padding-left: 12px !important; padding-right: 12px !important; gap: 10px !important;
    }
    .navbar-brand {
        display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
        align-items: center !important; flex: 1 1 auto !important; min-width: 0 !important;
        overflow: visible !important; gap: 10px !important; padding: 0 !important;
    }
    .school-logo-img {
        width: 78px !important; height: 78px !important; min-width: 78px !important;
        flex-shrink: 0 !important; border-radius: 50% !important; padding: 4px !important;
        display: flex !important; visibility: visible !important; opacity: 1 !important;
    }
    .school-logo-img img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
    .brand-text { padding: 0 14px !important; overflow: visible !important; flex: 1 1 auto !important; min-width: 0 !important; }
    .brand-text h3 {
        font-size: 18px !important; font-weight: 800 !important; color: #fba831 !important;
        white-space: normal !important; overflow: visible !important; letter-spacing: 1px !important;
        line-height: 1.2 !important; display: block !important; visibility: visible !important;
        word-break: break-word !important; margin: 0 0 2px 0 !important;
    }
    .brand-text span { font-size: 13px !important; display: block !important; overflow: visible !important; color: #F57C00 !important; }
    .brand-text small { font-size: 10px !important; display: block !important; color: #555 !important; }
    .nav-link { font-size: 11px !important; padding: 8px 8px !important; }

    /* ── Hero ── */
    [class*="hero-overlay"] h1, [class*="hero-overlay"] h2,
    .page-header h1, .page-header h2 {
        font-size: clamp(1.6rem, 3vw, 2.5rem) !important;
        white-space: normal !important; line-height: 1.2 !important;
    }

    /* ── Grid ── */
    .service .col-lg-3 { flex: 0 0 50% !important; max-width: 50% !important; }
    .activity .col-lg-3 { flex: 0 0 50% !important; max-width: 50% !important; }
    .infrastructure-gallery-section .col-lg-4 { flex: 0 0 50% !important; max-width: 50% !important; }

    /* ── Staff 4-col ── */
    .staff-col { flex: 0 0 calc(25% - 18px) !important; max-width: calc(25% - 18px) !important; }
    .staff-card { height: 360px !important; }

    /* ── Footer ── */
    .footer-brand { padding: 28px 40px !important; flex-wrap: wrap !important; gap: 14px !important; }
    .footer-columns { grid-template-columns: 1.3fr 1fr 1fr !important; padding: 32px 40px !important; }
    .footer-bottom { padding: 14px 40px !important; }
    .footer-logo-bar { padding: 28px 40px !important; }
    .footer-copyright { padding: 12px 40px !important; }
    .school-logo-wrap { width: 90px !important; height: 90px !important; }
    .brand-name h2 { font-size: 28px !important; }
    .pv-body { height: 580px !important; }
    .booking, .subscribe, .bg-breadcrumb { background-attachment: scroll !important; }
}


/* ================================================================
   ③ TABLET — 768px to 991px
   ================================================================ */
@media only screen and (min-width: 768px) and (max-width: 991px) {

    html, body { overflow-x: hidden !important; max-width: 100vw !important; }

    .sticky-header-shell {
        position: sticky !important; top: 0 !important; z-index: 1051 !important;
        background: #fff !important; box-shadow: 0 2px 20px rgba(0,0,0,0.1) !important;
        width: 100% !important; margin-bottom: 0 !important; border-radius: 0 !important;
    }
    .header-wrapper {
        position: sticky !important; top: 0 !important; z-index: 1050 !important;
        background: white !important; width: 100% !important; margin: 0 !important;
        padding: 0 !important; border-radius: 0 !important;
    }

    /* ── Topbar ── */
    .container-fluid.bg-primary {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .container-fluid.bg-primary .row {
        height: auto !important;
        flex-direction: column !important;
        padding: 9px 0 11px !important;
        margin: 0 !important;
    }
    .container-fluid.bg-primary .col-lg-6 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .container-fluid.bg-primary .col-lg-6:first-child .d-flex {
        height: auto !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 24px !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid rgba(255,255,255,0.2) !important;
    }
    .container-fluid.bg-primary .col-lg-6:last-child .d-flex {
        height: auto !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px 14px !important;
        padding-top: 8px !important;
        text-align: center !important;
    }
    .container-fluid.bg-primary .topbar-link { font-size: 0.80rem !important; }
    .container-fluid.bg-primary .d-flex.gap-1.ms-2 { margin-left: 6px !important; gap: 5px !important; }
    .btn-sm-square { width: 25px !important; height: 25px !important; }
    .btn-sm-square i { font-size: 10px !important; }

    /* ── Navbar ── */
    .topbar {
        display: flex !important; visibility: visible !important; opacity: 1 !important;
        background-color: #13357B !important; padding: 6px 14px !important;
        font-size: 11px !important; flex-wrap: wrap !important; width: 100% !important;
    }
    .topbar *, .topbar-link { visibility: visible !important; opacity: 1 !important; }

    .navbar {
        padding: 8px 14px !important; background: #fff !important;
        box-shadow: 0 2px 20px rgba(0,0,0,0.1) !important; width: 100% !important;
        margin-bottom: 0 !important; border-radius: 0 !important;
    }
    .navbar .container, .navbar .container-fluid {
        display: flex !important; flex-wrap: nowrap !important; align-items: center !important;
        padding: 0 !important; max-width: 100% !important; gap: 6px !important;
    }
    .navbar-brand {
        display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
        align-items: center !important; flex: 1 1 auto !important; min-width: 0 !important;
        overflow: visible !important; gap: 8px !important; padding: 0 !important;
    }

    .school-logo-img {
        width: 58px !important; height: 58px !important;
        min-width: 58px !important; max-width: 58px !important;
        flex-shrink: 0 !important; border-radius: 50% !important; padding: 3px !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        visibility: visible !important; opacity: 1 !important;
        background: #fff !important; border: 2px solid #13357B !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
    }
    .school-logo-img img {
        width: 100% !important; height: 100% !important; object-fit: contain !important;
        border-radius: 50% !important; display: block !important;
        visibility: visible !important; opacity: 1 !important;
    }
    .brand-text {
        flex: 1 1 auto !important; min-width: 0 !important; overflow: visible !important;
        display: flex !important; flex-direction: column !important;
        visibility: visible !important; opacity: 1 !important;
    }
    .brand-text h3 {
        font-size: 13px !important; font-weight: 800 !important; color: #fba831 !important;
        margin: 0 0 2px 0 !important; line-height: 1.2 !important;
        white-space: normal !important; overflow: visible !important; text-overflow: unset !important;
        word-break: break-word !important; display: block !important;
        visibility: visible !important; letter-spacing: 0.3px !important;
    }
    .brand-text span {
        font-size: 10px !important; color: #F57C00 !important; font-weight: 600 !important;
        display: block !important; overflow: visible !important; visibility: visible !important;
    }
    .brand-text small {
        font-size: 8.5px !important; color: #555 !important;
        display: block !important; visibility: visible !important;
    }
    .navbar-toggler {
        padding: 5px 10px !important; margin-left: 6px !important; flex-shrink: 0 !important;
        border: 2px solid #13357B !important; border-radius: 6px !important;
    }
    .navbar-toggler:focus { box-shadow: none !important; outline: none !important; }
    .navbar-toggler-icon { width: 22px !important; height: 22px !important; }

    .navbar-icons, .nav-icons, .header-icons, .right-logos,
    .ministry-logos, .top-icons, .navbar-right-icons {
        display: flex !important; flex-direction: row !important; align-items: center !important;
        gap: 5px !important; flex-shrink: 0 !important; visibility: visible !important; opacity: 1 !important;
    }
    .ministry-seal, .cbse-logo, .board-logo, .right-icon-wrap, .nav-icon-wrap {
        width: 52px !important; height: 52px !important; min-width: 52px !important;
        border-radius: 50% !important; display: flex !important;
        align-items: center !important; justify-content: center !important;
        background: #fff !important; border: 2px solid #13357B !important;
    }
    .ministry-seal img, .cbse-logo img, .board-logo img, .right-icon-wrap img, .nav-icon-wrap img {
        width: 44px !important; height: 44px !important; object-fit: contain !important;
    }
    .icon-name, .logo-name, .seal-name, .icon-label, .logo-label { display: none !important; }

    /* ── Collapsed nav menu ── */
    .navbar-collapse, .navbar-collapse.show, .navbar-collapse.collapsing {
        background-color: #13357B !important; border-top: 3px solid #F57C00 !important;
        border-radius: 0 0 12px 12px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.40) !important;
        overflow: hidden !important; padding: 0 !important; margin-top: 6px !important; width: 100% !important;
    }
    .navbar-collapse .navbar-nav { gap: 0 !important; margin: 0 !important; }
    .navbar-collapse .nav-item {
        border-bottom: 1px solid rgba(255,255,255,0.10) !important;
        background-color: #13357B !important; margin: 0 !important; padding: 0 !important;
    }
    .navbar-collapse .nav-item:last-child { border-bottom: none !important; }
    .navbar-collapse .nav-link,
    .navbar-collapse .nav-item > .nav-link,
    .navbar-collapse .nav-item > a {
        color: #fff !important; background-color: #13357B !important;
        font-size: 13px !important; font-weight: 600 !important; padding: 14px 20px !important;
        text-transform: uppercase !important; display: flex !important;
        align-items: center !important; justify-content: space-between !important;
        text-decoration: none !important; width: 100% !important; box-sizing: border-box !important;
    }
    .navbar-collapse .nav-link:hover, .navbar-collapse .nav-link.active {
        color: #F57C00 !important; background-color: rgba(255,255,255,0.08) !important;
    }
    .navbar-collapse .dropdown-toggle::after {
        border: none !important; content: "\f107" !important;
        font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important;
        color: #F57C00 !important; margin-left: auto !important;
    }
    .navbar-collapse .dropdown-menu {
        background-color: #0D2560 !important; border: none !important; border-radius: 0 !important;
        padding: 0 !important; position: static !important; float: none !important;
        width: 100% !important; box-shadow: none !important; margin: 0 !important;
    }
    .navbar-collapse .dropdown-item {
        color: rgba(255,255,255,0.88) !important; font-size: 12.5px !important;
        padding: 12px 36px !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important;
        display: block !important; text-decoration: none !important;
    }
    .navbar-collapse .dropdown-item:hover {
        background-color: rgba(245,124,0,0.18) !important; color: #F57C00 !important;
    }

    /* ── Hero ── */
    [class*="hero-overlay"] h1, [class*="hero-overlay"] h2, [class*="hero-overlay"] h3,
    .page-header h1, .page-header h2 {
        font-size: clamp(1.4rem, 4vw, 2.2rem) !important;
        white-space: normal !important; line-height: 1.2 !important;
        word-break: break-word !important; display: block !important; visibility: visible !important;
    }
    [class*="hero-overlay"] p { font-size: clamp(0.85rem, 2vw, 1rem) !important; line-height: 1.5 !important; }

    /* ── Carousel ── */
    .carousel-header { overflow: hidden !important; width: 100% !important; display: block !important; }
    .carousel-header .carousel,
    .carousel-header .carousel-inner { display: block !important; overflow: hidden !important; width: 100% !important; }

    .carousel-header .carousel-inner {
        position: relative !important;
        height: 52vw !important; min-height: 260px !important; max-height: 500px !important;
    }

    .carousel-header .carousel-item {
        position: absolute !important; top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.6s ease !important;
        display: block !important;
    }

    .carousel-header .carousel-item.active {
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
    }

    .carousel-header .carousel-item.carousel-item-next,
    .carousel-header .carousel-item.carousel-item-prev,
    .carousel-header .carousel-item.carousel-item-start,
    .carousel-header .carousel-item.carousel-item-end {
        opacity: 1 !important;
        visibility: visible !important;
        position: absolute !important;
    }

    .carousel-header .carousel-item img,
    .carousel-header .carousel-item video {
        position: absolute !important; top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
        object-fit: cover !important; display: block !important; z-index: 1 !important;
    }

    section, .section { padding-top: 50px !important; padding-bottom: 50px !important; }
    .about .col-lg-5, .about .col-lg-7 { flex: 0 0 100% !important; max-width: 100% !important; }
    .service .col-lg-3, .service .col-md-6 { flex: 0 0 50% !important; max-width: 50% !important; }
    .activity .col-lg-3, .activity .col-md-6 { flex: 0 0 50% !important; max-width: 50% !important; }
    .infrastructure-gallery-section .col-lg-4,
    .infrastructure-gallery-section .col-md-6 { flex: 0 0 50% !important; max-width: 50% !important; }
    .infrastructure-card { height: 250px !important; }

    /* ── Staff 3-col ── */
    .staff-row { gap: 18px !important; }
    .staff-col { flex: 0 0 calc(33.33% - 12px) !important; max-width: calc(33.33% - 12px) !important; }
    .staff-card { height: 340px !important; }
    .staff-section .row > [class*="col"], .team-section .row > [class*="col"],
    .our-team .row > [class*="col"], .meet-team .row > [class*="col"],
    .professionals .row > [class*="col"], [class*="staff"] .row > [class*="col"],
    [class*="team"] .row > [class*="col"] {
        flex: 0 0 33.33% !important; max-width: 33.33% !important;
        padding: 0 8px !important; margin-bottom: 16px !important;
    }

    .members-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; gap: 16px !important; }
    .history-entry { grid-template-columns: 1fr !important; gap: 30px !important; }
    .entry-reverse { direction: ltr !important; }
    .he-title { font-size: 22px !important; }
    .he-img-corner { display: none !important; }
    .pv-body { height: 480px !important; }
    .event-photo-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
    .contact-form-card { padding: 28px 22px !important; }
    .booking, .subscribe, .bg-breadcrumb { background-attachment: scroll !important; }
    .bg-breadcrumb { padding: 110px 0 40px !important; }

    .admission-hero, .academic-hero, .cbse-hero, .committee-hero, .faq-hero,
    .history-hero, .trustee-hero, .vision-hero, .disclosure-hero, .recr-hero,
    .result-hero, .contact-hero, .staff-hero { min-height: 240px !important; }

    /* ── Footer ── */
    .footer-brand { padding: 24px 28px !important; flex-wrap: wrap !important; gap: 14px !important; }
    .footer-columns { grid-template-columns: 1fr 1fr !important; padding: 28px !important; gap: 28px !important; }
    .footer-bottom { padding: 14px 28px !important; font-size: 12.5px !important; }
    .footer-logo-bar { padding: 24px 28px !important; flex-wrap: wrap !important; gap: 14px !important; }
    .footer-copyright { padding: 12px 28px !important; }
    .school-logo-wrap { width: 90px !important; height: 90px !important; }
    .brand-name h2 { font-size: 26px !important; }
    .social-row, .social-icons { flex-wrap: wrap !important; gap: 8px !important; }
    .back-to-top { right: 20px !important; bottom: 20px !important; }
}


/* ================================================================
   ④ MOBILE L — 481px to 767px
   ================================================================ */
@media only screen and (min-width: 481px) and (max-width: 767px) {

    html, body {
        overflow-x: hidden !important; max-width: 100vw !important; margin: 0 !important; padding: 0 !important;
    }

    .sticky-header-shell {
        position: sticky !important; top: 0 !important; z-index: 1051 !important;
        background: #fff !important; box-shadow: 0 2px 16px rgba(0,0,0,0.15) !important;
        width: 100% !important; margin-bottom: 0 !important; border-radius: 0 !important;
    }
    .header-wrapper {
        position: sticky !important; top: 0 !important; z-index: 1050 !important;
        background: white !important; width: 100% !important; margin: 0 !important;
        padding: 0 !important; border-radius: 0 !important;
    }

    /* ── Topbar ── */
    .container-fluid.bg-primary {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .container-fluid.bg-primary .row {
        height: auto !important;
        flex-direction: column !important;
        padding: 9px 0 11px !important;
        margin: 0 !important;
    }
    .container-fluid.bg-primary .col-lg-6 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .container-fluid.bg-primary .col-lg-6:first-child .d-flex {
        height: auto !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px 16px !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid rgba(255,255,255,0.2) !important;
    }
    .container-fluid.bg-primary .col-lg-6:last-child .d-flex {
        height: auto !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px 10px !important;
        padding-top: 8px !important;
        text-align: center !important;
    }
    .container-fluid.bg-primary .topbar-link { font-size: 0.77rem !important; }
    .container-fluid.bg-primary .d-flex.gap-1.ms-2 { margin-left: 2px !important; gap: 4px !important; }
    .btn-sm-square { width: 23px !important; height: 23px !important; }
    .btn-sm-square i { font-size: 10px !important; }

    /* ── Navbar: single row, no wrapping ── */
    .navbar {
        padding: 4px 8px !important; background: #fff !important;
        width: 100% !important; margin: 0 !important; box-sizing: border-box !important;
        border-radius: 0 !important;
    }
    .navbar .container, .navbar .container-fluid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 !important; margin: 0 !important;
        gap: 0 !important; width: 100% !important; max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .navbar-brand {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 46px) !important;
        overflow: hidden !important;
        gap: 5px !important;
        padding: 0 !important; margin: 0 !important;
    }
    .school-logo-img {
        width: clamp(34px, 9vw, 48px) !important;
        height: clamp(34px, 9vw, 48px) !important;
        min-width: clamp(34px, 9vw, 48px) !important;
        max-width: clamp(34px, 9vw, 48px) !important;
        flex-shrink: 0 !important;
        border-radius: 50% !important; padding: 2px !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        visibility: visible !important; opacity: 1 !important;
        background: #fff !important; border: 2px solid #13357B !important;
        box-shadow: 0 1px 6px rgba(0,0,0,0.12) !important;
        box-sizing: border-box !important;
    }
    .school-logo-img img {
        width: 100% !important; height: 100% !important;
        object-fit: contain !important; border-radius: 50% !important;
        display: block !important; visibility: visible !important; opacity: 1 !important;
    }
    .brand-text {
        flex: 1 1 auto !important; min-width: 0 !important;
        overflow: hidden !important;
        display: flex !important; flex-direction: column !important;
        justify-content: center !important;
        visibility: visible !important; opacity: 1 !important;
        padding: 0 2px !important;
    }
    .brand-text h3 {
        font-size: clamp(8px, 2.2vw, 12px) !important;
        font-weight: 800 !important; color: #fba831 !important;
        margin: 0 0 1px 0 !important; line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important; visibility: visible !important; letter-spacing: 0 !important;
    }
    .brand-text span {
        font-size: clamp(6.5px, 1.8vw, 9px) !important;
        color: #F57C00 !important; font-weight: 600 !important;
        display: block !important; white-space: nowrap !important;
        overflow: hidden !important; text-overflow: ellipsis !important;
        visibility: visible !important;
    }
    .brand-text small {
        font-size: clamp(6px, 1.6vw, 8px) !important; color: #555 !important;
        display: block !important; white-space: nowrap !important;
        overflow: hidden !important; text-overflow: ellipsis !important;
        visibility: visible !important;
    }
    .navbar-toggler {
        display: flex !important; align-items: center !important; justify-content: center !important;
        width: 36px !important; height: 36px !important; padding: 0 !important;
        flex-shrink: 0 !important; flex-grow: 0 !important;
        border: 2px solid #13357B !important; border-radius: 6px !important;
        background: transparent !important; margin-left: 4px !important;
        box-sizing: border-box !important;
    }
    .navbar-toggler:focus { box-shadow: none !important; outline: none !important; }
    .navbar-toggler-icon { width: 18px !important; height: 18px !important; display: block !important; }

    .navbar-icons, .nav-icons, .header-icons, .right-logos,
    .ministry-logos, .top-icons, .navbar-right-icons {
        display: flex !important; flex-direction: row !important; align-items: center !important;
        gap: 4px !important; flex-shrink: 0 !important;
        visibility: visible !important; opacity: 1 !important;
    }
    .ministry-seal, .cbse-logo, .board-logo, .right-icon-wrap, .nav-icon-wrap {
        width: clamp(32px, 8.5vw, 44px) !important;
        height: clamp(32px, 8.5vw, 44px) !important;
        min-width: clamp(32px, 8.5vw, 44px) !important;
        border-radius: 50% !important; display: flex !important;
        align-items: center !important; justify-content: center !important;
        background: #fff !important; border: 2px solid #13357B !important;
        flex-shrink: 0 !important;
    }
    .ministry-seal img, .cbse-logo img, .board-logo img,
    .right-icon-wrap img, .nav-icon-wrap img {
        width: 85% !important; height: 85% !important; object-fit: contain !important;
    }
    .icon-name, .logo-name, .seal-name, .icon-label, .logo-label { display: none !important; }

    /* ── Collapsed nav menu ── */
    .navbar-collapse, .navbar-collapse.show, .navbar-collapse.collapsing,
    #navbarNav, #navbarSupportedContent, #mainNavbar, #navbarCollapse {
        background-color: #13357B !important; border-top: 3px solid #F57C00 !important;
        border-radius: 0 0 12px 12px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.45) !important;
        overflow: hidden !important; padding: 0 !important; margin-top: 6px !important; width: 100% !important;
    }
    .navbar-collapse .navbar-nav { gap: 0 !important; margin: 0 !important; }
    .navbar-collapse .nav-item {
        background-color: #13357B !important;
        border-bottom: 1px solid rgba(255,255,255,0.10) !important;
        margin: 0 !important; padding: 0 !important;
    }
    .navbar-collapse .nav-item:last-child { border-bottom: none !important; }
    .navbar-collapse .nav-link,
    .navbar-collapse .nav-item > .nav-link,
    .navbar-collapse .nav-item > a {
        color: #fff !important; background-color: #13357B !important;
        font-size: 13px !important; font-weight: 600 !important; padding: 14px 20px !important;
        text-transform: uppercase !important; display: flex !important;
        align-items: center !important; justify-content: space-between !important;
        text-decoration: none !important; width: 100% !important; box-sizing: border-box !important;
    }
    .navbar-collapse .nav-link:hover, .navbar-collapse .nav-link.active {
        background-color: rgba(255,255,255,0.10) !important; color: #F57C00 !important;
    }
    .navbar-collapse .dropdown-toggle::after {
        border: none !important; content: "\f107" !important;
        font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important;
        color: #F57C00 !important; margin-left: auto !important;
    }
    .navbar-collapse .dropdown-menu {
        background-color: #0D2560 !important; border: none !important; border-radius: 0 !important;
        padding: 0 !important; margin: 0 !important; position: static !important;
        float: none !important; width: 100% !important; box-shadow: none !important;
    }
    .navbar-collapse .dropdown-item {
        color: rgba(255,255,255,0.88) !important; font-size: 12.5px !important;
        padding: 12px 36px !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important;
        display: block !important; text-decoration: none !important;
    }
    .navbar-collapse .dropdown-item:hover {
        background-color: rgba(245,124,0,0.18) !important; color: #F57C00 !important;
    }

    /* ── Hero headings ── */
    [class*="hero-overlay"] h1, [class*="hero-overlay"] h2, [class*="hero-overlay"] h3,
    .page-header h1, .page-header h2, .bg-breadcrumb h1, .bg-breadcrumb h2 {
        font-size: clamp(1.2rem, 5.5vw, 2rem) !important;
        white-space: normal !important; word-break: break-word !important;
        overflow: visible !important; line-height: 1.25 !important;
        display: block !important; visibility: visible !important; max-width: 100% !important;
    }
    [class*="hero-overlay"] .section-title, [class*="hero-overlay"] small,
    .bg-breadcrumb small, .page-header small {
        font-size: clamp(0.68rem, 2.8vw, 0.9rem) !important;
        display: block !important; visibility: visible !important; margin-bottom: 6px !important;
    }
    [class*="hero-overlay"] p, .bg-breadcrumb p, .page-header p {
        font-size: clamp(0.8rem, 3.2vw, 1rem) !important;
        display: block !important; visibility: visible !important; line-height: 1.5 !important;
    }

    /* ── Ticker ── */
    .ticker-bar { min-height: 38px !important; height: 38px !important; }
    .ticker-label { padding: 0 10px !important; font-size: 0.72rem !important; }
    a.ticker-item { font-size: 0.78rem !important; line-height: 38px !important; }
    .ticker-sep { line-height: 38px !important; }

    /* ── Carousel ── */
    .carousel-header { overflow: hidden !important; width: 100% !important; display: block !important; }
    .carousel-header .carousel,
    .carousel-header .carousel-inner { display: block !important; overflow: hidden !important; width: 100% !important; }

    .carousel-header .carousel-inner {
        position: relative !important;
        height: 56vw !important; min-height: 200px !important; max-height: 380px !important;
    }

    .carousel-header .carousel-item {
        position: absolute !important; top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.6s ease !important;
        display: block !important;
    }

    .carousel-header .carousel-item.active {
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
    }

    .carousel-header .carousel-item.carousel-item-next,
    .carousel-header .carousel-item.carousel-item-prev,
    .carousel-header .carousel-item.carousel-item-start,
    .carousel-header .carousel-item.carousel-item-end {
        opacity: 1 !important;
        visibility: visible !important;
        position: absolute !important;
    }

    .carousel-header .carousel-item img,
    .carousel-header .carousel-item video {
        position: absolute !important; top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
        object-fit: cover !important; display: block !important; z-index: 1 !important;
    }

    .carousel-header .carousel-control-prev { left: 8px !important; }
    .carousel-header .carousel-control-next { right: 8px !important; }

    /* ── Layout ── */
    .container, .container-fluid {
        padding-left: 8px !important; padding-right: 8px !important;
        max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important;
    }
    h1, h2, h3, h4, h5, h6, p, li, td, th { max-width: 100% !important; overflow-wrap: break-word !important; }
    img, video, iframe { max-width: 100% !important; }
    table { width: 100% !important; display: block !important; overflow-x: auto !important; }
    section, .section { padding-top: 36px !important; padding-bottom: 36px !important; }

    .booking, .subscribe, .bg-breadcrumb { background-attachment: scroll !important; }
    .bg-breadcrumb { padding: 90px 0 35px !important; }
    .page-header { padding: 60px 0 !important; }

    .about .col-lg-5, .about .col-lg-7 { flex: 0 0 100% !important; max-width: 100% !important; }
    .service .col-lg-3, .service .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; }
    .activity .col-lg-3, .activity .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; }
    .infrastructure-gallery-section .col-lg-4,
    .infrastructure-gallery-section .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; }
    .infrastructure-card { height: 220px !important; margin-bottom: 16px !important; }

    /* ── Staff 2-col ── */
    .staff-row { gap: 12px !important; }
    .staff-col { flex: 0 0 calc(50% - 6px) !important; max-width: calc(50% - 6px) !important; }
    .staff-card { height: 280px !important; }
    .staff-card .sc-overlay { padding: 14px 12px 12px !important; }
    .staff-card .sc-overlay h4 { font-size: 0.85rem !important; }
    .staff-section .row > [class*="col"], .team-section .row > [class*="col"],
    .our-team .row > [class*="col"], .meet-team .row > [class*="col"],
    .professionals .row > [class*="col"], [class*="staff"] .row > [class*="col"],
    [class*="team"] .row > [class*="col"] {
        flex: 0 0 50% !important; max-width: 50% !important;
        padding: 0 6px !important; margin-bottom: 12px !important; box-sizing: border-box !important;
    }

    .members-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)) !important; gap: 12px !important; }
    .pv-body { height: 360px !important; }
    .history-entry { grid-template-columns: 1fr !important; gap: 22px !important; }
    .entry-reverse { direction: ltr !important; }
    .event-photo-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .contact-form-card { padding: 24px 16px !important; }

    /* ── Footer ── */
    .footer-brand { flex-direction: column !important; align-items: center !important; padding: 20px 14px !important; text-align: center !important; gap: 14px !important; }
    .footer-columns { grid-template-columns: 1fr !important; padding: 20px !important; gap: 24px !important; }
    .footer-bottom { padding: 14px 14px !important; font-size: 12px !important; }
    .footer-logo-bar { flex-direction: column !important; align-items: center !important; padding: 20px 14px !important; text-align: center !important; }
    .footer-logo-bar .school-brand { flex-direction: column !important; align-items: center !important; }
    .footer-logo-bar .school-brand .brand-text h3 { font-size: 1.3rem !important; text-align: center !important; white-space: normal !important; }
    .footer-copyright { padding: 12px 14px !important; font-size: 12px !important; }
    .school-logo-wrap { width: 78px !important; height: 78px !important; }
    .brand-name h2 { font-size: 20px !important; text-align: center !important; }
    .social-row, .social-icons { justify-content: center !important; flex-wrap: wrap !important; }
    .back-to-top { width: 40px !important; height: 40px !important; right: 14px !important; bottom: 14px !important; }
}


/* ================================================================
   ⑤ MOBILE M — 361px to 480px
   ================================================================ */
@media only screen and (min-width: 361px) and (max-width: 480px) {

    html, body {
        overflow-x: hidden !important; max-width: 100vw !important; margin: 0 !important; padding: 0 !important;
    }

    .sticky-header-shell {
        position: sticky !important; top: 0 !important; z-index: 1051 !important;
        background: #fff !important; box-shadow: 0 2px 16px rgba(0,0,0,0.15) !important;
        width: 100% !important; margin-bottom: 0 !important; border-radius: 0 !important;
    }
    .header-wrapper {
        position: sticky !important; top: 0 !important; z-index: 1050 !important;
        background: white !important; width: 100% !important; margin: 0 !important;
        padding: 0 !important; border-radius: 0 !important;
    }

    /* ── Topbar ── */
    .container-fluid.bg-primary {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .container-fluid.bg-primary .row {
        height: auto !important;
        flex-direction: column !important;
        padding: 8px 0 10px !important;
        margin: 0 !important;
    }
    .container-fluid.bg-primary .col-lg-6 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .container-fluid.bg-primary .col-lg-6:first-child .d-flex {
        height: auto !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 18px !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid rgba(255,255,255,0.2) !important;
    }
    .container-fluid.bg-primary .col-lg-6:first-child .topbar-link {
        font-size: 0.72rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }
    .container-fluid.bg-primary .col-lg-6:last-child .d-flex {
        height: auto !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 5px 8px !important;
        padding-top: 8px !important;
        text-align: center !important;
    }
    .container-fluid.bg-primary .topbar-link { font-size: 0.72rem !important; }
    .container-fluid.bg-primary .d-flex.gap-1.ms-2 { margin-left: 0 !important; gap: 4px !important; }
    .btn-sm-square { width: 22px !important; height: 22px !important; }
    .btn-sm-square i { font-size: 9px !important; }

    /* ── Navbar ── */
    .navbar {
        padding: 4px 8px !important; background: #fff !important;
        width: 100% !important; margin: 0 !important; box-sizing: border-box !important;
        border-radius: 0 !important;
    }
    .navbar .container, .navbar .container-fluid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 !important; margin: 0 !important;
        gap: 0 !important; width: 100% !important; max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .navbar-brand {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 46px) !important;
        overflow: hidden !important;
        gap: 5px !important;
        padding: 0 !important; margin: 0 !important;
    }

    .school-logo-img {
        width: clamp(32px, 8.5vw, 44px) !important;
        height: clamp(32px, 8.5vw, 44px) !important;
        min-width: clamp(32px, 8.5vw, 44px) !important;
        max-width: clamp(32px, 8.5vw, 44px) !important;
        flex-shrink: 0 !important;
        border-radius: 50% !important; padding: 2px !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        visibility: visible !important; opacity: 1 !important;
        background: #fff !important; border: 2px solid #13357B !important;
        box-shadow: 0 1px 6px rgba(0,0,0,0.12) !important;
        box-sizing: border-box !important;
    }
    .school-logo-img img {
        width: 100% !important; height: 100% !important;
        object-fit: contain !important; border-radius: 50% !important;
        display: block !important; visibility: visible !important; opacity: 1 !important;
    }
    .brand-text {
        flex: 1 1 auto !important; min-width: 0 !important;
        overflow: hidden !important;
        display: flex !important; flex-direction: column !important;
        justify-content: center !important;
        visibility: visible !important; opacity: 1 !important;
        padding: 0 2px !important;
    }
    .brand-text h3 {
        font-size: clamp(7.5px, 2vw, 11px) !important;
        font-weight: 800 !important; color: #fba831 !important;
        margin: 0 0 1px 0 !important; line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important; visibility: visible !important; letter-spacing: 0 !important;
    }
    .brand-text span {
        font-size: clamp(6px, 1.7vw, 8.5px) !important;
        color: #F57C00 !important; font-weight: 600 !important;
        display: block !important; white-space: nowrap !important;
        overflow: hidden !important; text-overflow: ellipsis !important;
        visibility: visible !important;
    }
    .brand-text small {
        font-size: clamp(5.5px, 1.5vw, 7.5px) !important; color: #555 !important;
        display: block !important; white-space: nowrap !important;
        overflow: hidden !important; text-overflow: ellipsis !important;
        visibility: visible !important;
    }
    .navbar-toggler {
        display: flex !important; align-items: center !important; justify-content: center !important;
        width: 34px !important; height: 34px !important; padding: 0 !important;
        flex-shrink: 0 !important; flex-grow: 0 !important;
        border: 2px solid #13357B !important; border-radius: 6px !important;
        background: transparent !important; margin-left: 4px !important;
        box-sizing: border-box !important;
    }
    .navbar-toggler:focus { box-shadow: none !important; outline: none !important; }
    .navbar-toggler-icon { width: 17px !important; height: 17px !important; display: block !important; }

    .navbar-icons, .nav-icons, .header-icons, .right-logos,
    .ministry-logos, .top-icons, .navbar-right-icons {
        display: flex !important; flex-direction: row !important; align-items: center !important;
        gap: 4px !important; flex-shrink: 0 !important;
        visibility: visible !important; opacity: 1 !important;
    }
    .ministry-seal, .cbse-logo, .board-logo, .right-icon-wrap, .nav-icon-wrap {
        width: clamp(30px, 8vw, 40px) !important;
        height: clamp(30px, 8vw, 40px) !important;
        min-width: clamp(30px, 8vw, 40px) !important;
        border-radius: 50% !important; display: flex !important;
        align-items: center !important; justify-content: center !important;
        background: #fff !important; border: 2px solid #13357B !important;
        flex-shrink: 0 !important;
    }
    .ministry-seal img, .cbse-logo img, .board-logo img,
    .right-icon-wrap img, .nav-icon-wrap img {
        width: 85% !important; height: 85% !important; object-fit: contain !important;
    }
    .icon-name, .logo-name, .seal-name, .icon-label, .logo-label { display: none !important; }

    /* ── Collapsed nav menu ── */
    .navbar-collapse, .navbar-collapse.show, .navbar-collapse.collapsing,
    #navbarNav, #navbarSupportedContent, #mainNavbar, #navbarCollapse {
        background-color: #13357B !important; border-top: 3px solid #F57C00 !important;
        border-radius: 0 0 12px 12px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.45) !important;
        overflow: hidden !important; padding: 0 !important; margin-top: 6px !important; width: 100% !important;
    }
    .navbar-collapse .navbar-nav { gap: 0 !important; margin: 0 !important; }
    .navbar-collapse .nav-item {
        background-color: #13357B !important;
        border-bottom: 1px solid rgba(255,255,255,0.10) !important;
        margin: 0 !important; padding: 0 !important;
    }
    .navbar-collapse .nav-item:last-child { border-bottom: none !important; }
    .navbar-collapse .nav-link,
    .navbar-collapse .nav-item > .nav-link,
    .navbar-collapse .nav-item > a {
        color: #fff !important; background-color: #13357B !important;
        font-size: 13px !important; font-weight: 600 !important; padding: 14px 20px !important;
        text-transform: uppercase !important; display: flex !important;
        align-items: center !important; justify-content: space-between !important;
        text-decoration: none !important; width: 100% !important; box-sizing: border-box !important;
    }
    .navbar-collapse .nav-link:hover, .navbar-collapse .nav-link.active {
        background-color: rgba(255,255,255,0.10) !important; color: #F57C00 !important;
    }
    .navbar-collapse .dropdown-toggle::after {
        border: none !important; content: "\f107" !important;
        font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important;
        color: #F57C00 !important; margin-left: auto !important;
    }
    .navbar-collapse .dropdown-menu {
        background-color: #0D2560 !important; border: none !important; border-radius: 0 !important;
        padding: 0 !important; margin: 0 !important; position: static !important;
        float: none !important; width: 100% !important; box-shadow: none !important;
    }
    .navbar-collapse .dropdown-item {
        color: rgba(255,255,255,0.88) !important; font-size: 12.5px !important;
        padding: 12px 36px !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important;
        display: block !important; text-decoration: none !important;
    }
    .navbar-collapse .dropdown-item:hover {
        background-color: rgba(245,124,0,0.18) !important; color: #F57C00 !important;
    }

    /* ── Hero headings ── */
    [class*="hero-overlay"] h1, [class*="hero-overlay"] h2,
    .page-header h1, .page-header h2 {
        font-size: clamp(1.1rem, 5.5vw, 1.7rem) !important;
        line-height: 1.2 !important; white-space: normal !important;
    }

    /* ── Carousel ── */
    .carousel-header { overflow: hidden !important; width: 100% !important; display: block !important; }
    .carousel-header .carousel,
    .carousel-header .carousel-inner { display: block !important; overflow: hidden !important; width: 100% !important; }

    .carousel-header .carousel-inner {
        position: relative !important;
        height: 58vw !important; min-height: 175px !important; max-height: 330px !important;
    }

    .carousel-header .carousel-item {
        position: absolute !important; top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.6s ease !important;
        display: block !important;
    }

    .carousel-header .carousel-item.active {
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
    }

    .carousel-header .carousel-item.carousel-item-next,
    .carousel-header .carousel-item.carousel-item-prev,
    .carousel-header .carousel-item.carousel-item-start,
    .carousel-header .carousel-item.carousel-item-end {
        opacity: 1 !important;
        visibility: visible !important;
        position: absolute !important;
    }

    .carousel-header .carousel-item img,
    .carousel-header .carousel-item video {
        position: absolute !important; top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
        object-fit: cover !important; display: block !important; z-index: 1 !important;
    }

    .carousel-header .carousel-control-prev { left: 8px !important; }
    .carousel-header .carousel-control-next { right: 8px !important; }

    /* ── Layout ── */
    .container, .container-fluid {
        padding-left: 8px !important; padding-right: 8px !important;
        max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important;
    }
    h1, h2, h3, h4, h5, h6, p, li, td, th { max-width: 100% !important; overflow-wrap: break-word !important; }
    img, video, iframe { max-width: 100% !important; }
    table { width: 100% !important; display: block !important; overflow-x: auto !important; }
    section, .section { padding-top: 36px !important; padding-bottom: 36px !important; }
    .booking, .subscribe, .bg-breadcrumb { background-attachment: scroll !important; }
    .bg-breadcrumb { padding: 90px 0 35px !important; }
    .page-header { padding: 60px 0 !important; }

    .about .col-lg-5, .about .col-lg-7 { flex: 0 0 100% !important; max-width: 100% !important; }
    .service .col-lg-3, .service .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; }
    .activity .col-lg-3, .activity .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; }
    .infrastructure-gallery-section .col-lg-4,
    .infrastructure-gallery-section .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; }
    .infrastructure-card { height: 220px !important; margin-bottom: 16px !important; }

    /* ── Staff 2-col ── */
    .staff-row { gap: 12px !important; }
    .staff-col { flex: 0 0 calc(50% - 5px) !important; max-width: calc(50% - 5px) !important; }
    .staff-card { height: 250px !important; }
    .staff-card .sc-overlay { padding: 14px 12px 12px !important; }
    .staff-section .row > [class*="col"], .team-section .row > [class*="col"],
    .our-team .row > [class*="col"], .meet-team .row > [class*="col"],
    .professionals .row > [class*="col"], [class*="staff"] .row > [class*="col"],
    [class*="team"] .row > [class*="col"] {
        flex: 0 0 50% !important; max-width: 50% !important;
        padding: 0 5px !important; margin-bottom: 10px !important;
    }

    .members-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .member-photo-wrap { height: 155px !important; }
    .pv-body { height: 300px !important; }
    .history-entry { grid-template-columns: 1fr !important; gap: 22px !important; }
    .entry-reverse { direction: ltr !important; }
    .event-photo-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .contact-form-card { padding: 24px 16px !important; }

    /* ── Footer ── */
    .footer-brand { flex-direction: column !important; align-items: center !important; padding: 16px 12px !important; text-align: center !important; gap: 14px !important; }
    .footer-columns { grid-template-columns: 1fr !important; padding: 16px !important; gap: 18px !important; }
    .footer-bottom { padding: 12px !important; font-size: 12px !important; }
    .footer-logo-bar { flex-direction: column !important; align-items: center !important; padding: 20px 14px !important; text-align: center !important; }
    .footer-logo-bar .school-brand { flex-direction: column !important; align-items: center !important; }
    .footer-logo-bar .school-brand .brand-text h3 { font-size: 1.3rem !important; text-align: center !important; white-space: normal !important; }
    .footer-copyright { padding: 10px !important; font-size: 12px !important; }
    .school-logo-wrap { width: 68px !important; height: 68px !important; }
    .brand-name h2 { font-size: 18px !important; text-align: center !important; }
    .social-row, .social-icons { justify-content: center !important; flex-wrap: wrap !important; }
    .back-to-top { width: 38px !important; height: 38px !important; right: 12px !important; bottom: 12px !important; }
}


/* ================================================================
   ⑥ MOBILE XS — max 360px
   ================================================================ */
@media only screen and (max-width: 360px) {

    html, body {
        overflow-x: hidden !important; max-width: 100vw !important; margin: 0 !important; padding: 0 !important;
    }

    .sticky-header-shell {
        position: sticky !important; top: 0 !important; z-index: 1051 !important;
        background: #fff !important; box-shadow: 0 2px 16px rgba(0,0,0,0.15) !important;
        width: 100% !important; margin-bottom: 0 !important; border-radius: 0 !important;
    }
    .header-wrapper {
        position: sticky !important; top: 0 !important; z-index: 1050 !important;
        background: white !important; width: 100% !important; margin: 0 !important;
        padding: 0 !important; border-radius: 0 !important;
    }

    /* ── Topbar ── */
    .container-fluid.bg-primary {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .container-fluid.bg-primary .row {
        height: auto !important;
        flex-direction: column !important;
        padding: 7px 0 9px !important;
        margin: 0 !important;
    }
    .container-fluid.bg-primary .col-lg-6 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .container-fluid.bg-primary .col-lg-6:first-child .d-flex {
        height: auto !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding-bottom: 7px !important;
        border-bottom: 1px solid rgba(255,255,255,0.2) !important;
    }
    .container-fluid.bg-primary .col-lg-6:last-child .d-flex {
        height: auto !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 4px 6px !important;
        padding-top: 7px !important;
        text-align: center !important;
    }
    .container-fluid.bg-primary .topbar-link { font-size: 0.68rem !important; }
    .btn-sm-square { width: 20px !important; height: 20px !important; }
    .btn-sm-square i { font-size: 8px !important; }
    .ticker-label { display: none !important; }

    /* ── Navbar ── */
    .navbar {
        padding: 3px 6px !important; background: #fff !important;
        width: 100% !important; margin: 0 !important; box-sizing: border-box !important;
        border-radius: 0 !important;
    }
    .navbar .container, .navbar .container-fluid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 !important; margin: 0 !important;
        gap: 0 !important; width: 100% !important; max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .navbar-brand {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 42px) !important;
        overflow: hidden !important;
        gap: 3px !important;
        padding: 0 !important; margin: 0 !important;
    }

    .school-logo-img {
        width: 32px !important; height: 32px !important;
        min-width: 32px !important; max-width: 32px !important;
        flex-shrink: 0 !important;
        border-radius: 50% !important; padding: 2px !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        visibility: visible !important; opacity: 1 !important;
        background: #fff !important; border: 2px solid #13357B !important;
        box-sizing: border-box !important;
    }
    .school-logo-img img {
        width: 100% !important; height: 100% !important;
        object-fit: contain !important; border-radius: 50% !important;
        display: block !important; visibility: visible !important; opacity: 1 !important;
    }

    /* Hide middle logo on 360px */
    .navbar-brand .school-logo-img:nth-of-type(2) { display: none !important; }

    .brand-text {
        flex: 1 1 auto !important; min-width: 0 !important;
        overflow: hidden !important;
        display: flex !important; flex-direction: column !important;
        justify-content: center !important;
        visibility: visible !important; opacity: 1 !important;
        padding: 0 1px !important;
    }
    .brand-text h3 {
        font-size: 8px !important;
        font-weight: 800 !important; color: #fba831 !important;
        margin: 0 0 1px 0 !important; line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important; visibility: visible !important; letter-spacing: 0 !important;
    }
    .brand-text span {
        font-size: 6.5px !important;
        color: #F57C00 !important; font-weight: 600 !important;
        display: block !important; white-space: nowrap !important;
        overflow: hidden !important; text-overflow: ellipsis !important;
        visibility: visible !important;
    }
    .brand-text small {
        font-size: 6px !important; color: #555 !important;
        display: block !important; white-space: nowrap !important;
        overflow: hidden !important; text-overflow: ellipsis !important;
        visibility: visible !important;
    }
    .navbar-toggler {
        display: flex !important; align-items: center !important; justify-content: center !important;
        width: 32px !important; height: 32px !important; padding: 0 !important;
        flex-shrink: 0 !important; flex-grow: 0 !important;
        border: 2px solid #13357B !important; border-radius: 6px !important;
        background: transparent !important; margin-left: 3px !important;
        box-sizing: border-box !important;
    }
    .navbar-toggler:focus { box-shadow: none !important; outline: none !important; }
    .navbar-toggler-icon { width: 16px !important; height: 16px !important; display: block !important; }

    .navbar-icons, .nav-icons, .header-icons, .right-logos,
    .ministry-logos, .top-icons, .navbar-right-icons {
        display: flex !important; flex-direction: row !important; align-items: center !important;
        gap: 3px !important; flex-shrink: 0 !important;
        visibility: visible !important; opacity: 1 !important;
    }
    .ministry-seal, .cbse-logo, .board-logo, .right-icon-wrap, .nav-icon-wrap {
        width: 30px !important; height: 30px !important; min-width: 30px !important;
        border-radius: 50% !important; display: flex !important;
        align-items: center !important; justify-content: center !important;
        background: #fff !important; border: 2px solid #13357B !important;
        flex-shrink: 0 !important;
    }
    .ministry-seal img, .cbse-logo img, .board-logo img,
    .right-icon-wrap img, .nav-icon-wrap img { width: 24px !important; height: 24px !important; object-fit: contain !important; }
    .icon-name, .logo-name, .seal-name, .icon-label, .logo-label { display: none !important; }

    /* ── Collapsed nav menu ── */
    .navbar-collapse, .navbar-collapse.show, .navbar-collapse.collapsing,
    #navbarNav, #navbarSupportedContent, #mainNavbar, #navbarCollapse {
        background-color: #13357B !important; border-top: 3px solid #F57C00 !important;
        border-radius: 0 0 12px 12px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.45) !important;
        overflow: hidden !important; padding: 0 !important; margin-top: 6px !important; width: 100% !important;
    }
    .navbar-collapse .navbar-nav { gap: 0 !important; margin: 0 !important; }
    .navbar-collapse .nav-item {
        background-color: #13357B !important;
        border-bottom: 1px solid rgba(255,255,255,0.10) !important;
        margin: 0 !important; padding: 0 !important;
    }
    .navbar-collapse .nav-item:last-child { border-bottom: none !important; }
    .navbar-collapse .nav-link,
    .navbar-collapse .nav-item > .nav-link,
    .navbar-collapse .nav-item > a {
        color: #fff !important; background-color: #13357B !important;
        font-size: 12px !important; font-weight: 600 !important; padding: 12px 16px !important;
        text-transform: uppercase !important; display: flex !important;
        align-items: center !important; justify-content: space-between !important;
        text-decoration: none !important; width: 100% !important; box-sizing: border-box !important;
    }
    .navbar-collapse .nav-link:hover, .navbar-collapse .nav-link.active {
        background-color: rgba(255,255,255,0.10) !important; color: #F57C00 !important;
    }
    .navbar-collapse .dropdown-toggle::after {
        border: none !important; content: "\f107" !important;
        font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important;
        color: #F57C00 !important; margin-left: auto !important;
    }
    .navbar-collapse .dropdown-menu {
        background-color: #0D2560 !important; border: none !important; border-radius: 0 !important;
        padding: 0 !important; margin: 0 !important; position: static !important;
        float: none !important; width: 100% !important; box-shadow: none !important;
    }
    .navbar-collapse .dropdown-item {
        color: rgba(255,255,255,0.88) !important; font-size: 11.5px !important;
        padding: 10px 28px !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important;
        display: block !important; text-decoration: none !important;
    }
    .navbar-collapse .dropdown-item:hover {
        background-color: rgba(245,124,0,0.18) !important; color: #F57C00 !important;
    }

    /* ── Hero ── */
    [class*="hero-overlay"] h1, [class*="hero-overlay"] h2,
    .page-header h1, .page-header h2 {
        font-size: clamp(1rem, 5vw, 1.4rem) !important;
        white-space: normal !important; line-height: 1.2 !important;
    }

    /* ── Carousel ── */
    .carousel-header { overflow: hidden !important; width: 100% !important; display: block !important; }
    .carousel-header .carousel,
    .carousel-header .carousel-inner { display: block !important; overflow: hidden !important; width: 100% !important; }

    .carousel-header .carousel-inner {
        position: relative !important;
        height: 60vw !important; min-height: 160px !important; max-height: 260px !important;
    }

    .carousel-header .carousel-item {
        position: absolute !important; top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.6s ease !important;
        display: block !important;
    }

    .carousel-header .carousel-item.active {
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
    }

    .carousel-header .carousel-item.carousel-item-next,
    .carousel-header .carousel-item.carousel-item-prev,
    .carousel-header .carousel-item.carousel-item-start,
    .carousel-header .carousel-item.carousel-item-end {
        opacity: 1 !important;
        visibility: visible !important;
        position: absolute !important;
    }

    .carousel-header .carousel-item img,
    .carousel-header .carousel-item video {
        position: absolute !important; top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
        object-fit: cover !important; display: block !important; z-index: 1 !important;
    }

    /* ── Layout ── */
    .container, .container-fluid {
        padding-left: 6px !important; padding-right: 6px !important;
        max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important;
    }
    h1, h2, h3, h4, h5, h6, p, li, td, th { max-width: 100% !important; overflow-wrap: break-word !important; }
    img, video, iframe { max-width: 100% !important; }
    table { width: 100% !important; display: block !important; overflow-x: auto !important; }
    section, .section { padding-top: 30px !important; padding-bottom: 30px !important; }
    .booking, .subscribe, .bg-breadcrumb { background-attachment: scroll !important; }

    .about .col-lg-5, .about .col-lg-7 { flex: 0 0 100% !important; max-width: 100% !important; }
    .service .col-lg-3, .service .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; }
    .activity .col-lg-3, .activity .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; }
    .infrastructure-gallery-section .col-lg-4,
    .infrastructure-gallery-section .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; }

    /* ── Staff 2-col ── */
    .staff-row { gap: 8px !important; }
    .staff-col { flex: 0 0 calc(50% - 4px) !important; max-width: calc(50% - 4px) !important; }
    .staff-card { height: 220px !important; }
    .staff-section .row > [class*="col"], .team-section .row > [class*="col"],
    .our-team .row > [class*="col"], .meet-team .row > [class*="col"],
    .professionals .row > [class*="col"], [class*="staff"] .row > [class*="col"],
    [class*="team"] .row > [class*="col"] {
        flex: 0 0 50% !important; max-width: 50% !important;
        padding: 0 4px !important; margin-bottom: 8px !important;
    }

    .members-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
    .member-photo-wrap { height: 130px !important; }
    .pv-body { height: 260px !important; }
    .event-photo-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
    .contact-form-card { padding: 20px 12px !important; }

    /* ── Footer ── */
    .footer-brand { flex-direction: column !important; align-items: center !important; padding: 14px 10px !important; text-align: center !important; gap: 12px !important; }
    .footer-columns { grid-template-columns: 1fr !important; padding: 14px !important; gap: 16px !important; }
    .footer-bottom { padding: 10px !important; font-size: 11px !important; }
    .footer-logo-bar { flex-direction: column !important; align-items: center !important; padding: 14px 10px !important; text-align: center !important; }
    .footer-logo-bar .school-brand .brand-text h3 { font-size: 1.1rem !important; text-align: center !important; white-space: normal !important; }
    .footer-copyright { padding: 10px !important; font-size: 11px !important; }
    .school-logo-wrap { width: 60px !important; height: 60px !important; }
    .brand-name h2 { font-size: 16px !important; text-align: center !important; }
    .social-row, .social-icons { justify-content: center !important; flex-wrap: wrap !important; }
    .back-to-top { width: 34px !important; height: 34px !important; right: 10px !important; bottom: 10px !important; }
}


/* ================================================================
   ⑦ LANDSCAPE PHONE — height ≤ 480px landscape
   ================================================================ */
@media only screen and (max-height: 480px) and (orientation: landscape) {
    .sticky-header-shell, .header-wrapper { position: relative !important; }
    .topbar { display: none !important; }
    .brand-text small { display: none !important; }
    .icon-name, .logo-name, .seal-name, .icon-label, .logo-label { display: none !important; }
    .carousel-header .carousel-inner {
        position: relative !important;
        height: 80vh !important; min-height: 180px !important; max-height: 340px !important;
    }
    .carousel-header .carousel-item {
        position: absolute !important; top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
        opacity: 0 !important; visibility: hidden !important;
        transition: opacity 0.6s ease !important; display: block !important;
    }
    .carousel-header .carousel-item.active {
        opacity: 1 !important; visibility: visible !important; position: relative !important;
    }
    .carousel-header .carousel-item.carousel-item-next,
    .carousel-header .carousel-item.carousel-item-prev,
    .carousel-header .carousel-item.carousel-item-start,
    .carousel-header .carousel-item.carousel-item-end {
        opacity: 1 !important; visibility: visible !important; position: absolute !important;
    }
    [class*="hero-overlay"] h1, [class*="hero-overlay"] h2 {
        font-size: clamp(1rem, 4vw, 1.5rem) !important; white-space: normal !important;
    }
    .admission-hero, .academic-hero, .cbse-hero, .committee-hero, .faq-hero,
    .history-hero, .trustee-hero, .vision-hero, .contact-hero, .staff-hero { min-height: 160px !important; }
}


/* ================================================================
   ⑧ LANDSCAPE TABLET — 768–1024px landscape
   ================================================================ */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .carousel-header .carousel-inner {
        position: relative !important;
        height: 58vw !important; min-height: 280px !important; max-height: 520px !important;
    }
    .carousel-header .carousel-item {
        position: absolute !important; top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
        opacity: 0 !important; visibility: hidden !important;
        transition: opacity 0.6s ease !important; display: block !important;
    }
    .carousel-header .carousel-item.active {
        opacity: 1 !important; visibility: visible !important; position: relative !important;
    }
    .carousel-header .carousel-item.carousel-item-next,
    .carousel-header .carousel-item.carousel-item-prev,
    .carousel-header .carousel-item.carousel-item-start,
    .carousel-header .carousel-item.carousel-item-end {
        opacity: 1 !important; visibility: visible !important; position: absolute !important;
    }
    .school-logo-img { width: 60px !important; height: 60px !important; min-width: 60px !important; }
    .brand-text h3 { font-size: 14px !important; white-space: normal !important; }
    .ministry-seal, .cbse-logo, .board-logo, .right-icon-wrap, .nav-icon-wrap { width: 50px !important; height: 50px !important; min-width: 50px !important; }
    .ministry-seal img, .cbse-logo img, .board-logo img, .right-icon-wrap img, .nav-icon-wrap img { width: 44px !important; height: 44px !important; }
    .icon-name, .logo-name, .seal-name, .icon-label, .logo-label { display: none !important; }
}


/* ================================================================
   ⑨ PORTRAIT MOBILE helper — max 768px portrait
   ================================================================ */
@media only screen and (max-width: 768px) and (orientation: portrait) {
    .carousel-header .carousel-inner {
        position: relative !important;
        height: 56vw !important; min-height: 180px !important; max-height: 370px !important;
    }
    .carousel-header .carousel-item {
        position: absolute !important; top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
        opacity: 0 !important; visibility: hidden !important;
        transition: opacity 0.6s ease !important; display: block !important;
    }
    .carousel-header .carousel-item.active {
        opacity: 1 !important; visibility: visible !important; position: relative !important;
    }
    .carousel-header .carousel-item.carousel-item-next,
    .carousel-header .carousel-item.carousel-item-prev,
    .carousel-header .carousel-item.carousel-item-start,
    .carousel-header .carousel-item.carousel-item-end {
        opacity: 1 !important; visibility: visible !important; position: absolute !important;
    }
}


/* ================================================================
   ⑩ SAFETY NET — max 991px
   ================================================================ */
@media only screen and (max-width: 991px) {

    /* Override animation libraries */
    .wow { visibility: visible !important; animation-name: none !important; }
    [data-wow-delay], [data-aos] {
        visibility: visible !important; opacity: 1 !important;
        animation: none !important; transform: none !important;
    }

    /* Brand always visible */
    .navbar-brand, .navbar-brand *,
    .brand-text, .brand-text *,
    .school-logo-img, .school-logo-img img {
        visibility: visible !important; opacity: 1 !important;
    }
    .navbar-brand { display: flex !important; overflow: visible !important; }
    .school-logo-img { display: flex !important; }
    .brand-text { display: flex !important; flex-direction: column !important; overflow: visible !important; }
    .brand-text h3 {
        text-overflow: unset !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    /* Right icons always visible */
    .ministry-seal, .cbse-logo, .board-logo, .right-icon-wrap, .nav-icon-wrap,
    .navbar-icons, .nav-icons, .header-icons, .right-logos,
    .ministry-logos, .top-icons, .navbar-right-icons {
        visibility: visible !important; opacity: 1 !important; display: flex !important;
    }
    .ministry-seal img, .cbse-logo img, .board-logo img,
    .right-icon-wrap img, .nav-icon-wrap img {
        visibility: visible !important; opacity: 1 !important; display: block !important;
    }

    /* Hero headings always visible */
    [class*="hero-overlay"] h1, [class*="hero-overlay"] h2, [class*="hero-overlay"] h3,
    .page-header h1, .page-header h2 {
        visibility: visible !important; opacity: 1 !important;
        display: block !important; white-space: normal !important; overflow: visible !important;
    }

    /* Topbar */
    .topbar {
        display: flex !important; flex-wrap: wrap !important;
        visibility: visible !important; opacity: 1 !important;
    }
    .topbar * { visibility: visible !important; opacity: 1 !important; }

    .carousel-header + * { margin-top: 0 !important; }

    /* Prevent overflow causing header corner gap */
    .sticky-header-shell,
    .header-wrapper,
    .navbar,
    .container-fluid.bg-primary {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Topbar second row centered on ALL mobile */
    .container-fluid.bg-primary .col-lg-6:last-child .d-flex {
        justify-content: center !important;
        flex-wrap: wrap !important;
        text-align: center !important;
    }
    .container-fluid.bg-primary .col-lg-6:last-child .d-flex .topbar-link {
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
    }
}


/* ================================================================
   6. TICKER BARS
================================================================ */
@media (max-width: 767px) {
    .ticker-label {
        padding: 0 12px !important;
        font-size: 10px !important;
    }

    a.ticker-item {
        font-size: 12px !important;
    }
}

@media (max-width: 480px) {
    .ticker-label {
        padding: 0 8px !important;
        font-size: 9px !important;
    }
}

/* ================================================================
   7. SECTION PADDING
================================================================ */
@media (max-width: 767px) {
    .container,
    .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    section,
    .container-fluid.about,
    .container-fluid.service,
    .container-fluid.activity,
    .mess-menu-section,
    .birthday-section,
    .infrastructure-gallery-section,
    .container-fluid.facility-section,
    .container-fluid.subscribe {
        margin-top: 24px !important;
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}

@media (max-width: 480px) {
    section,
    .container-fluid.about,
    .mess-menu-section,
    .birthday-section {
        margin-top: 16px !important;
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }
}

/* ================================================================
   8. STAFF CARDS
================================================================ */
@media (max-width: 1199px) {
    .staff-col {
        flex: 0 0 calc(33.333% - 14px) !important;
        max-width: calc(33.333% - 14px) !important;
    }
}

@media (max-width: 991px) {
    .staff-col {
        flex: 0 0 calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
    }

    .staff-card {
        height: 320px !important;
    }
}

@media (max-width: 575px) {
    .staff-col {
        flex: 0 0 calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
    }

    .staff-card {
        height: 260px !important;
    }
}

@media (max-width: 380px) {
    .staff-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .staff-card {
        height: 300px !important;
    }
}

/* ================================================================
   9. TABLES — SCROLLABLE
================================================================ */
.disclosure-card,
.academic-card,
.result-card,
.recr-card {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

.disclosure-table,
.academic-table,
.result-table,
.recr-table {
    min-width: 580px;
}

@media (max-width: 767px) {
    .disclosure-table thead th,
    .academic-table thead th,
    .result-table thead th,
    .recr-table thead th {
        padding: 12px 14px !important;
        font-size: 10px !important;
    }

    .disclosure-table tbody td,
    .academic-table tbody td,
    .result-table tbody td,
    .recr-table tbody td {
        padding: 10px 14px !important;
        font-size: 12.5px !important;
    }

    .action-btns {
        flex-direction: column !important;
        gap: 5px !important;
    }

    .btn-view,
    .btn-download,
    .btn-apply {
        font-size: 10.5px !important;
        padding: 5px 10px !important;
    }
}

/* ================================================================
   10. PDF MODAL
================================================================ */
@media (max-width: 767px) {
    .pdf-box {
        width: 98vw !important;
        height: 94vh !important;
        border-radius: 8px !important;
    }

    .pdf-header {
        padding: 10px 12px !important;
    }

    .pdf-title {
        font-size: 11px !important;
    }

    .pv-body {
        height: 60vh !important;
    }
}

@media (max-width: 480px) {
    .pdf-box {
        height: 96vh !important;
    }

    .pv-page-counter,
    .pv-zoom {
        display: none !important;
    }
}

/* ================================================================
   11. ACCORDION (Committee / CBSE / FAQ)
================================================================ */
@media (max-width: 991px) {
    .committee-item.active,
    .cbse-item.active,
    .faq-item.active {
        width: calc(100vw - 30px) !important;
        max-width: 100% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

@media (max-width: 767px) {
    .committee-item.active,
    .cbse-item.active,
    .faq-item.active {
        width: calc(100vw - 20px) !important;
    }

    .committee-q-text,
    .cbse-q-text,
    .faq-q-text {
        font-size: 0.88rem !important;
    }

    .members-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
        gap: 14px !important;
    }

    .member-photo-wrap {
        height: 180px !important;
    }

    .cbse-stats,
    .committee-stats,
    .faq-stats {
        flex-wrap: wrap !important;
    }

    .cbse-stat,
    .committee-stat,
    .faq-stat {
        flex: 0 0 50% !important;
        min-width: 50% !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(19,53,123,0.18);
    }

    .cbse-stat:nth-child(odd),
    .committee-stat:nth-child(odd),
    .faq-stat:nth-child(odd) {
        border-right: 1px solid rgba(19,53,123,0.18) !important;
    }

    .cbse-stat-number,
    .committee-stat-number,
    .faq-stat-number {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .members-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .member-photo-wrap {
        height: 150px !important;
    }
}

/* ================================================================
   12. GALLERY / EVENTS
================================================================ */
@media (max-width: 991px) {
    .event-photo-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }
}

@media (max-width: 767px) {
    .event-photo-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .achievement-gallery-section {
        padding: 40px 0 !important;
    }
}

/* ================================================================
   13. BIRTHDAY SECTION
================================================================ */
@media (max-width: 991px) {
    .bday-tabs {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .bday-card {
        flex: 0 0 200px !important;
        width: 200px !important;
    }
}

@media (max-width: 767px) {
    .bday-card {
        flex: 0 0 180px !important;
        width: 180px !important;
    }

    .bday-img-wrap {
        height: 220px !important;
    }
}

@media (max-width: 480px) {
    .bday-card {
        flex: 0 0 160px !important;
        width: 160px !important;
    }

    .bday-img-wrap {
        height: 190px !important;
    }
}

/* ================================================================
   14. MESS MENU
================================================================ */
@media (max-width: 767px) {
    .mess-img-outer img {
        height: auto !important;
        max-height: 400px !important;
    }
}

/* ================================================================
   15. ADMISSION PAGE
================================================================ */
@media (max-width: 767px) {
    .admission-tabs-wrapper {
        position: static !important;
    }

    .admission-tabs {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .admission-tabs .tab-btn {
        padding: 9px 14px !important;
        font-size: 12px !important;
    }

    .doc-card {
        padding: 24px 18px !important;
    }

    .cta-band {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .contact-info-band {
        flex-direction: column !important;
        gap: 10px !important;
        text-align: center !important;
    }

    .contact-sep {
        display: none !important;
    }
}

/* ================================================================
   16. CONTACT PAGE
================================================================ */
@media (max-width: 767px) {
    .contact-form-card {
        padding: 24px 18px !important;
    }

    .transport-card {
        padding: 18px 16px !important;
    }

    .contact-info-card {
        padding: 24px 16px !important;
    }
}

/* ================================================================
   17. RECRUITMENT PAGE
================================================================ */
@media (max-width: 991px) {
    .apply-banner-inner {
        flex-direction: column !important;
        gap: 30px !important;
        align-items: flex-start !important;
    }

    .apply-banner-qr {
        align-self: center !important;
    }
}

@media (max-width: 767px) {
    .apply-banner-text h2 {
        font-size: 1.5rem !important;
    }

    .recr-table {
        min-width: 550px !important;
    }
}

/* ================================================================
   18. HISTORY LAYOUT
================================================================ */
@media (max-width: 991px) {
    .history-entry {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .entry-reverse {
        direction: ltr !important;
    }
}

@media (max-width: 767px) {
    .he-img-wrap {
        aspect-ratio: 16/9 !important;
    }

    .he-body {
        font-size: 14px !important;
    }

    .about-description,
    .history-description {
        font-size: 14px !important;
        text-align: left !important;
    }
}

/* ================================================================
   19. INFRASTRUCTURE GALLERY
================================================================ */
@media (max-width: 767px) {
    .infrastructure-card {
        height: 220px !important;
    }
}

@media (max-width: 480px) {
    .infrastructure-card {
        height: 180px !important;
    }
}

/* ================================================================
   20. FOOTER
================================================================ */
@media (max-width: 991px) {
    .footer-columns {
        grid-template-columns: 1fr 1fr !important;
        padding: 30px 24px !important;
        gap: 24px !important;
    }

    .footer-brand {
        padding: 24px !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
}

@media (max-width: 767px) {
    .footer-columns {
        grid-template-columns: 1fr !important;
        padding: 24px 16px !important;
        gap: 20px !important;
    }

    .footer-bottom,
    .footer-copyright {
        padding: 12px 16px !important;
        font-size: 12px !important;
    }

    .footer-logo-bar {
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px !important;
        padding: 24px 16px !important;
        text-align: center !important;
    }
}

/* ================================================================
   21. ACADEMIC CALENDAR
================================================================ */
@media (max-width: 767px) {
    .cal-filter-bar {
        padding: 12px 14px !important;
        gap: 6px !important;
    }

    .filter-btn {
        padding: 5px 10px !important;
        font-size: 11.5px !important;
    }

    .cal-card {
        padding: 18px 14px 22px !important;
    }

    .stat-card-body strong {
        font-size: 20px !important;
    }
}

/* ================================================================
   22. CBSE / FAQ CTA
================================================================ */
@media (max-width: 767px) {
    .cbse-cta,
    .faq-cta {
        flex-direction: column !important;
        text-align: center !important;
        padding: 24px 20px !important;
        gap: 16px !important;
    }

    .cbse-filter-tabs {
        gap: 5px !important;
        justify-content: flex-start !important;
    }

    .cbse-filter-tab {
        font-size: 0.78rem !important;
        padding: 6px 12px !important;
    }
}

/* ================================================================
   23. LIGHTBOX MODALS
================================================================ */
@media (max-width: 767px) {
    .lb-prev  { left: 6px !important; width: 38px !important; height: 38px !important; }
    .lb-next  { right: 6px !important; width: 38px !important; height: 38px !important; }
    .lb-close { top: 10px !important; right: 10px !important; }
    #lbImage  { max-width: 96vw !important; max-height: 80vh !important; }

    .achv-modal-box {
        max-width: 98vw !important;
    }

    #achvModalImg {
        max-height: 60vh !important;
    }
}

/* ================================================================
   24. FILE VIEWER
================================================================ */
@media (max-width: 767px) {
    .pv-body {
        height: 55vh !important;
    }

    .pv-page-counter { display: none !important; }
    .pv-zoom         { display: none !important; }
}

/* ================================================================
   25. BOOTSTRAP ROW GUTTERS
================================================================ */
@media (max-width: 767px) {
    .row {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1rem;
    }
}

@media (max-width: 480px) {
    .row {
        --bs-gutter-x: 0.75rem;
        --bs-gutter-y: 0.75rem;
    }
}

/* ================================================================
   26. PROUD MOMENTS COUNTERS
================================================================ */
@media (max-width: 991px) {
    .col-lg-pmcol {
        width: 33.333% !important;
    }
}

@media (max-width: 767px) {
    .col-lg-pmcol {
        width: 50% !important;
    }

    .pm-number {
        font-size: 1.8rem !important;
    }
}

/* ================================================================
   27. BACK-TO-TOP
================================================================ */
@media (max-width: 767px) {
    .back-to-top {
        right: 16px !important;
        bottom: 16px !important;
        width: 38px !important;
        height: 38px !important;
    }
}

/* ================================================================
   28. PARALLAX — DISABLE ON MOBILE (iOS Safari fix)
================================================================ */
@media (max-width: 991px) {
    .bg-breadcrumb,
    .booking,
    .subscribe {
        background-attachment: scroll !important;
    }

    .bg-breadcrumb {
        padding: 100px 0 30px 0 !important;
    }
}

/* ================================================================
   29. PREVENT HORIZONTAL OVERFLOW ON MOBILE
================================================================ */
@media (max-width: 991px) {
    .row,
    .container,
    .container-fluid {
        max-width: 100%;
        overflow-x: hidden;
    }
}

/* Tables inside cards still scroll */
.academic-card .academic-table-wrap,
.disclosure-card,
.result-card,
.recr-card {
    overflow-x: auto !important;
}

/* ================================================================
   30. PRINT STYLES
================================================================ */
@media print {
    .sticky-header-shell,
    .ticker-bar,
    .back-to-top,
    #spinner,
    .navbar-toggler,
    .pdf-modal,
    .achv-modal {
        display: none !important;
    }

    body {
        font-size: 12pt !important;
    }
}