/* * {
  outline: 1px solid red;
} */

@font-face {
    font-family: "Happyness";
    src: url("./font/happynessV2.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

header {

    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    position: fixed;
    z-index: 90;
    width: 100vw;

    img {
        width: 30%;
        justify-self: center;
    }

    a {
        position: absolute;
        left: 70%;
        justify-self: center;
        font-size: 9px;
        padding: 7px 12px;
        font-family: "Happyness";
        background: transparent;
        border: 1px solid #EA008A;
        border-radius: 10px;
        font-weight: 300;
        letter-spacing: 1.1px;
        color: #ffff;
        text-decoration: none;

    }
}

header.scrolled {
    background-color: #0c2f6c89;
}


#onde {
    background-image: url('image/backgorunds/BACKGROUND\ INFINITE\ 1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;

    .mulheres {
        width: 50%;
        position: relative;
        right: 29%;
        z-index: 1;
        transform: translate(-10%, 15%);
    }

    .divider {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 2;

        svg {
            width: 100%;
            height: auto;
            display: block;
        }
    }

    .crianca {
        position: absolute;
        bottom: 10px;
        width: 60%;
        z-index: 3;
    }

    h1 {
        font-family: "Happyness";
        text-align: center;
        width: 80%;
        font-size: 40px;
        color: #ffff;
        text-shadow: 0 0 10px #00000080;
        z-index: 4;
        margin-bottom: 10%;
    }
}

#sobre {
    background-image: url('image/backgorunds/background-sobre.png');
    background-size: cover;
    background-position: center 1%;
    color: #EA008A;
    text-align: center;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 90vh;

    p {
        margin-top: 5%;
        line-height: 120%;
        font-family: "Roboto Condensed", sans-serif;
        font-weight: 300;

        strong {
            font-family: "Happyness";
            letter-spacing: 0.5px;
        }
    }

    .menor {
        position: absolute;
        left: 1%;
        top: -5%;
        width: 20%;
        z-index: 5;
    }

    .maior {
        position: absolute;
        left: 78%;
        top: 8%;
        width: 20%;
        z-index: 5;
    }

    .titulo-meninas-tec {
        position: relative;
        align-self: center;
        width: 70%;
        top: -1px;
        left: -1%;
        z-index: 2;
    }

    .meninas-tec {
        position: relative;
        align-self: center;
        width: 90%;
        bottom: 70px;

    }


    .shape {
        position: relative;
        left: 10%;
        bottom: 50px;
        width: 90%;
        z-index: 3;
    }

    .shape svg {
        width: 90%;
        height: auto;
        display: block;
        z-index: 3;
    }

    .shape iframe {
        position: absolute;
        top: 12%;
        left: 5%;
        width: 80%;
        height: 80%;
        border: none;
        z-index: 4;
    }

    .degrade {
        position: relative;
        bottom: 130px;
        left: 11%;
        width: 75%;
        height: 75%;
        z-index: 1;
    }

}

#conheca {
    background-color: #0C306C;
    width: 100%;
    height: 90vh;

    .happy {
        justify-self: center;
        width: 70%;
        text-align: justify;

        h1 {
            z-index: 1;
            color: #ffff;
            align-self: center;
            font-family: "Roboto Condensed", sans-serif;
            font-weight: 100;
            font-size: 25px;
            margin-bottom: 5%;

            strong {
                letter-spacing: 1px;
                font-family: "Happyness";
            }
        }

        p {
            z-index: 1;
            color: #ffff;
            align-self: center;
            font-family: "Roboto Condensed", sans-serif;
            font-weight: 100;
            font-size: 15px;

            strong {
                letter-spacing: 1px;
                font-family: "Happyness";
            }
        }

        h2 {
            z-index: 1;
            color: #ffff;
            align-self: center;
            font-family: "Roboto Condensed", sans-serif;
            font-weight: 100;
            font-size: 20px;
            margin-top: 5%;

            strong {
                letter-spacing: 0.5px;
                font-family: "Happyness";
            }
        }

    }

    .menor {
        position: relative;
        left: -7%;
        top: 70px;
        width: 20%;
        z-index: 5;
    }

    .maior {
        position: relative;
        left: 85%;
        top: -70px;
        width: 15%;
        z-index: 5;
    }

    .cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 14px;
        width: min(90%, 900px);
        margin: 0 15px;
        justify-self: center;
        overflow: visible;
        font-family: "Roboto Condensed", sans-serif;
        font-weight: 400;

        .card {
            background: #fff;
            position: relative;
            border-radius: 14px;
            padding: 12px 14px;
            text-align: center;
            box-shadow: 5px 5px 0px #EA008A;

            h1 {
                margin: 0 0 6px;
                font-size: 14px;
                color: #EA008A;
                font-family: "happyness";
                letter-spacing: 1px;
                font-size: 15px;
            }

            p {
                margin: 0;
                font-size: 12px;
                line-height: 1.25;
                color: #EA008A;
            }
        }

    }

    a {
        width: 100%;
        font-family: "Happyness";
        text-decoration: none;
        position: relative;
        left: 30%;
        top: 5%;
        color: #ffff;
        padding: 10px;
        background-color: #0C306C;
        border: 1px solid #EA008A;
        border-radius: 10px;

    }

}

