@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700;900&family=Rubik:wght@300;500;600;700;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;     
  }
    
body {
    font-size: 100%;
    margin: 0 auto;
    font-family: 'Montserrat';
    max-width: 960px;
    background-color: #FFFFFF;
    }

h1 {
    font-family: 'Rubik';
font-style: normal;
font-weight: 700;
font-size: clamp(2.2em, 3em + 2vw, 3vw); 
line-height: 96%;
/* or 51px */
letter-spacing: -0.02em;
text-transform: uppercase;
color: #00D9B4;
text-shadow: 0px 2.68804px 2.68804px rgba(0, 0, 0, 0.25);
    }

    .h1_agra {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 700;
        font-size: clamp(1.5em, 1em + 0.7vw, 3vw); 
        line-height: 146%;
        /* or 49px */
        text-align: center;
        letter-spacing: -0.06em;     
        color: #FFFFFF;
        text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
        }

h2 {
font-family: 'Montserrat';
font-style: normal;
font-weight: 900;
font-size: clamp(2em, 1em + 2vw, 5vw); 
line-height: 140%;
color: #FFFFFF;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
}

.h2_especial {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 700;
    font-size: clamp(1em, 1em + 1.5vw, 5vw); 
    line-height: 100%;
    /* or 46px */
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;
    text-shadow: 0px 2.68804px 2.68804px rgba(0, 0, 0, 0.25);
}

