/* ==========================================
   RESPONSIVE - TABLET (≤ 992px)
========================================== */

@media (max-width: 992px){

    /* ---------- Hero ---------- */

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

    .hero h1{
        font-size:42px;
    }

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

    .hero-image{
        margin-top:50px;
    }

    /* ---------- Company ---------- */

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

    .company-content{
        text-align:center;
    }

    .company-stat{
        justify-content:space-around;
        margin-top:50px;
    }

    /* ---------- Client ---------- */

    .client-grid{
        grid-template-columns:repeat(3,1fr);
    }

    /* ---------- Services ---------- */

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

    /* ---------- Projects ---------- */

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

    /* ---------- Footer ---------- */

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

    /* ---------- About ---------- */

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

    .page-title h1{
        font-size:42px;
    }

    /* ---------- Services Page ---------- */

    .service-detail{
        grid-template-columns:1fr;
    }

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

    /* ---------- Projects Page ---------- */

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

    /* ---------- Contact ---------- */

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

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

}


/* ==========================================
   RESPONSIVE - MOBILE (≤ 768px)
========================================== */

@media (max-width:768px){

    /* ---------- Services ---------- */

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

    /* ---------- Workflow ---------- */

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

    /* ---------- Portfolio ---------- */

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

    .portfolio-filter{
        gap:10px;
    }

    .portfolio-filter button{
        width:100%;
    }

    /* ---------- Footer ---------- */

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

    .footer-about img{
        margin:0 auto 20px;
    }

}


/* ==========================================
   RESPONSIVE - SMALL MOBILE (≤ 576px)
========================================== */

@media (max-width:576px){

    /* ---------- Hero ---------- */

    .hero h1{
        font-size:34px;
    }

    .hero-button{
        flex-direction:column;
    }

    .btn-primary,
    .btn-secondary{
        width:100%;
        justify-content:center;
    }

    /* ---------- Client ---------- */

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

}


/* ==========================================
   GLOBAL RESPONSIVE
========================================== */

.company-feature{
    grid-template-columns:1fr;
}