/*====================================
            MENU OVERLAY
====================================*/
.menu-overlay{

    position:fixed;

    top:75px;
    left:0;

    width:100%;
    height:calc(100vh - 72px);

    background:rgba(40,30,20,.45);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    opacity:0;
    visibility:hidden;

    transition:.35s;

    z-index:998;

}

.menu-overlay.active{

    opacity:1;
    visibility:visible;

}


/*====================================
            SIDE MENU
====================================*/

.side-menu{

    position:fixed;

    top:75px;

    left:-100%;

    width:82%;

    max-width:320px;

    height: calc(100vh - 75px);

    background:#F8F1E6;

    border-radius:0 30px 30px 0;

    overflow-y:auto;

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

    transition:left .35s ease;

    z-index:999;
    border-top-right-radius:32px;
    border-bottom-right-radius:32px;

}


/*====================================
            ACTIVE MENU
====================================*/

.side-menu.active{

    left:0;

}

.menu-overlay.active{

    opacity:1;

    visibility:visible;

}


/*====================================
            MENU BANNER
====================================*/

.menu-banner{

    margin:16px;

    padding:8px;

    background:linear-gradient(
        135deg,
        #FFD58A 0%,
        #F4A63A 45%,
        #D89239 100%
    );

    border-radius:28px;

    box-shadow:
        0 0 0 2px rgba(255,215,130,.45),
        0 0 25px rgba(216,146,57,.35),
        0 12px 35px rgba(216,146,57,.28);

}

.menu-banner img{

    width:100%;
    height:180px;

    display:block;
    object-fit:cover;

    border-radius:20px;

    border:4px solid rgba(255,255,255,.9);

}


/*====================================
            MENU LINKS
====================================*/

.menu-links{

    list-style:none;

    padding:14px 22px;

    margin:0;

}


/*====================================
            MENU ITEM
====================================*/

.menu-links li{

    margin-bottom:2px;

}

.menu-links a{

    display:flex;

    align-items:center;

    gap:18px;

    text-decoration:none;

    color:#3E2D20;

    padding:10px 20px;

    border-radius:16px;

    font-family:'Poppins',sans-serif;

    font-size:18px;

    font-weight:500;

    transition:.25s;

}


/*====================================
            ICON
====================================*/

.menu-links i{

    width:24px;

    text-align:center;

    font-size:18px;

    color:#D89239;

}


/*====================================
            HOVER
====================================*/

.menu-links a:hover{

    background:#EFE4D4;

    transform:translateX(4px);

}


/*====================================
            DIVIDER
====================================*/

.menu-divider{

    width:calc(100% - 44px);

    height:1px;

    background:#E5D6C5;

    margin:8px auto 20px;

}


/*====================================
            SOCIAL
====================================*/

.menu-social{

    display:flex;

    justify-content:center;

    gap:16px;

    padding-bottom:24px;

}

.menu-social a{

    width:46px;

    height:46px;

    border-radius:50%;

    background:#FFF;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    color:#4A2C18;

    font-size:18px;

    box-shadow:0 6px 14px rgba(0,0,0,.08);

    transition:.3s;

}

.menu-social a:hover{

    background:#D89239;

    color:#FFF;

}