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

html {
  scroll-behavior: smooth; /* Habilita o comportamento de rolagem suave ao navegar para âncoras na página */
}

/* common styles */
* {
padding: 0; /* Remove o preenchimento padrão de todos os elementos */
margin: 0; /* Remove a margem padrão de todos os elementos */
box-sizing: border-box; /* Inclui as bordas e o preenchimento no tamanho total do elemento */
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; /* Define a família de fontes padrão */
}

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

/* navigation */
.nav {
padding: 1rem 0; /* Adiciona espaço interno superior e inferior de 1rem */
background-color: #fff; /* Define o fundo branco para a navegação */
position: sticky; /* Fixa o elemento no topo da página durante a rolagem */
top: 0; /* Define a posição de fixação no topo da página */
z-index: 100; /* Define a prioridade na pilha de camadas para evitar sobreposição de outros elementos */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra para destacar a navegação */
display: flex; /* Define a navegação como um contêiner flexível */
align-items: center; /* Alinha os itens verticalmente ao centro */
justify-content: space-between; /* Espaça os itens igualmente entre os extremos */
}

/* Navigation (Desktop) */
.nav--container {
  display: flex; /* Define o contêiner como flexível */
  justify-content: center; /* Centraliza os itens horizontalmente */
  align-items: center; /* Alinha os itens verticalmente ao centro */
  list-style: none; /* Remove os marcadores de lista dos itens */
  padding: 0; /* Remove o preenchimento padrão */
  margin: 0; /* Remove as margens padrão */
}

  
.nav--link {
  text-decoration: none; /* Remove a linha sublinhada dos links */
  color: #111; /* Define a cor do texto como um tom escuro */
  padding: 0.5rem 1rem; /* Adiciona espaço interno nos eixos vertical (0.5rem) e horizontal (1rem) */
  margin: 0 0.5rem; /* Espaça os links horizontalmente com 0.5rem */
  border-radius: 0.3rem; /* Arredonda levemente os cantos dos links */
  transition: background-color 0.3s ease, color 0.3s ease; /* Suaviza as mudanças de cor e fundo ao interagir */
}

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

/* hero */
.hero {
  /* background: url('images/background.png'); */ /* Exemplo de fundo com imagem (comentado) */
  background-color: #D3D3D3; /* Cor de fundo para a seção hero */
  background-size: cover; /* Faz a imagem de fundo cobrir toda a área */
  background-position: center center; /* Centraliza a imagem de fundo */
  background-repeat: no-repeat; /* Evita repetição da imagem de fundo */
  text-align: center; /* Centraliza o texto horizontalmente */
  padding: 50px 0; /* Espaçamento vertical: 50px acima e abaixo */
  min-height: 90vh; /* Define a altura mínima da seção como 90% da altura da janela de visualização */
  width: 100%; /* Faz a largura da seção ocupar 100% da tela */
  display: flex; /* Ativa o layout flexível */
  flex-direction: column; /* Organiza os elementos em uma coluna */
  align-items: center; /* Centraliza os itens horizontalmente no centro */
  justify-content: center; /* Centraliza os itens verticalmente no centro */
  padding-top: 4rem; /* Adiciona espaçamento extra no topo */
}

.hero .container {
  display: flex; /* Ativa o layout flexível para o contêiner */
  flex-direction: column; /* Organiza os elementos em uma coluna */
  align-items: center; /* Centraliza os itens horizontalmente */
  justify-content: center; /* Centraliza os itens verticalmente */
  height: 100%; /* Faz o contêiner ocupar toda a 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 elementos internos */
  border-radius: 50%; /* Torna a imagem circular */
  overflow: hidden; /* Oculta qualquer conteúdo que ultrapasse os limites do contêiner */
  margin-bottom: 1.5rem; /* Adiciona espaçamento abaixo da imagem */
}

.hero .img--cover img {
  width: 100%; /* Faz a imagem preencher toda a largura do contêiner */
  height: 100%; /* Faz a imagem preencher toda a altura do contêiner */
  object-fit: cover; /* Garante que a imagem seja recortada proporcionalmente */
}

