* {
  margin: 0;
  padding: 0;
  /* font-family: "Lato"; */
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  flex: 1;
  background-color: #F9F1F9;
}
footer {
  margin-top: auto;
}
#models-page{
  padding-top: 85px;
  display: inline-flex;
  flex-direction: row;
  max-width: 1440px !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
  gap: 20px;
}

#models,
#choices {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; 
  box-sizing: border-box; 
}
.models { 
  margin-left: 10px;
  width: 630px; 
  flex-direction: column;
  justify-content: flex-end;  
}
.slide-car-model {
  /* position: absolute; */
  max-width: 630px;
  height: 390px;
  border-radius: 12px;
  background-color: #f9f9f9;
  display: flex;  
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

.selected-img-style {
  width: 100%;
  height: 100%;
  border-radius: 12px;  
  /* object-fit: cover; */
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);  
}

#previous-btn,
#next-btn {
  display: none;
}

.footer-image {
  margin-top: 20px;  
  width: 624px;
  height: 200px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.tumbs-car {
  width: 144px;
  height: 90px;
  cursor: pointer;
  background-color: #f9f9f9;
  border-radius: 12px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
.tumbs-car:hover {
  width: 143px;
  height: 89px;
  box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.2);
}
.choices {  
  width: 500px;
  flex-direction: column;
  margin-left: 40px;
  
}
.caracteristics {
  width: 85%;
  height: 195px;
  display: flex;
  flex-direction: column;
  justify-content: justify;
  margin-top: 0px;
}
.tit-marca {
  display: inline-flex;
  align-items: flex-start;
  /* font-family: Lato; */
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  color: #666666;
}
.tit-car {
  gap: 5%;
  /* font-family: Lato; */
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 125%;
  color: #961e96;
}
.tit-model {
  gap: 5%;
  /* font-family: Lato; */
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  color: #961e96;
  margin-bottom: 12px;
}
.desc-model {
  /* font-family: Lato; */
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  color: #666666;
}
.div-color {
  margin-top: 32px;
  width: 85%;
  height: 80px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.title-btn {
  /* font-family: "Lato"; */
  font-size: 24px;
  font-weigth: 600;
  color: #666666;
  line-height: 100%;
  margin-botom: 10px;
}
.btn-collors {
  margin-top: 16px;
  display: flex;
  flex-direction: row;
  justify-content: justify;
  margin-botom: 10px;
  gap: 20px;
}
.btn-cl {
  width: 40px;
  height: 40px;
  border-radius: 250px;
  border: 2x solid;
}

.obs-cllr {
  margin-top: 10px;
}

.btn-choice {
  margin-top: 32px;
  width: 360px;
  height: 46px;
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
}

#div-plano {
  margin-top: 62px;
  display: flex;
  flex-direction: column;
  justify-content: justify;
  gap: 10px;
}
.tit-plan {
  display: flex;
  width: 340px;
  flex-direction: column;
  flex-shrink: 0;
  /* font-family: Lato; */
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 125%;
  color: #961e96;
  text-align: left !important;
  gap: 10px;
}
.obs-plan {
  /* font-family: Lato; */
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  color: #666666;
}
.promo_plano{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.price-title {
  margin-top: 12px;
  width: 340px;
  height: 36px;
  display: flex;
  flex-direction: row;
  align-itens: center;
  justify-container: flex-start;
  text-align: center;
  /* font-family: "Lato"; */
  font-size: 16px;
  font-weight: 400;
  line-height: 180%;
  color: #666666;
  gap: 5px;
}
.price {
  /* font-family: "Lato"; */
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  color: #ffa000;
  display: flex;
  /* justify-content: center; */
}
.value {
  display: flex;  
  justify-content: center;
  text-align: center;
  /* font-family: "Lato"; */
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 70%;
  color: #ffa000;
}

.value_desc{
  display: flex;  
  justify-content: center;
  text-align: center;
  /* font-family: "Lato"; */
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  
  color: #ffa000;
}

.value_promo {
  /* font-family: "Lato"; */
  font-size: 16px;
  font-style: normal;
  font-weight: 700;  
  color: #666666;
  display: flex;
  text-decoration: line-through;  
}


.btn-solicite {
  margin-top: 16px;
  width: 80%;
  height: 48px;
  padding: 8px, 15px, 8px, 15px;
  gap: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  border: 2px solid var(--orange);
  color: var(--orange);
  border-radius: 8px;
  text-align: center;
  font-size: 20px;
  /* font-family: Lato; */
  font-style: normal;
  font-weight: 400;
  line-height: 133%;
}
.btn-solicite:hover,
.btn-solicite.active {
  color: #f9f9f9;
  border: transparent;
  background: linear-gradient(
    14.06deg,
    var(--orange) -0.28%,
    var(--orangelight) 100.14%
  );
}

.btn-modelos {
  margin-top: 16px;
  width: 40%;
  height: 48px;
  padding: 8px, 15px, 8px, 15px;
  gap: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  border: 2px solid var(--orange);
  color: var(--orange);
  border-radius: 8px;
  text-align: center;
  font-size: 20px;
  /* font-family: Lato; */
  font-style: normal;
  font-weight: 400;
  line-height: 133%;
  text-decoration: none;
}
.btn-modelos:hover,
.btn-modelos.active {
  color: #f9f9f9;
  border: transparent;
  background: linear-gradient(
    14.06deg,
    var(--orange) -0.28%,
    var(--orangelight) 100.14%
  );
}

#defesa {
  color: #ffffff;
  background-color: var(--purple);
  font-size: 10px;
  padding: 40px 0;
  margin-top: -2px;
}

.container {
  width: 948px;
  margin: 0 auto;
  text-align: justify;
}


.caract-container{
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  gap: 20px;
}

#caracteristics2,
#resume-caract {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box; 
}

