.elementor-95 .elementor-element.elementor-element-bf3e8ce{--display:flex;--min-height:350px;--justify-content:center;--overlay-opacity:0.5;}.elementor-95 .elementor-element.elementor-element-bf3e8ce:not(.elementor-motion-effects-element-type-background), .elementor-95 .elementor-element.elementor-element-bf3e8ce > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://zeisaspaseminyakbali.com/wp-content/uploads/2026/10/aesthatic-photo-300x169-1.jpg");background-position:center center;}.elementor-95 .elementor-element.elementor-element-bf3e8ce::before, .elementor-95 .elementor-element.elementor-element-bf3e8ce > .elementor-background-video-container::before, .elementor-95 .elementor-element.elementor-element-bf3e8ce > .e-con-inner > .elementor-background-video-container::before, .elementor-95 .elementor-element.elementor-element-bf3e8ce > .elementor-background-slideshow::before, .elementor-95 .elementor-element.elementor-element-bf3e8ce > .e-con-inner > .elementor-background-slideshow::before, .elementor-95 .elementor-element.elementor-element-bf3e8ce > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';background-color:#000000;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-95 .elementor-element.elementor-element-661a4c9{text-align:start;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-95 .elementor-element.elementor-element-21afc2f .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:600;}.elementor-95 .elementor-element.elementor-element-21afc2f{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-95 .elementor-element.elementor-element-a5dcc62{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:400;color:#FFFFFF;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-95 .elementor-element.elementor-element-52d3b78{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-95 .elementor-element.elementor-element-62e9c76{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-95 .elementor-element.elementor-element-f68fba7{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-widget-button .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );background-color:var( --e-global-color-accent );}:root{--page-title-display:none;}/* Start custom CSS for container, class: .elementor-element-bf3e8ce */@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=El+Messiri:wght@500;600;700&display=swap');


/* =========================================================
   ZEISHA SPA SEMINYAK
   TREATMENT HERO
   1 CONTAINER

   Typography:
   Eyebrow     = DM Sans 24px
   Main Title  = El Messiri 40px
   Description = DM Sans 16px

   Watermark   = TREATMENT
   ========================================================= */


/* =========================================================
   01. MAIN HERO CONTAINER
   ========================================================= */

.elementor-95 .elementor-element.elementor-element-bf3e8ce{

    /* =====================================================
       COLOR PALETTE
       ===================================================== */

    --zs-primary:#2F5142;
    --zs-dark:#1D3028;
    --zs-ivory:#F5F1E8;
    --zs-sage:#98A995;
    --zs-beige:#DDD3C3;
    --zs-gold:#B79B6C;
    --zs-text:#262A27;
    --zs-light:#FAF8F3;


    /* =====================================================
       TYPOGRAPHY
       ===================================================== */

    --zs-eyebrow-size:24px;

    --zs-title-size:40px;

    --zs-description-size:16px;


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

    --zs-hero-height:350px;


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

    --zs-content-width:760px;


    --zs-padding-left:
        clamp(30px,5vw,64px);


    --zs-padding-right:
        clamp(30px,5vw,64px);


    position:
        relative !important;


    isolation:
        isolate !important;


    overflow:
        hidden !important;


    width:
        100% !important;


    height:
        var(--zs-hero-height) !important;


    min-height:
        var(--zs-hero-height) !important;


    max-height:
        var(--zs-hero-height) !important;


    box-sizing:
        border-box !important;


    display:
        flex !important;


    flex-direction:
        column !important;


    justify-content:
        center !important;


    align-items:
        flex-start !important;


    gap:
        0 !important;


    padding:
        34px
        var(--zs-padding-right)
        34px
        var(--zs-padding-left) !important;


    /* =====================================================
       BACKGROUND IMAGE
       Set image from Elementor > Style > Background
       ===================================================== */

    background-position:
        center center !important;


    background-repeat:
        no-repeat !important;


    background-size:
        cover !important;


    background-color:
        var(--zs-dark) !important;
}



/* =========================================================
   02. DARK IMAGE OVERLAY
   ========================================================= */

.elementor-95 .elementor-element.elementor-element-bf3e8ce::before{

    content:
        "";


    position:
        absolute;


    z-index:
        1;


    inset:
        0;


    width:
        100%;


    height:
        100%;


    pointer-events:
        none;


    background:

        linear-gradient(
            90deg,

            rgba(20,33,27,.90) 0%,

            rgba(24,40,33,.84) 24%,

            rgba(28,47,38,.72) 43%,

            rgba(29,48,40,.54) 59%,

            rgba(22,36,30,.34) 76%,

            rgba(14,23,19,.43) 100%
        );
}



/* =========================================================
   03. SUBTLE GOLD AMBIENT LIGHT
   ========================================================= */