#futuro {
    position: relative;

    .shape-top {
        width: 90%;
        justify-self: center;
        position: relative;
        top: -10px;

        p {
            position: relative;
            top: -60px;
            left: 20px;
            font-size: 15px;
            font-family: "Roboto Condensed", sans-serif;
            color: #ffff;
        }
    }

    .shape-top svg {
        width: 100%;
        height: auto;
        display: block;
    }

    .conteudo {
        display: flex;


    }

    .esquerda {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;

        img {
            width: 80%;
        }

        h1 {
            font-family: "Roboto Condensed", sans-serif;
            color: #EA008A;
            font-weight: 300;
            font-size: 20px;
            width: 80%;
        }

        p {
            font-family: "Roboto Condensed", sans-serif;
            color: #0C306C;
            font-weight: 300;
            font-size: 15px;
            width: 80%;
        }
    }

    .direita {
        div {
            position: relative;
            bottom: 20%;
            display: flex;
            padding: 10px;
            align-self: center;
            justify-self: center;
            gap: 10px;

            img {
                align-self: center;
                justify-self: center;
                width: 40%;
                height: 40%;
            }

            p {
                font-family: "Roboto Condensed", sans-serif;
                color: #0C306C;
                font-size: 11px;
                line-height: 12px;
            }
        }

    }

    .form-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 230%;
        left: 0%;
        top: -55%;
        z-index: 0;

        pointer-events: none;
    }

    .formulario {
        background: linear-gradient(to bottom, #1F94DE, #0C306C);
        height: 65vh;
        width: 90%;
        justify-self: center;
        border-radius: 10px;
        position: relative;
        overflow: hidden;
        border-radius: 16px;

        .form-content {
            position: relative;
            z-index: 1;
        }

        h1 {
            width: 65%;
            padding: 20px;
            color: #ffff;
            font-family: 'Happyness';
            font-size: 30px;
        }

        h2 {
            padding: 0 10px 10px 10px;
            color: #ffff;
            font-family: "Roboto Condensed", sans-serif;
            font-size: 15px;
        }

        form {
            width: 100%;
            align-items: center;
            justify-content: center;
            display: flex;
            flex-direction: column;

            input {
                width: 90%;
                background-color: transparent;
                border-radius: 10px;
                border: 1px solid #ffff;
                padding: 10px;
                margin: 10px;
                color: #ffff;

            }

            input:focus {
                outline-color: #ffff;
            }

            input::placeholder {
                color: #cccaca;
            }

            div {
                width: 100%;
                display: flex;

                select {
                    width: 100%;
                    background-color: transparent;
                    border-radius: 10px;
                    border-color: #ffffff;
                    color: #ffff;
                    padding: 10px;
                    margin: 10px;

                }

                select option {
                    background-color: #0C306C;

                }

            }


            p {
                color: #ffffff;
                font-family: "Roboto Condensed", sans-serif;
                font-size: 10px;
                width: 50%;
                padding: 2%;
            }

            button {
                justify-self: center;
                align-self: center;
                color: #ffff;
                background-color: transparent;
                border: 1px solid #EA008A;
                border-radius: 10px;
                font-family: "Happyness";
                padding: 10px;
                font-size: 17px;
            }

            form::foucus {
                border: 1px solid #ffff;
            }

        }

        img {
            position: absolute;
            width: 40%;
            left: 55%;
            top: 0%;
        }

        .crianca-form {
            display: none;
        }
    }

}

