/* =========================
   Mobile-Only Hero Section
   Completely separate from desktop
   ========================= */

@media (max-width: 768px) {
    /* Ensure menu section is visible on mobile */
    .menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Reset and rebuild hero for mobile */
    .hero {
        min-height: 100vh;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem 1rem 6rem;
        overflow: visible;
    }
    
    /* Force video/background to show on mobile */
    .hero-video-container {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
        background: url('../videos/hero-background.mp4') center center / cover no-repeat;
    }
    
    .hero-video-container #heroVideo,
    .hero-video-container video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .hero-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: linear-gradient(135deg, 
            rgba(0, 146, 70, 0.45) 0%, 
            rgba(0, 146, 70, 0.25) 15%, 
            rgba(255, 255, 255, 0.2) 30%, 
            rgba(255, 255, 255, 0.2) 70%, 
            rgba(206, 43, 55, 0.25) 85%, 
            rgba(206, 43, 55, 0.45) 100%) !important;
        z-index: 2 !important;
    }
    
    .hero-content {
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    
    /* Title - Mobile specific - MUCH LARGER HEADER */
    .hero-title {
        font-size: 3rem !important;
        font-weight: 800;
        color: white;
        text-align: center;
        padding: 0 1.5rem;
        margin: 0 0 1.5rem 0;
        width: 100%;
        max-width: 100%;
        transform: none !important;
        white-space: normal !important;
        line-height: 1.15;
        word-break: break-word;
        text-shadow: 4px 4px 15px rgba(0, 0, 0, 0.9), 
                     0 0 30px rgba(0, 0, 0, 0.7),
                     0 0 50px rgba(0, 0, 0, 0.4);
        filter: none !important;
        box-sizing: border-box;
        letter-spacing: 1.5px;
    }
    
    /* Subtitle box - Mobile specific */
    .hero-subtitle-box {
        width: calc(100% - 2rem);
        max-width: 500px;
        margin: 0 1rem;
        padding: 1rem 1.25rem;
        background: linear-gradient(to right, 
            rgba(0, 146, 70, 0.12) 0%, 
            rgba(0, 146, 70, 0.06) 20%, 
            rgba(255, 255, 255, 0.12) 35%, 
            rgba(255, 255, 255, 0.12) 65%, 
            rgba(206, 43, 55, 0.06) 80%, 
            rgba(206, 43, 55, 0.12) 100%);
        backdrop-filter: blur(10px);
        border-radius: 12px;
        box-shadow: none !important;
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-sizing: border-box;
    }
    
    .hero-subtitle {
        font-size: 1.4rem !important;
        font-weight: 700;
        margin: 0;
        padding: 0;
        color: white;
        text-align: center;
        font-style: italic;
        text-shadow: 0 0 20px rgba(0, 0, 0, 0.9),
                     2px 2px 4px rgba(0, 0, 0, 0.95);
    }
    
    /* Description box - Mobile specific */
    .hero-description-box {
        width: calc(100% - 2rem);
        max-width: 500px;
        margin: 0 1rem;
        padding: 1.25rem 1.5rem;
        background: linear-gradient(to right, 
            rgba(0, 146, 70, 0.12) 0%, 
            rgba(0, 146, 70, 0.06) 20%, 
            rgba(255, 255, 255, 0.12) 35%, 
            rgba(255, 255, 255, 0.12) 65%, 
            rgba(206, 43, 55, 0.06) 80%, 
            rgba(206, 43, 55, 0.12) 100%);
        backdrop-filter: blur(10px);
        border-radius: 12px;
        box-shadow: none !important;
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-sizing: border-box;
    }
    
    .hero-description {
        font-size: 1rem !important;
        line-height: 1.7;
        margin: 0;
        padding: 0;
        color: white;
        text-align: center;
        text-shadow: 0 0 20px rgba(0, 0, 0, 0.9),
                     2px 2px 4px rgba(0, 0, 0, 0.95);
        font-weight: 600;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* CTA Button - Mobile specific - CENTERED CONTENT */
    .cta-button {
        width: calc(100% - 3rem);
        max-width: 350px;
        margin: 2rem auto 0;
        padding: 1.1rem 2rem;
        font-size: 1rem;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        position: relative;
        z-index: 10;
        box-shadow: none !important;
    }
    
    .cta-button span {
        display: inline-block;
    }
    
    .cta-button i {
        display: inline-block;
    }
    
    .scroll-indicator {
        display: none !important; /* Hide scroll indicator on mobile to give button more room */
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2.2rem !important;
        padding: 0 1rem;
        margin: 0 0 1.25rem 0;
        font-weight: 800;
    }
    
    .hero {
        min-height: 100vh !important;
        height: auto !important;
        padding: 1.5rem 1rem 5rem;
    }
    
    .hero-subtitle-box {
        width: calc(100% - 1.5rem);
        margin: 0 0.75rem;
        padding: 0.85rem 1rem;
    }
    
    .hero-subtitle {
        font-size: 1.2rem !important;
    }
    
    .hero-description-box {
        width: calc(100% - 1.5rem);
        margin: 0 0.75rem;
        padding: 1rem 1.25rem;
    }
    
    .hero-description {
        font-size: 0.9rem !important;
        line-height: 1.65;
    }
    
    .cta-button {
        width: calc(100% - 2rem);
        margin: 1rem 1rem 0;
        padding: 0.9rem 1.5rem;
        font-size: 0.95rem;
    }
}