/* ====================================================================
   MECA PLATFORM - UNIFIED CUSTOM STYLESHEET (meca-custom.css)
   Consolidated from page templates for performance, caching, and clean code.
   ==================================================================== */

/* ====================================================================
   SECTION: 1. Global Layout & Theme Foundation
   ==================================================================== */
/* ====================================================================
   IMAGE RESOLUTION, ASPECT RATIO & QUALITY PRESERVATION SYSTEM
   ==================================================================== */
.object-fit-cover {
    object-fit: cover !important;
    object-position: center center !important;
}

.object-fit-contain {
    object-fit: contain !important;
    object-position: center center !important;
}

img.object-fit-cover,
img.object-fit-contain,
.meca-banner-slide-bg,
.meca-video-slide-bg,
.meca-about-video-thumb img,
.meca-spotlight-poster img {
    image-rendering: -webkit-optimize-contrast !important;
}

/* Universal Form Field Label System */
.meca-field-label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #F8FAFC !important;
}

body.lightmode .meca-field-label {
    color: #0F172A !important;
}

.meca-field-label i {
    color: #C89B3C !important;
    font-size: 14px !important;
}

/* Global Light Theme Foundation */
        body.lightmode {
            background-color: #F8FAFC !important;
            color: #0F172A !important;
        }

        body.lightmode .title-heading,
        body.lightmode h1:not(.meca-slide-title):not(.mission-hero-content *):not([class*="hero-banner"] *),
        body.lightmode h2:not(.meca-slide-title):not(.meca-motto-banner *):not(.mission-hero-content *):not([class*="hero-banner"] *),
        body.lightmode h3,
        body.lightmode h4:not(.meca-card-gold-title):not(.meca-thumb-title):not(.meca-bento-card *):not(.meca-bento-title):not(.meca-motto-banner *),
        body.lightmode h5:not(.meca-thumb-title),
        body.lightmode h6 {
            color: #0F172A !important;
        }

        body.lightmode p:not(.meca-slide-desc):not(.meca-card-white-text):not(.meca-thumb-sub):not(.meca-bento-card *):not(.meca-bento-text):not(.meca-motto-banner *):not(.mission-hero-content *):not([class*="hero-banner"] *),
        body.lightmode .text-white-50:not(.meca-thumb-sub):not(.meca-video-slide-content *):not(.badge *):not(.meca-bento-card *):not(.meca-motto-banner *):not(.mission-hero-content *):not([class*="hero-banner"] *) {
            color: #475569 !important;
        }

        body.lightmode .text-white:not(.meca-slide-title):not(.meca-card-white-text):not(.meca-thumb-title):not(.btn):not(.btn *):not(button):not(button *):not(.meca-video-slide-content *):not(.meca-event-card-container *):not(.meca-bento-card *):not(.meca-motto-banner *):not(.mission-hero-content *):not([class*="hero-banner"] *):not(.badge *) {
            color: #0F172A !important;
        }

        body.lightmode .breadcrumb a {
            color: #64748B !important;
        }

        body.lightmode .breadcrumb .current-page,
        body.lightmode .breadcrumb .active {
            color: #0F172A !important;
        }

        body.lightmode .meca-breadcrumb-separator,
        body.lightmode .breadcrumb .separator-link {
            color: #64748B !important;
            font-weight: 600;
        }

        /* Dual-theme support for legacy breadcrumbs & tables across pages */
        .page_breadcrumbs {
            padding: 35px 0 !important;
            background: rgba(255, 255, 255, 0.03);
            border-bottom: 1px solid var(--accent-color-3, rgba(255, 255, 255, 0.08));
        }

        body.lightmode .page_breadcrumbs {
            background: #F1F5F9 !important;
            border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        }

        .page_breadcrumbs h2,
        .page_breadcrumbs .highlight2 {
            color: #FFFFFF !important;
            font-family: 'Outfit', sans-serif;
            font-weight: 700;
        }

        body.lightmode .page_breadcrumbs h2,
        body.lightmode .page_breadcrumbs .highlight2 {
            color: #0F172A !important;
        }

        body.lightmode .table {
            --bs-table-color: #0F172A !important;
            --bs-table-bg: #FFFFFF !important;
            --bs-table-striped-bg: #F8FAFC !important;
            --bs-table-hover-bg: #F1F5F9 !important;
            border-color: rgba(0, 0, 0, 0.1) !important;
        }

        body:not(.lightmode) .table {
            --bs-table-color: #E2E8F0 !important;
            --bs-table-bg: #12121A !important;
            --bs-table-striped-bg: #181824 !important;
            --bs-table-hover-bg: #222232 !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
        }


/* ====================================================================
   SECTION: 2. Header & Navigation System
   ==================================================================== */
