/* ======== Redefinições de Estilos ======== */
* {
    margin: 0;
    padding: 0;
    border: 0;
    text-decoration: none;
    box-sizing: border-box;
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}
input:focus {
    outline: none;
    box-shadow: none;
}
.form-control:focus {
    box-shadow: 0 0 0 0.02rem;
}

/* ======== Variáveis de Estilo ======== */
:root {
    --cor-primaria: #ff3618;
    --cor-secundaria: #ff7723;
    --cor-fonte-comum: #f5f5f5;
    --cor-fonte-destaque: #ff2e17;
}

/* ======== Layout: CONTAINER ======== */

body {
    width: 100%;
    height: 100%;
}

.l-container {
    display: block;
    background-color: #f5f5f5;
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
}

/* ======== Layout: HEADER ======== */

.l-header {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* == Header superior == */
.c-header_topo {
    display: flex;
    flex-direction: row;
    align-self: center;
    justify-content: flex-end;
    gap: 1.5em;
    width: 80%;
    padding-block: .25em;
    color: var(--cor-primaria);
    font-weight: 600;
}

/* == Header central == */
.c-header_meio {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    background: linear-gradient(to right, var(--cor-primaria), var(--cor-secundaria) 50%);
    padding-block: 1.5em;
}

.c-header_meio .s-header_meio_titulo img {
    height: 40px;
}

.c-header_meio .s-header_meio_busca {
    width: 20%;
}
.c-header_meio .s-header_meio_busca input {
    height: 40px;
}
.c-header_meio .s-header_meio_busca span {
    user-select: none;
}

.c-header_meio .s-header_meio_contato {
    color: var(--cor-fonte-comum);
    display: flex;
    flex-direction: column;
    text-align: center;
}
.s-header_meio_contato h3 {
    font-size: 1em;
    font-weight: 600;
    margin: 0;
}
.s-header_meio_contato .c-contato_numero {
    font-size: .9em;
}
.c-contato_numero img {
    width: 1.2em;
}


.s-header_meio_portal a {
    font-weight: 600;
}

/* == Header Inferior == */
.c-header_baixo {
    width: 100%;
    height: 3em;
}

/* ======== Layout: MAIN ======== */

.l-main {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3em;
    margin-bottom: 3em;
}

/* == Section 1 == */
.l-main .s-main_sect1 {
    align-self: center;
    padding: 0;
    max-width: 1240px;
}
.s-main_sect1 .c-main_sect1_imgs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .5em;
}
.c-main_sect1_imgs .c-sect1_imgs_topo, .c-sect1_imgs_baixo {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1em;
    width: 100%;
}
.c-sect1_imgs_topo img:nth-child(1) {
    width: 100%;
    max-width: 800px;
}
.c-sect1_imgs_topo img:nth-child(2) {
    width: 100%;
    max-width: 420px;
}

.c-sect1_imgs_baixo > img {
    width: 100%;
    max-width: 640px;
}

.s-sect1_imgs_baixo_quarteto {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1em;
    width: 100%;
}
.s-sect1_imgs_baixo_quarteto img {
    width: 100%;
    max-width: 47%;
}

.s-sect1_imgs_baixo_quarteto img:nth-child(1),
.s-sect1_imgs_baixo_quarteto img:nth-child(2) {
    align-self: self-start;
}

.s-sect1_imgs_baixo_quarteto img:nth-child(3),
.s-sect1_imgs_baixo_quarteto img:nth-child(4) {
    align-self: self-end;
}