.h2_especial_form {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 700;
    font-size: 35px;
    line-height: 127%;
    /* or 44px */
    text-align: right;
    letter-spacing: -0.06em;
    color: #FFFFFF;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}

.h3_especial {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 900;
    font-size: clamp(1em, 1em + 0.8vw, 4vw); 
    line-height: 140%;
    /* identical to box height */  
    color: #009BA7;
}

h3 {
font-family: 'Montserrat';
font-style: normal;
font-weight: 900;
font-size: clamp(2em, 1em + 1.5vw, 4vw); 
line-height: 140%;
/* identical to box height */
color: #009BA7;
text-align: left;
}

p {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: clamp(1em, 1em + 0.3vw, 4vw); 
    line-height: 140%;
    color: #FFFFFF;
}

.p_especial {
    font-family: 'Montserrat';
    font-style: normal;
    text-align: left;
    font-weight: 400;
    font-size: clamp(1em, 1em + 0.3vw, 4vw); 
    line-height: 140%;
    color: #171717;
}

@media (max-width: 700px) {
    .p_especial {
    text-align: left;
}
}



li {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: clamp(1em, 1em + 0.6vw, 4vw); 
    line-height: 190%;
    /* or 38px */
    color: #FFFFFF;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
}

.container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    gap: 5%;
}


    .container_1 {
        background-image: url(https://image.divulga.sebraepb.com.br/lib/fe3111727364047f741c76/m/1/9696b64a-16b8-486b-984f-bafb5eeb2549.png);
        background-size: 20%;
        background-repeat: no-repeat;
        background-position:right;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-items: center;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
        margin: 0;
        gap: 5%;
    }


    .container_2 {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-items: center;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
        margin: 0;
        gap: 5%;
    }



/*------------ Bloco 2 ------------*/
.B1{
    grid-area: B1;
    display: flex;
    flex-direction: row;
    align-content:stretch;
    flex-wrap: wrap;
    padding: 5% 5% 0% 5%;
    width: 100%;
}
.B2{
    grid-area: B2;
}

     .bloco_2 {
        max-width: 100%;
        justify-items: center;
        background-color: #009BA7;
        margin: auto 0 5% 0;
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: auto;
        grid-template-areas: 
        'B1 B2';
        }

    @media (max-width: 700px) {
        .bloco_2 {
            max-width: 100%;
            justify-items: center;
            background-color: #009BA7;
            margin: auto 0 10% 0;
            display: grid;
            grid-template-columns: 100%;
            grid-template-rows: auto;
            grid-template-areas: 
            'B1'
            'B2';
            }
        }


    
/*------------ Fim Bloco 2 ------------*/

/*------------ Bloco 3 ------------*/


.Tema1{
    grid-area: T1;
    margin: 0%; 
    max-width: 100%;
}

@media (max-width: 700px) {
    .T1{
    grid-area: T1;
    margin: 0%; 
    max-width: 100%;
}
}

.Tema2{
    grid-area: T2;
    margin: 0%; 
    max-width: 100%;
}

@media (max-width: 700px) {
    .T2 {
    grid-area: T2;
    margin: 0%; 
    max-width: 100%;
}
}

.Tema3{
    grid-area: T3;
    margin: 0%; 
    max-width: 100%;

}

@media (max-width: 700px) {
    .T3{
    grid-area: T3;
    margin: 0%; 
    max-width: 100%;
    }
}

.Tema4{
    grid-area: T4;
    margin: 0%; 
    max-width: 100%;

}

@media (max-width: 700px) {
    .T4 {
    grid-area: T4;
    margin: 0%; 
    max-width: 100%;
}
}

.Tema5{
    grid-area: T5;
    margin: 0%; 
    max-width: 100%;
}

@media (max-width: 700px) {
    .T5{
    grid-area: T5;
    margin: 0%; 
    max-width: 100%;
}
}

.Tema6{
    grid-area: T6;
    margin: 0%; 
    max-width: 100%;
}

@media (max-width: 700px) {
    .T6 {
    grid-area: T6;
    margin: 0%; 
    max-width: 100%;
}
}

.Tema7{
    grid-area: T7;
    margin: 0%; 
    max-width: 100%;
}

@media (max-width: 700px) {
    .T7{
    grid-area: T7;
    margin: 0%; 
    max-width: 100%;
}
}

.Tema8{
    grid-area: T8;
    margin: 0%; 
    max-width: 100%;
}

@media (max-width: 700px) {
    .T8 {
    grid-area: T8;
    margin: 0%; 
    max-width: 100%;
}
}

.temas {
    display: grid;
    align-items: center;
    justify-items: left;
    grid-template-columns: 30% 70%;
    grid-template-rows: auto;
}

@media (max-width: 700px) {
    .temas {
    display: grid;
    align-items: left;
    justify-items: left;
    grid-template-columns: 140px 1fr;
    grid-template-rows: auto;
}
}


.img_temas {
    max-width: 120px;
    margin: 5%;
}

.bloco_3 {
        max-width: 100%;
        text-align: left;
        padding-bottom: 3%;
        margin: auto;
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: auto;
        grid-template-areas: 
        'T1 T2'
        'T3 T4'
        'T5 T6'
        'T7 T8';
        }

@media (max-width: 700px) {
    .bloco_3 {
        max-width: 100%;
        align-items: left;
        justify-items: left;
        margin: auto auto auto 5%;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-template-areas: 
        'T1' 
        'T2'
        'T3' 
        'T4'
        'T5' 
        'T6'
        'T7' 
        'T8';
        }
    }

/*------------ Fim Bloco 3 ------------*/

.funciona {
    text-align: center;
    max-width: 100%;
}

/*------------ Bloco 4 ------------*/

.func_1{
    grid-area: f1;
    margin: 0%; 
    max-width: 100%;
}

@media (max-width: 700px) {
    .f1{
    grid-area: f1;
    margin: 0%; 
    max-width: 100%;
}
}

.func_2{
    grid-area: f2;
    margin: 0%; 
    max-width: 100%;
}

@media (max-width: 700px) {
    .f2 {
    grid-area: f2;
    margin: 0%; 
    max-width: 100%;
}
}

.func_3{
    grid-area: f3;
    margin: 0%; 
    max-width: 100%;
}

@media (max-width: 700px) {
    .f3{
    grid-area: f3;
    margin: 0%; 
    max-width: 100%;
    }
}

.func_4{
    grid-area: f4;
    margin: 0%; 
    max-width: 100%;
}

@media (max-width: 700px) {
    .f4 {
    grid-area: f4;
    margin: 0%; 
    max-width: 100%;
}
}

.img_funciona {
    max-width: 140px;
}

.bloco_4 {
        max-width: 100%;
        display: grid;
        margin-left: 5%;
        margin-top: 5%;
        padding-bottom: 5%;
        grid-row-gap: 5%;
        grid-column-gap: 5%;
        grid-template-columns: 45% 45%;
        grid-template-rows: auto;
        grid-template-areas: 
        'f1 f2'
        'f3 f4'
        ;
        }

@media (max-width: 700px) {
    .bloco_4 {
        max-width: 100%;
        padding-bottom: 15%;
        margin-left: 5%;
        margin-top: 5%;
        grid-row-gap: 2%;
        grid-column-gap: 2%;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-template-areas: 
        'f1' 
        'f2'
        'f3' 
        'f4'
        ;
        }
    }

/*------------ Fim Bloco 4 ------------*/


/*-------------Bloco 5 ----------------*/

.beneficios_5{
    grid-area: B1;
    margin: 5%;
    height: auto;
    width: auto;
}

.beneficios_6{
    grid-area: B2;
    margin: 0%;
    height:auto;
    max-width: 100%;
}


.bloco_5 {
        max-width: 100%;
        max-height: 100%;
        padding: 0 3% 0 3%;
        align-items: start;
        justify-items: center;
        display: grid;
        grid-column-gap: 5%;
        grid-template-columns: 50% 50%;
        grid-template-rows: auto;
        grid-template-areas: 
        'B1 B2';
        }

@media (max-width: 700px) {
.bloco_5 {
    max-width: 100%;
    max-height: 100%;
    padding: 0 5% 10% 5%;
    grid-row-gap: 5%;
    align-items: start;
    justify-items: center;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: 
    'B1' 
    'B2';
    }
}

/*--------------FIM DO BLOCO 5------------*

/*-------------Bloco 6 ----------------*/

.assinatura_1{
    grid-area: a1;

}

.assinatura_2{
    grid-area: a2;
    border-color: #00D9B4;
}



.bloco_6 {
        max-width: 100%;
        max-height: 100%;
        padding: 0 5% 0 5%;
        align-items: start;
        justify-items: center;
        display: grid;
        grid-column-gap: 5%;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas: 
        'a1 a2';
        }

@media (max-width: 700px) {
.bloco_6 {
    max-width: 100%;
    max-height: 100%;
    padding: 0 5% 10% 5%;

    align-items: start;
    justify-items: center;
    display: grid;
    row-gap: 5%;
    grid-template-columns: auto;
    grid-template-rows: 1fr;
    grid-template-areas: 
    'a1' 
    'a2';
    }
}
/*--------------FIM DO BLOCO 6------------*
/*------------ Bloco 7 ------------*/
.g1{
    grid-area: g1;
    margin: auto;
    width: 100%;
    height: 100%;
}
.g2{
    grid-area: g2;
    padding: 5%;
}

     .bloco_7 {
        max-width: 100%;
        justify-items: center;
        background-color: #009BA7;
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: auto;
        grid-template-areas: 
        'g1 g2';
        }

    @media (max-width: 700px) {
        .bloco_7 {
            max-width: 100%;
            justify-items: center;
            background-color: #009BA7;
            margin: auto 0 10% 0;
            display: grid;
            grid-template-columns: 100%;
            grid-template-rows: auto;
            grid-template-areas: 
            'g1'
            'g2';
            }
        }


    
/*------------ Fim Bloco 7 ------------*/
/*------------ Fim Bloco 8 ------------*/
.foto_gestor {
    grid-area: h1;
}

.desc_gestor {
    grid-area: h2;
}

.al_txt{
    display: flex;
    flex-direction: column;
    height: 100%;
    text-align: left;
    justify-content: flex-end;
}


.bloco_8 {
    max-width: 100%;
    padding: 0 0 10% 2%;
    margin: auto;
    display: grid;
    grid-column-gap: 2%;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "h1 h2 h2";
    }

    @media (max-width: 700px) {
        .bloco_8 {
            max-width: 100%;
            justify-items: center;
            align-items: center;
            margin: auto;
            display: grid;
            padding: 0 0 0 2%;
            grid-row-gap: 5%;
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            grid-template-areas: 
            'h1' 
            'h2';
            }
        }

    .fonte_gestor{
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 900;
    font-size: clamp(2.2em, 1em + 2vw, 5vw); 
    line-height: 110%;
    color: #009BA7;
    }

    .descri_gestor{
        font-family: 'Rubik';
        font-style: normal;
        font-weight: 500;
        font-size: clamp(1em, 1em + 0.8vw, 5vw); 
        line-height: 120%;
        color: #009BA7;
        }
    

    /*------------ Fim Bloco 8 ------------*/


    /*AJUSTE FORM*/

#check {
    display: inline-block;
}

