/* Headings */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
/* font-family: 'Poppins', sans-serif; */
/* Body */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
/* font-family: 'Open Sans', sans-serif; */

body {
    display: grid;
    grid-template-areas: "header header"
                         "ilustracao texto"
                         "footer footer";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 0.2fr 1fr;
    background: url('../images/bg-desktop.svg') left top no-repeat;
    background-color: var(--background-color);
    background-size: contain;
    height: 100vh;
    padding: 54px 85px 40px 70px;
}

/* ---------------------Header------------------ */
.header {
    grid-area: header;
}

.header img {
    max-height: 53px;
}

/* -------------------ilustração--------------- */
.ilustracao {
    grid-area: ilustracao;
    margin:80px 0 0;
}
/* --------------------texto------------------- */
.texto {
    grid-area: texto;
    padding: 125px 0 0 52px;
}

.texto .titulo {
    font-family: 'Poppins', sans-serif;
    color: #fff;
    text-transform: capitalize;
    font-size: 40px;
}

.texto .paragrafo {
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    color: #fff;
    margin: 20px 0 27px ;
    line-height: 26px;
}

.botao a {
    width: 200px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    background-color: #fff;
    border-radius: 30px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    transition: 0.3s;
    color: var(--background-color);
}

.texto .botao a:hover{
    background-color: var(--active-state);
    color: #fff;

}

/* ----------------Footer-------------- */
.social {
    grid-area: footer;
    display: flex;
    justify-content: right;
    gap: 15px;
    font-size: 20px;
    margin-top: 20px;
    transition: 0.3s;
}

.social a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 50%;
    height: 40px;
    width: 40px;
}

.social a:hover {
    border-color: var(--active-state);
    color: var(--active-state);
}