html {
    font-size: 62.5%;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
    scroll-behavior: smooth;
}

:root {
    --font-large: 4.8rem;
    --font-sec: 2rem;
    --font-medium: 1.6rem;
    --font-small: 1.2rem;
}

a { color: white; text-decoration: none; }
button { cursor: pointer; }
h1 { font-size: var(--font-large); }
h2 { font-size: var(--font-sec); }
h3 { font-size: var(--font-medium); }
h4 { font-size: var(--font-small); }


.saiba-mais {
    display: flex;
    align-items: center;

    font-size: var(--font-medium);
    font-family: Arial, sans-serif;

    background: none;
    border: none;

    transition: ease all 0.5s;
}

.saiba-mais::before {
    content: '›'; 

    font-size: var(--font-sec);
    font-weight: bold;
    color: #FF6200;

    margin: -4px 6px 0 0;
}  

.carousel-container {
    position: relative;

    max-width: 45%;

    display: flex;
    align-items: center;

    .arrow {
        position: absolute;
        z-index: 1;
        top: 50%;
        cursor: pointer;

        padding: 1rem 1.25rem;

        font-size: 1.5rem;
        
        background: inherit;
        border: 0.1rem solid white;
        border-radius: 50%;

        color: white;

        transform: translateY(-50%);
    }

    .arrow {
        width: 4rem;
        height: 4rem;

        display: flex;
        align-items: center;
        justify-content: center;

        border: 0.2rem solid #FF6200;
        background-color: #FF6200;
        color: white;
    }

    .left-arrow {
        display: none;
        left: -3rem; 
    }

    .right-arrow {
        right: -2rem;
    }

    .container-servicos {
        display: flex;
        gap: 3.2rem;

        width: 55rem;
        padding: 1.6rem 0;

        overflow: hidden;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        
        .left-arrow {
            left: -2rem; 
        }

        .servico {
            scroll-snap-align: start;   
            
            img {
                width: 55rem;
                aspect-ratio: 1 / 1;
            }

            .insta {
                width: 37.5rem;
                aspect-ratio: 1 / 1.45;
            }
        }
    }
}

.efeito-text {
    position: relative;
    display: inline-block;
}

.efeito-text::before {
    content: "";

    position: absolute;
    top: 31%;
    left: -2%;
    z-index: 1;

    width: 107.5%;
    height: 51%;

    background-color: #ff9523;
}

.text { position: relative; z-index: 2; }  

header {
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    position: fixed;
    z-index: 9999;

    width: 100%;
    height: 7.2rem;
    padding: 0 3.2rem;

    background-color: #111431;

    p {
        font-size: calc( var(--font-sec) * 1.5 );
        font-weight: 850;
    }
}

header .logo {
    display: flex;
    align-items: center;

    img {
        width: 6.4rem;
        height: 4.8rem;
    }
}

header .menu {
    display: flex;
    align-items: center;
    gap: 1.6rem;

    a {
        color: white;
        font-size: calc( var(--font-small) + 0.2rem );
        font-weight: 400;

        transition: ease all 0.3s;
    }

    .link-menu:hover { color: #FF6200; }

    .matriculas {
        padding: 0.8rem 1.6rem;

        border-radius: 3.2rem;
        border: 0.1rem solid #FF6200;

        transition: ease-in-out all 0.5s;
    }

    .matriculas:hover {
        background-color: #FF6200;
        a { color: white; }
    }

    .plataforma-maximus {
        padding: 0.8rem 1.6rem;

        border-radius: 3.2rem;
        border: 0.1rem solid #FF6200;
        background-color: #FF6200;
    }
}

.menu-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-toggle {
    display: none;
    font-size: 2.4rem;
    background: none;
    color: white;
    border: none;
}

@media (max-width: 1100px) {
    header {
        padding: 0;
        flex-direction: column;
        align-items: flex-start;
    }

    .menu-mobile {
        width: 100%;
        min-height: 7.2rem;
        padding: 0 3.2rem;
    }

    .menu-toggle {
        display: block;
        margin-left: auto;
    }

    .menu {
        display: none;
        flex-direction: column;

        width: 100%;
        opacity: 0;

        pointer-events: none;
        transition: opacity 0.3s ease-in-out;
        background-color: #111431;
    }

    .menu.show {
        display: flex;
        padding: 3.2rem;

        opacity: 1;
        pointer-events: auto;
    }

    .menu > a {
        padding: 1rem 0;
        display: block;
    }
}

main {
    padding: 13.6rem 3.2rem 3.2rem 3.2rem;
    height: 100dvh;

    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 3.2rem;

    background-color: rgb(246, 246, 246);

    img {
        width: 40%;
        aspect-ratio: 1 / 1;
    }

    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3.2rem;
            
        h2 { font-size: var(--font-large); text-align: center; }
        h1 { font-weight: 450; text-align: center; }  
    }

    button {
        padding: 1.6rem 3.2rem;

        color: white;
        font-weight: bold;
        font-size: var(--font-medium);

        border: none;
        border-radius: 1.6rem;
        background-color: #ff9523;
    }
}

