@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600&display=swap");

html {
  scroll-behavior: smooth; /* Ativa o comportamento de rolagem suave ao navegar por âncoras */
}

/* common styles */
* {
padding: 0; /* Remove o espaçamento interno padrão de todos os elementos */
margin: 0; /* Remove as margens padrão de todos os elementos */
box-sizing: border-box; /* Inclui bordas e espaçamentos internos no tamanho total do elemento */
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; /* Define a fonte padrão */
}

.container {
max-width: 1100px; /* Define a largura máxima do contêiner */
margin: auto; /* Centraliza o contêiner horizontalmente */
padding: 0 1rem; /* Adiciona espaçamento interno nas laterais */
}

/* navigation */
.nav {
display: flex; /* Define um contêiner flexível para os itens do menu */
justify-content: space-between; /* Distribui os itens uniformemente com espaço entre eles */
align-items: center; /* Alinha os itens verticalmente no centro */
background-color: white; /* Define o fundo branco para o menu */
position: fixed; /* Mantém a barra de navegação fixa no topo */
top: 0; /* Posiciona no topo da página */
left: 0; /* Alinha à esquerda da página */
width: 100%; /* Faz a barra ocupar toda a largura da página */
z-index: 100; /* Garante que a barra fique acima de outros elementos */
padding: 1rem; /* Adiciona espaçamento interno */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra leve abaixo da barra */
}

/* Navigation (Desktop) */
.nav--container {
  display: flex; /* Define um contêiner flexível */
  justify-content: center; /* Centraliza os itens horizontalmente */
  align-items: center; /* Centraliza os itens verticalmente */
  list-style: none; /* Remove os marcadores padrão da lista */
  padding: 0; /* Remove o espaçamento interno */
  margin: 0; /* Remove a margem externa */
}

/*.nav--logo {
  position: absolute; /* Permite posicionamento personalizado */
  /*left: 20px; /* Posiciona o logo a 20px da borda esquerda */
  /*top: 50%; /* Centraliza verticalmente */
  /*transform: translateY(-50%); /* Corrige o alinhamento vertical */
/*}

.nav--logo img {
height: 50px; /* Define a altura da imagem */
/*width: auto; /* Mantém a proporção da largura da imagem */
/*display: block; /* Remove espaçamentos extras ao redor da imagem */
/*}*/

.nav--link {
  text-decoration: none; /* Remove a linha sublinhada dos links */
  color: #111; /* Define a cor do texto */
  padding: 0.5rem 1rem; /* Adiciona espaçamento interno ao redor do texto */
  margin: 0 0.5rem; /* Espaça horizontalmente os links */
  border-radius: 0.3rem; /* Arredonda levemente os cantos dos links */
  transition: background-color 0.3s ease, color 0.3s ease; /* Adiciona uma transição suave nas cores */
}

.nav--link:hover { /* effect on link */
  background-color: #A9A9A9; /* Define a cor de fundo ao passar o mouse */
  color: #333; /* Muda a cor do texto ao passar o mouse */
}

.nav--button{
background-color: #fff; /* Define a cor de fundo como branca */
color: #111; /* Define a cor do texto */
padding: 10px 15px; /* Define o espaçamento interno (10px no topo/fundo, 15px nas laterais) */
border-radius: 0.3rem; /* Arredonda os cantos */
text-decoration: none; /* Remove o sublinhado */
transition: background-color 0.3s ease; /* Adiciona uma transição suave na cor de fundo */
position: absolute; /* Permite posicionamento personalizado */
right: 20px; /* Posiciona o botão a 20px da borda direita */
top: 50%; /* Centraliza verticalmente */
transform: translateY(-50%); /* Corrige o alinhamento vertical */
z-index: 2; /* Garante que o botão fique acima de outros elementos */
cursor: pointer; /* Mostra que o botão é clicável */
}

.nav--button:hover { /* Efeito ao passar o mouse */
background-color: #D3D3D3; /* Define a cor de fundo ao passar o mouse */
}


/* Hamburger - escondido por padrão */
.hamburger {
  display: none; /* Esconde o ícone do hambúrguer por padrão (geralmente para telas maiores) */
  flex-direction: column; /* Organiza as barras do ícone em uma coluna */
  justify-content: space-between; /* Distribui o espaço uniformemente entre as barras */
  width: 30px; /* Define a largura total do ícone do hambúrguer */
  height: 25px; /* Define a altura total do ícone do hambúrguer */
  cursor: pointer; /* Muda o cursor para indicar que o elemento é clicável */
}

