.titulo {
   font-size: 42px;
   margin-top: 40px;
   margin-bottom: 30px;
   margin-left: 20px;
   margin-right: 20px;
   display: flex;
   justify-content: center;
   align-items: center;

 }

 .titulo2 {
   font-size: 39px;
   margin-top: 40px;
   margin-bottom: 10px;
   margin-left: 20px;
   margin-right: 20px;
   display: flex;
   justify-content: center;
   align-items: center;

 }

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

   .titulo,
   .titulo2 {
     font-size: 32px;
     /* Reduz o tamanho da fonte para telas menores */
     margin-top: 20px;
     /* Ajusta a margem superior para telas menores */
     margin-bottom: 20px;
     /* Ajusta a margem inferior para telas menores */
     margin-left: 10px;
     /* Ajusta a margem esquerda para telas menores */
     margin-right: 10px;
     /* Ajusta a margem direita para telas menores */
     text-align: center;
     /* Centraliza o texto para telas menores */
   }
 }

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

   .titulo,
   .titulo2 {
     font-size: 28px;
     /* Reduz o tamanho da fonte para telas menores */

   }
 }

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

   .titulo,
   .titulo2 {
     font-size: 20px;
     /* Reduz o tamanho da fonte para telas menores */

   }
 }


 /* Estilo básico para o botão WhatsApp */
 .whatsapp-btn {
   position: fixed;
   bottom: 20px;
   right: 10px;
   z-index: 999;
   transition: transform 0.1s ease-in-out;
 }

 /* Estilo básico para o botão WhatsApp */
 .whatsapp-btn {
   position: fixed;
   /* Define a posição fixa para que o botão permaneça fixo na tela enquanto rola a página */
   bottom: 20px;
   /* Define a distância em pixels do fundo da janela do navegador */
   right: 10px;
   /* Define a distância em pixels da margem direita da janela do navegador */
   z-index: 999;
   /* Define a ordem de empilhamento do botão sobre outros elementos */
   transition: transform 0.1s ease-in-out;
   /* Adiciona uma transição suave ao movimento do botão */
 }

 /* Estilo para a mensagem que aparecerá ao passar o mouse */
 .whatsapp-btn span {
   visibility: hidden;
   /* Inicialmente, a mensagem está oculta */
   width: 120px;
   /* Define a largura da mensagem */
   background-color: #000;
   /* Define a cor de fundo da mensagem */
   color: #fff;
   /* Define a cor do texto da mensagem */
   text-align: center;
   /* Centraliza o texto da mensagem */
   border-radius: 6px;
   /* Adiciona cantos arredondados à caixa da mensagem */
   padding: 5px 0;
   /* Adiciona espaçamento interno à mensagem */
   position: absolute;
   /* Posiciona a mensagem de forma absoluta em relação ao elemento pai */
   z-index: 1;
   /* Define a ordem de empilhamento da mensagem sobre o botão */
   bottom: 30px;
   /* Define a distância em pixels do fundo da janela do navegador para a mensagem */
   right: 65px;
   /* Define a distância em pixels da margem direita da janela do navegador para a mensagem */
   opacity: 0;
   /* Define a opacidade inicial da mensagem como transparente */
   transition: opacity 0.3s;
   /* Adiciona uma transição suave para a opacidade da mensagem */
 }

 .whatsapp-btn:hover span {
   visibility: visible;
   /* Ao passar o mouse sobre o botão, a mensagem se torna visível */
   opacity: 1;
   /* A opacidade da mensagem muda para 1 (totalmente visível) */
 }

 /* Redimensionar a imagem para 80x80 pixels */
 .whatsapp-btn img {
   width: 80px;
   /* Define a largura da imagem do botão */
   height: 80px;
   /* Define a altura da imagem do botão */
 }

 /* Estilos específicos para dispositivos móveis */
 @media (max-width: 768px) {
   .whatsapp-btn {
     bottom: 10px;
     right: 5px;
   }

   .whatsapp-btn span {
     bottom: 20px;
     right: 45px;
   }
 }


 /*-------------------------------------------------------------------------------------------------------------------------*/
 /* Estilos para o banner */

 .area-slider {
   width: 100%;
   max-width: 100%;
   /* Defina a largura máxima desejada para o carrossel */
   margin: 10 auto;
 }

 .slider img {
   width: 60%;
   max-width: 100%;
   /* Defina a largura máxima da imagem como 100% do contêiner */
   max-height: 100%;
   margin: auto;
   object-fit: contain;
 }

 .slick-next {
   margin-right: 100px;
 }

 .slick-prev {
   margin-left: 100px;
   z-index: 1;
 }

 .area-slider-responsive {
   display: none;
 }

 .tamanho {
   height: auto;
   width: auto;
 }

 .slider-responsive img {
   max-width: 100%;
   /* Defina a largura máxima da imagem como 100% do contêiner */
   max-height: 100%;
   margin: auto;
   object-fit: contain;
 }

 @media (max-width: 1024px) {

   .area-slider {
     display: none;
   }

   .area-slider-responsive {
     display: block;
   }

 }

 /*-------------------------------------------------------------------------------------------------------------------------*/
 /* Estilos para os blocos */

 /* blocos id="aluguel" */
 .pais1 {

   padding: 10px;
   background-color: #e2e2e2;
 }

 /* blocos id="quem-somos" */
 .pais2 {
  padding-top: 70px;
  padding-bottom: 70px;
  padding-left: 250px;
  padding-right: 70px;
   background-image: url(/Imagens/QUEM\ SOMOS/BACKGROUND.png);
   background-position: center left;
   background-size: cover;

   @media only screen and (max-width: 800px){
    padding-left: 50px;
   }
 }

 /* blocos id="local" */
 .pais4 {
   padding: 50px;
   background-color: #e2e2e2;
 }

 /* blocos id="contato" */
 .pais5 {

   padding: 50px;
   background-color: #f9f9f9;
 }

 .banner-horizontal {
   position: relative;
 }


 /*-------------------------------------------------------------------------------------------------------------------------*/
 /* conteudo no pais 1 id="aluguel"*/
 /* Estilo para o grid de produtos */
 .product-grid {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 20px;
   padding: 30px;
   margin: 0 auto;
   max-width: 1700px;
   background: #ffffff;
   border-radius: 20px;
 }

 /* Estilo para o cartão de produto */
 .product-card {
   border: 1px solid #e0e0e0;
   background: #ffff0095;
   color: #000000;
   border-radius: 10px;
   gap: 20px;
   padding: 20px;
   margin: 0 10px;
   text-align: center;
   width: calc(25% - 30px);

 }

 .product-card img {
   max-width: 100%;
   height: auto;
   border-radius: 10px;
   margin-bottom: 10px;
 }

 .product-card:hover {
   transform: translateY(-3px);
   /* Efeito de levitar um pouco o card ao passar o mouse */
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
 }

 .nome-product {
   font-family: 'Futura3';
   font-size: 18px;
   margin: 10px 0;
 }

 .info-product {
   font-family: 'Futura3';
   font-size: 16px;
   margin: 5px 0;
 }

 .info {
   background-color: #ffffffc1;
   font-size: 15px;
   border-radius: 10px;
   padding: 5px;
 }

 /* Carrossel */
 .slick-slider {
   position: relative;
   display: block;
   box-sizing: border-box;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   -webkit-touch-callout: none;
   -khtml-user-drag: none;
   -webkit-tap-highlight-color: transparent;
 }

 .slick-list {
   position: relative;
   display: block;
   overflow: hidden;
   margin: 0;
   padding: 0;
 }

 .slick-slide {
   display: none;
   float: left;
   height: 100%;
   min-height: 1px;
 }

 .btn {
   padding: 5px 16px;
   /* define um espaçamento interno de 8 pixels no topo e na parte inferior e 16 pixels nas laterais do botão */
   background-color: #000;
   /* define a cor de fundo do botão como preto. */
   color: #fff;
   /* define a cor do texto do botão como branco. */
   border: none;
   /* remove a borda do botão. */
   cursor: pointer;
   /* altera o cursor do mouse para um ponteiro ao passar sobre o botão, indicando que ele é clicável. */
   font-size: 20px;
   margin: auto;
   /* Centraliza o botão horizontalmente */
   text-align: center;
 }

 .btn-terceiro {
   background-color: rgb(58, 37, 223);
   display: block;
   /* Garante que o botão ocupe toda a largura disponível no div */
   margin: auto;
   /* Centraliza o botão horizontalmente */
   text-align: center;
   /* Centraliza o texto do botão horizontalmente */
   width: 200px;
   /* Defina a largura desejada para o botão */
   border-radius: 20px;
   /* Defina um valor alto para tornar o botão retângulo mais ovalado */
   margin-top: 50px;
 }

 /* Estilo para a imagem do botão "Fale Conosco" */
 .inmagen-aluguel {
   text-align: center;
 }

 .inmagen-aluguel img {
   width: 300px;
   /* Tamanho inicial da imagem */
   transition: width 0.3s ease;
   /* Adiciona uma transição suave à animação */
 }

 /* Animação ao passar o mouse */
 .inmagen-aluguel img:hover {
   width: 220px;
   /* Tamanho aumentado ao passar o mouse */
 }

 @media only screen and (max-width: 800px) {
   .inmagen-aluguel img {
     width: 200px !important;
     /* Ajuste de tamanho para telas menores */
     transition: none !important;
     /* Remove a transição para telas menores */
     text-align: center;
   }

 }


 @media only screen and (max-width: 800px) {
   .product-grid {
     flex-wrap: nowrap;
     justify-content: center;
     gap: 10px;
     padding: 0px;
     margin: auto;
     max-width: none;
     background: none;
     border-radius: 10px;
   }

   /* Estilo para o cartão de produto */
   .product-card {
     border: 3px solid #dcff16;
     background: #ffffffba;
     color: #000000;
     border-radius: 10px;
     gap: 20px;
     padding: 20px;
     margin: 0 10px;
     text-align: center;
     width: calc(25% - 30px);
   }

   .info {
     background-color: #ffffff;
     font-size: 20px;
     border-radius: 10px;
     padding: 5px;
   }

   .inmagen-aluguel img {
     width: 150px;
     /* Ajuste de tamanho para telas menores */
     text-align: center;
   }

 }

 /*-------------------------------------------------------------------------------------------------------------------------*/
 /* conteudo no pais 2 id="quem-somos"*/

 .juntar-quem-somos {
  display: flex;
  align-items: center; /* Centraliza verticalmente os itens */
}

