@media screen and (min-width: 1200px){
  *{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'calibri';
  }
  body{
   background-color: white;
   padding-left: 10px;
   padding-right: 10px;
  }

  .container{
   display: block;
   width: 100%;
  }
  .btn-whats{
   display: flex;
   position: fixed;
   left: 0;
   bottom: 0;
   width: 30vh;

  }

  .material-symbols-outlined{
    display: none;
  }
/**************************************************************** menu *****************************************************************************************/

nav{
  display: block;
}
header{
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 3fr;
}
.area-logotipo{
  display: flex;
  width: 100%;
  padding: 20px;
  grid-column: 1/2;
}
.logo{
  display: flex;
  width: 100%;
  grid-column: 1/2;
}

#burger{
  display: none;
}

.area-links{
  display: flex;
  width: 100%;
  grid-column: 2/-1;
  padding: 10px;
  justify-content: end;

}
#arealinks{
  display: none;
}

.itemlinkmenu{
  display: flex;

}

.itemlinkmenu{
  display: flex;

}
.itemlinkmenu a{
  color: black;
  font-size: 1.5vw;
  text-decoration: none;
  font-family: 'calibri';
  margin-right: 3vw;

}
.itemlinkmenu a:hover{
  color: #eb7a02;
}

/***************************************************************** area carroussel **********************************************************************************/


.area-carrossel{
  display: block;
  height: 100%;
  margin-top: 2%;
}

.carousel {
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 1px 1px 20px 1px whitesmoke;
}

.slide {
  width: 95%;
  display: none;
  text-align: center;
  transition: transform 0.5s ease-in-out; /* Alterado para transição de transformação */
}
.slide img{
  width: 100%;
  height: 100%;
}

/************************************************ area sobre nos ****************************/


.fundo-sobrenos{
  display: block;
  width: 100%;
  margin: 0 auto;
  margin-top: 5%;
}
.area-sobrenos{
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
}
.areafotocaminhao{
  display: grid;
  grid-column: 1/2;
  justify-content: center;
  align-items: center;
  padding-left: 2%;

}
.areafotocaminhao img{
  width: 100%;
  height: 85%;
  border-radius: 20px;
}
.areasobre{
  display: flex;
  grid-column: 2/-1;
  justify-content: center;
  align-items: center;
}

.conteudosobre{
  display: grid;
  width: 80%;
  justify-content: center;
  text-align: center;
}

.conteudosobre h2{
  font-size: 1.5vw;
}
.conteudosobre p{
  font-size: 1.5vw;
  font-family: 'calibri';
}

.sobre{
  font-size: 1.5vw;
}


/************************************************ area info *************************************************/

.area-info{
  display: flex;
  background-color: #EF8219;
  width: 100%;
  margin-top: 5%; 
  justify-content: center;
}

.info img{
  width: 85%;
  height: 100%;
}


/********************************* area descubra ******************************/

.fundo-descubra{
  display: block;
  width: 100%;
  margin-top: 5%;
  
  padding: 2px;
}
.area-descubra-texto{
  display: flex;
  width: 100%;
  justify-content: center;
  
}
.area-descubra-texto p{
  font-size: 3vw;
  
}

.area-descubra-img{
  display: grid;
  width: 100%;
  margin-top: 5%;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  padding: 20px;
}
.area-descubra-img img{
  width: 100%;
  border-radius: 20px;

}

.fundo-btn-descubra{
  display: grid;
  width: 100%;
  justify-content: center;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  padding: 20px;
}

