/* ==========================================
   MODERN MOBILE MENU
========================================== */

.mobile-menu .nav{
    padding:0;
    width:100%;
}

.mobile-menu,
.wrapper{
    transition:all .45s cubic-bezier(.77,0,.18,1);
}

.menu-hide{
    display:none;
}

.menu-canvas-off{
    overflow-x:hidden;
}

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

.mobile-menu{
    position:fixed;
    top:0;
    left:0;

    width:320px;
    max-width:320px;
    height:100vh;

    padding:15px 0 30px;

    background:#1b1a63;
    color:#fff;

    overflow-y:auto;
    overflow-x:hidden;

    z-index:99999999;

    transform:translateX(-100%);
    opacity:0;

    transition:
        transform .45s cubic-bezier(.77,0,.18,1),
        opacity .35s ease;

    box-shadow:15px 0 50px rgba(0,0,0,.25);
}

.mobile-menu.show-menu{
    transform:translateX(0);
    opacity:1;
}

/* =========================
   LOGO
========================= */

.mobile-menu .site-logo{
    position:relative;
    max-width:140px;
    padding:0 20px;
    margin-bottom:20px;
}

.mobile-menu .site-logo img{
    max-width:100%;
    height:auto;
}

/* =========================
   MENU LIST
========================= */

.mobile-menu ul{
    margin:0;
    padding:0;
    width:100%;
}

.mobile-menu ul ul{
    display:none;
    margin-top:0;
}

.mobile-menu ul li{
    list-style:none;
    position:relative;

    width:100%;
    margin:0;
    padding:0 10px;

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

    font-size:13px;
    font-weight:500;
    text-transform:uppercase;

    opacity:0;
    transform:translateX(-20px);

    transition:all .35s ease;
}

.mobile-menu.show-menu ul li{
    opacity:1;
    transform:translateX(0);
}

.mobile-menu.show-menu ul li:nth-child(1){transition-delay:.05s;}
.mobile-menu.show-menu ul li:nth-child(2){transition-delay:.10s;}
.mobile-menu.show-menu ul li:nth-child(3){transition-delay:.15s;}
.mobile-menu.show-menu ul li:nth-child(4){transition-delay:.20s;}
.mobile-menu.show-menu ul li:nth-child(5){transition-delay:.25s;}
.mobile-menu.show-menu ul li:nth-child(6){transition-delay:.30s;}
.mobile-menu.show-menu ul li:nth-child(7){transition-delay:.35s;}
.mobile-menu.show-menu ul li:nth-child(8){transition-delay:.40s;}

.mobile-menu ul li:last-child{
    border:none;
}

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

.mobile-menu ul li a{
    display:block;
    width:100%;

    padding:12px 20px;

    color:#fff;
    font-weight:600;
    text-decoration:none;

    transition:.3s;
}

.mobile-menu ul li a:hover{
    color:#d4af37;
    padding-left:25px;
}

/* =========================
   SUB MENU
========================= */

.mobile-menu ul ul li{
    font-size:12px;
    font-weight:400;
}

.mobile-menu ul ul li a{
    padding:10px 35px;
    color:rgba(255,255,255,.85);
}

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

.mobile-menu span.dropdown{
    position:absolute;
    right:12px;
    top:2px;

    width:40px;
    height:40px;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;
    color:#fff;
}

.mobile-menu span.dropdown i{
    font-size:16px;
    transition:.3s;
}

.mobile-menu span.dropdown.open i{
    transform:rotate(45deg);
    color:#d4af37;
}

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

.toggle-mobile{
    position:absolute;
    right:15px;
    top:50%;

    transform:translateY(-50%);

    width:40px;
    height:40px;

    display:none;
    cursor:pointer;

    z-index:999;
}

.toggle-mobile span{
    position:absolute;
    left:8px;

    width:24px;
    height:3px;

    background:#d4af37 !important;
    border-radius:20px;

    transition:all .35s ease;
}

.toggle-mobile span.one{
    top:10px;
}

.toggle-mobile span.two{
    top:18px;
}

.toggle-mobile span.three{
    top:26px;
}

/* Hamburger to X */

.toggle-mobile.open span.one{
    transform:rotate(45deg);
    top:18px;
}

.toggle-mobile.open span.two{
    opacity:0;
}

.toggle-mobile.open span.three{
    transform:rotate(-45deg);
    top:18px;
}

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

.cross{
    position:absolute;

    top:18px !important;
    right:18px !important;

    width:30px;
    height:30px;

    cursor:pointer;
    z-index:99;
}

.cross span{
    position:absolute;
    top:14px;

    width:22px;
    height:2px;

    background:#fff;
    border-radius:20px;
}

.cross span.one{
    transform:rotate(45deg);
}

.cross span.two{
    transform:rotate(-45deg);
}

.mobile-menu.show-menu .cross{
    top:18px !important;
    right:18px !important;
}

/* =========================
   OVERLAY
========================= */

.menu-canvas .wrapper:after{
    content:"";
    position:fixed;
    inset:0;
    z-index:999;

    background:rgba(0,0,0,.45);
    backdrop-filter:blur(2px);
}

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

.mobile-menu .social-icon ul{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
}

.mobile-menu .social-icon ul li{
    border:0;
    width:auto;
    padding:0;
}

.mobile-menu .social-icon ul li a{
    width:35px;
    height:35px;

    padding:0;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#fff;
    color:#1b1a63;
}

.mobile-menu .social-icon ul li a:hover{
    background:#d4af37;
}

/* =========================
   CONTACT BOX
========================= */

.mobile-menu .mobile-cnt{
    padding:12px;
    margin-top:25px;

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

    border-left:4px solid #d4af37;
}

.mobile-menu .mobile-cnt address span{
    display:inline-flex;
    vertical-align:middle;
}

/* =========================
   MAIN MENU LIST
========================= */

.mobile-menu ul.main-list{
    overflow-y:auto;
    padding-bottom:20px;
}

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

@media(max-width:991px){

    .toggle-mobile{
        display:block;
    }

    .move-to-right{
        transform:translateX(0);
    }

}
/* ==========================
   MODERN HAMBURGER
========================== */

.modern-toggle{
    width:42px !important;
    height:42px !important;
    position:absolute !important;
    right:15px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    cursor:pointer;
    z-index:9999;
}

.modern-toggle span{
    position:absolute;
    width:24px;
    height:3px;
    left:9px;
    background:#d4af37 !important;
    border-radius:50px;
    transition:all .35s ease;
}

.modern-toggle .one{
    top:10px;
}

.modern-toggle .two{
    top:18px;
}

.modern-toggle .three{
    top:26px;
}

/* OPEN STATE */

.modern-toggle.open .one{
    top:18px;
    transform:rotate(45deg);
}

.modern-toggle.open .two{
    opacity:0;
}

.modern-toggle.open .three{
    top:18px;
    transform:rotate(-45deg);
}