/* =====================================================
   THE GENIUS AGENCY — MOBILE RESPONSIVE OVERRIDES
   ALL RULES ARE INSIDE @media (max-width: 768px)
   Desktop layout: COMPLETELY UNTOUCHED
   ===================================================== */

@media (max-width: 768px) {

    /* ── GLOBAL ─────────────────────────────────────── */
    body {
        overflow-x: hidden !important;
        width: 100% !important;
        position: relative !important;
    }

    .container {
        padding: 0 16px !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .desktop-only { display: none !important; }
    .mobile-only { display: block !important; }
    #m-mobile-platforms { display: block !important; }
    .mobile-only-container { display: block !important; }

    /* ══════════════════════════════════════════════════
       MOBILE NAV OVERLAY
    ══════════════════════════════════════════════════ */
    .mobile-nav-overlay {
        gap: 15px !important;
        padding: 60px 20px 20px !important;
        background: rgba(5, 10, 25, 0.98) !important;
    }

    .mobile-nav-link {
        font-size: 0.9rem !important;
        letter-spacing: 1.5px !important;
        padding: 12px 20px !important;
        border-radius: 12px !important;
        width: 90% !important;
        text-align: center !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
        background: rgba(255,255,255,0.02) !important;
        text-transform: uppercase !important;
        font-weight: 600 !important;
    }

    .mobile-nav-link:hover,
    .mobile-nav-link.active {
        background: rgba(245,197,66,0.12) !important;
        border-color: rgba(245,197,66,0.4) !important;
        color: #F5C542 !important;
    }

    .mobile-nav-cta {
        font-size: 0.8rem !important;
        padding: 14px 25px !important;
        width: 90% !important;
        letter-spacing: 1px !important;
        margin-top: 10px !important;
        border-radius: 50px !important;
    }

    /* ══════════════════════════════════════════════════
       HERO SECTION
    ══════════════════════════════════════════════════ */

    header.hero {
        padding-left: 16px !important;
        padding-right: 16px !important;
        max-height: 550px !important;
    }

    #hero-bg-video {
        object-position: center top !important;
    }

    .hero-main-content,
    #hero-main-content {
        padding: 80px 0 20px !important;
    }

    .hero-title {
        font-size: 2.4rem !important;
    }

    /* ══════════════════════════════════════════════════
       ABOUT.HTML — HOW WE WORK
    ══════════════════════════════════════════════════ */

    section[style*="background: #0a0a0a"] {
        overflow: hidden !important;
        width: 100% !important;
        padding: 40px 0 !important;
    }

    section[style*="background: #0a0a0a"] div[style*="display: flex; align-items: center; gap: 15px"] {
        flex-direction: row !important;
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 20px 20px 40px !important;
        gap: 20px !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        justify-content: flex-start !important;
        scrollbar-width: none !important;
    }

    section[style*="background: #0a0a0a"] div[style*="text-align: center"] {
        flex: 0 0 280px !important;
        scroll-snap-align: center !important;
        background: rgba(255,255,255,0.03) !important;
        padding: 40px 20px !important;
        border-radius: 20px !important;
        border: 1px solid rgba(184,149,14,0.1) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        white-space: normal !important;
    }

    section[style*="background: #0a0a0a"] div[style*="font-size: 0.8rem; color: #888"] {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
        line-height: 1.5 !important;
    }

    section[style*="background: #0a0a0a"] div[style*="color: #b8950e; font-size: 1.5rem"] {
        display: none !important;
    }

    /* ══════════════════════════════════════════════════
       ABOUT.HTML — EXPERTS CAROUSEL (ONE BY ONE)
    ══════════════════════════════════════════════════ */
    
    .expert-card {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        scroll-snap-align: center !important;
        box-sizing: border-box !important;
    }

    #expertsTrack {
        gap: 0 !important; /* One by one means no gaps or controlled gaps */
        display: flex !important;
    }

    /* ══════════════════════════════════════════════════
       CONTACT.HTML — AIMS & OBJECTIVES
    ══════════════════════════════════════════════════ */

    div[style*="grid-template-columns: repeat(5, 1fr); gap: 20px"] {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        gap: 15px !important;
        padding: 10px 20px 30px !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        scrollbar-width: none !important;
    }

    div[style*="grid-template-columns: repeat(5, 1fr); gap: 20px"]::-webkit-scrollbar {
        display: none !important;
    }

    div[style*="grid-template-columns: repeat(5, 1fr); gap: 20px"] > div {
        flex: 0 0 280px !important;
        scroll-snap-align: center !important;
    }

    /* ══════════════════════════════════════════════════
       CONTACT.HTML — FAQ SECTION
    ══════════════════════════════════════════════════ */

    div[style*="grid-template-columns: repeat(2, 1fr); gap: 20px"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .faq-card {
        padding: 20px !important;
        gap: 15px !important;
        align-items: flex-start !important;
    }

    /* ══════════════════════════════════════════════════
       OTHER SECTIONS
    ══════════════════════════════════════════════════ */

    #services h2, #why-choose-us h2, #process h2, #experts h2, #portfolio h2 {
        font-size: 2rem !important;
        text-align: center !important;
    }

    #services div[style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: 1fr 1fr !important;
    }

    #why-choose-us div[style*="grid-template-columns: repeat(5, 1fr)"] {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Expert Profile Sidebar Mobile Fixes */
    .expert-sidebar {
        width: 100% !important;
        right: -100vw !important;
        max-width: 100vw !important;
        border-left: none !important;
    }

    .expert-sidebar.open {
        right: 0 !important;
    }

    .sb-footer {
        padding: 10px 15px 25px !important; /* Compacted for mobile */
    }

    .sb-cta-sub {
        font-size: 0.65rem !important;
        margin-bottom: 5px !important;
    }

    .sb-start-btn {
        padding: 10px 12px !important;
        font-size: 0.85rem !important;
    }

    .sb-or-label {
        margin: 4px 0 !important;
    }

    .sb-plat-btn {
        padding: 8px 10px !important;
        font-size: 0.8rem !important;
        min-height: 44px !important; /* Better touch target */
    }
}

/* ══════════════════════════════════════════════════
   SMALL PHONES (< 400px)
══════════════════════════════════════════════════ */
@media (max-width: 400px) {
    .hero-title {
        font-size: 2.1rem !important;
    }
    
    #why-choose-us div[style*="grid-template-columns: repeat(5, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
}