.elementor-95 .elementor-element.elementor-element-bf3e8ce::after{

    content:
        "";


    position:
        absolute;


    z-index:
        1;


    left:
        -180px;


    top:
        -220px;


    width:
        600px;


    height:
        600px;


    border-radius:
        50%;


    pointer-events:
        none;


    background:

        radial-gradient(
            circle,

            rgba(183,155,108,.14) 0%,

            rgba(183,155,108,.06) 38%,

            rgba(183,155,108,0) 70%
        );


    animation:
        zsTreatmentGlow
        8s
        ease-in-out
        infinite;
}



/* =========================================================
   04. GOLD GLOW MOTION
   ========================================================= */

@keyframes zsTreatmentGlow{

    0%,
    100%{

        transform:
            translate3d(0,0,0)
            scale(1);
    }


    50%{

        transform:
            translate3d(18px,10px,0)
            scale(1.05);
    }

}



/* =========================================================
   05. CONTENT ABOVE OVERLAY
   ========================================================= */

.elementor-95 .elementor-element.elementor-element-bf3e8ce > .elementor-element,

.elementor-95 .elementor-element.elementor-element-bf3e8ce > .e-con-inner,

.elementor-95 .elementor-element.elementor-element-bf3e8ce
.e-con-inner
> .elementor-element{

    position:
        relative !important;


    z-index:
        5 !important;
}



/* =========================================================
   06. CONTENT WIDTH
   ========================================================= */

.elementor-95 .elementor-element.elementor-element-bf3e8ce .zs-contact-eyebrow,

.elementor-95 .elementor-element.elementor-element-bf3e8ce .zs-contact-title,

.elementor-95 .elementor-element.elementor-element-bf3e8ce .zs-contact-desc{

    width:
        100%;


    max-width:
        var(--zs-content-width);
}



/* =========================================================
   07. EYEBROW
   DM SANS — 24PX
   ========================================================= */

.elementor-95 .elementor-element.elementor-element-bf3e8ce
.zs-contact-eyebrow
.elementor-heading-title{

    display:
        flex;


    align-items:
        center;


    gap:
        16px;


    font-family:
        'DM Sans',
        sans-serif !important;


    font-size:
        var(--zs-eyebrow-size) !important;


    line-height:
        1.2 !important;


    font-weight:
        600 !important;


    letter-spacing:
        2.8px !important;


    text-transform:
        uppercase !important;


    color:
        var(--zs-gold) !important;


    text-shadow:
        0 4px 16px
        rgba(0,0,0,.12);
}



/* =========================================================
   08. EYEBROW GOLD LINE
   ========================================================= */

.elementor-95 .elementor-element.elementor-element-bf3e8ce
.zs-contact-eyebrow
.elementor-heading-title::after{

    content:
        "";


    display:
        block;


    flex:
        0 0 auto;


    width:
        56px;


    height:
        1px;


    background:
        linear-gradient(
            90deg,

            var(--zs-gold),

            rgba(183,155,108,.20)
        );


    opacity:
        .95;


    transform-origin:
        left center;


    animation:
        zsEyebrowLine
        1s
        cubic-bezier(.16,1,.3,1)
        both;
}



/* =========================================================
   09. EYEBROW LINE ANIMATION
   ========================================================= */

@keyframes zsEyebrowLine{

    0%{

        transform:
            scaleX(0);

        opacity:
            0;
    }


    100%{

        transform:
            scaleX(1);

        opacity:
            .95;
    }

}



/* =========================================================
   10. MAIN TITLE
   EL MESSIRI — 40PX
   ========================================================= */

.elementor-95 .elementor-element.elementor-element-bf3e8ce
.zs-contact-title{

    position:
        relative;


    z-index:
        5;
}


.elementor-95 .elementor-element.elementor-element-bf3e8ce
.zs-contact-title
.elementor-heading-title{

    position:
        relative;


    z-index:
        3;


    max-width:
        680px;


    font-family:
        'El Messiri',
        serif !important;


    font-size:
        var(--zs-title-size) !important;


    line-height:
        1.08 !important;


    font-weight:
        600 !important;


    letter-spacing:
        -.3px !important;


    color:
        var(--zs-light) !important;


    text-shadow:
        0 3px 18px
        rgba(0,0,0,.15);
}



/* =========================================================
   11. DESCRIPTION
   DM SANS — 16PX
   ========================================================= */

.elementor-95 .elementor-element.elementor-element-bf3e8ce .zs-contact-desc,

.elementor-95 .elementor-element.elementor-element-bf3e8ce .zs-contact-desc p,

