/* ==========================================================================
   SAS INTERNATIONAL - MAIN STYLESHEET (OPTIMIZED FOR MAXIMUM PERFORMANCE)
   ========================================================================== */

/* TABLE OF CONTENTS:
  01. Root Variables & Typography Groups
  02. Base Setup & Cursor
  03. Utility Classes (Glassmorphism, Buttons, Status)
  04. Navbar & Mobile Menu
  05. Hero & Elite Banner Protocol
  06. Services Section
  07. About Section (RADAR RESTORED & GPU OPTIMIZED)
  08. Global Network (3D GLOBE OVERHAUL)
  09. Core Services Gallery
  10. FAQ Section
  11. Tactical Banner CTA
  12. Strategic Presence (Locations)
  13. Footer
  14. Admin Panel Isolated Navbar
  15. Consolidated Media Queries
========================================================================== */

/* =========================================
   01. ROOT VARIABLES & TYPOGRAPHY GROUPS
   ========================================= */
:root {
    --bg-main: #06090f;        
    --bg-card: rgba(17, 24, 33, 0.65); 
    --bg-card-hover: rgba(26, 35, 47, 0.85); 
    --text-main: #ffffff;      
    --text-muted: #a0aec0;     
    --accent-primary: #10b981; 
    --accent-hover: #059669;   
    --border-glass: rgba(255, 255, 255, 0.1);
    --border-glass-hover: rgba(16, 185, 129, 0.5);
    --banner-overlay-gradient: linear-gradient(to bottom, rgba(6, 9, 15, 0.4) 0%, rgba(6, 9, 15, 0.85) 100%);
}

@font-face { 
    font-family: "Semplice Pro"; 
    src: url("./fonts/SemplicitaPro-Regular.woff2") format("woff2"); 
    font-weight: 400; 
    font-style: normal; 
    font-display: swap; /* SEO/Performance: Eliminates invisible text while loading */
}

@font-face { 
    font-family: "Semplice Pro"; 
    src: url("./fonts/SemplicitaPro-Medium.woff2") format("woff2"); 
    font-weight: 500; 
    font-style: normal; 
    font-display: swap;
}

@font-face { 
    font-family: "Semplice Pro"; 
    src: url("./fonts/SemplicitaPro-Bold.woff2") format("woff2"); 
    font-weight: 700; 
    font-style: normal; 
    font-display: swap;
}

@font-face { 
    font-family: "Kumbh Sans"; 
    src: url("./fonts/KumbhSans-Regular.woff") format("woff"); 
    font-weight: 400; 
    font-style: normal; 
    font-display: swap;
}

@font-face { 
    font-family: "Kumbh Sans"; 
    src: url("./fonts/KumbhSans-Bold.woff") format("woff"); 
    font-weight: 700; 
    font-style: normal; 
    font-display: swap;
}

@font-face { 
    font-family: "Kumbh Sans"; 
    src: url("./fonts/KumbhSans-Light.woff") format("woff"); 
    font-weight: 300; 
    font-style: normal; 
    font-display: swap;
}

.title, 
.services-header h2, 
.about-subtitle, 
.about-title, 
.badge-title, 
.partner-title, 
.main-title, 
.number, 
.panel-title, 
.location-head .sub, 
.banner-text { 
    font-family: "Semplice Pro", sans-serif; 
}

body, 
.btn-tactical, 
.hero .subtitle, 
.service-card h3, 
.service-card p, 
.about-description, 
.site-footer { 
    font-family: "Kumbh Sans", sans-serif; 
}

/* =========================================
   02. BASE SETUP & CURSOR
   ========================================= */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    -webkit-tap-highlight-color: transparent !important; 
}

*:focus { 
    outline: none !important; 
}

*:focus-visible { 
    outline: 2px solid var(--accent-primary); 
    outline-offset: 3px; 
}

body { 
    overflow-x: hidden !important; 
    background: radial-gradient(circle at 50% -20%, #111a28 0%, var(--bg-main) 100%); 
    background-attachment: fixed; 
    color: var(--text-main); 
    text-rendering: optimizeLegibility; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
}

body.mobile-lock { 
    overflow: hidden !important; 
}

.cursor-dot, 
.cursor-outline { 
    display: none !important; 
}

.hero-overlay, 
.video-container, 
.flag-img-container, 
.bg-layer, 
.bg-layer::after, 
.footer-lights-container, 
.menu-overlay { 
    position: absolute; 
    inset: 0; 
}

.glass-card, 
.mobile-menu, 
.tactical-badge, 
.glass-panel { 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px); 
    transform: translateZ(0); 
    backface-visibility: hidden;
}

/* MASSIVE SEO & SPEED BOOST: Instructs browser to skip painting off-screen sections 
   FIX: Removed content-visibility: auto to ensure AOS layout calculation works properly for footer */
.services-section, 
.about-section, 
.faq-section, 
.testimonial-wrapper, 
.locations, 
.tactical-banner,
.partner-locations { 
    overflow: clip; 
    background-color: transparent; 
    contain: paint style; 
}

/* =========================================
   03. UTILITY CLASSES
   ========================================= */
.glass-card { 
    background: linear-gradient(135deg, rgba(26, 35, 47, 0.7) 0%, rgba(17, 24, 33, 0.9) 100%); 
    border: 1px solid var(--border-glass); 
    border-top: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1); 
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease; 
    will-change: transform, box-shadow;
}

.glass-card:hover { 
    background: linear-gradient(135deg, rgba(30, 42, 56, 0.8) 0%, rgba(20, 28, 38, 1) 100%); 
    border-color: rgba(16, 185, 129, 0.6); 
    box-shadow: 0 20px 45px rgba(16, 185, 129, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); 
    transform: translate3d(0, -8px, 0); 
}

.btn-tactical { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 10px; 
    background: rgba(16, 185, 129, 0.1); 
    color: #ffffff; 
    padding: 14px 35px; 
    border-radius: 4px; 
    border: 1px solid var(--accent-primary); 
    text-decoration: none; 
    font-weight: 600; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    white-space: nowrap; 
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.4s ease, box-shadow 0.4s ease, color 0.4s ease; 
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.2), inset 0 0 10px rgba(16, 185, 129, 0.1); 
    position: relative; 
    overflow: hidden; 
    cursor: pointer; 
    transform: translateZ(0);
    will-change: transform, box-shadow, background-color;
}

/* GPU OPTIMIZED: Replaced layout-thrashing 'left' with 'transform: translateX' */
.btn-tactical::before { 
    content: ''; 
    position: absolute; 
    inset: 0; 
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); 
    transform: translateX(-100%);
    transition: transform 0.5s ease; 
    will-change: transform;
}

.btn-tactical:hover { 
    background: var(--accent-primary); 
    color: #06090f; 
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.5), inset 0 0 0 rgba(16, 185, 129, 0); 
    transform: translate3d(0, -3px, 0); 
}

.btn-tactical:hover::before { 
    transform: translateX(100%);
}

.system-status { 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
}

.status-dot { 
    display: inline-block; 
    width: 10px; 
    height: 10px; 
    background-color: var(--accent-primary); 
    border-radius: 50%; 
    box-shadow: 0 0 10px var(--accent-primary), 0 0 20px var(--accent-primary); 
    animation: pulseDot 1.5s infinite; 
    flex-shrink: 0; 
    transform: translateZ(0);
    will-change: transform, box-shadow;
}

@keyframes pulseDot { 
    0%, 100% { 
        transform: scale3d(0.95, 0.95, 1); 
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); 
    } 
    70% { 
        transform: scale3d(1, 1, 1); 
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); 
    } 
}

