.elementor-58 .elementor-element.elementor-element-d06f745{--display:flex;--margin-top:-31px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}/* Start custom CSS for html, class: .elementor-element-38e635b *//* =====================================================
   THE SERENITY HIDEAWAY
   HOMEPAGE HERO
===================================================== */

.serenity-home{

    width:100%;

    overflow:hidden;

}


/* =====================================================
   HERO
===================================================== */

.serenity-hero{

    position:relative;

    width:100%;

    height:calc(100vh - 0px);

    min-height:680px;

    overflow:hidden;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

}


/* =====================================================
   HERO BACKGROUND
===================================================== */

.serenity-hero-bg{

    position:absolute;

    inset:0;

    background-image:

        url("http://theserenityhideway.co.tz/wp-content/uploads/2026/08/The-serenity-.png");

    background-size:cover;

    background-position:center;

    transform:scale(1.05);

    animation:
        serenityHeroZoom
        20s
        ease-in-out
        infinite
        alternate;

}


/* =====================================================
   HERO DARK OVERLAY
===================================================== */

.serenity-hero-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            to bottom,
            rgba(0,0,0,.35),
            rgba(0,0,0,.15) 45%,
            rgba(0,0,0,.65)
        ),

        linear-gradient(
            90deg,
            rgba(0,0,0,.28),
            transparent 55%,
            rgba(0,0,0,.25)
        );

}


/* =====================================================
   HERO CONTENT
===================================================== */

.serenity-hero-content{

    position:relative;

    z-index:5;

    width:min(760px,90%);

    text-align:center;

    margin-top:-15px;

    animation:
        serenityHeroReveal
        1.3s
        cubic-bezier(.2,.7,.2,1)
        both;

}


.serenity-stars{

    color:#d4a94d;

    font-size:13px;

    letter-spacing:5px;

    margin-bottom:17px;

}


.serenity-hero-kicker{

    font-size:9px;

    letter-spacing:4px;

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

    margin-bottom:18px;

}


.serenity-hero h1{

    margin:0;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(55px,7vw,100px);

    line-height:.82;

    font-weight:400;

    letter-spacing:1px;

    text-shadow:
        0 5px 25px rgba(0,0,0,.4);

}


.serenity-hero h1 span{

    display:block;

    color:#e0c29c;

    font-style:italic;

}


.serenity-hero-content > p{

    width:min(570px,100%);

    margin:27px auto 0;

    font-size:13px;

    line-height:1.9;

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

}


/* =====================================================
   EXPLORE BUTTON
===================================================== */

.serenity-explore-btn{

    display:inline-flex;

    align-items:center;

    gap:18px;

    margin-top:30px;

    padding:14px 23px;

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

    color:#fff;

    font-size:9px;

    letter-spacing:2px;

    transition:
        background .35s ease,
        border .35s ease,
        transform .35s ease;

}


.serenity-explore-btn span{

    font-size:16px;

    transition:
        transform .35s ease;

}


.serenity-explore-btn:hover{

    background:#b99170;

    border-color:#b99170;

    transform:translateY(-3px);

}


.serenity-explore-btn:hover span{

    transform:translateX(5px);

}


/* =====================================================
   HERO ARROWS
===================================================== */

.serenity-hero-arrow{

    position:absolute;

    top:50%;

    z-index:10;

    width:42px;

    height:42px;

    transform:
        translateY(-50%);

    border:

        1px solid
        rgba(255,255,255,.35);

    border-radius:50%;

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

    color:#fff;

    font-size:29px;

    font-weight:200;

    line-height:35px;

    cursor:pointer;

    transition:

        background .3s ease,

        border .3s ease,

        transform .3s ease;

}


.serenity-hero-arrow:hover{

    background:#b99170;

    border-color:#b99170;

}


.serenity-hero-prev{

    left:28px;

}


.serenity-hero-next{

    right:28px;

}


/* =====================================================
   SCROLL INDICATOR
===================================================== */

.serenity-scroll{

    position:absolute;

    z-index:6;

    right:30px;

    top:44%;

    display:flex;

    align-items:center;

    gap:12px;

    writing-mode:vertical-rl;

}


.serenity-scroll span{

    font-size:7px;

    letter-spacing:3px;

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

}


.serenity-scroll i{

    width:1px;

    height:55px;

    background:

        linear-gradient(
            to bottom,
            #fff,
            transparent
        );

    animation:

        serenityScrollLine
        2s
        ease-in-out
        infinite;

}


/* =====================================================
   HERO BOTTOM
===================================================== */

.serenity-hero-bottom{

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:52px;

    z-index:8;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding-right:6vw;

    background:

        rgba(20,18,15,.32);

    backdrop-filter:
        blur(3px);

}


.serenity-hero-location{

    height:100%;

    display:flex;

    align-items:center;

    padding-left:5.5vw;

    padding-right:35px;

    background:#fff;

    color:#26231f;

    font-size:8px;

    letter-spacing:1.5px;

    position:relative;

}


.serenity-hero-location::after{

    content:"";

    position:absolute;

    right:-28px;

    top:0;

    border-top:
        52px solid #fff;

    border-right:
        28px solid transparent;

}


.serenity-hero-meta{

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

    font-size:8px;

    letter-spacing:1.2px;

}


.serenity-hero-meta strong{

    color:#fff;

    font-size:12px;

}


.serenity-hero-meta span{

    display:inline-block;

    width:30px;

    height:1px;

    margin:
        0 15px;

    vertical-align:middle;

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

}


/* =====================================================
   HIGHLIGHTS
===================================================== */

.serenity-highlights{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    background:#fff;

    border-bottom:
        1px solid #ebe7e1;

}


.serenity-highlight{

    min-height:150px;

    display:flex;

    align-items:center;

    gap:17px;

    padding:
        25px 35px;

    border-right:
        1px solid #ebe7e1;

}


.serenity-highlight:last-child{

    border-right:0;

}


