/* ==========================================================
   NemuTrip Header
   FINAL V10
   Theme : NemuTrip
========================================================== */

/* ==========================================================
   Variables
========================================================== */

:root{

    --header-height:84px;

    --header-bg:transparent;

    --header-bg-scroll:rgba(255,255,255,.92);

    --header-border:rgba(255,255,255,.10);

    --header-shadow:0 12px 35px rgba(15,23,42,.08);

    --header-primary:#0D6EFD;

    --header-dark:#1E293B;

    --header-text:#FFFFFF;

    --header-text-scroll:#1F2937;

    --header-radius:18px;

    --header-transition:.35s ease;

}

/* ==========================================================
   Global
========================================================== */

#site-header,
#site-header *{

    box-sizing:border-box;

}

#site-header a{

    text-decoration:none;

    transition:var(--header-transition);

}

#site-header img{

    display:block;

    max-width:100%;

}

/* ==========================================================
   Header
========================================================== */

#site-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

    background:var(--header-bg);

    transition:all .35s ease;

}

/* ==========================================================
   Navbar
========================================================== */

#site-header .navbar{

    min-height:var(--header-height);

    padding:.85rem 0;

    background:transparent;

}

/* ==========================================================
   Container
========================================================== */

#site-header .container{

    align-items:center;

}

/* ==========================================================
   Brand
========================================================== */

.navbar-brand{

    margin:0;

    padding:0;

}

.custom-logo{

    width:auto;

    height:48px;

    transition:all .35s ease;

}

.brand-text{

    color:#FFFFFF;

    font-size:1.7rem;

    font-weight:800;

    letter-spacing:-.5px;

}

/* ==========================================================
   Collapse
========================================================== */

.navbar-collapse{

    align-items:center;

}

/* ==========================================================
   Navbar Actions
========================================================== */

.navbar-actions{

    display:flex;

    align-items:center;

    gap:18px;

    margin-left:30px;

}

/* ==========================================================
   Mobile Toggle
========================================================== */

.navbar-toggler{

    border:none;

    padding:0;

    box-shadow:none;

    background:transparent;

}

.navbar-toggler:focus{

    box-shadow:none;

}

.navbar-toggler span{

    display:block;

    width:26px;

    height:2px;

    margin:5px 0;

    border-radius:10px;

    background:#FFFFFF;

    transition:all .30s ease;

}

/* ==========================================================
   Overlay
========================================================== */

.navbar-overlay{

    position:fixed;

    inset:0;

    opacity:0;

    visibility:hidden;

    background:rgba(15,23,42,.45);

    transition:.35s ease;

    z-index:9980;

}

/* ==========================================================
   End BAB 1
========================================================== */

/* ==========================================================
   Navigation Menu
========================================================== */

.navbar-nav{

    gap:8px;

}

.navbar-nav .nav-item{

    position:relative;

}

.navbar-nav .nav-link{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:12px 18px;

    color:var(--header-text);

    font-size:.96rem;

    font-weight:600;

    border-radius:12px;

    transition:all .30s ease;

}

/* ==========================================================
   Hover
========================================================== */

.navbar-nav .nav-link:hover{

    color:#FFFFFF;

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

}

/* ==========================================================
   Active Menu
========================================================== */

.navbar-nav .nav-link.active{

    color:#FFFFFF;

}

.navbar-nav .nav-link.active::after{

    content:"";

    position:absolute;

    left:18px;

    right:18px;

    bottom:6px;

    height:3px;

    border-radius:999px;

    background:#F59E0B;

}

/* ==========================================================
   Underline Animation
========================================================== */

.navbar-nav .nav-link::before{

    content:"";

    position:absolute;

    left:50%;

    bottom:6px;

    width:0;

    height:3px;

    background:#F59E0B;

    border-radius:999px;

    transform:translateX(-50%);

    transition:width .30s ease;

}

.navbar-nav .nav-link:hover::before{

    width:55%;

}

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

.dropdown-toggle::after{

    margin-left:8px;

    transition:transform .30s ease;

}

.dropdown:hover>.dropdown-toggle::after{

    transform:rotate(180deg);

}

/* ==========================================================
   Dropdown Menu
========================================================== */

.dropdown-menu{

    margin-top:14px;

    padding:10px;

    min-width:250px;

    border:none;

    border-radius:18px;

    background:#FFFFFF;

    box-shadow:

        0 20px 50px rgba(15,23,42,.12);

}

/* ==========================================================
   Dropdown Item
========================================================== */

.dropdown-item{

    padding:12px 16px;

    border-radius:12px;

    color:#334155;

    font-size:.93rem;

    font-weight:500;

    transition:all .30s ease;

}