.hero--title {
  font-size: 2rem; /* Define o tamanho da fonte do título */
  margin-bottom: 1rem; /* Adiciona espaçamento abaixo do título */
}

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

.hero .btn {
  background-color: #fff; /* Cor de fundo do botão */
  color: #111; /* Cor do texto do botão */
  padding: 0.8rem 2rem; /* Espaçamento interno: 0.8rem vertical, 2rem horizontal */
  border-radius: 0.5rem; /* Arredonda os cantos do botão */
  font-weight: 700; /* Define o peso da fonte como negrito */
  text-decoration: none; /* Remove a linha sublinhada do link */
  display: inline-block; /* Exibe o botão como um bloco embutido */
  cursor: pointer; /* Muda o cursor para indicar que é clicável */
  box-shadow: none; /* Remove sombra padrão */
}

.hero .btn:hover {
  /*box-shadow: 0 4px 8px #222;*/ /* Exemplo de sombra ao passar o mouse (comentado) */
  background-color: #A9A9A9; /* Muda a cor de fundo ao passar o mouse */
  color: #333; /* Muda a cor do texto ao passar o mouse */
}

/* sections */
.section {
  padding-top: 1.5rem; /* Adiciona espaçamento superior de 1.5rem */
  padding-bottom: 2rem; /* Adiciona espaçamento inferior de 2rem */
  scroll-margin-top: 100px; /* Ajusta o ponto de âncora para 100px abaixo do topo */
  /* padding: 8rem 0; /* Exemplo de espaçamento vertical maior (comentado) */
}


/* Seção About */
#about {
  background-color: #D3D3D3; /* Define a cor de fundo como cinza claro */
  color: #333; /* Define a cor do texto como um tom escuro de cinza */
  text-align: center; /* Centraliza horizontalmente o conteúdo do texto */
  height: auto; /* Ajusta a altura automaticamente com base no conteúdo */
  padding: 50px 20px; /* Adiciona 50px de espaçamento vertical (acima e abaixo) e 20px de espaçamento horizontal (esquerda e direita) */
}

.section--desc {
  max-width: 500px; /* Limita a largura máxima do elemento a 500px */
  margin: 0 auto; /* Centraliza o elemento horizontalmente na página */
  text-align: center; /* Centraliza o texto dentro do elemento */
  font-size: 1.5em; /* Define o tamanho da fonte como 1.5 vezes o tamanho da fonte base */
  letter-spacing: 0.08em; /* Adiciona espaçamento extra entre as letras */
  line-height: 1.6; /* Define o espaçamento entre linhas como 1.6 vezes o tamanho da fonte */
}

  
/* Seção Services */
#services {
  background-color: #D3D3D3; /* Define a cor de fundo cinza médio para a seção */
  color: #333; /* Define a cor do texto */
  padding: 50px 20px; /* Adiciona espaçamento interno à seção */
  display: flex; /* Define o layout da seção como flexbox */
  flex-direction: column; /* Coloca os itens da seção em coluna */
  align-items: center; /* Centraliza os itens horizontalmente */
}

.section--title {
  font-size: 2rem; /* Define o tamanho da fonte do título */
  font-weight: bold; /* Define o título como negrito */
  margin-bottom: 30px; /* Adiciona espaçamento inferior ao título */
}

.service-container {
  display: flex; /* Define o layout dos containers como flexbox */
  justify-content: space-between; /* Distribui os itens igualmente com espaços entre eles */
  gap: 20px; /* Adiciona espaçamento entre os containers */
  max-width: 1000px; /* Define uma largura máxima para os containers */
  width: 100%; /* Define a largura total dos containers */
  flex-wrap: wrap; /* Permite que os itens quebrem para a linha seguinte, se necessário */
}

.service-item {
  position: relative; /* Define a posição relativa para o container */
  width: 30%; /* Define a largura dos containers para que fiquem lado a lado */
  background-color: #fff; /* Define o fundo branco para cada container */
  border: 1px solid #ddd; /* Adiciona uma borda cinza clara */
  border-radius: 0.5rem; /* Define cantos arredondados */
  overflow: hidden; /* Esconde conteúdos que ultrapassem o tamanho do container */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adiciona sombra ao redor do container */
  text-align: center; /* Centraliza o texto dentro do container */
  margin-bottom: 20px; /* Adiciona espaçamento inferior entre os containers */
}

