@keyframes textExpandAnimation {
	from {
	  max-width: 0;
	  opacity: 0;
	}
	to {
	  max-width: 100%;
	  opacity: 1;
	}
  }
  
  .text-expand {
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	animation: textExpandAnimation 0.5s ease-out forwards; /* Adjust duration (1s) as needed */
	background: #fff;
	padding: 8px 12px;
	width: auto;
	border-radius: 5px;
  }
 
.vehicle-detail-banner .before{
	background: #292B34;
    width: 72px;
    padding: 7px;
    font-family: Manrope;
    font-size: 13px;
    font-weight: 600;
    line-height: 19px;
    letter-spacing: 0px;
    text-align: left;
    color: #fff;
    /* padding: 10px; */
    border-radius: 4px;
    position: absolute;
    z-index: 1;
    top: 20px;
    left: 20px;
    text-align: center;
}
.banner-slider .after{
	left: 32%;
    top: 55px;
    background: #FF8811;
    font-family: Manrope;
    font-size: 13.6px;
    font-weight: 600;
    line-height: 18.8px;
}
.banner-section{
	/*margin: 100px 0;*/
}
.vehicle-detail-banner{position: relative;}
.container {
    width: 100%;
    max-width: 1230px;
    margin: 0 auto;
}




/*USE CSS for Slider*/
/* zoom in effect start */
@keyframes zoomInEffect {
	from {
	  transform: scale(0.5);
	}
	to {
	  transform: scale(1.1); /* Adjust scale as needed */
	}
  }
  
  .slider-banner-image img {
	transition: transform 0.1s ease-out;
  }
  
  .vehicle-detail-banner .slick-current img {
	animation-name: zoomInEffect;
	animation-duration: 0.2s; /* Match this duration with Slick's speed option */
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
  }
/* zoom in effect end here */

/* timline effect start*/
/* The actual timeline (the vertical ruler) */
.timeline {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline::before {
	content: '';
	position: absolute;
	width: 1px;
	background-color: #E9EBF7;
	top: 0;
	bottom: 0;
	left: 3.8%;
	margin-left: -3px;
	z-index: 0;
}
/* Container around content */
.time_h2{
	color: #6B6D77;
    font-family: Manrope;
    font-size: 10px!important;
    font-weight: 600;
    line-height: 12px;
    letter-spacing: 0px;
    text-align: left;
    /* font-size: 18px; */
    position: absolute;
    right: 17%;
    top: 16%;
}
.thumbnail-image {
	/* padding: 2.5px 10px; */
	position: relative;
	background-color: inherit;
	width: 50%;
	text-align: left;
  }
  
  /* The circles on the timeline */
  .thumbnail-image::after {
	content: '';
	position: absolute;
	width: 4px;
	height: 4px;
	right: 0;
	background-color: 	#E9EBF7;
	/* border: 4px solid #FF9F55; */
	/* top: 2px; */
	top: 6px;
	border-radius: 50%;
	z-index: 1;
  }

  .timeline .slick-list.draggable,.timeline .slick-list.draggable .slick-track{
	height: 100%!important;
	transform: translate3d(0px, 0px, 0px)!important;
  }
  /* Place the container to the right */
.right {
	left: 6%;
  }
  
  
  /* Fix the circle for containers on the right side */
  .right::after {
	left: -5%;
  }
  .banner-slider{
	height: 464px;
	position: relative;
	/* background-image: url('/wp-content/uploads/2024/02/after3.jpg'); */
	background-size:350px 464px;
	/*border-radius:20px;*/
	background-repeat:no-repeat;
	padding-left: 29%;
  }
  #app1{
	position: absolute;
    width: 285px;
    text-align: center;
    bottom: 35px;
    background-clip: border-box;
    animation: textclip 1s linear infinite;
    transform: translate(1%, -50%);
    margin: auto;
  }
  #app{
    width: fit-content;
    align-items: center;
    margin: auto;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0px;
	text-align: center;

  }
 
