.div-anfitriao,.div-servicos,.div-servicos,.div-porque-usar{
    font-family: "Nunito";
}
    
.banner-area {
    background: #B6C0E5;
    background-size: contain;
    overflow: hidden;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
    position: relative;
}

.banner-area p{
    color: #373737 !important;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    font-family: 'Nunito';
}

.banner-area div h3{
    color: #373737 !important;
    text-align: center;
    font-size: 13.769px ;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}
a {
    text-decoration: none !important;
}
.div-servicos{
    z-index: 1 !important;
}
.div-servicos h3{
    color: #030C15;
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.como-funciona{
    color: var(--Texto-texto-base, #696969) !important;
}
.div-servicos, .div-servicos p {
    color: #030C15;
}
.div-porque-usar{
    padding-top: 95px !important;
}

.div-porque-usar h3{
    font-size: 28px;
}

.div-anfitriao div h3{
    color: #696969;
    font-size: 20px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.card-servico1{
    background-color: #F31876 !important;
}

.logo-banner {
    width: 100px;
    height: auto;
}

.pink {
    color: #F31876;
}

.banner-retangulo {
    background-color: #F31876;
    position: absolute;
    top: 66%;
    left: 39%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 10px;
    z-index: 0;
    height: 151px;
    width: 121px;
}

.img-banner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 380px;
    height: auto;
    display: block;
    margin: 0 auto;
    /* max-width: 124px; */
}

.baixar-link-google{
    width: 16.3643vw !important; 
    height: auto !important; 
    flex-shrink: 0;
    max-width: 153px;

}
.baixar-link-apple{
    width: 17.676vw !important; 
    height: auto !important; 
    flex-shrink: 0;
    max-width: 168px !important;
}

.card{
    border-radius: 18px !important;
}

.card:hover {
    transform: scale(1.02);
    transition: 0.2s;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.div-porque-usar{
    background-color: #FFA72B;
}

.div-baixar-app{
    background-color: #FF8ABC;
}

.div-baixar-app h3{
    font-family: "Paytone One" !important;
    font-size: 12px !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: normal;
}



.curved-div-2 { 
    background-color: #FFA72B;
    height: 148px;
    position: relative;
    clip-path: ellipse(67% 35% at 50% 100%);
    z-index: 10; /* Garante que a div esteja acima */
    transform: translateY(+20px); /* Move a div para cima por 20px */
}


.ellipse{
    max-width: 22px;
    max-height: 22px;
}

.custom-container{
    max-width: 800px;
}

.retangulo-bg {
    top: 13px;
    left: -8px;
    position: relative;
    z-index: 1;
}

.devices{
    max-width: auto !important;
    height: auto !important;
}
.container-top{
    z-index: 100 !important;
    position: relative;
}

.container-above{
    z-index: 1 !important;
    position: relative !important;
    top: -290px;
}

.vetor1{
    position: relative;
    top: 5px;
} 



@media (min-width: 340px) and (max-width: 381px) {
    .img-banner {
        width: 116% !important;
    }
}

@media (min-width: 0px) and (max-width: 450px) {
    .div-anfitriao div h3{
        font-size: 12px !important;
    }
}



/* Responsividade Mobile First */
@media (max-width: 767px) {

    .retangulo-bg{
        top: -15px;
        left: -1px;
        max-width: 141px;
        max-height: 161px;
    }

    p{
        font-size: 10px;
    }

}

@media (min-width: 480px) and (max-width: 599.99px){
    .div-baixar-app h3{
        font-size: 20px !important;
    }

    
}
@media (min-width: 600px) and (max-width: 767px) {
    .img-banner {
        width: 116% !important;
    }
    .div-baixar-app h3{
        font-size: 20px !important;
    }

}


@media (min-width: 600px) and (max-width: 992px) {
    .banner-retangulo {
        top: 64%;
        left: 130px;
        width: 69%;
        max-width: 297px;
        height: 291px;
    }
    p{
        font-size: 16px;
    }

    .banner-area p{
        font-size: 15px;
        line-height: 26px;
    }

    .banner-area div h3{
        font-size: 26px;
    }

    .div-servicos h3{
        font-size: 26px;
    }

    .div-porque-usar h3{
        font-size: 32px;
    }

    .div-baixar-app h3{
        font-size: 23px !important;
    }

    .logo-banner {
        width: 200px;
        height: auto;
    }

    .baixar-link-google {
        width: 91.822px;
        height: 35.5px;
    }
    
    .baixar-link-apple {
        width: 98.38px;
        height: 30.242px;
    }
    .retangulo-bg{
        top: 5px;
        left: -19px;
        max-width: 157px;
    }

    .img-servicos{
        width: 201px;
    }


}
@media (min-width: 993px) {
    .div-anfitriao .container{
        max-width: 900px !important;
    }
    .div-porque-usar .container{
        max-width: 900px !important;
    }
    .container.div-servicos {
        max-width: 900px !important;
    }
    .banner-retangulo {
        top: 67%;
        left: 184px;
        width: 72%;
        max-width: 394px;
        height: 456px;
    }
    p{
        font-size: 18px;
    }

    .banner-area p {
        font-size: 22px;
        line-height: 36px;
        font-family: 'Nunito';
    }
    .banner-area div h3{
        font-size: 34px;
    }

    .banner-area .container{
        max-width: 900px !important;
    }

    .div-servicos h3{
        font-size: 31px;
    }

    .div-porque-usar h3{
        font-size: 40px;
    }

    .div-baixar-app h3{
        font-size: 30px !important;
    }

    .logo-banner {
        width: 300px;
        height: auto;
    }

    .baixar-link-google{
        width: 155.643px !important;
        height: 56px;
    }
    .baixar-link-apple{
        width: 199.76px;
    }

    .div-anfitriao p{
        color: #696969 ;
        font-size: 18px;
        font-weight: 600;
    }

    .div-anfitriao div h3{
        font-size: 30px !important;
    }

    .retangulo-bg{
        top: 3%;
        left: -3%;
        /* max-width: 25%; */
        max-height: 92%;
    }

    .vetor-md1{
        position: relative;
        top: -59px !important;
        left: 13% !important;
        /* max-width: 788px; */
    }

    .vetor-md2{
        position: relative;
        top: -64px !important;
        left: 3% !important;
        width: 76%;
        /* max-width: 646px; */
    }

    .card-baixo{
        top: -65px !important;
    }

    .img-servicos{
        width: 201px;
    }

    .div-baixar-app .container{
        max-width: 900px !important;
    }

}

@media (min-width: 993px) and (max-width: 1160px) {
    .img-banner {
        width: 116% !important;
    }
    
}

@media (min-width: 993px) and (max-width: 1400px) {
    .div-baixar-app .container{
        max-width: 72% !important;
    } 
}