@font-face {
    font-family: NeueHaas;
    src: url(/src/fonts/NeueHaasDisplayMediu.ttf);
}

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: NeueHaas;
}

body {
    height: 100vh;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgb(43, 43, 43);
}

::-webkit-scrollbar {
    width: 8px;
}

button {
    cursor: pointer;
}

.invisivel {
    display: none;
}



@media screen and (min-width: 1366px) {
    /* <=================SEÇÃO HOME E VÍDEO===================> */

    #home {
        height: 88vh;
    }

    #home img {
        top: 0;
        left: 0;
        position: absolute;
        object-fit: cover;
        background-repeat: no-repeat;
        height: 100vh;
        width: 100%;
    }

    .geracao {
        width: 100%;
        height: 100vh;
        position: relative;
    }

    .geracao img {
        width: 100%;
        height: 100vh;
        object-fit: cover;
        object-position: 50% 50%;
    }

    .video-home {
        width: 100%;
        height: 100vh;
        object-fit: cover;
        object-position: 50% 50%;
    }

    /* <====================7° GERAÇÃO=======================> */

    #model-7 .titulo-model {
        color: #F4F4F4;
        background-color: rgba(0, 0, 0, 0.6);
        padding: 5px;
        border-radius: 5px;
    }

    #model-7 .sub-model {
        color: #F4F4F4;
    }

    #model-7 .ancoraTexto {
        top: 16%;
    }

    #model-7 .btGeracao {
        top: 85%;
    }

    /* <====================6° GERAÇÃO=======================> */

    #model-6 .btGeracao {
        top: 92%;
    }

    /* <====================5° GERAÇÃO=======================> */

    #model-5 .ancoraTexto {
        top: 14%;
    }

    #model-5 .titulo-model {
        color: #F4F4F4;
    }

    #model-5 .sub-model {
        color: #F4F4F4;
    }

    #model-5 .btGeracao {
        top: 85%;
    }

    /* <====================4° GERAÇÃO=======================> */

    #model-4 .titulo-model {
        background-color: rgba(167, 195, 255, 0.37);
        padding: 5px;
        border-radius: 5px;
    }

    #model-4 .sub-model {
        background-color: rgba(167, 195, 255, 0.616);
        padding: 5px;
        border-radius: 5px;
    }

    #model-4 .btGeracao {
        top: 85%;
    }

    /* <====================3° GERAÇÃO=======================> */

    #model-3 .titulo-model {
        background-color: rgba(173, 179, 197, 0.6);
        padding: 5px;
        border-radius: 5px;
    }

    #model-3 .sub-model {
        background-color: rgba(173, 179, 197, 0.6);
        padding: 5px;
        border-radius: 5px;
    }

    #model-3 .btGeracao {
        top: 90%;
    }

    /* <====================2° GERAÇÃO=======================> */


    #model-2 .titulo-model {
        color: #F4F4F4;
        background-color: rgba(0, 0, 0, 0.6);
        padding: 5px;
        border-radius: 5px;
    }

    #model-2 .sub-model {
        color: #F4F4F4;
        background-color: rgba(0, 0, 0, 0.6);
        padding: 5px;
        border-radius: 5px;
    }

    #model-2 .btGeracao {
        top: 90%;
    }

    /* <====================1° GERAÇÃO=======================> */


    #model-1 .titulo-model {
        color: #F4F4F4;
        background-color: rgba(22, 21, 21, 0.781);
        padding: 5px;
        border-radius: 5px;
    }

    #model-1 .sub-model {
        color: #F4F4F4;
        background-color: rgba(22, 21, 21, 0.781);
        padding: 5px;
        border-radius: 5px;
    }

    /* <==============TÍTULO E BOTÕES DAS SEÇÕES==============> */

    .ancoraTexto {
        position: absolute;
        top: 15%;
        /* Centraliza verticalmente */
        left: 50%;
        /* Centraliza horizontalmente */
        transform: translate(-50%, -50%);
        /*Move a div de volta 50% do seu próprio tamanho em ambas as direções*/
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        /* font-size: 1rem; */
    }

    h2,
    h3 {
        font-family: NeueHaas, sans-serif;
        font-weight: 100;
    }

    .ancoraTexto h2 {
        font-size: 2rem;
    }

    .ancoraTexto h3 {
        margin-top: 20px;
        font-size: 1rem;
    }

    .btGeracao {
        position: absolute;
        top: 80%;
        /* Centraliza verticalmente */
        left: 50%;
        /* Centraliza horizontalmente */
        transform: translate(-50%, -50%);
        /*Move a div de volta 50% do seu próprio tamanho em ambas as direções*/
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        width: 40%;
    }

    .btDetalhes {
        cursor: pointer;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        background-color: #F4F4F4;
        color: #393C41;
        height: 2.5rem;
        width: 100%;
        font-family: "DM Sans", sans-serif;
        font-weight: 500;
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: .3s;
    }

    .btDetalhes:hover {
        background-color: #c9c7c7;
    }

    .btComprar:hover {
        background-color: rgba(76, 107, 206, 0.8);
    }

    .btComprar {
        cursor: pointer;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        background-color: #3E6AE1;
        color: #F4F4F4;
        height: 2.5rem;
        width: 100%;
        font-family: "DM Sans", sans-serif;
        font-weight: 500;
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* <===============BOTÃO SUPORTE=====+========> */
    .btn-suporte {
        padding: 9px 0 0 9px;
        margin-right: 10px;
        margin-bottom: 5px;
        position: fixed;
        bottom: 0;
        right: 0;
        border: none;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.788);
    }

    .comemoracao {
        padding: 5px;
    }

    .comemoracao:hover {
        background-color: #eeeeee;
        border-radius: 5px;
    }

    .sobre-nos {
        padding: 5px;
    }

    .sobre-nos:hover {
        background-color: #eeeeee;
        border-radius: 5px;
    }

    #header {
        z-index: 2;
    }

}

