/* --- Google Fonts (Premium Geometric Corporate Typo) --- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* ==========================================================================
   1. GLOBAL VARIABLES & THEME TOKENS
   ========================================================================== */
:root {
    --bg-primary: #ffffff;      
    --bg-surface: #f4f5f8;      
    --text-main: #1a202c;       
    --text-muted: #55555a;      
    --text-heading: #112f5a;    
    --accent-color: #250dba;    
    --accent-yellow: #f5e20a;   
    --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --font-main: 'Inter', system-ui, -apple-system, sans-serif !important;
}

[data-theme="dark"] {
    --bg-primary: #0f172a;      
    --bg-surface: #1e293b;      
    --text-main: #f1f5f9;       
    --text-muted: #94a3b8;      
    --text-heading: #ffffff;    
}

/* ==========================================================================
   2. GLOBAL CORE RESET & COMPONENT FONTS
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-main);
}

html {
    scroll-behavior: smooth;
}

body, button, input, select, textarea, option, a, span, p, h1, h2, h3, h4, h5, h6, li {
    font-family: var(--font-main);
}

body {
    background-color: var(--bg-primary) !important;
    color: var(--text-main) !important;
    line-height: 1.7;
    overflow-x: hidden;
    padding-top: 80px; 
    transition: background-color var(--transition-smooth), color var(--transition-smooth);
}

.container {
    width: 88%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Base adaptive structural tags */
section {
    background-color: var(--bg-primary) !important;
    color: var(--text-main) !important;
    transition: background-color var(--transition-smooth), color var(--transition-smooth);
}

.card, .contact-box, .partner-card, .lightbox-box, .modal-box {
    background-color: var(--bg-surface) !important;
    color: var(--text-main) !important;
    transition: background-color var(--transition-smooth), color var(--transition-smooth), transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color 0.3s ease !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-heading) !important;
    transition: color 0.4s ease;
}

p, span, li {
    color: var(--text-muted) !important;
    transition: color 0.4s ease;
}

/* ==========================================================================
   3. BULLETPROOF ANIMATION ENGINE (DRAG COPIER FIX)
   ========================================================================== */
.hero-brand, .hero-cta, .tagline, .hero h1, .hero-slogan, .hero-actions,
.sub-hero .tagline, .sub-hero h1, .sub-hero-line, .section-title, 
.about-card, .partner-card, .reveal-on-scroll, .gallery-item {
    opacity: 0;
    transform: translateY(40px); /* Simple vector shift eliminates drag freeze loop */
    will-change: transform, opacity;
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 1s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Staggering trigger delays */
.tagline { transition-delay: 0.08s; }
.hero h1 { transition-delay: 0.18s; }
.hero-slogan { transition-delay: 0.28s; }
.hero-actions { transition-delay: 0.38s; }

/* Trigger active classes */
.page-loaded .hero-brand, .page-loaded .hero-cta, .page-loaded .tagline, .page-loaded .hero h1, .page-loaded .hero-slogan, .page-loaded .hero-actions,
.page-loaded .sub-hero .tagline, .page-loaded .sub-hero h1, .page-loaded .sub-hero-line, .page-loaded .section-title,
.about-card.active, .partner-card.active, .reveal-on-scroll.active, .gallery-item.active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ==========================================================================
   4. EDGE-TO-EDGE MORPHING NAVIGATION BAR
   ========================================================================== */
.navbar {
    position: fixed !important;
    z-index: 999999 !important;
    padding: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    background-color: rgba(255, 255, 255, 0.95) !important; 
    border: none !important;
    box-shadow: none !important;
    transform: translateX(0) !important;
    transition: top 0.6s cubic-bezier(0.25, 1, 0.5, 1),
                left 0.6s cubic-bezier(0.25, 1, 0.5, 1),
                width 0.6s cubic-bezier(0.25, 1, 0.5, 1),
                max-width 0.6s cubic-bezier(0.25, 1, 0.5, 1),
                border-radius 0.6s cubic-bezier(0.25, 1, 0.5, 1),
                background-color 0.6s ease,
                box-shadow 0.6s ease,
                transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

[data-theme="dark"] .navbar {
    background-color: rgba(15, 23, 42, 0.95) !important;
}

.navbar.scrolled {
    top: 20px !important;                     
    left: 50% !important;
    width: 96% !important; 
    max-width: 1660px !important;             
    transform: translateX(-50%) !important;   
    border-radius: 50px !important; 
    background-color: rgba(255, 255, 255, 0.92) !important; 
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: none !important; 
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="dark"] .navbar.scrolled {
    background-color: rgba(15, 23, 42, 0.92) !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.3) !important;
}       

.nav-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important; 
    width: 100% !important;
    max-width: 1200px !important; 
    margin: 0 auto !important;
    padding: 20px 24px !important; 
}

.nav-brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
}

.nav-logo {
    height: 48px !important; 
    width: auto !important;
    object-fit: contain !important;
    transition: transform 0.3s ease !important;
}

.nav-logo-text { 
    font-size: 1.45rem !important; 
    font-weight: 800 !important; 
    color: var(--text-heading) !important; 
    letter-spacing: 0.8px !important; 
}

.nav-menu-wrapper {
    display: flex !important;
    align-items: center !important;
}

.nav-menu {
    display: flex !important;
    align-items: center !important;
    gap: 35px !important;
}

.nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 32px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.nav-item {
    position: relative !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: var(--text-main) !important;
    text-decoration: none !important;
    padding: 6px 0 !important; 
    transition: color 0.3s ease !important;
}

.nav-item::after {
    content: '' !important;
    position: absolute !important;
    bottom: -4px !important;
    left: 0 !important;
    width: 0 !important; 
    height: 3px !important; 
    background-color: var(--accent-color) !important; 
    border-radius: 4px !important;
    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important; 
}

[data-theme="dark"] .nav-item::after {
    background-color: var(--accent-yellow) !important;
}

.nav-item:hover::after,
.nav-item.active::after {
    width: 100% !important; 
}

.nav-item.active {
    color: var(--accent-color) !important;
    font-weight: 700 !important;
}
[data-theme="dark"] .nav-item.active {
    color: var(--accent-yellow) !important;
}

.theme-btn {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 6px !important;
    color: var(--text-main) !important;
    font-size: 1.05rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.theme-btn .sun-icon { display: none !important; }
[data-theme="dark"] .theme-btn .sun-icon { display: block !important; }
[data-theme="dark"] .theme-btn .moon-icon { display: none !important; }

/* ==========================================================================
   5. PREMIUM GLASSMORPHISM HERO DESIGN
   ========================================================================== */
.hero {
    position: relative !important;
    padding: 75px 0 90px 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    z-index: 1 !important;
    background-color: var(--bg-primary) !important;
}

.hero-bg-blur {
    position: absolute !important;
    top: -100px !important; left: -100px !important; right: -100px !important; bottom: -100px !important;
    background: url('images/bg1.jpg') center/cover no-repeat !important;
    filter: blur(40px) saturate(1.2) brightness(0.95) !important;
    opacity: 0.15 !important;
    z-index: -2 !important;
}

[data-theme="dark"] .hero-bg-blur {
    filter: blur(40px) saturate(1.4) brightness(0.3) !important;
    opacity: 0.4 !important;
}

.hero-mask {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0) 40%, #0c1a3a 100%);
    clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%);
    opacity: 0.1;
    z-index: -1;
}

