@media (max-width: 992px){

    .header-container{
        width: 95%;
    }

    nav ul{
        gap:20px;
    }

    nav ul li a{
        font-size:16px;
    }

    .header-botoes{
        gap:10px;
    }

    .btn-whatsapp,
    .btn-instagram{
        padding:10px 15px;
        font-size:12px;
    }

    .principal-vazio {
        display: none;
    }

    .principal-texto {
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .principal-texto h1 {
        font-size: 25px;
        line-height:30px;
    }   

    .principal-texto p {
        font-size: 18px;
    }

    .principal-btn {
        position: relative;
        top: 70px;
    }

    .card-informativo {
        position: relative;
        top: 100px;
    }

    .card-infor-box h2 {
        font-size: 18px;
    }

    .card-infor-box p {
        font-size: 14px;
    }

    .card-infor-box a {
        font-size: 14px;
    }

    /* .servico-container {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 40px;
        flex-wrap: wrap;
    } */

    .servico-img {
        text-align: center;
    }

    .servico-img img {
        width: 60%;
    }

    .servico-texto {
        align-items: center;
        text-align: center;
    }

    .servico-texto h2 {
        font-size: 18px;
    }

    .servico-texto p {
        font-size: 14px;
    }


    .servico-texto-item {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
    }

    .servico-texto-box {
       flex-direction: column;
    }

    .servico-texto-texto h3 {
        font-size: 14px;
    }

    .servico-texto-texto p {
        font-size: 13px;
    }

    .servico-produto-texto h3 {
        font-size: 16px;
    }

    .servico-produto-texto p {
        font-size: 5;
        font-weight: 500;
    }


    .contador-box {
        flex: 1 1 300px;
        max-width: 150px;
    }
    

    .contador-box h2 {
        font-size: 28px;
    }

    .contador-box p{
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 1px;
        color: var(--branco);
    }
    .beneficios{
        position: relative;
        top: 50px;
    }
    .faq {
        padding: 20px 0;
    }

    .beneficio-item h3 {
        font-size: 16px;
        padding: 6px 0;
    }

    .beneficio-item p {
        font-size: 14px;
        font-weight: 500;
    }

    .avaliacao-card blockquote{
        font-size:16px;
        font-weight: 500;
    }

    .titulo p {
        padding: 12px 0;
        font-size: 14px;
        font-weight: 500;
    }

    .faq-pergunta,
    .faq-resposta p{
        font-size: 0.9rem;
    }

    .faq-resposta p{
        line-height: 1.3;
    }

    .footer-container{
        gap: 40px;
    }


}

/*====================================
RESPONSIVO CELULAR
====================================*/
@media(max-width:768px){

    .principal{
        background:url('/assets/img/principal/principal-responsivo.webp') no-repeat center/cover;
        background-position:100% 10%;
        height:700px;
    }

    header{
        height:70px;
    }

    .header-container{
        width:95%;
        padding:0 20px;
    }

    .logo img{
        width:65px;
        height:auto;
    }

    .menu-mobile{
        display:flex;
    }

    .header-botoes{
        display:none;
    }

    .menu{
        position:fixed;
        top:0;
        right:-100%;
        width:280px;
        height:100vh;
        padding:100px 30px 30px;
        background:#020f25;
        display:flex;
        flex-direction:column;
        justify-content:flex-start;
        align-items:center;
        gap:20px;
        transition:right .35s ease;
        z-index:1000;
    }

     .overlay{
        z-index:999;
    }

    .menu.active{
        right:0;
    }

    .menu ul{
        display:flex;
        flex-direction:column;
        gap:35px;
        width:100%;
        align-items:center;
    }

    .menu ul li a{
        font-size:22px;
    }

    .header-botoes-responsivlo{
        display:flex;
        flex-direction:column;
        gap:15px;
        width:100%;
        margin-top:20px;
    }

    .header-botoes-responsivlo .btn-whatsapp,
    .header-botoes-responsivlo .btn-instagram{
        display:block;
        width:100%;
        text-align:center;
    }

    .whatsapp-menu {
        left: 35%;
    }

}