/* =====================================
   MOBILE ONLY
===================================== */

@media(max-width:991px){

    /* HEADER */

    .header-flex{

        display:flex;

        align-items:center;

        justify-content:space-between;

        gap:15px;

        min-height:80px;
    }

    .logo{

        flex:1;
    }

    .logo img,
    .custom-logo{

        max-height:46px;
    }


    /* SEARCH */

    .header-search{

        display:none;
    }


    /* HAMBURGER */

    .mobile-menu-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

        flex-direction:column;

        gap:5px;

        width:50px;

        height:50px;

        border:none;

        border-radius:12px;

        background:
        rgba(255,255,255,.08);

        cursor:pointer;

        z-index:1000001;
    }

    .mobile-menu-toggle span{

        width:22px;

        height:2px;

        background:#fff;

        border-radius:20px;

        transition:.3s ease;
    }

    .mobile-menu-toggle.active span:nth-child(1){

        transform:
        translateY(7px)
        rotate(45deg);
    }

    .mobile-menu-toggle.active span:nth-child(2){

        opacity:0;
    }

    .mobile-menu-toggle.active span:nth-child(3){

        transform:
        translateY(-7px)
        rotate(-45deg);
    }


    /* MENU OFFCANVAS */

    .main-menu{

    position:fixed !important;

    top:0;

    right:-380px;

    width:380px;

    max-width:90vw;

    height:100vh;

    background:#0b0b0b;

    padding:90px 25px 40px;

    overflow-y:auto;

    transition:right .35s ease;

    z-index:1000000;

    display:block !important;

    box-sizing:border-box;
}

.main-menu.active{

    right:0;
}

.main-menu,
.main-menu *{

    box-sizing:border-box;
}

.main-menu{

    flex:none !important;
}

.site-header{

    z-index:99999;
}

.main-menu{

    z-index:999999;
}

.mobile-menu-toggle{

    z-index:1000001;
}
    /* MENU CONTAINER */

    .main-menu > div{

        width:100%;
    }

    .main-menu > div > ul{

        width:100%;
    }


    /* MENU UL */

    .main-menu ul{

        display:flex !important;

        flex-direction:column;

        align-items:stretch;

        width:100%;

        gap:0;
    }


    /* MENU LI */

    .main-menu li{

        width:100%;
    }


    /* MENU LINKS */

    .main-menu a{

        display:flex !important;

        align-items:center;

        justify-content:flex-start;

        width:100%;

        height:auto !important;

        min-height:56px;

        padding:14px 0;

        font-size:17px;

        border-bottom:
        1px solid rgba(255,255,255,.08);

        background:none !important;
    }

    .main-menu a:hover{

        color:
        var(--primary-color);
    }


    /* ITEM ATIVO */

    .current-menu-item > a,
    .current_page_item > a{

        background:none !important;

        color:
        var(--primary-color);
    }


    /* SUBMENU */

    .main-menu .sub-menu{

        position:relative;

        top:auto;

        left:auto;

        min-width:100%;

        width:100%;

        opacity:1;

        visibility:visible;

        transform:none;

        display:none !important;

        background:
        rgba(255,255,255,.03);

        border:none;

        border-radius:8px;

        padding:5px 0 5px 15px;

        margin:0;
    }

    .main-menu li.menu-open > .sub-menu{

        display:flex !important;
    }

    .main-menu .sub-menu a{

        min-height:44px;

        font-size:14px;

        border-bottom:none;
    }


    /* OVERLAY */

    .menu-overlay{

        position:fixed;

        inset:0;

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

        opacity:0;

        visibility:hidden;

        transition:.3s ease;

        z-index:999999;
    }

    .menu-overlay.active{

        opacity:1;

        visibility:visible;
    }


    /* TOP BAR */

    .top-bar{

        display:none;
    }


    /* FOOTER */

    .footer-layout-three-columns .footer-content{

        grid-template-columns:1fr;

        text-align:center;
    }

    .footer-layout-three-columns .footer-brand{

        align-items:center;
    }

    .footer-layout-three-columns .footer-menu ul{

        align-items:center;
    }

}

@media(max-width:991px){

    html,
    body{

        overflow-x:hidden;

        max-width:100%;
    }

    .main-menu{

        position:fixed;

        top:0;

        right:-380px;

        width:380px;

        max-width:90vw;

        height:100vh;

        overflow-y:auto;

        overflow-x:hidden;
    }

}