/* =========================================================
   RESPONSIVE CSS 
   widen2026 - Mobile First Fixes (Aggressive Overhaul)
   ========================================================= */

/* ---------------------------------------------------------
   GLOBAL FIXES (All Mobile/Tablet)
   --------------------------------------------------------- */
@media (max-width: 991px) {
    * {
        max-width: 100vw; /* Prevent any element from causing horizontal scroll */
    }

    html, body {
        overflow-x: hidden; /* Force hide horizontal scroll */
        width: 100%;
    }
}

img, canvas, video, iframe {
    max-width: 100%;
    height: auto;
}

/* Base typography smoothing for smaller screens */
p, li {
    word-break: break-word; /* Prevent long words from breaking layout */
}

/* ---------------------------------------------------------
   BREAKPOINT: 1200px (Large Tablets / Small Desktop) 
   --------------------------------------------------------- */
@media (max-width: 1200px) {
    :root {
        --container-width: 960px;
    }
}

/* ---------------------------------------------------------
   BREAKPOINT: 991px (Tablets)
   --------------------------------------------------------- */
@media (max-width: 991px) {
    :root {
        --container-width: 90%;
        --section-pad: 80px;
    }

    /* Base Font Sizing */
    body {
        font-size: 15px; 
    }

    /* Process section on PC/Tablet will use default side-by-side flex layout */
    
    /* Global Row/Grid Fallbacks */
    .services-grid, 
    .advanced-industries-grid, 
    .about-grid, 
    .core-values-grid, 
    .blog-grid, 
    .portfolio-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2 columns on tablet */
        gap: 20px;
    }
    
    .stats-row, .adv-stats-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    
    .services-2col-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---------------------------------------------------------
   BREAKPOINT: 768px (Mobile Devices)
   --------------------------------------------------------- */
@media (max-width: 768px) {
    :root {
        --container-width: 100%; /* Extremely important to let .container's padding handle breathing room */
        --section-pad: 50px;
    }

    /* GLOBAL FIXES */
    .container {
        padding: 0 20px; /* Stronger padding on mobile */
    }

    /* TYPOGRAPHY OVERRIDE */
    .section-title {
        font-size: clamp(1.8rem, 6vw, 2.2rem) !important;
        line-height: 1.2;
        margin-bottom: 15px;
    }

    p.section-desc {
        font-size: 0.95rem;
    }

    h1, h2, h3, h4 {
        word-wrap: break-word;
    }

    /* HERO SECTION */
    .corp-hero {
        padding-top: 20px;
        min-height: auto;
    }

    .corp-hero-inner {
        padding: 40px 0;
        text-align: center;
    }

    .hero-title, .adv-hero-title {
        font-size: clamp(2rem, 8vw, 3rem) !important;
        line-height: 1.15;
    }

    .hero-text, .adv-hero-desc {
        font-size: 1rem;
        margin: 0 auto 25px;
        padding: 0 10px;
    }

    .hero-buttons {
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 0 20px;
    }

    .hero-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    /* ALL GRIDS BECOME 1 COLUMN ON MOBILE */
    .services-grid, 
    .advanced-industries-grid, 
    .about-grid, 
    .core-values-grid, 
    .blog-grid, 
    .portfolio-grid,
    .services-2col-grid {
        grid-template-columns: 1fr !important;
        gap: 25px;
    }
    
    .stats-row, 
    .adv-stats-row {
        gap: 25px;
    }

    /* MOBILE HORIZONTAL SCROLL CAROUSEL FOR FEATURED PROJECTS */
    #featured-projects .services-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        padding-bottom: 30px; /* Space for shadow */
        -webkit-overflow-scrolling: touch;
        gap: 20px !important;
        scrollbar-width: none; /* Firefox */
    }

    #featured-projects .services-grid::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    #featured-projects .srv-card {
        flex: 0 0 85% !important; /* Show part of the next card */
        scroll-snap-align: center;
        margin-bottom: 0 !important;
    }

    /* ABOUT SECTION OVERRIDES */
    .about-image {
        margin-bottom: 20px;
    }

    .about-features-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .adv-text-block {
        text-align: left;
    }

    /* CONTACT / FORMS */
    .contact-wrapper {
        display: flex;
        flex-direction: column;
        padding: 0;
    }
    
    .contact-left, .contact-right {
        padding: 30px 20px;
        width: 100%;
    }

    .form-row {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
    }
    
    .form-group {
        margin-bottom: 20px;
        width: 100%;
    }
    
    input, select, textarea {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* TESTIMONIALS SWIPER */
    .testimo-card {
        padding: 30px 20px !important;
    }

    .testimonial-swiper .swiper-slide {
        width: 100% !important;
    }

    /* SERVICE DETAIL PAGES */
    .service-detail-block {
        display: flex;
        flex-direction: column;
    }
    
    .service-detail-card {
        order: -1; /* Puts image above text on mobile */
        margin-bottom: 25px;
    }

    /* LOGO BAR */
    @keyframes trustedScrollMobile {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-50% - 15px)); }
    }

    .trusted-logos-track {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 30px;
        animation: trustedScrollMobile 20s linear infinite !important; /* Re-enable smooth scrolling on mobile */
    }
    
    .trusted-logo {
        flex: 0 0 auto; /* Prevent forcing logos to new rows */
        text-align: center;
        margin-bottom: 0;
    }
    
    /* Fix Top Margins / Paddings */
    .mt-50, .mt-60, .mb-60 {
        margin-top: 30px !important;
        margin-bottom: 30px !important;
    }

    /* FOOTER OVERRIDES (Mobile Accordion) */
    .corp-footer {
        padding: 50px 0 20px !important;
    }
    .footer-grid {
        display: flex !important;
        flex-direction: column;
        gap: 0 !important;
    }
    .footer-col h4 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0;
        margin: 0;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        cursor: pointer;
        font-size: 1.15rem;
    }
    /* Hide native + if JS adds one, otherwise use ::after */
    .footer-col h4::after {
        content: '+';
        font-size: 1.5rem;
        font-weight: 300;
        color: var(--secondary-blue, #3b82f6);
        transition: transform 0.3s ease;
    }
    .footer-col.active h4::after {
        transform: rotate(45deg);
        color: white;
    }
    .footer-col ul {
        display: none; 
        padding: 15px 0 25px 0 !important;
        margin: 0;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .footer-col.active ul {
        display: block; /* Show when clicked */
        animation: fadeIn 0.3s ease;
    }
    
    .footer-bottom {
        padding: 25px 0 !important;
        text-align: center;
    }
    .bottom-inner {
        display: flex !important;
        flex-direction: column-reverse; /* Copyright below socials */
        gap: 20px;
        align-items: center;
        justify-content: center;
    }
    .footer-socials {
        display: flex;
        gap: 15px;
        justify-content: center;
        width: 100%;
    }
    .footer-logo {
        margin-bottom: 20px !important;
    }
}

/* ---------------------------------------------------------
   BREAKPOINT: 576px (Small Mobile)
   --------------------------------------------------------- */
@media (max-width: 576px) {
    /* Extreme shrink for tiny phones */
    :root {
        --section-pad: 40px;
    }

    .hero-title, .adv-hero-title {
        font-size: clamp(1.8rem, 7vw, 2.2rem) !important;
    }
    
    .section-title {
        font-size: clamp(1.6rem, 6vw, 1.8rem) !important;
    }

    .btn {
        padding: 12px 20px;
        font-size: 0.9rem;
    }

    .trusted-logo {
        flex: 0 0 auto; /* Prevent stack logos on very small screens for marquee */
    }
}