@import url(style-global.css);

.contact {
    width: 100%;
    height: 40vh;
}

.contact .container {
    background-color: var(--cor-verde);
    
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}

.contact .container .contact-container{
    width: 80%;
    height: 95%;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.contact .container .contact-container h2 {
    font-size: 28px;
}

.contact .container .contact-container .informacoes-contato {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 50%;
}

.contact .container .contact-container .informacoes-contato p {
    font-size: 15px;
    width: 450px;
    text-align: center;
}

.contact .container .contact-container .informacoes-contato .redessocias {
    width: 50px;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contact .container .contact-container .informacoes-contato .redessocias a {
    text-decoration: none; 
    color: black;

    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-device-width: 425px){ /* Mobile */
    .contact .container .contact-container .informacoes-contato p {
        font-size: 13px;
        width: 350px;
    }
}

@media screen and (max-device-width: 320px){ 
    .contact .container .contact-container h2 {
        font-size: 24px;
    }
 
    .contact .container .contact-container .informacoes-contato p {
        width: 300px;
    }

}