.hamburger .bar {
  height: 5px; /* Define a altura de cada barra do ícone */
  background-color: #333; /* Define a cor de fundo das barras (preto escuro) */
  border-radius: 5px; /* Adiciona cantos arredondados às barras */
}

 
/* hero */
.hero {
  /* background-color: #D3D3D3; /* background color of section */
  background: url('https://images.pexels.com/photos/247791/pexels-photo-247791.png?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'); /* Define uma imagem como fundo da seção */
  background-size: cover; /* Faz com que a imagem de fundo cubra completamente a área da seção */
  background-position: center center; /* Centraliza a imagem de fundo tanto horizontalmente quanto verticalmente */
  background-repeat: no-repeat; /* Evita que a imagem de fundo seja repetida */
  text-align: center; /* Centraliza o texto horizontalmente dentro da seção */
  padding: 50px 0; /* Adiciona um espaçamento interno de 50px no topo e embaixo da seção */
  min-height: 90vh; /* Define uma altura mínima para a seção como 90% da altura da janela de visualização */
  width: 100%; /* Faz com que a seção ocupe 100% da largura da janela de visualização */
  display: flex; /* Define o layout da seção como flexbox */
  flex-direction: column; /* Organiza os elementos filhos em uma coluna (de cima para baixo) */
  align-items: center; /* Alinha os elementos filhos horizontalmente no centro */
  justify-content: center; /* Alinha os elementos filhos verticalmente no centro */
  padding-top: 4rem; /* Adiciona um espaçamento interno superior de 4rem */
}

.hero .container {
  display: flex; /* Define o layout da área como flexbox para alinhamento */
  flex-direction: column; /* Organiza os elementos em uma coluna */
  align-items: center; /* Alinha os elementos horizontalmente ao centro */
  justify-content: center; /* Alinha os elementos verticalmente ao centro */
  height: 100%; /* O container ocupa 100% da altura do elemento pai */
}

.hero .img--cover {
  height: 150px; /* Define a altura da imagem */
  width: 150px; /* Define a largura da imagem */
  position: relative; /* Permite posicionamento relativo para outros elementos */
  border-radius: 50%; /* Transforma a imagem em um círculo */
  overflow: hidden; /* Esconde conteúdo que exceda os limites do círculo */
  margin-bottom: 1.5rem; /* Adiciona espaçamento inferior para separar da imagem */
}

/*.hero .img--cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}*/

.hero--title {
  color: #444; /* Define a cor do texto */
  font-size: 20rem; /* Define o tamanho grande do texto */
  line-height: 1.2; /* Ajusta a altura da linha proporcionalmente */
  margin-bottom: 1rem; /* Adiciona espaçamento inferior para separar do parágrafo */
  overflow: visible; /* Evita cortar o texto em contêineres pais */
  text-transform: none; /* Certifique-se de que o texto não seja alterado */
}


.hero--desc {
  max-width: 700px; /* Define a largura máxima do texto descritivo */
  margin: 0 auto 1.5rem; /* Centraliza horizontalmente e adiciona espaçamento inferior */
}

.hero .btn {
  background-color: #fff; /* Define a cor de fundo do botão */
  color: #111; /* Define a cor do texto do botão */
  padding: 0.8rem 2rem; /* Define o espaço interno do botão */
  border-radius: 0.5rem; /* Arredonda os cantos do botão */
  font-weight: 700; /* Deixa o texto em negrito */
  text-decoration: none; /* Remove o sublinhado do texto */
  display: inline-block; /* Garante que o botão se comporte como um bloco inline */
  cursor: pointer; /* Muda o cursor para indicar interatividade */
  box-shadow: none; /* Remove sombras do botão */
}

.hero .btn:hover {
  background-color: #A9A9A9; /* Altera a cor de fundo ao passar o mouse */
  color: #333; /* Altera a cor do texto ao passar o mouse */
}

/* sections */
.section {
  padding-top: 1.5rem; /* Adiciona espaçamento superior */
  padding-bottom: 2rem; /* Adiciona espaçamento inferior */
  scroll-margin-top: 100px; /* Ajusta o deslocamento da rolagem para âncoras */
  /*padding: 8rem 0; /* Comentado: Adicionaria espaçamento vertical maior */
}

/* Seção About */
#about {
    background-color: #222; /* Define a cor de fundo preta */
    color: #D3D3D3; /* Define a cor do texto cinza claro */
    height: auto; /* Permite que a altura seja determinada pelo conteúdo */
    padding: 50px 20px; /* Adiciona espaçamento interno superior/inferior e lateral */
}