#historias {
    margin-top: 10%;
    background-color: #0C306C;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 65vh;
    position: relative;
    overflow-x: visible;

    h1 {
        color: #ffffff;
        font-family: "Roboto Condensed", sans-serif;
        font-size: 30px;
        font-weight: 300;
        width: 75%;
        position: relative;
        top: 20%;

    }

    .esquerda {
        right: 50%;
        top: 45%;
        width: 20%;
        position: relative;
    }

    .direita {
        left: 42%;
        bottom: 7%;
        width: 16%;
        position: relative;
        z-index: 5;
    }

    .bolinhas {
        width: 80%;
        position: relative;
        top: 40%;
        z-index: 0;
        right: 5%;
    }

    .vetor-historias {
        position: absolute;
        left: 0;
        bottom: -3%;
        width: 90%;
        height: auto;
        z-index: 1;
        pointer-events: none;
    }

    .carousel-container {
        position: relative;
        width: 50%;
        margin: auto;
        z-index: 2;
        bottom: 18%;
    }

    .carousel {
        overflow: hidden;
    }

    .carousel-track {
        display: flex;
        transition: transform 0.4s ease;
    }

    .slide {
        min-width: 100%;
        text-align: center;
    }

    .video-wrapper {
        position: relative;
        width: 100%;
        padding-top: 177.77%;
        /* proporção 9:16 */

        overflow: hidden;
    }

    .video-wrapper iframe {

        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

    .aluna {
        margin-top: 10px;
        color: #0C306C;
        font-size: 14px;
        font-family: "Happyness";
    }


    .carousel-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: #EA008A;
        border: none;
        color: white;
        font-size: 22px;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        cursor: pointer;
        z-index: 3;
    }

    .prev {
        left: -40px;
    }

    .next {
        right: -40px;
    }


    .aluna-info {
        margin-top: 12px;
        text-align: center;
    }

    .aluna-nome {
        margin: 0;
        font-size: 16px;
    }

    .nome {
        font-weight: 400;
        font-family: "Happyness";
        color: #0d3c77;
    }

    .idade {
        color: #0d3c77;
        font-family: "Roboto Condensed", sans-serif;
    }

    .aluna-cidade {
        margin: 0;
        font-size: 14px;
        color: #0d3c77;
        font-family: "Roboto Condensed", sans-serif;
    }
}

#movimento {
    padding-top: 15%;

    .escrita {
        display: flex;
        align-self: center;
        justify-self: center;
        width: 80%;
        left: 5%;
        bottom: 48px;
        gap: 5%;
        z-index: 3;
        position: relative;
        font-family: "Roboto Condensed", sans-serif;
        color: #ffff;

        h1 {
            position: relative;
            top: 10px;
            font-size: 20px;
            font-weight: 300;
        }

        p {
            font-size: 15px;
            font-weight: 300;

            strong {
                font-family: "Happyness";
                font-weight: 300;
            }
        }
    }

    .shapes {
        position: relative;
        inset: 0;
        height: 10vh;
        /* top/right/bottom/left = 0 */
        pointer-events: none;
        z-index: 1;
    }

    .vetor-front {
        position: relative;
        width: min(1100px, 98vw);
        /* ajusta no mobile */
        height: auto;
        left: 50%;
        transform: translateX(-50%) rotate(-3deg);
        top: -120px;
        z-index: 2;
    }

    .vetor-back {
        top: 40px;
        z-index: 1;
        transform: translateX(-10%) rotate(-3deg) translate(24px, 18px);
    }

    .imagens {
        display: grid;
        grid-template-columns: repeat(2, max-content);
        justify-content: center;
        column-gap: 10px;
        row-gap: 10px;
        bottom: 40px;
        z-index: 4;
        position: relative;

        img {
            justify-self: center;
            width: 100%;
            max-width: 150px;
        }
    }
}