/* Elementos de tag <fieldset>*/
fieldset {
    border: 1px;
    border-style: solid;
}


/* Elementos de tags <body>, <input>, <Select>, <textarea> e <button> */
input, select, textarea, button {
    font-family: 'Monserrat', sans-serif;
    font-size: 0.5em;
    height: 2em;
    color: #000000;
    border-radius: 5px;
}

/* Elementos de classe "grupo" nos estados das pseudoclasses "before" e "after" */
.grupo:before, .grupo:after {
    display: table;
}

/* Elementos de classe "grupo" no estado da pseudoclasse "after" */
.grupo:after {
    clear: both;
}

/* Elementos de classe "campo" */
.campo {
    margin-bottom: 0.5em;
}

/* Elementos de classe "campo" de tag <label> */
.campo label {
    margin-bottom: 0.3em;
    display: block;
    text-align: left;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: clamp(0.5em, 0.4em + 0.1vw, 4vw); 
    line-height: 120%;
    font-variant: small-caps;
    color: #FFFFFF;
}

/* Elementos de classe "campo" ou "grupo" de tag <fieldset> */
fieldset .grupo .campo {
    float:left;
    margin-right: 0em;
}

/* Elementos de classe "campo" das tags <input> com atributo text e email, da tag <select> e da tag <textarea>*/
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo input[type="date"], .campo select, .campo textarea {
    padding: 0.5em;
    border: 1px solid #b7fbba;
    box-shadow: 0px 1.91734px 2.55645px rgba(0, 0, 0, 0.15);
    display: block;
    width: 100%;
}