@media ( max-width: 1100px ) {
   main {
        height: auto;
        flex-direction: column;
        align-items: center;

        img {
            width: 65%;
        }
   } 
}

@media ( max-width: 760px ) {
    main .content {
        text-align: center;
        h1 { font-size: 3.2rem; }
        h2 { font-size: 3.2rem; }
    }

    main img { width: 100%; }

    main form { width: 100%; }

    main button, main input { width: 50%; }
}

.estrutura, .relatos, .planos {
    padding: 3.2rem;
    background-color: #010026;

    display: flex;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 3.2rem;
}

.container-explica, .container-planos {
    display: flex;
    justify-content: center;
    gap: 3.2rem;
}

.estrutura {
    .title h1 { color: white; font-weight: 300; }
    span { font-weight: bold; }

    .explica {
        width: 42rem;

        display: flex;
        flex-direction: column;
        gap: 2.4rem;

        padding: 3.2rem;

        border-radius: 3.2rem;
        background-color: #1B1B33;

        .title {
            display: flex;
            align-items: center;
            justify-content: space-between;

            img { width: 3rem; height: 3rem; }

            .text {
                display: flex;
                align-items: center;
                gap: 1.6rem;

                color: white;

                img { width: 6rem; height: 6rem; }
            }
        }

        p { color: white; font-size: var(--font-medium); }
    }

    .footer-estrutura {
        display: flex;
        align-items: center;
        gap: 1.6rem;

        img { width: 20rem; height: 5rem; }
        span { font-weight: bold; }
        p { color: white; font-size: var(--font-medium); }
    }
}

