/* ---------------------------------------------------------
   1. CLIENT GRID (About Client section)
   --------------------------------------------------------- */

/* Stack text + image cleanly on mobile */
@media (max-width: 768px) {
    .client-grid {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }

    .client-section {
        margin-top: -60px !important;
    }
}


/* ---------------------------------------------------------
   2. HERO SECTION (Top banner spacing & typography)
   --------------------------------------------------------- */

@media (max-width: 768px) {
    .hero {
        padding: 120px 0 80px;
    }

    .hero h1 {
        font-size: 2.2rem;
        line-height: 1.25;
    }

    .hero p {
        font-size: 1.05rem;
    }
}


/* ---------------------------------------------------------
   3. CLIENT LOGO POSITION RESET (absolute → flow on mobile)
   --------------------------------------------------------- */

@media (max-width: 768px) {
    .client-left-logo {
        position: static;
        margin-bottom: 12px;
    }
}


/* ---------------------------------------------------------
   4. PORTFOLIO IMAGES (prevent cropping / overflow)
   --------------------------------------------------------- */

@media (max-width: 768px) {
    .acg-img-box img {
        height: auto !important;
        max-height: 260px;
    }
}


/* ---------------------------------------------------------
   5. PRODUCT OVERVIEW DECORATIVE ICON (oversized ::after)
   --------------------------------------------------------- */

@media (max-width: 768px) {
    .product-overview-card::after {
        font-size: 8rem;
    }
}


/* ---------------------------------------------------------
   6. META INFO (wrap safely on very small screens)
   --------------------------------------------------------- */

@media (max-width: 576px) {
    .meta-info {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
}


/* ---------------------------------------------------------
   7. TECH GRID (extra breathing room on mobile)
   --------------------------------------------------------- */

@media (max-width: 768px) {
    .tech-grid {
        gap: 20px;
    }
}


/* ---------------------------------------------------------
   8. GENERAL SAFETY — PREVENT HORIZONTAL SCROLL
   --------------------------------------------------------- */

html, body {
    overflow-x: hidden;
}

@media (max-width: 768px) {
    .section-title {
        font-size: 2.0rem !important;
    }
}