/* =========================================
   04. NAVBAR & MOBILE MENU
   ========================================= */
.navbar { 
    position: fixed !important; 
    top: 0 !important; 
    left: 0; 
    width: 100%; 
    padding: 25px 50px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    z-index: 1000; 
    background: rgba(10, 14, 23, 0.85) !important; 
    backdrop-filter: blur(10px) !important; 
    -webkit-backdrop-filter: blur(10px) !important; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; 
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4) !important; 
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), background 0.4s ease !important; 
    transform: translateZ(0); 
    will-change: transform;
}

.logo-icon { 
    width: 65px; 
    height: 65px; 
    background: transparent; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    overflow: hidden; 
}

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

.nav-links { 
    position: absolute; 
    left: 50%; 
    transform: translate3d(-50%, 0, 0); 
    display: flex; 
    list-style: none; 
    gap: 40px; 
}

.nav-links a { 
    text-decoration: none; 
    color: var(--text-main); 
    font-size: 17px; 
    font-weight: 500; 
    position: relative; 
    padding-bottom: 5px; 
    transition: color 0.3s ease; 
    text-shadow: 0 2px 4px rgba(0,0,0,0.8); 
}

.nav-links a::after { 
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 0; 
    height: 2px; 
    background: var(--accent-primary); 
    transition: width 0.3s ease; 
}

.nav-links a:hover, 
.nav-links a.active { 
    color: #fff; 
}

.nav-links a:hover::after, 
.nav-links a.active::after { 
    width: 100%; 
}

.nav-right { 
    display: flex; 
    align-items: center; 
    gap: 30px; 
}

/* 🚨 MAGIC SCROLL FIX APPLIED HERE 🚨 */
.mobile-menu { 
    position: fixed; 
    top: 0; 
    right: 0; 
    transform: translate3d(100%, 0, 0); 
    width: 100%; 
    max-width: 420px; 
    height: 100vh; 
    background: rgba(10, 14, 23, 0.98); /* Slightly darker for readability */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 40px 30px 120px; /* Added 120px bottom padding so buttons don't cut off */
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); 
    z-index: 1001; 
    display: flex; 
    flex-direction: column; 
    border-left: 1px solid rgba(16, 185, 129, 0.2); 
    box-shadow: -10px 0 40px rgba(0,0,0,0.5); 
    will-change: transform;
    overflow-y: auto !important; /* Enables scrolling */
    overflow-x: hidden !important; /* Prevents sideways shaking */
}

/* Custom Scrollbar for Mobile Menu */
.mobile-menu::-webkit-scrollbar { width: 5px; }
.mobile-menu::-webkit-scrollbar-thumb { background: var(--accent-primary); border-radius: 5px; }

.mobile-menu.active { 
    transform: translate3d(0, 0, 0) !important; 
}

.mobile-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 50px; 
    flex-shrink: 0; /* Prevents header from shrinking */
}

.mobile-logo-img { 
    width: 55px; 
    height: 55px; 
}

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

.close-menu { 
    font-size: 26px; 
    color: white; 
    transition: transform 0.3s, color 0.3s; 
    cursor: pointer; 
    will-change: transform;
}

.close-menu:hover { 
    color: var(--accent-primary); 
    transform: rotate(90deg) translateZ(0); 
}

.mobile-links { 
    list-style: none; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    margin-top: 20px; 
    flex-grow: 1; /* Takes up available space naturally */
}

.mobile-links li { 
    opacity: 0; 
    transform: translate3d(20px, 0, 0); 
    will-change: transform, opacity;
}

.mobile-menu.active .mobile-links li { 
    animation: fadeSlideIn 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; 
}

.mobile-menu.active .mobile-links li:nth-child(1) { animation-delay: 0.1s; }
.mobile-menu.active .mobile-links li:nth-child(2) { animation-delay: 0.2s; }
.mobile-menu.active .mobile-links li:nth-child(3) { animation-delay: 0.3s; }
.mobile-menu.active .mobile-links li:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeSlideIn { 
    to { 
        opacity: 1; 
        transform: translate3d(0, 0, 0); 
    } 
}

.mobile-links a { 
    font-size: 26px; 
    color: var(--text-muted); 
    text-decoration: none; 
    font-weight: 600; 
    display: flex; 
    align-items: center; 
    padding: 14px 20px; 
    border-radius: 8px; 
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease; 
    position: relative; 
    transform: translateZ(0);
}

.mobile-links a.active { 
    color: #fff; 
    background: rgba(16, 185, 129, 0.1); 
}

.mobile-links a.active::before { 
    content: ''; 
    position: absolute; 
    left: 0; 
    top: 50%; 
    transform: translate3d(0, -50%, 0); 
    height: 60%; 
    width: 4px; 
    background: var(--accent-primary); 
    border-radius: 0 4px 4px 0; 
}

.mobile-links a:hover { 
    color: #fff; 
    background: rgba(255, 255, 255, 0.05); 
    transform: translate3d(10px, 0, 0); 
}

.mobile-links a.active:hover { 
    transform: none; 
}

/* 🚨 FIXED BUTTON POSITIONING 🚨 */
.mobile-btn { 
    margin-top: 40px; /* Removed 'auto' so it respects the scroll flow */
    text-align: center; 
    width: 100%; 
    display: flex;
    justify-content: center; 
    flex-shrink: 0;
}

.menu-toggle { 
    display: none; 
    flex-direction: column; 
    gap: 6px; 
    z-index: 9999 !important; 
    position: relative !important; 
    cursor: pointer !important; 
    pointer-events: auto !important; 
    padding: 10px; 
    margin: -10px; 
}

.menu-toggle span { 
    width: 30px; 
    height: 3px; 
    background-color: white; 
    display: block; 
    border-radius: 5px; 
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.4s ease, opacity 0.4s ease; 
    transform: translateZ(0);
}

.menu-toggle.active span:nth-child(1) { 
    transform: translate3d(0, 9px, 0) rotate(45deg); 
    background-color: var(--accent-primary); 
}

.menu-toggle.active span:nth-child(2) { 
    opacity: 0; 
    transform: translate3d(-20px, 0, 0); 
}

.menu-toggle.active span:nth-child(3) { 
    transform: translate3d(0, -9px, 0) rotate(-45deg); 
    background-color: var(--accent-primary); 
}

.menu-overlay { 
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6); 
    backdrop-filter: blur(5px); 
    opacity: 0; 
    visibility: hidden; 
    z-index: 998; 
    transition: opacity 0.5s, visibility 0.5s; 
    transform: translateZ(0);
}

.menu-overlay.active { 
    opacity: 1; 
    visibility: visible; 
}
/* =========================================
   05. HERO & ELITE BANNER PROTOCOL
   ========================================= */
.hero { 
    position: relative; 
    width: 100%; 
    height: 100vh; 
    overflow: hidden; 
    background-color: var(--bg-main); 
    background-size: cover; 
    background-position: center; 
}

.hero-overlay { 
    background: linear-gradient(180deg, rgba(6, 9, 15, 0.2) 0%, rgba(6, 9, 15, 0.6) 70%, var(--bg-main) 100%); 
    z-index: 2; 
    pointer-events: none; 
}

.video-container { 
    z-index: 1; 
}

.hero-video { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    opacity: 0.8; 
}

.slide-content { 
    position: absolute; 
    bottom: 120px; 
    left: 50px; 
    z-index: 10; 
}

