@charset "UTF-8";
/* MEDIA QUERIES */

@media screen and (min-width: 695px) and (max-width: 900px) {
    header.header-container{
        align-items: center;
        justify-content: center;
        gap: 35px;
    }
    header.header-container h1{
        font-size: 40px;
        text-align: center;
    }
    header.header-container p{
        font-size: 15px;
        text-align: center;
        max-width: 650px;
    }
    header.header-container .header-botao button{
        width: 285px;
    }
    section.section-container1, section.section-container2, section.section-container3{
        flex-flow: row wrap;
        align-items: center;
        gap: 20px;
        width: 100%;
    }
    .main-img{
        width: 100%;
        max-width: 335px;
    }
    div.section-container1-text, div.section-container2-text, div.section-container3-text{
        max-width: 320px;
    }
    div.section-container2-text{
        order: -1;
        max-width: 450px;
    }
    section.section-container1 h2 , section.section-container2 h2, section.section-container3 h2{
        min-width: 50px;
        max-width: 300px;
        font-size: 18px;
        padding-bottom: 13px;
    }
    section.section-container1 p, section.section-container2 p , section.section-container3 p{
        min-width: 50px;
        max-width: 280px;
        font-size: 13px;   
    }
    section.section-container4{
        align-items: center;
        justify-content: center;
    }
    div.section-container4-text{
        text-align: center;
    }
    div.section-container4-text h2{
        font-size: 19px;
        padding-bottom: 10px;
    }
    div.section-container4-text p{
        font-size: 13px;
        max-width: 650px;
    }
    
}
@media screen and (min-width: 901px) and (max-width: 1200px) {
    header.header-container{
        align-items: center;
        justify-content: center;
        gap: 35px;
    }
    header.header-container h1{
        font-size: 50px;
        text-align: center;
    }
    header.header-container p{
        font-size: 15px;
        text-align: center;
        max-width: 800px;
    }
    header.header-container .header-botao button{
        width: 335px;
    }
    section.section-container1, section.section-container2, section.section-container3{
        flex-flow: row wrap;
        align-items: center;
        gap: 20px;
        width: 100%;
    }
    .main-img{
        width: 100%;
        max-width: 465px;
    }
    div.section-container1-text, div.section-container2-text, div.section-container3-text{
        max-width: 420px;
    }
    div.section-container2-text{
        order: -1;
        max-width: 300px;
    }
    section.section-container1 h2 , section.section-container2 h2, section.section-container3 h2{
        min-width: 50px;
        max-width: 240px;
        font-size: 27px;
        padding-bottom: 13px;
    }
    section.section-container1 p, section.section-container2 p , section.section-container3 p{
        min-width: 50px;
        max-width: 280px;
        font-size: 13px;   
    }
    section.section-container4{
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    div.section-container4-text{
        text-align: center;
    }
    div.section-container4-text h2{
        font-size: 25px;
        padding-bottom: 10px;
        text-align: center;
    }
    div.section-container4-text p{
        font-size: 13px;
        max-width: 850px;
    }
}
@media screen and (min-width: 1201px) {
    header.header-container{
        align-items: center;
        justify-content: center;
        gap: 35px;
    }
    header.header-container h1{
        font-size: 50px;
        text-align: center;
    }
    header.header-container p{
        font-size: 15px;
        text-align: center;
        max-width: 800px;
    }
    header.header-container .header-botao button{
        width: 335px;
    }
    section.section-container1, section.section-container2, section.section-container3{
        flex-flow: row wrap;
        align-items: center;
        gap: 20px;
        width: 100%;
    }
    .main-img{
        width: 100%;
        max-width: 565px;
    }
    div.section-container1-text, div.section-container2-text, div.section-container3-text{
        max-width: 420px;
    }
    div.section-container2-text{
        order: -1;
        max-width: 300px;
    }
    section.section-container1 h2 , section.section-container2 h2, section.section-container3 h2{
        min-width: 50px;
        max-width: 240px;
        font-size: 27px;
        padding-bottom: 10px;
    }
    section.section-container1 p, section.section-container2 p , section.section-container3 p{
        min-width: 50px;
        max-width: 280px;
        font-size: 13px;   
    }
    section.section-container4{
        align-items: center;
        justify-content: center;
        width: 100%;
        
    }

    div.section-container4-text{
        text-align: center;
    }
    div.section-container4-text h2{
        font-size: 25px;
        padding-bottom: 10px;
        text-align: center;
    }
    div.section-container4-text p{
        font-size: 13px;
        max-width: 850px;
    }
    
}