:root{
    --color1: #B42A4E;
    --color2: #fff;
    --color3: #000000;
}

html, body{
    width: 100vw;
    margin: 0;
    height: 100%;
    position: absolute;
    font-family: 'inria serif', sans-serif;
}
.header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1vw 1vw 1vw 1vw;
    font-size: 1.5vw;
    width: 100vw;
    background-color: var(--color2);
    position: fixed;
    z-index: 1;
}
.header a{
    text-decoration: none;
}
.header p{
    margin: 1vw 2vw 1vw 2vw;
    color: var(--color1);
    font-weight: bolder;
}
.header p:hover{
    cursor: pointer;
    color: var(--color3);
}
.header img{
    width: 20vw;
}
.tags{
    display: flex;
}
.turmas h1{
    color: #00F964;
}
.presentation{
    display: flex;
    background-color: var(--color1);
    justify-content: space-evenly;
    color: var(--color2);
    padding-top: 9vw;
    padding-bottom: 2vw;
    width:auto;
}
.presentation img{
    width: 25vw;
    border-radius: 10vw;
}
.presentation h2{
    color:#00F964;
    font-size: 3vw;
}
.presentation h1{
    font-size: 3vw;
    margin-top: 6vw;
}
.presentation p{
    font-size: 1.5vw;
    margin-top: 2vw;
}
.presentation button{
    margin-top: 2vw;
    padding: 1vw 5vw 1vw 5vw;
    border: none;
    background-color: #00F964;
    font-weight: bolder;
    border-radius: 2vw;
    font-size: 1.3vw;
}
.presentation button:hover{
    transform: translateY(-7px);
    transition-duration: 0.5s;
}
.video{
    text-align: center;
    vertical-align: center;
    margin: 0vw 18vw 0vw 18vw;
}
.container{
    background-color: var(--color1);
    margin: 5vw 0vw 5vw 0vw;
    padding: 2vw 0vw 2vw 0vw;
    border-radius: 1vw;
}
.video video{
    width: 60vw;
}
.beneficios{
    background-color: var(--color1);
    color: var(--color2);
    text-align: center;
    padding: 5vw 0vw 5vw 0vw;
}
.beneficios h1{
    margin-bottom: 5vw;
    font-size: 3vw;
}
.beneficios p{
    font-weight: bolder;
    font-size: 2vw;
}
.options img{
    width: 3vw;
    height: 3vw;
}
.options{
    display: flex;
    justify-content: center;
    margin-bottom: 4vw;
}
.beneficios button{
    border: none;
    padding: 1vw 3vw 1vw 3vw;
    border-radius: 1vw;
    color: var(--color1);
    font-weight: bolder;
    font-size: 2vw;
}
.beneficios button:hover{
    transform: translateY(-7px);
    transition-duration: 0.5s;
    cursor: pointer;
    background-color: var(--color3);
    color: var(--color2)
}
.container1 img{
    width: 4vw;
    height: 4vw;
    margin-right: 2vw;
}
.aprender{
    text-align: center;
    display: flex;
    flex-direction: column;
}
.container1{
    display: flex;
    background-color: var(--color1);
    color: var(--color2);
    margin: 1vw 5vw 2vw 5vw;
    padding: 5vw 6vw 5vw 6vw;
    font-size: 2vw;
    text-align: left;
    border-radius: 2vw;
    font-weight: bolder;
    width: 40vw;
    height: 30vw;
    vertical-align: center;
}
.container1:hover{
    transform: translateY(-7px);
    transition-duration: 0.5s;
}
.title{
    text-align: center;
    padding: 4vw 0vw 4vw 0vw;
    color: var(--color1);
}
.title h1{
    font-size: 3vw;
}
.group1{
    display: flex;
}
.group2{
    display: flex;
    margin-bottom: 3vw;
}
.reasons{
   display: flex;
   flex-direction: column;
   justify-content: center;
   text-align: center;
   background-color: var(--color1);
   color: var(--color2);
   padding: 3vw 0vw 3vw 0vw;
}
.container2{
    display: flex;
    text-align: left;
    background-color: var(--color2);
    color: var(--color1);
    font-size: 2vw;
    padding: 1vw 2vw 1vw 3vw;
    width: 40vw;
    height: 25vw;
    border-radius: 3vw;
    margin: 3vw;
}
.reasons h1{
    font-size: 3vw;
    margin: 2vw 0vw 2vw 0vw;
}
.container2:hover{
    transition-duration: 0.5s;
    transform: translateY(-7px);
}
.container2 img{
    width: 3vw;
    height: 3vw;
    margin-right: 2vw;
    margin-top: 3vw;
}
.types{
    display: flex;
    justify-content: center;
}
.inscricoes{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 3vw 0vw 3vw 0vw;
}
.inscricoes h1{
    color: var(--color1);
    font-size: 3vw;
}
.inscricoes p{
    font-size: 2vw;
}
.inscricoes video{
    width: 20vw;
}
.container3{
    background-color: var(--color1);
    margin: 5vw 39vw 0vw 39vw;
    padding: 2vw 0vw 2vw 0vw;
    border-radius: 1vw;
}
.pricing{
    text-align: center;
    margin: 1vw 0vw 10vw 0vw;
}
.pricing h1{
    color: #00F964;
    font-size: 4vw;
}
.pricing h4{
    font-size: 2vw;
    color: gray;
}
.pricing button{
    margin-top: 2vw;
    padding: 1vw 7vw 1vw 7vw;
    border: none;
    background-color: #00F964;
    font-weight: bolder;
    border-radius: 2vw;
    font-size: 2vw;
}
.pricing p{
    color: var(--color1);
    font-size: 2.5vw;
}
.pricing button:hover{
    cursor: pointer;
    transition-duration: 0.5s;
    transform: translateY(-7px);
}
.certificado{
    text-align: center;
    margin: 5vw 0vw 5vw 0vw;
    color: var(--color1);
}
.certificado p{
    color: var(--color1);
    font-size: 3vw;
    margin-top: 1vw;
    font-weight: bolder;
}
.certificado img{
    width: 40vw;
    margin: 1vw 0vw 1vw 0vw;
}
.title2{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.title2 h1{
    font-size: 4.5vw;

}
.title2 img{
    width: 5vw;
    height: 5vw;
}

.about{
    margin-bottom: 1vw;
    display: flex;
    background-color: var(--color1);
    color: var(--color2);
    text-align: left;
}
.about h1{
    padding: 4vw 0vw 0vw 5vw;
    font-size: 4vw;
}
.about p{
    padding: 3vw 5vw 1vw 5vw;
    font-size: 2vw;
}
.about img{
    width: 40vw
}
.footer{
    display: flex;
    text-align: center;
    justify-content: center;
    color: var(--color1);
    font-size: 2vw;
}
.footer img{
    width: 3vw;
    margin: 0vw 3vw 1vw 3vw;
}
.depoimentos{
    text-align: center;
    color: var(--color1);
}

.depoimento1{
    text-align: left;
    padding: 5vw 10vw 5vw 10vw;
    display: flex;
    align-items: center;
}
.depoimento1 img{
    width: 20vw;
    height: 20vw;
    margin-right: 3vw;
}
.depoimento1 h3{
    font-size: 3vw;
}
.depoimento1 p{
    color: var(--color3);
    font-size: 1.3vw;

}
.depoimento2{
    text-align: right;
    padding: 5vw 10vw 5vw 4vw;
    display: flex;
    margin-bottom: 4vw;
    align-items: center;
}
.depoimento2 h3{
    font-size: 3vw;
}
.depoimento2 img{
    width: 20vw;
    height: 20vw;
    margin-left: 3vw;
}
.depoimento2 p{
    color: var(--color3);
    font-size: 1.3vw;

}

@media screen and (max-width: 700px){
    .header{
        font-size: 1.6vw;
    }
    .presentation{
        display: flex;
        flex-direction: column;
        text-align: center;
        padding: 10vw 0vw 10vw 0vw;
    }
    .presentation img{
        margin-top: 5vw;
        width: 35vw;
    }
    .presentation h1{
        font-size: 6vw;
    }
    .presentation h2{
        font-size: 6vw;
    }
    .presentation p{
        font-size: 4vw;
    }
    .presentation button{
        font-size: 5vw;
    }
    .video video{
        width: 90vw;
    }
    .video{
        margin: 0vw 0vw;
    }
    .depoimentos h1{
        font-size: 8vw;
    }
    .depoimento1{
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .depoimento1 img{
        width: 40vw;
        height: 40vw;
    }
    .depoimento1 p{
        font-size: 4vw;
    }
    .depoimento2 p{
        font-size: 4vw;
    }
    .depoimento2 h3{
        font-size: 5vw;
    }
    .depoimento1 h3{
        font-size: 5vw;
    }
    .depoimento2{
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .depoimento2 img{
        width: 40vw;
        height: 40vw;
    }
    .beneficios h1{
        font-size: 6vw;
    }
    .beneficios p{
        font-size: 4vw;
    }
    .beneficios img{
        width: 6vw;
    }
    .beneficios button{
        font-size: 4vw;
    }
    .title h1{
        font-size: 7vw;
    }
    .group1{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .group2{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .container1{
        width: 80vw;
        height: 50vw;
        padding: 2vw;
    }
    .container1 p{
        font-size: 5vw;
    }
    .container1 img{
        width: 10vw;
        height: 10vw
    }
    .reasons h1{
        font-size: 7vw;
    }
    .reasons{
        height: 300vw;
    }
    .types{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .types p{
        font-size: 5vw;
    }
    .container2{
        width: 80vw;
        height: 70vw;
        padding: 2vw;
        margin: 10vw 0vw 1vw 0vw;
    }
    .container2 img{
        width: 10vw;
        height: 10vw;
    }
    .inscricoes h1{
        font-size: 7vw;
    }
    .inscricoes p{
        font-size: 4vw;
    }
    .inscricoes video{
        width: 50vw;
    }
    .container3{
        width: 60vw;
        height: 93vw;
        margin: 0vw 20vw 0vw 20vw;
    }
    .pricing h1{
        font-size: 7vw;
    }
    .pricing h4{
        font-size: 5vw;
    }
    .pricing p{
        font-size: 6vw;
    }
    .pricing button{
        font-size: 5vw;
    }
    .about{
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    .about img{
        width: 70vw;
    }
    .about h1{
        font-size: 10vw;
    }
    .about p{
        font-size: 5vw;
    }
    .footer{
        font-size: 4vw;
    }
    .footer img{
        width: 6vw;
    }
    .certificado h1{
        font-size: 6vw;
    }
    .title2 img{
        width: 6vw !important;
    }
    .certificado img{
        width: 70vw
    }
    .certificado p{
        font-size: 5vw;
    }
}