/*************************************************************** Header *************************************************************************************/

@media (max-width: 991px) {

  .navbar-toggler {
    display: block;
    /* Certifique-se de que o botão esteja visível */
    margin: 0 auto;
    /* Centraliza o botão */
    width: 600px;
    /* Define a largura do botão */
    position: relative;
    /* Permite posicionamento em relação ao container */
    top: -5px;
    /* Ajuste o espaçamento se necessário */
  }

  .navbar-collapse {
    width: 100%;
    /* Garantir que o menu colapsado ocupe toda a largura */
    text-align: center;
    /* Centraliza o texto no menu */
  }

}

@media (max-width: 400px) {
  .logos {
    width: 75%;
  }
}

/*********************************************************************************************************************************************************/

/******************************************************************** Conteiner 1 ************************************************************************/

@media (max-width: 1024px) {
  .texto-sobre-imagem {
    left: 11%;
    /* Valor para tablet */
  }

  .texto-cima {
    font-size: 16px;
  }

  .texto-meio {
    font-size: 20px;
  }

  .texto-baixo {
    font-size: 14px;
  }

  .caminhaozinho {
    top: 22%;
    /* Ajusta a posiÃ§Ã£o para telas menores que tablets */
    left: 8%;
    width: 7%;
    /* Ajusta o tamanho conforme necessÃ¡rio */
    height: 7%;
    /* Ajusta o tamanho conforme necessÃ¡rio */
  }

  .lines {
    top: 22%;
    /* Ajusta a posiÃ§Ã£o para telas menores que tablets */
    left: 2.3%;
    width: 7%;
    /* Ajusta o tamanho conforme necessÃ¡rio */
    height: 7%;
    /* Ajusta o tamanho conforme necessÃ¡rio */
  }
}

@media (max-width: 880px) {
  .texto-sobre-imagem {
    left: 4%;
  }
}

@media (max-width: 850px) {
  .texto-sobre-imagem {
    left: 0%;
    /* Valor para dispositivos menores que tablets */
    align-items: center;
    /* Centraliza horizontalmente para telas pequenas */
    text-align: center;
    /* Centraliza o texto horizontalmente para telas pequenas */
    max-width: 100%;
    /* Remove a restriÃ§Ã£o de largura mÃ¡xima para telas pequenas */
  }

  .texto-cima {
    font-size: 16px;
  }

  .texto-meio {
    font-size: 20px;
  }

  .texto-baixo {
    font-size: 14px;
  }

  .caminhaozinho {
    top: 18%;
    /* Ajusta a posiÃ§Ã£o para telas menores que tablets */
    left: 50%;
    transform: translateX(-50%);
    /* Centraliza horizontalmente */
    width: 8%;
    /* Ajusta o tamanho conforme necessÃ¡rio */
    height: 8%;
    /* Ajusta o tamanho conforme necessÃ¡rio */
  }

  .lines {
    top: 18%;
    /* Ajusta a posiÃ§Ã£o para telas menores que tablets */
    left: 43.5%;
    transform: translateX(-50%);
    /* Centraliza horizontalmente */
    width: 8%;
    /* Ajusta o tamanho conforme necessÃ¡rio */
    height: 8%;
    /* Ajusta o tamanho conforme necessÃ¡rio */
  }
}

@media (max-width: 700px) {

  .caminhaozinho,
  .lines {
    top: 14%;
    /* Ajusta a posiÃ§Ã£o para telas menores que 600px */
  }

}

@media (max-width: 600px) {
  .texto-sobre-imagem {
    top: -12%;
    /* Ajusta a posiÃ§Ã£o do texto para telas menores que 600px */
  }

  .texto-cima {
    font-size: 15px;
  }

  .texto-meio {
    font-size: 17px;
  }

  .texto-baixo {
    font-size: 13px;
  }

  .caminhaozinho,
  .lines {
    top: 18%;
    /* Ajusta a posiÃ§Ã£o para telas menores que 600px */
  }
}

