body{
	background-color:white;
	
}


#cboxOverlay{
	
	opacity:1 !important;
}



a{
	color:black;
	text-decoration:none;
	 
}



sup {font-size:xx-small !important; vertical-align:super;}

 .swiper {
      width: 100%;
      height: 100%;
	  z-index:1;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
	  order:1;
    }

/*
    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
	*/
	
	/* Make both images and videos fill the slide consistently */
.swiper-slide img,
.swiper-slide video {
	display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* This crops to fill the area */
}






	
	

    .swiper-slide {
      width: 70%;
    }
	
	
	.mySwiperParallax.swiper {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 80vh;
  overflow: hidden;             /* needed for parallax clipping */
  position: relative;
  z-index: 1;
  padding-bottom: 20px;         /* room for pagination */
}

/* Slide sizing */
.mySwiperParallax .swiper-slide {
  width: 100%;                  /* full width for parallax */
  overflow: hidden;             /* keep parallax content inside */
}

/* Video fills the slide */
.mySwiperParallax .swiper-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

/* Prevent video/caption from eating touch events */
.mySwiperParallax .swiper-slide video,
.mySwiperParallax .carousel-caption {
  pointer-events: none;
}

/* Optional: re-enable pointer events on active video */
.mySwiperParallax .swiper-slide-active video {
  pointer-events: auto;
}

	
	
	
	
	
	
	

.swiper-pagination-bullet {
      width: 55px;
      height: 8px;
	  border-radius: 0px;
	  border: solid 1px white;
	  background-color: #a4ce4c;
	  transform: skew(-25deg);
	  
	  
}


/* Slide captions */
.slide-captions {
	position: absolute;
	top: 50%;
	left: 15%;
	color: #FFF;
	z-index: 999;
	transform: translateY(-50%);
}
.slide-captions .current-title {
	font-size: 48px;
}
.slide-captions .current-subtitle {
	font-size: 28px;
}








/*@media (prefers-reduced-motion: no-preference) {}*/

  .showxpilot {
	display:block !important;
    animation: imganim .5s linear both;
	opacity: 0.95;
  }


@media only screen and (max-width: 1080px) {
 /* .showxpilot {
	display:none !important;
  }*/
}

@keyframes imganim {
from {transform: scale(15);}
to {transform: scale(1.1);}
}

.videoheromain{

width:100%;
height:auto;
	
}

.videoxngp{

width:100%;
height:auto;
	
}

.videosmart{

width:100%;
height:auto;
	
}

.videohero{

width:100%;
height:auto;
	
}

.videoheroxpilot{

width:100vw;
height:auto;
	
}

#performanceimg{

width:100vw;
height:auto;	
	
}


#redefine{
	
top:10%;
	
}


#interiorimg{

width:100vw;
height:auto;	
	
}



#encoreimg{
width:100vw;
height:auto;
}


#intelligenceimg{

width:100vw;
height:auto;	
	
}

#appimg{
width:100vw;
height:auto;
}




.transform3d-1{
	
	 transform:
    perspective(75em)
    rotateX(25deg)
	 rotateY(-10deg);
  box-shadow:rgba(22, 31, 39, 0.42) 0px 60px 123px -25px,
  border-radius: 10px;
 /* border: 1px solid;
  border-color:black;*/
 padding-right:0px;
 padding-left:0px;
 z-index:8000;
	
}


.transform3d-2{
	
	 transform:
    perspective(75em)
    rotateX(-30deg);
	rotateZ(30deg);
  box-shadow:
     rgba(0, 0, 0, 0.024) 0px 0px 0px 1px,
  border-radius: 10px;
  /*border: 1px solid;
  border-color:black;*/
  padding-right:0px;
 padding-left:0px;
z-index:8000;	
	
}


.transform3d-3{
	
	 transform:
    perspective(190em)
    rotateX(-20deg)
	rotateY(30deg);
  box-shadow:
     rgba(0, 0, 0, 0.024) 0px 0px 0px 1px,
    rgba(0, 0, 0, 0.05) 0px 1px 0px 0px,
    rgba(0, 0, 0, 0.03) 0px 0px 8px 0px,
    rgba(0, 0, 0, 0.1) 0px 20px 30px 0px;
  border-radius: 10px;
  /*border: 1px solid;*/
  /*border-color:black;*/
	 padding-right:0px;
 padding-left:0px;
	
	
}



.transform3d-180{
	
	 transform:
	
	rotateZ(-30deg);
	translate: 250px -30px;
 padding-left:0px;
 z-index:1;	
	
}


