/* Resetando margens e paddings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estilos gerais */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #f7f7f7;
    color: #0A2E52;
    line-height: 1.7;
}

/* Cabeçalho */
header {
    background-color: #ffffff;
    color: #000000;

    text-align: center;
}

header h1 {
    font-size: 2.8em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
}


/* Estilos para o cabeçalho atualizado */
.logo-nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.logo {
    max-width: 100px; /* Ajuste o tamanho da logo conforme necessário */
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

nav ul li {
    display: inline;
}

nav ul li a {
    color: #000000;
    text-decoration: none;
    font-weight: 500;
    font-size: 1.1em;
}

nav ul li a:hover {
    color: #A7F3D0;
}


/* Seção de Contato */
#contato {
    max-width: 1000px;
    margin: 50px auto;
    padding: 0 20px;
}

.titulo-contato {
    text-align: center;
    margin-bottom: 50px;
}

.titulo-contato h2 {
    font-size: 3em; /* Título principal com maior ênfase */
    color: #0A2E52;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

.titulo-contato p {
    font-size: 1.3em;
    max-width: 800px;
    margin: 0 auto;
    color: #0A2E52;
    line-height: 1.8;
}

/* Container para informações e formulário */
.contato-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 50px;
}

/* Informações de Contato */
.informacoes-contato {
    background-color: #0A2E52;
    color: #ffffff;
    padding: 40px; /* Aumentei o padding para dar mais respiro */
    border-radius: 10px;
    width: 45%;
}

.informacoes-contato h3 {
    font-size: 2em;
    margin-bottom: 20px;
    color: #A7F3D0;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
}

.informacoes-contato p {
    margin-bottom: 15px; /* Mais espaçamento entre parágrafos */
    font-size: 1.3em;
    font-weight: 400;
}

.informacoes-contato a {
    color: #A7F3D0;
    text-decoration: none;
    display: block;
    margin-bottom: 15px;
    font-size: 1.2em;
}

.informacoes-contato a:hover {
    color: #ffffff;
}

/* Formulário de Contato */
.formulario-contato {
    width: 45%;
}

.formulario-contato h3 {
    font-size: 2em; /* Ajuste de hierarquia no título do formulário */
    margin-bottom: 25px;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
}

.formulario-contato label {
    display: block;
    margin-bottom: 10px;
    font-size: 1.3em;
    color: #0A2E52;
    font-weight: 500;
}

.formulario-contato input,
.formulario-contato textarea {
    width: 100%;
    padding: 15px; /* Aumentei o padding para melhor usabilidade */
    margin-bottom: 25px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1.2em;
}

.formulario-contato button {
    width: 100%;
    padding: 15px;
    background-color: #A7F3D0;
    border: none;
    color: #0A2E52;
    font-size: 1.4em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.formulario-contato button:hover {
    background-color: #0A2E52;
    color: #ffffff;
}

/* Rodapé */
footer {
    background-color: #0A2E52;
    color: #ffffff;
    text-align: center;
    padding: 30px 0; /* Aumentado o padding para destacar mais o rodapé */
}

footer p {
    font-size: 1.2em;
    font-family: 'Roboto', sans-serif;
}

.redes-sociais {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    gap: 20px; /* Espaço entre os ícones */
    margin-top: 20px;
}

.redes-sociais a {
    display: inline-block;
}

.icone-social {
    width: 40px; /* Ajuste o tamanho do ícone conforme necessário */
    height: auto;
    transition: transform 0.3s ease;
}

.icone-social:hover {
    transform: scale(1.2); /* Efeito de hover para aumentar levemente o ícone */
}


/* Responsividade */
@media (max-width: 768px) {
    .contato-container {
        flex-direction: column;
        align-items: center;
    }

    .informacoes-contato,
    .formulario-contato {
        width: 100%;
        margin-bottom: 30px; /* Ajuste no espaçamento para dispositivos móveis */
    }
}

/* Disposição do Formulário */
.formulario-contato .linha {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.formulario-contato .campo {
    width: 48%;
}

.formulario-contato label {
    display: block;
    margin-bottom: 10px;
    font-size: 1.3em;
    color: #0A2E52;
    font-weight: 500;
}

.formulario-contato input,
.formulario-contato textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1.1em;
}

/* Ajustando a largura e o espaçamento entre o formulário e as informações de contato */
.contato-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 50px;
    gap: 40px; /* Espaçamento entre o formulário e as informações de contato */
}

.formulario-contato {
    width: 55%;
}

.informacoes-contato {
    background-color: #0A2E52;
    color: #ffffff;
    padding: 40px;
    border-radius: 10px;
    width: 55%;
}

/* Ajustando o botão para se manter proporcional */
.formulario-contato button {
    width: 100%;
    padding: 15px;
    background-color: #A7F3D0;
    border: none;
    color: #0A2E52;
    font-size: 1.4em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.formulario-contato button:hover {
    background-color: #0A2E52;
    color: #ffffff;
}

.mensagem-erro {
    font-size: 0.9em;
    color: red;
    margin-top: 5px;
    display: block;
}

/* Ajustes gerais de responsividade */
@media (max-width: 1024px) {
    /* Ajustando o layout do formulário e informações de contato */
    .contato-container {
        flex-direction: column;
        gap: 30px;
    }

    .informacoes-contato, .formulario-contato {
        width: 100%;
        margin-bottom: 30px; /* Espaçamento entre as seções */
    }

    .informacoes-contato h3, .formulario-contato h3 {
        font-size: 1.8em;
    }

    .informacoes-contato p, .formulario-contato label {
        font-size: 1.2em;
    }

    .formulario-contato input, .formulario-contato textarea {
        font-size: 1.1em;
    }

    .formulario-contato button {
        font-size: 1.3em;
    }
}

/* Ajustes para dispositivos móveis (até 768px) */
@media (max-width: 768px) {
    .titulo-contato h2 {
        font-size: 2.5em; /* Reduzindo o título */
    }

    .titulo-contato p {
        font-size: 1.1em;
        max-width: 100%;
    }

    /* Informações de contato e formulário em layout vertical */
    .informacoes-contato, .formulario-contato {
        width: 100%;
    }

    .informacoes-contato h3, .formulario-contato h3 {
        font-size: 1.6em;
    }

    .informacoes-contato p {
        font-size: 1.1em;
    }

    .formulario-contato input, .formulario-contato textarea {
        font-size: 1em;
    }

    /* Botão de envio */
    .formulario-contato button {
        padding: 12px;
        font-size: 1.2em;
    }
}

/* Ajustes para telas muito pequenas (até 480px) */
@media (max-width: 480px) {
    header h1 {
        font-size: 2em;
    }

    /* Seção de título */
    .titulo-contato h2 {
        font-size: 2em;
    }

    .titulo-contato p {
        font-size: 1em;
        max-width: 100%;
    }

    /* Layout vertical completo */
    .informacoes-contato, .formulario-contato {
        width: 100%;
        padding: 20px;
    }

    /* Informações de contato */
    .informacoes-contato h3 {
        font-size: 1.5em;
    }

    .informacoes-contato p {
        font-size: 1em;
    }

    /* Formulário */
    .formulario-contato h3 {
        font-size: 1.5em;
    }

    .formulario-contato input, .formulario-contato textarea {
        padding: 10px;
        font-size: 0.9em;
    }

    /* Botão */
    .formulario-contato button {
        padding: 10px;
        font-size: 1em;
    }

    /* Footer */
    footer p {
        font-size: 0.9em;
    }
}