@media (max-width: 550px) {

  .texto-cima {
    font-size: 14px;
  }

  .texto-meio {
    font-size: 14px;
  }

  .texto-baixo {
    font-size: 12px;
  }

  .caminhaozinho,
  .lines {
    top: 18%;
    /* Ajusta a posiÃ§Ã£o para telas menores que 600px */
  }


}

@media (max-width: 415px) {

  .caminhaozinho,
  .lines {
    top: 15%;
    /* Ajusta a posiÃ§Ã£o para telas menores que 415px */
  }
}

/*********************************************************************************************************************************************************/



/******************************************************************** Conteiner 2 ************************************************************************/

@media (max-width: 1662px) {
  .conteiner2 {
    padding-right: 200px;
    padding-left: 200px;
  }
}

@media (max-width: 1500px) {
  .conteiner2 {
    padding: 0 100px;
    /* Reduz o padding lateral quando a tela for menor */
    margin-top: 0;
  }
}

@media (max-width: 1265px) {
  .conteiner2 {
    grid-template-columns: repeat(2, 1fr);
    /* 2 colunas */
  }
}

@media (max-width: 1100px) {
  .conteiner2 {
    padding: 0 50px;
    /* Reduz ainda mais o padding lateral */
  }
}

@media (max-width: 830px) {
  .conteiner2 {
    grid-template-columns: 1fr;
    /* 1 coluna */
    padding: 0;
    /* Minimiza o padding lateral em telas muito pequenas */
    margin-top: 0;
    /* Ajusta a distÃ¢ncia no topo para 50px */
  }

  .box {
    flex-direction: column;
    /* Empilha Ã­cone e texto em dispositivos menores */
    align-items: center;
    /* Centraliza horizontalmente o conteÃºdo */
    text-align: center;
    /* Centraliza o texto dentro da .box */
    padding: 10px 0;
    /* Reduz o padding vertical para aproximar o texto */
    max-width: 400px;
    /* Limita a largura mÃ¡xima do contÃªiner para concentrar o texto */
    margin: 0 auto;
    /* Centraliza a .box horizontalmente */
    margin-top: 30px;
  }

  .image-container {
    margin-bottom: -10px;
    /* Move o Ã­cone SVG 10px para cima em relaÃ§Ã£o ao texto */
  }

  .content {
    line-height: 1.4;
    /* Ajusta a altura da linha para aproximar as linhas de texto */
    margin: 15px 0;
    /* Reduz as margens entre os parÃ¡grafos */
  }

  .truck {
    margin-bottom: -20px;
    /* o svg do caminhao estava um pouco mais para cima por algum motivo*/
  }
}

/*********************************************************************************************************************************************************/

/******************************************************************** Conteiner 3 ************************************************************************/

@media (max-width: 890px) {
  .textosobreimagem2 {
    left: 50%;
    /* Move o contÃªiner para o centro */
    right: auto;
    /* Remove o alinhamento Ã  direita */
    transform: translateX(-50%);
    /* Centraliza o contÃªiner horizontalmente */
    text-align: center;
    /* Alinha o texto ao centro */
  }

  .aviaozinho {
    top: 13%;
    right: 46%;
  }
}

@media (max-width: 800px) {
  .conteiner3 img {
    object-position: 61.7% center;
    /* Ajuste o valor para mover a imagem mais para a esquerda */
  }
}

@media (max-width: 749px) {
  .aviaozinho {
    top: 11%;
  }
}

@media (max-width: 717px) {
  .aviaozinho {
    top: 10%;
  }
}

@media (max-width: 640px) {
  .aviaozinho {
    top: 13%;
  }

  .texto-cima2 {
    font-size: 20px;
  }

  .texto-meio2 {
    font-size: 34px;
  }

  .texto-baixo2 {
    font-size: 14px;
  }
}

@media (max-width: 600px) {
  .webicon {
    margin-left: 0px;
    margin-right: 7px;
  }
}

@media (max-width: 540px) {
  .aviaozinho {
    top: 13%;
  }

  .texto-cima2 {
    font-size: 18px;
  }

  .texto-meio2 {
    font-size: 31px;
  }

  .texto-baixo2 {
    font-size: 14px;
  }
}