@media screen and (max-width: 320px) {
    /* <=================SEÇÃO HOME E VÍDEO===================> */

    #home {
        height: 100vh;
    }

    #home img {
        top: 0;
        left: 0;
        position: absolute;
        object-fit: cover;
        background-repeat: no-repeat;
        height: 100vh;
        width: 100%;
    }

    .geracao {
        width: 100%;
        height: 100vh;
        position: relative;
    }

    .geracao img {
        width: 100%;
        height: 100vh;
        object-fit: cover;
        object-position: 50% 50%;
    }

    .video-home {
        width: 100%;
        height: 34vh;
        object-fit: cover;
        object-position: 50% 50%;
    }

    /* ===================== GERAL =========================== */
    .geracao .titulo-model {
        font-size: 16px;
    }

    .geracao .sub-model {
        font-size: 10px;
    }

    /* <====================7° GERAÇÃO=======================> */

    #model-7 .titulo-model {
        color: #F4F4F4;
        background-color: rgba(0, 0, 0, 0.6);
        padding: 5px;
        border-radius: 5px;
    }

    #model-7 .sub-model {
        color: #F4F4F4;
    }

    #model-7 .ancoraTexto {
        top: 16%;
    }

    #model-7 .btGeracao {
        top: 85%;

    }

    /* <====================6° GERAÇÃO=======================> */

    #model-6 .btGeracao {
        top: 92%;
    }

    /* <====================5° GERAÇÃO=======================> */

    #model-5 .ancoraTexto {
        top: 14%;
    }

    #model-5 .titulo-model {
        color: #F4F4F4;
    }

    #model-5 .sub-model {
        color: #F4F4F4;
    }

    #model-5 .btGeracao {
        top: 85%;
    }

    /* <====================4° GERAÇÃO=======================> */

    #model-4 .titulo-model {
        background-color: rgba(167, 195, 255, 0.37);
        padding: 5px;
        border-radius: 5px;
    }

    #model-4 .sub-model {
        background-color: rgba(167, 195, 255, 0.616);
        padding: 5px;
        border-radius: 5px;
    }

    #model-4 .btGeracao {
        top: 85%;
    }

    /* <====================3° GERAÇÃO=======================> */

    #model-3 .titulo-model {
        background-color: rgba(173, 179, 197, 0.6);
        padding: 5px;
        border-radius: 5px;
    }

    #model-3 .sub-model {
        background-color: rgba(173, 179, 197, 0.6);
        padding: 5px;
        border-radius: 5px;
    }

    #model-3 .btGeracao {
        top: 90%;
    }

    /* <====================2° GERAÇÃO=======================> */


    #model-2 .titulo-model {
        color: #F4F4F4;
    }

    #model-2 .sub-model {
        color: #F4F4F4;
    }

    #model-2 .btGeracao {
        top: 90%;
    }

    /* <====================1° GERAÇÃO=======================> */


    #model-1 .titulo-model {
        color: #F4F4F4;
    }

    #model-1 .sub-model {
        color: #F4F4F4;
    }

    /* <==============TÍTULO E BOTÕES DAS SEÇÕES==============> */

    .ancoraTexto {
        position: absolute;
        top: 15%;
        /* Centraliza verticalmente */
        left: 50%;
        /* Centraliza horizontalmente */
        transform: translate(-50%, -50%);
        /*Move a div de volta 50% do seu próprio tamanho em ambas as direções*/
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        /* font-size: 1rem; */
    }

    h2,
    h3 {
        font-family: NeueHaas, sans-serif;
        font-weight: 100;
    }

    .ancoraTexto h2 {
        font-size: 2rem;
    }

    .ancoraTexto h3 {
        margin-top: 20px;
        font-size: 1rem;
    }

    .btGeracao {
        position: absolute;
        top: 80%;
        /* Centraliza verticalmente */
        left: 50%;
        /* Centraliza horizontalmente */
        transform: translate(-50%, -50%);
        /*Move a div de volta 50% do seu próprio tamanho em ambas as direções*/
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        width: 70%;
    }

    .btDetalhes {
        cursor: pointer;
        border: none;
        padding: 5px 10px;
        border-radius: 4px;
        background-color: #F4F4F4;
        color: #393C41;
        height: 2rem;
        width: 100%;
        font-family: "DM Sans", sans-serif;
        font-weight: 500;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: .3s;
    }

    .btDetalhes:hover {
        background-color: #c9c7c7;
    }

    .btComprar:hover {
        background-color: rgba(76, 107, 206, 0.8);
    }

    .btComprar {
        cursor: pointer;
        border: none;
        padding: 5px 10px;
        border-radius: 4px;
        background-color: #3E6AE1;
        color: #F4F4F4;
        height: 2rem;
        width: 100%;
        font-family: "DM Sans", sans-serif;
        font-weight: 500;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: .3s;
    }

    /* <===============BOTÃO SUPORTE=====+========> */
    .btn-suporte {
        padding: 9px 0 0 9px;
        margin-right: 10px;
        margin-bottom: 5px;
        position: fixed;
        bottom: 0;
        right: 0;
        border: none;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.788);
    }

    .comemoracao {
        padding: 5px;
    }

    .comemoracao:hover {
        background-color: #eeeeee;
        border-radius: 5px;
    }

    .sobre-nos {
        padding: 5px;
    }

    .sobre-nos:hover {
        background-color: #eeeeee;
        border-radius: 5px;
    }

    #header {
        z-index: 2;
    }

}

