/* 1. RESET & BASE STYLES */
    body { 
        overflow-x: hidden; 
        font-family: 'Poppins', sans-serif; 
        font-weight: 600; 
        background-color: #F9FAFD; 
        color: #000000; 
        scroll-behavior: smooth; 
    }
    .font-bungee { font-family: 'Bungee', cursive; }
    .font-poppins-bold { font-family: 'Poppins', sans-serif; font-weight: 700; }

    /* 2. NAVIGATION & LOGOS */
    .nav-logo { height: 24px; width: auto; object-fit: contain; }
    .footer-logo { height: 32px; width: auto; object-fit: contain; }

    .dropdown { position: relative; display: inline-block; }
    .dropdown-content { 
        display: none; position: absolute; background-color: #000; min-width: 200px; 
        box-shadow: 0px 8px 16px rgba(0,0,0,0.5); z-index: 100; top: 100%; left: 0;
        border: 1px solid #333;
    }
    .dropdown:hover .dropdown-content { display: block; }
    .dropdown-content a { color: white; padding: 12px 16px; text-decoration: none; display: block; font-size: 12px; }
    .dropdown-content a:hover { background-color: #FA751F; }

    /* 3. HERO SECTION (RESPONSIVE) */
    .hero-title { 
        line-height: 0.9; 
        font-size: clamp(2.8rem, 9vw, 5.5rem); 
    }

    .hero-bg {
        background: linear-gradient(to bottom, rgba(0,0,0,0.9) 40%, rgba(0,0,0,0.6) 100%), 
                    url('https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&q=80&w=1920');
        background-size: cover;
        background-position: center;
    }
    @media (min-width: 1024px) {
        .hero-bg {
            background: linear-gradient(to right, rgba(0,0,0,0.92) 35%, rgba(0,0,0,0.4) 100%), 
                        url('https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&q=80&w=1920');
        }
    }

    /* 4. VIDEO CIRCLE (RESPONSIVE) */
    .video-container { 
        width: 260px; height: 260px; 
        border-radius: 50%; overflow: hidden; 
        border: 6px solid #CDFF04; position: relative; cursor: pointer; 
    }
    @media (min-width: 768px) { 
        .video-container { width: 320px; height: 320px; } 
    }
    .video-container img { width: 100%; height: 100%; object-fit: cover; }
    .video-overlay { 
        position: absolute; inset: 0; 
        background: rgba(0,0,0,0.4); 
        display: flex; align-items: center; justify-content: center; 
        transition: background 0.3s; 
    }
    .video-container:hover .video-overlay { background: rgba(0,0,0,0.2); }

    /* 5. TICKER */
    .ticker-scroll { display: flex; animation: scroll 30s linear infinite; }
    @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

    /* 6. TEAM BIO OVERLAYS (DESKTOP & MOBILE TAP) */
    .bio-overlay {
        position: absolute; inset: 0; background: #FA751F; color: black;
        display: flex; flex-direction: column; justify-content: center; padding: 20px;
        opacity: 0; transform: translateY(20px); transition: all 0.4s ease;
        pointer-events: none; /* Allows click to pass through to the parent div */
    }

    /* Desktop Hover */
    .group:hover .bio-overlay { opacity: 1; transform: translateY(0); }
    /*.group:hover img { grayscale: 0; }*/

    /* Mobile Tap (requires the JS class 'is-tapped') */
    .group.is-tapped .bio-overlay { 
        opacity: 1; 
        transform: translateY(0); 
    }
    .group.is-tapped img { grayscale: 0; }

    /* 7. SOCIAL HOVERS */
    .fa-youtube:hover { color: #FF0000; }
    .fa-x-twitter:hover { color: #ffffff; }
    .fa-instagram:hover { color: #E1306C; }
    .fa-linkedin:hover { color: #0077B5; }
    .fa-tiktok:hover { color: #ff0050; }
    .fa-facebook:hover { color: #1877F2; }
    .fa-threads:hover { color: #ffffff; }