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

@media(max-width:992px){

    .hero-content{
        grid-template-columns:1fr;
        text-align:center;
    }

    .hero-buttons{
        justify-content:center;
    }

    .hero-stats{
        justify-content:center;
    }

    .hero-text h1{
        font-size:3.5rem;
    }

    .services-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .about-content{
        grid-template-columns:1fr;
    }

    .about-image{
        order:-1;
    }

    .benefits-grid{
        grid-template-columns:repeat(2,1fr);
        gap:40px;
    }

    .testimonials-grid{
        grid-template-columns:1fr;
    }

    .contact-content{
        grid-template-columns:1fr;
    }

    .contact-info{
        text-align:center;
    }

    .contact-item{
        justify-content:center;
    }

    .cta h2{
        font-size:2.5rem;
    }

}


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

@media(max-width:768px){

    section{
        overflow:hidden;
    }

    .container{
        width:92%;
    }

    /* MENU */

        .hamburger{
        display:flex;
    }

    .nav-links{
        position:fixed;
        top:85px;
        left:0;

        width:100%;
        background:#8266b4;

        display:flex;
        flex-direction:column;
        align-items:center;
        gap:25px;
        padding:35px 0;

        opacity:0;
        visibility:hidden;
        transform:translateY(-20px);

        transition:
            opacity .35s ease,
            transform .35s ease,
            visibility .35s;
    }

    .nav-links.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    }   

    .services-grid,
    .benefits-grid,
    .testimonials-grid,
    .technology-grid{
        grid-template-columns:1fr;
    }

    .about-content,
    .contact-content{
        grid-template-columns:1fr;
    }

    .tecnologias{
        flex-direction:column;
    }

    .cards{
        grid-template-columns:1fr;
    }

    .tecnologias-img{
        margin-top:30px;
    }



    /* HERO */

    .hero{
        padding-top:130px;
        padding-bottom:70px;
    }

    .hero-content{
        gap:50px;
    }

    .hero-text h1{
        font-size:3rem;
    }

    .hero-text p{
        font-size:1rem;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:center;
    }

    .hero-buttons a{
        width:100%;
        max-width:280px;
        text-align:center;
    }

    .hero-stats{
        flex-direction:column;
        gap:25px;
    }

    /* TITULOS */

    .section-title h2{
        font-size:2rem;
    }

    /* SERVICES */

    .services{
        padding:80px 0;
    }

    .services-grid{
        grid-template-columns:1fr;
    }

    /* ABOUT */

    .about{
        padding:80px 0;
    }

    .about-content{
        gap:40px;
    }

    .about-text{
        text-align:center;
    }

    .about-text h2{
        font-size:2rem;
    }

    .about-text ul{
        align-items:center;
    }

    /* BENEFITS */

    .benefits-grid{
        grid-template-columns:1fr;
    }

    /* TESTIMONIALS */

    .testimonials{
        padding:80px 0;
    }

    /* CONTACT */

    .contact{
        padding:80px 0;
    }

    .contact-info h2{
        font-size:2rem;
    }

    .map iframe{
        height:350px;
    }

    /* CTA */

    .cta{
        padding:80px 0;
    }

    .cta .container{
        padding:60px 25px;
    }

    .cta h2{
        font-size:2rem;
    }

    .cta p{
        font-size:1rem;
    }

    /* FOOTER */

    footer .container{
        flex-direction:column;
        gap:15px;
        text-align:center;
    }

}


/* =========================
   SMALL MOBILE
========================= */

@media(max-width:480px){

    .hero-text h1{
        font-size:2.3rem;
    }

    .section-title h2{
        font-size:1.8rem;
    }

    .about-text h2{
        font-size:1.8rem;
    }

    .contact-info h2{
        font-size:1.8rem;
    }

    .cta h2{
        font-size:1.7rem;
    }

    .service-card,
    .testimonial-card{
        padding:25px;
    }

}