



.carousel_items2 {

    color: #fff;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    height: 80%;

    width: var(--rn-width1);

    margin: auto;

    text-align: left;

    justify-content: flex-end;

  }

  

  .carousel_items2 .carInfo_card {

    background: #0000008f;

    padding: 20px;

    width: 30%;

    margin-bottom: 10px;

    margin-left: 55px;

  }

  

  .carousel_items2 .slide_title {

    font-weight: 600;

    font-family: sans-serif, NouvelRBold;

    font-size: 30px;

    margin: 0px;

  }

  

  .carousel_items2 .slide_subTitle {

    font-family: sans-serif, NouvelRBold;

    margin: 13px 0px;

    font-size: 17px;

    color: var(--gray1);

  }

  .carousel_items2 .slide_price {

    color: var(--white);

    font-family: NouvelRRegular;

    font-size: 20px;

  }

  .carousel_items2 .slide_price span {

    font-weight: 600;

    font-size: 30px;

  }

  .carousel_items2 .yellow_btn1 {

    background-color: var(--yellow);

    color: var(--black);

    font-weight: 600;

    padding: 10px 20px;

    font-family: NouvelRBold;

    margin: 15px 0 0 0;

    font-size: 14px;

  }

  

  .carousel_items2 .yellow_btn1:hover {

    background-color: var(--yellow);

  }

  

  .breadcrumb_Container {

    display: flex;

    justify-content: flex-start;

    width: 100%;

    margin: 0;

}

  .breadcrumbs_bar1 {

    /* width: 100%; */

    display: flex;

    margin: 0 var(--um);

    box-sizing: border-box;

    padding: 10px 0;

    align-items: center;

}

  

  .breadcrumbs_bar1 a {

    color: var(--black);

    font-family: sans-serif, NouvelRRegular;

    font-size: 12px;

  }

  

  .breadcrumbs_bar1 p {

    margin: 0 10px;

    color: var(--yellow);

    font-size: 20px;

    font-family: sans-serif;

  }

  

  .carPage_caroussel .owl-dots {

    display: none;

  }

  

  /*----------------           car_detail_container           -------------------*/

  

  .car_detail_container {

    width: var(--rn-width1);

    margin: 0 var(--um);

    display: flex;

    flex-direction: column;

    box-sizing: border-box;

    /*border: solid red;*/

}

  .car_detail_container .top_sec {

    width: 100%;

    display: flex;

    flex-direction: column;

    box-sizing: border-box;

    padding: 15px 0;

  }

  .car_detail_container .classH1 {

    font-size: 31px;

    font-family: "NouvelRBold";

    color: black;

  }

  .car_detail_container .sub_title {

    font-family: "NouvelRRegular";

    font-size: 16px;

    color: var(--gray3);

  }

  

  .car_detail_container .car_details {

    width: 100%;

    display: flex;

    box-sizing: border-box;

    margin: var(--um) 0 0 0;

  }

  .car_detail_container .car_images {

    box-sizing: border-box;

  }

.car_details .car_images .images_carousel.hide {

	  display:none;

  }

  .car_details .car_images .images_carousel.show {

	  display:block;

  }

  .car_detail_container .images_carousel {

    box-sizing: border-box;

  }

  .car_detail_container .carousel_thumbnails {

  }

  .car_detail_container .car_info {

    box-sizing: border-box;

    padding: 0 calc(var(--um) * 2) 0 calc(var(--um) * 2);

    width: 100%;

  }

  .car_detail_container .sec_label {

    font-family: RenaultGroupSemibold;

    margin: 8px 0;

  }

  .car_detail_container .radio_list1 {

    display: flex;

    flex-direction: row;

  }

  .car_detail_container .radio_list2 {

    display: flex;

    flex-wrap: wrap;

  }

  .car_detail_container .radio1 {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    margin: 8px 16px 8px 0px;

    cursor: pointer;

  }

  .car_detail_container .radio_circle {

    height: 17px;

    width: 17px;

    border-radius: 50%;

    border: solid var(--gray3) 1px;

    box-sizing: border-box;

    margin-right: 5px;

    position: relative;

  }

  

  .radio_wrap {

    flex: 0 0 35%;

  }

  

  .checked {

    background: var(--black);

    outline: solid var(--gray3) 1px;

    border: solid var(--white) 2px !important;

  }

  

  .car_detail_container .radio_list2 .radio1.show{

	  display:flex;

  }

   .car_detail_container .radio_list2 .radio1.hide{

	  display:none;

  }

  .car_detail_container .radio_label {

    font-family: NouvelRRegular;

  }

  

  .car_detail_container .price {

    font-family: NouvelRBold;

    font-size: 30px;

    margin: 20px 0 0 0;

  }

  

  .car_detail_container .price span {

    font-family: NouvelRRegular;

    font-size: 18px;

  }

  .car_info_rightSide span{

    font-family: NouvelRRegular !important;

  }
  .car_info_rightSide p{

    font-family: NouvelRRegular !important;

  }

  .car_detail_container .reglement_text {

    font-family: NouvelRRegular;

    font-size: 15px;

    margin: 18px 0;

  }

  

  .bold700 {

    font-weight: 700;

  }

  

  /*----------------           car details buttons list           -------------------*/

  

  .buttonList1 {

    display: flex;

    width: var(--rn-width1);

    margin: 0 var(--um);

    align-items: center;

    justify-content: space-between;

    box-sizing: border-box;

    margin-top: 40px;

    margin-bottom: 40px;

}

  

