/* RESET */

/* Estilo para todos os elementos do documento */
* {
  padding: 0; /* Define o preenchimento como zero */
  margin: 0; /* Define as margens como zero */
  box-sizing: border-box; /* Inclui o preenchimento e a borda no cálculo do tamanho do elemento */
  list-style: none; /* Remove os marcadores de lista padrão */
}

/* Estilo para o corpo (body) da página */
body {
  font-family: "Open Sans", sans-serif; /* Define a fonte para o corpo do documento */
  overscroll-behavior: hidden; /* Controla o comportamento de rolagem além dos limites da página */
  overflow-x: hidden; /* Oculta a barra de rolagem horizontal quando não é necessária */
}

/* Definição de variáveis (root) para tornar o site responsivo */
:root {
  font-size: 62.5%; /* Define o tamanho da fonte base em 62.5% (equivalente a 10px em uma escala padrão) para facilitar o cálculo de valores em unidades rem (root em rem) */
}

/* Estilo para hiperlinks (links) */
a {
  text-decoration: none; /* Remove a decoração de sublinhado dos links */
  color: #f0f0f0; /* Define a cor do texto dos links como cinza claro (#f0f0f0) */
}


/* Zera as margens para todos os títulos h1, h2, h3 e h4 */
h1, h2, h3, h4 {
  margin: 0;
}

/* Zera as margens e o preenchimento para listas não ordenadas (ul) */
ul {
  margin: 0;
  padding: 0;
  display: flex;
  gap: 3.2rem;
  align-items: center;
}

/* Estilos para botões */
button {
  border: 0;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.5s ease-in-out;
}


.btn-intro:hover{
  background: #0099A8;

}

img {
  max-width: 100%;
  /* height: auto; */
  display: block;
}

/* Estilos para o cabeçalho (header) */
.home {
  width: 100%; /* Largura total */
  height: 80px; /* Altura de 80 pixels */
  display: flex; /* Exibe os elementos como um flex container */
  flex-direction: column; /* Direção das flexbox como coluna */
  padding-left: 64px; /* Preenchimento à esquerda de 64 pixels */
  padding-right: 64px; /* Preenchimento à direita de 64 pixels */
  padding-top: 24px; /* Preenchimento superior de 24 pixels */
}

/* Estilos para o container dentro do cabeçalho */
.container {
  display: flex; /* Exibe os elementos como um flex container */
  align-items: center; /* Alinha os itens verticalmente ao centro */
  justify-content: space-between; /* Espaço uniformemente entre os itens */
}

/* Estilos para os links no menu do cabeçalho */
.header-menu a {
  font-style: normal; /* Estilo de fonte normal */
  font-weight: 600; /* Peso da fonte 600 (mais pesado) */
  font-size: 16px; /* Tamanho da fonte de 16 pixels */
  line-height: 24px; /* Altura da linha de 24 pixels */
  color: #002847; /* Cor do texto em azul escuro (#002847) */
  display: inline-block; /* Exibe como bloco inline */
  position: relative; /* Posição relativa para posicionamento */
}

/* Efeito de sublinhado nos links do menu quando o mouse está sobre eles */
.header-menu a::after {
  content: ""; /* Conteúdo vazio */
  display: block; /* Exibe como bloco */
  height: 2px; /* Altura da linha de sublinhado de 2 pixels */
  width: 0px; /* Largura inicial do sublinhado de 0 pixels */
  background: #00b0f2; /* Cor do sublinhado em azul claro (#00b0f2) */
  margin-top: 4px; /* Margem superior de 4 pixels */
  transition: 0.3s; /* Transição de animação de 0.3 segundos */
  position: absolute; /* Posição absoluta para posicionamento relativo ao elemento pai */
}

/* Efeito de sublinhado completo quando o mouse está sobre os links do menu */
.header-menu a:hover::after {
  width: 100%; /* Largura do sublinhado de 100% ao passar o mouse */
}