.section--desc {
  max-width: 650px; /* Define a largura máxima do conteúdo */
  margin: 0 auto; /* Centraliza horizontalmente */
  text-align: center; /* Centraliza o texto */
  font-size: 1.5em; /* Define o tamanho da fonte */
  letter-spacing: 0.05em; /* Adiciona espaçamento entre as letras */
  line-height: 1.8; /* Define o espaçamento entre linhas */
}

  
/* Seção Services */
#services {
  background-color: #222; /* Fundo cinza escuro */
  color: #D3D3D3; /* Cor do texto principal */
  height: auto; /* Permite que a altura seja determinada pelo conteúdo */
  padding: 50px 20px; /* Adiciona espaçamento interno superior/inferior e lateral */
}

.services-container {
  display: flex; /* Itens se ajustam em telas menores */
  justify-content: space-between; /* Espaçamento entre os itens */
  flex-wrap: wrap; /* Itens se ajustam em telas menores */
  gap: 1rem; /* Espaçamento entre os itens */
}

.service-item {
  position: relative; /* Para efeitos posicionados */
  width: calc(33.333% - 1rem); /* Divide igualmente a largura dos itens */
  background-color: #fff; /* Fundo branco para contraste */
  border: 1px solid #ddd; /* Borda cinza clara */
  border-radius: 0.5rem; /* Bordas arredondadas */
  overflow: hidden; /* Garante que o conteúdo fique dentro do contêiner */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para profundidade */
  text-align: center; /* Centraliza o texto */
  transition: transform 0.3s ease; /* Animação ao passar o mouse */
  padding: 1rem; /* Espaçamento interno */
}

.service-item:hover {
  transform: translateY(-5px); /* Efeito de elevação ao passar o mouse */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Aumenta a sombra */
}

.service-title {
  font-size: 1.2rem; /* Tamanho do texto do título */
  font-weight: bold; /* Negrito para destaque */
  margin-bottom: 0.5rem; /* Espaço entre o título e a imagem */
  color: #222; /* Cor do título */
  text-transform: uppercase; /* Letras maiúsculas para destaque */
}

.service-img {
  width: 100%; /* Faz a imagem ocupar toda a largura do contêiner */
  height: auto; /* Mantém a proporção da imagem */
  display: block; /* Remove o espaço abaixo da imagem */
  border-radius: 0.5rem; /* Mesma borda arredondada do contêiner */
}

.service-link {
  display: block; /* Remove o sublinhado */
  text-decoration: none; /* Remove o sublinhado */
  color: inherit; /* Herda a cor para consistência */
}

  
  
/* Seção Contact */
#contact {
  background-color: #222; /* Define a cor de fundo como cinza escuro */
  color: #D3D3D3; /* Define a cor do texto como cinza claro */
  height: auto; /* Ajusta automaticamente a altura com base no conteúdo */
  padding: 50px 20px; /* Adiciona espaçamento interno (50px em cima/baixo e 20px nos lados) */
}

.section--title {
  font-size: 2rem; /* Define o tamanho da fonte do título */
  margin-bottom: 1rem; /* Adiciona um espaço inferior de 1rem */
  text-align: center; /* Centraliza o texto */
}

/* style bottton social media */
.social-buttons {
  display: flex; /* Usa um layout flexível para organizar os botões */
  flex-direction: column; /* row horizontal or column vertical /* Organiza os itens em linha (horizontalmente) */
  gap: 15px; /* Espaçamento entre os botões */
  align-items: center; /* Alinha os itens ao centro verticalmente */
  justify-content: center; /* Centraliza os itens horizontalmente */
  /*margin-top: 1rem; usar quando quiser por na vertical */ /* Comentado: pode ser ativado se necessário */
}

.social-btn {
  background-color: #333; /* Define a cor de fundo como cinza escuro */
  color: #fff; /* Define a cor do ícone ou texto como branco */
  font-size: 1.5rem; /* Define o tamanho da fonte ou ícone */
  width: 60px; /* Define a largura do botão */
  height: 60px; /* Define a altura do botão */
  display: flex; /* Usa um layout flexível para centralizar o conteúdo */
  align-items: center; /* Centraliza verticalmente o conteúdo do botão */
  justify-content: center; /* Centraliza horizontalmente o conteúdo do botão */
  border-radius: 50%; /* Torna o botão circular */
  margin: 0 0.5rem; /* Adiciona espaçamento horizontal entre os botões */
  text-decoration: none; /* Remove o sublinhado dos links */
  transition: background-color 0.3s ease; /* Adiciona um efeito suave ao alterar a cor de fundo */
}