@media screen and (min-width: 1101px) and (max-width: 1365px) {
    /* <=================SEÇÃO HOME E VÍDEO===================> */

    #home {
        height: 88vh;
    }

    #home img {
        top: 0;
        left: 0;
        position: absolute;
        object-fit: cover;
        background-repeat: no-repeat;
        height: 100vh;
        width: 100%;
    }

    .geracao {
        width: 100%;
        height: 100vh;
        position: relative;
    }

    .geracao img {
        width: 100%;
        height: 100vh;
        object-fit: cover;
        object-position: 50% 50%;
    }

    .video-home {
        width: 100%;
        height: 100vh;
        object-fit: cover;
        object-position: 50% 50%;
    }

    /* <====================7° GERAÇÃO=======================> */

    #model-7 .titulo-model {
        color: #F4F4F4;
        background-color: rgba(0, 0, 0, 0.6);
        padding: 5px;
        border-radius: 5px;
    }

    #model-7 .sub-model {
        color: #F4F4F4;

    }

    #model-7 .ancoraTexto {
        top: 16%;
    }

    #model-7 .btGeracao {
        top: 85%;
    }

    /* <====================6° GERAÇÃO=======================> */

    #model-6 .btGeracao {
        top: 92%;
    }

    /* <====================5° GERAÇÃO=======================> */

    #model-5 .ancoraTexto {
        top: 14%;
    }

    #model-5 .titulo-model {
        color: #F4F4F4;
    }

    #model-5 .sub-model {
        color: #F4F4F4;
    }

    #model-5 .btGeracao {
        top: 85%;
    }

    /* <====================4° GERAÇÃO=======================> */

    #model-4 .titulo-model {
        background-color: rgba(167, 195, 255, 0.37);
        padding: 5px;
        border-radius: 5px;
    }

    #model-4 .sub-model {
        background-color: rgba(167, 195, 255, 0.616);
        padding: 5px;
        border-radius: 5px;
    }


    #model-4 .btGeracao {
        top: 85%;
    }

    /* <====================3° GERAÇÃO=======================> */

    #model-3 .titulo-model {
        background-color: rgba(173, 179, 197, 0.6);
        padding: 5px;
        border-radius: 5px;
    }

    #model-3 .sub-model {
        background-color: rgba(173, 179, 197, 0.6);
        padding: 5px;
        border-radius: 5px;
    }

    #model-3 .btGeracao {
        top: 90%;
    }

    /* <====================2° GERAÇÃO=======================> */


    #model-2 .titulo-model {
        color: #F4F4F4;
        background-color: rgba(0, 0, 0, 0.6);
        padding: 5px;
        border-radius: 5px;
    }

    #model-2 .sub-model {
        color: #F4F4F4;
        background-color: rgba(0, 0, 0, 0.6);
        padding: 5px;
        border-radius: 5px;
    }

    #model-2 .btGeracao {
        top: 90%;
    }

    /* <====================1° GERAÇÃO=======================> */


    #model-1 .titulo-model {
        color: #F4F4F4;
        background-color: rgba(22, 21, 21, 0.781);
        padding: 5px;
        border-radius: 5px;
    }

    #model-1 .sub-model {
        color: #F4F4F4;
        background-color: rgba(22, 21, 21, 0.781);
        padding: 5px;
        border-radius: 5px;
    }

    /* <==============TÍTULO E BOTÕES DAS SEÇÕES==============> */

    .ancoraTexto {
        position: absolute;
        top: 15%;
        /* Centraliza verticalmente */
        left: 50%;
        /* Centraliza horizontalmente */
        transform: translate(-50%, -50%);
        /*Move a div de volta 50% do seu próprio tamanho em ambas as direções*/
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        /* font-size: 1rem; */
    }

    h2,
    h3 {
        font-family: NeueHaas, sans-serif;
        font-weight: 100;
    }

    .ancoraTexto h2 {
        font-size: 2rem;
    }

    .ancoraTexto h3 {
        margin-top: 20px;
        font-size: 1rem;
    }

    .btGeracao {
        position: absolute;
        top: 80%;
        /* Centraliza verticalmente */
        left: 50%;
        /* Centraliza horizontalmente */
        transform: translate(-50%, -50%);
        /*Move a div de volta 50% do seu próprio tamanho em ambas as direções*/
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2rem;
    }

    .btDetalhes {
        cursor: pointer;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        background-color: #F4F4F4;
        color: #393C41;
        height: 2.5rem;
        width: 17rem;
        font-family: "DM Sans", sans-serif;
        font-weight: 500;
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: .3s;
        letter-spacing: 1px;
    }

    .btDetalhes:hover {
        background-color: #c9c7c7;
    }

    .btComprar:hover {
        background-color: rgba(76, 107, 206, 0.8);
    }

    .btComprar {
        cursor: pointer;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        background-color: #3E6AE1;
        color: #F4F4F4;
        height: 2.5rem;
        width: 17rem;
        font-family: "DM Sans", sans-serif;
        font-weight: 500;
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: .3s;
        letter-spacing: 1px;
    }

    /* <===============BOTÃO SUPORTE=====+========> */
    .btn-suporte {
        padding: 9px 0 0 9px;
        margin-right: 10px;
        margin-bottom: 5px;
        position: fixed;
        bottom: 0;
        right: 0;
        border: none;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.788);
    }

    .comemoracao {
        padding: 5px;
    }

    .comemoracao:hover {
        background-color: #eeeeee;
        border-radius: 5px;
    }

    .sobre-nos {
        padding: 5px;
    }

    .sobre-nos:hover {
        background-color: #eeeeee;
        border-radius: 5px;
    }

    #header {
        z-index: 2;
    }

}

