.elementor-46 .elementor-element.elementor-element-e208585{--display:flex;}/* Start custom CSS for html, class: .elementor-element-9b000e6 *//* =====================================================
   SERENITY HIDEAWAY HEADER
===================================================== */

.serenity-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:78px;

    padding:0 5.5vw;

    display:flex;
    align-items:center;

    z-index:9999;

    color:#fff;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.48),
            transparent
        );

    transition:
        background .4s ease,
        backdrop-filter .4s ease,
        box-shadow .4s ease;

}


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

.serenity-header.scrolled{

    background:rgba(25,22,19,.96);

    backdrop-filter:blur(16px);

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

    box-shadow:
        0 8px 30px rgba(0,0,0,.22);

}


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

.serenity-logo{

    width:135px;

    flex-shrink:0;

    display:flex;
    align-items:center;

}


.serenity-logo img{

    width:100%;

    display:block;

    filter:
        drop-shadow(
            0 2px 8px rgba(0,0,0,.4)
        );

    transition:.35s ease;

}


.serenity-logo:hover img{

    transform:scale(1.03);

}


/* ================================
   DESKTOP NAV
================================ */

.serenity-nav{

    display:flex;

    align-items:center;

    gap:30px;

    margin-left:auto;

    margin-right:35px;

}


.serenity-nav a{

    position:relative;

    padding:8px 0;

    color:rgba(255,255,255,.92);

    font-size:9px;

    font-weight:500;

    letter-spacing:1.4px;

    white-space:nowrap;

    transition:.3s ease;

}


.serenity-nav a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:0;
    height:1px;

    background:#c79b72;

    transition:.35s ease;

}


.serenity-nav a:hover{

    color:#d7b58f;

}


.serenity-nav a:hover::after{

    width:100%;

}


.serenity-nav a.active{

    color:#d7b58f;

}


.serenity-nav a.active::after{

    width:100%;

}


/* ================================
   RESERVATION
================================ */

.serenity-reservation{

    height:38px;

    min-width:120px;

    padding:0 17px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    background:#b99170;

    color:#fff;

    font-size:8px;

    font-weight:600;

    letter-spacing:1.3px;

    transition:.35s ease;

}


.serenity-reservation:hover{

    background:#c9a383;

    transform:translateY(-2px);

    box-shadow:
        0 8px 25px rgba(0,0,0,.25);

}


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

.serenity-menu-toggle{

    display:none;

    width:42px;
    height:42px;

    padding:5px;

    margin-left:8px;

    border:0;

    background:transparent;

    cursor:pointer;

    position:relative;

    z-index:10001;

}


.serenity-menu-toggle span{

    display:block;

    width:25px;
    height:1px;

    margin:6px auto;

    background:#fff;

    transition:
        transform .35s ease,
        opacity .25s ease;

}


/* HAMBURGER → X */

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

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

}


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

    opacity:0;

}


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

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

}


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

.serenity-mobile-menu{

    position:fixed;

    top:0;
    right:0;

    width:min(390px,88vw);

    height:100vh;

    z-index:10000;

    background:

        linear-gradient(
            145deg,
            #201c18,
            #0d0c0a
        );

    transform:
        translateX(105%);

    visibility:hidden;

    transition:
        transform .5s
        cubic-bezier(.77,0,.18,1),
        visibility .5s;

    box-shadow:
        -20px 0 60px rgba(0,0,0,.35);

}


/* OPEN */

.serenity-mobile-menu.open{

    transform:translateX(0);

    visibility:visible;

}


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

.mobile-menu-inner{

    height:100%;

    padding:
        120px
        35px
        40px;

    display:flex;

    flex-direction:column;

}


.mobile-menu-inner::before{

    content:"THE SERENITY HIDEAWAY";

    display:block;

    color:#c79b72;

    font-size:8px;

    letter-spacing:3px;

    margin-bottom:35px;

}


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

.mobile-menu-inner > a{

    position:relative;

    display:flex;

    align-items:center;

    gap:18px;

    min-height:65px;

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

    color:#fff;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:25px;

    transition:
        color .3s ease,
        padding-left .3s ease;

}


.mobile-menu-inner > a span{

    font-family:Manrope,sans-serif;

    font-size:8px;

    letter-spacing:2px;

    color:#9d927f;

}


.mobile-menu-inner > a:hover{

    color:#d6b17e;

    padding-left:8px;

}


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

.mobile-menu-inner
.mobile-reservation{

    margin-top:28px;

    min-height:50px;

    justify-content:center;

    border:0;

    background:#b99170;

    color:#fff;

    font-family:Manrope,sans-serif;

    font-size:9px;

    letter-spacing:2px;

    text-transform:uppercase;

}


.mobile-reservation b{

    font-size:16px;

}


/* =====================================================
   BACKDROP
===================================================== */

.serenity-menu-backdrop{

    position:fixed;

    inset:0;

    z-index:9990;

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

    backdrop-filter:blur(3px);

    opacity:0;

    visibility:hidden;

    transition:
        opacity .4s ease,
        visibility .4s ease;

}


.serenity-menu-backdrop.open{

    opacity:1;

    visibility:visible;

}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:1000px){

    .serenity-header{

        padding:0 4vw;

    }


    .serenity-nav{

        gap:20px;

        margin-right:20px;

    }


    .serenity-nav a{

        font-size:8px;

        letter-spacing:1px;

    }


    .serenity-logo{

        width:120px;

    }

}


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

@media(max-width:850px){

    .serenity-nav{

        display:none;

    }


    .serenity-reservation{

        margin-left:auto;

        margin-right:5px;

    }


    .serenity-menu-toggle{

        display:block;

    }

}


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

@media(max-width:500px){

    .serenity-header{

        height:70px;

        padding:0 18px;

    }


    .serenity-logo{

        width:105px;

    }


    .serenity-reservation{

        display:none;

    }


    .mobile-menu-inner{

        padding:
            105px
            25px
            30px;

    }


    .mobile-menu-inner > a{

        font-size:23px;

    }

}/* End custom CSS */