.elementor-16 .elementor-element.elementor-element-9334ea1{--display:flex;--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-16 .elementor-element.elementor-element-9334ea1:not(.elementor-motion-effects-element-type-background), .elementor-16 .elementor-element.elementor-element-9334ea1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://zeisaspaseminyakbali.com/wp-content/uploads/2026/10/background-spa.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-16 .elementor-element.elementor-element-5ed3845{--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:space-between;--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-16 .elementor-element.elementor-element-bfe0d5f{--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;--align-items:flex-start;--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-16 .elementor-element.elementor-element-b56367b{--display:flex;--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-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-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-16 .elementor-element.elementor-element-7fa50d2{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-16 .elementor-element.elementor-element-5d0f620 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:600;}.elementor-16 .elementor-element.elementor-element-5d0f620{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-16 .elementor-element.elementor-element-f0141d3{--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;--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 );}.elementor-16 .elementor-element.elementor-element-ac99c91{--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;--align-items:stretch;}.elementor-16 .elementor-element.elementor-element-8d8cd10{--display:flex;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-16 .elementor-element.elementor-element-5f778e9{--display:flex;}.elementor-16 .elementor-element.elementor-element-eb84949{--display:flex;}.elementor-16 .elementor-element.elementor-element-52c78f4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--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-16 .elementor-element.elementor-element-b7ece5f{--display:flex;--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-16 .elementor-element.elementor-element-422c776{--display:flex;--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-16 .elementor-element.elementor-element-9a47fba{--display:flex;}.elementor-16 .elementor-element.elementor-element-c26c7fd{--display:flex;}.elementor-16 .elementor-element.elementor-element-0411ceb{--display:flex;}.elementor-16 .elementor-element.elementor-element-eb8f6dd .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:600;}.elementor-16 .elementor-element.elementor-element-d7ee2ae{--display:flex;}.elementor-16 .elementor-element.elementor-element-c64bf7b{--display:flex;}.elementor-16 .elementor-element.elementor-element-f91cabc{--display:flex;}.elementor-16 .elementor-element.elementor-element-af3464b{--display:flex;}.elementor-16 .elementor-element.elementor-element-954120e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--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-16 .elementor-element.elementor-element-7ffcd1e{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--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-16 .elementor-element.elementor-element-78133d3{--display:flex;--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-16 .elementor-element.elementor-element-104ae24{--display:flex;}.elementor-16 .elementor-element.elementor-element-0bbd6e3{--display:flex;}.elementor-16 .elementor-element.elementor-element-4e5eb18{--display:flex;}.elementor-16 .elementor-element.elementor-element-8cac7d1{--display:flex;--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-16 .elementor-element.elementor-element-0f07a17{--display:flex;--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-16 .elementor-element.elementor-element-d288cf9{--display:flex;--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-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-16 .elementor-element.elementor-element-99744b0 .elementor-icon-wrapper{text-align:center;}.elementor-16 .elementor-element.elementor-element-32e894a{--display:flex;--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-16 .elementor-element.elementor-element-1efb6b8{--display:flex;--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-16 .elementor-element.elementor-element-c7a5096{--display:flex;--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-16 .elementor-element.elementor-element-6aa869f .elementor-icon-wrapper{text-align:center;}.elementor-16 .elementor-element.elementor-element-331e316{--display:flex;--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-16 .elementor-element.elementor-element-bf8bb73{--display:flex;--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-16 .elementor-element.elementor-element-a34f2ca{--display:flex;--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-16 .elementor-element.elementor-element-fee4a13 .elementor-icon-wrapper{text-align:center;}.elementor-16 .elementor-element.elementor-element-074fe74{--display:flex;--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-16 .elementor-element.elementor-element-091bb99{font-family:"Roboto", Sans-serif;font-weight:400;}.elementor-16 .elementor-element.elementor-element-62736a6{--display:flex;--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-16 .elementor-element.elementor-element-a54f9cb{--display:flex;--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-16 .elementor-element.elementor-element-4e1bd81 .elementor-icon-wrapper{text-align:center;}.elementor-16 .elementor-element.elementor-element-0688175{--display:flex;--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-16 .elementor-element.elementor-element-48be31b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-16 .elementor-element.elementor-element-8288b80{--display:flex;}.elementor-16 .elementor-element.elementor-element-16ed811{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-16 .elementor-element.elementor-element-910cf23{--display:flex;}.elementor-16 .elementor-element.elementor-element-0179e7c{--display:flex;}.elementor-16 .elementor-element.elementor-element-9aaf903{font-family:"DM Sans", Sans-serif;font-weight:400;}.elementor-16 .elementor-element.elementor-element-b9ff622{--display:flex;}.elementor-widget-gallery .elementor-gallery-item__title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-gallery .elementor-gallery-item__description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-gallery{--galleries-title-color-normal:var( --e-global-color-primary );--galleries-title-color-hover:var( --e-global-color-secondary );--galleries-pointer-bg-color-hover:var( --e-global-color-accent );--gallery-title-color-active:var( --e-global-color-secondary );--galleries-pointer-bg-color-active:var( --e-global-color-accent );}.elementor-widget-gallery .elementor-gallery-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-16 .elementor-element.elementor-element-3f6d0d7{--image-transition-duration:800ms;--overlay-transition-duration:800ms;--content-text-align:center;--content-padding:20px;--content-transition-duration:800ms;--content-transition-delay:800ms;}.elementor-16 .elementor-element.elementor-element-3f6d0d7 .e-gallery-item:hover .elementor-gallery-item__overlay, .elementor-16 .elementor-element.elementor-element-3f6d0d7 .e-gallery-item:focus .elementor-gallery-item__overlay{background-color:rgba(0,0,0,0.5);}.elementor-16 .elementor-element.elementor-element-71a5d34 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-16 .elementor-element.elementor-element-71a5d34 .elementor-button{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:500;fill:#2F5142;color:#2F5142;background-color:#61CE7000;}.elementor-16 .elementor-element.elementor-element-71a5d34{margin:-50px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-16 .elementor-element.elementor-element-7cc138b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--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-16 .elementor-element.elementor-element-cacd6ae{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--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-16 .elementor-element.elementor-element-373a1ce{--display:flex;--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-16 .elementor-element.elementor-element-68b33c9{--display:flex;--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-16 .elementor-element.elementor-element-7959a34 .ekit_testimonial_style_5 .elementskit-watermark-icon{bottom:30px;right:30px;}.elementor-16 .elementor-element.elementor-element-7959a34 .elementskit-testimonial-slider{--ekit_testimonial_left_right_spacing:15px;--ekit_testimonial_slidetoshow:2;}.elementor-16 .elementor-element.elementor-element-7959a34 .elementskit-stars > li > a, .elementor-16 .elementor-element.elementor-element-7959a34 .elementskit-stars > li > span{color:#fec42d;fill:#fec42d;}.elementor-16 .elementor-element.elementor-element-7959a34 .elementskit-stars > li:not(:last-child){margin-right:5px;}.elementor-16 .elementor-element.elementor-element-7959a34 .elementskit-testimonial-slider-block-style-three .elementskit-icon-content.commentor-badge::before{border-radius:50%;}.elementor-16 .elementor-element.elementor-element-7959a34 .elementskit-profile-info .elementskit-author-name{margin-bottom:0px;}.elementor-16 .elementor-element.elementor-element-7959a34 .elementskit-commentor-bio .elementskit-commentor-image > img{height:70px;width:70px;}.elementor-16 .elementor-element.elementor-element-908179b{--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-16 .elementor-element.elementor-element-68524ba{--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-16 .elementor-element.elementor-element-ed7d607{--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-16 .elementor-element.elementor-element-359bc18{--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-16 .elementor-element.elementor-element-1003a8e{--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-16 .elementor-element.elementor-element-d62e401{--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;}:root{--page-title-display:none;}@media(min-width:1025px){.elementor-16 .elementor-element.elementor-element-9334ea1:not(.elementor-motion-effects-element-type-background), .elementor-16 .elementor-element.elementor-element-9334ea1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:scroll;}}@media(max-width:1024px){.elementor-16 .elementor-element.elementor-element-7959a34 .elementskit-testimonial-slider{--ekit_testimonial_left_right_spacing:10px;}}@media(max-width:767px){.elementor-16 .elementor-element.elementor-element-7959a34 .elementskit-testimonial-slider{--ekit_testimonial_left_right_spacing:10px;}}/* Start custom CSS for container, class: .elementor-element-9334ea1 *//* ========================================================= ZEISHA SPA MANUAL ELEMENTOR HERO FINAL COMPACT VISUAL VERSION - RIGHT IMAGE SMALLER - FIX EYEBROW LINE - BUTTON EFFECTS - EL MESSIRI HEADINGS - DM SANS BODY - DESCRIPTION 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 SYSTEM ========================================================= */ .zeisha-hero { --zh-deep: #10251D; --zh-green: #2F5142; --zh-ivory: #F5F1E8; --zh-beige: #DDD3C3; --zh-sage: #98A995; --zh-gold: #B79B6C; } /* ========================================================= MAIN HERO ========================================================= */ .zeisha-hero { position: relative; width: 100%; max-width: 100%; min-height: 100vh; overflow: hidden; isolation: isolate; color: var(--zh-ivory); font-family: "DM Sans", Arial, sans-serif !important; } /* ========================================================= BOX MODEL ========================================================= */ .zeisha-hero *, .zeisha-hero *::before, .zeisha-hero *::after { box-sizing: border-box; } /* ========================================================= ELEMENTOR WIDTH SAFETY ========================================================= */ .zeisha-hero .e-con, .zeisha-hero .e-con-inner, .zeisha-hero__shell, .zeisha-hero__left, .zeisha-hero__visual, .zeisha-hero__frame, .zeisha-hero__title, .zeisha-hero__description, .zeisha-hero__actions { min-width: 0 !important; max-width: 100%; } /* ========================================================= CINEMATIC BACKGROUND OVERLAY ========================================================= */ .zeisha-hero::before { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; background: linear-gradient( 90deg, rgba(8,28,21,.94) 0%, rgba(12,35,26,.88) 28%, rgba(13,33,25,.64) 52%, rgba(12,29,23,.23) 76%, rgba(9,21,17,.13) 100% ), linear-gradient( 180deg, rgba(10,24,19,.08), rgba(10,24,19,.28) ); } /* ========================================================= OUTER BORDER ========================================================= */ .zeisha-hero::after { content: ""; position: absolute; z-index: 2; inset: 14px; border: 1px solid rgba(221,211,195,.18); pointer-events: none; } /* ========================================================= MAIN SHELL ========================================================= */ .zeisha-hero__shell { position: relative; z-index: 3; width: min(100%,1800px); min-height: 100vh; margin: 0 auto !important; padding: clamp(42px,4.5vw,82px) clamp(55px,5vw,95px) !important; display: grid !important; grid-template-columns: minmax(0,1.15fr) minmax(340px,.85fr); align-items: center; gap: clamp(55px,6vw,105px); } /* ========================================================= LEFT AREA ========================================================= */ .zeisha-hero__left { position: relative; width: 100%; max-width: 760px; } /* ========================================================= BRAND ========================================================= */ .zeisha-hero__brand { position: relative; margin-bottom: clamp(60px,7vw,105px) !important; } /* ========================================================= BRAND NAME ========================================================= */ .zeisha-hero__brand-name .elementor-heading-title { margin: 0 !important; padding: 0 !important; font-family: "El Messiri", Georgia, serif !important; font-size: 31px !important; font-weight: 500 !important; line-height: 1 !important; letter-spacing: .16em !important; color: var(--zh-ivory) !important; } /* ========================================================= BRAND SUB ========================================================= */ .zeisha-hero__brand-sub, .zeisha-hero__brand-sub *, .zeisha-hero__brand-sub p { font-family: "DM Sans", Arial, sans-serif !important; font-size: 9px !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: .25em !important; text-transform: uppercase !important; color: rgba(245,241,232,.66) !important; } .zeisha-hero__brand-sub p { margin: 9px 0 0 !important; } /* ========================================================= BRAND LINE ========================================================= */ .zeisha-hero__brand::after { content: ""; display: block; width: 38px; height: 1px; margin-top: 17px; background: var(--zh-gold); } /* ========================================================= EYEBROW WRAPPER ========================================================= */ .zeisha-hero__eyebrow { position: relative; width: fit-content; max-width: 100%; margin: 0 0 27px 0 !important; padding: 0 !important; } /* REMOVE OLD LINE */ .zeisha-hero__eyebrow::before { content: none !important; display: none !important; } /* ========================================================= EYEBROW FLEX ========================================================= */ .zeisha-hero__eyebrow .elementor-widget-container { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 18px !important; width: 100%; } /* ========================================================= EYEBROW SAFE LINE ========================================================= */ .zeisha-hero__eyebrow .elementor-widget-container::before { content: ""; display: block; flex: 0 0 45px; width: 45px; min-width: 45px; max-width: 45px; height: 1px; background: var(--zh-gold); transition: width .55s cubic-bezier(.19,1,.22,1), flex-basis .55s cubic-bezier(.19,1,.22,1); } .zeisha-hero__left:hover .zeisha-hero__eyebrow .elementor-widget-container::before { flex-basis: 58px; width: 58px; min-width: 58px; max-width: 58px; } /* ========================================================= EYEBROW TEXT ========================================================= */ .zeisha-hero__eyebrow .elementor-heading-title { display: block !important; width: auto !important; max-width: calc(100% - 63px); margin: 0 !important; padding: 0 !important; white-space: normal !important; font-family: "DM Sans", Arial, sans-serif !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1.35 !important; letter-spacing: .23em !important; text-transform: uppercase !important; color: var(--zh-beige) !important; } /* ========================================================= MAIN TITLE ========================================================= */ .zeisha-hero__title { width: min(100%,720px); margin: 0 0 32px 0 !important; } .zeisha-hero__title .elementor-heading-title { margin: 0 !important; padding: 0 !important; font-family: "El Messiri", Georgia, serif !important; font-size: clamp(72px,7vw,124px) !important; font-weight: 400 !important; line-height: .92 !important; letter-spacing: -.045em !important; color: var(--zh-ivory) !important; } /* ========================================================= DESCRIPTION ========================================================= */ .zeisha-hero__description { width: min(100%,550px); margin: 0 0 34px 92px !important; padding-left: 24px; border-left: 1px solid rgba(221,211,195,.24); } /* ========================================================= DESCRIPTION — DM SANS 16PX ========================================================= */ .zeisha-hero__description, .zeisha-hero__description *, .zeisha-hero__description .elementor-widget-container, .zeisha-hero__description p, .zeisha-hero__description span, .zeisha-hero__description div { font-family: "DM Sans", Arial, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.8 !important; letter-spacing: 0 !important; word-spacing: 0 !important; color: rgba(245,241,232,.76) !important; } .zeisha-hero__description p { margin: 0 !important; } /* ========================================================= ACTIONS ========================================================= */ .zeisha-hero__actions { position: relative; margin-left: 92px; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; gap: 32px !important; } /* ========================================================= BUTTON WRAPPER ========================================================= */ .zeisha-hero__button { width: auto !important; margin: 0 !important; } /* ========================================================= BUTTON BASE ========================================================= */ .zeisha-hero__button .elementor-button { position: relative; z-index: 1; min-height: 58px; display: inline-flex !important; align-items: center !important; justify-content: center !important; overflow: hidden; border-radius: 0 !important; box-shadow: none !important; font-family: "DM Sans", Arial, sans-serif !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: .18em !important; text-transform: uppercase !important; transition: transform .5s cubic-bezier(.19,1,.22,1), box-shadow .45s ease, color .4s ease, border-color .4s ease; } /* ========================================================= BUTTON CONTENT ========================================================= */ .zeisha-hero__button .elementor-button-content-wrapper { position: relative; z-index: 5; } .zeisha-hero__button .elementor-button-text { position: relative; z-index: 5; color: inherit !important; } /* ========================================================= PRIMARY BUTTON ========================================================= */ .zeisha-hero__button--primary .elementor-button { min-width: 225px; padding: 19px 27px !important; border: 1px solid var(--zh-ivory) !important; background: var(--zh-ivory) !important; color: var(--zh-deep) !important; } /* ========================================================= PRIMARY GOLD SWEEP ========================================================= */ .zeisha-hero__button--primary .elementor-button::before { content: ""; position: absolute; z-index: 1; inset: 0; background: var(--zh-gold); transform: scaleX(0); transform-origin: right center; transition: transform .65s cubic-bezier(.19,1,.22,1); } /* ========================================================= PRIMARY SHINE ========================================================= */ .zeisha-hero__button--primary .elementor-button::after { content: ""; position: absolute; z-index: 2; top: 0; left: -70px; width: 45px; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.3), transparent ); transform: skewX(-18deg); transition: left .8s cubic-bezier(.19,1,.22,1); } /* ========================================================= PRIMARY HOVER ========================================================= */ .zeisha-hero__button--primary .elementor-button:hover { transform: translateY(-4px); border-color: var(--zh-gold) !important; color: var(--zh-deep) !important; box-shadow: 0 16px 34px rgba(0,0,0,.19) !important; } .zeisha-hero__button--primary .elementor-button:hover::before { transform: scaleX(1); transform-origin: left center; } .zeisha-hero__button--primary .elementor-button:hover::after { left: calc(100% + 30px); } /* ========================================================= PRIMARY ARROW ========================================================= */ .zeisha-hero__button--primary .elementor-button-text::after { content: "→"; display: inline-block; margin-left: 25px; font-size: 16px; letter-spacing: 0; transition: transform .45s cubic-bezier(.19,1,.22,1); } .zeisha-hero__button--primary .elementor-button:hover .elementor-button-text::after { transform: translateX(7px); } /* ========================================================= SECONDARY BUTTON ========================================================= */ .zeisha-hero__button--secondary .elementor-button { min-width: 170px; min-height: 50px; padding: 16px 3px !important; border: 0 !important; background: transparent !important; color: var(--zh-ivory) !important; } /* ========================================================= SECONDARY SOFT FILL ========================================================= */ .zeisha-hero__button--secondary .elementor-button::before { content: ""; position: absolute; z-index: 1; inset: 0; background: rgba(245,241,232,.08); transform: scaleY(0); transform-origin: bottom; transition: transform .55s cubic-bezier(.19,1,.22,1); } /* ========================================================= SECONDARY UNDERLINE ========================================================= */ .zeisha-hero__button--secondary .elementor-button::after { content: ""; position: absolute; z-index: 4; left: 0; bottom: 3px; width: 100%; height: 1px; background: rgba(245,241,232,.48); transform: scaleX(.72); transform-origin: left; transition: transform .55s cubic-bezier(.19,1,.22,1), background .35s ease; } /* ========================================================= SECONDARY HOVER ========================================================= */ .zeisha-hero__button--secondary .elementor-button:hover { transform: translateY(-3px); color: var(--zh-ivory) !important; } .zeisha-hero__button--secondary .elementor-button:hover::before { transform: scaleY(1); } .zeisha-hero__button--secondary .elementor-button:hover::after { transform: scaleX(1); background: var(--zh-gold); } /* ========================================================= SECONDARY ARROW ========================================================= */ .zeisha-hero__button--secondary .elementor-button-text::after { content: "↗"; display: inline-block; margin-left: 12px; font-size: 13px; letter-spacing: 0; opacity: .65; transition: transform .45s cubic-bezier(.19,1,.22,1), opacity .35s ease; } .zeisha-hero__button--secondary .elementor-button:hover .elementor-button-text::after { transform: translate(4px,-4px); opacity: 1; } /* ========================================================= CLICK EFFECT ========================================================= */ .zeisha-hero__button .elementor-button:active { transform: scale(.97); transition-duration: .12s; } /* ========================================================= KEYBOARD FOCUS ========================================================= */ .zeisha-hero__button .elementor-button:focus-visible { outline: 1px solid var(--zh-gold); outline-offset: 5px; } /* ========================================================= RIGHT VISUAL REDUCED SIZE ========================================================= */ .zeisha-hero__visual { position: relative; width: 100%; max-width: 545px; justify-self: end; padding: 30px 28px 23px !important; border: 1px solid rgba(183,155,108,.40); } /* ========================================================= DECORATIVE FRAME ========================================================= */ .zeisha-hero__visual::before { content: ""; position: absolute; z-index: 0; top: -29px; left: -31px; width: 55%; height: 80px; border-top: 1px solid rgba(183,155,108,.42); border-left: 1px solid rgba(183,155,108,.42); pointer-events: none; } /* ========================================================= IMAGE FRAME ========================================================= */ .zeisha-hero__frame { position: relative; z-index: 2; width: 100%; overflow: hidden; } /* ========================================================= IMAGE WIDGET ========================================================= */ .zeisha-hero__image { width: 100%; margin: 0 !important; } .zeisha-hero__image .elementor-widget-container { width: 100%; overflow: hidden; } /* ========================================================= ACTUAL IMAGE SMALLER ========================================================= */ .zeisha-hero__image img { display: block; width: 100% !important; height: clamp(340px,30vw,475px) !important; max-width: none !important; object-fit: cover; object-position: center center; filter: saturate(.88) contrast(1.04) brightness(.88); transform: scale(1.01); transition: transform 1.2s cubic-bezier(.19,1,.22,1), filter .7s ease; } /* ========================================================= IMAGE HOVER ========================================================= */ .zeisha-hero__visual:hover .zeisha-hero__image img { transform: scale(1.045); filter: saturate(.94) contrast(1.04) brightness(.94); } /* ========================================================= CAPTION ========================================================= */ .zeisha-hero__caption { position: relative; z-index: 2; padding: 19px 0 2px; } /* ========================================================= CAPTION SMALL ========================================================= */ .zeisha-hero__caption-small, .zeisha-hero__caption-small *, .zeisha-hero__caption-small p { font-family: "DM Sans", Arial, sans-serif !important; font-size: 8px !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: .20em !important; text-transform: uppercase !important; color: rgba(245,241,232,.48) !important; } .zeisha-hero__caption-small p { margin: 0 !important; } /* ========================================================= CAPTION TITLE ========================================================= */ .zeisha-hero__caption-title .elementor-heading-title { margin: 5px 0 0 !important; padding: 0 !important; font-family: "El Messiri", Georgia, serif !important; font-size: 36px !important; font-weight: 400 !important; line-height: 1 !important; color: var(--zh-ivory) !important; } /* ========================================================= LAPTOP 961PX — 1280PX ========================================================= */ @media (min-width:961px) and (max-width:1280px) { .zeisha-hero__shell { grid-template-columns: minmax(0,1.12fr) minmax(315px,.78fr); gap: clamp(35px,4vw,55px); padding: 40px clamp(35px,4vw,50px) !important; } .zeisha-hero__brand { margin-bottom: 52px !important; } .zeisha-hero__title .elementor-heading-title { font-size: clamp(64px,6.6vw,88px) !important; } .zeisha-hero__description { margin-left: 45px !important; } .zeisha-hero__actions { margin-left: 45px; gap: 22px !important; } /* SMALLER RIGHT VISUAL */ .zeisha-hero__visual { max-width: 440px; padding: 25px 23px 19px !important; } .zeisha-hero__visual::before { top: -23px; left: -25px; height: 65px; } .zeisha-hero__image img { height: clamp(315px,31vw,405px) !important; } .zeisha-hero__caption-title .elementor-heading-title { font-size: 31px !important; } .zeisha-hero__button--primary .elementor-button { min-width: 205px; } } /* ========================================================= TABLET ========================================================= */ @media (min-width:768px) and (max-width:960px) { .zeisha-hero { min-height: auto; } .zeisha-hero__shell { min-height: auto; display: flex !important; flex-direction: column !important; padding: 50px 42px 65px !important; } .zeisha-hero__left { width: 100%; max-width: 680px; } .zeisha-hero__brand { margin-bottom: 60px !important; } .zeisha-hero__title .elementor-heading-title { font-size: clamp(66px,9.5vw,84px) !important; } .zeisha-hero__description, .zeisha-hero__description * { font-size: 16px !important; } /* VISUAL SMALLER ON TABLET */ .zeisha-hero__visual { width: min(100%,500px); max-width: 500px; margin-top: 48px; align-self: center; padding: 27px 24px 20px !important; } .zeisha-hero__image img { height: 390px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px) { .zeisha-hero { min-height: auto; } .zeisha-hero::after { inset: 8px; } .zeisha-hero__shell { min-height: auto; display: flex !important; flex-direction: column !important; padding: 34px 22px 50px !important; } /* ===================================================== BRAND ===================================================== */ .zeisha-hero__brand { margin-bottom: 50px !important; } .zeisha-hero__brand-name .elementor-heading-title { font-size: 27px !important; } /* ===================================================== EYEBROW ===================================================== */ .zeisha-hero__eyebrow { width: 100%; margin-bottom: 20px !important; } .zeisha-hero__eyebrow .elementor-widget-container { gap: 13px !important; } .zeisha-hero__eyebrow .elementor-widget-container::before { flex-basis: 32px; width: 32px; min-width: 32px; max-width: 32px; } .zeisha-hero__eyebrow .elementor-heading-title { max-width: calc(100% - 45px); font-size: 9px !important; letter-spacing: .18em !important; } /* ===================================================== TITLE ===================================================== */ .zeisha-hero__title .elementor-heading-title { font-size: clamp(55px,16vw,74px) !important; } /* ===================================================== DESCRIPTION ===================================================== */ .zeisha-hero__description { width: 100%; margin: 0 0 28px 0 !important; padding-left: 15px; } .zeisha-hero__description, .zeisha-hero__description * { font-size: 16px !important; } /* ===================================================== BUTTONS ===================================================== */ .zeisha-hero__actions { margin-left: 0; width: 100%; flex-direction: column !important; align-items: stretch !important; gap: 11px !important; } .zeisha-hero__button { width: 100% !important; } .zeisha-hero__button .elementor-button { width: 100% !important; min-width: 0 !important; } .zeisha-hero__button--primary .elementor-button { min-height: 56px; } .zeisha-hero__button--secondary .elementor-button { min-height: 52px; border: 1px solid rgba(245,241,232,.28) !important; padding: 17px 20px !important; } /* ===================================================== RIGHT VISUAL — SMALLER MOBILE ===================================================== */ .zeisha-hero__visual { width: min(92%,430px); max-width: 430px; margin: 46px auto 0; padding: 20px 17px 16px !important; align-self: center; } .zeisha-hero__visual::before { top: -19px; left: -17px; height: 52px; } .zeisha-hero__image img { height: clamp(280px,80vw,370px) !important; } .zeisha-hero__caption { padding-top: 16px; } .zeisha-hero__caption-title .elementor-heading-title { font-size: 30px !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:420px) { .zeisha-hero__shell { padding: 30px 18px 44px !important; } .zeisha-hero__title .elementor-heading-title { font-size: clamp(50px,15.5vw,64px) !important; } .zeisha-hero__description, .zeisha-hero__description * { font-size: 16px !important; } .zeisha-hero__button .elementor-button { font-size: 9px !important; } .zeisha-hero__visual { width: 94%; padding: 17px 14px 14px !important; } .zeisha-hero__image img { height: clamp(260px,78vw,330px) !important; } .zeisha-hero__caption-title .elementor-heading-title { font-size: 27px !important; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion:reduce) { .zeisha-hero *, .zeisha-hero *::before, .zeisha-hero *::after { animation: none !important; transition: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-52c78f4 *//* ========================================================= ZEISHA SPA WHY ZEISHA — WHITE COMPACT EDITORIAL HIGH READABILITY VERSION EL MESSIRI + DM SANS ========================================================= */ /* ========================================================= 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 SYSTEM ========================================================= */ .zeisha-why { --zw-green: #2F5142; --zw-deep: #1D3028; --zw-sage: #98A995; --zw-ivory: #F5F1E8; --zw-beige: #DDD3C3; --zw-gold: #B79B6C; --zw-text: #262A27; --zw-intro-text: #4A4F4B; --zw-body-text: #464C48; --zw-white: #FFFFFF; --zw-porcelain: #FAF8F3; } /* ========================================================= SECTION ========================================================= */ .zeisha-why { position: relative; width: 100%; overflow: hidden; isolation: isolate; background: var(--zw-white) !important; color: var(--zw-text); font-family: "DM Sans", sans-serif !important; } /* ========================================================= FORCE DM SANS ========================================================= */ .zeisha-why p, .zeisha-why span, .zeisha-why a, .zeisha-why button, .zeisha-why .elementor-widget-container { font-family: "DM Sans", sans-serif !important; } /* ========================================================= BACKGROUND WORD ========================================================= */ .zeisha-why::before { content: "WHY"; position: absolute; z-index: 0; top: -70px; right: -20px; font-family: "El Messiri", serif !important; font-size: clamp(150px, 15vw, 270px); font-weight: 400; line-height: 1; letter-spacing: -.06em; color: rgba(47,81,66,.022); pointer-events: none; user-select: none; } /* ========================================================= TOP GOLD GUIDE ========================================================= */ .zeisha-why::after { content: ""; position: absolute; z-index: 1; top: 0; left: clamp(24px,6vw,95px); width: 1px; height: 64px; background: linear-gradient( to bottom, rgba(183,155,108,.72), rgba(183,155,108,0) ); pointer-events: none; } /* ========================================================= MAIN SHELL ========================================================= */ .zeisha-why__shell { position: relative; z-index: 2; width: min(100%,1540px); margin: 0 auto !important; padding: clamp(70px,6vw,95px) clamp(36px,6vw,92px) clamp(72px,6vw,94px) !important; } /* ========================================================= HEADER ========================================================= */ .zeisha-why__header { display: grid !important; grid-template-columns: minmax(0,1.4fr) minmax(260px,.60fr); grid-template-areas: "eyebrow eyebrow" "title intro"; align-items: end; column-gap: clamp(44px,6vw,90px); row-gap: 10px; margin-bottom: clamp(42px,4vw,58px); } /* ========================================================= EYEBROW ========================================================= */ .zeisha-why__eyebrow { grid-area: eyebrow; position: relative; margin: 0 0 8px 0 !important; padding-top: 12px; } .zeisha-why__eyebrow::before { content: ""; position: absolute; top: 0; left: 0; width: 38px; height: 1px; background: var(--zw-gold); } .zeisha-why__eyebrow .elementor-heading-title { margin: 0 !important; padding: 0 !important; font-family: "DM Sans", sans-serif !important; font-size: 9px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: .21em !important; text-transform: uppercase !important; color: var(--zw-green) !important; } /* ========================================================= MAIN TITLE ========================================================= */ .zeisha-why__title { grid-area: title; width: min(100%,670px); margin: 0 !important; } .zeisha-why__title .elementor-heading-title { margin: 0 !important; padding: 0 !important; font-family: "El Messiri", serif !important; font-size: clamp(58px,5.4vw,86px) !important; font-weight: 400 !important; line-height: .93 !important; letter-spacing: -.04em !important; color: var(--zw-deep) !important; } /* ========================================================= INTRO DESCRIPTION LEBIH GELAP + LEBIH MUDAH DIBACA ========================================================= */ .zeisha-why__intro { grid-area: intro; align-self: end; width: min(100%,350px); margin: 0 0 4px 0 !important; padding-left: 19px; border-left: 1px solid rgba(47,81,66,.18); } .zeisha-why__intro .elementor-widget-container, .zeisha-why__intro p { margin: 0 !important; font-family: "DM Sans", sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.68 !important; letter-spacing: 0 !important; color: var(--zw-intro-text) !important; } /* ========================================================= FEATURE GRID ========================================================= */ .zeisha-why__grid { position: relative; display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; gap: clamp(34px,4vw,58px); } /* ========================================================= ITEM ========================================================= */ .zeisha-why__item { position: relative; min-width: 0; } .zeisha-why__item--01 { margin-top: 0; } .zeisha-why__item--02 { margin-top: clamp(26px,2.5vw,38px); } .zeisha-why__item--03 { margin-top: clamp(8px,1vw,16px); } /* ========================================================= NUMBER ========================================================= */ .zeisha-why__number { position: relative; margin: 0 0 12px 0 !important; padding-left: 48px; } .zeisha-why__number::before { content: ""; position: absolute; top: 50%; left: 0; width: 32px; height: 1px; background: var(--zw-gold); transform: translateY(-50%); transition: width .55s cubic-bezier(.19,1,.22,1); } .zeisha-why__number .elementor-widget-container, .zeisha-why__number p { margin: 0 !important; font-family: "DM Sans", sans-serif !important; font-size: 8px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: .17em !important; color: var(--zw-green) !important; } /* ========================================================= MEDIA WRAPPER ========================================================= */ .zeisha-why__media { position: relative; width: 100%; overflow: visible; isolation: isolate; } /* ========================================================= IMAGE WIDGET ========================================================= */ .zeisha-why__image { position: relative; width: 100%; margin: 0 !important; overflow: hidden; } .zeisha-why__image .elementor-widget-container { position: relative; width: 100%; overflow: hidden; background: var(--zw-porcelain); } .zeisha-why__image img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; border-radius: 0 !important; filter: saturate(.82) contrast(1.025) brightness(.98); transform: scale(1.025); transition: transform 1.2s cubic-bezier(.19,1,.22,1), filter .7s ease; } /* ========================================================= IMAGE 01 ========================================================= */ .zeisha-why__item--01 .zeisha-why__image .elementor-widget-container { aspect-ratio: 4 / 4.75; clip-path: polygon( 0 0, 89% 0, 100% 9%, 100% 100%, 0 100% ); } .zeisha-why__item--01 .zeisha-why__media::after { content: ""; position: absolute; z-index: -1; top: 11px; left: 11px; right: -9px; bottom: -9px; border: 1px solid rgba(183,155,108,.46); transition: transform .7s cubic-bezier(.19,1,.22,1); } /* ========================================================= IMAGE 02 ========================================================= */ .zeisha-why__item--02 .zeisha-why__image .elementor-widget-container { aspect-ratio: 5 / 4.05; clip-path: polygon( 7% 0, 100% 0, 100% 88%, 92% 100%, 0 100%, 0 11% ); } .zeisha-why__item--02 .zeisha-why__media::after { content: ""; position: absolute; z-index: -1; top: -9px; left: -9px; right: 10px; bottom: 10px; border: 1px solid rgba(152,169,149,.52); transition: transform .7s cubic-bezier(.19,1,.22,1); } /* ========================================================= IMAGE 03 ========================================================= */ .zeisha-why__item--03 .zeisha-why__image .elementor-widget-container { aspect-ratio: 4 / 4.75; clip-path: polygon( 0 0, 100% 0, 100% 100%, 11% 100%, 0 91% ); } .zeisha-why__item--03 .zeisha-why__media::after { content: ""; position: absolute; z-index: -1; top: 10px; left: -9px; right: 10px; bottom: -9px; border: 1px solid rgba(183,155,108,.44); transition: transform .7s cubic-bezier(.19,1,.22,1); } /* ========================================================= IMAGE OVERLAY ========================================================= */ .zeisha-why__image .elementor-widget-container::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 180deg, rgba(29,48,40,0) 55%, rgba(29,48,40,.065) 100% ); } /* ========================================================= ITEM TITLE ========================================================= */ .zeisha-why__item-title { position: relative; margin: clamp(20px,1.8vw,27px) 0 0 0 !important; padding-top: 13px; } /* BASE DIVIDER */ .zeisha-why__item-title::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--zw-beige); } /* ACTIVE DIVIDER */ .zeisha-why__item-title::after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 1px; background: var(--zw-green); transition: width .65s cubic-bezier(.19,1,.22,1); } /* ========================================================= ITEM TITLE FONT ========================================================= */ .zeisha-why__item-title .elementor-heading-title { margin: 0 !important; padding: 0 !important; font-family: "El Messiri", serif !important; font-size: clamp(25px,2vw,34px) !important; font-weight: 400 !important; line-height: 1.05 !important; letter-spacing: -.024em !important; color: var(--zw-deep) !important; transition: transform .55s cubic-bezier(.19,1,.22,1), color .4s ease; } /* ========================================================= ITEM DESCRIPTION LEBIH GELAP + LEBIH TEGAS ========================================================= */ .zeisha-why__desc { width: min(100%,355px); margin: 10px 0 0 0 !important; } .zeisha-why__desc .elementor-widget-container, .zeisha-why__desc p { margin: 0 !important; font-family: "DM Sans", sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.65 !important; letter-spacing: 0 !important; color: var(--zw-body-text) !important; } /* ========================================================= HOVER ========================================================= */ .zeisha-why__item:hover .zeisha-why__number::before { width: 46px; } .zeisha-why__item:hover .zeisha-why__item-title::after { width: 66px; } .zeisha-why__item:hover .zeisha-why__item-title .elementor-heading-title { transform: translateX(4px); color: var(--zw-green) !important; } .zeisha-why__item:hover .zeisha-why__image img { transform: scale(1.06); filter: saturate(.88) contrast(1.025) brightness(1); } /* ========================================================= FRAME HOVER ========================================================= */ .zeisha-why__item--01:hover .zeisha-why__media::after { transform: translate(-4px,4px); } .zeisha-why__item--02:hover .zeisha-why__media::after { transform: translate(4px,-4px); } .zeisha-why__item--03:hover .zeisha-why__media::after { transform: translate(4px,4px); } /* ========================================================= LAPTOP ========================================================= */ @media (max-width: 1250px) { .zeisha-why__shell { padding: 72px clamp(38px,5vw,64px) 76px !important; } .zeisha-why__header { margin-bottom: 45px; } .zeisha-why__grid { gap: 32px; } .zeisha-why__title .elementor-heading-title { font-size: clamp(54px,5.6vw,76px) !important; } } /* ========================================================= TABLET ========================================================= */ @media (min-width: 768px) and (max-width: 1024px) { .zeisha-why__shell { padding: 58px clamp(26px,4vw,38px) 62px !important; } .zeisha-why__header { grid-template-columns: minmax(0,1.25fr) minmax(210px,.75fr); column-gap: 32px; margin-bottom: 38px; } .zeisha-why__title .elementor-heading-title { font-size: clamp(46px,6vw,59px) !important; } /* INTRO TABLET */ .zeisha-why__intro .elementor-widget-container, .zeisha-why__intro p { font-size: 14px !important; font-weight: 400 !important; line-height: 1.62 !important; color: var(--zw-intro-text) !important; } .zeisha-why__grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; } .zeisha-why__item--02 { margin-top: 26px; } .zeisha-why__item--03 { margin-top: 8px; } .zeisha-why__number { padding-left: 34px; margin-bottom: 9px !important; } .zeisha-why__number::before { width: 24px; } .zeisha-why__item-title { margin-top: 18px !important; padding-top: 11px; } .zeisha-why__item-title .elementor-heading-title { font-size: clamp(20px,2.7vw,26px) !important; } /* DESCRIPTION TABLET */ .zeisha-why__desc { margin-top: 8px !important; } .zeisha-why__desc .elementor-widget-container, .zeisha-why__desc p { font-size: 14px !important; font-weight: 400 !important; line-height: 1.62 !important; color: var(--zw-body-text) !important; } } /* ========================================================= MOBILE IPHONE + ANDROID ========================================================= */ @media (max-width: 767px) { .zeisha-why::before { font-size: 115px; top: -15px; right: -12px; } .zeisha-why__shell { padding: 56px clamp(21px,6vw,28px) 62px !important; } /* HEADER */ .zeisha-why__header { display: block !important; margin-bottom: 38px; } .zeisha-why__eyebrow { margin-bottom: 20px !important; } .zeisha-why__title .elementor-heading-title { font-size: clamp(44px,13vw,57px) !important; line-height: .95 !important; } /* INTRO MOBILE */ .zeisha-why__intro { width: min(95%,390px); margin-top: 20px !important; padding-left: 14px; } .zeisha-why__intro .elementor-widget-container, .zeisha-why__intro p { font-size: 14px !important; font-weight: 400 !important; line-height: 1.62 !important; color: var(--zw-intro-text) !important; } /* ITEMS */ .zeisha-why__grid { display: block !important; } .zeisha-why__item, .zeisha-why__item--01, .zeisha-why__item--02, .zeisha-why__item--03 { width: min(88vw,420px); margin: 0 auto 44px !important; } .zeisha-why__item:last-child { margin-bottom: 0 !important; } /* MOBILE IMAGE SHAPES */ .zeisha-why__item--01 .zeisha-why__image .elementor-widget-container { aspect-ratio: 4 / 4.45; } .zeisha-why__item--02 .zeisha-why__image .elementor-widget-container { aspect-ratio: 5 / 3.75; } .zeisha-why__item--03 .zeisha-why__image .elementor-widget-container { aspect-ratio: 4 / 4.45; } .zeisha-why__number { margin-bottom: 10px !important; } .zeisha-why__item-title { margin-top: 19px !important; padding-top: 11px; } .zeisha-why__item-title .elementor-heading-title { font-size: 26px !important; } /* DESCRIPTION MOBILE */ .zeisha-why__desc { margin-top: 8px !important; } .zeisha-why__desc .elementor-widget-container, .zeisha-why__desc p { font-size: 13px !important; font-weight: 400 !important; line-height: 1.62 !important; color: var(--zw-body-text) !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .zeisha-why__shell { padding-top: 52px !important; padding-bottom: 56px !important; } .zeisha-why__title .elementor-heading-title { font-size: clamp(42px,12.7vw,53px) !important; } .zeisha-why__item { width: 87vw; margin-bottom: 40px !important; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 370px) { .zeisha-why__item-title .elementor-heading-title { font-size: 23px !important; } .zeisha-why__desc .elementor-widget-container, .zeisha-why__desc p { font-size: 12.5px !important; line-height: 1.6 !important; } } /* ========================================================= ACCESSIBILITY ========================================================= */ @media (prefers-reduced-motion: reduce) { .zeisha-why *, .zeisha-why *::before, .zeisha-why *::after { transition: none !important; animation: none !important; } } /* ========================================================= ZEISHA SPA WHY ZEISHA FINAL DESCRIPTION TYPOGRAPHY FIX - DM SANS - 16PX ALL DEVICES - OVERRIDE ELEMENTOR INLINE TYPOGRAPHY ========================================================= */ /* ========================================================= INTRO DESCRIPTION RIGHT SIDE TOP DESCRIPTION ========================================================= */ .zeisha-why .zeisha-why__intro, .zeisha-why .zeisha-why__intro .elementor-widget-container, .zeisha-why .zeisha-why__intro p, .zeisha-why .zeisha-why__intro span, .zeisha-why .zeisha-why__intro div, .zeisha-why .zeisha-why__intro strong, .zeisha-why .zeisha-why__intro b, .zeisha-why .zeisha-why__intro em, .zeisha-why .zeisha-why__intro i, .zeisha-why .zeisha-why__intro code { font-family: "DM Sans", Arial, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.68 !important; letter-spacing: 0 !important; word-spacing: 0 !important; text-transform: none !important; color: #4A4F4B !important; } /* ========================================================= REMOVE DEFAULT MARGINS FROM INTRO ========================================================= */ .zeisha-why .zeisha-why__intro p { margin: 0 !important; padding: 0 !important; } /* ========================================================= THREE ITEM DESCRIPTIONS ========================================================= */ .zeisha-why .zeisha-why__desc, .zeisha-why .zeisha-why__desc .elementor-widget-container, .zeisha-why .zeisha-why__desc p, .zeisha-why .zeisha-why__desc span, .zeisha-why .zeisha-why__desc div, .zeisha-why .zeisha-why__desc strong, .zeisha-why .zeisha-why__desc b, .zeisha-why .zeisha-why__desc em, .zeisha-why .zeisha-why__desc i, .zeisha-why .zeisha-why__desc code { font-family: "DM Sans", Arial, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.65 !important; letter-spacing: 0 !important; word-spacing: 0 !important; text-transform: none !important; color: #464C48 !important; } /* ========================================================= REMOVE DEFAULT MARGINS ========================================================= */ .zeisha-why .zeisha-why__desc p { margin: 0 !important; padding: 0 !important; } /* ========================================================= FIX IF TEXT WAS PASTED AS CODE / PRE ========================================================= */ .zeisha-why .zeisha-why__intro code, .zeisha-why .zeisha-why__intro pre, .zeisha-why .zeisha-why__desc code, .zeisha-why .zeisha-why__desc pre { font-family: "DM Sans", Arial, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.65 !important; letter-spacing: 0 !important; white-space: normal !important; background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; } /* ========================================================= TABLET KEEP 16PX ========================================================= */ @media (min-width: 768px) and (max-width: 1024px) { .zeisha-why .zeisha-why__intro, .zeisha-why .zeisha-why__intro * { font-family: "DM Sans", Arial, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.65 !important; letter-spacing: 0 !important; color: #4A4F4B !important; } .zeisha-why .zeisha-why__desc, .zeisha-why .zeisha-why__desc * { font-family: "DM Sans", Arial, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.62 !important; letter-spacing: 0 !important; color: #464C48 !important; } } /* ========================================================= MOBILE IPHONE + ANDROID KEEP 16PX ========================================================= */ @media (max-width: 767px) { .zeisha-why .zeisha-why__intro, .zeisha-why .zeisha-why__intro * { font-family: "DM Sans", Arial, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.62 !important; letter-spacing: 0 !important; color: #4A4F4B !important; } .zeisha-why .zeisha-why__desc, .zeisha-why .zeisha-why__desc * { font-family: "DM Sans", Arial, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.62 !important; letter-spacing: 0 !important; color: #464C48 !important; } } /* ========================================================= SMALL IPHONE / SMALL ANDROID STILL KEEP 16PX ========================================================= */ @media (max-width: 480px) { .zeisha-why .zeisha-why__intro, .zeisha-why .zeisha-why__intro *, .zeisha-why .zeisha-why__desc, .zeisha-why .zeisha-why__desc * { font-family: "DM Sans", Arial, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; } } /* ========================================================= VERY SMALL PHONE STILL 16PX ========================================================= */ @media (max-width: 370px) { .zeisha-why .zeisha-why__intro, .zeisha-why .zeisha-why__intro *, .zeisha-why .zeisha-why__desc, .zeisha-why .zeisha-why__desc * { font-family: "DM Sans", Arial, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.6 !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-954120e *//* ========================================================= ZEISHA SPA BEAUTY TREATMENTS FINAL RESPONSIVE VERSION DESKTOP / LAPTOP : IMAGE LEFT + CONTENT RIGHT TABLET / MOBILE : STACKED 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 SYSTEM ========================================================= */ .zeisha-treatments { --zt-ivory: #F5F1E8; --zt-deep: #1D3028; --zt-green: #2F5142; --zt-sage: #98A995; --zt-beige: #DDD3C3; --zt-gold: #B79B6C; --zt-text: #46504A; --zt-white: #FFFFFF; } /* ========================================================= SECTION ========================================================= */ .zeisha-treatments { position: relative; width: 100%; max-width: 100%; overflow: hidden; isolation: isolate; background: var(--zt-ivory) !important; padding: clamp(58px,5vw,82px) 0 !important; color: var(--zt-text); font-family: "DM Sans", Arial, sans-serif !important; } /* ========================================================= BOX SIZING ========================================================= */ .zeisha-treatments *, .zeisha-treatments *::before, .zeisha-treatments *::after { box-sizing: border-box; } /* ========================================================= ELEMENTOR WIDTH SAFETY ========================================================= */ .zeisha-treatments .e-con, .zeisha-treatments .e-con-inner, .zeisha-treatments__shell, .zeisha-treatments__gallery, .zeisha-treatments__content, .zeisha-treatments__list, .zeisha-treatments__item, .zeisha-treatments__item-body, .zeisha-treatments__title, .zeisha-treatments__intro, .zeisha-treatments__item-title, .zeisha-treatments__item-desc { min-width: 0 !important; max-width: 100%; } /* ========================================================= TEXT SAFETY ========================================================= */ .zeisha-treatments__title, .zeisha-treatments__title *, .zeisha-treatments__intro, .zeisha-treatments__intro *, .zeisha-treatments__item-title, .zeisha-treatments__item-title *, .zeisha-treatments__item-desc, .zeisha-treatments__item-desc * { white-space: normal !important; overflow-wrap: break-word; word-break: normal; } /* ========================================================= BODY FONT ========================================================= */ .zeisha-treatments p, .zeisha-treatments span, .zeisha-treatments a, .zeisha-treatments button, .zeisha-treatments .elementor-widget-text-editor, .zeisha-treatments .elementor-widget-text-editor * { font-family: "DM Sans", Arial, sans-serif !important; } /* ========================================================= SOFT BACKGROUND DETAIL ========================================================= */ .zeisha-treatments::before { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; background: radial-gradient( circle at 9% 30%, rgba(183,155,108,.06), transparent 24% ), radial-gradient( circle at 94% 8%, rgba(152,169,149,.06), transparent 24% ); } /* ========================================================= MAIN SHELL DESKTOP + LAPTOP ========================================================= */ .zeisha-treatments__shell { position: relative; z-index: 2; width: min(100%,1480px) !important; margin: 0 auto !important; padding: 0 clamp(28px,4.5vw,68px) !important; display: grid !important; grid-template-columns: minmax(0,.96fr) minmax(0,1.04fr); align-items: center !important; gap: clamp(38px,4vw,68px) !important; } /* ========================================================= IMAGE GALLERY GRID MAKES BOTH IMAGES STABLE ========================================================= */ .zeisha-treatments__gallery { position: relative; width: 100% !important; max-width: 640px; min-height: 520px; margin: 0 auto !important; padding: 14px 3px; display: grid !important; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); grid-template-rows: 1fr; align-items: center !important; column-gap: clamp(11px,1.2vw,18px); } /* ========================================================= IMAGE CARD BASE ========================================================= */ .zeisha-treatments__image-card { position: relative !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; overflow: visible !important; background: transparent !important; transition: transform .8s cubic-bezier(.19,1,.22,1); } /* ========================================================= IMAGE CARD 01 ========================================================= */ .zeisha-treatments__image-card--one { grid-column: 1; grid-row: 1; height: clamp(420px,33vw,520px) !important; border-radius: 14px 160px 14px 160px !important; transform: translateY(-16px); } /* ========================================================= IMAGE CARD 02 ========================================================= */ .zeisha-treatments__image-card--two { grid-column: 2; grid-row: 1; height: clamp(395px,31vw,490px) !important; border-radius: 150px 14px 150px 14px !important; transform: translateY(28px); } /* ========================================================= IMAGE WIDGET ========================================================= */ .zeisha-treatments__image { position: relative !important; display: block !important; width: 100% !important; height: 100% !important; min-height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border-radius: inherit !important; } /* ========================================================= ELEMENTOR IMAGE WRAPPER ========================================================= */ .zeisha-treatments__image .elementor-widget-container, .zeisha-treatments__image .elementor-image, .zeisha-treatments__image .elementor-image-link { position: relative !important; display: block !important; width: 100% !important; height: 100% !important; min-height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border-radius: inherit !important; } /* ========================================================= ACTUAL IMAGE ========================================================= */ .zeisha-treatments__image img { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: center center !important; border-radius: inherit !important; filter: saturate(.88) contrast(1.025) brightness(.985); transform: scale(1.025); transition: transform 1.15s cubic-bezier(.19,1,.22,1), filter .65s ease; } /* ========================================================= FRAME 01 ========================================================= */ .zeisha-treatments__image-card--one::after { content: ""; position: absolute; z-index: -1; top: 9px; left: 9px; right: -7px; bottom: -7px; border: 1px solid rgba(183,155,108,.56); border-radius: 14px 160px 14px 160px; pointer-events: none; } /* ========================================================= FRAME 02 ========================================================= */ .zeisha-treatments__image-card--two::after { content: ""; position: absolute; z-index: -1; top: -7px; left: -7px; right: 9px; bottom: 9px; border: 1px solid rgba(152,169,149,.60); border-radius: 150px 14px 150px 14px; pointer-events: none; } /* ========================================================= IMAGE SHADOW ========================================================= */ .zeisha-treatments__image-card::before { content: ""; position: absolute; z-index: -2; inset: 18px; border-radius: inherit; background: rgba(29,48,40,.06); filter: blur(18px); opacity: .42; } /* ========================================================= IMAGE HOVER ========================================================= */ .zeisha-treatments__image-card:hover .zeisha-treatments__image img { transform: scale(1.06); filter: saturate(.95) contrast(1.03) brightness(1); } .zeisha-treatments__image-card--one:hover { transform: translateY(-22px); } .zeisha-treatments__image-card--two:hover { transform: translateY(22px); } /* ========================================================= CONTENT ========================================================= */ .zeisha-treatments__content { position: relative; width: 100%; max-width: 710px; } /* ========================================================= LARGE BACKGROUND WORD ========================================================= */ .zeisha-treatments__content::before { content: "TREAT"; position: absolute; z-index: 0; top: -32px; right: 0; font-family: "El Messiri", Georgia, serif !important; font-size: clamp(72px,6.8vw,118px); font-weight: 400; line-height: .8; letter-spacing: -.05em; color: rgba(29,48,40,.035); pointer-events: none; } /* ========================================================= EYEBROW ========================================================= */ .zeisha-treatments__eyebrow { position: relative; z-index: 2; margin: 0 0 9px 0 !important; } .zeisha-treatments__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: .20em !important; text-transform: uppercase !important; color: var(--zt-green) !important; } /* ========================================================= MAIN TITLE ========================================================= */ .zeisha-treatments__title { position: relative; z-index: 2; width: 100%; max-width: 680px; margin: 0 0 14px 0 !important; } .zeisha-treatments__title .elementor-heading-title { margin: 0 !important; padding: 0 !important; max-width: 100%; font-family: "El Messiri", Georgia, serif !important; font-size: clamp(40px,3.65vw,56px) !important; font-weight: 500 !important; line-height: 1 !important; letter-spacing: -.035em !important; color: var(--zt-deep) !important; text-wrap: balance; } /* ========================================================= INTRO ========================================================= */ .zeisha-treatments__intro { position: relative; z-index: 2; width: 100%; max-width: 650px; margin: 0 0 18px 0 !important; } /* ========================================================= INTRO DESCRIPTION ALWAYS 16PX DM SANS ========================================================= */ .zeisha-treatments__intro, .zeisha-treatments__intro *, .zeisha-treatments__intro .elementor-widget-container, .zeisha-treatments__intro p, .zeisha-treatments__intro span, .zeisha-treatments__intro div { font-family: "DM Sans", Arial, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.65 !important; letter-spacing: 0 !important; color: var(--zt-text) !important; } .zeisha-treatments__intro p { margin: 0 !important; } /* ========================================================= SERVICE LIST ========================================================= */ .zeisha-treatments__list { position: relative; z-index: 2; display: flex !important; flex-direction: column !important; width: 100% !important; gap: 0 !important; } /* ========================================================= SERVICE ITEM ========================================================= */ .zeisha-treatments__item { position: relative; width: 100% !important; display: grid !important; grid-template-columns: 52px minmax(0,1fr); align-items: center !important; gap: 12px !important; margin: 0 !important; padding: 12px 4px !important; border-top: 1px solid rgba(29,48,40,.11); transition: padding-left .45s cubic-bezier(.19,1,.22,1), background .35s ease; } .zeisha-treatments__item:first-child { border-top: 0; } .zeisha-treatments__item:hover { padding-left: 9px !important; background: rgba(255,255,255,.25); } /* ========================================================= ICON ========================================================= */ .zeisha-treatments__icon-wrap { position: relative; width: 44px !important; height: 44px !important; min-width: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; border: 1px solid rgba(183,155,108,.46); background: rgba(255,255,255,.26); } .zeisha-treatments__icon-wrap::after { content: ""; position: absolute; top: 4px; right: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--zt-gold); } .zeisha-treatments__icon, .zeisha-treatments__icon .elementor-icon, .zeisha-treatments__icon i, .zeisha-treatments__icon svg { width: 22px !important; height: 22px !important; font-size: 21px !important; color: var(--zt-green) !important; fill: var(--zt-green) !important; } /* ========================================================= ITEM TITLE ========================================================= */ .zeisha-treatments__item-title { width: 100%; margin: 0 0 4px 0 !important; } .zeisha-treatments__item-title .elementor-heading-title { margin: 0 !important; padding: 0 !important; font-family: "El Messiri", Georgia, serif !important; font-size: clamp(21px,1.5vw,26px) !important; font-weight: 500 !important; line-height: 1.08 !important; letter-spacing: -.018em !important; color: var(--zt-deep) !important; } /* ========================================================= SERVICE DESCRIPTION ALWAYS 16PX DM SANS ========================================================= */ .zeisha-treatments__item-desc, .zeisha-treatments__item-desc *, .zeisha-treatments__item-desc .elementor-widget-container, .zeisha-treatments__item-desc p, .zeisha-treatments__item-desc span, .zeisha-treatments__item-desc div { max-width: 100%; font-family: "DM Sans", Arial, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.58 !important; letter-spacing: 0 !important; color: var(--zt-text) !important; } .zeisha-treatments__item-desc p { margin: 0 !important; padding: 0 !important; } /* ========================================================= LAPTOP 961PX - 1180PX IMPORTANT: STILL TWO COLUMNS ========================================================= */ @media (min-width:961px) and (max-width:1180px) { .zeisha-treatments { padding: 52px 0 !important; } .zeisha-treatments__shell { grid-template-columns: minmax(0,.91fr) minmax(0,1.09fr); gap: 30px !important; padding: 0 clamp(25px,3vw,38px) !important; } /* GALLERY BECOMES SMALLER BUT STAYS LEFT */ .zeisha-treatments__gallery { max-width: 510px; min-height: 430px; column-gap: 9px; } .zeisha-treatments__image-card--one { height: 395px !important; border-radius: 10px 115px 10px 115px !important; transform: translateY(-10px); } .zeisha-treatments__image-card--two { height: 365px !important; border-radius: 108px 10px 108px 10px !important; transform: translateY(19px); } .zeisha-treatments__image-card--one::after { border-radius: 10px 115px 10px 115px; } .zeisha-treatments__image-card--two::after { border-radius: 108px 10px 108px 10px; } /* CONTENT REMAINS RIGHT */ .zeisha-treatments__content { max-width: 100%; } .zeisha-treatments__content::before { font-size: 82px; top: -22px; } .zeisha-treatments__title .elementor-heading-title { font-size: clamp(36px,4vw,47px) !important; line-height: 1.01 !important; } .zeisha-treatments__intro, .zeisha-treatments__intro *, .zeisha-treatments__item-desc, .zeisha-treatments__item-desc * { font-size: 16px !important; } .zeisha-treatments__item { grid-template-columns: 45px minmax(0,1fr); gap: 9px !important; padding: 9px 2px !important; } .zeisha-treatments__icon-wrap { width: 38px !important; height: 38px !important; min-width: 38px !important; } .zeisha-treatments__icon, .zeisha-treatments__icon .elementor-icon, .zeisha-treatments__icon i, .zeisha-treatments__icon svg { width: 19px !important; height: 19px !important; font-size: 19px !important; } .zeisha-treatments__item-title .elementor-heading-title { font-size: clamp(19px,2vw,23px) !important; } } /* ========================================================= TABLET 768PX - 960PX STACK ONLY FROM HERE ========================================================= */ @media (min-width:768px) and (max-width:960px) { .zeisha-treatments { padding: 52px 0 !important; } .zeisha-treatments__shell { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 42px !important; padding: 0 clamp(30px,5vw,48px) !important; } .zeisha-treatments__gallery { width: min(100%,630px) !important; max-width: 630px; min-height: 455px; } .zeisha-treatments__image-card--one { height: 420px !important; border-radius: 10px 120px 10px 120px !important; } .zeisha-treatments__image-card--two { height: 385px !important; border-radius: 115px 10px 115px 10px !important; } .zeisha-treatments__content { width: min(100%,680px); max-width: 680px; } .zeisha-treatments__title .elementor-heading-title { font-size: clamp(43px,6vw,56px) !important; } .zeisha-treatments__intro, .zeisha-treatments__intro *, .zeisha-treatments__item-desc, .zeisha-treatments__item-desc * { font-size: 16px !important; } } /* ========================================================= MOBILE MAX 767PX ========================================================= */ @media (max-width:767px) { .zeisha-treatments { padding: 45px 0 !important; } .zeisha-treatments__shell { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 32px !important; padding: 0 clamp(18px,5vw,26px) !important; } /* ===================================================== GALLERY ===================================================== */ .zeisha-treatments__gallery { width: 100% !important; max-width: 510px; min-height: clamp(310px,82vw,390px); margin: 0 auto !important; grid-template-columns: minmax(0,1.07fr) minmax(0,.93fr); column-gap: 8px; padding: 8px 0 12px; } .zeisha-treatments__image-card--one { height: clamp(280px,74vw,355px) !important; border-radius: 7px 85px 7px 85px !important; transform: translateY(-7px); } .zeisha-treatments__image-card--two { height: clamp(260px,69vw,330px) !important; border-radius: 80px 7px 80px 7px !important; transform: translateY(16px); } .zeisha-treatments__image-card--one::after { border-radius: 7px 85px 7px 85px; } .zeisha-treatments__image-card--two::after { border-radius: 80px 7px 80px 7px; } /* ===================================================== CONTENT ===================================================== */ .zeisha-treatments__content { width: 100%; max-width: 100%; } .zeisha-treatments__content::before { font-size: 76px; right: -7px; top: -17px; } .zeisha-treatments__title { max-width: 100%; } .zeisha-treatments__title .elementor-heading-title { font-size: clamp(36px,9.6vw,46px) !important; line-height: 1 !important; } /* ===================================================== DESCRIPTION ALWAYS 16 ===================================================== */ .zeisha-treatments__intro, .zeisha-treatments__intro *, .zeisha-treatments__item-desc, .zeisha-treatments__item-desc * { font-family: "DM Sans", Arial, sans-serif !important; font-size: 16px !important; } .zeisha-treatments__item { grid-template-columns: 44px minmax(0,1fr); align-items: start !important; gap: 10px !important; padding: 13px 1px !important; } .zeisha-treatments__icon-wrap { width: 38px !important; height: 38px !important; min-width: 38px !important; margin-top: 2px; } .zeisha-treatments__item-title .elementor-heading-title { font-size: clamp(20px,5.5vw,24px) !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:420px) { .zeisha-treatments__shell { padding: 0 16px !important; } .zeisha-treatments__gallery { min-height: 292px; column-gap: 7px; } .zeisha-treatments__image-card--one { height: 268px !important; border-radius: 6px 68px 6px 68px !important; } .zeisha-treatments__image-card--two { height: 248px !important; border-radius: 65px 6px 65px 6px !important; } .zeisha-treatments__title .elementor-heading-title { font-size: clamp(33px,9.8vw,41px) !important; } .zeisha-treatments__intro, .zeisha-treatments__intro *, .zeisha-treatments__item-desc, .zeisha-treatments__item-desc * { font-size: 16px !important; } .zeisha-treatments__item { grid-template-columns: 42px minmax(0,1fr); gap: 8px !important; } .zeisha-treatments__item-title .elementor-heading-title { font-size: 20px !important; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width:360px) { .zeisha-treatments__shell { padding: 0 14px !important; } .zeisha-treatments__gallery { min-height: 270px; } .zeisha-treatments__image-card--one { height: 245px !important; } .zeisha-treatments__image-card--two { height: 228px !important; } .zeisha-treatments__title .elementor-heading-title { font-size: 31px !important; } .zeisha-treatments__intro, .zeisha-treatments__intro *, .zeisha-treatments__item-desc, .zeisha-treatments__item-desc * { font-size: 16px !important; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion:reduce) { .zeisha-treatments *, .zeisha-treatments *::before, .zeisha-treatments *::after { animation: none !important; transition: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-71a5d34 *//* ========================================================= SEE MORE — CLICKABLE FIX ========================================================= */ .elementor-16 .elementor-element.elementor-element-71a5d34{ position: relative !important; z-index: 20 !important; pointer-events: auto !important; } .elementor-16 .elementor-element.elementor-element-71a5d34 .elementor-button{ position: relative !important; z-index: 21 !important; pointer-events: auto !important; cursor: pointer !important; } .elementor-16 .elementor-element.elementor-element-71a5d34 .elementor-button-link{ pointer-events: auto !important; cursor: pointer !important; } /* Decorative layers must not block the button */ .elementor-16 .elementor-element.elementor-element-71a5d34::before, .elementor-16 .elementor-element.elementor-element-71a5d34::after, .elementor-16 .elementor-element.elementor-element-71a5d34 .elementor-button::before, .elementor-16 .elementor-element.elementor-element-71a5d34 .elementor-button::after{ pointer-events: none !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-48be31b *//* ========================================================= ZEISHA SPA EDITORIAL MOSAIC GALLERY WARM IVORY HEADING : EL MESSIRI BODY : DM SANS DESCRIPTION : 16PX ALL DEVICES ========================================================= */ /* ========================================================= 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 SYSTEM ========================================================= */ .zeisha-gallery{ --zg-deep:#1D3028; --zg-green:#2F5142; --zg-sage:#98A995; --zg-ivory:#F5F1E8; --zg-beige:#DDD3C3; --zg-gold:#B79B6C; --zg-text:#46504A; --zg-white:#FFFFFF; } /* ========================================================= MAIN SECTION ========================================================= */ .zeisha-gallery{ position:relative; width:100%; overflow:hidden; isolation:isolate; background: var(--zg-ivory) !important; color: var(--zg-text); font-family: "DM Sans", Arial, sans-serif !important; } /* ========================================================= BOX MODEL ========================================================= */ .zeisha-gallery *, .zeisha-gallery *::before, .zeisha-gallery *::after{ box-sizing:border-box; } /* ========================================================= VERY SUBTLE BACKGROUND WORD ========================================================= */ .zeisha-gallery::before{ content:"GALLERY"; position:absolute; z-index:0; top:-35px; right:-15px; font-family: "El Messiri", Georgia, serif; font-size: clamp(110px,13vw,220px); font-weight:400; line-height:1; letter-spacing:-.04em; white-space:nowrap; color: rgba(29,48,40,.025); pointer-events:none; } /* ========================================================= SMALL GOLD GUIDE ========================================================= */ .zeisha-gallery::after{ content:""; position:absolute; z-index:1; left: clamp(25px,5vw,82px); top:0; width:1px; height: clamp(48px,5vw,68px); background: linear-gradient( to bottom, rgba(183,155,108,.85), transparent ); pointer-events:none; } /* ========================================================= SHELL ========================================================= */ .zeisha-gallery__shell{ position:relative; z-index:2; width: min(100%,1540px); margin: 0 auto !important; padding: clamp(68px,6vw,95px) clamp(28px,5vw,76px) clamp(72px,6vw,100px) !important; } /* ========================================================= HEADER ========================================================= */ .zeisha-gallery__header{ display:grid !important; grid-template-columns: minmax(0,1.15fr) minmax(300px,.85fr); align-items:end; gap: clamp(40px,6vw,90px); margin: 0 0 clamp(38px,4vw,56px) 0 !important; } /* ========================================================= LEFT HEADING ========================================================= */ .zeisha-gallery__heading{ min-width:0; } /* ========================================================= EYEBROW ========================================================= */ .zeisha-gallery__eyebrow{ position:relative; margin: 0 0 16px 0 !important; padding-top:13px; } /* GOLD LINE */ .zeisha-gallery__eyebrow::before{ content:""; position:absolute; top:0; left:0; width:40px; height:1px; background: var(--zg-gold); transition: width .55s cubic-bezier(.19,1,.22,1); } .zeisha-gallery__header:hover .zeisha-gallery__eyebrow::before{ width:65px; } /* EYEBROW FONT */ .zeisha-gallery__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: .22em !important; text-transform: uppercase !important; color: var(--zg-green) !important; } /* ========================================================= MAIN TITLE ========================================================= */ .zeisha-gallery__title{ width: min(100%,680px); margin: 0 !important; } .zeisha-gallery__title .elementor-heading-title{ margin:0 !important; padding:0 !important; font-family: "El Messiri", Georgia, serif !important; font-size: clamp(56px,5.6vw,84px) !important; font-weight: 400 !important; line-height: .94 !important; letter-spacing: -.04em !important; color: var(--zg-deep) !important; } /* ========================================================= DESCRIPTION ========================================================= */ .zeisha-gallery__copy{ position:relative; max-width:500px; padding-left: clamp(18px,2vw,27px); border-left: 1px solid rgba(47,81,66,.18); } /* ========================================================= DESCRIPTION DM SANS — ALWAYS 16PX ========================================================= */ .zeisha-gallery__description, .zeisha-gallery__description *, .zeisha-gallery__description .elementor-widget-container, .zeisha-gallery__description p, .zeisha-gallery__description span, .zeisha-gallery__description div, .zeisha-gallery__description strong, .zeisha-gallery__description em, .zeisha-gallery__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.68 !important; letter-spacing: 0 !important; word-spacing: 0 !important; text-transform: none !important; color: var(--zg-text) !important; } .zeisha-gallery__description p{ margin:0 !important; padding:0 !important; } /* ========================================================= GALLERY MEDIA WRAPPER ========================================================= */ .zeisha-gallery__media{ position:relative; width:100%; min-width:0; } /* ========================================================= DECORATIVE TOP LINE ========================================================= */ .zeisha-gallery__media::before{ content:""; position:absolute; z-index:4; top:-18px; left:0; width:100%; height:1px; background: linear-gradient( to right, var(--zg-gold) 0 55px, rgba(29,48,40,.11) 55px 100% ); pointer-events:none; } /* ========================================================= GALLERY WIDGET ========================================================= */ .zeisha-gallery__widget{ position:relative; width:100%; } /* ========================================================= MOSAIC GRID SUPPORTS COMMON ELEMENTOR / GALLERY PLUGINS ========================================================= */ .zeisha-gallery__widget .e-gallery-container, .zeisha-gallery__widget .elementor-gallery, .zeisha-gallery__widget .gallery{ display:grid !important; grid-template-columns: repeat(12,minmax(0,1fr)) !important; grid-auto-rows: 72px !important; grid-auto-flow: dense !important; gap: clamp(8px,1vw,14px) !important; width: 100% !important; height: auto !important; position: relative !important; } /* ========================================================= RESET PLUGIN POSITIONING ========================================================= */ .zeisha-gallery__widget .e-gallery-item, .zeisha-gallery__widget .elementor-gallery-item, .zeisha-gallery__widget .gallery-item{ position:relative !important; inset:auto !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; width:100% !important; max-width:none !important; height:100% !important; margin:0 !important; padding:0 !important; overflow:hidden !important; border:0 !important; background: var(--zg-beige); border-radius: 0 !important; transform:none !important; transition: transform .65s cubic-bezier(.19,1,.22,1), box-shadow .5s ease; } /* ========================================================= MOSAIC POSITION — ITEM 01 LARGE FEATURE IMAGE ========================================================= */ .zeisha-gallery__widget .e-gallery-item:nth-child(1), .zeisha-gallery__widget .elementor-gallery-item:nth-child(1), .zeisha-gallery__widget .gallery-item:nth-child(1){ grid-column: 1 / span 5 !important; grid-row: 1 / span 6 !important; border-radius: 4px 105px 4px 4px !important; } /* ========================================================= ITEM 02 ========================================================= */ .zeisha-gallery__widget .e-gallery-item:nth-child(2), .zeisha-gallery__widget .elementor-gallery-item:nth-child(2), .zeisha-gallery__widget .gallery-item:nth-child(2){ grid-column: 6 / span 3 !important; grid-row: 1 / span 3 !important; } /* ========================================================= ITEM 03 ========================================================= */ .zeisha-gallery__widget .e-gallery-item:nth-child(3), .zeisha-gallery__widget .elementor-gallery-item:nth-child(3), .zeisha-gallery__widget .gallery-item:nth-child(3){ grid-column: 9 / span 4 !important; grid-row: 1 / span 3 !important; } /* ========================================================= ITEM 04 ========================================================= */ .zeisha-gallery__widget .e-gallery-item:nth-child(4), .zeisha-gallery__widget .elementor-gallery-item:nth-child(4), .zeisha-gallery__widget .gallery-item:nth-child(4){ grid-column: 6 / span 4 !important; grid-row: 4 / span 3 !important; } /* ========================================================= ITEM 05 ========================================================= */ .zeisha-gallery__widget .e-gallery-item:nth-child(5), .zeisha-gallery__widget .elementor-gallery-item:nth-child(5), .zeisha-gallery__widget .gallery-item:nth-child(5){ grid-column: 10 / span 3 !important; grid-row: 4 / span 3 !important; border-radius: 4px 4px 85px 4px !important; } /* ========================================================= ITEM 06 ========================================================= */ .zeisha-gallery__widget .e-gallery-item:nth-child(6), .zeisha-gallery__widget .elementor-gallery-item:nth-child(6), .zeisha-gallery__widget .gallery-item:nth-child(6){ grid-column: 1 / span 3 !important; grid-row: 7 / span 3 !important; } /* ========================================================= ITEM 07 ========================================================= */ .zeisha-gallery__widget .e-gallery-item:nth-child(7), .zeisha-gallery__widget .elementor-gallery-item:nth-child(7), .zeisha-gallery__widget .gallery-item:nth-child(7){ grid-column: 4 / span 5 !important; grid-row: 7 / span 3 !important; } /* ========================================================= ITEM 08 ========================================================= */ .zeisha-gallery__widget .e-gallery-item:nth-child(8), .zeisha-gallery__widget .elementor-gallery-item:nth-child(8), .zeisha-gallery__widget .gallery-item:nth-child(8){ grid-column: 9 / span 4 !important; grid-row: 7 / span 3 !important; } /* ========================================================= IMAGE / LINKS FILL ITEM ========================================================= */ .zeisha-gallery__widget .e-gallery-item > *, .zeisha-gallery__widget .elementor-gallery-item > *, .zeisha-gallery__widget .gallery-item > *{ width:100% !important; height:100% !important; } /* ========================================================= ACTUAL IMAGE ========================================================= */ .zeisha-gallery__widget img{ display:block !important; width:100% !important; height:100% !important; max-width:none !important; object-fit: cover !important; object-position: center center !important; filter: saturate(.88) contrast(1.02) brightness(.99); transform: scale(1.015); transition: transform 1.1s cubic-bezier(.19,1,.22,1), filter .65s ease; } /* ========================================================= ELEMENTOR PRO GALLERY BACKGROUND IMAGE ========================================================= */ .zeisha-gallery__widget .e-gallery-image{ width:100% !important; height:100% !important; background-size: cover !important; background-position: center !important; transition: transform 1.1s cubic-bezier(.19,1,.22,1), filter .65s ease; } /* ========================================================= DARK GREEN HOVER OVERLAY ========================================================= */ .zeisha-gallery__widget .e-gallery-item::before, .zeisha-gallery__widget .elementor-gallery-item::before, .zeisha-gallery__widget .gallery-item::before{ content:""; position:absolute; z-index:3; inset:0; background: rgba(29,48,40,.28); opacity:0; pointer-events:none; transition: opacity .5s ease; } /* ========================================================= VIEW IMAGE TEXT ========================================================= */ .zeisha-gallery__widget .e-gallery-item::after, .zeisha-gallery__widget .elementor-gallery-item::after, .zeisha-gallery__widget .gallery-item::after{ content:"VIEW IMAGE ↗"; position:absolute; z-index:4; left: 22px; bottom: 20px; font-family: "DM Sans", Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: .18em; color: var(--zg-ivory); opacity:0; transform: translateY(10px); pointer-events:none; transition: opacity .45s ease, transform .55s cubic-bezier(.19,1,.22,1); } /* ========================================================= HOVER ========================================================= */ .zeisha-gallery__widget .e-gallery-item:hover::before, .zeisha-gallery__widget .elementor-gallery-item:hover::before, .zeisha-gallery__widget .gallery-item:hover::before{ opacity:1; } .zeisha-gallery__widget .e-gallery-item:hover::after, .zeisha-gallery__widget .elementor-gallery-item:hover::after, .zeisha-gallery__widget .gallery-item:hover::after{ opacity:1; transform: translateY(0); } /* IMAGE ZOOM */ .zeisha-gallery__widget .e-gallery-item:hover img, .zeisha-gallery__widget .elementor-gallery-item:hover img, .zeisha-gallery__widget .gallery-item:hover img{ transform: scale(1.065); filter: saturate(.94) contrast(1.025) brightness(.94); } .zeisha-gallery__widget .e-gallery-item:hover .e-gallery-image{ transform: scale(1.06); filter: brightness(.94); } /* ========================================================= SUBTLE FEATURE FRAME ========================================================= */ .zeisha-gallery__media::after{ content:""; position:absolute; z-index:-1; left:-10px; top:25px; width: min(34%,420px); height: min(57%,470px); border: 1px solid rgba(183,155,108,.40); pointer-events:none; } /* ========================================================= TABLET ========================================================= */ @media (min-width:768px) and (max-width:1024px){ .zeisha-gallery__shell{ padding: 58px 28px 70px !important; } .zeisha-gallery__header{ grid-template-columns: minmax(0,1.1fr) minmax(260px,.9fr); gap: 32px; margin-bottom: 38px !important; } .zeisha-gallery__title .elementor-heading-title{ font-size: clamp(46px,6vw,62px) !important; } /* DESCRIPTION REMAINS 16 */ .zeisha-gallery__description, .zeisha-gallery__description *{ font-size: 16px !important; line-height: 1.64 !important; } /* TABLET MOSAIC */ .zeisha-gallery__widget .e-gallery-container, .zeisha-gallery__widget .elementor-gallery, .zeisha-gallery__widget .gallery{ grid-template-columns: repeat(6,minmax(0,1fr)) !important; grid-auto-rows: 75px !important; gap: 10px !important; } .zeisha-gallery__widget .e-gallery-item:nth-child(1), .zeisha-gallery__widget .elementor-gallery-item:nth-child(1), .zeisha-gallery__widget .gallery-item:nth-child(1){ grid-column: 1 / span 3 !important; grid-row: 1 / span 5 !important; } .zeisha-gallery__widget .e-gallery-item:nth-child(2), .zeisha-gallery__widget .elementor-gallery-item:nth-child(2), .zeisha-gallery__widget .gallery-item:nth-child(2){ grid-column: 4 / span 3 !important; grid-row: 1 / span 3 !important; } .zeisha-gallery__widget .e-gallery-item:nth-child(3), .zeisha-gallery__widget .elementor-gallery-item:nth-child(3), .zeisha-gallery__widget .gallery-item:nth-child(3){ grid-column: 4 / span 3 !important; grid-row: 4 / span 2 !important; } .zeisha-gallery__widget .e-gallery-item:nth-child(4), .zeisha-gallery__widget .elementor-gallery-item:nth-child(4), .zeisha-gallery__widget .gallery-item:nth-child(4){ grid-column: 1 / span 2 !important; grid-row: 6 / span 3 !important; } .zeisha-gallery__widget .e-gallery-item:nth-child(5), .zeisha-gallery__widget .elementor-gallery-item:nth-child(5), .zeisha-gallery__widget .gallery-item:nth-child(5){ grid-column: 3 / span 2 !important; grid-row: 6 / span 3 !important; } .zeisha-gallery__widget .e-gallery-item:nth-child(6), .zeisha-gallery__widget .elementor-gallery-item:nth-child(6), .zeisha-gallery__widget .gallery-item:nth-child(6){ grid-column: 5 / span 2 !important; grid-row: 6 / span 3 !important; } .zeisha-gallery__widget .e-gallery-item:nth-child(7), .zeisha-gallery__widget .elementor-gallery-item:nth-child(7), .zeisha-gallery__widget .gallery-item:nth-child(7){ grid-column: 1 / span 3 !important; grid-row: 9 / span 3 !important; } .zeisha-gallery__widget .e-gallery-item:nth-child(8), .zeisha-gallery__widget .elementor-gallery-item:nth-child(8), .zeisha-gallery__widget .gallery-item:nth-child(8){ grid-column: 4 / span 3 !important; grid-row: 9 / span 3 !important; } } /* ========================================================= MOBILE IPHONE + ANDROID ========================================================= */ @media (max-width:767px){ .zeisha-gallery::before{ font-size: 95px; top: 0; right: -12px; } .zeisha-gallery__shell{ padding: 55px clamp(18px,5.5vw,26px) 62px !important; } /* HEADER STACKS */ .zeisha-gallery__header{ display:block !important; margin-bottom: 32px !important; } .zeisha-gallery__heading{ margin-bottom: 19px; } .zeisha-gallery__title .elementor-heading-title{ font-size: clamp(43px,12vw,56px) !important; line-height: .96 !important; } .zeisha-gallery__copy{ width: min(100%,430px); max-width:none; padding-left: 14px; } /* DESCRIPTION ALWAYS 16PX */ .zeisha-gallery__description, .zeisha-gallery__description *{ font-family: "DM Sans", Arial, sans-serif !important; font-size: 16px !important; line-height: 1.65 !important; } /* MOBILE MOSAIC */ .zeisha-gallery__widget .e-gallery-container, .zeisha-gallery__widget .elementor-gallery, .zeisha-gallery__widget .gallery{ grid-template-columns: repeat(2,minmax(0,1fr)) !important; grid-auto-rows: 130px !important; gap: 8px !important; } /* FEATURED FULL WIDTH */ .zeisha-gallery__widget .e-gallery-item:nth-child(1), .zeisha-gallery__widget .elementor-gallery-item:nth-child(1), .zeisha-gallery__widget .gallery-item:nth-child(1){ grid-column: 1 / -1 !important; grid-row: span 3 !important; border-radius: 3px 72px 3px 3px !important; } .zeisha-gallery__widget .e-gallery-item:nth-child(2), .zeisha-gallery__widget .elementor-gallery-item:nth-child(2), .zeisha-gallery__widget .gallery-item:nth-child(2), .zeisha-gallery__widget .e-gallery-item:nth-child(3), .zeisha-gallery__widget .elementor-gallery-item:nth-child(3), .zeisha-gallery__widget .gallery-item:nth-child(3), .zeisha-gallery__widget .e-gallery-item:nth-child(4), .zeisha-gallery__widget .elementor-gallery-item:nth-child(4), .zeisha-gallery__widget .gallery-item:nth-child(4), .zeisha-gallery__widget .e-gallery-item:nth-child(5), .zeisha-gallery__widget .elementor-gallery-item:nth-child(5), .zeisha-gallery__widget .gallery-item:nth-child(5){ grid-column: auto !important; grid-row: span 2 !important; } /* WIDE ITEM */ .zeisha-gallery__widget .e-gallery-item:nth-child(6), .zeisha-gallery__widget .elementor-gallery-item:nth-child(6), .zeisha-gallery__widget .gallery-item:nth-child(6){ grid-column: 1 / -1 !important; grid-row: span 2 !important; } .zeisha-gallery__widget .e-gallery-item:nth-child(7), .zeisha-gallery__widget .elementor-gallery-item:nth-child(7), .zeisha-gallery__widget .gallery-item:nth-child(7), .zeisha-gallery__widget .e-gallery-item:nth-child(8), .zeisha-gallery__widget .elementor-gallery-item:nth-child(8), .zeisha-gallery__widget .gallery-item:nth-child(8){ grid-column: auto !important; grid-row: span 2 !important; } .zeisha-gallery__media::after{ display:none; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:420px){ .zeisha-gallery__shell{ padding: 52px 16px 58px !important; } .zeisha-gallery__title .elementor-heading-title{ font-size: clamp(40px,12vw,50px) !important; } /* NEVER REDUCE DESCRIPTION */ .zeisha-gallery__description, .zeisha-gallery__description *{ font-size: 16px !important; } .zeisha-gallery__widget .e-gallery-container, .zeisha-gallery__widget .elementor-gallery, .zeisha-gallery__widget .gallery{ grid-auto-rows: 112px !important; gap: 7px !important; } .zeisha-gallery__widget .e-gallery-item::after, .zeisha-gallery__widget .elementor-gallery-item::after, .zeisha-gallery__widget .gallery-item::after{ left: 14px; bottom: 14px; font-size: 9px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion:reduce){ .zeisha-gallery *, .zeisha-gallery *::before, .zeisha-gallery *::after{ animation: none !important; transition: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-7cc138b *//* ========================================================= ZEISHA SPA GUEST STORIES / TESTIMONIALS WHITE EDITORIAL VERSION EL MESSIRI + DM SANS ========================================================= */ @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 SYSTEM ========================================================= */ .zeisha-testimonials { --zt-green: #2F5142; --zt-deep: #1D3028; --zt-sage: #98A995; --zt-ivory: #F5F1E8; --zt-beige: #DDD3C3; --zt-gold: #B79B6C; --zt-text: #46504A; --zt-white: #FFFFFF; } /* ========================================================= SECTION ========================================================= */ .zeisha-testimonials { position: relative; width: 100%; overflow: hidden; isolation: isolate; background: #FFFFFF !important; padding: clamp(78px,7vw,115px) 0; color: var(--zt-text); font-family: "DM Sans", Arial, sans-serif !important; } /* ========================================================= BOX MODEL ========================================================= */ .zeisha-testimonials *, .zeisha-testimonials *::before, .zeisha-testimonials *::after { box-sizing: border-box; } /* ========================================================= LARGE BACKGROUND QUOTE ========================================================= */ .zeisha-testimonials::before { content: "“"; position: absolute; z-index: 0; top: -45px; left: clamp(18px,4vw,65px); font-family: "El Messiri", serif; font-size: clamp(170px,18vw,310px); line-height: 1; color: rgba(47,81,66,.028); pointer-events: none; } /* ========================================================= TOP GOLD DETAIL ========================================================= */ .zeisha-testimonials::after { content: ""; position: absolute; top: 0; left: clamp(28px,6vw,100px); width: 1px; height: 70px; background: linear-gradient( to bottom, rgba(183,155,108,.76), transparent ); pointer-events: none; } /* ========================================================= INNER SHELL ========================================================= */ .zeisha-testimonials__shell { position: relative; z-index: 2; width: min(100%,1500px); margin: 0 auto !important; padding: 0 clamp(34px,5vw,80px) !important; display: grid !important; grid-template-columns: minmax(300px,.68fr) minmax(600px,1.32fr); gap: clamp(55px,6vw,95px); align-items: center; } /* ========================================================= LEFT CONTENT ========================================================= */ .zeisha-testimonials__intro { position: relative; align-self: center; } /* ========================================================= EYEBROW ========================================================= */ .zeisha-testimonials__eyebrow { position: relative; margin: 0 0 20px 0 !important; padding-top: 13px; } .zeisha-testimonials__eyebrow::before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 1px; background: var(--zt-gold); } .zeisha-testimonials__eyebrow .elementor-heading-title { margin: 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: .22em !important; text-transform: uppercase !important; color: var(--zt-green) !important; } /* ========================================================= MAIN TITLE ========================================================= */ .zeisha-testimonials__title { width: min(100%,500px); margin: 0 0 18px 0 !important; } .zeisha-testimonials__title .elementor-heading-title { margin: 0 !important; font-family: "El Messiri", Georgia, serif !important; font-size: clamp(48px,4.6vw,72px) !important; font-weight: 500 !important; line-height: .98 !important; letter-spacing: -.035em !important; color: var(--zt-deep) !important; } /* ========================================================= LEFT DESCRIPTION DM SANS 16PX ========================================================= */ .zeisha-testimonials__description, .zeisha-testimonials__description *, .zeisha-testimonials__description .elementor-widget-container, .zeisha-testimonials__description p, .zeisha-testimonials__description span { 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; color: #46504A !important; } .zeisha-testimonials__description p { margin: 0 !important; } /* ========================================================= RIGHT SIDE ========================================================= */ .zeisha-testimonials__right { position: relative; width: 100%; min-width: 0; } /* ========================================================= TESTIMONIAL WIDGET BASE ========================================================= */ .zeisha-testimonials-widget { position: relative; width: 100%; font-family: "DM Sans", Arial, sans-serif !important; } /* ========================================================= FORCE ALL NORMAL TEXT TO DM SANS ========================================================= */ .zeisha-testimonials-widget p, .zeisha-testimonials-widget span, .zeisha-testimonials-widget a, .zeisha-testimonials-widget div { font-family: "DM Sans", Arial, sans-serif !important; } /* ========================================================= REMOVE CUSTOMER IMAGE / AVATAR / LOGO ========================================================= */ .zeisha-testimonials-widget img { display: none !important; } /* Common avatar wrappers */ .zeisha-testimonials-widget [class*="avatar"], .zeisha-testimonials-widget [class*="image"], .zeisha-testimonials-widget [class*="thumb"], .zeisha-testimonials-widget [class*="photo"] { background-image: none !important; } /* ========================================================= TESTIMONIAL CARDS ========================================================= */ .zeisha-testimonials-widget [class*="testimonial-item"], .zeisha-testimonials-widget [class*="testimonial_item"], .zeisha-testimonials-widget [class*="testimonial-box"], .zeisha-testimonials-widget [class*="testimonial_box"], .zeisha-testimonials-widget [class*="testimonial-card"], .zeisha-testimonials-widget [class*="testimonial_card"] { position: relative; overflow: hidden; background: #FFFFFF !important; border: 1px solid rgba(183,155,108,.52) !important; border-radius: 14px 105px 14px 105px !important; box-shadow: 0 18px 45px rgba(29,48,40,.055) !important; padding: clamp(28px,3vw,42px) !important; transition: transform .6s cubic-bezier(.19,1,.22,1), box-shadow .45s ease, border-color .45s ease; } /* ========================================================= CARD HOVER ========================================================= */ .zeisha-testimonials-widget [class*="testimonial-item"]:hover, .zeisha-testimonials-widget [class*="testimonial_item"]:hover, .zeisha-testimonials-widget [class*="testimonial-box"]:hover, .zeisha-testimonials-widget [class*="testimonial_box"]:hover, .zeisha-testimonials-widget [class*="testimonial-card"]:hover, .zeisha-testimonials-widget [class*="testimonial_card"]:hover { transform: translateY(-7px); border-color: rgba(183,155,108,.85) !important; box-shadow: 0 24px 58px rgba(29,48,40,.09) !important; } /* ========================================================= REVIEW TEXT DM SANS 16PX ========================================================= */ .zeisha-testimonials-widget [class*="description"], .zeisha-testimonials-widget [class*="review"], .zeisha-testimonials-widget [class*="content"] p, .zeisha-testimonials-widget [class*="text"] { font-family: "DM Sans", Arial, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.65 !important; letter-spacing: 0 !important; color: #46504A !important; } /* ========================================================= CUSTOMER NAME ========================================================= */ .zeisha-testimonials-widget [class*="name"], .zeisha-testimonials-widget [class*="author"] { font-family: "El Messiri", Georgia, serif !important; font-size: 24px !important; font-weight: 500 !important; line-height: 1.1 !important; color: var(--zt-deep) !important; } /* ========================================================= CUSTOMER LABEL KEEP VISIBLE ========================================================= */ .zeisha-testimonials-widget [class*="designation"], .zeisha-testimonials-widget [class*="position"], .zeisha-testimonials-widget [class*="role"], .zeisha-testimonials-widget [class*="job"] { display: block !important; font-family: "DM Sans", Arial, sans-serif !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.4 !important; letter-spacing: .08em !important; text-transform: uppercase; color: var(--zt-sage) !important; } /* ========================================================= STAR / RATING ========================================================= */ .zeisha-testimonials-widget [class*="rating"] i, .zeisha-testimonials-widget [class*="rating"] svg, .zeisha-testimonials-widget [class*="star"] i, .zeisha-testimonials-widget [class*="star"] svg { color: var(--zt-gold) !important; fill: var(--zt-gold) !important; } /* ========================================================= QUOTE ICON ========================================================= */ .zeisha-testimonials-widget [class*="quote"] { color: rgba(47,81,66,.12) !important; opacity: 1 !important; } /* ========================================================= READ MORE LINK ========================================================= */ .zeisha-testimonials-widget a { color: var(--zt-green) !important; font-family: "DM Sans", Arial, sans-serif !important; font-weight: 600 !important; text-decoration: none !important; } /* ========================================================= TABLET ========================================================= */ @media (min-width:768px) and (max-width:1024px) { .zeisha-testimonials { padding: 68px 0; } .zeisha-testimonials__shell { grid-template-columns: .72fr 1.28fr; gap: 38px; padding: 0 32px !important; } .zeisha-testimonials__title .elementor-heading-title { font-size: clamp(42px,5.7vw,58px) !important; } /* DESCRIPTION STAYS 16 */ .zeisha-testimonials__description, .zeisha-testimonials__description * { font-size: 16px !important; } .zeisha-testimonials-widget [class*="description"], .zeisha-testimonials-widget [class*="review"], .zeisha-testimonials-widget [class*="content"] p, .zeisha-testimonials-widget [class*="text"] { font-size: 16px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px) { .zeisha-testimonials { padding: 56px 0; } .zeisha-testimonials__shell { display: block !important; padding: 0 22px !important; } .zeisha-testimonials__intro { margin-bottom: 38px; } .zeisha-testimonials__title .elementor-heading-title { font-size: clamp(42px,12vw,56px) !important; } /* KEEP 16PX */ .zeisha-testimonials__description, .zeisha-testimonials__description * { font-size: 16px !important; line-height: 1.65 !important; } .zeisha-testimonials-widget [class*="description"], .zeisha-testimonials-widget [class*="review"], .zeisha-testimonials-widget [class*="content"] p, .zeisha-testimonials-widget [class*="text"] { font-size: 16px !important; line-height: 1.62 !important; } .zeisha-testimonials-widget [class*="name"], .zeisha-testimonials-widget [class*="author"] { font-size: 22px !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:480px) { .zeisha-testimonials__shell { padding: 0 18px !important; } .zeisha-testimonials__description, .zeisha-testimonials__description *, .zeisha-testimonials-widget [class*="description"], .zeisha-testimonials-widget [class*="review"], .zeisha-testimonials-widget [class*="content"] p, .zeisha-testimonials-widget [class*="text"] { font-size: 16px !important; } } /* ========================================================= ACCESSIBILITY ========================================================= */ @media (prefers-reduced-motion: reduce) { .zeisha-testimonials *, .zeisha-testimonials *::before, .zeisha-testimonials *::after { animation: none !important; transition: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-908179b *//* ========================================================= 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 */ /* Start custom CSS for container, class: .elementor-element-359bc18 *//* ========================================================= 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 */