.transform3d-cool{
	
 animation: cooltpr 7s ease forwards;
 padding-left:0px;
 z-index:1;	
	
}


@-webkit-keyframes cooltpr {
    0% { transform: rotateZ(-30deg); translate: 550px -170px; }
    100% { transform: rotateZ(0deg); translate: 0px 0px; }
}
@keyframes cooltpr {
  0% { transform: rotateZ(-30deg); translate: 550px -170px; }
    100% { transform: rotateZ(0deg); translate: 0px 0px; }
}

.transform-smartvid{

 animation: coolsmartvid 5s ease forwards;
 padding-left:0px;
 z-index:1;	
	
}

@-webkit-keyframes coolsmartvid {
    0% { transform: rotateX(-30deg); rotateZ(-30deg); translate: -550px 150px; }
    100% { transform: rotateX(0deg); rotateZ(0deg); translate: 0px 0px; }
}
@keyframes coolsmartvid {
  0% { transform: rotateX(-30deg);  rotateZ(-30deg); translate: -550px 150px; }
    100% { transform: rotateX(0deg); rotateZ(0deg); translate: 0px 0px; }
}








.transform3d-1 img {
	
	width:100%;
	height:auto;
}

.transform3d-2 img {
	
	width:100%;
	height:auto;
}

.transform3d-3 img {
	
	width:100%;
	height:auto;
}


.movingphototext{
top: 50%; 
transform: translateY(-50%);
bottom: initial;
}


.aspec {
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.15em;
  
  display: inline-block;
  padding: 15px 20px;
  position: relative;
  
  font-size:20px;
}

.aspec:after {    
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #a4ce4c;
  width: 0;
}

.aspec:hover { 
  cursor: pointer; 
}

.aspec:hover:after { 
  animation: lineExpand 1s ease forwards;
  color: #fff !important;
}

@keyframes lineExpand {
  0% {
    width: 0;
    left: 50%;
  }
  100% {
    width: 100%;
    left: 0;
  }
}


/* Final state class */
.aspec.specactive:after {
  width: 100%;
  left: 0;
}


.specheader{
color:#b2ac98;
line-height: 100%;
}

.specnumber{
color:white;	
line-height: 100%;
}


.carousel-item img{
	
	width:75%;
	height:auto;
	
}

.carousel-indicators {
  margin-bottom: -45px; /* Adjust the position of the indicators */
}

.carousel-indicators li {
  height:10px;
  width:10%;
  /*border: 1px solid grey;
   border-radius: 25px;*/
}

.carousel-indicators li.active{
 /*border: 3px solid #a4ce4c;*/
}

.carousel-caption{
	 margin-bottom: -50px;
	 font-size:1.2em;
}




img.updown {
    -webkit-animation: mover 5s infinite  alternate;
    animation: mover 5s infinite  alternate;
}

@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translate(-30px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-30px); }
}

img.leftright {
    -webkit-animation: mover2 5s infinite  alternate;
    animation: mover2 5s infinite  alternate;
}



@-webkit-keyframes mover2 {
    0%,30% { transform: translateX(0px);opacity: 1; }
    90%,100% { transform: translateX(80px);opacity: 0; }
}
@keyframes mover2 {
    0%,40% { transform: translateX(0px);opacity: 1; }
    80%,100% { transform: translateX(80px);opacity: 0; }
}


img.rightleft {
    -webkit-animation: mover3 5s infinite  alternate;
    animation: mover3 5s infinite  alternate;
}


@-webkit-keyframes mover3 {
   0%,30% { transform: translateX(80px);opacity: 0; }
    90%,100% { transform: translateX(0px);opacity: 1; }
}
@keyframes mover3 {
   0%,30% { transform: translateX(80px);opacity: 0; }
    90%,100% { transform: translateX(0px);opacity: 1; }
}





img.zoominout{
z-index:1;
/*border-radius:150px;*/
overflow:hidden;
  -webkit-animation: zoom-in-zoom-out 8s ease infinite alternate;
  animation: zoom-in-zoom-out 8s ease infinite alternate;
}

video.zoominout{
z-index:1;
/*border-radius:20%;*/
overflow:hidden;
  -webkit-animation: zoom-in-zoom-out 5s ease infinite alternate;
  animation: zoom-in-zoom-out 5s ease infinite alternate;
}





@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(0.8, 0.8);
  }
  50% {
    transform: scale(0.9, 0.9);
  }
  100% {
    transform: scale(0.8, 0.8);
  }
}



