/* =====================================
   WELLNESS SPA HEADER
===================================== */

.wlx-header,
.wlx-header *{
    box-sizing:border-box;
}

.wlx-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:99999;
    background:#1B1D21;
    transition:.35s ease;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.wlx-header.scrolled{
    background:rgba(27,29,33,0.95);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

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

    box-shadow:0 10px 35px rgba(0,0,0,.15);

}

.wlx-container{
    max-width:1200px;
    margin:0 auto;
    padding:10px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

/*======================
Logo
=======================*/

.wlx-logo{
    flex-shrink:0;
}

.wlx-logo a{
    font-size: 18px;
    color: #fff;
    text-decoration: none;
}

.wlx-logo img{
    display:block;
    max-height:60px;
    width:auto;
}

.wlx-logo h2{
    margin:0;
    color:#fff;
    font-size:30px;
    font-weight:700;
}

/*======================
Desktop Menu
=======================*/

.wlx-nav{
    flex:1;
    display:flex;
    justify-content:center;
}

.wlx-menu{
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    align-items:center;
    gap:42px;
}

.wlx-menu li{
    position:relative;
}

.wlx-menu a{
    color:#fff;
    text-decoration:none;
    font-size:16px;
    font-weight:500;
    position:relative;
    transition:.3s;
}

.wlx-menu a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:2px;
    background:#fff;
    transition:.3s;
}

.wlx-menu a:hover::after,
.wlx-menu .current-menu-item>a::after{
    width:100%;
}

/*======================
Right Side
=======================*/

.wlx-right{
    display:flex;
    align-items:center;
    gap:15px;
}

/* Call */

.wlx-call{
    width:30px;
    height:30px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    border:2px solid #fff;
    text-decoration:none;
    transition:.3s;
}

.wlx-call:hover{
    background:#fff;
    color:#778D82;
}

/* Book Button */

.wlx-book-btn{
    background:#fff;
    color:#778D82;
    text-decoration:none;
    padding:8px 18px;
    border-radius:50px;
    font-weight:600;
    transition:.3s;
    font-size: 14px;
}

.wlx-book-btn:hover{
    transform:translateY(-2px);
}

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

.wlx-menu-btn{
    display:none;
    width:44px;
    height:44px;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
}

.wlx-menu-btn span{
    display:block;
    width:28px;
    height:2px;
    background:#fff;
    margin:6px auto;
    transition:.3s;
}

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

.wlx-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    opacity:0;
    visibility:hidden;
    transition:.35s;
    z-index:99990;
}

.wlx-overlay.active{
    opacity:1;
    visibility:visible;
}

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

.wlx-mobile-menu{
    position:fixed;
    top:0;
    left:-320px;
    width:300px;
    height:100%;
    background:#778D82;
    padding:80px 30px 40px;
    transition:.35s ease;
    z-index:99999;
    overflow-y:auto;
}

.wlx-mobile-menu.active{
    left:0;
}

.wlx-close{
    position:absolute;
    top:18px;
    right:18px;
    background:none;
    border:none;
    color:#fff;
    font-size:26px;
    cursor:pointer;
}

.wlx-mobile-nav{
    list-style:none;
    margin:0;
    padding:0;
}

.wlx-mobile-nav li{
    margin-bottom:20px;
}

.wlx-mobile-nav a{
    color:#fff;
    text-decoration:none;
    font-size:18px;
}

.wlx-mobile-bottom{
    margin-top:40px;
}

.wlx-mobile-book{
    display:block;
    text-align:center;
    background:#fff;
    color:#778D82;
    text-decoration:none;
    padding:10px;
    border-radius:40px;
    font-weight:600;
    font-size: 14px;
}

/*======================
Responsive
=======================*/

@media (max-width:991px){

    .wlx-nav{
        display:none;
    }

    .wlx-book-btn{
        display:none;
    }

    .wlx-menu-btn{
        display:block;
    }

    .wlx-container{
        padding:14px 18px;
    }

    .wlx-logo img{
        max-height:50px;
    }

}

@media (max-width:480px){

    .wlx-mobile-menu{
        width:280px;
    }

    .wlx-logo img{
        max-height:44px;
    }

    .wlx-call{
        width:42px;
        height:42px;
    }

}

.wlx-menu-btn.active span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
}

.wlx-menu-btn.active span:nth-child(2){
    opacity:0;
}

.wlx-menu-btn.active span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
}

/* Parent menu item */
.wlx-menu > li{
    position:relative;
}

/* Hide submenu */
.wlx-menu .sub-menu{
    position:absolute;
    top:100%;
    left:0;

    min-width:260px;

    margin:0;
    padding:12px 0;

    list-style:none;

    background:#778D82;

    display:none;

    border-radius:10px;

    box-shadow:0 15px 40px rgba(0,0,0,.15);

    z-index:9999;
}

/* Show on hover */
.wlx-menu > li:hover > .sub-menu{
    display:block;
}

/* Remove bullets */
.wlx-menu .sub-menu li{
    margin:0;
    padding:0;
    list-style:none;
}

/* Links */
.wlx-menu .sub-menu a{
    display:block;
    padding:12px 20px;
    color:#fff;
    text-decoration:none;
    white-space:nowrap;
}

.wlx-menu .sub-menu a:hover{
    background:rgba(255,255,255,.1);
}

/* Parent Item */

.wlx-mobile-nav .menu-item-has-children > a{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

/* Arrow */

.wlx-mobile-nav .menu-item-has-children > a::after{
    content:"+";
    font-size:24px;
    transition:.3s;
}

/* Active */

.wlx-mobile-nav .menu-item-has-children.active > a::after{
    content:"−";
}

/* Hide submenu */

.wlx-mobile-nav .sub-menu{
    display:none;
    margin:12px 0 12px 15px;
    padding-left:15px;
}

/* Show */

.wlx-mobile-nav .menu-item-has-children.active > .sub-menu{
    display:block;
}

.wlx-mobile-nav .sub-menu li{
    margin:12px 0;
}

.wlx-mobile-nav .sub-menu a{
    font-size:15px;
    opacity:.9;
}

.wlx-mobile-nav .sub-menu{
    display:none;
}