.main-content-contact{
  flex: 1; /* Faz o main-content crescer para ocupar o espaço disponível */
  height: 100vh;
  box-sizing: border-box; /* Garante que o padding não afete o tamanho total */
  /*background-image: url(../img/ese_linha.png);*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;  
  margin: 9.5%; 
  padding: 0;
}

/* Título da seção */
.main-content-contact .section-header {
  grid-column: 1 / -1; /* Faz o título ocupar as duas colunas */
  font-family: "Dela Gothic One", sans-serif; /* Fonte do cabeçalho */
  color: whitesmoke;
  font-size: 2.5rem; /* Ajusta o tamanho da fonte */
  padding: 2% 0; /* Adiciona espaçamento acima e abaixo */
  text-align: center;
}

/* Wrapper do conteúdo */
.contact-wrapper {
  display: grid; /* Define o layout como grid */
  grid-column: 1/-1;
  grid-template-columns: 1fr 1fr; /* Divide em duas colunas iguais */
  align-items: center; /* Centraliza os itens verticalmente */
  align-content: center; /* Centraliza os itens horizontalmente */
  align-self: center; /* Centraliza o conteúdo dentro do grid */
  gap: 5%;
}

/* Coluna direita (informações adicionais, redes sociais e mapa) */
.right-column {
  display: flex; /* Torna o contêiner flexível */
  flex-direction: column; /* Organiza os elementos verticalmente */
  align-items: center; /* Centraliza os itens verticalmente */
  align-content: center; /* Centraliza os itens horizontalmente */
  gap: 20px; /* Espaçamento entre os elementos */
  grid-column: 2; /* Coloca o contêiner na segunda coluna */
}

/* Formulário no lado esquerdo */
#contact-form {
  width: 100%; /* Garante que o formulário ocupe toda a largura da coluna */
  align-items: center; /* Centraliza os itens verticalmente */
  align-content: center; /* Centraliza os itens horizontalmente */
  margin-right: 160%;
}

/* Campos do formulário */
#contact-form .form-group {
  margin-bottom: 10px;
}

#contact-form .form-control {
  width: 100%;
  padding: 15px 20px; /* Espaçamento interno consistente */
  font-size: 0.95rem;
  border: 2px solid #ccc; /* Define uma borda consistente */
  border-radius: 5px;
  box-sizing: border-box; /* Inclui padding e borda no tamanho total */
  transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Transição suave */
  background-color: rgba(255, 255, 255, 0.69);
  color: #333; /* Cor do texto nos inputs */
}

#contact-form .form-control:focus {
  border-color: #45c4ff; /* Apenas altera a cor da borda no foco */
  outline: none; /* Remove o contorno padrão do navegador */
  box-shadow: 0 0 5px rgba(69, 196, 255, 0.5); /* Adiciona uma leve sombra no foco */
}

/* Campo de texto fixo */
#contact-form textarea {
  resize: none; /* Impede o redimensionamento */
  min-height: 250px; /* Define uma altura fixa */
  max-height: 250px; /* Limita a altura */
  padding: 15px 20px; /* Espaçamento interno consistente */
  font-size: 0.95rem;
  border: 2px solid #ccc; /* Define uma borda consistente */
  border-radius: 5px;
  box-sizing: border-box; /* Inclui padding e borda no tamanho total */
  transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Transição suave */
  color: #333; /* Cor do texto */
}

#contact-form textarea:focus {
  border-color: #45c4ff; /* Apenas altera a cor da borda no foco */
  outline: none; /* Remove o contorno padrão do navegador */
  box-shadow: 0 0 5px rgba(69, 196, 255, 0.5); /* Adiciona uma leve sombra no foco */
}

/* Botão de envio */
#contact-form .btn {
  background-color: #45c4ff;
  color: whitesmoke; /* Define a cor do texto como branco */
  padding: 15px 20px; /* Espaçamento interno consistente */
  width: 100%;
  font-size: 1rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#contact-form .btn:hover {
  background-color: #ff98b9;
}

/* Informações adicionais e redes sociais na mesma linha */
.direct-contact-container {
  display: flex; /* Torna o contêiner flexível */
  justify-content: space-between; /* Espaça os elementos horizontalmente */
  align-items: flex-start; /* Alinha os elementos no topo verticalmente */
  gap: 20px; /* Espaçamento entre as informações adicionais e as redes sociais */
  width: 100%; /* Garante que o contêiner ocupe toda a largura */
}

/* Lista de informações adicionais */
.contact-list {
  list-style: none;
  padding: 0; /* Remove o padding padrão */
  margin: 0 0 20px 0; /* Remove a margem padrão */
  width: 70%; /* Ocupa 70% da largura do contêiner */
  text-align: left; /* Alinha o texto à esquerda */
}

