/* Seu CSS Existente para .contact-section, .contact-info, .info-box, etc. */

/* Área principal de contato */
.contact-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centraliza no desktop e mobile */
    padding: 50px 100px; /* Padding para desktop */
    margin: 50px auto; /* Centraliza a seção no desktop */
    gap: 30px; /* Espaço entre os blocos */
}

/* Área de informações */
.contact-info {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Duas colunas no desktop */
    gap: 20px;
    flex: 1;
    min-width: 320px; /* Largura mínima para desktop */
    max-width: 600px; /* Largura máxima para desktop */
}

/* Caixa de informação */
.info-box {
    background: #fff;
    padding: 25px;
    text-align: center;
    border-radius: 8px; /* Adicionei um border-radius para um visual mais suave */
    box-shadow: 0 4px 20px rgba(111, 0, 255, 0.2); /* Sombra mais sutil */
}

/* Ícones */
.info-box i {
    font-size: 30px;
    color: #6d12bd;
    margin-bottom: 10px;
    display: inline-block;
}

/* Títulos e textos */
.info-box h3 {
    font-size: 18px; /* Aumentei um pouco para melhor legibilidade */
    font-weight: bold;
    color: #333; /* Cor um pouco mais suave para o texto */
    margin-bottom: 8px;
}

.info-box p {
    font-size: 15px; /* Aumentei um pouco para melhor legibilidade */
    color: #555;
    margin: 0;
}

.info-box a {
    color: #00bcd4;
    text-decoration: none;
}

/* Área do formulário de Contato Padrão */
.contact-form {
    background: #6d12bd;
    padding: 40px;
    flex: 1;
    border-radius: 8px; /* Adicionei um border-radius */
    box-shadow: 0 4px 20px rgba(111, 0, 255, 0.2); /* Sombra mais sutil */
    min-width: 320px; /* Largura mínima para desktop */
    max-width: 600px; /* Largura máxima para desktop */
    color: #fff; /* Garante que o texto dentro do formulário seja branco */
}

/* Título do formulário */
.contact-form h2 {
    font-size: 32px;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 30px;
    text-align: center;
}

/* Formulário */
.contact-form form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-form input,
.contact-form textarea {
    padding: 12px;
    font-size: 16px;
    border: 1px solid #ccc; /* Adicionei uma borda sutil */
    border-radius: 5px; /* Arredondei um pouco as bordas dos inputs */
    background: #ffffff;
    box-sizing: border-box;
    width: 100%; /* Garante que ocupe 100% da largura do pai */
    color: #333; /* Cor do texto do input */
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

/* Botão do formulário padrão */
.form-button {
    text-align: center;
    margin-top: 15px; /* Adicionei um espaço acima do botão */
}

.contact-form button {
    background: #1e1f26;
    color: #fff;
    padding: 12px 30px; /* Aumentei um pouco o padding do botão */
    font-size: 16px; /* Aumentei o font-size do botão */
    font-weight: bold;
    border: none;
    border-radius: 5px; /* Arredondei as bordas do botão */
    cursor: pointer;
    transition: background 0.3s ease; /* Transição mais suave */
}

.contact-form button:hover {
    background: #333;
}

/* --- Novos Estilos para o Formulário de WhatsApp --- */
.whatsapp-contact-form {
    background: #6d12bd; /* Mesma cor de fundo do formulário padrão */
    padding: 40px;
    flex: 1; /* Permite que ele cresça e ocupe espaço */
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(111, 0, 255, 0.2);
    min-width: 320px; /* Largura mínima igual ao outro formulário */
    max-width: 600px; /* Largura máxima igual ao outro formulário */
    color: #fff; /* Garante que o texto seja branco */
}

.whatsapp-contact-form h2 {
    font-size: 32px;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 20px; /* Menor que o formulário principal */
    text-align: center;
}

.whatsapp-contact-form .whatsapp-intro-text {
    font-size: 1em;
    text-align: center;
    margin-bottom: 25px;
}

.whatsapp-contact-form form {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espaço entre os campos */
}

.whatsapp-contact-form label {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 5px; /* Espaço entre o label e o input */
    display: block; /* Garante que o label ocupe sua própria linha */
}

.whatsapp-contact-form input[type="text"],
.whatsapp-contact-form input[type="email"],
.whatsapp-contact-form input[type="tel"],
.whatsapp-contact-form input[type="url"],
.whatsapp-contact-form textarea {
    padding: 12px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #ffffff;
    box-sizing: border-box;
    width: 100%;
    color: #333;
}

.whatsapp-contact-form textarea {
    resize: vertical;
    min-height: 80px; /* Um pouco menor para formulário de WhatsApp */
}

.whatsapp-contact-form .whatsapp-question-title {
    font-size: 1em;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 10px;
}

.whatsapp-contact-form .checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Espaço entre as opções de checkbox */
    margin-bottom: 15px;
}

