@media screen and (max-width: 768px) {

       
    .containerSlidePrincipal .slidePrincipal .item {
        width: 100px;
        height: 300px;
        position: absolute;
        top: 50%;
        transform: translate(0,-50%);
        border-radius: 20px;
        box-shadow: 0 30px 50px #505050;
        background-position: 50% 50%;
        background-size: cover;
        display: inline-block;
        transition: 1.2s;
    }
    
    .slidePrincipal .item:nth-child(1), .slidePrincipal .item:nth-child(2){
        top: 0;
        left: 0;
        transform: translate(0,0);
        border-radius: 0;
        width: 100%;
        height: 100%;
    }
    
    .slidePrincipal .item:nth-child(3){
        left: 60%;
    }
    
    .slidePrincipal .item:nth-child(4){
        left: calc(50% + 50px);
        margin-top: 70px;
    }
    
    .slidePrincipal .item:nth-child(5){
        left: calc(50% + 70px);
        margin-top: 50px;
        opacity: 0;
    }
    
    .slidePrincipal .item:nth-child(n + 6){
        left: calc(50% + 90px);
        margin-top: 50px;
        opacity: 0;
    }
    
    .item .content{
        position: absolute;
        top: 50%;
        left: 10px;
        width: 200px;
        text-align: left;
        color: #fff;
        transform: translate(0,-50%);
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        display: none;
    }
    
    .slidePrincipal .item:nth-child(2) .content{
        display: block;
    }
    
    .content .name{
        font-size: 25px;
        text-transform: uppercase;
        font-weight: bold;
        opacity: 0;
        animation: animate 1s ease-in-out 1 forwards;
    }
    
    .content .des{
        margin-top: 10px;
        margin-bottom: 20px;
        opacity: 0;
        animation: animate 1s ease-in-out .3s 1 forwards;
    }
    
    .content button{
        padding: 10px 20px;
        border: none;
        cursor: pointer;
        opacity: 0;
        animation: animate 1s ease-in-out .6s 1 forwards;
    }
    
    
  /* ---------------- overlay ao rolar --------  */
  @keyframes teste2 {
    0% {left: -100%;}
    50% {left: -50%;}
    100% {left: 0;}
  }
  
  .containerImg:hover .overlayImg {
    animation: teste2 1s ease-in-out forwards;
  }

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

  body{
    overflow-x: hidden;
    margin: 0 auto;
  }


  #celularOrcamento, #celularInfoOrcamento {
    display: block;
}

  #demoBoxOrcamento, #login{
    display: none;
  }

  .mobile-menu-icon{
    display: block;
  }



#nav nav{
  display: none;
}

#CelNav{
  display: block;
  position: absolute;
  right: -1000px; 
  transition: right 0.8s ease;
}

#CelNav nav ul{
  background-color: #282D32;
  display: flex;
  flex-direction: column;
  margin-top: 75vh;
  width: 90vw;
  height: 90vh;
  text-align: center;
}


.mobile-menu-icon{
  height: 40px;
  width: 40px;
  margin-right: 5vw;
}

.mobile-menu-icon div{
  background-color: #fff;
  height: 4px;
  width: 30px;
  margin-top: 3px;
}


/* ========= Slide =====  */


#slides{
  width: 100%;
  height: 600px;
  min-width: none;
}

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

#boxSectionTitulo{
position:relative;
padding-top: 50px;
}

#boxSectionImg{
  position:relative;
  display: flex;
  width: 100%;
  height: 400px;
  padding-top: 50px;
}

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


#boxSlidesTitulos{
  top: 0;
  width: 100%;
}

#boxSlide1{
  top: 0;
  width: 20vw;
  height: 100%;
}

#boxSlide2{
  width: 50vw;
  display: flex;
  flex-direction: row;
  height: 100%;
}

#boxSlide3{
  top: 0;
  width: 20vw;
  height: 100%;
}

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

.containerImg {  
  position: relative;
  width: 10vw;
  height: 100%;
  border-radius: 30px;

}

#boxSlide1 #slideImg1{
  top: -70px;
  height: 90%;
width: 20vw;
left: 0px;
}

#boxSlide2 #slideImg3{
  top: -50px;
  width: 20vw;
  height: 80%;
  left: 0px;
  margin-top: 0px;
  }

#boxSlide2 #slideImg4{
  top: -40px;
  height: 90%;
width: 20vw;
left: 0px;
}

#boxSlide3 #slideImg2{
  top: 20px;
  width: 20vw;
  height: 90%;
  left: 0px;
  margin-top: 0px;
  }


/* ================== TÍTULOS ========================= */

#tituloGrande{
  
  animation: teste 1s ease-in-out;
  animation-timeline: view();

  font-family: 'Roboto', sans-serif;
  font-size: 5rem; 
  font-weight: 900; 
  line-height: 1.5;
  color: #505055; 
  top: 0%;

  
}

#tituloPequeno{
  animation: teste 1s ease-in-out;
  animation-timeline: view();

  font-family: 'Roboto', sans-serif;
  font-weight: 700; 
  line-height: 1.5;
  color: #9CC1E7; 
  position: absolute;
  left: 45%;
  top: 20%;

}

#tituloMedio{
  animation: teste 1s ease-in-out;
  animation-timeline: view();

  font-family: 'Roboto', sans-serif;
  font-size: 1.8rem; 
  font-weight: 800; 
  line-height: 1.5; 
  color: #FFFFFF; 
  position: absolute;
  left: 40%;
  top: 30%;

}

/* =================== IMAGEM COM EFEITO =======================  */

.overlayImg p {
  color: white;
  font-size: 12px;
  text-align: center;
}


/* ============ A EMPRESA ================== */

