/*/------------------ breadcrumb ------------/*/

.breadcrumb_Container{

  display: flex;

  justify-content: center;

  width: 100%;

  margin: 0;

}

.breadcrumb {

  display: flex;

  height: 60px;

  width: var(--rn-width1);

  margin: 0 var(--um);

  box-sizing: border-box;

  background-color: white !important;

  margin-bottom: 0 !important;

  font-family: NouvelRRegular;

  flex-direction: row;

  align-items: center;

}

.breadcrumb a{

    color: var(--black);

    font-family: sans-serif, NouvelRRegular;

    font-size: 13px;

}

.breadcrumb svg{

  width: 26px;

  height: 10px;

  fill: currentcolor;

  color: var(--yellow);

  font-family: 'NouvelRBold';

}







/***************  title  *********************/

/*/------------- header-text ----------/*/

  .header-text-container{

    display: flex;

    justify-content: center;

    width: 100%;

    background-color: var(--black);

  }

  .header-text{

    width: var(--rn-width1);

    margin: 0 var(--um);

    color: #ffffff;

    text-align: center;

  }

  .header-text-container .header-text .title{

    font-size: 40px;

    letter-spacing: 3px;

    font-family: NouvelRBold;

    text-transform: uppercase;

    margin-top: 65px;

  }

  .header-text-container .header-text .text {

    font-family: NouvelRRegular;

    margin-bottom: 65px;

    font-size: 17.5px;

    letter-spacing: 1px;

    line-height: 1.3;

  }

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

  .mainTitle{

      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;

    }

    .mainTitle .title.exeption {

      margin-top: 0px;

    }

    .mainTitle .semititle {

      font-family: NouvelRRegular;

      margin-bottom: 20px;

    }

	 

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

/*--------------- phone1 -------------*/

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

@media (max-width: 425px) {

/*---------------breadcrumb---------------------*/

  .breadcrumb svg {

    width: 24px;

    height: 9px;

  }

  .breadcrumb a{

    font-size: 11px;

  }

/*/------------- header-text ----------/*/

  .header-text-container .header-text .text {

    font-size: 13.5px;

  }

  .header-text-container .header-text .title {

    font-size: 28px;

  }

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

    .mainTitle .title {

      font-size: 20px;

      margin-top: 0px;

    }

    .row_1i {

      margin-bottom: 0px;

      margin-top: 15px;

    }

  

/*-------cars cards---------*/

    .cars_card {

      width: 100%;

      margin: 10px 0px;

    }

    .cars_card .hybrid .hybrid_full {

      padding: 5px 11px;

      font-size: 12px;

      font-family: 'NouvelRBold';

    }

    .cars_card .hybrid .hybrid_text {

      font-size: 15px;

      margin-top: 22px;

      margin-bottom: 7px;

      font-family: 'NouvelRRegular';

    }

    .cars_card .card-title {

      font-family: 'NouvelRBold';

      font-size: 18px;

      margin: 15px 0px 0px 0px;

    }

    .cars_card .card-text {

      font-family: NouvelRRegular;

      margin: 10px 0px 10px 0px;

    }

    .cars_card .cardButton {

      font-size: 13px;

    }

    .technologies_card .card3 .card-body .card-title {

      margin-top: 14px;

    }

/*--- to show just 3 cars ---*/

    .cars-section1 .cars_card, .cars-section2 .cars_card {

      display: none;

    }

    .cars-section2 .cars_card:nth-child(-n+3) {

      display: block;

    }

    .cars-section1 .cars_card:nth-child(-n+3) {

      display: block;

    }

    .showMorecarsBTN{

      display: block;

      background-color: transparent;

      border: 1px solid black;

      color: rgb(0, 0, 0);

      font-weight: bold;

      font-size: 16px;

      height: 46px;

      font-family: NouvelRBold;

      padding: 0px;

      width: -webkit-fill-available;

    }

    .row_3i {

      margin: 10px 0;

    }

    .mb-0{

        margin: 0px 0px;

    }

    .gamme_Renault {

      margin-bottom: 0px;

    }

   

  

/*------back to top---------*/

    .backToTop a {

      color: black;

      font-size: small;

    }

  

  }

  

  

/***end tiitle***/






/*---------------- technologies -------------------*/

.technologies_card{

    width: var(--rn-width3);

    margin: 0 var(--um);

    box-sizing: border-box;

    font-family: NouvelRBold;

}

.technologies_card .card3 .card-img-top {

  width: 100%;

}

.technologies_card .card3 .card-body .card-title {

  font-size: 18px;

  font-weight: 600;

  font-family: NouvelRBold;

}    

.technologies_card .card3 .card-body .card-text {

  font-size: 17px;

  font-family: NouvelRRegular;

}

.technologies_card .card3 .card-body .btn {

  color: black;

  font-weight: 600;

  font-family: NouvelRBold;

}

.technologies_card .card3 hr {

  margin: 0;

  width: 70px;

  background-color: var(--yellow);

  border: none;

  height: 2px; 

}

.card3 .card-body > div {

  margin-top: auto; 

  display: flex;

}

.card3 .card-body > div a {

  margin-right: 15px; 

}