.serenity-highlight-icon{

    flex-shrink:0;

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:
        1px solid #ded6cd;

    border-radius:50%;

    color:#ad9075;

    font-size:20px;

    transition:

        background .35s ease,

        color .35s ease,

        transform .35s ease;

}


.serenity-highlight:hover
.serenity-highlight-icon{

    background:#b99170;

    color:#fff;

    transform:rotate(8deg);

}


.serenity-highlight h3{

    margin:0;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:20px;

    font-weight:500;

    line-height:1.05;

    color:#282521;

}


.serenity-highlight p{

    margin:
        8px 0 0;

    font-size:9px;

    line-height:1.65;

    color:#77716b;

}


/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes serenityHeroZoom{

    from{

        transform:
            scale(1.05);

    }

    to{

        transform:
            scale(1.12);

    }

}


@keyframes serenityHeroReveal{

    from{

        opacity:0;

        transform:
            translateY(35px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


@keyframes serenityScrollLine{

    0%,100%{

        opacity:.4;

        transform:
            scaleY(.65);

        transform-origin:top;

    }

    50%{

        opacity:1;

        transform:
            scaleY(1);

    }

}


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

@media(max-width:1000px){

    .serenity-highlights{

        grid-template-columns:
            repeat(2,1fr);

    }


    .serenity-highlight:nth-child(2){

        border-right:0;

    }


    .serenity-highlight:nth-child(-n+2){

        border-bottom:
            1px solid #ebe7e1;

    }

}


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

@media(max-width:600px){

    .serenity-hero{

        min-height:650px;

    }


    .serenity-hero-content{

        margin-top:0;

    }


    .serenity-stars{

        font-size:10px;

        letter-spacing:4px;

    }


    .serenity-hero-kicker{

        font-size:7px;

        letter-spacing:3px;

    }


    .serenity-hero h1{

        font-size:54px;

        line-height:.88;

    }


    .serenity-hero-content > p{

        font-size:11px;

        padding:0 15px;

    }


    .serenity-hero-arrow{

        width:34px;

        height:34px;

        font-size:23px;

    }


    .serenity-hero-prev{

        left:12px;

    }


    .serenity-hero-next{

        right:12px;

    }


    .serenity-scroll{

        display:none;

    }


    .serenity-hero-bottom{

        padding-right:0;

    }


    .serenity-hero-location{

        padding-left:20px;

        padding-right:20px;

        font-size:7px;

    }


    .serenity-hero-location::after{

        right:-20px;

        border-top-width:52px;

        border-right-width:20px;

    }


    .serenity-hero-meta{

        display:none;

    }


    .serenity-highlights{

        grid-template-columns:1fr;

    }


    .serenity-highlight{

        min-height:120px;

        border-right:0;

        border-bottom:
            1px solid #ebe7e1;

        padding:
            22px 25px;

    }


    .serenity-highlight:last-child{

        border-bottom:0;

    }

}/* =====================================================
   WELCOME SECTION
===================================================== */

.serenity-welcome{

    width:100%;

    padding:
        120px
        7vw;

    display:grid;

    grid-template-columns:
        1.05fr
        .95fr;

    gap:8vw;

    align-items:center;

    background:#fff;

}


/* ==========================================
   WELCOME IMAGES
========================================== */

.serenity-welcome-images{

    position:relative;

    min-height:530px;

}


.welcome-photo{

    position:absolute;

    overflow:hidden;

}


.welcome-photo img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:
        transform .8s ease;

}


.welcome-photo:hover img{

    transform:scale(1.06);

}


.welcome-photo-main{

    left:0;

    top:0;

    width:72%;

    height:470px;

}


.welcome-photo-small{

    right:0;

    bottom:0;

    width:42%;

    height:300px;

    border:
        10px solid #fff;

}


.welcome-photo-main::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.18),
            transparent 40%
        );

}


/* ==========================================
   WELCOME CONTENT
========================================== */

.serenity-welcome-content{

    padding-right:3vw;

}


.serenity-section-kicker{

    color:#a88b70;

    font-size:9px;

    letter-spacing:3px;

    font-weight:500;

    margin-bottom:18px;

}


.serenity-welcome-content h2{

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(48px,5vw,68px);

    line-height:.95;

    font-weight:400;

    color:#292621;

    margin:0;

}


.serenity-welcome-content h2 em{

    color:#b38b68;

    font-style:italic;

}


.serenity-small-line{

    width:45px;

    height:1px;

    background:#b38b68;

    margin:
        25px 0;

}


.serenity-welcome-content > p{

    max-width:500px;

    color:#716c66;

    font-size:12px;

    line-height:2;

    margin-bottom:15px;

}


/* ==========================================
   BROWN BUTTON
========================================== */

.serenity-brown-button{

    display:inline-flex;

    align-items:center;

    gap:20px;

    padding:
        13px
        20px;

    margin-top:20px;

    background:#b38b68;

    color:#fff;

    font-size:8px;

    letter-spacing:1.7px;

    transition:
        background .3s ease,
        transform .3s ease;

}


.serenity-brown-button span{

    font-size:15px;

    transition:
        transform .3s ease;

}


.serenity-brown-button:hover{

    background:#967253;

    transform:
        translateY(-3px);

}


.serenity-brown-button:hover span{

    transform:
        translateX(5px);

}


/* =====================================================
   ROOMS INTRO
===================================================== */

.serenity-rooms-intro{

    text-align:center;

    padding:
        100px
        20px
        55px;

    background:#f3f0e9;

}


.serenity-rooms-intro h2{

    margin:0;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(48px,5vw,68px);

    font-weight:400;

    color:#292621;

}


.serenity-rooms-intro > p{

    width:min(520px,90%);

    margin:
        17px auto 0;

    color:#77716b;

    font-size:11px;

    line-height:1.9;

}


/* =====================================================
   ROOM SHOWCASE
===================================================== */