.relatos {
    background: linear-gradient(180deg, #FF8000 0%, #FF6200 100%);

    .title h1 { font-weight: bold; }

    .explica {
        width: 40rem;
        background-color: #D9D9D926;

        .title .text img { width: 7rem; height: 5.5rem; }
        p { font-size: var(--font-medium); }
    }

    .footer-estrutura {
        img { width: 6rem; height: 6rem; }

        .text {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;

            color: white;

            h3 { font-size: var(--font-sec); }
            h4 { font-size: var(--font-medium); font-weight: 300; }
        }
    }
}

@media ( max-width: 1100px ) { .estrutura .explica { width: 100%; } }

@media ( max-width: 760px ) {
    .estrutura h1 { font-size: 3.2rem; text-align: center; }
    .estrutura .footer-estrutura { flex-direction: column; text-align: center }
    .relatos .footer-estrutura { flex-direction: row; text-align: left; }
}

.divulga {
    padding: 24dvh 3.2rem;

    background-image: url(images/fundo.svg);
    background-position: center;

    display: flex;
    align-items: center;
    justify-content: space-evenly;

    color: white;

    .title {
        display: flex;
        flex-direction: column;
        gap: 3.2rem;

            
        h1 { font-size: calc( var(--font-large) + 0.8rem ); }
    }

    button {
        border: none;
        border-radius: 1.6rem;

        background-color: #000944;

        padding: 1.6rem 3.2rem;

        font-size: var(--font-medium);
        font-weight: bold;
        color: white;
    }

    p { font-size: var(--font-sec); width: 40%; }
}

@media ( max-width: 1100px ) {
    .divulga { padding: 16dvh 3.2rem; flex-direction: column; gap: 3.2rem; }
    .divulga .title h1 { font-size: var(--font-large); }
    .divulga .title, .divulga p { display: flex; flex-direction: column; align-items: center; text-align: center; }
    .divulga p { width: 85%; }
}

@media ( max-width: 760px ) {
    .divulga { padding: 12dvh 3.2rem }
    .divulga .title h1 { font-size: 3.2rem; }
    .divulga p { width: 100%; }
}

.video {
    padding: 8dvh 3.2rem;

    background-color: #010026;
    color: white;

    display: flex;
    align-items: center;
    justify-content: space-evenly;

    h1 {
        font-size: calc( var(--font-sec) + 0.8rem );
    }

    .content-video {
        max-width: 40%;
        aspect-ratio: 1 / 1;

        video {
            width: 100%;
            height: 100%;

            border-radius: 3.2rem;
        }
    }

    .content {
        display: flex;
        flex-direction: column;
        gap: 3.2rem;

        max-width: 45%;

        .text {
            display: flex;
            flex-direction: column;
            gap: 1.6rem;

            p {
                font-size: var(--font-sec);
                font-weight: 350;
            }
        }
    }
}

@media ( max-width: 1200px ) {
    .video {
        flex-direction: column-reverse;
        gap: 3.2rem;

        .content-video, .content { max-width: 55rem; }
    }
}

@media ( max-width: 760px ) {
    .video {
        h1 { font-size: calc( var(--font-sec) + 0.2rem ); }
        .content-video, .content { max-width: 37.5rem; .text p { font-size: var(--font-medium); } }
    }
}

@media ( max-width: 400px ) {
    .video {
        h1 { font-size: var(--font-sec); }
        .content-video, .content { max-width: 34.5rem; }
    }
}

.planos {
    color: white;

    min-width: 100%;

    .title {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.8rem;
    }

    h2 {
        font-weight: 300;

        padding: 0.8rem 2.4rem;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 3.2rem;
        border: 0.1rem solid #FF950045;
        background-color: #FFFFFF0F;
    }

    .container-planos {
        width: 95%;
        justify-content: left;
    }

    .container-servicos {
        .left-arrow {
            display: block;
            left: 2.5%;
        }
    
        .right-arrow {
            display: block;
            right: 2.5%;
        }
    }

    .plano {
        min-width: 45rem;
        max-height: 70rem;

        padding: 4rem;

        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 1.6rem;

        border-radius: 3.2rem;
        border: 0.1rem solid #EEEEEE29;
        background: linear-gradient(180deg, rgba(217, 217, 217, 0.08) 0%, rgba(36, 36, 36, 0.08) 100%);
        
        .vantagem {
            display: flex;
            align-items: center;
            gap: 1.6rem;
    
            img {
                width: 3rem;
                height: 2.75rem;
            }
        }
    }

    h3 { font-size: calc( var(--font-sec) + 1.2rem ); }

    p, span { font-size: var(--font-medium); }

    .valor {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;

        p { font-size: 3.2rem; font-weight: bold; }

        span { font-weight: 300; }
    }

    .vantagens {
        display: flex;
        flex-direction: column;
        gap: 1.6rem;

        margin: 1.6rem 0;
    }

    li { list-style: none; font-size: var(--font-medium); }

    .inscricao {
        padding: 1.2rem 3.6rem;

        color: white;
        font-size: var(--font-medium);
        font-weight: bold;

        border: none;
        border-radius: 1.6rem;
        background-color: #FF6A00;
    }
}

.container-explica { flex-wrap: wrap; }

@media ( max-width: 1100px ) { .planos h1 { font-size: var(--font-sec); } }

footer {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 3.2rem;
    
    padding: 8dvh 3.2rem;

    background-color: rgb(246, 246, 246);

    h1 { font-size: calc( var(--font-sec) + 0.4rem ); }

    .container-footer {
        display: flex;
        flex-direction: column;
        gap: 1.6rem;

        .container-infos {
            display: flex;
            flex-direction: column;
            gap: 1.6rem;

            a {
                color: black;
                font-size: var(--font-medium);
                font-weight: 450;

                transition: ease all 0.5s;
            }

            .info-footer {
                display: flex;
                align-items: center;
                gap: 0.8rem;
    
                img { width: 3.2rem; height: 3.2rem; }
            }
        }

        .images-footer {
            display: flex;
            gap: 0.8rem;

            a {
                padding: 0.75rem;

                border: 0.1rem solid black;
                border-radius: 2rem;

                background-color: white;

                img { width: 2.6rem; height: 2.4rem; }
            }
        }
    }
}

@media ( max-width: 760px ) { footer .container-footer { min-width: 35.1rem; text-align: left; } } 
@media ( max-width: 500px ) { footer .container-footer { min-width: 35.1rem; } }

.animation-one { transition: ease all 0.5s; }
.animation-one:hover { transform: scale(1.05) }
.saiba-mais:hover { margin-left: 1.6rem; }
footer .container-footer .container-infos a:hover { color: #FF6200; }