/* Hero Section */
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Keep hidden for video background */
    padding-top: 140px;
}

/* Video Background */
.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: 100%;
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.fallback-bg {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 2;
}

/* Hero Content */ 
.hero-content {
    position: relative;
    z-index: 4;
    text-align: center;
    padding: 0 20px;
    transform-origin: center center;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}


    .hero-text-group {
    transform-origin: center center;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out; /* Smooth transitions for fade effect */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    max-width: 100%;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 2.5vw, 40px); /* Consistent responsive gap: 20px to 40px */
    z-index: 5; /* Ensure content is above background */
    visibility: visible; /* Initial visibility */
    opacity: 1; /* Initial opacity - controlled by JavaScript on scroll */
}

/* Fixed: Remove conflicting margins, rely on flex gap for consistent spacing */
.hero-title {
    font-family: 'Optima', 'Arial', sans-serif;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 400;
    letter-spacing: 8px;
    margin: 0; /* Remove margins - spacing handled by flex gap */
    color: #fff;
    text-transform: uppercase;
    transform-origin: center center;
    text-align: center;
    width: 100%;
    line-height: 1.2; /* Prevents text collision */
}

/* Fixed: Remove fixed margins, spacing handled by flex gap */
.hero-number {
    font-family: 'Optima', 'Arial', sans-serif;
    font-size: clamp(120px, 25vw, 400px);
    font-weight: 700;
    line-height: 0.9;
    margin: 0; /* Remove margins - spacing handled by flex gap */
    color: #fff;
    position: relative;
    transform-origin: center center;
    letter-spacing: -10px;
    display: block;
    text-align: center;
    width: 100%;
}

/* Fixed: Use proportional negative margin that scales with viewport, maintain spacing flow */
.explore-btn-wrapper {
    position: relative;
    width: 100%;
    margin-top: clamp(-120px, -10vw, -180px); /* Proportional negative margin: -120px to -180px */
    margin-bottom: 0; /* No bottom margin to maintain gap flow */
    z-index: 10; /* Ensure button is above infinity symbol */
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-number-image {
    width: clamp(120px, 25vw, 400px);
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
    transform-origin: center center;
    max-width: 100%;
}

.hero-number .stylized-zero {
    transform: skew(-15deg) scaleX(1.2);
}

/* Fixed: Remove conflicting margins, spacing handled by flex gap */
.hero-subtitle {
    font-family: 'Optima', sans-serif;
    font-size: clamp(13px, 2vw, 25px);
    font-weight: 100;
    letter-spacing: 6px;
    text-transform: uppercase;
    margin: 0; /* Remove margins - spacing handled by flex gap */
    color: #fff;
    transform-origin: center center;
    text-align: center;
    width: 100%;
    line-height: 1.4; /* Prevents text overlap */
}


/* Hero Quote - Positioned absolutely but doesn't interfere with main content flow */
.hero-quote {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out; /* Smooth fade transition */
    z-index: 4;
    width: 100%;
    padding: 0 20px;
    pointer-events: none; /* Prevents interaction when hidden */
}

.quote-text {
    font-family: 'Optima', 'Arial', sans-serif;
    font-size: clamp(32px, 5vw, 80px);
    font-weight: 400;
    letter-spacing: 4px;
    color: #fff;
    text-transform: uppercase;
    font-style: italic;
    text-align: center;
    line-height: 1.2;
}

/* Spacer Content for Scrolling */
.spacer-content {
    min-height: 200vh;
    padding: 100px 40px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.5);
}

.infinity-symbol {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    object-fit: contain;
    filter: brightness(1);
    max-width: 100%;
}


/* ============================================
   RESPONSIVE DESIGN - BREAKPOINTS
   Desktop: ≥1200px (default styles)
   Tablet: 768px - 1199px
   Mobile: ≤767px
   
   Hamburger Menu Logic:
   - Hidden on desktop (≥1200px): Normal horizontal navigation
   - Visible on tablet/mobile (≤1199px): Hamburger icon appears
   - Menu slides in from left when hamburger is clicked
   - Menu closes when clicking nav links or outside menu
   ============================================ */