.serenity-room-showcase{

    width:100%;

    max-width:1200px;

    min-height:470px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        1.12fr
        .88fr;

    position:relative;

    background:#fff;

}
/* =====================================================
   ROOM IMAGE
===================================================== */

.serenity-room-visual{

    position:relative;

    min-height:520px;

    overflow:hidden;

}


.serenity-room-image{

    position:absolute;

    inset:0;

    overflow:hidden;

}


.serenity-room-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;

    opacity:1;

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

}


.serenity-room-visual:hover
.serenity-room-image img{

    transform:scale(1.04);

}
}

.room-photo-number{

    position:absolute;

    top:22px;

    right:22px;

    padding:
        8px 12px;

    background:
        rgba(20,18,15,.55);

    color:#fff;

    font-size:8px;

    letter-spacing:1.5px;

}


.room-photo-number span{

    color:#d4b18d;

}


/* ==========================================
   ROOM CONTENT
========================================== */

.serenity-room-content{

    padding:
        55px 50px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}


.serenity-room-category{

    color:#a88b70;

    font-size:8px;

    letter-spacing:2.5px;

}


.serenity-room-content h3{

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:44px;

    font-weight:400;

    line-height:1;

    color:#292621;

    margin:
        9px 0 0;

}


.serenity-room-line{

    width:45px;

    height:1px;

    background:#b38b68;

    margin:
        22px 0;

}


.serenity-room-content > p{

    color:#716c66;

    font-size:11px;

    line-height:1.9;

    max-width:390px;

}


/* ==========================================
   ROOM FEATURES
========================================== */

.serenity-room-features{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        14px 10px;

    margin-top:25px;

}


.serenity-room-features div{

    display:flex;

    align-items:center;

    gap:8px;

}


.serenity-room-features span{

    width:27px;

    height:27px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:
        1px solid #ded6cc;

    border-radius:50%;

    color:#aa8b6f;

    font-size:11px;

}


.serenity-room-features p{

    margin:0;

    color:#5f5a55;

    font-size:8px;

    text-transform:uppercase;

    letter-spacing:.7px;

}


/* ==========================================
   ROOM ACTIONS
========================================== */

.serenity-room-actions{

    display:flex;

    align-items:center;

    gap:22px;

    margin-top:27px;

}


.serenity-room-actions
.serenity-brown-button{

    margin:0;

}


.serenity-text-button{

    color:#48433e;

    font-size:8px;

    letter-spacing:1.5px;

    transition:.3s;

}


.serenity-text-button span{

    margin-left:6px;

    color:#a78361;

}


.serenity-text-button:hover{

    color:#a78361;

}


/* =====================================================
   ROOM ARROWS
===================================================== */

.serenity-room-arrow{

    position:absolute;

    top:50%;

    z-index:10;

    width:44px;

    height:44px;

    transform:translateY(-50%);

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-radius:50%;

    background:
        rgba(25,21,17,.35);

    color:#fff;

    font-family:
        Arial,
        sans-serif;

    font-size:28px;

    font-weight:200;

    line-height:1;

    cursor:pointer;

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;

}


.serenity-room-arrow:hover{

    background:#b38b68;

    border-color:#b38b68;

}


.serenity-room-prev{

    left:20px;

}


.serenity-room-next{

    right:20px;

}

.serenity-room-arrow:hover{

    background:#b38b68;

}


.serenity-room-prev{

    left:-20px;

}


.serenity-room-next{

    right:-20px;

}


/* ==========================================
   ROOM DOTS
========================================== */

.serenity-room-dots{

    text-align:center;

    padding:
        22px 0 45px;

    background:#f3f0e9;

}


.room-dot{

    width:7px;

    height:7px;

    border:0;

    border-radius:50%;

    background:#c8c1b8;

    margin:
        0 5px;

    cursor:pointer;

    transition:.3s;

}


.room-dot.active{

    background:#a88768;

    transform:scale(1.35);

}


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

@media(max-width:900px){

    .serenity-welcome{

        grid-template-columns:1fr;

        gap:60px;

    }


    .serenity-welcome-content{

        padding-right:0;

    }


    .serenity-room-showcase{

        grid-template-columns:1fr;

    }


    .serenity-room-image{

        min-height:400px;

    }


    .serenity-room-content{

        min-height:400px;

    }

}


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

@media(max-width:600px){

    .serenity-welcome{

        padding:
            75px 20px;

    }


    .serenity-welcome-images{

        min-height:370px;

    }


    .welcome-photo-main{

        width:78%;

        height:320px;

    }


    .welcome-photo-small{

        width:45%;

        height:210px;

        border-width:7px;

    }


    .serenity-welcome-content h2{

        font-size:48px;

    }


    .serenity-rooms-intro{

        padding:
            70px 20px 40px;

    }


    .serenity-rooms-intro h2{

        font-size:48px;

    }


    .serenity-room-image{

        min-height:320px;

    }


    .serenity-room-content{

        padding:
            40px 25px;

    }


    .serenity-room-content h3{

        font-size:39px;

    }


    .serenity-room-features{

        gap:12px 5px;

    }


    .serenity-room-actions{

        flex-wrap:wrap;

    }


    .serenity-room-prev{

        left:10px;

    }


    .serenity-room-next{

        right:10px;

    }

}.room-photo-number{

    position:absolute;

    top:22px;

    left:22px;

    z-index:8;

    padding:
        8px 12px;

    background:
        rgba(20,18,15,.65);

    color:#fff;

    font-size:8px;

    letter-spacing:1.5px;

}