/* timline effect end*/
.Typewriter__cursor{
	display: none;
}
.vehicle-detail-banner .car-slider-desc {
    max-width: 180px;
    margin: 0 auto;
}
.banner-slider .slider.slider-for {
    max-width: 84%;
    padding-right: 10px;
	text-align: center;
}
.banner-slider .slider.slider-for{
    width:60%;
}
.banner-slider .slider.slider-nav {
    width:40%;
}
.banner-slider .slider.slider-for,
.banner-slider .slider.slider-nav {
    /*width: 32%;*/
    float: left;
	/* max-height: 415px; */
}
.banner-slider .slider.slider-nav {
    /*height: 290px;*/
    overflow: hidden;
    /* margin-top: 80px; */
    top: 23%;
}
.slider-banner-image {
    height: 440px;
}
.banner-slider .slider.slider-nav {
    padding: 0;
}
.slider-nav .slick-slide.thumbnail-image .thumbImg{
    max-width: 178px;
    height: 110px;
    margin: 0 auto;
    border: 1px solid #EBEBEB;
}
.slider-banner-image img,
.slider-nav .slick-slide.thumbnail-image .thumbImg img {
	width: 260px;
    object-fit: cover;
    border: 2px solid #fff;
    border-radius: 20px;
    height: 360px;
    margin: auto;
    margin-top:55px;
    overflow: hidden;
}
.slick-vertical .slick-slide:active,
.slick-vertical .slick-slide:focus,
.slick-arrow:hover,
.slick-arrow:focus {
    border: 0;
    outline: 0;
}
.slider-nav .slick-slide.slick-current.thumbnail-image .thumbImg {
    border: 2px solid #4361ED;
}
.slider-nav .slick-slide.slick-current .thumbnail-image::after { 
	border: 2px solid #4361ED;
	background-color: #4361ED;
    z-index:3;
}
.slider-nav .slick-slide.slick-current span {
    color: #4361ED;
}
.slider-nav .slick-slide {
    text-align: center;
}
.slider-nav .slick-slide span {
    font-size: 14px;
    display: block;
    padding: 0px 0 6px;
	font-family: Manrope;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 0px;
	text-align: left;

}
/*.slick-arrow {*/
/*    width: 100%;*/
/*    background-color: transparent;*/
/*    border: 0;*/
/*    background-position: center;*/
/*    background-repeat: no-repeat;*/
/*    font-size: 0;*/
/*    height: 18px;*/
/*    position: absolute;*/
/*    left: 0;*/
/*    right: 0;*/
/*    z-index: 99;*/
/*}*/
/*.slick-prev {*/
/*   top: 0;*/
/*}*/
/*.slick-next {*/
/*   bottom: 0;*/
/*   background-color: #fff;*/
/*}*/
/*.slick-prev.slick-arrow {*/
/*    background-image: url(../images/black-up-arrow.png);*/
/*}*/
/*.slick-next.slick-arrow {*/
/*    background-image: url(../images/black-down-arrow.png);*/
/*}*/
/*End USE CSS for Slider*/


@media screen and (max-width : 1024px) {
	#app1{
		transform: translate(0%, -50%);
		/* width: 260px; */
	}
	.banner-slider .slider.slider-nav{
		width: 40%;
	}
	.banner-slider{
	    padding-left:20%;
	}
	.time_h2 {
        right: 19%;
    }
	.banner-slider{
		background-size: 280px 464px;
	}
	.banner-slider .after {
        left: 24%;
	}
}
@media screen and (max-width : 991px) {
	
	#app1 {
		transform: translate(2%, -50%);
		/* width: 260px; */
	}
	.banner-slider .slider.slider-for,
	.banner-slider .slider.slider-nav {
	    max-width: 100%;
	    /* float: none; */
	}
	.banner-slider .slider.slider-for {
		padding-right: 0;
	}
	/*.slider-banner-image {*/
	/*    height: 500px;*/
	/*} */
	/* .slider.slider-nav.thumb-image {
        padding: 10px 30px 0;
	} */
	.slider-nav .slick-slide span {
		/*padding: 5px 0;*/
		font-size:12px;
	}
	.slick-arrow {
		padding: 0;
	    width: 30px;
	    height: 30px;
	    top: 50%;
	    bottom: 0;
	    -webkit-transform: translateY(-50%) rotate(-90deg);
	    -moz-transform: translateY(-50%) rotate(-90deg);
	    -ms-transform: translateY(-50%) rotate(-90deg);
	    transform: translateY(-50%) rotate(-90deg);
	}
	.slick-prev {
	    left: 0;
	    right: unset;
	}
	.slick-next {
	    left: unset;
	    right: 0;
   		background-color: transparent;
	}
	.vehicle-detail-banner .car-slider-desc {
    	max-width: 340px;
	}
	.bid-tag {
    	padding: 10px 0 15px;
	}
	.slider.slider-nav.thumb-image {
	   white-space: nowrap;
	}
	.thumbnail-image.slick-slide {
		padding: 0px 5px;
		min-width: 75px;
		display: inline-block;
		float: none;
	}
}
@media screen and (max-width : 820px) {
    .banner-slider {
        padding-left: 18%;
		background-size: 220px 464px;
    }
    #app1 {
        width: 228px;
        /*transform: translate(1%, -50%);*/
    }
	.banner-slider .slider.slider-for{
	    width: 58%;
	}
	.banner-slider .slider.slider-nav{
		width: 42%;
	}
	.time_h2 {
        right: 18%;
    }
    .slider-banner-image img{
        width: 206px;
    }
}
@media screen and (max-width : 768px) {
    .banner-slider {
        padding-left: 18%;
        background-size: 220px 400px;
    }
    .slider-banner-image img{
        margin-top: 50px;
    }
	.timeline::after {
		left: 7%;
	}

	.right{
		left: 6%;
	}
	.slider-nav .slick-slide.thumbnail-image .thumbImg {
		max-width: 140px;
		height: 80px;
	}
	.slick-prev.slick-arrow {
    	background-position: center 10px;
	}
	.slick-next.slick-arrow {
    	background-position: center 10px, center;
	}
	.slider-banner-image img {
        width: 200px;
        height: 300px;
    }
    .slider-banner-image {
        height: 360px;
    }
    .slider-nav .slick-slide span {
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .banner-slider{
        height: 400px;
    }
}

@media screen and (max-width: 600px) {
	.timeline::after {
		left: 11%;
	}
	#app1 {
		width: 38%;
		transform: translate(13%, -50%);
	}
	.banner-slider {
		background-size: 260px 400px;
		padding-left:20%;
	}
	.banner-slider .slider.slider-for{
		width: 60%;
	}
	.banner-slider .slider.slider-nav{
		width: 40%;
	}
	.banner-slider  .right {
		left: 13%;
	}
	.time_h2 {
		left: auto;
		right: 15%;
	}
	.banner-slider .right::after {
        left: -12%;
    }
    .banner-slider .after {
        left: 29%;
    }
}