img.circleme {
z-index:999;
  -webkit-animation: circleani 8s ease infinite alternate;
  animation: circleani 8s ease infinite alternate;	
	
}

  @keyframes circleani { 
            0% { 
                transform: rotate(0deg)  
                      translateY(200px) rotate(0deg); 
            } 
  
            100% { 
                transform: rotate(360deg)  
                      translateZ(300px) rotate(-360deg); 
            } 
        } 




.mitt{font-size:1.5em;text-shadow: 1px 1px black;text-align:left;padding-left:150px;padding-right:40%;}

.mittone{font-size:1.5em;text-shadow: 1px 1px black;text-align:left;padding-left:150px;padding-right:40%;margin-top:-5%;}

.mipt{font-size:1.0em;text-shadow: 1px 1px black;text-align:left;padding-left:150px;padding-right:40%;}





/*Ain boleh tukar sini for caption for Xpilot*/

.mycarousel{
position:absolute;
top:30%;
left:50px;
}

.aifacaptionhead{
	

font-size:1.2em;
color:black;
text-shadow: 2px solid white;
text-align:left;
padding-left:0px;
padding-right:20%;
	
}

.aifacaptiontext{

font-size:0.7em;	
color:black;
text-shadow: 2px solid white;
text-align:left;
padding-left:0px;
padding-right:20%;
	
}


@media only screen and (max-width: 1680px) {
	
.safetytxt .xtitlesm{
	
	font-size:0.7em !important;
}

.safetytxt .xpara{
	
	font-size:0.7em !important;
}

.safecontent{
	
	max-width:80vw !important;
}

#warrantyxpimg{
	
top:40% !important;

}

#mystarship{
	top:130px !important;
}

.xtitle{
	font-size:2.3em !important;
}


.aifacaptionhead{
	

font-size:0.8em;
color:black;
text-shadow: 2px solid white;
text-align:left;
padding-left:0px;
padding-right:0px;

	
}

.aifacaptiontext{

font-size:0.7em;	
color:black;
text-shadow: 1px solid white;
text-align:left;
padding-left:0px;
padding-right:0px;
	
}


.carousel-caption{
	left:10%;
	right:10%;
	
}


	
}


@media only screen and (max-width: 1360px) {
	
.safetytxt .xtitlesm{
	
	font-size:0.6em !important;
}

.safetytxt .xpara{
	
	font-size:0.6em !important;
}
	
.xtitlesmclear
{
	font-size:1.7em !important;
}

#buttonex{
	
	bottom:15% !important;
	
}


#redefine{
top:5%;
left:5%;
right:5%;
}



.movingphototext{
top: 50%; 
transform: translateY(-50%);
bottom: initial;
left:5%;
right:5%;
}


.mitt{font-size:1.5em;text-shadow: 1px 1px black;text-align:left;padding-left:100px;padding-right:40%;}

.mipt{font-size:1.0em;text-shadow: 1px 1px black;text-align:left;padding-left:100px;padding-right:40%;}






}

@media only screen and (max-width:1280px) {
	
	.seats{
	width:80% !important;	
	
	}
	
	#tinterior{
		
		margin-bottom:0px !important;
		
	}
	

}


@media only screen and (max-width:1024px) {
	
		
	
#leftrightbody , #rightleftbody{
	
	top:30% !important;
	
}
	

#safetycontent{
	
	max-width:90vw !important;
}
	
	
.swiper-slide { width: 100%; }
	
	
#firstinterior{
	
	margin-bottom:100px !important;
	
}
	
	
#star{
	
	
	display:none !important;


}


#starmb{
   display:block !important;
}


#starimg1{
   content:url("/images/x9-2026/hero/ext-1.jpg");
	width:80vw;
	height:auto;
}

#starimg2{
   content:url("/images/x9-2026/hero/ext-2.jpg");
   width:80vw;
   height:auto;
}	






@-webkit-keyframes mover2 {
    0%,30% { transform: translateX(0px);opacity: 1; }
    80%,100% { transform: translateX(-50px);opacity: 0; }
}
@keyframes mover2 {
    0%,30% { transform: translateX(0px);opacity: 1; }
    80%,100% { transform: translateX(-50px);opacity: 0; }
}


@-webkit-keyframes mover3 {
   0%,30% { transform: translateX(-50px);opacity: 0; }
    80%,100% { transform: translateX(0px);opacity: 1; }
}
@keyframes mover3 {
   0%,30% { transform: translateX(-50px);opacity: 0; }
    80%,100% { transform: translateX(0px);opacity: 1; }
}
	
	
	

