/* =========================
   MOBILE HEADER MENU
========================= */

@media (max-width: 992px){

    .container{
        width:95%;
    }

    /* Show hamburger */
    .hamburger{
        display:block;
        font-size:22px;
        padding:15px;
        cursor:pointer;
    }

    /* Hide desktop menu */
    .nav-menu{
        position:fixed;
        top:0;
        right:-100%;
        width:280px;
        height:100%;
        background:#fff;
        flex-direction:column;
        align-items:flex-start;
        padding-top:70px;
        gap:0;
        box-shadow:-5px 0 15px rgba(0,0,0,0.1);
        transition:0.3s ease;
        z-index:1000;
    }

    .nav-menu li{
        width:100%;
        padding:15px 20px;
        border-bottom:1px solid #eee;
    }

    .nav-menu li.active::after{
        display:none;
    }

    /* When active */
    .nav-menu.active{
        right:0;
    }

    /* Overlay background */
    .menu-overlay{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:rgba(0,0,0,0.4);
        display:none;
        z-index:999;
    }

    .menu-overlay.active{
        display:block;
    }

}