.qlogo {
  width: 100%; /* Ajuste da largura da imagem */
  height: auto;
  max-height: 60vh; /* Limite máximo de altura responsiva */
}

.foto-da-empresa {
  margin-right: 20px; /* Espaço entre a imagem e o texto */
}

 /*texto tendro do quadrado*/
 .texto-quemsomos {
   max-width: 40em;
   max-height: 70em;
   background-color: #060606a7;
   color: #fff;
   padding: 15px;
   border-radius: 5px;
   justify-content: center;
   margin-left: auto;
   margin-top: auto;
   z-index: 100;
 }

 .texto-quemsomos p {
   font-size: 20px;
 }

 .texto-quemsomos h3 {
   margin-left: 3em;
 }

 /*estilização dos botoes*/
 .botoes-quemsomos {
   display: flex;
   justify-content: center;
   margin-top: 10px;
   margin-bottom: 20px;

 }

 .botao {
   font-size: 20px;
   /* Ajuste o valor do tamanho da fonte conforme necessário */
   cursor: pointer;
   /* altera o cursor do mouse para um ponteiro ao passar sobre o botão, indicando que ele é clicável. */
   border-radius: 90px;
   /* Defina um valor alto para tornar o botão retângulo mais ovalado */
   margin: 0 60px;
   /* Ajuste a margem horizontal dos botões conforme necessário */
   background-color: rgba(16, 96, 145, 0.89);
   /* Cor de fundo do retângulo */
   color: #ffffff;
   border: none;
   padding: 8px 30px;
   position: relative;
   z-index: 1;

 }

 .botao:hover {
   background-color: #bfbfbf;
   /* Cor de fundo do retângulo ao passar o mouse */
 }

 .botao:focus {
   outline: none;
 }

 /* Estilização para dispositivos com largura máxima*/
 /* Para telas com largura máxima de 1100px */
 @media only screen and (max-width: 1280px) {
   .qlogo {
     max-width: 90%;
     height: auto;

   }

   .juntar-quem-somos {
     flex-direction: column;
   }

   .foto-da-empresa {
     margin: 0 auto;
   }

   .texto-quemsomos {
     max-width: 90%;
     margin: 20px auto;
     padding: 10px;
     text-align: center;
   }

   .texto-quemsomos p {
     font-size: 18px;
   }

   .texto-quemsomos h3 {
     font-size: 32px;
     margin-left: 0;
   }

   .botoes-quemsomos {
     flex-direction: column;
     margin: 20px auto;
   }

   .botao {
     margin: 10px auto;
   }
 }

 /* Para telas com largura máxima de 770px */
 @media only screen and (max-width: 770px) {
   .qlogo {
    max-height: 50vh; /* Ajuste responsivo para a altura da imagem em telas menores */
  }
  
   .texto-quemsomos {
     max-width: 80%;
   }
 }

 /* Para telas com largura máxima de 500px */
 @media only screen and (max-width: 500px) {
   .texto-quemsomos {
     max-width: 100%;
     padding: 15px;
   }

   .botao {
     font-size: 16px;
   }
 }

 /* Para telas com largura máxima de 300px */
 @media only screen and (max-width: 300px) {
   .botao {
     font-size: 14px;
   }
 }



 /*-------------------------------------------------------------------------------------------------------------------------*/
 /*conteudo pais 4 id="local" */

 .texto-local {
   text-align: center;
   font-size: 25px;
   margin-bottom: 5px;
 }

 .mapa {
   width: 100%;
   max-width: 100%;
   height: 470px;
 }



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

   .texto-local {
     text-align: center;
     font-size: 20px;
     /* Ajuste o valor do tamanho da fonte conforme necessário */
     margin-bottom: 5px;
   }

 }

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

   .mapa {
     flex: none;
     /* Ocupa o espaço disponível na linha */
     width: 100%;
     /* Define a largura do mapa para ocupar 80% do contêiner */
     max-width: none;
     /* Define a largura máxima do mapa */
     height: 100%;
     /* Defina a altura do mapa conforme necessário */
     margin-top: 30px;
     /* Ajuste o espaçamento superior conforme necessário */
     margin-left: 0;
     /* Adiciona espaçamento à esquerda para criar espaço entre o parallax e o mapa */
   }

 }

 /*-------------------------------------------------------------------------------------------------------------------------*/
 /*conteudo pais 5 id="contato" */

 /* Divisão do layout em duas colunas */
 .conteudo-contato {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 20px;
   width: 100%;
 }

 /* Estilos para o formulário de contato à esquerda */
 .contato-form {
   flex: 1;
   max-width: 400px;
   /* Ajuste a largura do formulário conforme necessário */
 }

 /* Estilos para as informações de contato à direita */
 .informacoes-contato {
   flex: 1;
   max-width: 400px;
   /* Ajuste a largura das informações conforme necessário */
 }

 .informacoes-contato h2 {
   font-size: 30px;
 }

 .informacoes-contato p {
   font-size: 20px;
 }


 /* Estilos para os campos do formulário */
 .campo-form {
   display: flex;
   flex-direction: column;
   margin-bottom: 15px;
 }

 /* Estilos para os rótulos do formulário */
 .campo-form label {
   font-weight: bold;
 }

 /* Estilos para as caixas de texto */
 input[type="text"],
 input[type="email"],
 input[type="tel"],
 textarea {
   width: 100%;
   padding: 12px;
   border: 1px solid #ccc;
   border-radius: 5px;
   font-size: 16px;
   transition: border-color 0.3s ease;
 }

 /* Estilo quando o foco está na caixa de texto */
 input[type="text"]:focus,
 input[type="email"]:focus,
 input[type="tel"]:focus,
 textarea:focus {
   border-color: #007BFF;
 }

 /* Estilo para as caixas de texto inválidas (quando required é usado) */
 input:invalid,
 textarea:invalid {
   border-color: #c7df10;
 }

 /* Estilo para as caixas de texto quando hover */
 input[type="text"]:hover,
 input[type="email"]:hover,
 input[type="tel"]:hover,
 textarea:hover {
   border-color: #999;
 }

 /* Estilos para o título "Entre em Contato" */
 .texto-contato1 {
   text-align: center;
   font-size: 30px;
   color: #555;
   font-weight: bold;
   margin-bottom: 20px;
 }

 /* Estilos para o título "Entre em Contato" */
 .texto-contato {
   font-size: 24px;
   color: #555;
   font-weight: bold;
 }

 /* Estilos para o título "Mais Informações" */
 .texto-contato-mais {
   font-size: 20px;
   color: #555;
   text-align: center;
   text-decoration: none;
   font-weight: bold;
 }

 /* Estilos para o link de "Mais Informações" */
 .texto-contato-mais a {
   color: #000000;
   text-decoration: none;
 }

 .texto-contato-mais a:hover {
   text-decoration: underline;
 }

 /* Estilos para o botão "Enviar" */
 button[type="submit"] {
   background-color: #007BFF;
   color: #fff;
   border: none;
   padding: 10px 20px;
   border-radius: 5px;
   cursor: pointer;
 }

 button[type="submit"]:hover {
   background-color: #0056b3;
 }

 /* Estilos para a seção de mídias sociais */
 .midia-contato {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-top: 20px;
 }

 .midia-icons {
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .midia-icons a {
   margin-right: 20px;
 }

 /* Estilos para o título "Siga-nos Nas Redes Sociais" */
 .texto-contato-midia {
   text-align: center;
   font-size: 30px;
   color: #555;
   font-weight: bold;
   margin-bottom: 20px;
 }

 /* Estilos para as imagens dos ícones de redes sociais */
 .midia-contato img {
   width: 50px;
   /* Defina a largura desejada */
   height: 50px;
   /* Defina a altura desejada */
 }



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

   /* Colocar o formulário e as mídias sociais na mesma linha */
   /* Colocar o formulário e as mídias sociais na mesma linha */
   .conteudo-contato {
     flex-direction: column;
   }

   .contato-form {
     max-width: 100%;
     margin-bottom: 20px;
     /* Espaço entre o formulário e as mídias sociais */
   }

   .midia-contato {
     max-width: 100%;
   }

   .informacoes-contato {
     max-width: 100%;
   }
 }

 @media only screen and (max-width: 800px) {
   .conteudo-contato {
     flex-direction: column;
   }

   .contato-form,
   .informacoes-contato {
     max-width: 100%;
   }

   .campo-form {
     margin-bottom: 10px;
   }

   .midia-icons a {
     margin-right: 10px;
   }
 }

 /* Media queries para tamanhos ainda menores */
 @media only screen and (max-width: 480px) {
   .texto-contato1 {
     font-size: 24px;
   }

   .texto-contato {
     font-size: 20px;
   }

   .texto-contato-mais {
     font-size: 18px;
   }

   .campo-form label {
     font-size: 14px;
   }

   .campo-form input,
   .campo-form textarea {
     font-size: 14px;
   }

   .informacoes-contato h2 {
     font-size: 24px;
   }

   .informacoes-contato p {
     font-size: 18px;
   }

   .texto-contato-midia {
     font-size: 24px;
   }

   .midia-contato img {
     width: 40px;
     height: 40px;
   }
 }