/* =====================================================
   SEQUENT TOURS & TRAVELS
   FILE        : navbar.css
   VERSION     : 2.0
   AUTHOR      : Sequent Travels
   DESCRIPTION : Top Contact Bar, Desktop Navigation,
                 Dropdowns, Mobile Menu and Hamburger
===================================================== */


/* =====================================================
   01. TOP CONTACT BAR
===================================================== */

.top-contact-bar{
    width:100%;
    height:40px;
    background:#3D3C3A;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 30px;
    position:relative;
    z-index:1100;
}

.top-contact-left{
    width:100%;

    display:flex;

    align-items:center;

    gap:30px;

    padding:
        0
        clamp(25px,5.5vw,150px);
}

.top-contact-left a{
    display:flex;
    align-items:center;
    gap:8px;
    color:#FFFFFF;
    font-size:13px;
    font-weight:400;
    text-decoration:none;
    transition:color .3s ease;
}

.top-contact-left a:hover{
    color:#D97706;
}

.top-contact-left i{
    color:#D97706;
    font-size:14px;
}


/* =====================================================
   02. HEADER
===================================================== */

header{
    position:relative;
    width:100%;
    z-index:1000;
}


/* =====================================================
   03. MAIN NAVBAR
===================================================== */

.navbar{
    position:absolute;
    top:4px;
    left:50%;
    transform:translateX(-50%);
    width:90%;
    max-width:1280px;
    height:72px;
    padding:0 32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    background:rgba(255,255,255,.90);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(0,0,0,.06);
    border-radius:16px;
    z-index:1000;
}


/* =====================================================
   04. NAVBAR LOGO
===================================================== */

.navbar .logo{
    display:flex;
    align-items:center;
    flex-shrink:0;
}

.navbar .logo a{
    display:block;
}

.navbar .logo img{
    width:auto;
    height:54px;
    display:block;
    object-fit:contain;
}


/* =====================================================
   05. DESKTOP NAVIGATION
===================================================== */

.nav-links{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:32px;
    margin:0;
    padding:0;
    list-style:none;
}

.nav-links > li{
    position:relative;
    list-style:none;
}

.nav-links > li > a{
    display:block;
    color:#222222;
    font-size:15px;
    font-weight:600;
    line-height:1.4;
    text-decoration:none;
    white-space:nowrap;
    transition:color .3s ease;
}

.nav-links > li > a:hover{
    color:#D97706;
}


/* =====================================================
   06. DESKTOP BOOK NOW BUTTON
===================================================== */

.book-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    padding:13px 24px;
    background:#D97706;
    color:#FFFFFF;
    border-radius:12px;
    font-size:15px;
    font-weight:600;
    line-height:1.4;
    text-decoration:none;
    white-space:nowrap;
    transition:
        background .3s ease,
        transform .3s ease;
}

.book-btn:hover{
    background:#E38B2C;
    color:#FFFFFF;
    transform:translateY(-1px);
}


/* =====================================================
   07. DESKTOP VEHICLES DROPDOWN
===================================================== */

.dropdown{
    position:relative;
}

.dropdown-menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    width:240px;
    padding:12px;
    margin:0;
    background:#FFFFFF;
    border-radius:20px;
    box-shadow:0 12px 28px rgba(0,0,0,.08);
    z-index:1200;
}

.dropdown:hover > .dropdown-menu{
    display:block;
}

.dropdown-menu li{
    list-style:none;
}

.dropdown-menu a{
    display:block;
    padding:12px 14px;
    color:#222222;
    border-radius:12px;
    font-size:15px;
    font-weight:500;
    line-height:1.4;
    text-decoration:none;
    white-space:nowrap;
    transition:
        background .25s ease,
        color .25s ease;
}

.dropdown-menu a:hover{
    background:#FFF7ED;
    color:#D97706;
}


/* =====================================================
   08. DESKTOP VEHICLE SUBMENU
===================================================== */

.submenu{
    position:relative;
}

.submenu-list{
    display:none;
    position:absolute;
    top:0;
    left:100%;
    width:220px;
    padding:12px;
    margin:0;
    background:#FFFFFF;
    border-radius:20px;
    box-shadow:0 12px 28px rgba(0,0,0,.08);
    z-index:1300;
}

.submenu:hover > .submenu-list{
    display:block;
}

.submenu:hover > a{
    background:#FFF7ED;
    color:#D97706;
}


/* =====================================================
   09. HAMBURGER BUTTON
===================================================== */

.menu-toggle{
    display:none;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    padding:6px;
    background:none;
    border:none;
    color:#222222;
    font-size:30px;
    line-height:1;
    cursor:pointer;
}


/* =====================================================
   10. MOBILE MENU
===================================================== */

.mobile-menu{
    display:none;
    position:fixed;
    top:78px;
    left:3%;
    width:94%;
    max-height:calc(100vh - 90px);
    background:#FFFFFF;
    border-radius:0 0 16px 16px;
    box-shadow:0 12px 30px rgba(0,0,0,.12);
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    z-index:9999;
}

.mobile-menu.active{
    display:block;
    animation:mobileMenuFade .25s ease;
}


/* =====================================================
   10.1 MOBILE MENU ANIMATION
===================================================== */