.card3 {

  position: relative;

  display: flex;

  flex-direction: column;

  height: 100%;

}

.card3 .card-body {

  flex-grow: 1; 

  display: flex;

  flex-direction: column;

}



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

.mainTitle{

    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;

  }

  .mainTitle .title.exeption {

    margin-top: 0px;

  }

  .mainTitle .semititle {

    font-family: NouvelRRegular;

    margin-bottom: 20px;

  }



/*---------------Gamme renault-------------------*/
.gamme_Renault{
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 4px 0;
}
.vehicule_type_container{
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 40px 0;
}
.vehicule_type{
  width: var(--rn-width4);
  margin: 0 var(--um);
  box-sizing: border-box; 
  text-align: center;
  align-items: center;
  font-family: NouvelRBold;
}
.vehicule_type .type_button1, .vehicule_type .type_button2 {
  background: transparent;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-family: 'NouvelRRegular';
}
.vehicule_type .type_button1:hover, .vehicule_type .type_button2:hover {
  font-family: 'NouvelRBold';
}
.vehicule_type .type_button1.active, .vehicule_type .type_button2.active {
  border-bottom: 2px solid var(--yellow);
  font-family: 'NouvelRBold';
  color: var(--black);
}

/*---------------cars_card-------------------*/
.card-body {
  margin-top: 32px;
}
.card-title {

  font-family: 'NouvelRBold';

  margin: 13px 0;

}

.cars_card{

  /*width: var(--rn-width3);*/

  width: 30%;

  margin: 0 var(--um);

  box-sizing: border-box;

  font-family:  NouvelRBold;

}

.showMorecarsBTN{

  display: none;

}

.cars_card .card-img-top{

    width: 80%;

    display: block;

    margin: auto;

    cursor: pointer;

}

.cars_card .card-text {

  font-family: NouvelRRegular;

  margin-top: -6px;

  margin-bottom: 7px;

}

.cars_card .cardButton {

  color: var(--black);

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

  font-weight: 600;

  cursor: pointer;

}

.cars_card .cardButton:hover {

  color: var(--black);

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

  font-weight: 600;

}

.hybrid {
  margin-top: -54px;
}

.cars_card .hybrid .hybrid_text {

  color: #828282;

  font-family: 'NouvelRRegular';

  margin-bottom: 6px;

  font-size: 14px;

}

.cars_card .hybrid .hybrid_full {

  border: 2px solid #0086cf;

  color: #0086cf;

  text-align: left;

  display: inline;

  padding: 5px 6px;

  border-radius: 4px;

  font-weight: 600;

  font-size: 12px;

}


.cars-section1, .cars-section2 {

  display: none;

}

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

  display: block;

}
.cars-section1, .cars-section2 {
  width: var(--rn-width1);
  margin: 0 var(--um);
  box-sizing: border-box;
}
.todispear {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 40px 0;
}




/*---------------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 (min-width: 801px) {

  .cars-section-tablet{

    display: none;

  }

}

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

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

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

@media (max-width: 800px) {

  .gamme_Renault {

      margin-bottom: -40px;

  }



/*/------------- 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);

  }



/*--------------- cars cards -------------*/

  .cars_card {

    width: 45%;

    margin: 0 var(--um);

  }

  .cars-section-tablet{

    width: var(--rn-width1);

    margin: 0 var(--um);

    box-sizing: border-box;

  }

  .vehicule_type_container, .todispear{

    display: none;

  }

  .cars-section1, .cars-section2 {

    display: block;

  }

  .collapsing {

    transition: height 0.2s ease;

  }

  

  .collapse {

    display: none;

    transition: display 0s ease-out, height 0.2s ease;

  }

  

  .collapse.show{

    display: block;

  }

  .btn.btn-link.collapsed, .btn.btn-link {

    background: transparent;

    border-top: 0px;

    border-left: 0px;

    border-right: 0px;

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

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

    cursor: pointer;

    width: 100%;

    font-weight: 100;

    text-align: left;

    display: flex;

    align-items: center;

    padding: 10px 0;

  }

  .btn.btn-link {

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

    font-family: 'NouvelRBold' !important;

    font-weight: 600;

    border-top: 0px;

  }

	/* Rotate the icon when the collapse is open */

    .card-header.bg-black .rotate-icon {

      transform: rotate(180deg);

    }

    /* Rotate the icon when the collapse is closed */

    .card-header .collapsed .rotate-icon {

      transform: rotate(0deg);

    }

	 /* Rotate the icon when the collapse is open */

    #headingTwo .rotate-icon {

      transform: rotate(180deg);

    }

    /* Rotate the icon when the collapse is closed */

    #headingTwo .collapsed .rotate-icon {

      transform: rotate(0deg);

    }

    .rotate-icon {

      transition: transform 0.5s ease-in-out; 

      margin-left: auto; 

      display: flex; 

    }

  .row_3i {

    display: flex;

    justify-content: center;

    width: 100%;

    margin: 40px 0;

    flex-direction: row;

  }

  .mainTitle button {

    padding: 0px 46px;

  }





}



