.contato {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Alterado de height para min-height para melhor responsividade */
    background-color: #bb2227;
    padding: 20px;
}

.conteudoContato {
    display: flex;
    flex-wrap: wrap; /* Permite que os elementos se ajustem melhor em telas menores */
    width: 100%;
    color: white;
    gap: 40px;
    max-width: 1200px; /* Deixa a seção maior */
    justify-content: space-between; /* Separa melhor as áreas */
}

.areaFormulario {
    flex: 4; /* Faz com que a área do formulário fique maior que a de informações */
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}



.areaFormulario h2 {
    font-weight: 450;
   font-size: 30px;
   white-space: nowrap;
}

.areaFormulario label {
    font-size: 16px;
    font-weight: 400;
    
}

.campoPreenchimento {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    transition: all 0.3s ease-in-out; /* Efeito suave ao focar */
}

/* Adicionando efeito de foco para acessibilidade */
.campoPreenchimento:focus {
    outline: 2px solid #fff; /* Destaca o campo ao ser focado */
    background-color: #fff;
    color: #000;
}

/* Ajuste para o textarea */
#mensagem {
    height: 200px; /* Mantém o tamanho fixo */
    resize: none;  /* Impede redimensionamento */
}

.botaoConfirmar {
    background-color: #191919;
    color: white;
    border: none;
    padding: 8px 16px; /* Reduzi o padding para deixar menor */
    font-size: 14px; /* Diminuí o tamanho da fonte */
    cursor: pointer;
    border-radius: 5px;
    font-weight: 450;
    transition: background 0.3s;
    width: 170px; /* Define um tamanho menor para o botão */
    height: 40px; /* Mantém uma altura fixa */
    text-align: center; /* Centraliza o texto */
    display: flex;
    justify-content: center;
    align-items: center;
}

.botaoConfirmar:hover {
    background-color: #333333;
}

.areaInformacoes {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 40px; /* Aumenta o espaçamento entre os itens */
    font-size: 15px; /* Aumenta o tamanho do texto */
    align-items: flex-start; /* Alinha os itens à esquerda */
    margin-top: 200px; /* Ajuste conforme necessário */
    margin-left: 50px;
}

.detalheContato {
    display: flex;
    align-items: center; /* Centraliza verticalmente o ícone e o texto */
    gap: 15px; /* Aumenta a distância entre o ícone e o texto */
    
    
}

.detalheContato img {
    width: 40px; /* Aumenta o tamanho dos ícones */
    height: auto;
    white-space: nowrap;
}

.footer{
    padding: 10px;
    background-color: #fff;
    text-decoration: none;
    color: #191919;
}


@media (max-width: 768px) {
    .contato {
        padding: 20px 10px; /* Ajusta o padding */
        min-height: auto; /* Remove o min-height fixo */
    }

    .conteudoContato {
        flex-direction: column; /* Empilha as colunas (formulário e informações) */
        align-items: center; /* Centraliza o conteúdo */
        gap: 30px; /* Reduz o espaço entre o formulário e as informações */
    }

    .areaFormulario {
        flex: 1;
        max-width: 100%; /* Garante que o formulário ocupe 100% da largura disponível */
        width: 100%; /* Garante que o formulário ocupe toda a largura */
    }

    .areaFormulario h2 {
        font-size: 24px; /* Ajusta o tamanho do título */
        text-align: center; /* Centraliza o título */
    }

    .areaFormulario label {
        font-size: 14px; /* Diminui o tamanho da fonte das labels */
    }

    .campoPreenchimento {
        font-size: 14px; /* Diminui o tamanho da fonte nos campos de entrada */
        padding: 10px; /* Ajusta o padding */
    }

    #mensagem {
        height: 150px; /* Diminui o tamanho do textarea */
    }

    .botaoConfirmar {
        width: 100%; /* Faz o botão ocupar toda a largura */
        font-size: 16px; /* Ajusta o tamanho da fonte do botão */
        padding: 12px; /* Aumenta o padding para maior área clicável */
    }

    .areaInformacoes {
        margin-top: 0; /* Remove o espaçamento superior */
        margin-left: 0; /* Remove a margem à esquerda */
        gap: 20px; /* Reduz o gap entre os itens */
        font-size: 14px; /* Diminui o tamanho da fonte */
        align-items: center; /* Centraliza as informações */
    }

    .detalheContato {
        flex-direction: column; /* Empilha os ícones e o texto */
        align-items: center; /* Centraliza os itens */
        gap: 10px; /* Diminui o espaço entre o ícone e o texto */
    }

    .detalheContato img {
        width: 30px; /* Diminui o tamanho dos ícones */
    }

    .footer {
        font-size: 14px; /* Ajusta o tamanho da fonte no footer */
        padding: 8px 0; /* Diminui o padding */
    }
}

@media screen and (max-width: 600px) {
  form input,
  form textarea,
  form button {
    width: 100%;
    font-size: 14px;
    padding: 10px;
  }
}
@media screen and (max-width: 600px) {
  .conteudoContato,  
  form {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 10px;
    box-sizing: border-box;
  }

  form input,
  form textarea,
  form button {
    width: 100%;
    max-width: 100%;
  }
}