.page-title-section, 
.admin-banner { 
    position: relative !important; 
    overflow: hidden !important; 
    height: 40vh !important; 
    min-height: 380px !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    text-align: center !important; 
    padding-top: 100px !important; 
    margin-top: 0 !important; 
    border-bottom: 1px solid var(--border-glass) !important; 
    box-sizing: border-box !important; 
    background-clip: padding-box !important; 
    background-size: cover !important; 
    background-position: center !important; 
    background-repeat: no-repeat !important; 
}

.banner-overlay, 
.admin-banner::before, 
.page-title-section::before { 
    content: ''; 
    position: absolute !important; 
    inset: 0 !important; 
    background: var(--banner-overlay-gradient) !important; 
    z-index: 1 !important; 
    pointer-events: none !important; 
    margin: 0 !important; 
}

.page-title-content, 
.admin-banner-content { 
    position: relative !important; 
    z-index: 5 !important; 
    width: 100% !important; 
    max-width: 1200px !important; 
    padding: 0 20px !important; 
}

.page-title-content h1, 
.admin-banner-content h1 { 
    font-size: clamp(38px, 6vw, 60px) !important; 
    font-family: 'Semplice Pro', sans-serif !important; 
    font-weight: 700 !important; 
    color: #fff !important; 
    text-transform: capitalize !important; 
    letter-spacing: 2px !important; 
    margin-bottom: 15px !important; 
}

.hero .subtitle { 
    font-size: 11px; 
    font-weight: 600; 
    letter-spacing: 3px; 
    color: var(--accent-primary) !important; 
    margin-bottom: 20px; 
    text-transform: uppercase; 
    text-shadow: 0 2px 5px rgba(0,0,0,0.8); 
    display: inline-flex; 
}

.title { 
    font-size: 6rem; 
    font-weight: 800; 
    color: white; 
    line-height: 1.1; 
    letter-spacing: 2px; 
    text-shadow: 0 4px 15px rgba(0,0,0,0.6); 
}

.title span { 
    display: block; 
}

.hero-bottom { 
    position: absolute; 
    bottom: 40px; 
    left: 50px; 
    right: 50px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    z-index: 100; 
}

.scroll-down { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    color: white; 
    font-size: 12px; 
    font-weight: 600; 
    letter-spacing: 2px; 
    transition: text-shadow 0.3s ease; 
    text-shadow: 0 2px 5px rgba(0,0,0,0.8); 
    cursor: pointer; 
}

/* =========================================
   06. SERVICES SECTION
   ========================================= */
.services-section { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    padding: 100px 20px 80px 20px !important; 
    background: #0a0e17 !important; 
    z-index: 1; 
    border-bottom: none !important; 
    position: relative; 
}

/* GPU OPTIMIZED: Replaced background-position animation with transform for the grid pan */
.services-section::before { 
    content: ''; 
    position: absolute; 
    top: -40px; 
    left: -40px;
    width: calc(100% + 80px);
    height: calc(100% + 80px);
    background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); 
    background-size: 40px 40px; 
    z-index: -2; 
    animation: panGridGPU 20s linear infinite; 
    will-change: transform;
}

.services-section::after { 
    content: ''; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 90vw; 
    height: 90vw; 
    max-width: 1000px; 
    max-height: 1000px; 
    background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 65%) !important; 
    transform: translate3d(-50%, -50%, 0); 
    z-index: -1; 
    animation: pulseGlow 4s ease-in-out infinite alternate !important; 
    pointer-events: none; 
    will-change: transform, opacity; 
}

@keyframes panGridGPU { 
    0% { transform: translate3d(0, 0, 0); } 
    100% { transform: translate3d(40px, 40px, 0); } 
}

@keyframes pulseGlow { 
    0% { 
        transform: translate3d(-50%, -50%, 0) scale3d(0.95, 0.95, 1); 
        opacity: 0.8; 
    } 
    100% { 
        transform: translate3d(-50%, -50%, 0) scale3d(1.15, 1.15, 1); 
        opacity: 1; 
        filter: brightness(1.2); 
    } 
}

.services-content-wrapper { 
    max-width: 1200px; 
    width: 100%; 
    text-align: center; 
    position: relative; 
    z-index: 1; 
}

.services-header { 
    margin-bottom: 50px; 
}

.services-header .subtitle { 
    justify-content: center; 
} 

.services-header h2 { 
    font-size: clamp(28px, 5vw, 48px); 
    color: var(--text-main); 
    line-height: 1.2; 
    text-shadow: 0 2px 10px rgba(0,0,0,0.5); 
}

.services-grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 30px; 
}

.service-card { 
    padding: 60px 40px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
    border-radius: 16px; 
    cursor: pointer; 
    transform: translateZ(0);
}

.service-card .icon { 
    width: 55px; 
    height: 55px; 
    margin-bottom: 25px; 
    stroke: var(--accent-primary); 
    stroke-width: 1.5; 
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), stroke 0.3s ease; 
    will-change: transform;
}

.service-card h3 { 
    font-size: 22px; 
    font-weight: 700; 
    margin-bottom: 15px; 
    color: var(--text-main); 
}

.service-card p { 
    font-size: 15.5px; 
    color: var(--text-muted); 
    line-height: 1.8; 
}

.service-card:hover .icon { 
    stroke: #fff; 
    transform: scale3d(1.1, 1.1, 1); 
}

/* =========================================
   07. ABOUT SECTION (RADAR RESTORED & GPU OPTIMIZED)
   ========================================= */
.about-section { 
    position: relative; 
    padding: 40px 0 120px 0 !important; 
    background: #0a0e17 !important; 
    border-top: none !important; 
    margin-top: 0 !important; 
    overflow: hidden; 
}

.about-section::before { 
    content: ''; 
    position: absolute; 
    inset: 0; 
    background: linear-gradient(to bottom, #0a0e17 0%, transparent 15%, transparent 85%, #0a0e17 100%); 
    z-index: 2; 
    pointer-events: none; 
}

.about-bg-radar { 
    position: absolute; 
    inset: 0; 
    background-image: linear-gradient(rgba(16, 185, 129, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 185, 129, 0.03) 1px, transparent 1px); 
    background-size: 50px 50px; 
    z-index: 1; 
    opacity: 0.8; 
}

.about-bg-radar::after { 
    content: ''; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 200vw; 
    height: 200vw; 
    background: conic-gradient(from 0deg, transparent 70%, rgba(16, 185, 129, 0.15) 100%); 
    transform-origin: center; 
    animation: radarSpin 8s linear infinite; 
    transform: translate3d(-50%, -50%, 0); 
    will-change: transform; 
    pointer-events: none; 
}

@keyframes radarSpin { 
    0% { transform: translate3d(-50%, -50%, 0) rotate(0deg); } 
    100% { transform: translate3d(-50%, -50%, 0) rotate(360deg); } 
}

.about-container { 
    max-width: 1440px; 
    width: 100%; 
    margin: 0 auto; 
    display: flex; 
    align-items: center; 
    padding: 0 100px; 
    position: relative; 
    z-index: 3; 
}

.asymmetrical-layout .about-images-group { 
    width: 45%; 
    position: relative; 
    z-index: 4; 
}

.tactical-badge { 
    position: absolute; 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    background: rgba(17, 24, 33, 0.85); 
    border: 1px solid rgba(16, 185, 129, 0.3); 
    padding: 15px 20px; 
    border-radius: 8px; 
    color: white; 
    z-index: 10; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
}

.tactical-badge i { 
    color: var(--accent-primary); 
    font-size: 24px; 
}

.badge-title { 
    display: block; 
    font-weight: 700; 
    font-size: 1.1rem; 
    line-height: 1.2; 
}

.badge-sub { 
    display: block; 
    font-size: 0.75rem; 
    color: var(--accent-primary); 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    margin-top: 2px; 
}

.badge-1 { 
    top: 10%; 
    right: -15%; 
}

.badge-2 { 
    bottom: 10%; 
    left: -10%; 
}

.guard-wrapper, 
.glass-panel { 
    border: 1px solid rgba(255, 255, 255, 0.05) !important; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.5) !important; 
    outline: none !important; 
}