/* Introdução */

/* Estilos para a seção de introdução (.intro) */
.intro {
  width: 100%; /* Largura total */
  background-image: url("./Images/img/bg-intro.jpg"); /* Imagem de fundo */
  background-position: top center; /* Posição do plano de fundo no topo central */
  background-attachment: fixed; /* Plano de fundo fixo (não rola com a página) */
  background-repeat: no-repeat; /* Não repetir a imagem de fundo */
  background-size: cover; /* Cobrir todo o elemento com a imagem de fundo */
}

/* Estilos para o título h1 na seção de introdução */
h1 {
  margin-top: 16rem; /* Margem superior de 16rem (160 pixels) */
  margin-bottom: 3.2rem; /* Margem inferior de 3.2rem (32 pixels) */
  font-weight: bold; /* Peso da fonte em negrito */
  font-size: 5.6rem; /* Tamanho da fonte de 5.6rem (56 pixels) */
  line-height: 6.4rem; /* Altura da linha de 6.4rem (64 pixels) */
  text-align: center; /* Alinhamento de texto centralizado */
  color: #ffffff; /* Cor do texto em branco (#ffffff) */
  max-width: 60rem; /* Largura máxima de 60rem (600 pixels) */
}

/* Estilos para o container (.container-intro) na seção de introdução */
.container-intro {
  display: grid; /* Exibir como um grid */
  place-items: center; /* Alinhar itens ao centro do container */
  padding: 10rem 5rem; /* Preenchimento de 10rem (100 pixels) superior e inferior, 5rem (50 pixels) à esquerda e à direita */
}

/* Estilos para o parágrafo na seção de introdução */
.intro p {
  font-style: normal; /* Estilo de fonte normal */
  font-weight: 400; /* Peso da fonte 400 (normal) */
  font-size: 2.0rem; /* Tamanho da fonte de 2.0rem (20 pixels) */
  line-height: 2.8rem; /* Altura da linha de 2.8rem (28 pixels) */
  text-align: center; /* Alinhamento de texto centralizado */
  color: #ffffff; /* Cor do texto em branco (#ffffff) */
  max-width: 45.7rem; /* Largura máxima de 45.7rem (457 pixels) */
}

/* Estilos para o botão de introdução (.btn-intro) */
.btn-intro {
  padding: 1.6rem 3.2rem; /* Preenchimento de 1.6rem (16 pixels) superior/inferior e 3.2rem (32 pixels) à esquerda/direita */
  gap: 8px; /* Espaçamento entre elementos de 8 pixels */
  background: #00b0f2; /* Cor de fundo azul (#00b0f2) */
  font-style: normal; /* Estilo de fonte normal */
  font-weight: 600; /* Peso da fonte 600 (mais pesado) */
  font-size: 1.6rem; /* Tamanho da fonte de 1.6rem (16 pixels) */
  line-height: 2.8rem; /* Altura da linha de 2.8rem (28 pixels) */
  text-align: center; /* Alinhamento de texto centralizado */
  margin-top: 5.6rem; /* Margem superior de 5.6rem (56 pixels) */
}

/* Estilos para o link dentro do botão de introdução */
.btn-intro a {
  display: block; /* Exibir como bloco */
  text-decoration: none; /* Remover decoração de texto (sublinhado) */
}


/* Estilos para botões */
button {
  color: #ffffff; /* Cor do texto branco */
  font-weight: 500; /* Peso da fonte 500 */
  font-size: 16px; /* Tamanho da fonte de 16 pixels */
}

/* Estilos para a seção de redes sociais (.redes-intro) */
.redes-intro {
  display: flex; /* Exibir como flexbox */
  gap: 16px; /* Espaçamento entre elementos de 16 pixels */
  margin-top: 7.8rem; /* Margem superior de 7.8rem (78 pixels) */
}