.elementor-95 .elementor-element.elementor-element-bf3e8ce .zs-contact-desc span{

    max-width:
        760px;


    font-family:
        'DM Sans',
        sans-serif !important;


    font-size:
        var(--zs-description-size) !important;


    line-height:
        1.7 !important;


    font-weight:
        400 !important;


    color:
        rgba(250,248,243,.88) !important;
}



/* =========================================================
   12. REMOVE DEFAULT PARAGRAPH MARGIN
   ========================================================= */

.elementor-95 .elementor-element.elementor-element-bf3e8ce
.zs-contact-desc
.elementor-widget-container
> p:first-child{

    margin-top:
        0 !important;
}


.elementor-95 .elementor-element.elementor-element-bf3e8ce
.zs-contact-desc
.elementor-widget-container
> p:last-child{

    margin-bottom:
        0 !important;
}



/* =========================================================
   13. BUTTON WRAPPER
   ========================================================= */

.elementor-95 .elementor-element.elementor-element-bf3e8ce .zs-contact-btn{

    width:
        auto !important;


    max-width:
        none !important;


    position:
        relative;


    z-index:
        6;
}



/* =========================================================
   14. BUTTON
   ========================================================= */

.elementor-95 .elementor-element.elementor-element-bf3e8ce
.zs-contact-btn
.elementor-button{

    position:
        relative;


    min-height:
        48px !important;


    padding:
        12px 26px !important;


    display:
        inline-flex !important;


    align-items:
        center !important;


    justify-content:
        center !important;


    overflow:
        hidden;


    isolation:
        isolate;


    border:
        1px solid
        rgba(183,155,108,.75) !important;


    border-radius:
        2px !important;


    background:
        var(--zs-primary) !important;


    color:
        #FFFFFF !important;


    font-family:
        'DM Sans',
        sans-serif !important;


    font-size:
        14px !important;


    line-height:
        1 !important;


    font-weight:
        600 !important;


    letter-spacing:
        .3px !important;


    box-shadow:
        0 10px 25px
        rgba(0,0,0,.13) !important;


    transition:
        transform .4s cubic-bezier(.16,1,.3,1),
        border-color .35s ease,
        box-shadow .4s ease !important;
}



/* =========================================================
   15. BUTTON ANIMATED BACKGROUND
   ========================================================= */

.elementor-95 .elementor-element.elementor-element-bf3e8ce
.zs-contact-btn
.elementor-button::before{

    content:
        "";


    position:
        absolute;


    inset:
        0;


    background:
        var(--zs-gold);


    transform:
        scaleX(0);


    transform-origin:
        left center;


    transition:
        transform
        .5s
        cubic-bezier(.16,1,.3,1);


    z-index:
        0;
}



/* =========================================================
   16. BUTTON SHIMMER
   ========================================================= */

.elementor-95 .elementor-element.elementor-element-bf3e8ce
.zs-contact-btn
.elementor-button::after{

    content:
        "";


    position:
        absolute;


    top:
        -80%;


    left:
        -70px;


    width:
        42px;


    height:
        260%;


    transform:
        rotate(14deg);


    background:

        linear-gradient(
            90deg,

            transparent,

            rgba(255,255,255,0),

            rgba(255,255,255,.22),

            rgba(255,255,255,0),

            transparent
        );


    z-index:
        1;


    transition:
        left
        .8s
        cubic-bezier(.16,1,.3,1);
}



/* =========================================================
   17. BUTTON CONTENT ABOVE EFFECT
   ========================================================= */

.elementor-95 .elementor-element.elementor-element-bf3e8ce
.zs-contact-btn
.elementor-button-content-wrapper{

    position:
        relative;


    z-index:
        3;
}



/* =========================================================
   18. BUTTON TEXT
   ========================================================= */

.elementor-95 .elementor-element.elementor-element-bf3e8ce
.zs-contact-btn
.elementor-button-text{

    color:
        #FFFFFF !important;
}



/* =========================================================
   19. BUTTON ICON
   ========================================================= */

.elementor-95 .elementor-element.elementor-element-bf3e8ce
.zs-contact-btn
.elementor-button-icon,

.elementor-95 .elementor-element.elementor-element-bf3e8ce
.zs-contact-btn
.elementor-button-icon i,

.elementor-95 .elementor-element.elementor-element-bf3e8ce
.zs-contact-btn
.elementor-button-icon svg{

    color:
        #FFFFFF !important;


    fill:
        #FFFFFF !important;


    transition:
        transform
        .4s
        cubic-bezier(.16,1,.3,1);
}



/* =========================================================
   20. BUTTON HOVER
   ========================================================= */