#caract-box {
  margin-top: 20px;    
  display: flex; 
  flex-wrap: wrap;lk
  align-items: center;  
}

#accordionCars {
  Width: 500px;  
  margin: 0;
}

.accordionsCars {
  width: 100%;  
  border-bottom: 2px solid #a3a3a3;
}

.caracteristics2{
  align-items: center;    
  margin-bottom: 60px;
}

.aCaract-name {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #a3a3a3;
  font-weight: 700;
  cursor: pointer;
  padding: 10px 1%;
  font-size: 20px;
  line-height: 30px;
}

.aCaract-name:hover {
  background-color: #f1f1f1;
}

.aCars-seta {
  width: 8px;
  transition: 0.2s all;
  transform: rotate(0deg);
  background-color: #F9F1F9;
}

.aCaract-body {
  width: 100%;
  margin: 0px auto 28px auto;
  color: #a3a3a3;
  display: none;
}

.aCaract-seta {
  width: 8px;
  transition: 0.2s all;
  transform: rotate(0deg);
  color: #a3a3a3;
  background-color: #F9F1F9;
}

.img-active {
  transition: 0.2s all;
  transform: rotate(-90deg);
}

.resume-caract{
  margin-top: 20px;
  margin-left: 10px;
  margin-bottom: 120px;
  width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* gap: 10px; */
}

.tit-caract{
  width:90%;
  /* font-family: Lato; */
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  margin-left: 100px;
  margin-right: 0;
  /* display: flex;
  align-itens: center; */
  color: #FFA000;
  margin-bottom: 18px;  
}

