@media only screen and (max-width: 900px) {
    /* body{ */
        /* overflow-x: hidden; */
    /* } */
    .car-fleet-page {
        padding: 0px !important;
    }
    .car-fleet-cards{
        flex-direction: column !important;
        align-items: center !important;
    }
    .car-fleet-hero{
        height: auto !important;
        /* margin-bottom: 100px !important; */
    }
    .car-fleet-page{
        overflow-x: hidden !important;
        width: 100% !important;
    }
    .car_fleet_hero_background-mobile{
        display: none !important;
        width: 0px !important;
        height: 0px !important;
        position: relative;
        right: 0px;
    }
    #car_fleet_hero_img{
        display: none !important;
      
    }
    #car_fleet_hero_background{
        display: none !important;
        position: relative;
        /* top: -60px;
        left: 140px;
         */
    }
    
    .car-fleet-hero-right{
        position: absolute !important;
        top: 100px !important;       
    }
    .car-fleet-hero-left{
        display: none !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: inherit !important;
        position: relative !important;
        top: 90px !important;
        z-index: 80 !important;
        height: 70px;
        margin-bottom: 240px;
    }
    .car-fleet-container{
        justify-content: center !important;
    }
    .car-fleet-hero-left h1{
        font-size: 46px !important;
        margin:0px !important;
        position: relative;
        left:-0px;
        width:200px !important;
        padding-left: 10px;
        padding-top: 220px;
    }
    
    .car-fleet-browse{
        align-items: center !important;
        
    }
    .car-fleet-hero-left > div{
        flex-direction: column !important;
        position: relative;
        left: 10px !important;
        color:white;
    }
    .car-fleet-hero-left > div > div{
        flex-direction: row;
    }
    .car-fleet-hero-right h1{
        display: none;
    }
}
/* Car Fleet Page RTL Begins */
.card-img-top{
    height: 240px;
    object-fit: contain;
}
.car-fleet-page-rtl{
    text-align: end !important;
}
.car-fleet-select-rtl{
    padding: 0px 40px !important;
    text-align: end !important;
}
 
/* Car Flleet Page RTL Ends  */
.car_fleet_hero_background-mobile{
    display: none;
}
.car-fleet-page{
    height: 100%;;
    /* background-color: red; */
    display: flex;
    flex-direction: column;
    padding-left: 100px;
    padding-right: 50px;
    /* overflow-y: scroll; */
    overflow: hidden;
    /* padding-top: 220px; */
}
.car-fleet-hero{
    height: 500px;
    margin-bottom: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}

