/* inicio conf geral */
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: #fff;
}
html{
    font-size: 62.5%;
}
img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
main{
    width: 1216px;
    margin: 0 auto;
    background-color: #111111;
    height: 100%;
}
h2{
    font-weight: 800;
}
span{
    font-weight: 800;
}
.mobile{
    display: none;
}
.pc{
    display: block;
}
@font-face {
    font-family: SohneBreit-Halbfett;
    src: url(fonts/SohneBreit-Halbfett.otf);
}
@font-face {
    font-family: SohneBreit-Leicht;
    src: url(fonts/SohneBreit-Leicht.otf);
}
@font-face {
    font-family: SöhneBreit-Extrafett;
    src: url(fonts/SöhneBreit-Extrafett.otf);
}
/* fim conf geral */


/* inicio textos principais*/
.bloco-texto1, 
.bloco-texto2,
.bloco-texto3,
.bloco-texto4,
.bloco-texto5{
    width: 100%;
    text-align: center;
}
.bloco-texto1{
    margin: 30px 0;
}
.bloco-texto2,
.bloco-texto3,
.bloco-texto4,
.bloco-texto5{
    margin: 30px 0 80px 0;
}
.bloco-texto1 h2{
    font-size: 3.7rem;
}
.bloco-texto2 h2,
.bloco-texto3 h2,
.bloco-texto5 h2{
    font-size: 4.7rem;
    line-height: 5.5rem;
}
.bloco-texto4 h2{
    font-size: 3.7rem;
}
.bloco-texto2 h2{
    margin-bottom: 30px;
    font-family: SöhneBreit-Extrafett;
}
.bloco-texto1 h2,
.bloco-texto3 h2,
.bloco-texto4 h2,
.bloco-texto5 h2{
    margin-bottom: 15px;
    font-family: SöhneBreit-Extrafett;
}
.bloco-texto2 .img-bloco{
    width: 100%;
    margin-bottom: 30px;
}
.bloco-texto1 p, 
.bloco-texto2 p,
.bloco-texto3 p,
.bloco-texto4 p,
.bloco-texto5 p{
    font-size: 1.9rem;
    font-family: SohneBreit-Leicht;
}
.bloco-texto2 p span{
    font-family: SohneBreit-Halbfett;
    font-size: 2.2rem;
}
.bloco-texto3 p,
.bloco-texto4 p,
.bloco-texto5 p{
    margin-bottom: 30px;
}
/* fim textos principais*/


/* inicio bloco de gifs */
.bloco-gif{
    width: 100%;
    margin-bottom: 70px;
}
.gifs-row{
    display: flex;
    gap: 50px;
    justify-content: center;
    margin-bottom: 25px;
}
.gifs-control{
    height: 300px;
    width: 500px;
}
.gifs-text{
    text-align: center;
}
.gifs-text h4{
    font-size: 2.1rem;
    margin: 20px 0 10px 0;
    font-family: SöhneBreit-Extrafett;
}
.gifs-text p{
    font-size: 1.8rem;
    font-family: SohneBreit-Halbfett;
}
/* fim bloco de gifs */



/* inicio cong geral destaques */
.destaque,
.destaque2,
.destaque3{
    width: 100%;
    display: flex;
    flex-direction: row;
}
.destaque2,
.destaque3{
    margin-bottom: 70px;
}
.divisor{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 70px;
}
/* fim cong geral destaques */


