/* ==========================================
   Mobile Offcanvas
========================================== */

.offcanvas{

    width:320px;

    border-top-right-radius:18px;
    border-bottom-right-radius:18px;

}

.offcanvas-header{

    position:relative;

    display:flex;
    align-items:center;

    padding:20px;

    background:linear-gradient(
        135deg,
        #ffffff 0%,
        #f5fbfd 45%,
        #e7f4f9 100%
    );

    border-bottom:1px solid #edf2f7;

}

.offcanvas-header::after{

    content:"";

    position:absolute;

    left:20px;
    right:20px;
    bottom:0;

    height:2px;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        #0b8b8b,
        #4fd1c5,
        transparent
    );

}

.offcanvas-title{

    display:flex;
    align-items:center;
    gap:12px;

    margin:0;

}

.menu-badge{

    width:40px;
    height:40px;

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

    flex-shrink:0;

    border-radius:10px;

    background:#fff;

    border:2px solid #778899;

    box-shadow:
        0 8px 24px rgba(0,0,0,.10),
        0 3px 10px rgba(8,58,83,.12);

    transition:.30s;

}

.menu-badge i{

    font-size:32px;

    color:#008080;

}

.menu-title{

    font-size:1.2rem;
    font-weight:700;

    color:#008080;

}

.offcanvas-body{

    padding:15px;

}


/* ==========================================
   Premium Main Menu
========================================== */

.offcanvas .nav-link{

    display:flex;

    align-items:center;

    justify-content:space-between;

    width:100%;

    padding:15px 18px;

    margin-bottom:8px;

    border-radius:14px;

    background:#ffffff;

    border:1px solid rgba(8,58,83,.08);

    color:#083A53;

    font-size:15px;

    font-weight:600;

    text-decoration:none;

    transition:.30s ease;

}

.offcanvas .nav-link:hover{

    background:#eefafa;

    border-color:#008080;

    transform:translateX(4px);

    box-shadow:0 8px 18px rgba(8,58,83,.08);

}

/* ==========================================
   Icon + Text
========================================== */

.mobile-menu-label{

    display:flex;

    align-items:center;

    gap:8px;

    flex:1;

}

.mobile-menu-label i,
.mobile-menu-label img{

    width:24px;

    height:24px;

    min-width:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    line-height:1;

    flex-shrink:0;

}

/* Text */

.mobile-menu-label > span{

    display:block;

    line-height:1;

    margin:0;

    padding:0;

}


/* ==========================================
   Menu Arrow
========================================== */

.menu-arrow{

    margin-left:12px;

    font-size:14px;

    color:#8a97a6;

    flex-shrink:0;

    transition:
        transform .30s ease,
        color .30s ease;

}

/* Hover */

.offcanvas .nav-link:hover .menu-arrow{

    color:#008080;

}

/* Dropdown Open */

.offcanvas .nav-link[aria-expanded="true"] .menu-arrow{

    transform:rotate(180deg);

    color:#008080;

}



/* ==========================================
   List
========================================== */

.offcanvas ul,
.offcanvas li{

    margin:0;

    padding:0;

    list-style:none;

}

/* ==========================================
   Premium Dropdown
========================================== */

.offcanvas .collapse.show{

    margin:-2px 0 12px;

    padding:10px;

    border-radius:14px;

    background:#f9fcfc;

    border-left:4px solid #008080;

    border-top:1px solid rgba(8,58,83,.06);

    border-right:1px solid rgba(8,58,83,.06);

    border-bottom:1px solid rgba(8,58,83,.06);

    animation:submenuFade .30s ease;

}

.offcanvas .collapse.show .nav-link{

    padding:12px 14px;

    margin:5px 0;

    border-radius:10px;

    background:transparent;

    color:#5b6775;

    font-size:14px;

    font-weight:500;

}

.offcanvas .collapse.show .nav-link:hover{

    background:#eaf9f9;

    color:#008080;

    transform:translateX(6px);

}


//* ==========================================
   Language
========================================== */

.offcanvas .language-code{

    font-size:18px;

    font-weight:700;

    letter-spacing:.5px;

}

.offcanvas .cf-language-icon{

    font-size:18px;

}


/* ==========================================
   Language Submenu Button
========================================== */

.language-nav-btn{

    display:flex;

    align-items:center;

    width:100%;

    min-height:50px;

    padding:12px 16px 12px 42px;

}

.language-nav-btn:hover{

    background:linear-gradient(
        135deg,
        #eefafa,
        #e5f7f7
    );

    color:#008080;

    transform:translateX(5px);

    box-shadow:
        0 4px 10px rgba(8,58,83,.08);

}

.language-nav-btn:focus{

    outline:none;

    box-shadow:none;

}

.language-nav-btn .mobile-menu-label{

    display:flex;

    align-items:center;

    gap:8px;

    width:100%;

}}