.guard-wrapper::before, 
.guard-wrapper::after { 
    display: none !important; 
}

.guard-wrapper { 
    position: relative; 
    width: 100%; 
    max-width: 600px; 
    border-radius: 16px; 
    padding: 8px; 
    overflow: hidden !important; 
    transform: translateZ(0);
}

.guard-img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover !important; 
    transform-origin: top center !important; 
    display: block; 
    transition: transform 0.1s ease-out; 
}

[data-aos="cyber-scan"] { 
    overflow: hidden; 
    position: relative; 
}

[data-aos="cyber-scan"] .guard-img { 
    filter: brightness(0) blur(10px); 
    transform: scale3d(1.2, 1.2, 1); 
    transition: transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1), filter 1.5s cubic-bezier(0.2, 0.8, 0.2, 1); 
    border-radius: 10px; 
    will-change: transform, filter; 
}

[data-aos="cyber-scan"].aos-animate .guard-img { 
    filter: brightness(0.9) grayscale(20%) blur(0px); 
    transform: scale3d(1, 1, 1); 
} 

.scanner-line { 
    position: absolute;
    width: 100%;
    height: 4px; 
    background: var(--accent-primary); 
    box-shadow: 0 0 20px var(--accent-primary), 0 0 40px var(--accent-primary); 
    z-index: 10; 
    opacity: 0; 
    transform: translateY(-10px); 
    will-change: transform, opacity;
}

[data-aos="cyber-scan"].aos-animate .scanner-line { 
    animation: scanSweep 1.5s ease-in-out forwards; 
}

/* GPU OPTIMIZED: Replaced translate3d with scale-agnostic translateY layout shift */
@keyframes scanSweep { 
    0% { opacity: 1; transform: translateY(0); } 
    100% { opacity: 0; transform: translateY(600px); /* Arbitrary high value to sweep across */ } 
}

.glass-panel { 
    width: 60%; 
    margin-left: -8%; 
    background: linear-gradient(135deg, rgba(26, 35, 47, 0.75) 0%, rgba(17, 24, 33, 0.95) 100%); 
    padding: 60px 60px 60px 80px; 
    border-radius: 16px; 
    border: 1px solid var(--border-glass); 
    border-top: 1px solid rgba(255, 255, 255, 0.2); 
    transform: translate3d(0, 40px, 0); 
    z-index: 5; 
}

.about-subtitle { 
    color: var(--accent-primary); 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    font-size: 0.75rem; 
    font-weight: 700; 
    display: block; 
    margin-bottom: 20px; 
}

.about-title { 
    font-size: 3.8rem; 
    color: var(--text-main); 
    line-height: 1.15; 
    margin-bottom: 30px; 
    font-weight: 600; 
    text-shadow: 0 2px 10px rgba(0,0,0,0.5); 
}

.about-description { 
    color: var(--text-muted); 
    font-size: 1.05rem; 
    line-height: 1.8; 
    margin-bottom: 45px; 
    font-weight: 400; 
}

[data-aos="redact-animation"] { 
    position: relative; 
    opacity: 0; 
}

[data-aos="redact-animation"].aos-animate { 
    animation: textShow 0.1s 0.4s forwards; 
}

[data-aos="redact-animation"]::after { 
    content: ''; 
    position: absolute; 
    inset: 0; 
    background: var(--accent-primary); 
    transform-origin: left; 
    transform: scale3d(0, 1, 1); 
    z-index: 2; 
    will-change: transform;
}

[data-aos="redact-animation"].aos-animate::after { 
    animation: blockSweep 0.8s cubic-bezier(0.8, 0, 0.2, 1) forwards; 
}

@keyframes textShow { 
    to { opacity: 1; } 
}

@keyframes blockSweep { 
    0% { transform-origin: left; transform: scale3d(0, 1, 1); } 
    50% { transform-origin: left; transform: scale3d(1, 1, 1); } 
    51% { transform-origin: right; transform: scale3d(1, 1, 1); } 
    100% { transform-origin: right; transform: scale3d(0, 1, 1); } 
}

/* =========================================
   08. GLOBAL NETWORK (3D GLOBE)
   ========================================= */
.partner-locations { 
    position: relative; 
    background-color: transparent; 
    padding: 20px 0 60px 0; 
    color: var(--text-main); 
    overflow: hidden; 
    min-height: auto; 
}

#globe-section { 
    position: relative; 
}

.partner-locations-header { 
    margin-bottom: 20px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    pointer-events: auto; 
}

.partner-subtitle { 
    color: var(--accent-primary); 
    letter-spacing: 5px; 
    font-size: 11px; 
    font-weight: 600; 
    text-transform: uppercase; 
    justify-content: center; 
    text-shadow: 0 2px 4px rgba(0,0,0,0.8); 
}

.partner-title { 
    font-size: 3.5rem; 
    margin-top: 15px; 
    font-weight: 600; 
    text-transform: uppercase; 
}

/* 3D MAP GLOBE CSS */
#globe-viz-container::before { 
    content: ''; 
    position: absolute; 
    inset: 0 0 auto 0; 
    height: 15%; 
    background: linear-gradient(to bottom, var(--bg-main) 0%, transparent 100%); 
    z-index: 10; 
    pointer-events: none; 
}

#globe-viz-container::after { 
    content: ''; 
    position: absolute; 
    inset: auto 0 0 0; 
    height: 15%; 
    background: linear-gradient(to top, var(--bg-main) 0%, transparent 100%); 
    z-index: 10; 
    pointer-events: none; 
}

.glowing-city {
    border-radius: 50%;
    pointer-events: auto;
    cursor: pointer;
    position: relative;
    transform: translate3d(-50%, -50%, 0);
    animation: pulseGlowMap 2s infinite alternate;
    will-change: transform, opacity;
}

@keyframes pulseGlowMap {
    0% { transform: translate3d(-50%, -50%, 0) scale3d(0.8, 0.8, 1); opacity: 0.7; }
    100% { transform: translate3d(-50%, -50%, 0) scale3d(1.2, 1.2, 1); opacity: 1; }
}

.city-label {
    position: absolute;
    left: 120%;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    color: #fff;
    font-size: 11.5px;
    font-family: 'Semplice Pro', sans-serif;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.9);
    white-space: nowrap;
    pointer-events: none;
    font-weight: 600;
}

.partner-locations-container { 
    max-width: 1300px; 
    margin: 0 auto; 
    padding: 0 30px; 
    text-align: center; 
    position: relative; 
    z-index: 10; 
    pointer-events: none; 
}

.partner-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); 
    gap: 20px; 
    justify-content: center; 
    pointer-events: auto; 
}

.partner-box { 
    position: relative; 
    height: 180px; 
    border-radius: 12px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    overflow: hidden; 
    cursor: pointer; 
    pointer-events: auto; 
    transform: translateZ(0);
}

.flag-img-container { 
    z-index: 1; 
    opacity: 0; 
    transform: translate3d(0, 15px, 0); 
    mix-blend-mode: screen; 
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); 
    will-change: transform, opacity;
}

.hover-flag { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    filter: brightness(0.6) contrast(1.2); 
}