.service-img {
  width: 100%; /* Define a largura completa da imagem */
  height: 200px; /* Define a altura fixa das imagens */
  object-fit: cover; /* Garante que a imagem preencha o espaço sem distorção */
}

.service-text {
  padding: 15px; /* Adiciona espaçamento interno ao texto */
}

.service-text h3 {
  font-size: 1.6rem; /* Define o tamanho da fonte do subtítulo */
  color: #6F4F28; /* Define a cor marrom para o subtítulo */
  margin-bottom: 10px; /* Adiciona espaçamento inferior ao subtítulo */
}

.service-text p {
  font-size: 1rem; /* Define o tamanho da fonte do parágrafo */
  margin-bottom: 15px; /* Adiciona espaçamento inferior ao parágrafo */
}

.service-button {
  background-color: #D3D3D3; /* Define a cor vermelha para o botão */
  color: #111; /* Define a cor branca para o texto do botão */
  padding: 10px 20px; /* Adiciona espaçamento interno ao botão */
  text-decoration: none; /* Remove o sublinhado do texto do botão */
  border-radius: 5px; /* Define bordas arredondadas no botão */
  display: inline-block; /* Garante que o botão se comporte como um bloco em linha */
  transition: background-color 0.3s ease; /* Adiciona uma transição suave para mudanças de cor */
}

.service-button:hover {
  background-color: #A9A9A9; /* Define a cor vermelha escura ao passar o mouse */
}


/* Estilo da seção do formulário */
#contact-form {
  background-color: #D3D3D3; /* Define a cor de fundo como um bege claro */
  color: #111; /* Define a cor do texto como um tom escuro (quase preto) */
  padding: 50px 20px; /* Adiciona 50px de espaçamento na parte superior e inferior e 20px nas laterais */
  text-align: center; /* Centraliza todo o texto e conteúdo dentro do formulário */
}

#contact-form h2 {
  font-size: 1.8rem; /* Define o tamanho da fonte do título como 1.8 vezes o tamanho da fonte base */
  margin-bottom: 20px; /* Adiciona um espaço de 20px abaixo do título para separá-lo do restante do conteúdo */
  font-weight: bold; /* Deixa o texto do título em negrito para destacá-lo */
}


/* Cartão do formulário */
.feedback-card {
  background-color: #fff; /* Fundo branco para destacar */
  border: 1px solid #ccc; /* Bordas cinza claras */
  border-radius: 8px; /* Bordas arredondadas */
  padding: 30px; /* Espaço interno */
  margin: 0 auto; /* Centraliza horizontalmente */
  max-width: 600px; /* Largura máxima */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Efeito de sombra sutil */
}

.feedback-body {
  display: flex; /* Define o contêiner como um flexbox, permitindo o controle da disposição dos elementos filhos */
  flex-direction: column; /* Organiza os elementos filhos em uma coluna (verticalmente) */
  gap: 15px; /* Adiciona um espaço de 15px entre os elementos filhos dentro do contêiner */
}


.feedback-body label {
  display: none; /* Ocultar os labels para simplificar */
}

.feedback-body input, /* Aplica o estilo a todos os inputs dentro de .feedback-body */
.feedback-body textarea { /* Aplica o mesmo estilo aos elementos textarea dentro de .feedback-body */
  width: 100%; /* Faz com que o campo ocupe toda a largura disponível no contêiner */
  padding: 10px; /* Adiciona 10px de espaçamento interno em todos os lados */
  border: none; /* Remove a borda padrão */
  border-bottom: 2px solid rgba(0, 0, 0, 0.3); /* Adiciona uma borda inferior com cor semitransparente */
  background: transparent; /* Torna o fundo transparente */
  font-size: 1rem; /* Define o tamanho da fonte para 1rem (tamanho relativo à raiz do documento) */
  color: #111; /* Define a cor do texto como preto escuro */
  transition: border-color 0.3s ease; /* Adiciona uma transição suave para a cor da borda inferior */
}

