/* ==========================================================
   ACTIVA VOIP - RESPONSIVE
========================================================== */


/* ==========================================================
   TABLETS E NOTEBOOKS MENORES
========================================================== */

@media(max-width:1100px){


    .hero-content{

        gap:40px;

    }


    .hero h1{

        font-size:48px;

    }


    .cards{

        grid-template-columns:repeat(2,1fr);

    }


    .diferenciais-grid{

        grid-template-columns:repeat(2,1fr);

    }


    .infra-content{

        gap:40px;

    }


}


/* ==========================================================
   TABLETS
========================================================== */

@media(max-width:900px){


    header .container{

        flex-direction:column;

        height:auto;

        padding:20px 0;

        gap:20px;

    }


    nav ul{

        flex-wrap:wrap;

        justify-content:center;

        gap:20px;

    }


    .hero{

        padding-top:190px;

    }


    .hero-content{

        grid-template-columns:1fr;

        text-align:center;

    }


    .hero-buttons{

        justify-content:center;

    }


    .hero-image{

        max-width:500px;

        margin:auto;

    }



    .infra-content{

        grid-template-columns:1fr;

        text-align:center;

    }


    .infra-text ul{

        text-align:left;

        display:inline-block;

    }


}



/* ==========================================================
   CELULARES
========================================================== */

@media(max-width:600px){


    .container{

        width:92%;

    }


    /* HEADER */


    .logo img{

        height:58px;

    }


    nav ul{

        gap:12px;

    }


    nav a{

        font-size:14px;

    }


.btn-portal{

    width:auto;

    padding:10px 18px;

    font-size:14px;

}



    /* HERO */


    .hero{

        min-height:auto;

        padding-top:230px;

        padding-bottom:80px;

    }


    .tag{

        font-size:12px;

    }


    .hero h1{

        font-size:34px;

    }


    .hero p{

        font-size:17px;

    }


    .hero-buttons{

        flex-direction:column;

    }


    .btn-primary,
    .btn-secondary{

        width:100%;

    }



    /* TITULOS */


    .section-title h2{

        font-size:30px;

    }


    .section-title p{

        font-size:16px;

    }



    /* SOLUÇÕES */


    .solucoes{

        padding:70px 0;

    }


    .cards{

        grid-template-columns:1fr;

    }


    .card{

        padding:30px;

    }



    /* DIFERENCIAIS */


    .diferenciais{

        padding:70px 0;

    }


    .diferenciais-grid{

        grid-template-columns:1fr;

    }


    .item{

        padding:25px;

    }



    /* INFRA */


    .infraestrutura{

        padding:70px 0;

    }


    .infra-text h2{

        font-size:32px;

    }


    .aws-card{

        font-size:32px;

        padding:20px 50px;

    }



    /* CTA */


    .cta{

        padding:70px 0;

    }


    .cta h2{

        font-size:30px;

    }


}



/* ==========================================================
   CELULARES PEQUENOS
========================================================== */

@media(max-width:380px){


    .hero h1{

        font-size:30px;

    }


    .hero p{

        font-size:16px;

    }


    .section-title h2{

        font-size:26px;

    }


}

@media(max-width:900px){


    .footer-content{

        grid-template-columns:1fr;

        text-align:center;

    }


    .footer-brand p{

        margin:auto;

    }


    .footer-links{

        grid-template-columns:1fr;

        gap:30px;

    }

}