.contact-list .list-item {
  margin-bottom: 10px; /* Espaçamento entre os itens */
  font-size: 0.95rem; /* Tamanho do texto padrão */
  color: whitesmoke; /* Define o texto como branco */
  display: flex;
  flex-direction: column; /* Organiza os elementos verticalmente */
  line-height: 1.5; /* Espaçamento entre linhas */
  text-align: left; /* Alinha o texto à esquerda */
  width: 100%; /* Garante que o item ocupe toda a largura da coluna */
}

.contact-title {
  display:flex;
  align-items:center; /* Alinha o ícone e o texto */
  font-weight: bold; /* Destaca o subtítulo */
  font-size: 1.5rem; /* Tamanho do subtítulo */
  margin-bottom: 5px; /* Espaçamento entre o subtítulo e o texto */
  color: whitesmoke; /* Define o subtítulo como branco */
  text-align: left; /* Alinha o subtítulo à esquerda */
  width: 100%; /* Garante que o subtítulo ocupe toda a largura disponível */
}

.contact-title i {
  margin-right: 10px; /* Espaçamento entre o ícone e o texto */
  color: whitesmoke; /* Cor do ícone */
}


.contact-text {
  font-size: 1.3rem; /* Tamanho do texto padrão */
  color: whitesmoke; /* Define o texto como branco */
  margin-bottom: 0; /* Remove o espaçamento entre linhas */
  text-align: left; /* Alinha o texto à esquerda */
  justify-content: center;
  margin-left:10%; /* Espaçamento entre o ícone e o texto */
  width: 100%; /* Garante que o texto ocupe toda a largura disponível */
}

.contact-text a {
  text-decoration: none; /* Remove o sublinhado */
  font-weight:550; /* Remove o sublinhado */
  color: whitesmoke; /* Define a cor do link como branco */
}

.contact-text a:hover {
  text-decoration: none; /* Adiciona sublinhado ao passar o mouse */
}

/* Redes sociais */
.social-media-list {
  display: flex;
  flex-direction:row; /* Organiza os ícones verticalmente */
  gap: 15px; /* Espaçamento entre os ícones */
  align-items: flex-end; /* Alinha os ícones à direita */
}

.social-media-list li {
  list-style: none;
}

.social-media-list li a {
  display: inline-block;
  width: 40px; /* Tamanho dos ícones */
  height: 40px;
  line-height: 50px;
  text-align: center;
  align-items: center;
  align-content: center;
  background-color: #45c4ff;
  color: white;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.social-media-list li a:hover {
  background-color: #ff98b9;
}
/* Mapa */
.mapa {
  width: 100%; /* Garante que o mapa ocupe toda a largura da coluna */
  height: 325px;
  border-radius: 8px; /* Bordas arredondadas */
  box-shadow: 0 0 7px whitesmoke; /* Sombra ao redor do mapa */
}


/* Responsividade */
/* Layout para telas menores que 768px (tablets e smartphones) */
@media (max-width: 768px) {
  .contact-wrapper {
    display: flex; /* Altera o layout para flexbox */
    flex-direction: column; /* Empilha os itens verticalmente */
    gap: 20px; /* Espaçamento entre os itens */
    width: 100%; /* Garante que ocupe toda a largura disponível */
    padding: 10px; /* Adiciona espaçamento interno */
  }

  .right-column {
    width: 100%; /* Garante que a coluna direita ocupe toda a largura */
    align-items: center; /* Centraliza os itens horizontalmente */
  }

  .mapa {
    width: 100%; /* Garante que o mapa ocupe toda a largura */
    height: 300px; /* Ajusta a altura do mapa */
    margin-top: 20px; /* Adiciona espaçamento acima do mapa */
    border-radius: 8px; /* Mantém as bordas arredondadas */
  }

  .section-header {
    font-size: 2rem; /* Reduz o tamanho do título */
    padding: 10px 0; /* Ajusta o espaçamento do título */
    text-align: center; /* Centraliza o título */
  }

  #contact-form {
    width: 100%; /* Garante que o formulário ocupe toda a largura */
    margin: 0; /* Remove margens extras */
  }
}

/* Layout para telas muito pequenas (smartphones menores que 480px) */
@media (max-width: 480px) {
  .main-content-contact{
    flex: 1;
    height: 100vh;
    box-sizing: border-box; /* Garante que o padding não afete o tamanho total */
    margin-top: 30%;
    margin-bottom: 35%;
    padding: 2%;
  }
  
  .contact-wrapper {
    gap: 15px; /* Reduz o espaçamento entre os itens */
  }

  .mapa {
    height: 250px; /* Reduz ainda mais a altura do mapa */
  }

  .section-header {
    font-size: 1.8rem; /* Reduz ainda mais o tamanho do título */
  }

  #contact-form {
    padding: 10px; /* Adiciona espaçamento interno ao formulário */
  }
}