footer {
    background-color: #0C306C;
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;

    img {

        width: 20%;
    }
}

@media screen and (max-width: 375px) {

    header {

        a {
            font-size: 7px;
        }
    }

    #conheca {
        .cards {
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        }
    }

    #futuro {
        .formulario {
            form {
                div {

                    gap: 10px;

                    select {
                        width: 100%;
                        font-size: 10px;
                    }
                }

                button {
                    font-size: 15px;
                    width: 60%;
                    margin-right: 2%;
                }
            }

            img {
                width: 35%;
                left: 65%;
                top: 0%;
            }
        }
    }

    #historias {
        .carousel-container {

            width: 62%;

            bottom: 18%;
        }

        .bolinhas {
            width: 80%;
            top: 50%;
            right: 4%;
        }
    }
    #movimento{
        height: 40vh;
        .escrita {
            width: 80%;
            left: 4%;
            bottom: 40px;
            gap: 5%;

            h1 {
                font-size: 18px;
            }

            p {
                font-size: 12px;
            }
        }

        .vetor-front {
            top: -100px;
        }

        .vetor-back {
            top: 20px;
        }
        .imagens{
            bottom: 20px;
        }
    }
}


@media screen and (min-width: 768px) {
    header {

        a {
            font-size: 15px;
        }
    }

    #onde {
        .crianca {

            width: 55%;

        }

        h1 {
            font-size: 65px;
        }
    }

    #sobre {
        height: 150vh;

        p {
            font-size: 25px;
        }
    }

    #conheca {
        height: 122vh;

        .happy {
            h1 {
                font-size: 35px;
            }

            p {
                font-size: 25px;
            }

            h2 {
                font-size: 23px;
            }
        }

        .cards {
            .card {
                h1 {
                    font-size: 18px;
                }

                p {
                    font-size: 15px;
                }
            }
        }

        a {
            font-size: 20px;
            left: 35%;
        }
    }

    #futuro {
        .shape-top p {
            font-size: 25px;
            top: -100px;
            left: 30px;
        }

        .esquerda {
            h1 {
                font-size: 30px;
            }

            p {
                font-size: 18px;
            }
        }

        .direita {
            div {
                img {
                    width: 30%;
                }

                p {
                    font-size: 20px;
                    line-height: 20px;
                    align-self: center;
                }
            }
        }

        .form-bg {
            height: 250%;
        }

        .formulario {
            form {
                div {
                    width: 96%;

                    select {
                        width: 100%;
                    }
                }

                p {

                    font-size: 12px;
                }

                button {
                    align-self: baseline;
                    justify-self: end;
                    font-size: 20px;
                }
            }

            img {

                width: 25%;
                top: 2%;
                left: 75%;
                z-index: 6;
            }
        }
    }

    #historias {
        height: 85vh;

        h1 {
            text-align: center;
            font-size: 40px;
        }

        .esquerda {
            left: -45%;
            top: 50%;
            width: 15%;
        }

        .direita {
            left: 40%;
            bottom: 10%;
            width: 15%;
        }

        .bolinhas {
            width: 70%;
            top: 40%;
            right: 0%;
        }

        .carousel-container {
            width: 40%;
            bottom: 25%;
        }

        .carousel-btn {
            width: 40px;
            height: 40px;
            font-size: 18px;
        }
    }

    #movimento {
        height: 60vh;

        .escrita {
            width: 70%;
            left: 0%;
            bottom: 50px;
            gap: 10%;

            h1 {
                width: 60%;
                font-size: 30px;
            }

            p {
                font-size: 18px;
            }
        }

        .shapes {
            height: 10vh;

        }

        .vetor-front {
            top: -250px;
        }

        .vetor-back {
            top: 60px;
        }

        .imagens {
            grid-template-columns: repeat(4, max-content);
            column-gap: 20px;
            row-gap: 20px;

            img {
                max-width: 150px;
            }
        }
    }

    footer {
        img {
            width: 15%;
        }
    }
}


