/*==================================================
  NAVBAR.CSS
  Zen Spa Home
==================================================*/

/*==============================================
  HEADER
==============================================*/

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:1000;

    transition:

        background .45s ease,

        backdrop-filter .45s ease,

        box-shadow .45s ease,

        padding .45s ease;

}

/*==============================================
  SCROLLED
==============================================*/

.header.scrolled{

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

    backdrop-filter:blur(18px);

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

    box-shadow:

        0 10px 40px rgba(0,0,0,.08);

}

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

.navbar{

    width:100%;

    padding:26px 0;

}

.navbar .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

}

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

.logo{

    display:flex;

    align-items:center;

    text-decoration:none;

    flex-shrink:0;

}

.logo-image{

    display:block;

    width:170px;

    height:auto;

    transition:

        transform .45s ease,

        opacity .35s ease;

}

.logo:hover .logo-image{

    transform:scale(1.03);

}

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

.nav-menu{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:48px;

    margin:0;

    padding:0;

    list-style:none;

}

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

.nav-link{

    position:relative;

    display:inline-flex;

    align-items:center;

    color:#ffffff;

    text-decoration:none;

    font-size:.92rem;

    font-weight:600;

    letter-spacing:.12em;

    text-transform:uppercase;

    transition:

        color .35s ease;

}

/*==============================================
  UNDERLINE
==============================================*/

.nav-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--color-primary);

    transition:width .35s ease;

}

.nav-link:hover{

    color:var(--color-primary);

}

.nav-link:hover::after,

.nav-link.active::after{

    width:100%;

}

/*==============================================
  SCROLLED COLORS
==============================================*/

.header.scrolled .nav-link{

    color:var(--color-secondary);

}

.header.scrolled .nav-link:hover{

    color:var(--color-primary);

}

/*==============================================
  CTA
==============================================*/

.navbar .btn{

    flex-shrink:0;

}

/*==============================================
  HAMBURGER
==============================================*/

.menu-toggle{

    display:none;

    width:48px;

    height:48px;

    border:none;

    background:none;

    cursor:pointer;

    padding:0;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:6px;

}

.menu-toggle span{

    width:26px;

    height:2px;

    border-radius:999px;

    background:#ffffff;

    transition:

        transform .35s ease,

        opacity .35s ease,

        background .35s ease;

}

.header.scrolled .menu-toggle span{

    background:var(--color-secondary);

}

/*==============================================
  ACTIVE
==============================================*/

.menu-toggle.active span:nth-child(1){

    transform:

        translateY(8px)

        rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

    transform:

        translateY(-8px)

        rotate(-45deg);

}

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

@media (max-width:992px){

    .menu-toggle{

        display:flex;

    }

    .nav-menu{

        position:fixed;

        top:0;

        right:-100%;

        width:min(360px,100%);

        height:100vh;

        padding:120px 40px;

        background:#ffffff;

        display:flex;

        flex-direction:column;

        justify-content:flex-start;

        align-items:flex-start;

        gap:32px;

        transition:right .6s cubic-bezier(.77,0,.18,1);

        box-shadow:

            -20px 0 60px rgba(0,0,0,.10);

    }

    .nav-menu.active{

        right:0;

    }

    .nav-link{

        color:var(--color-secondary);

        font-size:1rem;

    }

    .navbar .btn{

        display:none;

    }

}

/*==============================================
  SMALL DEVICES
==============================================*/

@media (max-width:768px){

    .navbar{

        padding:18px 0;

    }

    .logo-image{

        width:145px;

    }

}

/*==============================================
  MENU OPEN
==============================================*/

body.menu-open{

    overflow:hidden;

}