.feedback-body input:focus, /* Estilo aplicado aos inputs quando estão focados */
.feedback-body textarea:focus { /* Estilo aplicado aos textareas quando estão focados */
  outline: none; /* Remove o contorno padrão de foco */
  border-bottom-color: #6F4F28; /* Altera a cor da borda inferior para um marrom escuro personalizado */
}

.feedback-body textarea { /* Estilo específico para os elementos textarea */
  resize: none; /* Impede que o usuário redimensione a caixa de texto */
  min-height: 100px; /* Define uma altura mínima de 100px */
}

.feedback-body__submit { /* Estilo do botão de envio */
  background-color: #D3D3D3; /* Define o fundo como marrom escuro */
  color: #111; /* Define a cor do texto como branca */
  padding: 12px; /* Adiciona 12px de espaçamento interno em todos os lados */
  font-size: 1rem; /* Define o tamanho da fonte para 1rem */
  font-weight: bold; /* Deixa o texto em negrito */
  border: none; /* Remove a borda padrão */
  border-radius: 4px; /* Adiciona cantos arredondados com um raio de 4px */
  cursor: pointer; /* Altera o cursor para o formato de ponteiro ao passar sobre o botão */
  transition: background-color 0.3s ease, transform 0.2s ease; /* Adiciona transições suaves para a cor de fundo e transformação */
}

.feedback-body__submit:hover { /* Estilo aplicado ao botão de envio quando o cursor está sobre ele */
  background-color: #A9A9A9; /* Altera o fundo para vermelho escuro */
  transform: translateY(-2px); /* Eleva o botão ligeiramente para cima, criando um efeito de clique */
}



/* Redes Sociais */
#social-media { /* Estilo para a seção de redes sociais */
  background-color: #D3D3D3; /* Define a cor de fundo como cinza claro */
  color: #111; /* Define a cor do texto como um tom escuro (quase preto) */
  padding: 50px 20px; /* Adiciona 50px de espaçamento superior e inferior e 20px nas laterais */
  text-align: center; /* Centraliza o texto dentro da seção */
}

#social-media h2 { /* Estilo para o título h2 dentro da seção de redes sociais */
  font-size: 2rem; /* Define o tamanho da fonte como 2rem */
  margin-bottom: 1rem; /* Adiciona um espaçamento inferior de 1rem */
}

/* Estilo do container para os botões sociais */


.social-buttons { /* Estilo para o contêiner dos botões sociais */
  display: flex; /* Utiliza o modelo de layout flexbox */
  justify-content: center; /* Centraliza os botões socialmente no contêiner */
  gap: 1rem; /* Adiciona um espaço de 1rem entre os botões */
}

.social-btn { /* Estilo para cada botão social */
  width: 50px; /* Define a largura do botão como 50px */
  height: 50px; /* Define a altura do botão como 50px */
  display: flex; /* Utiliza o modelo de layout flexbox para centralizar o conteúdo dentro do botão */
  align-items: center; /* Alinha o conteúdo verticalmente no centro */
  justify-content: center; /* Alinha o conteúdo horizontalmente no centro */
  border-radius: 50%; /* Torna o botão redondo com bordas arredondadas */
  background-color: #333; /* Define o fundo do botão como um tom de cinza escuro */
  color: #fff; /* Define a cor do texto como branco */
  font-size: 1.5rem; /* Define o tamanho da fonte dentro do botão como 1.5rem */
  text-decoration: none; /* Remove qualquer sublinhado do link do botão */
  transition: background-color 0.3s ease, transform 0.3s ease; /* Adiciona uma transição suave para a cor de fundo e transformação */
}

.social-btn:hover { /* Estilo para o botão social ao passar o mouse sobre ele */
  background-color: #777; /* Altera o fundo para um tom mais claro de cinza */
  transform: scale(1.1); /* Aumenta o tamanho do botão em 10% quando o cursor estiver sobre ele */
}