/* Sticky Navigation Wrapper */
    .navbar-wrapper {
        position: sticky !important;
        top: 0 !important;
        z-index: 1050 !important;
        width: 100% !important;
        padding: 15px 0 !important;
        transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
        background: transparent;
    }

    .navbar-wrapper.is-scrolled {
        padding: 10px 0 !important;
        background: rgba(14, 14, 20, 0.92) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 10px 35px rgba(0, 0, 0, 0.6) !important;
    }

    body.lightmode .navbar-wrapper.is-scrolled {
        background: rgba(255, 255, 255, 0.95) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08) !important;
    }

    .navbar-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    .site-logo {
        height: 48px !important;
        width: auto !important;
        max-height: 48px !important;
        display: block !important;
        object-fit: contain !important;
    }

    /* Desktop Navbar Display System (>= 992px) */
    @media (min-width: 992px) {
        .navbar-expand-xl .navbar-collapse,
        .navbar-expand-lg .navbar-collapse,
        .navbar-collapse {
            display: flex !important;
            flex-basis: auto !important;
            justify-content: center !important;
            align-items: center !important;
            visibility: visible !important;
            opacity: 1 !important;
        }

        .navbar-nav {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            white-space: nowrap !important;
            align-items: center !important;
            gap: 2px !important;
        }

        .navbar-nav .nav-link {
            white-space: nowrap !important;
            padding: 8px 9px !important;
            display: inline-flex !important;
            align-items: center !important;
            font-size: 13.5px !important;
            font-weight: 600 !important;
            color: var(--primary, #D1D1D1) !important;
            transition: color 0.25s ease !important;
        }

        .meca-mobile-toggle,
        .navbar-toggler,
        .nav-btn {
            display: none !important;
        }
    }

    @media (min-width: 992px) and (max-width: 1240px) {
        .navbar-nav .nav-link {
            padding: 6px 6px !important;
            font-size: 12.5px !important;
        }
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
        color: var(--accent-color, #C82AEF) !important;
    }

    /* Mobile & Tablet Drawer System (< 992px) */
    @media (max-width: 991.98px) {
        .navbar-collapse:not(.show) {
            display: none !important;
        }

        .navbar-collapse.show {
            display: block !important;
            position: absolute !important;
            top: 100% !important;
            left: 12px !important;
            right: 12px !important;
            width: auto !important;
            background: rgba(14, 14, 20, 0.98) !important;
            backdrop-filter: blur(20px) !important;
            -webkit-backdrop-filter: blur(20px) !important;
            border-radius: 20px !important;
            padding: 18px 20px !important;
            margin-top: 10px !important;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75) !important;
            z-index: 1060 !important;
        }

        body.lightmode .navbar-collapse.show {
            background: rgba(255, 255, 255, 0.98) !important;
            border-color: rgba(0, 0, 0, 0.12) !important;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
        }

        .navbar-collapse .navbar-nav {
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
            width: 100% !important;
            gap: 4px !important;
            white-space: normal !important;
        }

        .navbar-collapse .navbar-nav .nav-item {
            width: 100% !important;
        }

        .navbar-collapse .navbar-nav .nav-link {
            width: 100% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            padding: 10px 14px !important;
            border-radius: 10px !important;
            font-size: 15px !important;
            font-weight: 600 !important;
            color: #FFFFFF !important;
        }

        body.lightmode .navbar-collapse .navbar-nav .nav-link {
            color: #0F172A !important;
        }

        .navbar-collapse .navbar-nav .nav-link:hover,
        .navbar-collapse .navbar-nav .nav-link.active {
            background: rgba(200, 42, 239, 0.12) !important;
            color: var(--accent-color, #C82AEF) !important;
        }

        .navbar-collapse .dropdown-menu {
            position: static !important;
            float: none !important;
            background: rgba(255, 255, 255, 0.05) !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            box-shadow: none !important;
            border-radius: 12px !important;
            padding: 6px 12px !important;
            margin: 4px 0 8px 0 !important;
            width: 100% !important;
        }

        body.lightmode .navbar-collapse .dropdown-menu {
            background: #F1F5F9 !important;
            border-color: #E2E8F0 !important;
        }

        .navbar-collapse .dropdown-item {
            padding: 8px 12px !important;
            font-size: 14px !important;
            border-radius: 8px !important;
        }
    }

    /* Universal Dropdown Hide & Display Guards */
    .dropdown-menu {
        display: none;
    }
    .dropdown-menu.show {
        display: block !important;
    }

    @media (min-width: 992px) {
        .navbar-nav .nav-item.dropdown {
            position: relative !important;
        }
        .navbar-nav .nav-item.dropdown .dropdown-menu {
            display: none;
            position: absolute !important;
            top: 100% !important;
            left: 0 !important;
            min-width: 180px !important;
            z-index: 1055 !important;
            border-radius: 12px !important;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
        }
        .navbar-nav .nav-item.dropdown:hover > .dropdown-menu,
        .navbar-nav .nav-item.dropdown > .dropdown-menu.show {
            display: block !important;
        }

        .navbar-action-container .dropdown {
            position: relative !important;
        }
        .navbar-action-container .dropdown .dropdown-menu {
            display: none;
            position: absolute !important;
            top: calc(100% + 10px) !important;
            right: 0 !important;
            left: auto !important;
            z-index: 1055 !important;
        }
        .navbar-action-container .dropdown .dropdown-menu.show {
            display: block !important;
        }
    }

    .navbar-action-container {
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    /* Circular Action Icon Buttons */
    .themeswitch, .meca-member-btn {
        height: 42px !important;
        width: 42px !important;
        min-width: 42px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        background-color: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid var(--accent-color-3, #1F1F1F) !important;
        color: #FFFFFF !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        cursor: pointer !important;
        font-size: 16px !important;
        transition: all 0.3s ease !important;
        text-decoration: none !important;
    }

    .themeswitch:hover, .meca-member-btn:hover {
        background-color: rgba(200, 42, 239, 0.2) !important;
        border-color: var(--accent-color, #C82AEF) !important;
        color: var(--accent-color, #C82AEF) !important;
        transform: scale(1.06);
    }

    /* Mobile Hamburger Toggle (Strictly Hidden on Desktop >= 992px) */
    .meca-mobile-toggle, .navbar-toggler.nav-btn {
        height: 42px !important;
        width: 42px !important;
        min-width: 42px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        background-color: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid var(--accent-color-3, #1F1F1F) !important;
        color: #FFFFFF !important;
        display: none !important;
        justify-content: center !important;
        align-items: center !important;
        cursor: pointer !important;
        font-size: 16px !important;
        transition: all 0.3s ease !important;
        text-decoration: none !important;
    }

    .meca-mobile-toggle:hover, .navbar-toggler.nav-btn:hover {
        background-color: rgba(200, 42, 239, 0.2) !important;
        border-color: var(--accent-color, #C82AEF) !important;
        color: var(--accent-color, #C82AEF) !important;
        transform: scale(1.06);
    }

    @media (max-width: 991.98px) {
        .meca-mobile-toggle, .navbar-toggler.nav-btn {
            display: inline-flex !important;
        }
    }

    /* Auth Dropdown Card (Matching Reference 1:1) */
    .meca-login-card {
        width: 290px !important;
        padding: 22px !important;
        background: #12121A !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 12px !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7) !important;
    }

    .meca-login-input {
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        color: #FFFFFF !important;
        border-radius: 4px !important;
        padding: 9px 12px !important;
        font-size: 14px !important;
        width: 100% !important;
        outline: none !important;
        transition: border-color 0.2s ease;
    }

    .meca-login-input::placeholder {
        font-style: italic !important;
        color: #8E9AAB !important;
        font-size: 13.5px !important;
    }

    .meca-login-input:focus {
        border-color: var(--accent-color, #C82AEF) !important;
        box-shadow: 0 0 10px rgba(200, 42, 239, 0.25) !important;
    }

    .meca-btn-login-navy {
        background: #0A2540 !important;
        color: #FFFFFF !important;
        border: none !important;
        border-radius: 4px !important;
        padding: 10px 16px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px;
        text-transform: uppercase !important;
        width: 100% !important;
        transition: background 0.2s ease, transform 0.2s ease;
    }

    .meca-btn-login-navy:hover {
        background: #0D335A !important;
        color: #FFFFFF !important;
        transform: translateY(-1px);
    }

    .meca-btn-signup-link {
        background: transparent !important;
        color: #FFFFFF !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        border-radius: 4px !important;
        padding: 8px 16px !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        width: 100% !important;
        text-align: center !important;
        display: block !important;
        text-decoration: none !important;
        transition: all 0.2s ease;
    }

    .meca-btn-signup-link:hover {
        background: rgba(200, 42, 239, 0.15) !important;
        border-color: var(--accent-color, #C82AEF) !important;
        color: #FFFFFF !important;
    }

    .meca-link-forgot {
        color: #A0ABC0 !important;
        font-size: 13px !important;
        text-decoration: none !important;
        transition: color 0.2s ease;
        display: inline-block;
    }

    .meca-link-forgot:hover {
        color: var(--accent-color, #C82AEF) !important;
        text-decoration: underline !important;
    }

    /* LIGHT MODE STYLES */
    body.lightmode .navbar-nav .nav-link {
        color: #1E293B !important;
    }

    body.lightmode .navbar-nav .nav-link:hover,
    body.lightmode .navbar-nav .nav-link.active {
        color: var(--accent-color, #C82AEF) !important;
    }

    body.lightmode .themeswitch, body.lightmode .meca-member-btn, body.lightmode .meca-mobile-toggle, body.lightmode .navbar-toggler.nav-btn {
        background-color: #F1F5F9 !important;
        border-color: rgba(0, 0, 0, 0.12) !important;
        color: #0F172A !important;
    }

    body.lightmode .meca-login-card {
        background: #FFFFFF !important;
        border: 1px solid rgba(0, 0, 0, 0.12) !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important;
    }

    body.lightmode .meca-login-input {
        background: #FFFFFF !important;
        border: 1px solid #CBD5E1 !important;
        color: #0F172A !important;
    }

    body.lightmode .meca-login-input::placeholder {
        color: #94A3B8 !important;
    }

    body.lightmode .meca-btn-login-navy {
        background: #0A2540 !important;
        color: #FFFFFF !important;
    }

    body.lightmode .meca-btn-signup-link {
        color: #0A2540 !important;
        border: 1px solid #CBD5E1 !important;
        background: #F8FAFC !important;
    }

    body.lightmode .meca-btn-signup-link:hover {
        background: #F1F5F9 !important;
        border-color: #0A2540 !important;
        color: #0A2540 !important;
    }

    body.lightmode .meca-link-forgot {
        color: #475569 !important;
    }

    body.lightmode .dropdown-menu {
        background: #FFFFFF !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
    }

    body.lightmode .dropdown-item {
        color: #1E293B !important;
    }

    body.lightmode .dropdown-item:hover {
        background: #F1F5F9 !important;
        color: var(--accent-color, #C82AEF) !important;
    }

    /* User Capsule Pill in Header (Dark Mode Default) */
    .meca-user-pill, #userMenuDropdown {
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid var(--accent-color-3, rgba(255, 255, 255, 0.15)) !important;
        color: #FFFFFF !important;
        transition: all 0.25s ease !important;
    }

    .meca-user-pill:hover, #userMenuDropdown:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        border-color: var(--accent-color, #C82AEF) !important;
    }

    .meca-user-name {
        color: #FFFFFF !important;
        font-weight: 700;
        font-size: 13.5px;
    }

    .meca-user-meta {
        color: rgba(255, 255, 255, 0.65) !important;
    }

    /* User Capsule Pill in Light Mode */
    body.lightmode .meca-user-pill,
    body.lightmode #userMenuDropdown {
        background: #FFFFFF !important;
        border: 1px solid rgba(0, 0, 0, 0.15) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    }

    body.lightmode .meca-user-pill:hover,
    body.lightmode #userMenuDropdown:hover {
        background: #F8FAFC !important;
        border-color: var(--accent-color, #C82AEF) !important;
    }

    body.lightmode .meca-user-name {
        color: #0F172A !important;
    }

    body.lightmode .meca-user-meta {
        color: #475569 !important;
    }


/* ====================================================================
   SECTION: 3. Footer System
   ==================================================================== */
/* ========================================================
       MECA Eye-Smoothing Dual-Theme Footer System
       ======================================================== */
    .section-footer {
        padding: 35px 0 25px 0;
        width: 100%;
        position: relative;
        z-index: 10;
    }

    .bg-footer-wrapper {
        width: 100%;
    }

    .bg-footer {
        background: #0B0F19;
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 30px;
        padding: 42px 40px 26px 40px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
        position: relative;
        overflow: hidden;
    }

    .bg-footer::before {
        content: '';
        position: absolute;
        bottom: -25%;
        right: -8%;
        width: 380px;
        height: 380px;
        background: radial-gradient(circle, rgba(124, 58, 237, 0.08) 0%, transparent 70%);
        pointer-events: none;
        z-index: 1;
    }

    .footer-logo-box {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 10px;
    }

    .footer-brand-title {
        color: #FFFFFF;
        font-family: 'Outfit', sans-serif;
        font-weight: 800;
        font-size: 1.45rem;
        margin: 0;
        line-height: 1.1;
        letter-spacing: 0.5px;
    }

    .footer-assoc-tag {
        color: #A855F7;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        display: block;
    }

    .footer-assoc-heading {
        color: #F1F5F9;
        font-family: 'Outfit', sans-serif;
        font-weight: 700;
        font-size: 1.02rem;
        margin-bottom: 8px;
    }

    .footer-assoc-desc {
        color: rgba(241, 245, 249, 0.7);
        font-size: 0.86rem;
        line-height: 1.6;
        margin-bottom: 16px;
    }

    .footer-col-title {
        color: #F8FAFC;
        font-family: 'Outfit', sans-serif;
        font-weight: 700;
        font-size: 1.05rem;
        margin-bottom: 18px;
        position: relative;
        padding-bottom: 8px;
    }

    .footer-col-title::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 28px;
        height: 2.5px;
        background: #8B5CF6;
        border-radius: 3px;
    }

    .footer-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .footer-list li a {
        color: rgba(241, 245, 249, 0.72);
        text-decoration: none;
        font-size: 0.88rem;
        font-weight: 500;
        transition: all 0.22s ease;
        display: inline-flex;
        align-items: center;
        gap: 9px;
    }

    .footer-link-icon {
        color: #A855F7;
        font-size: 0.82rem;
        width: 16px;
        flex-shrink: 0;
        transition: transform 0.2s ease;
    }

    .footer-list li a:hover {
        color: #C084FC;
        transform: translateX(3px);
    }

    .footer-list li a:hover .footer-link-icon {
        transform: scale(1.15);
    }

    .contact-list-compact {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 11px;
    }

    .contact-list-compact li {
        color: rgba(241, 245, 249, 0.75);
        font-size: 0.86rem;
        display: flex;
        align-items: flex-start;
        gap: 10px;
        line-height: 1.5;
    }

    .contact-list-compact li a {
        color: rgba(241, 245, 249, 0.75);
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .contact-list-compact li a:hover {
        color: #C084FC;
    }

    .contact-icon-small {
        color: #A855F7;
        font-size: 0.95rem;
        width: 18px;
        text-align: center;
        flex-shrink: 0;
        margin-top: 3px;
    }

    .social-container {
        display: flex;
        align-items: center;
        gap: 9px;
        margin-top: 12px;
    }

    .social-item {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #F1F5F9;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-size: 0.95rem;
        transition: all 0.22s ease;
    }

    .social-item:hover {
        background: #7C3AED;
        border-color: #7C3AED;
        color: #FFFFFF;
        transform: translateY(-2px);
        box-shadow: 0 4px 14px rgba(124, 58, 237, 0.25);
    }

    .footer-divider {
        width: 100%;
        height: 1px;
        background: rgba(255, 255, 255, 0.07);
        margin: 26px 0 16px 0;
    }

    .copyright {
        color: rgba(241, 245, 249, 0.55);
        font-size: 0.82rem;
        margin: 0;
    }

    .cg-brand-link {
        text-decoration: none;
    }

    .cg-brand-text {
        color: #A855F7;
        font-weight: 700;
        font-size: 0.82rem;
    }

    /* ========================================================
       EYE-SMOOTHING LIGHT MODE REFINED STYLING
       ======================================================== */
    body.lightmode .bg-footer {
        background: #F8FAFC !important;
        border: 1px solid #E2E8F0 !important;
        box-shadow: 0 12px 35px rgba(15, 23, 42, 0.04) !important;
    }

    body.lightmode .bg-footer::before {
        background: radial-gradient(circle, rgba(99, 102, 241, 0.05) 0%, transparent 70%) !important;
    }

    body.lightmode .footer-brand-title {
        color: #0F172A !important;
    }

    body.lightmode .footer-assoc-tag {
        color: #7C3AED !important;
    }

    body.lightmode .footer-assoc-heading,
    body.lightmode .footer-col-title {
        color: #1E293B !important;
    }

    body.lightmode .footer-col-title::after {
        background: #7C3AED !important;
    }

    body.lightmode .footer-assoc-desc {
        color: #475569 !important;
    }

    body.lightmode .footer-list li a,
    body.lightmode .contact-list-compact li,
    body.lightmode .contact-list-compact li a {
        color: #475569 !important;
    }

    body.lightmode .footer-link-icon,
    body.lightmode .contact-icon-small {
        color: #7C3AED !important;
    }

    body.lightmode .footer-list li a:hover,
    body.lightmode .contact-list-compact li a:hover {
        color: #7C3AED !important;
    }

    body.lightmode .social-item {
        background: #FFFFFF !important;
        border: 1px solid #E2E8F0 !important;
        color: #475569 !important;
    }

    body.lightmode .social-item:hover {
        background: #7C3AED !important;
        border-color: #7C3AED !important;
        color: #FFFFFF !important;
        box-shadow: 0 4px 14px rgba(124, 58, 237, 0.2) !important;
    }

    body.lightmode .footer-divider {
        background: #E2E8F0 !important;
    }

    body.lightmode .copyright {
        color: #64748B !important;
    }

    body.lightmode .cg-brand-text {
        color: #7C3AED !important;
    }


/* ====================================================================
   SECTION: 4. Home Page & Hero Banner Slider
   ==================================================================== */
    .section-banner {
        padding: 0 !important;
        width: 100%;
    }

    .banner-video-container {
        position: relative;
        width: 100%;
        height: 65vh;
        min-height: 480px;
        max-height: 620px;
        border-radius: var(--global-border-radius, 35px);
        overflow: hidden;
        border: 1px solid var(--accent-color-3, #1F1F1F);
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
        background: #090B14;
        display: flex;
        align-items: center;
    }

    .meca-hero-video-swiper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .meca-video-slide {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        padding: 80px 60px;
        overflow: hidden;
    }

    .meca-video-slide-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center center;
        image-rendering: -webkit-optimize-contrast;
        transition: transform 6s ease-in-out;
        z-index: 1;
    }

    .swiper-slide-active .meca-video-slide-bg { transform: none !important; }

    .meca-video-slide-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at 70% 35%, rgba(200, 42, 239, 0.2) 0%, rgba(14, 14, 20, 0.82) 55%, rgba(6, 7, 12, 0.95) 100%);
        /* blur removed for accurate crisp image resolution */
        z-index: 2;
    }

    .meca-video-slide-content {
        position: relative;
        z-index: 5;
        max-width: 780px;
        width: 100%;
    }

    .meca-slide-title {
        font-family: 'Outfit', sans-serif;
        font-size: 52px;
        font-weight: 800;
        color: #FFFFFF;
        line-height: 1.15;
        margin-bottom: 20px;
        opacity: 0;
        transform: translateY(25px);
        transition: all 0.8s ease 0.2s;
    }

    .meca-slide-desc {
        color: rgba(255, 255, 255, 0.75);
        font-size: 19px;
        line-height: 1.6;
        margin-bottom: 32px;
        max-width: 650px;
        opacity: 0;
        transform: translateY(25px);
        transition: all 0.8s ease 0.4s;
    }

    .meca-slide-actions {
        opacity: 0;
        transform: translateY(25px);
        transition: all 0.8s ease 0.6s;
    }

    .swiper-slide-active .meca-slide-title,
    .swiper-slide-active .meca-slide-desc,
    .swiper-slide-active .meca-slide-actions {
        opacity: 1;
        transform: translateY(0);
    }

    .banner-video-container .swiper-button-next,
    .banner-video-container .swiper-button-prev {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: rgba(14, 14, 20, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: #FFFFFF;
        backdrop-filter: blur(10px);
        transition: all 0.3s ease;
        z-index: 10;
    }

    .banner-video-container .swiper-button-next:after,
    .banner-video-container .swiper-button-prev:after {
        font-size: 20px;
        font-weight: bold;
    }

    .banner-video-container .swiper-button-next:hover,
    .banner-video-container .swiper-button-prev:hover {
        background: var(--accent-color, #C82AEF);
        border-color: var(--accent-color, #C82AEF);
        transform: scale(1.08);
    }

    .banner-video-container .swiper-pagination {
        bottom: 25px !important;
        z-index: 10;
    }

    .banner-video-container .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        background: rgba(255, 255, 255, 0.4);
        opacity: 1;
        transition: all 0.3s ease;
    }

    .banner-video-container .swiper-pagination-bullet-active {
        width: 32px;
        border-radius: 6px;
        background: var(--accent-color, #C82AEF);
        box-shadow: 0 0 15px rgba(200, 42, 239, 0.6);
    }

    /* ========================================================    /* ========================================================
       2. MECAADDA Executive Showcase Section (Grand Bento & Spotlight)
       ======================================================== */
    .meca-reunion-stage {
        background: radial-gradient(circle at 15% 20%, rgba(95, 14, 22, 0.35) 0%, rgba(14, 14, 20, 0.95) 100%);
        border: 1px solid rgba(226, 176, 72, 0.28);
        border-radius: 36px;
        padding: 45px;
        backdrop-filter: blur(20px);
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        position: relative;
        overflow: hidden;
    }

    body.lightmode .meca-reunion-stage {
        background: radial-gradient(circle at 15% 20%, rgba(254, 243, 199, 0.55) 0%, #FFFFFF 100%) !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 20px 50px rgba(15, 23, 42, 0.06) !important;
    }

    .meca-reunion-title {
        color: #FFFFFF;
        font-family: 'Playfair Display', Georgia, serif;
        font-size: 2rem;
    }

    body.lightmode .meca-reunion-title {
        color: #0F172A !important;
    }

    .meca-reunion-subtitle {
        color: rgba(255, 255, 255, 0.65);
        font-size: 15px;
    }

    body.lightmode .meca-reunion-subtitle {
        color: #475569 !important;
    }

    .meca-event-section-grid {
        display: grid;
        grid-template-columns: 340px 1fr;
        gap: 32px;
        align-items: stretch;
    }

    /* Left Spotlight Card */
    .meca-spotlight-card {
        background: linear-gradient(160deg, #4A0E12 0%, #2A0507 100%);
        border: 2px solid rgba(226, 176, 72, 0.45);
        border-radius: 28px;
        padding: 18px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45);
        transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    }

    .meca-spotlight-card:hover {
        transform: translateY(-4px);
        border-color: #E2B048;
        box-shadow: 0 22px 55px rgba(0, 0, 0, 0.6), 0 0 30px rgba(226, 176, 72, 0.3);
    }

    .meca-spotlight-poster {
        position: relative;
        border-radius: 20px;
        overflow: hidden;
        background: #1C0305;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    }

    .meca-spotlight-poster img {
        width: 100%;
        height: auto;
        display: block;
    }

    .meca-spotlight-badge {
        position: absolute;
        top: 12px;
        left: 12px;
        background: rgba(74, 14, 18, 0.9);
        backdrop-filter: blur(10px);
        border: 1px solid #E2B048;
        color: #E2B048;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1px;
        padding: 6px 14px;
        border-radius: 50px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    }

    /* Right 4 Luxury Bento Cards */
    .meca-bento-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        height: 100%;
    }

    .meca-bento-card {
        background: linear-gradient(150deg, #4A0E12 0%, #2A0507 100%);
        border: 1.5px solid rgba(226, 176, 72, 0.35);
        border-radius: 26px;
        padding: 26px 22px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
        transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
    }

    .meca-bento-card:hover {
        transform: translateY(-5px);
        border-color: #E2B048;
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55), 0 0 25px rgba(226, 176, 72, 0.25);
    }

    .meca-gold-icon-hub {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background: linear-gradient(135deg, #F5D77F 0%, #E2B048 50%, #B8860B 100%);
        color: #2A0507;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        margin-bottom: 12px;
        position: relative;
        z-index: 2;
        box-shadow: 0 6px 18px rgba(226, 176, 72, 0.35);
        transition: transform 0.3s ease;
    }

    .meca-bento-card:hover .meca-gold-icon-hub {
        transform: scale(1.1);
    }

    .meca-bento-title {
        color: #E2B048 !important;
        font-family: 'Playfair Display', Georgia, serif;
        font-size: 1.15rem;
        font-weight: 700;
        letter-spacing: 0.3px;
        margin-bottom: 6px;
        position: relative;
        z-index: 2;
    }

    .meca-bento-text {
        color: rgba(255, 255, 255, 0.92);
        font-size: 12.8px;
        line-height: 1.5;
        margin: 0;
        position: relative;
        z-index: 2;
    }

    /* CRITICAL: Guarantee 100% High Contrast on Maroon Bento Cards in Light Mode */
    body.lightmode .meca-bento-card,
    body.lightmode .meca-spotlight-card {
        background: linear-gradient(150deg, #4A0E12 0%, #2A0507 100%) !important;
        border-color: rgba(226, 176, 72, 0.45) !important;
    }

    body.lightmode .meca-bento-title,
    body.lightmode .meca-bento-card h4,
    body.lightmode .meca-bento-card .meca-bento-title {
        color: #FFD700 !important;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
    }

    body.lightmode .meca-bento-text,
    body.lightmode .meca-bento-card p,
    body.lightmode .meca-bento-card .meca-bento-text {
        color: #FFFFFF !important;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7) !important;
    }

    .meca-bento-watermark {
        position: absolute;
        bottom: -15px;
        right: -10px;
        font-size: 95px;
        color: rgba(255, 255, 255, 0.035);
        pointer-events: none;
        z-index: 1;
    }

    @media (max-width: 991px) {
        .meca-event-section-grid {
            grid-template-columns: 1fr;
            gap: 24px;
        }
        .meca-bento-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }
    }

    @media (max-width: 640px) {
        .meca-bento-grid {
            grid-template-columns: 1fr;
        }
        .meca-reunion-stage {
            padding: 24px 18px;
        }
    }

    /* ========================================================
       3. Marko Luxury Glassmorphism Showcase Cards
       ======================================================== */
    .meca-template-section-card {
        background: rgba(18, 18, 24, 0.65);
        border: 1px solid var(--accent-color-3, #1F1F1F);
        border-radius: 35px;
        padding: 50px;
        backdrop-filter: blur(15px);
        transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .meca-about-video-thumb {
        position: relative;
        width: 100%;
        height: 380px;
        border-radius: 20px;
        overflow: hidden;
        cursor: pointer;
        border: 1px solid var(--accent-color-3);
    }

    .meca-about-video-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .meca-about-video-thumb:hover img {
        transform: scale(1.05);
    }

    .meca-video-play-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 72px;
        height: 72px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.9);
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(5px);
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        transition: all 0.3s ease;
        text-decoration: none;
        padding-left: 4px;
        box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
    }

    .meca-about-video-thumb:hover .meca-video-play-btn {
        background: var(--accent-color, #C82AEF);
        border-color: var(--accent-color, #C82AEF);
        transform: translate(-50%, -50%) scale(1.15);
        color: #FFFFFF;
        box-shadow: 0 0 35px rgba(200, 42, 239, 0.7);
    }

    /* Video Lightbox Modal */
    .meca-video-modal .modal-content {
        background: #000000;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 16px;
        overflow: hidden;
    }

    .meca-video-modal .btn-close {
        filter: invert(1);
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 10;
    }

    /* ========================================================
       4. Comprehensive LIGHT MODE Overrides (Flawless Contrast)
       ======================================================== */
    body.lightmode {
        background-color: #F8FAFC !important;
        color: #0F172A !important;
    }

    body.lightmode .section {
        color: #0F172A;
    }

    /* Headings in Light Mode */
    body.lightmode h1:not(.meca-slide-title),
    body.lightmode h2:not(.meca-slide-title),
    body.lightmode h3,
    body.lightmode h4:not(.meca-card-gold-title):not(.meca-thumb-title):not(.meca-bento-card *):not(.meca-bento-title),
    body.lightmode h5:not(.meca-thumb-title),
    body.lightmode h6 {
        color: #0F172A !important;
    }

    /* Paragraphs and Muted text in Light Mode */
    body.lightmode p:not(.meca-slide-desc):not(.meca-card-white-text):not(.meca-thumb-sub):not(.meca-bento-card *):not(.meca-bento-text),
    body.lightmode .text-white-50:not(.meca-thumb-sub):not(.meca-video-slide-content *):not(.meca-bento-card *) {
        color: #475569 !important;
    }

    /* Generic text-white utility in Light Mode (except inside slides, maroon cards, overlays, and accent buttons) */
    body.lightmode .text-white:not(.meca-slide-title):not(.meca-card-white-text):not(.meca-thumb-title):not(.btn):not(.btn *):not(button):not(button *):not(.meca-video-slide-content *):not(.meca-event-card-container *):not(.meca-bento-card *) {
        color: #0F172A !important;
    }

    /* Membership / Pricing Cards in Light Mode */
    body.lightmode .card:not(.meca-maroon-card) {
        background: #FFFFFF !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    }

    body.lightmode .card:not(.meca-maroon-card) .display-5 {
        color: #0F172A !important;
    }

    body.lightmode .card:not(.meca-maroon-card) ul li {
        color: #475569 !important;
    }

    /* Template Section Cards (About MECA, Welfare) in Light Mode */
    body.lightmode .meca-template-section-card {
        background: #FFFFFF !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06) !important;
    }

    /* Image / Video Thumbnail Overlays (Always keep white text in both themes) */
    .meca-thumb-overlay {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%) !important;
    }

    .meca-thumb-title {
        color: #FFFFFF !important;
        font-weight: 700 !important;
        font-family: 'Outfit', sans-serif !important;
    }

    .meca-thumb-sub {
        color: rgba(255, 255, 255, 0.82) !important;
        font-size: 12px !important;
    }

    /* ========================================================
       Modern, Interactive & User-Friendly Stat Cards (Single-Line Grid)
       ======================================================== */
    .meca-stats-single-row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
        width: 100%;
        align-items: stretch;
    }

    .meca-stat-card {
        background: rgba(18, 18, 24, 0.72);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 24px;
        padding: 24px 16px;
        backdrop-filter: blur(16px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
        transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    .meca-stat-card:hover {
        transform: translateY(-6px);
        border-color: var(--accent-color, #C82AEF);
        box-shadow: 0 20px 45px rgba(200, 42, 239, 0.18);
    }

    .meca-stat-icon-hub {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        background: rgba(200, 42, 239, 0.12);
        border: 1px solid rgba(200, 42, 239, 0.25);
        color: var(--accent-color, #C82AEF);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        margin-bottom: 12px;
        transition: transform 0.3s ease, background 0.3s ease;
    }

    .meca-stat-card:hover .meca-stat-icon-hub {
        transform: scale(1.1);
        background: rgba(200, 42, 239, 0.2);
    }

    .meca-stat-number {
        font-family: 'Outfit', sans-serif;
        font-size: 2.25rem;
        font-weight: 800;
        line-height: 1.1;
        color: #FFFFFF;
        margin-bottom: 6px;
    }

    .meca-stat-number span {
        color: var(--accent-color, #C82AEF);
    }

    .meca-stat-label {
        font-family: 'Outfit', sans-serif;
        font-weight: 700;
        font-size: 0.92rem;
        color: #FFFFFF;
        margin-bottom: 4px;
        letter-spacing: 0.2px;
    }

    .meca-stat-subtext {
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.6);
        line-height: 1.35;
        margin: 0;
    }

    @media (max-width: 900px) {
        .meca-stats-single-row {
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
        }
    }

    @media (max-width: 520px) {
        .meca-stats-single-row {
            grid-template-columns: 1fr;
            gap: 12px;
        }
    }

    /* Stats Cards in Light Mode */
    body.lightmode .meca-stat-card {
        background: #FFFFFF !important;
        border: 1px solid rgba(0, 0, 0, 0.07) !important;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04) !important;
    }

    body.lightmode .meca-stat-card:hover {
        border-color: var(--accent-color, #C82AEF) !important;
        box-shadow: 0 20px 45px rgba(200, 42, 239, 0.15) !important;
    }

    body.lightmode .meca-stat-number {
        color: #0F172A !important;
    }

    body.lightmode .meca-stat-label {
        color: #0F172A !important;
    }

    body.lightmode .meca-stat-subtext {
        color: #64748B !important;
    }

    /* Events Section in Light Mode */
    body.lightmode #events .card {
        background: #FFFFFF !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    }

    body.lightmode #events .card h4 {
        color: #0F172A !important;
    }

    body.lightmode #events .card p {
        color: #475569 !important;
    }

    /* Polished Secondary / Outline Buttons */
    .btn-outline-light {
        color: #FFFFFF !important;
        border: 1px solid rgba(255, 255, 255, 0.22) !important;
        background: rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(8px);
        font-weight: 600;
        transition: all 0.3s ease !important;
    }

    .btn-outline-light:hover {
        background: var(--accent-color, #C82AEF) !important;
        border-color: var(--accent-color, #C82AEF) !important;
        color: #FFFFFF !important;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(200, 42, 239, 0.25);
    }

    /* Outline Buttons in Light Mode */
    body.lightmode .btn-outline-light {
        color: #0F172A !important;
        border: 1px solid rgba(0, 0, 0, 0.15) !important;
        background: #F1F5F9 !important;
        font-weight: 600;
    }

    body.lightmode .btn-outline-light:hover {
        background: var(--accent-color, #C82AEF) !important;
        border-color: var(--accent-color, #C82AEF) !important;
        color: #FFFFFF !important;
        box-shadow: 0 8px 20px rgba(200, 42, 239, 0.25);
    }

    /* 3-Tier Membership Styles (Gold, Silver, Bronze) */
    .meca-tier-card {
        border-radius: 24px;
        backdrop-filter: blur(15px);
        transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    }

    .meca-tier-card:hover {
        transform: translateY(-6px);
    }

    /* Gold Tier (Life Member) */
    .meca-tier-gold {
        background: radial-gradient(circle at top right, rgba(226, 176, 72, 0.16) 0%, rgba(18, 18, 24, 0.9) 100%);
        border: 2px solid rgba(226, 176, 72, 0.5) !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(226, 176, 72, 0.15);
    }
    .meca-tier-gold:hover {
        border-color: #E2B048 !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 35px rgba(226, 176, 72, 0.28);
    }
    .meca-tier-gold-icon {
        background: rgba(226, 176, 72, 0.18) !important;
        color: #E2B048 !important;
    }
    .meca-badge-gold {
        background: linear-gradient(135deg, #E2B048 0%, #F59E0B 100%) !important;
        color: #000000 !important;
        font-weight: 800;
        letter-spacing: 1px;
        font-size: 10px;
        padding: 4px 10px;
        border-radius: 20px;
    }

    /* Silver Tier (General Member) */
    .meca-tier-silver {
        background: radial-gradient(circle at top right, rgba(203, 213, 225, 0.14) 0%, rgba(18, 18, 24, 0.9) 100%);
        border: 2px solid rgba(203, 213, 225, 0.4) !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(203, 213, 225, 0.12);
    }
    .meca-tier-silver:hover {
        border-color: #CBD5E1 !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 35px rgba(203, 213, 225, 0.25);
    }
    .meca-tier-silver-icon {
        background: rgba(203, 213, 225, 0.15) !important;
        color: #E2E8F0 !important;
    }
    .meca-badge-silver {
        background: linear-gradient(135deg, #E2E8F0 0%, #94A3B8 100%) !important;
        color: #0F172A !important;
        font-weight: 800;
        letter-spacing: 1px;
        font-size: 10px;
        padding: 4px 10px;
        border-radius: 20px;
    }

    /* Bronze Tier (Student Member) */
    .meca-tier-bronze {
        background: radial-gradient(circle at top right, rgba(205, 127, 50, 0.15) 0%, rgba(18, 18, 24, 0.9) 100%);
        border: 2px solid rgba(205, 127, 50, 0.4) !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(205, 127, 50, 0.12);
    }
    .meca-tier-bronze:hover {
        border-color: #CD7F32 !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 35px rgba(205, 127, 50, 0.25);
    }
    .meca-tier-bronze-icon {
        background: rgba(205, 127, 50, 0.18) !important;
        color: #D97706 !important;
    }
    .meca-badge-bronze {
        background: linear-gradient(135deg, #F59E0B 0%, #B45309 100%) !important;
        color: #FFFFFF !important;
        font-weight: 800;
        letter-spacing: 1px;
        font-size: 10px;
        padding: 4px 10px;
        border-radius: 20px;
    }

    /* Light Mode Overrides for Membership Tiers */
    body.lightmode .meca-tier-card {
        background: #FFFFFF !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
    }
    body.lightmode .meca-tier-card:hover {
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12) !important;
    }
    body.lightmode .meca-tier-card h4,
    body.lightmode .meca-tier-card .display-5 {
        color: #0F172A !important;
    }
    body.lightmode .meca-tier-card .text-white-50 {
        color: #475569 !important;
    }

    @media (max-width: 992px) {
        .section-banner {
            padding: 0 15px 30px 15px;
        }
        .banner-video-container {
            height: auto;
            min-height: 480px;
            border-radius: 25px;
        }
        .meca-video-slide {
            padding: 60px 30px;
            min-height: 480px;
        }
        .meca-slide-title {
            font-size: 36px;
        }
        .meca-slide-desc {
            font-size: 16px;
        }
        .meca-maroon-card {
            padding: 30px 20px;
            min-height: 190px;
        }
        .meca-template-section-card {
            padding: 30px 20px;
            border-radius: 24px;
        }
        .meca-about-video-thumb {
            height: 260px;
            border-radius: 16px;
        }
    }


/* ====================================================================
   SECTION: 5. Members Directory
   ==================================================================== */
/* ========================================================
       MECA Members Directory Modern Dual-Theme Design System
       ======================================================== */
    
    /* 1. Hero Banner Slider & Breadcrumbs */
    .members-hero-banner {
        position: relative;
        width: 100%;
        height: 75vh;
        min-height: 560px;
        max-height: 720px;
        border-radius: var(--global-border-radius, 35px);
        overflow: hidden;
        border: 1px solid var(--accent-color-3, #1F1F1F);
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
        background-color: #090B14;
        display: flex;
        align-items: flex-end;
    }

    .meca-members-hero-swiper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .meca-banner-slide-bg {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center center;
        image-rendering: -webkit-optimize-contrast;
        transition: transform 7s ease-out;
    }

    .swiper-slide-active .meca-banner-slide-bg { transform: none !important; }

    .members-hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(9, 11, 20, 0.35) 0%, rgba(9, 11, 20, 0.88) 100%);
        z-index: 1;
        pointer-events: none;
    }

    .members-hero-content {
        position: relative;
        z-index: 2;
        padding: 45px 40px;
        width: 100%;
    }

    .members-hero-content h1,
    body.lightmode .members-hero-content h1 {
        color: #FFFFFF !important;
        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9) !important;
    }

    .members-hero-content p,
    body.lightmode .members-hero-content p {
        color: rgba(255, 255, 255, 0.92) !important;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85) !important;
    }

    /* Sub-badge */
    .meca-badge-sub {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--accent-color, #C82AEF);
        text-transform: uppercase;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 1.5px;
        margin-bottom: 12px;
    }

    /* Breadcrumbs (Matching About Us style) */
    .meca-breadcrumb-location {
        letter-spacing: 1.5px;
        font-size: 13.5px;
        font-weight: 700;
        text-transform: uppercase;
        font-family: 'Outfit', sans-serif;
    }

    .meca-breadcrumb-location a {
        color: #FFFFFF;
        text-decoration: none;
        transition: color 0.25s ease;
    }

    .meca-breadcrumb-location a:hover {
        color: var(--accent-color, #C82AEF);
    }

    .meca-breadcrumb-location .breadcrumb-active {
        color: #E2B048;
    }

    .meca-breadcrumb-separator {
        color: rgba(255, 255, 255, 0.4) !important;
    }

    body.lightmode .meca-breadcrumb-location a {
        color: #0F172A !important;
    }

    body.lightmode .meca-breadcrumb-location a:hover {
        color: var(--accent-color, #C82AEF) !important;
    }

    body.lightmode .meca-breadcrumb-separator {
        color: #94A3B8 !important;
    }

    /* 2. Main Directory Container & Card */
    .meca-members-card {
        background: rgba(18, 18, 24, 0.85);
        border: 1px solid var(--accent-color-3, rgba(255, 255, 255, 0.08));
        border-radius: 30px;
        padding: 40px;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
        position: relative;
    }

    /* 3. Toolbar: Search Bar & Page Length Selector */
    .meca-table-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 30px;
        padding-bottom: 24px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .meca-search-box-wrapper {
        position: relative;
        flex: 1;
        max-width: 460px;
        min-width: 260px;
    }

    .meca-search-input {
        width: 100%;
        height: 50px;
        padding: 10px 45px 10px 48px;
        background: rgba(255, 255, 255, 0.05);
        border: 1.5px solid rgba(255, 255, 255, 0.12);
        border-radius: 25px;
        color: #FFFFFF;
        font-size: 14.5px;
        transition: all 0.3s ease;
        outline: none;
    }

    .meca-search-input:focus {
        background: rgba(255, 255, 255, 0.08);
        border-color: var(--accent-color, #C82AEF);
        box-shadow: 0 0 15px rgba(200, 42, 239, 0.25);
    }

    .meca-search-icon {
        position: absolute;
        left: 18px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--accent-color, #C82AEF);
        font-size: 16px;
        pointer-events: none;
    }

    .meca-search-clear {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: rgba(255, 255, 255, 0.4);
        cursor: pointer;
        font-size: 15px;
        display: none;
        transition: color 0.2s ease;
    }

    .meca-search-clear:hover {
        color: #FFFFFF;
    }

    .meca-length-wrapper {
        display: flex;
        align-items: center;
        gap: 12px;
        color: rgba(255, 255, 255, 0.8);
        font-size: 14.5px;
        font-weight: 500;
    }

    .meca-length-select {
        height: 44px;
        padding: 6px 36px 6px 16px;
        background: rgba(255, 255, 255, 0.06);
        border: 1.5px solid rgba(255, 255, 255, 0.12);
        border-radius: 12px;
        color: #FFFFFF;
        font-size: 14px;
        font-weight: 600;
        outline: none;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .meca-length-select:focus {
        border-color: var(--accent-color, #C82AEF);
        box-shadow: 0 0 12px rgba(200, 42, 239, 0.25);
    }

    .meca-length-select option {
        background: #12121A;
        color: #FFFFFF;
    }

    /* 4. Table Styling */
    .meca-table-responsive {
        border-radius: 18px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    #mecaMembersTable {
        width: 100% !important;
        margin-bottom: 0 !important;
        border-collapse: separate;
        border-spacing: 0;
    }

    #mecaMembersTable thead th {
        background: linear-gradient(135deg, #2A0609 0%, #170406 100%) !important;
        color: #FFD700 !important;
        font-weight: 700 !important;
        font-size: 13.5px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        padding: 16px 18px !important;
        border-bottom: 2px solid rgba(226, 176, 72, 0.4) !important;
        border-top: none !important;
        white-space: nowrap;
    }

    #mecaMembersTable tbody tr {
        background: rgba(255, 255, 255, 0.015);
        transition: background 0.25s ease, transform 0.25s ease;
    }

    #mecaMembersTable tbody tr:nth-child(even) {
        background: rgba(255, 255, 255, 0.035);
    }

    #mecaMembersTable tbody tr:hover {
        background: rgba(200, 42, 239, 0.08) !important;
    }

    #mecaMembersTable tbody td {
        padding: 15px 18px !important;
        vertical-align: middle !important;
        border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
        border-bottom: none !important;
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 14.5px !important;
    }

    /* Member Badge Elements */
    .meca-sl-badge {
        font-weight: 700;
        color: rgba(255, 255, 255, 0.6);
        font-size: 13px;
    }

    .meca-member-cell {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .meca-avatar-circle {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(200, 42, 239, 0.25) 0%, rgba(99, 102, 241, 0.25) 100%);
        border: 1px solid rgba(200, 42, 239, 0.4);
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 14px;
        flex-shrink: 0;
    }

    .meca-member-name {
        font-weight: 700;
        color: #FFFFFF;
        font-size: 15px;
    }

    .meca-batch-badge {
        background: rgba(99, 102, 241, 0.15);
        color: #818CF8;
        border: 1px solid rgba(99, 102, 241, 0.3);
        padding: 4px 10px;
        border-radius: 8px;
        font-size: 12.5px;
        font-weight: 600;
        white-space: nowrap;
    }

    .meca-cadet-badge {
        background: rgba(226, 176, 72, 0.15);
        color: #E2B048;
        border: 1px solid rgba(226, 176, 72, 0.3);
        padding: 4px 10px;
        border-radius: 8px;
        font-size: 12.5px;
        font-weight: 600;
        white-space: nowrap;
    }

    .meca-contact-link {
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: color 0.2s ease;
    }

    .meca-contact-link:hover {
        color: var(--accent-color, #C82AEF);
    }

    /* Membership Tier Badges */
    .meca-tier-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
    }

    .meca-tier-gold {
        background: rgba(255, 215, 0, 0.15);
        color: #FFD700;
        border: 1px solid rgba(255, 215, 0, 0.35);
    }

    .meca-tier-silver {
        background: rgba(148, 163, 184, 0.15);
        color: #CBD5E1;
        border: 1px solid rgba(148, 163, 184, 0.35);
    }

    .meca-tier-general {
        background: rgba(200, 42, 239, 0.15);
        color: var(--accent-color, #C82AEF);
        border: 1px solid rgba(200, 42, 239, 0.35);
    }

    .meca-tier-associate {
        background: rgba(16, 185, 129, 0.15);
        color: #10B981;
        border: 1px solid rgba(16, 185, 129, 0.35);
    }

    /* 5. Custom Pagination & Info Footer */
    .meca-table-footer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .meca-table-info {
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
        font-weight: 500;
    }

    /* Hide default DataTables controls since we use our custom top/bottom controls */
    .dataTables_filter, .dataTables_length, .dataTables_info, .dataTables_paginate {
        display: none !important;
    }

    .meca-pagination-container {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .meca-page-btn {
        min-width: 38px;
        height: 38px;
        padding: 0 10px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #FFFFFF;
        font-size: 13.5px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.25s ease;
        outline: none;
    }

    .meca-page-btn:hover:not(:disabled):not(.active) {
        background: rgba(200, 42, 239, 0.2);
        border-color: var(--accent-color, #C82AEF);
        color: var(--accent-color, #C82AEF);
    }

    .meca-page-btn.active {
        background: linear-gradient(135deg, var(--accent-color, #C82AEF) 0%, #7C3AED 100%);
        border-color: transparent;
        color: #FFFFFF;
        box-shadow: 0 4px 15px rgba(200, 42, 239, 0.35);
    }

    .meca-page-btn:disabled {
        opacity: 0.35;
        cursor: not-allowed;
    }

    /* ========================================================
       LIGHT MODE HIGH-CONTRAST EYE-SMOOTHING OVERRIDES
       ======================================================== */
    body.lightmode .members-hero-banner {
        background-color: #090B14 !important;
    }

    body.lightmode .meca-members-card {
        background: #FFFFFF !important;
        border-color: #E2E8F0 !important;
        box-shadow: 0 15px 45px rgba(15, 23, 42, 0.08) !important;
    }

    body.lightmode .meca-table-toolbar,
    body.lightmode .meca-table-footer {
        border-color: #E2E8F0 !important;
    }

    body.lightmode .meca-search-input {
        background: #F8FAFC !important;
        border-color: #CBD5E1 !important;
        color: #0F172A !important;
    }

    body.lightmode .meca-search-input:focus {
        background: #FFFFFF !important;
        border-color: var(--accent-color, #C82AEF) !important;
        box-shadow: 0 0 15px rgba(200, 42, 239, 0.15) !important;
    }

    body.lightmode .meca-search-clear {
        color: #64748B !important;
    }

    body.lightmode .meca-length-wrapper {
        color: #334155 !important;
    }

    body.lightmode .meca-length-select {
        background: #F8FAFC !important;
        border-color: #CBD5E1 !important;
        color: #0F172A !important;
    }

    body.lightmode .meca-length-select option {
        background: #FFFFFF !important;
        color: #0F172A !important;
    }

    body.lightmode .meca-table-responsive {
        border-color: #E2E8F0 !important;
    }

    body.lightmode #mecaMembersTable tbody tr {
        background: #FFFFFF !important;
    }

    body.lightmode #mecaMembersTable tbody tr:nth-child(even) {
        background: #F8FAFC !important;
    }

    body.lightmode #mecaMembersTable tbody tr:hover {
        background: rgba(200, 42, 239, 0.06) !important;
    }

    body.lightmode #mecaMembersTable tbody td {
        border-color: #E2E8F0 !important;
        color: #334155 !important;
    }

    body.lightmode .meca-sl-badge {
        color: #64748B !important;
    }

    body.lightmode .meca-member-name {
        color: #0F172A !important;
    }

    body.lightmode .meca-contact-link {
        color: #334155 !important;
    }

    body.lightmode .meca-contact-link:hover {
        color: var(--accent-color, #C82AEF) !important;
    }

    body.lightmode .meca-table-info {
        color: #64748B !important;
    }

    body.lightmode .meca-page-btn {
        background: #FFFFFF !important;
        border: 1.5px solid #E2E8F0 !important;
        color: #1E293B !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
        font-weight: 600 !important;
    }

    body.lightmode .meca-page-btn:hover:not(:disabled):not(.active) {
        background: #F1F5F9 !important;
        border-color: #CBD5E1 !important;
        color: #7C3AED !important;
        transform: translateY(-1px);
    }

    body.lightmode .meca-page-btn.active {
        background: linear-gradient(135deg, #7C3AED 0%, #6366F1 100%) !important;
        border-color: transparent !important;
        color: #FFFFFF !important;
        box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4) !important;
        font-weight: 700 !important;
    }

    body.lightmode .meca-page-btn:disabled {
        background: #F8FAFC !important;
        border-color: #E2E8F0 !important;
        color: #94A3B8 !important;
        opacity: 0.5 !important;
    }

    @media (max-width: 991.98px) {
        .members-hero-banner {
            height: 42vh;
            min-height: 330px;
        }
        .members-hero-content {
            padding: 30px 20px;
        }
        .meca-members-card {
            padding: 24px 18px;
            border-radius: 24px;
        }
    }


/* ====================================================================
   SECTION: 6. Executive Committee
   ==================================================================== */
/* ========================================================
       MECA EC Members Modern Dual-Theme Design System
       ======================================================== */
    
    /* 1. Hero Banner Slider & Breadcrumbs */
    .ec-hero-banner {
        position: relative;
        width: 100%;
        height: 75vh;
        min-height: 560px;
        max-height: 720px;
        border-radius: var(--global-border-radius, 35px);
        overflow: hidden;
        border: 1px solid var(--accent-color-3, #1F1F1F);
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
        background-color: #090B14;
        display: flex;
        align-items: flex-end;
    }

    .meca-ec-hero-swiper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .meca-banner-slide-bg {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center center;
        image-rendering: -webkit-optimize-contrast;
        transition: transform 7s ease-out;
    }

    .swiper-slide-active .meca-banner-slide-bg { transform: none !important; }

    .ec-hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(9, 11, 20, 0.35) 0%, rgba(9, 11, 20, 0.88) 100%);
        z-index: 1;
        pointer-events: none;
    }

    .ec-hero-content {
        position: relative;
        z-index: 2;
        padding: 45px 40px;
        width: 100%;
    }

    .ec-hero-content h1,
    body.lightmode .ec-hero-content h1 {
        color: #FFFFFF !important;
        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9) !important;
    }

    .ec-hero-content p,
    body.lightmode .ec-hero-content p {
        color: rgba(255, 255, 255, 0.92) !important;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85) !important;
    }

    /* Sub-badge */
    .meca-badge-sub {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--accent-color, #C82AEF);
        text-transform: uppercase;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 1.5px;
        margin-bottom: 12px;
    }

    /* Breadcrumbs */
    .meca-breadcrumb-location {
        letter-spacing: 1.5px;
        font-size: 13.5px;
        font-weight: 700;
        text-transform: uppercase;
        font-family: 'Outfit', sans-serif;
    }

    .meca-breadcrumb-location a {
        color: #FFFFFF;
        text-decoration: none;
        transition: color 0.25s ease;
    }

    .meca-breadcrumb-location a:hover {
        color: var(--accent-color, #C82AEF);
    }

    .meca-breadcrumb-location .breadcrumb-active {
        color: #E2B048;
    }

    .meca-breadcrumb-separator {
        color: rgba(255, 255, 255, 0.4) !important;
    }

    body.lightmode .meca-breadcrumb-location a {
        color: #0F172A !important;
    }

    body.lightmode .meca-breadcrumb-location a:hover {
        color: var(--accent-color, #C82AEF) !important;
    }

    body.lightmode .meca-breadcrumb-separator {
        color: #94A3B8 !important;
    }

    /* 2. Executive Leadership Cards */
    .meca-ec-card {
        background: rgba(18, 18, 24, 0.85);
        border: 1px solid var(--accent-color-3, rgba(255, 255, 255, 0.08));
        border-radius: 30px;
        padding: 40px;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
        position: relative;
    }

    /* 2. Executive Leadership Cards (President & General Secretary Wrap-Around Layout) */
    .meca-leader-showcase-card {
        background: rgba(18, 18, 24, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 30px;
        padding: 38px 40px;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
        position: relative;
        overflow: hidden;
    }

    .meca-leader-showcase-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 6px;
        height: 100%;
        background: linear-gradient(180deg, var(--accent-color, #C82AEF) 0%, #7C3AED 100%);
    }

    .meca-leader-showcase-card.is-president::before {
        background: linear-gradient(180deg, #FFD700 0%, #E2B048 100%);
    }

    .meca-leader-header-bar {
        position: relative;
        margin-bottom: 22px;
    }

    .meca-leader-watermark-quote {
        position: absolute;
        top: -12px;
        right: 10px;
        font-size: 4.2rem;
        color: rgba(255, 255, 255, 0.04);
        pointer-events: none;
        line-height: 1;
    }

    .meca-leader-msg-title {
        font-family: 'Outfit', sans-serif;
        font-weight: 700;
        font-size: 1.45rem;
        color: #FFFFFF;
        margin-bottom: 6px;
    }

    .meca-leader-msg-divider {
        width: 55px;
        height: 3px;
        background: var(--accent-color, #C82AEF);
        border-radius: 2px;
    }

    .is-president .meca-leader-msg-divider {
        background: #FFD700;
    }

    /* Floated Profile Box: wraps text naturally */
    .meca-leader-float-profile {
        float: left;
        width: 255px;
        margin-right: 30px;
        margin-bottom: 18px;
        padding: 22px 16px;
        background: rgba(255, 255, 255, 0.025);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 22px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .meca-leader-avatar-frame {
        width: 155px;
        height: 155px;
        border-radius: 50%;
        padding: 5px;
        background: linear-gradient(135deg, rgba(200, 42, 239, 0.4) 0%, rgba(99, 102, 241, 0.4) 100%);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
        margin-bottom: 16px;
        flex-shrink: 0;
    }

    .is-president .meca-leader-avatar-frame {
        background: linear-gradient(135deg, #FFD700 0%, #E2B048 100%);
        box-shadow: 0 10px 25px rgba(226, 176, 72, 0.25);
    }

    .meca-leader-avatar-frame img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        object-position: top center;
        display: block;
        background-color: #12121A;
        border: 2px solid rgba(255, 255, 255, 0.15);
    }

    .meca-leader-name {
        font-family: 'Outfit', sans-serif;
        font-weight: 700;
        font-size: 1.15rem;
        color: #FFFFFF;
        line-height: 1.35;
        margin-bottom: 8px;
    }

    .meca-leader-pill-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 14px;
        border-radius: 20px;
        font-weight: 700;
        font-size: 11.5px;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        margin-bottom: 10px;
    }

    .meca-leader-pill-badge.president {
        background: rgba(255, 215, 0, 0.15);
        color: #FFD700;
        border: 1px solid rgba(255, 215, 0, 0.4);
    }

    .meca-leader-pill-badge.gs {
        background: rgba(200, 42, 239, 0.15);
        color: var(--accent-color, #C82AEF);
        border: 1px solid rgba(200, 42, 239, 0.4);
    }

    .meca-leader-tenure-badge {
        display: inline-flex;
        align-items: center;
        background: rgba(255, 255, 255, 0.05);
        color: rgba(255, 255, 255, 0.75);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        padding: 4px 12px;
        font-size: 11.5px;
        font-weight: 600;
    }

    .meca-leader-msg-content {
        color: rgba(255, 255, 255, 0.88);
        font-size: 15px;
        line-height: 1.85;
        text-align: justify;
    }

    .meca-leader-msg-content p {
        margin-bottom: 14px;
    }

    .meca-leader-signoff {
        margin-top: 24px;
        padding-top: 16px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
    }

    .meca-signoff-motto {
        font-style: italic;
        color: #E2B048;
        font-weight: 600;
        font-size: 14px;
    }

    /* 3. Toolbar & Data Table */
    .meca-table-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 25px;
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .meca-search-box-wrapper {
        position: relative;
        flex: 1;
        max-width: 440px;
        min-width: 250px;
    }

    .meca-search-input {
        width: 100%;
        height: 48px;
        padding: 10px 45px 10px 45px;
        background: rgba(255, 255, 255, 0.05);
        border: 1.5px solid rgba(255, 255, 255, 0.12);
        border-radius: 24px;
        color: #FFFFFF;
        font-size: 14.5px;
        transition: all 0.3s ease;
        outline: none;
    }

    .meca-search-input:focus {
        background: rgba(255, 255, 255, 0.08);
        border-color: var(--accent-color, #C82AEF);
        box-shadow: 0 0 15px rgba(200, 42, 239, 0.25);
    }

    .meca-search-icon {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--accent-color, #C82AEF);
        font-size: 15px;
        pointer-events: none;
    }

    .meca-search-clear {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: rgba(255, 255, 255, 0.4);
        cursor: pointer;
        font-size: 15px;
        display: none;
        transition: color 0.2s ease;
    }

    .meca-search-clear:hover {
        color: #FFFFFF;
    }

    .meca-length-wrapper {
        display: flex;
        align-items: center;
        gap: 10px;
        color: rgba(255, 255, 255, 0.8);
        font-size: 14px;
        font-weight: 500;
    }

    .meca-length-select {
        height: 42px;
        padding: 6px 32px 6px 14px;
        background: rgba(255, 255, 255, 0.06);
        border: 1.5px solid rgba(255, 255, 255, 0.12);
        border-radius: 10px;
        color: #FFFFFF;
        font-size: 14px;
        font-weight: 600;
        outline: none;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .meca-length-select:focus {
        border-color: var(--accent-color, #C82AEF);
        box-shadow: 0 0 12px rgba(200, 42, 239, 0.25);
    }

    .meca-length-select option {
        background: #12121A;
        color: #FFFFFF;
    }

    .meca-table-responsive {
        border-radius: 18px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .meca-table {
        width: 100% !important;
        margin-bottom: 0 !important;
        border-collapse: separate;
        border-spacing: 0;
    }

    .meca-table thead th {
        background: linear-gradient(135deg, #2A0609 0%, #170406 100%) !important;
        color: #FFD700 !important;
        font-weight: 700 !important;
        font-size: 13.5px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        padding: 16px 18px !important;
        border-bottom: 2px solid rgba(226, 176, 72, 0.4) !important;
        border-top: none !important;
        white-space: nowrap;
    }

    .meca-table tbody tr {
        background: rgba(255, 255, 255, 0.015);
        transition: background 0.25s ease;
    }

    .meca-table tbody tr:nth-child(even) {
        background: rgba(255, 255, 255, 0.035);
    }

    .meca-table tbody tr:hover {
        background: rgba(200, 42, 239, 0.08) !important;
    }

    .meca-table tbody td {
        padding: 15px 18px !important;
        vertical-align: middle !important;
        border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
        border-bottom: none !important;
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 14.5px !important;
    }

    .meca-sl-badge {
        font-weight: 700;
        color: rgba(255, 255, 255, 0.6);
        font-size: 13px;
    }

    .meca-member-name {
        font-weight: 700;
        color: #FFFFFF;
        font-size: 15px;
    }

    .meca-batch-badge {
        background: rgba(99, 102, 241, 0.15);
        color: #818CF8;
        border: 1px solid rgba(99, 102, 241, 0.3);
        padding: 4px 10px;
        border-radius: 8px;
        font-size: 12.5px;
        font-weight: 600;
        white-space: nowrap;
    }

    .meca-cadet-badge {
        background: rgba(226, 176, 72, 0.15);
        color: #E2B048;
        border: 1px solid rgba(226, 176, 72, 0.3);
        padding: 4px 10px;
        border-radius: 8px;
        font-size: 12.5px;
        font-weight: 600;
        white-space: nowrap;
    }

    .meca-position-badge {
        background: rgba(200, 42, 239, 0.15);
        color: var(--accent-color, #C82AEF);
        border: 1px solid rgba(200, 42, 239, 0.35);
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
    }

    .meca-position-president {
        background: rgba(255, 215, 0, 0.15);
        color: #FFD700;
        border-color: rgba(255, 215, 0, 0.4);
    }

    .meca-position-gs {
        background: rgba(99, 102, 241, 0.15);
        color: #818CF8;
        border-color: rgba(99, 102, 241, 0.4);
    }

    /* 4. Pagination & Footer */
    .meca-table-footer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-top: 20px;
        padding-top: 18px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .meca-table-info {
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
        font-weight: 500;
    }

    .dataTables_filter, .dataTables_length, .dataTables_info, .dataTables_paginate {
        display: none !important;
    }

    .meca-pagination-container {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .meca-page-btn {
        min-width: 38px;
        height: 38px;
        padding: 0 10px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #FFFFFF;
        font-size: 13.5px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.25s ease;
        outline: none;
    }

    .meca-page-btn:hover:not(:disabled):not(.active) {
        background: rgba(200, 42, 239, 0.2);
        border-color: var(--accent-color, #C82AEF);
        color: var(--accent-color, #C82AEF);
    }

    .meca-page-btn.active {
        background: linear-gradient(135deg, var(--accent-color, #C82AEF) 0%, #7C3AED 100%) !important;
        border-color: transparent !important;
        color: #FFFFFF !important;
        box-shadow: 0 4px 15px rgba(200, 42, 239, 0.35) !important;
        font-weight: 700 !important;
    }

    .meca-page-btn:disabled {
        opacity: 0.35;
        cursor: not-allowed;
    }

    /* 5. Previous EC Accordion / Collapsible Styling */
    .meca-accordion-btn {
        width: 100%;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        padding: 18px 24px;
        color: #FFFFFF;
        font-weight: 700;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: all 0.3s ease;
        text-decoration: none;
    }

    .meca-accordion-btn:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: var(--accent-color, #C82AEF);
        color: #FFFFFF;
    }

    /* ========================================================
       LIGHT MODE HIGH-CONTRAST EYE-SMOOTHING OVERRIDES
       ======================================================== */
    body.lightmode .ec-hero-banner {
        background-color: #090B14 !important;
    }

    body.lightmode .meca-ec-card,
    body.lightmode .meca-leader-showcase-card {
        background: #FFFFFF !important;
        border-color: #E2E8F0 !important;
        box-shadow: 0 15px 45px rgba(15, 23, 42, 0.08) !important;
    }

    body.lightmode .meca-leader-float-profile {
        background: #F8FAFC !important;
        border-color: #E2E8F0 !important;
    }

    body.lightmode .meca-leader-avatar-frame img {
        background-color: #FFFFFF !important;
        border-color: #CBD5E1 !important;
    }

    body.lightmode .meca-leader-name {
        color: #0F172A !important;
    }

    body.lightmode .meca-leader-tenure-badge {
        background: #F1F5F9 !important;
        color: #475569 !important;
        border-color: #E2E8F0 !important;
    }

    body.lightmode .meca-leader-watermark-quote {
        color: rgba(15, 23, 42, 0.04) !important;
    }

    body.lightmode .meca-leader-msg-title {
        color: #0F172A !important;
    }

    body.lightmode .meca-leader-msg-content,
    body.lightmode .meca-leader-msg-content p {
        color: #334155 !important;
    }

    body.lightmode .meca-leader-signoff {
        border-top-color: #E2E8F0 !important;
    }

    body.lightmode .meca-signoff-motto {
        color: #B45309 !important;
    }

    body.lightmode .meca-table-toolbar,
    body.lightmode .meca-table-footer {
        border-color: #E2E8F0 !important;
    }

    body.lightmode .meca-search-input {
        background: #F8FAFC !important;
        border-color: #CBD5E1 !important;
        color: #0F172A !important;
    }

    body.lightmode .meca-search-input:focus {
        background: #FFFFFF !important;
        border-color: var(--accent-color, #C82AEF) !important;
        box-shadow: 0 0 15px rgba(200, 42, 239, 0.15) !important;
    }

    body.lightmode .meca-search-clear {
        color: #64748B !important;
    }

    body.lightmode .meca-length-wrapper {
        color: #334155 !important;
    }

    body.lightmode .meca-length-select {
        background: #F8FAFC !important;
        border-color: #CBD5E1 !important;
        color: #0F172A !important;
    }

    body.lightmode .meca-length-select option {
        background: #FFFFFF !important;
        color: #0F172A !important;
    }

    body.lightmode .meca-table-responsive {
        border-color: #E2E8F0 !important;
    }

    body.lightmode .meca-table tbody tr {
        background: #FFFFFF !important;
    }

    body.lightmode .meca-table tbody tr:nth-child(even) {
        background: #F8FAFC !important;
    }

    body.lightmode .meca-table tbody tr:hover {
        background: rgba(200, 42, 239, 0.06) !important;
    }

    body.lightmode .meca-table tbody td {
        border-color: #E2E8F0 !important;
        color: #334155 !important;
    }

    body.lightmode .meca-sl-badge {
        color: #64748B !important;
    }

    body.lightmode .meca-member-name {
        color: #0F172A !important;
    }

    body.lightmode .meca-table-info {
        color: #64748B !important;
    }

    /* Fixed Light Mode Pagination Buttons */
    body.lightmode .meca-page-btn {
        background: #FFFFFF !important;
        border: 1.5px solid #E2E8F0 !important;
        color: #1E293B !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
        font-weight: 600 !important;
    }

    body.lightmode .meca-page-btn:hover:not(:disabled):not(.active) {
        background: #F1F5F9 !important;
        border-color: #CBD5E1 !important;
        color: #7C3AED !important;
        transform: translateY(-1px);
    }

    body.lightmode .meca-page-btn.active {
        background: linear-gradient(135deg, #7C3AED 0%, #6366F1 100%) !important;
        border-color: transparent !important;
        color: #FFFFFF !important;
        box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4) !important;
        font-weight: 700 !important;
    }

    body.lightmode .meca-page-btn:disabled {
        background: #F8FAFC !important;
        border-color: #E2E8F0 !important;
        color: #94A3B8 !important;
        opacity: 0.5 !important;
    }

    body.lightmode .meca-accordion-btn {
        background: #F8FAFC !important;
        border-color: #E2E8F0 !important;
        color: #0F172A !important;
    }

    body.lightmode .meca-accordion-btn:hover {
        background: #FFFFFF !important;
        border-color: var(--accent-color, #C82AEF) !important;
        color: var(--accent-color, #C82AEF) !important;
    }

    @media (max-width: 991.98px) {
        .ec-hero-banner {
            height: 42vh;
            min-height: 330px;
        }
        .ec-hero-content {
            padding: 30px 20px;
        }
        .meca-ec-card,
        .meca-leader-showcase-card {
            padding: 24px 18px;
            border-radius: 24px;
        }
    }

    @media (max-width: 767.98px) {
        .meca-leader-float-profile {
            float: none;
            width: 100%;
            margin-right: 0;
            margin-bottom: 20px;
        }
    }


/* ====================================================================
   SECTION: 7. About MECA
   ==================================================================== */
/* ========================================================
       About Us Modern Styling & Dynamic Hero Banner Slider
       ======================================================== */
    .about-hero-banner {
        position: relative;
        width: 100%;
        height: 75vh;
        min-height: 560px;
        max-height: 720px;
        border-radius: var(--global-border-radius, 35px);
        overflow: hidden;
        border: 1px solid var(--accent-color-3, #1F1F1F);
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
        background-color: #090B14;
        display: flex;
        align-items: flex-end;
    }

    .meca-about-hero-swiper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .meca-banner-slide-bg {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center center;
        image-rendering: -webkit-optimize-contrast;
        transition: transform 7s ease-out;
    }

    .swiper-slide-active .meca-banner-slide-bg { transform: none !important; }

    .about-hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(9, 11, 20, 0.3) 0%, rgba(9, 11, 20, 0.88) 100%);
        z-index: 1;
        pointer-events: none;
    }

    .about-hero-content {
        position: relative;
        z-index: 2;
        padding: 40px;
        width: 100%;
        pointer-events: none;
    }

    /* Menu Location Breadcrumb matching Reference */
    .meca-breadcrumb-location {
        letter-spacing: 2px;
        font-size: 15px;
        font-weight: 700;
        text-transform: uppercase;
        font-family: 'Outfit', sans-serif;
    }

    .meca-breadcrumb-location a {
        color: #FFFFFF;
        text-decoration: none;
        transition: color 0.25s ease;
    }

    .meca-breadcrumb-location a:hover {
        color: var(--accent-color, #C82AEF);
    }

    .meca-breadcrumb-location .breadcrumb-active {
        color: #E2B048; /* Gold Accent from reference */
    }

    .meca-breadcrumb-separator {
        color: rgba(255, 255, 255, 0.45) !important;
        font-weight: 400;
    }

    /* Story Card Base */
    .meca-card-story {
        background: rgba(18, 18, 24, 0.85);
        border: 1px solid var(--accent-color-3, #1F1F1F);
        border-radius: 28px;
        padding: 40px;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
        transition: all 0.3s ease;
    }

    .meca-card-story:hover {
        border-color: rgba(200, 42, 239, 0.35);
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 25px rgba(200, 42, 239, 0.1);
    }

    .meca-story-img-container {
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid var(--accent-color-3, #1F1F1F);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    }

    .meca-story-img-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.4s ease;
    }

    .meca-story-img-container:hover img {
        transform: scale(1.03);
    }

    .meca-badge-sub {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--accent-color, #C82AEF);
        text-transform: uppercase;
        font-weight: 700;
        font-size: 12.5px;
        letter-spacing: 1.5px;
        margin-bottom: 8px;
    }

    .meca-title-gold {
        color: #E2B048;
        font-family: 'Outfit', sans-serif;
        font-weight: 700;
    }

    .meca-info-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 14px;
        border-radius: 30px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        font-size: 13px;
        color: rgba(255, 255, 255, 0.8);
    }

    /* Light Mode Overrides */
    body.lightmode .meca-breadcrumb-location a {
        color: #0F172A !important;
    }

    body.lightmode .meca-breadcrumb-location .breadcrumb-active {
        color: #B45309 !important; /* Rich amber gold in light mode */
    }

    body.lightmode .meca-breadcrumb-separator {
        color: #64748B !important;
        font-weight: 600;
    }

    body.lightmode .meca-card-story {
        background: #FFFFFF !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06) !important;
    }

    body.lightmode .meca-card-story:hover {
        border-color: rgba(200, 42, 239, 0.4) !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1) !important;
    }

    body.lightmode .meca-card-story h2,
    body.lightmode .meca-card-story h3,
    body.lightmode .meca-card-story h4 {
        color: #0F172A !important;
    }

    body.lightmode .meca-title-gold {
        color: #8B2500 !important; /* Deep rich maroon in light mode */
    }

    body.lightmode .meca-card-story p {
        color: #475569 !important;
    }

    body.lightmode .meca-info-pill {
        background: #F1F5F9 !important;
        border-color: rgba(0, 0, 0, 0.1) !important;
        color: #1E293B !important;
    }

    body.lightmode .meca-story-img-container {
        border-color: rgba(0, 0, 0, 0.1) !important;
    }


/* ====================================================================
   SECTION: 8. Governing Body
   ==================================================================== */
/* ========================================================
       MECA Governing Body Modern Dual-Theme Design System
       ======================================================== */
    
    /* 1. Hero Banner Slider & Breadcrumbs */
    .gb-hero-banner {
        position: relative;
        width: 100%;
        height: 75vh;
        min-height: 560px;
        max-height: 720px;
        border-radius: var(--global-border-radius, 35px);
        overflow: hidden;
        border: 1px solid var(--accent-color-3, #1F1F1F);
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
        background-color: #090B14;
        display: flex;
        align-items: flex-end;
    }

    .meca-gb-hero-swiper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .meca-banner-slide-bg {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center center;
        image-rendering: -webkit-optimize-contrast;
        transition: transform 7s ease-out;
    }

    .swiper-slide-active .meca-banner-slide-bg { transform: none !important; }

    .gb-hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(9, 11, 20, 0.35) 0%, rgba(9, 11, 20, 0.88) 100%);
        z-index: 1;
        pointer-events: none;
    }

    .gb-hero-content {
        position: relative;
        z-index: 2;
        padding: 45px 40px;
        width: 100%;
    }

    .gb-hero-content h1,
    body.lightmode .gb-hero-content h1 {
        color: #FFFFFF !important;
        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9) !important;
    }

    .gb-hero-content p,
    body.lightmode .gb-hero-content p {
        color: rgba(255, 255, 255, 0.92) !important;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85) !important;
    }

    /* Sub-badge */
    .meca-badge-sub {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--accent-color, #C82AEF);
        text-transform: uppercase;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 1.5px;
        margin-bottom: 12px;
    }

    /* Breadcrumbs */
    .meca-breadcrumb-location {
        letter-spacing: 1.5px;
        font-size: 13.5px;
        font-weight: 700;
        text-transform: uppercase;
        font-family: 'Outfit', sans-serif;
    }

    .meca-breadcrumb-location a {
        color: #FFFFFF;
        text-decoration: none;
        transition: color 0.25s ease;
    }

    .meca-breadcrumb-location a:hover {
        color: var(--accent-color, #C82AEF);
    }

    .meca-breadcrumb-location .breadcrumb-active {
        color: #E2B048;
    }

    .meca-breadcrumb-separator {
        color: rgba(255, 255, 255, 0.4) !important;
    }

    body.lightmode .meca-breadcrumb-location a {
        color: #0F172A !important;
    }

    body.lightmode .meca-breadcrumb-location a:hover {
        color: var(--accent-color, #C82AEF) !important;
    }

    body.lightmode .meca-breadcrumb-separator {
        color: #94A3B8 !important;
    }

    /* 2. Governing Body Showcase Cards */
    .meca-gb-card {
        background: rgba(18, 18, 24, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 30px;
        padding: 38px 40px;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
        position: relative;
        overflow: hidden;
    }

    .meca-gb-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 6px;
        height: 100%;
        background: linear-gradient(180deg, #FFD700 0%, #E2B048 100%);
    }

    .meca-gb-header-bar {
        position: relative;
        margin-bottom: 22px;
    }

    .meca-gb-watermark-quote {
        position: absolute;
        top: -12px;
        right: 10px;
        font-size: 4.2rem;
        color: rgba(255, 255, 255, 0.04);
        pointer-events: none;
        line-height: 1;
    }

    .meca-gb-msg-title {
        font-family: 'Outfit', sans-serif;
        font-weight: 700;
        font-size: 1.45rem;
        color: #FFFFFF;
        margin-bottom: 6px;
    }

    .meca-gb-msg-divider {
        width: 55px;
        height: 3px;
        background: #FFD700;
        border-radius: 2px;
    }

    /* Floated Profile Box: wraps text naturally */
    .meca-gb-float-profile {
        float: left;
        width: 255px;
        margin-right: 30px;
        margin-bottom: 18px;
        padding: 22px 16px;
        background: rgba(255, 255, 255, 0.025);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 22px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .meca-gb-avatar-frame {
        width: 155px;
        height: 155px;
        border-radius: 50%;
        padding: 5px;
        background: linear-gradient(135deg, #FFD700 0%, #E2B048 100%);
        box-shadow: 0 10px 25px rgba(226, 176, 72, 0.25);
        margin-bottom: 16px;
        flex-shrink: 0;
    }

    .meca-gb-avatar-frame img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        object-position: top center;
        display: block;
        background-color: #12121A;
        border: 2px solid rgba(255, 255, 255, 0.15);
    }

    .meca-gb-name {
        font-family: 'Outfit', sans-serif;
        font-weight: 700;
        font-size: 1.15rem;
        color: #FFFFFF;
        line-height: 1.35;
        margin-bottom: 8px;
    }

    .meca-gb-pill-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 14px;
        border-radius: 20px;
        font-weight: 700;
        font-size: 11.5px;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        margin-bottom: 10px;
        background: rgba(255, 215, 0, 0.15);
        color: #FFD700;
        border: 1px solid rgba(255, 215, 0, 0.4);
    }

    .meca-gb-tenure-badge {
        display: inline-flex;
        align-items: center;
        background: rgba(255, 255, 255, 0.05);
        color: rgba(255, 255, 255, 0.75);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        padding: 4px 12px;
        font-size: 11.5px;
        font-weight: 600;
    }

    .meca-gb-msg-content {
        color: rgba(255, 255, 255, 0.88);
        font-size: 15px;
        line-height: 1.85;
        text-align: justify;
    }

    .meca-gb-msg-content p {
        margin-bottom: 14px;
    }

    .meca-gb-signoff {
        margin-top: 24px;
        padding-top: 16px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
    }

    .meca-signoff-motto {
        font-style: italic;
        color: #E2B048;
        font-weight: 600;
        font-size: 14px;
    }

    /* ========================================================
       LIGHT MODE HIGH-CONTRAST EYE-SMOOTHING OVERRIDES
       ======================================================== */
    body.lightmode .gb-hero-banner {
        background-color: #090B14 !important;
    }

    body.lightmode .meca-gb-card {
        background: #FFFFFF !important;
        border-color: #E2E8F0 !important;
        box-shadow: 0 15px 45px rgba(15, 23, 42, 0.08) !important;
    }

    body.lightmode .meca-gb-float-profile {
        background: #F8FAFC !important;
        border-color: #E2E8F0 !important;
    }

    body.lightmode .meca-gb-avatar-frame img {
        background-color: #FFFFFF !important;
        border-color: #CBD5E1 !important;
    }

    body.lightmode .meca-gb-name {
        color: #0F172A !important;
    }

    body.lightmode .meca-gb-tenure-badge {
        background: #F1F5F9 !important;
        color: #475569 !important;
        border-color: #E2E8F0 !important;
    }

    body.lightmode .meca-gb-watermark-quote {
        color: rgba(15, 23, 42, 0.04) !important;
    }

    body.lightmode .meca-gb-msg-title {
        color: #0F172A !important;
    }

    body.lightmode .meca-gb-msg-content,
    body.lightmode .meca-gb-msg-content p {
        color: #334155 !important;
    }

    body.lightmode .meca-gb-signoff {
        border-top-color: #E2E8F0 !important;
    }

    body.lightmode .meca-signoff-motto {
        color: #B45309 !important;
    }

    @media (max-width: 991.98px) {
        .gb-hero-banner {
            height: 42vh;
            min-height: 330px;
        }
        .gb-hero-content {
            padding: 30px 20px;
        }
        .meca-gb-card {
            padding: 24px 18px;
            border-radius: 24px;
        }
    }

    @media (max-width: 767.98px) {
        .meca-gb-float-profile {
            float: none;
            width: 100%;
            margin-right: 0;
            margin-bottom: 20px;
        }
    }


/* ====================================================================
   SECTION: 9. Contact Us
   ==================================================================== */
/* ========================================================
       Contact Us Modern Design System with Dynamic Hero Slider
       ======================================================== */
    .contact-hero-banner {
        position: relative;
        width: 100%;
        height: 75vh;
        min-height: 560px;
        max-height: 720px;
        border-radius: var(--global-border-radius, 35px);
        overflow: hidden;
        border: 1px solid var(--accent-color-3, #1F1F1F);
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
        background-color: #090B14;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .meca-contact-hero-swiper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .meca-banner-slide-bg {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center center;
        image-rendering: -webkit-optimize-contrast;
        transition: transform 7s ease-out;
    }

    .swiper-slide-active .meca-banner-slide-bg { transform: none !important; }

    .contact-hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(9, 11, 20, 0.4) 0%, rgba(9, 11, 20, 0.88) 100%);
        z-index: 1;
        pointer-events: none;
    }

    .contact-hero-content {
        position: relative;
        z-index: 2;
        padding: 30px;
        pointer-events: none;
    }

    .contact-hero-title {
        font-family: 'Playfair Display', 'Outfit', serif;
        font-size: 3.6rem;
        font-weight: 700;
        color: #FFFFFF;
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
        letter-spacing: 1px;
        margin-bottom: 12px;
    }

    /* Menu Location Breadcrumb matching Reference */
    .meca-breadcrumb-location {
        letter-spacing: 2px;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        font-family: 'Outfit', sans-serif;
        pointer-events: auto;
    }

    .meca-breadcrumb-location a {
        color: #FFFFFF;
        text-decoration: none;
        transition: color 0.25s ease;
    }

    .meca-breadcrumb-location a:hover {
        color: #E2B048;
    }

    .meca-breadcrumb-location .breadcrumb-active {
        color: #E2B048;
    }

    .meca-breadcrumb-separator {
        color: rgba(255, 255, 255, 0.45) !important;
        font-weight: 400;
    }

    /* Contact Card Container */
    .meca-contact-card {
        background: rgba(18, 18, 24, 0.85);
        border: 1px solid var(--accent-color-3, #1F1F1F);
        border-radius: 28px;
        padding: 50px 45px;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    }

    .contact-main-heading {
        font-family: 'Playfair Display', 'Outfit', serif;
        font-weight: 700;
        font-size: 2.3rem;
        color: #FFFFFF;
        margin-bottom: 35px;
        text-align: left;
    }

    /* Strict Side-by-Side Grid Layout */
    .meca-contact-grid {
        display: grid;
        grid-template-columns: 1.5fr 1fr;
        gap: 50px;
        align-items: start;
    }

    @media (max-width: 991px) {
        .meca-contact-grid {
            grid-template-columns: 1fr;
            gap: 40px;
        }
    }

    /* Form Fields & Labels */
    .meca-field-label {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: 600;
    }

    .meca-field-label i {
        color: #C89B3C;
        font-size: 14px;
    }

    .meca-contact-input {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 4px;
        color: #FFFFFF;
        padding: 12px 16px;
        font-size: 14.5px;
        width: 100%;
        outline: none;
        transition: all 0.25s ease;
    }

    .meca-contact-input::placeholder {
        font-style: italic;
        color: #8E9AAB;
        font-size: 14px;
    }

    .meca-contact-input:focus {
        border-color: #C89B3C;
        background: rgba(255, 255, 255, 0.08);
        box-shadow: 0 0 15px rgba(200, 155, 60, 0.25);
    }

    /* Submit Button matching Reference */
    .meca-btn-contact-gold {
        background: #C89B3C;
        color: #FFFFFF;
        font-family: 'Outfit', sans-serif;
        font-weight: 700;
        font-size: 14px;
        letter-spacing: 1px;
        text-transform: uppercase;
        border: none;
        border-radius: 4px;
        padding: 13px 32px;
        cursor: pointer;
        transition: all 0.25s ease;
        box-shadow: 0 4px 15px rgba(200, 155, 60, 0.35);
    }

    .meca-btn-contact-gold:hover {
        background: #B88B2C;
        color: #FFFFFF;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(200, 155, 60, 0.5);
    }

    /* Info Sidebar on Right */
    .meca-info-item {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        text-align: left;
    }

    .meca-info-icon {
        color: #C89B3C;
        font-size: 22px;
        margin-top: 3px;
        flex-shrink: 0;
    }

    .meca-info-title {
        font-family: 'Playfair Display', 'Outfit', serif;
        font-weight: 700;
        font-size: 1.2rem;
        color: #FFFFFF;
        margin-bottom: 6px;
    }

    .meca-info-text {
        color: rgba(255, 255, 255, 0.75);
        font-size: 14.5px;
        line-height: 1.7;
        margin: 0;
    }

    .meca-contact-link {
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .meca-contact-link:hover {
        color: #C89B3C;
        text-decoration: underline;
    }

    .meca-contact-divider {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin: 28px 0;
    }

    /* ========================================================
       LIGHT MODE HIGH CONTRAST OVERRIDES
       ======================================================== */
    body.lightmode .contact-hero-banner {
        border-color: rgba(0, 0, 0, 0.08);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
    }

    /* Keep Dark Black Shade Overlay on Hero Slider Across All Themes (Matching SS2) */
    body.lightmode .contact-hero-overlay {
        background: linear-gradient(180deg, rgba(9, 11, 20, 0.4) 0%, rgba(9, 11, 20, 0.88) 100%) !important;
    }

    body.lightmode .contact-hero-title {
        color: #FFFFFF !important;
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    }

    body.lightmode .meca-breadcrumb-location a {
        color: rgba(255, 255, 255, 0.85) !important;
    }

    body.lightmode .meca-breadcrumb-location .breadcrumb-active {
        color: #E2B048 !important;
    }

    body.lightmode .meca-breadcrumb-separator {
        color: rgba(255, 255, 255, 0.45) !important;
    }

    body.lightmode .meca-contact-card {
        background: #FFFFFF !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 15px 45px rgba(0, 0, 0, 0.06) !important;
    }

    body.lightmode .contact-main-heading {
        color: #0F172A !important;
    }

    body.lightmode .meca-contact-input {
        background: #FFFFFF !important;
        border: 1px solid #CBD5E1 !important;
        color: #0F172A !important;
    }

    body.lightmode .meca-contact-input::placeholder {
        color: #94A3B8 !important;
    }

    body.lightmode .meca-contact-input:focus {
        border-color: #C89B3C !important;
        background: #FFFFFF !important;
    }

    body.lightmode .meca-info-title {
        color: #0F172A !important;
    }

    body.lightmode .meca-info-text {
        color: #475569 !important;
    }

    body.lightmode .meca-contact-link {
        color: #1E293B !important;
    }

    body.lightmode .meca-contact-link:hover {
        color: #92400E !important;
    }

    body.lightmode .meca-contact-divider {
        border-top-color: rgba(0, 0, 0, 0.08) !important;
    }


/* ====================================================================
   SECTION: 10. Mission & Vision
   ==================================================================== */
/* ========================================================
       MECA Mission & Vision Modern Dual-Theme Design System
       ======================================================== */
    .mission-hero-banner {
        position: relative;
        width: 100%;
        height: 75vh;
        min-height: 560px;
        max-height: 720px;
        border-radius: var(--global-border-radius, 35px);
        overflow: hidden;
        border: 1px solid var(--accent-color-3, #1F1F1F);
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
        background-color: #090B14;
        display: flex;
        align-items: flex-end;
    }

    .meca-hero-bg-cover {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center center;
        image-rendering: -webkit-optimize-contrast;
        opacity: 0.45;
        filter: brightness(0.7);
        transform: scale(1.03);
        transition: transform 8s ease;
    }

    .mission-hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(9, 11, 20, 0.35) 0%, rgba(9, 11, 20, 0.88) 100%);
        z-index: 1;
        pointer-events: none;
    }

    .mission-hero-content {
        position: relative;
        z-index: 2;
        padding: 45px 40px;
        width: 100%;
    }

    .meca-breadcrumb-location {
        letter-spacing: 1.5px;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        font-family: 'Outfit', sans-serif;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .meca-breadcrumb-location a {
        color: #FFFFFF;
        text-decoration: none;
        transition: color 0.25s ease;
    }

    .meca-breadcrumb-location a:hover {
        color: var(--accent-color, #C82AEF);
    }

    .meca-breadcrumb-location .breadcrumb-active {
        color: #E2B048;
    }

    .meca-breadcrumb-separator {
        color: rgba(255, 255, 255, 0.4) !important;
    }

    /* Primary Glass Cards */
    .meca-card-story {
        background: rgba(18, 18, 24, 0.85);
        border: 1px solid var(--accent-color-3, #1F1F1F);
        border-radius: 28px;
        padding: 40px;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    .meca-card-story:hover {
        border-color: rgba(200, 42, 239, 0.3);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    }

    /* ========================================================
       REDESIGNED MECA CREED CARD (Dual-Theme Heroic Creed)
       ======================================================== */
    .meca-creed-card {
        background: rgba(18, 18, 24, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 28px;
        padding: 38px 36px;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
        position: relative;
        overflow: hidden;
    }

    .meca-creed-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 140px;
        height: 3px;
        background: linear-gradient(90deg, transparent 0%, #FFD700 50%, transparent 100%);
    }

    .meca-creed-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(226, 176, 72, 0.12);
        color: #E2B048;
        border: 1px solid rgba(226, 176, 72, 0.3);
        border-radius: 20px;
        padding: 4px 14px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
    }

    .meca-creed-title {
        font-family: 'Playfair Display', Georgia, serif;
        font-size: 2.5rem;
        font-weight: 700;
        color: #FFD700;
        background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        letter-spacing: 0.5px;
    }

    .meca-creed-narrative {
        max-width: 820px;
        font-size: 14px;
        line-height: 1.75;
        color: rgba(255, 255, 255, 0.85);
    }

    .meca-creed-stats {
        max-width: 860px;
    }

    .meca-stat-pill-box {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 18px;
        padding: 14px 18px;
        display: flex;
        align-items: center;
        gap: 14px;
        text-align: left;
        transition: transform 0.25s ease, border-color 0.25s ease;
    }

    .meca-stat-pill-box:hover {
        transform: translateY(-2px);
        border-color: rgba(200, 42, 239, 0.3);
    }

    .meca-stat-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        flex-shrink: 0;
    }

    .meca-stat-icon.gold {
        background: rgba(255, 215, 0, 0.12);
        color: #FFD700;
        border: 1px solid rgba(255, 215, 0, 0.3);
    }

    .meca-stat-icon.indigo {
        background: rgba(99, 102, 241, 0.12);
        color: #818CF8;
        border: 1px solid rgba(99, 102, 241, 0.3);
    }

    .meca-stat-icon.purple {
        background: rgba(200, 42, 239, 0.12);
        color: var(--accent-color, #C82AEF);
        border: 1px solid rgba(200, 42, 239, 0.3);
    }

    .meca-stat-val {
        font-family: 'Outfit', sans-serif;
        font-weight: 700;
        font-size: 1.05rem;
        color: #FFFFFF;
        line-height: 1.2;
    }

    .meca-stat-lbl {
        font-size: 11.5px;
        color: rgba(255, 255, 255, 0.6);
        margin-top: 2px;
    }

    /* Creed Light Mode Overrides */
    body.lightmode .meca-creed-card {
        background: #FFFFFF !important;
        border-color: #E2E8F0 !important;
        box-shadow: 0 15px 45px rgba(15, 23, 42, 0.08) !important;
    }

    body.lightmode .meca-creed-pill {
        background: rgba(217, 119, 6, 0.1) !important;
        color: #B45309 !important;
        border-color: rgba(217, 119, 6, 0.25) !important;
    }

    body.lightmode .meca-creed-title {
        color: #B45309 !important;
        background: linear-gradient(135deg, #B45309 0%, #D97706 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }

    body.lightmode .meca-creed-narrative {
        color: #334155 !important;
    }

    body.lightmode .meca-stat-pill-box {
        background: #F8FAFC !important;
        border-color: #E2E8F0 !important;
    }

    body.lightmode .meca-stat-pill-box:hover {
        background: #FFFFFF !important;
        border-color: var(--accent-color, #C82AEF) !important;
        box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06) !important;
    }

    body.lightmode .meca-stat-val {
        color: #0F172A !important;
    }

    body.lightmode .meca-stat-lbl {
        color: #64748B !important;
    }

    /* ========================================================
       NEW COMPACT CHARTER SYSTEM (Vision, Mission & Core Values)
       ======================================================== */
    .meca-compact-charter-card {
        background: rgba(18, 18, 24, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 28px;
        padding: 30px 32px;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
        position: relative;
        overflow: hidden;
    }

    .meca-compact-panel {
        background: rgba(255, 255, 255, 0.025);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 20px;
        padding: 22px 24px;
        transition: transform 0.25s ease, border-color 0.25s ease;
    }

    .meca-compact-panel:hover {
        border-color: rgba(200, 42, 239, 0.3);
        transform: translateY(-2px);
    }

    .meca-compact-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        flex-shrink: 0;
    }

    .meca-compact-icon.indigo {
        background: rgba(99, 102, 241, 0.15);
        border: 1px solid rgba(99, 102, 241, 0.35);
        color: #818CF8;
    }

    .meca-compact-icon.purple {
        background: rgba(200, 42, 239, 0.15);
        border: 1px solid rgba(200, 42, 239, 0.35);
        color: var(--accent-color, #C82AEF);
    }

    .meca-compact-tag {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        display: block;
        line-height: 1.2;
    }

    .meca-compact-tag.text-indigo { color: #818CF8; }
    .meca-compact-tag.text-purple { color: var(--accent-color, #C82AEF); }

    .meca-compact-title {
        font-family: 'Outfit', sans-serif;
        font-weight: 700;
        font-size: 1.35rem;
        color: #FFFFFF;
    }

    .meca-compact-desc {
        color: rgba(255, 255, 255, 0.82);
        font-size: 13.5px;
        line-height: 1.6;
    }

    .meca-compact-pills {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .meca-pill-point {
        display: flex;
        align-items: center;
        gap: 10px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 10px;
        padding: 7px 12px;
        font-size: 12.5px;
        color: rgba(255, 255, 255, 0.88);
        font-weight: 500;
    }

    .meca-pill-point i {
        font-size: 13px;
        flex-shrink: 0;
    }

    .text-indigo { color: #818CF8 !important; }
    .text-purple { color: var(--accent-color, #C82AEF) !important; }
    .text-gold { color: #E2B048 !important; }

    .meca-compact-divider {
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
    }

    .meca-compact-subheading {
        color: #FFFFFF;
        font-family: 'Outfit', sans-serif;
        font-size: 1.15rem;
    }

    .meca-value-compact-card {
        background: rgba(255, 255, 255, 0.025);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 16px;
        padding: 14px 16px;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        height: 100%;
        transition: all 0.25s ease;
    }

    .meca-value-compact-card:hover {
        background: rgba(255, 255, 255, 0.05);
        border-color: var(--accent-color, #C82AEF);
        transform: translateY(-2px);
    }

    .meca-val-icon-sm {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .meca-val-icon-sm.gold {
        background: rgba(255, 215, 0, 0.12);
        color: #FFD700;
        border: 1px solid rgba(255, 215, 0, 0.3);
    }

    .meca-val-icon-sm.blue {
        background: rgba(99, 102, 241, 0.12);
        color: #818CF8;
        border: 1px solid rgba(99, 102, 241, 0.3);
    }

    .meca-val-icon-sm.amber {
        background: rgba(245, 158, 11, 0.12);
        color: #F59E0B;
        border: 1px solid rgba(245, 158, 11, 0.3);
    }

    .meca-val-icon-sm.green {
        background: rgba(16, 185, 129, 0.12);
        color: #10B981;
        border: 1px solid rgba(16, 185, 129, 0.3);
    }

    .meca-val-content h6 {
        color: #FFFFFF;
        font-size: 13.5px;
    }

    .meca-val-content p {
        line-height: 1.4;
        font-size: 11.5px;
    }

    /* Light Mode Overrides */
    body.lightmode .meca-compact-charter-card {
        background: #FFFFFF !important;
        border-color: #E2E8F0 !important;
        box-shadow: 0 15px 45px rgba(15, 23, 42, 0.08) !important;
    }

    body.lightmode .meca-compact-panel {
        background: #F8FAFC !important;
        border-color: #E2E8F0 !important;
    }

    body.lightmode .meca-compact-title {
        color: #0F172A !important;
    }

    body.lightmode .meca-compact-desc {
        color: #334155 !important;
    }

    body.lightmode .meca-pill-point {
        background: #FFFFFF !important;
        border-color: #E2E8F0 !important;
        color: #1E293B !important;
    }

    body.lightmode .meca-compact-divider {
        background: linear-gradient(90deg, transparent 0%, #E2E8F0 50%, transparent 100%) !important;
    }

    body.lightmode .meca-compact-subheading {
        color: #0F172A !important;
    }

    body.lightmode .meca-value-compact-card {
        background: #F8FAFC !important;
        border-color: #E2E8F0 !important;
    }

    body.lightmode .meca-value-compact-card:hover {
        background: #FFFFFF !important;
        border-color: var(--accent-color, #C82AEF) !important;
        box-shadow: 0 8px 25px rgba(15, 23, 42, 0.06) !important;
    }

    body.lightmode .meca-val-content h6 {
        color: #0F172A !important;
    }

    body.lightmode .meca-val-content p {
        color: #64748B !important;
    }

    @media (max-width: 991.98px) {
        .meca-compact-charter-card {
            padding: 22px 18px;
            border-radius: 22px;
        }
        .meca-compact-panel {
            padding: 18px 16px;
        }
    }


/* ====================================================================
   SECTION: 11. Welfare Activities
   ==================================================================== */
/* ========================================================
       Welfare Activities Modern Styling & Dynamic Hero Banner Slider
       ======================================================== */
    .welfare-hero-banner {
        position: relative;
        width: 100%;
        height: 75vh;
        min-height: 560px;
        max-height: 720px;
        border-radius: var(--global-border-radius, 35px);
        overflow: hidden;
        border: 1px solid var(--accent-color-3, #1F1F1F);
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
        background-color: #090B14;
        display: flex;
        align-items: flex-end;
    }

    .meca-welfare-hero-swiper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .meca-banner-slide-bg {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center center;
        image-rendering: -webkit-optimize-contrast;
        transition: transform 7s ease-out;
    }

    .swiper-slide-active .meca-banner-slide-bg { transform: none !important; }

    .welfare-hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(9, 11, 20, 0.35) 0%, rgba(9, 11, 20, 0.88) 100%);
        z-index: 1;
        pointer-events: none;
    }

    .welfare-hero-content {
        position: relative;
        z-index: 2;
        padding: 40px;
        width: 100%;
        pointer-events: none;
    }

    .welfare-hero-content .meca-hero-title,
    body.lightmode .welfare-hero-content .meca-hero-title {
        color: #FFFFFF !important;
    }

    .welfare-hero-content .meca-hero-desc,
    body.lightmode .welfare-hero-content .meca-hero-desc {
        color: rgba(255, 255, 255, 0.85) !important;
    }

    /* Menu Location Breadcrumb matching Reference */
    .meca-breadcrumb-location {
        letter-spacing: 2px;
        font-size: 15px;
        font-weight: 700;
        text-transform: uppercase;
        font-family: 'Outfit', sans-serif;
    }

    .meca-breadcrumb-location a {
        color: #FFFFFF;
        text-decoration: none;
        transition: color 0.25s ease;
    }

    .meca-breadcrumb-location a:hover {
        color: var(--accent-color, #C82AEF);
    }

    .meca-breadcrumb-location .breadcrumb-active {
        color: #E2B048; /* Gold Accent from reference */
    }

    .meca-breadcrumb-separator {
        color: rgba(255, 255, 255, 0.45) !important;
        font-weight: 400;
    }

    /* Quote Banner Under Breadcrumb (Picture 1) */
    .meca-quote-banner {
        background: linear-gradient(135deg, #BD8C48 0%, #A87332 50%, #915E22 100%);
        border: 1px solid rgba(255, 215, 0, 0.35);
        border-radius: 20px;
        padding: 32px 24px;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
        position: relative;
        overflow: hidden;
    }

    .meca-quote-banner::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at center, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
        pointer-events: none;
    }

    .meca-quote-title {
        color: #FFFFFF !important;
        font-family: 'Playfair Display', Georgia, 'Outfit', serif;
        font-size: 32px;
        font-weight: 700;
        letter-spacing: 0.5px;
        line-height: 1.3;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    }

    .meca-quote-subtitle {
        color: rgba(255, 255, 255, 0.95) !important;
        font-size: 17px;
        font-weight: 400;
        letter-spacing: 0.3px;
        line-height: 1.6;
    }

    /* Modern Story & Content Cards */
    .meca-card-story {
        background: rgba(18, 18, 24, 0.85);
        border: 1px solid var(--accent-color-3, #1F1F1F);
        border-radius: 28px;
        padding: 40px;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
        transition: all 0.3s ease;
    }

    .meca-card-story:hover {
        border-color: rgba(200, 42, 239, 0.35);
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 25px rgba(200, 42, 239, 0.1);
    }

    .meca-section-divider {
        height: 1px;
        background: rgba(255, 255, 255, 0.15);
        width: 100%;
        margin-bottom: 25px;
    }

    .meca-welfare-drive-title {
        color: #E2B048;
        font-family: 'Playfair Display', Georgia, 'Outfit', serif;
        font-size: 36px;
        font-weight: 700;
        letter-spacing: 0.5px;
        margin-bottom: 16px;
    }

    .meca-welfare-drive-text {
        color: rgba(255, 255, 255, 0.85);
        font-size: 16.5px;
        line-height: 1.85;
        text-align: justify;
    }

    .meca-story-img-container {
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid var(--accent-color-3, #1F1F1F);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
        position: relative;
    }

    .meca-story-img-container img {
        width: 100%;
        height: auto;
        object-fit: contain;
        display: block;
        transition: transform 0.5s ease;
    }

    .meca-story-img-container:hover img {
        transform: scale(1.04);
    }

    .meca-badge-sub {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--accent-color, #C82AEF);
        text-transform: uppercase;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 1.5px;
        margin-bottom: 10px;
    }

    .meca-section-heading {
        color: #FFFFFF;
        font-family: 'Outfit', sans-serif;
    }

    .meca-section-desc {
        color: rgba(255, 255, 255, 0.6);
    }

    /* 4 Pillars Grid Cards */
    .meca-pillar-card {
        background: rgba(18, 18, 24, 0.75);
        border: 1px solid var(--accent-color-3, #1F1F1F);
        border-radius: 24px;
        padding: 32px 26px;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
        transition: all 0.35s ease;
        position: relative;
        overflow: hidden;
    }

    .meca-pillar-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: transparent;
        transition: background 0.3s ease;
    }

    .meca-pillar-card:hover {
        transform: translateY(-6px);
        border-color: rgba(200, 42, 239, 0.4);
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), 0 0 20px rgba(200, 42, 239, 0.15);
    }

    .meca-pillar-card:hover::before {
        background: var(--accent-color, #C82AEF);
    }

    .meca-pillar-icon-box {
        width: 64px;
        height: 64px;
        border-radius: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        font-size: 26px;
        transition: transform 0.3s ease;
    }

    .meca-pillar-card:hover .meca-pillar-icon-box {
        transform: scale(1.1);
    }

    .meca-pillar-title {
        color: #FFFFFF;
        font-weight: 700;
        margin-bottom: 8px;
        font-size: 1.25rem;
    }

    .meca-pillar-desc {
        color: rgba(255, 255, 255, 0.65);
        font-size: 0.875rem;
        line-height: 1.6;
        margin-bottom: 0;
    }

    /* Impact Stats Counter Box */
    .meca-stat-box {
        background: rgba(25, 25, 34, 0.6);
        border: 1px solid var(--accent-color-3, #1F1F1F);
        border-radius: 20px;
        padding: 24px 20px;
        text-align: center;
        transition: all 0.3s ease;
    }

    .meca-stat-box:hover {
        border-color: rgba(200, 42, 239, 0.3);
        background: rgba(30, 30, 42, 0.8);
    }

    .meca-stat-number {
        font-family: 'Outfit', sans-serif;
        font-size: 36px;
        font-weight: 800;
        color: #E2B048;
        line-height: 1.1;
        margin-bottom: 6px;
    }

    .meca-stat-label {
        font-size: 13.5px;
        color: rgba(255, 255, 255, 0.7);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.8px;
    }

    /* Feature Initiative Showcase Card */
    .meca-initiative-card {
        background: rgba(18, 18, 24, 0.75);
        border: 1px solid var(--accent-color-3, #1F1F1F);
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
        transition: all 0.35s ease;
    }

    .meca-initiative-card:hover {
        transform: translateY(-5px);
        border-color: rgba(200, 42, 239, 0.35);
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), 0 0 20px rgba(200, 42, 239, 0.12);
    }

    .meca-initiative-img {
        height: 220px;
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    .meca-initiative-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .meca-initiative-card:hover .meca-initiative-img img {
        transform: scale(1.06);
    }

    .meca-initiative-body {
        padding: 24px;
    }

    .meca-initiative-title {
        color: #FFFFFF;
        font-weight: 700;
        margin-bottom: 8px;
        font-size: 1.25rem;
    }

    .meca-initiative-desc {
        color: rgba(255, 255, 255, 0.65);
        font-size: 0.875rem;
        line-height: 1.6;
        margin-bottom: 0;
    }

    .meca-initiative-meta {
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.875rem;
    }

    .meca-payment-pill {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 18px;
        padding: 20px 22px;
        transition: all 0.3s ease;
    }

    .meca-payment-pill:hover {
        background: rgba(255, 255, 255, 0.07);
        border-color: rgba(200, 42, 239, 0.4);
    }

    .meca-payment-pill strong {
        color: #FFFFFF;
    }

    .meca-payment-pill .small,
    .meca-payment-pill span {
        color: rgba(255, 255, 255, 0.75);
    }

    .meca-btn-contact {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #FFFFFF;
        transition: all 0.3s ease;
    }

    .meca-btn-contact:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #FFFFFF;
        border-color: rgba(255, 255, 255, 0.4);
    }

    /* ========================================================
       Dual-Theme Light Mode Overrides (Strict Contrast Standard)
       ======================================================== */
    body.lightmode .meca-quote-banner {
        background: linear-gradient(135deg, #C58F48 0%, #AF7733 50%, #9B6323 100%) !important;
        border-color: rgba(180, 115, 20, 0.4) !important;
        box-shadow: 0 12px 35px rgba(180, 115, 20, 0.22) !important;
    }

    body.lightmode .meca-quote-title {
        color: #FFFFFF !important;
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    }

    body.lightmode .meca-quote-subtitle {
        color: rgba(255, 255, 255, 0.98) !important;
    }

    body.lightmode .meca-section-divider {
        background: #E2E8F0 !important;
    }

    body.lightmode .meca-welfare-drive-title {
        color: #6B1D2F !important; /* Deep maroon/burgundy from Picture 2 */
    }

    body.lightmode .meca-welfare-drive-text {
        color: #334155 !important;
    }

    body.lightmode .meca-breadcrumb-location a {
        color: #0F172A !important;
    }

    body.lightmode .meca-breadcrumb-location .breadcrumb-active {
        color: #B45309 !important; /* Rich amber gold in light mode */
    }

    body.lightmode .meca-breadcrumb-separator {
        color: #64748B !important;
        font-weight: 600;
    }

    body.lightmode .meca-card-story {
        background: #FFFFFF !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06) !important;
    }

    body.lightmode .meca-card-story:hover {
        border-color: rgba(200, 42, 239, 0.4) !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1) !important;
    }

    body.lightmode .meca-section-heading {
        color: #0F172A !important;
    }

    body.lightmode .meca-section-desc {
        color: #475569 !important;
    }

    body.lightmode .meca-story-img-container {
        border-color: rgba(0, 0, 0, 0.1) !important;
    }

    body.lightmode .meca-pillar-card {
        background: #FFFFFF !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.05) !important;
    }

    body.lightmode .meca-pillar-card:hover {
        border-color: rgba(200, 42, 239, 0.4) !important;
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1) !important;
    }

    body.lightmode .meca-pillar-title {
        color: #0F172A !important;
    }

    body.lightmode .meca-pillar-desc {
        color: #475569 !important;
    }

    body.lightmode .meca-pillar-card .text-warning {
        color: #B45309 !important;
    }

    body.lightmode .meca-pillar-card .text-info {
        color: #0284C7 !important;
    }

    body.lightmode .meca-stat-box {
        background: #FFFFFF !important;
        border-color: rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04) !important;
    }

    body.lightmode .meca-stat-number {
        color: #B45309 !important;
    }

    body.lightmode .meca-stat-label {
        color: #64748B !important;
    }

    body.lightmode .meca-initiative-card {
        background: #FFFFFF !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.05) !important;
    }

    body.lightmode .meca-initiative-card:hover {
        border-color: rgba(200, 42, 239, 0.4) !important;
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1) !important;
    }

    body.lightmode .meca-initiative-title {
        color: #0F172A !important;
    }

    body.lightmode .meca-initiative-desc {
        color: #475569 !important;
    }

    body.lightmode .meca-initiative-meta {
        color: #64748B !important;
    }

    body.lightmode .meca-payment-pill {
        background: #F8FAFC !important;
        border: 1px solid #E2E8F0 !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
    }

    body.lightmode .meca-payment-pill:hover {
        border-color: rgba(200, 42, 239, 0.4) !important;
        background: #FFFFFF !important;
    }

    body.lightmode .meca-payment-pill strong {
        color: #0F172A !important;
    }

    body.lightmode .meca-payment-pill .small,
    body.lightmode .meca-payment-pill span {
        color: #475569 !important;
    }

    body.lightmode .meca-btn-contact {
        background: #FFFFFF !important;
        border: 1px solid #CBD5E1 !important;
        color: #0F172A !important;
    }

    body.lightmode .meca-btn-contact:hover {
        background: #0F172A !important;
        color: #FFFFFF !important;
        border-color: #0F172A !important;
    }


/* ====================================================================
   SECTION: 12. Events & Reunions
   ==================================================================== */
/* ========================================================
       MECA Events Modern Dual-Theme Design System
       ======================================================== */
    
    /* 1. Hero Banner Slider & Breadcrumbs */
    .events-hero-banner {
        position: relative;
        width: 100%;
        height: 75vh;
        min-height: 560px;
        max-height: 720px;
        border-radius: var(--global-border-radius, 35px);
        overflow: hidden;
        border: 1px solid var(--accent-color-3, #1F1F1F);
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
        background-color: #090B14;
        display: flex;
        align-items: flex-end;
    }

    .meca-events-hero-swiper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .meca-banner-slide-bg {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center center;
        image-rendering: -webkit-optimize-contrast;
        transition: transform 7s ease-out;
    }

    .swiper-slide-active .meca-banner-slide-bg { transform: none !important; }

    .events-hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(9, 11, 20, 0.35) 0%, rgba(9, 11, 20, 0.88) 100%);
        z-index: 1;
        pointer-events: none;
    }

    .events-hero-content {
        position: relative;
        z-index: 2;
        padding: 45px 40px;
        width: 100%;
    }

    .events-hero-content h1,
    body.lightmode .events-hero-content h1 {
        color: #FFFFFF !important;
        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9) !important;
    }

    .events-hero-content p,
    body.lightmode .events-hero-content p {
        color: rgba(255, 255, 255, 0.92) !important;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85) !important;
    }

    /* Sub-badge */
    .meca-badge-sub {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--accent-color, #C82AEF);
        text-transform: uppercase;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 1.5px;
        margin-bottom: 12px;
    }

    /* Breadcrumbs */
    .meca-breadcrumb-location {
        letter-spacing: 1.5px;
        font-size: 13.5px;
        font-weight: 700;
        text-transform: uppercase;
        font-family: 'Outfit', sans-serif;
    }

    .meca-breadcrumb-location a {
        color: #FFFFFF;
        text-decoration: none;
        transition: color 0.25s ease;
    }

    .meca-breadcrumb-location a:hover {
        color: var(--accent-color, #C82AEF);
    }

    .meca-breadcrumb-location .breadcrumb-active {
        color: #E2B048;
    }

    .meca-breadcrumb-separator {
        color: rgba(255, 255, 255, 0.4) !important;
    }

    body.lightmode .meca-breadcrumb-location a {
        color: #0F172A !important;
    }

    body.lightmode .meca-breadcrumb-location a:hover {
        color: var(--accent-color, #C82AEF) !important;
    }

    body.lightmode .meca-breadcrumb-separator {
        color: #94A3B8 !important;
    }

    /* 2. Events Toolbar (Search & Filter) */
    .meca-events-toolbar {
        background: rgba(18, 18, 24, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 24px;
        padding: 18px 24px;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }

    .meca-search-box {
        position: relative;
        flex: 1;
        max-width: 420px;
    }

    .meca-search-icon {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: rgba(255, 255, 255, 0.45);
        font-size: 14px;
        pointer-events: none;
    }

    .meca-search-input {
        width: 100%;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 14px;
        padding: 10px 38px 10px 42px;
        color: #FFFFFF;
        font-size: 14px;
        transition: all 0.25s ease;
    }

    .meca-search-input:focus {
        outline: none;
        background: rgba(255, 255, 255, 0.08);
        border-color: var(--accent-color, #C82AEF);
        box-shadow: 0 0 15px rgba(200, 42, 239, 0.25);
    }

    .meca-search-clear {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: rgba(255, 255, 255, 0.4);
        cursor: pointer;
        display: none;
    }

    /* 3. Event Cards Grid */
    .meca-event-card {
        background: rgba(18, 18, 24, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 26px;
        overflow: hidden;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
        display: flex;
        flex-direction: column;
        height: 100%;
        transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .meca-event-card:hover {
        transform: translateY(-6px);
        border-color: rgba(200, 42, 239, 0.4);
        box-shadow: 0 20px 50px rgba(200, 42, 239, 0.15);
    }

    .meca-event-img-frame {
        position: relative;
        width: 100%;
        height: 220px;
        overflow: hidden;
        background-color: #0A0C14;
    }

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

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

    .meca-event-img-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, transparent 40%, rgba(9, 11, 20, 0.75) 100%);
    }

    .meca-event-date-badge {
        position: absolute;
        top: 14px;
        left: 14px;
        background: rgba(14, 16, 24, 0.88);
        border: 1px solid rgba(226, 176, 72, 0.4);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-radius: 12px;
        padding: 6px 14px;
        color: #FFD700;
        font-weight: 700;
        font-size: 12px;
        letter-spacing: 0.5px;
        display: flex;
        align-items: center;
        gap: 6px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    }

    .meca-event-body {
        padding: 24px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    .meca-event-venue {
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--accent-color, #C82AEF);
        font-size: 12.5px;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .meca-event-title {
        font-family: 'Outfit', sans-serif;
        font-weight: 700;
        font-size: 1.25rem;
        color: #FFFFFF;
        line-height: 1.35;
        margin-bottom: 12px;
    }

    .meca-event-excerpt {
        color: rgba(255, 255, 255, 0.75);
        font-size: 13.5px;
        line-height: 1.6;
        margin-bottom: 20px;
        flex-grow: 1;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .meca-event-footer {
        margin-top: auto;
        padding-top: 16px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .meca-btn-event-view {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 20px;
        border-radius: 12px;
        background: linear-gradient(135deg, var(--accent-color, #C82AEF) 0%, #7C3AED 100%);
        color: #FFFFFF !important;
        font-weight: 700;
        font-size: 13px;
        text-decoration: none;
        transition: all 0.25s ease;
        box-shadow: 0 4px 15px rgba(200, 42, 239, 0.3);
    }

    .meca-btn-event-view:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(200, 42, 239, 0.5);
        color: #FFFFFF !important;
    }

    .meca-event-empty-card {
        background: rgba(18, 18, 24, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 28px;
        padding: 50px 30px;
        text-align: center;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    /* ========================================================
       LIGHT MODE HIGH-CONTRAST EYE-SMOOTHING OVERRIDES
       ======================================================== */
    body.lightmode .events-hero-banner {
        background-color: #090B14 !important;
    }

    body.lightmode .meca-events-toolbar {
        background: #FFFFFF !important;
        border-color: #E2E8F0 !important;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05) !important;
    }

    body.lightmode .meca-search-input {
        background: #F8FAFC !important;
        border-color: #CBD5E1 !important;
        color: #0F172A !important;
    }

    body.lightmode .meca-search-input:focus {
        background: #FFFFFF !important;
        border-color: var(--accent-color, #C82AEF) !important;
        box-shadow: 0 0 15px rgba(200, 42, 239, 0.15) !important;
    }

    body.lightmode .meca-search-clear {
        color: #64748B !important;
    }

    body.lightmode .meca-event-card {
        background: #FFFFFF !important;
        border-color: #E2E8F0 !important;
        box-shadow: 0 15px 45px rgba(15, 23, 42, 0.08) !important;
    }

    body.lightmode .meca-event-card:hover {
        border-color: var(--accent-color, #C82AEF) !important;
        box-shadow: 0 20px 50px rgba(200, 42, 239, 0.12) !important;
    }

    body.lightmode .meca-event-date-badge {
        background: rgba(255, 255, 255, 0.95) !important;
        border-color: rgba(180, 83, 9, 0.3) !important;
        color: #B45309 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    }

    body.lightmode .meca-event-venue {
        color: #7C3AED !important;
    }

    body.lightmode .meca-event-title {
        color: #0F172A !important;
    }

    body.lightmode .meca-event-excerpt {
        color: #475569 !important;
    }

    body.lightmode .meca-event-footer {
        border-top-color: #E2E8F0 !important;
    }

    body.lightmode .meca-btn-event-view {
        background: linear-gradient(135deg, #7C3AED 0%, #6366F1 100%) !important;
        box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3) !important;
    }

    body.lightmode .meca-btn-event-view:hover {
        box-shadow: 0 8px 25px rgba(124, 58, 237, 0.45) !important;
    }

    body.lightmode .meca-event-empty-card {
        background: #FFFFFF !important;
        border-color: #E2E8F0 !important;
        box-shadow: 0 15px 45px rgba(15, 23, 42, 0.08) !important;
    }

    @media (max-width: 991.98px) {
        .events-hero-banner {
            height: 42vh;
            min-height: 330px;
        }
        .events-hero-content {
            padding: 30px 20px;
        }
        .meca-event-img-frame {
            height: 200px;
        }
    }


/* ====================================================================
   SECTION: 13. Event Details
   ==================================================================== */
/* ========================================================
       MECA Event Details Modern Dual-Theme Design System
       ======================================================== */
    
    /* 1. Hero Banner Slider & Breadcrumbs */
    .event-details-hero-banner {
        position: relative;
        width: 100%;
        height: 75vh;
        min-height: 560px;
        max-height: 720px;
        border-radius: var(--global-border-radius, 35px);
        overflow: hidden;
        border: 1px solid var(--accent-color-3, #1F1F1F);
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
        background-color: #090B14;
        display: flex;
        align-items: flex-end;
    }

    .meca-event-details-swiper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .meca-banner-slide-bg {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center center;
        image-rendering: -webkit-optimize-contrast;
        transition: transform 7s ease-out;
    }

    .swiper-slide-active .meca-banner-slide-bg { transform: none !important; }

    .event-details-hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(9, 11, 20, 0.35) 0%, rgba(9, 11, 20, 0.9) 100%);
        z-index: 1;
        pointer-events: none;
    }

    .event-details-hero-content {
        position: relative;
        z-index: 2;
        padding: 40px;
        width: 100%;
    }

    .event-details-hero-content h1,
    body.lightmode .event-details-hero-content h1 {
        color: #FFFFFF !important;
        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9) !important;
    }

    .event-details-hero-content p,
    body.lightmode .event-details-hero-content p {
        color: rgba(255, 255, 255, 0.92) !important;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85) !important;
    }

    /* Sub-badge */
    .meca-badge-sub {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--accent-color, #C82AEF);
        text-transform: uppercase;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 1.5px;
        margin-bottom: 12px;
    }

    /* Breadcrumbs */
    .meca-breadcrumb-location {
        letter-spacing: 1.5px;
        font-size: 13.5px;
        font-weight: 700;
        text-transform: uppercase;
        font-family: 'Outfit', sans-serif;
    }

    .meca-breadcrumb-location a {
        color: #FFFFFF;
        text-decoration: none;
        transition: color 0.25s ease;
    }

    .meca-breadcrumb-location a:hover {
        color: var(--accent-color, #C82AEF);
    }

    .meca-breadcrumb-location .breadcrumb-active {
        color: #E2B048;
    }

    .meca-breadcrumb-separator {
        color: rgba(255, 255, 255, 0.4) !important;
    }

    body.lightmode .meca-breadcrumb-location a {
        color: #0F172A !important;
    }

    body.lightmode .meca-breadcrumb-location a:hover {
        color: var(--accent-color, #C82AEF) !important;
    }

    body.lightmode .meca-breadcrumb-separator {
        color: #94A3B8 !important;
    }

    /* 2. Main Event Details Card & Sidebar */
    .meca-event-main-card {
        background: rgba(18, 18, 24, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 28px;
        padding: 36px;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    }

    .meca-event-sidebar-card {
        background: rgba(18, 18, 24, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 28px;
        padding: 30px 26px;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    }

    .meca-event-cover-frame {
        width: 100%;
        max-height: 420px;
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
        margin-bottom: 28px;
        background-color: #0A0C14;
    }

    .meca-event-cover-frame img {
        width: 100%;
        height: 100%;
        max-height: 420px;
        object-fit: cover;
        display: block;
    }

    .meca-event-detail-title {
        font-family: 'Outfit', sans-serif;
        font-weight: 700;
        font-size: 1.85rem;
        color: #FFFFFF;
        line-height: 1.3;
        margin-bottom: 16px;
    }

    .meca-event-detail-desc {
        color: rgba(255, 255, 255, 0.88);
        font-size: 15px;
        line-height: 1.85;
    }

    .meca-event-detail-desc p {
        margin-bottom: 16px;
    }

    /* Sidebar info items */
    .meca-sidebar-info-row {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 14px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    .meca-sidebar-info-row:last-child {
        border-bottom: none;
    }

    .meca-sidebar-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.15rem;
        flex-shrink: 0;
    }

    .meca-sidebar-icon.gold {
        background: rgba(255, 215, 0, 0.12);
        color: #FFD700;
        border: 1px solid rgba(255, 215, 0, 0.3);
    }

    .meca-sidebar-icon.purple {
        background: rgba(200, 42, 239, 0.12);
        color: var(--accent-color, #C82AEF);
        border: 1px solid rgba(200, 42, 239, 0.3);
    }

    .meca-sidebar-icon.indigo {
        background: rgba(99, 102, 241, 0.12);
        color: #818CF8;
        border: 1px solid rgba(99, 102, 241, 0.3);
    }

    .meca-sidebar-lbl {
        font-size: 11.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: rgba(255, 255, 255, 0.55);
        margin-bottom: 2px;
    }

    .meca-sidebar-val {
        color: #FFFFFF;
        font-weight: 600;
        font-size: 14px;
        line-height: 1.4;
    }

    .meca-btn-ticket-action {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 14px 20px;
        border-radius: 16px;
        background: linear-gradient(135deg, var(--accent-color, #C82AEF) 0%, #7C3AED 100%);
        color: #FFFFFF !important;
        font-weight: 700;
        font-size: 15px;
        text-decoration: none;
        transition: all 0.25s ease;
        box-shadow: 0 6px 20px rgba(200, 42, 239, 0.4);
        border: none;
    }

    .meca-btn-ticket-action:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(200, 42, 239, 0.6);
        color: #FFFFFF !important;
    }

    .meca-btn-back {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 22px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #FFFFFF !important;
        font-weight: 600;
        font-size: 13.5px;
        text-decoration: none;
        transition: all 0.25s ease;
    }

    .meca-btn-back:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: var(--accent-color, #C82AEF);
        color: #FFFFFF !important;
    }

    /* ========================================================
       LIGHT MODE HIGH-CONTRAST EYE-SMOOTHING OVERRIDES
       ======================================================== */
    body.lightmode .event-details-hero-banner {
        background-color: #090B14 !important;
    }

    body.lightmode .meca-event-main-card,
    body.lightmode .meca-event-sidebar-card {
        background: #FFFFFF !important;
        border-color: #E2E8F0 !important;
        box-shadow: 0 15px 45px rgba(15, 23, 42, 0.08) !important;
    }

    body.lightmode .meca-event-cover-frame {
        border-color: #E2E8F0 !important;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
    }

    body.lightmode .meca-event-detail-title {
        color: #0F172A !important;
    }

    body.lightmode .meca-event-detail-desc,
    body.lightmode .meca-event-detail-desc p {
        color: #334155 !important;
    }

    body.lightmode .meca-sidebar-info-row {
        border-bottom-color: #E2E8F0 !important;
    }

    body.lightmode .meca-sidebar-lbl {
        color: #64748B !important;
    }

    body.lightmode .meca-sidebar-val {
        color: #0F172A !important;
    }

    body.lightmode .meca-btn-ticket-action {
        background: linear-gradient(135deg, #7C3AED 0%, #6366F1 100%) !important;
        box-shadow: 0 6px 20px rgba(124, 58, 237, 0.35) !important;
    }

    body.lightmode .meca-btn-back {
        background: #F8FAFC !important;
        border-color: #CBD5E1 !important;
        color: #0F172A !important;
    }

    body.lightmode .meca-btn-back:hover {
        background: #FFFFFF !important;
        border-color: var(--accent-color, #C82AEF) !important;
        color: var(--accent-color, #C82AEF) !important;
    }

    @media (max-width: 991.98px) {
        .event-details-hero-banner {
            height: 40vh;
            min-height: 320px;
        }
        .event-details-hero-content {
            padding: 30px 20px;
        }
        .meca-event-main-card,
        .meca-event-sidebar-card {
            padding: 24px 20px;
            border-radius: 22px;
        }
    }


/* ====================================================================
   SECTION: 14. Photo Gallery
   ==================================================================== */
/* ========================================================
       Gallery Modern Design System & Dynamic Hero Slider
       ======================================================== */
    .gallery-hero-banner {
        position: relative;
        width: 100%;
        height: 75vh;
        min-height: 560px;
        max-height: 720px;
        border-radius: var(--global-border-radius, 35px);
        overflow: hidden;
        border: 1px solid var(--accent-color-3, #1F1F1F);
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
        background-color: #090B14;
        display: flex;
        align-items: flex-end;
    }

    .meca-gallery-hero-swiper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .meca-banner-slide-bg {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center center;
        image-rendering: -webkit-optimize-contrast;
        transition: transform 7s ease-out;
    }

    .swiper-slide-active .meca-banner-slide-bg { transform: none !important; }

    .gallery-hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(9, 11, 20, 0.35) 0%, rgba(9, 11, 20, 0.88) 100%);
        z-index: 1;
        pointer-events: none;
    }

    .gallery-hero-content {
        position: relative;
        z-index: 2;
        padding: 40px;
        width: 100%;
        pointer-events: none;
    }

    .gallery-hero-content .meca-hero-title,
    body.lightmode .gallery-hero-content .meca-hero-title {
        color: #FFFFFF !important;
    }

    .gallery-hero-content .meca-hero-desc,
    body.lightmode .gallery-hero-content .meca-hero-desc {
        color: rgba(255, 255, 255, 0.85) !important;
    }

    /* Menu Location Breadcrumb */
    .meca-breadcrumb-location {
        letter-spacing: 2px;
        font-size: 15px;
        font-weight: 700;
        text-transform: uppercase;
        font-family: 'Outfit', sans-serif;
    }

    .meca-breadcrumb-location a {
        color: #FFFFFF;
        text-decoration: none;
        transition: color 0.25s ease;
    }

    .meca-breadcrumb-location a:hover {
        color: var(--accent-color, #C82AEF);
    }

    .meca-breadcrumb-location .breadcrumb-active {
        color: #E2B048; /* Gold Accent */
    }

    .meca-breadcrumb-separator {
        color: rgba(255, 255, 255, 0.45) !important;
        font-weight: 400;
    }

    .meca-badge-sub {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--accent-color, #C82AEF) !important;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 1.5px;
        margin-bottom: 10px;
    }

    .meca-section-heading {
        color: #FFFFFF !important;
        font-family: 'Outfit', sans-serif;
    }

    .meca-section-desc {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    /* Filter Buttons Bar */
    .meca-gallery-filters {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }

    .meca-filter-btn {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: rgba(255, 255, 255, 0.85);
        padding: 8px 20px;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 600;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .meca-filter-btn:hover,
    .meca-filter-btn.active {
        background: var(--accent-color, #C82AEF);
        border-color: var(--accent-color, #C82AEF);
        color: #FFFFFF;
        box-shadow: 0 4px 18px rgba(200, 42, 239, 0.45);
        transform: translateY(-2px);
    }

    /* Gallery Photo Cards */
    .meca-gallery-card {
        position: relative;
        border-radius: 22px;
        overflow: hidden;
        background: #12121A;
        border: 1px solid var(--accent-color-3, #1F1F1F);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
        cursor: pointer;
        transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
        height: 280px;
    }

    .meca-gallery-card:hover {
        transform: translateY(-6px) scale(1.02);
        border-color: rgba(200, 42, 239, 0.5);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6), 0 0 25px rgba(200, 42, 239, 0.2);
    }

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

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

    .meca-gallery-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(9, 11, 20, 0.1) 0%, rgba(9, 11, 20, 0.85) 100%);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 20px;
        opacity: 0.9;
        transition: opacity 0.3s ease;
    }

    .meca-gallery-card:hover .meca-gallery-overlay {
        opacity: 1;
        background: linear-gradient(180deg, rgba(9, 11, 20, 0.2) 0%, rgba(9, 11, 20, 0.92) 100%);
    }

    .meca-zoom-icon-badge {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(200, 42, 239, 0.85);
        color: #FFFFFF;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        align-self: flex-end;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
        transform: scale(0.85);
        transition: all 0.3s ease;
    }

    .meca-gallery-card:hover .meca-zoom-icon-badge {
        transform: scale(1);
        background: var(--accent-color, #C82AEF);
        box-shadow: 0 0 20px rgba(200, 42, 239, 0.6);
    }

    .meca-gallery-info {
        text-align: left;
    }

    .meca-gallery-tag {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--accent-color, #C82AEF);
        font-weight: 700;
    }

    .meca-gallery-title {
        color: #FFFFFF !important;
        font-family: 'Outfit', sans-serif;
        font-weight: 700;
        font-size: 1rem;
        margin-bottom: 0;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    }

    /* Modal Lightbox */
    .meca-lightbox-modal .modal-content {
        background: #090B14;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 28px;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.9);
        overflow: hidden;
    }

    .meca-lightbox-modal .modal-header {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 18px 24px;
        background: #12121A;
    }

    .meca-lightbox-body {
        position: relative;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #000000;
        min-height: 480px;
        max-height: 80vh;
        overflow: hidden;
    }

    .meca-lightbox-body img {
        max-width: 100%;
        max-height: 80vh;
        object-fit: contain;
        transition: transform 0.3s ease;
    }

    .meca-lightbox-nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: rgba(18, 18, 26, 0.75);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        cursor: pointer;
        transition: all 0.25s ease;
        z-index: 15;
    }

    .meca-lightbox-nav-btn:hover {
        background: var(--accent-color, #C82AEF);
        color: #FFFFFF;
        border-color: var(--accent-color, #C82AEF);
        box-shadow: 0 0 20px rgba(200, 42, 239, 0.5);
    }

    .meca-lightbox-nav-btn.prev-btn {
        left: 20px;
    }

    .meca-lightbox-nav-btn.next-btn {
        right: 20px;
    }

    .meca-lightbox-footer {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 16px 24px;
        background: #12121A;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* ========================================================
       Dual-Theme Light Mode Overrides (Strict High-Contrast Standard)
       ======================================================== */
    body.lightmode .meca-badge-sub {
        color: #9333EA !important;
    }

    body.lightmode .meca-breadcrumb-location a {
        color: #0F172A !important;
    }

    body.lightmode .meca-breadcrumb-location .breadcrumb-active {
        color: #B45309 !important;
    }

    body.lightmode .meca-breadcrumb-separator {
        color: #64748B !important;
        font-weight: 600;
    }

    body.lightmode .meca-section-heading {
        color: #0F172A !important;
    }

    body.lightmode .meca-section-desc {
        color: #475569 !important;
    }

    body.lightmode .meca-filter-btn {
        background: #FFFFFF !important;
        border: 1px solid #CBD5E1 !important;
        color: #334155 !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    }

    body.lightmode .meca-filter-btn:hover,
    body.lightmode .meca-filter-btn.active {
        background: var(--accent-color, #C82AEF) !important;
        border-color: var(--accent-color, #C82AEF) !important;
        color: #FFFFFF !important;
        box-shadow: 0 4px 18px rgba(200, 42, 239, 0.35) !important;
    }

    body.lightmode .meca-gallery-card {
        background: #FFFFFF !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
    }

    body.lightmode .meca-gallery-card:hover {
        border-color: rgba(200, 42, 239, 0.4) !important;
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12) !important;
    }

    body.lightmode .meca-gallery-title {
        color: #FFFFFF !important;
    }

    body.lightmode .meca-lightbox-modal .modal-content {
        background: #FFFFFF !important;
        border: 1px solid rgba(0, 0, 0, 0.12) !important;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25) !important;
    }

    body.lightmode .meca-lightbox-modal .modal-header {
        background: #F8FAFC !important;
        border-bottom: 1px solid #E2E8F0 !important;
    }

    body.lightmode .meca-lightbox-modal .modal-header .modal-title {
        color: #0F172A !important;
    }

    body.lightmode .meca-lightbox-footer {
        background: #F8FAFC !important;
        border-top: 1px solid #E2E8F0 !important;
    }

    body.lightmode .meca-lightbox-footer span {
        color: #334155 !important;
    }


/* ====================================================================
   SECTION: 15. Newsletters
   ==================================================================== */
/* ========================================================
       Newsletter Modern Design System & Dynamic Hero Slider
       ======================================================== */
    .newsletter-hero-banner {
        position: relative;
        width: 100%;
        height: 75vh;
        min-height: 560px;
        max-height: 720px;
        border-radius: var(--global-border-radius, 35px);
        overflow: hidden;
        border: 1px solid var(--accent-color-3, #1F1F1F);
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
        background-color: #090B14;
        display: flex;
        align-items: flex-end;
    }

    .meca-newsletter-hero-swiper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .meca-banner-slide-bg {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center center;
        image-rendering: -webkit-optimize-contrast;
        transition: transform 7s ease-out;
    }

    .swiper-slide-active .meca-banner-slide-bg { transform: none !important; }

    .newsletter-hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(9, 11, 20, 0.35) 0%, rgba(9, 11, 20, 0.88) 100%);
        z-index: 1;
        pointer-events: none;
    }

    .newsletter-hero-content {
        position: relative;
        z-index: 2;
        padding: 40px;
        width: 100%;
        pointer-events: none;
    }

    .newsletter-hero-content .meca-hero-title,
    body.lightmode .newsletter-hero-content .meca-hero-title {
        color: #FFFFFF !important;
    }

    .newsletter-hero-content .meca-hero-desc,
    body.lightmode .newsletter-hero-content .meca-hero-desc {
        color: rgba(255, 255, 255, 0.85) !important;
    }

    /* Menu Location Breadcrumb */
    .meca-breadcrumb-location {
        letter-spacing: 2px;
        font-size: 15px;
        font-weight: 700;
        text-transform: uppercase;
        font-family: 'Outfit', sans-serif;
    }

    .meca-breadcrumb-location a {
        color: #FFFFFF;
        text-decoration: none;
        transition: color 0.25s ease;
    }

    .meca-breadcrumb-location a:hover {
        color: var(--accent-color, #C82AEF);
    }

    .meca-breadcrumb-location .breadcrumb-active {
        color: #E2B048; /* Gold Accent */
    }

    .meca-breadcrumb-separator {
        color: rgba(255, 255, 255, 0.45) !important;
        font-weight: 400;
    }

    /* Modern Story & Section Cards */
    .meca-card-story {
        background: rgba(18, 18, 24, 0.85);
        border: 1px solid var(--accent-color-3, #1F1F1F);
        border-radius: 28px;
        padding: 40px;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
        transition: all 0.3s ease;
    }

    .meca-card-story:hover {
        border-color: rgba(200, 42, 239, 0.35);
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 25px rgba(200, 42, 239, 0.1);
    }

    .meca-section-divider {
        height: 1px;
        background: rgba(255, 255, 255, 0.15);
        width: 100%;
        margin-bottom: 25px;
    }

    .meca-editorial-title {
        color: #E2B048 !important;
        font-family: 'Playfair Display', Georgia, 'Outfit', serif;
        font-size: 34px;
        font-weight: 700;
        letter-spacing: 0.5px;
        margin-bottom: 16px;
    }

    .meca-editorial-text {
        color: rgba(255, 255, 255, 0.85) !important;
        font-size: 16.5px;
        line-height: 1.85;
        text-align: justify;
    }

    .meca-badge-sub {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--accent-color, #C82AEF) !important;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 1.5px;
        margin-bottom: 10px;
    }

    .meca-section-heading {
        color: #FFFFFF !important;
        font-family: 'Outfit', sans-serif;
    }

    .meca-section-desc {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    /* ========================================================
       Flagship Magazine 2024 Showcase Styling (Marko Premium)
       ======================================================== */
    .meca-flagship-showcase {
        background: linear-gradient(135deg, rgba(22, 22, 32, 0.95) 0%, rgba(13, 14, 22, 0.98) 100%);
        border: 1px solid rgba(200, 42, 239, 0.28);
        border-radius: 32px;
        padding: 45px;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 35px rgba(200, 42, 239, 0.1);
        position: relative;
        overflow: hidden;
        transition: all 0.35s ease;
    }

    .meca-flagship-showcase:hover {
        border-color: rgba(200, 42, 239, 0.5);
        box-shadow: 0 35px 80px rgba(0, 0, 0, 0.7), 0 0 45px rgba(200, 42, 239, 0.18);
    }

    .meca-magazine-cover-box {
        position: relative;
        border-radius: 22px;
        overflow: hidden;
        background: #0B0D17;
        border: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), -8px 0 25px rgba(200, 42, 239, 0.2);
        transition: transform 0.4s ease, box-shadow 0.4s ease;
    }

    .meca-magazine-cover-box:hover {
        transform: translateY(-6px) scale(1.02);
        box-shadow: 0 28px 60px rgba(0, 0, 0, 0.75), -12px 0 35px rgba(200, 42, 239, 0.35);
    }

    .meca-magazine-cover-img {
        width: 100%;
        height: 380px;
        object-fit: cover;
        display: block;
        transition: transform 0.6s ease;
    }

    .meca-magazine-cover-box:hover .meca-magazine-cover-img {
        transform: scale(1.05);
    }

    .meca-magazine-overlay-badge {
        position: absolute;
        top: 18px;
        left: 18px;
        z-index: 10;
    }

    .meca-magazine-bottom-strip {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 20px 20px 18px;
        background: rgba(10, 12, 20, 0.9) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        z-index: 10;
    }

    .meca-cover-title {
        color: #FFFFFF !important;
        font-family: 'Outfit', sans-serif;
        font-weight: 700;
        margin-bottom: 0;
        font-size: 1.15rem;
    }

    .meca-cover-meta {
        color: rgba(255, 255, 255, 0.85) !important;
        font-size: 12.5px;
    }

    .meca-feature-chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        border-radius: 50px;
        font-size: 13px;
        font-weight: 600;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #FFFFFF;
        transition: all 0.25s ease;
    }

    .meca-feature-chip:hover {
        background: rgba(200, 42, 239, 0.18);
        border-color: rgba(200, 42, 239, 0.45);
        color: #FFFFFF;
        transform: translateY(-2px);
    }

    .meca-meta-block {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        padding: 14px 18px;
    }

    .meca-meta-label {
        font-size: 11.5px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: rgba(255, 255, 255, 0.5);
        margin-bottom: 2px;
        font-weight: 600;
    }

    .meca-meta-value {
        font-size: 14px;
        font-weight: 700;
        color: #FFFFFF;
    }

    /* Solid High-Contrast Read Button */
    .meca-btn-flagship-read {
        background: linear-gradient(135deg, #C82AEF 0%, #9333EA 100%) !important;
        border: none !important;
        color: #FFFFFF !important;
        border-radius: 50px !important;
        padding: 14px 28px !important;
        font-weight: 700 !important;
        box-shadow: 0 6px 22px rgba(200, 42, 239, 0.45) !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 12px !important;
        transition: all 0.3s ease !important;
    }

    .meca-btn-flagship-read:hover {
        background: linear-gradient(135deg, #B015D6 0%, #7E22CE 100%) !important;
        color: #FFFFFF !important;
        box-shadow: 0 8px 28px rgba(200, 42, 239, 0.6) !important;
        transform: translateY(-2px) !important;
    }

    .meca-btn-flagship-read span,
    .meca-btn-flagship-read i {
        color: #FFFFFF !important;
    }

    .meca-btn-flagship-read .icon-circle {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.25);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 4px;
    }

    /* Newsletter Edition Cards Grid */
    .meca-newsletter-card {
        background: rgba(18, 18, 24, 0.75);
        border: 1px solid var(--accent-color-3, #1F1F1F);
        border-radius: 24px;
        padding: 30px 24px;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
        transition: all 0.35s ease;
        position: relative;
        overflow: hidden;
    }

    .meca-newsletter-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: transparent;
        transition: background 0.3s ease;
    }

    .meca-newsletter-card:hover {
        transform: translateY(-6px);
        border-color: rgba(200, 42, 239, 0.4);
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), 0 0 20px rgba(200, 42, 239, 0.15);
    }

    .meca-newsletter-card:hover::before {
        background: var(--accent-color, #C82AEF);
    }

    .meca-pdf-icon-box {
        width: 54px;
        height: 54px;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
        font-size: 24px;
        transition: transform 0.3s ease;
    }

    .meca-newsletter-card:hover .meca-pdf-icon-box {
        transform: scale(1.1);
    }

    .meca-card-title {
        color: #FFFFFF;
        font-weight: 700;
        font-size: 1.2rem;
        margin-bottom: 8px;
        font-family: 'Outfit', sans-serif;
    }

    .meca-card-desc {
        color: rgba(255, 255, 255, 0.65);
        font-size: 0.88rem;
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .meca-card-meta {
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.85rem;
    }

    /* Embedded PDF Interactive Container */
    .meca-pdf-frame-wrapper {
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid var(--accent-color-3, #1F1F1F);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
        background: #090B14;
        position: relative;
    }

    .meca-pdf-frame-wrapper iframe {
        width: 100%;
        height: 620px;
        border: none;
        display: block;
    }

    .meca-btn-read {
        background: rgba(200, 42, 239, 0.15);
        border: 1px solid rgba(200, 42, 239, 0.4);
        color: #FFFFFF;
        transition: all 0.3s ease;
    }

    .meca-btn-read:hover {
        background: var(--accent-color, #C82AEF);
        color: #FFFFFF;
        box-shadow: 0 0 20px rgba(200, 42, 239, 0.4);
    }

    .meca-btn-download {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: #FFFFFF;
        transition: all 0.3s ease;
    }

    .meca-btn-download:hover {
        background: rgba(255, 255, 255, 0.12);
        color: #FFFFFF;
        border-color: rgba(255, 255, 255, 0.35);
    }

    .meca-btn-contact {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #FFFFFF;
        transition: all 0.3s ease;
    }

    .meca-btn-contact:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #FFFFFF;
        border-color: rgba(255, 255, 255, 0.4);
    }

    /* Modal Styling for PDF preview */
    .modal-content.meca-modal {
        background: #121218;
        border: 1px solid var(--accent-color-3, #1F1F1F);
        border-radius: 24px;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8);
    }

    .modal-header.meca-modal-header {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 20px 24px;
    }

    /* ========================================================
       Dual-Theme Light Mode Overrides (Strict High-Contrast Standard)
       ======================================================== */
    body.lightmode .meca-section-divider {
        background: #E2E8F0 !important;
    }

    body.lightmode .meca-editorial-title {
        color: #6B1D2F !important; /* Deep maroon/burgundy standard */
    }

    body.lightmode .meca-editorial-text {
        color: #334155 !important;
    }

    body.lightmode .meca-badge-sub {
        color: #9333EA !important;
    }

    body.lightmode .meca-breadcrumb-location a {
        color: #0F172A !important;
    }

    body.lightmode .meca-breadcrumb-location .breadcrumb-active {
        color: #B45309 !important; /* Rich amber gold in light mode */
    }

    body.lightmode .meca-breadcrumb-separator {
        color: #64748B !important;
        font-weight: 600;
    }

    body.lightmode .meca-card-story {
        background: #FFFFFF !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06) !important;
    }

    body.lightmode .meca-card-story:hover {
        border-color: rgba(200, 42, 239, 0.4) !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1) !important;
    }

    body.lightmode .meca-flagship-showcase {
        background: #FFFFFF !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08) !important;
    }

    body.lightmode .meca-flagship-showcase:hover {
        border-color: rgba(200, 42, 239, 0.35) !important;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12) !important;
    }

    /* Magazine Mockup locked to White Text on dark image strip */
    body.lightmode .meca-magazine-cover-box {
        border-color: rgba(0, 0, 0, 0.15) !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18) !important;
    }

    body.lightmode .meca-magazine-bottom-strip {
        background: rgba(10, 12, 20, 0.92) !important;
    }

    body.lightmode .meca-cover-title,
    body.lightmode .meca-magazine-bottom-strip .meca-cover-title {
        color: #FFFFFF !important;
    }

    body.lightmode .meca-cover-meta,
    body.lightmode .meca-magazine-bottom-strip .meca-cover-meta {
        color: rgba(255, 255, 255, 0.85) !important;
    }

    body.lightmode .meca-magazine-bottom-strip .badge.bg-danger {
        color: #FFFFFF !important;
        background-color: #DC2626 !important;
    }

    body.lightmode .meca-feature-chip {
        background: #F1F5F9 !important;
        border: 1px solid #CBD5E1 !important;
        color: #1E293B !important;
        font-weight: 600 !important;
    }

    body.lightmode .meca-feature-chip:hover {
        background: rgba(200, 42, 239, 0.1) !important;
        border-color: rgba(200, 42, 239, 0.3) !important;
        color: var(--accent-color, #C82AEF) !important;
    }

    body.lightmode .meca-meta-block {
        background: #F8FAFC !important;
        border: 1px solid #E2E8F0 !important;
    }

    body.lightmode .meca-meta-label {
        color: #64748B !important;
    }

    body.lightmode .meca-meta-value {
        color: #0F172A !important;
    }

    /* Light Mode Button Overrides */
    body.lightmode .meca-btn-flagship-read,
    body.lightmode .meca-btn-flagship-read * {
        color: #FFFFFF !important;
    }

    body.lightmode .meca-btn-flagship-read .icon-circle {
        background: rgba(255, 255, 255, 0.25) !important;
    }

    body.lightmode .meca-btn-flagship-read .icon-circle i {
        color: #FFFFFF !important;
    }

    body.lightmode .meca-section-heading {
        color: #0F172A !important;
    }

    body.lightmode .meca-section-desc {
        color: #475569 !important;
    }

    body.lightmode .meca-newsletter-card {
        background: #FFFFFF !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.05) !important;
    }

    body.lightmode .meca-newsletter-card:hover {
        border-color: rgba(200, 42, 239, 0.4) !important;
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1) !important;
    }

    body.lightmode .meca-card-title {
        color: #0F172A !important;
    }

    body.lightmode .meca-card-desc {
        color: #475569 !important;
    }

    body.lightmode .meca-card-meta {
        color: #64748B !important;
    }

    body.lightmode .meca-btn-read {
        background: rgba(200, 42, 239, 0.12) !important;
        border-color: rgba(200, 42, 239, 0.35) !important;
        color: #9333EA !important;
    }

    body.lightmode .meca-btn-read:hover {
        background: var(--accent-color, #C82AEF) !important;
        color: #FFFFFF !important;
    }

    body.lightmode .meca-btn-download {
        background: #FFFFFF !important;
        border: 1px solid #CBD5E1 !important;
        color: #0F172A !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    }

    body.lightmode .meca-btn-download:hover {
        background: #0F172A !important;
        color: #FFFFFF !important;
        border-color: #0F172A !important;
    }

    body.lightmode .meca-btn-contact {
        background: #FFFFFF !important;
        border: 1px solid #CBD5E1 !important;
        color: #0F172A !important;
    }

    body.lightmode .meca-btn-contact:hover {
        background: #0F172A !important;
        color: #FFFFFF !important;
        border-color: #0F172A !important;
    }

    body.lightmode .meca-pdf-frame-wrapper {
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
        background: #F8FAFC !important;
    }

    body.lightmode .modal-content.meca-modal {
        background: #FFFFFF !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2) !important;
    }

    body.lightmode .modal-header.meca-modal-header {
        border-bottom: 1px solid #E2E8F0 !important;
    }

    body.lightmode .modal-header.meca-modal-header .modal-title {
        color: #0F172A !important;
    }


/* ====================================================================
   SECTION: 16. Newsletter Details
   ==================================================================== */
.article-details-hero {
        position: relative;
        width: 100%;
        min-height: 260px;
        border-radius: var(--global-border-radius, 35px);
        overflow: hidden;
        border: 1px solid var(--accent-color-3, #1F1F1F);
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
        background: linear-gradient(135deg, #090B14 0%, #151622 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 40px 20px;
    }

    .meca-breadcrumb-location {
        letter-spacing: 2px;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        font-family: 'Outfit', sans-serif;
    }

    .meca-breadcrumb-location a {
        color: #FFFFFF;
        text-decoration: none;
        transition: color 0.25s ease;
    }

    .meca-breadcrumb-location a:hover {
        color: var(--accent-color, #C82AEF);
    }

    .meca-breadcrumb-location .breadcrumb-active {
        color: #E2B048;
    }

    .meca-breadcrumb-separator {
        color: rgba(255, 255, 255, 0.45) !important;
        font-weight: 400;
    }

    .meca-card-story {
        background: rgba(18, 18, 24, 0.85);
        border: 1px solid var(--accent-color-3, #1F1F1F);
        border-radius: 28px;
        padding: 40px;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    }

    .meca-article-img {
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid var(--accent-color-3, #1F1F1F);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
        max-height: 450px;
    }

    .meca-article-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .meca-article-title {
        color: #E2B048;
        font-family: 'Playfair Display', Georgia, 'Outfit', serif;
        font-size: 36px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .meca-article-body {
        color: rgba(255, 255, 255, 0.85);
        font-size: 17px;
        line-height: 1.85;
        text-align: justify;
    }

    body.lightmode .article-details-hero {
        background: linear-gradient(135deg, #EEF2F6 0%, #E2E8F0 100%) !important;
        border-color: rgba(0, 0, 0, 0.08) !important;
    }

    body.lightmode .meca-breadcrumb-location a {
        color: #0F172A !important;
    }

    body.lightmode .meca-breadcrumb-location .breadcrumb-active {
        color: #B45309 !important;
    }

    body.lightmode .meca-breadcrumb-separator {
        color: #64748B !important;
        font-weight: 600;
    }

    body.lightmode .meca-card-story {
        background: #FFFFFF !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06) !important;
    }

    body.lightmode .meca-article-title {
        color: #6B1D2F !important;
    }

    body.lightmode .meca-article-body {
        color: #334155 !important;
    }


/* ====================================================================
   UNIVERSAL SLIDER TYPOGRAPHY & FLEXIBLE CONTRAST ENGINE
   Unified, common, and flexible styling for ALL sliders across MECA platform.
   Guarantees 100% legibility and crisp contrast regardless of photo brightness.
   ==================================================================== */

/* 1. All Slider Titles across the entire website */
.meca-slide-title,
.contact-hero-title,
.about-hero-content h1,
.members-hero-content h1,
.ec-hero-content h1,
.gb-hero-content h1,
.mission-hero-content h1,
.welfare-hero-content h1,
.welfare-hero-content .meca-hero-title,
.events-hero-content h1,
.event-details-hero-content h1,
.gallery-hero-content h1,
.gallery-hero-content .meca-hero-title,
.newsletter-hero-content h1,
.newsletter-hero-content .meca-hero-title,
.meca-hero-content h1,
#eventTitleHeader,
[class*="-hero-content"] h1,
[class*="-hero-banner"] h1,
[class*="-hero-banner"] .contact-hero-title,
[class*="-hero-banner"] .meca-slide-title,
body.lightmode .meca-slide-title,
body.lightmode .contact-hero-title,
body.lightmode .about-hero-content h1,
body.lightmode .members-hero-content h1,
body.lightmode .ec-hero-content h1,
body.lightmode .gb-hero-content h1,
body.lightmode .mission-hero-content h1,
body.lightmode .welfare-hero-content h1,
body.lightmode .welfare-hero-content .meca-hero-title,
body.lightmode .events-hero-content h1,
body.lightmode .event-details-hero-content h1,
body.lightmode .gallery-hero-content h1,
body.lightmode .gallery-hero-content .meca-hero-title,
body.lightmode .newsletter-hero-content h1,
body.lightmode .newsletter-hero-content .meca-hero-title,
body.lightmode .meca-hero-content h1,
body.lightmode #eventTitleHeader,
body.lightmode [class*="-hero-content"] h1,
body.lightmode [class*="-hero-banner"] h1,
body.lightmode [class*="-hero-banner"] .contact-hero-title,
body.lightmode [class*="-hero-banner"] .meca-slide-title {
    color: #FFFFFF !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.95), 
        0 4px 18px rgba(0, 0, 0, 0.90), 
        0 0 35px rgba(0, 0, 0, 0.85) !important;
}

/* 2. All Slider Descriptions / Paragraphs across the entire website */
.meca-slide-desc,
.contact-hero-desc,
.about-hero-content p,
.members-hero-content p,
.ec-hero-content p,
.gb-hero-content p,
.mission-hero-content p,
.welfare-hero-content p,
.welfare-hero-content .meca-hero-desc,
.events-hero-content p,
.event-details-hero-content p,
.gallery-hero-content p,
.gallery-hero-content .meca-hero-desc,
.newsletter-hero-content p,
.newsletter-hero-content .meca-hero-desc,
.meca-hero-content p,
[class*="-hero-content"] p,
[class*="-hero-banner"] p,
body.lightmode .meca-slide-desc,
body.lightmode .contact-hero-desc,
body.lightmode .about-hero-content p,
body.lightmode .members-hero-content p,
body.lightmode .ec-hero-content p,
body.lightmode .gb-hero-content p,
body.lightmode .mission-hero-content p,
body.lightmode .welfare-hero-content p,
body.lightmode .welfare-hero-content .meca-hero-desc,
body.lightmode .events-hero-content p,
body.lightmode .event-details-hero-content p,
body.lightmode .gallery-hero-content p,
body.lightmode .gallery-hero-content .meca-hero-desc,
body.lightmode .newsletter-hero-content p,
body.lightmode .newsletter-hero-content .meca-hero-desc,
body.lightmode .meca-hero-content p,
body.lightmode [class*="-hero-content"] p,
body.lightmode [class*="-hero-banner"] p {
    color: #F8FAFC !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 16.5px !important;
    line-height: 1.65 !important;
    font-weight: 500 !important;
    text-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.95), 
        0 2px 10px rgba(0, 0, 0, 0.85), 
        0 0 20px rgba(0, 0, 0, 0.70) !important;
}

[class*="-hero-content"] p strong,
[class*="-hero-banner"] p strong,
.meca-video-slide-content p strong {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

/* 3. Universal Slider Badges & Emblems (Gold-Accented Frosted Capsule) */
.meca-slide-badge,
.meca-badge-sub,
.sub-heading,
[class*="-hero-content"] .meca-slide-badge,
[class*="-hero-content"] .meca-badge-sub,
[class*="-hero-content"] .sub-heading,
[class*="-hero-banner"] .meca-slide-badge,
[class*="-hero-banner"] .meca-badge-sub,
[class*="-hero-banner"] .sub-heading,
body.lightmode .meca-slide-badge,
body.lightmode .meca-badge-sub,
body.lightmode [class*="-hero-content"] .meca-slide-badge,
body.lightmode [class*="-hero-content"] .meca-badge-sub,
body.lightmode [class*="-hero-content"] .sub-heading,
body.lightmode [class*="-hero-banner"] .meca-slide-badge,
body.lightmode [class*="-hero-banner"] .meca-badge-sub,
body.lightmode [class*="-hero-banner"] .sub-heading {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(11, 15, 25, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(226, 176, 72, 0.60) !important;
    color: #E2B048 !important;
    padding: 6px 18px !important;
    border-radius: 50px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6) !important;
    margin-bottom: 14px !important;
}

.meca-slide-badge i,
.meca-badge-sub i,
.sub-heading i,
.meca-slide-badge span,
.meca-badge-sub span,
.sub-heading span,
body.lightmode .meca-slide-badge i,
body.lightmode .meca-badge-sub i,
body.lightmode .sub-heading i,
body.lightmode .meca-slide-badge span,
body.lightmode .meca-badge-sub span,
body.lightmode .sub-heading span {
    color: #E2B048 !important;
}

/* 4. Universal Breadcrumbs inside Sliders / Hero Banners */
[class*="-hero-banner"] .meca-breadcrumb-location,
[class*="-hero-content"] .meca-breadcrumb-location,
.contact-hero-banner .meca-breadcrumb-location,
.contact-hero-content .meca-breadcrumb-location,
.mission-hero-banner .meca-breadcrumb-location,
.mission-hero-content .meca-breadcrumb-location,
.meca-purchase-hero-banner .meca-breadcrumb-location,
.meca-purchase-hero-banner .meca-hero-content .meca-breadcrumb-location,
body.lightmode [class*="-hero-banner"] .meca-breadcrumb-location,
body.lightmode [class*="-hero-content"] .meca-breadcrumb-location,
body.lightmode .contact-hero-banner .meca-breadcrumb-location,
body.lightmode .contact-hero-content .meca-breadcrumb-location,
body.lightmode .mission-hero-banner .meca-breadcrumb-location,
body.lightmode .mission-hero-content .meca-breadcrumb-location,
body.lightmode .meca-purchase-hero-banner .meca-breadcrumb-location,
body.lightmode .meca-purchase-hero-banner .meca-hero-content .meca-breadcrumb-location {
    color: #FFFFFF !important;
}

[class*="-hero-banner"] .meca-breadcrumb-location a,
[class*="-hero-content"] .meca-breadcrumb-location a,
.contact-hero-banner .meca-breadcrumb-location a,
.contact-hero-content .meca-breadcrumb-location a,
.mission-hero-banner .meca-breadcrumb-location a,
.mission-hero-content .meca-breadcrumb-location a,
.meca-purchase-hero-banner .meca-breadcrumb-location a,
body.lightmode [class*="-hero-banner"] .meca-breadcrumb-location a,
body.lightmode [class*="-hero-content"] .meca-breadcrumb-location a,
body.lightmode .contact-hero-banner .meca-breadcrumb-location a,
body.lightmode .contact-hero-content .meca-breadcrumb-location a,
body.lightmode .mission-hero-banner .meca-breadcrumb-location a,
body.lightmode .mission-hero-content .meca-breadcrumb-location a,
body.lightmode .meca-purchase-hero-banner .meca-breadcrumb-location a {
    color: #FFFFFF !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95) !important;
    font-weight: 700 !important;
    transition: color 0.25s ease !important;
}

[class*="-hero-banner"] .meca-breadcrumb-location a:hover,
[class*="-hero-content"] .meca-breadcrumb-location a:hover,
body.lightmode [class*="-hero-banner"] .meca-breadcrumb-location a:hover,
body.lightmode [class*="-hero-content"] .meca-breadcrumb-location a:hover {
    color: #E2B048 !important;
}

[class*="-hero-banner"] .meca-breadcrumb-location .breadcrumb-active,
[class*="-hero-content"] .meca-breadcrumb-location .breadcrumb-active,
.contact-hero-banner .meca-breadcrumb-location .breadcrumb-active,
.contact-hero-content .meca-breadcrumb-location .breadcrumb-active,
.mission-hero-banner .meca-breadcrumb-location .breadcrumb-active,
.mission-hero-content .meca-breadcrumb-location .breadcrumb-active,
.meca-purchase-hero-banner .meca-breadcrumb-location .breadcrumb-active,
body.lightmode [class*="-hero-banner"] .meca-breadcrumb-location .breadcrumb-active,
body.lightmode [class*="-hero-content"] .meca-breadcrumb-location .breadcrumb-active,
body.lightmode .contact-hero-banner .meca-breadcrumb-location .breadcrumb-active,
body.lightmode .contact-hero-content .meca-breadcrumb-location .breadcrumb-active,
body.lightmode .mission-hero-banner .meca-breadcrumb-location .breadcrumb-active,
body.lightmode .mission-hero-content .meca-breadcrumb-location .breadcrumb-active,
body.lightmode .meca-purchase-hero-banner .meca-breadcrumb-location .breadcrumb-active {
    color: #E2B048 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95) !important;
    font-weight: 700 !important;
}

[class*="-hero-banner"] .meca-breadcrumb-separator,
[class*="-hero-content"] .meca-breadcrumb-separator,
.contact-hero-banner .meca-breadcrumb-separator,
.contact-hero-content .meca-breadcrumb-separator,
.mission-hero-banner .meca-breadcrumb-separator,
.mission-hero-content .meca-breadcrumb-separator,
.meca-purchase-hero-banner .meca-breadcrumb-separator,
body.lightmode [class*="-hero-banner"] .meca-breadcrumb-separator,
body.lightmode [class*="-hero-content"] .meca-breadcrumb-separator,
body.lightmode .contact-hero-banner .meca-breadcrumb-separator,
body.lightmode .contact-hero-content .meca-breadcrumb-separator,
body.lightmode .mission-hero-banner .meca-breadcrumb-separator,
body.lightmode .mission-hero-content .meca-breadcrumb-separator,
body.lightmode .meca-purchase-hero-banner .meca-breadcrumb-separator {
    color: rgba(255, 255, 255, 0.75) !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95) !important;
}

/* 5. Universal Slider Protective Overlays & Scrims */
.meca-video-slide-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, 
        rgba(7, 9, 16, 0.88) 0%, 
        rgba(7, 9, 16, 0.65) 42%, 
        rgba(7, 9, 16, 0.25) 75%, 
        rgba(7, 9, 16, 0.05) 100%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.contact-hero-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: radial-gradient(circle at center, rgba(7, 9, 16, 0.55) 0%, rgba(7, 9, 16, 0.90) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.about-hero-overlay,
.members-hero-overlay,
.ec-hero-overlay,
.gb-hero-overlay,
.welfare-hero-overlay,
.mission-hero-overlay,
.events-hero-overlay,
.event-details-hero-overlay,
.gallery-hero-overlay,
.newsletter-hero-overlay,
.meca-hero-overlay,
[class*="-hero-overlay"],
body.lightmode .about-hero-overlay,
body.lightmode .members-hero-overlay,
body.lightmode .ec-hero-overlay,
body.lightmode .gb-hero-overlay,
body.lightmode .welfare-hero-overlay,
body.lightmode .mission-hero-overlay,
body.lightmode .events-hero-overlay,
body.lightmode .event-details-hero-overlay,
body.lightmode .gallery-hero-overlay,
body.lightmode .newsletter-hero-overlay,
body.lightmode .meca-hero-overlay,
body.lightmode [class*="-hero-overlay"] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(180deg, 
        rgba(7, 9, 16, 0.30) 0%, 
        rgba(7, 9, 16, 0.60) 45%, 
        rgba(7, 9, 16, 0.88) 85%, 
        rgba(7, 9, 16, 0.96) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* ====================================================================
   6. UNIVERSAL BIG SLIDER HEIGHT & FIXED TRANSPARENT TEXT CARD SYSTEM
   ==================================================================== */
/* ====================================================================
   UNIFIED DISTANCE & POSITION FROM NAVIGATION BAR ACROSS ALL PAGES
   ==================================================================== */
.section-banner,
.section-banner.pt-2,
main > .hero-container:first-child,
main > .section-banner:first-child,
main > .hero-container.my-4:first-child {
    margin-top: 20px !important;
    padding-top: 0 !important;
}

main > .section-banner:first-child,
main > .hero-container:first-child {
    margin-bottom: 12px !important;
}

/* ====================================================================
   INDEX PAGE COMPACT SECTION SPACING & GAP REDUCTION
   Eliminates bloated gaps between sections for a sleek, cohesive layout.
   ==================================================================== */
.section {
    padding: 20px 0 !important;
}

.section.py-5,
.section.py-4 {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

/* Reduced spacing for section titles and card rows */
.section .max-w-700.mb-5,
.section .max-w-700 {
    margin-bottom: 18px !important;
}

.meca-packages-title {
    margin-bottom: 8px !important;
}

.meca-reunion-stage {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 34px !important;
}

.meca-template-section-card {
    padding: 34px !important;
}

.meca-stats-single-row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/* ====================================================================
   1. UNIVERSAL SLIDER HEIGHT & BOUNDS ACROSS ALL PAGES
   ==================================================================== */
.banner-video-container,
.meca-video-slide,
.members-hero-banner,
.about-hero-banner,
.contact-hero-banner,
.ec-hero-banner,
.gb-hero-banner,
.mission-hero-banner,
.welfare-hero-banner,
.events-hero-banner,
.event-details-hero-banner,
.gallery-hero-banner,
.newsletter-hero-banner,
.meca-purchase-hero-banner,
[class*="-hero-banner"] {
    position: relative !important;
    width: 100% !important;
    height: 75vh !important;
    min-height: 560px !important;
    max-height: 720px !important;
    border-radius: var(--global-border-radius, 32px) !important;
    overflow: hidden !important;
    border: 1px solid var(--accent-color-3, rgba(255, 255, 255, 0.12)) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6) !important;
    background-color: #090B14 !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 45px !important;
}

@media (max-width: 991.98px) {
    .banner-video-container,
    .meca-video-slide,
    .members-hero-banner,
    .about-hero-banner,
    .contact-hero-banner,
    .ec-hero-banner,
    .gb-hero-banner,
    .mission-hero-banner,
    .welfare-hero-banner,
    .events-hero-banner,
    .event-details-hero-banner,
    .gallery-hero-banner,
    .newsletter-hero-banner,
    .meca-purchase-hero-banner,
    [class*="-hero-banner"] {
        height: 60vh !important;
        min-height: 460px !important;
        padding: 0 20px !important;
    }
}

/* ====================================================================
   2. UNIFIED SLIDER NAVIGATION SIGNS (SWIPER ARROWS & BULLETS)
   ==================================================================== */
.swiper-button-prev,
.swiper-button-next,
[class*="-hero-banner"] .swiper-button-prev,
[class*="-hero-banner"] .swiper-button-next,
.banner-video-container .swiper-button-prev,
.banner-video-container .swiper-button-next,
body.lightmode .swiper-button-prev,
body.lightmode .swiper-button-next,
body.lightmode [class*="-hero-banner"] .swiper-button-prev,
body.lightmode [class*="-hero-banner"] .swiper-button-next {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 50% !important;
    background: rgba(10, 14, 26, 0.85) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
    color: #FFFFFF !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.swiper-button-prev:after,
.swiper-button-next:after,
[class*="-hero-banner"] .swiper-button-prev:after,
[class*="-hero-banner"] .swiper-button-next:after,
.banner-video-container .swiper-button-prev:after,
.banner-video-container .swiper-button-next:after,
body.lightmode .swiper-button-prev:after,
body.lightmode .swiper-button-next:after,
body.lightmode [class*="-hero-banner"] .swiper-button-prev:after,
body.lightmode [class*="-hero-banner"] .swiper-button-next:after {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
}

.swiper-button-prev:hover,
.swiper-button-next:hover,
[class*="-hero-banner"] .swiper-button-prev:hover,
[class*="-hero-banner"] .swiper-button-next:hover,
.banner-video-container .swiper-button-prev:hover,
.banner-video-container .swiper-button-next:hover,
body.lightmode .swiper-button-prev:hover,
body.lightmode .swiper-button-next:hover {
    background: #C82AEF !important;
    border-color: #E2B048 !important;
    color: #FFFFFF !important;
    transform: scale(1.1) !important;
    box-shadow: 0 10px 30px rgba(200, 42, 239, 0.6) !important;
}

.swiper-button-prev:hover:after,
.swiper-button-next:hover:after,
body.lightmode .swiper-button-prev:hover:after,
body.lightmode .swiper-button-next:hover:after {
    color: #FFFFFF !important;
}

@media (max-width: 576px) {
    .swiper-button-prev,
    .swiper-button-next {
        display: none !important;
    }
}

/* ====================================================================
   3. UNIFIED SLIDER BADGE SIGN (CAPSULE) ACROSS ALL PAGES
   ==================================================================== */
.meca-slide-badge,
.meca-badge-sub,
.sub-heading,
[class*="-hero-content"] .meca-slide-badge,
[class*="-hero-content"] .meca-badge-sub,
[class*="-hero-content"] .sub-heading,
[class*="-hero-banner"] .meca-slide-badge,
[class*="-hero-banner"] .meca-badge-sub,
[class*="-hero-banner"] .sub-heading,
body.lightmode .meca-slide-badge,
body.lightmode .meca-badge-sub,
body.lightmode [class*="-hero-content"] .meca-slide-badge,
body.lightmode [class*="-hero-content"] .meca-badge-sub,
body.lightmode [class*="-hero-content"] .sub-heading,
body.lightmode [class*="-hero-banner"] .meca-slide-badge,
body.lightmode [class*="-hero-banner"] .meca-badge-sub,
body.lightmode [class*="-hero-banner"] .sub-heading {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(11, 15, 25, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1.5px solid #E2B048 !important;
    color: #E2B048 !important;
    padding: 6px 18px !important;
    border-radius: 50px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6) !important;
    margin-bottom: 14px !important;
    line-height: 1.4 !important;
}

.meca-slide-badge i,
.meca-badge-sub i,
.sub-heading i,
.meca-slide-badge span,
.meca-badge-sub span,
.sub-heading span,
[class*="-hero-content"] .meca-badge-sub i,
[class*="-hero-content"] .meca-badge-sub span,
body.lightmode .meca-slide-badge i,
body.lightmode .meca-badge-sub i,
body.lightmode .sub-heading i,
body.lightmode .meca-slide-badge span,
body.lightmode .meca-badge-sub span,
body.lightmode .sub-heading span,
body.lightmode [class*="-hero-content"] .meca-badge-sub i,
body.lightmode [class*="-hero-content"] .meca-badge-sub span {
    color: #E2B048 !important;
}

/* ====================================================================
   4. FIXED TRANSPARENT CARD FOR ADDING TEXT ACROSS ALL SLIDERS
   ==================================================================== */
.meca-video-slide-content,
[class*="-hero-content"],
.about-hero-content,
.contact-hero-content,
.ec-hero-content,
.gb-hero-content,
.members-hero-content,
.mission-hero-content,
.welfare-hero-content,
.events-hero-content,
.event-details-hero-content,
.gallery-hero-content,
.newsletter-hero-content,
.meca-hero-content {
    position: relative !important;
    z-index: 5 !important;
    max-width: 820px !important;
    width: 100% !important;
    background: rgba(10, 14, 26, 0.72) !important;
    backdrop-filter: blur(18px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.20) !important;
    border-radius: 26px !important;
    padding: 36px 44px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 35px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.3s ease !important;
}

/* Maintain Theater Card in Light Mode so Slider Photos never wash out text */
body.lightmode .meca-video-slide-content,
body.lightmode [class*="-hero-content"],
body.lightmode .about-hero-content,
body.lightmode .contact-hero-content,
body.lightmode .ec-hero-content,
body.lightmode .gb-hero-content,
body.lightmode .members-hero-content,
body.lightmode .mission-hero-content,
body.lightmode .welfare-hero-content,
body.lightmode .events-hero-content,
body.lightmode .event-details-hero-content,
body.lightmode .gallery-hero-content,
body.lightmode .newsletter-hero-content,
body.lightmode .meca-hero-content {
    background: rgba(10, 14, 26, 0.76) !important;
    backdrop-filter: blur(18px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.24) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45) !important;
}

/* Center-aligned card for Contact Us & Mission Vision */
.contact-hero-content,
.mission-hero-content,
.meca-purchase-hero-banner .meca-hero-content {
    margin: 0 auto !important;
    text-align: center !important;
}

/* ====================================================================
   5. UNIFIED SLIDER TITLES ACROSS ALL PAGES (100% CRISP PURE WHITE)
   ==================================================================== */
.meca-video-slide-content h1,
.meca-video-slide-content h2,
.meca-video-slide-content .meca-slide-title,
.about-hero-content h1,
.about-hero-content h2,
.about-hero-content .display-5,
.about-hero-content .meca-hero-title,
.members-hero-content h1,
.members-hero-content .display-5,
.ec-hero-content h1,
.ec-hero-content .display-5,
.gb-hero-content h1,
.gb-hero-content .display-5,
.mission-hero-content h1,
.mission-hero-content .display-5,
.welfare-hero-content h1,
.welfare-hero-content .display-5,
.welfare-hero-content .meca-hero-title,
.events-hero-content h1,
.events-hero-content .display-5,
.event-details-hero-content h1,
.gallery-hero-content h1,
.gallery-hero-content .display-5,
.gallery-hero-content .meca-hero-title,
.newsletter-hero-content h1,
.newsletter-hero-content .display-5,
.newsletter-hero-content .meca-hero-title,
.contact-hero-content h1,
.contact-hero-content .contact-hero-title,
[class*="-hero-content"] h1,
[class*="-hero-content"] h2,
[class*="-hero-content"] .display-5,
[class*="-hero-content"] [class*="-hero-title"],
[class*="-hero-content"] .meca-hero-title,
[class*="-hero-banner"] h1,
[class*="-hero-banner"] h2,
[class*="-hero-banner"] .display-5,
[class*="-hero-banner"] .meca-slide-title,
body.lightmode .meca-video-slide-content h1,
body.lightmode .meca-video-slide-content h2,
body.lightmode .meca-video-slide-content .meca-slide-title,
body.lightmode .about-hero-content h1,
body.lightmode .about-hero-content .display-5,
body.lightmode .about-hero-content .meca-hero-title,
body.lightmode .members-hero-content h1,
body.lightmode .members-hero-content .display-5,
body.lightmode .ec-hero-content h1,
body.lightmode .ec-hero-content .display-5,
body.lightmode .gb-hero-content h1,
body.lightmode .gb-hero-content .display-5,
body.lightmode .mission-hero-content h1,
body.lightmode .mission-hero-content .display-5,
body.lightmode .welfare-hero-content h1,
body.lightmode .welfare-hero-content .display-5,
body.lightmode .welfare-hero-content .meca-hero-title,
body.lightmode .events-hero-content h1,
body.lightmode .events-hero-content .display-5,
body.lightmode .event-details-hero-content h1,
body.lightmode .gallery-hero-content h1,
body.lightmode .gallery-hero-content .display-5,
body.lightmode .gallery-hero-content .meca-hero-title,
body.lightmode .newsletter-hero-content h1,
body.lightmode .newsletter-hero-content .display-5,
body.lightmode .newsletter-hero-content .meca-hero-title,
body.lightmode .contact-hero-content h1,
body.lightmode .contact-hero-content .contact-hero-title,
body.lightmode [class*="-hero-content"] h1,
body.lightmode [class*="-hero-content"] h2,
body.lightmode [class*="-hero-content"] .display-5,
body.lightmode [class*="-hero-content"] [class*="-hero-title"],
body.lightmode [class*="-hero-content"] .meca-hero-title,
body.lightmode [class*="-hero-content"] .text-white,
body.lightmode [class*="-hero-banner"] h1,
body.lightmode [class*="-hero-banner"] .display-5,
body.lightmode [class*="-hero-banner"] .meca-slide-title {
    color: #FFFFFF !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.95), 
        0 4px 18px rgba(0, 0, 0, 0.90), 
        0 0 35px rgba(0, 0, 0, 0.85) !important;
    opacity: 1 !important;
    transform: none !important;
    margin-bottom: 12px !important;
}

/* ====================================================================
   6. UNIFIED SLIDER DESCRIPTIONS ACROSS ALL PAGES
   ==================================================================== */
.meca-slide-desc,
.contact-hero-desc,
.meca-hero-desc,
.about-hero-content p,
.members-hero-content p,
.ec-hero-content p,
.gb-hero-content p,
.mission-hero-content p,
.welfare-hero-content p,
.events-hero-content p,
.gallery-hero-content p,
.newsletter-hero-content p,
.meca-hero-content p,
[class*="-hero-content"] p,
[class*="-hero-banner"] p,
body.lightmode .meca-slide-desc,
body.lightmode .contact-hero-desc,
body.lightmode .meca-hero-desc,
body.lightmode .about-hero-content p,
body.lightmode .members-hero-content p,
body.lightmode .ec-hero-content p,
body.lightmode .gb-hero-content p,
body.lightmode .mission-hero-content p,
body.lightmode .welfare-hero-content p,
body.lightmode .events-hero-content p,
body.lightmode .gallery-hero-content p,
body.lightmode .newsletter-hero-content p,
body.lightmode .meca-hero-content p,
body.lightmode [class*="-hero-content"] p,
body.lightmode [class*="-hero-banner"] p {
    color: #F8FAFC !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95) !important;
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    .meca-video-slide-content,
    [class*="-hero-content"] {
        padding: 24px 20px !important;
        border-radius: 20px !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}

.meca-video-slide-content .btn-outline-light,
[class*="-hero-content"] .btn-outline-light,
[class*="-hero-banner"] .btn-outline-light {
    background: rgba(14, 16, 26, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.50) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

/* ====================================================================
   UNIVERSAL BUTTON HIGH CONTRAST & LEGIBILITY ENGINE (ALL PAGES & THEMES)
   Guarantees 100% visible, high-contrast button texts and icons everywhere.
   ==================================================================== */

/* 1. All Brand Accent Action Buttons (.btn-accent) - Always Pure Crisp White Text */
.btn-accent,
a.btn-accent,
button.btn-accent,
input[type="submit"].btn-accent,
body.lightmode .btn-accent,
body.lightmode a.btn-accent,
body.lightmode button.btn-accent,
body.lightmode input[type="submit"].btn-accent,
body.lightmode .keep-dark .btn-accent,
.meca-video-slide-content .btn-accent,
[class*="-hero-content"] .btn-accent,
[class*="-hero-banner"] .btn-accent,
body.lightmode .meca-video-slide-content .btn-accent,
body.lightmode [class*="-hero-content"] .btn-accent,
body.lightmode [class*="-hero-banner"] .btn-accent,
html[data-bs-theme="light"] .btn-accent,
html[data-bs-theme="light"] a.btn-accent,
html[data-bs-theme="light"] button.btn-accent {
    background: #C82AEF !important;
    background-color: #C82AEF !important;
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    border: none !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 18px rgba(200, 42, 239, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    text-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.btn-accent *,
a.btn-accent *,
button.btn-accent *,
.btn-accent i,
.btn-accent span,
.btn-accent a,
a.btn-accent i,
a.btn-accent span,
button.btn-accent i,
button.btn-accent span,
body.lightmode .btn-accent *,
body.lightmode a.btn-accent *,
body.lightmode button.btn-accent *,
body.lightmode .btn-accent i,
body.lightmode .btn-accent span,
body.lightmode .btn-accent a,
body.lightmode a.btn-accent i,
body.lightmode a.btn-accent span,
body.lightmode button.btn-accent i,
body.lightmode button.btn-accent span,
body.lightmode .keep-dark .btn-accent *,
body.lightmode .meca-video-slide-content .btn-accent *,
body.lightmode [class*="-hero-content"] .btn-accent *,
html[data-bs-theme="light"] .btn-accent *,
html[data-bs-theme="light"] a.btn-accent * {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.btn-accent:hover,
a.btn-accent:hover,
button.btn-accent:hover,
body.lightmode .btn-accent:hover,
body.lightmode a.btn-accent:hover,
body.lightmode button.btn-accent:hover,
body.lightmode .meca-video-slide-content .btn-accent:hover,
body.lightmode [class*="-hero-content"] .btn-accent:hover,
html[data-bs-theme="light"] .btn-accent:hover,
html[data-bs-theme="light"] a.btn-accent:hover {
    background: #A81CD0 !important;
    background-color: #A81CD0 !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 6px 24px rgba(200, 42, 239, 0.65) !important;
    transform: translateY(-2px);
}

.btn-accent:hover *,
body.lightmode .btn-accent:hover * {
    color: #FFFFFF !important;
}

/* 2. Outline Light Buttons inside Hero Banners & Transparent Dark Cards */
/* Dark Mode: Translucent glass pill with white text */
.meca-video-slide-content .btn-outline-light,
[class*="-hero-content"] .btn-outline-light,
[class*="-hero-banner"] .btn-outline-light {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.meca-video-slide-content .btn-outline-light *,
[class*="-hero-content"] .btn-outline-light *,
[class*="-hero-banner"] .btn-outline-light * {
    color: #FFFFFF !important;
}

.meca-video-slide-content .btn-outline-light:hover,
[class*="-hero-content"] .btn-outline-light:hover,
[class*="-hero-banner"] .btn-outline-light:hover {
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: #0F172A !important;
}

.meca-video-slide-content .btn-outline-light:hover *,
[class*="-hero-content"] .btn-outline-light:hover * {
    color: #0F172A !important;
}

/* Light Mode Hero Card: Solid crisp white pill with dark text ("About MECA" perfectly visible) */
body.lightmode .meca-video-slide-content .btn-outline-light,
body.lightmode [class*="-hero-content"] .btn-outline-light,
body.lightmode [class*="-hero-banner"] .btn-outline-light,
html[data-bs-theme="light"] .meca-video-slide-content .btn-outline-light,
html[data-bs-theme="light"] [class*="-hero-content"] .btn-outline-light,
html[data-bs-theme="light"] [class*="-hero-banner"] .btn-outline-light {
    background: #FFFFFF !important;
    border: 1.5px solid #FFFFFF !important;
    color: #0F172A !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.lightmode .meca-video-slide-content .btn-outline-light *,
body.lightmode [class*="-hero-content"] .btn-outline-light *,
body.lightmode [class*="-hero-banner"] .btn-outline-light *,
html[data-bs-theme="light"] .meca-video-slide-content .btn-outline-light *,
html[data-bs-theme="light"] [class*="-hero-content"] .btn-outline-light * {
    color: #0F172A !important;
}

body.lightmode .meca-video-slide-content .btn-outline-light:hover,
body.lightmode [class*="-hero-content"] .btn-outline-light:hover,
body.lightmode [class*="-hero-banner"] .btn-outline-light:hover {
    background: #C82AEF !important;
    border-color: #C82AEF !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 20px rgba(200, 42, 239, 0.4) !important;
}

body.lightmode .meca-video-slide-content .btn-outline-light:hover *,
body.lightmode [class*="-hero-content"] .btn-outline-light:hover * {
    color: #FFFFFF !important;
}

/* 3. Primary, Success, Danger, Dark, Secondary & Info Buttons across all pages */
.btn-primary,
a.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary,
body.lightmode .btn-primary,
body.lightmode a.btn-primary,
body.lightmode button.btn-primary,
body.lightmode input[type="submit"].btn-primary,
html[data-bs-theme="light"] .btn-primary,
html[data-bs-theme="light"] a.btn-primary,
html[data-bs-theme="light"] button.btn-primary {
    background: #7C3AED !important;
    background-color: #7C3AED !important;
    border-color: #7C3AED !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

.btn-primary *,
body.lightmode .btn-primary *,
html[data-bs-theme="light"] .btn-primary * {
    color: #FFFFFF !important;
}

.btn-dark,
a.btn-dark,
button.btn-dark,
body.lightmode .btn-dark,
body.lightmode a.btn-dark,
body.lightmode button.btn-dark,
html[data-bs-theme="light"] .btn-dark {
    background: #0F172A !important;
    background-color: #0F172A !important;
    border-color: #0F172A !important;
    color: #FFFFFF !important;
}

.btn-dark *,
body.lightmode .btn-dark *,
html[data-bs-theme="light"] .btn-dark * {
    color: #FFFFFF !important;
}

.btn-success,
a.btn-success,
button.btn-success,
body.lightmode .btn-success,
body.lightmode a.btn-success,
body.lightmode button.btn-success,
html[data-bs-theme="light"] .btn-success {
    background: #16A34A !important;
    background-color: #16A34A !important;
    border-color: #16A34A !important;
    color: #FFFFFF !important;
}

.btn-success *,
body.lightmode .btn-success *,
html[data-bs-theme="light"] .btn-success * {
    color: #FFFFFF !important;
}

.btn-danger,
a.btn-danger,
button.btn-danger,
body.lightmode .btn-danger,
body.lightmode a.btn-danger,
body.lightmode button.btn-danger,
html[data-bs-theme="light"] .btn-danger {
    background: #DC2626 !important;
    background-color: #DC2626 !important;
    border-color: #DC2626 !important;
    color: #FFFFFF !important;
}

.btn-danger *,
body.lightmode .btn-danger *,
html[data-bs-theme="light"] .btn-danger * {
    color: #FFFFFF !important;
}

.btn-secondary,
a.btn-secondary,
button.btn-secondary,
body.lightmode .btn-secondary,
body.lightmode a.btn-secondary,
body.lightmode button.btn-secondary,
html[data-bs-theme="light"] .btn-secondary {
    background: #64748B !important;
    background-color: #64748B !important;
    border-color: #64748B !important;
    color: #FFFFFF !important;
}

.btn-secondary *,
body.lightmode .btn-secondary *,
html[data-bs-theme="light"] .btn-secondary * {
    color: #FFFFFF !important;
}

.btn-info,
a.btn-info,
button.btn-info,
body.lightmode .btn-info,
body.lightmode a.btn-info,
body.lightmode button.btn-info,
html[data-bs-theme="light"] .btn-info {
    background: #0284C7 !important;
    background-color: #0284C7 !important;
    border-color: #0284C7 !important;
    color: #FFFFFF !important;
}

.btn-info *,
body.lightmode .btn-info *,
html[data-bs-theme="light"] .btn-info * {
    color: #FFFFFF !important;
}

.btn.theme-bg,
button.theme-bg,
body.lightmode .btn.theme-bg,
body.lightmode button.theme-bg {
    background: #C82AEF !important;
    background-color: #C82AEF !important;
    color: #FFFFFF !important;
    border: none !important;
}

.btn.theme-bg *,
button.theme-bg *,
body.lightmode .btn.theme-bg *,
body.lightmode button.theme-bg * {
    color: #FFFFFF !important;
}

/* 4. Outline Light Buttons in Content Sections (e.g. "View All Events") */
body.lightmode .section .btn-outline-light,
body.lightmode main > .section .btn-outline-light,
body.lightmode #events .btn-outline-light,
html[data-bs-theme="light"] .section .btn-outline-light,
html[data-bs-theme="light"] #events .btn-outline-light {
    background: #FFFFFF !important;
    border: 1.5px solid #CBD5E1 !important;
    color: #0F172A !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
}

body.lightmode .section .btn-outline-light *,
body.lightmode #events .btn-outline-light *,
html[data-bs-theme="light"] .section .btn-outline-light * {
    color: #0F172A !important;
}

body.lightmode .section .btn-outline-light:hover,
body.lightmode #events .btn-outline-light:hover {
    background: #C82AEF !important;
    border-color: #C82AEF !important;
    color: #FFFFFF !important;
}

body.lightmode .section .btn-outline-light:hover *,
body.lightmode #events .btn-outline-light:hover * {
    color: #FFFFFF !important;
}

/* ==========================================================
   MECA VIP MEMBERSHIP PASS CARDS (Life: Gold, General: Red, Student: Cyan)
   ========================================================== */
    /* ==========================================================
       MECA VIP MEMBERSHIP PASS CARDS (Life: Gold, General: Red, Student: Cyan)
       ========================================================== */
    .meca-packages-title {
        transition: color 0.3s ease;
    }
    body.lightmode .meca-packages-title {
        color: #0F172A !important;
    }

    .meca-pass-card {
        border-radius: 24px;
        padding: 22px 22px 20px 22px !important;
        position: relative;
        overflow: hidden;
        transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
        border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
        z-index: 1;
    }

    .meca-pass-card:hover {
        transform: translateY(-8px) scale(1.015);
    }

    /* Pass Card Guilloché & Security Watermark Texture */
    .meca-pass-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: 
            radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.15) 0%, transparent 60%),
            repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.04) 0px, rgba(255, 255, 255, 0.04) 2px, transparent 2px, transparent 10px);
        pointer-events: none;
        z-index: 0;
    }

    /* Dynamic Sheen Sweep on Hover */
    .meca-pass-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: -130%;
        width: 80%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
        transform: skewX(-25deg);
        transition: left 0.75s ease;
        pointer-events: none;
        z-index: 1;
    }

    .meca-pass-card:hover::after {
        left: 150%;
    }

    .meca-pass-inner {
        position: relative;
        z-index: 2;
    }

    /* Lanyard Punch-Hole Slot at Top Center */
    .meca-pass-slot {
        width: 48px;
        height: 6px;
        background: rgba(0, 0, 0, 0.35);
        border-radius: 10px;
        margin: 0 auto 14px auto;
        box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(255, 255, 255, 0.3);
        position: relative;
        z-index: 2;
    }

    /* Pass Header Bar: Monogram & Smart EMV Chip */
    .meca-pass-header-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
        position: relative;
        z-index: 2;
    }

    .meca-pass-org {
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        border-radius: 20px;
        background: rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(4px);
    }

    .meca-pass-chips {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .meca-pass-rfid {
        font-size: 13px;
        transform: rotate(90deg);
        opacity: 0.85;
    }

    .meca-smart-chip {
        width: 30px;
        height: 22px;
        background: linear-gradient(135deg, #FFE082 0%, #FFC107 50%, #FFA000 100%);
        border-radius: 5px;
        border: 1px solid rgba(0, 0, 0, 0.35);
        box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.25);
        position: relative;
        overflow: hidden;
    }

    .meca-smart-chip .chip-grid {
        position: absolute;
        inset: 3px;
        border: 1px solid rgba(139, 101, 8, 0.7);
        border-radius: 2px;
    }
    .meca-smart-chip .chip-grid::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 1px;
        background: rgba(139, 101, 8, 0.7);
    }
    .meca-smart-chip .chip-grid::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 1px;
        background: rgba(139, 101, 8, 0.7);
    }

    .meca-pass-icon-wrap {
        width: 52px;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        flex-shrink: 0;
    }

    .meca-pass-serial-tag {
        font-size: 9.5px;
        font-weight: 800;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        margin-bottom: 4px;
        opacity: 0.9;
        font-family: 'Courier New', Courier, monospace;
    }

    /* Barcode Authentication Strip */
    .meca-pass-barcode-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 7px 12px;
        border-radius: 10px;
        margin-top: 14px;
        margin-bottom: 14px;
        border: 1px dashed rgba(255, 255, 255, 0.3);
        position: relative;
        z-index: 2;
    }

    .meca-pass-barcode {
        display: flex;
        align-items: center;
        gap: 2px;
        height: 18px;
        opacity: 0.85;
    }

    .meca-pass-barcode span {
        display: inline-block;
        height: 100%;
        background: currentColor;
        width: 2px;
        border-radius: 1px;
    }
    .meca-pass-barcode span:nth-child(2n) { width: 1px; }
    .meca-pass-barcode span:nth-child(3n) { width: 3px; }
    .meca-pass-barcode span:nth-child(5n) { width: 4px; }

    .meca-pass-security-label {
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-family: 'Courier New', Courier, monospace;
        opacity: 0.9;
    }

    .meca-pass-btn {
        position: relative;
        z-index: 2;
        transition: all 0.25s ease;
        text-decoration: none !important;
    }

    /* ---------------------------------------------------------
       1. LIFE MEMBER - FULL GOLD PASS CARD
       --------------------------------------------------------- */
    .meca-pass-gold {
        background: linear-gradient(145deg, #FFE28A 0%, #E6BA47 25%, #C29329 55%, #F7DC85 80%, #946E13 100%) !important;
        border-color: rgba(255, 248, 220, 0.75) !important;
        box-shadow: 0 16px 40px rgba(180, 130, 20, 0.45), 0 0 25px rgba(255, 226, 138, 0.3) !important;
        color: #1A0F00 !important;
    }
    .meca-pass-gold:hover {
        box-shadow: 0 22px 50px rgba(180, 130, 20, 0.65), 0 0 35px rgba(255, 226, 138, 0.45) !important;
        border-color: #FFFFFF !important;
    }
    .meca-pass-gold .meca-pass-org {
        color: #1A0F00;
        background: rgba(255, 255, 255, 0.35);
        border: 1px solid rgba(26, 15, 0, 0.15);
    }
    .meca-pass-gold .meca-pass-icon-wrap {
        background: rgba(26, 15, 0, 0.12);
        color: #1A0F00;
        border: 1px solid rgba(26, 15, 0, 0.18);
    }
    .meca-pass-gold h4 {
        color: #1A0F00 !important;
        font-weight: 800;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
    }
    .meca-pass-gold .meca-pass-sub {
        color: #382200 !important;
        font-weight: 600;
    }
    .meca-pass-gold .display-5 {
        color: #120A00 !important;
        font-weight: 900;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
    }
    .meca-pass-gold .meca-pass-currency {
        color: #382200 !important;
        font-weight: 700;
    }
    .meca-pass-gold ul li {
        color: #211300 !important;
        font-weight: 600;
    }
    .meca-pass-gold ul li i {
        color: #0E4717 !important;
    }
    .meca-pass-gold .meca-pass-barcode-wrap {
        color: #1A0F00;
        background: rgba(255, 255, 255, 0.3);
        border-color: rgba(26, 15, 0, 0.22);
    }
    .meca-pass-gold .meca-pass-btn {
        background: #140C00 !important;
        color: #FFE28A !important;
        border: 1.5px solid rgba(255, 226, 138, 0.5) !important;
        box-shadow: 0 6px 20px rgba(20, 12, 0, 0.4);
        font-weight: 700;
    }
    .meca-pass-gold .meca-pass-btn:hover {
        background: #000000 !important;
        color: #FFFFFF !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.65);
        transform: translateY(-2px);
    }

    /* ---------------------------------------------------------
       2. GENERAL MEMBER - FULL RED PASS CARD
       --------------------------------------------------------- */
    .meca-pass-red {
        background: radial-gradient(circle at 85% 15%, rgba(255, 130, 130, 0.35) 0%, transparent 60%),
                    linear-gradient(145deg, #E53935 0%, #C62828 35%, #8E0000 70%, #520000 100%) !important;
        border-color: rgba(255, 179, 179, 0.55) !important;
        box-shadow: 0 16px 40px rgba(183, 28, 28, 0.5), 0 0 25px rgba(229, 57, 53, 0.3) !important;
        color: #FFFFFF !important;
    }
    .meca-pass-red:hover {
        box-shadow: 0 22px 50px rgba(183, 28, 28, 0.7), 0 0 35px rgba(255, 82, 82, 0.45) !important;
        border-color: #FFA4A4 !important;
    }
    .meca-pass-red .meca-pass-org {
        color: #FFFFFF;
        background: rgba(0, 0, 0, 0.25);
        border: 1px solid rgba(255, 255, 255, 0.25);
    }
    .meca-pass-red .meca-pass-icon-wrap {
        background: rgba(255, 255, 255, 0.16);
        color: #FFFFFF;
        border: 1px solid rgba(255, 255, 255, 0.28);
    }
    .meca-pass-red h4 {
        color: #FFFFFF !important;
        font-weight: 800;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    }
    .meca-pass-red .meca-pass-sub {
        color: rgba(255, 255, 255, 0.88) !important;
        font-weight: 500;
    }
    .meca-pass-red .display-5 {
        color: #FFFFFF !important;
        font-weight: 900;
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    }
    .meca-pass-red .meca-pass-currency {
        color: rgba(255, 255, 255, 0.85) !important;
        font-weight: 700;
    }
    .meca-pass-red ul li {
        color: rgba(255, 255, 255, 0.94) !important;
        font-weight: 500;
    }
    .meca-pass-red ul li i {
        color: #A5D6A7 !important;
    }
    .meca-pass-red .meca-pass-barcode-wrap {
        color: #FFFFFF;
        background: rgba(0, 0, 0, 0.22);
        border-color: rgba(255, 255, 255, 0.22);
    }
    .meca-pass-red .meca-pass-btn {
        background: #FFFFFF !important;
        color: #B71C1C !important;
        border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
        font-weight: 800;
    }
    .meca-pass-red .meca-pass-btn:hover {
        background: #FFEBEE !important;
        color: #880E4F !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
        transform: translateY(-2px);
    }

    /* ---------------------------------------------------------
       3. STUDENT MEMBER - FULL CYAN PASS CARD
       --------------------------------------------------------- */
    .meca-pass-cyan {
        background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.45) 0%, transparent 60%),
                    linear-gradient(145deg, #00E5FF 0%, #00B4D8 30%, #0077B6 65%, #023E8A 100%) !important;
        border-color: rgba(178, 235, 242, 0.65) !important;
        box-shadow: 0 16px 40px rgba(0, 151, 167, 0.45), 0 0 25px rgba(0, 229, 255, 0.3) !important;
        color: #FFFFFF !important;
    }
    .meca-pass-cyan:hover {
        box-shadow: 0 22px 50px rgba(0, 151, 167, 0.65), 0 0 35px rgba(0, 229, 255, 0.45) !important;
        border-color: #E0F7FA !important;
    }
    .meca-pass-cyan .meca-pass-org {
        color: #FFFFFF;
        background: rgba(0, 0, 0, 0.22);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
    .meca-pass-cyan .meca-pass-icon-wrap {
        background: rgba(255, 255, 255, 0.2);
        color: #FFFFFF;
        border: 1px solid rgba(255, 255, 255, 0.35);
    }
    .meca-pass-cyan h4 {
        color: #FFFFFF !important;
        font-weight: 800;
        text-shadow: 0 2px 4px rgba(0, 30, 60, 0.45);
    }
    .meca-pass-cyan .meca-pass-sub {
        color: rgba(255, 255, 255, 0.9) !important;
        font-weight: 500;
    }
    .meca-pass-cyan .display-5 {
        color: #FFFFFF !important;
        font-weight: 900;
        text-shadow: 0 2px 6px rgba(0, 30, 60, 0.45);
    }
    .meca-pass-cyan .meca-pass-currency {
        color: rgba(255, 255, 255, 0.85) !important;
        font-weight: 700;
    }
    .meca-pass-cyan ul li {
        color: rgba(255, 255, 255, 0.95) !important;
        font-weight: 500;
    }
    .meca-pass-cyan ul li i {
        color: #B9F6CA !important;
    }
    .meca-pass-cyan .meca-pass-barcode-wrap {
        color: #FFFFFF;
        background: rgba(0, 0, 0, 0.2);
        border-color: rgba(255, 255, 255, 0.25);
    }
    .meca-pass-cyan .meca-pass-btn {
        background: #022B42 !important;
        color: #00E5FF !important;
        border: 1.5px solid rgba(0, 229, 255, 0.6) !important;
        box-shadow: 0 6px 20px rgba(2, 43, 66, 0.45);
        font-weight: 800;
    }
    .meca-pass-cyan .meca-pass-btn:hover {
        background: #001827 !important;
        color: #FFFFFF !important;
        box-shadow: 0 8px 25px rgba(0, 229, 255, 0.55);
        transform: translateY(-2px);
    }

    /* Keep Full Card Colors in Light Mode */
    body.lightmode .meca-pass-card.meca-pass-gold {
        background: linear-gradient(145deg, #FFE28A 0%, #E6BA47 25%, #C29329 55%, #F7DC85 80%, #946E13 100%) !important;
        color: #1A0F00 !important;
    }
    body.lightmode .meca-pass-card.meca-pass-gold h4,
    body.lightmode .meca-pass-card.meca-pass-gold .display-5 {
        color: #120A00 !important;
    }
    body.lightmode .meca-pass-card.meca-pass-gold ul li {
        color: #211300 !important;
    }

    body.lightmode .meca-pass-card.meca-pass-red {
        background: radial-gradient(circle at 85% 15%, rgba(255, 130, 130, 0.35) 0%, transparent 60%),
                    linear-gradient(145deg, #E53935 0%, #C62828 35%, #8E0000 70%, #520000 100%) !important;
        color: #FFFFFF !important;
    }
    body.lightmode .meca-pass-card.meca-pass-red h4,
    body.lightmode .meca-pass-card.meca-pass-red .display-5 {
        color: #FFFFFF !important;
    }
    body.lightmode .meca-pass-card.meca-pass-red ul li {
        color: rgba(255, 255, 255, 0.94) !important;
    }

    body.lightmode .meca-pass-card.meca-pass-cyan {
        background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.45) 0%, transparent 60%),
                    linear-gradient(145deg, #00E5FF 0%, #00B4D8 30%, #0077B6 65%, #023E8A 100%) !important;
        color: #FFFFFF !important;
    }
    body.lightmode .meca-pass-card.meca-pass-cyan h4,
    body.lightmode .meca-pass-card.meca-pass-cyan .display-5 {
        color: #FFFFFF !important;
    }
    body.lightmode .meca-pass-card.meca-pass-cyan ul li {
        color: rgba(255, 255, 255, 0.95) !important;
    }
/* ====================================================================
   FLOATING GO-TO-TOP BUTTON (meca-go-to-top)
   ==================================================================== */
.meca-go-to-top {
    position: fixed !important;
    bottom: 32px !important;
    right: 32px !important;
    z-index: 1040 !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: rgba(14, 16, 26, 0.90) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1.5px solid rgba(200, 42, 239, 0.5) !important;
    color: #FFFFFF !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 15px rgba(200, 42, 239, 0.3) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(20px) scale(0.9) !important;
    transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.25s ease, box-shadow 0.25s ease !important;
    outline: none !important;
}

.meca-go-to-top i {
    font-size: 18px !important;
    color: #C82AEF !important;
    transition: transform 0.25s ease, color 0.25s ease !important;
}

.meca-go-to-top.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
}

.meca-go-to-top:hover {
    background: #C82AEF !important;
    border-color: #E2B048 !important;
    transform: translateY(-4px) scale(1.08) !important;
    box-shadow: 0 14px 35px rgba(200, 42, 239, 0.6), 0 0 20px rgba(226, 176, 72, 0.4) !important;
}

.meca-go-to-top:hover i {
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
}

/* Light Mode Overrides */
body.lightmode .meca-go-to-top {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1.5px solid rgba(200, 42, 239, 0.35) !important;
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.12), 0 0 15px rgba(200, 42, 239, 0.15) !important;
}

body.lightmode .meca-go-to-top i {
    color: #C82AEF !important;
}

body.lightmode .meca-go-to-top:hover {
    background: #C82AEF !important;
    border-color: #C82AEF !important;
    box-shadow: 0 14px 35px rgba(200, 42, 239, 0.4) !important;
}

body.lightmode .meca-go-to-top:hover i {
    color: #FFFFFF !important;
}

@media (max-width: 576px) {
    .meca-go-to-top {
        bottom: 20px !important;
        right: 20px !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
    }
    .meca-go-to-top i {
        font-size: 16px !important;
    }
}
/* ==========================================================
   TICKET PURCHASE PAGE - CHECKOUT/TICKETPURCHASE
   Full premium styling for all components
   ========================================================== */

/* ---- Hero Banner ---- */
.meca-purchase-hero-banner {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 340px !important;
    max-height: none !important;
    background: linear-gradient(135deg, #0B0F1A 0%, #1a0a2e 40%, #0e0020 100%) !important;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(200, 42, 239, 0.22) 0%, transparent 55%),
        radial-gradient(circle at 80% 20%, rgba(124, 58, 237, 0.18) 0%, transparent 50%),
        linear-gradient(135deg, #0B0F1A 0%, #1a0a2e 40%, #0e0020 100%) !important;
    border-radius: 0 0 28px 28px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    margin-top: 20px !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.meca-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 70% 80%, rgba(200, 42, 239, 0.12) 0%, transparent 60%),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 24px,
            rgba(255, 255, 255, 0.015) 24px,
            rgba(255, 255, 255, 0.015) 25px
        );
    pointer-events: none;
}

.meca-hero-content {
    position: relative;
    z-index: 2;
    padding: 52px 52px;
    max-width: 860px;
}

.meca-hero-content .meca-badge-sub {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(200, 42, 239, 0.18);
    border: 1px solid rgba(200, 42, 239, 0.4);
    color: #e879f9;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 50rem;
    margin-bottom: 20px;
}

.meca-breadcrumb-location {
    margin-top: 20px;
    font-size: 13.5px;
}
.meca-breadcrumb-location a {
    color: rgba(255, 255, 255, 0.65) !important;
    text-decoration: none;
    transition: color 0.2s;
}
.meca-breadcrumb-location a:hover {
    color: #e879f9 !important;
}
.meca-breadcrumb-separator {
    color: rgba(255, 255, 255, 0.3);
    font-size: 11px;
    margin: 0 2px;
}
.breadcrumb-active {
    color: #e879f9;
    font-weight: 600;
}

/* Light mode hero banner */
body.lightmode .meca-purchase-hero-banner {
    background: linear-gradient(135deg, #1a0a2e 0%, #2d1060 50%, #0B0F1A 100%) !important;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(200, 42, 239, 0.3) 0%, transparent 55%),
        radial-gradient(circle at 80% 20%, rgba(124, 58, 237, 0.2) 0%, transparent 50%),
        linear-gradient(135deg, #1a0a2e 0%, #2d1060 50%, #0B0F1A 100%) !important;
}

body.lightmode .meca-purchase-hero-banner h1,
body.lightmode .meca-purchase-hero-banner .meca-hero-content h1 {
    color: #FFFFFF !important;
}

body.lightmode .meca-purchase-hero-banner p,
body.lightmode .meca-purchase-hero-banner .text-white-50 {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ---- Main Purchase Card ---- */
.meca-purchase-card {
    background: rgba(30, 15, 50, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(200, 42, 239, 0.2);
    border-radius: 24px;
    padding: 28px 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

body.lightmode .meca-purchase-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08) !important;
}

/* ---- Field Label (shared with other forms) ---- */
.meca-field-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 8px;
}

body.lightmode .meca-field-label {
    color: #334155 !important;
}

/* ---- Custom Select ---- */
.meca-custom-select {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: border-color 0.2s, box-shadow 0.2s;
    backdrop-filter: blur(8px);
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px !important;
}

.meca-custom-select:focus {
    border-color: rgba(200, 42, 239, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(200, 42, 239, 0.18) !important;
    outline: none !important;
    background: rgba(255, 255, 255, 0.10) !important;
}

.meca-custom-select option {
    background: #1a0a2e !important;
    color: #FFFFFF !important;
}

body.lightmode .meca-custom-select {
    background: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    color: #0F172A !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230F172A' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px !important;
}

body.lightmode .meca-custom-select:focus {
    border-color: rgba(200, 42, 239, 0.45) !important;
    box-shadow: 0 0 0 3px rgba(200, 42, 239, 0.12) !important;
    background: #FFFFFF !important;
}

body.lightmode .meca-custom-select option {
    background: #FFFFFF !important;
    color: #0F172A !important;
}

/* ---- Table Wrapper — compact, all columns always visible ---- */
.meca-table-wrapper {
    border-radius: 14px;
    overflow-x: auto !important;
    overflow-y: visible !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    width: 100% !important;
    /* Thin scrollbar as fallback on small screens */
    scrollbar-width: thin;
    scrollbar-color: rgba(200, 42, 239, 0.45) transparent;
}
.meca-table-wrapper::-webkit-scrollbar { height: 4px; }
.meca-table-wrapper::-webkit-scrollbar-thumb { background: rgba(200, 42, 239, 0.45); border-radius: 4px; }

body.lightmode .meca-table-wrapper {
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06) !important;
}



/* ---- Pricing Table — readable, all columns fit without scroll on desktop ---- */
/* Math: ~1360px available → card 16px padding each side → ~1328px table area         */
/* 13 cols → ~102px avg | stepper: 26+38+26=90px | font 13px body, 11.5px header ✓   */
.meca-pricing-table {
    width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse;
    font-size: 13px !important;
    color: #FFFFFF;
    margin-bottom: 0 !important;
}

.meca-pricing-table thead tr {
    background: linear-gradient(90deg, rgba(200, 42, 239, 0.38), rgba(124, 58, 237, 0.32));
    border-bottom: 2px solid rgba(200, 42, 239, 0.5);
}

.meca-pricing-table thead th {
    padding: 12px 6px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    color: #FFFFFF !important;
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center !important;
    vertical-align: middle !important;
    border: none !important;
    line-height: 1.3 !important;
}

/* Member Category column — wider, left-aligned */
.meca-pricing-table thead th:first-child {
    text-align: left !important;
    padding-left: 14px !important;
    min-width: 120px !important;
    width: 130px !important;
}

/* Total columns — slightly wider for the numbers */
.meca-pricing-table thead th:nth-last-child(-n+2) {
    min-width: 70px !important;
    white-space: nowrap !important;
}

.meca-pricing-table thead th span {
    display: block;
    font-size: 11px !important;
    font-weight: 700;
    color: #e879f9 !important;
    opacity: 1 !important;
    margin-top: 3px;
    white-space: nowrap !important;
}

.meca-pricing-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    transition: background 0.2s;
}

.meca-pricing-table tbody tr:hover {
    background: rgba(200, 42, 239, 0.09);
}

.meca-pricing-table tbody td {
    padding: 10px 6px !important;
    text-align: center !important;
    vertical-align: middle !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border: none !important;
    white-space: nowrap !important;
    font-size: 13px !important;
}

/* Member Category cell — left-aligned */
.meca-pricing-table tbody td:first-child {
    text-align: left !important;
    font-weight: 600;
    font-size: 13px !important;
    color: #FFFFFF !important;
    padding-left: 14px !important;
    white-space: nowrap !important;
}

/* Total columns bold accent */
.meca-pricing-table td.total-quantity,
.meca-pricing-table td.total-price {
    font-weight: 700 !important;
    font-size: 13.5px !important;
    color: #e879f9 !important;
}

/* Light mode table */
body.lightmode .meca-pricing-table {
    color: #0F172A !important;
}

body.lightmode .meca-pricing-table thead tr {
    background: linear-gradient(90deg, rgba(200, 42, 239, 0.12), rgba(124, 58, 237, 0.10)) !important;
    border-bottom: 2px solid rgba(200, 42, 239, 0.3) !important;
}

body.lightmode .meca-pricing-table thead th {
    color: #0F172A !important;
}

body.lightmode .meca-pricing-table thead th span {
    color: #9333EA !important;
}

body.lightmode .meca-pricing-table tbody tr {
    border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
}

body.lightmode .meca-pricing-table tbody tr:hover {
    background: rgba(200, 42, 239, 0.04) !important;
}

body.lightmode .meca-pricing-table tbody td {
    color: #334155 !important;
}

body.lightmode .meca-pricing-table tbody td:first-child {
    color: #0F172A !important;
}

body.lightmode .meca-pricing-table td.total-quantity,
body.lightmode .meca-pricing-table td.total-price {
    color: #7C3AED !important;
}

/* ---- Quantity Stepper — readable 90px wide ---- */
.meca-qty-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 7px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    width: 90px;
    max-width: 90px;
    margin: 0 auto;
}

.meca-qty-btn {
    background: rgba(255, 255, 255, 0.08);
    border: none !important;
    color: #FFFFFF !important;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    width: 26px !important;
    height: 30px !important;
    min-width: 26px !important;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.meca-qty-btn:hover:not(:disabled) {
    background: rgba(200, 42, 239, 0.4) !important;
    color: #FFFFFF !important;
}

.meca-qty-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.meca-qty-input {
    width: 38px !important;
    min-width: 38px !important;
    height: 30px !important;
    border: none !important;
    background: transparent !important;
    color: #FFFFFF !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 0 !important;
    -moz-appearance: textfield;
    flex: 1;
}

.meca-qty-input::-webkit-outer-spin-button,
.meca-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.meca-qty-input:disabled {
    opacity: 0.28;
    cursor: not-allowed;
}

body.lightmode .meca-qty-stepper {
    border: 1px solid #CBD5E1 !important;
    background: #F8FAFC !important;
}

body.lightmode .meca-qty-btn {
    background: #EFF2F7 !important;
    color: #0F172A !important;
}

body.lightmode .meca-qty-btn:hover:not(:disabled) {
    background: rgba(200, 42, 239, 0.12) !important;
    color: #C82AEF !important;
}

body.lightmode .meca-qty-input {
    color: #0F172A !important;
    background: transparent !important;
    font-size: 13px !important;
}

/* ---- Terms Box ---- */
.meca-terms-box {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px 24px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13.5px;
    line-height: 1.7;
}

.meca-terms-box h6 {
    color: #FFFFFF !important;
    font-weight: 700;
    margin-bottom: 14px;
    font-size: 14.5px;
}

.meca-terms-box ol li {
    color: rgba(255, 255, 255, 0.75) !important;
    margin-bottom: 6px;
}

.meca-terms-box .form-check-label {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 13.5px;
}

.meca-terms-box .form-check-input {
    border-color: rgba(200, 42, 239, 0.5);
    background-color: transparent;
    width: 18px;
    height: 18px;
}

.meca-terms-box .form-check-input:checked {
    background-color: #C82AEF;
    border-color: #C82AEF;
}

body.lightmode .meca-terms-box {
    background: #F8FAFC !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #334155 !important;
}

body.lightmode .meca-terms-box h6 {
    color: #0F172A !important;
}

body.lightmode .meca-terms-box ol li {
    color: #475569 !important;
}

body.lightmode .meca-terms-box .form-check-label {
    color: #334155 !important;
}

/* ---- Order Summary Box ---- */
.meca-summary-box {
    background: rgba(200, 42, 239, 0.08);
    border: 1.5px solid rgba(200, 42, 239, 0.3);
    border-radius: 16px;
    padding: 24px 24px;
}

.meca-summary-box h6 {
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: 14.5px;
}

.meca-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 13.5px;
}

.meca-summary-row span:first-child {
    color: rgba(255, 255, 255, 0.7) !important;
}

.meca-summary-row strong {
    color: #FFFFFF !important;
    font-weight: 600;
}

.meca-summary-total {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1.5px solid rgba(200, 42, 239, 0.4);
    font-size: 17px;
    font-weight: 700;
}

.meca-summary-total span:first-child {
    color: rgba(255, 255, 255, 0.85) !important;
}

.meca-summary-total span:last-child {
    color: #e879f9 !important;
    font-weight: 800;
}

body.lightmode .meca-summary-box {
    background: rgba(200, 42, 239, 0.05) !important;
    border: 1.5px solid rgba(200, 42, 239, 0.2) !important;
}

body.lightmode .meca-summary-box h6 {
    color: #0F172A !important;
}

body.lightmode .meca-summary-row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
}

body.lightmode .meca-summary-row span:first-child {
    color: #64748B !important;
}

body.lightmode .meca-summary-row strong {
    color: #0F172A !important;
}

body.lightmode .meca-summary-total {
    border-top: 1.5px solid rgba(200, 42, 239, 0.25) !important;
}

body.lightmode .meca-summary-total span:first-child {
    color: #334155 !important;
}

body.lightmode .meca-summary-total span:last-child {
    color: #9333EA !important;
}

/* ---- Checkout Button State ---- */
#checkoutButton:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
}

#checkoutButton:not(:disabled) {
    animation: pulseBtn 2.2s ease-in-out infinite;
}

@keyframes pulseBtn {
    0%, 100% { box-shadow: 0 4px 18px rgba(200, 42, 239, 0.45), 0 2px 8px rgba(0,0,0,0.25); }
    50%       { box-shadow: 0 8px 32px rgba(200, 42, 239, 0.75), 0 4px 16px rgba(0,0,0,0.3); }
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .meca-hero-content {
        padding: 36px 24px !important;
    }

    .meca-purchase-card {
        padding: 22px 16px !important;
        border-radius: 16px !important;
    }

    .meca-purchase-hero-banner {
        min-height: 240px;
    }

    .meca-summary-box,
    .meca-terms-box {
        padding: 18px 16px !important;
    }
}