/* Estilos para a segunda seção - História (.historia) */
.historia {
  width: 100%; /* Largura total */
  display: grid; /* Exibir como grid */
  place-items: center; /* Alinhar itens ao centro do container */
  padding: 16rem 2.5rem; /* Preenchimento de 16rem (160 pixels) superior/inferior, 2.5rem (25 pixels) à esquerda/direita */
}

/* Estilos para o título h2 na seção de História */
.historia h2 {
  font-size: 3.2rem; /* Tamanho da fonte de 3.2rem (32 pixels) */
  text-align: center; /* Alinhamento de texto centralizado */
  color: #002847; /* Cor do texto (#002847) */
  margin: 0 auto; /* Margens automáticas nas laterais (centraliza horizontalmente) */
  margin-bottom: 2.4rem; /* Margem inferior de 2.4rem (24 pixels) */
  max-width: 24rem; /* Largura máxima de 24rem (240 pixels) */
}

/* Estilos para o elemento span na seção de História */
.historia span {
  color: #0099a8; /* Cor do texto (#0099a8) */
}

/* Estilos para parágrafos na seção de História */
.historia p {
  text-align: center; /* Alinhamento de texto centralizado */
  font-weight: 400; /* Peso da fonte 400 (normal) */
  font-size: 1.6rem; /* Tamanho da fonte de 1.6rem (16 pixels) */
  line-height: 2.4rem; /* Altura da linha de 2.4rem (24 pixels) */
  margin: 0 auto; /* Margens automáticas nas laterais (centraliza horizontalmente) */
  margin-block: 2.4rem; /* Margem vertical entre parágrafos de 2.4rem (24 pixels) */
  max-width: 84.1rem; /* Largura máxima de 84.1rem (841 pixels) */
  color: #002847; /* Cor do texto (#002847) */
}


/* Estilos para a seção Parceiros (.parceiros) */
.parceiros {
  /* Seção Parceiros */
  width: 100%; /* Largura total */
  display: block; /* Exibir como bloco (padrão para elementos div) */
  background-color: #002847; /* Cor de fundo (#002847) */
  padding: 16rem 10rem; /* Preenchimento de 16rem (160 pixels) superior/inferior, 10rem (100 pixels) à esquerda/direita */
}

/* Estilos para o título h2 na seção Parceiros */
.parceiros h2 {
  text-align: center; /* Alinhamento de texto centralizado */
  font-size: 3.2rem; /* Tamanho da fonte de 3.2rem (32 pixels) */
  margin-top: 8rem; /* Margem superior de 8rem (80 pixels) */
  margin-bottom: 6.4rem; /* Margem inferior de 6.4rem (64 pixels) */
  color: #ffffff; /* Cor do texto (#ffffff) */
  max-width: 28.4rem; /* Largura máxima de 28.4rem (284 pixels) */
  margin: 0 auto; /* Margens automáticas nas laterais (centraliza horizontalmente) */
}

/* Estilos para o elemento span na seção Parceiros */
.parceiros span {
  color: #0099a8; /* Cor do texto (#0099a8) */
}

/* Aplicar estilos de largura máxima e preenchimento inferior a ambos h2 e span na seção Parceiros */
.parceiros h2, .parceiros span {
  max-width: 28.4rem; /* Largura máxima de 28.4rem (284 pixels) */
  padding-bottom: 10.6rem; /* Preenchimento inferior de 10.6rem (106 pixels) */
}

/* Estilos para imagens dentro da seção Parceiros */
.parceiros img {
  width: auto; /* Largura automática (mantém a proporção) */
}

/* Estilos para a classe .ultimaslogo */
.ultimaslogo {
  display: flex; /* Exibir como flexbox */
  justify-content: space-evenly; /* Justificar conteúdo com espaçamento igual */
  gap: 4rem; /* Espaçamento entre elementos de 4rem (40 pixels) */
}