.whatsapp-contact-form .checkbox-group label {
    display: flex; /* Para alinhar o checkbox e o texto */
    align-items: center;
    font-weight: normal; /* Normaliza o peso da fonte para opções */
    margin-bottom: 0; /* Remove margem extra */
}

.whatsapp-contact-form .checkbox-group input[type="checkbox"] {
    width: auto; /* Para que o checkbox não ocupe 100% */
    margin-right: 10px; /* Espaço entre checkbox e texto */
    margin-bottom: 0; /* Remove margem extra do input */
}

.whatsapp-contact-form .checkbox-other {
    display: flex; /* Alinha o checkbox, texto "Outro" e input de especificação */
    align-items: center;
    flex-wrap: wrap; /* Permite que o input de especificação quebre linha */
}

.whatsapp-contact-form .inline-input {
    flex-grow: 1; /* Permite que o input de especificação ocupe espaço */
    margin-left: 10px; /* Espaço após o texto "Outro" */
    margin-top: 5px; /* Espaço acima se quebrar linha em mobile */
}

/* Botão do WhatsApp */
.whatsapp-button {
    background: #25d366; /* Verde do WhatsApp */
    color: #fff;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
    display: flex; /* Para alinhar ícone e texto */
    align-items: center;
    justify-content: center;
    gap: 10px; /* Espaço entre ícone e texto */
    margin-top: 20px; /* Espaço antes do botão */
    width: 100%; /* Ocupa a largura total */
}

.whatsapp-button:hover {
    background: #1da851;
}

/* Ícone do WhatsApp dentro do botão */
.whatsapp-button .fab {
    font-size: 1.2em;
}


/* --- Responsividade para Mobile (ajustado para incluir o novo formulário) --- */
@media (max-width: 768px) {
    .contact-section {
        flex-direction: column; /* Empilha os itens verticalmente */
        align-items: center; /* Centraliza os itens empilhados */
        padding: 30px 20px; /* Ajuste do padding para mobile */
        margin: 30px 0; /* Ajuste da margem para mobile */
        gap: 30px; /* Espaçamento entre as seções */
    }

    .contact-info {
        grid-template-columns: 1fr; /* Uma coluna no mobile */
        width: 100%; /* Ocupa a largura total disponível */
        max-width: 450px; /* Mantém uma largura máxima controlada */
        flex: none; /* Remove a flexibilidade */
    }

    .info-box {
        width: 100%; /* Ocupa a largura total da .contact-info */
        padding: 25px; /* Mantém o padding para um bom espaçamento */
    }

    .contact-form,
    .whatsapp-contact-form { /* Aplicar estilos a ambos os formulários */
        width: 100%; /* Ocupa a largura total disponível */
        max-width: 450px; /* Mantém uma largura máxima controlada */
        padding: 30px 25px; /* Ajuste do padding para o formulário */
        flex: none; /* Remove a flexibilidade */
    }

    .contact-form h2,
    .whatsapp-contact-form h2 {
        font-size: 28px; /* Título do formulário um pouco menor */
        margin-bottom: 25px;
    }

    .contact-form input,
    .contact-form textarea,
    .whatsapp-contact-form input,
    .whatsapp-contact-form textarea {
        font-size: 15px; /* Fonte menor para inputs */
        padding: 12px; /* Padding ajustado */
    }

    .contact-form button,
    .whatsapp-contact-form .whatsapp-button {
        width: 80%; /* Botão com largura um pouco menor que 100% */
        max-width: 250px; /* Largura máxima para o botão */
        font-size: 15px;
        padding: 12px 25px;
    }

    .whatsapp-contact-form .checkbox-group label {
        flex-direction: column; /* Empilha o checkbox e o texto em telas pequenas */
        align-items: flex-start;
        gap: 5px; /* Espaçamento entre checkbox e texto em coluna */
    }

    .whatsapp-contact-form .checkbox-group input[type="checkbox"] {
        margin-right: 0; /* Remove margem direita em coluna */
        margin-bottom: 5px; /* Adiciona margem inferior */
    }

    .whatsapp-contact-form .inline-input {
        margin-left: 0; /* Remove margem esquerda em coluna */
        margin-top: 5px; /* Espaço superior se quebrar linha */
    }

    .whatsapp-contact-form .checkbox-other {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    /* Ajustes para telas muito pequenas */
    .contact-section {
        padding: 20px 15px;
        margin: 20px 0;
        gap: 25px;
    }

    .info-box h3 {
        font-size: 17px;
    }

    .info-box p {
        font-size: 14px;
    }

    .contact-form h2,
    .whatsapp-contact-form h2 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .contact-form input,
    .contact-form textarea,
    .whatsapp-contact-form input,
    .whatsapp-contact-form textarea {
        padding: 10px;
    }

    .contact-form button,
    .whatsapp-contact-form .whatsapp-button {
        width: 90%;
        max-width: 220px;
        font-size: 14px;
        padding: 10px 20px;
    }
}

.Info-contato{
    display: flex;
    justify-content: center;
    align-items: center;
}