.elementor-93 .elementor-element.elementor-element-16ed1f0{--display:flex;--min-height:350px;--justify-content:center;--overlay-opacity:0.5;}.elementor-93 .elementor-element.elementor-element-16ed1f0:not(.elementor-motion-effects-element-type-background), .elementor-93 .elementor-element.elementor-element-16ed1f0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://zeisaspaseminyakbali.com/wp-content/uploads/2026/10/aesthatic-photo-300x169-1.jpg");background-position:center center;}.elementor-93 .elementor-element.elementor-element-16ed1f0::before, .elementor-93 .elementor-element.elementor-element-16ed1f0 > .elementor-background-video-container::before, .elementor-93 .elementor-element.elementor-element-16ed1f0 > .e-con-inner > .elementor-background-video-container::before, .elementor-93 .elementor-element.elementor-element-16ed1f0 > .elementor-background-slideshow::before, .elementor-93 .elementor-element.elementor-element-16ed1f0 > .e-con-inner > .elementor-background-slideshow::before, .elementor-93 .elementor-element.elementor-element-16ed1f0 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.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-93 .elementor-element.elementor-element-05f328f{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:start;}.elementor-93 .elementor-element.elementor-element-6f3c4c9{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-93 .elementor-element.elementor-element-6f3c4c9 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:600;}.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-93 .elementor-element.elementor-element-ecf40ae{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:400;color:#FFFFFF;}.elementor-93 .elementor-element.elementor-element-a714695{--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-93 .elementor-element.elementor-element-243ea50{--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-93 .elementor-element.elementor-element-2460f89{--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-93 .elementor-element.elementor-element-82e87d0{--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-93 .elementor-element.elementor-element-5e3014b{--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-93 .elementor-element.elementor-element-244b4bb{--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-93 .elementor-element.elementor-element-2f4873b{--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-93 .elementor-element.elementor-element-ff8d8d1{--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-93 .elementor-element.elementor-element-b8b53f4{--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-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-93 .elementor-element.elementor-element-f1d2c17{--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-93 .elementor-element.elementor-element-d5310e6{--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-93 .elementor-element.elementor-element-a12e890{--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-93 .elementor-element.elementor-element-8c7fdc8{--display:flex;}.elementor-93 .elementor-element.elementor-element-d64f292{--display:flex;}.elementor-93 .elementor-element.elementor-element-65a0ee7{--display:flex;}.elementor-93 .elementor-element.elementor-element-19f85f6{--display:flex;}.elementor-93 .elementor-element.elementor-element-072c605{--display:flex;}.elementor-93 .elementor-element.elementor-element-b6260dd{--display:flex;}.elementor-93 .elementor-element.elementor-element-2ebed88{--display:flex;}.elementor-93 .elementor-element.elementor-element-77c9a39{--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-93 .elementor-element.elementor-element-4a8e2a0{--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-93 .elementor-element.elementor-element-fffa10f{--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-93 .elementor-element.elementor-element-b17be09{--display:flex;}.elementor-93 .elementor-element.elementor-element-4d8363f{--display:flex;}.elementor-93 .elementor-element.elementor-element-a05b13a{--display:flex;}.elementor-93 .elementor-element.elementor-element-76da802{--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-93 .elementor-element.elementor-element-751c6c0{--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-93 .elementor-element.elementor-element-dbb82f6{--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-93 .elementor-element.elementor-element-69fc31b .elementor-icon-wrapper{text-align:center;}.elementor-93 .elementor-element.elementor-element-aa32bc1{--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-93 .elementor-element.elementor-element-338d4d7{--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-93 .elementor-element.elementor-element-fd3de4d{--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-93 .elementor-element.elementor-element-088e1c3 .elementor-icon-wrapper{text-align:center;}.elementor-93 .elementor-element.elementor-element-a1699c8{--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-93 .elementor-element.elementor-element-f8f70e4{--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-93 .elementor-element.elementor-element-af8c655{--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-93 .elementor-element.elementor-element-9369a6b .elementor-icon-wrapper{text-align:center;}.elementor-93 .elementor-element.elementor-element-937e957{--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-93 .elementor-element.elementor-element-1568813{font-family:"Roboto", Sans-serif;font-weight:400;}.elementor-93 .elementor-element.elementor-element-5d157fc{--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-93 .elementor-element.elementor-element-e31361a{--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-93 .elementor-element.elementor-element-a5d81f9 .elementor-icon-wrapper{text-align:center;}.elementor-93 .elementor-element.elementor-element-d2e76db{--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-93 .elementor-element.elementor-element-bf93c34{--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-93 .elementor-element.elementor-element-32fa92a{--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-93 .elementor-element.elementor-element-e74ad22{--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-93 .elementor-element.elementor-element-278ab6e{font-family:"DM Sans", Sans-serif;font-weight:400;}.elementor-93 .elementor-element.elementor-element-9a911a1{--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-93 .elementor-element.elementor-element-e3100f1 .elementskit-testimonial-slider{--ekit_testimonial_left_right_spacing:15px;--ekit_testimonial_slidetoshow:2;}.elementor-93 .elementor-element.elementor-element-e3100f1 .ekit_testimonial_style_5 .elementskit-watermark-icon{bottom:30px;right:30px;}.elementor-93 .elementor-element.elementor-element-e3100f1 .elementskit-stars > li > a, .elementor-93 .elementor-element.elementor-element-e3100f1 .elementskit-stars > li > span{color:#fec42d;fill:#fec42d;}.elementor-93 .elementor-element.elementor-element-e3100f1 .elementskit-stars > li:not(:last-child){margin-right:5px;}.elementor-93 .elementor-element.elementor-element-e3100f1 .elementskit-testimonial-slider-block-style-three .elementskit-icon-content.commentor-badge::before{border-radius:50%;}.elementor-93 .elementor-element.elementor-element-e3100f1 .elementskit-profile-info .elementskit-author-name{margin-bottom:0px;}.elementor-93 .elementor-element.elementor-element-e3100f1 .elementskit-commentor-bio .elementskit-commentor-image > img{height:70px;width:70px;}.elementor-93 .elementor-element.elementor-element-f88801c{--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-93 .elementor-element.elementor-element-00003d4{--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-93 .elementor-element.elementor-element-fe165a0{--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(max-width:1024px){.elementor-93 .elementor-element.elementor-element-e3100f1 .elementskit-testimonial-slider{--ekit_testimonial_left_right_spacing:10px;}}@media(max-width:767px){.elementor-93 .elementor-element.elementor-element-e3100f1 .elementskit-testimonial-slider{--ekit_testimonial_left_right_spacing:10px;}}/* Start custom CSS for container, class: .elementor-element-16ed1f0 */@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=El+Messiri:wght@500;600;700&display=swap'); /* ========================================================= ZEISHA SPA SEMINYAK ABOUT US HERO 1 CONTAINER ========================================================= */ .elementor-93 .elementor-element.elementor-element-16ed1f0{ /* ===================================================== COLOR PALETTE ===================================================== */ --zs-primary:#2F5142; --zs-dark:#1D3028; --zs-ivory:#F5F1E8; --zs-sage:#98A995; --zs-beige:#DDD3C3; --zs-gold:#B79B6C; --zs-text:#262A27; --zs-light:#FAF8F3; /* ===================================================== TYPOGRAPHY ===================================================== */ --zs-eyebrow-size:24px; --zs-title-size:40px; --zs-description-size:16px; /* ===================================================== HERO SIZE ===================================================== */ --zs-hero-height:350px; /* ===================================================== CONTENT WIDTH ===================================================== */ --zs-content-width:760px; --zs-padding-left: clamp(30px,5vw,64px); --zs-padding-right: clamp(30px,5vw,64px); position:relative !important; isolation:isolate !important; overflow:hidden !important; width:100% !important; height: var(--zs-hero-height) !important; min-height: var(--zs-hero-height) !important; max-height: var(--zs-hero-height) !important; box-sizing: border-box !important; display:flex !important; flex-direction:column !important; justify-content:center !important; align-items:flex-start !important; gap:0 !important; padding: 34px var(--zs-padding-right) 34px var(--zs-padding-left) !important; /* ===================================================== BACKGROUND IMAGE FROM ELEMENTOR Style > Background ===================================================== */ background-position: center center !important; background-repeat: no-repeat !important; background-size: cover !important; background-color: var(--zs-dark) !important; } /* ========================================================= DARK BACKGROUND OVERLAY ========================================================= */ .elementor-93 .elementor-element.elementor-element-16ed1f0::before{ content:""; position:absolute; z-index:1; inset:0; width:100%; height:100%; pointer-events:none; background: linear-gradient( 90deg, rgba(20,33,27,.88) 0%, rgba(24,40,33,.83) 24%, rgba(28,47,38,.72) 43%, rgba(29,48,40,.53) 59%, rgba(22,36,30,.34) 76%, rgba(14,23,19,.42) 100% ); } /* ========================================================= SUBTLE GOLD LIGHT ========================================================= */ .elementor-93 .elementor-element.elementor-element-16ed1f0::after{ content:""; position:absolute; z-index:1; left:-180px; top:-220px; width:600px; height:600px; border-radius:50%; pointer-events:none; background: radial-gradient( circle, rgba(183,155,108,.13) 0%, rgba(183,155,108,.055) 38%, rgba(183,155,108,0) 70% ); } /* ========================================================= KEEP CONTENT ABOVE OVERLAY ========================================================= */ .elementor-93 .elementor-element.elementor-element-16ed1f0 > .elementor-element, .elementor-93 .elementor-element.elementor-element-16ed1f0 > .e-con-inner, .elementor-93 .elementor-element.elementor-element-16ed1f0 .e-con-inner > .elementor-element{ position:relative !important; z-index:5 !important; } /* ========================================================= CONTENT WIDTH ========================================================= */ .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-eyebrow, .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-title, .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-desc{ width:100%; max-width: var(--zs-content-width); } /* ========================================================= SMALL LABEL / EYEBROW DM SANS 24PX ========================================================= */ .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-eyebrow .elementor-heading-title{ display:flex; align-items:center; gap:16px; font-family: 'DM Sans', sans-serif !important; font-size: 24px !important; line-height: 1.2 !important; font-weight: 600 !important; letter-spacing: 2.8px !important; text-transform: uppercase !important; color: var(--zs-gold) !important; } /* ========================================================= LINE AFTER EYEBROW ========================================================= */ .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-eyebrow .elementor-heading-title::after{ content:""; display:block; flex:0 0 auto; width:56px; height:1px; background: var(--zs-gold); opacity:.9; } /* ========================================================= BIG HEADING EL MESSIRI 40PX ========================================================= */ .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-title .elementor-heading-title{ max-width: 680px; font-family: 'El Messiri', serif !important; font-size: 40px !important; line-height: 1.08 !important; font-weight: 600 !important; letter-spacing: -.3px !important; color: var(--zs-light) !important; text-shadow: 0 3px 18px rgba(0,0,0,.15); } /* ========================================================= DESCRIPTION DM SANS 16PX ========================================================= */ .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-desc, .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-desc p, .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-desc span{ max-width: 760px; font-family: 'DM Sans', sans-serif !important; font-size: 16px !important; line-height: 1.7 !important; font-weight: 400 !important; color: rgba(250,248,243,.88) !important; } /* ========================================================= REMOVE DEFAULT P MARGINS ONLY ========================================================= */ .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-desc .elementor-widget-container > p:first-child{ margin-top: 0 !important; } .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-desc .elementor-widget-container > p:last-child{ margin-bottom: 0 !important; } /* ========================================================= BUTTON WRAPPER ========================================================= */ .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-btn{ width:auto !important; max-width:none !important; } /* ========================================================= BUTTON ========================================================= */ .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-btn .elementor-button{ min-height: 48px !important; padding: 12px 26px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(183,155,108,.75) !important; border-radius: 2px !important; background: var(--zs-primary) !important; color: #FFFFFF !important; font-family: 'DM Sans', sans-serif !important; font-size: 14px !important; line-height: 1 !important; font-weight: 600 !important; letter-spacing: .3px !important; box-shadow: 0 10px 25px rgba(0,0,0,.13) !important; transition: background-color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease !important; } /* ========================================================= BUTTON TEXT ========================================================= */ .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-btn .elementor-button-text{ color: #FFFFFF !important; } /* ========================================================= BUTTON ICON ========================================================= */ .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-btn .elementor-button-icon, .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-btn .elementor-button-icon i, .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-btn .elementor-button-icon svg{ color: #FFFFFF !important; fill: #FFFFFF !important; } /* ========================================================= BUTTON HOVER ========================================================= */ .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-btn .elementor-button:hover{ background: var(--zs-gold) !important; border-color: var(--zs-gold) !important; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.18) !important; } /* ========================================================= WATERMARK — ABOUT US ========================================================= */ .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-title::before{ content:"ABOUT US"; position:absolute; z-index:-1; left: -16px; top: 48%; transform: translateY(-50%); pointer-events: none; user-select: none; white-space: nowrap; font-family: 'El Messiri', serif; font-size: 100px; line-height: .8; font-weight: 600; letter-spacing: 4px; color: rgba(250,248,243,.035); -webkit-text-stroke: 1px rgba(250,248,243,.045); } /* ========================================================= OPTIONAL WATERMARK ANIMATION ========================================================= */ @keyframes zsAboutWatermark{ 0%, 100%{ transform: translateY(-50%) translateX(0); } 50%{ transform: translateY(-50%) translateX(6px); } } .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-title::before{ animation: zsAboutWatermark 7s ease-in-out infinite; } /* ========================================================= CONTENT ENTRANCE ANIMATION ========================================================= */ @keyframes zsAboutEnter{ 0%{ opacity:0; transform: translateY(16px); filter: blur(3px); } 100%{ opacity:1; transform: translateY(0); filter: blur(0); } } .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-eyebrow{ animation: zsAboutEnter .65s .05s cubic-bezier(.16,1,.3,1) both; } .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-title{ animation: zsAboutEnter .75s .12s cubic-bezier(.16,1,.3,1) both; } .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-desc{ animation: zsAboutEnter .75s .20s cubic-bezier(.16,1,.3,1) both; } .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-btn{ animation: zsAboutEnter .75s .28s cubic-bezier(.16,1,.3,1) both; } /* ========================================================= TABLET ========================================================= */ @media(max-width:1024px){ .elementor-93 .elementor-element.elementor-element-16ed1f0{ --zs-content-width: 620px; --zs-padding-left: 38px; --zs-padding-right: 32px; height: 350px !important; min-height: 350px !important; max-height: 350px !important; } .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-title::before{ left: -10px; font-size: 78px; letter-spacing: 3px; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:767px){ .elementor-93 .elementor-element.elementor-element-16ed1f0{ --zs-content-width: 92%; --zs-padding-left: 20px; --zs-padding-right: 20px; height: 350px !important; min-height: 350px !important; max-height: 350px !important; padding: 24px var(--zs-padding-right) 24px var(--zs-padding-left) !important; background-position: 60% center !important; } .elementor-93 .elementor-element.elementor-element-16ed1f0::before{ background: linear-gradient( 90deg, rgba(16,28,23,.92) 0%, rgba(20,35,29,.86) 38%, rgba(24,42,34,.71) 64%, rgba(18,30,25,.52) 82%, rgba(13,22,18,.48) 100% ); } /* EYEBROW */ .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-eyebrow .elementor-heading-title{ font-size: 20px !important; letter-spacing: 2px !important; } .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-eyebrow .elementor-heading-title::after{ width: 34px; } /* MAIN HEADING */ .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-title .elementor-heading-title{ font-size: 34px !important; } /* DESCRIPTION */ .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-desc, .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-desc p, .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-desc span{ font-size: 14px !important; } /* ABOUT US WATERMARK */ .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-title::before{ left: -5px; top: 50%; font-size: 56px; letter-spacing: 2px; } /* BUTTON */ .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-btn .elementor-button{ min-height: 43px !important; padding: 10px 20px !important; font-size: 13px !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media(max-width:420px){ .elementor-93 .elementor-element.elementor-element-16ed1f0{ --zs-content-width: 96%; --zs-padding-left: 17px; --zs-padding-right: 17px; } .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-title .elementor-heading-title{ font-size: 30px !important; } .elementor-93 .elementor-element.elementor-element-16ed1f0 .zs-contact-title::before{ left: -3px; font-size: 46px; letter-spacing: 1.5px; } } /* ========================================================= ACCESSIBILITY ========================================================= */ @media(prefers-reduced-motion:reduce){ .elementor-93 .elementor-element.elementor-element-16ed1f0, .elementor-93 .elementor-element.elementor-element-16ed1f0 *, .elementor-93 .elementor-element.elementor-element-16ed1f0::before, .elementor-93 .elementor-element.elementor-element-16ed1f0::after, .elementor-93 .elementor-element.elementor-element-16ed1f0 *::before, .elementor-93 .elementor-element.elementor-element-16ed1f0 *::after{ animation: none !important; transition: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-a714695 *//* ========================================================= ZEISHA SPA ABOUT US — FULL RESPONSIVE VERSION DESKTOP : 2 COLUMNS TABLET : STACKED MOBILE : STACKED HEADING : EL MESSIRI BODY : DM SANS DESCRIPTION : 16PX ALL DEVICES BACKGROUND : WARM IVORY ========================================================= */ /* ========================================================= 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-about { --za-deep: #1D3028; --za-green: #2F5142; --za-sage: #98A995; --za-ivory: #F5F1E8; --za-beige: #DDD3C3; --za-gold: #B79B6C; --za-text: #46504A; --za-white: #FFFFFF; --za-soft-white: #FAF8F3; } /* ========================================================= MAIN SECTION ========================================================= */ .zeisha-about { position: relative; width: 100%; max-width: 100%; overflow: hidden; isolation: isolate; background: var(--za-ivory) !important; color: var(--za-text); font-family: "DM Sans", Arial, sans-serif !important; } /* ========================================================= BOX MODEL ========================================================= */ .zeisha-about *, .zeisha-about *::before, .zeisha-about *::after { box-sizing: border-box; } /* ========================================================= GLOBAL WIDTH SAFETY IMPORTANT FOR ELEMENTOR ========================================================= */ .zeisha-about .e-con, .zeisha-about .e-con-inner, .zeisha-about__shell, .zeisha-about__stats, .zeisha-about__stat, .zeisha-about__main, .zeisha-about__visual, .zeisha-about__content, .zeisha-about__title, .zeisha-about__description { min-width: 0 !important; max-width: 100%; } /* ========================================================= PREVENT TEXT FROM ESCAPING CONTAINER ========================================================= */ .zeisha-about__title, .zeisha-about__title *, .zeisha-about__description, .zeisha-about__description *, .zeisha-about__stat-label, .zeisha-about__stat-label * { white-space: normal !important; overflow-wrap: break-word; word-break: normal; } /* ========================================================= BACKGROUND WORD ========================================================= */ .zeisha-about::before { content: "ABOUT"; position: absolute; z-index: 0; right: -20px; top: 33%; font-family: "El Messiri", Georgia, serif; font-size: clamp(120px,14vw,250px); font-weight: 400; line-height: .8; letter-spacing: -.05em; color: rgba(29,48,40,.024); pointer-events: none; user-select: none; } /* ========================================================= TOP GOLD GUIDE ========================================================= */ .zeisha-about::after { content: ""; position: absolute; z-index: 1; top: 0; left: clamp(24px,5vw,82px); width: 1px; height: clamp(48px,5vw,68px); background: linear-gradient( to bottom, rgba(183,155,108,.88), transparent ); pointer-events: none; } /* ========================================================= MAIN SHELL ========================================================= */ .zeisha-about__shell { position: relative; z-index: 2; width: min(100%,1480px); margin: 0 auto !important; padding: clamp(68px,6vw,94px) clamp(28px,5vw,74px) clamp(78px,7vw,108px) !important; } /* ========================================================= STATS GRID ========================================================= */ .zeisha-about__stats { width: 100%; display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(14px,2vw,24px); margin: 0 0 clamp(60px,5.5vw,86px) 0 !important; } /* ========================================================= STAT CARD ========================================================= */ .zeisha-about__stat { position: relative; width: 100%; min-height: 145px; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center; padding: 25px 18px !important; background: rgba(255,255,255,.48); border: 1px solid rgba(183,155,108,.27); border-radius: 4px; overflow: hidden; transition: transform .55s cubic-bezier(.19,1,.22,1), border-color .4s ease, background .4s ease, box-shadow .4s ease; } /* ========================================================= STAT ACCENT ========================================================= */ .zeisha-about__stat::before { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 2px; transform: translateX(-50%); background: var(--za-gold); transition: width .6s cubic-bezier(.19,1,.22,1); } .zeisha-about__stat:hover { transform: translateY(-5px); background: rgba(255,255,255,.72); border-color: rgba(183,155,108,.50); box-shadow: 0 16px 36px rgba(29,48,40,.065); } .zeisha-about__stat:hover::before { width: 58px; } /* ========================================================= STAT NUMBER ========================================================= */ .zeisha-about__stat-number { margin: 0 0 7px 0 !important; } .zeisha-about__stat-number .elementor-heading-title { margin: 0 !important; padding: 0 !important; font-family: "El Messiri", Georgia, serif !important; font-size: clamp(42px,3.8vw,58px) !important; font-weight: 500 !important; line-height: 1 !important; letter-spacing: -.03em !important; color: var(--za-green) !important; } /* ========================================================= STAT LABEL ========================================================= */ .zeisha-about__stat-label, .zeisha-about__stat-label *, .zeisha-about__stat-label .elementor-widget-container, .zeisha-about__stat-label p { font-family: "DM Sans", Arial, sans-serif !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.45 !important; letter-spacing: .035em !important; color: var(--za-text) !important; } .zeisha-about__stat-label p { margin: 0 !important; } /* ========================================================= MAIN ABOUT LAYOUT DESKTOP ========================================================= */ .zeisha-about__main { position: relative; width: 100%; display: grid !important; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); align-items: center; gap: clamp(48px,6vw,96px); } /* ========================================================= LEFT VISUAL AREA ========================================================= */ .zeisha-about__visual { position: relative; width: 100%; max-width: 650px; min-height: clamp(520px,40vw,590px); } /* ========================================================= IMAGE BASE ========================================================= */ .zeisha-about__image { position: absolute !important; margin: 0 !important; max-width: 100%; } /* ========================================================= IMAGE WRAPPER ========================================================= */ .zeisha-about__image .elementor-widget-container { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--za-beige); } /* ========================================================= IMAGE ELEMENT ========================================================= */ .zeisha-about__image img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: center center; filter: saturate(.88) contrast(1.02) brightness(.99); transform: scale(1.02); transition: transform 1.15s cubic-bezier(.19,1,.22,1), filter .65s ease; } /* ========================================================= MAIN IMAGE ========================================================= */ .zeisha-about__image--main { z-index: 1; top: 0; left: 0; width: min(78%,510px) !important; height: clamp(430px,35vw,510px) !important; } .zeisha-about__image--main .elementor-widget-container { border-radius: 8px 100px 8px 8px; } /* ========================================================= MAIN IMAGE FRAME ========================================================= */ .zeisha-about__image--main::after { content: ""; position: absolute; z-index: -1; top: 11px; left: 11px; right: -9px; bottom: -9px; border: 1px solid rgba(183,155,108,.46); border-radius: 8px 100px 8px 8px; pointer-events: none; } /* ========================================================= OVERLAP IMAGE ========================================================= */ .zeisha-about__image--detail { z-index: 4; right: 0; bottom: 0; width: min(44%,290px) !important; height: clamp(270px,23vw,335px) !important; } .zeisha-about__image--detail .elementor-widget-container { border: 7px solid var(--za-ivory); border-radius: 62px 7px 7px 7px; } /* ========================================================= DETAIL FRAME ========================================================= */ .zeisha-about__image--detail::after { content: ""; position: absolute; z-index: -1; top: -7px; left: -7px; right: 7px; bottom: 7px; border: 1px solid rgba(152,169,149,.52); border-radius: 64px 8px 8px 8px; pointer-events: none; } /* ========================================================= IMAGE HOVER ========================================================= */ .zeisha-about__image:hover img { transform: scale(1.06); filter: saturate(.94) contrast(1.025) brightness(1); } /* ========================================================= RIGHT CONTENT ========================================================= */ .zeisha-about__content { position: relative; width: 100%; max-width: 620px; min-width: 0; } /* ========================================================= EYEBROW ========================================================= */ .zeisha-about__eyebrow { position: relative; margin: 0 0 17px 0 !important; padding-top: 13px; } .zeisha-about__eyebrow::before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 1px; background: var(--za-gold); transition: width .55s cubic-bezier(.19,1,.22,1); } .zeisha-about__content:hover .zeisha-about__eyebrow::before { width: 64px; } .zeisha-about__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(--za-green) !important; } /* ========================================================= MAIN TITLE ========================================================= */ .zeisha-about__title { width: 100%; max-width: 610px; margin: 0 0 19px 0 !important; } .zeisha-about__title .elementor-heading-title { margin: 0 !important; padding: 0 !important; max-width: 100%; font-family: "El Messiri", Georgia, serif !important; font-size: clamp(45px,4.4vw,68px) !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: -.035em !important; color: var(--za-deep) !important; text-wrap: balance; } /* ========================================================= DESCRIPTION WRAPPER ========================================================= */ .zeisha-about__description { width: 100%; max-width: 600px; margin: 0 0 28px 0 !important; } /* ========================================================= DESCRIPTION DM SANS 16PX ========================================================= */ .zeisha-about__description, .zeisha-about__description *, .zeisha-about__description .elementor-widget-container, .zeisha-about__description p, .zeisha-about__description span, .zeisha-about__description div, .zeisha-about__description strong, .zeisha-about__description em, .zeisha-about__description code { 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.7 !important; letter-spacing: 0 !important; word-spacing: 0 !important; text-transform: none !important; color: var(--za-text) !important; } .zeisha-about__description p { margin: 0 0 14px 0 !important; padding: 0 !important; } .zeisha-about__description p:last-child { margin-bottom: 0 !important; } /* ========================================================= BUTTON ========================================================= */ .zeisha-about__button { width: auto !important; max-width: 100%; margin: 0 !important; } .zeisha-about__button .elementor-button { position: relative; max-width: 100%; min-height: 55px; display: inline-flex !important; align-items: center; justify-content: center; overflow: hidden; padding: 17px 26px !important; border: 1px solid var(--za-green) !important; border-radius: 0 !important; background: var(--za-green) !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: .15em !important; text-transform: uppercase !important; color: var(--za-ivory) !important; transition: transform .5s cubic-bezier(.19,1,.22,1), border-color .4s ease, box-shadow .4s ease; } /* ========================================================= BUTTON EFFECT ========================================================= */ .zeisha-about__button .elementor-button::before { content: ""; position: absolute; z-index: 0; inset: 0; background: var(--za-gold); transform: scaleX(0); transform-origin: right; transition: transform .6s cubic-bezier(.19,1,.22,1); } .zeisha-about__button .elementor-button:hover::before { transform: scaleX(1); transform-origin: left; } .zeisha-about__button .elementor-button:hover { border-color: var(--za-gold) !important; color: var(--za-deep) !important; transform: translateY(-3px); box-shadow: 0 14px 30px rgba(29,48,40,.11) !important; } .zeisha-about__button .elementor-button-content-wrapper { position: relative; z-index: 2; } .zeisha-about__button .elementor-button-text::after { content: "→"; display: inline-block; margin-left: 11px; font-size: 15px; transition: transform .4s cubic-bezier(.19,1,.22,1); } .zeisha-about__button .elementor-button:hover .elementor-button-text::after { transform: translateX(5px); } /* ========================================================= LARGE TABLET / SMALL LAPTOP 1025PX - 1180PX KEEP 2 COLUMNS BUT MORE FLEXIBLE ========================================================= */ @media (min-width:1025px) and (max-width:1180px) { .zeisha-about__shell { padding: 64px 34px 76px !important; } .zeisha-about__main { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 46px; } .zeisha-about__visual { min-height: 510px; } .zeisha-about__image--main { width: 76% !important; height: 440px !important; } .zeisha-about__image--detail { width: 42% !important; height: 285px !important; } .zeisha-about__title .elementor-heading-title { font-size: clamp(42px,4.6vw,58px) !important; } } /* ========================================================= TABLET 768PX - 1024PX IMPORTANT: MAIN ABOUT AREA BECOMES 1 COLUMN ========================================================= */ @media (min-width:768px) and (max-width:1024px) { .zeisha-about__shell { padding: 58px clamp(28px,5vw,48px) 72px !important; } /* ===================================================== STATS ===================================================== */ .zeisha-about__stats { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 54px !important; } .zeisha-about__stat { min-height: 120px; padding: 19px 12px !important; } .zeisha-about__stat-number .elementor-heading-title { font-size: clamp(35px,5vw,46px) !important; } .zeisha-about__stat-label, .zeisha-about__stat-label * { font-size: 12px !important; } /* ===================================================== MAIN SECTION STACK THIS FIXES TABLET OVERFLOW ===================================================== */ .zeisha-about__main { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 48px !important; width: 100%; } /* ===================================================== VISUAL ===================================================== */ .zeisha-about__visual { width: min(100%,620px); max-width: 620px; min-height: 510px; margin: 0 auto; flex: none !important; } .zeisha-about__image--main { width: 75% !important; max-width: 460px !important; height: 440px !important; } .zeisha-about__image--detail { width: 40% !important; max-width: 250px !important; height: 285px !important; } /* ===================================================== CONTENT ===================================================== */ .zeisha-about__content { width: min(100%,680px); max-width: 680px; margin: 0 auto; align-self: center; } .zeisha-about__title { width: 100%; max-width: 650px; } .zeisha-about__title .elementor-heading-title { font-size: clamp(45px,6.5vw,60px) !important; line-height: .98 !important; } /* DESCRIPTION REMAINS 16 */ .zeisha-about__description { width: 100%; max-width: 650px; } .zeisha-about__description, .zeisha-about__description * { font-family: "DM Sans", Arial, sans-serif !important; font-size: 16px !important; line-height: 1.68 !important; } } /* ========================================================= MOBILE MAX 767PX ========================================================= */ @media (max-width:767px) { .zeisha-about::before { font-size: 100px; top: 45%; right: -18px; } .zeisha-about__shell { padding: 52px clamp(18px,5.5vw,26px) 62px !important; } /* ===================================================== STATS ===================================================== */ .zeisha-about__stats { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-bottom: 44px !important; } .zeisha-about__stat { min-height: 105px; padding: 15px 6px !important; } .zeisha-about__stat-number .elementor-heading-title { font-size: clamp(27px,8vw,36px) !important; } .zeisha-about__stat-label, .zeisha-about__stat-label *, .zeisha-about__stat-label p { font-size: 10px !important; line-height: 1.3 !important; letter-spacing: 0 !important; } /* ===================================================== MAIN STACK ===================================================== */ .zeisha-about__main { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 40px !important; width: 100%; } /* ===================================================== VISUAL ===================================================== */ .zeisha-about__visual { width: 100%; max-width: 560px; min-height: clamp(390px,105vw,475px); margin: 0 auto; } .zeisha-about__image--main { width: 80% !important; max-width: none !important; height: clamp(340px,88vw,415px) !important; } .zeisha-about__image--main .elementor-widget-container { border-radius: 6px 74px 6px 6px; } .zeisha-about__image--main::after { border-radius: 6px 74px 6px 6px; } .zeisha-about__image--detail { width: 43% !important; max-width: none !important; height: clamp(215px,58vw,275px) !important; right: 0; bottom: 0; } .zeisha-about__image--detail .elementor-widget-container { border-width: 5px; border-radius: 48px 5px 5px 5px; } /* ===================================================== CONTENT ===================================================== */ .zeisha-about__content { width: 100%; max-width: 100%; margin: 0; } .zeisha-about__title { width: 100%; max-width: 100%; } .zeisha-about__title .elementor-heading-title { font-size: clamp(40px,11.5vw,53px) !important; line-height: .99 !important; } /* ===================================================== DESCRIPTION ALWAYS 16PX ===================================================== */ .zeisha-about__description { width: 100%; max-width: 100%; margin-bottom: 25px !important; } .zeisha-about__description, .zeisha-about__description * { font-family: "DM Sans", Arial, sans-serif !important; font-size: 16px !important; line-height: 1.65 !important; } /* ===================================================== BUTTON ===================================================== */ .zeisha-about__button { max-width: 100%; } .zeisha-about__button .elementor-button { max-width: 100%; white-space: normal !important; } } /* ========================================================= SMALL MOBILE MAX 480PX STATS BECOME 1 COLUMN TO AVOID CROWDING ========================================================= */ @media (max-width:480px) { .zeisha-about__shell { padding: 48px 16px 58px !important; } /* ===================================================== STATS ===================================================== */ .zeisha-about__stats { grid-template-columns: 1fr; gap: 9px; margin-bottom: 40px !important; } .zeisha-about__stat { min-height: 92px; padding: 15px 16px !important; } .zeisha-about__stat-number .elementor-heading-title { font-size: 34px !important; } .zeisha-about__stat-label, .zeisha-about__stat-label *, .zeisha-about__stat-label p { font-size: 12px !important; } /* ===================================================== VISUAL ===================================================== */ .zeisha-about__visual { min-height: clamp(365px,108vw,430px); } .zeisha-about__image--main { width: 81% !important; height: clamp(320px,92vw,375px) !important; } .zeisha-about__image--detail { width: 45% !important; height: clamp(205px,60vw,245px) !important; } /* ===================================================== TITLE ===================================================== */ .zeisha-about__title .elementor-heading-title { font-size: clamp(38px,11.7vw,48px) !important; } /* ===================================================== DESCRIPTION STILL 16PX ===================================================== */ .zeisha-about__description, .zeisha-about__description * { font-size: 16px !important; } /* ===================================================== BUTTON FULL WIDTH ===================================================== */ .zeisha-about__button { width: 100% !important; } .zeisha-about__button .elementor-button { width: 100% !important; min-height: 54px; padding: 16px 18px !important; font-size: 10px !important; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width:360px) { .zeisha-about__shell { padding-left: 14px !important; padding-right: 14px !important; } .zeisha-about__title .elementor-heading-title { font-size: 36px !important; } .zeisha-about__description, .zeisha-about__description * { font-size: 16px !important; } .zeisha-about__visual { min-height: 350px; } .zeisha-about__image--main { height: 310px !important; } .zeisha-about__image--detail { height: 200px !important; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .zeisha-about *, .zeisha-about *::before, .zeisha-about *::after { animation: none !important; transition: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f1d2c17 *//* ========================================================= 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-77c9a39 *//* ========================================================= 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 container, class: .elementor-element-bf93c34 *//* ========================================================= 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-f88801c *//* ========================================================= 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 */