/*====================================
RESPONSIVE NAVBAR
====================================*/

.navbar{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    transition:.3s ease;
}

.navbar nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.menu-toggle{
    display:none;
    font-size:28px;
    color:#fff;
    cursor:pointer;
}

/* Desktop */

@media (min-width:993px){

    .mobile-menu,
    .menu-overlay{
        display:none;
    }

}

/* Mobile */

@media (max-width:992px){

    .menu-toggle{
        display:block;
    }

    .nav-links,
    .nav-buttons{
        display:none;
    }

}

/* Overlay */

.menu-overlay{

    position:fixed;
    inset:0;

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

    backdrop-filter:blur(4px);

    opacity:0;
    visibility:hidden;

    transition:.3s;

    z-index:1998;

}

.menu-overlay.show{

    opacity:1;
    visibility:visible;

}

/* Sidebar */

.mobile-menu{

    position:fixed;

    top:0;
    right:-320px;

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

    height:100vh;

    background:#0F172A;

    display:flex;
    flex-direction:column;

    padding:24px;

    overflow-y:auto;

    transition:.35s ease;

    z-index:1999;

}

.mobile-menu.show{

    right:0;

}

/* Header */

.mobile-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

    padding-bottom:20px;

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

}

.mobile-header h2{

    color:#fff;

    font-size:24px;

    font-weight:700;

}

.mobile-header i{

    font-size:28px;

    color:#fff;

    cursor:pointer;

}

/* Links */

.mobile-menu ul{

    list-style:none;

    padding:0;

    margin:0;

}

.mobile-menu ul li{

    margin-bottom:10px;

}

.mobile-menu ul li a{

    display:block;

    padding:14px 16px;

    border-radius:12px;

    color:#fff;

    font-size:18px;

    font-weight:600;

    transition:.3s;

}

.mobile-menu ul li a:hover,
.mobile-menu ul li a.active{

    background:#0F766E;

}

/* Buttons */

.mobile-buttons{

    margin-top:auto;

    display:flex;

    flex-direction:column;

    gap:15px;

}

.mobile-buttons .login-btn{

    display:block;

    text-align:center;

    padding:14px;

    border:2px solid #0F766E;

    border-radius:12px;

    color:#fff;

    font-weight:700;

}

.mobile-buttons .book-btn{

    display:block;

    text-align:center;

    padding:14px;

    background:#0F766E;

    border-radius:12px;

    color:#fff;

    font-weight:700;

}

.mobile-buttons .book-btn:hover{

    background:#115E59;

}

/* Hide Desktop Navbar */

.navbar.hide{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}