/*==========================================
            HERO MOBILE
==========================================*/

.hero-mobile{

    display:none;

}

@media (max-width:768px){

/*==========================================
    ESCONDE HERO DESKTOP
==========================================*/

.hero{

    display:none;

}

/*==========================================
    HERO MOBILE
==========================================*/

.hero-mobile{

    display:block;

    background:#050505;

    overflow:hidden;

    padding:10px 10px 100px;

}

/*==========================================
    CONTAINER
==========================================*/

.hero-mobile-container{

    width:100%;

    max-width:380px;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}

/*==========================================
    BADGE
==========================================*/

.hero-mobile .badge{

    margin-bottom:22px;

}

/*==========================================
    TITULO
==========================================*/

.hero-mobile h1{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:0px;

}

.hero-mobile .linha-verde{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

}

.hero-mobile .linha-verde span{

    color:#00DA00;

    font-size:35px;

    line-height:.9;

}
/*==========================================
    SUBTITULO
==========================================*/

.hero-mobile h2{

    font-size:24px;

    line-height:1.15;

    font-weight:700;

    margin-top:6px;

    margin-bottom:22px;

}

/*==========================================
    IMAGEM
==========================================*/

.hero-mobile-image{

    width:100%;

    margin-top:-10px;

    margin-bottom:10px;

    display:flex;

    justify-content:center;


}

.hero-mobile-image img{

    width:380px;

    max-width:100%;

    display:block;

}

/*==========================================
    BOTÃO
==========================================*/

.hero-mobile .btn-principal{

    width:100%;

    height:64px;

    font-size:19px;

    max-width:340px;

    min-width:unset;

    margin-bottom:15px;

}

/*==========================================
    TEXTO
==========================================*/

.hero-mobile p{

    max-width:330px;

    font-size:18px;

    line-height:1.7;

    color:#bdbdbd;

    margin-top:10px;
    
    margin-bottom:10px;

}

/*==========================================
    BENEFÍCIOS
==========================================*/

.hero-mobile .beneficios{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    margin-top:10px;


}

.hero-mobile .beneficios div{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    font-size:16px;

    font-weight:500;

    color:#ffffff;

    line-height:1.2;

}

.hero-mobile .beneficios span{

    width:8px;

    height:8px;

    border-radius:50%;

    background:#00DA00;

    flex-shrink:0;

}
}