.customBtn1 {
    border: solid 1px var(--gray2);
    width: var(--rn-width4);
    padding: 15px;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.3s;
    background-color: var(--white);
    position: relative;
    color: var(--black);
    border: 1px solid var(--gray2);
  }
  .customBtn1:hover {
    border: 1px solid var(--black);
  }
  .customBtn1:hover p{
    color: var(--white);
    position: relative;
    z-index: 1;
  }
  .customBtn1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: var(--black);
    z-index: 1;
    transition: width 0.5s;
  }
  .customBtn1:hover::before {
    width: 100%;
  }

  .customBtn1 p {

    font-family: NouvelRBold;

    transition: color 0.3s;

  }

  .customBtn1 img {

    width: 20px;

    float: right;

    transition: content 0.3s;

  }
  

  .customBtn1:hover img {
    content: url(../img/icons/flecheWhite.svg);
    z-index: 1;
    position: relative;
  }

  

  /*----------------           Second half           -------------------*/

  /*----------------           Second half           -------------------*/

  /*----------------           Second half           -------------------*/

  /*----------------           Second half           -------------------*/

  /*----------------           Second half           -------------------*/

  

  .row_i {

    position: absolute;

    width: 100%;

  }

  .row_6i {

    display: flex;

    justify-content: center;

    width: 100%;

    margin: 40px 0;

  }

  .card_s6 {

    box-shadow: 0px 0px 4px 0px black;

    border-radius: 5px;

    border: solid 5px var(--gray1);

    height: 150px;

    width: var(--rn-width6);

    margin: 0 var(--um);

    box-sizing: border-box;

  }

  .row_4i {

    display: flex;

    justify-content: center;

    width: 100%;

    margin: 40px 0;

  }

  .card_s4 {

    box-shadow: 0px 0px 4px 0px black;

    border-radius: 5px;

    border: solid 5px var(--gray2);

    height: 150px;

    width: var(--rn-width4);

    margin: 0 var(--um);

    box-sizing: border-box;

  }

  .row_3i {

    display: flex;

    justify-content: center;

    width: 100%;

    margin: 40px 0;

  }

  .card_s3 {

    box-shadow: 0px 0px 4px 0px black;

    border-radius: 5px;

    border: solid 5px var(--gray3);

    height: 150px;

    width: var(--rn-width3);

    margin: 0 var(--um);

    box-sizing: border-box;

  }

  .row_2i {

    display: flex;

    justify-content: center;

    width: 100%;

    margin: 40px 0;

  }

  .card_s2 {

    box-shadow: 0px 0px 4px 0px black;

    border-radius: 5px;

    border: solid 5px var(--gray2);

    height: 150px;

    width: var(--rn-width2);

    margin: 0 var(--um);

    box-sizing: border-box;

  }

  .row_1i {

    display: flex;

    justify-content: center;

    width: 100%;

    margin: 40px 0;

  }

  .card_s1 {

    box-shadow: 0px 0px 4px 0px black;

    border-radius: 5px;

    border: solid 5px var(--black);

    height: 150px;

    width: var(--rn-width1);

    margin: 0 var(--um);

    box-sizing: border-box;

  }

  

  .guide_path {

    display: flex;

    width: 100%;

    flex-direction: row;

    justify-content: center;

    position: relative;

    background-color: rgb(255, 255, 255);

    height: 200vh;

  }

  

  .unit1 {

    height: 100%;

    background-color: rgba(34, 211, 255, 0.116);

    margin: 0 var(--um);

    width: var(--unit);

    height: 200vh;

  }

  

  /*/------------- mainTitle ----------/*/

  .mainTitle {

    width: var(--rn-width1);

    margin: 0 var(--um);

    box-sizing: border-box;

    text-align: center;

    font-family: NouvelRBold;

  }

  .mainTitle .title {

    font-size: 40px;

    font-weight: bold;

    font-family: NouvelRBold;

    margin-bottom: 14px;

  }

  

  /* ------------- equipement / options ---------- */

  .equipement-options {

    display: flex;

    text-align: left;

    flex-direction: row;

    align-items: flex-start;

    justify-content: space-between;

    gap: 50px;

  }

  

  .type {

    height: 150px;

    width: 13%;

    box-sizing: border-box;

  }

  

  .details-EQIPEMENTS,

  .details-Options {

    width: 100%;

  }

  .details-EQIPEMENTS.active,

  .details-Options.active {

    display: block;

  }

  .details-EQIPEMENTS,

  .details-Options {

    display: none;

  }

  

  .details {

    display: flex;

    text-align: left;

    justify-content: flex-start;

    gap: 10.5%;

    flex-direction: row;

    overflow-x: hidden;

    height: 255px;

  }

  

  .details::-webkit-scrollbar,

  .details::-webkit-scrollbar {

    width: 2px;

    background-color: var(--gray1);

  }

  

  .details::-webkit-scrollbar-thumb {

    background-color: var(--yellow);

    border-radius: 5px;

  }

  

  .col1,

  .col2 {

    width: 41.5%;

    box-sizing: border-box;

    text-align: left;

  }

  .details .col1 h5,

  .details .col2 h5 {

    font-family: NouvelRRegular;

    letter-spacing: 0.5px;

    padding: 0;

    margin: inherit;

    padding-left: 20px;

    font-weight: 500;

  }

  .desc {

    font-family: NouvelRRegular;

    letter-spacing: 0.5px;

    margin: inherit;

    font-weight: 500;

    margin-bottom: 30px;

    margin-top: 20px;

  }

  .details .col1 h5::after,

  .details .col2 h5::after {

    content: "";

    background-color: var(--gray1);

    height: 1px;

    width: 100%;

    display: block;

    margin: 10px 0 10px -17px;

  }

  

  .equipement-options .type .btn1,

  .equipement-options .type .btn2,

  .equipement-EQIPEMENTS .type .btn1,

  .equipement-EQIPEMENTS .type .btn2 {

    border-left: 0px;

    border-right: 0px;

    border-bottom: 0px;

    border-top: 0px;

    font-size: 19px;

    margin: 16px 0 0px 20px;

    font-family: NouvelRRegular;

    font-weight: 500;

    cursor: pointer;

  }

  .equipement-options .type .btn1.active,

  .equipement-options .type .btn2.active,

  .equipement-EQIPEMENTS .type .btn1.active,

  .equipement-EQIPEMENTS .type .btn2.active {

    border-left: 2px solid var(--yellow);

    font-family: NouvelRBold;

  }

  

  /* ------------- Renault ARKANA ---------- */

  .description {

    font-family: NouvelRRegular;

    margin: 20px;

  }

  .showcars .description {

    color: #2f2f2f;

    margin: 0 20px 0 20px;

    font-size: medium;

  }

  .showcars {

    width: var(--rn-width1);

    margin: 0 var(--um);

    box-sizing: border-box;

    text-align: center;

    font-family: NouvelRBold;

    background-color: #f7f7f7;

  }

  .showcars .title-cards-details {

    font-size: 30px;

    font-family: NouvelRBold;

    margin: 0px;

  }

  .showcars .subtitle {

    font-size: 14px;

    font-family: NouvelRRegular;

    margin: 20px 0 20px 0;

  }

  .card-text-btns {
    width: var(--rn-width2);
    margin: 35px var(--um);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .card-btns {

    display: flex;

  }

  .card-btns .card-btn1,

  .card-btns .card-btn2 {

    height: 46px;

    width: var(--rn-width4);

    margin: 0 var(--um);

    box-sizing: border-box;

    font-family: NouvelRBold;

    font-size: 16px;

    cursor: pointer;

    transition: background-color 0.5s, color 0.5s;

  }

  .card-btns .card-btn1 {

    background-color: rgb(255, 255, 255);

    color: var(--black);

  }

  .card-btns .card-btn2 {

    background-color: var(--black);

    color: rgb(255, 255, 255);

  }

  .card-btns .card-btn1:hover {

    background-color: var(--black);

    color: rgb(255, 255, 255);

  }

  .card-btns .card-btn2:hover {

    background-color: var(--yellow);

    color: rgb(0, 0, 0);

  }

  .image-zone {

    width: var(--rn-width3);

    margin: 0 var(--um);

    box-sizing: border-box;

  }

  .image-zone img {

    width: 100%;

  }

  

  /*---------------cars_card-------------------*/

  .cars_card {

    width: var(--rn-width3);

    margin: 0 var(--um);

    box-sizing: border-box;

    font-family: NouvelRBold;

  }

  .cars_card .card-img-top {

    width: 100%;

  }

  .cars_card .card-text {

    font-family: NouvelRRegular;

  }

  .cars_card .cardButton {

    color: var(--black);

    border-bottom: 2px solid var(--yellow);

    font-weight: 600;

  }

  .cars_card .cardButton:hover {

    color: var(--black);

    border-bottom: 2px solid var(--black);

    font-weight: 600;

  }

  .hybrid {

    margin-top: -64px;

  }

  .cars_card .hybrid .hybrid_text {

    color: #828282;

  }

  .cars_card .hybrid .hybrid_full {

    border: 2px solid #0086cf;

    color: #0086cf;

    text-align: left;

    display: inline;

    padding: 8px 15px;

    border-radius: 4px;

    font-weight: 600;

  }

  

  .cars-section1,

  .cars-section2 {

    display: none;

  }

  

  .cars-section1.active,

  .cars-section2.active {

    display: block;

  }

  

  /*---------------backToTop-------------------*/

  .backToTop {

    width: var(--rn-width1);

    margin: 0 var(--um);

    box-sizing: border-box;

    text-align: center;

    align-items: center;

    font-family: NouvelRBold;

  }

  .backToTop a {

    color: black;

    font-family: NouvelRBold;

    text-decoration: underline;

  }

  .backToTop svg {

    margin: auto;

    margin-bottom: -2px;

    margin-left: 10px;

  }

  

  .caroussel_content {

    position: absolute;

    height: 100%;

    width: 100%;

    box-sizing: border-box;

    display: flex;

  }

  

  .owl-carousel.owl-loaded {

    display: block;

    text-align: center;

    align-items: center;

  }

  .owl-carousel .owl-nav{
    position: absolute;
    top: 37%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    z-index: 0;
    font-size: 70px;
    color: #fff;
    height: 5px;
  }


  #headerCarouusel .owl-nav button.owl-prev span {

    position: absolute;
    top: 24px;
    left: 14px;
    font-family: 'NouvelRRegular' !important;
    font-size: 36px !important;

  }

  #headerCarouusel .owl-nav button.owl-next span {

    position: absolute;
    top: 24px;
    right: 14px;
    font-family: 'NouvelRRegular' !important;
    font-size: 36px !important;

  }

  

  #headerCarouusel .owl-nav button.owl-prev, #headerCarouusel .owl-nav button.owl-next {
    background: black !important;
    width: 42px;
    height: 100px;
  }

  .owl-carousel .owl-nav button {

    background: 0 0;

    color: #fff; /* Set the color for the navigation arrows */

    border: none;

    padding: 0 !important;

    font: inherit;

  }

  

  .owl-carousel .owl-nav button::before {

    vertical-align: middle;

  }

  

  .images_carousel .thumbnails {

    display: flex;

    width: 100%;

    overflow: hidden;

    flex-direction: row;

    align-items: center;

    justify-content: space-between;

  }

  .images_carousel .thumbnails a {

    width: 23%;

    height: 100px;

  }

  .images_carousel .thumbnails img {

    object-fit: contain;

    width: 100%;

    height: 100%;

  }

  

  .carDetail_carousel img {

    width: 100%;

  }

  

  .cardetail_carousselDesktop {

    display: block !important;

  }

  

  .cardetail_carousselMobile {

    display: none !important;

  }

  

  .cardetail_carousselTablet {

    display: none !important;

  }

  

  .car_info_leftSide {

  }

  

  .car_info_rightSide.hide {

  display:none;

  }

  

  

  

  

  

  

  

  .row_i {

    position: absolute;

    width: 100%;

  }

  .row_6i {

    display: flex;

    justify-content: center;

    width: 100%;

    margin: 40px 0;

  }

  .card_s6 {

    box-shadow: 0px 0px 4px 0px black;

    border-radius: 5px;

    border: solid 5px var(--gray1);

    height: 150px;

    width: var(--rn-width6);

    margin: 0 var(--um);

    box-sizing: border-box;

  }

  .row_4i {

    display: flex;

    justify-content: center;

    width: 100%;

    margin: 40px 0;

  }

  .card_s4 {

    box-shadow: 0px 0px 4px 0px black;

    border-radius: 5px;

    border: solid 5px var(--gray2);

    height: 150px;

    width: var(--rn-width4);

    margin: 0 var(--um);

    box-sizing: border-box;

  }

  .row_3i {

    display: flex;

    justify-content: center;

    width: 100%;

    margin: 40px 0;

  }

  .card_s3 {

    box-shadow: 0px 0px 4px 0px black;

    border-radius: 5px;

    border: solid 5px var(--gray3);

    height: 150px;

    width: var(--rn-width3);

    margin: 0 var(--um);

    box-sizing: border-box;

  }

  .row_2i {

    display: flex;

    justify-content: center;

    width: 100%;

    margin: 40px 0;

  }

  .card_s2 {

    box-shadow: 0px 0px 4px 0px black;

    border-radius: 5px;

    border: solid 5px var(--gray2);

    height: 150px;

    width: var(--rn-width2);

    margin: 0 var(--um);

    box-sizing: border-box;

  }

  .row_1i {

    display: flex;

    justify-content: center;

    width: 100%;

    margin: 40px 0;

  }

  .card_s1 {

    box-shadow: 0px 0px 4px 0px black;

    border-radius: 5px;

    border: solid 5px var(--black);

    height: 150px;

    width: var(--rn-width1);

    margin: 0 var(--um);

    box-sizing: border-box;

    overflow: hidden;

  }

  

  .guide_path {

    display: flex;

    width: 100%;

    flex-direction: row;

    justify-content: center;

    position: relative;

    background-color: rgb(255, 255, 255);

    height: 200vh;

  }

  

  .unit1 {

    height: 100%;

    background-color: rgba(34, 211, 255, 0.116);

    margin: 0 var(--um);

    width: var(--unit);

    height: 200vh;

  }

  

  /*/------------- mainTitle ----------/*/

  .mainTitle{

    width: var(--rn-width1);

    margin: 0 var(--um);

    box-sizing: border-box; 

    text-align: center;

    font-family: NouvelRBold;

  }

  .mainTitle .title {

    font-size: 40px;

    font-weight: bold;

    font-family: NouvelRBold;

    margin-bottom: 14px;

  }

  

  

  /* ------------- equipement / options ---------- */

  .equipement-options {

    display: flex;

    text-align: left;

    flex-direction: row;

    align-items: flex-start;

    justify-content: space-between;

    gap: 50px;

  }

  

  .type {

    height: 150px;

    width: 13%;

    box-sizing: border-box;

  }

  

  .details-EQIPEMENTS,

  .details-Options {

    width: 100%;

  }

  .details-EQIPEMENTS.active,

  .details-Options.active{

    display: block;

  }

  .details-EQIPEMENTS ,

  .details-Options{

    display: none;

  }

  

  .details {

    display: flex;

    text-align: left;

    justify-content: flex-start;

    gap: 10.5%;

    flex-direction: row;

    overflow-x: hidden; 

    height: 255px;

  }

  

  .details::-webkit-scrollbar,

  .details::-webkit-scrollbar {

    width: 2px;

    background-color: var(--gray1);

  }

  

  .details::-webkit-scrollbar-thumb {

    background-color: var(--yellow); 

    border-radius: 5px;

  }

  

  .col1,

  .col2 {

    width: 41.5%;

    box-sizing: border-box;

    text-align: left;

  }

  .details .col1 h5,

  .details .col2 h5 {

    font-family: NouvelRRegular;

    letter-spacing: 0.5px;

    padding: 0;

    margin: inherit;

    padding-left: 20px;

    font-weight: 500;

  }

  .desc{

  font-family: NouvelRRegular;

  letter-spacing: 0.5px;

  margin: inherit;

  font-weight: 500;

  margin-bottom: 30px;

  margin-top: 20px;

  }

  .details .col1 h5::after,

  .details .col2 h5::after {

    content: "";

    background-color: var(--gray1);

    height: 1px; 

    width: 100%;

    display: block;

    margin: 10px 0 10px -17px;

  }

  

  .equipement-options .type .btn1, .equipement-options .type .btn2,

  .equipement-EQIPEMENTS .type .btn1, .equipement-EQIPEMENTS .type .btn2 {

    border-left:0px;

    border-right: 0px;

    border-bottom: 0px;

    border-top: 0px;

    font-size: 19px;

    margin: 16px 0 0px 20px;

    font-family: NouvelRRegular;

    font-weight: 500;

    cursor: pointer;

  }

  .equipement-options .type .btn1.active, .equipement-options .type .btn2.active ,

  .equipement-EQIPEMENTS .type .btn1.active, .equipement-EQIPEMENTS .type .btn2.active{

    border-left: 2px solid var(--yellow);

    font-family: NouvelRBold;

  }

  

  /* ------------- Renault ARKANA ---------- */

  .description {

  font-family: NouvelRRegular;

  margin: 20px;

  }

  .showcars .description{

  color: #2f2f2f;

  margin: 0 20px 0 20px;

  font-size: medium;

  }

  .showcars{

  width: var(--rn-width1);

    margin: 0 var(--um);

    box-sizing: border-box;

    text-align: center;

    font-family: NouvelRBold;

    background-color: #f7f7f7;

    display: flex;

    align-items: center;

    flex-direction: row;

  }

  .showcars .title-cards-details{

  font-size: 30px;

  font-family: NouvelRBold;

  margin: 0px;

  }

  .showcars .subtitle{

  font-size: 14px;

  font-family: NouvelRRegular;

  margin: 20px 0 20px 0;

  }

  .card-text-btns{

    width: var(--rn-width2);

    margin: 35px var(--um);

    box-sizing: border-box;

  }

  .card-btns{

  display: flex;

  margin: 0 auto;

  }

  .card-btns .card-btn1, .card-btns .card-btn2{

    height: 46px;

    width: var(--rn-width4);

    margin: 0 var(--um);

    box-sizing: border-box;

    font-family: NouvelRBold;

    font-size: 16px;

    cursor: pointer;

    transition: background-color 0.5s, color 0.5s;

  }

  .card-btns .card-btn1{

  background-color: rgb(255, 255, 255);

  color: var(--black);

  }

  .card-btns .card-btn2{

    background-color: var(--black);

    color: rgb(255, 255, 255);


  }

  .card-btns .card-btn1:hover{

  background-color: var(--black);

  color: rgb(255, 255, 255);

  }

  .card-btns .card-btn2:hover{

  background-color: var(--yellow);

  color: rgb(0, 0, 0);

  }

  .image-zone{

      margin: 0 var(--um);

    box-sizing: border-box;

    width: 50%;

    display: flex;

    flex-wrap: nowrap;

    justify-content: space-evenly;

    align-items: center;

  }

  .image-zone img{

  width: auto;

  }

  

  /*---------------cars_card-------------------*/

  .card-body .card-title{

  font-family: 'NouvelRBold' !important;

  }

  .cars_card-carousel-container {

   max-width: var(--rn-width1);

    margin: 0 var(--um);

    box-sizing: border-box;

    overflow: hidden;

  }

  #carousel6 .owl-stage {

  display: flex;

  justify-content: center;

  }

  #carousel6 .owl-item img {
    display: block !important;
    width: 80% !important;
    margin: auto !important;
    cursor: pointer;
  }

  #carousel6 .owl-nav button.owl-next, #carousel6 .owl-nav button.owl-prev, #carousel6 button.owl-dot {
    font-family: 'RenaultGroupSemibold' !important;
    font-size: 50px !important;
    width: 15px !important;
  }
  

  #carousel6 .owl-nav {

    position: absolute;

    top: 22%;

    transform: translateY(-50%);

    width: 100%;

    display: flex;

    justify-content: space-between;

    z-index: 1;

    font-size: 70px;

    color: #000000;

    height: 0px;

  }

  .card{

  width: var(--rn-width3);

  margin: 0 var(--um);

  box-sizing: border-box;

  font-family:  'NouvelRBold';

  }

  .card .card-img-top{

  width: 100%;

  }

  .card .card-text{

  font-family: 'NouvelRRegular';

  }

  .card .cardButton {

  color: var(--black);

  border-bottom: 2px solid var(--yellow);

  font-weight: 600;

  }

  .card .cardButton:hover {

  color: var(--black);

  border-bottom: 2px solid var(--black);

  font-weight: 600;

  }

  .hybrid{

  margin-top: -64px;

  }

  .card .hybrid .hybrid_text{

  color: #828282;

  }

  .card .hybrid .hybrid_full {

  border: 2px solid #0086cf;

  color: #0086cf;

  text-align: left;

  display: inline;

  padding: 8px 15px;

  border-radius: 4px;

  font-weight: 600;

  }

  

  .cars-section1, .cars-section2 {

  display: none;

  }

  

  .cars-section1.active, .cars-section2.active {

  display: block;

  }

  

  /*---------------backToTop-------------------*/

  .backToTop{

  width: var(--rn-width1);

  margin: 0 var(--um);

  box-sizing: border-box; 

  text-align: center;

  align-items: center;

  font-family: RenaultGroupSemibold;

  }

  .backToTop a{

  color: black;

  font-family: RenaultGroupSemibold;

  text-decoration: underline;

  }

  .backToTop svg{

  margin: auto;

  margin-bottom: -2px;

  margin-left: 10px;

  }

  

  

  

  /*-----------------------------------------------------------------------------------*/

  /*---------------------------------- Responsive -------------------------------------*/

  /*-----------------------------------------------------------------------------------*/

  @media (max-width: 1024px) {

  #carousel6 {

    width: 81%;

    z-index: 1;

    margin: auto;

  }

  #carousel4 .owl-item.active, #carousel4 .owl-item.cloned {

    width: auto !important;

  }

  #carousel6 .owl-nav {

    position: absolute;

    top: 34%;

    width: 100%;

    transform: translateY(-50%);

  }

  #carousel6 .owl-prev {

    font-family: 'RenaultGroupSemibold';

    left: 9px;

    position: absolute;

    font-size: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

  }

  #carousel6 .owl-next {

    right: 9px;

    position: absolute;

    font-size: 35px;

    font-family: 'RenaultGroupSemibold';

    display: flex;

    align-items: center;

    justify-content: center;

  }

  }

  

  @media (max-width: 1024px) {

    .card-btns .card-btn1, .card-btns .card-btn2 {

      width: 100%;

  }

    .images_carousel .thumbnails {

      width: 99%;

      margin: auto;

  }

    .car_detail_container .car_details {

      padding: 0 16px;

  }

    .car_detail_container .top_sec {

      padding: 15px 16px;

  }

    .breadcrumbs_bar1 {

      padding: 10px 16px;

  }

    .customBtn1 p {

      font-family: NouvelRBold;

      transition: color 0.3s;

      font-size: 13px;

    }

    .customBtn1 {

        width: 20%;

    }

    .car_detail_container .reglement_text {

      font-family: NouvelRRegular;

      font-size: 13px;

      margin: 18px 0;

    }

  

    .carDetail_carousel img {

      width: 100%;

  }

  

  .buttonList1 {

    justify-content: space-evenly !important;

  }

  

  .f_top_section_content {

    justify-content: space-around;

  }

  }

  

  

  @media screen and (min-width: 769px) and (max-width: 1024px) {

    .carDetail_carousel li {

      width: 550px !important;

    }

    :root {

      --rn-width_8u: 550px;

    }

  

    .breadcrumbs_bar1 {

      padding-left: 16px;

  }

  }

  

  

  @media (max-width: 920px) {

    .car_detail_container .price {

      margin: 0;

    }

  

    .car_info_leftSide {

      margin: 0 var(--um);

    }

  

    .car_info_rightSide {

      margin: 0 var(--um);

    }

  

    .car_detail_container .car_info {

      display: flex;

      padding: 0;

      margin: 35px 0 0 0;

    }

  

  

    .carousel_items2 {

      color: #fff;

      display: flex;

      flex-direction: column;

      align-items: flex-start;

      height: 100%;

      width: 100%;

      margin: auto;

      text-align: left;

      justify-content: flex-end;

    }

  

    .carousel_items2 .carInfo_card {

      background: #0000008f;

      padding: 25px;

      width: 50%;

      margin: 0 0 30px 50px;

    }

  

    .carousel_items2 .slide_title {

      font-weight: 600;

      font-family: sans-serif, NouvelRBold;

      font-size: 30px;

      margin: 0px;

    }

  

    .carousel_items2 .slide_subTitle {

      font-family: sans-serif, NouvelRBold;

      margin: 10px 0px;

      font-size: 20px;

      color: var(--gray1);

    }

    .carousel_items2 .slide_price {

      color: var(--white);

      font-family: NouvelRRegular;

      font-size: 20px;

    }

    .carousel_items2 .slide_price span {

      font-weight: 600;

      font-size: 30px;

    }

    .carousel_items2 .yellow_btn1 {

      background-color: var(--yellow);

      color: var(--black);

      font-weight: 600;

      padding: 10px 12px;

      font-family: NouvelRBold;

      margin: 20px 0 0 0;

      font-size: 20px;

    }

  

    .car_detail_container {

      width: 100%;

    }

  

    .car_detail_container .car_details {

      flex-direction: column;

    }

  

    .buttonList1 {

      width: 100%;

      justify-content: space-evenly;

    }

  

    .customBtn1 {

      width: 21%;

      padding: 10px;

    }

  

    .breadcrumbs_bar1 {

      width: auto;

      padding-left: var(--um);

    }

  

    .carDetail_carousel img {

      width: 100%;

    }

  

    .images_carousel .thumbnails {

      display: flex;

      width: 96%;

      overflow: hidden;

      flex-direction: row;

      align-items: center;

      justify-content: space-between;

      margin: auto;

      margin-top: 20px;

    }

  

    .bx-wrapper {

      padding: 0;

      margin: 0 !important;

      width: 96%;

    }

  

    .bx-viewport {

      width: auto;

      margin: auto;

    }

  

    .car_detail_container .images_carousel {

      box-sizing: border-box;

      display: flex;

      flex-direction: column;

      align-items: center;

    }

  

    .car_detail_container .radio_label {

      font-family: NouvelRRegular;

      font-size: 13px;

    }

    .car_detail_container .top_sec {

      padding: 15px 32px;

  }

  }

  

  /*------------------------------------*/

  /*--------------- tablet -------------*/

  /*------------------------------------*/

  @media (max-width: 800px) {

  

    .row_2i {

      flex-direction: column;

      align-items: center;

  }

    /*/------------- mainTitle ----------/*/

    .mainTitle{

    margin: 0 var(--um);

    box-sizing: border-box; 

    text-align: center;

    font-family: NouvelRBold;

    }

    .mainTitle .title {

    font-size: 29px;

    font-family: NouvelRBold;

    margin-top: 14px;

    }

    .mainTitle .reverstitle {

    font-size: 29px;

    font-family: NouvelRBold;

    margin-top: 0px;

    margin-bottom: -15px;

    }

    .mainTitle .title.exeption {

    margin-top: 0px;

    }

    .mainTitle .semititle {

    font-family: RenaultGroupSemibold;

    margin-bottom: 7px;

    color: var(--gray3);

    }

    /*--------------- equipement -------------*/

    .col1, .col2 {

      width: 100%;

    }

    .details {

      display: flex;

      flex-direction: column;

    }

    .equipement-options .type .btn1, .equipement-options .type .btn2, .equipement-EQIPEMENTS .type .btn1, .equipement-EQIPEMENTS .type .btn2 {

      margin-left: 0;

      font-size: 18px;

    }

    .details-EQIPEMENTS.active, .details-Options.active {

      margin-left: 44px;

    }

    

    /*--------------- stickercard -------------*/

    .card-text-btns {

      width: 55%;

      margin: 15px;

      box-sizing: border-box;

    }

    .image-zone img {

      width: 140%;

      margin-left: -50px;

      margin: auto;

    }

    .showcars .title-cards-details {

      font-size: 24px;

    }

    .card-btns .card-btn1, .card-btns .card-btn2 {

        margin: 0 5px;

        font-size: 15px;

        width: 100%;

    }

    

    /*--------------- card cards carousel -------------*/

    .card {

      width: auto;

    }

    #carousel6 {

      width: 100%;

      margin-left: 0;

    }

    }

    

    

  

  @media (max-width: 768px) {

    .bx-viewport {

      -webkit-transform: translatez(0);

      height: auto !important;

      width: 100%;

    }

    

    :root {

      --rn-width_8u: 100%;

    }

    

    .cardetail_carousselDesktop {

      display: none !important;

    }

    .cardetail_carousselTablet {

      display: block !important;

    }

    .cardetail_carousselMobile {

      display: none !important;

    }

    

    

    }

    

    

  

  

  

  @media (max-width: 500px) {

  

    .car_detail_container .classH1 {

      font-size: 25px;

  }

  

    .cardetail_carousselDesktop {

      display: none !important;

    }

    .cardetail_carousselTablet {

      display: none !important;

    }

    .cardetail_carousselMobile {

      display: block !important;

    }

    .car_detail_container .car_info {

      display: flex;

      padding: 0;

      margin: 0px 0 0 0;

      flex-direction: column;

  }

  

  .images_carousel .thumbnails {

    margin-top: 0px;

  }

  .customBtn1 {

    width: 90%;

    padding: 10px;

    margin: 5px 0;

  }

  .buttonList1 {

    margin-top: 10px;

    margin-bottom: 10px;

    flex-direction: column;

  }

  

  .carousel_items2 {

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    padding-top: 10px;

  }

  

  .carousel_items2 .carInfo_card {

    background: #0000008f;

    padding: 15px;

    width: 75%;

    margin: 0;

    border-radius: 5px;

  }

  

  .carousel_items2 .slide_title {

    font-size: 30px;

    margin: 10px 0;

  }

  

  .carousel_items2 .slide_subTitle {

    margin: 10px 0px;

    font-size: 22px;

  }

  

  .carousel_items2 .slide_price {

    font-size: 20px;

    margin: 10px 0;

  }

  

  .carousel_items2 .slide_price span {

    font-size: 30px;

  }

  

  

  .carousel_items2 .yellow_btn1 {

    margin: 20px 0;

    font-size: 15px;

    border-radius: 0;

  }

  

  .car_detail_container .top_sec {

    padding-left: 15px;

  }

  

  }

  

  /*------------------------------------*/

  /*--------------- phone -------------*/

  /*------------------------------------*/