.room-photo-number span:first-child{

    color:#d2ad88;

    font-size:13px;

    margin-right:3px;

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-16ed793 *//* =====================================================
   PART 04 — ROOMS & SUITES
===================================================== */

.serenity-rooms-section{

    width:100%;

    background:#f3f0e9;

    padding:
        115px 7vw 100px;

}


/* =====================================================
   HEADING
===================================================== */

.serenity-rooms-heading{

    max-width:650px;

    margin:
        0 auto 55px;

    text-align:center;

}


.serenity-rooms-heading h2{

    margin:0;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(50px,5vw,70px);

    line-height:.9;

    font-weight:400;

    color:#292621;

}


.serenity-rooms-heading p{

    max-width:510px;

    margin:
        18px auto 0;

    color:#77716b;

    font-size:11px;

    line-height:1.9;

}


/* =====================================================
   ROOM SHOWCASE
===================================================== */

.serenity-room-showcase{

    max-width:1200px;

    min-height:520px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        1.15fr .85fr;

    background:#fff;

}


/* =====================================================
   ROOM IMAGE
===================================================== */

.serenity-room-visual{

    position:relative;

    min-height:520px;

    overflow:hidden;

}


.serenity-room-image{

    position:absolute;

    inset:0;

    overflow:hidden;

}


.serenity-room-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;

    opacity:1;

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

}


.serenity-room-visual:hover
.serenity-room-image img{

    transform:scale(1.04);

}


/* =====================================================
   ROOM COUNTER
===================================================== */

.room-photo-number{

    position:absolute;

    top:22px;

    left:22px;

    z-index:8;

    padding:
        8px 12px;

    background:
        rgba(20,18,15,.68);

    color:#fff;

    font-size:8px;

    letter-spacing:1.5px;

}


.room-photo-number span:first-child{

    color:#d2ad88;

    font-size:13px;

    margin-right:3px;

}


/* =====================================================
   ROOM ARROWS
===================================================== */

.serenity-room-arrow{

    position:absolute;

    top:50%;

    z-index:10;

    width:44px;

    height:44px;

    transform:
        translateY(-50%);

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-radius:50%;

    background:
        rgba(25,21,17,.35);

    color:#fff;

    font-family:Arial,sans-serif;

    font-size:28px;

    font-weight:200;

    line-height:1;

    cursor:pointer;

    transition:
        background .3s ease,
        border-color .3s ease;

}


.serenity-room-arrow:hover{

    background:#b38b68;

    border-color:#b38b68;

}


.serenity-room-prev{

    left:20px;

}


.serenity-room-next{

    right:20px;

}


/* =====================================================
   ROOM INFORMATION
===================================================== */

.serenity-room-information{

    padding:
        60px 50px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}


.serenity-room-category{

    color:#a88b70;

    font-size:8px;

    letter-spacing:2.5px;

    margin-bottom:9px;

}


.serenity-room-information h3{

    margin:0;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:46px;

    line-height:.95;

    font-weight:400;

    color:#292621;

}


/* =====================================================
   DIVIDER
===================================================== */

.serenity-room-divider{

    width:45px;

    height:1px;

    background:#b38b68;

    margin:
        23px 0;

}


/* =====================================================
   DESCRIPTION
===================================================== */

.serenity-room-description{

    max-width:410px;

    margin:0;

    color:#706a64;

    font-size:11px;

    line-height:1.9;

}


/* =====================================================
   ROOM DETAILS
===================================================== */

.serenity-room-details{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        14px 12px;

    margin-top:28px;

}


.serenity-room-details > div{

    display:flex;

    align-items:center;

    gap:9px;

}


.room-detail-icon{

    width:28px;

    height:28px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border:
        1px solid #ddd5cb;

    border-radius:50%;

    color:#a8896d;

    font-size:10px;

}


.serenity-room-details > div > span:last-child{

    color:#5e5953;

    font-size:8px;

    text-transform:uppercase;

    letter-spacing:.6px;

}


/* =====================================================
   ACTIONS
===================================================== */

.serenity-room-buttons{

    display:flex;

    align-items:center;

    gap:22px;

    margin-top:30px;

}


.serenity-room-book{

    display:inline-flex;

    align-items:center;

    gap:18px;

    padding:
        13px 19px;

    background:#b38b68;

    color:#fff;

    font-size:8px;

    letter-spacing:1.5px;

    transition:
        background .3s ease,
        transform .3s ease;

}


.serenity-room-book span{

    font-size:15px;

}


.serenity-room-book:hover{

    background:#967253;

    color:#fff;

    transform:
        translateY(-2px);

}


.serenity-room-details-link{

    color:#48433e;

    font-size:8px;

    letter-spacing:1.4px;

}


.serenity-room-details-link span{

    color:#a78361;

    margin-left:5px;

}


/* =====================================================
   ROOM NAVIGATION
===================================================== */

.serenity-room-navigation{

    max-width:1200px;

    margin:
        30px auto 0;

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    border-bottom:
        1px solid #dcd5cc;

}


.serenity-room-dot{

    position:relative;

    padding:
        18px 10px;

    border:0;

    background:transparent;

    color:#77716b;

    font-family:
        Manrope,
        sans-serif;

    font-size:8px;

    letter-spacing:1.5px;

    cursor:pointer;

}


.serenity-room-dot::after{

    content:"";

    position:absolute;

    bottom:-1px;

    left:0;

    width:0;

    height:2px;

    background:#b38b68;

    transition:
        width .35s ease;

}


.serenity-room-dot.active{

    color:#292621;

}


.serenity-room-dot.active::after{

    width:100%;

}


.serenity-room-dot span{

    margin-right:8px;

    color:#b38b68;

    font-size:9px;

}


/* =====================================================
   VIEW ALL
===================================================== */

.serenity-rooms-button{

    text-align:center;

    margin-top:35px;

}


.serenity-rooms-button a{

    display:inline-flex;

    align-items:center;

    gap:18px;

    padding:
        12px 20px;

    border:
        1px solid #b9afa4;

    color:#4b4640;

    font-size:8px;

    letter-spacing:1.6px;

}


.serenity-rooms-button a span{

    color:#a78361;

    font-size:15px;

}


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

@media(max-width:900px){

    .serenity-room-showcase{

        grid-template-columns:1fr;

    }


    .serenity-room-visual{

        min-height:450px;

    }


    .serenity-room-information{

        min-height:430px;

        padding:
            55px 45px;

    }

}


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