@media screen and (min-width: 321px) and (max-width: 450px) {
    /* <=================SEÇÃO HOME E VÍDEO===================> */

    #home {
        height: 99vh;
    }

    #home img {
        top: 0;
        left: 0;
        position: absolute;
        object-fit: cover;
        background-repeat: no-repeat;
        height: 100vh;
        width: 100%;
    }

    .geracao {
        width: 100%;
        height: 100vh;
        position: relative;
    }

    .geracao img {
        width: 100%;
        height: 100vh;
        object-fit: cover;
        object-position: 50% 50%;
    }

    .video-home {
        width: 100%;
        height: 24vh;
        object-fit: cover;
        object-position: 50% 50%;
    }

    /* ===================== GERAL =========================== */
    .geracao .titulo-model {
        font-size: 18px;
    }

    .geracao .sub-model {
        font-size: 12px;
    }

    /* <====================7° GERAÇÃO=======================> */

    #model-7 .titulo-model {
        color: #F4F4F4;
        background-color: rgba(0, 0, 0, 0.6);
        padding: 5px;
        border-radius: 5px;

    }

    #model-7 .sub-model {

        color: #F4F4F4;
    }

    #model-7 .ancoraTexto {
        top: 16%;
    }

    #model-7 .btGeracao {
        top: 85%;
    }

    /* <====================6° GERAÇÃO=======================> */

    #model-6 .btGeracao {
        top: 92%;
    }

    /* <====================5° GERAÇÃO=======================> */

    #model-5 .ancoraTexto {
        top: 14%;
    }

    #model-5 .titulo-model {
        color: #F4F4F4;
    }

    #model-5 .sub-model {
        color: #F4F4F4;
    }

    #model-5 .btGeracao {
        top: 85%;
    }

    /* <====================4° GERAÇÃO=======================> */

    #model-4 .titulo-model {
        background-color: rgba(167, 195, 255, 0.37);
        padding: 5px;
        border-radius: 5px;
    }

    #model-4 .sub-model {
        background-color: rgba(167, 195, 255, 0.616);
        padding: 5px;
        border-radius: 5px;
    }

    #model-4 .btGeracao {
        top: 85%;
    }

    /* <====================3° GERAÇÃO=======================> */

    #model-3 .titulo-model {
        background-color: rgba(173, 179, 197, 0.6);
        padding: 5px;
        border-radius: 5px;
    }

    #model-3 .sub-model {
        background-color: rgba(173, 179, 197, 0.6);
        padding: 5px;
        border-radius: 5px;
    }

    #model-3 .btGeracao {
        top: 90%;
    }

    /* <====================2° GERAÇÃO=======================> */


    #model-2 .titulo-model {
        color: #F4F4F4;
        background-color: rgba(0, 0, 0, 0.6);
        padding: 5px;
        border-radius: 5px;
    }

    #model-2 .sub-model {
        color: #F4F4F4;
        background-color: rgba(0, 0, 0, 0.6);
        padding: 5px;
        border-radius: 5px;
    }

    #model-2 .btGeracao {
        top: 90%;
    }

    /* <====================1° GERAÇÃO=======================> */


    #model-1 .titulo-model {
        color: #F4F4F4;
        background-color: rgba(22, 21, 21, 0.781);
        padding: 5px;
        border-radius: 5px;
    }

    #model-1 .sub-model {
        color: #F4F4F4;
        background-color: rgba(22, 21, 21, 0.781);
        padding: 5px;
        border-radius: 5px;
    }

    /* <==============TÍTULO E BOTÕES DAS SEÇÕES==============> */

    .ancoraTexto {
        position: absolute;
        top: 15%;
        /* Centraliza verticalmente */
        left: 50%;
        /* Centraliza horizontalmente */
        transform: translate(-50%, -50%);
        /*Move a div de volta 50% do seu próprio tamanho em ambas as direções*/
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        /* font-size: 1rem; */
    }

    h2,
    h3 {
        font-family: NeueHaas, sans-serif;
        font-weight: 100;
    }

    .ancoraTexto h2 {
        font-size: 2rem;
    }

    .ancoraTexto h3 {
        margin-top: 20px;
        font-size: 1rem;
    }

    .btGeracao {
        position: absolute;
        top: 80%;
        /* Centraliza verticalmente */
        left: 50%;
        /* Centraliza horizontalmente */
        transform: translate(-50%, -50%);
        /*Move a div de volta 50% do seu próprio tamanho em ambas as direções*/
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .btDetalhes {
        cursor: pointer;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        background-color: #F4F4F4;
        color: #393C41;
        height: 2.1rem;
        width: 8rem;
        font-family: "DM Sans", sans-serif;
        font-weight: 500;
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: .3s;
        letter-spacing: 1px;
    }

    .btDetalhes:hover {
        background-color: #c9c7c7;
    }

    .btComprar:hover {
        background-color: rgba(76, 107, 206, 0.8);
    }

    .btComprar {
        cursor: pointer;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        background-color: #3E6AE1;
        color: #F4F4F4;
        height: 2.5rem;
        width: 10rem;
        font-family: "DM Sans", sans-serif;
        font-weight: 500;
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: .3s;
        letter-spacing: 1px;
    }

    /* <===============BOTÃO SUPORTE=====+========> */
    .btn-suporte {
        padding: 9px 0 0 9px;
        margin-right: 10px;
        margin-bottom: 5px;
        position: fixed;
        bottom: 0;
        right: 0;
        border: none;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.788);
    }

    .comemoracao {
        padding: 5px;
    }

    .comemoracao:hover {
        background-color: #eeeeee;
        border-radius: 5px;
    }

    .sobre-nos {
        padding: 5px;
    }

    .sobre-nos:hover {
        background-color: #eeeeee;
        border-radius: 5px;
    }

    #header {
        z-index: 2;
    }

}