.social-btn:hover.whatsapp {
  background-color: #00ff80; /* Muda a cor de fundo para verde claro quando o botão do WhatsApp é clicado (hover) */
}
.social-btn:hover.instagram {
  background-color: #ffb266; /* Muda a cor de fundo para laranja claro quando o botão do Instagram é clicado (hover) */
}
.social-btn:hover.gmail {
  background-color: #999; /* Muda a cor de fundo para cinza claro quando o botão do Gmail é clicado (hover) */
}
.social-btn:hover.telegram {
  background-color: #3399ff; /* Muda a cor de fundo para azul claro quando o botão do Telegram é clicado (hover) */
}

/* colors to each social media separately */
.whatsapp { background-color: #111; }/* Define a cor de fundo como cinza escuro para o botão do WhatsApp */
.instagram { background-color: #111; }/* Define a cor de fundo como cinza escuro para o botão do Instagram */
.telegram { background-color: #111; }/* Define a cor de fundo como cinza escuro para o botão do Telegram */
.gmail { background-color: #111; }/* Define a cor de fundo como cinza escuro para o botão do Gmail */
.social-btn { font-size: 1.5rem; } /* Define o tamanho da fonte dos botões sociais */


/* section form contact */
#form {
  background-color: #222; /* Define uma cor de fundo para a seção */
  color: #D3D3D3; /* Define a cor do texto */
  height: auto; /* Ajusta a altura conforme o conteúdo */
  padding: 50px 20px; /* Adiciona espaçamento interno consistente */
}

/* Container da seção */
#form .container {
  text-align: center; /* Centraliza o texto dentro do container */
  width: 100%; /* O container ocupa 100% da largura disponível */
  max-width: 600px; /* Limita a largura máxima a 600px */
}

/* Título da seção */
#form .section--title {
  text-align: center; /* Centraliza o título */
  margin-bottom: 0.5rem; /* Adiciona espaçamento abaixo do título */
  color: #D3D3D3; /* Define a cor do título */
}


/* Estilização do formulário */
#form #contact-form {
  background: #ffffff; /* Define um fundo branco para o formulário */
  padding: 20px 30px; /* Adiciona espaçamento interno no formulário */
  border-radius: 8px; /* Arredonda os cantos do formulário */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Adiciona uma leve sombra ao formulário */
  width: 100%; /* Faz o formulário ocupar 100% da largura do container */
  max-width: 500px; /* Limita a largura máxima a 500px */
  margin: 0 auto; /* Centraliza horizontalmente o formulário */
}

/* Grupos do formulário */
#form .form-group {
  margin-bottom: 20px; /* Adiciona espaçamento entre os grupos do formulário */
  text-align: left; /* Alinha o conteúdo do grupo à esquerda */
}

/* Labels */
#form .form-group label {
  display: block; /* Faz o rótulo ocupar a largura total do grupo */
  font-weight: bold; /* Deixa o texto do rótulo em negrito */
  margin-bottom: 5px; /* Adiciona espaçamento abaixo do rótulo */
  color: #555; /* Define uma cor intermediária para o texto */
}

/* Inputs e Textareas */
#form .form-group input,
#form .form-group textarea {
  width: 100%; /* Faz os campos ocuparem toda a largura disponível */
  padding: 10px; /* Adiciona espaçamento interno nos campos */
  border: 1px solid #ddd; /* Define uma borda fina e clara */
  border-radius: 5px; /* Arredonda os cantos dos campos */
  font-size: 1em; /* Define o tamanho da fonte */
  box-sizing: border-box; /* Garante que o padding não afete a largura total */
}

/* Efeito de foco nos inputs */
#form .form-group input:focus,
#form .form-group textarea:focus {
  border-color: #555; /* Altera a cor da borda ao focar no campo */
  outline: none; /* Remove o contorno padrão do navegador */
}

/* Botão de envio */
#form button {
  background: #007BFF; /* Define uma cor azul para o fundo do botão */
  color: #fff; /* Define a cor branca para o texto do botão */
  border: none; /* Remove a borda padrão do botão */
  border-radius: 5px; /* Arredonda os cantos do botão */
  padding: 10px 15px; /* Adiciona espaçamento interno ao botão */
  font-size: 1em; /* Define o tamanho da fonte */
  cursor: pointer; /* Mostra o cursor de "mão" ao passar sobre o botão */
  transition: background 0.3s ease; /* Adiciona uma transição suave ao fundo */
}

/* Mudança de estilo ao passar o mouse sobre o botão */
#form button:hover {
  background: #0056b3; /* Escurece a cor do botão ao passar o mouse */
}


/* footer */
footer {
  background-color: #fff; /* Define o fundo do rodapé como branco */
  padding: 1rem 0; /* Adiciona 1rem de padding nas partes superior e inferior do rodapé */
}

footer p {
  text-align: center; /* Centraliza o texto dentro do parágrafo no rodapé */
  color: #333; /* Define a cor do texto como um tom escuro de cinza */
}

