/* Fix for header overlapping content on mobile devices */

/* Add proper padding to hero section to prevent header overlap */
@media (max-width: 992px) {
    .hero {
        padding-top: 150px !important; /* Increase top padding more to avoid header overlap */
        padding-bottom: 60px !important; /* Ensure enough space at the bottom */
        min-height: auto !important; /* Ensure proper sizing */
    }
    
    /* Ensure the container has proper spacing */
    .hero .container {
        padding-top: 20px;
        padding-bottom: 30px;
    }
    
    /* Ensure all sections have proper top padding to avoid header overlap */
    section {
        scroll-margin-top: 90px; /* This helps with scroll-to-anchor positioning */
    }
    
    /* Ensure hero content is not covered by header */
    .hero-content {
        margin-top: 10px;
    }
}

@media (max-width: 768px) {
    /* Ensure header doesn't cover content on mobile */
    .glass-header {
        background: rgba(10, 10, 15, 0.95) !important; /* More opaque background for better contrast */
        height: 60px !important; /* Consistent height with mobile-header-fix.css */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important;
        backdrop-filter: blur(10px) !important; /* Enhance the glass effect */
        -webkit-backdrop-filter: blur(10px) !important;
        transition: background 0.3s ease !important;
        display: block !important; /* Ensure header is fully visible */
    }
    
    /* Make menu button more obvious */
    .menu-btn {
        padding: 10px;
    }
    
    /* Ensure header content aligns properly */
    .glass-header .container {
        padding: 0 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
    }
    
    .hero {
        padding-top: 120px !important;
        padding-bottom: 50px !important;
        min-height: auto !important;
    }
    
    /* Fix hero image being cut off at bottom */
    .hero-image {
        margin-bottom: 30px;
        max-height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .hero-image img {
        max-height: 100%;
        object-fit: contain;
    }
}

/* Fix for extra small devices */
@media (max-width: 480px) {
    .hero {
        padding-top: 100px !important;
        padding-bottom: 40px !important;
    }
    
    .hero-image {
        margin-bottom: 20px;
        width: 90% !important; /* Make image slightly smaller */
        max-height: 250px;
    }
    
    /* Better spacing for content on smallest screens */
    .hero-title {
        margin-top: 0 !important;
        font-size: 22px !important;
    }
    
    .text-reveal {
        margin: 10px 0 15px !important;
    }
}