/* Estilos para a classe .logoparceiros */
.logoparceiros {
  display: flex; /* Exibir como flexbox */
  justify-content: space-evenly; /* Justificar conteúdo com espaçamento igual */
  gap: 1rem; /* Espaçamento entre elementos de 1rem (10 pixels) */
  margin-bottom: 3.2rem; /* Margem inferior de 3.2rem (32 pixels) */
}
.logoparceiros img, .ultimaslogo img {
  transition: transform 0.2s ease-in-out;

}

/* Estilos para imagens dentro da classe .logoparceiros e .ultimaslogo quando estão em estado de hover */
.logoparceiros img:hover, .ultimaslogo img:hover {
  transform: scale(1.2); /* Escala 1.2x (20% maior) no estado de hover */
  width: auto; /* Largura automática (mantém a proporção) */
  display: flex; /* Exibir como flexbox */
  flex-wrap: wrap; /* Quebra de linha no estado de hover */
}


/* 3° Section começa aqui - Clientes */

.clientes {
  width: 100%;
  background-color: #ffffff;
  padding: 16rem 2.5rem;
  margin: 0 auto;

}

.clientes h2 {
  max-width: 38.2rem;
  font-weight: 700;
  font-size: 3.2rem;
  text-align: center;
  color: #002847;
  margin: 0 auto;
  padding-bottom: 10.6rem;
}

.clientes span {
  color: #0099a8;
}

/*IMAGENS LOGO CLIENTES*/


.ultimasclientes{
  gap: 4rem; /* colocado gap nas últimas logo da secton clientes por causa do efeito hover */
}


.clientes .logoclientes,
.ultimasclientes {
  display: flex;
  justify-content: center;
}



.clientes .logoclientes img {
  /*espaço entre as logo clientes*/
  padding-bottom: 8rem;
}



.clientes img {
  transition: transform 0.2s ease-in-out;
}

.clientes img:hover {
  transform: scale(1.2);
  width: auto;
  display: flex;
  position: relative;
}

/*5º SECTION-Serviços*/
.servicos {
  width: 100%;
  background-color: #002847;
  overflow-x: hidden;
  display: grid;
  place-items: center;
}

.container-servicos {
  display: grid;
  place-items: center;
  width: 100%;
  height: auto;
}

.container-servicos h2,
span {
  /*config texto principal section serviços*/
  font-size: 3.2rem;
  max-width: 46.4rem;
  font-weight: 700;
  text-align: center;
  line-height: 4rem;
  margin: 0 auto;
}

.container-servicos h2 {
  color: #ffffff;
  margin-top: 16rem;
}

.servicos span {
  color: #0099a8;
}

.container-servicos #prin {
  text-align: center;
  color: #ffffff;
  margin-top: 2.4rem;
  margin-bottom: 4rem;
  max-width: 75.2rem;

  margin-right: auto;
  margin-left: auto;
  font-size: 1.6rem;
  line-height: 2.4rem;
}

.cards {
  width: 100%;
  height: auto;
  display: flex;
  box-sizing: border-box;
  flex-flow: wrap;
  justify-content: center;
  gap: 1.6rem;
  padding-bottom: 16rem;
 
}


#card-1:hover,
#card-2:hover,
#card-3:hover {
  background-color: #ffffff;
  transition: all 0.5s ease;
}



#card-1 {
  max-width: 31.6rem;
  height: 28.0rem;
  background-color: #066c9b;
  display: flex;
  align-items: center;
  flex-direction: column;
}


#card-1 h3 {

  font-style: normal;
  font-weight: 700;
  font-size: 1.7rem;
  text-align: center;
  letter-spacing: -1px;
  color: #002847;
  padding-left: 4.8rem;
  padding-right: 4.8rem;
  padding-top: 3rem;
}

#card-1 p {
  font-style: normal;
  line-height: 150%;
  text-align: center;
  color: #ffffff;
  font-weight: 400;
  font-size: 1.3rem;
  padding-top: 0.8rem;
  padding-bottom: 1rem;
  padding-left: 4.1rem;
  padding-right: 4.1rem;
}