[data-theme="dark"] .hero-mask {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0) 40%, #070f21 100%);
    opacity: 0.5;
}

.hero-glow {
    position: absolute;
    top: 25%; right: 15%; width: 450px; height: 450px;
    background: radial-gradient(circle, rgba(37, 13, 186, 0.12) 0%, rgba(245, 226, 10, 0.03) 70%, transparent 100%);
    filter: blur(50px);
    z-index: -1;
    pointer-events: none;
}

[data-theme="dark"] .hero-glow {
    background: radial-gradient(circle, rgba(245, 226, 10, 0.08) 0%, rgba(37, 13, 186, 0.04) 60%, transparent 100%);
}

.hero-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 60px !important;
    align-items: center !important;
    width: 100% !important;
}

.hero-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
}

.hero-logo {
    width: 220px !important;
    height: auto !important;
    margin-bottom: 25px;
    filter: drop-shadow(0 15px 30px rgba(17, 47, 90, 0.12)) !important;
    transition: transform var(--transition-smooth) !important;
}

.hero-logo:hover {
    transform: scale(1.03) rotate(-1deg) !important;
}

.hero-identity h1 {
    font-size: 3.4rem !important;
    color: #112f5a;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px !important;
    margin-top: 15px !important;
}

.hero-identity h2 {
    font-size: 1.8rem !important;
    color: var(--text-muted) !important;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.5px !important;
}

[data-theme="dark"] .hero-identity h1 { color: #ffffff !important; }
[data-theme="dark"] .hero-identity h2 { color: #f1f5f9 !important; }

.hero-accent-line {
    width: 80px !important;
    height: 4px !important;
    background-color: var(--accent-color) !important;
    margin: 20px auto 0 auto !important;
    border-radius: 2px;
    transition: background-color var(--transition-smooth) !important;
}

[data-theme="dark"] .hero-accent-line {
    background-color: var(--accent-yellow) !important;
}

.hero-link-btn {
    display: inline-block;
    margin-top: 20px;
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

[data-theme="dark"] .hero-link-btn {
    color: var(--accent-yellow);
}

.hero-cta {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
}

.hero-panel {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(16px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    padding: 45px !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 50px rgba(17, 47, 90, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth) !important;
}

[data-theme="dark"] .hero-panel {
    background: rgba(30, 41, 59, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.hero-panel:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 30px 60px rgba(37, 13, 186, 0.06) !important;
}

[data-theme="dark"] .hero-panel:hover {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35) !important;
}

.hero-panel .tagline {
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: var(--accent-color) !important;
    margin-bottom: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

[data-theme="dark"] .hero-panel .tagline {
    color: var(--accent-yellow) !important;
}

.hero-slogan {
    font-size: 1.8rem !important;
    color: #D32F2F !important;
    font-style: italic !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 0 !important;
}

.panel-accent-line {
    width: 80px !important;
    height: 4px !important;
    margin: 25px 0 35px 0 !important;
    border-radius: 4px !important;
    background-color: var(--accent-color) !important;
}

[data-theme="dark"] .panel-accent-line {
    background-color: var(--accent-yellow) !important;
}

/* ==========================================================================
   6. ATOMIC BUTTON STYLES & TRANSITIONS
   ========================================================================== */
.btn-primary { 
    display: inline-flex !important; 
    align-items: center !important;
    gap: 12px !important;
    background-color: var(--accent-color) !important; 
    color: #FFFFFF !important; 
    text-decoration: none !important; 
    font-size: 0.98rem !important; 
    font-weight: 700 !important; 
    text-transform: uppercase !important; 
    letter-spacing: 0.3px !important; 
    padding: 16px 38px !important; 
    border-radius: 12px !important; 
    box-shadow: 0 4px 14px rgba(37, 13, 186, 0.2) !important;
    border: 2px solid var(--accent-color) !important;
    transition: background-color var(--transition-smooth), color var(--transition-smooth), border-color var(--transition-smooth), transform var(--transition-smooth) !important;
}

.btn-primary:hover { 
    background-color: var(--accent-yellow) !important; 
    color: #112f5a !important; 
    border-color: var(--accent-yellow) !important;
    transform: translateY(-2px);
}

[data-theme="dark"] .btn-primary {
    background-color: var(--accent-yellow) !important;
    color: #112f5a !important;
    border-color: var(--accent-yellow) !important;
}

[data-theme="dark"] .btn-primary:hover {
    background-color: transparent !important;
    color: var(--accent-yellow) !important;
    border-color: var(--accent-yellow) !important;
}

/* ==========================================================================
   7. CORE ABOUT & PROFILE STACKS (CENTERED GEOMETRY)
   ========================================================================== */
.about, .profile {
    padding: 90px 0 !important;
    background-color: var(--bg-primary) !important;
    text-align: center !important;
}

.section-title, .partners-title {
    text-align: center !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.about h2, .profile h2, .partners h2 {
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    color: var(--text-heading) !important;
    margin: 0 !important;
}

.title-line, .sub-hero-line {
    width: 65px !important;
    height: 4px !important;
    background-color: var(--accent-color) !important;
    margin: 15px auto !important; 
    border-radius: 2px !important;
    display: block !important;
}

[data-theme="dark"] .title-line, [data-theme="dark"] .sub-hero-line {
    background-color: var(--accent-yellow) !important;
}

.about-stack, .profile-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; 
    gap: 35px !important;
    width: 100% !important;
    margin-top: 40px !important;
}

.profile-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    align-items: stretch !important;
}

.about-card, .profile .card {
    width: 100% !important;
    max-width: 850px !important; 
    background-color: var(--bg-surface) !important;
    padding: 40px 35px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
    text-align: left !important; 
    border-left: 5px solid var(--accent-color) !important;
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth), background-color var(--transition-smooth) !important;
}

.profile .card {
    max-width: 100% !important;
    display: flex;
    flex-direction: column;
}

[data-theme="dark"] .about-card, [data-theme="dark"] .profile .card {
    border-left-color: var(--accent-yellow) !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.2) !important;
}

.about-card:hover, .profile .card:hover {
    transform: translateY(-8px) scale(1.02) !important;
}

.profile .card h3 {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.card-line {
    width: 40px;
    height: 3.5px;
    background-color: var(--accent-color);
    margin: 15px 0 25px 0;
    border-radius: 2px;
    transition: background-color var(--transition-smooth) !important;
}

[data-theme="dark"] .card-line {
    background-color: var(--accent-yellow) !important;
}

/* ==========================================================================
   8. EXECUTIVE PARTNERS GRID CAPSLOCK MATRIX
   ========================================================================== */
.partners { 
    padding: 110px 0 !important; 
    background-color: var(--bg-primary) !important;
}

.partners-grid { 
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; 
    gap: 24px !important; 
    width: 100% !important; 
    max-width: 1200px !important; 
    margin: 45px auto 0 auto !important; 
}

.partner-card { 
    text-decoration: none !important; 
    color: inherit !important;
    background-color: var(--bg-surface) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important; 
    border-radius: 16px !important; 
    padding: 35px 24px !important; 
    text-align: center !important; 
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: calc(25% - 18px) !important; 
    min-width: 260px !important;       
    min-height: 280px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01) !important;
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth) !important;
}

[data-theme="dark"] .partner-card {
    border-color: rgba(255, 255, 255, 0.04) !important;
}

.partner-logo { 
    height: 110px !important; 
    width: 100% !important;
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    margin-bottom: 25px !important; 
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 15px !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.02) !important;
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth) !important;
}