@media screen and (max-width : 480px) {
	
	.timeline::after {
		left: 13%;
		width: 1px;
	}
	.thumbnail-image{
		padding: 0px 5px;
	}
	.thumbnail-image::after{
		width: 2px;
    	height: 2px;
	}
	.banner-slider .slider.slider-nav {
		height: 320px;
		overflow: hidden;
	}
	#app1{
		transform: translate(5%, -50%);
		width: 43%;
		bottom: 10px;
	}
	/* new acording to figma start */
	.time_h2{
		font-family: Manrope;
		font-size: 4px;
		font-weight: 600;
		line-height: 5px;
		letter-spacing: 0px;
		text-align: left;
		right: 8%;
		top: 10%;
	}
	.right::after {
		left: -13%;
	}
	.slider-nav .slick-slide span{
		font-family: Manrope;
		font-size: 6px;
		font-weight: 600;
		line-height: 8px;
		letter-spacing: 0px;
		text-align: left;
		padding: 0;
	}
	.banner-slider {
		background-size: 200px 240px;
		height: 240px;
		padding-left: 20%;
		/*transform: translate(17%, -50%);*/
	}
	.slider-banner-image img,
	.slider-nav .slick-slide.thumbnail-image .thumbImg img {
		width: 160px;
		object-fit: cover;
		border: 2px solid #fff;
		border-radius: 8px;
		height: 190px;
		margin: auto;
		margin-top: 25px;
		overflow: hidden;
	}
	.slider-banner-image{
		height: 240px;
	}
	.banner-slider .slider.slider-nav {
		height: 190px;
		overflow: hidden;
		/* margin-top: 80px; */
		top: 15%;
	}
	#app {
		width: fit-content;
		align-items: center;
		margin: auto;
		text-align: center;
		font-family: Manrope;
		font-size: 5px;
		font-weight: 600;
		line-height: 7px;
		letter-spacing: 0px;
	}
	.vehicle-detail-banner .before{
		font-family: Manrope;
		font-size: 6px;
		font-weight: 600;
		line-height: 8px;
		letter-spacing: 0px;
		width: 32px;
		height: 15px;
		top: 8px;
		left: 8px;
		padding: 3.37px 6.74px 3.37px 6.74px;
		border-radius: 2px;
		gap: 14.21px;
	
	}
	.banner-slider  .after{
		font-family: Manrope;
		font-size: 6px;
		font-weight: 600;
		line-height: 8px;
		letter-spacing: 0px;
		padding: 6.34px 6.69px 3.34px;
		width: 28px;
		height: 19px;
		left: 27%;
		top: 25px;
	}
	.slick-vertical .slick-slide{
	    height:20px;
	}
		/* new acording to figma end */
}
@media screen and (max-width : 450px) {

	.slider-banner-image img, .slider-nav .slick-slide.thumbnail-image .thumbImg img{
		width: 140px;
	}
	.banner-slider .slider.slider-nav {
		/* height: 310px; */
		overflow: hidden;
	}
	
}
@media screen and (max-width : 360px) {
	.slider-banner-image img, .slider-nav .slick-slide.thumbnail-image .thumbImg img{
		width: 128px;
	}
	.time_h2{
		right: 3%;
	}
	.banner-slider {
		background-size: 170px 240px;
	}
	.banner-slider {
        height: 240px;
        padding-left: 20%;
    }
}
@media screen and (max-width : 320px) {

    .right::after {
        left: -8%;
    }
    .timeline::before{
        left: 10.8%;
    }
}