.partner-box h3 { 
    font-size: 1.3rem; 
    color: var(--text-main); 
    margin: 0; 
    font-weight: 500; 
    z-index: 2; 
    position: relative; 
    transition: color 0.3s ease, letter-spacing 0.3s ease, text-shadow 0.3s ease; 
    text-align: center; 
}

.region-tag { 
    display: inline-block; 
    font-size: 0.65rem; 
    color: var(--accent-primary); 
    letter-spacing: 2px; 
    margin-top: 8px; 
    font-weight: 700; 
    z-index: 2; 
    position: relative; 
    transition: background-color 0.3s ease, color 0.3s ease, padding 0.3s ease; 
}

.partner-box:hover .flag-img-container { 
    opacity: 0.25; 
    transform: translate3d(0, 0, 0); 
}

.partner-box:hover h3 { 
    color: #ffffff; 
    letter-spacing: 1px; 
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.9); 
}

.partner-box:hover .region-tag { 
    color: #ffffff; 
    background-color: var(--accent-primary); 
    padding: 2px 10px; 
    border-radius: 2px; 
}

/* =========================================
   09. CORE SERVICES GALLERY
   ========================================= */
.team-gallery-container { 
    padding: 80px 0; 
    background-color: transparent; 
    color: white; 
}

.services-header { 
    max-width: 800px; 
    margin: 0 auto 50px auto; 
    text-align: center; 
    padding: 0 20px; 
}

.services-header .partner-subtitle { 
    justify-content: center; 
} 

.main-title { 
    font-size: clamp(32px, 5vw, 52px); 
    margin-top: 15px; 
    margin-bottom: 12px; 
    font-weight: 600; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
}

.services { 
    height: 80vh; 
    min-height: 600px; 
    position: relative; 
    overflow: hidden; 
    border-top: 1px solid var(--border-glass); 
    border-bottom: 1px solid var(--border-glass); 
    transform: translateZ(0);
}

.bg-layer { 
    background-size: cover; 
    background-position: center; 
    transition: opacity 0.4s ease-in-out, transform 0.8s ease-out !important; 
    transform: scale3d(1.05, 1.05, 1); 
    z-index: 1; 
    will-change: transform, opacity;
}

.bg-layer::after { 
    background: linear-gradient(to bottom, rgba(6,9,15,0.2), rgba(6,9,15,0.9)); 
}

.bg-active { 
    opacity: 1; 
    transform: scale3d(1, 1, 1); 
}

.bg-next { 
    opacity: 0; 
}

.bg-next.fade-in { 
    opacity: 1; 
    z-index: 2; 
} 

.panels { 
    position: relative; 
    z-index: 3; 
    display: flex; 
    height: 100%; 
}

.panel-container { 
    flex: 1; 
    display: flex; 
    border-left: 1px solid var(--border-glass); 
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), flex 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease !important; 
    cursor: pointer; 
    will-change: transform, flex;
}

.panel-container:first-child { 
    border-left: none; 
}

.panel-container.hover-lift { 
    transform: translate3d(0, -10px, 0) scale3d(1.02, 1.02, 1); 
    z-index: 10; 
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.15); 
}

.panel-container.active { 
    flex: 1.2; 
    transform: scale3d(1.05, 1.05, 1) !important; 
    z-index: 20 !important; 
    box-shadow: 0 30px 60px rgba(16, 185, 129, 0.25) !important; 
}

.panel { 
    position: relative; 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-end; 
    padding: 60px 45px; 
    width: 100%; 
    height: 100%; 
    background: rgba(6, 9, 15, 0.65); 
    backdrop-filter: blur(4px); 
    -webkit-backdrop-filter: blur(4px); 
    transition: background 0.5s ease; 
}

.target-corners { 
    position: absolute; 
    inset: 20px; 
    pointer-events: none; 
    opacity: 0; 
    transform: scale3d(1.1, 1.1, 1); 
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease, inset 0.5s ease; 
    will-change: transform, opacity;
}

.panel-container.active .target-corners { 
    opacity: 1; 
    transform: scale3d(1, 1, 1); 
    inset: 15px; 
    z-index: 10; 
}

.target-corners span { 
    position: absolute; 
    width: 30px; 
    height: 30px; 
    border-color: var(--accent-primary); 
    border-style: solid; 
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3); 
    border-width: 3px !important; 
}

.target-corners .tl { top: 0; left: 0; border-width: 3px 0 0 3px !important; }
.target-corners .tr { top: 0; right: 0; border-width: 3px 3px 0 0 !important; }
.target-corners .bl { bottom: 0; left: 0; border-width: 0 0 3px 3px !important; }
.target-corners .br { bottom: 0; right: 0; border-width: 0 3px 3px 0 !important; }

.panel-container.active .panel { 
    background: linear-gradient(to top, rgba(6, 9, 15, 0.95) 0%, rgba(6, 9, 15, 0.3) 60%, rgba(6, 9, 15, 0.1) 100%); 
}

.content-wrapper { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    opacity: 0.5; 
    transform: translate3d(0, 20px, 0); 
    transition: transform 0.5s ease, opacity 0.5s ease; 
    will-change: transform, opacity;
}

.number { 
    font-size: clamp(40px, 6vw, 70px); 
    color: #fff; 
    font-weight: 300; 
    margin-bottom: 20px; 
    text-shadow: 0 2px 10px rgba(0,0,0,0.5); 
}

.panel-title { 
    font-size: clamp(22px, 3vw, 34px); 
    margin: 0 0 10px 0; 
    font-weight: 600; 
    text-shadow: 0 2px 10px rgba(0,0,0,0.8); 
}

@keyframes decryptReveal { 
    0% { opacity: 0; filter: blur(5px); transform: translate3d(0, 15px, 0); } 
    40% { opacity: 0.5; filter: blur(2px); transform: translate3d(0, 0, 0); } 
    50% { opacity: 0.2; } 
    60% { opacity: 0.8; } 
    70% { opacity: 0.4; } 
    100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0); } 
}

.expandable-content { 
    max-height: 0; 
    opacity: 0; 
    overflow: hidden; 
    transition: max-height 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease, margin 0.6s ease; 
    margin-top: 0; 
}

.panel-container.active .content-wrapper { 
    opacity: 1; 
    transform: translate3d(0, 0, 0); 
}

.panel-container.active .expandable-content { 
    max-height: 300px; 
    opacity: 1; 
    margin-top: 15px; 
    overflow: visible; 
}

.panel-container.active .panel-description { 
    animation: decryptReveal 0.8s ease-out forwards; 
    animation-delay: 0.1s; 
    opacity: 0; 
}

.panel-container.active .btn-tactical { 
    animation: decryptReveal 0.8s ease-out forwards; 
    animation-delay: 0.3s; 
    opacity: 0; 
    margin-top: 10px; 
}

.panel-description { 
    font-family: 'Courier New', Courier, monospace; 
    font-size: 0.95rem; 
    line-height: 1.6; 
    color: rgba(255, 255, 255, 0.8); 
    margin-bottom: 20px; 
    max-width: 350px; 
    text-shadow: 0 2px 5px rgba(0,0,0,0.8); 
    letter-spacing: 0.5px; 
}

/* =========================================
   10. FAQ SECTION 
   ========================================= */
.faq-section { 
    min-height: 80vh; 
    display: flex; 
    align-items: center; 
    padding: 80px 8%; 
    position: relative; 
    overflow: hidden; 
    background-color: transparent; 
}

.faq-container { 
    width: 100%; 
    max-width: 1200px; 
    margin: 0 auto; 
    display: flex; 
    flex-wrap: wrap; 
    gap: 50px; 
    align-items: stretch !important; 
}

