/* ==========================================================================
   1. GLOBAL VIEWPORT CONTAINMENT & GLOBAL MOBILE RULES (Up to 768px)
   ========================================================================== */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative;
}

@media (max-width: 768px) {
    /* Hard contain all general containers and layout grids to device width */
    .container, .row, .why-grid, .tech-grid, .trust-grid, .about-grid, 
    .about-flex, .timeline-row, .mvv-grid, .services-why-grid, 
    .tech-stack-grid, .portfolio-grid, .expertise-grid {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Force layouts to drop and stack into a clean vertical row */
    .flex-layout, .grid-layout, .services-box-row, .portfolio-items, 
    [class*="col-"], .about-content, .about-right, .inner-box {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Header & Navigation Fixes */
    .top-header {
        background: #ffffff !important;
        position: fixed !important;
        top: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    }

    .top-header .main-nav, 
    .top-header .horizontalLinks {
        background-color: #ffffff !important;
        width: 100% !important;
    }

    .top-header .horizontalLinks li {
        display: block !important;
        text-align: left !important;
        background: #ffffff !important;
        padding: 12px 20px !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    
    .top-header .horizontalLinks li a {
        line-height: normal !important;
        display: block !important;
        padding: 5px 0 !important;
    }
}

/* ==========================================================================
   2. TABLET BREAKPOINTS (max-width: 992px / 991px)
   ========================================================================== */
@media(max-width: 992px) {
    /* Home elements */
    .why-grid { grid-template-columns: repeat(2, 1fr); }
    .tech-grid { grid-template-columns: repeat(3, 1fr); }
    .stats .container { flex-wrap: wrap; gap: 40px; }
    .trust-grid { grid-template-columns: repeat(2, 1fr); }
    
    /* About Page elements */
    .about-grid { grid-template-columns: 1fr; }
    .about-content { text-align: center; }
    .about-points { grid-template-columns: 1fr; }
    .about-flex { grid-template-columns: 1fr; gap: 50px; }
    .timeline-row { grid-template-columns: 1fr 1fr; }
    .mvv-grid { grid-template-columns: 1fr; }
    .why-company .why-grid { grid-template-columns: 1fr 1fr; }
    .page-banner { height: 360px; }
    .page-banner h1 { font-size: 44px; color: #fff !important; }
    .page-banner p { font-size: 20px; color: #fff !important; }
    .about-right h2 { font-size: 38px; line-height: 48px; }

    /* Services Page elements */
    .service-row, .service-row.reverse { flex-direction: column; }
    .service-intro p { width: 100%; }
    .services-why-grid { grid-template-columns: repeat(2, 1fr); }
    .tech-stack-grid { grid-template-columns: repeat(2, 1fr); }
    .service-content { text-align: center; }

    /* Portfolio Page elements */
    .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
    .expertise-grid { grid-template-columns: repeat(2, 1fr); }
    .portfolio-intro p { width: 100%; }
}

/* ==========================================================================
   3. MOBILE LANDSCAPE & SMALL TABLET BREAKPOINTS (max-width: 768px)
   ========================================================================== */
@media(max-width: 768px) {
    .hero { min-height: auto; padding: 80px 0; text-align: center; }
    .hero h1 { font-size: 36px; }
    .why-grid { grid-template-columns: 1fr; }
    .tech-grid { grid-template-columns: repeat(2, 1fr); }
    
    /* About Page Mobile settings */
    .page-banner { height: 300px; }
    .page-banner h1 { font-size: 34px; color: #fff !important; }
    .page-banner p { font-size: 18px; width: 90%; margin: auto; color: #fff !important; }
    .about-flex { grid-template-columns: 1fr; }
    .timeline-row { grid-template-columns: 1fr; }
    .mvv-grid { grid-template-columns: 1fr; }
    .why-company .why-grid { grid-template-columns: 1fr; }
    .about-right h2 { font-size: 30px; line-height: 40px; }

    /* Services Page Mobile settings */
    .service-content h2 { font-size: 30px; }
    .service-intro h2 { font-size: 34px; }
    .services-why-grid { grid-template-columns: 1fr; }
    .tech-stack-grid { grid-template-columns: 1fr; }
    .service-cta h2 { font-size: 34px; }
    .service-cta p { width: 100%; font-size: 18px; }

    /* Portfolio Page Mobile settings */
    .portfolio-grid { grid-template-columns: 1fr; }
    .expertise-grid { grid-template-columns: 1fr; }
    .portfolio-cta h2 { font-size: 34px; }
    .portfolio-intro h2 { font-size: 34px; }
}

/* ==========================================================================
   4. SMALLEST MOBILE BREAKPOINTS (max-width: 600px / 480px)
   ========================================================================== */
@media(max-width: 600px) {
    .trust-grid { grid-template-columns: 1fr; }
}

@media(max-width: 480px) {
    .tech-grid { grid-template-columns: 1fr; }
}