@media (max-width: 485px) {
  .aviaozinho {
    top: 10%;
  }

  .texto-cima2 {
    font-size: 18px;
  }

  .texto-meio2 {
    font-size: 31px;
  }

  .texto-baixo2 {
    font-size: 14px;
  }
}

@media (max-width: 465px) {
  .aviaozinho {
    top: 12%;
  }

  .texto-cima2 {
    font-size: 16px;
  }

  .texto-meio2 {
    font-size: 28px;
  }

  .texto-baixo2 {
    font-size: 13px;
  }
}

@media (max-width: 436px) {
  .aviaozinho {
    top: 9%;
  }

  .texto-cima2 {
    font-size: 16px;
  }

  .texto-meio2 {
    font-size: 26px;
  }

  .texto-baixo2 {
    font-size: 13px;
  }
}

@media (max-width: 384px) {
  .aviaozinho {
    top: 6.5%;
  }

  .texto-cima2 {
    font-size: 16px;
  }

  .texto-meio2 {
    font-size: 24px;
  }

  .texto-baixo2 {
    font-size: 13px;
  }
}

@media (max-width: 350px) {
  .aviaozinho {
    top: 6.5%;
  }

  .texto-cima2 {
    font-size: 14px;
  }

  .texto-meio2 {
    font-size: 20px;
  }

  .texto-baixo2 {
    font-size: 11px;
  }
}

/*********************************************************************************************************************************************************/

/******************************************************************** Conteiner 4 ************************************************************************/

/************* a linha de cima ***************/

@media (max-width: 1170px) {
  .linha-container hr {
    width: 600px;
    /* Reduz a largura da linha para telas menores */
  }

  .linha-container h1 {
    font-size: 26px;
    /* Diminui o tamanho da fonte */
  }

  .logoviopex {
    margin-right: 60px;
  }

  .logounesul {
    margin-right: 10px;
  }

  .logodfl {
    margin-right: 120px;
  }
}

@media (max-width: 992px) {
  .linha-container hr {
    width: 500px;
    /* Reduz ainda mais a largura da linha */
  }

  .linha-container h1 {
    font-size: 22px;
    /* Diminui ainda mais o tamanho da fonte */
  }
}

@media (max-width: 768px) {
  .linha-container hr {
    width: 400px;
    /* Ajusta a largura da linha para telas menores */
  }

  .linha-container h1 {
    font-size: 22px;
    /* Ajusta o tamanho da fonte para telas menores */
  }
}

@media (max-width: 410px) {
  .linha-container hr {
    width: 200px;
    /* Ajusta a largura da linha para telas menores */
  }

  .linha-container h1 {
    font-size: 18px;
    /* Ajusta o tamanho da fonte para telas menores */
  }
}

/************* logos dos clientes ***************/

@media (max-width: 1200px) {

  .conteiner4 {
    background-color: #f8f9fa;
    height: 600px;
  }

  .gallery {
    grid-template-columns: repeat(4, 1fr);
    /* 4 colunas */
  }



}

@media (max-width: 1000px) {


  .conteiner4{
    height: 550px;
}

  .img-solucao{
    width: 120px !important;
}

.img-taruma{
    width: 180px !important;
}

.img-ruviaro{
    width: 160px !important;
}

.img-safelab{
    width: 160px !important;
}

.img-eudora{
    width: 120px !important;
}

.img-rgf{
    width: 160px !important;
}

.img-blc{
    width: 160px !important;
}

.img-tct{
    width: 80px !important;
}

.img-jem{
    width: 160px !important;
    height: 80px;
}

.img-beleza {
    width: 140px !important;
}

.img-berenice {   
    width: 110px !important;
}

.img-boticario {
    width: 180px !important;
    height: 60px !important;
}

.img-cca {
    width: 140px !important;
}

.img-dfl {
    margin-top: 10px;
    width: 130px !important;
}

.img-jones {
    margin-top: 30px !important;
    width: 190px !important;
}

.img-lovato {
    width: 90px !important;
}

.img-kobber {
    margin-top: 10px; 
    width: 130px !important;
}

.img-oui {
    margin-top: 30px !important;
    width: 120px !important;
}

.img-truss {
    width: 110px !important;
    margin-top: 35px;
}

.img-grupo {
    width: 150px !important;
    margin-top: 20px;
}

.img-vult {
    margin-top: 20px;
    width: 130px !important;
}

.img-quality {
    width: 90px !important;
}

.img-saggezza {
    width: 120px !important;
}

}