@media(hover:hover) and (pointer:fine){

    .elementor-95 .elementor-element.elementor-element-bf3e8ce
    .zs-contact-btn
    .elementor-button:hover{

        transform:
            translateY(-2px);


        border-color:
            var(--zs-gold) !important;


        box-shadow:
            0 14px 30px
            rgba(0,0,0,.18) !important;
    }


    .elementor-95 .elementor-element.elementor-element-bf3e8ce
    .zs-contact-btn
    .elementor-button:hover::before{

        transform:
            scaleX(1);
    }


    .elementor-95 .elementor-element.elementor-element-bf3e8ce
    .zs-contact-btn
    .elementor-button:hover::after{

        left:
            125%;
    }


    .elementor-95 .elementor-element.elementor-element-bf3e8ce
    .zs-contact-btn
    .elementor-button:hover
    .elementor-button-icon{

        transform:
            translateX(3px);
    }

}



/* =========================================================
   21. WATERMARK — TREATMENT
   ========================================================= */

.elementor-95 .elementor-element.elementor-element-bf3e8ce
.zs-contact-title::before{

    content:
        "TREATMENT";


    position:
        absolute;


    z-index:
        -1;


    left:
        -18px;


    top:
        48%;


    transform:
        translateY(-50%);


    pointer-events:
        none;


    user-select:
        none;


    white-space:
        nowrap;


    font-family:
        'El Messiri',
        serif;


    font-size:
        92px;


    line-height:
        .8;


    font-weight:
        600;


    letter-spacing:
        3px;


    color:
        rgba(250,248,243,.032);


    -webkit-text-stroke:
        1px
        rgba(250,248,243,.045);


    text-transform:
        uppercase;


    animation:
        zsTreatmentWatermark
        8s
        ease-in-out
        infinite;
}



/* =========================================================
   22. WATERMARK MOTION
   ========================================================= */

@keyframes zsTreatmentWatermark{

    0%,
    100%{

        transform:
            translateY(-50%)
            translateX(0);
    }


    50%{

        transform:
            translateY(-50%)
            translateX(7px);
    }

}



/* =========================================================
   23. EYEBROW ENTRANCE
   ========================================================= */

@keyframes zsTreatmentFadeUp{

    0%{

        opacity:
            0;


        transform:
            translateY(16px);


        filter:
            blur(3px);
    }


    100%{

        opacity:
            1;


        transform:
            translateY(0);


        filter:
            blur(0);
    }

}


.elementor-95 .elementor-element.elementor-element-bf3e8ce .zs-contact-eyebrow{

    animation:
        zsTreatmentFadeUp
        .65s
        .05s
        cubic-bezier(.16,1,.3,1)
        both;
}


.elementor-95 .elementor-element.elementor-element-bf3e8ce .zs-contact-title{

    animation:
        zsTreatmentFadeUp
        .72s
        .12s
        cubic-bezier(.16,1,.3,1)
        both;
}


.elementor-95 .elementor-element.elementor-element-bf3e8ce .zs-contact-desc{

    animation:
        zsTreatmentFadeUp
        .72s
        .20s
        cubic-bezier(.16,1,.3,1)
        both;
}


.elementor-95 .elementor-element.elementor-element-bf3e8ce .zs-contact-btn{

    animation:
        zsTreatmentFadeUp
        .72s
        .28s
        cubic-bezier(.16,1,.3,1)
        both;
}



/* =========================================================
   24. TITLE MICRO MOTION
   ========================================================= */

.elementor-95 .elementor-element.elementor-element-bf3e8ce
.zs-contact-title
.elementor-heading-title{

    transition:
        transform .5s cubic-bezier(.16,1,.3,1),
        text-shadow .4s ease;
}


@media(hover:hover) and (pointer:fine){

    .elementor-95 .elementor-element.elementor-element-bf3e8ce:hover
    .zs-contact-title
    .elementor-heading-title{

        transform:
            translateX(3px);


        text-shadow:
            0 5px 22px
            rgba(0,0,0,.20);
    }

}



/* =========================================================
   25. TABLET
   ========================================================= */

@media(max-width:1024px){

    .elementor-95 .elementor-element.elementor-element-bf3e8ce{

        --zs-content-width:
            620px;


        --zs-padding-left:
            38px;


        --zs-padding-right:
            32px;


        height:
            350px !important;


        min-height:
            350px !important;


        max-height:
            350px !important;
    }


    /* TREATMENT WATERMARK */

    .elementor-95 .elementor-element.elementor-element-bf3e8ce
    .zs-contact-title::before{

        left:
            -12px;


        font-size:
            72px;


        letter-spacing:
            2.5px;
    }

}



/* =========================================================
   26. MOBILE
   ========================================================= */