/* responsive adjustments */
.hero--title {
    font-size: 1.5rem; /* Define o tamanho da fonte do título hero em 1.5rem em telas menores (responsivo) */
}

/* Navegação fixa no mobile */
@media (max-width: 720px) { /* Aplica os estilos dentro deste bloco para dispositivos com largura de tela de até 720px */
  .hero {
      padding-top: 5rem; /* Adiciona 5rem de padding no topo da seção hero em telas menores */
  }

  .nav {
    display: flex; /* Exibe o menu de navegação como um flex container */
    justify-content: center; /* Centraliza os itens de navegação horizontalmente */
    background-color: white; /* Define o fundo do menu como branco */
    position: fixed; /* Torna o menu fixo no topo da página */
    top: 0; /* Alinha o menu ao topo da tela */
    left: 0; /* Alinha o menu à esquerda da tela */
    width: 100%; /* Faz o menu ocupar toda a largura da tela */
    z-index: 100; /* Coloca o menu acima de outros elementos da página */
    padding: 1rem 0; /* Adiciona 1rem de padding nas partes superior e inferior do menu */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra sutil ao menu */
  }

  .nav--container {
    display: flex; /* Exibe os itens do menu como um flex container */
    flex-direction: row; /* Organiza os itens em uma linha horizontal */
    justify-content: center; /* Centraliza os itens do menu horizontalmente */
    padding: 0; /* Remove o padding interno do container */
    margin: 0; /* Remove as margens externas do container */
    width: 100%; /* Faz o container ocupar toda a largura da tela */
  }

  .nav--link {
    display: block; /* Garante que cada item de navegação ocupe uma linha inteira */
    padding: 0.8rem 1rem; /* Adiciona padding interno aos itens de navegação */
    text-align: center; /* Centraliza o texto dentro de cada item */
    margin: 0; /* Remove margens externas dos itens */
  }

  .form-container {
    padding: 50px 50px; /* Adiciona 50px de padding nas partes superior e inferior e 50px nas laterais */
    text-align: center; /* Centraliza o conteúdo do formulário */
    margin-top: 10px; /* Adiciona um espaçamento superior de 10px */
}

  .section--desc {
    max-width: 500px; /* Define a largura máxima do conteúdo da descrição como 500px */
    margin: 0 auto; /* Centraliza a seção de descrição horizontalmente */
    text-align: center; /* Centraliza o texto da descrição */
    letter-spacing: 0.08em; /* Adiciona espaçamento entre as letras */
    line-height: 1.6; /* Define a altura da linha como 1.6 para melhor legibilidade */
  }

  .service-item {
    flex: 1 1 calc(50% - 1rem); /* Faz os itens de serviço ocuparem 50% da largura, subtraindo 1rem */
    max-width: calc(50% - 1rem); /* Limita a largura máxima de cada item de serviço a 50% da largura, menos 1rem */
}
}


/* Menu em telas pequenas (721px a 728px) */
@media (min-width: 721px) and (max-width: 728px) { /* Aplica os estilos dentro deste bloco para dispositivos com largura de tela entre 721px e 728px */
  
  /* Configura o menu como uma coluna para exibir os itens embaixo */
  .nav--container {
      display: none;  /* Esconde o menu de navegação inicialmente */
      flex-direction: column; /* Organiza os itens do menu em uma coluna (vertical) */
      width: 100%; /* O menu ocupa toda a largura disponível */
      position: absolute; /* Posiciona o menu de forma absoluta em relação ao seu contêiner */
      top: 70px;  /* Garante que o menu não sobreponha o logo, ajustando a distância do topo */
      left: 0; /* Alinha o menu à esquerda */
      background-color: white; /* Define o fundo do menu como branco */
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra sutil ao menu */
      padding: 1rem 0; /* Adiciona 1rem de espaçamento nas partes superior e inferior do menu */
      max-height: 80vh; /* Limita a altura do menu a 80% da altura da tela */
      overflow-y: auto; /* Permite que o menu role verticalmente se a altura for excedida */
  }

  /* Exibe o hambúrguer */
  .hamburger {
      display: flex; /* Torna o botão do hambúrguer visível com display flex */
  }

  /* Exibe o menu quando o hambúrguer for clicado */
  .nav--container.active {
      display: flex; /* Exibe o menu quando a classe "active" é adicionada */
  }

  /* Estiliza os itens do menu */
  .nav--container li {
      width: 100%;  /* Faz com que cada item de navegação ocupe 100% da largura do menu */
      text-align: center; /* Centraliza o texto dentro de cada item */
      padding: 1rem;  /* Adiciona 1rem de espaçamento interno aos itens */
      font-size: 1.1rem;  /* Ajusta o tamanho da fonte dos itens do menu */
      box-sizing: border-box; /* Garante que o padding não quebre o layout e seja incluído no cálculo da largura */
  }

  /* Garante que o botão "Faça um orçamento" fique no final do menu */
  .nav--button {
      margin-top: auto;  /* Garante que o botão ficará no final do menu, empurrando-o para baixo */
      width: 90%;  /* Faz o botão ocupar 90% da largura disponível do menu */
      text-align: center; /* Centraliza o texto dentro do botão */
      margin-bottom: 1rem;  /* Dá um pequeno espaçamento abaixo do botão */
  }
}