@media (max-width: 800px) {

.conteiner4{
    height: 500px;
}

.img-solucao{
    width: 100px !important;
}

.img-taruma{
    width: 160px !important;
}

.img-ruviaro{
    width: 140px !important;
}

.img-safelab{
    width: 140px !important;
}

.img-eudora{
    width: 100px !important;
}

.img-rgf{
    width: 140px !important;
}

.img-blc{
    width: 140px !important;
}

.img-tct{
    width: 60px !important;
}

.img-jem{
    width: 140px !important;
    height: 80px;
}

.img-beleza {
    width: 120px !important;
}

.img-berenice {   
    width: 90px !important;
}

.img-boticario {
    width: 160px !important;
    height: 60px !important;
}

.img-cca {
    width: 120px !important;
}

.img-dfl {
    margin-top: 10px;
    width: 110px !important;
}

.img-jones {
    margin-top: 30px !important;
    width: 170px !important;
}

.img-lovato {
    width: 70px !important;
}

.img-kobber {
    margin-top: 10px; 
    width: 110px !important;
}

.img-oui {
    margin-top: 30px !important;
    width: 100px !important;
}

.img-truss {
    width: 90px !important;
    margin-top: 35px;
}

.img-grupo {
    width: 130px !important;
    margin-top: 20px;
}

.img-vult {
    margin-top: 20px;
    width: 110px !important;
}

.img-quality {
    width: 70px !important;
}

.img-saggezza {
    width: 100px !important;
}


}

@media (max-width: 650px) {

    .gallery {
      grid-template-columns: repeat(3, 1fr);
      /* 3 colunas em telas pequenas */
    }

    .conteiner4 {
      height: 580px;
    }

  }

 
@media (max-width: 500px) {

  .conteiner4 {
      height: 530px;
    }

  .img-solucao{
    width: 80px !important;
}

.img-taruma{
    width: 140px !important;
}

.img-ruviaro{
    width: 120px !important;
}

.img-safelab{
    width: 120px !important;
}

.img-eudora{
    width: 100px !important;
}

.img-rgf{
    width: 120px !important;
}

.img-blc{
    width: 120px !important;
}

.img-tct{
    width: 40px !important;
}

.img-jem{
    width: 120px !important;
    height: 80px;
}

.img-beleza {
    width: 100px !important;
}

.img-berenice {   
    width: 70px !important;
}

.img-boticario {
    width: 140px !important;
    height: 60px !important;
}

.img-cca {
    width: 100px !important;
}

.img-dfl {
    margin-top: 10px;
    width: 90px !important;
}

.img-jones {
    margin-top: 30px !important;
    width: 150px !important;
}

.img-lovato {
    width: 70px !important;
}

.img-kobber {
    margin-top: 10px; 
    width: 90px !important;
}

.img-oui {
    margin-top: 30px !important;
    width: 80px !important;
}

.img-truss {
    width: 70px !important;
    margin-top: 35px;
}

.img-grupo {
    width: 110px !important;
    margin-top: 20px;
}

.img-vult {
    margin-top: 20px;
    width: 90px !important;
}

.img-quality {
    width: 50px !important;
}

.img-saggezza {
    width: 80px !important;
}

  
}