.dropdown-item:hover{

    color:var(--header-primary);

    background:#F8FAFC;

    transform:translateX(6px);

}

/* ==========================================================
   Scroll State
========================================================== */

#site-header.header-scrolled .nav-link{

    color:var(--header-text-scroll);

}

#site-header.header-scrolled .nav-link:hover{

    color:var(--header-primary);

    background:rgba(13,110,253,.06);

}

#site-header.header-scrolled .nav-link.active{

    color:var(--header-primary);

}

#site-header.header-scrolled .nav-link.active::after,

#site-header.header-scrolled .nav-link::before{

    background:var(--header-primary);

}

/* ==========================================================
   End BAB 2
========================================================== */

/* ==========================================================
   Header Actions
========================================================== */

.navbar-actions{

    display:flex;

    align-items:center;

    gap:18px;

    margin-left:30px;

}

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

.btn-language{

    display:flex;

    align-items:center;

    gap:10px;

    height:46px;

    padding:0 18px;

    border:1px solid rgba(255,255,255,.16);

    border-radius:14px;

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

    backdrop-filter:blur(14px);

    color:#FFFFFF;

    font-size:.92rem;

    font-weight:600;

    transition:all .30s ease;

}

.btn-language:hover{

    color:#FFFFFF;

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

    border-color:rgba(255,255,255,.24);

}

.language-flag{

    font-size:1rem;

    line-height:1;

}

.language-label{

    white-space:nowrap;

}

/* ==========================================================
   Booking Button
========================================================== */

.btn-booking{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    height:48px;

    padding:0 28px;

    border:none;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        #0D6EFD,
        #3B82F6
    );

    color:#FFFFFF;

    font-size:.95rem;

    font-weight:700;

    box-shadow:

        0 15px 35px rgba(13,110,253,.28);

    transition:all .30s ease;

}

.btn-booking:hover{

    color:#FFFFFF;

    transform:translateY(-2px);

    box-shadow:

        0 20px 40px rgba(13,110,253,.35);

}

.btn-booking i{

    transition:transform .30s ease;

}

.btn-booking:hover i{

    transform:translateX(5px);

}

/* ==========================================================
   Sticky Header
========================================================== */

#site-header.header-scrolled{

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

    backdrop-filter:blur(18px);

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

    border-bottom:1px solid rgba(226,232,240,.85);

    box-shadow:

        0 10px 35px rgba(15,23,42,.08);

}

/* ==========================================================
   Scroll Color
========================================================== */

#site-header.header-scrolled .brand-text{

    color:var(--header-dark);

}

#site-header.header-scrolled .btn-language{

    background:#F8FAFC;

    color:var(--header-dark);

    border-color:#E2E8F0;

}

#site-header.header-scrolled .navbar-toggler span{

    background:var(--header-dark);

}

/* ==========================================================
   Glass Highlight
========================================================== */

#site-header::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.08),

            rgba(255,255,255,0)

        );

    opacity:0;

    pointer-events:none;

    transition:opacity .35s ease;

}

#site-header.header-scrolled::before{

    opacity:1;

}

/* ==========================================================
   End BAB 3
========================================================== */

/* ==========================================================
   Mobile Navigation
========================================================== */

@media (max-width:1199.98px){

    .navbar-collapse{

        margin-top:20px;

        padding:24px;

        border-radius:20px;

        background:#FFFFFF;

        box-shadow:

            0 20px 45px rgba(15,23,42,.10);

    }

    .navbar-nav{

        gap:4px;

    }

    .navbar-nav .nav-link{

        justify-content:flex-start;

        padding:14px 18px;

        color:var(--header-dark);

        border-radius:12px;

    }

    .navbar-nav .nav-link:hover{

        color:var(--header-primary);

        background:#F8FAFC;

    }

    .navbar-nav .nav-link.active{

        color:var(--header-primary);

    }

}

/* ==========================================================
   Mobile Dropdown
========================================================== */

@media (max-width:1199.98px){

    .dropdown-menu{

        margin:8px 0 12px;

        padding:8px;

        border:1px solid #E2E8F0;

        border-radius:14px;

        box-shadow:none;

    }

    .dropdown-item{

        padding:12px 14px;

    }

}

/* ==========================================================
   Mobile Header Actions
========================================================== */

@media (max-width:1199.98px){

    .navbar-actions{

        margin-top:24px;

        margin-left:0;

        flex-direction:column;

        align-items:stretch;

        gap:14px;

    }

    .btn-language,

    .btn-booking{

        width:100%;

        justify-content:center;

    }

}

/* ==========================================================
   Tablet
========================================================== */