/* Menu em telas pequenas (729px a 768px) */
@media (min-width: 729px) and (max-width: 768px) { /* Aplica os estilos abaixo para dispositivos com largura de tela entre 729px e 768px */
  
  .nav--container {
      display: none;  /* Esconde o menu de navegação inicialmente */
      flex-direction: column; /* Organiza os itens de navegação em uma coluna (vertical) */
      width: 100%; /* Faz o menu ocupar toda a largura disponível */
      position: absolute; /* Posiciona o menu de forma absoluta, em relação ao contêiner pai */
      top: 70px;  /* Garante que o menu não sobreponha o logo, ajustando a distância do topo */
      left: 0; /* Alinha o menu à esquerda */
      background-color: white; /* Define a cor de fundo do menu como branco */
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra suave ao menu */
      padding: 1rem 0; /* Adiciona 1rem de espaçamento nas partes superior e inferior do menu */
      max-height: 80vh;  /* Limita a altura do menu a 80% da altura da tela */
      overflow-y: auto;  /* Permite rolar o conteúdo do menu, se necessário */
  }

  /* Exibe o menu quando a classe "active" for adicionada */
  .nav--container.active {
      display: flex; /* Exibe o menu quando a classe "active" é aplicada */
  }

  /* Estiliza os itens do menu */
  .nav--container li {
      width: 100%;  /* Faz com que cada item do menu ocupe toda a largura disponível */
      text-align: center; /* Centraliza o texto dentro de cada item de navegação */
      padding: 1rem;  /* Adiciona 1rem de espaçamento entre os itens */
      font-size: 1.1rem;  /* Ajusta o tamanho da fonte dos itens do menu */
      box-sizing: border-box;  /* Garante que o padding seja incluído no cálculo da largura do item */
  }

  /* Garante que o botão "Faça um orçamento" fique no final do menu */
  .nav--button {
      margin-top: auto;  /* Garante que o botão fique posicionado no final do menu */
      width: 90%;  /* Faz o botão ocupar 90% da largura do menu */
      text-align: center; /* Centraliza o texto dentro do botão */
      margin-bottom: 1rem;  /* Dá um pequeno espaçamento abaixo do botão */
  }
}

  /* Ajuste para telas menores */
  @media (max-width: 768px) { /* Aplica as regras abaixo para dispositivos com largura de tela de até 768px */

    .nav--container {
      display: none; /* Inicialmente esconde o menu de navegação */
      flex-direction: column; /* Organiza os itens do menu verticalmente (em coluna) */
      width: 100%; /* O menu ocupa 100% da largura disponível */
      position: absolute; /* O menu é posicionado de forma absoluta em relação ao contêiner pai */
      top: 70px;  /* Garante que o menu não sobreponha o logo, ajustando a distância do topo */
      left: 0; /* Alinha o menu à esquerda */
      background-color: white; /* Define a cor de fundo do menu como branco */
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra suave ao menu */
      padding: 1rem 0; /* Adiciona espaçamento interno (1rem) no topo e na parte inferior do menu */
      max-height: 80vh; /* Limita a altura do menu a 80% da altura da tela */
      overflow-y: auto; /* Permite rolar o menu verticalmente, se necessário */
    }
  
    .hamburger {
      display: flex; /* Exibe o ícone de hambúrguer, normalmente usado para abrir o menu */
    }
  
    /* Exibe o menu quando a classe "active" for adicionada */
    .nav--container.active {
      display: flex; /* Exibe o menu de navegação quando a classe "active" é aplicada */
    }
  
    /* Estiliza o botão de "Orçamento" para telas menores */
    .nav--button {
      position: relative; /* O botão tem um posicionamento relativo para se ajustar ao fluxo normal do layout */
      background-color: #fff; /* Cor de fundo do botão */
      color: #111; /* Cor do texto do botão */
      padding: 10px 15px; /* Espaçamento interno do botão */
      border-radius: 0.3rem; /* Bordas arredondadas no botão */
      text-decoration: none; /* Remove qualquer sublinhado do link */
      transition: background-color 0.3s ease; /* Adiciona uma transição suave para a mudança de cor do fundo */
      width: 90%; /* O botão ocupa 90% da largura do menu */
      margin-top: auto; /* Faz com que o botão fique no final do menu */
      text-align: center; /* Centraliza o texto dentro do botão */
    }
  
    /* Estiliza os itens de serviço para telas pequenas */
    .service-item {
      width: 100%; /* Faz com que cada item de serviço ocupe 100% da largura da tela */
      margin-bottom: 1rem; /* Adiciona uma margem inferior para espaçar os itens de serviço */
    }
  }
  
  @media (max-width: 560px) { /* Aplica as regras abaixo para dispositivos com largura de tela de até 560px */

    .hero--title {
      font-size: 1.25rem; /* Reduz o tamanho da fonte do título para telas menores */
    }
  
    .form-container {
      padding: 50px 50px; /* Define um espaçamento interno de 50px em todos os lados */
      text-align: center; /* Centraliza o texto dentro do container */
      margin-top: 10px; /* Adiciona uma margem superior de 10px, podendo ser ajustada conforme necessário */
    }
  
    .feedback-card {
      padding: 20px; /* Adiciona 20px de espaçamento interno ao redor do conteúdo do cartão */
      margin: 20px auto; /* Centraliza o cartão horizontalmente e adiciona uma margem de 20px em cima e embaixo */
      width: 90%; /* Ajusta a largura do cartão para ocupar 90% da largura da tela */
    }
  
    .section--desc {
      max-width: 500px; /* Limita a largura máxima da descrição da seção a 500px */
      margin: 0 auto; /* Centraliza o conteúdo horizontalmente */
      text-align: center; /* Centraliza o texto dentro da seção */
      letter-spacing: 0.08em; /* Adiciona um pequeno espaçamento entre as letras */
      line-height: 1.6; /* Define a altura da linha do texto para melhorar a legibilidade */
    }
  }
  

  @media screen and (orientation: landscape) and (min-width: 480px) and (max-width: 1024px) { 
    /* Aplica as regras abaixo para dispositivos em modo paisagem (landscape) com largura entre 480px e 1024px */

  .form-container {
    padding: 50px 50px; /* Define um espaçamento interno de 50px em todos os lados */
    text-align: center; /* Centraliza o texto dentro do container */
    margin-top: 10px; /* Adiciona uma margem superior de 10px, podendo ser ajustada conforme necessário */
    width: 50%; /* Define a largura da container como 50% da largura da tela */
    max-width: 800px; /* Define a largura máxima da container como 800px */
    margin: 0 auto; /* Centraliza o container horizontalmente */
  }

  .feedback-card {
    padding: 20px; /* Adiciona 20px de espaçamento interno ao redor do conteúdo do cartão */
    margin: 20px auto; /* Centraliza o cartão horizontalmente e adiciona uma margem de 20px em cima e embaixo */
    width: 90%; /* Ajusta a largura do cartão para ocupar 90% da largura da tela */
  }

  .feedback-body {
    flex-direction: column; /* Alinha os itens verticalmente dentro do container */
  }

  .feedback-body__name, 
  .feedback-body__email, 
  .feedback-body__assunto, 
  .feedback-body__message {
    width: 100%; /* Faz com que todos os campos de input ocupem 100% da largura disponível */
    margin-bottom: 10px; /* Adiciona uma margem inferior de 10px entre os campos */
  }

  .feedback-body__message {
    resize: vertical; /* Permite que a área de texto seja redimensionada apenas verticalmente */
  }

  button.feedback-body__submit {
    align-self: center; /* Centraliza o botão dentro do seu container */
    padding: 10px 15px; /* Adiciona 10px de espaçamento vertical e 15px de espaçamento horizontal ao redor do texto do botão */
  }

  .section--desc {
    max-width: 500px; /* Limita a largura máxima da descrição da seção a 500px */
    margin: 0 auto; /* Centraliza o conteúdo horizontalmente */
    text-align: center; /* Centraliza o texto dentro da seção */
    letter-spacing: 0.08em; /* Adiciona um pequeno espaçamento entre as letras */
    line-height: 1.6; /* Define a altura da linha do texto para melhorar a legibilidade */
  }

  .service-item {
    flex: 100%; /* Faz com que os itens do serviço ocupem 100% da largura disponível no contêiner */
    max-width: 100%; /* Define que a largura máxima dos itens será 100% */
  }
}


  /* Adiciona regras para telas menores que 720px */
