@import url("../variaveis.css");


@import url("button_contatos.css");
@import url("button_text_contatos.css");
@import url("icones_button_contatos.css");
@import url("layout_button_contatos.css");
@import url("contatos_text.css");


.contatos {
    background-color: var(--bg-color);
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1.25rem;
    padding: 3em 2em;
    text-align: center;
    background: var(--secundary-color);
}

@media screen and (min-width: 360px) {
    .contatos {padding: 3em 2em}
}

@media screen and (min-width: 480px) {
    .contatos {padding: 3em 3em}
}

@media screen and (min-width: 600px) {
    .contatos {
        padding: 3em 2.5em;
        background: linear-gradient(var(--bg-color) 10%, var(--secundary-color) 10%, var(--secundary-color) 100%);
    }
}


@media screen and (min-width: 992px) {
    .contatos {
        flex-direction: row;
        height: 90vh;
        padding: 5em 3.5em 3em 3.5em;
        background: linear-gradient(var(--bg-color) 25%, var(--secundary-color) 25%, var(--secundary-color) 75%, var(--bg-color) 75%);
    }
}

@media screen and (min-width: 1200px){
    .contatos {
        height: 84vh;
        padding: 3em 5em;
    }
}