.faq-image { 
    display: flex; 
    flex-direction: column; 
    border-radius: 16px; 
    flex: 1 1 400px; 
    max-width: 100%; 
}

.faq-image img { 
    width: 100%; 
    height: 100% !important; 
    flex-grow: 1; 
    object-fit: cover !important; 
    display: block; 
    border-radius: 16px; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.6); 
    transform: translateZ(0);
}

.faq-content { 
    flex: 1 1 500px; 
    max-width: 100%; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
}

.faq-small { 
    font-size: 12px; 
    letter-spacing: 2px; 
    opacity: 0.9; 
    margin-bottom: 15px; 
    color: var(--accent-primary); 
    font-weight: 700; 
    display: flex; 
    align-items: center; 
}

.faq-content h2 { 
    font-size: 42px; 
    line-height: 1.2; 
    margin-bottom: 30px; 
    color: var(--text-main); 
    text-shadow: 0 2px 10px rgba(0,0,0,0.5); 
}

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

.faq-item { 
    background: rgba(255, 255, 255, 0.02) !important; 
    border: 1px solid rgba(255, 255, 255, 0.05) !important; 
    border-radius: 16px !important; 
    padding: 24px 28px !important; 
    margin-bottom: 0 !important; 
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important; 
    overflow: hidden; 
    transform: translateZ(0);
    will-change: transform, box-shadow, background;
}

.faq-question { 
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: center !important; 
    cursor: pointer; 
}

.faq-question h4 { 
    font-size: 1.15rem !important; 
    font-weight: 500 !important; 
    margin: 0 !important; 
    color: var(--text-main); 
    line-height: 1.4 !important; 
}

.arrow { 
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); 
    color: var(--accent-primary); 
    will-change: transform;
}

.faq-answer { 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease, margin 0.5s ease, padding 0.5s ease; 
    margin-top: 0 !important; 
    padding-top: 0 !important; 
    border-top: 1px solid transparent !important; 
    opacity: 0; 
}

.faq-item.active { 
    background: rgba(16, 185, 129, 0.08) !important; 
    border-color: rgba(16, 185, 129, 0.4) !important; 
    transform: translate3d(12px, 0, 0) !important; 
    box-shadow: -8px 15px 30px rgba(0, 0, 0, 0.4), inset 4px 0 0 #10b981 !important; 
}

.faq-item:hover:not(.active) { 
    background: rgba(255, 255, 255, 0.06) !important; 
    border-color: rgba(16, 185, 129, 0.4) !important; 
    transform: translate3d(8px, 0, 0) !important; 
    box-shadow: -5px 10px 25px rgba(0, 0, 0, 0.3), inset 3px 0 0 #10b981 !important; 
}

.faq-item.active .arrow { 
    transform: rotate(90deg); 
}

.faq-item.active .faq-answer { 
    opacity: 1; 
    margin-top: 16px !important; 
    padding-top: 16px !important; 
    border-top: 1px solid rgba(255,255,255,0.05) !important; 
}

.faq-answer p { 
    color: #94a3b8 !important; 
    line-height: 1.8 !important; 
    font-size: 1rem !important; 
    margin: 0 !important; 
}

/* =========================================
   11. TACTICAL BANNER CTA (FIXED LAYOUT)
   ========================================= */
.tactical-banner { 
    position: relative; 
    width: 100%; 
    min-height: 220px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 40px 20px; 
    background: linear-gradient(270deg, #05080c, #0d141e, #06090f, rgba(16, 185, 129, 0.05)); 
    background-size: 400% 400%; 
    animation: bannerGlow 8s ease infinite; 
    border-top: 1px solid var(--border-glass); 
    border-bottom: 1px solid var(--border-glass); 
    overflow: hidden; 
    transform: translateZ(0);
}

@keyframes bannerGlow { 
    0%, 100% { background-position: 0% 50%; } 
    50% { background-position: 100% 50%; } 
}

/* GPU OPTIMIZED: Converted animate 'left' to absolute translate for scanline */
.banner-scanline { 
    position: absolute;
    width: 50%; 
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.15), transparent); 
    transform: translateX(-100%) skewX(-45deg); 
    animation: tacticalScanGPU 4s linear infinite; 
    pointer-events: none; 
    z-index: 1; 
    will-change: transform;
}

@keyframes tacticalScanGPU { 
    0% { transform: translateX(-200%) skewX(-45deg); } 
    100% { transform: translateX(400%) skewX(-45deg); } 
}

.banner-inner { 
    width: 100%; 
    max-width: 1200px; 
    margin: 0 auto; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 30px; 
    flex-wrap: wrap; 
    position: relative; 
    z-index: 2; 
}

.banner-text { 
    display: flex; 
    flex-direction: column;
    align-items: flex-start; 
    gap: 10px; 
    color: #fff; 
    font-size: clamp(22px, 4vw, 42px); 
    font-weight: 600; 
    line-height: 1.3; 
    max-width: 750px; 
    text-align: left;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8); 
    flex: 1;
}

/* =========================================
   12. STRATEGIC PRESENCE (LOCATIONS)
   ========================================= */
.locations { 
    position: relative; 
    padding: 100px 20px; 
    background: transparent !important; 
    color: #fff; 
}

.location-head { 
    text-align: center; 
    margin-bottom: 60px; 
}

.location-head .sub { 
    letter-spacing: 2px; 
    font-size: 13px; 
    color: var(--accent-primary); 
    font-weight: 700; 
    margin-bottom: 25px !important; 
    justify-content: center; 
}

.location-head h2 { 
    font-size: clamp(30px, 4vw, 48px); 
    margin: 0; 
    font-weight: 600; 
    color: var(--text-main); 
    text-shadow: 0 2px 10px rgba(0,0,0,0.5); 
}

.location-grid { 
    display: grid !important; 
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 24px !important; 
    margin-top: 50px; 
    align-items: stretch !important; 
}

.location-card { 
    display: flex !important; 
    flex-direction: column !important; 
    height: 100% !important; 
    min-height: 280px !important; 
    padding: 32px !important; 
    box-sizing: border-box !important; 
    border-left: 3px solid #333; 
    border-radius: 12px; 
    transition: border-color 0.35s ease; 
    position: relative; 
    overflow: hidden; 
    transform: translateZ(0);
}

.location-card.office-detailed { 
    border-left: 3px solid var(--accent-primary); 
}

.location-card h3 { 
    font-size: 20px; 
    font-weight: 600; 
    margin-bottom: 20px !important; 
    color: #fff; 
    display: flex; 
    align-items: center; 
}

.location-card h3 span { 
    color: var(--accent-primary); 
    margin-right: 10px; 
    font-size: 16px; 
}

.office-info { 
    display: flex !important; 
    flex-direction: column !important; 
    flex-grow: 1 !important; 
    justify-content: space-between !important; 
    margin-top: 15px; 
    padding-top: 15px; 
    border-top: 1px solid var(--border-glass); 
}

.office-info p { 
    font-size: 14px; 
    color: var(--text-muted); 
    line-height: 1.6; 
    margin: 5px 0; 
}

.office-info strong { 
    color: #fff; 
    display: block; 
    margin-bottom: 2px; 
}

/* GPU OPTIMIZED: Shifted flag animation from 'right' positioning to transform */
.country-flag { 
    position: absolute; 
    top: 20px; 
    right: 30px; 
    width: 40px; 
    height: auto; 
    opacity: 0; 
    transform: translateX(80px);
    transition: transform 0.4s ease, opacity 0.4s ease; 
    border-radius: 4px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); 
    will-change: transform, opacity;
}

