/*========================================
        MOBILE MENU V2
========================================*/

.menu-toggle{

    display:none;

    width:48px;
    height:48px;

    border:none;

    border-radius:12px;

    background:#f58220;

    color:#fff;

    cursor:pointer;

    font-size:22px;

    transition:.30s;

    position:relative;

    z-index:1002;

}

.menu-toggle:hover{

    background:#d96d0b;

}

.menu-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:998;

}

.menu-overlay.active{

    opacity:1;

    visibility:visible;

}

body.menu-open{

    overflow:hidden;

}

@media(max-width:992px){

    .menu-toggle{

        display:flex;

        justify-content:center;

        align-items:center;

    }

}

/*========================================
        MOBILE PANEL
========================================*/

@media (max-width:992px){

    nav{

        position:fixed;

        top:0;
        left:0;

        width:300px;
        max-width:85%;

        height:100vh;

        background:#ffffff;

        transform:translateX(-100%);

        transition:transform .35s ease;

        z-index:999;

        box-shadow:10px 0 30px rgba(0,0,0,.15);

        display:flex;

        align-items:flex-start;

        padding-top:100px;

    }

    nav.active{

        transform:translateX(0);

    }

    nav ul{

        width:100%;

        display:flex;

        flex-direction:column;

        gap:0;

        padding:0;

    }

    nav li{

        width:100%;

    }

    nav a{

        display:block;

        width:100%;

        padding:18px 30px;

        border-bottom:1px solid #ececec;

        color:#222;

        font-size:17px;

        font-weight:600;

        transition:.25s;

    }

    nav a:hover{

        background:#f58220;

        color:#fff;

    }

}