#radarbody{
margin-left:2px;
}

#titleex{
top:5% !important;
}





#encoreimg{

   content:url("/images/x9-2026/mob/main.jpg");
	width:100vw;
	height:auto;

}

#xngpimg{
    content:url("/images/x9/banner/0725-m-comfort-banner-2.jpg");
	width:100vw;
	height:auto;
}

#safetyimg{
	 content:url("/images/x9-2026/mob/safety.jpg");
	width:100vw;
	height:auto;
}

#interiorimg{

   content:url("/images/x9-2026/mob/int.jpg");
	width:100vw;
	height:auto;
	
	

}

#effortimg{

   content:url("/images/x9-2026/mob/comfort.jpg");
	width:100vw;
	height:auto;
	
	

}


#performanceimg{

   content:url("/images/g6new/performance/mobileper.jpg");
	width:100vw;
	height:auto;

}





#intelligenceimg{
	content:url("/images/g6new/intel/mobileintel.jpg");
	width:100vw;
	height:auto;
	
}


#tapirimg{
	content:url("/images/g6new/mobilexpilotnew.webp");
	width:105vw !important;
	height:auto;
}



#appimg{
content:url("/images/g6new/mobapp.jpg");
width:100vw !important;
height:auto;
}

 .showxpilot {
	display:block !important;
    animation: imganim .5s linear both;
	opacity: 0.95;
	margin-top:-20px;
  }







.xcounter{

font-size:0.9em;
	
}




@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translate(-10px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}




#performancebody{
	
	margin-top:10px !important;
	
}


.carousel-caption{
left:50px;
right:50px;
	
}


.aspec {font-size:0.9em;}
	
	

.mitt{font-size:1.5em;text-shadow: 1px 1px black;text-align:left;padding-left:50px;padding-right:10%;}

.mipt{font-size:1.0em;text-shadow: 1px 1px black;text-align:left;padding-left:50px;padding-right:10%;}	

#cboxTitle {bottom:150px;}
	

}


@media only screen and (max-width:800px) {
	
.worldf{
	
top:10% !important;
	
}

.safecontent{
	
	min-width:95vw !important;
}
	
.safetytxt .xtitlesm{
	
	font-size:0.5em !important;
}

.safetytxt .xpara{
	
	font-size:0.5em !important;
}
	
.drive-btn{
	
	top:25% !important;
	
}
	
	
.xtitlesmclear
{
	font-size:1.3em !important;
}

	
.videoheromain{
width:1080px;
height:auto;
margin-left:-300px;

}

#chargeimg{
	
	margin-right:10%;
	
}




.aspec {font-size:0.9em;}


#cboxTitle {bottom:50px;}


#smartbtn{
display:none !important;
}	

#smartbtnmb {
	
display:block !important;

}


.aifacaptionhead{
	

font-size:0.7em;
color:black;
text-shadow: 2px solid white;
text-align:left;
padding-left:0px;
padding-right:0px;

	
}

.aifacaptiontext{

font-size:0.5em;	
color:black;
text-shadow: 1px solid white;
text-align:left;
padding-left:0px;
padding-right:0px;
	
}






	
}


@media only screen and (max-width:560px) {
	
	
#pagisafety{
	bottom:70px !important;
}
	
.worldf{
	
top:-10% !important;
	
}

.safetytxt .xtitlesm{
	
	font-size:0.5em !important;
}

.safetytxt .xpara{
	
	font-size:0.5em !important;
}






#firstinterior{
	
	margin-bottom:50px !important;
	
}
	
#mystarship{
	top:110px !important;
}
	

.xtitle{
	font-size:1.3em !important;
}

#starimg1{
   content:url("/images/x9-2026/hero/ext-1.jpg");
	width:60vw;
	height:auto;
}

#starimg2{
   content:url("/images/x9-2026/hero/ext-2.jpg");
   width:60vw;
   height:auto;
}
	
#warrantyxpimg{
	
top:30% !important;
left:10% !important;

}

#warrantyxpimg img{
	
width:50vw !important;

}
	
#counterlist{
	
bottom:8% !important;
left:5%;
right:5%;
	
}

.xcounter{

font-size:0.8em;
/*margin-bottom:100px;*/
	
}




#performanceimg{

   content:url("/images/g6new/performance/mobileper2.jpg");
	width:100vw;
	height:auto;

}



#interiortxt{
	
	top:30px !important;
	
}

#efforttxt{
	
	top:30px !important;
	
}

#safetytxtbig{
	bottom:30px !important;
}

