*{
    padding: 0;
    margin: 0;
}
:root{
    --cinza: #1D1D1D;
    --preto: black;
    --branco: white;
    --verde: #24340F;
    --textosFooter:1.2rem;
  }
body{
    background-color: #FFFFFF; 
    max-width: 100%;
    overflow-x: hidden;
}

main {
    margin-block: 10vh 15vh;
}

.title{
    color: #000000;
    font-family: 'Krona One', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-style: normal;
    font-weight: 500;
    font-size: clamp(1em, 4em, 4em);
    text-align: center;
}

.Stitle-1{
    width: 60vw;
    margin-top: 1em;
}

#title-flex{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

.container-flex1{
    margin-top: 2.5rem;
    margin-right: 1em;
    margin-left: 1em;
    display: flex;
    flex-flow: row;
    align-items: stretch;
    justify-content: space-between;
    overflow: hidden;
}

.text{
    font-family: 'Kanit', sans-serif;
    font-style: normal;
    font-size: clamp(1.3em, 1.7em, 1.7em);
    line-height: 1.5em;
    display: flex;
    letter-spacing: 0.01em;
    color: #000000;
    text-align: justify;
 
}

#text1{
    margin-top: .5em;
}

.img1-RSBE{
    width: 100%;
    height: 100%;
}

.img1-RSBE img{
    margin-top: 2em;
}

/* SQUARES */

/* SQUARE-WRAPPER */

div.squares-wrapper {
    display: flex;
    flex-wrap: wrap;

    justify-content: space-around;
    

    gap: 2vh;

    margin-block: 5vh;
    width: 100vw;
}

/* SQUARE-BOX */

div.square-box {
    display: flex;
    flex-direction: column;

    width: 50vh;

    overflow: hidden;

    row-gap: 2vh;

    align-items: center;
    margin-top: 2em;
    margin-left: 1rem;
    margin-right: 2rem;
}

div.square-box img {
    width: 100%;
    border-radius: 5vh;

    transition: 0.3s all;
    backface-visibility: hidden;
}

div.square-box p {
    font-family: 'Kanit', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 2em;
    letter-spacing: 0.05em;
    color: #000000;
    text-align: center;
    line-height: 1.5em;
}

div.square-box:hover img {
    opacity: 80%;
}

/*square end*/

.container-flex2{ 
    margin-right: 1em;
    margin-left: 1em;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

#text2{
    display: flex;
    text-align: justify;
}

.Stitle-2{
    width: 50vw;
    font-size: clamp(1em, 4em, 4em);
    display: flex;
    align-items: center;
    margin-bottom: .5em;
    justify-content: center;
}

.pdf{
    margin-top: 1.5em;
    display: flex;
    justify-content: center;
    cursor: pointer;
}

#img-pdf1, #img-pdf2{
    height: 18vh;
    width: 100%;
    transition: all .5s ease;
}

#img-pdf1:hover{
    transform: scale(1.1);
}


#img-pdf2:hover{
    transform: scale(1.1);
}

#pdf1, #pdf2{
    display: flex;
    flex-direction: column;
    text-align: center;
}


.textpdf{
    font-family: 'Kanit', sans-serif;
    font-style: normal;
    font-size: 1.4em;
    line-height: 1.2em;
    margin-right: 1em;
    margin-left: 1em;
    letter-spacing: 0.05em;
    color: #000000;
    line-height: 1.5em;
    transition: all .3s;
    cursor: pointer;
    font-weight: 600;
    text-align: center;
}

.textpdf:hover{
   opacity: 0.6;
}


@media screen and (min-width:100px) and (max-width:767px) { 
    .title{
        font-size: 2.2em;
        padding-left: 3rem;
        padding-right: 3rem;
    }
    
    #title-flex, .Stitle-1{
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
    }

    .container-flex1{
        display: flex;
        flex-direction: column;
    }

    .text{
        margin-top: 0;
        margin-left: .5rem;
        margin-right: .5rem;
        font-size: 1em;
    }

    #text1{
        margin-top: 0;
    }

    .img1-RSBE{
        margin-top: 1.5em;
    }

    .container-flex2{
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .Stitle-2{
        margin-bottom: .8em;
        width: 80vw;
        padding-left: .5rem;
        padding-right: .5rem;
        display: flex;
        align-items: center;
    }

    .squares-flex{
        display: flex;
        margin-top: 5em;
        flex-direction: column;
        align-items: center;
        
    }

    #img-square1, #img-square2, #img-square3{
        margin-top: 3em;
        margin-left: 2rem;
    }

  }

  @media screen and (min-width:760px) and (max-width:936px){
    .squares-flex #square1, #square2, #square3{
        display: flex;
        margin-top: 5em;
        flex-direction: row;
        align-items: center;
        margin-top: 0;
    }

  }
  
  @media screen and (min-width:768px) and (max-width:1015px){
    .title{
        font-size: 4.4em;
    }
    
    #title-flex, .Stitle-1{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    }

    .container-flex1{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .text{
        margin-top: 0;
        margin-left: 1rem;
        margin-right: 1rem;
    }

    #text1{
        display: flex;
        flex-flow: wrap;
        justify-content: center;
        width: 90vw;
        margin-top: 0;
    }

    .img1-RSBE{
        margin-top: 1.5em; 
    }

    .container-flex2{
        margin-left: 2.5rem;
        margin-right: 1rem;
    }

    .Stitle-2{
        margin-bottom: .8em;
        width: 40vw;
        font-size: 3.3em;
        padding-left: .5rem;
        padding-right: .5rem;
        display: flex;
        align-items: center;
    }

    #text2{
        margin-left: .5rem;
        margin-right: .5rem;
    }
  }