.location-card:hover .country-flag { 
    opacity: 1; 
    transform: translateX(0);
}

.location-card:hover h3, 
.location-card:hover h3 span, 
.location-card:hover .office-info p, 
.location-card:hover .office-info strong, 
.location-card:hover .tag { 
    color: #ffffff !important; 
}

.tag { 
    display: inline-block; 
    margin-top: auto !important; 
    padding-top: 20px; 
    font-weight: 600; 
    color: var(--accent-primary); 
    font-size: 12px !important; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
}

/* =========================================
   13. FOOTER
   ========================================= */
.site-footer { 
    background-color: transparent; 
    color: var(--text-muted); 
    position: relative; 
    overflow: hidden; 
    padding: 80px 0 30px; 
    font-size: 15px; 
    line-height: 1.8; 
    border-top: 1px solid var(--border-glass); 
}

.footer-lights-container { 
    opacity: 0.25; 
}

.footer-light { 
    position: absolute; 
    width: 5px; 
    height: 5px; 
    background: #85acff; 
    border-radius: 50%; 
    box-shadow: 0 0 12px 3px rgba(16, 185, 129, 0.8); 
    opacity: 50%; 
    animation: sequentialBlink infinite ease-in-out; 
    will-change: transform, opacity;
}

@keyframes sequentialBlink { 
    0%, 100% { opacity: 0; transform: scale3d(0.5, 0.5, 1); } 
    50% { opacity: 1; transform: scale3d(1.3, 1.3, 1); } 
}

.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 20px; 
    position: relative; 
    z-index: 1; 
}

.footer-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
    gap: 40px; 
    margin-bottom: 50px; 
}

.footer-col h3 { 
    color: #ffffff; 
    font-size: 18px; 
    margin-bottom: 25px; 
    font-weight: 600; 
}

.footer-col p { 
    margin-bottom: 12px; 
}

.footer-col a { 
    color: var(--text-muted); 
    text-decoration: none; 
    transition: color 0.3s ease; 
}

.footer-col a:hover { 
    color: var(--accent-primary); 
    font-weight: 600; 
}

.email-link { 
    border-bottom: 1px solid #9e9e9e; 
    padding-bottom: 2px; 
}

.email-link:hover { 
    border-bottom-color: var(--accent-primary); 
}

.phone { 
    color: #ffffff; 
    font-weight: 700; 
    font-size: 17px; 
    margin-top: 15px; 
}

.footer-col ul { 
    list-style: none; 
}

.footer-col ul li { 
    margin-bottom: 15px; 
}

.social-icons { 
    display: flex; 
    gap: 15px; 
}

.social-icons a { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    width: 52px; 
    height: 52px; 
    border: 1px solid var(--border-glass); 
    border-radius: 50%; 
    color: var(--accent-primary); 
    font-size: 16px; 
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; 
    transform: translateZ(0);
}

.social-icons a:hover { 
    background-color: var(--accent-primary); 
    color: var(--bg-main); 
    border-color: var(--accent-primary); 
}

.footer-bottom { 
    display: block !important; 
    visibility: visible !important; 
    opacity: 1 !important; 
    width: 100%; 
    border-top: 1px solid var(--border-glass); 
    padding: 30px 0; 
    margin-top: 40px; 
    text-align: center; 
    position: relative; 
    z-index: 99; 
}

.footer-bottom p { 
    color: var(--text-muted) !important; 
    font-size: 14px; 
    margin: 0; 
}

.agency-link { 
    color: var(--accent-primary); 
    text-decoration: none; 
    font-weight: 600; 
    transition: color 0.3s ease; 
}

.agency-link:hover { 
    color: #ffffff; 
}

#scrollToTopBtn { 
    position: fixed !important; 
    bottom: 30px !important; 
    right: 30px !important; 
    left: auto !important; 
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    background-color: var(--accent-primary); 
    color: #fff; 
    border: none; 
    font-size: 18px; 
    cursor: pointer; 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background-color 0.3s; 
    z-index: 99999; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.5); 
    will-change: transform, opacity, visibility;
}

#scrollToTopBtn.show { 
    opacity: 1; 
    visibility: visible; 
}

#scrollToTopBtn:hover { 
    transform: translate3d(0, -5px, 0); 
    background-color: var(--accent-hover); 
}

/* =========================================
   14. ADMIN PANEL ISOLATED NAVBAR
   ========================================= */
.admin-nav-container { 
    flex-wrap: nowrap !important; 
}

.admin-nav-container .nav-links { 
    position: static !important; 
    transform: none !important; 
    left: auto !important; 
    flex: 1; 
    display: flex !important; 
    flex-direction: row !important; 
    align-items: center !important; 
    justify-content: center !important; 
    gap: 3vw; 
    margin: 0; 
    padding: 0; 
    white-space: nowrap; 
    background: transparent !important; 
    height: auto !important; 
}

.admin-nav-container .nav-right { 
    display: flex !important; 
    position: static !important; 
    flex-direction: row !important; 
    align-items: center; 
    gap: 20px; 
    z-index: 1002; 
    width: auto !important; 
    background: transparent !important; 
    bottom: auto !important; 
    padding: 0 !important; 
    box-shadow: none !important; 
}

.admin-nav-container .menu-toggle, 
.menu-toggle { 
    display: none; 
    flex-direction: column; 
    gap: 6px; 
    z-index: 1005 !important; 
    cursor: pointer; 
    padding: 5px; 
    margin-left: auto; 
}

.admin-nav-container .menu-toggle span, 
.menu-toggle span { 
    width: 30px; 
    height: 3px; 
    background-color: white; 
    display: block; 
    border-radius: 5px; 
    transition: transform 0.4s ease, background-color 0.4s ease, opacity 0.4s ease; 
    will-change: transform, opacity;
}

.admin-nav-container .menu-toggle.active span:nth-child(1), 
.menu-toggle.active span:nth-child(1) { 
    transform: translate3d(0, 9px, 0) rotate(45deg); 
    background-color: var(--accent-primary); 
}

.admin-nav-container .menu-toggle.active span:nth-child(2), 
.menu-toggle.active span:nth-child(2) { 
    opacity: 0; 
    transform: translate3d(-20px, 0, 0); 
}

.admin-nav-container .menu-toggle.active span:nth-child(3), 
.menu-toggle.active span:nth-child(3) { 
    transform: translate3d(0, -9px, 0) rotate(-45deg); 
    background-color: var(--accent-primary); 
}

/* =========================================
   15. CONSOLIDATED MEDIA QUERIES
   ========================================= */
@media (min-width: 1200px) {
    .nav-divider, 
    .nav-context { 
        display: flex; 
    }
}

@media (max-width: 1440px) {
    .title { 
        font-size: 5.5rem; 
    } 
    
    .slide-content { 
        left: 50px; 
    }
}

@media (max-width: 1200px) {
    .title { 
        font-size: 4.5rem; 
    }
}

@media (max-width: 1100px) {
    .asymmetrical-layout .about-images-group { 
        width: 100%; 
        margin: 0 0 -80px 0; 
        transform: none !important; 
        z-index: 1; 
    }
    
    .glass-panel { 
        width: 100%; 
        margin-left: 0; 
        transform: none !important; 
        padding: 50px 30px 40px 30px; 
        z-index: 5; 
    }
    
    .about-container { 
        flex-direction: column; 
        padding: 0 40px; 
    }
    
    .about-title { 
        font-size: 3rem; 
    }
    
    .badge-1 { 
        right: -5%; 
    } 
    
    .badge-2 { 
        left: -5%; 
    }
}

