/* Mobile Menu Styles */
@media only screen and (max-width: 992px) {
    #mainmenu {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        width: 280px !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.95) !important;
        padding: 80px 30px 30px !important;
        overflow-y: auto !important;
        transition: all 0.3s ease !important;
        z-index: 1000 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    header.menu-open #mainmenu {
        left: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    #mainmenu li {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        float: none !important;
    }

    #mainmenu li a {
        color: #fff !important;
        font-size: 16px !important;
        display: block !important;
        padding: 10px 0 !important;
        border: none !important;
        text-align: left !important;
    }

    .menu_side_area {
        position: relative;
        z-index: 1001;
    }

    #menu-btn {
        display: block;
        width: 30px;
        height: 30px;
        position: relative;
        cursor: pointer;
        z-index: 1001;
    }

    /* Add overlay when menu is open */
    header.menu-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 999;
    }

    /* Reset any conflicting styles */
    #mainmenu ul {
        position: relative !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        width: 100% !important;
        height: auto !important;
    }

    #mainmenu li:hover > ul {
        margin: 0 !important;
    }
} 