@media screen and (min-width: 1024px) {
    header {

        img {
            width: 25%;
        }

        a {
            font-size: 20px;
        }
    }

    #onde {
        .crianca {
            width: 60%;
        }

        h1 {
            font-size: 90px;
        }
    }

    #sobre {
        height: 200vh;


        p {
            font-size: 35px;
        }
    }

    #conheca {

        height: 140vh;

        .happy {
            h1 {
                font-size: 40px;
            }

            p {
                font-size: 30px;
            }

            h2 {
                font-size: 25px;
            }
        }

        .cards {
            .card {
                h1 {
                    font-size: 20px;
                }

                p {
                    font-size: 18px;
                }
            }
        }

        a {
            font-size: 22px;
            left: 40%;
        }
    }

    #futuro {
        .shape-top p {
            font-size: 30px;
            top: -120px;
            left: 40px;
        }

        .esquerda {
            width: 100%;

            h1 {
                font-size: 40px;
            }

            p {
                font-size: 25px;
            }
        }

        .direita {
            width: 100%;

            div {
                img {
                    width: 20%;
                }

                p {
                    font-size: 25px;
                    line-height: 22px;
                    line-height: 25px;
                }
            }
        }

        .form-bg {
            height: 260%;
        }

        .formulario {
            form {
                width: 70%;

                div {
                    width: 96%;

                    select {
                        width: 100%;
                    }
                }

                p {

                    font-size: 20px;
                }

                button {
                    align-self: baseline;
                    justify-self: end;
                    font-size: 25px;
                }
            }

            img {

                width: 20%;
                top: 0.3%;
                left: 75%;
                z-index: 6;
            }

            .crianca-form {
                position: relative;
                bottom: 350px;
                left: 650px;
                width: 30%;

                display: block;
                z-index: 6;
            }
        }

    }

    #historias {
        height: 90vh;

        h1 {
            font-size: 50px;
        }

        .esquerda {
            left: -45%;
            top: 45%;
            width: 15%;
        }

        .direita {
            left: 42%;
            bottom: 10%;
            width: 15%;
        }

        .bolinhas {
            width: 70%;
            top: 20%;
        }

        .carousel-container {
            width: 30%;
            bottom: 30%;
        }

        .carousel-btn {
            top: 40%;
            font-size: 20px;
        }

        .prev {
            left: -20%;
        }

        .next {
            right: -20%;
        }

        .vetor-historias {
            bottom: -11%;
            width: 90%;
        }
    }

    #movimento {
        height: 80vh;

        .escrita {
            width: 60%;
            left: 0%;
            bottom: 50px;
            gap: 15%;

            h1 {
                width: 60%;
                font-size: 40px;
            }

            p {
                font-size: 25px;
            }
        }

        .shapes {
            height: 15vh;

        }

        .vetor-front {
            top: -300px;
        }

        .vetor-back {
            top: 80px;
        }

        .imagens {
            grid-template-columns: repeat(4, max-content);
            column-gap: 30px;
            row-gap: 30px;

            img {
                max-width: 200px;
            }
        }
    }

    footer {
        img {
            width: 10%;
        }
    }
}

