@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;1,200;1,300&display=swap');

* {
    margin:0;
    padding:0;
    box-sizing: border-box;
    outline: none; 
    text-decoration: none;
    transition: all 2.s easy-out;
    word-spacing: 2px;
    font-family: myFont;
   
}

.texto-faq {
    font-family: 'Nunito', sans-serif; font-weight: bold; font-size: 19px;
   
}

.banner {

    background-image: linear-gradient(360deg,#ffee00 0%,#3cb83a 70%);
    height: auto;
    
}

.whats {
    padding:10px 26px; font-size: 14px; border-radius: 8px; background-color: #00C700; color:white; border:none;  cursor: pointer;
}

.whats:hover {
    background-color: #02bb02;
    transition: .1s;
}


.banner-flex {
   width: 100%; display: flex; align-items: center; gap:25px; justify-content: space-between; padding-top: 50px; padding-bottom: 50px; margin-left:2%; margin-right:2%; padding-right:40px; padding-left:40px;
}

@font-face {
    font-family: myFont;
    src: url(impact.ttf);
}

.sub-texto {
    font-family: 'Nunito', sans-serif;
    margin-bottom:30px; font-size: 16px; color:rgb(255, 255, 255); font-weight: 550; line-height: 30px;
}

.atc-btn {
    width: 100%; 
    margin-top:30px; 
    border:none; 
    background-color: #38ec34; 
    border-radius: 30px; 
    height:55px; 
    font-size:16px; 
    cursor: pointer; 
    font-weight:700; 
    font-family: 'Nunito', sans-serif;
    box-shadow: 0.3s;
    color:rgb(44, 44, 44);
}

.atc-btn:hover{
    box-shadow: 
    0 0 5px rgba(86, 236, 52,1),
    0 0 5px rgba(86, 236, 52,0.7);
    background-color: #3cd63a;
   
}




/*  coloquei depois */

.wrapper .carousel {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 25px;
    overflow: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding: 20px;
    padding:20px;
    overflow-x: scroll;


}

.wrapper .carouselMaquininha {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 25px;
    overflow: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding: 20px;
    padding:20px;
    overflow-x: scroll;


}

.wrapper {
    max-width: 1300px;
    width:100%;
    position: relative;
    margin: 0 auto;
}

.carousel::-webkit-scrollbar {
    display:none;
 }

.carousel.dragging {
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.carousel .card {
    scroll-snap-align: start; /* retirar depois */

    list-style: none;

}

.carouselMaquininha::-webkit-scrollbar {
    display:none;
 }

.carouselMaquininha.dragging {
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.carouselMaquininha .card {
    scroll-snap-align: start; /* retirar depois */

    list-style: none;

}


.wrapper i:first-child {
    left:-22px;
}

.wrapper i:last-child {
    right:-22px;
}

.carousel.dragging .card {
    cursor: grab;
    user-select: none;
}

.carouselMaquininha.dragging .card {
    cursor: grab;
    user-select: none;
}

    input[type=radio] {
        width: 18px;
        height: 18px;
        margin-right: 10px;
        accent-color: rgba(0,173,12,1);
    }

    [type=radio]:checked:focus, [type=radio]:checked:hover {
    border-width: 2px;
    border-color: rgba(0,173,12,var(--tw-border-opacity));
}

.um-dia-util {
    background-color: #2dc92b;
    color: white; 
    padding: 7px 8px; 
    border-radius: 17px; 
    font-family: 'Nunito', sans-serif; 
    cursor: pointer;
    
}

 .imagem-vendeu-recebeu {
        width: 400px;
    }

.no-mesmo-dia {
    color: white; 
    padding: 7px 8px; 
    border-radius: 17px; 
    font-family: 'Nunito', sans-serif; 
    cursor: pointer;
}

.texto-no-mesmo-dia {
    font-family: 'Nunito', sans-serif; 
    color:black;
    text-wrap: nowrap;
}

.svg-no-mesmo-dia-branco {
    display: none;
}

.texto-um-dia-util {
    font-family: 'Nunito', sans-serif; 
    font-weight: 700;
    text-wrap: nowrap;
}

.pra-vender-com-maquininha-texto-2 {
    font-family: 'Nunito', sans-serif;
}

.pra-vender-com-maquininha-texto-1 {
   
    font-family: 'Nunito', sans-serif; display: none; 
}


.container-beneficios {
    display: flex; align-items: flex-start; gap:10px; width: 250px;
}

.flex-recebimento-da-venda {
 
    display:flex; align-items: center; gap:7px;
    
}

.beneficios {
    display: flex; align-items: flex-start; justify-content:space-between; margin:0 auto; gap: 10px; row-gap:20px;
}

.conheca-os-planos-ton {
    text-align: center; margin-top:20px; margin-bottom:15px; font-size:28px; font-family: 'Nunito', sans-serif;
}

.escolha-sua-maquininha {
    text-align: center; margin-top:60px; font-size:28px; font-family: 'Nunito', sans-serif;
}

.ficou-alguma-duvida {
    text-align: center; font-size:28px; font-family: 'Nunito', sans-serif;
}


.flex-bandeiras {
    display: flex; align-items: center; max-width: 650px; margin: 0 auto; justify-content: center; gap:13px;
}

.texto-beneficio-wrap {
   font-family: 'Nunito', sans-serif; color:rgba(0,148,32,1); font-weight: bold; font-size: 16px; margin-bottom: 5px;
}

.painel-adquira-sua-maquininha {
    display: block;
}

.painel-seu-celular-vira-uma-maquininha {
    display: flex; flex-direction: column; justify-content: center; align-items: center; width: 600px; gap: 10px;
}

.painel-todos-os-direitos-reservados {
    display: flex; align-items: flex-start; gap: 40px; width: 100%; 
}

.botao-chamar-consultor {
    background-color:rgb(255, 255, 255); border: 1px rgb(0, 170, 37) solid; color:rgb(0, 170, 37); padding:16px 22px; border-radius: 30px; cursor:pointer; font-family: 'Nunito', sans-serif; font-weight: bold; font-size: 17px;
}

.botao-escolha-maquininha {
    background-color:rgba(0,235,51,1); padding:16px 22px; border-radius: 30px; cursor:pointer; border:none; font-family: 'Nunito', sans-serif; font-weight: bold; font-size: 17px;
}

.botao-escolha-maquininha:hover {
    background-color:rgb(1, 196, 43); 
    box-shadow:0 0 4px 2px #8cf9a4;
    transition: .1s;
}

.botao-chamar-consultor:hover {
   box-shadow:0 0 4px 2px #8cf9a4;
   transition: .1s;
}

.flex-chamar-consultor {
    display: flex; gap:12px; justify-content: center; margin-top: 15px; margin-bottom: 15px; width: 95%; row-gap: 17px;
}

.container-faq {

    background-color: rgb(255, 255, 255); height: auto; width: 65%; padding:20px 25px; border-radius: 15px; border: 1px rgb(202, 202, 202) solid; cursor: pointer;
   
}

.container-faq1 {

    background-color: rgb(255, 255, 255); height: auto; width: 65%; padding:20px 25px; border-radius: 15px; border: 1px rgb(202, 202, 202) solid; cursor: pointer;
   
}

.container-faq2 {

    background-color: rgb(255, 255, 255); height: auto; width: 65%; padding:20px 25px; border-radius: 15px; border: 1px rgb(202, 202, 202) solid; cursor: pointer;
   
}

.container-faq3 {

    background-color: rgb(255, 255, 255); height: auto; width: 65%; padding:20px 25px; border-radius: 15px; border: 1px rgb(202, 202, 202) solid; cursor: pointer;
   
}

.container-faq4 {

    background-color: rgb(255, 255, 255); height: auto; width: 65%; padding:20px 25px; border-radius: 15px; border: 1px rgb(202, 202, 202) solid; cursor: pointer;
   
}

.container-faq5 {

    background-color: rgb(255, 255, 255); height: auto; width: 65%; padding:20px 25px; border-radius: 15px; border: 1px rgb(202, 202, 202) solid; cursor: pointer;
   
}

@media screen and (max-width: 462px) {

    .texto-beneficio-wrap {
       text-wrap: nowrap;
    }

   

    .conheca-os-planos-ton {
       font-size: 24px;
    }

    .escolha-sua-maquininha { 
       font-size: 24px;
    }

    .ficou-alguma-duvida {
       font-size:24px; 
    }

    .container-beneficios {
       width: 280px;
       gap:25px;
    }

    .imagem-vendeu-recebeu {
        width: 380px;
    }

  
}

@media screen and (max-width: 482px) {
 .beneficios {
        justify-content:center;
    }

}


@media screen and (max-width: 520px) {
    .flex-recebimento-da-venda {
        display:flex; align-items: center; gap:7px; flex-direction: column;
    }

      .texto-faq {
        font-size: 18px;
         max-width: 340px;
    }


}



@media screen and (max-width: 660px) { 
    .flex-bandeiras {
       flex-wrap: wrap; 
       max-width: 350px;
    }

   

    .flex-header-tarja {
        flex-direction: column;
        row-gap: 20px;
    }

    .container-beneficios {
       width: 210px;
    }

     .painel-adquira-sua-maquininha {
        display: none;
    }

    .painel-seu-celular-vira-uma-maquininha {
        display: none;
    }

    .painel-todos-os-direitos-reservados {
        justify-content: center;
    }
}

.flex-header-tarja {
    display: flex; justify-content: space-between; align-items: center; margin-left: 2%; margin-right: 2%;
}

@media screen and (max-width: 600px) {
    .pra-vender-com-maquininha-texto-1 {
       display: block;
    }

    .flex-chamar-consultor {
       flex-direction: column;
    }

    .botao-whatsapp {
        display: none;
    }

    .pra-vender-com-maquininha-texto-2 {
       display: block;
    }

   .myImage {
        width: 270px;
    }

}

 .myImage {
    width:95%;
 }

.receba-suas-vendas-texto {
    font-family: 'Nunito', sans-serif; font-size: 14.5px; color: rgba(0, 148, 32, 1); font-weight: 700; text-align: center;
}

@media screen and (max-width: 692px) { 
    .beneficios {
       max-width: 600px;
       flex-wrap: wrap;
    }

    .receba-suas-vendas-texto {
       max-width: 250px;
    }

    
   
}

.arrows-btn {
        justify-content: center; align-items: center; gap:40px; margin-top:20px; display: none;
    }

@media screen and (max-width: 900px) { 
    .painel-adquira-sua-maquininha {
         display: none;
    }

     .container-faq {
        width: 97%;
    }

    .container-faq1 {
        width: 97%;
    }

     .container-faq2 {
        width: 97%;
    }

     .container-faq3 {
        width: 97%;
    }

     .container-faq4 {
        width: 97%;
    }

     .container-faq5 {
        width: 97%;
    }

    .banner-flex {
       flex-direction: column;
       gap: 40px;
       padding:60px 20px;
    }

    .texto-aproveite {
       text-align: center;
    }

    .sub-texto {
        text-align: center;
    }

    .left {
        max-width: 450px; display: flex; align-items: center; flex-direction: column;
    }

    .myImage {
        width: 370px;
    }
   
}

@media screen and (max-width: 1200px) {  

    .arrows-btn {
        display: flex;
    }
}

.left {
    max-width: 450px; 
}

.texto-aproveite {
   margin-bottom:30px; font-weight: 100; color:#0b2c01; letter-spacing: 0.5px; font-size: 35px; line-height: 50px; 
}

.button-quero-meu-desconto {
    background-color: rgb(59, 79, 255); text-wrap: nowrap; padding: 15px 34px; border-radius: 50px; font-weight: 700; font-size: 16px; border:none; color:rgb(255, 255, 255); cursor:pointer; font-family: 'Nunito', sans-serif;
    
}

.button-quero-meu-desconto:hover {
    background-color: rgb(39, 53, 185); 
    transition: .1s;
    
}

@media screen and (max-width: 316px) {
    .flex-bandeiras {
       max-width: 200px;
    }

      .myImage {
        width: 220px;
    }
   
}



@media screen and (max-width: 390px) {
.myImage {
        width: 270px;
    }

    .imagem-vendeu-recebeu {
        width: 300px;
    }
}