@media (max-width: 450px) {
  
.conteiner4 {
      height: 500px !important;
}

  .img-solucao{
    width: 70px !important;
}

.img-taruma{
    width: 130px !important;
}

.img-ruviaro{
    width: 110px !important;
}

.img-safelab{
    width: 110px !important;
}

.img-eudora{
    width: 80px !important;
}

.img-rgf{
    width: 110px !important;
}

.img-blc{
    width: 110px !important;
}

.img-tct{
    width: 30px !important;
}

.img-jem{
    width: 110px !important;
    height: 80px;
}

.img-beleza {
    width: 80px !important;
}

.img-berenice {   
    width: 60px !important;
}

.img-boticario {
    width: 110px !important;
    height: 35px !important;
}

.img-cca {
    width: 80px !important;
}

.img-dfl {
    margin-top: 10px;
    width: 80px !important;
}

.img-jones {
    margin-top: 30px !important;
    width: 130px !important;
}

.img-lovato {
    width: 70px !important;
}

.img-kobber {
    margin-top: 10px; 
    width: 80px !important;
}

.img-oui {
    margin-top: 30px !important;
    width: 70px !important;
}

.img-truss {
    width: 60px !important;
    margin-top: 35px;
}

.img-grupo {
    width: 100px !important;
    margin-top: 20px;
}

.img-vult {
    margin-top: 20px;
    width: 80px !important;
}

.img-quality {
    width: 70px !important;
}

.img-saggezza {
    width: 70px !important;
}

}

/*********************************************************************************************************************************************************/

/******************************************************************** Conteiner 5 ************************************************************************/

@media (max-width: 1400px) {

  .texto-sobre-imagem3 {
    left: 11%;
    /* Valor para tablet */
    top: -5%;
  }

  .texto-cima3 {
    font-size: 20px;
    /* Tamanho do texto para tablet */
  }

  .texto-meio3 {
    font-size: 32px;
    /* Tamanho do texto para tablet */
  }

  .texto-baixo3 {
    font-size: 16px;
    /* Tamanho do texto para tablet */
  }

  .caixinha {
    top: 27%;
    /* Ajusta a posiÃ§Ã£o para telas menores que tablets */
    left: 2.3%;
  }
}

@media (max-width: 1000px) {
  .texto-sobre-imagem3 {
    left: 0%;
    /* Valor para dispositivos menores que tablets */
    align-items: center;
    /* Centraliza horizontalmente para telas pequenas */
    text-align: center;
    /* Centraliza o texto horizontalmente para telas pequenas */
    max-width: 100%;
    /* Remove a restriÃ§Ã£o de largura mÃ¡xima para telas pequenas */
    top: -5%;
  }

  .texto-cima3 {
    font-size: 20px;
    /* Tamanho do texto para dispositivos menores que tablets */
  }

  .texto-meio3 {
    font-size: 30px;
    /* Tamanho do texto para dispositivos menores que tablets */
  }

  .texto-baixo3 {
    font-size: 16px;
    /* Tamanho do texto para dispositivos menores que tablets */
  }

  .caixinha {
    top: 26%;
    /* Ajusta a posiÃ§Ã£o para telas menores que tablets */
    left: 50%;
    transform: translateX(-50%);
    /* Centraliza horizontalmente */
  }
}

@media (max-width: 600px) {
  .texto-sobre-imagem3 {
    top: -12%;
    /* Ajusta a posiÃ§Ã£o do texto para telas menores que 600px */
  }

  .texto-cima3 {
    font-size: 18px;
    /* Tamanho do texto para celular */
  }

  .texto-meio3 {
    font-size: 26px;
    /* Tamanho do texto para celular */
  }

  .texto-baixo3 {
    font-size: 15px;
    /* Tamanho do texto para celular */
  }

  .caixinha {
    top: 22%;
    /* Ajusta a posiÃ§Ã£o para telas menores que 600px */
  }
}

@media (max-width: 415px) {
  .caixinha {
    top: 18%;
    /* Ajusta a posiÃ§Ã£o para telas menores que 415px */
  }
}

/*********************************************************************************************************************************************************/

/******************************************************************** Conteiner 6 ************************************************************************/

/*********************************************************************************************************************************************************/