.rtl .car-fleet-hero{
    flex-direction: row-reverse;
}
.rtl #car_fleet_hero_img{
    transform: rotate3d(0, 70, 0, 180deg) translateX(-170px)
}
.rtl .car-fleet-hero-right{
    transform: translateX(-70%);
}
.rtl #car_fleet_hero_background{
    transform: rotateX( 0deg) rotateY(-170deg) rotateZ(-7deg);
    /* left: 123px !important ; */
    left: -31px !important;
    width: 100%;
}
.car-fleet-hero-left{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
/* .car-fleet-hero-left > div{
    flex-direction: row !important;
} */
.car-fleet-hero-left h1{
    font-size: 56px;
    font-weight: 500;
    margin-bottom: 20px;
    width: 90%;
}
.car-fleet-hero-right{
 left: 40%;
 position: absolute;
 transition: all 0.5s;
 overflow: hidden;
 width: 60%;
 height: 720px;
 /* background: radial-gradient(closest-side, var(--theme-accent), var(--theme-white)); */
}
.rtl .car-fleet-arrow-left{
    left:max(670px, 50%);
}
.rtl .car-fleet-arrow-right{
    left:max(860px, 70%);
}
.car-fleet-arrow-left{
 left:clamp(399px, 370px, 378px);
 top: 569px; 
 color:white; 
 font-size: 20px; 
 position: absolute
}
.car-fleet-arrow-right{
    left:max(597px, 84px);
    /* clamp(40%, 400px, 400px); */
    top: 569px; 
    color:white;
    position: absolute;
    font-size: 20px;
}
.rtl .car-fleet-browse{
    padding:0px 50px;
}
.rtl .car-fleet-hero-right{
    /* width: 73%;    */
    width: 56%;   
    height: 670px;
}
@media (min-width: 1500px ){
    .rtl .car-fleet-hero-right{
        width: 53% !important;   
    }
    .rtl #car_fleet_hero_background{
        left: 17px !important;
    }
    .rtl #car_fleet_hero_carousel{
        /* width: 70%; */
        width: 66%;
    }
}
.car-fleet-hero-right span{
    border: none;
    position: absolute;
    background: radial-gradient(closest-side, var(--theme-accent), #ffffff);
    top: -240px;
    left: 410px;
    width: 650px;
    height: 400px;
    z-index: -14;

}
.car-fleet-hero-right h1{
    position: absolute;
    font-size: 200px;
    left: 480px;
    top: -160px;
    color: var(--theme-white);
    opacity: 0.7;
    font-weight: 600;
    animation: year 0.5s ease-in;
   }
#car_fleet_hero_background{
   
    position: absolute;
    /* top: -210px; */
    top: 110px;
    left: 210px;
    height: 590px;
    width: 820px;
    z-index: -10;     
}
#newest-car{
    /* width: 100%;
  height: 100%; */
    display: block;
    transition: all .5s;
    /* animation-name: animateCar; */
    /* animation: animateCar 2s linear 1s infinite; */
}
/* @keyframes carousel {
    from{
        transform: translateX(0px);
    }
    to{
        transform: translateX(100%);
    }
    
} */
/* @keyframes animateCar {
    from{
        transform: translateX(0px);
    }
    to{
        transform: translateX(-100%);
    }
} */
#car_fleet_hero_carousel{
    display:flex;
    flex-direction: row;
    z-index: 10;
    align-items: center;
    position: relative;
    top: -40px;
    /* overflow: hidden; */
    height: 790px;
}
.rtl #car_fleet_hero_carousel{
    /* left: -350px; */
    /* width:100%; */
    width: 66%;
    /* left: -250px; */
    left: -402px;
    overflow: hidden;
}
 @media (max-width:2967px) {
    .rtl #car_fleet_hero_carousel{
        width: 77%;
    }
    
 }
 @media (max-width:2650px) {
    .rtl #car_fleet_hero_carousel{
        width:  90%;
    }
   
 }
 @media only screen and (max-width: 3500px) and (min-width: 3000px){
    .car-fleet-hero-right{
       
    height: 720px;

        /* left: clamp(72%, 50%, 56%); */
        width: 78%;
        transform: translateX(25%);
    }
 }
 @media only screen and (max-width: 2999px) and (min-width: 2500px){
    .car-fleet-hero-right{
        width: 78%;
       
    height: 720px;

         /* left: clamp(72%, 50%, 56%); */
        transform: translateX(20%);
    }
 }
 @media only screen and (max-width: 2499px) and (min-width: 2000px){
    .car-fleet-hero-right{
        left:42%;
       
        height: 720px;

        width: 63%;
         /* left: clamp(72%, 50%, 56%); */
        transform: translateX(20%);
    }
 }
 @media only screen and (max-width: 1999px) and (min-width: 1500px){
    .car-fleet-hero-right{
        left: 28%;
      
        height: 720px;

         /* left: clamp(72%, 50%, 56%); */
        transform: translateX(20%);
    }
 }
 @media (max-width:2200px) {
    .rtl #car_fleet_hero_carousel{
        width:  100%;
    }
 }
 @media (max-width:1900px) {
    .rtl #car_fleet_hero_carousel{
        width:  100%;
        overflow:  visible;
    }
    .rtl .car-fleet-hero-right {
        width: 45% !important;
    }
 }

 /* @media (min-width:2967px) {
    .car-fleet-hero-right{
        width: 148%;
        height: 60%;
        transform: translateX(40%);
    }
 } */
 /* @media (min-width:2650px) {
    .car-fleet-hero-right{
        width: 68%;
        height: 60%;
        transform: translateX(20%);
    }
 } */

 /* @media (min-width:2550px) {
    .car-fleet-hero-right{
        width: 68%;
        height: 60%;
        transform: translateX(20%);
    }
 } */

/* #car_fleet_hero_carousel div{
    display: none;
}
#car_fleet_hero_carousel:nth-child(1){
    display: block !important;
} */

/* #car_fleet_hero_background::before{
    content:'2022';
} */
#car_fleet_hero_img{
    transform: translateX( 230px);
    position: relative;
    width: 840px;
    height: 110px;
}
#car_fleet_hero_img img{
    position: absolute;
    object-fit: cover;
    width: 670px;
    height: 290px;
    top: -80px;
    left: -100px;
    animation: car 0.5s ease-in;
}
.rtl .cars >h3{
    direction: rtl;
}
@media (max-width: 1499px){
  
   .rtl #car_fleet_hero_img img{
        width: 650px;
    }
    .rtl #car_fleet_hero_img img ~ div{
        left: 630px;
    }
    .rtl #car_fleet_hero_background{

    }
    .rtl .car-fleet-hero-right {
        width: 58% !important;
    }
    .rtl .car-fleet-arrow-left{
        left:max(620px, 50%)
    }
    .rtl .car-fleet-arrow-right{
        left: max(900px, 70%)
    }
    
   
}
.rtl .car-fleet-cards > div{
    text-align: right;
}
.rtl .car-fleet-cards > div > select{
    direction: ltr;
}
.rtl .car-fleet-cards{
    direction: rtl;
    justify-content: space-between;
}
.rtl .car-fleet-hero-left > div > div{
    margin-right: 0px !important;
}
.rtl .car-fleet-hero-left > div > div > i{
    margin-left:10px !important;
}
.rtl .car-fleet-hero-left{
    direction: rtl;
    margin-right: 40px !important;
}

.rtl .car-fleet-hero-left h1{
    text-align: right;
}
.car-fleet-select{
    border-radius: 10px !important;
    color: var(--theme-grey-light);
    width: 100%;
}
 
.car-fleet-container{
    height: 100%;
    margin-bottom: 216px;
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}
.rtl .car-fleet-container{
    justify-content: center;
}

@keyframes car {
        from {
            width: 430px;
            height: 200px;
            top: 50px;
            left: 260px;
        }
        to {
            width: 670px;
            height: 290px;
            top: -80px;
            left: -50px;
        
        }
}
@keyframes year {
    from{
        left: 350px;
        opacity: 0;
    }
    to{
        left: 480px;
        opacity: 0.7;
    }
    
}