@keyframes mobileMenuFade{

    from{
        opacity:0;
        transform:translateY(-10px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


/* =====================================================
   10.2 MOBILE MAIN LINKS AND TOGGLE BUTTONS
===================================================== */

.mobile-menu > a:not(.mobile-book-btn),
.mobile-dropdown-toggle,
.mobile-submenu-toggle{
    width:100%;
    padding:16px 24px;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:none;
    border:none;
    color:#222222;
    font-family:'Poppins',sans-serif;
    font-size:15px;
    font-weight:500;
    line-height:1.6;
    text-align:left;
    text-decoration:none;
    cursor:pointer;
}

.mobile-menu > a:not(.mobile-book-btn):hover,
.mobile-dropdown-toggle:hover,
.mobile-submenu-toggle:hover{
    background:#F7F6F3;
}


/* =====================================================
   10.3 MOBILE VEHICLES DROPDOWN
===================================================== */

.mobile-dropdown{
    display:none;
    width:100%;
    padding:6px 0;
    background:#FCFCFC;
}

.mobile-dropdown.active{
    display:block;
}


/* =====================================================
   10.4 MOBILE VEHICLE SUBMENUS
===================================================== */

.mobile-submenu{
    display:none;
    width:100%;
    padding:6px 0;
    background:#FCFCFC;
}

.mobile-submenu.active{
    display:block;
}


/* =====================================================
   10.5 MOBILE DROPDOWN LINKS
===================================================== */

.mobile-dropdown a,
.mobile-submenu a{
    width:100%;
    padding:13px 24px 13px 42px;
    margin:0;
    display:flex;
    align-items:center;
    color:#222222;
    font-size:14px;
    font-weight:500;
    line-height:1.6;
    text-align:left;
    text-decoration:none;
    transition:
        background .25s ease,
        color .25s ease;
}

.mobile-dropdown a:hover,
.mobile-submenu a:hover{
    background:#FFF7ED;
    color:#D97706;
}


/* =====================================================
   10.6 MOBILE DROPDOWN ICONS
===================================================== */

.mobile-dropdown-toggle span,
.mobile-submenu-toggle span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    margin-left:16px;
    font-size:18px;
    line-height:1;
}


/* =====================================================
   10.7 MOBILE BOOK NOW BUTTON
===================================================== */

.mobile-menu > .mobile-book-btn{
    width:calc(100% - 32px);
    min-height:50px;
    margin:16px;
    padding:14px 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#D97706;
    border:none;
    border-radius:10px;
    color:#FFFFFF;
    font-family:'Poppins',sans-serif;
    font-size:15px;
    font-weight:600;
    line-height:1.4;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
    opacity:1;
    visibility:visible;
}

.mobile-menu > .mobile-book-btn:hover{
    background:#E38B2C;
    color:#FFFFFF;
}


/* =====================================================
   11. RESPONSIVE NAVBAR
===================================================== */


/* =====================================================
   11.1 TABLET AND MOBILE NAVIGATION
   BREAKPOINT : 991px AND BELOW
===================================================== */

@media (max-width:991px){

    .top-contact-bar{
        display:none;
    }

    .navbar{
        top:8px;
        width:94%;
        height:70px;
        padding:0 20px;
    }

    .navbar .logo img{
        height:50px;
    }

    .nav-links{
        display:none;
    }

    .book-btn{
        display:none;
    }

    .menu-toggle{
        display:flex;
    }

    .mobile-menu{
        top:78px;
    }

}


/* =====================================================
   11.2 MOBILE NAVIGATION
   BREAKPOINT : 768px AND BELOW
===================================================== */

@media (max-width:768px){

    .navbar{
        top:8px;
        width:94%;
        height:66px;
        padding:0 18px;
        border-radius:14px;
    }

    .navbar .logo img{
        height:46px;
    }

    .menu-toggle{
        font-size:28px;
    }

    .mobile-menu{
        top:74px;
        left:3%;
        width:94%;
        max-height:calc(100vh - 86px);
    }

}


/* =====================================================
   11.3 SMALL MOBILE NAVIGATION
   BREAKPOINT : 430px AND BELOW
===================================================== */

@media (max-width:430px){

    .navbar{
        width:94%;
        height:64px;
        padding:0 16px;
    }

    .navbar .logo img{
        height:43px;
    }

    .menu-toggle{
        padding:4px;
        font-size:27px;
    }

    .mobile-menu{
        top:72px;
        max-height:calc(100vh - 82px);
        border-radius:0 0 14px 14px;
    }

    .mobile-menu > a:not(.mobile-book-btn),
    .mobile-dropdown-toggle,
    .mobile-submenu-toggle{
        padding:14px 20px;
        font-size:14px;
    }

    .mobile-dropdown a,
    .mobile-submenu a{
        padding:12px 20px 12px 36px;
        font-size:13px;
    }

    .mobile-menu > .mobile-book-btn{
        width:calc(100% - 28px);
        min-height:48px;
        margin:14px;
        padding:13px 16px;
        font-size:14px;
    }

}


/* =====================================================
   11.4 VERY SMALL MOBILE NAVIGATION
   BREAKPOINT : 360px AND BELOW
===================================================== */

@media (max-width:360px){

    .navbar{
        width:96%;
        padding:0 14px;
    }

    .navbar .logo img{
        height:40px;
    }

    .mobile-menu{
        left:2%;
        width:96%;
    }

    .mobile-menu > a:not(.mobile-book-btn),
    .mobile-dropdown-toggle,
    .mobile-submenu-toggle{
        padding:13px 18px;
    }

    .mobile-dropdown a,
    .mobile-submenu a{
        padding-left:32px;
    }

}