@media (max-width: 671px) {

	.cars_card {

    width: 100%;



  }

}



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

/*--------------- phone1 -------------*/

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

@media (max-width: 425px) {



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

  .mainTitle .title {

    font-size: 20px;

    margin-top: 0px;

  }

  .row_1i {

    margin-bottom: 0px;

    margin-top: 15px;

  }



/*-------cars cards---------*/

  .cars_card {

    width: 100%;

    margin: 10px 0px;

  }

  .cars_card .hybrid .hybrid_full {

    padding: 5px 11px;

    font-size: 12px;

    font-family: 'NouvelRBold';

  }

  .cars_card .hybrid .hybrid_text {

    font-size: 15px;

    margin-top: 22px;

    margin-bottom: 7px;

    font-family: 'NouvelRRegular';

  }

  .cars_card .card-title {

    font-family: 'NouvelRBold';

    font-size: 18px;

    margin: 15px 0px 0px 0px;

  }

  .cars_card .card-text {

    font-family: NouvelRRegular;

    margin: 10px 0px 10px 0px;

  }

  .cars_card .cardButton {

    font-size: 13px;

  }

  .technologies_card .card3 .card-body .card-title {

    margin-top: 14px;

  }

  /*--- to show just 3 cars ---*/

  .cars-section1 .cars_card, .cars-section2 .cars_card {

    display: none;

  }

  .cars-section2 .cars_card:nth-child(-n+3) {

    display: block;

  }

  .cars-section1 .cars_card:nth-child(-n+3) {

    display: block;

  }

  .showMorecarsBTN{

    display: block;

    background-color: transparent;

    border: 1px solid black;

    color: rgb(0, 0, 0);

    font-weight: bold;

    font-size: 16px;

    height: 46px;

    font-family: NouvelRBold;

    padding: 0px;

    width: -webkit-fill-available;

  }

  .row_3i {

    margin: 10px 0;

  }

  .mb-0{

      margin: 0px 0px;

  }

  .gamme_Renault {

    margin-bottom: 0px;

  }

 



/*------back to top---------*/

  .backToTop a {

    color: black;

    font-size: small;

  }



}





.row_i {

  position: absolute;

  width: 100%;

  top: 150px;

}

.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: var(--cardHeight);

  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: var(--cardHeight);

  width: var(--rn-width4);

  margin: 0 var(--um);

  box-sizing: border-box;

}

.row_3i {
  display: flex;

  justify-content: center;

  width: 100%;

  margin: 40px 0;

  flex-wrap: wrap;

  gap: 35px 0;
}

.card_s3 {

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

  border-radius: 5px;

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

  height: var(--cardHeight);

  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: var(--cardHeight);

  width: var(--rn-width2);

  margin: 0 var(--um);

  box-sizing: border-box;

}

.row_2-5i {

  display: flex;

  justify-content: center;

  width: 100%;

  margin: 40px 0;

}

.card_s2-5 {

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

  border-radius: 5px;

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

  height: var(--cardHeight);

  width: var(--rn-width2);

  margin: 0 var(--um);

  box-sizing: border-box;

}

.row_1-2i {

  display: flex;

  justify-content: center;

  width: 100%;

  margin: 40px 0;

}

.card_s1-2 {

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

  border-radius: 5px;

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

  height: var(--cardHeight);

  width: var(--rn-width1);

  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: var(--cardHeight);

  width: var(--rn-width1);

  margin: 0 var(--um);

  box-sizing: border-box;

}

.row_1-5i {

  display: flex;

  justify-content: center;

  width: 100%;

  margin: 40px 0;

}

.card_s1-5 {

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

  border-radius: 5px;

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

  height: var(--cardHeight);

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

  margin: 0 var(--um);

  box-sizing: border-box;

}





/*---------------- technologies -------------------*/

.technologies_card{

    width: var(--rn-width3);

    margin: 0 var(--um);

    box-sizing: border-box;

    font-family: NouvelRBold;

}

.technologies_card .card3 .card-img-top {

  width: 100%;

}

.technologies_card .card3 .card-body .card-title {

  font-size: 18px;

  font-weight: 600;

  font-family: NouvelRBold;

}    

.technologies_card .card3 .card-body .card-text {

  font-size: 17px;

  font-family: NouvelRRegular;

}

.technologies_card .card3 .card-body .btn {

  color: black;

  font-weight: 600;

  font-family: NouvelRBold;

}

.technologies_card .card3 hr {

  margin: 0;

  width: 70px;

  background-color: var(--yellow);

  border: none;

  height: 2px; 

}

.card3 .card-body > div {

  margin-top: auto; 

  display: flex;

}

.card3 .card-body > div a {

  margin-right: 15px; 

}

.card3 {

  position: relative;

  display: flex;

  flex-direction: column;

  height: 100%;

}

.card3 .card-body {

  flex-grow: 1; 

  display: flex;

  flex-direction: column;

}









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

.mainTitle{

    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;

  }

  .mainTitle .title.exeption {

    margin-top: 0px;

  }

  .mainTitle .semititle {

    font-family: NouvelRRegular;

    margin-bottom: 20px;

  }








/*---------------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;

}