@media(max-width:767px){

    .elementor-95 .elementor-element.elementor-element-bf3e8ce{

        --zs-content-width:
            92%;


        --zs-padding-left:
            20px;


        --zs-padding-right:
            20px;


        height:
            350px !important;


        min-height:
            350px !important;


        max-height:
            350px !important;


        padding:
            24px
            var(--zs-padding-right)
            24px
            var(--zs-padding-left) !important;


        background-position:
            60% center !important;
    }


    .elementor-95 .elementor-element.elementor-element-bf3e8ce::before{

        background:

            linear-gradient(
                90deg,

                rgba(16,28,23,.92) 0%,

                rgba(20,35,29,.86) 38%,

                rgba(24,42,34,.71) 64%,

                rgba(18,30,25,.52) 82%,

                rgba(13,22,18,.48) 100%
            );
    }


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

    .elementor-95 .elementor-element.elementor-element-bf3e8ce
    .zs-contact-eyebrow
    .elementor-heading-title{

        font-size:
            20px !important;


        letter-spacing:
            2px !important;
    }


    .elementor-95 .elementor-element.elementor-element-bf3e8ce
    .zs-contact-eyebrow
    .elementor-heading-title::after{

        width:
            34px;
    }


    /* =====================================================
       MOBILE MAIN TITLE
       ===================================================== */

    .elementor-95 .elementor-element.elementor-element-bf3e8ce
    .zs-contact-title
    .elementor-heading-title{

        font-size:
            34px !important;
    }


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

    .elementor-95 .elementor-element.elementor-element-bf3e8ce .zs-contact-desc,

    .elementor-95 .elementor-element.elementor-element-bf3e8ce .zs-contact-desc p,

    .elementor-95 .elementor-element.elementor-element-bf3e8ce .zs-contact-desc span{

        font-size:
            14px !important;
    }


    /* =====================================================
       MOBILE TREATMENT WATERMARK
       ===================================================== */

    .elementor-95 .elementor-element.elementor-element-bf3e8ce
    .zs-contact-title::before{

        left:
            -6px;


        top:
            50%;


        font-size:
            50px;


        letter-spacing:
            1.8px;


        color:
            rgba(250,248,243,.03);


        -webkit-text-stroke:
            1px
            rgba(250,248,243,.038);
    }


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

    .elementor-95 .elementor-element.elementor-element-bf3e8ce
    .zs-contact-btn
    .elementor-button{

        min-height:
            43px !important;


        padding:
            10px 20px !important;


        font-size:
            13px !important;
    }

}



/* =========================================================
   27. SMALL MOBILE
   ========================================================= */

@media(max-width:420px){

    .elementor-95 .elementor-element.elementor-element-bf3e8ce{

        --zs-content-width:
            96%;


        --zs-padding-left:
            17px;


        --zs-padding-right:
            17px;
    }


    .elementor-95 .elementor-element.elementor-element-bf3e8ce
    .zs-contact-title
    .elementor-heading-title{

        font-size:
            30px !important;
    }


    /* TREATMENT WATERMARK */

    .elementor-95 .elementor-element.elementor-element-bf3e8ce
    .zs-contact-title::before{

        left:
            -4px;


        font-size:
            42px;


        letter-spacing:
            1.2px;
    }

}



/* =========================================================
   28. EXTRA SMALL MOBILE
   ========================================================= */

@media(max-width:360px){

    .elementor-95 .elementor-element.elementor-element-bf3e8ce
    .zs-contact-title::before{

        left:
            -2px;


        font-size:
            37px;


        letter-spacing:
            1px;
    }

}



/* =========================================================
   29. ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

    .elementor-95 .elementor-element.elementor-element-bf3e8ce,

    .elementor-95 .elementor-element.elementor-element-bf3e8ce *,

    .elementor-95 .elementor-element.elementor-element-bf3e8ce::before,

    .elementor-95 .elementor-element.elementor-element-bf3e8ce::after,

    .elementor-95 .elementor-element.elementor-element-bf3e8ce *::before,

    .elementor-95 .elementor-element.elementor-element-bf3e8ce *::after{

        animation:
            none !important;


        transition:
            none !important;
    }

}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-52d3b78 *//* =========================================================
   ZEISHA SPA
   FINAL CTA — IMAGE BACKGROUND
   EDITORIAL / CINEMATIC / LUXURY

   HEADING     : EL MESSIRI
   DESCRIPTION : DM SANS 16PX
   ========================================================= */


/* =========================================================
   GOOGLE FONTS
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=El+Messiri:wght@400;500;600&display=swap');


/* =========================================================
   COLOR + IMAGE SYSTEM
   ========================================================= */

.zeisha-cta {

    --zc-deep: #1D3028;
    --zc-green: #2F5142;
    --zc-sage: #98A995;

    --zc-ivory: #F5F1E8;
    --zc-beige: #DDD3C3;

    --zc-gold: #B79B6C;

    --zc-white: #FFFFFF;

    /* =========================================
       GANTI URL FOTO DI BAWAH INI
       ========================================= */

    --zc-bg-image:
        url("https://belajarenam.artsyanaid.com/wp-content/uploads/2026/09/ChatGPT-Image-Sep-28-2026-03_55_17-PM.png");

}