/* Cores específicas para cada botão social */
.social-btn.instagram { background-color: #FFA500; }
.social-btn.whatsapp { background-color: #32CD32; }
.social-btn.facebook { background-color: #3b5998; }
.social-btn.linkedin { background-color: #0077b5; }




/* footer */
footer { /* Seleciona o elemento <footer> */
  background-color: #fff; /* Define o fundo do footer como branco */
  padding: 1rem 0; /* Adiciona um espaçamento de 1rem (superior e inferior) e 0 (direita e esquerda) */
}

footer p { /* Seleciona os elementos <p> dentro do footer */
  text-align: center; /* Alinha o texto do parágrafo ao centro */
  color: #333; /* Define a cor do texto como um tom escuro de cinza */
}

/* responsive adjustments */
.hero--title { /* Seleciona o título da classe .hero--title */
    font-size: 1.5rem; /* Define o tamanho da fonte para 1.5rem, ajustando o texto em telas menores */
}


/* Navegação fixa no mobile */
@media (max-width: 720px) { /* Aplica as regras a dispositivos com largura máxima de 720px */
  .hero { /* Seleciona a seção hero */
      padding-top: 5rem; /* Adiciona 5rem de padding no topo da seção */
  }

  .nav { /* Seleciona a barra de navegação */
    display: flex; /* Exibe os itens da navegação em um layout flexível */
    justify-content: center; /* Centraliza os itens horizontalmente dentro do nav */
    background-color: white; /* Define a cor de fundo da barra de navegação como branca */
    position: fixed; /* Torna a barra de navegação fixa no topo da tela */
    top: 0; /* Define a barra de navegação no topo da tela */
    left: 0; /* Alinha a barra à esquerda da tela */
    width: 100%; /* Faz com que a barra ocupe toda a largura da tela */
    z-index: 100; /* Garante que a barra de navegação fique acima de outros elementos */
    padding: 1rem 0; /* Adiciona padding de 1rem nas partes superior e inferior da barra */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra sutil ao redor da barra */
  }

  .nav--container { /* Seleciona o contêiner da barra de navegação */
    display: flex; /* Exibe os itens dentro do contêiner como um layout flexível */
    flex-direction: row; /* Alinha os itens na horizontal */
    justify-content: center; /* Centraliza os itens dentro do contêiner */
    padding: 0; /* Remove o padding */
    margin: 0; /* Remove a margem */
    width: 100%; /* Faz com que o contêiner ocupe toda a largura disponível */
  }

  .nav--link { /* Seleciona os links de navegação */
    display: block; /* Garante que cada link ocupe uma linha inteira */
    padding: 0.8rem 1rem; /* Adiciona padding ao redor do link para aumentar o tamanho da área clicável */
    text-align: center; /* Centraliza o texto dentro do link */
    margin: 0; /* Remove a margem externa */
  }

  .form-container { /* Seleciona o contêiner do formulário */
    padding: 50px 50px; /* Adiciona 50px de padding nas direções superior, inferior, esquerda e direita */
    text-align: center; /* Centraliza o conteúdo do formulário */
    margin-top: 10px; /* Adiciona uma margem superior de 10px */
  }

  .feedback-card { /* Seleciona o cartão de feedback */
      padding: 20px; /* Adiciona padding de 20px em todos os lados do cartão */
      margin: 20px auto; /* Adiciona uma margem de 20px superior e inferior e centraliza o cartão horizontalmente */
      width: 90%; /* Faz com que o cartão ocupe 90% da largura da tela */
  }

  .section--desc { /* Seleciona a descrição de uma seção */
    max-width: 500px; /* Define a largura máxima da descrição para 500px */
    margin: 0 auto; /* Centraliza a descrição horizontalmente */
    text-align: center; /* Centraliza o texto da descrição */
    letter-spacing: 0.08em; /* Define o espaçamento entre as letras para melhorar a legibilidade */
    line-height: 1.6; /* Define a altura da linha para tornar o texto mais legível */
  }
}


  /* Ajuste para telas menores */
  @media (max-width: 720px) { /* Aplica as regras a dispositivos com largura máxima de 720px */
    .service-item { /* Seleciona os itens de serviço */
      width: 100%; /* Faz com que cada item ocupe a largura total da tela em dispositivos menores */
      margin-bottom: 1rem; /* Adiciona uma margem inferior para espaçar os itens */
    }
}

@media (max-width: 560px) { /* Aplica as regras a dispositivos com largura máxima de 560px */
    .hero--title { /* Seleciona o título da seção hero */
      font-size: 1.25rem; /* Reduz o tamanho da fonte para 1.25rem em telas menores */
    }

    .form-container { /* Seleciona o contêiner do formulário */
      padding: 50px 50px; /* Adiciona padding de 50px em todos os lados (superior, inferior, esquerdo, direito) */
      text-align: center; /* Centraliza o conteúdo do formulário */
      margin-top: 10px; /* Adiciona uma margem superior de 10px */
    }

    .feedback-card { /* Seleciona o cartão de feedback */
        padding: 20px; /* Adiciona 20px de padding (espaço interno) em todos os lados do cartão */
        margin: 20px auto; /* Adiciona uma margem de 20px nas partes superior e inferior, e centraliza o cartão horizontalmente */
        width: 90%; /* Define a largura do cartão como 90% da largura da tela */
    }

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

  @media screen and (orientation: landscape) and (min-width: 480px) and (max-width: 1024px) { /* Definindo uma media query para dispositivos em modo paisagem com uma largura de tela entre 480px e 1024px */
    
    .form-container { /* Seleciona o contêiner do formulário */
      padding: 50px 50px; /* Define um preenchimento de 50px em todos os lados (superior, inferior, esquerdo, direito) */
      text-align: center; /* Alinha o conteúdo do formulário ao centro */
      margin-top: 10px; /* Adiciona uma margem superior de 10px */
      width: 50%; /* Define a largura do formulário como 50% da largura da tela */
      max-width: 800px; /* Define a largura máxima do formulário como 800px */
      margin: 0 auto; /* Centraliza o formulário horizontalmente */
  }

    .feedback-card { /* Seleciona o cartão de feedback */
        padding: 20px; /* Adiciona 20px de padding (espaço interno) em todos os lados do cartão */
        margin: 20px auto; /* Adiciona uma margem de 20px nas partes superior e inferior, e centraliza o cartão horizontalmente */
        width: 90%; /* Define a largura do cartão como 90% da largura da tela */
    }
    
    .feedback-body { /* Seleciona o corpo do feedback */
        flex-direction: column; /* Alinha os itens dentro do corpo do feedback verticalmente (coluna) */
    }
    
    .feedback-body__name, 
    .feedback-body__email, 
    .feedback-body__assunto, 
    .feedback-body__message { /* Seleciona os campos do formulário de feedback (nome, email, assunto, mensagem) */
        width: 100%; /* Faz com que todos os campos ocupem 100% da largura disponível */
        margin-bottom: 10px; /* Adiciona uma margem inferior de 10px entre os campos */
    }
    
    .feedback-body__message { /* Seleciona o campo de mensagem */
        resize: vertical; /* Permite que o campo de texto da mensagem seja redimensionado verticalmente */
    }
    
    button.feedback-body__submit { /* Seleciona o botão de envio do formulário */
        align-self: center; /* Centraliza o botão no container */
        padding: 10px 15px; /* Adiciona 10px de padding superior e inferior, e 15px de padding à esquerda e à direita */
    }

    .section--desc { /* Seleciona a descrição de uma seção (como o texto de descrição) */
      max-width: 500px; /* Define a largura máxima do texto de descrição como 500px */
      margin: 0 auto; /* Centraliza a descrição horizontalmente */
      text-align: center; /* Alinha o texto ao centro */
      letter-spacing: 0.08em; /* Define o espaçamento entre as letras */
      line-height: 1.6; /* Define a altura da linha para facilitar a leitura */
    }
}

/* Ajuste responsivo para telas entre 399px e 924px */
@media (min-width: 399px) and (max-width: 924px) {
  .service-container {
    justify-content: center; /* Centraliza os itens */
    gap: 20px; /* Espaçamento mais amplo para melhor visualização */
  }

  .service-item {
    flex: 1 1 calc(100% - 40px); /* Proporção flexível, adaptada ao container */
    max-width: 300px; /* Define um limite para largura máxima */
    min-width: 150px; /* Define um limite para largura mínima */
    margin: 0 auto; /* Centraliza os itens horizontalmente */
  }
}


  /* 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 */
  /*}
}*/