#card-1:hover p {
  color: #002847;
  transition: all 0.5s ease;
}


#card-2 {
  max-width: 31.6rem;
  height: 28.0rem;
  background-color: #066c9b;
  display: flex;
  align-items: center;
  flex-direction: column;
}

#card-2 h3 {

  font-style: normal;
  font-weight: 700;
  font-size: 1.7rem;
  text-align: center;
  letter-spacing: -1px;
  color: #002847;
  padding-left: 4.8rem;
  padding-right: 4.8rem;
  padding-top: 3rem;
}

#card-2 p {

  font-style: normal;
  line-height: 150%;
  text-align: center;
  color: #ffffff;
  font-weight: 400;
  font-size: 1.3rem;
  padding-top: 0.8rem;
  padding-bottom: 1rem;
  padding-left: 4.1rem;
  padding-right: 4.1rem;
}

#card-2:hover p {
  color: #002847;
  transition: all 0.5s ease;
}

#card-3 {
  max-width: 31.6rem;
  height: 28.0rem;
  background-color: #066c9b;
  display: flex;
  align-items: center;
  flex-direction: column;
}

#card-3 h3 {

  font-style: normal;
  font-weight: 700;
  font-size: 1.7rem;
  text-align: center;
  letter-spacing: -1px;
  color: #002847;
  padding-left: 3.1rem;
  padding-right: 3.1rem;
  padding-top: 3rem;

}

#card-3 p {

  font-style: normal;
  line-height: 150%;
  text-align: center;
  color: #ffffff;
  font-weight: 400;
  font-size: 1.3rem;
  padding-top: 0.8rem;
  padding-bottom: 1rem;
  padding-left: 4.1rem;
  padding-right: 4.1rem;
}


#card-3:hover p {
  color: #002847;
  transition: all 0.5s ease;
}

#icon-circle {
  padding-top: 4.4rem;
}

#icon {
  border: 1.5px solid #00b0f2;
  border-radius: 50%;
}

#icon img {
  display: block;
  max-width: 3.1rem;
  margin: 0 auto;   
  padding: 0.4rem    
}

/* 6ºSECTION - POLÍTICA */
.politica {
  background-color: #00b0f2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8rem;
  padding-bottom: 8rem;
  ;
}

/* centralização do titulo da section politica */
.politica .principal {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.politica h2 {
  color: #002847;
  max-width: 49.4rem;
  margin-bottom: 2.4rem;
  text-align: center;
  justify-content: center;
  font-size: 3.2rem;
}

.politica .principal p {
  font-weight: 400;
  width: 52.8rem;
  text-align: center;
  color: #002847;
  font-size: 16px;
}

article {
  margin: 0 auto;
}

.politica #quadrado1,
#quadrado2,
#quadrado3,
#quadrado4,
#quadrado5 {
  max-width: 64rem;
  height: 16rem;
  background-color: #002847;
  margin-top: 1.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.6rem;
  padding: 5rem;
}

.politica #pquadrado1,
#pquadrado2,
#pquadrado3,
#pquadrado4,
#pquadrado5 {
  color: #ffffff;
  text-align: center;
  max-width: 47.1rem;
  font-size: 1.6rem;
  line-height: 2.4rem;
}

/*efeito hover nos quadrados */

.politica #quadrado1:hover,
#quadrado2:hover,
#quadrado3:hover,
#quadrado4:hover,
#quadrado5:hover {

  background-color: #f0f0f0;

  transition: all 0.3s ease;
}

/*efeito hover nos parágrafos dos quadrados*/

.politica #quadrado1:hover #pquadrado1,
#quadrado2:hover #pquadrado2,
#quadrado3:hover #pquadrado3,
#quadrado4:hover #pquadrado4,
#quadrado5:hover #pquadrado5 {
  color: #002847;
  transition: all 0.5s ease;
}

