@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root{
    --primary-color: #622A76;
    --background-color: #612674;
    --default-gap: 1rem;
}

html{
    font-family: "DM Sans", Arial, sans-serif;
}

.cabecalho{
    text-align: center;
    /* padding: 1.6rem; */
}

.max_width{
    max-width: 70.25em;
    margin: auto;
}

.btn_nav{
    background-color: var(--background-color);
}

.btn_nav ul{
    list-style-type: none;
    padding: 0;
    margin-bottom: 0;
}

.btn_nav a{
    color: white;
    text-decoration: none;
    display: block;
    padding: 1.2em;
}

.btn_nav li:hover{
    background-color: color-mix(in srgb, var(--primary-color), white 10%);
}

.herobanner{
    text-align: center;
    background-color: #f6f6f6;
    padding: 1em;
}

.icon_play{
    height: 5em;
    width: 5em;
    display: none;
}

.icon_play img{
    width: 100%;
}

.herobanner_title{
    color: var(--primary-color);
    font-size: 1.5em;
    margin: 1.5em;
}

.herobanner_subtitle{
    font-size: 1em;
    color: color-mix(in srgb, var(--primary-color), white);
    line-height: 1.5;
}

.herobanner_btn{
    display: inline-block;
    padding: .9em 2.3em;
    background-color: #58c4c4;
    text-decoration: none;
    color: white;
    border-radius: 10px;
}

/* md */
@media screen and (min-width: 48.75em) {
    .cabecalho{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .top_header_logo{
        margin-left: 1.6em;
    }

    .btn_nav{
        background-color: initial;
    }

    .btn_nav li{
        display: inline-block;
    }

    .btn_nav a{
        color: var(--primary-color);
    }

    .btn_nav a:hover{
        background-color: color-mix(in srgb, var(--primary-color), white 80%);
    }
}

/* md */
@media screen and (min-width: 48.75em){
    .herobanner{
        background-color: var(--primary-color);
        color: white;
    }
    
    .icon_play{
        display: block;
        margin: auto;
    }

    .herobanner_title, .herobanner_subtitle{
        color: white;
    }
}

/* lg */
@media screen and (min-width: 56.25em) {
    .herobanner{
        background-image: url(../images/bg_topo_1198x670.jpg);
        aspect-ratio: 1198 / 670;
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
    
    .herobanner .maxwidth{
        margin: initial;
        margin-bottom: 4em;
        width: 75%;
    }
}

/* xl */
@media screen and (min-width: 74em){
    .herobanner{
        background-image: url(../images/bg_topo_1600x1374.jpg);
        background-blend-mode: luminosity;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center top;
        max-height: 80vh;
        width: 100%;
    }

    .herobanner .maxwidth{
        width: 50%;
    }

    .herobanner_title, .herobanner_subtitle{
        text-shadow: 4px 6px 6px #00000080;
    }

    .icon_play{
        width: 7em;
        height: 7em;
    }
}

.middle_content{
    background-color: #f6f6f6;
    text-align: center;
    padding: 2em;
}

.middle_content a{
    color: inherit;
    text-decoration: none;
}

.middle-content-title{
    color: var(--primary-color);
    text-transform: uppercase;
    font-size: 1.25em;
}

.middle_content span[class^="icon-"]{
    color: var(--primary-color);
    font-size: 3.5em;
}

.middle_content p{
    line-height: 1.5;
}

/* 
    min-width: 0        -> col-sm
    min-width: 48.75em  -> col-md
    min-width: 56.25em  -> col-lg
    min-width: 74em     -> col-xl
*/

.row{
    display: flex;
    flex-wrap: wrap;
    gap: var(--default-gap);
}

.col{
    flex: 1 0 auto;
    width: 100%;
}

.col-sm-12{
    width: 100%;
}

@media screen and (min-width: 48.75em){
    .col-md-6{
        width: calc(50% - var(--default-gap));
    }
}

@media screen and (min-width: 74em){
    .col-xl-3{
        width: calc(25% - var(--default-gap));
    }

    .col-xl-6{
        width: calc(50% - var(--default-gap));
    }
}

.main_content{
    padding: 2em;
}

.main_content p{
    line-height: 1.2;
}

.main_content_img img{
    width: 100%;
}

.main_content_title{
    text-transform: uppercase;
    color: var(--primary-color);
    font-weight: normal;
    letter-spacing: .2em;
    font-size: 1.25em;
}

.main_content .row{
    row-gap: 4em;
    /* gap: 4em 1em; */
}

.main_content_article{
    container: main_content / inline-size;
}

@container main_content (min-width: 600px){
    .maincontent_container{
        display: flex;
        gap: var(--default-gap);
    }

    .main_content_title{
        margin-top: 0;
    }

    .main_content_img img{
        max-height: 382px;
    }

    .main_content_img{
        flex: 0 0 25%;
    }

    .main_content_text{
        flex-grow: 1;
    }
}

.footer{
    background: #25303e;
    color: #83969f;
    text-align: center;
    padding: 1em;
}

/* @media screen and (min-width: 37.5em){
    .main_content_article,
    .main_content_img img{
        display: flex;
        gap: 1em;
    }
} */