/* =========================================================
   MAIN CTA SECTION
   ========================================================= */

.zeisha-cta {

    position:
        relative;

    width:
        100%;

    min-height:
        620px;

    overflow:
        hidden;

    isolation:
        isolate;

    display:
        flex;

    align-items:
        center;

    background-image:
        var(--zc-bg-image) !important;

    background-size:
        cover !important;

    background-position:
        center center !important;

    background-repeat:
        no-repeat !important;

    background-attachment:
        scroll !important;

    color:
        var(--zc-ivory);

    font-family:
        "DM Sans",
        Arial,
        sans-serif !important;

}


/* =========================================================
   BOX MODEL
   ========================================================= */

.zeisha-cta *,
.zeisha-cta *::before,
.zeisha-cta *::after {

    box-sizing:
        border-box;

}


/* =========================================================
   CINEMATIC DARK GREEN OVERLAY
   ========================================================= */

.zeisha-cta::before {

    content:
        "";

    position:
        absolute;

    z-index:
        0;

    inset:
        0;

    pointer-events:
        none;

    background:

        linear-gradient(
            90deg,
            rgba(18,34,28,.72) 0%,
            rgba(29,48,40,.60) 30%,
            rgba(29,48,40,.54) 50%,
            rgba(29,48,40,.60) 70%,
            rgba(18,34,28,.72) 100%
        ),

        linear-gradient(
            180deg,
            rgba(13,27,22,.25) 0%,
            rgba(13,27,22,.08) 32%,
            rgba(13,27,22,.16) 68%,
            rgba(13,27,22,.46) 100%
        );

}


/* =========================================================
   TOP GOLD GUIDE
   ========================================================= */

.zeisha-cta::after {

    content:
        "";

    position:
        absolute;

    z-index:
        3;

    top:
        0;

    left:
        50%;

    width:
        1px;

    height:
        clamp(52px,6vw,78px);

    transform:
        translateX(-50%);

    background:

        linear-gradient(
            to bottom,
            rgba(183,155,108,.98),
            rgba(183,155,108,0)
        );

    pointer-events:
        none;

}


/* =========================================================
   INNER SHELL
   ========================================================= */

.zeisha-cta__shell {

    position:
        relative;

    z-index:
        2;

    width:
        min(100%,1150px);

    margin:
        0 auto !important;

    padding:

        clamp(100px,9vw,145px)

        clamp(28px,5vw,70px)

        clamp(95px,8vw,135px)

        !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    text-align:
        center;

}


/* =========================================================
   VERY SUBTLE CONTENT VIGNETTE
   ========================================================= */

.zeisha-cta__shell::before {

    content:
        "";

    position:
        absolute;

    z-index:
        -1;

    left:
        50%;

    top:
        50%;

    width:
        min(90vw,900px);

    height:
        min(70%,500px);

    transform:
        translate(-50%,-50%);

    background:

        radial-gradient(
            ellipse at center,
            rgba(12,25,20,.19) 0%,
            rgba(12,25,20,.10) 43%,
            transparent 72%
        );

    pointer-events:
        none;

}


/* =========================================================
   EYEBROW
   ========================================================= */

.zeisha-cta__eyebrow {

    position:
        relative;

    margin:
        0 0 23px 0 !important;

    padding-top:
        14px;

}


/* =========================================================
   EYEBROW GOLD LINE
   ========================================================= */

.zeisha-cta__eyebrow::before {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    top:
        0;

    width:
        40px;

    height:
        1px;

    transform:
        translateX(-50%);

    background:
        var(--zc-gold);

    transition:

        width
        .6s
        cubic-bezier(.19,1,.22,1);

}


.zeisha-cta__shell:hover
.zeisha-cta__eyebrow::before {

    width:
        65px;

}


/* =========================================================
   EYEBROW TEXT
   ========================================================= */

.zeisha-cta__eyebrow
.elementor-heading-title {

    margin:
        0 !important;

    padding:
        0 !important;

    font-family:
        "DM Sans",
        Arial,
        sans-serif !important;

    font-size:
        9px !important;

    font-weight:
        600 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        .24em !important;

    text-transform:
        uppercase !important;

    color:
        var(--zc-beige) !important;

}


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

.zeisha-cta__title {

    position:
        relative;

    width:
        min(100%,850px);

    margin:
        0 0 21px 0 !important;

}


/* =========================================================
   TITLE FONT
   EL MESSIRI
   ========================================================= */