.partner-logo img { 
    max-height: 100% !important; 
    max-width: 100% !important; 
    object-fit: contain !important; 
}

.partner-card h4 {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.3 !important;
}

.partner-tag {
    display: inline-block !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    color: var(--text-muted) !important;
    background-color: rgba(0, 0, 0, 0.04) !important;
    padding: 6px 14px !important;
    border-radius: 30px !important;
    transition: background-color var(--transition-smooth), color var(--transition-smooth) !important;
}

[data-theme="dark"] .partner-tag {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #94a3b8 !important;
}

/* Partner hover engine */
.partner-card:hover {
    transform: translateY(-8px) !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 20px 40px rgba(37, 13, 186, 0.15) !important;
}

[data-theme="dark"] .partner-card:hover {
    border-color: var(--accent-yellow) !important;
    box-shadow: 0 20px 45px rgba(245, 226, 10, 0.12) !important;
}

.partner-card:hover .partner-logo {
    transform: scale(1.03) !important;
}

.partner-card:hover .partner-tag {
    background-color: var(--accent-color) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .partner-card:hover .partner-tag {
    background-color: var(--accent-yellow) !important;
    color: #112f5a !important;
}

/* ==========================================================================
   9. SUB-HERO PAGE HEADERS UNI-INTERFACE
   ========================================================================== */
.sub-hero {
    opacity: 0 !important;
    transform: translateY(20px) !important;
    padding: 80px 0 20px 0 !important; 
    margin: 0 !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.page-loaded .sub-hero {
    opacity: 1 !important;
    transform: translateY(0) !important;
    display: flex !important;
}

.sub-hero .tagline {
    font-size: 0.85rem !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent-color);
}

[data-theme="dark"] .sub-hero .tagline {
    color: var(--accent-yellow);
}

.sub-hero h1 {
    font-size: 2.5rem !important;
    font-weight: 800;
    margin-top: 10px;
}

.sub-hero-desc {
    font-size: 1.05rem;
    color: var(--text-muted);
    margin-top: 8px;
}

/* ==========================================================================
   10. RECONSTRUCTED ACCORDION SLIDER STACK
   ========================================================================== */
.accordion {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px;
    margin-top: 10px !important;
    width: 100%;
}

.accordion-bar { 
    width: 100%; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    background-color: #ffffff !important; 
    border: 1px solid #e5e7eb !important; 
    padding: 22px 30px; 
    border-radius: 12px; 
    cursor: pointer; 
    outline: none; 
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); 
}

[data-theme="dark"] .accordion-bar { 
    background-color: #1a2238 !important; 
    border-color: #2e374a !important; 
}

.bar-left, .bar-right { display: flex; align-items: center; gap: 20px; }

