@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,400;6..12,700&display=swap');

:root {
    --cor-background: #F7F7F7;
    --cor-orange: #E85722;
    --cor-bluesecondary: #433F87;
    --cor-blueprimary: #2B2862;
    --cor-pcolor: #72787B;
    --cor-white: #FFF;
    --cor-btn: #D44C1B;
    --fonte-principal: "Nunito Sans";
}

body {
    background-color: var(--cor-background);
    font-family: var(--fonte-principal);
    font-size: 19px;
    font-weight: 400;
}

/* Barra de navegação */

.cabeçalho__menu-hamburguer {
    width: 24px;
    height: 24px;
    background-image: url("../img/MenuAberto.svg");
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
}

.cabeçalho {
    background-color: var(--cor-bluesecondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.container {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.container__imagem {
    padding: 1em;
}

.lista-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 1%;
    width: 60vw;
}

.container__botao:checked~.lista-menu {
    display: block;
}

.lista-menu__titulo,
.lista-menu__item {
    padding: 1rem;
    background-color: var(--cor-white);
}

.lista-menu__link {
    color: var(--cor-blueprimary);
    text-transform: uppercase;
    text-decoration: none;
}

.container__botao {
    display: none;
}

.banner {
    background-color: var(--cor-blueprimary);
    padding: 16px;
}

.banner__titulo {
    font-size: 32px;
    font-weight: 700;
    color: var(--cor-white);

}

.banner__texto {
    font-size: 16px;
    font-weight: 400;
    color: var(--cor-white);
    margin-top: 16px;
}

.banner__botao {
    padding: 16px;
    margin-top: 24px;
    display: grid;
    background-color: var(--cor-orange);
    font-size: 18px;
    text-align: center;
    font-weight: 700;
    color: var(--cor-white);
    text-decoration: none;
    border-radius: 5px;

}

.banner__botao-middle {
    padding: 16px;
    margin-top: 24px;
    display: inline-block;
    background-color: var(--cor-orange);
    font-size: 18px;
    text-align: center;
    font-weight: 700;
    color: var(--cor-white);
    text-decoration: none;
    border-radius: 5px;
}

.assistir__botao {
    padding: 16px;
    margin-top: 24px;
    display: grid;
    background-color: var(--cor-orange);
    font-size: 18px;
    text-align: center;
    font-weight: 700;
    color: var(--cor-white);
    text-decoration: none;
    border-radius: 5px;
}

.banner__botao:hover {
    background-color: var(--cor-btn);
}

.algo {
    padding: 16px;
}

.algo__texto {
    font-size: 19px;
    font-weight: 400;
    color: var(--cor-blueprimary);
    padding-bottom: 8px;
}

.algo__titulo {
    font-size: 32px;
    font-weight: 700;
    color: var(--cor-orange);
    padding-bottom: 16px;
}



.container__card {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card {
    background-color: var(--cor-white);
    border-radius: 2px;
    padding: 24px;
    margin-bottom: 16px;
}

.card__titulo {
    font-size: 22px;
    font-weight: 400;
    color: var(--cor-orange);
    margin-bottom: 8px;
}

.card__texto {
    font-size: 18px;
    padding: 12px;
    font-weight: 400;
    color: var(--cor-pcolor);
}

.documentos {
    padding: 16px;

}

.documentos__titulo {
    font-size: 32px;
    font-weight: 700;
    color: var(--cor-orange);
    text-align: center;
}

.documentos__texto {
    text-align: center;
    font-size: 19px;
    font-weight: 400;
    color: var(--cor-blueprimary);
    margin-bottom: 16px;
}

.documentos-card__titulo,
a {
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    text-decoration: none;
    color: var(--cor-orange)
}

.documentos__logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
}

.container__card-documento {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    background-color: var(-)
}

.card-documento {
    background-color: var(--cor-white);
    border-radius: 2px;
    padding: 24px;
    margin-bottom: 16px;
}

.aula {
    padding: 16px;
}

.aula__titulo {
    font-size: 32px;
    font-weight: 700;
    color: var(--cor-orange);
    text-align: center;
}

.faq {
    padding: 16px;
}

.faq__titulo {
    font-size: 32px;
    font-weight: 700;
    color: var(--cor-orange);
    text-align: center;
    margin-bottom: 8px;
}

.duvidas {
    padding: 16px;
}

.rodape {
    background-color: var(--cor-blueprimary);
    color: var(--cor-white);
    padding: 16px;
    text-align: center;
    font-size: 14px;
}

.collapsible {
    font-family: nunito sans;
    background-color: var(--cor-white);
    color: var(--cor-blueprimary);
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 14px;
    font-weight: 700;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.collapsible:hover {
    background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.content {
    padding: 16px;
    display: none;
    overflow: hidden;
    background-color: var(--cor-background);
    color: var(--cor-pcolor);
}

.opções {
    display: none;
}


.container__banner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.banner__imagem{

}


@media screen and (min-width: 1024px) {
    .opções {
        display: flex;
    }

    .opções__item {
        padding: 0 1em;
        text-transform: uppercase;
        color: var(--cor-white);
    }

    .opções__link {
        color: var(--cor-white);
    }

    .cabeçalho__menu-hamburguer {
        display: none;
    }

    .algo__texto {
        text-align: center;
    }

    .algo__titulo {
        text-align: center;

    }

    .banner__titulo {
        font-size: 64px;
        width: 50%;
    }

    .banner__texto {
        font-size: 22px;
        width: 50%;
    }

    .banner {
        padding: 64px;
    }

    .algo {
        padding: 64px;
    }

    .assistir__botao {
        width: 300px;
        margin: 0 auto;
    }

    .banner__botao {
        width: 300px;

    }

    .documentos {
        padding: 64px;
    }

    .faq {
        padding: 64px;
    }

    .banner__imagem {
        position: relative;
    }

    .container__card {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .card {
        width: 20%;
        background-color: var(--cor-white);
        border-radius: 8px;
        padding: 24px;
        margin-bottom: 16px;
        box-shadow: 0px 4px 4px 0px #bbbbbb;

    }

    .container__card-documento {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        text-align: center;
    }

    .card-documento {
        width: 40%;
        background-color: var(--cor-white);
        border-radius: 2px;
        padding: 24px;
        margin-bottom: 16px;
        box-shadow: 0px 4px 4px 0px #bbbbbb;
    }

    .documentos__logo {
       display: flex;
       flex-direction: column;
       justify-content: center;
    }

    .container__banner {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .banner__imagem{
        top: 0;
        right: 0;

    }


}