@media screen and (min-width: 1440px) {
    header {

        img {
            width: 20%;
        }

        a {
            font-size: 30px;
        }
    }

    #onde {
        .crianca {
            width: 55%;
        }

        h1 {
            font-size: 80px;
        }
    }

    #sobre {
        height: 280vh;

        p {
            font-size: 40px;
        }

        .maior {
            left: 82%;
            width: 18%;
        }
    }

    #conheca {
        height: 160vh;

        .happy {
            h1 {
                font-size: 40px;
            }

            p {
                font-size: 30px;
            }

            h2 {
                font-size: 25px;
            }
        }

        .cards {
            .card {
                h1 {
                    font-size: 20px;
                }

                p {
                    font-size: 18px;
                }
            }
        }

        a {
            font-size: 22px;
            left: 40%;
        }
    }

    #futuro {
        height: 150vh;

        .shape-top p {
            font-size: 35px;
            top: -190px;
            left: 40px;
        }

        .esquerda {
            width: 100%;

            h1 {
                font-size: 40px;
            }

            p {
                font-size: 25px;
            }
        }

        .direita {
            width: 100%;

            div {
                img {
                    width: 15%;
                }

                p {
                    font-size: 30px;
                    line-height: 22px;
                    line-height: 25px;
                }
            }
        }

        .form-bg {
            height: 60%;
            top: 50%;

            justify-self: center;
        }

        .formulario {
            height: 70vh;

            form {
                div {
                    width: 94%;

                    select {
                        width: 100%;
                    }
                }

                p {

                    font-size: 25px;
                }

                button {
                    align-self: baseline;
                    justify-self: end;
                    font-size: 25px;
                }
            }

            img {

                width: 15%;
                top: 2%;
                left: 70%;
                z-index: 6;
            }

            .crianca-form {
                display: block;
                left: 75%;
                width: 25%;
                bottom: 400px;
            }
        }
    }

    #historias {
        height: 130vh;

        h1 {
            font-size: 60px;
        }

        .esquerda {
            left: -45%;
            top: 45%;
            width: 15%;
        }

        .direita {
            left: 42%;
            bottom: 10%;
            width: 15%;
        }

        .bolinhas {
            width: 70%;
            top: 20%;
        }

        .carousel-container {
            width: 30%;
            bottom: 30%;
        }

        .carousel-btn {
            top: 40%;
            font-size: 20px;
        }

        .prev {
            left: -20%;
        }

        .next {
            right: -20%;
        }

        .vetor-historias {
            bottom: -11%;
            width: 90%;
        }

        .aluna-cidade {
            font-size: 25px;

        }

        .nome {
            font-size: 25px;

        }

        .idade {
            font-size: 25px;
        }

        .carousel-container {
            bottom: 25%;
        }

    }

    #movimento {
        height: 110vh;

        .escrita {
            width: 60%;
            left: 0%;
            bottom: 0px;
            gap: 15%;

            h1 {
                width: 60%;
                font-size: 40px;
            }

            p {
                font-size: 25px;
            }
        }

        .shapes {
            height: 15vh;

        }

        .vetor-front {
            align-self: center;
            justify-self: center;
            top: -400px;
            width: 97%;
        }

        .vetor-back {
            top: 10px;
            align-self: center;
            justify-self: center;
        }

        .imagens {
            grid-template-columns: repeat(4, max-content);
            column-gap: 30px;
            row-gap: 30px;

            img {
                padding-top: 20%;
                max-width: 300px;
            }
        }
    }

    footer {
        height: 15vh;

        img {
            width: 10%;
        }
    }
}

@media screen and (min-width: 1500px) {
    #sobre {
        height: 300vh;

        p {
            font-size: 40px;
        }

        .maior {
            left: 82%;
            width: 18%;
        }
    }

    #conheca {
        height: 160vh;

        .happy {
            h1 {
                font-size: 40px;
            }

            p {
                font-size: 30px;
            }

            h2 {
                font-size: 25px;
            }
        }

        .cards {
            .card {
                h1 {
                    font-size: 25px;
                }

                p {
                    font-size: 20px;
                }
            }
        }

        a {
            font-size: 35px;
            left: 40%;
        }
    }

    #futuro {
        height: 160vh;

        .shape-top p {
            font-size: 35px;
            top: -190px;
            left: 40px;
        }

        .esquerda {
            width: 100%;

            h1 {
                font-size: 40px;
            }

            p {
                font-size: 25px;
            }
        }

        .direita {
            width: 100%;

            div {
                img {
                    width: 15%;
                }

                p {
                    font-size: 30px;
                    line-height: 22px;
                    line-height: 25px;
                }
            }
        }

        .form-bg {
            height: 60%;
            top: 50%;

            justify-self: center;
        }

        .formulario {
            height: 70vh;

            form {
                width: 70%;

                div {
                    width: 94%;

                    select {
                        width: 100%;
                    }
                }

                p {

                    font-size: 25px;
                }

                button {
                    align-self: baseline;
                    justify-self: end;
                    font-size: 25px;
                }
            }

            img {

                width: 15%;
                top: 2%;
                left: 70%;
                z-index: 6;
            }

            .crianca-form {
                display: block;
                left: 75%;
                width: 25%;
                bottom: 460px;
            }
        }
    }

    #historias {

        height: 140vh;

        h1 {
            top: 32%;
            font-size: 65px;
        }

        .esquerda {
            left: -44%;
            top: 55%;
            width: 15%;
        }

        .direita {
            left: 42%;
            bottom: 0%;
            top: 5%;
            width: 13%;
        }

        .bolinhas {
            width: 80%;
            top: 40%;
            right: 5%;
        }

        .carousel-container {
            width: 40%;
            bottom: 35%;
        }

        .carousel-btn {
            top: 40%;
            font-size: 20px;
        }

        .prev {
            left: -20%;
        }

        .next {
            right: -20%;
        }

        .vetor-historias {
            bottom: -11%;
            width: 90%;
        }

        .aluna-cidade {
            font-size: 25px;

        }

        .nome {
            font-size: 25px;

        }

        .idade {
            font-size: 25px;
        }
    }

    #movimento {
        height: 110vh;

        .escrita {
            width: 60%;
            left: 0%;
            gap: 15%;

            h1 {
                width: 60%;
                font-size: 40px;
            }

            p {
                font-size: 25px;
            }
        }

        .shapes {
            height: 15vh;

        }

        .vetor-front {
            align-self: center;
            justify-self: center;
            top: -460px;
            width: 97%;
        }

        .vetor-back {
            top: 10px;
            align-self: center;
            justify-self: center;
        }

        .imagens {
            grid-template-columns: repeat(4, max-content);
            column-gap: 30px;
            row-gap: 30px;

            img {
                padding-top: 20%;
                max-width: 300px;
            }
        }
    }
}