@media (max-width: 1024px) {
    .slide-content { 
        left: 40px; 
        bottom: 120px; 
    }
    
    .title { 
        font-size: 3.8rem; 
    }
    
    .hero-bottom { 
        left: 40px; 
        right: 40px; 
        bottom: 30px; 
    }
}

@media (max-width: 992px) {
    .services-grid { 
        gap: 20px; 
    } 
    
    .service-card { 
        padding: 40px 25px; 
    }
    
    .faq-container { 
        gap: 50px; 
    } 
    
    .faq-image { 
        order: 1; 
    } 
    
    .faq-content { 
        order: 2; 
    }
    
    .faq-small { 
        justify-content: center; 
    } 
    
    .faq-content h2 { 
        font-size: 34px; 
        text-align: center; 
    }
    
    .location-grid { 
        grid-template-columns: repeat(2, 1fr) !important; 
    }
    
    .admin-nav-container .menu-toggle { 
        display: flex !important; 
    }
    
    /* GPU OPTIMIZED: Mobile sidebar shift from animating 'right' to 'transform' */
    .admin-nav-container .nav-links { 
        position: fixed !important; 
        top: 0 !important; 
        right: 0 !important; 
        transform: translateX(100%);
        width: 100% !important; 
        max-width: 350px !important; 
        height: 100vh !important; 
        background: rgba(10, 14, 23, 0.98) !important; 
        backdrop-filter: blur(15px) !important; 
        flex-direction: column !important; 
        justify-content: center !important; 
        align-items: center !important; 
        gap: 30px !important; 
        padding: 0 20px 80px !important; 
        box-shadow: -10px 0 40px rgba(0,0,0,0.5) !important; 
        z-index: 1003 !important; 
        border-left: 1px solid rgba(16, 185, 129, 0.2) !important; 
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important; 
        margin: 0 !important; 
        display: flex !important; 
        will-change: transform;
    }
    
    .admin-nav-container .nav-links.active { 
        transform: translateX(0) !important; 
    }
    
    .admin-nav-container .nav-links li a { 
        font-size: 20px !important; 
    }
    
    .admin-nav-container .nav-right { 
        position: fixed !important; 
        top: calc(100vh - 160px) !important; 
        bottom: auto !important; 
        right: 0 !important; 
        transform: translateX(100%);
        width: 100% !important; 
        max-width: 350px !important; 
        height: auto !important; 
        flex-direction: column !important; 
        justify-content: center !important; 
        align-items: center !important; 
        gap: 15px !important; 
        z-index: 1004 !important; 
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important; 
        padding: 0 30px !important; 
        background: transparent !important; 
        border: none !important; 
        box-shadow: none !important; 
        margin: 0 !important; 
        display: flex !important; 
        will-change: transform;
    }
    
    .admin-nav-container .nav-right.active { 
        transform: translateX(0) !important; 
    }
    
    .admin-nav-container .nav-right .btn-tactical { 
        width: 100% !important; 
        display: flex !important; 
        justify-content: center !important; 
        padding: 15px !important; 
        font-size: 15px !important; 
        margin: 0 !important; 
    }
}

@media (max-width: 900px) {
    .nav-links, 
    .nav-btn-desktop { 
        display: none !important; 
    }
    
    .menu-toggle { 
        display: flex !important; 
    }
    
    .navbar { 
        padding: 15px 25px; 
    }
    
    .services { 
        height: 500px; 
        min-height: unset; 
        padding-bottom: 10px; 
    }
    
    .panels { 
        flex-direction: row; 
        overflow-x: auto; 
        scroll-snap-type: x mandatory; 
    }
    
    .panels::-webkit-scrollbar { 
        display: none; 
    }
    
    .panel-container { 
        min-width: 85vw; 
        scroll-snap-align: center; 
        border-left: none; 
        border-right: 1px solid var(--border-glass); 
    }
    
    .panel-container:last-child { 
        border-right: none; 
    }
    
    .panel { 
        padding: 40px 30px; 
        justify-content: flex-end; 
    }
    
    .panel-container:hover { 
        flex: none; 
        transform: none; 
        box-shadow: none; 
    }
    
    .panel-container.active { 
        flex: none; 
        transform: none !important; 
        box-shadow: none !important; 
    }
}

@media (max-width: 768px) {
    .slide-content { 
        left: 30px; 
        bottom: 140px; 
    } 
    
    .subtitle { 
        font-size: 11px; 
        margin-bottom: 15px; 
    } 
    
    .title { 
        font-size: 2.8rem; 
    } 
    
    .hero-bottom { 
        left: 30px; 
        right: 30px; 
        bottom: 30px; 
        flex-direction: row; 
    }
    
    .services-grid { 
        grid-template-columns: 1fr; 
        max-width: 500px; 
        margin: 0 auto; 
    } 
    
    .services-section { 
        padding: 60px 15px; 
    } 
    
    .service-card { 
        padding: 40px 20px; 
    }
    
    .about-section { 
        padding: 80px 0; 
    } 
    
    .about-container { 
        padding: 0 20px; 
    } 
    
    .asymmetrical-layout .about-images-group { 
        margin: 0 0 -60px 0; 
    } 
    
    .about-title { 
        font-size: 2.2rem; 
        margin-bottom: 20px; 
    } 
    
    .about-description { 
        font-size: 1rem; 
        margin-bottom: 30px; 
    } 
    
    .tactical-badge { 
        padding: 10px 15px; 
    } 
    
    .badge-title { 
        font-size: 0.9rem; 
    } 
    
    .tactical-badge i { 
        font-size: 18px; 
    } 
    
    .badge-1 { 
        top: -20px; 
        right: 0; 
    } 
    
    .badge-2 { 
        bottom: -20px; 
        left: 0; 
    }
    
    .partner-title { 
        font-size: 2.5rem; 
    } 
    
    .banner-inner { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 25px; 
    } 
    
    .banner-text { 
        font-size: 1.8rem !important; 
    }
    
    .locations { 
        padding: 70px 18px; 
    } 
    
    .location-grid { 
        grid-template-columns: 1fr !important; 
    } 
    
    .location-head { 
        margin-bottom: 40px; 
    }
    
    .footer-grid { 
        grid-template-columns: repeat(2, 1fr); 
    }
}

@media (max-width: 600px) {
    .faq-section { 
        padding: 60px 6%; 
    } 
    
    .faq-container { 
        gap: 35px; 
    } 
    
    .faq-content h2 { 
        font-size: 26px; 
    } 
    
    .faq-question h4 { 
        font-size: 16px !important; 
    } 
    
    .arrow { 
        font-size: 16px; 
    }
}

@media (max-width: 576px) {
    .slide-content { 
        left: 20px; 
        bottom: 120px; 
    } 
    
    .title { 
        font-size: 2.2rem; 
    } 
    
    .hero-bottom { 
        left: 20px; 
        right: 20px; 
        bottom: 20px; 
    }
}

@media (max-width: 480px) {
    .about-title { 
        font-size: 1.8rem; 
    }
    
    .partner-box { 
        height: 140px; 
    }
    
    .tactical-banner { 
        padding: 40px 20px; 
    } 
    
    .banner-text { 
        font-size: 1.4rem !important; 
    } 
    
    .banner-inner .btn-tactical { 
        width: 100%; 
    }
    
    .footer-grid { 
        grid-template-columns: 1fr; 
    } 
    
    .footer-bottom { 
        justify-content: center; 
        text-align: center; 
    }
}

/* GOOD */
@keyframes floatLight {
    0% { transform: translateY(0) scale(1); opacity: 0.5; }
    100% { transform: translateY(-50px) scale(1.5); opacity: 0; }
}