.container {
  display: flex;
  flex-direction: column;
  /* align-items: flex-start; */
  align-items: center;     /* Alinhado ao centro */
  max-width: 900px;
  width: 100%;
  gap: 20px;

  background-color: #2c462e;  /* ✅ Cor de fundo adicionada */
  padding: 50px;              /* Opcional: para afastar o conteúdo da borda */
  border-radius: 10px;        /* Opcional: deixa com cantos arredondados */
  justify-content: center; /* Centraliza o conteúdo dentro do container */

  /* Centralização na página */
  /* min-height: 100vh;  Faz o container ocupar a altura inteira da janela */
  margin: auto;  /* Centraliza horizontalmente */
}

.titulo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.titulo h1 {
  font-size: 3em;
  color: white;
}

.titulo span {
  color: #00ff7f;
}

.formulario {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  width: 100%;
  max-width: 500px;
}

form h2 {
  margin-bottom: 15px;
  color: #333;
}

.input-group {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

textarea {
  min-height: 100px;
  resize: vertical;
}

button {
  background-color: #7aeb96;
  color: #000;
  border: none;
  padding: 12px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
}

button:hover {
  background-color: #5cd48b;
}

.sucesso-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.mensagem {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  max-width: 500px;
  width: 90%;
  text-align: center;
}

/* Ícone padrão */
.icone-check {
  width: 110px;
  height: 110px;
  color: #00ff7f;
  animation: pulse 1s ease-in-out infinite alternate;
}

/* Animação leve tipo "pulso" */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* Responsividade para telas pequenas (smartphones) */
@media (max-width: 480px) {
  .container {
    padding: 10px;
    border-radius: 0; /* opcional: tira borda arredondada em tela pequena */
    min-height: 80vh; /* Faz preencher a tela inteira */
    justify-content: center;
  }

  .titulo h1 {
    font-size: 2em; /* Reduz tamanho do título */
  }

  .formulario {
    padding: 20px;
    max-width: 80%;
    box-shadow: none; /* opcional: simplifica no mobile */
  }

  button {
    width: 80%; /* Faz botão ocupar toda a largura */

  }

  .botoes {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  input[type="text"],
  input[type="email"],
  textarea {
    padding: 15px; /* Mais confortável para o dedo */
    font-size: 1em;
  }
}

/* Inputs e textarea em telas pequenas */
@media (max-width: 600px) {
  input[type="text"],
  input[type="email"],
  textarea {
    width: 100%;
    box-sizing: border-box;  /* ✅ Faz o padding contar dentro da largura */
    padding: 12px;           /* ✅ Mais espaçamento interno */
  }

  .formulario {
    padding: 20px;           /* ✅ Deixa espaço entre os inputs e a borda do formulário */
  }
}

/* Estiliza a área verde escura */
#contato {
  background-color: #133c26; /* verde escuro */
  padding: 30px 20px;
  border-radius: 20px; /* ✅ deixa arredondado */
  max-width: 600px; /* ✅ largura máxima */
  margin: 0 auto;  /* ✅ centraliza na tela */
  box-sizing: border-box;
}