/* == Section 2 == */
.l-main .s-main_sect2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.s-main_sect2 .c-main_sect2_banner {
    background-color: var(--cor-primaria);
    background-image: url("../../img/landing_banner_8.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    border-top: 20px solid var(--cor-primaria);
    width: 100%;
    min-height: 450px;
    margin-bottom: -240px;
    display: flex;
}

.s-main_sect2 .c-main_sect2_dados {
    color: var(--cor-fonte-comum);
    max-width: 520px;
}
.c-main_sect2_dados .s-sect2_metricas {
    text-align: center;
    line-height: 1.5em;
    user-select: none;
}
.s-sect2_metricas p:nth-child(1) {
    font-size: 3em;
    font-weight: 700;
}
.s-sect2_metricas p:nth-child(2) {
    font-size: 1.5em;
    font-weight: 600;
}
.c-main_sect2_dados .s-sect2_depoimentos {
    background: linear-gradient(to right, var(--cor-primaria) 50%, var(--cor-secundaria));
    padding: 2em;
    border-radius: 10px;
    margin-top: 2em;
    margin-inline: 20px;
}
.s-sect2_depoimentos p:nth-child(1) {
    font-size: 1.4em;
    line-height: 1.2em;
}
.s-sect2_depoimentos p:nth-child(2) {
    font-size: 1em;
}

/* == Section 3 == */
.l-main .s-main_sect3 {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.s-main_sect3 .c-main_sect3_cursos {
    width: 100%;
    max-width: 800px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 2em;
    border: 1px solid rgb(220, 220, 220);
    border-radius: 15px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    padding: 20px 10px;
}

.c-sect3_cursos_banner {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 2em;
}
.c-sect3_cursos_banner .c-sect3_cursos_banner_img {
    width: 100%;
    background-image: url("../../img/landing_curso.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.c-sect3_cursos_banner_text h3 {
    color: var(--cor-fonte-destaque);
    font-weight: 700;
}
.c-sect3_cursos_banner_text h5 {
    font-weight: 600;
}

.c-main_sect3_cursos .c-sect3_cursos_empresas {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
.c-sect3_cursos_empresas img {
    width: 200px;
}

.c-main_sect3_cursos .c-sect3_botao {
    width: fit-content;
    padding: 10px;
    background: var(--cor-primaria);
    border-radius: 5px;
    font-size: 1.2em;
    color: var(--cor-fonte-comum);
    font-weight: 700; 
}

/* == Section 4 == */
.l-main .s-main_sect4 {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.s-main_sect4 .c-main_sect4_suporte {
    width: 100%;
    max-width: 1000px;
    position: relative;
    display: flex;
    flex-direction: column;
    position: relative;
}

.c-main_sect4_suporte .c-sect4_suporte_text {
    background-color: var(--cor-fonte-comum);
    padding: 20px;
    margin: 20px;
    border-radius: 5px;
    position: absolute;
    top: 70%;
    display: flex;
    flex-direction: column;
}
.c-sect4_suporte_text h5 {
    font-weight: 600;
}
.c-sect4_suporte_text .c-sect4_botao {
    padding: .6em 1.2em;
    border: 1px solid var(--cor-primaria);
    border-radius: 3px;
    color: var(--cor-fonte-destaque);
    font-weight: 600;
    background-color: var(--cor-fonte-comum);
    align-self: flex-start;
    transition: background .5s, color .5s;
}
.c-sect4_suporte_text .c-sect4_botao:hover {
    background: var(--cor-primaria);
    color: var(--cor-fonte-comum);
}

.c-main_sect4_suporte .c-sect4_suporte_img {
    background-image: url("../../img/landing_ead.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    width: 100%;
    height: 400px;
}

/* ======== LAYOUT: FOOTER ======== */
.l-footer {
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #757678;
    margin-top: 20vh;
    color: var(--cor-fonte-comum);
}
.l-footer h4, .l-footer h5 {
    font-size: 1.2em;
    font-weight: 600;
}

.l-footer .s-footer_sect {
    width: 100%;
    max-width: 1300px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 1em;
}

.l-footer .c-footer_esquerda ul {
    font-weight: 600;
    padding: 0;
}

.l-footer .c-footer_meio {
    display: flex;
    flex-direction: row;
    gap: 2em;
}
.c-footer_meio div {
    display: flex;
    flex-direction: column;
}

.l-footer .c-footer_direita {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 2em;
}
.c-footer_direita .c-footer_direita_contato {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    font-weight: 600;
}
.c-footer_direita .c-footer_direita_contato a {
    padding: .4em .8em;
    background-color: #656565;
    user-select: none;
    cursor: pointer;
}
.c-footer_direita .c-footer_direita_redes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8em;
}
.c-footer_direita_redes .s-footer_redes_icones {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}


/* ======== MEDIA QUERIES ======== */
@media (min-width: 768px) {
    .l-footer .c-footer_direita {
        width: unset;
        align-items: unset;
    }
    .c-footer_direita .c-footer_direita_contato {
        display: flex;
        flex-direction: column;
        gap: .8em;
    }
}

@media (min-width: 992px) {
    .s-main_sect4 .c-main_sect4_suporte {
        flex-direction: row;
    }

    .c-main_sect4_suporte .c-sect4_suporte_text {
        position: static;
        width: 50%;
    }
}

@media (max-width: 992px) {
    /* ======== MEDIA QUERIES: Main_Sect2 ======== */
    .l-main .s-main_sect2 {
        justify-content: center;
        position: relative;
    }

    .s-main_sect2 .c-main_sect2_banner {
        margin-bottom: 0px;
    }

    .s-main_sect2 .c-main_sect2_dados {
        position: absolute;
        top: 50%;
        transform: translateY(-40%);
    }

    /* ======== MEDIA QUERIES: Main_Sect3 ======== */
    .c-sect3_cursos_banner_text {
        text-align: center;
    }
    .c-main_sect3_cursos .c-sect3_cursos_empresas {
        flex-direction: column;
        gap: 2em;
    }

    /* OBS: evitando, fazer caroussel */
    .c-sect3_cursos_empresas img:nth-child(odd) {
        display: none;
    }

    .c-main_sect3_cursos .c-sect3_botao {
        padding: 10px 50px;
    }
}