/* inicio 1° destaques */
.destaque{
    justify-content: center;
    gap: 80px;
    margin-bottom: 80px;
}
.img-destaque{
    width: 90%;
    margin-left: auto;
}
.conteudo-texto-destaque1,
.conteudo-texto-destaque2{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.conteudo-texto-destaque1{
    justify-content: space-around;
    width: 85%;
    gap: clamp( 0.5rem, .2vw, 1rem);
}
.conteudo-texto-destaque2{
    justify-content: center;
    gap: clamp( 0.5rem, .2vw, 1rem);
}
.conteudo-texto-destaque1 h4{
    color: #36bcf2;
    font-size: 1.5rem;
    font-family: SohneBreit-Leicht;
}
.conteudo-texto-destaque1 h5,
.conteudo-texto-destaque2 h5{
    font-family: SöhneBreit-Extrafett;
}
.conteudo-texto-destaque1 h5 span{
    font-size: clamp(1.3rem, 3vw, 3rem);
    white-space: nowrap;
    font-weight: 800;
    line-height: clamp(1.3rem, 3vw, 3rem);
}
.conteudo-texto-destaque2 h5 span{
    font-size: clamp(1rem, 2.3vw, 3rem);
    white-space: nowrap;
    font-weight: 800;
    line-height: clamp(1.2rem, 3vw, 3rem);
}
.conteudo-texto-destaque1 p{
    /* font-size: 1.9rem; */
    font-size: clamp(.72rem, 1.3vw, 1.8rem);
    white-space: nowrap;
    font-weight: 530;
    line-height: clamp(.9rem, 1.2vw, 2rem);
    font-family: SohneBreit-Leicht;
}
.conteudo-texto-destaque2 p{
    /* font-size: 1.9rem; */
    font-size: clamp(.8rem, 1.7vw, 2rem);
    white-space: nowrap;
    font-weight: 530;
    line-height: clamp(.9rem, 1.5vw, 2rem);
    font-family: SohneBreit-Leicht;
}
/* fim 1° destaques */


/* inicio 2° destaque */
.destaque2-coluna{
    width: 500px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    gap: 20px;
}
.destaque2-img1,
.destaque2-img2{
    margin: 0 auto;
}
.destaque2-img2{
    height: 200px;
    width: 200px;
}
.destaque2-img2 img{
    border-radius: 10px;
}
.destaque2-img1{
    margin-left: auto;
    height: 200px;
    width: 350px;
}
.destaque2-texto1{
    text-align: center;
}
.destaque2-texto2{
    text-align: center;
}
.destaque2-texto1 h5,
.destaque2-texto2 h5{
    font-size: 2.2rem;
    margin-bottom: 8px;
    font-family: SöhneBreit-Extrafett;
}
.destaque2-texto2 h5{
    margin-top: 25px;
}
.destaque2-texto1 p,
.destaque2-texto2 p{
    font-size: 1.5rem;
    font-family: SohneBreit-Leicht;;
}
/* fim 2° destaque */


/* inicio 3° destaque */

.destaque3-coluna{
    display: flex;
}
.destaque3-img{
    width: 200px;
    height: 205px;
}
.destaque3-divisor{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
}
.destaque3-divisor h6{
    font-size: 1.8rem;
    font-weight: 720;
    line-height: 2.5rem;
    margin-bottom: 10px;
    font-family: SöhneBreit-Extrafett;
}
.destaque3-divisor{
    font-size: 1.5rem;
}
.destaque3-texto2{
    width: 388px;
}
.destaque3-texto2 p{
    font-family: SohneBreit-Leicht;
}
.destaque3-texto p{
    font-family: SohneBreit-Leicht;
}


/* fim 3° destaque */


/* media querys */
@media screen and (max-width: 1216px) {
    main{
        width: 100vw;
    
    }
    .bloco-texto1 h2,
    .bloco-texto2 h2,
    .bloco-texto3 h2,
    .bloco-texto4 h2,
    .bloco-texto5 h2{
        font-size: 3.1rem;
        line-height: 4rem;
    }
    .bloco-texto1 p, 
    .bloco-texto2 p,
    .bloco-texto3 p,
    .bloco-texto4 p,
    .bloco-texto5 p{
        font-size: 1.6rem;
    }
    .gifs-control{
        height: 250px;
        width: 400px;
    }

    .gifs-text h4{
        font-size: 1.9rem;
    }
    .gifs-text p{
        font-size: 1.5rem;
    }
    .destaque{
        gap: 70px;
        margin-bottom: 80px !important;
    }
    .img-destaque{
        width: 80%;
        margin-left: auto;
        height: 100%;
    }
    
    .conteudo-texto-destaque2{
        justify-content: center;
        gap: 20px;
    }
    .conteudo-texto-destaque1 h4{
        font-size: 1.5rem;
    }
    /* .conteudo-texto-destaque1 h5,
    .conteudo-texto-destaque2 h5{
        font-size: 2rem;
        line-height: 2rem;
    } */
    /* .conteudo-texto-destaque1 p,
    .conteudo-texto-destaque2 p{
         font-size: 1.36rem; 
    } */
    .destaque2-texto1 h5,
    .destaque2-texto2 h5{
        font-size: 2.15rem;
        margin-bottom: 8px;
    }
    .destaque2-texto1 p,
    .destaque2-texto2 p{
        font-size: 1.4rem;
    }
    .destaque3-img{
        width: 160px;
        height: 162px;
    }
    .destaque3-divisor{
        gap: 10px;
    }
    .destaque3-divisor h6{
        font-size: 1.5rem;
        line-height: 2rem;
    }
    .destaque3-divisor p{
        font-size: 1.2rem;
    }
    .destaque3-texto2{
        width: 308px;
    }
}


@media screen and (max-width: 1025px) {
    .bloco-texto1 h2,
    .bloco-texto2 h2,
    .bloco-texto3 h2,
    .bloco-texto4 h2,
    .bloco-texto5 h2{
        font-size: 2.3rem;
    }
    .bloco-texto1 p, 
    .bloco-texto2 p,
    .bloco-texto3 p,
    .bloco-texto4 p,
    .bloco-texto5 p{
        font-size: 1.15rem;
    }
    .bloco-texto2 p span{
        font-family: SohneBreit-Halbfett;
        font-size: 2rem;
    }
    .gifs-control{
        height: 200px;
        width: 300px;
    }

    .gifs-text h4{
        font-size: 1.4rem;
    }
    .gifs-text p{
        font-size: 1.2rem;
    }
    .destaque2-coluna{
        width: 350px;
        gap: 10px;
    }
    .destaque2-img2{
        height: 150px;
        width: 150px;
    }
    .destaque2-img2 img{
        border-radius: 10px;
    }
    .destaque2-img1{
        margin-left: auto;
        height: 150px;
        width: 260px;
    }
    .destaque2-texto1 h5,
    .destaque2-texto2 h5{
        font-size: 1.7rem;
        margin-bottom: 8px;
    }
    .destaque2-texto1 p,
    .destaque2-texto2 p{
        font-size: 1.2rem;
    }
    .destaque3-img{
        width: 130px;
        height: 132px;
    }
    .destaque3-divisor{
        gap: 10px;
    }
    .destaque3-divisor h6{
        font-size: 1.5rem;
        line-height: 2rem;
    }
    .destaque3-divisor p{
        font-size: 1.1rem;
    }
    .destaque3-texto2{
        width: 245px;
    }
}
@media screen and (max-width: 768px) {
    .mobile{
        display: block;
    }
    .pc{
        display: none;
    }
    .bloco-texto1,
    .bloco-texto2,
    .bloco-texto3,
    .bloco-texto4,
    .bloco-texto5{
        margin: 15px 0 35px 0;
    }
    .bloco-texto1 h2,
    .bloco-texto2 h2,
    .bloco-texto3 h2,
    .bloco-texto4 h2,
    .bloco-texto5 h2{
        font-size: 1.8rem;
        line-height: 2.2rem;
    }
    .bloco-texto1 p, 
    .bloco-texto2 p,
    .bloco-texto3 p,
    .bloco-texto4 p,
    .bloco-texto5 p{
        font-size: .98rem;
    }
    .bloco-texto1 p{
        
    }
    .bloco-texto2 p span{
        font-family: SohneBreit-Halbfett;
        font-size: 1.6rem;
    }
    .gifs-row{
        flex-direction: column;
        gap: 25px;
    }
    .gifs-control{
        height: 250px;
        width: 400px;
        margin: 0 auto;
    }
    .gifs-text h4{
        font-size: 1.9rem;
        margin: 20px 0 10px 0;
    }
    .gifs-text p{
        font-size: 1.6rem;
    }
    .destaque{
        gap: 40px;
        margin-bottom: 35px !important;
    }
    .img-destaque{
        width: 80%;
        margin-left: auto;
    }
    .img-bloco{
        margin-bottom: 15px !important;
    }
    .conteudo-texto-destaque2{
        justify-content: center;
        gap: 20px;
    }
    .conteudo-texto-destaque1 h4{
        font-size: 1rem;
    }
    /* .conteudo-texto-destaque1 h5,
    .conteudo-texto-destaque2 h5{
        font-size: 1.3rem;
        line-height: 1.5rem;
    } */
    /* .conteudo-texto-destaque1 p,
    .conteudo-texto-destaque2 p{
        font-size: .7rem; 
    } */
    .destaque2{
        flex-direction: column;
        gap: 70px;
    }
    .divisor{
        margin-bottom: 0px;
    }
    .destaque2-coluna{
        width: 100vw;
        display: flex;
    }
    .destaque2-img2{
        height: 170px;
        width: 170px;
    }
    .destaque2-img1{
        margin-left: auto;
        height: 170px;
        width: 290px;
    }
    .destaque2-texto1 h5,
    .destaque2-texto2 h5{
        font-size: 2rem;
        margin-bottom: 8px;
    }
    .destaque2-texto2 h5{
        margin-top: 25px;
    }
    .destaque2-texto1 p,
    .destaque2-texto2 p{
        font-size: 1.5rem;
    }
    .divisor{
        width: 100%;
    }
    .destaque3{
        width: 100%;
        flex-direction: column;
        margin-bottom: 50px;
        gap: 80px;
    }

    .destaque3-img{
        width: 200px;
        height: 160px;
    }
    .destaque3-divisor{
        justify-content: flex-start;
        gap: 5px;
        width: 475px;
        margin: 0 auto;
    }
    .destaque3-divisor h6{
        font-size: 1.77rem;
    }
    .destaque3-divisor p{
        font-size: 1.35rem;
    }
    .destaque3-texto,
    .destaque3-texto2{
        width: 100%;
    }
    .destaque3-texto2 p{
        font-size: 1.4rem;
    }
}

@media screen and (max-width: 620px) {
    .bloco-texto1,
    .bloco-texto2,
    .bloco-texto3,
    .bloco-texto4,
    .bloco-texto5{
        margin: 15px 0 35px 0;
    }
    .bloco-texto1 h2,
    .bloco-texto2 h2,
    .bloco-texto3 h2,
    .bloco-texto4 h2{
        font-size: 1.4rem;
        line-height: 1.8rem;
    }
    .bloco-texto5 h2{
        font-size: 1.8rem;
        line-height: 1.8rem;
    }
    .bloco-texto3 h2,
    .bloco-texto4 h2{
        margin-bottom: 5px !important;
    }
    .bloco-texto1 p, 
    .bloco-texto2 p,
    .bloco-texto3 p,
    .bloco-texto4 p,
    .bloco-texto5 p{
        font-size: .77rem;
    }
    .bloco-texto2 p span{
        font-family: SohneBreit-Halbfett;
        font-size: 1.2rem;
    }
    .gifs-row{
        flex-direction: column;
        gap: 25px;
    }
    .gifs-control{
        height: 250px;
        width: 400px;
        margin: 0 auto;
    }
    .gifs-text h4{
        font-size: 1.8rem;
        margin: 20px 0 10px 0;
    }
    .gifs-text p{
        font-size: 1.6rem;
    }
    .destaque{
        gap: 20px;
        margin-bottom: 35px !important;
    }
    .img-destaque{
        width: 80%;
        margin-left: auto;
    }
    
    .conteudo-texto-destaque2{
        justify-content: center;
        gap: 20px;
    }
     /* .conteudo-texto-destaque1 h4{
        font-size: 1rem;
    } 
    .conteudo-texto-destaque1 h5,
    .conteudo-texto-destaque2 h5{
        font-size: 1.3rem;
        line-height: 1.5rem;
    }
    .conteudo-texto-destaque1 p,
    .conteudo-texto-destaque2 p{
         font-size: .7rem;
    } */
    .conteudo-texto-destaque1,
    .conteudo-texto-destaque2{
        height: 100%;
        width: 100%;
    }
    .destaque2{
        flex-direction: column;
    }
    .divisor{
        margin-bottom: 0px;
    }
    .destaque2-coluna{
        width: 100vw;
        display: flex;
    }
    .destaque2-img2{
        height: 170px;
        width: 170px;
    }
    .destaque2-img1{
        margin-left: auto;
        height: 145px;
        width: 255px;
    }
    .destaque2-texto1 h5,
    .destaque2-texto2 h5{
        font-size: clamp( 1.2rem, 3vw, 1.45rem);
        margin-bottom: 7px;
    }
    .destaque2-texto2 h5{
        margin-top: 25px;
    }
    .destaque2-texto1 p,
    .destaque2-texto2 p{
        font-size: clamp( 1rem, 3vw, 1.1rem);
    }
    .divisor{
        width: 100%;
        gap: 40px;
    }
    .destaque3{
        width: 100%;
        flex-direction: column;
        margin-bottom: 80px;
        gap: 40px;
    }

    .destaque3-img{
        width: 165px;
        height: 120px;
    }
    .destaque3-divisor{
        justify-content: flex-start;
        gap: 5px;
        width: 400px;
        margin: 0 auto;
    }
    .destaque3-divisor h6{
        font-size: 1.04rem;
        line-height: clamp( 1.3rem, 3vw, 1.4rem);;
    }
    .destaque3-divisor p{
        font-size: .823rem;
    }
    .destaque3-texto,
    .destaque3-texto2{
        width: 100%;
    }
}

@media screen and (max-width: 481px) {
    .bloco-texto1,
    .bloco-texto2,
    .bloco-texto3,
    .bloco-texto4,
    .bloco-texto5{
        margin: 5px 0 25px 0;
    }
    .bloco-texto1 h2,
    .bloco-texto2 h2,
    .bloco-texto3 h2,
    .bloco-texto4 h2,
    .bloco-texto5 h2{
        font-size: 1.2rem;
        line-height: 1.6rem;
        margin-bottom: 5px;
    }
    .bloco-texto2 p span{
        font-family: SohneBreit-Halbfett;
        font-size: .9rem;
    }
    .bloco-texto1 p, 
    .bloco-texto2 p,
    .bloco-texto3 p,
    .bloco-texto4 p,
    .bloco-texto5 p{
        font-size: .65rem;
    }
    .bloco-texto1 p{
        font-size: .6rem;
    } 
    .bloco-texto3 p,
    .bloco-texto4 p,
    .bloco-texto5 p{
        margin-bottom: 15px !important;
    }
    .gifs-row{
        flex-direction: column;
    }
    .gifs-control{
        height: 205px;
        width: 340px;
    }
    .gifs-text h4{
        font-size: 1.6rem;
        margin: 20px 0 10px 0;
    }
    .gifs-text p{
        font-size: 1.4rem;
    }
    .destaque{
        gap: 12px;
        margin-bottom: 30px;
    }
    .destaque2{
        gap: 80px !important;
    }
    .img-destaque{
        width: 90%;
        margin-left: auto;
    }
    
    .conteudo-texto-destaque2{
        justify-content: center;
        gap: 10px;
    }
    .conteudo-texto-destaque1 h4{
        font-size: .8rem;
    }
    .conteudo-texto-destaque1 h5 span,
    .conteudo-texto-destaque2 h5 span{
        font-size: 1rem;
        line-height: 1.1rem;
    }
    .conteudo-texto-destaque1 p{
      font-size: clamp(.5rem, 1.5vw, .66rem);
    }
    .conteudo-texto-destaque2 p{
        font-size: clamp(.71rem, 1.8vw, .85rem);
    }
    
    .divisor{
        margin-bottom: 0;
        width: 100%;
    }
    .destaque3{
        margin-bottom: 45px;
    }
    .destaque3-img{
        width: 200px;
        height: 120px;
    }
    .destaque3-divisor{
        justify-content: flex-start;
        gap: 5px;
        width: 320px;
    }
    .destaque3-texto,
    .destaque3-texto2{
        width: 100%;
    }
}