#safetysmalltext{
	margin-top:200px;
}

#leadingtxt{
	
	top:30px !important;
	
}

#safetycontent{
	
	margin-top:50px !important;
}

#intelligenceimg{
	content:url("/images/g6new/intel/mobileintel2.jpg");
	width:100vw;
	height:auto;
	
}


#chargeimg{
	margin-top:10%;
	margin-left:-350px;
	
}

#chargeimg img{
	
	width:100%;
	height:auto;
}


#chargetxt img{
	
	width:100vw;
	height:auto;
}


#chargetxt{
	
	margin-top:-15%;
	left:10%;
}


.carousel-caption{
left:20px;
right:20px;
	
}

.aspec {font-size:0.7em;}




.mitt{font-size:1.2em;text-shadow: 1px 1px black;text-align:left;padding-left:10px;padding-right:10px;}

.mipt{font-size:0.9em;text-shadow: 1px 1px black;text-align:left;padding-left:10px;padding-right:10px;}	

#cboxTitle {
	bottom:-10px;
	}





.mycarousel{
position:absolute;
top:-5%;
left:20px;
}



	
	
.drive-btn{
  position: fixed;
  width: 100px !important;
  left: 100%;
  top: 50%;
  transform-origin: 0% 0%;
  -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg) translateX(-90%);
	border-radius:0px;
	z-index:9999;
	font-size:0.6em !important;
	letter-spacing:3px;
	font-family:futubold;
}


.aifacaptionhead{
	

font-size:0.6em;
color:black;
text-shadow: 2px solid white;
text-align:left;
padding-left:0px;
padding-right:0px;

	
}

.aifacaptiontext{

font-size:0.4em;	
color:black;
text-shadow: 1px solid white;
text-align:left;
padding-left:0px;
padding-right:0px;
	
}	



#leftrightbody , #rightleftbody{
	
	top:37% !important;
	
}


.xpbtn{
	
	padding:0px;
	font-size:0.8em;
	width:100px;
	height:30px;
	margin-top:-20px;
	
}

/*
.carousel-caption{
	left:10% !important;
	right:10% !important;
	
}*/
	
	

}



@media only screen and (max-width:550px) {
	
#pagisafety{
	bottom:90px !important;
}
	
}








@media only screen and (max-width:350px) {

#warrantyxpimg{
	
top:38% !important;
left:5% !important;

}

}


.drive-btn{
  position: fixed;
  width: 170px;
  left: 100%;
  top: 50%;
  transform-origin: 0% 0%;
  -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg) translateX(-90%);
	border-radius:0px;
	z-index:9999;
	font-size:0.8em;
	letter-spacing:3px;
	font-family:futubold;
}


    /* Base gradient suffix class */
        .gradient-bottom {
            position: relative;
        }
        
        .gradient-bottom::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            pointer-events: none;
            z-index: 1;
        }
        
        /* Size variations */
        .gradient-bottom-sm::after {
            height: 60px;
            background: linear-gradient(to bottom, transparent 0%, black 100%);
        }
        
        .gradient-bottom-md::after {
            height: 120px;
            background: linear-gradient(to bottom, transparent 0%, black 100%);
        }
        
        .gradient-bottom-lg::after {
            height: 200px;
            background: linear-gradient(to bottom, transparent 0%, black 100%);
        }
        
        /* Fade strength variations */
        .gradient-bottom-soft::after {
            height: 120px;
            background: linear-gradient(to bottom, 
                transparent 0%, 
                rgba(0,0,0,0.3) 30%,
                rgba(0,0,0,0.6) 70%,
                black 100%);
        }
        
        .gradient-bottom-strong::after {
            height: 120px;
            background: linear-gradient(to bottom, 
                rgba(0,0,0,0.6) 0%,
                black 60%);
        }
        
        .gradient-bottom-sharp::after {
            height: 80px;
            background: linear-gradient(to bottom, 
                transparent 60%,
                black 100%);
        }
        
        /* For sections that need overlap (creates fade between sections) */
        .gradient-bottom-overlap::after {
            height: 150px;
            background: linear-gradient(to bottom, 
                transparent 0%,
                rgba(0,0,0,0.4) 30%,
                rgba(0,0,0,0.8) 60%,
                rgba(0,0,0,0.4)  100%);
        }
        
        /* Remove gradient from last element when needed */
        .gradient-bottom-last-none:last-child::after {
            display: none;
        }
        
        /* Custom section styling */
        .section-min-height {
            min-height: 100vh;
        }