@media(max-width:600px){

    .serenity-rooms-section{

        padding:
            75px 20px 70px;

    }


    .serenity-rooms-heading h2{

        font-size:49px;

    }


    .serenity-room-showcase{

        min-height:0;

    }


    .serenity-room-visual{

        min-height:340px;

    }


    .serenity-room-information{

        min-height:0;

        padding:
            40px 25px;

    }


    .serenity-room-information h3{

        font-size:40px;

    }


    .serenity-room-details{

        gap:
            12px 5px;

    }


    .serenity-room-buttons{

        flex-wrap:wrap;

        gap:15px;

    }


    .serenity-room-navigation{

        grid-template-columns:
            repeat(3,1fr);

    }


    .serenity-room-dot{

        font-size:7px;

        letter-spacing:.8px;

    }


    .serenity-room-dot span{

        display:block;

        margin:
            0 0 3px;

    }


    .serenity-room-prev{

        left:12px;

    }


    .serenity-room-next{

        right:12px;

    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a928835 *//* =====================================================
   PART 05 — EXPLORE SERENITY
===================================================== */

.serenity-experience-section{

    position:relative;

    width:100%;

    min-height:680px;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

}


/* =====================================================
   BACKGROUND
===================================================== */

.serenity-experience-background{

    position:absolute;

    inset:0;

    overflow:hidden;

}


.serenity-experience-background img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    display:block;

    transform:scale(1.04);

    animation:
        serenityExperienceZoom
        18s
        ease-in-out
        infinite
        alternate;

}


/* =====================================================
   OVERLAY
===================================================== */

.serenity-experience-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            90deg,
            rgba(12,10,8,.78),
            rgba(12,10,8,.38) 55%,
            rgba(12,10,8,.18)
        );


}


/* =====================================================
   DECORATIVE FRAME
===================================================== */

.serenity-experience-frame{

    position:absolute;

    inset:30px;

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

    pointer-events:none;

}


/* =====================================================
   CONTENT
===================================================== */

.serenity-experience-content{

    position:relative;

    z-index:5;

    width:min(1150px,86%);

    padding:
        70px 0;

    margin-left:3vw;

}


.serenity-experience-number{

    margin-bottom:30px;

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

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:13px;

    letter-spacing:2px;

}


.serenity-experience-content
.serenity-section-kicker{

    color:#d3ae89;

    margin-bottom:20px;

}


.serenity-experience-content h2{

    margin:0;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(60px,7vw,100px);

    font-weight:400;

    line-height:.82;

    letter-spacing:-1px;

    text-shadow:
        0 5px 30px
        rgba(0,0,0,.35);

}


.serenity-experience-content h2 em{

    color:#d2ad88;

    font-style:italic;

}


.serenity-experience-divider{

    width:55px;

    height:1px;

    margin:
        30px 0;

    background:#d2ad88;

}


.serenity-experience-content p{

    width:min(480px,100%);

    margin:
        0 0 13px;

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

    font-size:11px;

    line-height:2;

}


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

.serenity-experience-button{

    display:inline-flex;

    align-items:center;

    gap:20px;

    margin-top:20px;

    padding:
        14px 22px;

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

    color:#fff;

    font-size:8px;

    letter-spacing:1.8px;

    transition:
        background .35s ease,
        border-color .35s ease,
        transform .35s ease;

}


.serenity-experience-button span{

    font-size:16px;

    transition:
        transform .35s ease;

}


.serenity-experience-button:hover{

    background:#b38b68;

    border-color:#b38b68;

    color:#fff;

    transform:
        translateY(-3px);

}


.serenity-experience-button:hover span{

    transform:
        translateX(6px);

}


/* =====================================================
   SIDE LABEL
===================================================== */

.serenity-experience-side-label{

    position:absolute;

    right:35px;

    top:50%;

    transform:
        translateY(-50%)
        rotate(180deg);

    writing-mode:
        vertical-rl;

    z-index:5;

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

    font-size:7px;

    letter-spacing:4px;

}


/* =====================================================
   SCROLL
===================================================== */

.serenity-experience-scroll{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:
        translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    z-index:5;

}


.serenity-experience-scroll span{

    font-size:7px;

    letter-spacing:3px;

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

}


.serenity-experience-scroll i{

    display:block;

    width:1px;

    height:45px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.9),
            transparent
        );

    animation:
        serenityExperienceScroll
        2s
        ease-in-out
        infinite;

}


/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes serenityExperienceZoom{

    from{

        transform:scale(1.04);

    }

    to{

        transform:scale(1.11);

    }

}


@keyframes serenityExperienceScroll{

    0%{

        opacity:.3;

        transform:
            scaleY(.5);

        transform-origin:top;

    }

    50%{

        opacity:1;

        transform:
            scaleY(1);

    }

    100%{

        opacity:.3;

        transform:
            scaleY(.5);

        transform-origin:bottom;

    }

}


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

@media(max-width:900px){

    .serenity-experience-section{

        min-height:620px;

    }


    .serenity-experience-content{

        width:80%;

        margin-left:0;

    }


    .serenity-experience-side-label{

        display:none;

    }

}


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