.zeisha-cta__title
.elementor-heading-title {

    margin:
        0 !important;

    padding:
        0 !important;

    font-family:
        "El Messiri",
        Georgia,
        serif !important;

    font-size:
        clamp(58px,6.2vw,92px) !important;

    font-weight:
        400 !important;

    line-height:
        .95 !important;

    letter-spacing:
        -.04em !important;

    color:
        var(--zc-ivory) !important;

    text-shadow:

        0
        4px
        30px
        rgba(0,0,0,.15);

}


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

.zeisha-cta__description {

    position:
        relative;

    width:
        min(100%,650px);

    margin:
        0 auto 34px !important;

}


/* =========================================================
   DESCRIPTION
   DM SANS — ALWAYS 16PX
   ========================================================= */

.zeisha-cta__description,

.zeisha-cta__description *,

.zeisha-cta__description
.elementor-widget-container,

.zeisha-cta__description p,

.zeisha-cta__description span,

.zeisha-cta__description div,

.zeisha-cta__description strong,

.zeisha-cta__description em,

.zeisha-cta__description code {

    font-family:
        "DM Sans",
        Arial,
        sans-serif !important;

    font-size:
        16px !important;

    font-weight:
        400 !important;

    font-style:
        normal !important;

    line-height:
        1.7 !important;

    letter-spacing:
        0 !important;

    word-spacing:
        0 !important;

    text-transform:
        none !important;

    color:
        rgba(245,241,232,.88) !important;

}


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

.zeisha-cta__description p {

    margin:
        0 !important;

    padding:
        0 !important;

}


/* =========================================================
   REMOVE PASTED TYPOGRAPHY
   ========================================================= */

.zeisha-cta__description code,
.zeisha-cta__description pre {

    font-family:
        "DM Sans",
        Arial,
        sans-serif !important;

    font-size:
        16px !important;

    font-weight:
        400 !important;

    font-style:
        normal !important;

    line-height:
        1.7 !important;

    white-space:
        normal !important;

    background:
        transparent !important;

    border:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

}


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

.zeisha-cta__actions {

    position:
        relative;

    display:
        flex !important;

    flex-direction:
        row !important;

    flex-wrap:
        nowrap !important;

    justify-content:
        center !important;

    align-items:
        center !important;

    gap:
        16px !important;

    margin:
        0 !important;

}


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

.zeisha-cta__button {

    width:
        auto !important;

    margin:
        0 !important;

}


.zeisha-cta__button
.elementor-button {

    position:
        relative;

    min-width:
        205px;

    min-height:
        58px;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    overflow:
        hidden;

    padding:
        18px 29px !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    font-family:
        "DM Sans",
        Arial,
        sans-serif !important;

    font-size:
        11px !important;

    font-weight:
        600 !important;

    line-height:
        1 !important;

    letter-spacing:
        .17em !important;

    text-transform:
        uppercase !important;

    transition:

        color
        .4s ease,

        background-color
        .4s ease,

        border-color
        .4s ease,

        transform
        .55s
        cubic-bezier(.19,1,.22,1),

        box-shadow
        .45s ease;

}


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

.zeisha-cta__button
.elementor-button-content-wrapper {

    position:
        relative;

    z-index:
        3;

}


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

.zeisha-cta__button--primary
.elementor-button {

    border:
        1px solid
        var(--zc-ivory) !important;

    background:
        var(--zc-ivory) !important;

    color:
        var(--zc-deep) !important;

}


/* =========================================================
   PRIMARY HOVER GOLD FILL
   ========================================================= */

.zeisha-cta__button--primary
.elementor-button::before {

    content:
        "";

    position:
        absolute;

    z-index:
        1;

    inset:
        0;

    background:
        var(--zc-gold);

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:

        transform
        .65s
        cubic-bezier(.19,1,.22,1);

}


.zeisha-cta__button--primary
.elementor-button:hover::before {

    transform:
        scaleX(1);

    transform-origin:
        left;

}


.zeisha-cta__button--primary
.elementor-button:hover {

    color:
        var(--zc-deep) !important;

    border-color:
        var(--zc-gold) !important;

    transform:
        translateY(-4px);

    box-shadow:

        0
        14px
        34px
        rgba(0,0,0,.18) !important;

}


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

.zeisha-cta__button--secondary
.elementor-button {

    border:

        1px solid
        rgba(245,241,232,.58) !important;

    background:

        rgba(245,241,232,.04) !important;

    color:
        var(--zc-ivory) !important;

}


/* =========================================================
   SECONDARY BUTTON HOVER FILL
   ========================================================= */

.zeisha-cta__button--secondary
.elementor-button::before {

    content:
        "";

    position:
        absolute;

    z-index:
        1;

    inset:
        0;

    background:
        rgba(245,241,232,.10);

    transform:
        scaleY(0);

    transform-origin:
        bottom;

    transition:

        transform
        .6s
        cubic-bezier(.19,1,.22,1);

}


