* {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

/* SECTIONS */
.section1 {
    background-color: #16315e;
    display: flex;
    justify-content: center;
    padding-top: 50px;
}

.section2 {
    background-color: #f2cb05;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 60px 0;
    gap: 80px;
}

.section3 {
    background-color: #16315e;
    color: #fff;
    padding: 60px 0;
    gap: 80px   ;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.section4 {
    background-color: #f2cb05;
    padding: 100px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section5 {
    background-color: rgb(120, 199, 255);
    padding: 80px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
}

/* TAGS */
.section2 h1{
    color: #16315e;
    text-align: center;
    font-size: max(40px, 3vw);
}
.section3 h1{
    font-size: max(20px, 2vw);
}
.bonus h1{
    font-size: max(20px, 5vw);
    color: #16315e;
}
.quem-somos h1{
    color:  rgb(120, 199, 255);
    font-size: max(20px, 2.5vw);
}
.quem-somos img{
    margin-bottom: 30px;
    max-width: max(50px, 90vw);
}
.section3-card{
    text-align: start;
    padding: 40px 45px 20px 45px;
    background-color: #1c3b70;
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.section3-card h3{
    text-align: center;
    font-size: max(20px, 1vw);
}
.section3-card ul{
    margin-left: 20px;
}
.section3-title{
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

/* CONTAINERS */
.container1 {
    display: flex;
    flex-direction: column;
    padding: 100px 10px;
    gap: 40px;
    max-width: 100%;
    justify-content: center;
}

.container2 {
    display: flex;
    align-items: end;
    max-width: max(50%, 100%);
}

.container3{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* SPANS */
.span1-title {
    color: #f2cb05;
    font-size: max(20px, 3vw) !important;
    gap: 0;
    line-height: 70px;
    width: 100% !important;
}

.span2 {
    font-weight: bold;
}

.span3 {
    color: #f2cb05;
    font-size: max(15px, 2vw);
}
.ad span{
    font-size: max(12px, 1.5vw);
    color: #fff;
}

/* FLEXBOX */
.flex{
    display: flex;
    gap: 5px;
}
.flexbox-flex {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.flexbox-flex2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.module-info{
    display: flex;
    flex-direction: column;
    margin-left: 15px;
}
.module-info .flex{
    font-size: max(15px, 1vw);
}
.module-info .flex span{
    color: #16315e;
    font-weight: bold;
}
.bonus{
    display: flex;
    flex-direction: column;
    max-width: max(5%,100%);
    gap:20px;
}
/* PARÁGRAFO */
.p1 {
    font-size: max(10px, 0.9vw) ;
    color: #fff;
    margin-bottom: 0;
}
.bonus-p p{
    font-size: max(15px, 2vw);
}
.quem-somos p{
    color: #fff;
    font-size: max(13px, 1.3vw);
    margin-bottom: 0;
}

/* IMAGES */
.img0 {
    max-width: min(70%, 100%);
}

.img1 {
    width: 100%;
    max-width: max(50%, 100%);
}
.img2{
    max-width: max(80px, 200px);
}
.img3{
    max-width: max(260px, 50vw);
}
.img4{
    max-width: max(160px, 40vw);
}

/* BUTTON */
.btn0{
    display: flex; 
}
.btn1 {
    background-color: #f2cb05;
    width: 70%;
    padding: 10px;
    font-size: max(15px, 1.5vw);
    font-weight: bold;
    color: #16315e;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
    border: 0;
}
.btn2{
    background-color: rgb(120, 199, 255);
    padding: 10px;
    font-weight: bold;
    font-size: max(20px, 1vw);
    border: 0;
}
.btn3 {
    background-color: rgb(120, 199, 255);
    max-width: max(260px, 100%);
    padding: 20px;
    font-size: max(15px, 2vw);
    font-weight: bold;
    color: #16315e;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
    border: 0;
    margin-left: auto;

}
.btn4{
    padding: 5px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #16315e;
    font-size: max(12px, 1vw);
    font-weight: bold;
}
.btn-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* CARDS */
.card-title{
    background-color: #16315e;
    padding: 40px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: max(600px, 100%);
}
.card-title h4{
    font-size: max(15px, 1.5vw);
    color: #fff;
}
.card-title p{
    width: 100%;
    font-size: max(10px, 1vw);
}
.bonus-p{
    background-color: #16315e;
    padding: 40px;
    max-width: max(200px, 100%);
    color: #fff;
}
.quem-somos{
    background-color: #16315e;
    display: flex;
    flex-direction: column;
    padding: 50px 40px;
    max-width: max(250px, 40vw) ;
}
.ad{
    background-color: #16315e;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    gap: 20px;
}


/* STEP */
.step-body{
    display: flex;
}
.step-container{
    border-radius: 50% !important;
    background-color: #284577;
    padding: 10px;
}
.step-number{
    background-color: rgb(120, 199, 255) !important;
    border-radius: 50% !important;
    padding: 15px 20px;
    font-size: max(20px, 1vw);
    color: black !important;
}

.line {
    height: 2px;
    background-color: #284577;
    width: 10vw;
    margin-top: 35px; 
}
.step-info{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 50px;
    height: 250px;
}
.step-text h3{
    font-size: max(13px, 1vw);
    color: #fff;
}
.step-info p{
    width: 250px;
    display: flex;
    margin-bottom: 0;
    justify-content: center;
    text-align: start;
    align-items: center;
    font-size: max(9px, 0.9vw);
}
.step-text{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.step-text span{
    font-size: max(8px, 0.8vw);
    font-weight: bold;
    text-align: center;
}
.section3-card h3{
    color: #fff;
}
.section3 h1{
    color: #fff;
}
/* FORMS */
.forms{
    background-color: #1c3b70;
    padding: 30px;
}
label{
    color: #fff !important;
    text-align: left !important;
    width: 100% !important;
}

/* TABS */
.tab-course{
    display: flex;
    align-items: center;
    justify-content: center;
}
.tab-course li{
    margin: 0 !important;
}
.nav-item a{
    border-radius: 0px !important;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.nav-change{
    color: #16315e !important;
}

.nav-color{
    color: #fff !important;
}

/* ANCORA */
.ref{
    text-decoration: none;
    color: #16315e;
}
.ref:hover{
    color: #16315e;
}
button {
    transition: background-color 0.5s ease-in-out;
}
button:hover {
    background-color: rgb(212, 212, 212);
    transition: all 0.5s ease-in-out;
}

.nav-tabs-alt{
    display: flex;
    justify-content: center;
}

/* MEDIA */
@media (max-width: 1320px) {
    .img1 {
        width: 100%;
        max-width: max(60%, 100%);
    }
    .span1-title {
        font-size: max(25px, 4vw);
        line-height: 45px;
    }
}

@media (max-width: 1000px) {
    .img0 {
        width: max(100%, 100%);
        max-height: 400px;
    }
    .p1 {
        font-size: max(10%, 1vw);
    }
    .span1-title {
        font-size: max(45px, 4vw) !important;
        line-height: 50px !important;
    }
    .span1-title {
        font-size: max(25px, 4vw);
        line-height: 35px;
    }
}

@media (max-width: 700px) {
    .section1 {
        flex-direction: column;
        align-items: center;
    }
    .flexbox-flex2 {
        flex-direction: column;
        align-items: center;
    }
    
    .img1 {
        width:  100%;
        max-width: 90%;
        max-height: 600px;
    }
    .container1{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .container2{
        width: 100%;
        align-items: end;
        justify-content: end;
    }
    .p1 {
        font-size: max(10px, 1vw);
    }
    .span1-title {
        font-size: max(25px, 4vw) !important;
        line-height: 30px !important;
    }
    .step-body{
        flex-direction: column;
    }
    .step-info{
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .step-text h3{
        font-size: max(15px, 1vw);
    }
    .step-text p{
        font-size: max(15px, 1vw);
        width: 200px;
    }
    .step-text span{
        font-size: max(10px, 0.6vw);
    }
    .line {
        display: none;
    }
    
    .step-number{
        padding: 35px 40px;
        font-size: max(20px, 1vw);
    }

}

@media (max-width: 450px) {
    .span1-title {
        font-size: max(30px, 3vw);
        text-align: center;
    }
    .img0{
        width: 100%;
    }
    .p1 {
        font-size: max(10px, 1vw);
        text-align: center;
    }
    .flexbox-flex{
        align-items: center;
        justify-content: center;
    }
    .section3 h1, .section3 h3{
        font-size: 15px;
    }
    .forms{
        padding: 10px 10px;
    }
    .section3-card ul{
        margin-left: 0;
        padding-left: 10px;
    }
    .section3-card p{
        text-align: justify;
    }
    .section3-title span{
        font-size: 9px;
        width: 200px !important;
    }
    .section4{
        flex-direction: column;
        align-items: center;
    }
    .section5{
        flex-direction: column;
    }
    .quem-somos{
        text-align: center;
        align-items: center;
        max-width: 270px;
    }
    .quem-somos img{
        max-width: 120px;
    }
    .quem-somos p{
        font-size: 12px;
    }
    .bonus{
        align-items: center;
    }
    .btn0{
        align-items: center;
        justify-content: center;
    }
    .btn1{
        font-size: 15px;
        width: 250px;
    }
    .btn4{
        font-size: 10px;
    }
    .ad span{
        font-size: 10px;
    }
    .step-number{
        padding: 25px 30px;
        font-size: max(20px, 1vw);
    }
    .step-text h3{
        font-size: max(14px, 1vw);
    }
    .step-text p{
        font-size: max(12px, 1vw);
        width: 150px;
    }
    .step-text span{
        font-size: max(8px, 0.6vw);
    }
    .nav-tabs {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .card-title{
        width: 350px;
        align-items: center;
        justify-content: center;
        padding-right: 20px;
        padding-left: 20px;
    }
    .card-title-img{
        justify-content: center;
    }
    .card-title p{
        text-align: center;
    }
    .flex{
        font-size: 13px !important;
    }
    .container3{
        text-align: justify;
    }
    .img2{
        max-width: max(80px, 100px);
    }
    .nav-item{
        display: flex !important;
        flex-direction: row !important;
    }
    .nav-tabs-alt{
        width: 350px;
    }
    .n-display{
        width: 80px;
    }
    .bonus-p{
        display: flex;
        align-items: center;
        text-align: center;
    }
    .bonus-p p{
        margin-bottom: 0px;
    }
    .btn-box{
        display: flex;
        align-items: center;
        gap: 5px;
        justify-content: center;
    }
}