.banner {
	max-width: 670px;
	height: 515px;
	text-align: center;
	overflow: hidden;
	position: relative;
	margin: 0 0 0 auto;
}

.banner .slider{

    position: absolute;

    width: 160px;

    height: 200px;

    left: calc(50% - 80px);

    top: 10%;

    transform-style: preserve-3d;

    transform: perspective(1000px);

    animation: autoRun 20s linear infinite;

    z-index: 2;

}

@keyframes autoRun{

    from{

        transform: perspective(1000px) rotateX(-16deg) rotateY(0deg);

    }to{

        transform: perspective(1000px) rotateX(-16deg) rotateY(300deg);

    }

}



.banner .slider .item {
    position: absolute;
    inset: 0 0 0 0;
    transform: rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg)) translateZ(300px);
}

.cs_hero.cs_style4 .cs_image_hero img {
    max-width: 80% !important;
}

.banner .slider .item img{

    max-width: 100%;

    width: 100%;

    height: 100%;

    object-fit: cover;
    border-radius: 12px;

}





.banner .content .model{

    background-image: url('../../../images/laptop-1.png');

    width: 400px;

    height: 320px;

    position: absolute;

    bottom: 5%;

    left: 50%;

    transform: translateX(-50%);

    background-size: cover;

    background-repeat: no-repeat;

    background-position: top center;

    z-index: 1;

}

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

   .banner .slider .item{

    transform: rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg)) translateZ(330px);

    }


}

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

   .banner .slider .item{

    transform: rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg)) translateZ(300px);

    }
.taranaa_hero_area .cs_shape_circle {
    top: calc(118%);
   
}
}
@media screen and (max-width: 1620px) {


.taranaa_hero_area .cs_shape_circle {
    top: calc(113%);
}
}
@media screen and (max-width: 1520px) {

    .banner .slider{

        width: 140px;

        height: 190px;

        left: calc(50% - 75px);

    }

    .banner .slider .item{

        transform: 

            rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))

            translateZ(280px);

    }

}

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

    .banner .slider .item{

        transform: 

            rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))

            translateZ(250px);

    }
.banner .content .model {
    bottom: 9%;
}
.taranaa_hero_area .cs_shape_circle {
    top: calc(110%);
 
}
}

@media screen and (max-width: 1366px) {
    .banner .slider {
    width: 100px;
    height: 190px;
    left: calc(50% - 50px);
}

    .banner .slider .item{
        transform: rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg)) translateZ(200px);
    }
	.cs_hero.cs_style4 .cs_image_hero img {
    max-width: 100% !important;
}
.banner {
    height: 350px;
}
.banner .content .model {
    width: 264px;
    height: 182px;
}
.taranaa_hero_area .cs_shape_circle {
    top: calc(108%);
}
}

@media screen and (max-width: 1280px) {
    .banner .slider {
        width: 70px;
        height: 160px;
        left: calc(50% - 35px);
    }
    .banner .slider .item {
        transform: rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))  translateZ(150px);
    }
    .banner .content .model {
    width: 270px;
    height: 218px;
}
    .banner {
        height: 335px;
    }
.taranaa_hero_area .cs_shape_circle {
    top: calc(120%);
}
}
@media (min-width: 1281px) and (max-width: 1726px){
.taranaa_hero_area .cs_shape_circle {
    bottom: auto !important;
}

}
@media screen and (max-width: 1281px) {
.taranaa_hero_area .cs_shape_circle {
    top: auto;
}

}
@media screen and (max-width: 1023px) {
    .banner .slider{
        width: 70px;
        height: 120px;
        left: calc(50% - 35px);
    }
    .banner .slider .item{
        transform: rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg)) translateZ(130px);
    }
    .banner .content .model {
        width: 212px;
        height: 169px;
    }
    .banner {
        height: 250px;
    }

}
@media screen and (max-width: 991px) {
    .banner .slider {
        width: 120px;
        height: 222px;
        left: calc(50% - 60px);
    }
    .banner .slider .item {
        transform: rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))  translateZ(250px);
    }
    .cs_hero.cs_style4 .cs_image_hero {
        margin-right: 0 !important;
        display: block !important;
    }
    .cs_hero.cs_style4 .cs_image_hero {
        width: 95% !important;
    }
     .banner {
        height: 377px;
    }
   .banner .content .model {
    width: 315px;
    height: 218px;
    bottom: 0;
}

}

@media screen and (max-width: 830px) {
    .banner .slider {
        width: 100px;
        height: 222px;
        left: calc(50% - 50px);
    }
    .banner .slider .item {
        transform: rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))  translateZ(220px);
    }

}
@media screen and (max-width: 767px) {
    .banner .slider {
        width: 90px;
        height: 160px;
        left: calc(50% - 45px);
    }
    .banner .slider .item {
        transform: rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))  translateZ(190px);
    }
   .banner .content .model {
    width: 278px;
    height: 213px;
}
    .banner {
        height: 335px;
    }
}

@media screen and (max-width: 430px) {
    .banner .slider {
        width: 70px;
        height: 160px;
        left: calc(50% - 35px);
    }
    .banner .slider .item {
        transform: rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))  translateZ(150px);
    }
   .banner .content .model {
    width: 227px;
    height: 147px;
    bottom: 8%;
}
    .banner {
        height: 300px;
    }
    
}