/*Aqui começa a 7° Seção - Economia */

.economia {
  width: 100%;
  background-image: url(./Images/img/bg-quebra.png);
  background-position: top center;
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 16rem;
  padding-bottom: 16rem;
  ;

}

.economia h2 {
  max-width: 49.4rem;
  font-weight: 700;
  font-size: 3.2rem;
  text-align: center;
  color: #ffffff;
  padding-bottom: 2.4rem;
  margin: 0 auto;
}

.economia p {
  max-width: 57.8rem;
  font-size: 1.6rem;
  text-align: center;
  font-weight: 400;
  line-height: 2.4rem;
  color: #ffffff;
}

/* Começa a 8° seção - Experiência */

.exp {
  width: 100%;

  background-image: url(./Images/img/bg-quebra02.png);
  background-position: top center;
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 16rem;
  padding-bottom: 16rem;
  ;

}

.exp h2 {
  max-width: 58rem;
  font-weight: 700;
  font-size: 3.2rem;
  text-align: center;
  color: #ffffff;
  padding-bottom: 2.4rem;
}

.exp p {
  max-width: 57.1rem;
  font-size: 1.6rem;
  text-align: center;
  font-weight: 400;
  color: #ffffff;
}

/*Start 9° Seção - Localização */
.localizacao {
  max-width: 100%;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-top: 8rem;
  padding-bottom: 8rem;


}

.localizacao h2 {
  color: #002847;
  text-align: center;
  max-width: 29rem;
  font-weight: 700;
  font-size: 3.2rem;
  padding-bottom: 2.4rem;
  margin: 0 auto;

}

.localizacao span {
  color: #0099a8;
}

.localizacao p {
  color: #002847;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 4.125rem;
  line-height: 2.4rem;
  font-size: 1.6rem;
}

.localizacao img {
  margin-bottom: 10px;
}

.localizacao .local {
  display: grid;
  place-items: center;
}

.localizacao .email {
  display: grid;
  place-items: center;
}

.localizacao .telefone {
  display: grid;
  place-items: center;
}

/* Começa a 9° Seção aqui - Orçamento -  Está acabando, vamos! */
.orcamento {
  width: 100%;
}
.orcamento-container {
  width: 100%;
  background-color: #002847;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-top: 16rem;
}

.orcamento h2 {
  max-width: 30.9rem;
  color: #ffffff;
  line-height: 2.4rem;
  padding-bottom: 2.4rem;
  font-size: 3.2rem;
  text-align: center;
}

.orcamento span {
  color: #0099a8;
}

.orcamento p {
  margin-bottom: 40px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  line-height: 2.4rem;
  text-align: center;
}

.orcamento button {
  background: #00B0F2;
  padding: 1.6rem 3.2rem;
 
}

.orcamento button:hover{
  background: #0099a8;
 
}


.redes-orcamento {
  display: flex;
  gap: 1.6rem;
  margin-top: 7.8rem;
  margin: none;
}

/* Footer - final da página */

.footer {
  width: 100%;
 
  background-color: #0099a8;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding-top: 4rem;
  padding-bottom: 4rem;
  ;

}

.container-footer {
  display: flex;
  align-items: flex-start;
  margin-left: 4.4rem;
  margin-right: 4.4rem;
  justify-content: space-between;
}

.footer p {
  
  font-size: 1rem;
  line-height: 2rem;
}

.footer-right span {
  font-size: 1.1rem;
  line-height: 2rem;
}

.container-footer span {
  font-size: 1.1rem;
}

/*alinhamento div container*/
.historia-container,
.politica-container,

.localizacao-container,
.exp-container,
.parceiros-container,
.clientes-container {

  margin: 0 auto;
  max-width: 121.6rem;
}
/*responsivo das imagens
*/
@media (max-width: 1179px) {


  
  .parceiros img {
    display: flex;
    align-items: center;
    justify-content:center;
    max-width: 100%;
  }
}


