/* 1630px RESPONSIVE MEDIA */
@media (max-width: 1630px) {
    
    /* BOTÃO WHATSAPP ----------------------------------------------------------------------------------*/
    body .botao_whatsapp{
        bottom: 40px;
        right: 40px;
        width: 50px;
        height: 50px;
    }

    /* BOTÃO CARRINHO ----------------------------------------------------------------------------------*/
    body .botao_carrinho{
        bottom: 100px;
        right: 40px;
        width: 50px;
        height: 50px;
    }
    .botao_carrinho span{
        font-size: 22px;
        top: -5px;
        right: -5px;
        width: 20px;
        height: 20px;
        font-size: 10px;
        font-weight: 500;
    }



    /* COOKIES --------------------------------------------------------------------------------------------------------*/
    body .cookies{
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
    }
    .cookies .cookies_box{
        width: 60%;
        border-radius: 10px;
    }
    .cookies_box .cookies_header{
        width: 100%;
        height: 60px;
        padding: 0 20px;
    }
    .cookies_header i{
        font-size: 24px;
    }
    .cookies_header h3 span{
        color: var(--blue);
    }

    .cookies_box .cookies_body{
        padding: 20px;
    }
    .cookies_tabs .cookies_tab{
        width: 33%;
        height: 50px;
    }
    .cookies_tab span{
        height: 4px;
        border-radius: 2px;
    }
    .cookies_tab h4{
        font-size: 16px;
        font-weight: 600;
    }

    .cookies_body .cookies_containers{
        padding: 20px 0;
    }
    .cookies_containers .cookies_container{
        gap: 10px;
    }

    .cookies_container .cookies_container_item{
        gap: 10px;
    }
    .cookies_container_item .checkin_cookies{
        top: 0;
        right: 10px;
        width: 50px;
        height: 24px;
        border-radius: 12px;
    }
    .checkin_cookies span{
        left: 4px;
        width: 18px;
        height: 18px;
    }
    .checkin_cookies.checked span{
        left: 28px;
    }

    .cookies_buttons .cookie_button{
        width: 33%;
        height: 70px;
        border-radius: 5px;
        border: 2px solid var(--blue);
    }
    .cookie_button h4{
        font-size: 14px;
    }




    /* HEADER --------------------------------------------------------------------------------------------------------*/
    body .header{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        background-color: var(--bg-medium);
        border-bottom: 1px solid var(--bg-light);
        z-index: 999;
    }

    .header .header_navigation{
        width: 100%;
        min-height: 80px;
        height: 80px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0 40px;
    }

    .header_navigation .header_nav_left{
        width: auto;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .header_nav_left img{
        width: auto;
        height: 50%;
        cursor: pointer;
    }

    .header_navigation .header_nav_right{
        width: auto;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }

    .header_nav_right .header_nav_button{
        width: auto;
        height: 40px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background-color: transparent;
        cursor: pointer;
        transition: all 100ms ease-in-out;
        border-radius: 10px;
        gap: 5px;
        text-decoration: none;
        padding: 0 10px;
    }
    .header_nav_button span{
        width: 10px;
        height: 10px;
        background-color: #00f2fe;
        border-radius: 50%;
    }
    .header_nav_button h5{
        color: #FFFFFF;
        font-weight: 500;
        font-size: 12px;
    }
    .header_nav_button i{
        color: var(--font-color-span);
        font-size: 14px;
    }
    .header_nav_button:hover{
        background-color: var(--bg-light);
    }
    .header_nav_button:hover i, .header_nav_button:hover h5{
        color: #FFFFFF;
    }

    .header .header_separator{
        width: 1px;
        height: 60%;
        background-color: var(--bg-light);
        margin-left: 20px;
        margin-right: 20px;
    }

    .header_nav_right .btn_login{
        width: auto;
        height: 40px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background-color: transparent;
        padding: 0 20px;
        border-radius: 10px;
        gap: 10px;
        color: white;
        transition: all 100ms ease-in-out;
        cursor: pointer;
    }
    .btn_login i{
        font-size: 14px;
        transition: all 100ms ease-in-out;
    }
    .btn_login h5{
        font-size: 14px;
        transition: all 100ms ease-in-out;
        font-weight: 500;
    }
    .btn_login:hover{
        background-color: #FFFFFF;
    }
    .btn_login:hover i, .btn_login:hover h5{
        color: var(--bg-medium);
    }

    .header_nav_right .btn_course_platform{
        width: auto;
        height: 40px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 0 20px;
        border: 1px solid #00f2fe;
        color: #FFFFFF;
        cursor: pointer;
        transition: all 100ms ease-in-out;
        border-radius: 10px;
    }
    .btn_course_platform i{
        transition: all 100ms ease-in-out;
        color: #00f2fe;
    }
    .btn_course_platform h5{
        font-size: 14px;
        transition: all 100ms ease-in-out;
        font-weight: 500;
    }
    .btn_course_platform:hover{
        background-color: #00f2fe;
    }
    .btn_course_platform:hover i, .btn_course_platform:hover h5{
        color: var(--bg-medium);
    }



    .header .header_options_body{
        width: 100%;
        height: auto;
    }
    .header_options_body .header_options_container{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: start;
        justify-content: center;
        gap: 20px;
        padding: 2% 19%;
    }
    .header_options_container.hidden{
        display: none;
    }

    .header_options_container .header_options_column{
        width: 50%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
        gap: 5px;
    }
    .header_options_column h4{
        color: var(--font-color-span);
        font-weight: 400;
        pointer-events: none;
    }
    .header_options_column .header_option{
        position: relative;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: start;
        border-bottom: 1px solid var(--bg-light);
        border-radius: 10px;
        cursor: pointer;
        padding: 10px;
        gap: 10px;
        transition: all 150ms ease-in-out;
    }
    .header_option .header_option_icon{
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: white;
        border: 2px solid var(--var);
    }
    .header_option h3{
        color: var(--font-color);
        font-weight: 400;
        font-size: 16px;
    }
    .header_option .fa-chevron-right{
        position: absolute;
        right: 30px;
        color: var(--font-color);
        opacity: 0;
        transition: all 150ms ease-in-out;
    }
    .header_option:hover{
        background-color: rgba(61, 61, 61, 0.411);
    }
    .header_option:hover .fa-chevron-right{
        animation: headerOptionIcon 200ms linear forwards;
    }
    @keyframes headerOptionIcon {
        100%{
            right: 10px;
            opacity: 1;
        }
    }






    /* SIDE NAV --------------------------------------------------------------------------------------------------------*/
    .side-nav{
    position: fixed;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 900;
    }

    .nav-btn{
    padding: 10px 12px;
    border-radius: 10px;
    background: #222;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    opacity: .6;
    transition: opacity .2s, transform .2s, box-shadow .2s;
    display: flex;
    align-items: center;
    justify-content: start;
    transition: all 150ms ease-in-out;
    }

    .nav-btn.active{
    opacity: 1;
    background-color: white;
    transform: translateX(5px);
    color: #09090A;
    }






    /* SECTION HOME --------------------------------------------------------------------------------------------------------*/
    body .section_home{
        position: relative;
        width: 100vw;
        height: 100vh;
        border-bottom: 1px solid var(--bg-medium);
    }
    .section_home video{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    .section_home .home_container{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #1cbb8bec, #3046c5d2, #753ec2d2);
        padding: 0 12%;
        gap: 40px;
    }

    .section_home .home_left{
        width: 55%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;
        gap: 40px;
    }
    .home_left h1{
        color: #FFFFFF;
        font-size: 40px;
        font-weight: 300;
    }
    .home_left h1 span{
        text-shadow: none;
        font-weight: bold;
        /* Define o gradiente (ex: azul para roxo) */
        background-image: linear-gradient(to right, #4facfe, #00f2fe);
        /* Faz o gradiente preencher o texto */
        -webkit-background-clip: text;
        background-clip: text;
        /* Torna a cor original do texto invisível */
        color: transparent;
        /* Opcional: melhora a renderização */
        display: inline-block;
    }

    .home_left h3{
        color: white;
        font-weight: 300;
        font-size: 24px;
    }
    .home_left h3 span{
        color: var(--font-color);
        font-weight: bold;
    }

    .home_left .btn_home_contato{
        width: 170px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: white;
        border-radius: 10px;
        cursor: pointer;
        transition: all 150ms ease-in-out;
        text-decoration: none;
    }
    .btn_home_contato h4{
        font-size: 14px;
        color: #121214;
    }
    .btn_home_contato:hover{
        box-shadow: 0 0 10px white;
    }


    .section_home .home_right{
        width: 45%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: end;
        gap: 20px;
    }

    .home_right .form_agenda{
        width: 80%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #000000c2;
        backdrop-filter: blur(5px);
        border-radius: 10px;
        gap: 10px;
        padding: 20px;
        border: 1px solid gray;
    }
    .form_agenda h3{
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(90deg, #1cbb8b, #3046c5, #753ec2);
        color: white;
        font-weight: bold;
        text-align: center;
        border-radius: 5px;
        font-size: 18px;
    }
    .form_agenda h4{
        color: #FFFFFF;
        font-weight: 300;
        text-align: center;
        font-size: 14px;
    }
    .form_agenda input{
        width: 100%;
        height: 50px;
        border-radius: 5px;
        background-color: #202024;
        border: 1px solid rgb(61, 61, 61);
        padding-left: 10px;
        outline: none;
        color: var(--font-color);
        font-size: 14px;
        transition: all 150ms ease-in-out;
    }
    .form_agenda input:focus{
        border: 1px solid #FFFFFF;
    }
    .form_agenda .checkin{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: start;
        gap: 10px;
    }
    .checkin .square{
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border: 1px solid #00f2fe;
        border-radius: 5px;
    }
    .square i{
        font-size: 12px;
        color: #121214;
    }
    .square.checked{
        background-color: #00f2fe;
    }
    .checkin h5{
        pointer-events: none;
        color: var(--font-color);
        font-weight: 400;
        font-size: 12px;
    }
    .checkin h5 span{
        pointer-events: all;
        cursor: pointer;
        text-decoration: underline;
    }
    .form_agenda .btn_agenda{
        position: relative;
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 150ms ease-in-out;
        border-radius: 5px;
        background-color: white;
    }
    .btn_agenda i{
        color: var(--bg-medium);
        position: absolute;
        right: 45%;
        opacity: 0;
        transition: all 200ms ease-in-out;
    }
    .btn_agenda h5{
        color: var(--bg-medium);
    }
    .btn_agenda:hover{
        box-shadow: 0 0 5px white;
    }
    .btn_agenda:hover i{
        right: 40%;
        opacity: 1;
    }






    /* DIV GRADIENT SEVEN --------------------------------------------------------------------------------------------------------*/
    body .div_gradient_seven {
        width: 100%;
        display: flex;
    }
    .div_gradient_seven .scroll_gradient_seven_container {
    flex-grow: 1;
    overflow: hidden;
    }
    .scroll_gradient_seven_container .text_row_gradient_seven {
    white-space: nowrap;
    display: flex;
    align-items: center;
    /* background: linear-gradient(90deg, #1cbb8b, #3046c5, #753ec2); */
    background-color: var(--bg-medium);
    padding: 5px 0;
    }
    .text_row_gradient_seven .infinite-scroll {
    display: flex;
    animation: scrollinfinitetext 120s linear infinite;
    }
    .text_row_gradient_seven .text-scroll {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    }

    @keyframes scrollinfinitetext {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
    }

    .text-item {
    font-size: 14px;
    font-weight: 400;
    color: rgb(129, 129, 129);
    }

    .star {
    font-size: 14px;
    margin: 10px 30px;
    color: white;
    }






    /* DIV CLIENTES --------------------------------------------------------------------------------------------------------*/
    body .div_clientes{
        width: 100%;
        height: 250px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0 12%;
        background-color: var(--bg-dark);
    }


    .div_clientes .div_clientes_left{
        width: 45%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }


    .div_clientes_left .div_clientes_left_top{
        width: 100%;
        min-height: 15%;
        display: flex;
        align-items: end;
        justify-content: start;
        border-bottom: 1px solid var(--bg-light);
    }
    .div_clientes_left_top h3{
        font-weight: 400;
        color: #747474;
        font-size: 16px;
    }


    .div_clientes_left .div_clientes_left_body{
        width: 100%;
        height: 70%;
        overflow: hidden;
    }
    .div_clientes_left_body .div_clientes_left_body_scroll{
        width: 400%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-left: 0%;
        transition: all 1s ease-in-out;
    }

    .div_clientes_left_body_scroll .cli_left_item{
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: start;
        justify-content: space-between;
    }
    .cli_left_item .clientes_left_body_left{
        width: 25%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: start;
    }
    .clientes_left_body_left img{
        width: 70%;
        height: auto;
        border-radius: 10px;
    }
    .cli_left_item .clientes_left_body_right{
        width: 75%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
        padding: 15px 0;
    }
    .clientes_left_body_right h3{
        color: white;
        font-weight: 400;
        font-size: 14px;
    }
    .clientes_left_body_right h5{
        color: rgb(141, 141, 141);
        font-weight: 300;
        font-size: 14px;
    }
    .clientes_left_body_right .clientes_services_bundles{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: start;
        justify-content: start;
        padding-top: 20px;
        gap: 5px;
    }
    .clientes_services_bundles .cli_bundle{
        width: auto;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border-radius: 10px;
        padding: 4px 8px;
        background-color: var(--var);
        pointer-events: none;
    }
    .cli_bundle i{
        font-size: 12px;
        color: #252525;
    }
    .cli_bundle h5{
        font-size: 12px;
        color: #252525;
        font-weight: 400;
    }


    .div_clientes_left .div_clientes_left_bottom{
        width: 100%;
        height: 15%;
        display: flex;
        flex-direction: row;
        align-items: start;
        justify-content: center;
        gap: 10px;
    }
    .div_clientes_left_bottom .cli_circle{
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background-color: transparent;
        border: 2px solid white;
        cursor: pointer;
    }
    .cli_circle.actived{
        background-color: var(--blue);
    }



    .div_clientes .div_clientes_right{
        width: 45%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: end;
    }
    .div_clientes_right .clientes_item{
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
    }
    .clientes_item h1{
        color: white;
        font-weight: 600;
        font-size: 32px;
    }
    .clientes_item h3{
        color: gray;
        font-weight: 400;
        font-size: 16px;
    }







    body .section_empresa{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 50px 12%;
        background-color: var(--bg-medium);
        gap: 50px;
    }
    .section_empresa h1{
        color: white;
        font-weight: 400;
    }


    .section_empresa .div_quem_somos{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
    }
    .div_quem_somos .quem_somos_left{
        width: 50%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .div_quem_somos .quem_somos_right{
        width: 50%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .quem_somos_right img{
        width: 90%;
        height: auto;
        border-radius: 10px;
        border: 1px solid rgb(41, 41, 41);
    }



    .quem_somos_left h5{
        color: white;
        font-size: 20px;
        font-weight: 200;
        text-align: start;
    }
    .quem_somos_left h5 span{
        text-shadow: none;
        font-weight: bold;
        /* Define o gradiente (ex: azul para roxo) */
        background-image: linear-gradient(to right, #4facfe, #00f2fe);
        /* Faz o gradiente preencher o texto */
        -webkit-background-clip: text;
        background-clip: text;
        /* Torna a cor original do texto invisível */
        color: transparent;
        /* Opcional: melhora a renderização */
        display: inline-block;
    }


    .section_empresa .div_infos_empresa{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .div_infos_empresa .infos{
        width: 23%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
        gap: 14px;
    }
    .infos .icon{
        width: 50px;
        height: 50px;
        background: linear-gradient(#424242a2, #121214);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        border-radius: 4px;
    }
    .infos .icon i{
        font-size: 22px;
    }
    .infos h3{
        color: white;
        font-size: 24px;
        font-weight: 400;
    }
    .infos h5{
        color: white;
        font-size: 16px;
        font-weight: 200;
        text-align: start;
    }



    .section_empresa .cards_container{
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .cards_container .card{
        width: 32%;
        height: 300px;
        display: flex;
        flex-direction: column;
        cursor: pointer;
        transition: all 150ms ease-in-out;
        border-radius: 10px;
        border: 1px solid rgb(41, 41, 41);
    }
    .card .card_top{
        position: relative;
        width: 100%;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .card_top img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        border-start-start-radius: 10px;
        border-start-end-radius: 10px;
        filter: brightness(0.7);
        transition: all 150ms ease-in-out;
    }
    .card_top i{
        position: absolute;
        font-size: 60px;
        color: white;
        text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
    }
    .card .card_bottom{
        width: 100%;
        height: 50%;
        background-color: var(--bg-dark);
        border-end-start-radius: 10px;
        border-end-end-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
        gap: 5px;
        padding: 10px 20px;
    }
    .card_bottom h3{
        font-size: 18px;
        font-weight: 400;
        color: white;
    }
    .card_bottom h5{
        font-size: 14px;
        font-weight: 400;
        color: rgb(148, 148, 148);
    }
    .card:hover .card_top img{
        filter: brightness(1);
    }


    .section_empresa .video_empresa_container{
        width: 100%;
        height: 500px;
        background-color: var(--bg-dark);
        display: flex;
        flex-direction: row;
        align-items: center;
        border-radius: 10px;
        border: 1px solid rgb(41, 41, 41);
    }
    .video_empresa_container .video_empresa_left{
        width: 40%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;
        padding-left: 60px;
        gap: 30px;
    }
    .video_empresa_left img{
        width: 250px;
        height: auto;
    }
    .video_empresa_left h1{
        font-weight: 300;
        color: white;
    }
    .video_empresa_left h1 span{
        font-weight: bold;
        color: white;
    }
    .video_empresa_left h4{
        font-weight: 300;
        color: white;
    }
    .video_empresa_left .btn_seven_empresa{
        width: auto;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 10px;
        cursor: pointer;
        background: linear-gradient(90deg, #1cbb8b, #3046c5, #753ec2);
        border-radius: 10px;
        padding: 20px 25px;
        border-bottom: 2px solid transparent;
        text-decoration: none;
        transition: all 150ms ease-in-out;
    }
    .btn_seven_empresa h5{
        font-size: 14px;
        font-weight: 500;    
        color: white;
    }
    .btn_seven_empresa i{
        font-size: 14px;
        color: white;    
    }
    .btn_seven_empresa:hover{
        border-bottom: 2px solid white;
    }

    .video_empresa_container .video_empresa_right{
        width: 60%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .video_empresa_right .container_video{
        width: 80%;
        height: 75%;
        background-color: rgb(41, 41, 41);
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        
    }
    .container_video video{
        width: 97%;
        height: 95%;
        border: 1px solid var(--bg-dark);
        object-fit: cover;
    }


    body .section_seven{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 100px 15%;
        background-color: var(--bg-dark);
        gap: 50px;
    }
    .section_seven .div_seven_box{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px;
        background-color: var(--bg-medium);
        border: 1px solid rgb(41, 41, 41);
        border-radius: 10px;
        gap: 30px;
    }
    .section_seven h1{
        color: white;
        font-weight: 300;
    }
    .section_seven span{
        text-shadow: none;
        font-weight: bold;
        /* Define o gradiente (ex: azul para roxo) */
        background-image: linear-gradient(to right, #4facfe, #00f2fe);
        /* Faz o gradiente preencher o texto */
        -webkit-background-clip: text;
        background-clip: text;
        /* Torna a cor original do texto invisível */
        color: transparent;
        /* Opcional: melhora a renderização */
        display: inline-block;
    }
    .section_seven .div_seven{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .div_seven .div_seven_left{
        width: 50%;
        height: auto;
        display: flex;
        flex-direction: column;
    }
    .div_seven_left .seven_left_item{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        padding: 30px 0;
        gap: 10px;
        border-bottom: 1px solid rgb(41, 41, 41);
    }
    .seven_left_item:last-child{
        border-bottom: none;
    }
    .seven_left_item h2{
        color: white;
        font-weight: 300;
        font-size: 22px;
    }
    .seven_left_item h3{
        color: rgb(190, 190, 190);
        font-weight: 200;
        font-size: 16px;
    }
    .div_seven .div_seven_right{
        width: 50%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .div_seven_right img{
        width: 90%;
        height: auto;
        border: 1px solid rgb(41, 41, 41);
        border-radius: 5px;
    }

    .div_seven_box .div_seven_skills{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid rgb(41, 41, 41);
        padding: 40px 0 0 0;
    }
    .div_seven_skills .skill{
        width: 22%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
    .skill i{
        font-size: 28px;
        color: #00f2fe;
    }
    .skill h5{
        color: white;
        font-size: 16px;
        font-weight: 200;
        text-align: center;
    }

    .section_seven .div_banner_planos{
        width: 100%;
        height: 150px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        background: linear-gradient(90deg, #1cbb8b, #3046c5, #753ec2);
        border-radius: 10px;
        padding: 0 40px;
    }
    .div_banner_planos h1{
        width: 350px;
        color: white;
        font-weight: 500;
        font-size: 28px;
    }
    .div_banner_planos h1 span{
        color: white;
        font-weight: bold;
    }
    .div_banner_planos .banner_planos_right{
        width: auto;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 25px;
    }
    .banner_planos_right i{
        color: white;
        font-size: 24px;
        transition: all 150ms ease-in-out;
        animation: planosIconeAnim 1s linear infinite;
    }
    @keyframes planosIconeAnim {
        50%{
            transform: translateX(5px);
        }
        100%{
            transform:  translateX(0);
        }
    }
    .banner_planos_right .btn_banner_planos{
        width: auto;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: white;
        border-radius: 5px;
        cursor: pointer;
        padding: 14px 20px;
        transition: all 150ms ease-in-out;
        opacity: 0.8;
        text-decoration: none;
    }
    .btn_banner_planos h4{
        text-shadow: none;
        font-weight: bold;
        /* Define o gradiente (ex: azul para roxo) */
        background-image: linear-gradient(to right, #3046c5, #753ec2);
        /* Faz o gradiente preencher o texto */
        -webkit-background-clip: text;
        background-clip: text;
        /* Torna a cor original do texto invisível */
        color: transparent;
        /* Opcional: melhora a renderização */
        display: inline-block;
    }
    .btn_banner_planos:hover{
        opacity: 1;
    }




    body .section_pacotes{
        width: 100vw;
        height: calc(100vh - 80px);
        background-image: url('../img/SEVEN_SQUARES.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 50px 12%;
        gap: 10px;
    }

    .section_pacotes h1{
        color: white;
        font-weight: 400;
    }
    .section_pacotes h3{
        color: rgb(177, 177, 177);
        font-weight: 300;
    }

    .section_pacotes .div_pacotes_tabs{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .div_pacotes_tabs .pacotes_tab{
        width: auto;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #121214;
        color: white;
        cursor: pointer;
        border-radius: 5px;
        transition: all 150ms ease-in-out;
        padding: 14px 22px;
        gap: 10px;
        text-decoration: none;
    }
    .pacotes_tab h5{
        font-weight: 500;
    }
    .pacotes_tab:hover{
        background-color: #1d1d20;
    }
    .pacotes_tab.active{
        background: linear-gradient(to right, #4facfe, #00f2fe);
    }
    .pacotes_tab.active h5, .pacotes_tab.active i{
        color: var(--bg-medium);
        font-weight: bold;
    }

    .section_pacotes .div_pacotes_containers{
        width: 100%;
        height: auto;
        margin-top: 20px;
    }
    .div_pacotes_containers .pacotes_container{
        width: 100%;
        height: 600px;
        display: flex;
        flex-direction: row;
        gap: 10px;
    }
    .pacotes_container.hidden{
        display: none;
    }
    .pacotes_container .pacotes_container_left{
        width: 35%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;
    }
    .pacotes_container_left h2{
        text-shadow: none;
        font-weight: bold;
        font-size: 20px;
        /* Define o gradiente (ex: azul para roxo) */
        background-image: linear-gradient(to right, #4facfe, #00f2fe);
        /* Faz o gradiente preencher o texto */
        -webkit-background-clip: text;
        background-clip: text;
        /* Torna a cor original do texto invisível */
        color: transparent;
        /* Opcional: melhora a renderização */
        display: inline-block;
    }
    .pacotes_container_left h4{
        color: rgb(204, 204, 204);
        font-weight: 200;
        letter-spacing: 1px;
        line-height: 24px;
        font-size: 14px;
    }
    .pacotes_container_left h4 span{
        font-weight: 500;
    }
    .pacotes_container .pacotes_container_right{
        width: 65%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .pacotes_container_right .pacote_box{
        width: 49%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background-color: var(--bg-medium);
        border-radius: 20px;
        border: 1px solid #00f2fe;
        border-top: 2px solid #4facfe;
        border-bottom: 4px solid #4facfe;
        padding: 10px 20px;
        gap: 10px;
    }
    .pacote_box h5{
        font-weight: bold;
        color: #5b72f1;
    }
    .pacote_box .div_desconto{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: end;
    }
    .div_desconto span{
        width: 80px;
        height: 28px;
        background-color: #F95363;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
    }
    .div_desconto span h5{
        color: white;
        font-weight: 400;
    }
    .pacote_box .pacote_titulo{
        color: white;
        font-size: 16px;
        font-weight: bold;
        letter-spacing: 1px;
    }
    .pacote_box .pacote_subtitulo{
        width: 100%;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #00f2fe;
        font-size: 12px;
        font-weight: bold;
        letter-spacing: 1px;
        background-color: #33333f;
        border-radius: 10px;
    }
    .pacote_box .pacote_valor_real{
        color: gray;
        text-decoration: line-through;
        font-weight: 400;
    }
    .pacote_box .pacote_valor_com_desconto{
        color: white;
        font-weight: 300;
        font-size: 14px;
    }
    .pacote_valor_com_desconto span{
        font-weight: bold;
        font-size: 20px;
    }
    .pacote_box .pacote_descricao{
        font-weight: 200;
        font-size: 12px;
        color: white;
    }
    .pacote_descricao span{
        font-weight: bold;
    }
    .pacote_box .div_opcoes_pacote{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
        border-top: 1px solid rgb(41, 41, 41);
        padding-top: 10px;
    }
    .div_opcoes_pacote h5{
        font-weight: 300;
        color: rgb(173, 173, 173);
    }
    .pacote_box .div_pacotes_buttons{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;
    }
    .div_pacotes_buttons .pacote_button{
        position: relative;
        width: 100%;
        height: 40px;
        background-color: #252529;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 5px;
        text-decoration: none;
        transition: all 150ms ease-in-out;
    }
    .pacote_button h5{
        color: white;
        font-weight: 400;
    }
    .pacote_button:hover{
        background-color: #4863F7;
    }



    body .section_contatos{
        width: 100vw;
        height: calc(100vh - 80px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
        padding: 100px 12% 0 12%;
        background-color: var(--bg-dark);
        gap: 20px;
        border-top: 1px solid rgb(41, 41, 41);
    }
    .section_contatos h1{
        color: white;
        font-weight: 400;
    }
    .section_contatos h3{
        color: white;
        font-weight: 300;
    }

    .section_contatos .opcoes_contato_container{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
    }
    .opcoes_contato_container .opcao_contato_box{
        width: 33%;
        height: 150px;
        background: linear-gradient(#424242a2, #121214);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-radius: 10px;
        border: 1px solid rgb(41, 41, 41);
        transition: all 150ms ease-in-out;
        padding: 10px 16px;
    }
    .opcao_contato_box .contato_box_left{
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;
        gap: 10px;
        padding-right: 5px;
    }
    .contato_box_left i{
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        background-color: var(--var);
        border-radius: 50%;
    }
    .contato_box_left h3{
        font-size: 16px;
    }
    .contato_box_left h5{
        font-weight: 300;
        color: rgb(192, 192, 192);
    }

    .opcao_contato_box .contato_box_right{
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .contato_box_right .btn_contato_agendar{
        width: 98%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        background-color: #333338;
        border: 1px solid var(--var);
        text-decoration: none;
        cursor: pointer;
        transition: all 150ms ease-in-out;
    }
    .btn_contato_agendar h5{
        color: white;
        font-size: 12px;
    }
    .btn_contato_agendar:hover{
        background-color: var(--var);
    }


    .section_contatos .div_newsletter{
        position: relative;
        width: 100%;
        height: 200px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: start;
        border-top: 1px solid rgb(41, 41, 41);
        border-bottom: 1px solid rgb(41, 41, 41);
    }
    .div_newsletter .fa-envelope-circle-check{
        width: 70px;
        min-width: 70px;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(#4242426b, #121214);
        color: #868686;
        font-size: 26px;
    }
    .div_newsletter .news_left{
        width: 45%;
        height: 100%;
        display: flex;
        flex-direction: column;
        margin-left: 20px;
        align-items: start;
        justify-content: center;
        gap: 15px;
    }
    .news_left h5{
        color: #868686;
    }
    .news_left h2{
        color: white;
        font-weight: 500;
        font-size: 20px;
    }
    .div_newsletter .news_right{
        position: absolute;
        right: 0;
        top: 0;
        width: auto;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;
        gap: 10px;
    }
    .news_right .news_right_top{
        width: 100%;
        height: auto;
    }
    .news_right_top .input_box{
        position: relative;
        width: auto;
        height: auto;
        display: flex;
        align-items: center;
        gap: 20px;
    }
    .input_box input{
        width: 450px;
        height: 50px;
        border-radius: 10px;
        background-color: #202024;
        border: 1px solid rgb(61, 61, 61);
        padding-left: 50px;
        outline: none;
        color: var(--font-color);
        font-size: 14px;
        transition: all 150ms ease-in-out;
    }
    .input_box i{
        position: absolute;
        left: 15px;
        font-size: 20px;
        color: white;
    }
    .input_box .btn_enviar_news{
        width: 100px;
        height: 50px;
        border-radius: 10px;
        background-color: transparent;
        border: 2px solid #4facfe;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        cursor: pointer;
        transition: all 150ms ease-in-out;
    }
    .btn_enviar_news:hover{
        background-color: #4facfe6c;
    }

    .news_right .news_right_bottom{
        width: 100%;
        height: auto;
    }

    .news_right .news_right_bottom{
        width: auto;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 5px;
    }
    .news_right_bottom .span{
        width: 20px;
        height: 20px;
        border: 1px solid #4facfe;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--bg-dark);
        border-radius: 5px;
        cursor: pointer;
    }
    .news_right_bottom .span i{
        color: var(--bg-dark);
    }
    .news_right_bottom .span.checked{
        background-color: var(--blue);
    }

    .news_right_bottom h5{
        color: white;
        font-weight: 200;
        font-size: 12px;
    }

    body .footer{
        width: 100vw;
        height: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
        background-color: var(--bg-dark);
        padding-bottom: 50px;
    }
    .footer .seja_seven{
        color: white;
        font-weight: 300;
    }
    .seja_seven span{
        text-shadow: none;
        font-weight: bold;
        /* Define o gradiente (ex: azul para roxo) */
        background-image: linear-gradient(to right, #4facfe, #00f2fe);
        /* Faz o gradiente preencher o texto */
        -webkit-background-clip: text;
        background-clip: text;
        /* Torna a cor original do texto invisível */
        color: transparent;
        /* Opcional: melhora a renderização */
        display: inline-block;
    }
    .footer h4{
        color: rgb(182, 182, 182);
        font-weight: 200;
    }
    .footer h4 span{
        font-weight: bold;
    }


}