/*@media (max-width: 720px) {
  .form-container {
    padding: 50px 20px;
    text-align: center;
    margin-top: 10px; /* Ajuste este valor conforme necessário */
/*}
  .feedback-card {
      padding: 20px; /* Ajusta o padding para telas menores */
      /*margin: 20px auto; /* Ajusta a margem para centralizar o cartão */
      /*width: 90%; /* Ajusta a largura do cartão para ocupar 90% da tela */
  /*}
  
  .feedback-body {
      flex-direction: column; /* Alinha os itens verticalmente */
  /*}
  
  .feedback-body__name, 
  .feedback-body__email, 
  .feedback-body__assunto, 
  .feedback-body__message {
      width: 100%; /* Faz com que os campos ocupem 100% da largura do formulário */
      /*margin-bottom: 10px; /* Ajusta a margem inferior */
  /*}
  
  .feedback-body__message {
      resize: vertical; /* Permite que a área de texto seja redimensionada verticalmente */
  /*}
  
  button.feedback-body__submit {
      align-self: center; /* Centraliza o botão */
      /*padding: 10px 15px; /* Ajusta o padding do botão */
  /*}
}

/* Adiciona regras para telas menores que 560px */
/*@media (max-width: 560px) {
  .feedback-card {
      width: 100%; /* Faz com que o cartão ocupe 100% da largura da tela */
      /*margin: 10px auto; /* Ajusta a margem para telas menores */
  /*}
  
  .feedback-body__name, 
  .feedback-body__email, 
  .feedback-body__assunto, 
  .feedback-body__message {
      font-size: 0.9em; /* Ajusta o tamanho da fonte para telas menores */
  /*}
  
  button.feedback-body__submit {
      padding: 8px 12px; /* Ajusta o padding do botão para telas menores */
  /*}
}

/* Telas maiores (desktop) */
/* Estilos para telas grandes (desktop e maiores de 1024px) */
@media (min-width: 1025px) { 
  .services-container {
      display: flex; /* Define o container como um flexbox */
      justify-content: space-between; /* Distribui os itens de forma espaçada entre as extremidades */
      flex-wrap: wrap; /* Permite que os itens se quebrem para a próxima linha, caso necessário */
  }

  .service-item {
      flex: 1 1 calc(30% - 1rem); /* Faz com que cada item ocupe 30% da largura do container, com 1rem de margem entre eles */
      max-width: calc(30% - 1rem); /* Define a largura máxima dos itens como 30% menos 1rem para espaçamento */
  }
}