.bar-icon { 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    background-color: rgba(37, 13, 186, 0.06); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.bar-icon i { color: #250dba; font-size: 1.1rem; }
[data-theme="dark"] .bar-icon i { color: var(--accent-yellow); }

.accordion-bar .bar-left h3 { 
    font-size: 1.3rem !important; 
    font-weight: 700 !important; 
    color: #112f5a !important; 
    margin: 0 !important; 
    text-align: left !important; 
    line-height: 1.3 !important; 
}

[data-theme="dark"] .accordion-bar .bar-left h3 { color: #ffffff !important; }

.code-badge { 
    font-family: monospace; 
    font-size: 0.85rem; 
    font-weight: 700; 
    color: #6b7280; 
    background-color: #f3f4f6; 
    padding: 4px 10px; 
    border-radius: 4px; 
}

[data-theme="dark"] .code-badge { background-color: rgba(255, 255, 255, 0.06); color: #94a3b8; }
.arrow-icon { font-size: 1.1rem; color: #9ca3af; transition: transform 0.35s ease; }

.accordion-bar:hover { 
    border-color: #250dba !important; 
    box-shadow: 0 10px 25px rgba(37, 13, 186, 0.06) !important; 
}

[data-theme="dark"] .accordion-bar:hover { border-color: var(--accent-yellow) !important; }

.accordion-item.is-expanded .accordion-bar { 
    border-color: #250dba !important; 
    border-bottom-left-radius: 0; 
    border-bottom-right-radius: 0; 
}

[data-theme="dark"] .accordion-item.is-expanded .accordion-bar { border-color: var(--accent-yellow) !important; }
.accordion-item.is-expanded .arrow-icon { transform: rotate(180deg); color: #250dba; }
[data-theme="dark"] .accordion-item.is-expanded .arrow-icon { color: var(--accent-yellow); }

.accordion-fold { 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
    background-color: #ffffff !important; 
    border-bottom-left-radius: 12px; 
    border-bottom-right-radius: 12px; 
    border: 1px solid transparent; 
    border-top: none; 
}

[data-theme="dark"] .accordion-fold { background-color: #1a2238 !important; }
.accordion-item.is-expanded .accordion-fold { border-color: #e5e7eb; }
[data-theme="dark"] .accordion-item.is-expanded .accordion-fold { border-color: #2e374a; }

.fold-padding { padding: 35px 40px; }

/* 🌟 LOCATIONS THREE-WAY FLEX GRID ENGINE */
.fold-grid {
    display: grid !important;
    grid-template-columns: 1fr 1.1fr 0.9fr !important;
    gap: 35px !important;
    align-items: start !important;
}

.fold-details h4, .fold-gallery h5, .fold-map h5 { 
    font-size: 1.1rem; font-weight: 800; text-transform: uppercase; color: #112f5a !important; margin: 0 0 12px 0; 
}
[data-theme="dark"] .fold-details h4, [data-theme="dark"] .fold-gallery h5, [data-theme="dark"] .fold-map h5 { color: #ffffff !important; }

.detail-row { font-size: 1rem; line-height: 1.6; color: #4b5563 !important; margin: 0 0 20px 0; }
[data-theme="dark"] .detail-row { color: #94a3b8 !important; }
.detail-row i { color: #250dba; margin-right: 6px; }
[data-theme="dark"] .detail-row i { color: var(--accent-yellow); }

.comms-box {
    margin: 20px 0 !important;
    padding: 16px !important;
    background-color: rgba(0, 0, 0, 0.02) !important;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[data-theme="dark"] .comms-box { background-color: rgba(255, 255, 255, 0.02) !important; }

.comms-link {
    font-size: 0.95rem !important; color: var(--text-main) !important; text-decoration: none !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; transition: color 0.25s ease, transform 0.25s ease !important;
}

.comms-link:hover { color: var(--accent-color) !important; transform: translateX(4px) !important; }
[data-theme="dark"] .comms-link:hover { color: var(--accent-yellow) !important; }
.comms-link i { color: var(--accent-color); width: 16px; text-align: center; }
[data-theme="dark"] .comms-link i { color: var(--accent-yellow); }

.status-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 700; color: #16a34a; background-color: rgba(22, 163, 74, 0.08); padding: 6px 14px; border-radius: 30px; }

/* Showrooms inside locations fold */
.showroom-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
.showroom-card { background-color: var(--bg-primary) !important; border: 1px solid rgba(0, 0, 0, 0.04) !important; padding: 8px !important; border-radius: 10px !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important; }
.showroom-card img { width: 100% !important; height: 110px !important; object-fit: cover !important; border-radius: 6px !important; display: block !important; }
.caption { display: block !important; font-size: 0.72rem !important; font-weight: 700 !important; text-transform: uppercase; color: var(--text-muted) !important; text-align: center !important; margin-top: 8px !important; }

.map-frame { height: 215px; border-radius: 8px; overflow: hidden; border: 1px solid #e5e7eb; }
[data-theme="dark"] .map-frame { border-color: #2e374a; }
.map-frame iframe { width: 100%; height: 100%; border: none; }

/* ==========================================================================
   11. SERVICES CASCADE & OP OPERATIONS GRID SHOWCASE
   ========================================================================== */
.services { 
    padding: 100px 0 !important; 
    background-color: var(--bg-primary) !important; 
    transition: background-color var(--transition-smooth) !important;
}

/* Elegant side-by-side layout configuration */
.services-grid { 
    display: grid !important; 
    grid-template-columns: 1.1fr 0.9fr !important; 
    gap: 65px !important; 
    align-items: center !important; 
    width: 100% !important;
}

.services-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    width: 100% !important;
}

.services-content h2 {
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    color: var(--text-heading) !important;
    margin-bottom: 15px !important;
    line-height: 1.25 !important;
}

.services-lead { 
    font-size: 1.05rem !important; 
    color: var(--text-muted) !important; 
    line-height: 1.7 !important; 
    margin-bottom: 35px !important; 
}

.services-action { 
    margin-top: 35px !important; 
    width: auto !important;
}

/* Accordion tabs presentation framework */
.accordion {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
}

.accordion-bar { 
    width: 100% !important; 
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: center !important; 
    background-color: var(--bg-surface) !important; 
    border: 1px solid rgba(0, 0, 0, 0.04) !important; 
    padding: 18px 24px !important; 
    border-radius: 14px !important; 
    cursor: pointer !important; 
    outline: none !important; 
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; 
}

[data-theme="dark"] .accordion-bar { 
    background-color: rgba(30, 41, 59, 0.5) !important; 
    border-color: rgba(255, 255, 255, 0.04) !important; 
}

.bar-left, .bar-right { 
    display: flex !important; 
    align-items: center !important; 
    gap: 16px !important; 
}

.bar-icon { 
    width: 38px !important; 
    height: 38px !important; 
    border-radius: 10px !important; 
    background-color: rgba(37, 13, 186, 0.05) !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    flex-shrink: 0 !important;
}

[data-theme="dark"] .bar-icon {
    background-color: rgba(245, 226, 10, 0.06) !important;
}

.bar-icon i { color: var(--accent-color) !important; font-size: 1rem !important; }
[data-theme="dark"] .bar-icon i { color: var(--accent-yellow) !important; }

.accordion-bar .bar-left h3 { 
    font-size: 1.1rem !important; 
    font-weight: 700 !important; 
    color: var(--text-heading) !important; 
    margin: 0 !important; 
}

.code-badge { 
    font-family: monospace !important; 
    font-size: 0.8rem !important; 
    font-weight: 700 !important; 
    color: var(--text-muted) !important; 
    background-color: rgba(0, 0, 0, 0.04) !important; 
    padding: 3px 8px !important; 
    border-radius: 6px !important; 
}

[data-theme="dark"] .code-badge { 
    background-color: rgba(255, 255, 255, 0.06) !important; 
}

.arrow-icon { font-size: 0.95rem !important; color: var(--text-muted) !important; transition: transform 0.3s ease !important; }

.accordion-bar:hover { 
    border-color: var(--accent-color) !important; 
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(37, 13, 186, 0.04) !important; 
}

[data-theme="dark"] .accordion-bar:hover { 
    border-color: var(--accent-yellow) !important; 
    box-shadow: 0 8px 20px rgba(245, 226, 10, 0.04) !important; 
}

.accordion-item.is-expanded .accordion-bar { 
    border-color: var(--accent-color) !important; 
    border-bottom-left-radius: 0 !important; 
    border-bottom-right-radius: 0 !important; 
}

[data-theme="dark"] .accordion-item.is-expanded .accordion-bar { 
    border-color: var(--accent-yellow) !important; 
}

.accordion-item.is-expanded .arrow-icon { 
    transform: rotate(180deg) !important; 
    color: var(--accent-color) !important; 
}
[data-theme="dark"] .accordion-item.is-expanded .arrow-icon { 
    color: var(--accent-yellow) !important; 
}

.accordion-fold { 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; 
    background-color: var(--bg-surface) !important; 
    border-bottom-left-radius: 14px; 
    border-bottom-right-radius: 14px; 
    border: 1px solid transparent; 
    border-top: none !important; 
}

[data-theme="dark"] .accordion-fold { 
    background-color: rgba(30, 41, 59, 0.3) !important; 
}

.accordion-item.is-expanded .accordion-fold { 
    border-color: var(--accent-color) !important; 
}
[data-theme="dark"] .accordion-item.is-expanded .accordion-fold { 
    border-color: var(--accent-yellow) !important; 
}

.fold-padding { padding: 24px !important; }

/* 🌟 RE-ENGINEERED DISPLAY PANEL BOX WITH AUTOMATED STABLE GRID */
.services-panel { 
    position: relative !important; 
    height: auto !important; 
    min-height: 540px !important; 
    border-radius: 24px !important; 
    overflow: visible !important; /* Prevents visual card drops from clipping off baseline paths */
    box-shadow: 0 20px 45px rgba(17, 47, 90, 0.06) !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    width: 100% !important;
    padding: 90px 30px 40px 30px !important;
}

.panel-blue { 
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%) !important; 
}

.deco-circle { position: absolute !important; top: 40px; right: 50px; width: 24px; height: 24px; border-radius: 50%; background-color: var(--accent-yellow); opacity: 0.6; }
.deco-circle.alt-pos { top: unset !important; bottom: 50px; left: 60px; }
.deco-dots { position: absolute !important; top: 25px; right: 120px; color: #FFFFFF; font-size: 1.5rem; letter-spacing: 4px; opacity: 0.3; }

.panel-badge { 
    position: absolute !important; 
    top: 35px; 
    left: 35px; 
    background-color: var(--accent-yellow) !important; 
    color: #0f172a !important; 
    padding: 8px 20px !important; 
    border-radius: 30px !important; 
    font-size: 0.8rem !important; 
    font-weight: 800 !important; 
    text-transform: uppercase !important; 
    letter-spacing: 1.5px !important; 
    z-index: 10 !important;
}

.panel-badge.badge-yellow { 
    background-color: #FFFFFF !important; 
    color: #1e3a8a !important; 
}

[data-theme="dark"] .panel-badge {
    background-color: var(--accent-yellow) !important;
    color: #0f172a !important;
}
[data-theme="dark"] .panel-badge.badge-yellow {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

.panel-gallery { 
    position: relative !important; 
    width: 100% !important; 
    height: auto !important; 
    margin-top: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Safe grid arrangement protects card alignment */
    gap: 20px !important;
}

/* Anchors the third distribution card uniformly down across the grid baseline floor */
.panel-gallery .gallery-card:nth-child(3) {
    grid-column: span 2 !important;
    justify-self: center !important;
    width: 100% !important;
    max-width: 320px !important;
}

.panel-gallery .gallery-card { 
    position: relative !important; 
    top: unset !important; left: unset !important; right: unset !important; bottom: unset !important;
    transform: none !important;
    background-color: rgba(255, 255, 255, 0.95) !important; 
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important; 
    padding: 12px !important; 
    border-radius: 16px !important; 
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important; 
    width: 100% !important; 
    display: flex !important; 
    flex-direction: column !important;
    cursor: pointer !important; 
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth) !important;
}

[data-theme="dark"] .panel-gallery .gallery-card {
    background-color: rgba(30, 41, 59, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.panel-gallery .gallery-card:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2) !important;
}

.panel-gallery .gallery-card .card-img-box { 
    width: 100% !important; 
    height: 125px !important; 
    overflow: hidden !important; 
    border-radius: 10px !important; 
}

.panel-gallery .gallery-card .card-img-box img { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
}

.panel-gallery .gallery-card .card-info h3 { 
    font-size: 0.8rem !important; 
    font-weight: 800 !important; 
    color: #112f5a !important; 
    text-transform: uppercase !important; 
    text-align: center !important; 
    margin: 10px 0 2px 0 !important; 
    letter-spacing: 0.3px !important;
}

[data-theme="dark"] .panel-gallery .gallery-card .card-info h3 { 
    color: #ffffff !important; 
}

/* 🌟 OPERATIONS IN FOCUS (TRUE CENTER GEOMETRY) */
.gallery-section {
    background-color: var(--bg-primary) !important;
    padding: 90px 0 0 0 !important;
}

.gallery-title {
    text-align: center !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.gallery-title h2 {
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    color: var(--text-heading) !important;
    text-align: center !important;
    margin-bottom: 5px !important;
}

.gallery-grid { 
    display: grid !important; 
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 30px !important; 
    width: 100% !important; 
    max-width: 1200px !important; 
    margin: 45px auto 0 auto !important; 
    justify-content: center !important; 
}

.gallery-item { 
    background-color: var(--bg-surface) !important; 
    border: 1px solid rgba(0, 0, 0, 0.04) !important; 
    border-radius: 20px !important; 
    padding: 16px !important; 
    cursor: pointer !important; 
    display: flex !important; 
    flex-direction: column !important; 
    transition: transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth) !important;
}

[data-theme="dark"] .gallery-item {
    border-color: rgba(255, 255, 255, 0.04) !important;
}

.gallery-img-box { 
    height: 200px !important; 
    overflow: hidden !important; 
    border-radius: 14px !important; 
}

.gallery-img-box img { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
    transition: transform var(--transition-smooth) !important; 
}

.gallery-info { 
    margin-top: 14px !important; 
    text-align: center !important; 
}

.gallery-info h3 { 
    font-size: 1.05rem !important; 
    font-weight: 700 !important; 
    color: var(--text-heading) !important; 
}

.gallery-item:hover { 
    transform: translateY(-8px) !important; 
    border-color: var(--accent-color) !important; 
    box-shadow: 0 20px 40px rgba(37, 13, 186, 0.08) !important; 
}

[data-theme="dark"] .gallery-item:hover { 
    border-color: var(--accent-yellow) !important; 
    box-shadow: 0 20px 40px rgba(245, 226, 10, 0.08) !important; 
}

.gallery-item:hover img { 
    transform: scale(1.04) !important; 
}

/* Structural air cushion space row separating layers cleanly from footers */
.services-footer-buffer {
    width: 100% !important;
    height: 110px !important;
    background-color: transparent !important;
}

/* ==========================================================================
   TABLET / MOBILE MEDIA RE-MAPPINGS
   ========================================================================== */
@media (max-width: 992px) {
    .services-grid { 
        grid-template-columns: 1fr !important; 
        gap: 45px !important; 
        width: 92% !important;
        margin: 0 auto !important;
    }
    
    .services-content {
        width: 100% !important;
    }
    
    .gallery-grid {
        grid-template-columns: 1fr !important;
        max-width: 500px !important;
        gap: 24px !important;
        padding: 0 16px !important;
    }

    .services-panel { 
        height: auto !important; 
        min-height: unset !important;
        padding: 40px 20px !important;
        border-radius: 20px !important;
    }
    
    .panel-gallery { 
        display: flex !important; 
        flex-direction: column !important; 
        align-items: center !important; 
        gap: 16px !important; 
        width: 100% !important; 
    }
    
    .panel-gallery .gallery-card,
    .panel-gallery .gallery-card:nth-child(3) { 
        position: relative !important; 
        width: 100% !important; 
        max-width: 320px !important; 
        margin: 0 auto !important; 
    }
    
    .panel-gallery .gallery-card .card-img-box { 
        height: 140px !important; 
    }
    
    .services-footer-buffer { 
        height: 60px !important; 
    }
}

@media (max-width: 768px) {
    .services { padding: 60px 0 !important; }
    .services-content h2, .gallery-title h2 { font-size: 1.8rem !important; }
}

/* ==========================================================================
   12. CENTRIC CONTACT INQUIRY COMPONENT ENGINE
   ========================================================================== */
.contact { padding: 60px 0 100px 0; }
.contact-stack { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 50px !important; width: 100% !important; max-width: 800px !important; margin: 0 auto !important; }
.contact-form-column { width: 100% !important; }
.contact-box { background-color: var(--bg-surface) !important; padding: 45px 40px !important; border-radius: 16px !important; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04) !important; border: 1px solid rgba(226, 232, 240, 0.08) !important; width: 100% !important; }
[data-theme="dark"] .contact-box { border-color: rgba(51, 65, 85, 0.3) !important; }
.contact-header h3 { font-size: 1.6rem !important; font-weight: 700 !important; margin-bottom: 8px !important; }
.contact-subtext { font-size: 0.95rem !important; color: var(--text-muted) !important; margin-bottom: 35px !important; font-weight: 500 !important; }
/* Centered layout parameters for the header blocks */
.centered-header {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

.centered-header h3 {
    text-align: center !important;
    margin-bottom: 8px !important;
}

.centered-header .contact-subtext {
    text-align: center !important;
    margin-bottom: 35px !important;
}

/* Centered structural tracking for the Transmit Action Button */
.centered-submit {
    display: flex !important;
    justify-content: center !important; /* Horizontally balances the button in the middle */
    align-items: center !important;
    width: 100% !important;
    margin-top: 25px !important;
}

.form-btn {
    max-width: 280px !important; /* Constrains the button shape elegantly instead of stretching it */
    width: 100% !important;
    justify-content: center !important;
}

.form-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 24px !important; width: 100% !important; }
.input-group { position: relative !important; margin-bottom: 24px !important; width: 100% !important; }
.input-group input, .input-group textarea, .input-group select { width: 100% !important; padding: 16px 18px !important; font-size: 0.95rem !important; background-color: rgba(0, 0, 0, 0.03) !important; border: 1px solid rgba(0, 0, 0, 0.12) !important; border-radius: 8px !important; outline: none !important; color: var(--text-main) !important; }
.input-group label { position: absolute !important; left: 18px !important; top: 50% !important; transform: translateY(-50%) !important; color: var(--text-muted) !important; font-size: 0.95rem !important; font-weight: 500 !important; pointer-events: none !important; transition: all 0.2s ease !important; }
.input-group textarea ~ label { top: 24px !important; transform: none !important; }

/* Input float triggers */
.input-group input:focus ~ label, .input-group input:not(:placeholder-shown) ~ label,
.input-group textarea:focus ~ label, .input-group textarea:not(:placeholder-shown) ~ label,
.input-group select:focus ~ label, .input-group select:valid ~ label {
    top: 0 !important; font-size: 0.75rem !important; font-weight: 800 !important; color: var(--accent-yellow) !important; background-color: #112F5A !important; padding: 2px 8px !important; transform: translateY(-50%) !important; left: 12px !important; text-transform: uppercase !important;
}

[data-theme="dark"] .input-group input, [data-theme="dark"] .input-group textarea, [data-theme="dark"] .input-group select { background-color: #1e293b !important; border: 1px solid #334155 !important; color: #f1f5f9 !important; }
.select-group select { appearance: none !important; -webkit-appearance: none !important; }
.select-arrow { position: absolute !important; right: 18px !important; top: 50% !important; transform: translateY(-50%) !important; color: var(--text-muted) !important; pointer-events: none !important; }

/* QR Section */
.qr-section { width: 100% !important; max-width: 1000px !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 35px !important; border-top: 1px solid rgba(226, 232, 240, 0.08) !important; padding-top: 50px !important; }
.qr-header { text-align: center !important; }
.qr-header h2 { font-size: 1.8rem !important; margin-bottom: 12px !important; }
.qr-header p { font-size: 0.98rem !important; max-width: 600px; margin: 0 auto !important; }
.qr-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; width: 100% !important; }
.qr-card { display: flex !important; align-items: center !important; gap: 20px !important; background-color: var(--bg-surface) !important; padding: 16px 20px !important; border-radius: 14px !important; border: 1px solid rgba(226, 232, 240, 0.05) !important; cursor: pointer !important; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease !important; }
.qr-card:hover { transform: translateY(-5px) !important; border-color: var(--accent-color) !important; }
[data-theme="dark"] .qr-card:hover { border-color: var(--accent-yellow) !important; }
.qr-img-box { background-color: #ffffff !important; padding: 6px !important; border-radius: 8px !important; width: 75px !important; height: 75px !important; min-width: 75px !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; }
.qr-img-box img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
.qr-info h3 { font-size: 1.1rem !important; margin: 0 0 4px 0 !important; font-weight: 700 !important; }
.qr-info span { font-size: 0.85rem !important; font-weight: 500 !important; }

/* ==========================================================================
   13. CENTRAL LIGHTBOX OVERLAY ENGINE
   ========================================================================== */
.lightbox-overlay, .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(15, 23, 42, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 10000000 !important; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
.lightbox-overlay.active-lightbox, .modal-overlay.active-lightbox { opacity: 1; pointer-events: auto; }
.lightbox-box, .modal-box { text-align: center; max-width: 90%; width: 320px; transform: scale(0.8); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.lightbox-overlay.active-lightbox .lightbox-box, .modal-overlay.active-lightbox .modal-box { transform: scale(1); }
#lightbox-expanded-img { width: 100%; height: auto; max-height: 70vh !important; object-fit: contain !important; background-color: #ffffff; padding: 16px; border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); display: block; }
#lightbox-expanded-title, .modal-box h2 { color: #ffffff !important; font-size: 1.4rem; font-weight: 800; margin-top: 20px; text-transform: uppercase; letter-spacing: 1px; }
.lightbox-close, .modal-close { position: absolute; top: 30px; right: 40px; color: rgba(255, 255, 255, 0.6); font-size: 3rem; cursor: pointer; line-height: 1; }

/* Profile Pop up customization adjustments */
.modal-box { background-color: var(--bg-surface) !important; padding: 40px; border-radius: 16px; max-width: 550px; width: 90%; position: relative; text-align: left; }
.modal-box h2, .modal-box h3 { color: var(--accent-color) !important; font-weight: 700 !important; }
[data-theme="dark"] .modal-box h2, [data-theme="dark"] .modal-box h3 { color: var(--accent-yellow) !important; }
.modal-box .quoted-text { border-left: 3px solid var(--accent-color) !important; padding-left: 15px; margin-bottom: 25px !important; font-style: italic; }
[data-theme="dark"] .modal-box .quoted-text { border-left-color: var(--accent-yellow) !important; }
.values-list { list-style: none; }
.values-list li { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-weight: 600; }
.values-list li i { color: var(--accent-color) !important; }
[data-theme="dark"] .values-list li i { color: var(--accent-yellow) !important; }
.modal-close { color: var(--text-muted); top: 15px; right: 22px; font-size: 2rem; }

/* Profile preview quote tweaks */
.profile .card .quoted-text { border-left: none !important; padding-left: 0 !important; }

/* ==========================================================================
  14. 💎 PREMIUM UNIFIED GLASSMORPHISM CARD ARCHEFILLS
   ========================================================================== */
.glass-card {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(16px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    padding: 40px 35px !important;
    border-radius: 24px !important; 
    box-shadow: 0 20px 50px rgba(17, 47, 90, 0.03), 
                inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    text-align: left !important;
    transition: transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth) !important;
}

[data-theme="dark"] .glass-card {
    background: rgba(30, 41, 59, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2), 
                inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.glass-card:hover {
    transform: translateY(-6px) scale(1.01) !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 30px 60px rgba(37, 13, 186, 0.06) !important;
}

[data-theme="dark"] .glass-card:hover {
    border-color: var(--accent-yellow) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3) !important;
}

.about-stack .glass-card {
    width: 100% !important;
    max-width: 850px !important;
    border-left: 5px solid var(--accent-color) !important;
}

[data-theme="dark"] .about-stack .glass-card {
    border-left-color: var(--accent-yellow) !important;
}

/* ==========================================================================
   🎬 OPERATIONS SHOWCASE CLASS ADVANCED STYLING WITH BG VIDEO LOOPS
   ========================================================================== */
.showcase { 
    padding: 90px 0 !important; 
    position: relative !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0.02) 100%) !important;
}

.showcase-grid { 
    display: grid !important; 
    grid-template-columns: 1.1fr 0.9fr !important; /* Visual symmetry balance favoring the loop deck */
    align-items: center !important; 
    gap: 50px !important; 
    max-width: 1200px !important; 
    margin: 0 auto !important; 
}

/* Floating Cinematic Video Frame Container Container */
.showcase-media { 
    position: relative !important; 
    border-radius: 24px !important; 
    overflow: hidden !important; 
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15) !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    height: 480px !important; 
    width: 100% !important; 
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease !important;
}

.showcase-media:hover {
    transform: translateY(-6px) scale(1.01) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25) !important;
}

.showcase-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Translucent Gradient Overlay over the Video */
.showcase-media .play-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(17, 47, 90, 0.45), transparent) !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    padding: 30px !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transform: none !important;
}

.showcase-media .play-btn {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 1.4rem !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
    transform: none !important;
    transition: background-color 0.3s ease !important;
}

.showcase-text {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

/* Frosted Luxury Translucent Showcase Glass Card */
.glass-card.showcase-panel {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 24px !important;
    padding: 50px 40px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="dark"] .glass-card.showcase-panel {
    background: rgba(15, 23, 42, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.showcase-panel .tagline {
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: #3b82f6 !important; /* Luxury Corporate Blue Accent Label */
    margin-bottom: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

[data-theme="dark"] .showcase-panel .tagline {
    color: var(--accent-yellow) !important;
}

.showcase-panel h2 {
    font-size: 2.25rem !important;
    font-weight: 800 !important;
    color: var(--text-heading) !important;
    margin: 0 0 18px 0 !important;
    line-height: 1.3 !important;
    text-align: left !important;
}

.showcase-line { 
    width: 60px !important; 
    height: 4px !important; 
    background: linear-gradient(90deg, #3b82f6, #60a5fa) !important;
    margin: 0 0 25px 0 !important; 
    border-radius: 2px !important; 
}

[data-theme="dark"] .showcase-line { 
    background: linear-gradient(90deg, var(--accent-yellow), #fef08a) !important; 
}

.showcase-panel p { 
    color: var(--text-muted) !important; 
    font-size: 1.05rem !important; 
    line-height: 1.7 !important; 
    margin-bottom: 35px !important;
    text-align: left !important;
}

/* ==========================================================================
   🧹 OPAQUE SECTIONS CLEANUP
   ========================================================================== */
body > section:nth-of-type(odd) .glass-card {
    background-color: rgba(255, 255, 255, 0.45) !important;
}
[data-theme="dark"] body > section:nth-of-type(odd) .glass-card {
    background-color: rgba(30, 41, 59, 0.45) !important;
}

/* ==========================================================================
   15. PREMIUM ADAPTIVE FOOTER BLOCK
   ========================================================================== */
.footer { background-color: #ffffff !important; padding: 70px 0 0 0; border-top: 1px solid #E5E7EB !important; transition: background-color 0.4s ease, border-color 0.4s ease; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 0.9fr 0.9fr; gap: 40px; align-items: flex-start; padding-bottom: 50px; }
.footer-brand h2 { font-size: 2.1rem; color: #0F172A !important; font-weight: 800; line-height: 1.15; margin-bottom: 25px; }
.contact-row { display: flex; align-items: center; gap: 15px; margin-bottom: 18px; }
.contact-row i { font-size: 1.1rem; color: var(--accent-color); width: 20px; text-align: center; }
.email-space { margin-top: 25px; }
.footer-link { font-size: 0.95rem; color: #1F2937 !important; text-decoration: none; font-weight: 500; display: inline-block; }
.footer-link:hover { color: var(--accent-color) !important; transform: translateX(3px); }
.footer-text { font-size: 0.95rem; color: #1F2937 !important; line-height: 1.5; font-weight: 500; }

.footer-copyright { border-top: 1px solid #F3F4F6; padding: 25px 0; background-color: #FAFAFB !important; text-align: center; }
.footer-copyright p { font-size: 0.85rem; color: #9CA3AF !important; font-weight: 500; }

[data-theme="dark"] .footer { background-color: #0b0f19 !important; border-top: 1px solid #1e293b !important; }
[data-theme="dark"] .footer-brand h2 { color: #ffffff !important; }
[data-theme="dark"] .footer-link, [data-theme="dark"] .footer-text { color: #e2e8f0 !important; }
[data-theme="dark"] .footer-copyright { background-color: #070a10 !important; border-top: 1px solid #1e293b !important; }

/* ==========================================================================
   16. RESPONSIVE BREAKPOINT SAFETY PANELS (RE-ENGINEERED)
   ========================================================================== */
.menu-toggle { 
    display: none; 
    flex-direction: column; 
    justify-content: space-between; 
    width: 26px; 
    height: 18px; 
    background: transparent; 
    border: none; 
    cursor: pointer; 
    padding: 0; 
    z-index: 100002 !important; 
}

.menu-toggle .menu-bar { 
    width: 100%; 
    height: 2.5px; 
    background-color: var(--accent-color); 
    border-radius: 4px; 
    transition: all 0.3s ease; 
}

[data-theme="dark"] .menu-toggle .menu-bar { 
    background-color: #ffffff; 
}

@media (max-width: 992px) {
    .hero-grid, .profile-grid, .footer-grid, .services-grid, .fold-grid, .showcase-grid { 
        grid-template-columns: 1fr !important; 
        gap: 40px !important; 
    }
    
    .hero-brand { 
        text-align: center; 
        align-items: center; 
    }
    
    .hero-panel {
        padding: 30px 24px !important; 
        width: 92% !important;         
        margin: 0 auto !important; 
    }

    .hero-panel h1, 
    .hero-panel h2, 
    .hero-panel p {
        text-align: center !important;
    }
    .panel-accent-line {
        margin: 20px auto 30px auto !important; 
    }
    
    body { 
        padding-top: 64px !important; 
    }
    
    .nav-container { 
        padding: 10px 16px !important; 
        position: relative !important;
    }
    
    .nav-logo { 
        height: 32px !important; 
    }
    
    .nav-logo-text { 
        font-size: 1.15rem !important; 
    }
    
    /* 🌟 TRIGGER TOGGLE SYMMETRY FIX */
    .menu-toggle { 
        display: flex !important; 
        order: 3 !important; 
        margin-left: 20px !important; 
        position: relative !important; 
        width: 22px !important; 
        height: 15px !important; 
    }
    
    .menu-toggle.active-state .menu-bar:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }
    .menu-toggle.active-state .menu-bar:nth-child(2) {
        opacity: 0 !important;
    }
    .menu-toggle.active-state .menu-bar:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }
    
    /* 🌟 MOBILE PANEL DRAWER WRAPPER */
    .nav-menu-wrapper {
        position: fixed !important; 
        top: 0 !important; 
        right: -100% !important; 
        width: 290px !important; 
        height: 100vh !important;
        max-height: 100vh !important; 
        background-color: var(--bg-primary) !important; 
        border-left: 1px solid rgba(229, 231, 235, 0.6) !important; 
        padding: 90px 24px 40px 24px !important; 
        box-shadow: -12px 0 30px rgba(15, 23, 42, 0.05) !important; 
        z-index: 100000 !important; 
        transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; 
    }
    
    .nav-menu-wrapper.menu-is-open { 
        right: 0 !important; 
    }

    [data-theme="dark"] .nav-menu-wrapper { 
        background-color: var(--bg-primary) !important; 
        border-left: 1px solid rgba(255, 255, 255, 0.08) !important; 
        box-shadow: -12px 0 35px rgba(0, 0, 0, 0.3) !important; 
    }
    
    .nav-menu {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 25px !important;
        width: 100% !important;
    }
    
    .nav-links { 
        flex-direction: column !important; 
        align-items: flex-start !important; 
        gap: 10px !important; 
        width: 100% !important; 
    }
    
    .nav-links li { 
        width: 100% !important; 
    }
    
    .nav-menu .nav-links .nav-item { 
        color: var(--text-main) !important; 
        font-size: 1.05rem !important; 
        font-weight: 700 !important; 
        display: block !important; 
        width: 100% !important; 
        text-align: left !important; 
        padding: 12px 20px !important; 
        border-radius: 12px !important; 
        background-color: transparent !important; 
        transition: background-color 0.25s ease, color 0.25s ease !important;
    }
    
    .nav-menu .nav-links .nav-item::after {
        display: none !important;
    }

    .nav-menu .nav-links .nav-item:hover, 
    .nav-menu .nav-links .nav-item.active { 
        color: var(--accent-color) !important; 
        background-color: var(--bg-surface) !important; 
    }
    
    [data-theme="dark"] .nav-menu .nav-links .nav-item:hover, 
    [data-theme="dark"] .nav-menu .nav-links .nav-item.active { 
        color: var(--accent-yellow) !important; 
        background-color: var(--bg-surface) !important; 
    }
    
    .theme-btn {
        order: 2 !important;
        margin: 10px 0 0 16px !important;
        align-self: flex-start !important;
    }

    /* FIX: ABOUT - Profile Cards Media Margin */
    .about-stack, 
    .profile-grid {
        width: 92% !important;         
        margin: 40px auto 0 auto !important;
        padding: 0 4px !important;
    }

    .about-card, 
    .profile .card {
        padding: 30px 24px !important; 
        width: 100% !important;
    }
    
    /* Showcase mobile compression scaling */
    .showcase-media {
        height: 350px !important;
        border-radius: 16px !important;
    }

    .showcase-panel {
        padding: 35px 24px !important;
    }

    .showcase-panel h2 {
        font-size: 1.85rem !important;
    }
    
    .services-media-grid { grid-template-columns: 1fr !important; max-width: 500px !important; gap: 24px !important; padding: 0 16px !important; }
    .form-row { grid-template-columns: 1fr !important; gap: 0 !important; }
    .qr-grid { grid-template-columns: 1fr !important; gap: 16px !important; width: 94% !important; margin: 0 auto !important; }
}

@media (max-width: 768px) {
    .sub-hero { padding-top: 100px !important; padding-bottom: 10px !important; }
    .sub-hero h1 { font-size: 1.8rem !important; }
    .showcase-media { height: 260px !important; }
    .accordion-bar { padding: 16px 14px !important; }
    .accordion-bar .bar-left h3 { font-size: 1.05rem !important; }
    .code-badge { font-size: 0.72rem !important; padding: 3px 6px !important; }
    .map-frame { height: 220px !important; }
}

/* FIX: SERVICES - Accordions Media View Margin */
.services-grid {
    width: 92% !important;         
    margin: 0 auto !important;
    padding: 0 !important;
}

.services-content {
    width: 100% !important;
    padding: 0 4px !important;     
}

.services-panel {
    width: 100% !important;
    height: auto !important;
    padding: 80px 16px 40px 16px !important; 
    border-radius: 20px !important;
}

/* FIX: CONTACT - Booking Form Media View Margin */
.contact-stack {
    width: 92% !important;         
    margin: 0 auto !important;     
    padding: 0 !important;
}

.contact-form-column {
    width: 100% !important;
}

.contact-box {
    padding: 35px 20px !important; 
    width: 100% !important;
    border-radius: 20px !important; 
}

.centered-submit {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

.form-btn {
    width: 100% !important;        
    max-width: 100% !important;   
}

.qr-section {
    width: 100% !important;
    padding: 40px 4px 0 4px !important; 
}

.qr-grid {
    grid-template-columns: 1fr !important; 
    gap: 16px !important;
    width: 100% !important;
    margin: 30px auto 0 auto !important;
}

.qr-card {
    width: 100% !important;
    padding: 14px 16px !important; 
}
/* ==========================================================================
   💎 PREMIUM BRANDED HARDWARE-ACCELERATED PRELOADER STYLING
   ========================================================================== */
#slc-global-preloader {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: #0f172a !important; /* Deep corporate dark base backdrop protection */
    z-index: 99999999 !important; /* Forces layout to render above navbar elements */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                visibility 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Light theme support */
[data-theme="light"] #slc-global-preloader {
    background-color: #ffffff !important;
}

.preloader-branding {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 25px;
    width: 90%;
    max-width: 320px;
}

.preloader-logo {
    width: 140px;
    height: auto;
    object-fit: contain;
    border-radius: 16px;
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.15));
    animation: slcLogoPulse 2s infinite ease-in-out;
}

/* Luxury Loading Bar Pipeline Track */
.preloader-track {
    width: 100%;
    height: 4px;
    background-color: rgba(37, 13, 186, 0.1);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

[data-theme="dark"] .preloader-track {
    background-color: rgba(255, 255, 255, 0.05);
}

.preloader-bar {
    position: absolute;
    height: 100%;
    width: 40%;
    background: linear-gradient(90deg, #250dba, #f5e20a);
    border-radius: 4px;
    animation: slcHubForwarding 1.6s infinite ease-in-out;
}

[data-theme="dark"] .preloader-bar {
    background: linear-gradient(90deg, #f5e20a, #3b82f6);
}

.preloader-status {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #64748b;
    animation: slcTextPulse 2s infinite ease-in-out;
}

/* Unlocks scrolling dynamically when hidden */
body.slc-hub-active {
    overflow: hidden !important;
}

#slc-global-preloader.slc-hub-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Smooth Hardware-Accelerated Keyframe Engines */
@keyframes slcLogoPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.15)); }
    50% { transform: scale(1.03); filter: drop-shadow(0 15px 35px rgba(37, 13, 186, 0.25)); }
}

@keyframes slcHubForwarding {
    0% { left: -40%; }
    50% { left: 100%; width: 50%; }
    100% { left: 100%; width: 40%; }
}

@keyframes slcTextPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; color: var(--text-heading); }
}
/* ==========================================================================
   PRELOADER TRANSITION SYSTEM FIX
   ========================================================================== */
#slc-global-preloader {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: #0f172a !important;
    z-index: 99999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                visibility 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-theme="light"] #slc-global-preloader {
    background-color: #ffffff !important;
}

/* 🌟 THIS CLASS DISMISSES THE OVERLAY */
#slc-global-preloader.slc-hub-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Locks scrolling while preloader is active */
body.slc-hub-active {
    overflow: hidden !important;
    height: 100vh !important;
}