/* Hero Image Fix - FORCE IMAGES TO ALWAYS SHOW ON ALL SCREEN SIZES */

/* Override any existing rules that might hide hero images */
.hero-wrapper,
.hero-1,
.hero-bg-image,
.hero-main-image {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Base hero styling with fallback background */
.hero-wrapper,
.hero-1 {
    position: relative !important;
    min-height: 100vh !important;
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.95) 0%, 
        rgba(37, 99, 235, 0.9) 25%,
        rgba(30, 58, 138, 0.95) 50%,
        rgba(16, 185, 129, 0.9) 75%,
        rgba(6, 182, 212, 0.95) 100%
    ) !important;
    background-size: 400% 400% !important;
    animation: gradientShift 15s ease infinite !important;
    overflow: hidden !important;
}

/* Animated gradient background */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Hero background image container */
.hero-bg-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    overflow: hidden !important;
    display: block !important;
    visibility: visible !important;
}

/* Hero main image styling - ALWAYS VISIBLE */
.hero-main-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    visibility: visible !important;
    transition: all 0.3s ease !important;
    opacity: 1 !important;
    z-index: 2 !important;
}

/* Force image visibility even when src is empty or null */
.hero-main-image[src=""],
.hero-main-image[src*="null"],
.hero-main-image:not([src]) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.95) 0%, 
        rgba(37, 99, 235, 0.9) 25%,
        rgba(30, 58, 138, 0.95) 50%,
        rgba(16, 185, 129, 0.9) 75%,
        rgba(6, 182, 212, 0.95) 100%
    ) !important;
    background-size: 400% 400% !important;
    animation: gradientShift 15s ease infinite !important;
}

/* Enhanced overlay for better text readability */
.hero-wrapper::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.4) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Container positioning */
.hero-1 .container {
    position: relative !important;
    z-index: 3 !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
}

/* Desktop and Large Screens (1200px+) */
@media (min-width: 1200px) {
    .hero-wrapper,
    .hero-1 {
        min-height: 100vh !important;
    }
    
    .hero-main-image {
        object-position: center center !important;
        transform: scale(1) !important;
    }
}

/* Large Tablets and Small Desktops (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .hero-wrapper,
    .hero-1 {
        min-height: 95vh !important;
    }
    
    .hero-1 .container {
        height: 95vh !important;
    }
    
    .hero-main-image {
        object-position: center center !important;
        min-height: 95vh !important;
    }
}

/* Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .hero-wrapper,
    .hero-1 {
        min-height: 90vh !important;
    }
    
    .hero-1 .container {
        height: 90vh !important;
    }
    
    .hero-main-image {
        object-position: center center !important;
        min-height: 90vh !important;
        transform: scale(1.05) !important;
    }
}

/* ALL SCREEN SIZES - FORCE HERO IMAGE VISIBILITY */
@media (max-width: 575px) {
    .hero-wrapper,
    .hero-1 {
        min-height: 100vh !important;
        background: none !important; /* Remove gradient override */
    }
    
    .hero-1 .container {
        height: auto !important;
        min-height: 100vh !important;
        padding: 15px 10px !important;
    }
    
    .hero-main-image {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        object-position: center center !important;
        min-height: 100vh !important;
        transform: scale(1) !important;
        z-index: 2 !important;
    }
    
    /* Force show image even if src is empty */
    .hero-main-image[src=""],
    .hero-main-image[src*="null"],
    .hero-main-image:not([src]) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: linear-gradient(135deg, 
            rgba(59, 130, 246, 0.95) 0%, 
            rgba(37, 99, 235, 0.9) 25%,
            rgba(30, 58, 138, 0.95) 50%,
            rgba(16, 185, 129, 0.9) 75%,
            rgba(6, 182, 212, 0.95) 100%
        ) !important;
        background-size: 400% 400% !important;
        animation: gradientShift 15s ease infinite !important;
    }
}

/* Mobile Devices (481px - 575px) - FORCE IMAGE DISPLAY */
@media (min-width: 481px) and (max-width: 575px) {
    .hero-wrapper,
    .hero-1 {
        min-height: 100vh !important;
        background: none !important; /* Remove any gradient override */
    }
    
    .hero-1 .container {
        height: auto !important;
        min-height: 100vh !important;
        padding: 15px 10px !important;
    }
    
    .hero-main-image {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        object-position: center center !important;
        min-height: 100vh !important;
        transform: scale(1) !important;
        z-index: 2 !important;
    }
}

/* Small Mobile (up to 480px) - FORCE IMAGE DISPLAY */
@media (max-width: 480px) {
    .hero-wrapper,
    .hero-1 {
        min-height: 100vh !important;
        background: none !important; /* Remove any gradient override */
    }
    
    .hero-1 .container {
        height: auto !important;
        min-height: 100vh !important;
        padding: 10px 8px !important;
    }
    
    .hero-main-image {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        object-position: center center !important;
        min-height: 100vh !important;
        transform: scale(1) !important;
        z-index: 2 !important;
    }
}

/* Very Small Mobile (up to 360px) - FORCE IMAGE DISPLAY */
@media (max-width: 360px) {
    .hero-wrapper,
    .hero-1 {
        min-height: 100vh !important;
        background: none !important; /* Remove any gradient override */
    }
    
    .hero-1 .container {
        height: auto !important;
        min-height: 100vh !important;
        padding: 8px 5px !important;
    }
    
    .hero-main-image {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        object-position: center center !important;
        min-height: 100vh !important;
        transform: scale(1) !important;
        z-index: 2 !important;
    }
}

/* Landscape orientation adjustments for mobile */
@media (max-width: 767px) and (orientation: landscape) {
    .hero-wrapper,
    .hero-1 {
        min-height: 100vh !important;
    }
    
    .hero-1 .container {
        min-height: 100vh !important;
        padding: 10px !important;
    }
}

/* High DPI displays optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero-main-image {
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
    }
}

/* Loading state for images */
.hero-main-image {
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        rgba(255, 255, 255, 0.2) 50%, 
        rgba(255, 255, 255, 0.1) 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: shimmer 2s infinite !important;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* When image loads successfully, remove shimmer */
.hero-main-image[src]:not([src=""]) {
    animation: none !important;
    background: none !important;
}

/* Ensure content is always visible */
.hero-content {
    position: relative !important;
    z-index: 4 !important;
    color: white !important;
}

/* Enhanced text shadows for better readability */
.hero-title,
.hero-title-two {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7) !important;
}

.hero-text {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6) !important;
}

/* Button styling improvements */
.hero-btn {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(10px) !important;
}