/* Mobile Hero Section Styling - Image Only */

/* Hide all text content on mobile */
@media only screen and (max-width: 767px) {
    .mobile-hero-title,
    .mobile-hero-subtitle {
        display: none !important;
    }
    
    .hero-btn {
        display: none !important;
    }
    
    /* Minimal hero content for mobile - just show the image */
    .hero-content {
        padding: 0 !important;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .hero-content-inner {
        display: none !important;
    }
    
    /* Ensure hero background image is fully visible */
    .hero-section {
        min-height: 100vh;
        height: 100vh;
        overflow: hidden;
    }
    
    .hero-bg {
        background-size: cover !important;
        background-position: 50% 25% !important;
        background-repeat: no-repeat !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Reduce overlay opacity on mobile for better image visibility */
    .hero-section .overlay {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.4) 100%) !important;
    }
}

/* Additional mobile positioning for character visibility */
@media only screen and (max-width: 480px) {
    .hero-bg {
        background-position: 50% 20% !important;
    }
}

@media only screen and (max-width: 400px) {
    .hero-bg {
        background-position: 50% 18% !important;
    }
}

/* Extra fine-tuning for specific mobile devices */
@media only screen and (max-width: 420px) and (min-width: 380px) {
    .hero-bg {
        background-position: 50% 22% !important;
    }
}

/* For very tall mobile screens */
@media only screen and (max-width: 767px) and (min-height: 800px) {
    .hero-bg {
        background-position: 50% 20% !important;
    }
}

/* iPhone XR and similar devices (414px width) */
@media only screen and (max-width: 414px) and (min-width: 410px) {
    .hero-bg {
        background-position: 50% 23% !important;
    }
}

/* iPhone SE and smaller devices */
@media only screen and (max-width: 375px) {
    .hero-bg {
        background-position: 50% 15% !important;
    }
}

/* Fix hero section positioning to show image from top */
.hero-section {
    position: relative;
    z-index: 1;
    margin-top: 0 !important;
}

.hero-section .hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center top !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    z-index: -2;
}

.hero-section .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* Ensure desktop/tablet view remains unchanged */
@media only screen and (min-width: 768px) {
    .hero-content {
        padding: 510px 0 105px 0;
        display: flex;
        align-items: center;
        position: relative;
        z-index: 1;
    }
    
    .hero-content-inner {
        display: block;
    }
}