@media(max-width:600px){

    .serenity-experience-section{

        min-height:650px;

    }


    .serenity-experience-overlay{

        background:

            linear-gradient(
                90deg,
                rgba(12,10,8,.78),
                rgba(12,10,8,.48)
            );

    }


    .serenity-experience-frame{

        inset:15px;

    }


    .serenity-experience-content{

        width:82%;

        padding:
            40px 0;

    }


    .serenity-experience-number{

        margin-bottom:20px;

    }


    .serenity-experience-content h2{

        font-size:58px;

    }


    .serenity-experience-content p{

        font-size:10px;

        line-height:1.9;

    }


    .serenity-experience-side-label{

        display:none;

    }


    .serenity-experience-scroll{

        bottom:22px;

    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-dcf356f *//* =====================================================
   PART 06 — FACILITIES & AMENITIES
===================================================== */

.serenity-amenities-section{

    position:relative;

    padding:
        115px 7vw 85px;

    background:#f4f1eb;

}


/* =====================================================
   HEADING
===================================================== */

.serenity-amenities-heading{

    max-width:650px;

    margin:
        0 auto 65px;

    text-align:center;

}


.serenity-amenities-heading h2{

    margin:0;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(48px,5vw,68px);

    line-height:.92;

    font-weight:400;

    color:#292621;

}


.serenity-amenities-heading h2 em{

    color:#b38b68;

    font-style:italic;

}


.serenity-amenities-heading p{

    max-width:500px;

    margin:
        20px auto 0;

    color:#77716b;

    font-size:11px;

    line-height:1.9;

}


/* =====================================================
   AMENITIES GRID
===================================================== */

.serenity-amenities-grid{

    max-width:1180px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    border-top:
        1px solid #dcd5cc;

    border-left:
        1px solid #dcd5cc;

}


/* =====================================================
   AMENITY
===================================================== */

.serenity-amenity{

    position:relative;

    min-height:235px;

    padding:
        38px 35px;

    background:#f4f1eb;

    border-right:
        1px solid #dcd5cc;

    border-bottom:
        1px solid #dcd5cc;

    overflow:hidden;

    transition:
        background .4s ease;

}


.serenity-amenity::before{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:3px;

    background:#b38b68;

    transform:
        scaleX(0);

    transform-origin:left;

    transition:
        transform .45s ease;

}


.serenity-amenity:hover{

    background:#fff;

}


.serenity-amenity:hover::before{

    transform:
        scaleX(1);

}


/* =====================================================
   NUMBER
===================================================== */

.serenity-amenity-number{

    position:absolute;

    top:25px;

    right:28px;

    color:#c7bdb2;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:14px;

    transition:
        color .3s ease;

}


.serenity-amenity:hover
.serenity-amenity-number{

    color:#b38b68;

}


/* =====================================================
   ICON
===================================================== */

.serenity-amenity-icon{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:
        1px solid #d5ccc2;

    border-radius:50%;

    color:#a98a6c;

    margin-bottom:22px;

    transition:
        background .4s ease,
        color .4s ease,
        transform .4s ease;

}


.serenity-amenity-icon span{

    font-size:20px;

}


.serenity-amenity:hover
.serenity-amenity-icon{

    background:#b38b68;

    border-color:#b38b68;

    color:#fff;

    transform:
        rotate(8deg);

}


/* =====================================================
   TITLE
===================================================== */

.serenity-amenity h3{

    margin:0 0 8px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:24px;

    line-height:1;

    font-weight:500;

    color:#292621;

}


/* =====================================================
   DESCRIPTION
===================================================== */

.serenity-amenity p{

    max-width:260px;

    margin:0;

    color:#77716b;

    font-size:9px;

    line-height:1.8;

}


/* =====================================================
   BOTTOM STATEMENT
===================================================== */

.serenity-amenities-footer{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    margin-top:55px;

}


.serenity-amenities-footer p{

    margin:0;

    color:#918980;

    font-size:7px;

    letter-spacing:2px;

    text-align:center;

}


.amenities-footer-line{

    width:45px;

    height:1px;

    background:#c8bdb2;

}


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

@media(max-width:900px){

    .serenity-amenities-grid{

        grid-template-columns:
            repeat(2,1fr);

    }

}


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

@media(max-width:600px){

    .serenity-amenities-section{

        padding:
            75px 20px 60px;

    }


    .serenity-amenities-heading{

        margin-bottom:40px;

    }


    .serenity-amenities-heading h2{

        font-size:49px;

    }


    .serenity-amenities-grid{

        grid-template-columns:1fr;

    }


    .serenity-amenity{

        min-height:205px;

        padding:
            32px 25px;

    }


    .serenity-amenities-footer{

        gap:10px;

        margin-top:40px;

    }


    .amenities-footer-line{

        width:25px;

    }


    .serenity-amenities-footer p{

        font-size:6px;

        letter-spacing:1.2px;

    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d683ff5 *//* =====================================================
   PART 07 — LOCATION
===================================================== */

.serenity-location{

    width:100%;

    display:grid;

    grid-template-columns:
        1.05fr
        .95fr;

    min-height:600px;

    background:#fff;

}


/* =====================================================
   LOCATION VISUAL
===================================================== */

.serenity-location-visual{

    position:relative;

    min-height:600px;

    overflow:hidden;

}


.serenity-location-image{

    position:absolute;

    inset:0;

    overflow:hidden;

}


.serenity-location-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    display:block;

    transition:
        transform 1.2s ease;

}


.serenity-location-visual:hover
.serenity-location-image img{

    transform:scale(1.05);

}


/* =====================================================
   LOCATION CARD
===================================================== */

.serenity-location-card{

    position:absolute;

    left:7%;

    bottom:7%;

    min-width:210px;

    padding:
        22px 25px;

    display:flex;

    flex-direction:column;

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

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

}


.location-card-label{

    color:#a88b70;

    font-size:7px;

    letter-spacing:2px;

    margin-bottom:7px;

}


.serenity-location-card strong{

    color:#292621;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:27px;

    font-weight:500;

    line-height:1;

}


.serenity-location-card > span:last-child{

    margin-top:5px;

    color:#77716b;

    font-size:7px;

    letter-spacing:1.5px;

}


/* =====================================================
   LOCATION CONTENT
===================================================== */

.serenity-location-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:
        90px 7vw 90px 6vw;

}


.serenity-location-content h2{

    margin:0;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(48px,5vw,68px);

    line-height:.9;

    font-weight:400;

    color:#292621;

}


.serenity-location-content h2 em{

    color:#b38b68;

    font-style:italic;

}


/* =====================================================
   DIVIDER
===================================================== */

.serenity-location-divider{

    width:48px;

    height:1px;

    margin:
        27px 0;

    background:#b38b68;

}


/* =====================================================
   INTRO
===================================================== */

.location-intro{

    max-width:480px;

    margin:0;

    color:#706a64;

    font-size:11px;

    line-height:2;

}


/* =====================================================
   ADDRESS
===================================================== */

.serenity-address{

    display:flex;

    align-items:flex-start;

    gap:15px;

    margin-top:30px;

}


.address-icon{

    width:40px;

    height:40px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border:
        1px solid #ddd5cb;

    border-radius:50%;

    color:#a9896c;

    font-size:18px;

}


.address-content span{

    display:block;

    color:#a88b70;

    font-size:7px;

    letter-spacing:2px;

}


.address-content strong{

    display:block;

    margin-top:4px;

    color:#292621;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:23px;

    font-weight:500;

}


.address-content p{

    margin:
        4px 0 0;

    color:#77716b;

    font-size:9px;

    line-height:1.7;

}


/* =====================================================
   CONTACT INFORMATION
===================================================== */

.serenity-location-contact{

    display:flex;

    gap:40px;

    margin-top:28px;

    padding-top:22px;

    border-top:
        1px solid #e5dfd8;

}


.serenity-location-contact div{

    display:flex;

    flex-direction:column;

    gap:5px;

}


.serenity-location-contact span{

    color:#a88b70;

    font-size:7px;

    letter-spacing:2px;

}


.serenity-location-contact a{

    color:#4c4742;

    font-size:9px;

    transition:
        color .3s ease;

}


.serenity-location-contact a:hover{

    color:#b38b68;

}


/* =====================================================
   DIRECTIONS BUTTON
===================================================== */

.serenity-location-button{

    display:inline-flex;

    align-items:center;

    align-self:flex-start;

    gap:18px;

    margin-top:28px;

    padding:
        13px 20px;

    background:#b38b68;

    color:#fff;

    font-size:8px;

    letter-spacing:1.7px;

    transition:
        background .3s ease,
        transform .3s ease;

}


.serenity-location-button span{

    font-size:15px;

    transition:
        transform .3s ease;

}


.serenity-location-button:hover{

    background:#967253;

    color:#fff;

    transform:
        translateY(-3px);

}


.serenity-location-button:hover span{

    transform:
        translate(4px,-3px);

}


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

@media(max-width:900px){

    .serenity-location{

        grid-template-columns:1fr;

    }


    .serenity-location-visual{

        min-height:450px;

    }


    .serenity-location-content{

        padding:
            75px 7vw;

    }

}


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

@media(max-width:600px){

    .serenity-location-visual{

        min-height:350px;

    }


    .serenity-location-card{

        left:20px;

        bottom:20px;

        min-width:180px;

        padding:
            18px 20px;

    }


    .serenity-location-card strong{

        font-size:23px;

    }


    .serenity-location-content{

        padding:
            70px 25px;

    }


    .serenity-location-content h2{

        font-size:48px;

    }


    .serenity-location-contact{

        flex-direction:column;

        gap:18px;

    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1188c14 *//* =====================================================
   PART 08 — BEYOND YOUR STAY
===================================================== */

.serenity-services-section{

    padding:
        115px 7vw 90px;

    background:#fff;

}


/* =====================================================
   HEADING
===================================================== */

.serenity-services-heading{

    max-width:680px;

    margin:
        0 auto 60px;

    text-align:center;

}


.serenity-services-heading h2{

    margin:0;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(48px,5vw,68px);

    line-height:.9;

    font-weight:400;

    color:#292621;

}


.serenity-services-heading h2 em{

    color:#b38b68;

    font-style:italic;

}


.serenity-services-heading p{

    max-width:520px;

    margin:
        20px auto 0;

    color:#77716b;

    font-size:11px;

    line-height:1.9;

}


/* =====================================================
   SERVICES GRID
===================================================== */

.serenity-services-grid{

    max-width:1200px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:22px;

}


/* =====================================================
   SERVICE CARD
===================================================== */

.serenity-service-card{

    background:#f4f1eb;

    transition:
        transform .45s ease,
        box-shadow .45s ease;

}


.serenity-service-card:hover{

    transform:
        translateY(-8px);

    box-shadow:
        0 25px 55px
        rgba(43,36,30,.13);

}


/* =====================================================
   IMAGE
===================================================== */

.serenity-service-image{

    position:relative;

    height:270px;

    overflow:hidden;

}


.serenity-service-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:
        transform .8s ease;

}


.serenity-service-card:hover
.serenity-service-image img{

    transform:scale(1.07);

}


/* =====================================================
   NUMBER
===================================================== */

.serenity-service-number{

    position:absolute;

    top:18px;

    right:18px;

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        rgba(20,18,15,.65);

    color:#fff;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:14px;

}


/* =====================================================
   CONTENT
===================================================== */

.serenity-service-content{

    padding:
        30px 30px 32px;

}


.serenity-service-content > span{

    color:#a88b70;

    font-size:7px;

    letter-spacing:2px;

}


.serenity-service-content h3{

    margin:
        9px 0 12px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:29px;

    line-height:1;

    font-weight:500;

    color:#292621;

}


.serenity-service-content p{

    min-height:68px;

    margin:0;

    color:#77716b;

    font-size:9px;

    line-height:1.85;

}


/* =====================================================
   SERVICE LINK
===================================================== */

.serenity-service-link{

    display:inline-flex;

    align-items:center;

    gap:14px;

    margin-top:23px;

    color:#4d4741;

    font-size:8px;

    letter-spacing:1.5px;

    transition:
        color .3s ease;

}


.serenity-service-link b{

    color:#b38b68;

    font-size:15px;

    font-weight:400;

    transition:
        transform .3s ease;

}


.serenity-service-link:hover{

    color:#b38b68;

}


.serenity-service-link:hover b{

    transform:
        translateX(5px);

}


/* =====================================================
   BOTTOM MESSAGE
===================================================== */

.serenity-services-bottom{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    margin-top:55px;

}


.serenity-services-bottom span{

    width:45px;

    height:1px;

    background:#d3cbc2;

}


.serenity-services-bottom p{

    margin:0;

    color:#928a82;

    font-size:7px;

    letter-spacing:2px;

    text-align:center;

}


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

@media(max-width:900px){

    .serenity-services-grid{

        grid-template-columns:
            1fr 1fr;

    }


    .serenity-service-card:last-child{

        grid-column:
            1 / -1;

        max-width:50%;

        margin:0 auto;

        width:100%;

    }

}


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

@media(max-width:600px){

    .serenity-services-section{

        padding:
            75px 20px 65px;

    }


    .serenity-services-heading{

        margin-bottom:40px;

    }


    .serenity-services-heading h2{

        font-size:49px;

    }


    .serenity-services-grid{

        grid-template-columns:1fr;

        gap:18px;

    }


    .serenity-service-card:last-child{

        grid-column:auto;

        max-width:none;

    }


    .serenity-service-image{

        height:235px;

    }


    .serenity-service-content{

        padding:
            27px 24px 30px;

    }


    .serenity-service-content h3{

        font-size:27px;

    }


    .serenity-service-content p{

        min-height:auto;

    }


    .serenity-services-bottom{

        gap:8px;

    }


    .serenity-services-bottom span{

        width:22px;

    }


    .serenity-services-bottom p{

        font-size:6px;

        letter-spacing:1px;

    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ac76f5a *//* =====================================================
   PART 10 — CONTACT
===================================================== */

.serenity-contact-section{

    width:100%;

    display:grid;

    grid-template-columns:
        1fr
        1fr;

    min-height:570px;

    background:#f4f1eb;

}


/* =====================================================
   LEFT INTRO
===================================================== */

.serenity-contact-intro{

    padding:
        100px 8vw;

    display:flex;

    flex-direction:column;

    justify-content:center;

    border-right:
        1px solid #ddd5cc;

}


.serenity-contact-intro h2{

    margin:0;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(52px,5vw,72px);

    line-height:.88;

    font-weight:400;

    color:#292621;

}


.serenity-contact-intro h2 em{

    color:#b38b68;

    font-style:italic;

}


.serenity-contact-divider{

    width:50px;

    height:1px;

    background:#b38b68;

    margin:
        28px 0;

}


.serenity-contact-intro > p{

    max-width:430px;

    margin:0;

    color:#706a64;

    font-size:11px;

    line-height:2;

}


/* =====================================================
   SIGNATURE
===================================================== */

.serenity-contact-signature{

    margin-top:55px;

    color:#b2a79c;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:12px;

    letter-spacing:4px;

}


/* =====================================================
   CONTACT DETAILS
===================================================== */

.serenity-contact-details{

    padding:
        80px 7vw;

    display:flex;

    flex-direction:column;

    justify-content:center;

}


/* =====================================================
   CONTACT ITEM
===================================================== */

.serenity-contact-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:
        23px 0;

    border-bottom:
        1px solid #ddd5cc;

}


.serenity-contact-item:first-child{

    padding-top:0;

}


.serenity-contact-icon{

    width:43px;

    height:43px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border:
        1px solid #d3c9bf;

    border-radius:50%;

    color:#a9896c;

    font-size:15px;

    transition:
        background .3s ease,
        color .3s ease;

}


.serenity-contact-item:hover
.serenity-contact-icon{

    background:#b38b68;

    border-color:#b38b68;

    color:#fff;

}


.serenity-contact-item > div:last-child{

    display:flex;

    flex-direction:column;

}


.serenity-contact-item span{

    color:#a88b70;

    font-size:7px;

    letter-spacing:2px;

    margin-bottom:5px;

}


.serenity-contact-item a{

    color:#45403b;

    font-size:11px;

    line-height:1.7;

    transition:
        color .3s ease;

}


.serenity-contact-item a:hover{

    color:#b38b68;

}


.serenity-contact-item strong{

    color:#292621;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:23px;

    font-weight:500;

}


.serenity-contact-item p{

    margin:
        4px 0 0;

    color:#77716b;

    font-size:9px;

    line-height:1.7;

}


/* =====================================================
   CONTACT ACTIONS
===================================================== */

.serenity-contact-whatsapp,
.serenity-contact-map{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:18px;

    padding:
        15px 19px;

    font-size:8px;

    letter-spacing:1.5px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;

}


.serenity-contact-whatsapp{

    background:#b38b68;

    color:#fff;

}


.serenity-contact-whatsapp:hover{

    background:#967253;

    color:#fff;

    transform:
        translateY(-2px);

}


.serenity-contact-map{

    margin-top:8px;

    border:
        1px solid #cfc5bb;

    color:#514b45;

}


.serenity-contact-map:hover{

    background:#292621;

    border-color:#292621;

    color:#fff;

}


.serenity-contact-whatsapp b,
.serenity-contact-map b{

    font-size:15px;

    font-weight:400;

}


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

@media(max-width:900px){

    .serenity-contact-section{

        grid-template-columns:1fr;

    }


    .serenity-contact-intro{

        border-right:0;

        border-bottom:
            1px solid #ddd5cc;

        padding:
            80px 7vw;

    }


    .serenity-contact-details{

        padding:
            70px 7vw;

    }

}


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

@media(max-width:600px){

    .serenity-contact-intro{

        padding:
            70px 25px;

    }


    .serenity-contact-intro h2{

        font-size:50px;

    }


    .serenity-contact-signature{

        margin-top:40px;

        font-size:10px;

        letter-spacing:3px;

    }


    .serenity-contact-details{

        padding:
            60px 25px;

    }


    .serenity-contact-item{

        gap:13px;

    }


    .serenity-contact-icon{

        width:38px;

        height:38px;

    }

}/* End custom CSS */