@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mukta&family=Poppins&display=swap');

/*variaveis*/
:root {
  --azul: #1f8cff;
  --fonte: "Oswald", sans-serif;
  --fonte_texto: "Poppins", sans-serif;
  --sombreado_div: 0px 14px 13px #00000087;
  /*sombreado das divis azul*/

}


/* configurações gerais da página */
* {
  margin: 0px;
  padding: 0px;
  /*  */
  font-family: 'Poppins', sans-serif; font-weight: 400;

}

h1 {
  font-family: 'Syne', sans-serif; font-weight: 700;
}

/*barra de navegação*/
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(100, 106, 116, 0.20);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px); /* Box-sizing garante que o padding não aumente o tamanho total da navbar */
  box-sizing: border-box;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  color: white;
  padding: 10px 20px;
}

.navbar-brand {
  height: 60px;
}

.navbar-links {
  list-style: none; /* Remove marcadores de lista */
  margin: 0;
  padding: 0;
  display: flex; /* Links ficam lado a lado */
  padding-right: 6%;
}

.navbar-links li {
  margin-left: 20px;
}

.navbar-links a {
  color: white;
  text-decoration: none;
  padding: 5px 10px;
  transition: background-color 0.3s ease;
}

.navbar-links a:hover {
  background-color: #555555;
  border-radius: 5px;
}

/* Esconde o botão de hambúrguer por padrão em telas maiores */
.navbar-toggler {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 30px;  /* Largura do botão */
  height: 25px; /* Altura do botão */
  position: relative;
}

.navbar-toggler .bar {
  display: block;
  width: 100%;
  height: 3px;
  background-color: white;
  margin: 5px 0;
  /* Espaçamento entre as barras */
  transition: all 0.3s ease;
}

/* responsividade */
@media (max-width: 768px) { /*telas de até 768px de largura */

  .navbar {
    flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha */
    justify-content: space-between; /* Mantém brand e toggler separados */
  }

  .navbar-toggler {
    display: block;/* Mostra o botão de hambúrguer */
  }

  .navbar-links {
    width: 100%; /* Links ocupam toda a largura */
    flex-direction: column; /* Links empilhados verticalmente */
    display: none; /* Esconde os links por padrão */
    text-align: center;
    padding-top: 15px;
    background-color: #00000080;
    border-radius: 20px;
  }

  .navbar-links.active {
    display: flex; /* Mostra os links quando a navbar está ativa */
  }

  .navbar-links li {
    width: 100%; /* Cada item de lista ocupa toda a largura */
    border-bottom: 2px solid #555555fb; /* Linha divisória entre itens */
  }

  .navbar-links li:last-child {
    border-bottom: none; /* Remove a linha do último item */
  }

  .navbar-links a {
    display: block;  /* Ocupa toda a área clicável */
    padding: 15px 0; /* Aumenta o padding para facilitar o clique */
  }

  /* Animação do botão hambúrguer ao ser clicado */
  .navbar-toggler.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .navbar-toggler.active .bar:nth-child(2) {
    opacity: 0;
  }

  .navbar-toggler.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}

/* altera as propriedades das imagens do carrosel*/
.carousel-item img {
  width: 100%;
  height: 100vh;
  min-height: 400px;
  max-height: 870px;
  object-fit: cover;
  border-radius: 15px;
}

#carouselExampleIndicators {
  width: 100%;
  margin: 0 auto;
}

/* texto inicil que aparece junto como carrosel de imagesn */
.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 80%;
  max-width: 900px;

  text-align: center;
  color: white;
  z-index: 1000;

  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  border-radius: 8px;
}

.overlay-text p {
  text-align: justify;
  padding: 8px 25px;
  font-size: 1.2em;
  line-height: 1.5;
}

.overlay-text strong {
  color: #3869f1f8
}

/*trabalhamos com */
#trabalhamos_com {
  margin-top: 1.5%;
  margin-bottom: 5%;
  padding-bottom: 3%;

}

.trabalhamos_titulo {
  text-transform: uppercase;
  text-align: center;
  color: #135ba8;
  padding-top: 4%;
  padding-bottom: 3%;
  /*padding-left: 17%;*/
}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

/* Estilo do card individual */
.card {
  background-color: white;
  border-radius: 5%;
  box-shadow: 9px 9px 13px rgba(0, 0, 0, 0.75);
  width: 100%;
  max-width: 300px;
  /* Limita largura em telas maiores */
  padding: 20px;
  text-align: center;
  transition: transform 0.2s;
  /* Efeito de leve elevação no hover */
}

/* Efeito hover: sobe o card levemente */
.card:hover {
  transform: translateY(-8px);
}

/* Imagem responsiva e com bordas arredondadas */
.card img {
  width: 100%;
  height: 275px;
  max-height: 200px;
  object-fit: cover; /* Garante que a imagem preencha bem o espaço */
  border-radius: 10px;
}

/* Título de cada card */
.card h3 {
  margin: 15px 0;
  font-size: 20px;
  font-family: 'Syne', sans-serif; font-weight: 700;
}

/* Lista de benefícios */
.card ul {
  list-style: none;
  padding: 0;
  text-align: left;
}

/* Cada item da lista */
.card li {
  margin: 10px 0;
  font-size: 16px;
}