@media (max-width: 425px) {
/*-----------breadcrumb -------------*/
  .breadcrumb a {
    font-size: 9px;
  }

/*-----------.mainTitle .title -------------*/
  .mainTitle .title {

    font-size: 20px;

    margin-top: 0px;

  }

  .row_1i {

    margin-bottom: 0px;

    margin-top: 15px;

  }

  /*--------------equipement-options--------------*/
  .details-EQIPEMENTS-title{

    font-size: 14px;

  }

  .equipement-options {

    display: flex;

    text-align: left;

    flex-direction: column;

    align-items: flex-start;

    justify-content: space-evenly;

    gap: 0px;

  }

  .details-EQIPEMENTS.active, .details-Options.active {

    margin-left: 0px; 

  }

  .type {

    height: auto;

    width: 100%;

    box-sizing: border-box;

    display: flex;

    gap: 20px;

  }

  .equipement-options .type .btn1.active, .equipement-options .type .btn2.active, .equipement-EQIPEMENTS .type .btn1.active, .equipement-EQIPEMENTS .type .btn2.active {

    border-bottom: 2px solid var(--yellow);

    margin-right: 0px;

    border-left: 0px;

  }


/*--------------equipement-options--------------*/

  .description {

    font-family: NouvelRRegular;

    margin: 0px;

    line-height: 1;

  }

  .showcars {

    flex-direction: column;

  }
  .image-zone img {

    width: 183%;

  }

  .card-btns {

    display: flex;

    flex-direction: column-reverse;

  }

  .card-text-btns {

    width: auto;

    margin: auto;

    box-sizing: border-box;

  }

  .card-btns .card-btn1 {

    margin: 5px 5px;

    border: 1px solid var(--gray2);

    margin-bottom: 20px;

  }

  .showcars .title-cards-details {

    font-size: 19px;

  }

  .showcars .subtitle {

    font-size: 13px;

  }


/*-----------------cars carousel-------------*/
  #carousel6 .owl-next{
    right: 0px;
    justify-content: flex-end;
  }
  #carousel6 .owl-prev {
    left: 0px;
    justify-content: flex-start;
  }


  /*-----------------main carousel-------------*/
  #headerCarouusel .owl-nav{
    display: none;
  }
  #headerCarouusel .owl-dots {
    display: block !important;
    bottom: 20px;
    position: relative;
  }
  #headerCarouusel .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #ffffff;
  }
  #headerCarouusel .owl-dots .owl-dot span {
    width: 74px;
    height: 3px;
    margin: 5px 7px;
    background: #d6d6d688;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity .2s ease;
    border-radius: 30px;
  }
  #headerCarouusel .owl-carousel .owl-nav {
    display: none;
  }
  #headerCarouusel .owl-nav button.owl-prev, #headerCarouusel .owl-nav button.owl-next {
    width: 20px;
    height: 60px;
  }
  #headerCarouusel .owl-nav button.owl-prev span {
    bottom: 16px;
    left: 5px;
    font-size: 28px !important;
  }
  #headerCarouusel .owl-nav button.owl-next span {
    bottom: 16px;
    right: 5px;
    font-size: 28px !important;
  }

}

    

    

    

    

    

    

    @media (max-width: 425px) {

    :root {

      --unit: 94px;

      --um: 16px;

    

      --cardHeight: 70px;

    

    

      --rn-width3: var(--unit);

      --rn-width1-5: calc(2 * var(--unit) + 2 * var(--um));

      --rn-width1: calc(3 * var(--unit) + 44 * var(--um));

    }

    .tablet {

      display: none !important;

    }

    

    .desktop {

      display: none !important;

    }

    

    .mobile {

      display: flex !important;

    }

    }

  

  @media (max-width: 375px) {

  :root{

    --logo1-height: 40px;

  }

  

  

  .breadcrumbs_bar1 a {

    font-size: 10px;

  }

  

  .carousel_items2 .carInfo_card {

    padding: 10px;

    width: 80%;

  }

  

  .carousel_items2 .slide_title {

    font-size: 25px;

  }

  

  .carousel_items2 .slide_subTitle {

    margin: 10px 0px;

    font-size: 15px;

  }

  

  .carousel_items2 .slide_price {

    font-size: 15px;

    margin: 10px 0;

  }

  

  .carousel_items2 .slide_price span {

    font-size: 20px;

  }

  

  

  .carousel_items2 .yellow_btn1 {

    font-size: 12px;

    border-radius: 0;

  }

  

  

  .car_detail_container .top_sec {

    padding-left: 5px;

  }

  

  .car_detail_container .classH1 {

    font-size: 20px;

  }

  

  

  .car_detail_container .sub_title {

    font-size: 12px;

  }

  

  

  .car_detail_container .sec_label {

    font-size: 13px;

  }

  

  .car_detail_container .radio_label {

    font-size: 10px;

  }

  

  .car_detail_container .radio_circle {

    height: 13px;

    width: 13px;

  }

  

  .car_detail_container .price {

    font-size: 20px;

    margin: 15px 0 0 0;

  }

  

  

  .car_detail_container .reglement_text {

    font-size: 10px;

    margin: 10px 0;

  }

  

  

  }

  

  

  

  