@media screen and (min-width: 451px) and (max-width: 800px) {
    /* <=================SEÇÃO HOME E VÍDEO===================> */

    #home {
        height: 76vh;
    }

    #home img {
        top: 0;
        left: 0;
        position: absolute;
        object-fit: cover;
        background-repeat: no-repeat;
        height: 100vh;
        width: 100%;
    }

    .geracao {
        width: 100%;
        height: 100vh;
        position: relative;
    }

    .geracao img {
        width: 100%;
        height: 100vh;
        object-fit: cover;
        object-position: 50% 50%;
    }

    .video-home {
        width: 100%;
        height: 36vh;
        object-fit: cover;
        object-position: 50% 50%;
    }

    /* <====================7° GERAÇÃO=======================> */

    #model-7 .titulo-model {
        color: #F4F4F4;
        background-color: rgba(0, 0, 0, 0.6);
        padding: 5px;
        border-radius: 5px;
    }

    #model-7 .sub-model {
        color: #F4F4F4;
    }

    #model-7 .ancoraTexto {
        top: 16%;
    }

    #model-7 .btGeracao {
        top: 85%;
    }

    /* <====================6° GERAÇÃO=======================> */

    #model-6 .btGeracao {
        top: 92%;
    }

    /* <====================5° GERAÇÃO=======================> */

    #model-5 .ancoraTexto {
        top: 14%;
    }

    #model-5 .titulo-model {
        color: #F4F4F4;
    }

    #model-5 .sub-model {
        color: #F4F4F4;
    }

    #model-5 .btGeracao {
        top: 85%;
    }

    /* <====================4° GERAÇÃO=======================> */

    #model-4 .titulo-model {
        background-color: rgba(167, 195, 255, 0.37);
        padding: 5px;
        border-radius: 5px;
    }

    #model-4 .sub-model {
        background-color: rgba(167, 195, 255, 0.616);
        padding: 5px;
        border-radius: 5px;
    }

    #model-4 .btGeracao {
        top: 85%;
    }

    /* <====================3° GERAÇÃO=======================> */

    #model-3 .titulo-model {
        background-color: rgba(173, 179, 197, 0.6);
        padding: 5px;
        border-radius: 5px;
    }

    #model-3 .sub-model {
        background-color: rgba(173, 179, 197, 0.6);
        padding: 5px;
        border-radius: 5px;
    }

    #model-3 .btGeracao {
        top: 90%;
    }

    /* <====================2° GERAÇÃO=======================> */


    #model-2 .titulo-model {
        color: #F4F4F4;
        background-color: rgba(0, 0, 0, 0.6);
        padding: 5px;
        border-radius: 5px;
    }

    #model-2 .sub-model {
        color: #F4F4F4;
        background-color: rgba(0, 0, 0, 0.6);
        padding: 5px;
        border-radius: 5px;
    }

    #model-2 .btGeracao {
        top: 90%;
    }

    /* <====================1° GERAÇÃO=======================> */


    #model-1 .titulo-model {
        color: #F4F4F4;
        background-color: rgba(22, 21, 21, 0.781);
        padding: 5px;
        border-radius: 5px;
    }

    #model-1 .sub-model {
        color: #F4F4F4;
        background-color: rgba(22, 21, 21, 0.781);
        padding: 5px;
        border-radius: 5px;
    }

    /* <==============TÍTULO E BOTÕES DAS SEÇÕES==============> */

    .ancoraTexto {
        position: absolute;
        top: 15%;
        /* Centraliza verticalmente */
        left: 50%;
        /* Centraliza horizontalmente */
        transform: translate(-50%, -50%);
        /*Move a div de volta 50% do seu próprio tamanho em ambas as direções*/
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        /* font-size: 1rem; */
    }

    h2,
    h3 {
        font-family: NeueHaas, sans-serif;
        font-weight: 100;
    }

    .ancoraTexto h2 {
        font-size: 2rem;
    }

    .ancoraTexto h3 {
        margin-top: 20px;
        font-size: 1rem;
    }

    .btGeracao {
        position: absolute;
        top: 80%;
        /* Centraliza verticalmente */
        left: 50%;
        /* Centraliza horizontalmente */
        transform: translate(-50%, -50%);
        /*Move a div de volta 50% do seu próprio tamanho em ambas as direções*/
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        width: 40%;
    }

    .btDetalhes {
        cursor: pointer;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        background-color: #F4F4F4;
        color: #393C41;
        height: 2.5rem;
        width: 100%;
        font-family: "DM Sans", sans-serif;
        font-weight: 500;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .btDetalhes:hover {
        background-color: #c9c7c7;
    }

    .btComprar:hover {
        background-color: rgba(76, 107, 206, 0.8);
    }

    .btComprar {
        cursor: pointer;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        background-color: #3E6AE1;
        color: #F4F4F4;
        height: 2.5rem;
        width: 100%;
        font-family: "DM Sans", sans-serif;
        font-weight: 500;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: .3s;
    }

    /* <===============BOTÃO SUPORTE=====+========> */
    .btn-suporte {
        padding: 9px 0 0 9px;
        margin-right: 10px;
        margin-bottom: 5px;
        position: fixed;
        bottom: 0;
        right: 0;
        border: none;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.788);
    }

    .comemoracao {
        padding: 5px;
    }

    .comemoracao:hover {
        background-color: #eeeeee;
        border-radius: 5px;
    }

    .sobre-nos {
        padding: 5px;
    }

    .sobre-nos:hover {
        background-color: #eeeeee;
        border-radius: 5px;
    }

    #header {
        z-index: 2;
    }

}