@media screen and (min-width: 1700px) {

    #sobre {
        height: 330vh;
    }

    #conheca {
        height: 185vh;

        .happy {
            h1 {
                font-size: 50px;
            }

            p {
                font-size: 40px;
            }

            h2 {
                font-size: 35px;
            }
        }

        .cards {
            .card {
                h1 {
                    font-size: 25px;
                }

                p {
                    font-size: 20px;
                }
            }

        }

        a {
            font-size: 35px;
        }
    }

    #futuro {
        height: 170vh;

        .shape-top p {
            font-size: 40px;
            top: -200px;
            left: 40px;
        }

        .esquerda {
            width: 100%;

            h1 {
                font-size: 50px;
            }

            p {
                font-size: 30px;
            }
        }

        .direita {
            width: 100%;

            div {
                img {
                    width: 15%;
                }

                p {
                    font-size: 30px;
                    line-height: 22px;
                    line-height: 25px;
                }
            }
        }

        .form-bg {
            height: 60%;
            top: 52%;

            justify-self: center;
        }

        .conteudo {
            margin-bottom: 2%;
        }

        .formulario {

            height: 70vh;

            form {
                width: 70%;

                div {
                    width: 94%;

                    select {
                        width: 100%;
                    }
                }

                p {

                    font-size: 25px;
                }

                button {
                    align-self: baseline;
                    justify-self: end;
                    font-size: 35px;
                }

            }

            img {

                width: 15%;
                top: 1%;
                left: 70%;
                z-index: 6;
            }

            .crianca-form {
                display: block;
                left: 75%;
                width: 25%;
                bottom: 490px;
            }
        }
    }

    #historias {
        height: 150vh;

        h1 {
            font-size: 70px;
        }

        .aluna-cidade {
            font-size: 30px;

        }

        .nome {
            font-size: 30px;

        }

        .idade {
            font-size: 30px;
        }

        .carousel-container {
            bottom: 25%;
            width: 30%;
        }
    }

    #movimento {
        height: 120vh;

        .escrita {
            width: 60%;
            left: 0%;
            bottom: 0px;
            gap: 15%;

            h1 {
                width: 60%;
                font-size: 40px;
            }

            p {
                font-size: 25px;
            }
        }

        .shapes {
            height: 15vh;

        }

        .vetor-front {
            align-self: center;
            justify-self: center;
            top: -550px;
            width: 97%;
        }

        .vetor-back {
            top: 10px;
            align-self: center;
            justify-self: center;
        }

        .imagens {
            grid-template-columns: repeat(4, max-content);
            column-gap: 30px;
            row-gap: 30px;

            img {
                padding-top: 20%;
                max-width: 300px;
            }
        }
    }
}