.icons-values{
  margin-left: 10px;
  margin-right: 10px;  
  width: 8%;
  height: 200px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.iten-carac{
  display: grid;
  grid-template-columns: 50px 200px;
  gap: 10px;
}

.icon-carac{
  grid-column: 1;
  width: 50px;  
}
.iten-value{
grid-column: 2;
width: 200px;
}

.tit-icons {  
  grid-row: 1; 
  width: 120px;
  height: 24px;
  
}
.value-carac {  
  grid-row: 2;
  width: 120px;
}

.tit-icons{
  margin: 0;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  /* line-height: 150%; */
  color: #A3A3A3;
}

.value-carac{
  margin: 0;
  /* font-family: Lato; */
  font-size: 16px;
  font-style: normal;
  font-weight: 600;  
  color: #FFA000;
}

.ficha-tec{
  margin top: 70px;
  margin-right: 50px;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;

}
.tit-ficha{
  margin-top: 20px;
  color: var(--low-medium, #666);  
  /* font-family: Lato; */
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  margin-bottom: 20px;
}

//CORES DOS VEÍCULOS

.adventuring_green{
  background-color: #848F79;
}
.afterglow_pink{
  background-color: #E9D4CC;
}
.apricity_white{
  background-color: #EBEBEB;
}
.atlantis_grey{
  background-color: #8598A7;
}
.azul_celestial{
	background-color: #007fff;
}
.azul_jazz{
  background-color: #434E72;
}
.azul_patriot{
  background-color: #11264B;
}
.azul_tita{
  background-color: #496076;
}
.branco_lunar{
  background-color: #F5F5F3;
}
.branco_neve{
  background-color: #F7FBFC;
}
.branco_polar{
  background-color: #F8F8F7;
}s
.branco_perola{
  background-color: #F4F4F4;
}
.branco-sonico{
  background-color: #F5F6FC;
}
.bright_withe,
.branco_banchisa{
  background-color: #FFF;
}
.bronze{
	  background-color: #655447;
}
.cheese_yellow{
  background-color: #F5F1C4;
}
.cinza_celestial,
.cinza_silverstone{
  background-color: #8BA8BC;
}
.cinza_cromo{
  background-color: #838691;
}
.cinza_da_montanha{
  background-color: #80838E;
}
.cinza_granite{
  background-color: #505259;
}
.cinza_strato {
  background-color: #545454;
}
.cinza_granito{
  background-color: #8E9DA7;
}
.cinza_sting{
  background-color: #868B8D;
}
.cinza_titanio{
  background-color: #C2C3C0;
}
.climbing_grey{
  background-color: #7D838C;
}
.cosmos_black{
  background-color:#303030
}
.delan_black{
  background-color: #0E0E0E;
}
.doctor_preto{
  background-color: #16151A;
}
.dolphin_grey{
  background-color: #AAAAAC;
}
.dome_blue{
  background-color: #013984;
}
.emperor_red{
  background-color: #8F0214;
}
.freerunning_red{
  background-color: #C0132C;
}
.marrom_urban {
  background-color: #472F29;
}
.maximum_steel {
  background-color: #24272B;
}
.peach_pink {
  background-color:#E9D4CC;
}
.polar_nigth-black,
.preto_vulcano{
  background-color: #151515;
}
.prata_bari {
  background-color: #E4E4E4;
}
.prata_billet{
  background-color: #7D7D82;
}
.prata_lua_nova{
  background-color: #C3CBD0;
}
.prata_nevoa{
  background-color: #C5CDCB;
}
.prata_platinum{
  background-color: #BDC1C6;
}
.prata_supernova{
  background-color: #D5D6D8;
}
.preto_attitude{
  background-color: #1A1B1B;
}
.preto_diamond{
  background-color: #000;
}
.preto_carbon{
  background-color: #191919;
}
.preto_eclipse,
.polar_nigth_black{
  background-color: #242728;
}
.preto_grafite{
  background-color: #3F3F41;
}
.preto_infinito,
.preto_vulcano{
  background-color: #282E30;
}
.skiing_white{
  background-color: #E0E5E3;
}
.snow_white{
  background-color: #FAF9F9;
}
.sprout_green{
  background-color: #D0E551;
}
.superfing_blue{
  background-color: #0285C8;
}
.time_grey{
  background-color: #656565;
}
.verde_musgo{
  background-color: #717B4B;
}
.vermelho,
.vermelho_flame,
.vermelho_montecarlo {
  background-color: #FF0000;
}
.vermelho_granada{
  background-color: #7E1F23;
}
.vermelho_imperador{
  background-color: #E10528;
}
.vermelho_volcano{
  background-color: #D41B24;
}

.slider.mobile{
  display : none !important ;  
}


.notFound{
  dispay: flex;
  flex-direction: column;
  justify-content: center;
}

h2{
  color: var(--cta-button-purple, #961e96);  
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 125%;
  padding: 10px 0;
}


@media (max-width: 1080px){
  #models-page{
    margin-top: 40px;  
    display: flex;
    width: 100%;
  }

  .caract-container{
    flex-direction: column;
  }

  .models {
    order: 0;
    display:flex;
  }
  .choices{
    order: 2;    
  }
  .resume-caract{
    order: 3;
    margin-bottom: 180px;
    flex-wrap: wrap;
  }
  .caracteristics2{
    order: 4;
  }

  .div-color {
    margin-bottom: 10px;
    width: 90%
  }
  .btn-cl {
    width: 30px;
    height: 25px;
    border-radius: 200px;
  }

  .tit-caract{
    margin-left: 0;
  }

  .icons-values {
    grid-template-columns: 1fr; 
    gaap: 10px;
  }
}

@media (max-width: 630px) {
  #models-page{
    width: 100%;
    display: flex;
    margin: 0;    
  }
  .choices{
    display: flex;
    width: 300px;
    margin: 0;
  }
  .models{
    margin-top: 70px;
    display: flex;
    width: 300px;
  }
  .slide-car-model{
    width: 100%;
    height: auto;
  }
  
  
  .div-color {
    width: 90%
  }
  .btn-cl {
    width: 25px;
    height: 20px;
    border-radius: 200px;
  }
  .footer-image{
    width: 100%;
    height: auto;
    justify-content: center;
  }
  #caract-box{ 
    width: 95%;
    display: flex;   
    align-items: flex-start;
  }
  .icons-values{
    margin-left: 150px;
    margin-rigth: 0;
    justify-content: center;
  }
  .tit-caract{
    margin-left: 10%;
  }
  #caracteristics2{
    width: 100%; 
  }
  #accordionCars{
    width: 95%;    
    background-color: #F9F1F9;
  }
  
}