#boxEmpresa{
  height: 100px;
}

/* ==================== PEDRAS ========================== */
#MateriaPrima {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  height: 750px;
  width: 100%;
}


/* --------------------------------------------- */
#MateriaPrima #boxTituloPedra{
  height: 150px;
width: 70vw;
margin: 0 auto;
padding-top: 0px;
}

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


#boxTituloPedra h1{
  margin-top: 0px;
}

#boxTituloPedra p{
  margin-top: -50px;
font-size: 25px;

}

#boxTituloPedra h2{
margin-top: -10px;
  font-size: 35px;

}
/* ------------------------------------------------- */

#MateriaPrima #materiaPrimaBtns{
width: 100%;
height: 15vh;
line-height: 0px;
}


#materiaPrimaBtns button{
  margin: 0 auto;
  width: 300px;
  margin-top: 2%;
}

#materiaPrimaBtns button:hover{
  background-color: #e2e2e2;
}

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


#boxPosicaoPedra p{
  font-size: 12px;
  text-align: center;
}

#MateriaPrima #boxPosicaoPedra .pedraPosicao1{
margin:10px 0 0 15%;
width: 250px;
height: 250px;
}


#MateriaPrima #boxPosicaoPedra .pedraPosicao2{
  margin:35vh 0 0 10%;
  width: 120px;
  height: 120px;
  }

  #MateriaPrima #boxPosicaoPedra .pedraPosicao3{
    margin:35vh 0 0 55%;
    width: 120px;
    height: 120px;
    }


.pedraPosicao1 {
  border-radius: 10px;
  position: absolute;
  width: 200px; 
  height: 350px; 
  margin: 60px 0 0 10px;
  transition: .5s ease-in-out;
  overflow: hidden;
  cursor: pointer;
}
.sombraPedraPosicao1 {
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 25px;
  color: rgb(255, 255, 255);
  background-color:#282D32;
  position: absolute;
  width: 100%; 
  height: 100%; 
  margin: 0 0 0 0 ;
  transition: .4s ease-in-out;
  opacity: 70%;
  transform: translateX(-100%);
}

.pedraPosicao1:hover .sombraPedraPosicao1{
  transform: translateX(0%);
}

.pedraPosicao1:hover {
  scale: 1.05;
}


.pedraPosicao2 {
  border-radius: 10px;
  position: absolute;
  width: 200px; 
  height: 200px; 
  margin: 30px 0 0 400px;
  transition: .5s ease-in-out;
  overflow: hidden;
  cursor: pointer;
}

.sombraPedraPosicao2 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(255, 255, 255);
  background-color:#282D32;
  position: absolute;
  width: 100%; 
  height: 100%; 
  margin: 0 ;
  transition: .4s ease-in-out;
  opacity: 70%;
  transform: translateX(-100%);
}

.pedraPosicao2:hover .sombraPedraPosicao2{
  transform: translateX(0%);
}

.pedraPosicao2:hover {
  scale: 1.05;
}

.pedraPosicao3 {
  border-radius: 10px;
  position: absolute;
  width: 200px;
  height: 200px; 
  margin: 250px 0 0 400px; 
  transition: .5s ease-in-out;
  overflow: hidden;
  cursor: pointer;
}

.sombraPedraPosicao3 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(255, 255, 255);
  background-color:#282D32;
  position: absolute;
  width: 100%; 
  height: 100%; 
  margin: 0 ;
  transition: .4s ease-in-out;
  opacity: 70%;
  transform: translateX(-100%);

}

.pedraPosicao3:hover .sombraPedraPosicao3{
  transform: translateX(0%);
}

.pedraPosicao3:hover {
  scale: 1.05;
}




/* ====================== MODAL ===============  */



.demoModal{
left: 45%;
  width: 90vw;
  height: auto;
}
.demoImgContainer{
margin: 0 auto;
}



/* -------------- footer ------  */


#rodape p{
  margin:30px 0 0 35%;
  position: absolute;
}



/* ============================================== */
#boxEmpresa{
  height: 800px;
  position: relative;
  flex-direction: column;
}


#InfoEmpresa{
  width: 100%;
}


#marcaEmpresa{
  width: 100%;
  display: flex;
}

#marcaEmpresa img{
  width: 300px;
height: 300px;
  margin: 0 auto;

}


/* ================ QUEM SOMOS =====  */

#quemSomos{
  width: 100%;
  
  padding: 5%;
  }
  
  #quemSomos i{
   scale: 2;
   margin: 5px;
   padding: 2px;
      }
  
      #ponto1,#ponto2,#ponto3,#ponto4{
       padding: 5px;
       margin-top: 10px;
       width: 100%;
       padding-left: 10%;
      }
  
  #tituloQuemSomos{
      font-size: 35px;
      text-align: center;
  }
  
  #iconesA{
      display: block;
  }
  
  #iconesB{
      display: block;
  }


  #tituloQuemSomos{
    font-size: 20px;
    padding-left: 4%;
}



/* ==============  COMENTÁRIOS GOOGLE ========================= */

#comentariosGoogle  div {
  display: block;
  justify-content: center; /* Centraliza o conteúdo horizontalmente */
  align-items: center; /* Centraliza o conteúdo verticalmente */
  padding: 2px;
}


#tituloGoogle img {
  max-width: 60%;
  height: auto;
}

#tituloGoogle {
  text-align: center;
  padding-top: 20px;
}


                            /* ========== LOCALIZAÇÃO ============ */

#box-localizacao{
  flex-direction: column;
  height: 400px;
}

#mapa{
  width: 80%;
}


#contato{
  width: 80%;
}

#endereco{
  width: 80%;
}
                        
    

}