/* Estilos para telas intermediárias (tablets e pequenos desktops, entre 769px e 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .services-container {
      display: flex; /* Define o container como um flexbox */
      justify-content: space-between; /* Distribui os itens de forma espaçada entre as extremidades */
      flex-wrap: wrap; /* Permite que os itens se quebrem para a próxima linha, caso necessário */
  }

  .service-item {
      flex: 1 1 calc(45% - 1rem); /* Faz com que cada item ocupe 45% da largura do container, com 1rem de margem entre eles */
      max-width: calc(45% - 1rem); /* Define a largura máxima dos itens como 45% menos 1rem para espaçamento */
  }
}

/* Estilos para telas menores que 768px (tablets e smartphones em retrato) */
@media (max-width: 768px) {
  .services-container {
      display: flex; /* Define o container como um flexbox */
      justify-content: center; /* Centraliza os itens dentro do container */
      flex-wrap: wrap; /* Permite que os itens se quebrem para a próxima linha, caso necessário */
  }

  .service-item {
      flex: 1 1 calc(50% - 1rem); /* Faz com que cada item ocupe 50% da largura do container, com 1rem de margem entre eles */
      max-width: calc(50% - 1rem); /* Define a largura máxima dos itens como 50% menos 1rem para espaçamento */
  }
}

/* Estilos para telas menores que 560px (smartphones menores) */
@media (max-width: 560px) {
  .services-container {
      display: flex; /* Define o container como um flexbox */
      justify-content: center; /* Centraliza os itens dentro do container */
      flex-wrap: wrap; /* Permite que os itens se quebrem para a próxima linha, caso necessário */
  }

  .service-item {
      flex: 1 1 100%; /* Faz com que cada item ocupe 100% da largura do container, ou seja, um item por linha */
      max-width: 100%; /* Define a largura máxima dos itens como 100% */
  }
}

/* Estilos para dispositivos em orientação paisagem entre 480px e 1024px */
@media screen and (orientation: landscape) and (min-width: 480px) and (max-width: 1024px) {
  .service-item {
      flex: 1 1 calc(30% - 1rem); /* Faz com que cada item ocupe 30% da largura do container, com 1rem de margem entre eles */
      max-width: calc(30% - 1rem); /* Define a largura máxima dos itens como 30% menos 1rem para espaçamento */
  }
}