/*quem somos*/
.container1 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse; /* Imagem à direita */ 
  justify-content: center; /*align-items: center;*/
  align-items: flex-start;
  padding: 40px 20px;
  max-width: 1200px;
  margin: auto;
  margin-top: -5%;
  margin-bottom: 3%;
}

p {
  font-family: var(--fonte_texto);
}

.texto {
  flex: 1 1 400px;
  padding: 20px;
  font-size: 1.2em;
  line-height: 1.6;
  text-align: justify;

}

.texto h2 {
  text-align: center;
  font-size: 1.5em;
  margin-bottom: 5%;
}

/* Imagem da seção "Quem Somos" */
.imagem-responsiva {
  flex: 1 1 300px;
  padding: 20px;
  text-align: center;
  border: 3px groove #000000;
  border-radius: 15px;
  height: auto;

}

.imagem-responsiva img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* responsividade */
@media (max-width: 768px) {
  .container1 {

    flex-direction: column;
    text-align: center;
  }

  .texto,
  .imagem {
    padding: 10px;
  }

}

/* faz com que a imagem do homem suma quando chegue nesse tamanho de tala */
@media (max-width: 822px) {
  .imagem-responsiva {
    display: none;
  }

}

/* Seção de clientes */
.clientes-section {
  /* Fundo*/
  background-color: rgb(169, 169, 169, 0.60);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 25px 0;
  box-shadow: var(--sombreado_div);
}

/* Título da seção */
.section-title {
  color: #135ba8;
  font-size: 2.3em;
  /* Mantém o texto alinhado à esquerda como na imagem */
  padding-left: 20px;
  margin-bottom: 20px;
  text-align: center;
}

/* Contêiner que controla o layout dos logos */
.logos-container {
  display: flex;
  flex-wrap: wrap;
  /* 👈 ESSENCIAL: Permite que os logos quebrem em telas pequenas */
  justify-content: center;
  /* 👈 Centraliza os logos horizontalmente */
  align-items: center;
  gap: 100px;
  /* Espaçamento entre os logos */
  padding: 0 20px;

}

/* Configurações para as imagens individuais */
.logos-container img {
  /* RESPONSIVIDADE PRINCIPAL */
  max-width: 15%;
  /* Garante que a imagem nunca estoure o contêiner */
  height: auto;
  /* 👈 ESSENCIAL: Mantém a proporção da imagem ao redimensionar */

  /* Controle de Tamanho e Flexibilidade */
  flex-basis: 160px;
  /* Define um tamanho base para o logo. Ajuste este valor. */
  width: 100%;
  /* Faz o logo ocupar o espaço definido pelo flex-basis */
  object-fit: contain;
  /* Garante que o logo não seja cortado */
}

/* * Media Query para ajustar o tamanho dos logos em dispositivos muito pequenos (Ex: Celulares)
 */
@media (max-width: 600px) {
  
  /* Diminui o espaçamento entre as logos */
  .logos-container {
    gap: 55px;
  }

   /* Reduz o tamanho do título da seção */
  .section-title {
    font-size: 1.5em;
  }

  /* Reduz o tamanho das logos para melhor adaptação */
  .logos-container img {
    flex-basis: 110px;
  }
}

/* Rodapé */
footer {
  background: #fafafa;
  padding: 40px 20px 10px;
  text-align: left;
  margin-top: 40px;
}

/* Contêiner principal do rodapé */
.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  max-width: 1200px;
  margin: auto;
}

/* Colunas do rodapé */
.footer-col {
  flex: 1;
  min-width: 250px;
}

/* Títulos das colunas */
.footer-col h3 {
  font-style: italic;
  margin-bottom: 20px;
  color: #135ba8;
  text-transform: uppercase;
}

/* Links do rodapé */
.footer-col a {
  text-decoration: none;
  color: rgba(10, 10, 10, 0.815);
}

/* Parágrafos do rodapé */
.footer-col p {
  margin: 10px 0;
  font-size: 16px;
}

/* Ícones das informações de contato */
.footer-col img.icon {
  width: 30px;
  vertical-align: middle;
  margin-right: 10px;
}

/* Ícones das redes sociais */
.social-icons img {
  width: 40px;
  margin: 0 8px;
  transition: transform 0.3s;
}

/* Efeito ao passar o mouse sobre os ícones */
.social-icons img:hover {
  transform: scale(1.2);
}

/* Contêiner do mapa */
.mapa {
  overflow: hidden;
  width: 350px;
  height: 200px;
  border-radius: 25px;
  margin: auto;
}

/* Configuração do Google Maps */
.mapa iframe {
  width: 100%;
  height: 200px;
  border: none
}

/* Ajustes para telas muito pequenas */
@media (max-width: 344px) {
  .mapa {
    width: 250px;
    height: 200px;

  }

}

 /* Números de telefone */
.numeros {
  margin-top: 10px;
}

/* Direitos do site */
.footer-bottom p {
  margin-top: 1.5% 
}
/* Rodapé inferior */
.footer-bottom {
  border-top: 2px solid #999;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; 
  margin-top: 25px;
}

/* Imagem do rodapé */
.imag-rodape {
  width: 150px;
  height: auto;
}

/* Ajustes para telas menores (tablets e celulares) */
@media (max-width: 768px) {
  
  /* Organiza os elementos do rodapé em coluna */
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  /* Oculta a logo no rodapé em telas pequenas */
  .imag-rodape {
    /* width: 130px; */
    display: none;
  }
}