/* Force critical element visibility on mobile devices */

/* General force visibility for important elements */
@media (max-width: 768px) {
    /* Ensure header is visible */
    header, .glass-header, .glass-header * {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Fix menu button display */
    .menu-btn, .menu-btn * {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Fix menu items */
    .menu-items {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Force project carousel visibility */
    .projects-container, 
    .projects-carousel, 
    .projects-page,
    .project-card {
        visibility: visible !important;
        display: block !important;
        opacity: 1 !important;
    }
    
    /* Special styling for projects carousel */
    .projects-carousel {
        display: flex !important;
        width: 100% !important;
    }
    
    .projects-page {
        display: flex !important;
        flex-direction: column !important;
        min-width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    /* Ensure carousel navigation is visible */
    .carousel-nav,
    .carousel-button,
    .carousel-dots,
    .carousel-dot {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Make sure carousel buttons are actually buttons */
    .carousel-button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Ensure dots are properly displayed */
    .carousel-dots {
        display: flex !important;
        justify-content: center !important;
    }
    
    /* Make sure hero section content is visible */
    .hero-content, 
    .hero-title, 
    .text-reveal, 
    .hero-buttons, 
    .social-icons,
    .btn {
        visibility: visible !important;
        display: block !important;
        opacity: 1 !important;
    }
    
    /* Properly display buttons */
    .btn {
        display: inline-block !important;
    }
    
    /* Ensure social icons display correctly */
    .social-icons {
        display: flex !important;
    }
}