/* 
Theme Name: Twenty Twenty Four Child 
Theme URI: https://scorpiaelysium.com/
Description: Twenty Twenty Four Child Theme
Theme Author: Your Name
Author URI: https://scorpiaelysium.com/
Template: twentytwentyfour 
Version: 1.0.0
Text Domain: twentytwentyfour-child
License: GNU General Public License or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
*/

.project-mobile .n2-ss-slider .n2-ss-slider-controls-absolute-center-bottom{
	flex-flow: nowrap;
    justify-content: center !important;
}

.hl-app .form-builder--wrap{
	padding: 0px !important;
}

#maps {
  position: relative !important;
}

.scorpia-gallery-inex .swiper-pagination-bullet {
    background: #fff !important;
    padding: 8px;
    border-color: black;
    border: 1px solid black;
	position: relative;
}

.scorpia-gallery-inex img{
	margin-bottom: 0px !important;
	height: 80% !important;
}

/* .imagine-this-gallery .swiper-slide.swiper-slide-active img{
	transform: scale(1.6)!important;
}
 */

.imagine-this-gallery .ts-navigation {
	top: 55% !important;
	position: absolute !important;
}

.scorpia-gallery-inex .swiper-slide-inner{
	width: 100% !important;
}

.scoria-villa .swiper-slide img,
.imagine-this-gallery .swiper-slide img,
.scorpia-villa-pagination .swiper-slide img{
	margin-bottom: 0px !important;
}
 
.scorpia-gallery-inex .swiper-pagination-bullet::after {
    content: "";
    width: 8px;
    height: 8px;
    background: #000000; /* warna lingkaran kecil */
    border-radius: 50%;
    opacity: 0; /* default sembunyi */
    transition: all 0.3s ease;
	position: absolute;
    left: 26%;
    top: 25%;
  }

.scorpia-gallery-inex .swiper-pagination-bullet-active::after {
	opacity: 1;
}

.page-id-3424 #faq .e-n-tabs-heading{
	display: none !important;
}

.elementor-3627 .elementor-element.elementor-element-2658440.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-3627 .elementor-element.elementor-element-2658440.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover,
.elementor .elementor-element.elementor-widget-n-tabs:not(:has(>.elementor-widget-container))>.e-n-tabs[data-touch-mode=false]>.e-n-tabs-heading .e-n-tab-title[aria-selected=false]:hover, .elementor .elementor-element.elementor-widget-n-tabs>.elementor-widget-container>.e-n-tabs[data-touch-mode=false]>.e-n-tabs-heading .e-n-tab-title[aria-selected=false]:hover{
	
	background-color: transparent !important;
}

html, body {    
/* 	scroll-snap-type: y mandatory; */
    scroll-behavior: smooth;
/* 	scroll-snap-stop: always; */
}

/* .snap-section {  
	scroll-snap-align: start;
	scroll-snap-stop: always;
	display: flex;
	align-items: center;
	justify-content: center;
} */

.snap-section.new-age{
	align-items: unset !important;
}

.snap-section:has(#imagine-this) {
  display: block !important;
}