.btn-descubra{

  width: 100%;
  font-family: Roboto Condensed;
  font-size: 2.4vw;
  color: #ffffff;
  background: linear-gradient(217deg, #eb7a02 0%, #c500cc 100%);
  padding: 10px 30px;
  border: none;
  box-shadow: rgb(0, 0, 0) 1px -2px 50px -50px;
  border-radius: 1px;
  transition : 437ms;
  transform: translateY(0);
  align-items: center;
  cursor: pointer;
  text-transform: uppercase;
  text-decoration: none;
  }

.area-descubra-img a{
  text-decoration: none;

}

.btn-descubra:hover{

transition : 437ms;
padding: 10px 37px;
transform : translateY(-0px);
background: linear-gradient(217deg, #eb7a02 0%, #c500cc 100%);
color: #000000;
border: none;
}



#fundo-contato{
  display: block;
  width: 100%;
  margin-top: 5%;
}

.area-contato{
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  padding: 10px;
}
.area-legenda-foto{
  display: grid;
  width: 100%;
  grid-column: 1/2;
  grid-row: 1/2;
  padding: 10px;
  justify-content: center;
  margin-top: 3%;
  text-align: center;
}
.area-legenda-foto h2{
  font-size: 1.8vw;
}
.dizeres-contato{
  display: grid;
  justify-content: center;
  text-align: start;
  width: 100%;
  font-size: 2.5vw;
}
.horario{
  display: grid;
  justify-content: center;
  text-align: center;
  width: 100%;
  font-size: 2vw;
  margin-top: 1%;
}


.area-foto{
  display: grid;
  grid-column: 1/2;
  width: 100%;
  padding: 10px;
  justify-content: center;
  grid-row: 2/-1;
}
.area-foto img{
  width: 100%;
  height: 100%;
}


.fundo-area-formulario{
  display: block;
  grid-column: 2/-1;
  grid-row: 1/-1;
  background-color: #eb7a02;
  height: 100%;
  border-radius: 20px;
}
.cab-form{
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 5%;
}
.cab-form h2{
  font-size: 2vw;
}

.info-form{
  display: grid;
  width: 100%;
  margin-top: 5%;
  justify-content: center;

}
.info-form label{
  display: block;
  width: 100%;
  font-size: 2vw;
  text-align: center;
  margin-top: 3%;
}
.info-form input{
  display: block;
  width: 30vw;
  height: 4vh;
  margin-top: 3%;
  background-color: white;
}
#message{
  display: block;
  width: 30vw;
  height: 9vh;
  background-color: white;
}

#file{
  height: 5vh;
  width: 100%;
}

.btn_enviar{
  margin-top: 5%;
  width: 10vw;
  height: 7vh;
  font-size: 2vw;
  padding: 5px;
  border-radius: 5px;

}








 /******************************************************  area rodape **************************************************************************/

 .fundo-rodape{
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  padding: 10px;
  background-color: #000000;
}

 .area-rodape-a{
  display: grid;
  width: 100%;
  justify-content: center;
  margin-bottom: 5%;
  background-color: #000000;
  color: white;
  grid-column: 1/2;
  grid-row: 1/-1;

 }
 .fundo-rodape-a-img{
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  margin-top: 5%;
  margin-bottom: 6%;
  margin-left: 5%;
 }
 .fundo-rodape-a-img img{
  width: 40px;
 }
 .fundo-rodape-a-texto{
  display: grid;
  justify-content: center;
  text-align: center;
  font-size: 1.5vw;
 }
 .sac-text{
  font-size: 1.5vw;
 }

 .rodape-b{
  display: grid;
  justify-content: center;
  align-items: center;
  line-height: 20px;
  list-style: none;
  text-align: center;
  background-color: #000000;
  color: #eb7a02;
  grid-column: 2/3;
  grid-row: 1/-1;
  font-size: 2vw;
 }
 .rodape-b a{
  text-decoration: none;
  text-align: center;
  color: white;
  font-size: 1.5vw;
 }
 .rodape-b a:hover{
  color: #eb7a02;
 }


 .rodape-c{
  width: 100%;
  display: grid;
  justify-content: center;
  margin-bottom: 5%;
  grid-column: 3/-1;
  grid-row: 1/-1;
 }
 .rodape-fundo-end{
  display: flex;
  margin-top: 5%;
  margin-bottom: 5%;
  justify-content: center;
  color: #eb7a02;
  font-size: 2vw;
 }
 .rodape-fundo-map{
  width: 100%;
  height: 100%;
 }
 .mapa{
  width: 100%;
 }


/***********************************************  PAGINA DE PRODUTOS  ***************************************************************************************/

.fundo-produtos{
  display: block;
  width: 100%;
  margin-top: 5%;
}

.area-produtos{
  margin-top: 5%;
  display: grid;
  width: 100%;
  row-gap: 10px;
}


.slide-prod img{
  width: 100%;
  height: 100%;
}

.fundo-pagina-const{
  display: block;
}
.fundo-pagina-const img{
  width: 100%;
  height: 100%;

}

.area-voltar{

}

.btn-voltar{
  width: 10%; 
  margin-left: 80%;
}



}