﻿.form-section,
.footer-banner,
.privacidade-section .row,
.termos-uso-section .row {
    margin-left: auto;
    margin-right: auto;
    max-width: 60rem;
}

.form-section form {
    padding:2rem;
}

.form-section h2 {
    padding-top: 2rem;
    text-align: center;
    font-size: 4.5rem;
    font-weight: bold;   
}

.container p {
    text-align: center;
}

.form-label,
.privacidade-section li,
.termos-uso-section li {
    color: #F0FFFF;
    margin-left:2rem;
}

.container a {
    color: #80f353;
}

.form-control:focus {    
    border-color: #904efa;
    box-shadow: 0 0 0 0.25rem rgba(144, 78, 250, 0.25);
}

.footer-section {
    background-color: #4F4F4F;
    padding-top:2rem;
    padding-bottom:2rem;
}

.email-imagem img {
    width: 5rem;
    height: 5rem;
    object-fit: cover;
    border-radius: 1rem;
}

.github-imagem img {
    width: 5rem;
    height: 5rem;
    object-fit: cover;
    border-radius: 1rem;
    margin-right:1.2rem;
    margin-left:1.2rem;
}

.linkedin-imagem img {
    width: 5rem;
    height: 5rem;
    object-fit: cover;
    border-radius: 1rem;    
}


.footer-banner .col{
    display:flex;
    flex-direction:row;  
    align-items:center;
    justify-content:center; 
    padding-bottom:2rem;

}

/* ==========================================================================
   Responsividade para o Footer e Formulário (Mobile)
   ========================================================================== */
@media (max-width: 768px) {
    /* Reduz o tamanho do título "Contato" ou similares no rodapé */
    .form-section h2 {
        font-size: 2.2rem !important; /* Reduzido de 4.5rem */
        padding-top: 1rem;
    }

    /* Reduz o preenchimento interno do formulário para dar mais espaço */
    .form-section form {
        padding: 1rem !important;
    }

    /* Ajusta as margens das labels e listas para não esmagar o texto no mobile */
    .form-label,
    .privacidade-section li,
    .termos-uso-section li {
        margin-left: 0.5rem !important; /* Reduzido de 2rem */
    }

    /* Alinha o container do rodapé e centraliza os textos */
    .footer-section {
        text-align: center;
        padding-left: 1rem;
        padding-right: 1rem;
    }

        /* Faz com que a disposição das colunas do rodapé se empilhem verticalmente */
        .footer-section .row {
            flex-direction: column;
        }

    /* Centraliza e ajusta as imagens de redes sociais/links no rodapé */
    .email-imagem img,
    .linkedin-imagem img,
    .github-imagem img {
        margin: 1rem auto;
        display: block;
    }
}