@media screen and (min-width: 801px) and (max-width: 1100px) {
    /* <=================SEÇÃO HOME E VÍDEO===================> */

    #home {
        height: 79vh;
    }

    #home img {
        top: 0;
        left: 0;
        position: absolute;
        object-fit: cover;
        background-repeat: no-repeat;
        height: 100vh;
        width: 100%;
    }

    .geracao {
        width: 100%;
        height: 100vh;
        position: relative;
    }

    .geracao img {
        width: 100%;
        height: 100vh;
        object-fit: cover;
        object-position: 50% 50%;
    }

    .video-home {
        width: 100%;
        height: 42vh;
        object-fit: cover;
        object-position: 50% 50%;
    }

    /* <====================7° GERAÇÃO=======================> */

    #model-7 .titulo-model {
        color: #F4F4F4;
        background-color: rgba(0, 0, 0, 0.6);
        padding: 5px;
        border-radius: 5px;
    }

    #model-7 .sub-model {
        color: #F4F4F4;
    }

    #model-7 .ancoraTexto {
        top: 16%;
    }

    #model-7 .btGeracao {
        top: 85%;
    }

    /* <====================6° GERAÇÃO=======================> */

    #model-6 .btGeracao {
        top: 92%;
    }

    /* <====================5° GERAÇÃO=======================> */

    #model-5 .ancoraTexto {
        top: 14%;
    }

    #model-5 .titulo-model {
        color: #F4F4F4;
    }

    #model-5 .sub-model {
        color: #F4F4F4;
    }

    #model-5 .btGeracao {
        top: 85%;
    }

    /* <====================4° GERAÇÃO=======================> */

    #model-4 .titulo-model {
        background-color: rgba(167, 195, 255, 0.37);
        padding: 5px;
        border-radius: 5px;
    }

    #model-4 .sub-model {
        background-color: rgba(167, 195, 255, 0.616);
        padding: 5px;
        border-radius: 5px;
    }

    #model-4 .btGeracao {
        top: 85%;
    }

    /* <====================3° GERAÇÃO=======================> */

    #model-3 .titulo-model {
        background-color: rgba(173, 179, 197, 0.6);
        padding: 5px;
        border-radius: 5px;
    }

    #model-3 .sub-model {
        background-color: rgba(173, 179, 197, 0.6);
        padding: 5px;
        border-radius: 5px;
    }

    #model-3 .btGeracao {
        top: 90%;
    }

    /* <====================2° GERAÇÃO=======================> */


    #model-2 .titulo-model {
        color: #F4F4F4;
        background-color: rgba(0, 0, 0, 0.6);
        padding: 5px;
        border-radius: 5px;
    }

    #model-2 .sub-model {
        color: #F4F4F4;
        background-color: rgba(0, 0, 0, 0.6);
        padding: 5px;
        border-radius: 5px;
    }

    #model-2 .btGeracao {
        top: 90%;
    }

    /* <====================1° GERAÇÃO=======================> */


    #model-1 .titulo-model {
        color: #F4F4F4;
        background-color: rgba(22, 21, 21, 0.781);
        padding: 5px;
        border-radius: 5px;
    }

    #model-1 .sub-model {
        color: #F4F4F4;
        background-color: rgba(22, 21, 21, 0.781);
        padding: 5px;
        border-radius: 5px;
    }

    /* <==============TÍTULO E BOTÕES DAS SEÇÕES==============> */

    .ancoraTexto {
        position: absolute;
        top: 15%;
        /* Centraliza verticalmente */
        left: 50%;
        /* Centraliza horizontalmente */
        transform: translate(-50%, -50%);
        /*Move a div de volta 50% do seu próprio tamanho em ambas as direções*/
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        /* font-size: 1rem; */
    }

    h2,
    h3 {
        font-family: NeueHaas, sans-serif;
        font-weight: 100;
    }

    .ancoraTexto h2 {
        font-size: 2rem;
    }

    .ancoraTexto h3 {
        margin-top: 20px;
        font-size: 1rem;
    }

    .btGeracao {
        position: absolute;
        top: 80%;
        /* Centraliza verticalmente */
        left: 50%;
        /* Centraliza horizontalmente */
        transform: translate(-50%, -50%);
        /*Move a div de volta 50% do seu próprio tamanho em ambas as direções*/
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .btDetalhes {
        cursor: pointer;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        background-color: #F4F4F4;
        color: #393C41;
        height: 2.5rem;
        width: 17rem;
        font-family: "DM Sans", sans-serif;
        font-weight: 500;
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: .3s;
        letter-spacing: 1px;
    }

    .btDetalhes:hover {
        background-color: #c9c7c7;
    }

    .btComprar:hover {
        background-color: rgba(76, 107, 206, 0.8);
    }

    .btComprar {
        cursor: pointer;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        background-color: #3E6AE1;
        color: #F4F4F4;
        height: 2.5rem;
        width: 17rem;
        font-family: "DM Sans", sans-serif;
        font-weight: 500;
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: .3s;
        letter-spacing: 1px;
    }

    /* <===============BOTÃO SUPORTE=====+========> */
    .btn-suporte {
        padding: 9px 0 0 9px;
        margin-right: 10px;
        margin-bottom: 5px;
        position: fixed;
        bottom: 0;
        right: 0;
        border: none;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.788);
    }

    .comemoracao {
        padding: 5px;
    }

    .comemoracao:hover {
        background-color: #eeeeee;
        border-radius: 5px;
    }

    .sobre-nos {
        padding: 5px;
    }

    .sobre-nos:hover {
        background-color: #eeeeee;
        border-radius: 5px;
    }

    #header {
        z-index: 2;
    }

}