/* Elementos de classe "campo" de tag <select> e <option>*/
.campo select option {
    padding-right: 0.5em;
}

/* Elemento de classe "campo" com tag <input>, <select> e <textarea> tocas com estado da pseudoclasse "focus"*/
.campo input:focus, .campo select:focus {
    background: #b7fbba;
}


.privacidade{
    font-family: 'Montserrat';
    text-align: center;
    font-style: normal;
    font-weight: 400;
    font-size: 10px;
    color: #FFFFFF;
}

a:link {
    color:#ffffff;
    text-decoration:none;
    font-weight: 600;
  }

  a:visited {
    color:#ffffff;
    text-decoration:none;
  }
  a:hover {
    color:#000000;
    text-decoration:underline;
  }
  a:active {
    color:#ff0000;
    text-decoration:underline;
    background-color:#080808;
  }

  .botao {
    width: 100%;
    height: 100%;
    background: #00D9B4;
    box-shadow: 0px 1.34402px 6.72009px 6.72009px rgba(43, 197, 118, 0.6);
    border-radius: 15px;
    border: none;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 25px;
    line-height: 77%;
    text-align: center;
    font-variant: small-caps;
    color: #FFFFFF; 
    text-transform: uppercase;
    align-items: center;
    padding: 25px 15px 25px 15px;

}

.botao, select{
    cursor: pointer;
}

.botao:hover {
    background: hsl(105, 68%, 79%);
    box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
    text-shadow: none;
}

.footer_1 {
    grid-area: ft1;
    text-align: left;
}

.footer_2 {
    grid-area: ft2;
    text-align: center;
}

.footer_3 {
    grid-area: ft3;
    display: flex;
    flex-direction: row;
    justify-content: right;
}

.footer {
    width: 100%;
    align-items: center;
    padding: 3% 3% 0 3%;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

@media (max-width: 700px) {
    .footer {
        width: 100%;
        row-gap: 30px;
        justify-content: center;
        column-gap: 10%;
        margin-top: 5%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        
    }
} 


.footer_copy {    
    padding: 2% 2% 1% 2%;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap-reverse;
    justify-content: space-between;

}

@media (max-width: 700px) {
    .footer_copy {
        width: 100%;
        row-gap: 30px;
        justify-content: center;
        column-gap: 10%;
        margin-top: 5%; 
    }
} 

.agrada_1{
    grid-area: ag_1;
    width: 100%;
}


.agrada_2{
    grid-area: ag_2;
    background-color: #00D9B4;
    width: 100%;
}

.agrada_3{
    grid-area: ag_3;
    width: 100%;
}

.agradecimento{
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "ag_1 ag_2"
    "ag_3 ag_3"
    ;
}
  

.div-video{

    max-width: 100%;
    margin: 0px 15px 0px 15px;
    padding-bottom: 45%;
    position: relative;
    }

.div-video > iframe {
    position: absolute;
    top: 30px;
    left: 90px;
    width: 80%;
    height: 90%;
}

@media (max-width: 700px) {
    .div-video > iframe {
        position: absolute;
        top: 15px;
        left: 25px;
        width: 90%;
        height: 90%;
    }
} 
  
  @media (max-width: 375px) {
    .div-video > iframe {
        position: absolute;
        top: 10px;
        left: 30px;
    }
}