html:has(#faq), 
bodyhas(#faq) {    	
    height: auto !important;
}

.last-text-new-age{
	top: -50px;
}


.scorpia-villa-pagination .elementor-swiper-button{
	background: black;
    border-radius: 50%;
    padding: 8px;
	top: 30% !important;
}

.zamaya-villa-pagination .elementor-swiper-button{
	background: black;
    border-radius: 50%;
    padding: 8px;
	top: 50% !important;
}

.scorpia-gallery-inex .elementor-swiper-button{
	background: black;
    border-radius: 50%;
    padding: 8px;
}

.villa-exin-carousel img,
.zamaya-villa-pagination img{
	margin-bottom: 0px !important;
}

.villa-exin-carousel .elementor-image-carousel-caption{
	position: absolute;
    bottom: 5%;
    left: 4%;
}

@import url("https://fonts.googleapis.com/css2?family=Oxanium:wght@700&family=Great+Vibes&display=swap");
@property --k {
	syntax: "<number>";
	initial-value: 0;
	inherits: true;
}
html {
	overflow-x: hidden;   
	scroll-behavior: smooth;
}

.snap-scroll{
	overflow-y: hidden;
	scroll-snap-type: y mandatory;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
}

.snap-scroll > .e-con-inner > .elementor-element {  	
	scroll-snap-align: center;
}

.h-scroll {
	height: 500vh;      
}
@supports (animation-timeline: view()) {
	.h-scroll {        
		animation: k 1s both;
		animation-timeline: view();
		animation-range: contain;
	}
}

@keyframes k {
	to {
		--k: 1 ;
	}
}    

.stick .wrap img {
	width: min(30vmax, 70vmin);
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 5px;
}

.h-scroll .stick {
	box-sizing: border-box;
	display: grid;
	align-content: center;
	container-type: inline-size;
	position: sticky;
	top: 0;
	padding: 2em;
	height: 100vh;
}

.h-scroll .stick h2{
	font-size: 40px;
	font-weight: 200;
	font-family: 'DM Sans';
}

.h-scroll .wrap {
	display: grid;
	grid-auto-flow: column;
	grid-gap: 2em;
	translate: calc(var(--k)*(50cqw - 100%));
}

aside {
	position: fixed;
	bottom: 0;
	padding: 1em;
}

.box-info-scrollani {
	margin: 1em;      
	padding: 1em;               
}
@supports (animation-timeline: view()) {
	.box-info-scrollani {
		display: none;
	}
}

kbd {
	padding: 2px;
}  


body {
    background-color: #F8F7F5 !important;
	overflow-x: clip !important;
	overscroll-behavior-x: none;
}

.faq p{
	color: #5C5C5C !important;
	font-size: 16px !important;
	font-weight: 300 !important;
}

.n2-ss-slider h3{
	font-size: 22px !important;
}

.n2-ss-slider p{
	font-size: 16px !important
}

nav ul li a:hover{
	text-decoration: underline !important;
}

.slide-maps img,
.courusel-viila img{
	margin-bottom: 0px !important;
}


/* Contact Form 7 */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea {
  width: 100%;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #ddd;  
  font-size: 14px;
}

.wpcf7-form textarea {
  min-height: 120px;
}

.wpcf7-form input[type="submit"] {
  background-color: #000;
  color: #fff;
  padding: 14px;
  border: none;
  border-radius: 4px;
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
}

.wpcf7-form input[type="submit"]:hover {
  background-color: #333;
}
/*  */

/*  .timeline-container {	 
	 margin: auto;
	 padding: 40px 20px;
	 position: relative;
}

.timeline-line {
	position: absolute;
	top: 82px;
	left: 0;
	right: 0;
	height: 2px;
	background: #000;
	z-index: 0;
} */

/* Slider wrapper */
/* .slider-wrapper {
	position: relative;
	overflow: hidden;
	z-index: 1;
	padding-bottom: 40px;
}

.slider {
	display: flex;
	transition: transform 0.5s ease-in-out;
}

.slide {
	flex: 0 0 25%; 
	text-align: center;
	padding: 10px;
	position: relative;
}

.time {
	font-weight: bold;
	font-size: 14px;
	margin-bottom: 5px;
}

.bullet {
	width: 12px;
	height: 12px;
	background: #000;
	border-radius: 50%;
	margin: 5px auto;
	position: relative;
	z-index: 2;
}

.caption {
	font-size: 14px;
	letter-spacing: 1px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.slide img {
	width: 100%;
	border-radius: 10px;
}

.nav-buttons-bottom {
    position: absolute;
    bottom: 0px;       
    right: 10px;        
    display: flex;
    gap: 6px;           
    z-index: 10;
}

.nav-button {
    background: #fff;
    color: #000;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background 0.3s;
}

.nav-button:hover {
    background: #fff;
}
  */

.swiper {
    width: 100%;    
    margin: auto;
  }

.swiper-slide {
  display: block;
  justify-items: center;
  height: 280px;
  transition: height 0.6s ease;
  font: 600 16px/1.2 system-ui, sans-serif;
  background-position: center;
  background-size: cover;
  width: 280px;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%; 
  object-fit: cover;
  border-radius: 10px;
	margin-bottom: 180px;
}

.swiper-slide.animate-height {
  height: 360px;
}

.timeline-line {
	position: absolute;
	top: 27px;
	left: 0;
	right: 0;
	height: 2px;
	background: #000;
	z-index: 0;
}


.time {
	font-weight: 300;
	font-size: 14px;
	margin-bottom: 5px;
}

.bullet {
	width: 12px;
	height: 12px;
	background: #000;
	border-radius: 50%;
	margin: 5px auto;
	position: relative;
	z-index: 2;
}

.caption {
	font-size: 14px;
	letter-spacing: 1px;
	margin-top: 10px;
	margin-bottom: 20px;
	font-weight: 300;
}

/* Target Safari saja */

/* Hanya Safari */
@supports (-webkit-touch-callout: none) and (not (translate: none)) {
	.main-pepito-first,
	.main-pepito-second,
	.main-nirvana,
	.main-scorpia,
	.main-pepito-second,
	.main-montessori,
	.main-siloam,
	.main-ngurah-rai,
	.main-batu-bolong,
	.main-bingin,
	.main-istana,
	.main-uluawatu {
		transform: translate(10%, 50%);
	}
}


    @media only screen and (min-width:1100px) and (max-width:1450px) {
    .bg-f {
      width: 70%;
    }
    
    .elementor-14 .elementor-element.elementor-element-ae24abe {
      bottom: 52%;
    }
    
    .elementor-14 .elementor-element.elementor-element-75c1a11 {
      top: 17%;
    }
    
    .elementor-14 .elementor-element.elementor-element-7cee3b4,
    .elementor-14 .elementor-element.elementor-element-7b58a6b {
      bottom: 51%;
    }
    
    .elementor-14 .elementor-element.elementor-element-76dfd6e {
      bottom: 54%;
    }
    
    .elementor-14 .elementor-element.elementor-element-f7235dc {
      bottom: 53%;
      left: 85%;
    }
    
    .elementor-14 .elementor-element.elementor-element-0b4ba59 {
      top: 44%;
    }
    
    .elementor-14 .elementor-element.elementor-element-8e0ef31 {
      bottom: 32%;
    }
  }


/* text hover */
a.effect-underline:after {
	content: '';
	position: absolute;
	left: 0;
	display: inline-block;
	height: 1em;
	width: 100%;
	border-bottom: 1px solid;
	margin-top: 10px;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
}

a.effect-underline:hover:after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

.swiper-button-next, 
.swiper-button-prev{
	color: black;	
	position: unset !important;
}

.swiper-buttons-wrapper{
	position: relative;
    display: flex;
    justify-content: flex-end;
	margin-top: 0px;
	gap: 4px;	
}

.swiper-buttons-wrapper-discover{
	position: relative;
    display: flex;
    justify-content: flex-end;
	margin-top: 30px;
	gap: 5px;
	align-items: flex-end;
	top: 27px;	
}

.swiper-buttons-wrapper-discover .swiper-button-next,
.swiper-buttons-wrapper-discover .swiper-button-prev{
	padding-top: 90px;
}

.swiper-button-next svg, 
.swiper-button-prev svg{
	display: none !important;
}

.swiper-button-next:after, 
.swiper-button-prev:after {    
    font-size: 16px !important;
    background: white;
    padding: 8px;
    border-radius: 50%;
}

.n2-ss-slider .n2-ss-text,
.n2-ss-slider p,
.n2-ss-slider .n2-ow{
	font-family: "DM Sans", Sans-serif !important;
}

.n2-ss-slider a.n2-ow:hover{
	background: transparent !important;
	border: 1px solid black !important;
	color: black !important;
}

.n2-ss-slider .n2-ss-item-image-content img,
.n2-ss-slider .n2-ow{
	border-radius: 10px !important;
}

.elementor-widget-n-tabs .e-n-tab-title[aria-selected=true],
.elementor-widget-n-tabs .e-n-tab-title:hover{
	text-decoration: underline;
}

.elementor-widget-n-tabs .e-n-tab-title[aria-selected=false],
.elementor-widget-n-tabs .e-n-tab-title[aria-selected=true]{    
    cursor: pointer !important;
}

.bounce {
	transition: transform 0.4s ease, opacity 0.4s ease;
}

.bounce:hover {
	transform: scale(1.05);
	opacity: 0.95;
}

.bounce.fixed,
.zamaya-hover-content.fixed,
.scorpia-hover-content.fixed{
  	position: fixed;
}

.zamaya-hover-content .swiper-slide,
.scorpia-hover-content .swiper-slide{
	height: auto !important;
}

.zamaya-hover-content,
.scorpia-hover-content{
  	opacity: 0;
}

.bali-map:has(.zamaya-hover:hover) .uluwatu,
.bali-map:has(.zamaya-hover:hover) .uluwatu-time,
.bali-map:has(.scorpia-hover:hover) .uluwatu,
.bali-map:has(.scorpia-hover:hover) .uluwatu-time{
	opacity: 0;
}

.bali-map:has(.zamaya-hover:hover) .zamaya-hover-content,
.bali-map:has(.scorpia-hover:hover) .scorpia-hover-content{
  	opacity: 1;
}

@media only screen and (max-width: 900px){
	.timeline-container .slide{
		flex: 0 0 100%;
	}
	
	.scorpia-villa-pagination .elementor-swiper-button{		
		top: 48% !important;
	}
	
	.timeline-container .caption {
    	font-size: 14px;
	}
	
	.scorpia-gallery-inex img{
		height: 100% !important;
	}
	
	.elementor-element .swiper .elementor-swiper-button, 
	.elementor-element .swiper~.elementor-swiper-button, 
	.elementor-lightbox .swiper .elementor-swiper-button, 
	.elementor-lightbox .swiper~.elementor-swiper-button{
		font-size: 14px !important;	
	}
	
	.elementor-image-carousel-caption{
		font-size: 16px !important;
		bottom: 13% !important;
	}
	
	.scorpia-gallery-inex .swiper-pagination{
		display: none !important;
	}
}

@media only screen and (min-width: 1500px){
	.istana{
		left: 48% !important;
		top: 30% !important;
	}
	
	.scorpia-bingin{
		bottom: 17% !important;
	}
	
	.scorpia-uluwatu{
		bottom: 53% !important;
	}
	
	.main-pepito-first{
		top: 40% !important;		
	}
	
	.main-montessori{
		right: 66% !important;
		bottom: 46% !important;
	}
	
	.main-batu-bolong{
		bottom: 23% !important;
	}
	
	.main-siloam{
		left: 32% !important;
		bottom: 47% !important;
	}
	
	.main-pepito-second {
		bottom: 48% !important;
	}
	
	.main-scorpia{
		top: 18% !important;
	}
	
	.main-bingin{
		bottom: 45% !important;
	}
	
	.main-istana,
	.main-uluawatu {
		bottom: 48% !important;
	}		
}

@media (max-width: 1024px) {
	html, body{
		max-width: 100%;
		overflow-x: hidden !important;
		touch-action: pan-y;
		overscroll-behavior-x: none;
	}
}

.scorpia-gallery-inex .swiper-slide{
	display: grid !important;
	margin-bottom: 0px !important;
}

.elementor-image-carousel-caption{
	position: absolute;
    z-index: 99999;
    bottom: 30%;
    left: 3%;
}

.scorpia-gallery-inex .swiper-pagination{
	bottom: 25% !important;
}

.whatsapp-btn{
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: #25D366;
	color: #fff;
	font-size: 22px;
	padding: 12px 18px;
	border-radius: 50%;
	cursor: pointer;
	z-index: 9999;
	user-select: none;
	transition: background 0.3s ease;
}

.whatsapp-btn a i{
	color: white;
}

.mute-btn {
	position: fixed;
	bottom: 90px;
	right: 20px;
	background: rgba(0,0,0,0.6);
	color: #fff;
	font-size: 22px;
	padding: 12px 14px;
	border-radius: 50%;
	cursor: pointer;
	z-index: 9999;
	user-select: none;
	transition: background 0.3s ease;
}

.mute-btn:hover {
  	background: rgba(0,0,0,0.85);
}

@media (min-width: 1024px) and (max-height: 768px) and (orientation: landscape) {  
	.banner-home{
		background-attachment: inherit !important;
	}
}