/* Hero Content Visibility Fix */
/* Ensures hero content always appears above video backgrounds */

/* Force hero content to be visible and interactive */
.hero-content {
    position: relative !important;
    z-index: 100 !important; /* Very high to ensure visibility */
    opacity: 1 !important;
    pointer-events: auto !important;
    display: block !important;
    visibility: visible !important;
}

/* Ensure all interactive elements in hero are clickable */
.hero-content * {
    pointer-events: auto !important;
    position: relative;
    z-index: 101 !important;
}

/* Specific fixes for buttons and links */
.hero-content .btn-primary,
.hero-content .cta-button,
.hero-content button,
.hero-content a {
    position: relative !important;
    z-index: 102 !important;
    pointer-events: auto !important;
    display: inline-block !important;
    visibility: visible !important;
}

/* Ensure video stays in background */
#hero-video,
video[id*="hero"] {
    z-index: 1 !important; /* Low z-index to stay behind content */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Hero section positioning */
#hero,
#hero-section {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
}

/* Text content styling to ensure visibility */
.hero-content h1,
.hero-content h2,
.hero-content p {
    position: relative !important;
    z-index: 103 !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7) !important; /* Better text visibility over video */
    color: #ffffff !important;
}

/* Animated heading specific fix */
.animated-heading {
    position: relative !important;
    z-index: 104 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Remove any problematic animations that might hide content */
.hero-content {
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

/* Responsive fixes */
@media (max-width: 768px) {
    /* Hero section - ensure proper flexbox centering on mobile */
    #hero,
    #hero-section {
        padding: 0 !important; /* Remove padding to allow flexbox centering */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 100vh !important;
        height: 100vh !important;
    }
    
    .hero-content {
        z-index: 105 !important;
        padding: 20px !important;
        /* Remove top positioning - let flexbox handle centering */
        top: 0 !important;
        position: relative !important;
        /* Fine-tune vertical position - adjust down for better centering */
        transform: translateY(8vh) !important;
        margin: 0 auto !important;
    }
    
    .hero-content * {
        z-index: 106 !important;
    }
}