/*Responsividade*/

@media (max-width: 680px) {

  /*quando a tela for 680px pra baixo, vai acontecer isso...*/
  body {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
  }

  .intro {
    width: 100%;
    background-image: url("./Images/img/bg-intro.jpg");
    ;
  }

  .container{
    display: block ;
  }
  /* todos os subtiulos das seções vão diminuir */
  h2{
    font-size: 2.4rem;
  }
   img{
    margin: 1rem auto
   }
  header {
    margin-bottom: 0;
  }
  .home{
    padding:0 ;
    height: auto;
  }
  .header-menu a {
    display: none;
  }

  .politica {
    display: none;
  }

  
  h1 {
    font-size: 5rem;
    margin-top: 0;

  }


  .redes-intro {
    display: none;
  }
  /*section historia*/

  .historia{
    padding:10rem 2.5rem ;
  }
  .historia-container{
    padding: 0;
  }
  
  .historia h2 {
    font-size: 3.2rem;
  }
  
  .historia span {
    font-size: 3.2rem;
  }

  .historia p{
    font-size: 1.6rem;
    width: auto;
    margin-block: 2rem;
  }

  .parceiros{
    display: grid;
    place-items: center;
    padding: 10rem 5rem;
    background-color:#002847;
  }
  .parceiros h2 {
    font-size: 3.2rem;
    padding-bottom: 3rem;
  }
  .parceiros span{
    color: #002847;
    font-size: 3.2rem;
  }

  .parceiros #intelbras {
    margin: 0;
  }

  .parceiros img{
    max-width: 70%;
    margin :0 auto;
  }
  .parceiros ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 0 auto;
    gap: 2rem;
  }

  .logoparceiros #andra {
    padding-top: 2.2rem;
  }
  .logoparceiros #casaparafusos {
    margin: 0;
    padding-bottom: 2.2rem;
    padding-top: 2.2rem;
  }

  .logoparceiros #ielcabos{
    padding-bottom: 2.2rem;
  }

  .logoparceiros {
    padding: 0;
  }

  /*começo section da logo dos clientes */
  .clientes{
    padding: 10rem 1rem;
    margin: 0;
  }
  .clientes-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .clientes h2 {
    font-size: 3.2rem ;
    padding-bottom: 3rem;
    margin: 0 auto;
  }

  .clientes span {
    font-size: 3.2rem ;   
  }

  .clientes .logoclientes img .ultimasclientes img{
    width: 35%;
    display: flex;
    flex-direction: column;
    margin: 0 auto 10rem auto;
    transition: none;
    transform: none;

  }
  
  .clientes img {
    transition: none;
  }
  
  .clientes img:hover {
    transform: none;
    padding: none;
  }

  .clientes .logoclientes, .ultimasclientes{
    display: block;
  }
  /* Estilo para imagens dentro dos elementos com as classes .logoclientes e .ultimasclientes */
  .clientes .logoclientes img, .clientes .ultimasclientes img {
     padding: 0; /* Define o preenchimento como zero */
     display: flex; /* Define o elemento como um contêiner flexível */
     flex-direction: column; /* Empilha os elementos verticalmente */
     gap: 3.2rem; /* Adiciona espaçamento vertical entre os elementos */
     margin-bottom: 3.5rem; /* Cria margem inferior para separação */
      max-width: 30%; /* Limita a largura máxima das imagens a 30% */
 }



  /*Introdução Section serviços */

  .servicos {
    display: block;
    padding: 10rem 5rem;
  }

  
  .servicos span, .container-servicos span{
    padding: 0;
    margin: 0;
    font-size: 2.8rem;

  }
  .container-servicos h2, span {
   font-size: 3.2rem;
   margin: 0;
  }
  
  .container-servicos #prin{
    font-size: 1.6rem;
    margin: 0;
    padding-top: 2.4rem;
    line-height: 2rem;
  }
  
  .cards {
    display: flex;
    flex-wrap: wrap;
    padding-top: 4rem;
    gap: 3rem;
    padding-bottom: 0;
  }
  
  #card-1, #card-2, #card-3{
    width: 30.5rem;
  }

  #card-1 p, #card-2 p, #card-3 p{
    padding-bottom: 2rem;
  }

  #card-2 p{
    padding-left: 3rem;
    padding-right: 3rem;
  }
  
  /*começo section economia*/

  .economia{
    padding: 10rem 5rem;
  }
  .economia h2{
   
    font-size: 3.2rem;
  }
  .economia p {
   
    font-size: 1.6rem;
    line-height: 2.3rem;
  }
  .exp{
    padding: 10rem 5rem;
  }
  .exp p {
    
    font-size: 1.6rem;
    line-height: 2.3rem;
  }

  .exp h2 {
    font-size: 3.2rem;
  }
   
  .localizacao {
    padding: 10rem 5rem;
  }
  
  .localizacao h2 {
    font-size: 3.2rem;
  }
  .localizacao span {
    font-size: 3.2rem;
  }

  .localizacao p {
    font-size: 1.6rem;
  }
  
  /*Início section orçamento/contato*/
  .orcamento-container {
    padding: 10rem 5rem;
  }
  .orcamento h2,span {
    font-size: 2.8rem;
  }
  
  .orcamento-container p {
    font-size: 1.4rem;
  }
  
  .orcamento button{
    padding: 1.5rem 3rem;
  }

  .orcamento button:hover{
    background: #0099A8;
  }
  footer .container-footer {
    display: none;
  }

  .footer {
    display: none;
  }
}
  @media (max-width: 400px) {
  
   /*quando a tela for 680px pra baixo, vai acontecer isso...*/
   body {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    }
   /* todos os subtiulos das seções vão diminuir */
    h2 {
      font-size: 3.2rem;
    }
    
    h1 {
      font-size: 4rem;
    }
  
    /* historia*/
  
    .historia h2{
      font-size: 3.2rem;
    }
    .historia span{
      font-size: 3.2rem;
    }
      
  
    .historia p{
      max-width: 30rem;
      font-size: 1.3rem;
      margin-block: 2rem;
    }
  /* clientes*/
      .clientes img, .parceiros img {
      max-width: 50% ;
      margin: 0 auto;
      
    }
    /*parceiros*/
    .parceiros h2 {
      padding-bottom: 6.4rem;
      font-size: 3.2rem;
    }

    .parceiros span {
      font-size: 3.2rem;
      color: #00b0f2;
    } 
    /*Servicos*/
    #icon-circle {
      padding-top: 2rem;
    }
      
    #card-1 h3, #card-2 h3, #card-3 h3 {
      font-size: 1.5rem;

    }
    #card-1 p, #card-2 p, #card-3p  {
      font-size: 1.2rem;
      padding-right: 1rem;
      padding-left: 1rem;
    }
    #card-1 , #card-2 , #card-3  {
      width: 25rem;
    }
    .servicos {
      padding: 10rem 2.5rem;
    }

    .economia h2 {
      font-size: 3.2rem;
    }

    .exp h2 {
    font-size: 3.2rem;
    }
    
  }

  @media (max-width :330px ){
    #card-1, #card-2, #card-3 {
      width: 23rem;
    }
  }

/* Estilo específico para dispositivos Apple (por exemplo, Safari) */
  @media screen and (-webkit-min-device-pixel-ratio: 2) {
    .intro {
      background-image: url(./Images/img/bg-intro.jpg); /* Plano de fundo para dispositivos Apple */
      width: 100%;
      background-position: auto;
      background-attachment:scroll;
      background-repeat: no-repeat;
      background-size:auto; 
    }
  }