/* Mobile Menu Fix for Submenu Display */

@media (max-width: 768px) {
    /* Mobile menu active state */
    body.mobile-menu-active {
        overflow: hidden;
    }

    .mobile-menu.active {
        transform: translateX(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Base mobile menu styling */
    .mobile-menu {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        width: 85% !important;
        max-width: 350px !important;
        height: 100vh !important;
        background-color: #151515 !important;
        z-index: 9999 !important;
        transform: translateX(100%) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s ease !important;
        overflow-y: auto !important;
        box-shadow: -5px 0 15px rgba(0,0,0,0.2) !important;
    }
    
    /* Center the mobile menu items */
    .mobile-menu nav ul {
        text-align: center !important;
        padding: 20px 0 !important;
    }
    
    .mobile-menu nav ul li {
        margin: 10px 0 !important;
        padding: 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .mobile-menu nav ul li a {
        display: inline-block !important;
        width: 80% !important;
        padding: 12px 0 !important;
        text-align: center !important;
    }
    
    /* Fix submenu alignment in mobile */
    .mobile-menu .submenu {
        text-align: center !important;
        width: 80% !important;
        margin: 5px 0 !important;
        padding: 10px 0 !important;
        background-color: rgba(255,255,255,0.05) !important;
        border-radius: 4px !important;
        border-left: none !important;
        display: none !important;
        max-height: none !important;
        transition: all 0.3s ease !important;
        overflow: visible !important;
        position: static !important;
    }
    
    .mobile-menu .has-submenu.active > .submenu {
        display: block !important;
        max-height: none !important;
        border-left: none !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
        position: static !important;
        overflow: visible !important;
    }
    
    .mobile-menu .submenu li {
        margin: 5px 0 !important;
        border-bottom: none !important;
        padding: 0 !important;
    }
    
    .mobile-menu .submenu li a {
        width: 80% !important;
        padding: 8px 0 !important;
        font-size: 0.95em !important;
    }
    
    /* Improve "What We Do" button on mobile */
    .mobile-menu .has-submenu > a {
        position: relative !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 80% !important;
        padding: 12px 0 !important;
    }
    
    .mobile-menu .has-submenu > a:after {
        content: '▼' !important;
        font-size: 0.6em !important;
        transition: transform 0.3s ease !important;
        margin-left: 8px !important;
        display: inline-block !important;
    }
    
    .mobile-menu .has-submenu.active > a:after {
        transform: rotate(180deg) !important;
    }
}

/* Fix for overflow issues */
.home-header, .top-section, .navigation, .navigation ul, .has-submenu {
    overflow: visible !important;
}