@media screen and (min-width: 993px) and (max-width: 1199px){
  *{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'calibri';
  }
  body{
   background-color: white;
   padding: 20px;
  }

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

  }


/**************************************************************** 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 a{
  color: black;
  font-size: 2vw;
  text-decoration: none;
  font-family: 'calibri';
  margin-right: 2vw;

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

}

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


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

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

.slide {
  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 2fr;
}
.areafotocaminhao{
  display: grid;
  grid-column: 1/2;
  justify-content: center;
  align-items: center;
  padding-left: 2%;

}
.areafotocaminhao img{
  width: 100%;
  height: 80%;
  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.8vw;
}

.conteudosobre p{
  font: 1.4vw;
}


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

.area-info{
  display: block;
  margin-top: 5%; 
}
.info{
  display: grid;
  justify-content: center;

}
.info img{
  width: 100%;
  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: 2%;
  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: 3vw;
}
.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%;
}



.area-voltar{

}

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






}