/* ==========================================================================
           1. VIBRANT LUXURY DESIGN SYSTEM
           Clean, luminous, breathable & energetic:
           - Pearl White & Light Slate Canvas (#FFFFFF / #F8FAFC)
           - Royal Burgundy from the school uniform (#7A1528 / #931932)
           - Vibrant Electric Sky & Cyan (#0284C7 / #38BDF8)
           - Rich Midnight Contrast Zones (#071520 / #0B1F2D)
           ========================================================================== */
        :root {
            /* Reference Image Luxury Palette: Obsidian Black, Crimson Red & Crisp White */
            --bg-page: #0B0B0E;
            --bg-card: #141418;
            --bg-card-subtle: #1B1B22;
            --bg-contrast-dark: #070709;
            --bg-contrast-surface: #181820;

            /* Crimson & Burgundy Red Accent (From Reference Image) */
            --burgundy: #D31F33;
            --burgundy-light: #E11D48;
            --burgundy-dark: #6B0C12;
            --burgundy-soft: rgba(211, 31, 51, 0.15);
            --burgundy-glow: rgba(211, 31, 51, 0.4);
            --burgundy-gradient: linear-gradient(135deg, #B8182C 0%, #7E0D1B 50%, #4D0710 100%);

            /* Crisp White Replacing Yellow (As Instructed) */
            --cyan-primary: #FFFFFF;
            --cyan-vibrant: #F8FAFC;
            --cyan-soft: rgba(255, 255, 255, 0.1);
            --cyan-glow: rgba(255, 255, 255, 0.35);
            --cyan-gradient: linear-gradient(135deg, #FFFFFF 0%, #E2E8F0 100%);

            /* Typography */
            --text-heading: #FFFFFF;
            --text-body: #E2E8F0;
            --text-muted: #94A3B8;
            --text-light: #FFFFFF;

            /* Borders & Shadows */
            --border-light: rgba(255, 255, 255, 0.1);
            --border-hover: rgba(211, 31, 51, 0.5);
            --border-cyan-hover: rgba(255, 255, 255, 0.45);
            --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.5);
            --shadow-card: 0 12px 35px rgba(0, 0, 0, 0.65), 0 2px 8px rgba(255, 255, 255, 0.03);
            --shadow-hover: 0 20px 45px rgba(211, 31, 51, 0.25), 0 4px 15px rgba(0, 0, 0, 0.7);

            /* Geometry */
            --radius-pill: 9999px;
            --radius-xl: 24px;
            --radius-lg: 18px;
            --radius-md: 12px;
        }

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

        html {
            scroll-behavior: smooth;
            font-size: 16px;
            overflow-x: hidden;
        }

        body {
            background-color: var(--bg-page);
            color: var(--text-body);
            font-family: 'Cairo', system-ui, -apple-system, sans-serif;
            line-height: 1.65;
            overflow-x: hidden;
            position: relative;
        }

        a {
            text-decoration: none;
            color: inherit;
            transition: all 0.25s ease;
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        button {
            font-family: inherit;
            border: none;
            outline: none;
            cursor: pointer;
            background: none;
        }

        .container {
            width: 100%;
            max-width: 1240px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }

        /* Section Numbering Badge (Horizon 01, 02 style) */
        .section-tag-row {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.85rem;
        }

        .tag-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            background: var(--burgundy-soft);
            color: var(--burgundy);
            border: 1px solid rgba(122, 21, 40, 0.15);
            font-size: 0.82rem;
            font-weight: 800;
            padding: 0.35rem 0.95rem;
            border-radius: var(--radius-pill);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .tag-pill.cyan {
            background: var(--cyan-soft);
            color: var(--cyan-primary);
            border-color: rgba(2, 132, 199, 0.2);
        }

        .section-h2 {
            font-size: 2.6rem;
            font-weight: 900;
            color: var(--text-heading);
            line-height: 1.25;
            margin-bottom: 1rem;
            letter-spacing: -0.5px;
        }

        .section-h2 span.highlight-burgundy {
            color: var(--burgundy);
            position: relative;
        }

        .section-h2 span.highlight-cyan {
            color: var(--cyan-primary);
        }

        .section-lead {
            font-size: 1.12rem;
            color: var(--text-muted);
            line-height: 1.75;
            max-width: 660px;
        }

        /* Completely Hide WordPress Admin Bar & Reset Viewport Margin */
        #wpadminbar {
            display: none !important;
            visibility: hidden !important;
            height: 0 !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }
        html, body, html.admin-bar, body.admin-bar {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }
        @media screen and (max-width: 782px) {
            html, body, html.admin-bar, body.admin-bar {
                margin-top: 0 !important;
                padding-top: 0 !important;
            }
        }

        /* ==========================================================================
           2. MODERN ROYAL INDIGO-BLUE NAVBAR (MATCHING REFERENCE PALETTE & STRAIGHT EDGES)
           ========================================================================== */
html:not([data-theme="light"]) .top-navbar-wrapper {
            position: sticky;
            top: 0;
            z-index: 1000;
            background: linear-gradient(180deg, 
                rgba(11, 11, 14, 0.92) 0%, 
                rgba(11, 11, 14, 0.70) 55%, 
                rgba(11, 11, 14, 0.25) 85%, 
                transparent 100%) !important;
            backdrop-filter: blur(14px) saturate(160%);
            -webkit-backdrop-filter: blur(14px) saturate(160%);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
            border-bottom-left-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
            border-radius: 0 !important;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.8), 0 1px 15px rgba(211, 31, 51, 0.25) !important;
            transition: all 0.3s ease;
        }

        /* Luminous Horizon Light Beam at Bottom Edge (Matching Reference Image) */
        .top-navbar-wrapper::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 20%;
            right: 20%;
            height: 2px;
            background: linear-gradient(90deg, transparent 0%, #D31F33 25%, #FFFFFF 50%, #D31F33 75%, transparent 100%);
            box-shadow: 0 0 16px 2px rgba(211, 31, 51, 0.6), 0 0 25px 4px rgba(255, 255, 255, 0.3);
            pointer-events: none;
            z-index: 2;
        }

        .navbar-inner,
        .nav-content-bar,
        .nav-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 78px;
            gap: 1.5rem;
            width: 100%;
        }

        /* Brand Logo Area & Unified Logo Clamping */
        .nav-brand,
        .brand-logo-link,
        .site-logo {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            flex-shrink: 0 !important;
            text-decoration: none;
            white-space: nowrap !important;
        }

        .site-logo img,
        .brand-logo-link img,
        .nav-brand img,
        header img,
        .brand-img {
            max-height: 44px !important;
            width: auto !important;
            object-fit: contain !important;
            display: block;
        }

        .brand-text-col {
            display: flex;
            flex-direction: column;
        }

        .brand-title-ar {
            font-size: 1.25rem;
            font-weight: 900;
            color: #FFFFFF !important;
            letter-spacing: 0.5px;
            line-height: 1.1;
            white-space: nowrap !important;
        }

        .brand-sub-en {
            font-size: 0.72rem;
            font-weight: 700;
            color: #94A3B8 !important;
            margin-top: 2px;
            white-space: nowrap !important;
        }

        .nav-logo-box {
            width: 46px;
            height: 46px;
            border-radius: 12px;
            background: #030B12;
            border: 1.5px solid rgba(56, 189, 248, 0.45);
            box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25);
            padding: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            flex-shrink: 0;
        }

        .nav-brand:hover .nav-logo-box {
            transform: scale(1.06);
            border-color: #38BDF8;
            box-shadow: 0 6px 18px rgba(56, 189, 248, 0.4);
        }

        .nav-logo-box img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .nav-brand-title {
            font-size: 1.30rem;
            font-weight: 900;
            color: #FFFFFF !important;
            letter-spacing: 0.5px;
            line-height: 1.1;
            white-space: nowrap !important;
        }

        .nav-brand-sub {
            font-size: 0.74rem;
            font-weight: 700;
            color: #94A3B8 !important;
            margin-top: 2px;
            white-space: nowrap !important;
        }

        /* Desktop Nav Links (Zero Text Wrap) */
        .nav-links-desktop {
            display: flex;
            align-items: center;
            gap: 1.15rem;
            flex-wrap: nowrap !important;
        }

        .nav-item {
            font-size: 0.90rem;
            font-weight: 700;
            color: #E2E8F0 !important;
            position: relative;
            padding: 0.45rem 0;
            transition: color 0.25s ease;
            white-space: nowrap !important;
            flex-shrink: 0 !important;
            text-decoration: none;
            display: inline-block;
        }

        .nav-item::after {
            content: '';
            position: absolute;
            bottom: -2px;
            right: 0;
            width: 0;
            height: 2.5px;
            background: linear-gradient(90deg, #c084fc, #38bdf8);
            border-radius: 2px;
            transition: width 0.3s ease;
        }

        .nav-item:hover, .nav-item.active,
        .nav-links-desktop-list a:hover, .nav-links-desktop-list .current-menu-item > a {
            color: #FFA3B2 !important;
        }

        .nav-item:hover::after, .nav-item.active::after,
        .nav-links-desktop-list a:hover::after, .nav-links-desktop-list .current-menu-item > a::after {
            background: linear-gradient(90deg, #7A1528, #E11D48) !important;
            width: 100%;
        }

        /* Action Buttons */
        .nav-actions-group {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-shrink: 0 !important;
            white-space: nowrap !important;
        }

        .btn-nav-outline {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0.55rem 1.15rem;
            border-radius: var(--radius-pill);
            font-size: 0.88rem;
            font-weight: 800;
            color: #FFFFFF !important;
            background: rgba(255, 255, 255, 0.08) !important;
            border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
            transition: all 0.25s ease;
            white-space: nowrap !important;
            flex-shrink: 0 !important;
            text-decoration: none;
        }

        .btn-nav-outline svg {
            color: #38BDF8;
        }

        .btn-nav-outline:hover {
            border-color: #38BDF8 !important;
            color: #38BDF8 !important;
            background: rgba(56, 189, 248, 0.15) !important;
            transform: translateY(-1px);
        }

        .btn-nav-primary {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            padding: 0.58rem 1.45rem;
            border-radius: var(--radius-pill);
            font-size: 0.90rem;
            font-weight: 900;
            color: #0C0C0E !important;
            background: #FFFFFF !important;
            border: none;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
            transition: all 0.25s ease;
            white-space: nowrap !important;
            flex-shrink: 0 !important;
            text-decoration: none;
            cursor: pointer;
        }

        .btn-nav-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 22px rgba(122, 21, 40, 0.7);
            color: #FFFFFF !important;
        }

        /* Mobile Compact Quick Login Pill (Styled for Dark Navy Navbar) */
        .btn-nav-mobile-login {
            display: none;
            align-items: center;
            gap: 0.35rem;
            padding: 0.45rem 0.95rem;
            border-radius: var(--radius-pill);
            font-size: 0.82rem;
            font-weight: 800;
            color: #FFFFFF !important;
            background: rgba(255, 255, 255, 0.12) !important;
            border: 1px solid rgba(255, 255, 255, 0.28) !important;
            transition: all 0.2s ease;
            text-decoration: none;
            white-space: nowrap !important;
        }

        .btn-nav-mobile-login svg {
            color: #38BDF8;
        }

        .btn-nav-mobile-login:hover {
            background: #7A1528 !important;
            border-color: #7A1528 !important;
            color: #FFFFFF !important;
        }

        /* Mobile Hamburger Luxe Animated Button (Styled for Dark Navy Navbar) */
        .btn-hamburger {
            display: none;
            width: 42px;
            height: 42px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.08) !important;
            border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
            padding: 9px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .btn-hamburger span {
            display: block;
            width: 22px;
            height: 2.2px;
            background: #FFFFFF !important;
            border-radius: 2px;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .btn-hamburger:hover {
            background: rgba(56, 189, 248, 0.15) !important;
            border-color: #38BDF8 !important;
        }

        .btn-hamburger.active {
            background: #7A1528 !important;
            border-color: #7A1528 !important;
        }

        .btn-hamburger.active span {
            background: #FFFFFF !important;
        }

        .btn-hamburger.active span:nth-child(1) {
            transform: translateY(7.2px) rotate(45deg);
        }

        .btn-hamburger.active span:nth-child(2) {
            opacity: 0;
            transform: translateX(10px);
        }

        .btn-hamburger.active span:nth-child(3) {
            transform: translateY(-7.2px) rotate(-45deg);
        }

        /* ==========================================================================
           MOBILE OFF-CANVAS SLIDE DRAWER
           ========================================================================== */
        .mobile-drawer-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(2, 11, 16, 0.65);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 9998;
            opacity: 0;
            visibility: hidden;
            transition: all 0.35s ease;
        }

        .mobile-drawer-backdrop.active {
            opacity: 1;
            visibility: visible;
        }

        .mobile-drawer-panel {
            position: fixed;
            top: 0;
            right: 0;
            width: 86%;
            max-width: 360px;
            height: 100%;
            background: linear-gradient(180deg, #141418 0%, #0A0A0D 100%) !important;
            color: #F8FAFC !important;
            z-index: 9999;
            box-shadow: -15px 0 45px rgba(0, 0, 0, 0.85) !important;
            display: flex;
            flex-direction: column;
            transform: translateX(100%);
            transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            overflow-y: auto;
            border-left: 1.5px solid rgba(211, 31, 51, 0.35) !important;
            border-radius: 0 !important;
        }

        .mobile-drawer-panel.active {
            transform: translateX(0);
        }

        /* Legacy Drawer & Overlay Compatibility */
        .mobile-drawer {
            position: fixed;
            top: 0;
            right: 0;
            width: 86%;
            max-width: 360px;
            height: 100vh;
            background: linear-gradient(180deg, #121840 0%, #0A0E29 100%) !important;
            color: #F8FAFC !important;
            z-index: 2000;
            box-shadow: -8px 0 35px rgba(0, 0, 0, 0.7) !important;
            padding: 1.5rem 1.25rem;
            transform: translateX(100%);
            transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            border-left: 1.5px solid rgba(168, 85, 247, 0.35) !important;
            border-radius: 0 !important;
        }

        .mobile-drawer.active,
        .mobile-drawer[aria-hidden="false"] {
            transform: translateX(0);
        }

        .drawer-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.75);
            backdrop-filter: blur(8px);
            z-index: 1999;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .drawer-overlay.active,
        .drawer-overlay.open {
            opacity: 1;
            visibility: visible;
        }

        .drawer-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.25rem 1.4rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
            background: rgba(14, 14, 18, 0.95) !important;
        }

        .drawer-brand {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .drawer-logo-box {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: #071520;
            padding: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1.5px solid rgba(56, 189, 248, 0.4);
        }

        .drawer-logo-box img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .btn-close-drawer {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: #F8FAFC;
            font-size: 1.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .btn-close-drawer:hover {
            background: #7A1528;
            color: #FFFFFF;
            border-color: #7A1528;
        }

        .drawer-nav-list {
            list-style: none;
            padding: 1rem 1.25rem;
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
        }

        .drawer-nav-item a,
        .drawer-link {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            padding: 0.85rem 1rem !important;
            border-radius: 14px;
            font-size: 0.98rem;
            font-weight: 700;
            color: #E2E8F0 !important;
            text-decoration: none;
            transition: all 0.25s ease;
            border: 1px solid transparent;
        }

        .drawer-nav-item a:hover,
        .drawer-nav-item a.active,
        .drawer-link:hover,
        .drawer-link.active,
        .drawer-nav-list a:hover,
        .drawer-nav-list .current-menu-item > a {
            background: rgba(122, 21, 40, 0.25) !important;
            color: #FFA3B2 !important;
            border-color: rgba(225, 29, 72, 0.45) !important;
        }

        .drawer-nav-icon {
            width: 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #38BDF8;
            flex-shrink: 0;
        }

        .drawer-actions-box {
            margin-top: auto;
            padding: 1.4rem 1.25rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(10, 10, 13, 0.95);
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .btn-drawer-primary {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.6rem;
            padding: 0.9rem 1.25rem;
            border-radius: var(--radius-pill);
            font-size: 1rem;
            font-weight: 800;
            color: #FFFFFF;
            background: var(--burgundy-gradient);
            box-shadow: 0 6px 18px var(--burgundy-glow);
            text-align: center;
        }

        .btn-drawer-secondary {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.6rem;
            padding: 0.85rem 1.25rem;
            border-radius: var(--radius-pill);
            font-size: 0.95rem;
            font-weight: 800;
            color: var(--text-heading);
            background: #FFFFFF;
            border: 1.5px solid var(--border-light);
            text-align: center;
        }

        .btn-drawer-whatsapp {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.6rem;
            padding: 0.85rem 1.25rem;
            border-radius: var(--radius-pill);
            font-size: 0.95rem;
            font-weight: 800;
            color: #065F46;
            background: rgba(16, 185, 129, 0.12);
            border: 1px solid rgba(16, 185, 129, 0.3);
            text-align: center;
        }

        /* ==========================================================================
           3. HERO FULL-WIDTH SECTION: 100% SHARP IMAGE & ZERO BLUR
           Crisp, un-stretched native aspect ratio with right-aligned options
           ========================================================================== */
        .hero-stage-section {
            width: 100%;
            position: relative;
            background: radial-gradient(ellipse 70% 70% at 70% 50%, rgba(138, 15, 26, 0.45) 0%, rgba(85, 10, 18, 0.2) 45%, #0B0B0E 80%),
                        #0B0B0E !important;
            overflow: hidden;
        }

        /* ==========================================================================
           ORGANIC CURVED SECTION DIVIDERS (NO STRAIGHT HORIZONTAL CUTS)
           Seamless transitions with natural waves and folds between sections
           ========================================================================== */
        .section-curve-divider {
            position: absolute;
            left: 0;
            width: 100%;
            overflow: hidden;
            line-height: 0;
            pointer-events: none;
            z-index: 10;
        }

        .section-curve-divider.curve-bottom {
            bottom: -1px;
        }

        .section-curve-divider.curve-top {
            top: -1px;
        }

        .section-curve-divider svg {
            display: block;
            width: 100%;
            height: 48px;
        }

        @media (min-width: 992px) {
            .section-curve-divider svg {
                height: 62px;
            }
        }

        @media (max-width: 768px) {
            .section-curve-divider svg {
                height: 32px;
            }
        }

        .hero-stage-wrapper {
            position: relative;
            width: 100%;
            max-width: 1920px;
            margin: 0 auto;
        }

        /* The background image rendered with native aspect ratio and 2K ultra-sharp definition */
        .hero-stage-img {
            width: 100%;
            height: auto;
            display: block;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: high-quality;
        }

        /* The Content Layer positioned on the right half (over the empty sky space) */
        .hero-stage-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: flex-start; /* in RTL, this puts content on the RIGHT */
            padding: 0 4%;
            pointer-events: none;
            z-index: 5;
        }

        .hero-stage-content {
            pointer-events: auto;
            width: 46%;
            max-width: 560px;
            margin-right: 0;
            margin-left: auto;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            background: transparent !important; /* ZERO BLUR - completely clear and natural */
        }

        /* Top Government Accreditation Pill */
        .hero-top-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: #FFFFFF;
            border: 1.5px solid rgba(122, 21, 40, 0.25);
            border-radius: var(--radius-pill);
            padding: 0.35rem 0.95rem;
            font-size: 0.82rem;
            font-weight: 800;
            color: var(--burgundy);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            width: fit-content;
        }

        /* Curriculum & Motivation Badge */
        .hero-pill-curriculum {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%);
            color: #FFFFFF;
            border-radius: var(--radius-pill);
            padding: 0.4rem 1.2rem;
            font-size: 0.92rem;
            font-weight: 800;
            letter-spacing: 0.3px;
            box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
            width: fit-content;
        }

        /* Main Big Title */
        .hero-stage-h1 {
            font-size: clamp(1.8rem, 2.3vw, 2.7rem);
            font-weight: 900;
            color: #FFFFFF !important;
            line-height: 1.25;
            letter-spacing: -0.5px;
            text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
        }

        .hero-stage-h1 .color-burgundy-text {
            color: var(--burgundy);
            display: inline-block;
        }

        .hero-stage-h1 .color-cyan-text {
            color: var(--cyan-primary);
        }

        .spark-icon {
            color: #0284C7;
            font-size: 1.2rem;
            vertical-align: middle;
            margin: 0 2px;
        }

        /* Subtitle Description */
        .hero-stage-desc {
            font-size: clamp(0.85rem, 1.05vw, 1.02rem);
            color: #E2E8F0 !important;
            font-weight: 600;
            line-height: 1.65;
            max-width: 520px;
            text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
        }

        /* Action Buttons Row */
        .hero-stage-btns {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            flex-wrap: wrap;
            margin-top: 0.2rem;
        }

        .btn-stage-primary {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.85rem 1.8rem;
            border-radius: var(--radius-pill);
            font-size: 0.98rem;
            font-weight: 900;
            color: #0C0C0E !important;
            background: #FFFFFF !important;
            box-shadow: 0 0 25px rgba(255, 255, 255, 0.45);
            transition: all 0.3s ease;
        }

        .btn-stage-primary:hover {
            transform: translateY(-2px);
            background: #F1F5F9 !important;
            box-shadow: 0 0 35px rgba(255, 255, 255, 0.7) !important;
            color: #000000 !important;
        }

        .btn-stage-secondary {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.85rem 1.6rem;
            border-radius: var(--radius-pill);
            font-size: 0.95rem;
            font-weight: 800;
            color: #FFFFFF !important;
            background: rgba(255, 255, 255, 0.08) !important;
            border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
            transition: all 0.3s ease;
        }

        .btn-stage-secondary:hover {
            border-color: #FFFFFF !important;
            background: rgba(255, 255, 255, 0.18) !important;
            color: #FFFFFF !important;
            transform: translateY(-2px);
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
        }

        /* Trust Checklist directly below buttons */
        .hero-stage-trust-row {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
            padding-top: 0.3rem;
        }

        .stage-trust-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.82rem;
            font-weight: 700;
            color: #FFFFFF;
            background: rgba(255, 255, 255, 0.9);
            padding: 0.3rem 0.75rem;
            border-radius: var(--radius-pill);
            border: 1px solid rgba(226, 232, 240, 0.9);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
        }

        .trust-check {
            color: #10B981;
            font-weight: 900;
            font-size: 0.88rem;
        }
            font-weight: 800;
            color: var(--text-heading);
        }

        .showcase-status-live {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            font-size: 0.78rem;
            font-weight: 800;
            color: #10B981;
            background: rgba(16, 185, 129, 0.1);
            padding: 0.25rem 0.75rem;
            border-radius: var(--radius-pill);
        }

        .showcase-live-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #10B981;
            box-shadow: 0 0 6px #10B981;
            animation: pulseDot 2s infinite;
        }

        @keyframes pulseDot {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.4; transform: scale(0.85); }
        }

        /* Floating Interactive Micro Widget */
        .floating-interactive-chip {
            position: absolute;
            bottom: -22px;
            left: -20px;
            background: #FFFFFF;
            border: 2px solid var(--border-light);
            border-radius: var(--radius-xl);
            padding: 1rem 1.4rem;
            box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15);
            display: flex;
            align-items: center;
            gap: 1rem;
            z-index: 5;
            transition: transform 0.3s ease;
        }

        .floating-interactive-chip:hover {
            transform: translateY(-4px) scale(1.02);
            border-color: var(--cyan-primary);
        }

        .chip-icon-box {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: var(--cyan-soft);
            color: var(--cyan-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            font-weight: 800;
        }

        .chip-text-group {
            display: flex;
            flex-direction: column;
        }

        .chip-title {
            font-size: 0.95rem;
            font-weight: 800;
            color: var(--text-heading);
        }

        .chip-sub {
            font-size: 0.78rem;
            color: var(--text-muted);
            font-weight: 600;
        }

        /* ==========================================================================
           4. SECTION 01: THE 4 SMART PORTAL IDENTITY HUBS
           Pure Soft Sky Blue (#BDE7FC) & Crisp White (#FFFFFF) As In Reference
           With Organic Curved Wave Transitions Top and Bottom
           ========================================================================== */
        #portals {
            padding: 6.5rem 0 6rem;
            position: relative;
            background: linear-gradient(135deg, #BDE7FC 0%, #D8F0FD 22%, #EEF7FD 50%, #FFFFFF 80%, #FFFFFF 100%);
            overflow: hidden;
        }

        #portals .section-header-centered {
            text-align: center;
            max-width: 760px;
            margin: 0 auto 3.5rem;
            position: relative;
            z-index: 2;
        }

        #portals .section-header-centered .tag-pill {
            background: rgba(2, 132, 199, 0.1);
            color: #0284C7;
            border: 1px solid rgba(2, 132, 199, 0.22);
        }

        #portals .section-header-centered .section-h2 {
            color: var(--text-heading);
            font-weight: 900;
        }

        #portals .section-header-centered .section-lead {
            color: var(--text-muted);
            font-size: 1.1rem;
            margin: 0 auto;
        }

        /* The 4 Cards Grid */
        .smart-hubs-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;
            position: relative;
            z-index: 2;
            perspective: 1200px;
        }

        /* ==========================================================================
           4. MODERN EDUCATIONAL PORTAL CARDS
           Compact, sleek academic tech cards with dual-tone accent highlights,
           fluid micro-interactions, responsive balance, and cohesive school palette.
           ========================================================================== */
        .hub-interactive-card {
            background: #FFFFFF;
            border: 1.5px solid rgba(226, 232, 240, 0.9);
            border-radius: 20px;
            padding: 1.6rem 1.45rem 1.35rem 1.45rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            overflow: hidden;
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 
                0 10px 25px -5px rgba(15, 23, 42, 0.05),
                0 2px 6px -1px rgba(15, 23, 42, 0.02);
        }

        /* Top Accent Highlight Strip */
        .hub-interactive-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--card-accent-bar, linear-gradient(90deg, #0284C7, #7A1528));
            border-radius: 20px 20px 0 0;
            transition: height 0.3s ease;
        }

        .hub-interactive-card:hover {
            transform: translateY(-6px);
            border-color: var(--card-hover-border, rgba(2, 132, 199, 0.4));
            box-shadow: 
                0 20px 35px -8px rgba(15, 23, 42, 0.1),
                0 8px 16px -4px rgba(15, 23, 42, 0.04);
        }

        .hub-interactive-card:hover::before {
            height: 5px;
        }

        /* Color Schemes per Portal (Blended website palette: Burgundy, Cyan, Emerald, Amber) */
        /* Card 1: Student -> Electric Cyan with Burgundy Accent */
        .hub-interactive-card.hub-student {
            --card-accent-bar: linear-gradient(90deg, #0284C7 0%, #38BDF8 60%, #7A1528 100%);
            --card-hover-border: rgba(2, 132, 199, 0.45);
        }

        /* Card 2: Parent -> Emerald with Cyan/Burgundy Accent */
        .hub-interactive-card.hub-parent {
            --card-accent-bar: linear-gradient(90deg, #059669 0%, #34D399 60%, #0284C7 100%);
            --card-hover-border: rgba(16, 185, 129, 0.45);
        }

        /* Card 3: Teacher -> Royal Burgundy with Cyan Accent */
        .hub-interactive-card.hub-teacher {
            --card-accent-bar: linear-gradient(90deg, #7A1528 0%, #A31D36 60%, #0284C7 100%);
            --card-hover-border: rgba(122, 21, 40, 0.45);
        }

        /* Card 4: Admissions -> Warm Amber with Burgundy Accent */
        .hub-interactive-card.hub-apply {
            --card-accent-bar: linear-gradient(90deg, #D97706 0%, #F59E0B 60%, #7A1528 100%);
            --card-hover-border: rgba(245, 158, 11, 0.45);
        }

        /* Card Header Meta Row: Badge & Live Indicator */
        .hub-card-meta-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.15rem;
            padding-left: 0;
        }

        .hub-role-badge {
            font-size: 0.74rem;
            font-weight: 800;
            padding: 0.28rem 0.75rem;
            border-radius: var(--radius-pill);
            letter-spacing: 0.3px;
        }

        .hub-student .hub-role-badge {
            background: linear-gradient(135deg, rgba(2, 132, 199, 0.12) 0%, rgba(122, 21, 40, 0.08) 100%);
            color: var(--cyan-primary);
            border: 1px solid rgba(2, 132, 199, 0.22);
        }
        .hub-parent .hub-role-badge {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(122, 21, 40, 0.08) 100%);
            color: #059669;
            border: 1px solid rgba(16, 185, 129, 0.22);
        }
        .hub-teacher .hub-role-badge {
            background: linear-gradient(135deg, rgba(122, 21, 40, 0.12) 0%, rgba(2, 132, 199, 0.08) 100%);
            color: var(--burgundy);
            border: 1px solid rgba(122, 21, 40, 0.22);
        }
        .hub-apply .hub-role-badge {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(122, 21, 40, 0.08) 100%);
            color: #D97706;
            border: 1px solid rgba(245, 158, 11, 0.22);
        }

        .hub-live-indicator {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            font-size: 0.72rem;
            font-weight: 700;
            color: #10B981;
        }

        .hub-live-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #10B981;
            box-shadow: 0 0 6px #10B981;
            animation: pulse-live 2s infinite;
        }

        @keyframes pulse-live {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.4; transform: scale(0.85); }
        }

        /* Modern Vector Icon Box */
        .hub-card-vector-box {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.1rem;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .hub-card-vector-box svg {
            width: 26px;
            height: 26px;
        }

        .hub-student .hub-card-vector-box {
            background: linear-gradient(135deg, rgba(2, 132, 199, 0.12) 0%, rgba(122, 21, 40, 0.06) 100%);
            border: 1.5px solid rgba(2, 132, 199, 0.25);
            color: var(--cyan-primary);
        }

        .hub-parent .hub-card-vector-box {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(122, 21, 40, 0.06) 100%);
            border: 1.5px solid rgba(16, 185, 129, 0.25);
            color: #059669;
        }

        .hub-teacher .hub-card-vector-box {
            background: linear-gradient(135deg, rgba(122, 21, 40, 0.12) 0%, rgba(2, 132, 199, 0.08) 100%);
            border: 1.5px solid rgba(122, 21, 40, 0.25);
            color: var(--burgundy);
        }

        .hub-apply .hub-card-vector-box {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(122, 21, 40, 0.06) 100%);
            border: 1.5px solid rgba(245, 158, 11, 0.25);
            color: #D97706;
        }

        .hub-interactive-card:hover .hub-card-vector-box {
            transform: scale(1.08) translateY(-2px);
        }

        .hub-card-h3 {
            font-size: 1.22rem;
            font-weight: 800;
            color: var(--text-heading);
            margin-bottom: 0.5rem;
            letter-spacing: -0.3px;
        }

        .hub-card-desc {
            font-size: 0.88rem;
            color: var(--text-muted);
            line-height: 1.6;
            margin-bottom: 1.2rem;
            min-height: 44px;
        }

        /* Modern Feature Pills */
        .hub-tag-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 0.35rem;
            margin-bottom: 1.4rem;
        }

        .hub-chip-item {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            font-size: 0.74rem;
            font-weight: 700;
            padding: 0.28rem 0.65rem;
            border-radius: var(--radius-pill);
            background: #F8FAFC;
            border: 1px solid rgba(226, 232, 240, 0.9);
            color: #CBD5E1;
            transition: all 0.2s ease;
        }

        .hub-chip-item svg {
            color: var(--text-muted);
            transition: color 0.2s ease;
        }

        .hub-interactive-card:hover .hub-chip-item {
            background: #FFFFFF;
            border-color: rgba(203, 213, 225, 0.9);
        }

        /* Modern Professional CTA Action Button */
        .btn-hub-open {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 0.75rem 1.2rem;
            border-radius: var(--radius-pill);
            background: #F8FAFC;
            border: 1.5px solid var(--border-light);
            font-size: 0.9rem;
            font-weight: 800;
            color: var(--text-heading);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .btn-hub-open .btn-arrow-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: #FFFFFF;
            border: 1px solid var(--border-light);
            transition: all 0.3s ease;
        }

        .hub-interactive-card.hub-student:hover .btn-hub-open {
            background: var(--cyan-gradient);
            color: #FFFFFF;
            border-color: transparent;
            box-shadow: 0 6px 18px var(--cyan-glow);
        }

        .hub-interactive-card.hub-parent:hover .btn-hub-open {
            background: linear-gradient(135deg, #059669 0%, #047857 100%);
            color: #FFFFFF;
            border-color: transparent;
            box-shadow: 0 6px 18px rgba(16, 185, 129, 0.35);
        }

        .hub-interactive-card.hub-teacher:hover .btn-hub-open {
            background: var(--burgundy-gradient);
            color: #FFFFFF;
            border-color: transparent;
            box-shadow: 0 6px 18px var(--burgundy-glow);
        }

        .hub-interactive-card.hub-apply:hover .btn-hub-open {
            background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
            color: #FFFFFF;
            border-color: transparent;
            box-shadow: 0 6px 18px rgba(245, 158, 11, 0.35);
        }

        .hub-interactive-card:hover .btn-hub-open .btn-arrow-icon {
            background: rgba(255, 255, 255, 0.25);
            border-color: transparent;
            color: #FFFFFF;
            transform: translateX(-4px);
        }

        /* ==========================================================================
           5. SECTION 02: THE 3 NUMBERED CARDS (01, 02, 03) WITH LIFE & SOUL
           School Uniform Royal Burgundy Canvas (#7A1528) with White Floating Plaques
           ========================================================================== */
        .numbered-pillars-section {
            padding: 7rem 0 6.5rem;
            background: linear-gradient(135deg, #7A1528 0%, #600E1F 50%, #460914 100%);
            position: relative;
            overflow: hidden;
        }

        /* Ambient light glows for rich visual life */
        .numbered-pillars-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 15% 25%, rgba(155, 30, 54, 0.45) 0%, transparent 55%),
                        radial-gradient(circle at 85% 75%, rgba(2, 132, 199, 0.18) 0%, transparent 50%);
            pointer-events: none;
        }

        .numbered-pillars-section .tag-pill {
            background: rgba(255, 255, 255, 0.16);
            color: #FFFFFF;
            border: 1px solid rgba(255, 255, 255, 0.32);
            backdrop-filter: blur(10px);
        }

        .numbered-pillars-section .section-h2 {
            color: #FFFFFF;
            text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
        }

        .numbered-pillars-section .section-lead {
            color: rgba(248, 250, 252, 0.92);
            font-size: 1.15rem;
        }

        .numbered-pillars-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            margin-top: 3.5rem;
            position: relative;
            z-index: 2;
        }

        .pillar-card {
            background: #0E0E12;
            border: 1.5px solid rgba(255, 255, 255, 0.12);
            border-radius: var(--radius-xl);
            padding: 2.8rem 2.2rem;
            position: relative;
            box-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.7), 0 0 25px rgba(211, 31, 51, 0.15);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .pillar-card:hover {
            transform: translateY(-10px);
            border-color: rgba(255, 255, 255, 0.45);
            box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.85), 0 0 35px rgba(211, 31, 51, 0.3);
        }

        /* Watermark Number in Card */
        .pillar-big-number {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 5rem;
            font-weight: 900;
            line-height: 1;
            color: transparent;
            -webkit-text-stroke: 2px rgba(122, 21, 40, 0.28);
            margin-bottom: 1.25rem;
            transition: all 0.3s ease;
        }

        .pillar-card:hover .pillar-big-number {
            -webkit-text-stroke-color: var(--burgundy);
            transform: translateX(-4px);
        }

        .pillar-accent-line {
            width: 44px;
            height: 4px;
            background: var(--burgundy);
            border-radius: 2px;
            margin-bottom: 1.5rem;
            transition: width 0.3s ease;
        }

        .pillar-card:hover .pillar-accent-line {
            width: 70px;
        }

        .pillar-card-title {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--text-heading);
            margin-bottom: 0.85rem;
            line-height: 1.3;
        }

        .pillar-card-p {
            font-size: 1rem;
            color: var(--text-muted);
            line-height: 1.75;
        }

        /* ==========================================================================
           6. SECTION 03: DYNAMIC ACADEMIC TRACKS & INTERACTIVE TABS (MIDNIGHT NAVY #03161F)
           ========================================================================== */
        .tracks-interactive-section {
            padding: 7rem 0 7.5rem;
            background: linear-gradient(135deg, #03161F 0%, #032532 100%);
            position: relative;
        }

        .tracks-interactive-section .section-h2 {
            color: #FFFFFF !important;
        }

        .tracks-interactive-section .section-lead {
            color: #CBD5E1 !important;
        }

        .tracks-interactive-section .btn-track-switch {
            background: rgba(255, 255, 255, 0.08);
            border: 1.5px solid rgba(255, 255, 255, 0.18);
            color: #FFFFFF;
            backdrop-filter: blur(8px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .tracks-interactive-section .btn-track-switch:hover {
            background: rgba(255, 255, 255, 0.15);
            border-color: rgba(56, 189, 248, 0.6);
            color: #38BDF8;
        }

        .tracks-interactive-section .btn-track-switch.active {
            background: var(--burgundy-gradient);
            color: #FFFFFF;
            border-color: rgba(255, 255, 255, 0.25);
            box-shadow: 0 8px 24px var(--burgundy-glow);
        }

        .subject-interactive-card {
            background: #FFFFFF;
            border: 1.5px solid rgba(226, 232, 240, 0.9);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.35);
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            flex-direction: column;
        }

        .subject-interactive-card:hover {
            transform: translateY(-8px);
            border-color: rgba(2, 132, 199, 0.45);
            box-shadow: 0 22px 40px -8px rgba(0, 0, 0, 0.45);
        }

        .subject-card-action {
            margin-top: auto;
            padding-top: 1.25rem;
            border-top: 1px solid rgba(226, 232, 240, 0.85);
        }

        .btn-card-apply-pro {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            width: 100%;
            padding: 0.88rem 1.4rem;
            background: linear-gradient(135deg, #7A1528 0%, #901B31 100%);
            color: #FFFFFF !important;
            font-size: 0.98rem;
            font-weight: 800;
            border-radius: var(--radius-pill);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 6px 18px rgba(122, 21, 40, 0.3);
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            cursor: pointer;
        }

        .btn-card-apply-pro:hover {
            background: linear-gradient(135deg, #901B31 0%, #A8233C 100%);
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(122, 21, 40, 0.45);
            border-color: rgba(255, 255, 255, 0.35);
        }

        .btn-card-apply-pro .btn-apply-arrow {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.18);
            font-size: 0.9rem;
            transition: transform 0.25s ease;
        }

        .btn-card-apply-pro:hover .btn-apply-arrow {
            transform: translateX(-4px);
            background: rgba(255, 255, 255, 0.28);
        }

        /* Interactive Tabs Header */
        .track-interactive-tabs-bar {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin: 2.8rem 0;
            flex-wrap: wrap;
        }

        .subjects-showcase-grid.courses-grid-4 {
            grid-template-columns: repeat(4, 1fr);
            gap: 1.8rem;
        }

        @media (max-width: 1100px) {
            .subjects-showcase-grid.courses-grid-4 {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 640px) {
            .subjects-showcase-grid.courses-grid-4 {
                grid-template-columns: 1fr;
            }
        }

        .btn-card-apply {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-weight: 800;
            font-size: 0.88rem;
            color: var(--burgundy);
            background: rgba(122, 21, 40, 0.08);
            border: 1px solid rgba(122, 21, 40, 0.22);
            padding: 0.38rem 0.95rem;
            border-radius: var(--radius-pill);
            text-decoration: none;
            transition: all 0.25s ease;
            cursor: pointer;
        }

        .btn-card-apply:hover {
            background: var(--burgundy);
            color: #FFFFFF;
            border-color: var(--burgundy);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(122, 21, 40, 0.25);
        }

        .btn-track-switch {
            display: inline-flex;
            align-items: center;
            gap: 0.65rem;
            padding: 0.9rem 2.2rem;
            border-radius: var(--radius-pill);
            font-size: 1.05rem;
            font-weight: 800;
            background: rgba(255, 255, 255, 0.08);
            border: 1.5px solid rgba(255, 255, 255, 0.22);
            color: #FFFFFF;
            backdrop-filter: blur(8px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .btn-track-switch:hover {
            background: rgba(255, 255, 255, 0.16);
            border-color: rgba(56, 189, 248, 0.65);
            color: #38BDF8;
        }

        .btn-track-switch.active {
            background: var(--burgundy-gradient);
            color: #FFFFFF;
            border-color: rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 24px var(--burgundy-glow);
        }

        /* Subject Cards Grid */
        .subjects-showcase-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }

        .subject-interactive-card {
            background: #FFFFFF;
            border: 1.5px solid var(--border-light);
            border-radius: var(--radius-xl);
            overflow: hidden;
            box-shadow: var(--shadow-card);
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            flex-direction: column;
        }

        .subject-interactive-card:hover {
            transform: translateY(-6px);
            border-color: var(--burgundy);
            box-shadow: var(--shadow-hover);
        }

        .subject-card-media {
            height: 200px;
            overflow: hidden;
            position: relative;
        }

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

        .subject-interactive-card:hover .subject-card-media img {
            transform: scale(1.08);
        }

        .subject-track-badge {
            position: absolute;
            top: 14px;
            right: 14px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(8px);
            border: 1px solid var(--border-light);
            font-size: 0.78rem;
            font-weight: 800;
            padding: 0.35rem 0.85rem;
            border-radius: var(--radius-pill);
            color: var(--burgundy);
            box-shadow: var(--shadow-sm);
        }

        .subject-card-inner {
            padding: 1.6rem;
            display: flex;
            flex-direction: column;
            flex: 1;
            justify-content: space-between;
        }

        .subject-title {
            font-size: 1.35rem;
            font-weight: 800;
            color: var(--text-heading);
            margin-bottom: 0.5rem;
        }

        .subject-desc {
            font-size: 0.94rem;
            color: var(--text-muted);
            line-height: 1.65;
            margin-bottom: 1.4rem;
        }

        .subject-footer-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 1rem;
            border-top: 1px solid var(--border-light);
        }

        .subject-faculty-info {
            display: flex;
            align-items: center;
            gap: 0.65rem;
        }

        .faculty-avatar-circle {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--burgundy-gradient);
            color: #FFFFFF;
            font-weight: 800;
            font-size: 0.82rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .faculty-name-label {
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--text-heading);
        }

        /* ==========================================================================
           7. SECTION 04: "THE CLASSROOM IN A POCKET" (فصلك في جيبك - MOBILE SUITE)
           Horizon Image 1 inspired with clean, vibrant card phones
           ========================================================================== */
        .pocket-classroom-section {
            padding: 6rem 0;
            background: var(--bg-contrast-dark);
            color: #FFFFFF;
            position: relative;
            overflow: hidden;
        }

        .pocket-classroom-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 20%;
            width: 600px;
            height: 600px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(56, 189, 248, 0.12) 0%, transparent 70%);
            pointer-events: none;
        }

        .pocket-header-light {
            text-align: center;
            max-width: 720px;
            margin: 0 auto 4rem;
        }

        .pocket-header-light .section-h2 {
            color: #FFFFFF;
        }

        .pocket-header-light .section-lead {
            color: var(--cyan-light);
            opacity: 0.85;
            margin: 0 auto;
        }

        /* 4 Vibrant Mobile Frames Grid */
        .pocket-phones-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.8rem;
        }

        .pocket-phone-card {
            background: var(--bg-contrast-surface);
            border: 2px solid rgba(56, 189, 248, 0.2);
            border-radius: 32px;
            overflow: hidden;
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.08);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: all 0.35s ease;
            position: relative;
            min-height: 460px;
        }

        .pocket-phone-card:hover {
            transform: translateY(-8px);
            border-color: var(--cyan-vibrant);
            box-shadow: 0 30px 70px rgba(0, 0, 0, 0.8), 0 0 30px rgba(56, 189, 248, 0.2);
        }

        /* Top Notch */
        .phone-top-notch {
            width: 74px;
            height: 16px;
            background: rgba(0, 0, 0, 0.6);
            border-radius: 0 0 10px 10px;
            margin: 0 auto;
        }

        .phone-inner-content {
            padding: 1.6rem 1.3rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;
        }

        .phone-feature-badge {
            font-size: 0.74rem;
            font-weight: 800;
            color: var(--cyan-vibrant);
            margin-bottom: 0.6rem;
            display: block;
        }

        .phone-feature-h4 {
            font-size: 1.15rem;
            font-weight: 800;
            color: #FFFFFF;
            margin-bottom: 0.5rem;
        }

        .phone-feature-p {
            font-size: 0.85rem;
            color: var(--text-muted);
            line-height: 1.6;
            margin-bottom: 1.4rem;
        }

        .phone-hud-pill {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--radius-md);
            padding: 0.65rem 0.9rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.65rem;
            font-size: 0.84rem;
            font-weight: 700;
        }

        .phone-hud-pill .pill-val {
            font-family: 'Plus Jakarta Sans', sans-serif;
            color: var(--cyan-vibrant);
            font-weight: 800;
        }

        /* ==========================================================================
           8. SECTION 05: INTERACTIVE ACCORDION FAQ
           Royal Burgundy Canvas (#7A1528) with Crisp White Floating Cards
           Matching the prestigious Section 02 (#pillars) school identity
           ========================================================================== */
        .faq-section {
            padding: 7rem 0 6.5rem;
            background: linear-gradient(135deg, #7A1528 0%, #600E1F 50%, #460914 100%);
            position: relative;
            overflow: hidden;
        }

        /* Ambient light glows for depth */
        .faq-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 15% 25%, rgba(155, 30, 54, 0.45) 0%, transparent 55%),
                        radial-gradient(circle at 85% 75%, rgba(2, 132, 199, 0.18) 0%, transparent 50%);
            pointer-events: none;
        }

        .faq-section .tag-pill {
            background: rgba(255, 255, 255, 0.16);
            color: #FFFFFF;
            border: 1px solid rgba(255, 255, 255, 0.32);
            backdrop-filter: blur(10px);
        }

        .faq-section .section-h2 {
            color: #FFFFFF;
            text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
        }

        .faq-section .section-lead {
            color: rgba(248, 250, 252, 0.92);
            font-size: 1.15rem;
        }

        .faq-accordion-container {
            max-width: 840px;
            margin: 3.5rem auto 0;
            display: flex;
            flex-direction: column;
            gap: 1.15rem;
            position: relative;
            z-index: 2;
        }

        .faq-card-box {
            background: #FFFFFF;
            border: 1.5px solid rgba(255, 255, 255, 0.95);
            border-radius: var(--radius-lg);
            box-shadow: 0 15px 35px -8px rgba(25, 3, 8, 0.4), 0 4px 10px rgba(0, 0, 0, 0.06);
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .faq-card-box:hover {
            transform: translateY(-3px);
            border-color: #FFFFFF;
            box-shadow: 0 20px 42px -10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 255, 255, 0.15);
        }

        .faq-card-box.open {
            border-color: #FFFFFF;
            box-shadow: 0 22px 45px -10px rgba(25, 3, 8, 0.5), 0 0 25px rgba(255, 255, 255, 0.2);
        }

        .faq-trigger-btn {
            width: 100%;
            padding: 1.4rem 1.8rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: var(--text-heading);
            font-size: 1.1rem;
            font-weight: 800;
            text-align: right;
            cursor: pointer;
            background: transparent;
            border: none;
            transition: color 0.2s ease;
        }

        .faq-card-box.open .faq-trigger-btn {
            color: var(--burgundy);
        }

        .faq-arrow-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #F1F5F9;
            color: var(--burgundy);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.95rem;
            font-weight: 800;
            transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
            flex-shrink: 0;
            margin-right: 12px;
        }

        .faq-card-box.open .faq-arrow-icon {
            transform: rotate(180deg);
            background: var(--burgundy-gradient);
            color: #FFFFFF;
        }

        .faq-content-drawer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s ease;
            padding: 0 1.8rem;
            color: #CBD5E1;
            font-size: 0.98rem;
            line-height: 1.75;
        }

        .faq-card-box.open .faq-content-drawer {
            max-height: 250px;
            padding-bottom: 1.5rem;
        }

        /* ==========================================================================
           9. REGISTRATION & ADMISSION CTA (HIGH-ENERGY)
           ========================================================================== */
        .admission-call-wrap {
            padding: 5rem 0 6rem;
            background: var(--bg-page);
        }

        .admission-banner-card {
            background: var(--burgundy-gradient);
            border-radius: 32px;
            padding: 4rem 3.5rem;
            color: #FFFFFF;
            box-shadow: 0 25px 60px -10px var(--burgundy-glow);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 3rem;
            position: relative;
            overflow: hidden;
        }

        .admission-banner-card::before {
            content: '';
            position: absolute;
            top: -100px;
            left: -100px;
            width: 350px;
            height: 350px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
            pointer-events: none;
        }

        .admission-h2 {
            font-size: 2.6rem;
            font-weight: 900;
            line-height: 1.25;
            margin-bottom: 0.85rem;
        }

        .admission-sub {
            font-size: 1.1rem;
            opacity: 0.9;
            max-width: 580px;
            line-height: 1.7;
        }

        .admission-btns-vertical {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            min-width: 260px;
            flex-shrink: 0;
        }

        .btn-white-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.65rem;
            background: #FFFFFF;
            color: var(--burgundy);
            font-size: 1.05rem;
            font-weight: 800;
            padding: 0.95rem 1.8rem;
            border-radius: var(--radius-pill);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
            transition: all 0.3s ease;
        }

        .btn-white-action:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
            color: #560E1C;
        }

        .btn-whatsapp-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.65rem;
            background: #25D366;
            color: #031016;
            font-size: 1.05rem;
            font-weight: 800;
            padding: 0.95rem 1.8rem;
            border-radius: var(--radius-pill);
            box-shadow: 0 8px 25px rgba(37, 211, 102, 0.35);
            transition: all 0.3s ease;
        }

        .btn-whatsapp-action:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 30px rgba(37, 211, 102, 0.5);
        }

        /* ==========================================================================
           10. FOOTER & SHUKRAN ARC
           Deep midnight navy canvas matching brand palette with crisp contrast
           ========================================================================== */
        .site-footer {
            background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(138, 15, 26, 0.3) 0%, rgba(10, 10, 13, 0.98) 70%),
                        #08080A !important;
            color: #E2E8F0;
            position: relative;
            padding: 5.5rem 0 6rem;
            overflow: hidden;
            border-top: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 0 !important;
        }

        /* Ambient soft illumination */
        .site-footer::after {
            content: '';
            position: absolute;
            bottom: -120px;
            left: 50%;
            transform: translateX(-50%);
            width: 800px;
            height: 350px;
            border-radius: 50%;
            background: radial-gradient(ellipse, rgba(2, 132, 199, 0.08) 0%, transparent 70%);
            pointer-events: none;
        }

        .footer-grid-cols {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
            gap: 3rem;
            margin-bottom: 3.5rem;
            position: relative;
            z-index: 2;
        }

        .footer-brand-h {
            font-size: 1.5rem;
            font-weight: 900;
            color: #FFFFFF;
            margin-bottom: 0.85rem;
            letter-spacing: 0.5px;
        }

        .footer-desc-p {
            font-size: 0.95rem;
            color: #94A3B8;
            line-height: 1.75;
            max-width: 320px;
        }

        .footer-heading {
            font-size: 1.1rem;
            font-weight: 800;
            color: #FFFFFF;
            margin-bottom: 1.3rem;
            position: relative;
            padding-bottom: 0.4rem;
        }

        .footer-heading::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 28px;
            height: 2.5px;
            background: linear-gradient(90deg, #0284C7, #38BDF8);
            border-radius: 2px;
        }

        .footer-links-col {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .footer-links-col a {
            color: #CBD5E1;
            font-size: 0.92rem;
            font-weight: 600;
            transition: all 0.25s ease;
        }

        .footer-links-col a:hover {
            color: #38BDF8;
            padding-inline-start: 4px;
        }

        .footer-contact-item {
            color: #CBD5E1;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .footer-contact-item svg {
            color: #38BDF8;
            flex-shrink: 0;
        }

        /* Horizon Finale "Shukran / شكراً" */
        .shukran-finale-box {
            text-align: center;
            padding-top: 3.5rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
            z-index: 2;
        }

        .shukran-big-text {
            font-size: 4.2rem;
            font-weight: 900;
            color: #FFFFFF;
            letter-spacing: 2px;
            line-height: 1;
            margin-bottom: 0.75rem;
            text-shadow: 0 4px 25px rgba(2, 132, 199, 0.25);
        }

        .shukran-caption {
            font-size: 1rem;
            font-weight: 700;
            color: #94A3B8;
        }

        .copyright-tagline {
            font-size: 0.82rem;
            color: #64748B;
            margin-top: 1.5rem;
        }

        /* ==========================================================================
           11. MOBILE BOTTOM QUICK NAVIGATION BAR
           ========================================================================== */
        .mobile-thumb-bar {
            display: none;
            position: fixed;
            bottom: 1rem;
            left: 1rem;
            right: 1rem;
            background: rgba(255, 255, 255, 0.96);
            backdrop-filter: blur(16px);
            border: 1.5px solid var(--border-light);
            border-radius: var(--radius-pill);
            padding: 0.45rem 0.6rem;
            z-index: 9999;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
            justify-content: space-around;
            align-items: center;
        }

        .thumb-nav-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.2rem;
            color: var(--text-muted);
            font-size: 0.7rem;
            font-weight: 800;
            padding: 0.35rem 0.75rem;
        }

        .thumb-nav-btn.active, .thumb-nav-btn:hover {
            color: var(--burgundy);
        }

        .thumb-nav-btn.btn-featured {
            background: var(--burgundy-gradient);
            color: #FFFFFF;
            border-radius: var(--radius-pill);
            padding: 0.45rem 1rem;
            box-shadow: 0 4px 15px var(--burgundy-glow);
        }

        /* ==========================================================================
           12. KEY STATS & METRICS COUNTER STRIP
           ========================================================================== */
        .stats-strip-wrap {
            padding: 2.2rem 0;
            background: #FFFFFF;
            border-bottom: 1.5px solid var(--border-light);
            position: relative;
            z-index: 5;
        }

        .stats-strip-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
        }

        .stat-strip-item {
            display: flex;
            align-items: center;
            gap: 1.1rem;
            padding: 0.85rem 1.35rem;
            border-radius: var(--radius-md);
            background: #F8FAFC;
            border: 1px solid rgba(226, 232, 240, 0.85);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .stat-strip-item:hover {
            transform: translateY(-3px);
            border-color: var(--cyan-primary);
            background: #FFFFFF;
            box-shadow: 0 10px 25px -4px rgba(2, 132, 199, 0.12);
        }

        .stat-strip-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(2, 132, 199, 0.1);
            color: var(--cyan-primary);
            flex-shrink: 0;
            transition: all 0.3s ease;
        }

        .stat-strip-item:hover .stat-strip-icon {
            background: var(--cyan-primary);
            color: #FFFFFF;
            transform: rotate(-4deg) scale(1.05);
        }

        .stat-strip-val {
            font-size: 1.65rem;
            font-weight: 900;
            color: var(--text-heading);
            line-height: 1.1;
            font-family: 'Plus Jakarta Sans', sans-serif;
            letter-spacing: -0.5px;
        }

        .stat-strip-label {
            font-size: 0.82rem;
            font-weight: 700;
            color: var(--text-muted);
            margin-top: 3px;
        }

        /* ==========================================================================
           13. HALL OF FAME: TOP ACHIEVERS & HONORED STUDENTS
           Prestigious Academic Laurels with Clean Modern Cards
           ========================================================================== */
        .hall-fame-section {
            padding: 7rem 0 6.5rem;
            background: #FFFFFF;
            position: relative;
        }

        .hall-fame-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.8rem;
            margin-top: 3.5rem;
        }

        .honor-card {
            background: #FFFFFF;
            border: 1.5px solid rgba(226, 232, 240, 0.9);
            border-radius: 20px;
            padding: 2.2rem 1.4rem 1.6rem;
            text-align: center;
            position: relative;
            box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.05);
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .honor-card:hover {
            transform: translateY(-8px);
            border-color: rgba(217, 119, 6, 0.45);
            box-shadow: 0 20px 35px -8px rgba(217, 119, 6, 0.15), 0 0 20px rgba(245, 158, 11, 0.1);
        }

        .honor-medal-badge {
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, #D97706 0%, #F59E0B 100%);
            color: #FFFFFF;
            padding: 0.28rem 0.95rem;
            border-radius: var(--radius-pill);
            font-size: 0.72rem;
            font-weight: 900;
            box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35);
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            white-space: nowrap;
        }

        .honor-avatar-box {
            width: 82px;
            height: 82px;
            border-radius: 50%;
            margin: 0.6rem auto 1.1rem;
            background: linear-gradient(135deg, rgba(2, 132, 199, 0.12), rgba(122, 21, 40, 0.08));
            border: 3px solid #FFFFFF;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--burgundy);
            position: relative;
        }

        .honor-avatar-box svg {
            width: 42px;
            height: 42px;
        }

        .honor-score-pill {
            position: absolute;
            bottom: -6px;
            right: -6px;
            background: var(--burgundy);
            color: #FFFFFF;
            font-size: 0.76rem;
            font-weight: 900;
            padding: 0.2rem 0.55rem;
            border-radius: 8px;
            border: 2px solid #FFFFFF;
            font-family: 'Plus Jakarta Sans', sans-serif;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        }

        .honor-student-name {
            font-size: 1.18rem;
            font-weight: 800;
            color: var(--text-heading);
            margin-bottom: 0.35rem;
        }

        .honor-stream-tag {
            display: inline-block;
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--cyan-primary);
            background: rgba(2, 132, 199, 0.09);
            padding: 0.2rem 0.7rem;
            border-radius: var(--radius-pill);
            margin-bottom: 0.9rem;
            border: 1px solid rgba(2, 132, 199, 0.2);
        }

        .honor-acceptance-box {
            background: #F8FAFC;
            border-radius: 12px;
            padding: 0.75rem 0.85rem;
            font-size: 0.82rem;
            color: #CBD5E1;
            border: 1px dashed rgba(203, 213, 225, 0.9);
            line-height: 1.55;
        }

        .honor-acceptance-box strong {
            color: var(--text-heading);
            display: block;
            margin-bottom: 2px;
            font-weight: 800;
        }

        /* ==========================================================================
           14. FACULTY & DISTINGUISHED TEACHERS
           ========================================================================== */
        .faculty-section {
            padding: 7rem 0 6.5rem;
            background: var(--bg-page);
            position: relative;
        }

        .faculty-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.8rem;
            margin-top: 3.5rem;
        }

        .faculty-card {
            background: #FFFFFF;
            border: 1.5px solid rgba(226, 232, 240, 0.9);
            border-radius: 20px;
            padding: 1.8rem 1.4rem;
            box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.05);
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .faculty-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--burgundy-gradient);
            transition: height 0.3s ease;
        }

        .faculty-card:hover {
            transform: translateY(-6px);
            border-color: rgba(122, 21, 40, 0.35);
            box-shadow: 0 20px 35px -8px rgba(15, 23, 42, 0.1);
        }

        .faculty-card:hover::before {
            height: 5px;
        }

        .faculty-avatar-row {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.1rem;
        }

        .faculty-avatar-circle {
            width: 58px;
            height: 58px;
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(122, 21, 40, 0.12), rgba(2, 132, 199, 0.12));
            border: 2px solid rgba(122, 21, 40, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--burgundy);
            flex-shrink: 0;
        }

        .faculty-name-wrap h4 {
            font-size: 1.08rem;
            font-weight: 800;
            color: var(--text-heading);
            margin-bottom: 3px;
        }

        .faculty-subject-badge {
            font-size: 0.76rem;
            font-weight: 800;
            color: var(--burgundy);
        }

        .faculty-bio-p {
            font-size: 0.86rem;
            color: var(--text-muted);
            line-height: 1.6;
            margin-bottom: 1.2rem;
            min-height: 48px;
        }

        .faculty-tag-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.74rem;
            font-weight: 700;
            color: #059669;
            background: rgba(16, 185, 129, 0.08);
            border: 1px solid rgba(16, 185, 129, 0.2);
            padding: 0.3rem 0.65rem;
            border-radius: var(--radius-pill);
        }

        /* ==========================================================================
           15. CAMPUS LIFE, LABS & FACILITIES
           ========================================================================== */
        .campus-life-section {
            padding: 7rem 0 6.5rem;
            background: #FFFFFF;
            position: relative;
        }

                .faculty-footer-action {
            margin-top: 2.8rem;
            display: flex;
            justify-content: center;
        }

        .btn-faculty-all {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            background: #FFFFFF;
            color: var(--burgundy);
            font-size: 0.95rem;
            font-weight: 800;
            padding: 0.85rem 2.2rem;
            border-radius: var(--radius-pill);
            border: 1.5px solid rgba(122, 21, 40, 0.25);
            box-shadow: 0 8px 20px -6px rgba(122, 21, 40, 0.12);
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .btn-faculty-all:hover {
            background: var(--burgundy);
            color: #FFFFFF;
            transform: translateY(-3px);
            box-shadow: 0 14px 28px -6px rgba(122, 21, 40, 0.3);
        }

        .btn-faculty-all .arrow-icon {
            font-size: 1.1rem;
            transition: transform 0.3s ease;
        }

        .btn-faculty-all:hover .arrow-icon {
            transform: translateX(-4px);
        }

        .campus-gallery-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.8rem;
            margin-top: 3.5rem;
        }

        .campus-item-card.is-extra-card {
            display: none;
            opacity: 0;
            transform: translateY(16px);
        }

        .campus-item-card.is-extra-card.is-revealed {
            display: flex;
            animation: campusFadeIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

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

        .campus-toggle-wrap {
            margin-top: 2.8rem;
            display: flex;
            justify-content: center;
        }

        .btn-toggle-campus {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            background: linear-gradient(135deg, #03161F 0%, #032532 100%);
            color: #FFFFFF;
            font-size: 0.95rem;
            font-weight: 700;
            padding: 0.85rem 2.2rem;
            border-radius: var(--radius-pill);
            border: 1.5px solid rgba(2, 132, 199, 0.35);
            box-shadow: 0 8px 24px -6px rgba(3, 22, 31, 0.25);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            font-family: inherit;
        }

        .btn-toggle-campus:hover {
            background: linear-gradient(135deg, #7A1528 0%, #901B31 100%);
            border-color: rgba(255, 255, 255, 0.3);
            transform: translateY(-3px);
            box-shadow: 0 14px 28px -6px rgba(122, 21, 40, 0.35);
        }

        .btn-toggle-campus .btn-toggle-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.12);
            transition: transform 0.35s ease;
        }

        .btn-toggle-campus.is-open .btn-toggle-icon {
            transform: rotate(180deg);
        }

        .campus-item-card {
            background: #FFFFFF;
            border: 1.5px solid rgba(226, 232, 240, 0.9);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.06);
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            flex-direction: column;
        }

        .campus-item-card:hover {
            transform: translateY(-6px);
            border-color: rgba(2, 132, 199, 0.4);
            box-shadow: 0 20px 35px -8px rgba(15, 23, 42, 0.12);
        }

        .campus-img-frame {
            position: relative;
            height: 220px;
            overflow: hidden;
            background: #03161F;
        }

        .campus-img-frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .campus-item-card:hover .campus-img-frame img {
            transform: scale(1.08);
        }

        .campus-img-badge {
            position: absolute;
            top: 14px;
            right: 14px;
            background: rgba(3, 22, 31, 0.85);
            backdrop-filter: blur(8px);
            color: #FFFFFF;
            font-size: 0.74rem;
            font-weight: 800;
            padding: 0.25rem 0.75rem;
            border-radius: var(--radius-pill);
            border: 1px solid rgba(255, 255, 255, 0.2);
            z-index: 2;
        }

        .campus-body-wrap {
            padding: 1.4rem 1.4rem 1.5rem;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .campus-title-h4 {
            font-size: 1.15rem;
            font-weight: 800;
            color: var(--text-heading);
            margin-bottom: 0.45rem;
        }

        .campus-desc-p {
            font-size: 0.88rem;
            color: var(--text-muted);
            line-height: 1.6;
        }

        /* ==========================================================================
           16. MEDIA UPDATES, CALENDAR & ANNOUNCEMENTS
           ========================================================================== */
        .updates-section {
            padding: 7rem 0 6.5rem;
            background: var(--bg-page);
            position: relative;
        }

        .updates-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.8rem;
            margin-top: 3.5rem;
        }

        .update-card {
            background: #FFFFFF;
            border: 1.5px solid rgba(226, 232, 240, 0.9);
            border-radius: 20px;
            padding: 1.8rem 1.6rem;
            box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.05);
            transition: all 0.35s ease;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .update-card:hover {
            transform: translateY(-6px);
            border-color: var(--cyan-primary);
            box-shadow: 0 20px 35px -8px rgba(2, 132, 199, 0.12);
        }

        .update-header-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
        }

        .update-type-pill {
            font-size: 0.74rem;
            font-weight: 800;
            padding: 0.25rem 0.75rem;
            border-radius: var(--radius-pill);
        }

        .update-type-pill.news {
            background: rgba(2, 132, 199, 0.1);
            color: var(--cyan-primary);
            border: 1px solid rgba(2, 132, 199, 0.2);
        }

        .update-type-pill.event {
            background: rgba(217, 119, 6, 0.1);
            color: #D97706;
            border: 1px solid rgba(217, 119, 6, 0.2);
        }

        .update-type-pill.notice {
            background: rgba(122, 21, 40, 0.1);
            color: var(--burgundy);
            border: 1px solid rgba(122, 21, 40, 0.2);
        }

        .update-date-text {
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--text-muted);
        }

        .update-h3 {
            font-size: 1.15rem;
            font-weight: 800;
            color: var(--text-heading);
            margin-bottom: 0.65rem;
            line-height: 1.45;
        }

        .update-excerpt {
            font-size: 0.88rem;
            color: var(--text-muted);
            line-height: 1.65;
            margin-bottom: 1.2rem;
        }

        .update-action-link {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.85rem;
            font-weight: 800;
            color: var(--burgundy);
            transition: gap 0.2s ease;
            cursor: pointer;
        }

        .update-action-link:hover {
            gap: 0.65rem;
        }

        /* ==========================================================================
           17. INTERACTIVE SYSTEM MODALS (LOGIN GATEWAY & ADMISSION WIZARD)
           ========================================================================== */
        .city-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(3, 22, 31, 0.75);
            backdrop-filter: blur(8px);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.2rem;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .city-modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .city-modal-dialog {
            background: #FFFFFF;
            border-radius: 24px;
            width: 100%;
            max-width: 580px;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
            box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.35);
            border: 1.5px solid rgba(226, 232, 240, 0.9);
            transform: translateY(20px) scale(0.97);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .city-modal-overlay.active .city-modal-dialog {
            transform: translateY(0) scale(1);
        }

        .city-modal-header {
            padding: 1.4rem 1.8rem;
            border-bottom: 1px solid var(--border-light);
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            background: #FFFFFF;
            z-index: 5;
            border-radius: 24px 24px 0 0;
        }

        .city-modal-title-wrap {
            display: flex;
            align-items: center;
            gap: 0.8rem;
        }

        .city-modal-logo {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            background: var(--burgundy-gradient);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #FFFFFF;
        }

        .city-modal-title {
            font-size: 1.15rem;
            font-weight: 800;
            color: var(--text-heading);
            margin: 0;
        }

        .city-modal-sub {
            font-size: 0.78rem;
            color: var(--text-muted);
            margin-top: 2px;
        }

        .btn-close-modal {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: #F1F5F9;
            color: #64748B;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .btn-close-modal:hover {
            background: #E2E8F0;
            color: #FFFFFF;
        }

        .city-modal-body {
            padding: 1.8rem;
        }

        /* Modal Role Tabs */
        .modal-tabs-row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.4rem;
            background: #F1F5F9;
            padding: 0.35rem;
            border-radius: 14px;
            margin-bottom: 1.5rem;
        }

        .modal-tab-btn {
            padding: 0.65rem 0.3rem;
            border-radius: 10px;
            font-size: 0.76rem;
            font-weight: 800;
            color: #64748B;
            text-align: center;
            border: none;
            background: transparent;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .modal-tab-btn.active {
            background: #FFFFFF;
            color: var(--burgundy);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        /* Form Controls */
        .city-form-group {
            margin-bottom: 1.15rem;
        }

        .city-form-label {
            display: block;
            font-size: 0.84rem;
            font-weight: 700;
            color: var(--text-heading);
            margin-bottom: 0.45rem;
        }

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

        .city-input-icon {
            position: absolute;
            right: 14px;
            color: #94A3B8;
            pointer-events: none;
            display: flex;
            align-items: center;
        }

        .city-input-field {
            width: 100%;
            padding: 0.8rem 2.8rem 0.8rem 1rem;
            border-radius: 12px;
            border: 1.5px solid var(--border-light);
            background: #F8FAFC;
            font-size: 0.92rem;
            color: var(--text-heading);
            font-family: inherit;
            transition: all 0.25s ease;
        }

        .city-input-field:focus {
            outline: none;
            background: #FFFFFF;
            border-color: var(--cyan-primary);
            box-shadow: 0 0 0 4px var(--cyan-glow);
        }

        .btn-toggle-pwd {
            position: absolute;
            left: 12px;
            background: transparent;
            border: none;
            color: #94A3B8;
            cursor: pointer;
            display: flex;
            align-items: center;
        }

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

        .btn-submit-action {
            width: 100%;
            padding: 0.9rem;
            border-radius: 12px;
            background: var(--burgundy-gradient);
            color: #FFFFFF;
            font-size: 1rem;
            font-weight: 800;
            border: none;
            cursor: pointer;
            box-shadow: 0 6px 18px var(--burgundy-glow);
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .btn-submit-action:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 24px var(--burgundy-glow);
        }

        /* Multi-step Admission Form Wizard */
        .admission-wizard-steps {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 2rem;
            position: relative;
        }

        .admission-step-node {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.35rem;
            position: relative;
            z-index: 2;
        }

        .step-circle {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #F1F5F9;
            color: #64748B;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.88rem;
            font-weight: 900;
            border: 2px solid #E2E8F0;
            transition: all 0.3s ease;
        }

        .admission-step-node.active .step-circle {
            background: var(--burgundy);
            color: #FFFFFF;
            border-color: var(--burgundy);
            box-shadow: 0 4px 12px var(--burgundy-glow);
        }

        .admission-step-node.completed .step-circle {
            background: #10B981;
            color: #FFFFFF;
            border-color: #10B981;
        }

        .step-label {
            font-size: 0.74rem;
            font-weight: 700;
            color: #64748B;
        }

        .admission-step-node.active .step-label {
            color: var(--burgundy);
            font-weight: 800;
        }

        .wizard-progress-track {
            position: absolute;
            top: 18px;
            left: 20px;
            right: 20px;
            height: 3px;
            background: #E2E8F0;
            z-index: 1;
        }

        .wizard-progress-fill {
            height: 100%;
            width: 0%;
            background: var(--burgundy-gradient);
            transition: width 0.35s ease;
        }

        .wizard-step-panel {
            display: none;
        }

        .wizard-step-panel.active {
            display: block;
            animation: fadeInStep 0.3s ease;
        }

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

        .wizard-nav-btns {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 1.8rem;
            padding-top: 1.2rem;
            border-top: 1px solid var(--border-light);
            gap: 1rem;
        }

        .btn-wizard-prev {
            padding: 0.75rem 1.4rem;
            border-radius: 12px;
            background: #F1F5F9;
            color: #CBD5E1;
            font-size: 0.9rem;
            font-weight: 800;
            border: 1px solid var(--border-light);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .btn-wizard-prev:hover {
            background: #E2E8F0;
        }

        .btn-wizard-next {
            padding: 0.75rem 1.8rem;
            border-radius: 12px;
            background: var(--burgundy-gradient);
            color: #FFFFFF;
            font-size: 0.9rem;
            font-weight: 800;
            border: none;
            cursor: pointer;
            box-shadow: 0 4px 15px var(--burgundy-glow);
            transition: all 0.2s ease;
        }

        .btn-wizard-next:hover {
            transform: translateY(-2px);
        }

        .upload-dropzone {
            border: 2px dashed rgba(2, 132, 199, 0.4);
            border-radius: 14px;
            padding: 1.8rem;
            text-align: center;
            background: rgba(2, 132, 199, 0.03);
            cursor: pointer;
            transition: all 0.25s ease;
        }

        .upload-dropzone:hover {
            border-color: var(--cyan-primary);
            background: rgba(2, 132, 199, 0.07);
        }

        /* Success Card in Wizard */
        .admission-success-card {
            text-align: center;
            padding: 1.5rem 0;
        }

        .success-checkmark-circle {
            width: 68px;
            height: 68px;
            border-radius: 50%;
            background: #10B981;
            color: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.2rem;
            box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35);
        }

        .app-code-display {
            background: #F8FAFC;
            border: 1.5px dashed var(--burgundy);
            padding: 1rem;
            border-radius: 14px;
            margin: 1.2rem 0;
            font-family: 'Plus Jakarta Sans', monospace;
            font-size: 1.5rem;
            font-weight: 900;
            color: var(--burgundy);
            letter-spacing: 2px;
        }

        /* Toast Notification */
        .city-toast {
            position: fixed;
            bottom: 2.2rem;
            left: 50%;
            transform: translateX(-50%) translateY(100px);
            background: #03161F;
            color: #FFFFFF;
            padding: 0.9rem 1.8rem;
            border-radius: var(--radius-pill);
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
            font-size: 0.92rem;
            font-weight: 700;
            z-index: 100000;
            display: flex;
            align-items: center;
            gap: 0.65rem;
            border: 1px solid rgba(255, 255, 255, 0.15);
            opacity: 0;
            pointer-events: none;
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .city-toast.show {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
        }

        /* ==========================================================================
           18. RESPONSIVE QUERIES
           ========================================================================== */
        @media (max-width: 1199px) {
            .nav-links-desktop { display: none !important; }
            .desktop-only-action { display: none !important; }
            .btn-nav-mobile-login { display: inline-flex !important; }
            .btn-hamburger { display: flex !important; }
        }

        @media (max-width: 1024px) {
            .hero-stage-content {
                width: 48%;
                gap: 0.5rem;
            }
            .hero-stage-h1 { font-size: 1.85rem; }
            .smart-hubs-grid { grid-template-columns: repeat(2, 1fr); }
            .numbered-pillars-grid { grid-template-columns: 1fr; }
            .subjects-showcase-grid { grid-template-columns: 1fr; }
            .pocket-phones-grid { grid-template-columns: repeat(2, 1fr); }
            .stats-strip-grid { grid-template-columns: repeat(2, 1fr); }
            .hall-fame-grid { grid-template-columns: repeat(2, 1fr); }
            .faculty-grid { grid-template-columns: repeat(2, 1fr); }
            .campus-gallery-grid { grid-template-columns: repeat(2, 1fr); }
            .updates-grid { grid-template-columns: repeat(2, 1fr); }
            .admission-banner-card { flex-direction: column; text-align: center; }
            .admission-btns-vertical { width: 100%; }
            .footer-grid-cols { grid-template-columns: 1fr 1fr; }
        }

        @media (max-width: 991px) {
            html { font-size: 15px; }
            .top-navbar-wrapper {
                border-radius: 0 !important;
            }
            .navbar-inner {
                height: 66px;
                gap: 0.5rem;
                padding: 0 0.5rem;
            }
            .nav-brand {
                gap: 0.65rem;
            }
            .nav-logo-box {
                width: 40px;
                height: 40px;
                padding: 4px;
            }
            .nav-brand-title {
                font-size: 1.15rem;
            }
            .nav-brand-sub {
                font-size: 0.68rem;
            }
            .nav-actions-group {
                gap: 0.55rem;
            }
            .btn-nav-mobile-login {
                padding: 0.45rem 0.85rem;
                font-size: 0.8rem;
            }
            .btn-hamburger {
                width: 40px;
                height: 40px;
                padding: 8px;
            }
            .hero-stage-overlay {
                position: static;
                padding: 1.5rem 1.25rem 2.5rem;
                display: block;
                background: transparent;
            }
            .hero-stage-content {
                width: 100%;
                max-width: 620px;
                margin: 0 auto;
                background: rgba(18, 18, 24, 0.92) !important;
                border-radius: 20px;
                padding: 1.8rem 1.3rem;
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
                border: 1.5px solid rgba(255, 255, 255, 0.08);
                text-align: center;
                align-items: center;
                gap: 1rem;
            }
            .hero-stage-h1 { font-size: 1.85rem; text-shadow: none; }
            .hero-stage-desc { text-shadow: none; }
            .hero-stage-btns { flex-direction: column; width: 100%; }
            .btn-stage-primary, .btn-stage-secondary { width: 100%; justify-content: center; }
            .hero-stage-trust-row { flex-direction: column; width: 100%; }
            .stage-trust-item { width: 100%; justify-content: center; }
            .smart-hubs-grid { grid-template-columns: 1fr; }
            .pocket-phones-grid { grid-template-columns: 1fr; }
            .footer-grid-cols { grid-template-columns: 1fr; }
            .admission-banner-card { padding: 2.5rem 1.5rem; }
            .admission-h2 { font-size: 1.85rem; }
            .mobile-thumb-bar { display: flex; }
            .site-footer { padding-bottom: 6rem; }
        }

        @media (max-width: 768px) {
            .stats-strip-grid { grid-template-columns: 1fr; }
            .hall-fame-grid { grid-template-columns: 1fr; }
            .faculty-grid { grid-template-columns: 1fr; }
            .campus-gallery-grid { grid-template-columns: 1fr; }
            .updates-grid { grid-template-columns: 1fr; }
            .modal-tabs-row { grid-template-columns: repeat(2, 1fr); }
            .city-form-row { grid-template-columns: 1fr; }
        }

        /* ==========================================================================
           15-B. OUR CAMPUSES & REGIONAL BRANCHES (فروع ومقرات المدارس)
           ========================================================================== */
        .branches-showcase-section {
            padding: 7rem 0 6.5rem;
            background: #0A0A0D;
            position: relative;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .branches-cards-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.8rem;
            margin-top: 3.5rem;
        }

        @media (max-width: 1200px) {
            .branches-cards-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

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

        .branch-item-card {
            background: #141418; border: 1.5px solid rgba(255, 255, 255, 0.08);
            border: 1.5px solid rgba(226, 232, 240, 0.95);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.06);
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .branch-item-card:hover {
            transform: translateY(-8px);
            border-color: rgba(2, 132, 199, 0.45);
            box-shadow: 0 20px 35px -8px rgba(15, 23, 42, 0.12);
        }

        .branch-visual-frame {
            position: relative;
            height: 195px;
            overflow: hidden;
            background: #03161F;
        }

        .branch-visual-frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .branch-item-card:hover .branch-visual-frame img {
            transform: scale(1.08);
        }

        .branch-badge-overlay {
            position: absolute;
            top: 12px;
            right: 12px;
            left: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 2;
        }

        .branch-country-tag {
            background: rgba(3, 22, 31, 0.88);
            backdrop-filter: blur(8px);
            color: #FFFFFF;
            font-size: 0.76rem;
            font-weight: 800;
            padding: 0.28rem 0.8rem;
            border-radius: var(--radius-pill);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .branch-code-tag {
            background: var(--burgundy-gradient);
            color: #FFFFFF;
            font-size: 0.72rem;
            font-weight: 900;
            padding: 0.25rem 0.65rem;
            border-radius: var(--radius-pill);
            box-shadow: 0 2px 8px rgba(122, 21, 40, 0.35);
        }

        .branch-content-wrap {
            padding: 1.5rem 1.4rem 1.4rem;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .branch-title-h3 {
            font-size: 1.18rem;
            font-weight: 800;
            color: var(--text-heading);
            margin-bottom: 0.25rem;
        }

        .branch-en-sub {
            font-size: 0.82rem;
            font-weight: 700;
            color: #64748B;
            margin-bottom: 1.1rem;
            display: block;
        }

        .branch-meta-list {
            list-style: none;
            padding: 0;
            margin: 0 0 1.3rem;
            display: flex;
            flex-direction: column;
            gap: 0.65rem;
        }

        .branch-meta-item {
            display: flex;
            align-items: flex-start;
            gap: 0.6rem;
            font-size: 0.86rem;
            color: #CBD5E1;
            line-height: 1.5;
        }

        .branch-meta-item svg {
            flex-shrink: 0;
            margin-top: 2px;
            color: var(--burgundy);
        }

        .branch-meta-item a {
            color: inherit;
            text-decoration: none;
            transition: color 0.2s ease;
        }

        .branch-meta-item a:hover {
            color: var(--burgundy);
        }

        .branch-card-actions-row {
            display: flex;
            gap: 0.65rem;
            align-items: center;
            margin-top: auto;
            padding-top: 1.1rem;
            border-top: 1px solid rgba(226, 232, 240, 0.85);
        }

        .btn-branch-apply {
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.45rem;
            background: linear-gradient(135deg, #7A1528 0%, #901B31 100%);
            color: #FFFFFF !important;
            font-size: 0.9rem;
            font-weight: 800;
            padding: 0.72rem 1rem;
            border-radius: var(--radius-pill);
            border: 1px solid rgba(255, 255, 255, 0.15);
            text-decoration: none;
            box-shadow: 0 4px 12px rgba(122, 21, 40, 0.25);
            transition: all 0.25s ease;
            cursor: pointer;
        }

        .btn-branch-apply:hover {
            background: linear-gradient(135deg, #901B31 0%, #A8233C 100%);
            transform: translateY(-2px);
            box-shadow: 0 8px 18px rgba(122, 21, 40, 0.35);
        }

        .btn-branch-contact {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(2, 132, 199, 0.08);
            border: 1px solid rgba(2, 132, 199, 0.25);
            color: #0284C7;
            text-decoration: none;
            transition: all 0.25s ease;
            flex-shrink: 0;
        }

        .btn-branch-contact:hover {
            background: #0284C7;
            color: #FFFFFF;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
        }
    

/* ==========================================================================
   19. UNIVERSAL SITE-WIDE DARK LUXURY PALETTE (OBSIDIAN, CRIMSON & CRISP WHITE)
   Scoped strictly to Dark Mode to allow seamless Light Mode switching
   ========================================================================== */

/* Page Background in Dark Mode */
html:not([data-theme="light"]),
html[data-theme="dark"],
html.city-dark-mode {
    background-color: #0B0B0E !important;
    color: #E2E8F0 !important;
}

html:not([data-theme="light"]) body,
html:not([data-theme="light"]) .site-content,
html:not([data-theme="light"]) main,
html:not([data-theme="light"]) #main,
html:not([data-theme="light"]) .content-area,
html[data-theme="dark"] body,
html[data-theme="dark"] .site-content,
html[data-theme="dark"] main,
html[data-theme="dark"] #main,
html[data-theme="dark"] .content-area,
html.city-dark-mode body,
html.city-dark-mode .site-content,
html.city-dark-mode main,
html.city-dark-mode #main,
html.city-dark-mode .content-area {
    background-color: #0B0B0E !important;
    color: #E2E8F0 !important;
}

/* 1. Quick Access 5 Cards Section (Dark Mode) */
html:not([data-theme="light"]) .city-quick-access,
html:not([data-theme="light"]) #cityQuickAccess,
html[data-theme="dark"] .city-quick-access,
html[data-theme="dark"] #cityQuickAccess {
    background: #0B0B0E !important;
    padding: 3rem 0 !important;
}

html:not([data-theme="light"]) .city-qa-card,
html[data-theme="dark"] .city-qa-card {
    background: #141418 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
    color: #FFFFFF !important;
    transition: all 0.3s ease !important;
}

html:not([data-theme="light"]) .city-qa-card:hover,
html[data-theme="dark"] .city-qa-card:hover {
    transform: translateY(-6px) !important;
    border-color: #D31F33 !important;
    box-shadow: 0 20px 45px rgba(211, 31, 51, 0.25) !important;
}

html:not([data-theme="light"]) .city-qa-card__icon-box,
html[data-theme="dark"] .city-qa-card__icon-box {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

html:not([data-theme="light"]) .city-qa-card:hover .city-qa-card__icon-box,
html[data-theme="dark"] .city-qa-card:hover .city-qa-card__icon-box {
    background: #D31F33 !important;
    color: #FFFFFF !important;
    border-color: #D31F33 !important;
    box-shadow: 0 0 20px rgba(211, 31, 51, 0.5) !important;
}

html:not([data-theme="light"]) .city-qa-card__title,
html[data-theme="dark"] .city-qa-card__title {
    color: #FFFFFF !important;
    font-weight: 800 !important;
}

html:not([data-theme="light"]) .city-qa-card__desc,
html[data-theme="dark"] .city-qa-card__desc {
    color: #CBD5E1 !important;
    font-size: 0.88rem !important;
}

html:not([data-theme="light"]) .city-qa-card__link,
html[data-theme="dark"] .city-qa-card__link {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

html:not([data-theme="light"]) .city-qa-card__link .arrow,
html[data-theme="dark"] .city-qa-card__link .arrow {
    color: #D31F33 !important;
}

/* 2. About Section & Bento Cards (Dark Mode) */
html:not([data-theme="light"]) .city-about-section,
html:not([data-theme="light"]) #cityAbout,
html[data-theme="dark"] .city-about-section,
html[data-theme="dark"] #cityAbout {
    background: #0B0B0E !important;
    padding: 5rem 0 !important;
    color: #E2E8F0 !important;
}

html:not([data-theme="light"]) .cis-bento-narrative,
html:not([data-theme="light"]) .city-about__narrative,
html[data-theme="dark"] .cis-bento-narrative,
html[data-theme="dark"] .city-about__narrative {
    background: #141418 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6) !important;
    color: #E2E8F0 !important;
}

html:not([data-theme="light"]) .cis-bento-card,
html:not([data-theme="light"]) .city-about__visual-card,
html:not([data-theme="light"]) .cis-bento-card--vision,
html:not([data-theme="light"]) .cis-bento-card--mission,
html[data-theme="dark"] .cis-bento-card,
html[data-theme="dark"] .city-about__visual-card,
html[data-theme="dark"] .cis-bento-card--vision,
html[data-theme="dark"] .cis-bento-card--mission {
    background: #141418 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

html:not([data-theme="light"]) .cis-badge-pill,
html:not([data-theme="light"]) .city-section-badge,
html[data-theme="dark"] .cis-badge-pill,
html[data-theme="dark"] .city-section-badge {
    background: rgba(211, 31, 51, 0.15) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(211, 31, 51, 0.35) !important;
}

html:not([data-theme="light"]) .cis-badge-pill--accent,
html[data-theme="dark"] .cis-badge-pill--accent {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

html:not([data-theme="light"]) .city-about__lead-title,
html:not([data-theme="light"]) .city-section-title,
html:not([data-theme="light"]) .cis-bento-card__title,
html[data-theme="dark"] .city-about__lead-title,
html[data-theme="dark"] .city-section-title,
html[data-theme="dark"] .cis-bento-card__title {
    color: #FFFFFF !important;
    font-weight: 900 !important;
}

html:not([data-theme="light"]) .city-about__lead-text,
html:not([data-theme="light"]) .city-about__lead-sub,
html:not([data-theme="light"]) .city-section-subtitle,
html:not([data-theme="light"]) .cis-bento-card__text,
html[data-theme="dark"] .city-about__lead-text,
html[data-theme="dark"] .city-about__lead-sub,
html[data-theme="dark"] .city-section-subtitle,
html[data-theme="dark"] .cis-bento-card__text {
    color: #CBD5E1 !important;
}

html:not([data-theme="light"]) .city-vision-callout,
html:not([data-theme="light"]) .cis-bento-callout,
html[data-theme="dark"] .city-vision-callout,
html[data-theme="dark"] .cis-bento-callout {
    background: rgba(211, 31, 51, 0.1) !important;
    border: 1.5px solid rgba(211, 31, 51, 0.35) !important;
    border-radius: 18px !important;
    color: #FFFFFF !important;
}

html:not([data-theme="light"]) .city-vision-callout__icon,
html[data-theme="dark"] .city-vision-callout__icon {
    color: #D31F33 !important;
}

html:not([data-theme="light"]) .city-vision-callout__title,
html[data-theme="dark"] .city-vision-callout__title {
    color: #FFFFFF !important;
    font-weight: 800 !important;
}

html:not([data-theme="light"]) .city-vision-callout__desc,
html[data-theme="dark"] .city-vision-callout__desc {
    color: #CBD5E1 !important;
}

/* Action button in About section (Dark Mode) */
html:not([data-theme="light"]) .city-about__cta-btn,
html:not([data-theme="light"]) .cis-btn-primary,
html:not([data-theme="light"]) .city-btn-primary,
html[data-theme="dark"] .city-about__cta-btn,
html[data-theme="dark"] .cis-btn-primary,
html[data-theme="dark"] .city-btn-primary {
    background: #FFFFFF !important;
    color: #0C0C0E !important;
    font-weight: 900 !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.45) !important;
    transition: all 0.3s ease !important;
}

html:not([data-theme="light"]) .city-about__cta-btn:hover,
html:not([data-theme="light"]) .cis-btn-primary:hover,
html:not([data-theme="light"]) .city-btn-primary:hover,
html[data-theme="dark"] .city-about__cta-btn:hover,
html[data-theme="dark"] .cis-btn-primary:hover,
html[data-theme="dark"] .city-btn-primary:hover {
    background: #F1F5F9 !important;
    box-shadow: 0 0 35px rgba(255, 255, 255, 0.7) !important;
    transform: translateY(-2px) !important;
}

/* Secondary Buttons (Dark Mode) */
html:not([data-theme="light"]) .cis-btn-secondary,
html:not([data-theme="light"]) .city-btn-secondary,
html[data-theme="dark"] .cis-btn-secondary,
html[data-theme="dark"] .city-btn-secondary {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
    color: #FFFFFF !important;
    border-radius: var(--radius-pill) !important;
}

html:not([data-theme="light"]) .cis-btn-secondary:hover,
html:not([data-theme="light"]) .city-btn-secondary:hover,
html[data-theme="dark"] .cis-btn-secondary:hover,
html[data-theme="dark"] .city-btn-secondary:hover {
    border-color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.18) !important;
    color: #FFFFFF !important;
}

/* 3. Academic Programs & Stage Cards (Dark Mode) */
html:not([data-theme="light"]) .city-programs-section,
html:not([data-theme="light"]) .academic-programs-section,
html:not([data-theme="light"]) .city-programs-wrapper,
html[data-theme="dark"] .city-programs-section,
html[data-theme="dark"] .academic-programs-section,
html[data-theme="dark"] .city-programs-wrapper {
    background: #0B0B0E !important;
}

html:not([data-theme="light"]) .city-program-card,
html:not([data-theme="light"]) .city-stage-card,
html:not([data-theme="light"]) .program-item-card,
html[data-theme="dark"] .city-program-card,
html[data-theme="dark"] .city-stage-card,
html[data-theme="dark"] .program-item-card {
    background: #141418 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

html:not([data-theme="light"]) .city-program-card__title,
html:not([data-theme="light"]) .city-stage-card__title,
html[data-theme="dark"] .city-program-card__title,
html[data-theme="dark"] .city-stage-card__title {
    color: #FFFFFF !important;
}

html:not([data-theme="light"]) .city-program-card__desc,
html:not([data-theme="light"]) .city-stage-card__desc,
html[data-theme="dark"] .city-program-card__desc,
html[data-theme="dark"] .city-stage-card__desc {
    color: #CBD5E1 !important;
}

/* 4. Teachers, Campuses, FAQ, Gallery & News Sections (Dark Mode) */
html:not([data-theme="light"]) .city-teachers-section,
html:not([data-theme="light"]) .city-branches-section,
html:not([data-theme="light"]) .city-gallery-section,
html:not([data-theme="light"]) .city-news-section,
html:not([data-theme="light"]) .city-faq-section,
html[data-theme="dark"] .city-teachers-section,
html[data-theme="dark"] .city-branches-section,
html[data-theme="dark"] .city-gallery-section,
html[data-theme="dark"] .city-news-section,
html[data-theme="dark"] .city-faq-section {
    background: #0B0B0E !important;
    color: #E2E8F0 !important;
}

html:not([data-theme="light"]) .city-teacher-card,
html:not([data-theme="light"]) .city-branch-card,
html:not([data-theme="light"]) .city-gallery-card,
html:not([data-theme="light"]) .city-news-card,
html:not([data-theme="light"]) .city-faq-item,
html[data-theme="dark"] .city-teacher-card,
html[data-theme="dark"] .city-branch-card,
html[data-theme="dark"] .city-gallery-card,
html[data-theme="dark"] .city-news-card,
html[data-theme="dark"] .city-faq-item {
    background: #141418 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

html:not([data-theme="light"]) .city-teacher-card__name,
html:not([data-theme="light"]) .city-branch-card__title,
html:not([data-theme="light"]) .city-news-card__title,
html:not([data-theme="light"]) .city-faq-item__question,
html[data-theme="dark"] .city-teacher-card__name,
html[data-theme="dark"] .city-branch-card__title,
html[data-theme="dark"] .city-news-card__title,
html[data-theme="dark"] .city-faq-item__question {
    color: #FFFFFF !important;
}

html:not([data-theme="light"]) .city-teacher-card__role,
html:not([data-theme="light"]) .city-branch-card__desc,
html:not([data-theme="light"]) .city-news-card__excerpt,
html:not([data-theme="light"]) .city-faq-item__answer,
html[data-theme="dark"] .city-teacher-card__role,
html[data-theme="dark"] .city-branch-card__desc,
html[data-theme="dark"] .city-news-card__excerpt,
html[data-theme="dark"] .city-faq-item__answer {
    color: #CBD5E1 !important;
}

/* 5. Mobile Floating Notification Bar (Dark Mode) */
html:not([data-theme="light"]) .mobile-thumb-bar,
html:not([data-theme="light"]) .city-push-bar,
html:not([data-theme="light"]) .city-notification-banner,
html[data-theme="dark"] .mobile-thumb-bar,
html[data-theme="dark"] .city-push-bar,
html[data-theme="dark"] .city-notification-banner {
    background: #141418 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.8) !important;
    color: #FFFFFF !important;
}

html:not([data-theme="light"]) .city-push-bar .btn-activate,
html:not([data-theme="light"]) .btn-notification-action,
html[data-theme="dark"] .city-push-bar .btn-activate,
html[data-theme="dark"] .btn-notification-action {
    background: #FFFFFF !important;
    color: #0C0C0E !important;
    font-weight: 800 !important;
    border-radius: var(--radius-pill) !important;
}


/* ==========================================================================
   20. ULTRA-LUXURY OBSIDIAN & CRIMSON HERO PANEL
   ========================================================================== */
html:not([data-theme="light"]) .hero-stage-section {
    background: #0B0B0E !important;
    position: relative !important;
    overflow: hidden !important;
}



.hero-stage-overlay {
    background: linear-gradient(to left, rgba(11, 11, 14, 0.88) 0%, rgba(11, 11, 14, 0.45) 40%, rgba(11, 11, 14, 0.1) 70%, transparent 100%) !important;
}

/* Desktop Mode: Pure open layout without bounding panel */
@media (min-width: 992px) {
    .hero-stage-content {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        width: 48% !important;
        max-width: 580px !important;
    }
}

/* Mobile & Tablet Mode: Enclosed inside a sleek protective glass panel */
@media (max-width: 991px) {
    .hero-stage-content {
        background: linear-gradient(145deg, rgba(14, 14, 18, 0.94) 0%, rgba(28, 10, 16, 0.92) 50%, rgba(14, 14, 18, 0.96) 100%) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        border: 1.5px solid rgba(211, 31, 51, 0.45) !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 35px rgba(211, 31, 51, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
        border-radius: 24px !important;
        padding: 2.2rem 1.5rem !important;
        width: 100% !important;
        max-width: 620px !important;
        margin: 0 auto !important;
    }
}

.hero-top-badge {
    background: rgba(18, 18, 22, 0.95) !important;
    border: 1px solid rgba(211, 31, 51, 0.5) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    padding: 0.4rem 1.1rem !important;
    font-weight: 800 !important;
    border-radius: 9999px !important;
}
.hero-top-badge span {
    color: #FFFFFF !important;
}

.hero-pill-curriculum {
    background: linear-gradient(135deg, #D31F33 0%, #7A0F1A 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 4px 18px rgba(211, 31, 51, 0.5) !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    border-radius: 9999px !important;
}
.hero-pill-curriculum span {
    color: #FFFFFF !important;
}

html:not([data-theme="light"]) .hero-stage-h1 {
    color: #FFFFFF !important;
    font-weight: 900 !important;
    text-shadow: 0 3px 15px rgba(0, 0, 0, 0.95), 0 0 25px rgba(211, 31, 51, 0.35) !important;
}
html:not([data-theme="light"]) .hero-stage-h1 .color-cyan-text {
    color: #FFFFFF !important;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.4) !important;
}
html:not([data-theme="light"]) .hero-stage-h1 .color-burgundy-text {
    color: #D31F33 !important;
    text-shadow: 0 0 15px rgba(211, 31, 51, 0.6) !important;
}
.hero-stage-h1 .spark-icon {
    display: none !important;
}

html:not([data-theme="light"]) .hero-stage-desc {
    color: #F1F5F9 !important;
    font-size: clamp(0.95rem, 1.1vw, 1.1rem) !important;
    font-weight: 600 !important;
    line-height: 1.75 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important;
}

.btn-stage-primary {
    background: linear-gradient(135deg, #D31F33 0%, #9B1120 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 6px 25px rgba(211, 31, 51, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    font-weight: 800 !important;
    border-radius: 9999px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.btn-stage-primary:hover {
    background: linear-gradient(135deg, #E6283D 0%, #B81527 100%) !important;
    box-shadow: 0 8px 32px rgba(211, 31, 51, 0.8) !important;
    transform: translateY(-2px) scale(1.02) !important;
    color: #FFFFFF !important;
}
.btn-stage-primary svg, .btn-stage-primary span {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

.btn-stage-secondary {
    background: rgba(18, 18, 24, 0.85) !important;
    border: 1.5px solid rgba(211, 31, 51, 0.6) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
    font-weight: 800 !important;
    border-radius: 9999px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.btn-stage-secondary:hover {
    background: rgba(211, 31, 51, 0.25) !important;
    border-color: #D31F33 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(211, 31, 51, 0.4) !important;
}
.btn-stage-secondary svg, .btn-stage-secondary span {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

.hero-stage-trust-row {
    gap: 0.85rem !important;
    padding-top: 0.5rem !important;
}
.stage-trust-item {
    background: rgba(18, 18, 22, 0.9) !important;
    border: 1px solid rgba(211, 31, 51, 0.4) !important;
    color: #FFFFFF !important;
    border-radius: 9999px !important;
    padding: 0.45rem 1rem !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}
.stage-trust-item span {
    color: #FFFFFF !important;
}
.stage-trust-item .trust-check svg {
    stroke: #D31F33 !important;
}

@media (max-width: 991px) {
html:not([data-theme="light"]) .hero-stage-overlay {
        position: static !important;
        padding: 1.5rem 1rem 2.5rem !important;
        display: block !important;
        background: #0B0B0E !important;
    }
    .hero-stage-content {
        width: 100% !important;
        max-width: 620px !important;
        margin: 0 auto !important;
        background: linear-gradient(145deg, rgba(16, 16, 20, 0.96) 0%, rgba(28, 10, 16, 0.94) 100%) !important;
        border-radius: 20px !important;
        padding: 1.8rem 1.25rem !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important;
        border: 1.5px solid rgba(211, 31, 51, 0.4) !important;
        text-align: center !important;
        align-items: center !important;
        gap: 1rem !important;
    }
}


/* ==========================================================================
   21. ULTRA-LUXURY SHOWCASE SECTION (ABOUT SECTION REDESIGN)
   ========================================================================== */
html:not([data-theme="light"]):not(.city-light-mode) .city-about-section.cis-luxury-about {
    background: radial-gradient(ellipse 70% 70% at 75% 45%, rgba(138, 15, 26, 0.35) 0%, rgba(20, 10, 14, 0.7) 40%, #0B0B0E 80%),
                #0B0B0E !important;
    position: relative !important;
    padding: 5.5rem 0 5.5rem !important;
    overflow: hidden !important;
}

.cis-about-ambient-glow {
    position: absolute;
    top: 20%;
    left: 10%;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(211, 31, 51, 0.15) 0%, transparent 70%);
    pointer-events: none;
    filter: blur(50px);
}

.cis-floating-dot {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}
.cis-floating-dot.dot-1 {
    top: 15%;
    right: 8%;
    width: 14px;
    height: 14px;
    background: #D31F33;
    box-shadow: 0 0 12px rgba(211, 31, 51, 0.8);
}
.cis-floating-dot.dot-2 {
    top: 25%;
    left: 45%;
    width: 10px;
    height: 10px;
    background: #FFFFFF;
    opacity: 0.8;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
.cis-floating-dot.dot-3 {
    bottom: 35%;
    left: 12%;
    width: 12px;
    height: 12px;
    background: #8A0F1A;
}
.cis-floating-dot.dot-4 {
    top: 8%;
    left: 20%;
    width: 8px;
    height: 8px;
    background: #D31F33;
    opacity: 0.6;
}

.cis-about-showcase {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
    gap: 3.5rem !important;
    position: relative !important;
    z-index: 2 !important;
    margin-bottom: 4.5rem !important;
}

.cis-about-narrative {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1.25rem !important;
}

.cis-about-badge-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    background: linear-gradient(135deg, rgba(211, 31, 51, 0.25) 0%, rgba(138, 15, 26, 0.5) 100%) !important;
    border: 1px solid rgba(211, 31, 51, 0.6) !important;
    color: #FFFFFF !important;
    padding: 0.4rem 1.2rem !important;
    border-radius: 9999px !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 4px 15px rgba(211, 31, 51, 0.3) !important;
}

.cis-about-badge-pill .badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #D31F33;
    box-shadow: 0 0 8px #D31F33;
}

html:not([data-theme="light"]) .cis-about-h2 {
    font-size: clamp(2.1rem, 3.4vw, 3.3rem) !important;
    font-weight: 900 !important;
    color: #FFFFFF !important;
    line-height: 1.25 !important;
    letter-spacing: -0.5px !important;
    margin: 0 !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9) !important;
}

html:not([data-theme="light"]) .cis-title-highlight {
    color: #D31F33 !important;
    display: inline-block !important;
    text-shadow: 0 0 25px rgba(211, 31, 51, 0.65) !important;
}

.cis-about-desc {
    font-size: clamp(0.98rem, 1.15vw, 1.12rem) !important;
    color: #CBD5E1 !important;
    line-height: 1.8 !important;
    max-width: 560px !important;
    margin: 0 !important;
    font-weight: 500 !important;
}

.cis-about-actions {
    display: flex !important;
    align-items: center !important;
    gap: 1.5rem !important;
    flex-wrap: wrap !important;
    margin-top: 0.5rem !important;
}

.btn-cis-primary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.95rem 2rem !important;
    background: linear-gradient(135deg, #D31F33 0%, #9B1120 100%) !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    font-size: 1.02rem !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 6px 24px rgba(211, 31, 51, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.btn-cis-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 32px rgba(211, 31, 51, 0.8) !important;
    background: linear-gradient(135deg, #E6283D 0%, #B81527 100%) !important;
    color: #FFFFFF !important;
}

.btn-cis-primary .btn-arrow {
    font-size: 1.2rem;
    transition: transform 0.2s ease;
}

.btn-cis-primary:hover .btn-arrow {
    transform: translateX(-4px);
}

.btn-cis-video {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.85rem !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 0.98rem !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.btn-cis-video .play-circle-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #D31F33 0%, #8A0F1A 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    box-shadow: 0 0 20px rgba(211, 31, 51, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.btn-cis-video:hover .play-circle-icon {
    transform: scale(1.12);
    box-shadow: 0 0 30px rgba(211, 31, 51, 0.9);
}

.btn-cis-video:hover {
    color: #D31F33 !important;
}

.cis-about-highlights {
    display: flex !important;
    align-items: center !important;
    gap: 1.5rem !important;
    flex-wrap: wrap !important;
    margin-top: 0.5rem !important;
    padding-top: 0.5rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.cis-highlight-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #E2E8F0 !important;
}

.cis-highlight-item .highlight-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(211, 31, 51, 0.2);
    color: #D31F33;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    border: 1px solid rgba(211, 31, 51, 0.4);
}

/* Visual Side with Student & Layered Graphics */
.cis-about-visual {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.cis-visual-stage {
    position: relative !important;
    width: 100% !important;
    max-width: 520px !important;
    height: 560px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
}

.cis-deco-shape {
    position: absolute;
    border-radius: 36px;
    pointer-events: none;
    transition: transform 0.4s ease;
}

.cis-deco-poly-1 {
    width: 320px;
    height: 380px;
    background: linear-gradient(135deg, #D31F33 0%, #6B0C12 100%);
    transform: rotate(-12deg) skewX(-4deg);
    bottom: 50px;
    left: 45px;
    z-index: 1;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(211, 31, 51, 0.35);
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 30px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.cis-poly-watermark {
    font-size: 4rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.12);
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1;
    user-select: none;
}

.cis-deco-poly-2 {
    width: 280px;
    height: 320px;
    background: linear-gradient(145deg, #181820 0%, #0F0F14 100%);
    border: 1.5px solid rgba(211, 31, 51, 0.4);
    transform: rotate(8deg);
    bottom: 40px;
    right: 35px;
    z-index: 1;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
}

.cis-student-wrap {
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
}

.cis-student-img {
    max-width: 95% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.85)) !important;
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}

/* Floating Cards */
.cis-float-card {
    position: absolute !important;
    background: rgba(18, 18, 24, 0.88) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(211, 31, 51, 0.45) !important;
    border-radius: 18px !important;
    padding: 0.65rem 1rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    z-index: 4 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(211, 31, 51, 0.2) !important;
    animation: floatAnim 4s ease-in-out infinite alternate !important;
}

.float-card-check {
    top: 18% !important;
    right: -10px !important;
}
.float-card-check .float-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: linear-gradient(135deg, #D31F33 0%, #A31222 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(211, 31, 51, 0.5);
}
.float-card-check .float-card-content {
    display: flex;
    flex-direction: column;
    text-align: right;
}
.float-card-check .float-card-content strong {
    font-size: 0.85rem;
    color: #FFFFFF;
}
.float-card-check .float-card-content span {
    font-size: 0.72rem;
    color: #94A3B8;
}

.float-card-partner {
    top: 6% !important;
    left: 20px !important;
    animation-delay: -2s !important;
    padding: 0.5rem 0.9rem !important;
}
.float-card-partner .partner-crest {
    font-size: 1.5rem;
    line-height: 1;
}
.float-card-partner .partner-info {
    display: flex;
    flex-direction: column;
    text-align: right;
}
.float-card-partner .partner-info strong {
    font-size: 0.82rem;
    color: #FFFFFF;
}
.float-card-partner .partner-info span {
    font-size: 0.7rem;
    color: #CBD5E1;
}

.float-card-stats {
    bottom: 12% !important;
    left: -15px !important;
    animation-delay: -1s !important;
    padding: 0.65rem 1.1rem !important;
}
.float-card-stats .stats-badge-num {
    font-size: 1.5rem;
    font-weight: 900;
    color: #D31F33;
    line-height: 1;
    text-shadow: 0 0 12px rgba(211, 31, 51, 0.6);
}
.float-card-stats .stats-badge-label {
    display: flex;
    flex-direction: column;
    text-align: right;
}
.float-card-stats .stats-badge-label strong {
    font-size: 0.85rem;
    color: #FFFFFF;
}
.float-card-stats .stats-badge-label span {
    font-size: 0.72rem;
    color: #94A3B8;
}

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

@media (max-width: 991px) {
    .cis-about-showcase {
        grid-template-columns: 1fr !important;
        gap: 3rem !important;
        text-align: center !important;
    }
    .cis-about-narrative {
        align-items: center !important;
    }
    .cis-about-actions {
        justify-content: center !important;
    }
    .cis-about-desc {
        text-align: center !important;
    }
    .cis-visual-stage {
        height: 480px !important;
        max-width: 420px !important;
    }
    .cis-about-highlights {
        justify-content: center !important;
    }
}

@media (max-width: 576px) {
    .cis-visual-stage {
        height: 380px !important;
        max-width: 320px !important;
    }
    .cis-deco-poly-1 {
        width: 240px;
        height: 280px;
        left: 20px;
        bottom: 30px;
    }
    .cis-deco-poly-2 {
        width: 200px;
        height: 240px;
        right: 15px;
        bottom: 25px;
    }
    .float-card-check {
        right: 0 !important;
        top: 10% !important;
    }
    .float-card-stats {
        left: 0 !important;
        bottom: 5% !important;
    }
}


/* ==========================================================================
   22. ACTIVE ORGANIC WAVED SECTION DIVIDERS & DARK CANVAS ENFORCEMENT
   ========================================================================== */
html:not([data-theme="light"]) html, html:not([data-theme="light"]) body {
    background-color: #0B0B0E !important;
    color: #FFFFFF !important;
}

/* Force dark obsidian luxury canvas on ALL sections in Dark Mode */
html:not([data-theme="light"]):not(.city-light-mode) body #cityQuickAccess,
html:not([data-theme="light"]):not(.city-light-mode) body .city-quick-access,
html:not([data-theme="light"]):not(.city-light-mode) body #cityAbout,
html:not([data-theme="light"]):not(.city-light-mode) body .city-about-section,
html:not([data-theme="light"]):not(.city-light-mode) body .cis-luxury-about,
html:not([data-theme="light"]):not(.city-light-mode) body #cityAcademics,
html:not([data-theme="light"]):not(.city-light-mode) body .city-academics-section,
html:not([data-theme="light"]):not(.city-light-mode) body #cityOnline,
html:not([data-theme="light"]):not(.city-light-mode) body .city-online-section,
html:not([data-theme="light"]):not(.city-light-mode) body #cityTeachers,
html:not([data-theme="light"]):not(.city-light-mode) body .city-faculty-section,
html:not([data-theme="light"]):not(.city-light-mode) body #cityHallFame,
html:not([data-theme="light"]):not(.city-light-mode) body .city-hall-fame-section,
html:not([data-theme="light"]):not(.city-light-mode) body #cityGallery,
html:not([data-theme="light"]):not(.city-light-mode) body .city-gallery-section,
html:not([data-theme="light"]):not(.city-light-mode) body #cityNews,
html:not([data-theme="light"]):not(.city-light-mode) body .city-news-section,
html:not([data-theme="light"]):not(.city-light-mode) body #cityFaq,
html:not([data-theme="light"]):not(.city-light-mode) body .city-faq-section,
html:not([data-theme="light"]):not(.city-light-mode) body #cityFinalCta,
html:not([data-theme="light"]):not(.city-light-mode) body .city-final-cta-section {
    background: radial-gradient(ellipse 70% 70% at 75% 45%, rgba(138, 15, 26, 0.38) 0%, rgba(20, 10, 14, 0.75) 45%, #0B0B0E 80%),
                #0B0B0E !important;
    position: relative !important;
    overflow: hidden !important;
    border: none !important;
}

/* Organic Curved Waved Section Dividers matching preview.html */
.section-curve-divider {
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    line-height: 0 !important;
    pointer-events: none !important;
    z-index: 15 !important;
    display: block !important;
}

.section-curve-divider.curve-bottom {
    bottom: -1px !important;
}

.section-curve-divider.curve-top {
    top: -1px !important;
}

.section-curve-divider svg {
    display: block !important;
    width: 100% !important;
    height: 54px !important;
}

@media (min-width: 992px) {
    .section-curve-divider svg {
        height: 64px !important;
    }
}

@media (max-width: 768px) {
    .section-curve-divider svg {
        height: 36px !important;
    }
}


/* ==========================================================================
   23. LUXURY BURGUNDY QUICK ACCESS & SMART PORTAL CARDS (PREVIEW.HTML DESIGN)
   ========================================================================== */
html:not([data-theme="light"]):not(.city-light-mode) body #cityQuickAccess,
html:not([data-theme="light"]):not(.city-light-mode) body .city-quick-access,
html:not([data-theme="light"]):not(.city-light-mode) body .cis-burgundy-access-section {
    background: radial-gradient(ellipse 80% 80% at 50% 40%, #8A0F1A 0%, #6B0C12 50%, #400609 100%) !important;
    position: relative !important;
    padding: 5rem 0 6.5rem !important;
    overflow: hidden !important;
    border: none !important;
}

.smart-hubs-grid-5 {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 1.25rem !important;
    position: relative !important;
    z-index: 5 !important;
}

@media (max-width: 1300px) {
    .smart-hubs-grid-5 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1.2rem !important;
    }
}

@media (max-width: 900px) {
    .smart-hubs-grid-5 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
}

@media (max-width: 580px) {
    .smart-hubs-grid-5 {
        grid-template-columns: 1fr !important;
    }
}

/* Card Body - Obsidian Dark Luxury Card matching reference */
html:not([data-theme="light"]) .hub-interactive-card {
    background: #0E0E12 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    padding: 1.6rem 1.35rem 1.35rem 1.35rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    text-decoration: none !important;
}

/* Top Accent Stripe */
html:not([data-theme="light"]) .hub-interactive-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    border-radius: 20px 20px 0 0 !important;
    transition: height 0.3s ease !important;
}

html:not([data-theme="light"]) .hub-interactive-card:hover {
    transform: translateY(-8px) scale(1.01) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8), 0 0 25px rgba(211, 31, 51, 0.25) !important;
}

html:not([data-theme="light"]) .hub-interactive-card:hover::before {
    height: 6px !important;
}

/* Color Accents per card */
html:not([data-theme="light"]) .hub-interactive-card.hub-apply::before {
    background: linear-gradient(90deg, #F59E0B 0%, #D97706 50%, #EF4444 100%) !important;
}
html:not([data-theme="light"]) .hub-interactive-card.hub-apply:hover {
    border-color: rgba(245, 158, 11, 0.5) !important;
}

html:not([data-theme="light"]) .hub-interactive-card.hub-student::before {
    background: linear-gradient(90deg, #0284C7 0%, #38BDF8 50%, #D31F33 100%) !important;
}
html:not([data-theme="light"]) .hub-interactive-card.hub-student:hover {
    border-color: rgba(56, 189, 248, 0.5) !important;
}

html:not([data-theme="light"]) .hub-interactive-card.hub-parent::before {
    background: linear-gradient(90deg, #10B981 0%, #059669 50%, #0284C7 100%) !important;
}
html:not([data-theme="light"]) .hub-interactive-card.hub-parent:hover {
    border-color: rgba(16, 185, 129, 0.5) !important;
}

html:not([data-theme="light"]) .hub-interactive-card.hub-teacher::before {
    background: linear-gradient(90deg, #D31F33 0%, #E11D48 50%, #0284C7 100%) !important;
}
html:not([data-theme="light"]) .hub-interactive-card.hub-teacher:hover {
    border-color: rgba(211, 31, 51, 0.5) !important;
}

html:not([data-theme="light"]) .hub-interactive-card.hub-academics::before {
    background: linear-gradient(90deg, #8B5CF6 0%, #D31F33 50%, #38BDF8 100%) !important;
}
html:not([data-theme="light"]) .hub-interactive-card.hub-academics:hover {
    border-color: rgba(139, 92, 246, 0.5) !important;
}

/* Meta Row inside Card */
html:not([data-theme="light"]) .hub-card-meta-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 1.15rem !important;
}

html:not([data-theme="light"]) .hub-role-badge {
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    padding: 0.3rem 0.75rem !important;
    border-radius: 9999px !important;
    letter-spacing: 0.2px !important;
}

html:not([data-theme="light"]) .hub-apply .hub-role-badge {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #FBBF24 !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

html:not([data-theme="light"]) .hub-student .hub-role-badge {
    background: rgba(2, 132, 199, 0.15) !important;
    color: #38BDF8 !important;
    border: 1px solid rgba(2, 132, 199, 0.3) !important;
}

html:not([data-theme="light"]) .hub-parent .hub-role-badge {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34D399 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

html:not([data-theme="light"]) .hub-teacher .hub-role-badge {
    background: rgba(211, 31, 51, 0.15) !important;
    color: #F87171 !important;
    border: 1px solid rgba(211, 31, 51, 0.3) !important;
}

html:not([data-theme="light"]) .hub-academics .hub-role-badge {
    background: rgba(139, 92, 246, 0.15) !important;
    color: #C084FC !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
}

html:not([data-theme="light"]) .hub-live-indicator {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #94A3B8 !important;
}

html:not([data-theme="light"]) .hub-live-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
}
html:not([data-theme="light"]) .dot-amber { background: #F59E0B !important; box-shadow: 0 0 6px #F59E0B !important; }
html:not([data-theme="light"]) .dot-cyan { background: #38BDF8 !important; box-shadow: 0 0 6px #38BDF8 !important; }
html:not([data-theme="light"]) .dot-emerald { background: #10B981 !important; box-shadow: 0 0 6px #10B981 !important; }
html:not([data-theme="light"]) .dot-crimson { background: #D31F33 !important; box-shadow: 0 0 6px #D31F33 !important; }
html:not([data-theme="light"]) .dot-purple { background: #A855F7 !important; box-shadow: 0 0 6px #A855F7 !important; }

/* Vector Icon Box */
html:not([data-theme="light"]) .hub-card-vector-box {
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 1.1rem !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s ease !important;
}

html:not([data-theme="light"]) .hub-apply .hub-card-vector-box { color: #F59E0B !important; border-color: rgba(245, 158, 11, 0.3) !important; }
html:not([data-theme="light"]) .hub-student .hub-card-vector-box { color: #38BDF8 !important; border-color: rgba(56, 189, 248, 0.3) !important; }
html:not([data-theme="light"]) .hub-parent .hub-card-vector-box { color: #10B981 !important; border-color: rgba(16, 185, 129, 0.3) !important; }
html:not([data-theme="light"]) .hub-teacher .hub-card-vector-box { color: #D31F33 !important; border-color: rgba(211, 31, 51, 0.3) !important; }
html:not([data-theme="light"]) .hub-academics .hub-card-vector-box { color: #C084FC !important; border-color: rgba(192, 132, 252, 0.3) !important; }

html:not([data-theme="light"]) .hub-interactive-card:hover .hub-card-vector-box {
    transform: scale(1.1) translateY(-2px) !important;
}

/* Titles and Descriptions */
html:not([data-theme="light"]) .hub-card-h3 {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    margin-bottom: 0.5rem !important;
    letter-spacing: -0.3px !important;
}

html:not([data-theme="light"]) .hub-card-desc {
    font-size: 0.86rem !important;
    color: #94A3B8 !important;
    line-height: 1.6 !important;
    margin-bottom: 1.2rem !important;
    min-height: 48px !important;
}

/* Feature Chips / Pills */
html:not([data-theme="light"]) .hub-tag-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.35rem !important;
    margin-bottom: 1.4rem !important;
}

html:not([data-theme="light"]) .hub-chip-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    padding: 0.3rem 0.65rem !important;
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #E2E8F0 !important;
    transition: all 0.2s ease !important;
}

html:not([data-theme="light"]) .hub-chip-item svg {
    color: #94A3B8 !important;
}

html:not([data-theme="light"]) .hub-interactive-card:hover .hub-chip-item {
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
}

/* Bottom Open Button */
html:not([data-theme="light"]) .btn-hub-open {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0.75rem 1.1rem !important;
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html:not([data-theme="light"]) .btn-hub-open .btn-arrow-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
}

html:not([data-theme="light"]) .hub-interactive-card:hover .btn-hub-open {
    background: #D31F33 !important;
    border-color: #D31F33 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 20px rgba(211, 31, 51, 0.5) !important;
}

html:not([data-theme="light"]) .hub-interactive-card:hover .btn-hub-open .btn-arrow-icon {
    background: #FFFFFF !important;
    color: #D31F33 !important;
    transform: translateX(-4px) !important;
}


/* ==========================================================================
   24. 3 PILLARS OF EXCELLENCE SECTION (ROYAL BURGUNDY DESIGN)
   ========================================================================== */
html:not([data-theme="light"]):not(.city-light-mode) body #pillars,
html:not([data-theme="light"]):not(.city-light-mode) body .numbered-pillars-section,
html:not([data-theme="light"]):not(.city-light-mode) body .cis-burgundy-pillars-section {
    background: radial-gradient(ellipse 85% 85% at 50% 50%, #8A0F1A 0%, #680C15 50%, #3D0509 100%) !important;
    position: relative !important;
    padding: 7rem 0 7.5rem !important;
    overflow: hidden !important;
    border: none !important;
}

.numbered-pillars-section::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at 15% 25%, rgba(155, 30, 54, 0.45) 0%, transparent 55%),
                radial-gradient(circle at 85% 75%, rgba(2, 132, 199, 0.15) 0%, transparent 50%) !important;
    pointer-events: none !important;
}

.pillar-tag-pill {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.35rem 1.1rem !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #FFFFFF !important;
    border-radius: 9999px !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

html:not([data-theme="light"]) .pillar-section-h2 {
    font-size: clamp(2rem, 3.2vw, 3.1rem) !important;
    font-weight: 900 !important;
    color: #FFFFFF !important;
    line-height: 1.28 !important;
    margin: 0.8rem auto !important;
    max-width: 850px !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8) !important;
}

html:not([data-theme="light"]) .pillar-section-lead {
    font-size: clamp(1rem, 1.15vw, 1.15rem) !important;
    color: #F1F5F9 !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    line-height: 1.7 !important;
    font-weight: 500 !important;
}

.numbered-pillars-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2.2rem !important;
    position: relative !important;
    z-index: 2 !important;
}

@media (max-width: 991px) {
    .numbered-pillars-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
}

html:not([data-theme="light"]) .pillar-card {
    background: #0E0E12 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 24px !important;
    padding: 2.8rem 2.2rem !important;
    position: relative !important;
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.7), 0 0 25px rgba(211, 31, 51, 0.15) !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.pillar-card:hover {
    transform: translateY(-10px) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.85), 0 0 35px rgba(211, 31, 51, 0.3) !important;
}

.pillar-big-number {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 5rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color: transparent !important;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.25) !important;
    margin-bottom: 1.25rem !important;
    transition: all 0.3s ease !important;
}

.pillar-big-number.num-crimson {
    -webkit-text-stroke-color: #D31F33 !important;
}

.pillar-big-number.num-white {
    -webkit-text-stroke-color: rgba(255, 255, 255, 0.45) !important;
}

.pillar-card:hover .pillar-big-number {
    transform: translateX(-4px) !important;
    -webkit-text-stroke-color: #FFFFFF !important;
}

.pillar-accent-line {
    width: 44px !important;
    height: 4px !important;
    background: #D31F33 !important;
    border-radius: 2px !important;
    margin-bottom: 1.5rem !important;
    transition: width 0.3s ease !important;
}

.pillar-accent-line.line-crimson {
    background: #D31F33 !important;
}

.pillar-accent-line.line-white {
    background: #FFFFFF !important;
}

.pillar-card:hover .pillar-accent-line {
    width: 70px !important;
    background: #FFFFFF !important;
}

.pillar-card-title {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    margin-bottom: 0.85rem !important;
    line-height: 1.35 !important;
}

.pillar-card-p {
    font-size: 0.98rem !important;
    color: #CBD5E1 !important;
    line-height: 1.75 !important;
}

.pillar-bottom-link {
    margin-top: 2rem !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.pillar-bottom-link.link-crimson {
    color: #F87171 !important;
}

.pillar-bottom-link.link-white {
    color: #FFFFFF !important;
}

.pillar-card:hover .pillar-bottom-link {
    color: #FFFFFF !important;
    transform: translateX(-4px) !important;
}

/* ==========================================================================
   SECTION 25: ULTRA-LUXURY ACADEMIC PROGRAMS CARDS (BURGUNDY & OBSIDIAN)
   Inspired by Reference UI: Inset Media Showcase, Frosted Top Bar, Burgundy Glow
   ========================================================================== */

/* Section Canvas & Spacing */
html:not([data-theme="light"]) .city-academics-section {
    background: #0B0B0E !important;
    padding: 100px 0 80px !important;
    position: relative !important;
}

/* Tabs Navigation Buttons - Compact, Modern & Strictly Controlled */
.city-academics-tabs__nav {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 35px !important;
    flex-wrap: wrap !important;
}

html:not([data-theme="light"]) .city-tab-btn {
    background: #121217 !important;
    color: #CBD5E1 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
    padding: 9px 20px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    height: auto !important;
    min-height: 40px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.25s ease !important;
}

.city-tab-btn svg {
    width: 16px !important;
    height: 16px !important;
    color: #94A3B8 !important;
    transition: color 0.25s ease !important;
    flex-shrink: 0 !important;
}

html:not([data-theme="light"]) .city-tab-btn:hover {
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    background: #1a1a24 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
}

.city-tab-btn.active {
    background: linear-gradient(135deg, #7A1528 0%, #600E1F 100%) !important;
    color: #FFFFFF !important;
    border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow: 0 6px 20px -3px rgba(122, 21, 40, 0.65) !important;
}

.city-tab-btn.active svg {
    color: #FFFFFF !important;
}

@media (max-width: 768px) {
    .city-academics-tabs__nav {
        gap: 6px !important;
        margin-bottom: 24px !important;
        padding: 0 8px !important;
    }

    .city-tab-btn {
        padding: 7px 13px !important;
        font-size: 12.5px !important;
        border-radius: 9px !important;
        min-height: 36px !important;
        gap: 5px !important;
    }

    .city-tab-btn svg {
        width: 14px !important;
        height: 14px !important;
    }
}

/* Dynamic Grid Layout */
.city-programs-grid {
    display: grid !important;
    gap: 30px !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    align-items: stretch !important;
}

/* 1 Card layout optimization (Centers single card gracefully) */
.city-programs-grid:has(> :nth-child(1):last-child) {
    max-width: 440px !important;
    margin: 0 auto !important;
    grid-template-columns: 1fr !important;
    justify-content: center !important;
}

/* 2 Cards layout optimization (Desktop only) */
@media (min-width: 992px) {
    .city-programs-grid:has(> :nth-child(2):last-child) {
        max-width: 900px !important;
        margin: 0 auto !important;
        grid-template-columns: repeat(2, minmax(320px, 420px)) !important;
        justify-content: center !important;
    }
}

/* The Luxury Program Card - Two-Tone Obsidian & Royal Burgundy */
html.city-dark-mode .city-program-card,
html[data-theme="dark"] .city-program-card,
.city-program-card {
    background: linear-gradient(165deg, #101015 0%, #15141B 35%, #35070E 75%, #5C0B14 100%) !important;
    border: 1px solid rgba(211, 31, 51, 0.3) !important;
    border-radius: 28px !important;
    padding: 16px 16px 22px 16px !important;
    box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.75), 0 0 25px -5px rgba(138, 15, 26, 0.2) !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.city-program-card:hover {
    transform: translateY(-8px) scale(1.01) !important;
    border-color: rgba(230, 45, 65, 0.55) !important;
    box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.85), 0 0 35px 2px rgba(180, 20, 35, 0.35) !important;
}

/* Inset Rounded Showcase Image Frame (No ugly flat split) */
html:not([data-theme="light"]) .city-program-card__thumb {
    height: 200px !important;
    margin: 0 0 20px 0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    position: relative !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
    background: #0E0E12 !important;
}

.city-program-card__thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.city-program-card:hover .city-program-card__thumb img {
    transform: scale(1.08) !important;
}

/* Image Gradient Overlay (Vignette) */
.city-program-card__thumb-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(16, 16, 21, 0.9) 0%, rgba(16, 16, 21, 0.25) 50%, rgba(16, 16, 21, 0.15) 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Floating Top Bar (Matching Reference Image) */
.city-program-card__top-bar {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    z-index: 2 !important;
    pointer-events: auto !important;
}

/* Circle Icon Button (Right side) */
.city-program-card__circle-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(14, 14, 18, 0.7) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Status Category Tag (Center) */
.city-program-card__status-tag {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    background: rgba(14, 14, 18, 0.7) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding: 4px 14px !important;
    border-radius: 20px !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

.city-program-card__status-tag--en {
    color: #7DD3FC !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
}

.city-program-card__status-tag--courses {
    color: #6EE7B7 !important;
    border-color: rgba(52, 211, 153, 0.35) !important;
    background: rgba(6, 78, 59, 0.6) !important;
}

.city-program-card--courses:hover {
    border-color: rgba(52, 211, 153, 0.4) !important;
    box-shadow: 0 16px 36px rgba(5, 150, 105, 0.15) !important;
}

/* Arrow Circle Button (Left side ↗) */
.city-program-card__arrow-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(14, 14, 18, 0.7) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.3s ease !important;
}

.city-program-card__arrow-btn:hover,
.city-program-card:hover .city-program-card__arrow-btn {
    background: #8A0F1A !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #FFFFFF !important;
    transform: scale(1.08) !important;
}

/* Card Content Body */
.city-program-card__body {
    padding: 0 8px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

/* Card Title */
html.city-dark-mode .city-program-card__title,
html[data-theme="dark"] .city-program-card__title,
.city-program-card__title {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.35 !important;
}

/* Stage Subtitle */
html.city-dark-mode .city-program-card__stage,
html[data-theme="dark"] .city-program-card__stage,
.city-program-card__stage {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 12px !important;
    display: inline-block !important;
    font-family: inherit !important;
}

/* Card Description */
html.city-dark-mode .city-program-card__desc,
html[data-theme="dark"] .city-program-card__desc,
.city-program-card__desc {
    font-size: 14.5px !important;
    line-height: 1.75 !important;
    color: rgba(240, 240, 245, 0.82) !important;
    margin: 0 0 20px 0 !important;
    flex-grow: 1 !important;
}

/* Footer & Action Button */
.city-program-card__footer {
    margin-top: auto !important;
    padding: 14px 8px 0 8px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.city-program-card__apply-btn {
    background: linear-gradient(135deg, #8A0F1A 0%, #680C15 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 14px !important;
    padding: 12px 20px !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.3s ease !important;
}

.city-program-card__apply-btn .btn-arrow {
    font-size: 18px !important;
    transition: transform 0.3s ease !important;
}

.city-program-card__apply-btn:hover {
    background: linear-gradient(135deg, #A81423 0%, #7D0D18 100%) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 8px 24px rgba(138, 15, 26, 0.55) !important;
    color: #FFFFFF !important;
}

.city-program-card__apply-btn:hover .btn-arrow {
    transform: translateX(-5px) !important;
}

@media (max-width: 768px) {
    .city-programs-grid:has(> :nth-child(2):last-child) {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   GLOBAL SECTION BADGES & TABS: LUXURY ROYAL BURGUNDY (#7A1528)
   Zero Cyan - 100% Royal Burgundy with Subtle Gold Accents
   ========================================================================== */

/* Universal Badges in All Sections (Academics, Branches, Online Learning, etc.) */
html.city-dark-mode .city-section-badge,
html[data-theme="dark"] .city-section-badge,
.city-section-badge,
.city-section-badge--dark-gold,
.city-section-badge--gold,
.city-section-badge--light {
    background: linear-gradient(135deg, #7A1528 0%, #600E1F 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 4px 16px rgba(122, 21, 40, 0.45) !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 20px !important;
    border-radius: 9999px !important;
}

.city-section-badge svg {
    color: #FFFFFF !important;
}

/* Academic Stage Tabs - Active Tab is Royal Burgundy */
html.city-dark-mode .city-tab-btn.active,
html[data-theme="dark"] .city-tab-btn.active,
.city-tab-btn.active {
    background: linear-gradient(135deg, #7A1528 0%, #600E1F 100%) !important;
    color: #FFFFFF !important;
    border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 8px 25px -4px rgba(122, 21, 40, 0.7) !important;
}

.city-tab-btn.active svg {
    color: #FFFFFF !important;
}

html:not([data-theme="light"]) .city-tab-btn {
    background: #111116 !important;
    color: #CBD5E1 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
    transition: all 0.3s ease !important;
}

html:not([data-theme="light"]) .city-tab-btn:hover {
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    background: #181820 !important;
}

/* ==========================================================================
   SECTION 26: ONLINE LEARNING WITH ROYAL BURGUNDY CARDS & CONTENT
   Dark Obsidian Background Canvas + True Royal Burgundy Feature Cards (#7A1528)
   ========================================================================== */

/* Section Canvas: Dark Obsidian Canvas */
.city-online-learning-section.cis-burgundy-learning-section,
html.city-dark-mode .city-online-learning-section,
html[data-theme="dark"] .city-online-learning-section,
html:not([data-theme="light"]) .city-online-learning-section {
    background: #0B0B0E !important;
    padding: 100px 0 90px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Remove any legacy/unwanted inner box wrapper styling */
.city-online-learning-section .city-learning-box {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* Direct Learning Grid: Direct 2-Column Showcase */
.city-direct-learning-grid {
    display: grid !important;
    grid-template-columns: 1.05fr 0.95fr !important;
    gap: 50px !important;
    align-items: center !important;
    position: relative !important;
    z-index: 2 !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Smooth layout adaptation when the phones mockup disappears after download */
.city-direct-learning-grid.phones-hidden {
    grid-template-columns: 1fr !important;
    max-width: 820px !important;
    margin: 0 auto !important;
}

.city-direct-learning-grid.phones-hidden .city-direct-learning-text {
    align-items: center !important;
    text-align: center !important;
}

.city-direct-learning-grid.phones-hidden .city-learning-kicker-wrap,
.city-direct-learning-grid.phones-hidden .city-learning-actions {
    justify-content: center !important;
}

.city-direct-learning-grid.phones-hidden .city-direct-feat-card {
    text-align: right !important;
}

/* Column 1: Explanatory Content */
.city-direct-learning-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.city-learning-kicker-wrap {
    display: flex !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin-bottom: 16px !important;
}

.city-direct-learning-title {
    font-size: 38px !important;
    font-weight: 900 !important;
    color: #FFFFFF !important;
    line-height: 1.3 !important;
    margin: 0 0 14px 0 !important;
    letter-spacing: -0.5px !important;
}

/* Concise Description Outside Panel */
.city-direct-learning-desc {
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: rgba(255, 255, 255, 0.88) !important;
    margin-bottom: 28px !important;
    max-width: 580px !important;
}

/* 3 True Royal Burgundy Feature Cards (#7A1528) */
.city-direct-learning-features {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-bottom: 34px !important;
    width: 100% !important;
    max-width: 580px !important;
}

.city-direct-feat-card {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    background: linear-gradient(135deg, #7A1528 0%, #600E1F 50%, #460914 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.7), 0 0 20px -3px rgba(122, 21, 40, 0.45) !important;
    border-radius: 20px !important;
    padding: 18px 22px !important;
    transition: all 0.3s ease !important;
}

.city-direct-feat-card:hover {
    background: linear-gradient(135deg, #8C1930 0%, #6E1225 50%, #520C19 100%) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    transform: translateX(-5px) !important;
    box-shadow: 0 14px 35px -5px rgba(0, 0, 0, 0.8), 0 0 25px rgba(138, 15, 26, 0.6) !important;
}

.city-direct-feat-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 12px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.city-direct-feat-info strong {
    font-size: 16.5px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    margin-bottom: 5px !important;
    display: block !important;
}

.city-direct-feat-info p {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 0 !important;
}

/* Portals & App Download Buttons Row */
.city-learning-actions {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.city-btn--portal {
    background: linear-gradient(135deg, #7A1528 0%, #600E1F 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 14px !important;
    padding: 13px 24px !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    box-shadow: 0 8px 24px rgba(122, 21, 40, 0.5) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.city-btn--portal .btn-arrow {
    font-size: 18px !important;
    transition: transform 0.3s ease !important;
}

.city-btn--portal:hover {
    background: linear-gradient(135deg, #8C1930 0%, #6E1225 100%) !important;
    border-color: #FFFFFF !important;
    box-shadow: 0 10px 28px rgba(138, 15, 26, 0.7) !important;
    transform: translateY(-2px) !important;
    color: #FFFFFF !important;
}

.city-btn--portal:hover .btn-arrow {
    transform: translateX(-5px) !important;
}

html:not([data-theme="light"]) .city-btn--portal-sub {
    background: #111116 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 14px !important;
    padding: 13px 22px !important;
    color: #CBD5E1 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
    transition: all 0.3s ease !important;
}

html:not([data-theme="light"]) .city-btn--portal-sub:hover {
    background: #181822 !important;
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* App Download Button */
.city-btn--download-app {
    background: linear-gradient(135deg, #7A1528 0%, #600E1F 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 14px !important;
    padding: 13px 24px !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    box-shadow: 0 8px 24px rgba(122, 21, 40, 0.5) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.city-btn--download-app svg {
    color: #FFFFFF !important;
}

.city-btn--download-app:hover {
    background: linear-gradient(135deg, #8C1930 0%, #6E1225 100%) !important;
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px rgba(138, 15, 26, 0.7) !important;
}

html:not([data-theme="light"]) .city-btn--download-app.download-done {
    background: #14532D !important;
    border-color: #4ADE80 !important;
    color: #FFFFFF !important;
}

/* Column 2: Large Direct Phone Showcase (No Box Constraint) */
.city-direct-learning-media {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    position: relative !important;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.city-direct-phones-stage {
    width: 100% !important;
    max-width: 620px !important;
    display: flex !important;
    justify-content: center !important;
    position: relative !important;
}

/* Backlight ambient glow behind phones directly on dark canvas */
.city-direct-phones-stage::before {
    content: '' !important;
    position: absolute !important;
    width: 500px !important;
    height: 500px !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(122, 21, 40, 0.45) 0%, rgba(96, 14, 31, 0.2) 50%, transparent 70%) !important;
    filter: blur(50px) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.city-direct-phones-img {
    width: 100% !important;
    height: auto !important;
    max-height: 640px !important;
    object-fit: contain !important;
    position: relative !important;
    z-index: 2 !important;
    filter: drop-shadow(0 25px 45px rgba(0, 0, 0, 0.85)) !important;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease !important;
}

.city-direct-phones-img:hover {
    transform: scale(1.03) translateY(-6px) !important;
    filter: drop-shadow(0 35px 60px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 25px rgba(122, 21, 40, 0.35)) !important;
}

/* Responsive Stacking for Tablets & Mobile */
@media (max-width: 991px) {
    .city-direct-learning-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        text-align: center !important;
    }
    .city-direct-learning-text {
        align-items: center !important;
        order: 1 !important;
    }
    .city-direct-learning-media {
        order: 2 !important;
    }
    .city-learning-kicker-wrap {
        justify-content: center !important;
    }
    .city-direct-learning-title {
        font-size: 28px !important;
    }
    .city-direct-phones-stage {
        max-width: 420px !important;
    }
    .city-direct-phones-img {
        max-height: 480px !important;
    }
    .city-direct-feat-card {
        text-align: right !important;
    }
    .city-learning-actions {
        justify-content: center !important;
    }
}

/* ==========================================================================
   SECTION 27: SCHOOL LIFE & ACTIVITIES - LUXURY BURGUNDY SHOWCASE
   Royal Burgundy Section Canvas (#7A1528) + 3 High-End Obsidian Cards
   ========================================================================== */
html:not([data-theme="light"]):not(.city-light-mode) body #citySchoolLife,
html:not([data-theme="light"]):not(.city-light-mode) body .city-school-life-section,
html:not([data-theme="light"]):not(.city-light-mode) body .cis-burgundy-life-section,
html.city-dark-mode #citySchoolLife,
html[data-theme="dark"] #citySchoolLife,
html.city-dark-mode .city-school-life-section,
html[data-theme="dark"] .city-school-life-section,
html:not([data-theme="light"]):not(.city-light-mode) #citySchoolLife {
    background: radial-gradient(ellipse 85% 85% at 50% 40%, #8A0F1A 0%, #680C14 55%, #3E060C 100%) !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 125px 0 !important;
}

/* Ambient Radial Glow Overlays */
.city-school-life-section::before {
    content: '' !important;
    position: absolute !important;
    width: 600px !important;
    height: 600px !important;
    top: -150px !important;
    right: -100px !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.city-school-life-section::after {
    content: '' !important;
    position: absolute !important;
    width: 700px !important;
    height: 700px !important;
    bottom: -200px !important;
    left: -150px !important;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.45) 0%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.city-school-life-section .city-container {
    position: relative !important;
    z-index: 2 !important;
}

/* Header Elements on Burgundy Canvas */
.city-school-life-section .city-section-header {
    text-align: center !important;
    margin-bottom: 55px !important;
}

.city-school-life-section .city-section-badge {
    background: rgba(14, 14, 18, 0.65) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    padding: 6px 22px !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

.city-school-life-section .city-section-title {
    color: #FFFFFF !important;
    font-size: 38px !important;
    font-weight: 900 !important;
    margin: 18px 0 14px !important;
    letter-spacing: -0.5px !important;
    line-height: 1.3 !important;
}

.city-school-life-section .city-section-subtitle {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
    max-width: 760px !important;
    margin: 0 auto !important;
}

/* 3 Cards Grid (Exactly 3 cards on desktop) */
.city-school-life-section .cis-gallery-bleed-grid,
.city-school-life-section .cis-life-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 26px !important;
    margin-bottom: 45px !important;
    align-items: stretch !important;
}

/* The New Luxury Split Card Architecture */
.city-school-life-section .cis-life-card,
.city-school-life-section .cis-bleed-card {
    background: linear-gradient(165deg, #101015 0%, #171620 45%, #24070D 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 26px !important;
    padding: 14px 14px 20px 14px !important;
    box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.75), 0 0 25px -5px rgba(0, 0, 0, 0.3) !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    height: auto !important;
    min-height: 440px !important;
    box-sizing: border-box !important;
}

.city-school-life-section .cis-life-card:hover,
.city-school-life-section .cis-bleed-card:hover {
    transform: translateY(-8px) scale(1.01) !important;
    border-color: rgba(255, 255, 255, 0.32) !important;
    box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.85), 0 0 30px rgba(255, 255, 255, 0.08) !important;
}

/* Upper Media Window */
html:not([data-theme="light"]) .city-school-life-section .cis-life-card__media {
    position: relative !important;
    width: 100% !important;
    height: 220px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: #0B0B0E !important;
    flex-shrink: 0 !important;
}

.city-school-life-section .cis-life-card__img,
.city-school-life-section .cis-bleed-card__bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.city-school-life-section .cis-life-card:hover .cis-life-card__img,
.city-school-life-section .cis-bleed-card:hover .cis-bleed-card__bg {
    transform: scale(1.08) !important;
}

.city-school-life-section .cis-life-card__media-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, transparent 45%, rgba(0, 0, 0, 0.65) 100%) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* Floating Top Row on Media */
.city-school-life-section .cis-life-card__media-top {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    z-index: 3 !important;
}

.city-school-life-section .cis-life-card__tag {
    background: rgba(14, 14, 18, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    padding: 5px 13px !important;
    border-radius: 20px !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

.city-school-life-section .cis-life-card__icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(14, 14, 18, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Card Content Area */
.city-school-life-section .cis-life-card__body {
    padding: 18px 8px 0 8px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.city-school-life-section .cis-life-card__title {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.35 !important;
}

.city-school-life-section .cis-life-card__desc {
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: rgba(240, 240, 245, 0.82) !important;
    margin: 0 0 18px 0 !important;
    flex-grow: 1 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Card Footer Action */
.city-school-life-section .cis-life-card__footer {
    margin-top: auto !important;
    padding: 14px 0 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.city-school-life-section .cis-life-card__pill-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 20px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #FFFFFF !important;
    border-radius: 50px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.city-school-life-section .cis-life-card__pill-btn .arrow {
    transition: transform 0.25s ease !important;
    font-size: 15px !important;
}

.city-school-life-section .cis-life-card__pill-btn:hover {
    background: #FFFFFF !important;
    color: #7A1528 !important;
    border-color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}

.city-school-life-section .cis-life-card__pill-btn:hover .arrow {
    transform: translateX(-4px) !important;
}

/* Bottom CTA Button: "استكشف المزيد" */
.city-school-life-section .city-section-footer {
    text-align: center !important;
    margin-top: 50px !important;
}

html:not([data-theme="light"]) .city-school-life-section .cis-explore-more-btn {
    background: #111116 !important;
    color: #FFFFFF !important;
    border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 14px !important;
    padding: 14px 38px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45) !important;
    transition: all 0.3s ease !important;
}

.city-school-life-section .cis-explore-more-btn .arrow {
    transition: transform 0.3s ease !important;
    font-size: 18px !important;
}

.city-school-life-section .cis-explore-more-btn:hover {
    background: #FFFFFF !important;
    color: #7A1528 !important;
    border-color: #FFFFFF !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6) !important;
}

.city-school-life-section .cis-explore-more-btn:hover .arrow {
    transform: translateX(-5px) !important;
}

/* Responsive Handling */
@media (max-width: 991px) {
    .city-school-life-section .cis-gallery-bleed-grid,
    .city-school-life-section .cis-life-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    .city-school-life-section .city-section-title {
        font-size: 30px !important;
    }
}

@media (max-width: 640px) {
    .city-school-life-section .cis-gallery-bleed-grid,
    .city-school-life-section .cis-life-cards-grid {
        grid-template-columns: 1fr !important;
    }
    .city-school-life-section .city-section-title {
        font-size: 26px !important;
    }
    .city-school-life-section {
        padding: 70px 0 !important;
    }
}

/* ==========================================================================
   SECTION 28: CAMPUSES & BRANCHES - ROYAL BURGUNDY & LUXURY ARCHITECTURAL CARDS
   ========================================================================== */
html:not([data-theme="light"]):not(.city-light-mode) body #cityBranches,
html:not([data-theme="light"]):not(.city-light-mode) body .city-branches-section,
html:not([data-theme="light"]):not(.city-light-mode) body .cis-burgundy-branches-section,
html.city-dark-mode #cityBranches,
html[data-theme="dark"] #cityBranches,
html.city-dark-mode .city-branches-section,
html[data-theme="dark"] .city-branches-section,
html:not([data-theme="light"]):not(.city-light-mode) #cityBranches {
    background: radial-gradient(ellipse 85% 85% at 50% 40%, #8A0F1A 0%, #680C14 55%, #3E060C 100%) !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 125px 0 !important;
}

/* Ambient Radial Glow Overlays */
.city-branches-section::before {
    content: '' !important;
    position: absolute !important;
    width: 600px !important;
    height: 600px !important;
    top: -150px !important;
    right: -100px !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.city-branches-section::after {
    content: '' !important;
    position: absolute !important;
    width: 700px !important;
    height: 700px !important;
    bottom: -200px !important;
    left: -150px !important;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.45) 0%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.city-branches-section .city-container {
    position: relative !important;
    z-index: 2 !important;
}

/* Header */
.city-branches-section .city-section-header {
    text-align: center !important;
    margin-bottom: 55px !important;
}

.city-branches-section .city-section-badge {
    background: rgba(14, 14, 18, 0.65) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    padding: 6px 22px !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

html:not([data-theme="light"]):not(.city-light-mode) .city-branches-section .city-section-title {
    color: #FFFFFF !important;
    font-size: 38px !important;
    font-weight: 900 !important;
    margin: 18px 0 14px !important;
    letter-spacing: -0.5px !important;
    line-height: 1.3 !important;
}

html:not([data-theme="light"]):not(.city-light-mode) .city-branches-section .city-section-subtitle {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
    max-width: 760px !important;
    margin: 0 auto !important;
}

/* Dynamic Grid Layout */
.city-branches-grid {
    display: grid !important;
    gap: 28px !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    align-items: stretch !important;
}

/* 1 or 2 Cards Layout Optimization (Desktop) */
@media (min-width: 992px) {
    .city-branches-grid:has(> :only-child) {
        max-width: 480px !important;
        margin: 0 auto !important;
    }

    .city-branches-grid:has(> :nth-child(2):last-child) {
        max-width: 900px !important;
        margin: 0 auto !important;
        grid-template-columns: repeat(2, minmax(320px, 420px)) !important;
        justify-content: center !important;
    }
}

/* The Luxury Branch Card Shape */
.city-branch-card,
html.city-dark-mode .city-branch-card,
html[data-theme="dark"] .city-branch-card {
    background: linear-gradient(165deg, #101015 0%, #171620 45%, #24070D 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 26px !important;
    padding: 14px 14px 20px 14px !important;
    box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.75), 0 0 25px -5px rgba(0, 0, 0, 0.3) !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
}

.city-branch-card:hover,
html.city-dark-mode .city-branch-card:hover,
html[data-theme="dark"] .city-branch-card:hover {
    transform: translateY(-8px) scale(1.01) !important;
    border-color: rgba(255, 255, 255, 0.32) !important;
    box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.85), 0 0 30px rgba(255, 255, 255, 0.08) !important;
}

/* Upper Visual Media Window */
html:not([data-theme="light"]) .city-branch-card__visual {
    position: relative !important;
    width: 100% !important;
    height: 220px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: #0B0B0E !important;
    flex-shrink: 0 !important;
}

.city-branch-card__img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.city-branch-card:hover .city-branch-card__img {
    transform: scale(1.08) !important;
}

/* Neutral Fallback Emblem Window (When no image uploaded) */
.city-branch-card__visual--neutral {
    background: linear-gradient(135deg, #101015 0%, #181522 50%, #2A0810 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 220px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.city-branch-card__neutral-emblem {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    color: #FFFFFF !important;
}

.city-branch-card__neutral-emblem svg {
    color: #FFFFFF !important;
    filter: drop-shadow(0 4px 12px rgba(138, 15, 26, 0.5)) !important;
}

.city-branch-card__neutral-name {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    letter-spacing: 0.3px !important;
}

/* Floating Overlay Badges (Country & Code) */
.city-branch-card__badge-overlay {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    z-index: 3 !important;
    pointer-events: none !important;
}

.city-branch-card__country,
.city-branch-card__code {
    background: rgba(14, 14, 18, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    padding: 5px 13px !important;
    border-radius: 20px !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

/* Content Area */
.city-branch-card__content,
html.city-dark-mode .city-branch-card__content,
html[data-theme="dark"] .city-branch-card__content {
    background: transparent !important;
    padding: 18px 8px 0 8px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.city-branch-card__title {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.35 !important;
}

.city-branch-card__en-title {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.65) !important;
    margin-bottom: 14px !important;
    display: block !important;
    font-weight: 600 !important;
}

/* Meta list items */
.city-branch-card__meta {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.city-branch-card__meta-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: rgba(240, 240, 245, 0.82) !important;
    font-size: 13.5px !important;
}

.city-branch-card__meta-item svg {
    stroke: rgba(255, 255, 255, 0.75) !important;
    flex-shrink: 0 !important;
}

.city-branch-card__meta-item a {
    color: rgba(240, 240, 245, 0.85) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.city-branch-card__meta-item a:hover {
    color: #FFFFFF !important;
    text-decoration: underline !important;
}

/* Action Buttons Row */
.city-branch-card__actions {
    margin-top: auto !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.city-btn--branch-apply {
    background: linear-gradient(135deg, #8A0F1A 0%, #680C14 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    border-radius: 12px !important;
    padding: 11px 20px !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    flex-grow: 1 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
}

.city-btn--branch-apply:hover {
    background: linear-gradient(135deg, #A81423 0%, #7D0D18 100%) !important;
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(138, 15, 26, 0.6) !important;
}

.city-btn--branch-contact {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #FFFFFF !important;
    border-radius: 12px !important;
    padding: 11px 18px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.city-btn--branch-contact:hover {
    background: #FFFFFF !important;
    color: #7A1528 !important;
    border-color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
}

/* Section 28 Mobile Responsive Optimization */
@media (max-width: 991px) {
    .city-branches-grid,
    .city-branches-grid:has(> :nth-child(2):last-child),
    .city-branches-grid:has(> :only-child) {
        grid-template-columns: 1fr !important;
        max-width: 540px !important;
        margin: 0 auto !important;
        gap: 24px !important;
    }
}

@media (max-width: 768px) {
    .city-branches-section {
        padding: 60px 0 !important;
    }
    .city-branches-section .city-section-title {
        font-size: 26px !important;
        line-height: 1.35 !important;
    }
    .city-branches-section .city-section-subtitle {
        font-size: 14.5px !important;
        line-height: 1.65 !important;
        padding: 0 8px !important;
        margin-bottom: 28px !important;
    }
    .city-branches-grid,
    .city-branches-grid:has(> :nth-child(2):last-child),
    .city-branches-grid:has(> :only-child) {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        width: 100% !important;
        gap: 20px !important;
    }
    .city-branch-card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px !important;
        padding: 12px 12px 16px 12px !important;
    }
    .city-branch-card__visual {
        height: 190px !important;
        border-radius: 14px !important;
    }
    .city-branch-card__country,
    .city-branch-card__code {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }
    .city-branch-card__title {
        font-size: 20px !important;
    }
    .city-branch-card__meta-item {
        font-size: 13px !important;
    }
    .city-branch-card__actions {
        flex-direction: column !important;
        gap: 8px !important;
        padding-top: 14px !important;
    }
    .city-btn--branch-apply,
    .city-btn--branch-contact {
        width: 100% !important;
        min-height: 48px !important;
        justify-content: center !important;
        font-size: 14px !important;
    }
}

/* ==========================================================================
   SECTION 29: FREQUENTLY ASKED QUESTIONS (FAQ) - REFERENCE DESIGN SPLIT LAYOUT
   Ultra-Dark Obsidian Background Canvas + High-Contrast Questions & Ask Card
   ========================================================================== */
html:not([data-theme="light"]):not(.city-light-mode) body #cityFaq,
html:not([data-theme="light"]):not(.city-light-mode) body .city-faq-section,
html:not([data-theme="light"]):not(.city-light-mode) body .cis-faq-modern,
html.city-dark-mode #cityFaq,
html[data-theme="dark"] #cityFaq,
html:not([data-theme="light"]):not(.city-light-mode) #cityFaq,
html:not([data-theme="light"]) .city-faq-section {
    background: #08080C !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 110px 0 !important;
}

/* Ambient Radial Glow on Deep Dark Canvas */
.city-faq-section::before {
    content: '' !important;
    position: absolute !important;
    width: 600px !important;
    height: 600px !important;
    top: 10% !important;
    right: -100px !important;
    background: radial-gradient(circle, rgba(122, 21, 40, 0.18) 0%, transparent 65%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.city-faq-section .city-container {
    position: relative !important;
    z-index: 2 !important;
}

/* 2-Column Split Grid matching reference design */
.cis-faq-layout-grid {
    display: grid !important;
    grid-template-columns: 390px 1fr !important;
    gap: 48px !important;
    align-items: flex-start !important;
}

/* Right Editorial Column */
.cis-faq-editorial-col {
    display: flex !important;
    flex-direction: column !important;
    position: sticky !important;
    top: 100px !important;
}

.cis-faq-pill-badge {
    background: rgba(14, 14, 18, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #FFFFFF !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    padding: 6px 18px !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
    width: fit-content !important;
}

.cis-faq-badge-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #E11D48 !important;
    display: inline-block !important;
}

.cis-faq-headline {
    font-size: 38px !important;
    font-weight: 900 !important;
    color: #FFFFFF !important;
    margin: 0 0 14px 0 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.5px !important;
}

.cis-faq-lead-desc {
    font-size: 16px !important;
    line-height: 1.75 !important;
    color: rgba(240, 240, 245, 0.85) !important;
    margin: 0 0 34px 0 !important;
}

/* Reference Design: "Still Have Questions?" Action Card */
.cis-faq-ask-card {
    background: linear-gradient(145deg, #7A1528 0%, #5E0E1E 50%, #3B060F 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 24px !important;
    padding: 28px 24px !important;
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.75), 0 0 25px rgba(122, 21, 40, 0.35) !important;
    display: flex !important;
    flex-direction: column !important;
    transition: all 0.35s ease !important;
}

.cis-faq-ask-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 25px 55px -10px rgba(0, 0, 0, 0.85), 0 0 30px rgba(122, 21, 40, 0.45) !important;
}

/* Avatars Row matching reference design */
.cis-faq-ask-avatars-row {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 18px !important;
}

html:not([data-theme="light"]) .cis-ask-avatar {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: 2.5px solid #5E0E1E !important;
    margin-left: -10px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #0B0B0E !important;
}

.cis-ask-avatar:first-child {
    margin-left: 0 !important;
}

.cis-ask-avatar-badge {
    background: rgba(14, 14, 18, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 50px !important;
    padding: 4px 12px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    margin-right: 10px !important;
}

.cis-faq-ask-title {
    font-size: 22px !important;
    font-weight: 900 !important;
    color: #FFFFFF !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.35 !important;
}

.cis-faq-ask-desc {
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0 0 24px 0 !important;
}

html:not([data-theme="light"]) .cis-faq-ask-btn {
    background: #0E0E14 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 9999px !important;
    padding: 13px 24px !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-decoration: none !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s ease !important;
}

.cis-faq-ask-btn .cis-faq-ask-arrow {
    transition: transform 0.3s ease !important;
    font-size: 17px !important;
}

.cis-faq-ask-btn:hover {
    background: #FFFFFF !important;
    color: #7A1528 !important;
    border-color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7) !important;
}

.cis-faq-ask-btn:hover .cis-faq-ask-arrow {
    transform: translateX(-5px) !important;
}

/* Left Column: Numbered Accordion Container */
.cis-faq-accordion-col {
    display: flex !important;
    flex-direction: column !important;
}

.city-faq-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

/* Accordion Numbered Card */
html:not([data-theme="light"]) .cis-faq-box {
    background: #101015 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
    margin: 0 !important;
}

.cis-faq-box:hover {
    border-color: rgba(255, 255, 255, 0.26) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

.cis-faq-box__summary {
    padding: 22px 24px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    list-style: none !important;
    user-select: none !important;
    gap: 16px !important;
}

.cis-faq-box__summary::-webkit-details-marker {
    display: none !important;
}

.cis-faq-box__header-group {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-grow: 1 !important;
}

/* Number Prefix: 1., 2., 3., etc. */
.cis-faq-box__num {
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #FFFFFF !important;
    flex-shrink: 0 !important;
    min-width: 26px !important;
    letter-spacing: -0.5px !important;
}

/* Question Title: ULTRA-CLEAR, CRISP WHITE */
.cis-faq-box__title {
    color: #FFFFFF !important;
    font-size: 17.5px !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    transition: color 0.2s ease !important;
}

/* Toggle Icon: + / - */
.cis-faq-box__icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #FFFFFF !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    transition: all 0.25s ease !important;
}

.cis-faq-box__icon .icon-plus {
    display: inline-block !important;
}

.cis-faq-box__icon .icon-minus {
    display: none !important;
}

/* OPEN State */
.cis-faq-box[open] {
    background: linear-gradient(165deg, #161520 0%, #20131E 50%, #2E0A14 100%) !important;
    border-color: rgba(225, 29, 72, 0.5) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75), 0 0 25px rgba(122, 21, 40, 0.25) !important;
}

.cis-faq-box[open] .cis-faq-box__title {
    color: #FFFFFF !important;
}

.cis-faq-box[open] .cis-faq-box__icon {
    background: rgba(225, 29, 72, 0.3) !important;
    border-color: rgba(225, 29, 72, 0.6) !important;
}

.cis-faq-box[open] .cis-faq-box__icon .icon-plus {
    display: none !important;
}

.cis-faq-box[open] .cis-faq-box__icon .icon-minus {
    display: inline-block !important;
}

/* Answer Paragraph */
.cis-faq-box__answer {
    padding: 0 24px 24px 24px !important;
    color: rgba(240, 240, 245, 0.9) !important;
    font-size: 15px !important;
    line-height: 1.85 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    margin-top: 0 !important;
    padding-top: 18px !important;
}

.cis-faq-box__answer p {
    margin: 0 0 12px 0 !important;
}

.cis-faq-box__badge {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #FFFFFF !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    padding: 4px 14px !important;
    border-radius: 50px !important;
    display: inline-block !important;
}

/* Responsive */
@media (max-width: 991px) {
    .cis-faq-layout-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
    .cis-faq-editorial-col {
        position: static !important;
    }
    .cis-faq-headline {
        font-size: 30px !important;
    }
    .city-faq-section {
        padding: 70px 0 !important;
    }
}

/* ==========================================================================
   SECTION 30: NEWS, EVENTS & ANNOUNCEMENTS - LUXURY OBSIDIAN & BURGUNDY SHOWCASE
   Ultra-Dark Obsidian Canvas + Sculpted Architectural Cards & High-Contrast Typography
   ========================================================================== */
html:not([data-theme="light"]):not(.city-light-mode) body #cityNewsEvents,
html:not([data-theme="light"]):not(.city-light-mode) body .city-news-events-section,
html:not([data-theme="light"]):not(.city-light-mode) body .cis-dark-news-section,
html.city-dark-mode #cityNewsEvents,
html[data-theme="dark"] #cityNewsEvents,
html:not([data-theme="light"]):not(.city-light-mode) #cityNewsEvents,
html:not([data-theme="light"]) .city-news-events-section {
    background: #08080C !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 105px 0 !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

/* Ambient Radial Glow on Deep Dark Canvas */
.city-news-events-section::before {
    content: '' !important;
    position: absolute !important;
    width: 650px !important;
    height: 650px !important;
    top: 5% !important;
    left: -120px !important;
    background: radial-gradient(circle, rgba(122, 21, 40, 0.18) 0%, transparent 68%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.city-news-events-section::after {
    content: '' !important;
    position: absolute !important;
    width: 500px !important;
    height: 500px !important;
    bottom: -100px !important;
    right: -80px !important;
    background: radial-gradient(circle, rgba(122, 21, 40, 0.14) 0%, transparent 68%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.city-news-events-section .city-container {
    position: relative !important;
    z-index: 2 !important;
}

/* Section Header on Dark Obsidian */
.city-news-events-section .city-section-badge {
    background: rgba(122, 21, 40, 0.28) !important;
    border: 1px solid rgba(225, 29, 72, 0.45) !important;
    color: #FFA3B2 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 6px 18px !important;
    border-radius: 50px !important;
    display: inline-block !important;
    margin-bottom: 14px !important;
    letter-spacing: 0.5px !important;
}

html:not([data-theme="light"]) .city-news-events-section .city-section-title {
    color: #FFFFFF !important;
    font-size: 38px !important;
    font-weight: 900 !important;
    line-height: 1.3 !important;
    margin: 0 0 16px 0 !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8) !important;
}

html:not([data-theme="light"]) .city-news-events-section .city-section-subtitle {
    color: rgba(240, 240, 245, 0.78) !important;
    font-size: 16.5px !important;
    line-height: 1.7 !important;
    max-width: 680px !important;
    margin: 0 auto 52px auto !important;
}

/* 3-Column Bento Grid */
.city-updates-grid.cis-bento-updates-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    align-items: stretch !important;
}

/* Bento Column Card (Obsidian & Burgundy Architectural Container) */
.city-update-col.cis-bento-update-col {
    background: linear-gradient(165deg, #101015 0%, #161520 45%, #24070D 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 26px !important;
    padding: 28px 24px !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.65), 0 0 25px rgba(122, 21, 40, 0.15) !important;
    display: flex !important;
    flex-direction: column !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
}

.city-update-col.cis-bento-update-col:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(225, 29, 72, 0.45) !important;
    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.8), 0 0 35px rgba(122, 21, 40, 0.3) !important;
}

/* Column Header */
.city-update-col__header.cis-bento-update-col__header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-bottom: 22px !important;
}

.city-update-col__title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.cis-bento-header-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #FFFFFF !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all 0.25s ease !important;
}

.cis-bento-update-col:hover .cis-bento-header-icon {
    background: rgba(225, 29, 72, 0.25) !important;
    border-color: rgba(225, 29, 72, 0.6) !important;
    color: #FFA3B2 !important;
    transform: scale(1.05) !important;
}

.city-update-col__header h3 {
    color: #FFFFFF !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.city-update-col__more {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    padding: 6px 14px !important;
    border-radius: 50px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.city-update-col__more:hover {
    background: #E11D48 !important;
    border-color: #E11D48 !important;
    color: #FFFFFF !important;
    transform: translateX(-3px) !important;
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.4) !important;
}

/* Inner List Layout */
.city-update-col__list {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    flex-grow: 1 !important;
}

/* Inner News Card */
.city-update-card.cis-bento-news-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 18px !important;
    padding: 16px !important;
    transition: all 0.25s ease !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.city-update-card.cis-bento-news-card:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(225, 29, 72, 0.35) !important;
    transform: translateY(-2px) !important;
}

.cis-bento-news-thumb {
    border-radius: 12px !important;
    overflow: hidden !important;
    aspect-ratio: 16 / 9 !important;
}

.cis-bento-news-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.35s ease !important;
}

.city-update-card.cis-bento-news-card:hover .cis-bento-news-thumb img {
    transform: scale(1.05) !important;
}

.city-update-card__meta {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
}

.cis-bento-pill-tag {
    background: rgba(225, 29, 72, 0.18) !important;
    border: 1px solid rgba(225, 29, 72, 0.35) !important;
    color: #FFA3B2 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    padding: 3px 10px !important;
    display: inline-block !important;
}

.cis-bento-pill-tag--teal {
    background: rgba(45, 212, 191, 0.15) !important;
    border-color: rgba(45, 212, 191, 0.35) !important;
    color: #5EEAD4 !important;
}

.cis-bento-pill-tag--amber {
    background: rgba(251, 191, 36, 0.15) !important;
    border-color: rgba(251, 191, 36, 0.35) !important;
    color: #FDE047 !important;
}

.city-update-card__meta .date {
    color: rgba(240, 240, 245, 0.55) !important;
    font-size: 12px !important;
}

.city-update-card__title a {
    color: #FFFFFF !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.city-update-card__title a:hover {
    color: #FFA3B2 !important;
}

.city-update-card__excerpt {
    color: rgba(240, 240, 245, 0.7) !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.city-update-card__readmore {
    color: #FFA3B2 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.2s ease !important;
    margin-top: 4px !important;
}

.city-update-card__readmore:hover {
    color: #FFFFFF !important;
    transform: translateX(-3px) !important;
}

/* Inner Events Card */
.city-event-card.cis-bento-event-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 18px !important;
    padding: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    transition: all 0.25s ease !important;
}

.city-event-card.cis-bento-event-card:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(225, 29, 72, 0.35) !important;
    transform: translateY(-2px) !important;
}

.cis-bento-datebox {
    background: linear-gradient(135deg, #7A1528 0%, #A31D36 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 14px !important;
    min-width: 58px !important;
    padding: 10px 8px !important;
    text-align: center !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 14px rgba(122, 21, 40, 0.4) !important;
    flex-shrink: 0 !important;
}

.cis-bento-datebox .day {
    display: block !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color: #FFFFFF !important;
}

.cis-bento-datebox .month {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin-top: 3px !important;
}

.city-event-card__content h4 a {
    color: #FFFFFF !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.city-event-card__content h4 a:hover {
    color: #FFA3B2 !important;
}

.city-event-card__content .loc {
    color: rgba(240, 240, 245, 0.6) !important;
    font-size: 12.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 6px !important;
}

/* Inner Announcements Card */
.city-announcement-card.cis-bento-announcement-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 18px !important;
    padding: 16px !important;
    transition: all 0.25s ease !important;
}

.city-announcement-card.cis-bento-announcement-card:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(225, 29, 72, 0.35) !important;
    transform: translateY(-2px) !important;
}

.city-announcement-card.cis-bento-announcement-card h4 {
    color: #FFFFFF !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    margin: 8px 0 6px 0 !important;
}

.city-announcement-card.cis-bento-announcement-card p {
    color: rgba(240, 240, 245, 0.7) !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Guest Visitors Card (Official Notices Section) */
.cis-bento-guest-card {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, rgba(122, 21, 40, 0.16) 100%) !important;
    border: 1px solid rgba(225, 29, 72, 0.3) !important;
    border-radius: 20px !important;
    padding: 32px 20px !important;
    text-align: center !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.cis-bento-guest-icon {
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    background: rgba(225, 29, 72, 0.16) !important;
    border: 1px solid rgba(225, 29, 72, 0.4) !important;
    color: #FFA3B2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 16px auto !important;
}

.cis-bento-guest-card h4 {
    color: #FFFFFF !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    margin: 0 0 8px 0 !important;
}

.cis-bento-guest-card p {
    color: rgba(240, 240, 245, 0.75) !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    margin: 0 0 20px 0 !important;
}

.cis-btn--guest-login {
    background: linear-gradient(135deg, #7A1528 0%, #A31D36 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    border-radius: 12px !important;
    padding: 11px 22px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 6px 18px rgba(122, 21, 40, 0.45) !important;
}

.cis-btn--guest-login:hover {
    background: #E11D48 !important;
    color: #FFFFFF !important;
    border-color: #E11D48 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px rgba(225, 29, 72, 0.5) !important;
}

/* Empty State Card */
.city-empty-mini {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px dashed rgba(255, 255, 255, 0.12) !important;
    border-radius: 18px !important;
    padding: 32px 20px !important;
    text-align: center !important;
}

.city-empty-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 12px auto !important;
}

.city-empty-mini p {
    color: rgba(240, 240, 245, 0.65) !important;
    font-size: 13.5px !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}

/* Responsive */
@media (max-width: 991px) {
    .city-updates-grid.cis-bento-updates-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .city-news-events-section {
        padding: 70px 0 !important;
    }
    .city-news-events-section .city-section-title {
        font-size: 28px !important;
    }
}

/* ==========================================================================
   SECTION 31: GLOBAL MOBILE-FIRST RESPONSIVENESS SUITE
   Strict Mobile Optimization Across All Sections, Grids, Cards, and Inputs
   Guarantees 100% Fluid Width, Zero Horizontal Overflow, and Large Touch Targets
   ========================================================================== */

/* 1. Global Viewport & Anti-Overflow Protection */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    -webkit-text-size-adjust: 100% !important;
}

*, *::before, *::after {
    box-sizing: border-box !important;
}

/* 2. Responsive Container & Media Elements */
@media (max-width: 768px) {
    .city-container,
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    img, video, iframe, svg, canvas {
        max-width: 100% !important;
    }

    /* Wave Curves Scaled for Mobile */
    .section-curve-divider svg {
        height: 28px !important;
    }

    /* Section Headers */
    .city-section-header {
        margin-bottom: 26px !important;
    }

    .city-section-title {
        font-size: clamp(23px, 6vw, 28px) !important;
        line-height: 1.32 !important;
        margin-bottom: 12px !important;
    }

    .city-section-subtitle {
        font-size: 14px !important;
        line-height: 1.65 !important;
        padding: 0 6px !important;
        margin-bottom: 26px !important;
    }

    .city-section-badge {
        font-size: 11.5px !important;
        padding: 5px 14px !important;
        margin-bottom: 12px !important;
    }

    /* CAMPUSES & BRANCHES (Section 28) - Strict 1 Column on Mobile */
    .city-branches-grid,
    .city-branches-grid:has(> :nth-child(2):last-child),
    .city-branches-grid:has(> :only-child),
    .branches-cards-grid {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        width: 100% !important;
        gap: 20px !important;
    }

    .city-branch-card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px !important;
        padding: 12px 12px 16px 12px !important;
        box-sizing: border-box !important;
    }

    .city-branch-card__visual {
        height: 185px !important;
        width: 100% !important;
        border-radius: 14px !important;
    }

    .city-branch-card__title {
        font-size: 19px !important;
        line-height: 1.35 !important;
    }

    .city-branch-card__en-title {
        font-size: 12px !important;
        margin-bottom: 12px !important;
    }

    .city-branch-card__meta {
        margin-bottom: 14px !important;
        gap: 8px !important;
    }

    .city-branch-card__meta-item {
        font-size: 13px !important;
    }

    .city-branch-card__actions {
        flex-direction: column !important;
        gap: 8px !important;
        padding-top: 14px !important;
        width: 100% !important;
    }

    .city-btn--branch-apply,
    .city-btn--branch-contact {
        width: 100% !important;
        min-height: 48px !important;
        justify-content: center !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
    }

    /* SCHOOL LIFE & ACTIVITIES (Section 27) - Strict 1 Column on Mobile */
    .cis-gallery-bleed-grid,
    .cis-life-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .cis-life-card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px !important;
    }

    .cis-life-card__media {
        height: 195px !important;
        width: 100% !important;
    }

    .cis-life-card__body {
        padding: 18px 16px !important;
    }

    .cis-life-card__title {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }

    .cis-life-card__desc {
        font-size: 13.5px !important;
        line-height: 1.6 !important;
    }

    .cis-life-card__pill-btn {
        width: 100% !important;
        justify-content: center !important;
        min-height: 44px !important;
        font-size: 13.5px !important;
    }

    .cis-explore-more-btn {
        width: 100% !important;
        max-width: 320px !important;
        min-height: 48px !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }

    /* NEWS, EVENTS & ANNOUNCEMENTS (Section 30) - Strict 1 Column on Mobile */
    .city-updates-grid.cis-bento-updates-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .city-update-col.cis-bento-update-col {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 16px !important;
        border-radius: 20px !important;
    }

    .cis-btn--guest-login {
        width: 100% !important;
        min-height: 48px !important;
        justify-content: center !important;
    }

    /* FREQUENTLY ASKED QUESTIONS (Section 29) - Mobile Stack */
    .cis-faq-layout-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        width: 100% !important;
    }

    .cis-faq-ask-card {
        width: 100% !important;
        padding: 20px 16px !important;
        border-radius: 20px !important;
    }

    .cis-faq-ask-card__btn {
        width: 100% !important;
        min-height: 48px !important;
        justify-content: center !important;
    }

    .cis-faq-box {
        border-radius: 16px !important;
    }

    .cis-faq-box__summary {
        padding: 16px 14px !important;
        gap: 10px !important;
    }

    .cis-faq-box__title {
        font-size: 14.5px !important;
        line-height: 1.45 !important;
    }

    .cis-faq-box__answer {
        padding: 0 14px 16px 14px !important;
        font-size: 13.5px !important;
    }

    /* ONLINE LEARNING & DIRECT PHONES (Section 26) */
    .city-direct-learning-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        width: 100% !important;
    }

    .city-direct-phones-stage {
        max-width: 100% !important;
    }

    .city-direct-phones-img {
        max-height: 320px !important;
        max-width: 90% !important;
        margin: 0 auto !important;
        display: block !important;
    }

    .city-learning-btn {
        width: 100% !important;
        min-height: 48px !important;
        justify-content: center !important;
    }

    /* QUICK ACCESS HUB CARDS (Section 23) */
    .smart-hubs-grid-5 {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
    }

    .hub-interactive-card {
        width: 100% !important;
        padding: 16px 14px !important;
        border-radius: 16px !important;
    }

    /* HERO ACTIONS ON MOBILE */
    .city-hero__cta-group,
    .hero-stage-btns {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .city-hero__cta-group a,
    .hero-stage-btns a {
        width: 100% !important;
        min-height: 48px !important;
        justify-content: center !important;
    }

    /* MOBILE BOTTOM DOCK NAVIGATION (Royal Burgundy & Obsidian Finish) */
    .city-mobile-bottom-dock {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 62px !important;
        background: rgba(10, 10, 14, 0.95) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.65) !important;
        z-index: 99999 !important;
        justify-content: space-around !important;
        align-items: center !important;
        padding: 0 10px calc(env(safe-area-inset-bottom, 0px)) 10px !important;
    }

    body {
        padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .city-dock-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 !important;
        text-align: center !important;
        color: rgba(240, 240, 245, 0.72) !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        gap: 3px !important;
        transition: color 0.2s ease !important;
    }

    .city-dock-item svg {
        width: 22px !important;
        height: 22px !important;
        stroke-width: 2 !important;
        transition: transform 0.2s ease !important;
    }

    .city-dock-item:hover,
    .city-dock-item.is-active,
    .city-dock-item--highlight {
        color: #FFA3B2 !important;
    }

    .city-dock-item.is-active svg,
    .city-dock-item--highlight svg {
        color: #FFA3B2 !important;
        filter: drop-shadow(0 2px 8px rgba(225, 29, 72, 0.6)) !important;
        transform: translateY(-1px) !important;
    }
}

/* 3. Extra Small Screens (<= 480px, e.g. iPhone SE, Galaxy A) */
@media (max-width: 480px) {
    .city-section-title {
        font-size: 24px !important;
    }
    .city-section-subtitle {
        font-size: 13.5px !important;
    }
    .city-branch-card,
    .cis-life-card,
    .city-update-col.cis-bento-update-col,
    .cis-faq-box {
        border-radius: 16px !important;
    }
    .city-branch-card__visual,
    .cis-life-card__media {
        height: 175px !important;
    }
}

/* ==========================================================================
   SECTION 32: FINAL CALL TO ACTION (ADMISSIONS BANNER) - LUXURY ROYAL BURGUNDY
   Deep Dark Obsidian Canvas + Sculpted Royal Burgundy & Rose Crystal Card
   Full Dashboard Controlled Content, Typography & Dual Action CTA Buttons
   ========================================================================== */
html:not([data-theme="light"]):not(.city-light-mode) body #cityFinalCta,
html:not([data-theme="light"]):not(.city-light-mode) body .city-final-cta-section,
html:not([data-theme="light"]):not(.city-light-mode) body .cis-luxury-cta-section,
html.city-dark-mode #cityFinalCta,
html[data-theme="dark"] #cityFinalCta,
html:not([data-theme="light"]):not(.city-light-mode) #cityFinalCta,
html:not([data-theme="light"]) .city-final-cta-section {
    background: #08080C !important;
    padding: 42px 0 54px !important;
    position: relative !important;
    overflow: hidden !important;
    border: none !important;
}

/* Subtle Ambient Glow */
.city-final-cta-section::before {
    content: '' !important;
    position: absolute !important;
    width: 550px !important;
    height: 550px !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: radial-gradient(circle, rgba(122, 21, 40, 0.2) 0%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.city-final-cta-section .city-container {
    position: relative !important;
    z-index: 2 !important;
}

/* The Compact Luxury Banner Card Container */
.city-final-cta-card,
html:not([data-theme="light"]) .cis-luxury-cta-card {
    position: relative !important;
    max-width: 1040px !important;
    margin: 0 auto !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    padding: 46px 36px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 35px rgba(122, 21, 40, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.28) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.28) !important;
    background-color: #101015 !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}

/* The Multi-Layered Royal Burgundy Vignette Overlay */
.city-final-cta-overlay,
.cis-luxury-cta-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(ellipse 95% 85% at 50% 20%, rgba(18, 14, 22, 0.88) 0%, rgba(10, 8, 12, 0.95) 75%),
                linear-gradient(135deg, rgba(14, 12, 16, 0.92) 0%, rgba(122, 21, 40, 0.82) 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Inner Content Area */
.city-final-cta-content {
    position: relative !important;
    z-index: 2 !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Top Capsule Badge */
.city-cta-tag-wrap {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 14px !important;
}

.city-cta-tag,
.cis-luxury-cta-tag {
    background: rgba(122, 21, 40, 0.35) !important;
    border: 1px solid rgba(225, 29, 72, 0.45) !important;
    color: #FFA3B2 !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    padding: 5px 18px !important;
    border-radius: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
    letter-spacing: 0.3px !important;
}

/* Pulse Live Dot */
.cis-cta-pulse-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #FF5E7E !important;
    box-shadow: 0 0 8px #FF5E7E !important;
    display: inline-block !important;
    animation: cisPulseDot 2s infinite ease-in-out !important;
}

@keyframes cisPulseDot {
    0%, 100% { transform: scale(1); opacity: 0.95; }
    50% { transform: scale(1.35); opacity: 0.45; }
}

/* Main CTA Title (Refined Compact Scale) */
.city-cta-title,
html:not([data-theme="light"]) .cis-luxury-cta-title {
    color: #FFFFFF !important;
    font-size: clamp(24px, 3.8vw, 32px) !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
    margin: 0 0 12px 0 !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.85) !important;
}

/* Subtitle & Description */
.city-cta-desc,
.cis-luxury-cta-desc {
    color: rgba(240, 240, 245, 0.84) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    max-width: 660px !important;
    margin: 0 auto 18px auto !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

/* Trust Highlights Row (Unified Horizontal Sleek Row) */
.cis-cta-trust-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-bottom: 22px !important;
}

.cis-cta-trust-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 5px 14px !important;
    border-radius: 50px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transition: all 0.25s ease !important;
    white-space: nowrap !important;
}

.cis-cta-trust-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(225, 29, 72, 0.45) !important;
    transform: translateY(-2px) !important;
    color: #FFFFFF !important;
}

.cis-trust-icon {
    color: #FFA3B2 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Action Buttons Row */
.city-cta-buttons,
.cis-luxury-cta-buttons {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

/* Primary Apply Button (Royal Burgundy Gradient with Inset Glow) */
.city-btn--cta-apply,
.cis-btn--luxury-apply {
    background: linear-gradient(135deg, #8A0F1A 0%, #B81528 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #FFFFFF !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    padding: 12px 28px !important;
    border-radius: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 8px 22px rgba(184, 21, 40, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
}

.city-btn--cta-apply:hover,
.cis-btn--luxury-apply:hover {
    background: #E11D48 !important;
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(225, 29, 72, 0.55) !important;
}

/* Secondary Contact Button (Frosted White Glass) */
.city-btn--cta-contact,
.cis-btn--luxury-contact {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    padding: 12px 24px !important;
    border-radius: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.city-btn--cta-contact:hover,
.cis-btn--luxury-contact:hover {
    background: #FFFFFF !important;
    color: #7A1528 !important;
    border-color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4) !important;
}

/* Mobile Responsiveness for Section 32 */
@media (max-width: 768px) {
    .city-final-cta-section {
        padding: 35px 0 45px !important;
    }
    .city-final-cta-card,
    .cis-luxury-cta-card {
        padding: 30px 16px !important;
        border-radius: 18px !important;
    }
    .city-cta-title,
    .cis-luxury-cta-title {
        font-size: 22px !important;
        line-height: 1.35 !important;
        margin-bottom: 10px !important;
    }
    .city-cta-desc,
    .cis-luxury-cta-desc {
        font-size: 13.5px !important;
        line-height: 1.65 !important;
        margin-bottom: 18px !important;
    }
    .cis-cta-trust-row {
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }
    .cis-cta-trust-item {
        width: 100% !important;
        justify-content: center !important;
        font-size: 11.5px !important;
        padding: 6px 12px !important;
    }
    .city-cta-buttons,
    .cis-luxury-cta-buttons {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }
    .city-btn--cta-apply,
    .city-btn--cta-contact,
    .cis-btn--luxury-apply,
    .cis-btn--luxury-contact {
        width: 100% !important;
        min-height: 46px !important;
        justify-content: center !important;
        font-size: 14px !important;
    }
}

/* ==========================================================================
   SECTION 33: LUXURY ROYAL BURGUNDY FOOTER (MATCHING REFERENCE SHOWCASE)
   Deep Royal Burgundy Canvas + Centered "شكراً" Signature + Mighdad Elnour Credit
   Eliminates all cyan lines & navy backgrounds completely
   ========================================================================== */
html body .city-footer,
html body .cis-burgundy-luxury-footer,
html.city-dark-mode .city-footer,
html[data-theme="dark"] .city-footer,
.city-footer {
    background: radial-gradient(ellipse 95% 75% at 50% 12%, #320713 0%, #1D040A 50%, #0E0205 100%) !important;
    color: rgba(240, 240, 245, 0.8) !important;
    padding: 75px 0 0 0 !important;
    border-top: none !important;
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* Disable old cyan gradient top line */
.city-footer::before {
    display: none !important;
}

/* Top curved wave transition divider */
.city-footer .section-curve-divider.curve-top {
    position: absolute !important;
    top: -1px !important;
    left: 0 !important;
    width: 100% !important;
    line-height: 0 !important;
    z-index: 10 !important;
}

.city-footer .section-curve-divider.curve-top svg {
    display: block !important;
    width: 100% !important;
    height: 48px !important;
}

/* Footer Container */
.city-footer .city-container {
    position: relative !important;
    z-index: 12 !important;
}

/* 4-Column Grid */
.city-footer__grid {
    display: grid !important;
    grid-template-columns: 1.35fr 1fr 1fr 1.25fr !important;
    gap: 38px !important;
    margin-bottom: 30px !important;
}

/* Headings with Rose-Burgundy underline */
.city-footer__heading {
    font-size: 17.5px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    margin-bottom: 22px !important;
    position: relative !important;
    padding-bottom: 12px !important;
    border-bottom: none !important;
}

.city-footer__heading::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 40px !important;
    height: 3px !important;
    background: linear-gradient(90deg, #E11D48 0%, #FFA3B2 100%) !important;
    border-radius: 3px !important;
}

[dir="ltr"] .city-footer__heading::after {
    right: auto !important;
    left: 0 !important;
}

/* Links */
.city-footer__links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 11px !important;
}

.city-footer__links li a {
    color: rgba(240, 240, 245, 0.78) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    display: inline-block !important;
}

.city-footer__links li a:hover {
    color: #FFFFFF !important;
    transform: translateX(-4px) !important;
    text-shadow: 0 0 10px rgba(255, 94, 126, 0.5) !important;
}

/* Brand Column */
.city-footer__brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
    margin-bottom: 16px !important;
}

.city-footer__logo {
    width: 46px !important;
    height: 46px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5)) !important;
}

.city-footer__name {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    line-height: 1.3 !important;
    display: block !important;
}

.city-footer__sub {
    font-size: 11.5px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    display: block !important;
    margin-top: 3px !important;
}

.city-footer__about p {
    color: rgba(240, 240, 245, 0.76) !important;
    font-size: 13.5px !important;
    line-height: 1.7 !important;
    margin: 0 0 18px 0 !important;
}

.city-footer__countries {
    font-size: 12.5px !important;
    color: rgba(240, 240, 245, 0.8) !important;
    margin-bottom: 18px !important;
}

.city-footer__countries strong {
    color: #FFA3B2 !important;
}

/* Social Media Discs */
.city-footer__social {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.city-footer__social-link {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #FFFFFF !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.city-footer__social-link:hover {
    background: #E11D48 !important;
    border-color: #E11D48 !important;
    color: #FFFFFF !important;
    transform: translateY(-3px) scale(1.08) !important;
    box-shadow: 0 6px 18px rgba(225, 29, 72, 0.5) !important;
}

/* Contact Column */
.city-footer__contact {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 18px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.city-footer__contact li {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 13.5px !important;
    color: rgba(240, 240, 245, 0.82) !important;
}

.city-footer__contact li svg {
    color: #FFA3B2 !important;
    flex-shrink: 0 !important;
}

.city-footer__contact li a {
    color: #FFFFFF !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.city-footer__contact li a:hover {
    color: #FFA3B2 !important;
}

.city-footer-branches-chips {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.city-footer-branch-chip {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
}

.city-footer-branch-chip strong {
    color: #FFA3B2 !important;
}

/* ==========================================================================
   CENTERED SIGNATURE ("شكراً" - MATCHING REFERENCE IMAGE 2)
   ========================================================================== */
.cis-footer-thankyou {
    padding: 45px 0 24px 0 !important;
    margin-top: 25px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    text-align: center !important;
}

html:not([data-theme="light"]) .cis-footer-thankyou__title {
    font-size: 44px !important;
    font-weight: 900 !important;
    color: #FFFFFF !important;
    margin: 0 0 10px 0 !important;
    letter-spacing: -0.5px !important;
    text-shadow: 0 4px 25px rgba(0, 0, 0, 0.85) !important;
}

.cis-footer-thankyou__sub {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.88) !important;
    margin: 0 !important;
    letter-spacing: 0.3px !important;
}

/* ==========================================================================
   BOTTOM COPYRIGHT BAR & POWERED BY (Mighdad Elnour)
   ========================================================================== */
.city-copyright-bar,
.cis-luxury-copyright-bar {
    background: rgba(8, 2, 4, 0.85) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 22px 0 !important;
    width: 100% !important;
    position: relative !important;
    z-index: 15 !important;
}

.city-copyright-bar__inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

.city-copyright-bar__brand-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    align-items: flex-start !important;
}

.city-copyright-bar__text {
    font-size: 13px !important;
    color: rgba(240, 240, 245, 0.65) !important;
    margin: 0 !important;
}

.cis-footer-powered {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: rgba(240, 240, 245, 0.75) !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    direction: ltr !important;
    unicode-bidi: isolate !important;
    text-align: left !important;
}

.cis-powered-link {
    color: #FFA3B2 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
}

.cis-powered-link:hover {
    color: #FFFFFF !important;
    text-shadow: 0 0 12px rgba(255, 94, 126, 0.85) !important;
    text-decoration: underline !important;
}

.city-copyright-bar__links {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.city-copyright-bar__links a {
    color: rgba(240, 240, 245, 0.65) !important;
    font-size: 12.5px !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.city-copyright-bar__links a:hover {
    color: #FFFFFF !important;
}

.city-copyright-bar__links .sep {
    color: rgba(255, 255, 255, 0.25) !important;
}

.city-pwa-install-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #FFFFFF !important;
    padding: 6px 14px !important;
    border-radius: 50px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.25s ease !important;
}

.city-pwa-install-btn:hover {
    background: #E11D48 !important;
    border-color: #E11D48 !important;
    color: #FFFFFF !important;
}

/* Responsive Footer */
@media (max-width: 991px) {
    .city-footer__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px !important;
    }
    .city-copyright-bar__inner {
        flex-direction: column !important;
        text-align: center !important;
        gap: 14px !important;
    }
    .cis-footer-powered {
        justify-content: center !important;
    }
    .city-copyright-bar__links {
        justify-content: center !important;
    }
}

@media (max-width: 640px) {
    .city-footer {
        padding: 55px 0 0 0 !important;
    }
    .city-footer__grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    .cis-footer-thankyou__title {
        font-size: 32px !important;
    }
    .cis-footer-thankyou__sub {
        font-size: 14px !important;
    }
    .city-footer .section-curve-divider.curve-top svg {
        height: 32px !important;
    }
}






/* ==========================================================================
   SECTION 33: MASTER MOBILE-FIRST RESPONSIVE ENGINE (PHASE 1 OPTIMIZATION)
   Comprehensive audit & mobile-first responsive system covering 320px to 1920px
   Viewports: 320px, 360px, 375px, 390px, 414px, 430px, 480px, 768px, 820px, 1024px, 1280px, 1440px, 1920px
   Zero horizontal overflow | iOS Safari auto-zoom prevention | Safe area insets | 44px+ touch targets
   ========================================================================== */

/* --- 1. Universal Anti-Overflow & Viewport Core --- */
html, body {
    max-width: 100% !important;
    overflow-x: clip !important;
    position: relative !important;
    -webkit-overflow-scrolling: touch !important;
    -webkit-text-size-adjust: 100% !important;
}

@supports not (overflow-x: clip) {
    html, body {
        overflow-x: hidden !important;
    }
}

*, *::before, *::after {
    box-sizing: border-box !important;
}

/* Fluid Responsive Container Across All Viewports */
.city-container,
.container {
    width: 100% !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(12px, 3.8vw, 24px) !important;
    padding-right: clamp(12px, 3.8vw, 24px) !important;
    box-sizing: border-box !important;
}

/* Responsive Media & Embeds */
img, video, iframe, embed, object, canvas {
    max-width: 100% !important;
    height: auto !important;
}

svg {
    max-width: 100% !important;
}

/* Responsive Table Wrapper */
.table-responsive,
.csc-table-responsive,
.csc-table-container,
.city-table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
}

/* Universal Typography Wrap Protection */
h1, h2, h3, h4, h5, h6,
.city-section-title,
.hero-stage-h1,
.city-page-title,
.cis-footer-thankyou__title,
.city-cta-title {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
}

/* Directional Numbers & Emails In RTL Context */
a[href^="tel:"],
a[href^="mailto:"],
.dir-ltr,
.ltr-text,
.city-phone-num,
.city-email-text {
    direction: ltr !important;
    display: inline-block !important;
    unicode-bidi: isolate !important;
}

/* --- 2. Mobile Navigation & Header (<= 768px) --- */
@media (max-width: 768px) {
    .top-navbar-wrapper {
        height: 62px !important;
        padding: 0 !important;
    }

    .navbar-inner {
        height: 62px !important;
        padding: 0 4px !important;
    }

    .nav-brand {
        gap: 8px !important;
    }

    .nav-logo-box {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
    }

    .nav-brand-title {
        font-size: 1.15rem !important;
        line-height: 1.15 !important;
    }

    .nav-brand-sub {
        font-size: 0.7rem !important;
        line-height: 1.1 !important;
    }

    .nav-actions-group {
        gap: 6px !important;
    }

    /* Mobile Quick Login Button */
    .btn-nav-mobile-login {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 0 12px !important;
        font-size: 13px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        border-radius: 9999px !important;
        box-sizing: border-box !important;
    }

    /* Mobile Hamburger Button - Strictly 44x44px Minimum Touch Target */
    .btn-hamburger {
        min-width: 44px !important;
        min-height: 44px !important;
        width: 44px !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
    }

    /* Mobile Off-Canvas Drawer */
html:not([data-theme="light"]) .mobile-drawer-panel {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
        width: min(340px, 86vw) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        background: #0B0B0E !important;
        border-left: 1px solid rgba(225, 29, 72, 0.3) !important;
        box-shadow: -10px 0 35px rgba(0, 0, 0, 0.8) !important;
        z-index: 100001 !important;
        display: flex !important;
        flex-direction: column !important;
        padding-top: calc(16px + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .drawer-link {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        padding: 10px 14px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
    }

    .btn-close-drawer {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 20px !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: #FFFFFF !important;
        cursor: pointer !important;
    }
}

/* Extra Compact Header for Narrow Screens (<= 375px) */
@media (max-width: 375px) {
    .nav-brand-sub {
        display: none !important;
    }
    .nav-logo-box {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
    }
    .nav-brand-title {
        font-size: 1.05rem !important;
    }
    .btn-nav-mobile-login span {
        display: none !important;
    }
    .btn-nav-mobile-login {
        min-width: 44px !important;
        padding: 0 10px !important;
    }
}

/* --- 3. Hero Stage & Homepage Sections --- */
@media (max-width: 768px) {
    .hero-stage-section {
        padding: 30px 0 45px 0 !important;
    }

    .hero-stage-h1 {
        font-size: clamp(23px, 6vw, 36px) !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }

    .hero-stage-desc {
        font-size: 14.5px !important;
        line-height: 1.65 !important;
        margin-bottom: 22px !important;
        padding: 0 4px !important;
    }

    /* Hero CTA Vertical Stack on Mobile */
    .hero-stage-btns,
    .city-hero__cta-group {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .hero-stage-btns a,
    .city-hero__cta-group a {
        width: 100% !important;
        min-height: 48px !important;
        justify-content: center !important;
        font-size: 15px !important;
        box-sizing: border-box !important;
    }

    /* About Section Visual Stage (Clip Rotated Shapes) */
    .cis-visual-stage {
        max-width: 100% !important;
        overflow: hidden !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    .cis-deco-poly-1,
    .cis-deco-poly-2 {
        max-width: 100% !important;
    }

    /* Quick Access Grid Collapse */
    .smart-hubs-grid,
    .smart-hubs-grid-5,
    .quick-access-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
    }

    /* Academic Programs Grid Strict 1 Column on Mobile */
    .city-programs-grid,
    .city-programs-grid:has(> :nth-child(2):last-child),
    .city-programs-grid:has(> :only-child) {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 20px !important;
    }

    .city-program-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Campuses & Branches Strict 1 Column on Mobile */
    .city-branches-grid,
    .city-branches-grid:has(> :nth-child(2):last-child),
    .city-branches-grid:has(> :only-child),
    .branches-cards-grid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 20px !important;
    }

    .city-branch-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Teachers, Faculty & Hall of Fame */
    .faculty-grid,
    .cis-faculty-grid,
    .featured-teachers-grid,
    .hall-fame-grid,
    .cis-hof-grid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        gap: 18px !important;
    }

    /* School Life Gallery */
    .campus-gallery-grid,
    .school-life-grid,
    .cis-gallery-bleed-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        width: 100% !important;
    }

    /* Direct Online Learning Phone Stage */
    .city-direct-learning-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        width: 100% !important;
    }

    .city-direct-phones-img,
    .online-learning-phones-img {
        max-width: 90% !important;
        max-height: 320px !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }
}

/* Extra Small Screens (<= 480px, e.g. 320px, 360px, 375px, 390px, 414px, 430px) */
@media (max-width: 480px) {
    .smart-hubs-grid,
    .smart-hubs-grid-5,
    .quick-access-grid {
        grid-template-columns: 1fr !important;
    }

    .stats-strip-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .hub-interactive-card {
        padding: 14px 12px !important;
    }

    .city-section-title {
        font-size: 22px !important;
    }

    .city-section-subtitle {
        font-size: 13.5px !important;
        line-height: 1.6 !important;
    }
}

/* --- 4. Forms & Admissions Wizard Mobile Optimization --- */
/* Prevent iOS auto-zoom on input focus by guaranteeing 16px font-size */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="date"],
select,
textarea,
.csc-form-control,
.city-form-input,
.form-control {
    font-size: 16px !important;
    min-height: 46px !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
}

textarea.csc-form-control,
textarea.city-form-input,
textarea.form-control {
    min-height: 100px !important;
}

/* Form Row Stacking on Mobile */
@media (max-width: 768px) {
    .csc-admission-wizard,
    #cscAdmissionApp,
    .city-form-box {
        padding: 20px 14px !important;
        border-radius: 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .csc-form-row,
    .city-form-row {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .csc-step-actions,
    .city-form-actions {
        flex-direction: column-reverse !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .csc-step-actions button,
    .csc-step-actions a,
    .city-form-actions button,
    .city-form-actions a,
    .csc-btn-submit,
    .csc-btn-next,
    .csc-btn-prev {
        width: 100% !important;
        min-height: 48px !important;
        justify-content: center !important;
        font-size: 15px !important;
        box-sizing: border-box !important;
    }

    .csc-step-indicator,
    .csc-wizard-steps {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 8px !important;
        scrollbar-width: thin !important;
    }

    .csc-step-item {
        flex-shrink: 0 !important;
        min-height: 44px !important;
    }
}

@media (max-width: 360px) {
    .csc-admission-wizard,
    #cscAdmissionApp,
    .city-form-box {
        padding: 16px 10px !important;
    }
}

/* --- 5. Mobile Bottom Dock & Push Notice Banner Harmony --- */
@media (max-width: 768px) {
    .city-mobile-bottom-dock {
        height: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
        padding: 0 8px calc(env(safe-area-inset-bottom, 0px)) 8px !important;
        z-index: 99998 !important;
    }

    body {
        padding-bottom: calc(75px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Push Notification Notice Banner Elevated Above Bottom Dock */
    #cscPushNoticeBanner,
    .csc-push-banner {
        bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
        left: 10px !important;
        right: 10px !important;
        max-width: calc(100vw - 20px) !important;
        margin: 0 auto !important;
        z-index: 99999 !important;
        border-radius: 16px !important;
    }

    #cscBannerActionBtn {
        min-height: 44px !important;
        padding: 8px 18px !important;
        cursor: pointer !important;
    }

    #cscBannerCloseBtn {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* --- 6. Internal Pages & Portals (Student, Parent, Teacher) --- */
.city-page-banner {
    padding: clamp(32px, 7vw, 64px) 0 !important;
}

.city-page-title {
    font-size: clamp(22px, 5.2vw, 36px) !important;
    line-height: 1.3 !important;
}

.city-page-subtitle {
    font-size: clamp(13.5px, 3.2vw, 16px) !important;
    line-height: 1.65 !important;
}

@media (max-width: 768px) {
    .city-page-content {
        padding: 24px 0 40px 0 !important;
    }

    .csc-portal-grid,
    .csc-dashboard-cards {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        width: 100% !important;
    }

    .csc-portal-card,
    .csc-stat-card {
        width: 100% !important;
        padding: 16px 14px !important;
        border-radius: 16px !important;
    }

    .csc-quick-action-pill,
    .csc-portal-tab-btn {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* --- 7. Modals Responsiveness --- */
.city-modal,
.city-modal-box,
.csc-modal-content {
    max-width: min(520px, 94vw) !important;
    max-height: 88vh !important;
    border-radius: 20px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: clamp(18px, 4vw, 32px) !important;
    box-sizing: border-box !important;
}

.city-modal-close,
.btn-close-modal {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    cursor: pointer !important;
}

/* --- 8. Large Viewports (1440px & 1920px) Containment --- */
@media (min-width: 1440px) {
    .city-container,
    .container {
        max-width: 1360px !important;
    }
}

@media (min-width: 1920px) {
    .city-container,
    .container {
        max-width: 1440px !important;
    }
}

/* ==========================================================================
   ADMISSIONS PAGE (PAGE-APPLY) LUXURY EXPANSION & ANTI-CRAMP OPTIMIZATION
   ========================================================================== */
.city-apply-page-banner {
    background: linear-gradient(135deg, #0B0B0E 0%, #141418 50%, #1A0D14 100%) !important;
    border-bottom: 1px solid rgba(225, 29, 72, 0.25) !important;
    text-align: center !important;
}

html:not([data-theme="light"]) .city-apply-page-content {
    background: #0B0B0E !important;
}

html:not([data-theme="light"]) .city-admission-policy-card {
    max-width: 900px !important;
    margin: 36px auto 0 !important;
    padding: 32px !important;
    border-radius: 16px !important;
    background: #141418 !important;
    border: 1.5px solid rgba(225, 29, 72, 0.35) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important;
    color: #E2E8F0 !important;
}

@media (max-width: 768px) {
    .city-apply-page-banner {
        padding: 28px 12px 24px !important;
    }

    .city-apply-page-content,
    .page-template-page-apply .city-page-content,
    body.page-template-page-apply .city-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-top: 14px !important;
        padding-bottom: 30px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #cscAdmissionApp,
    .csc-admission-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px 10px !important;
        border-radius: 14px !important;
        margin: 0 auto !important;
    }

    #cscAdmissionApp .csc-stepper {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        position: relative !important;
        margin-bottom: 20px !important;
        padding: 0 4px !important;
        gap: 0 !important;
    }

    #cscAdmissionApp .csc-stepper::before {
        display: block !important;
        content: '' !important;
        position: absolute !important;
        top: 18px !important;
        right: 18px !important;
        left: 18px !important;
        height: 2px !important;
        background: rgba(255, 255, 255, 0.15) !important;
        z-index: 1 !important;
    }

    #cscAdmissionApp .csc-step {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        position: relative !important;
        z-index: 2 !important;
        padding: 0 !important;
        margin: 0 !important;
        min-width: auto !important;
        flex: 1 !important;
        text-align: center !important;
        background: transparent !important;
    }

html:not([data-theme="light"]) #cscAdmissionApp .csc-step .step-num {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        line-height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        margin: 0 auto !important;
        background: #181822 !important;
        border: 2px solid rgba(255, 255, 255, 0.2) !important;
        color: #94A3B8 !important;
    }

    #cscAdmissionApp .csc-step.active .step-num {
        background: linear-gradient(135deg, #7A1528 0%, #D31F33 100%) !important;
        border-color: #FFA3B2 !important;
        color: #FFFFFF !important;
        box-shadow: 0 0 14px rgba(211, 31, 51, 0.6) !important;
        transform: scale(1.12) !important;
    }

    #cscAdmissionApp .csc-step.completed .step-num {
        background: #7A1528 !important;
        border-color: #E11D48 !important;
        color: #FFFFFF !important;
    }

    #cscAdmissionApp .csc-step .step-title,
    #cscAdmissionApp .csc-step .step-sub {
        display: none !important;
    }

    #cscAdmissionApp .csc-step-header {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding-bottom: 12px !important;
        margin-bottom: 16px !important;
        text-align: right !important;
    }

    #cscAdmissionApp .csc-step-badge {
        font-size: 11.5px !important;
        padding: 3px 12px !important;
        display: inline-block !important;
        margin-bottom: 8px !important;
    }

    #cscAdmissionApp .csc-step-header h3 {
        font-size: 17.5px !important;
        line-height: 1.35 !important;
        margin: 6px 0 !important;
        color: #FFA3B2 !important;
    }

    #cscAdmissionApp .csc-step-intro {
        font-size: 13px !important;
        line-height: 1.55 !important;
        color: #94A3B8 !important;
        margin: 0 !important;
    }

    #cscAdmissionApp .csc-child-card {
        padding: 14px 10px !important;
        margin-bottom: 16px !important;
        border-radius: 12px !important;
        width: 100% !important;
    }

    #cscAdmissionApp .csc-child-card-header {
        padding-bottom: 10px !important;
        margin-bottom: 14px !important;
    }

    #cscAdmissionApp .csc-child-card-header h4 {
        font-size: 14.5px !important;
    }

    #cscAdmissionApp .csc-form-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
        width: 100% !important;
    }

    #cscAdmissionApp .csc-field {
        width: 100% !important;
        margin: 0 !important;
    }

    #cscAdmissionApp label,
    #cscAdmissionApp .csc-field label {
        font-size: 13px !important;
        margin-bottom: 5px !important;
    }

    #cscAdmissionApp input[type="text"],
    #cscAdmissionApp input[type="email"],
    #cscAdmissionApp input[type="tel"],
    #cscAdmissionApp input[type="date"],
    #cscAdmissionApp select,
    #cscAdmissionApp textarea,
    #cscAdmissionApp .csc-field input,
    #cscAdmissionApp .csc-field select,
    #cscAdmissionApp .csc-field textarea {
        width: 100% !important;
        min-height: 48px !important;
        padding: 10px 12px !important;
        font-size: 16px !important;
        border-radius: 10px !important;
    }

    #cscAdmissionApp #cscBtnAddChild {
        min-height: 48px !important;
        padding: 12px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
        width: 100% !important;
    }

    #cscAdmissionApp .csc-step-actions {
        display: flex !important;
        flex-direction: column-reverse !important;
        gap: 10px !important;
        margin-top: 18px !important;
        width: 100% !important;
    }

    #cscAdmissionApp .csc-step-actions button,
    #cscAdmissionApp .csc-step-actions a,
    #cscAdmissionApp .csc-btn-next,
    #cscAdmissionApp .csc-btn-prev,
    #cscAdmissionApp #cscSubmitAppBtn {
        width: 100% !important;
        min-height: 50px !important;
        font-size: 15px !important;
        justify-content: center !important;
        border-radius: 10px !important;
    }

    .city-admission-policy-card {
        padding: 16px 12px !important;
        margin-top: 20px !important;
        border-radius: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 360px) {
    .city-apply-page-content,
    .page-template-page-apply .city-page-content,
    body.page-template-page-apply .city-container {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    #cscAdmissionApp,
    .csc-admission-wrapper {
        padding: 14px 6px !important;
        border-radius: 10px !important;
    }

    #cscAdmissionApp .csc-child-card {
        padding: 10px 6px !important;
    }

    #cscAdmissionApp .csc-step .step-num {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        line-height: 30px !important;
        font-size: 11.5px !important;
    }

    #cscAdmissionApp .csc-stepper::before {
        top: 15px !important;
    }
}