@media (max-width:991.98px){

    :root{

        --header-height:78px;

    }

    .custom-logo{

        height:44px;

    }

    .brand-text{

        font-size:1.55rem;

    }

}

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

@media (max-width:767.98px){

    :root{

        --header-height:72px;

    }

    .navbar{

        padding:.70rem 0;

    }

    .custom-logo{

        height:40px;

    }

    .brand-text{

        font-size:1.35rem;

    }

    .navbar-collapse{

        padding:20px;

    }

}

/* ==========================================================
   Small Mobile
========================================================== */

@media (max-width:480px){

    .btn-language,

    .btn-booking{

        height:46px;

        font-size:.90rem;

    }

}

/* ==========================================================
   Hamburger Animation
========================================================== */

.navbar-toggler{

    transition:all .30s ease;

}

.navbar-toggler:hover{

    transform:scale(1.05);

}

.navbar-toggler[aria-expanded="true"] span:nth-child(1){

    transform:translateY(7px) rotate(45deg);

}

.navbar-toggler[aria-expanded="true"] span:nth-child(2){

    opacity:0;

}

.navbar-toggler[aria-expanded="true"] span:nth-child(3){

    transform:translateY(-7px) rotate(-45deg);

}

/* ==========================================================
   End BAB 4
========================================================== */

/* ==========================================================
   Premium Animation
========================================================== */

/* ==========================================================
   Header Fade
========================================================== */

#site-header{

    animation:headerFade .60s ease both;

}

@keyframes headerFade{

    from{

        opacity:0;

        transform:translateY(-20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   Smooth Transition
========================================================== */

#site-header,
.navbar,
.nav-link,
.dropdown-menu,
.btn-language,
.btn-booking{

    transition:all .30s ease;

}

/* ==========================================================
   Performance
========================================================== */

#site-header,
.navbar,
.nav-link,
.dropdown-menu,
.btn-language,
.btn-booking,
.custom-logo{

    backface-visibility:hidden;

    will-change:auto;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}

/* ==========================================================
   Accessibility
========================================================== */

.nav-link:focus-visible,
.dropdown-item:focus-visible,
.btn-language:focus-visible,
.btn-booking:focus-visible{

    outline:3px solid rgba(13,110,253,.25);

    outline-offset:3px;

}

/* ==========================================================
   Selection
========================================================== */

#site-header ::selection{

    background:var(--header-primary);

    color:#FFFFFF;

}

/* ==========================================================
   Desktop Only
========================================================== */

@media (min-width:1200px){

    .dropdown-menu{

        display:block;

        opacity:0;

        visibility:hidden;

        transform:translateY(12px);

        pointer-events:none;

    }

    .dropdown:hover>.dropdown-menu{

        opacity:1;

        visibility:visible;

        transform:translateY(0);

        pointer-events:auto;

    }

}

/* ==========================================================
   Hover Animation
========================================================== */

.btn-booking:hover{

    transform:translateY(-2px);

}

.btn-language:hover{

    transform:translateY(-2px);

}

.navbar-nav .nav-link:hover{

    transform:translateY(-1px);

}

/* ==========================================================
   Final Polish
========================================================== */

.custom-logo{

    display:block;

}

.dropdown-menu{

    overflow:hidden;

}

.btn-booking{

    white-space:nowrap;

}

.language-label{

    white-space:nowrap;

}

.navbar-nav{

    margin-bottom:0;

}

/* ==========================================================
   Homepage Header
========================================================== */

.header-home{

    background:transparent;

}

.header-home .navbar{

    background:transparent;

}

.header-home .nav-link{

    color:#FFFFFF;

}

.header-home .brand-text{

    color:#FFFFFF;

}

.header-home .btn-language{

    color:#FFFFFF;

    border-color:rgba(255,255,255,.18);

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

}

/* ==========================================================
   Inner Page Header
========================================================== */

.header-inner{

    background:#FFFFFF;

    box-shadow:

        0 8px 28px rgba(15,23,42,.08);

}

.header-inner .navbar{

    background:#FFFFFF;

}

.header-inner .nav-link{

    color:#1E293B;

}

.header-inner .nav-link:hover{

    color:var(--header-primary);

}

.header-inner .nav-link.active{

    color:var(--header-primary);

}

.header-inner .brand-text{

    color:#1E293B;

}

.header-inner .btn-language{

    background:#F8FAFC;

    color:#1E293B;

    border:1px solid #E2E8F0;

}

.header-inner .btn-language:hover{

    background:#EEF4FF;

    color:var(--header-primary);

}

/* ==========================================================
   FINAL V10
   Enterprise Premium (LOCKED)
========================================================== */