/* =====================================================
   RESPONSIVE CSS
===================================================== */

/* ==========================
   TABLET (<= 1024px)
========================== */

@media (max-width: 1024px) {

    .hero-grid,
    .about-grid,
    .why-grid,
    .contact-grid {

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-content h1{

        font-size:42px;

    }

    .feature-grid{

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

    }

    .services-grid,
    .portfolio-grid,
    .pricing-grid,
    .team-grid,
    .blog-grid{

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

    }

    .counter-grid{

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

    }

    .testimonial-slider{

        grid-template-columns:1fr;

    }

    .client-grid{

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

    }

}

/* ==========================
   MOBILE (<= 768px)
========================== */

@media (max-width: 768px) {

    /* NAV */

    .nav-menu{

        position:fixed;

        top:80px;

        right:-100%;

        width:250px;

        height:100vh;

        flex-direction:column;

        background:#fff;

        padding:30px;

        transition:.3s;

        box-shadow:var(--shadow);

    }

    .nav-menu.active{

        right:0;

    }

    #mobileMenu{

        display:block;

    }

    /* HERO */

    .hero-content h1{

        font-size:32px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .hero-stats{

        flex-direction:column;

        gap:15px;

    }

    /* GRID */

    .feature-grid,
    .services-grid,
    .portfolio-grid,
    .pricing-grid,
    .team-grid,
    .blog-grid{

        grid-template-columns:1fr;

    }

    .counter-grid{

        grid-template-columns:1fr;

    }

    .client-grid{

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

    }

    /* NEWSLETTER */

    .newsletter-box{

        flex-direction:column;

        text-align:center;

    }

    .newsletter-box form{

        flex-direction:column;

        width:100%;

    }

    /* FOOTER */

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

}

/* ==========================
   SMALL MOBILE (<= 480px)
========================== */

@media (max-width: 480px) {

    .section-title h2{

        font-size:28px;

    }

    .hero-content h1{

        font-size:26px;

    }

    .btn,
    .btn-outline{

        width:100%;

    }

    .client-grid{

        grid-template-columns:1fr;

    }

}