.zeisha-cta__button--secondary
.elementor-button:hover::before {

    transform:
        scaleY(1);

}


.zeisha-cta__button--secondary
.elementor-button:hover {

    border-color:
        var(--zc-ivory) !important;

    color:
        var(--zc-ivory) !important;

    transform:
        translateY(-4px);

    box-shadow:

        0
        14px
        32px
        rgba(0,0,0,.14) !important;

}


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

.zeisha-cta__button
.elementor-button-text::after {

    content:
        "→";

    display:
        inline-block;

    margin-left:
        13px;

    font-size:
        15px;

    line-height:
        1;

    transition:

        transform
        .45s
        cubic-bezier(.19,1,.22,1);

}


.zeisha-cta__button
.elementor-button:hover
.elementor-button-text::after {

    transform:
        translateX(6px);

}


/* =========================================================
   BOTTOM GOLD DECORATION
   ========================================================= */

.zeisha-cta__actions::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        -34px;

    width:
        92px;

    height:
        1px;

    transform:
        translateX(-50%);

    background:

        linear-gradient(
            to right,
            transparent,
            rgba(183,155,108,.90),
            transparent
        );

}


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

@media (min-width:768px) and (max-width:1024px) {

    .zeisha-cta {

        min-height:
            560px;

        background-position:
            center center !important;

    }


    .zeisha-cta__shell {

        padding:

            88px
            40px
            90px

            !important;

    }


    .zeisha-cta__title
    .elementor-heading-title {

        font-size:
            clamp(50px,7vw,70px) !important;

    }


    /* DESCRIPTION ALWAYS 16PX */

    .zeisha-cta__description,
    .zeisha-cta__description * {

        font-family:
            "DM Sans",
            Arial,
            sans-serif !important;

        font-size:
            16px !important;

        line-height:
            1.65 !important;

    }

}


/* =========================================================
   MOBILE
   IPHONE + ANDROID
   ========================================================= */

@media (max-width:767px) {

    .zeisha-cta {

        min-height:
            610px;

        background-position:
            center center !important;

    }


    /* DARKER MOBILE OVERLAY FOR READABILITY */

    .zeisha-cta::before {

        background:

            linear-gradient(
                180deg,
                rgba(18,34,28,.64) 0%,
                rgba(18,34,28,.69) 45%,
                rgba(18,34,28,.78) 100%
            );

    }


    .zeisha-cta__shell {

        min-height:
            610px;

        padding:

            74px

            clamp(20px,6vw,28px)

            78px

            !important;

    }


    /* =====================================================
       EYEBROW
       ===================================================== */

    .zeisha-cta__eyebrow {

        margin-bottom:
            20px !important;

    }


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

    .zeisha-cta__title {

        width:
            min(100%,520px);

        margin-bottom:
            18px !important;

    }


    .zeisha-cta__title
    .elementor-heading-title {

        font-size:
            clamp(43px,12.5vw,57px) !important;

        line-height:
            .96 !important;

    }


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

    .zeisha-cta__description {

        width:
            min(100%,430px);

        margin-bottom:
            29px !important;

    }


    .zeisha-cta__description,
    .zeisha-cta__description * {

        font-family:
            "DM Sans",
            Arial,
            sans-serif !important;

        font-size:
            16px !important;

        line-height:
            1.65 !important;

    }


    /* =====================================================
       BUTTONS
       ===================================================== */

    .zeisha-cta__actions {

        width:
            min(100%,360px);

        flex-direction:
            column !important;

        gap:
            11px !important;

    }


    .zeisha-cta__button {

        width:
            100% !important;

    }


    .zeisha-cta__button
    .elementor-button {

        width:
            100% !important;

        min-width:
            0 !important;

        min-height:
            55px;

    }

}


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

@media (max-width:420px) {

    .zeisha-cta {

        min-height:
            590px;

    }


    .zeisha-cta__shell {

        min-height:
            590px;

        padding:

            68px
            18px
            72px

            !important;

    }


    .zeisha-cta__title
    .elementor-heading-title {

        font-size:
            clamp(40px,12vw,50px) !important;

    }


    /* DESCRIPTION NEVER BELOW 16PX */

    .zeisha-cta__description,
    .zeisha-cta__description * {

        font-size:
            16px !important;

    }


    .zeisha-cta__button
    .elementor-button {

        min-height:
            53px;

        padding:
            16px 19px !important;

        font-size:
            10px !important;

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .zeisha-cta *,
    .zeisha-cta *::before,
    .zeisha-cta *::after {

        animation:
            none !important;

        transition:
            none !important;

    }

}/* End custom CSS */