/* Tablet Breakpoint (768px - 1199px) */
@media (max-width: 1199px) and (min-width: 768px) {
   
    /* Fixed: Maintain consistent gap system on tablet */
    .hero-text-group {
        gap: clamp(16px, 2vw, 32px); /* Slightly smaller gap on tablet: 16px to 32px */
    }

    .hero-title {
        font-size: clamp(28px, 4.5vw, 56px);
        margin: 0; /* Ensure no conflicting margins */
    }

    .hero-number-image {
        width: clamp(100px, 22vw, 350px);
    }

    /* Tablet: Proportional negative margin for button overlap */
    .explore-btn-wrapper {
        margin-top: clamp(-100px, -9vw, -160px); /* Proportional: -100px to -160px */
        margin-bottom: 0;
    }

    .hero-subtitle {
        margin: 0; /* Ensure no conflicting margins */
    }

    
}


/* Mobile Breakpoint (≤767px) */
@media (max-width: 767px) {
    
    .hero-content {
        padding: 0 15px;
    }

    /* Fixed: Consistent gap system on mobile, remove conflicting margins */
    .hero-text-group {
        padding: 0 15px;
        gap: clamp(14px, 3vw, 24px); /* Consistent gap: 14px to 24px on mobile */
    }

    .hero-title {
        font-size: clamp(24px, 8vw, 48px) !important;
        letter-spacing: 4px;
        margin: 0 !important; /* Remove all margins - spacing from gap */
        line-height: 1.2;
    }

    .hero-number {
        margin: 0; /* Remove margins */
    }

    .hero-number-image {
        width: clamp(80px, 30vw, 300px) !important;
    }

    /* Mobile: Proportional negative margin for button overlap */
    .explore-btn-wrapper {
        margin-top: clamp(-80px, -7vw, -120px); /* Proportional: -80px to -120px */
        margin-bottom: 0;
    }

    .hero-subtitle {
        font-size: clamp(13px, 2vw, 20px) !important;
        letter-spacing: 3px;
        margin: 0 !important; /* Remove all margins - spacing from gap */
        line-height: 1.4;
    }

    .explore-btn {
        padding: 12px 30px;
        font-size: 14px;
        min-height: 44px;
    }

    .quote-text {
        font-size: clamp(24px, 8vw, 48px) !important;
        letter-spacing: 2px;
    }

    

    .spacer-content {
        padding: 60px 20px;
        font-size: 18px;
        min-height: 150vh;
    }

    .video-background video {
        object-position: center;
    }
}

/* Small Mobile (≤480px) */
@media (max-width: 480px) {
    

    /* Fixed: Consistent gap system on small mobile, remove all conflicting margins */
    .hero-text-group {
        padding: 0 15px;
        gap: clamp(10px, 2.5vw, 20px); /* Consistent gap: 10px to 20px on small mobile */
    }

    .hero-title {
        margin: 0 !important; /* Remove all margins - spacing from gap */
        letter-spacing: 2px;
        line-height: 1.2;
    }

    .hero-number {
        margin: 0; /* Remove margins */
    }

    /* Small mobile: Proportional negative margin for button overlap */
    .explore-btn-wrapper {
        margin-top: clamp(-60px, -6vw, -100px); /* Proportional: -60px to -100px */
        margin-bottom: 0;
    }

    .explore-btn {
        padding: 10px 25px;
        font-size: 12px;
        min-height: 44px;
    }

    .hero-number-image {
        width: clamp(60px, 35vw, 250px) !important;
    }

    .hero-subtitle {
        letter-spacing: 2px;
        margin: 0 !important; /* Remove all margins - spacing from gap */
        line-height: 1.4;
    }

    
    .infinity-symbol {
        max-width: 180px;
    }

    

    .spacer-content {
        padding: 40px 15px;
        font-size: 16px;
    }
}