/**
 * Mobile Responsive Styles for M Square Theme
 * This stylesheet handles all mobile-specific styling
 * Breakpoints: 768px (tablet), 480px (mobile)
 */

/* ========================================
   TABLET PORTRAIT ONLY (768px - 1024px)
   Hide desktop nav, show hamburger menu
   so links aren't cramped on tablet vertical
======================================== */
@media (min-width: 768px) and (max-width: 1024px) {

    /* Hide the desktop nav and contact button */
    header nav.hidden.md\:flex {
        display: none !important;
    }

    header div.hidden.md\:block.shrink-0 {
        display: none !important;
    }

    /* Show the hamburger button (overrides md:hidden) */
    #mobile-menu-btn {
        display: block !important;
    }

    /* Allow mobile menu to show (overrides md:hidden) */
    #mobile-menu:not(.hidden) {
        display: block !important;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        z-index: 100;
    }

    /* Center mobile nav items */
    #mobile-menu > div.flex.flex-col {
        align-items: center !important;
        text-align: center !important;
    }

    /* Center the Our Services accordion button */
    #mobile-menu #mobile-services-toggle {
        justify-content: center !important;
        gap: 8px;
    }

    /* Center the sub-menu links */
    #mobile-services-menu {
        margin-left: 0 !important;
        align-items: center !important;
        text-align: center !important;
    }
}

/* ========================================
   CASE STUDY SECTION - MOBILE & TABLET
   PORTRAIT (max-width: 1024px)
======================================== */
@media (max-width: 1024px) {

    /* Stack the 2-col grid to single column */
    #home-case-studies .grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    /* Fix description text not getting cut off */
    #home-case-studies p {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }

    /* Carousel wrapper - full width */
    #case-study-wrapper {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Parent container — allow horizontal scroll through */
    #case-study-carousel {
        overflow: visible !important;
    }

    /* Hide the right fade gradient */
    #case-study-carousel > div[class*="absolute"] {
        display: none !important;
    }

    /* Cards container - horizontal scroll with snap */
    #case-study-track {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 16px !important;
        transform: none !important;
        transition: none !important;
        padding: 0 4px !important;
    }

    #case-study-track::-webkit-scrollbar {
        display: none;
    }

    /* Cards - responsive width with snap */
    #case-study-track > div {
        width: 85vw !important;
        max-width: 380px !important;
        min-width: 260px !important;
        flex-shrink: 0 !important;
        scroll-snap-align: start !important;
    }

    /* Card inner border-radius fix */
    #case-study-track > div > div {
        border-radius: 30px !important;
    }

    #case-study-track > div > div > div {
        border-radius: 29px !important;
        padding: 20px !important;
    }

    /* Hide prev/next buttons, keep dots */
    #prev-case-study,
    #next-case-study {
        display: none !important;
    }

    /* Center the dots nav row */
    #case-study-wrapper > div[class*="flex"] {
        justify-content: center !important;
    }

    /* Right-edge fade gradient so partial card doesn't look cut off */
    #case-study-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 60px;
        background: linear-gradient(to right, transparent, #090619);
        z-index: 5;
        pointer-events: none;
    }

    #case-study-wrapper {
        position: relative !important;
    }

    /* --- SERVICES SECTION --- */
    /* Prevent services section from causing horizontal page scroll */
    #services-section {
        overflow: hidden !important;
    }
    #services-section > .container {
        overflow: hidden !important;
    }

    /* Fix heading overflow */
    #services-section h2 {
        white-space: normal !important;
        word-wrap: break-word !important;
    }

    /* Tab wrapper — lock width */
    #services-section > .container > .flex.justify-center {
        overflow: hidden !important;
        width: 100% !important;
    }

    /* Tab bar — block-level flex, scroll internally */
    #services-section .inline-flex {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    #services-section .inline-flex::-webkit-scrollbar { display: none; }

    /* Tab buttons — keep readable */
    .services-tab-btn {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        font-size: 12px !important;
        padding: 8px 14px !important;
    }

    /* Slide layout — force single column on the outer 2-col grid only */
    #services-track .grid.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* Show the right-side image stacked below content */
    #services-track .hidden.md\:flex {
        display: flex !important;
        max-height: 300px;
        border-radius: 16px;
        overflow: hidden;
    }
    #services-track .hidden.md\:flex img {
        object-fit: cover;
        max-height: 300px;
        width: 100%;
    }

    /* Logo cards — stack vertically */
    #services-track .grid-cols-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    /* --- READY TO TRANSFORM SECTION --- */
    /* Keep man in suit visible on tablet */
    section[class*="relative overflow-hidden"] > .absolute img {
        object-position: 25% center !important;
    }

    /* --- ABOUT PAGE: Why Choose Us — hide right border on right-column items */
    section[class*="bg-[#090619]"] .grid.grid-cols-2 > div:nth-child(2n) {
        border-right: none !important;
    }

    /* --- ABOUT PAGE: AI-Powered Solutions cards --- */
    /* Stack image + text vertically */
    section[class*="bg-[#EAEAEA]"] .flex.items-center.gap-8 {
        flex-direction: column !important;
        text-align: center !important;
        padding: 32px 24px !important;
        gap: 20px !important;
    }
    section[class*="bg-[#EAEAEA]"] .flex-shrink-0 img {
        width: 160px !important;
        height: 160px !important;
    }

    /* --- CTA SUCCESS STORY SECTION --- */
    /* Make background image fully visible instead of cropped */
    #cta-success-story {
        min-height: 420px !important;
    }

    #cta-success-story > div.absolute img {
        object-fit: cover !important;
        object-position: 75% center !important;
    }

    /* --- PRODUCT SOLUTIONS — pin Learn More to bottom --- */
    #products-track .rounded-3xl.p-6 {
        display: flex !important;
        flex-direction: column !important;
    }
    #products-track .rounded-3xl.p-6 > a {
        margin-top: auto !important;
    }
}

/* ========================================
   TABLET BREAKPOINT (max-width: 768px)
======================================== */
@media (max-width: 768px) {

    /* --- GLOBAL RESETS --- */
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* --- HEADER & NAVIGATION --- */
    header .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Show mobile menu button */
    #mobile-menu-btn {
        display: block !important;
    }

    /* Mobile menu styling */
    #mobile-menu {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        z-index: 100;
    }

    /* Center mobile nav items */
    #mobile-menu > div.flex.flex-col {
        align-items: center !important;
        text-align: center !important;
    }

    /* Center the Our Services accordion button */
    #mobile-menu #mobile-services-toggle {
        justify-content: center !important;
        gap: 8px;
    }

    /* Center the sub-menu links */
    #mobile-services-menu {
        margin-left: 0 !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* --- SERVICES & PRODUCTS PAGE HERO IMAGE --- */
    /* Reduce hero image height on mobile */
    section.bg-\[\#090619\].pt-32 img.h-\[400px\] {
        height: 300px !important;
    }

    /* Let hero text wrap naturally — hide hard <br> breaks */
    section.bg-\[\#090619\].pt-32 p br {
        display: none;
    }

    /* --- HERO SECTIONS --- */
    /* Hero typography scaling */
    .hero h2,
    section h1 {
        font-size: 32px !important;
        line-height: 38px !important;
    }

    section p {
        font-size: 16px !important;
        line-height: 24px !important;
    }

    /* Hero buttons container */
    .hero-buttons {
        flex-direction: column;
        gap: 12px;
    }

    /* --- HOMEPAGE HERO: PARTNER BADGES --- */
    /* Fill dynamic viewport height — accounts for iOS/Android browser chrome */
    section[class*="min-h-screen"] {
        min-height: 100dvh !important;
    }

    /* Section background images — the global img{height:auto} rule overrides h-full on
       any section that uses the absolute inset-0 background image pattern (hero, CTA,
       Transform, etc.), collapsing the image to its natural aspect-ratio height.
       Restore full-cover for ALL direct-child images of inset-0 wrappers. */
    div[class*="inset-0"] > img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    /* Badge logos container — full width, flex-wrap + justify-center gives 3+2 */
    section[class*="min-h-screen"] > div > div[class*="flex-wrap"] {
        gap: 16px !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-bottom: 0 !important;
    }

    /* Each badge — 29% width forces exactly 3 per row on any mobile screen width;
       height:auto keeps natural aspect ratio; max-height prevents oversized images */
    section[class*="min-h-screen"] > div > div[class*="flex-wrap"] img {
        width: 29% !important;
        height: auto !important;
        max-height: 130px !important;
        min-height: 90px !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
    }

    /* Testimonials carousel - KEEP HORIZONTAL for carousel slides */
    #testimonials-track {
        /* Keep as row for carousel sliding */
        flex-direction: row !important;
    }

    /* Each slide - stack cards vertically WITHIN the slide */
    #testimonials-track>div[class*="w-full flex-shrink-0"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 50px !important;
        padding-top: 30px !important;
    }

    /* Remove the pt-16 from the card wrapper */
    #testimonials-track>div>div[class*="pt-16"] {
        padding-top: 0 !important;
    }

    /* The inner flex container with 3 cards - stack vertically */
    #testimonials-track>div>div[class*="flex gap-8"] {
        flex-direction: column !important;
        align-items: center !important;
        gap: 50px !important;
    }

    /* Testimonial cards - override inline fixed width/height */
    #testimonials-track div[class*="bg-white"][style*="width: 405px"] {
        width: calc(100vw - 48px) !important;
        max-width: 360px !important;
        height: auto !important;
        min-height: 250px !important;
        padding: 30px 24px 30px 24px !important;
        margin-top: 0px !important;
    }

    /* Testimonial avatar positioning fix */
    #testimonials-track div[class*="absolute -top-12"] {
        top: -36px !important;
    }

    #testimonials-track div[class*="w-24 h-24"] {
        width: 72px !important;
        height: 72px !important;
    }

    /* --- AUTOMATION FRONTIERS SECTION --- */
    /* Automation cards grid - single column on mobile */
    #automation-carousel div[class*="grid md:grid-cols-2 lg:grid-cols-4"] {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* Automation cards - override fixed dimensions */
    #automation-carousel div[class*="relative w-[285px] h-[362px]"] {
        width: 100% !important;
        height: auto !important;
        min-height: 280px !important;
        margin-bottom: 16px !important;
    }

    /* Card content padding */
    #automation-carousel div[class*="rounded-[50px]"][class*="p-10"] {
        padding: 24px !important;
        border-radius: 30px !important;
    }

    /* Explore CTA links — remove bloated button padding, keep left-aligned */
    #automation-carousel .flex.justify-start button {
        padding: 0 !important;
        min-height: auto !important;
        text-align: left !important;
    }

    /* Icon size */
    #automation-carousel div[style*="width: 120px; height: 120px"] {
        width: 80px !important;
        height: 80px !important;
    }

    /* --- READY TO TRANSFORM SECTION --- */
    /* Center the content on mobile */
    section[class*="relative overflow-hidden"] div[class*="text-right"] {
        text-align: center !important;
    }

    section[class*="relative overflow-hidden"] div[class*="justify-end"] {
        justify-content: center !important;
    }

    /* Keep man in suit visible — shift focal point left */
    section[class*="relative overflow-hidden"] > .absolute img {
        object-fit: cover !important;
        object-position: 25% center !important;
    }

    /* --- PRODUCT SOLUTIONS SECTION --- */
    /* Flatten track into horizontal scroll — kill JS transform */
    #products-track {
        transform: none !important;
        transition: none !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 16px !important;
    }
    #products-track::-webkit-scrollbar { display: none; }

    /* Each slide wrapper — collapse so cards flow in one row */
    #products-track > .flex-shrink-0 {
        width: auto !important;
        flex-shrink: 0 !important;
        display: contents !important;
    }

    /* Each slide's inner flex — also collapse */
    #products-track > .flex-shrink-0 > .flex {
        display: contents !important;
    }

    /* Each card — swipeable item */
    #products-track > .flex-shrink-0 > .flex > div {
        width: 80vw !important;
        max-width: 320px !important;
        flex-shrink: 0 !important;
        scroll-snap-align: center !important;
    }

    /* Card inner — flex column + pin Learn More to bottom */
    #products-track .rounded-3xl.p-6 {
        display: flex !important;
        flex-direction: column !important;
        padding: 20px !important;
    }
    #products-track .rounded-3xl.p-6 > a {
        margin-top: auto !important;
    }

    /* --- HOMEPAGE CASE STUDIES SECTION --- */
    /* The 2-column grid with gap-32 */
    section[class*="bg-[#090619]"]>div>div[class*="lg:grid-cols-2"] {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }


    /* Fix text clipping in Case Studies section */
    section[class*="bg-[#090619]"] p {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }

    /* Case study rules now handled by the 1024px block above */

    /* --- SERVICES SECTION --- */
    /* Service tabs - allow wrapping */
    div[class*="flex flex-wrap justify-center gap-3"] {
        gap: 8px !important;
    }

    div[class*="flex flex-wrap justify-center gap-3"] button {
        padding: 8px 16px !important;
        font-size: 12px !important;
    }

    /* Service 3-column logos grid - Make/Zapier/n8n - VERTICAL STACK */
    div[class*="grid grid-cols-3 gap-4"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    /* Service cards - full width stacked */
    div[class*="grid grid-cols-3 gap-4"]>div {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Card content text */
    div[class*="grid grid-cols-3 gap-4"]>div p {
        font-size: 13px !important;
        line-height: 20px !important;
    }

    /* Platform logo images (Make/Zapier/n8n) — restore h-8 (32px) because the global
       img{height:auto} rule overrides Tailwind's h-8, making logos balloon to their
       natural SVG/PNG dimensions (often 60-100px tall) on full-width mobile cards */
    div[class*="grid grid-cols-3 gap-4"] img[class*="h-8"],
    #services-track div[class*="grid-cols-3"] img[class*="h-8"] {
        height: 32px !important;
        width: auto !important;
        max-width: 80% !important;
    }

    /* Tighten the purple logo header padding so the card looks compact */
    div[class*="grid grid-cols-3 gap-4"] > div > div[class*="py-6"] {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    /* --- ABOUT PAGE --- */
    /* Hero section - We Build Automation container */
    section[class*="relative overflow-hidden py-16"] div[class*="rounded-3xl shadow-lg overflow-hidden"][style*="max-width: 1339px"] {
        height: auto !important;
        min-height: 400px !important;
    }

    /* Hero section background image - keep LEFT side visible and ZOOM IN */
    section[class*="relative overflow-hidden py-16"] div[class*="rounded-3xl shadow-lg overflow-hidden"][style*="max-width: 1339px"] img {
        object-position: 0% 50% !important;
        object-fit: cover !important;
        transform: scale(1.2) !important;
        transform-origin: left center !important;
    }

    /* Content padding adjustment */
    section[class*="relative overflow-hidden py-16"] div[class*="rounded-3xl shadow-lg overflow-hidden"]>div[class*="relative z-10 p-8"] {
        padding: 24px !important;
    }

    /* Fix text clipping in About page sections */
    section[class*="bg-[#0a0a1a]"] p,
    section[class*="bg-[#090619]"] p {
        max-width: 100% !important;
        width: 100% !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        white-space: normal !important;
    }

    /* Fix image containers on About page */
    section[class*="bg-[#0a0a1a]"] div[style*="width: 752px"] {
        width: 100% !important;
        height: auto !important;
    }

    /* About Msquare section - reorder for mobile (heading above image) */
    section[class*="bg-[#0a0a1a]"][class*="py-16"]>div>div[class*="grid lg:grid-cols-2"] {
        display: flex !important;
        flex-direction: column-reverse !important;
    }

    /* Center text in About Msquare section on mobile */
    section[class*="bg-[#0a0a1a]"][class*="py-16"] h2,
    section[class*="bg-[#0a0a1a]"][class*="py-16"] p {
        text-align: center !important;
    }

    /* Form inputs - reduce size on mobile. Excludes the embedded Convocore
       chatbot so its message input field stays at Convocore's intended size. */
    input[type="email"]:not(:is(#VG_OVERLAY_CONTAINER, #VG_ROOT_INNER, #vg-theme-container, .vg-render-container) *),
    input[type="text"]:not(:is(#VG_OVERLAY_CONTAINER, #VG_ROOT_INNER, #vg-theme-container, .vg-render-container) *),
    input[placeholder*="email"] {
        font-size: 14px !important;
        padding: 12px 16px !important;
        height: auto !important;
    }

    /* Buttons - reduce size on mobile. Excludes the embedded Convocore chatbot
       (#VG_OVERLAY_CONTAINER / #VG_ROOT_INNER / #vg-theme-container / .vg-render-container)
       because the chatbot has its own tiny icon buttons (close, send, attachment)
       that get stretched and have their SVG icons hidden by this padding/font-size. */
    button:not(:is(#VG_OVERLAY_CONTAINER, #VG_ROOT_INNER, #vg-theme-container, .vg-render-container) *),
    a[class*="bg-white"],
    div[class*="bg-white"][role="button"] {
        font-size: 15px !important;
        padding: 12px 24px !important;
    }





    /* --- PRODUCTS PAGE --- */
    /* Featured product hero card */
    section[class*="pt-32"]>div>div[class*="max-w"] {
        height: auto !important;
        min-height: 350px;
    }

    section[class*="pt-32"]>div>div[class*="max-w"]>div[class*="max-w-xl"] {
        max-width: 100% !important;
        padding: 24px !important;
    }

    /* Products layout - make sidebar stack above content */
    section[class*="bg-[#F5F5F7]"]>div>div[class*="flex gap"] {
        flex-direction: column !important;
        gap: 24px !important;
    }

    /* Sidebar filters - horizontal layout on tablet */
    aside[class*="w-[200px]"] {
        width: 100% !important;
        padding-right: 0 !important;
    }

    aside[class*="w-[200px]"]>div {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }

    aside[class*="w-[200px]"]>div[class*="mb-8"] {
        margin-bottom: 0 !important;
        flex: 1;
        min-width: 120px;
    }

    /* Product cards - override fixed widths */
    div[class*="bg-white"][class*="rounded-[20px]"][style*="width: 325px"] {
        width: 100% !important;
        height: auto !important;
        min-height: 380px;
    }

    /* Product grid - 2 columns on tablet */
    div[class*="grid"][class*="grid-cols-1"][class*="md:grid-cols-2"][class*="lg:grid-cols-3"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Products header row */
    div[class*="flex items-center justify-between mb-8"] {
        flex-direction: column;
        gap: 16px;
        align-items: stretch !important;
    }

    div[class*="flex items-center justify-between mb-8"] input {
        width: 100%;
    }

    /* --- CASE STUDIES PAGE --- */
    /* Case study cards - override fixed dimensions */
    div[class*="relative mx-auto"][style*="width: 406px"] {
        width: 100% !important;
        height: auto !important;
        min-height: 400px;
    }

    /* Card thumbnail */
    div[class*="relative overflow-hidden"][style*="height: 180px"] {
        height: 160px !important;
    }

    /* Card content padding */
    div[class*="flex-1 flex flex-col p-6"] {
        padding: 16px !important;
    }

    /* Pagination */
    div[class*="flex items-center justify-center"][class*="mt-12"] {
        flex-wrap: wrap;
        gap: 8px !important;
    }

    div[class*="flex items-center justify-center"][class*="mt-12"] button {
        padding: 8px 12px;
    }

    /* --- FOOTER --- */
    /* Footer grid - single column centered on mobile */
    footer>div>div[class*="grid"] {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }

    /* Center each footer column's content */
    footer>div>div[class*="grid"]>div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Center the logo row */
    footer .flex.items-center.gap-3 {
        justify-content: center !important;
    }

    footer div[class*="lg:col-span"] {
        grid-column: span 1 !important;
    }

    /* Footer bottom */
    footer div[class*="flex flex-col"][class*="justify-between"] {
        text-align: center;
    }

    footer div[class*="flex flex-wrap"][class*="gap-8"] {
        flex-direction: column;
        gap: 16px !important;
        width: 100%;
        align-items: center !important;
    }

    /* Center contact info links */
    footer div[class*="flex flex-wrap"][class*="gap-8"] a {
        justify-content: center !important;
    }

    /* Social links */
    footer div[class*="flex items-center gap-3"] {
        justify-content: center;
    }

    /* --- SECTION SPACING --- */
    section[class*="pt-32"] {
        padding-top: 100px !important;
    }

    section[class*="pb-16"] {
        padding-bottom: 40px !important;
    }

    section[class*="py-16"] {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    /* Reduce padding on dark sections */
    section[class*="bg-[#090619]"] {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    /* Gap utilities */
    div[class*="gap-16"] {
        gap: 24px !important;
    }

    div[class*="gap-32"] {
        gap: 32px !important;
    }

    div[class*="gap-8"] {
        gap: 16px !important;
    }

    /* Padding utilities */
    div[class*="px-8"],
    div[class*="px-12"],
    div[class*="px-16"] {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Min height fixes - REDUCED for mobile */
    section[class*="min-h-[70vh]"] {
        min-height: 45vh !important;
    }

    /* Max width overrides */
    section>div[class*="max-w"],
    div[class*="max-w-[1339px]"],
    div[class*="max-w-[1400px]"],
    div[class*="max-w-[1300px]"],
    div[class*="max-w-[1240px]"],
    div[class*="max-w-[928px]"],
    div[class*="max-w-6xl"],
    div[class*="max-w-7xl"] {
        max-width: 100% !important;
    }

    /* Case Studies page hero - reduce height */
    section[class*="min-h-[70vh]"][class*="pt-32"] {
        min-height: 40vh !important;
        padding-top: 80px !important;
        padding-bottom: 32px !important;
    }

    /* Case Studies hero content spacing */
    section[class*="min-h-[70vh]"] h1 {
        margin-bottom: 16px !important;
    }

    section[class*="min-h-[70vh]"] p {
        margin-bottom: 24px !important;
    }


    /* Section header fix - prevent whitespace-nowrap causing overflow */
    h2[class*="whitespace-nowrap"] {
        white-space: normal !important;
        word-wrap: break-word !important;
    }

    /* --- ABOUT PAGE: Team grid — center last odd item (mobile only) */
    .grid.grid-cols-2.md\:grid-cols-5 > div:last-child:nth-child(odd) {
        grid-column: 1 / -1 !important;
        justify-self: center !important;
        max-width: 50% !important;
    }

    /* --- SYNERGY PLATFORMS SECTION --- */
    /* Stack logos vertically */
    div[class*="flex justify-center items-center gap-8 md:gap-12"] {
        flex-direction: column !important;
        gap: 32px !important;
    }

    /* Ensure logos are centered and explicitly visible */
    div[class*="flex justify-center items-center gap-8 md:gap-12"]>div {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Platform logo images — restore h-12 (48px) since the global img{height:auto}
       rule overrides Tailwind's h-12, causing logos to render at their full natural
       PNG/SVG dimensions (often 80-150px tall) on full-width stacked mobile layout */
    div[class*="flex justify-center items-center gap-8 md:gap-12"] img[class*="h-12"] {
        height: 48px !important;
        width: auto !important;
        max-width: 200px !important;
        object-fit: contain !important;
    }

}

/* ========================================
   MOBILE BREAKPOINT (max-width: 480px)
======================================== */
@media (max-width: 480px) {

    /* --- TYPOGRAPHY --- */
    section h1 {
        font-size: 26px !important;
        line-height: 32px !important;
    }

    section h2 {
        font-size: 24px !important;
        line-height: 30px !important;
    }

    h3 {
        font-size: 18px !important;
    }

    h4 {
        font-size: 16px !important;
    }

    /* --- HOMEPAGE HERO --- */
    section[class*="min-h-screen"] h1 span {
        font-size: 28px !important;
        line-height: 34px !important;
    }

    /* Stats */
    section[class*="min-h-screen"] h3[class*="text-3xl"] {
        font-size: 32px !important;
    }

    /* Partner badges — tighten gap on very small screens */
    section[class*="min-h-screen"] > div > div[class*="flex-wrap"] {
        gap: 10px !important;
    }
    section[class*="min-h-screen"] > div > div[class*="flex-wrap"] img {
        max-height: 110px !important;
        min-height: 80px !important;
    }

    /* --- TESTIMONIALS MOBILE --- */
    #testimonials-track div[class*="bg-white"][style*="width: 405px"] {
        width: calc(100vw - 32px) !important;
        max-width: 100% !important;
        margin-top: 50px !important;
        padding: 40px 16px 24px 16px !important;
    }

    #testimonials-track div[class*="absolute -top-12"] {
        top: -30px !important;
    }

    #testimonials-track div[class*="w-24 h-24"] {
        width: 60px !important;
        height: 60px !important;
    }

    /* --- AUTOMATION FRONTIERS MOBILE --- */
    /* Single column on mobile */
    #automation-carousel div[class*="grid md:grid-cols-2 lg:grid-cols-4"] {
        grid-template-columns: 1fr !important;
    }

    #automation-carousel div[class*="relative w-[285px] h-[362px]"] {
        min-height: 280px !important;
    }

    /* Card title */
    #automation-carousel h3[class*="text-[26px]"] {
        font-size: 20px !important;
    }

    /* --- PRODUCT SOLUTIONS MOBILE --- */
    #products-carousel div[class*="rounded-3xl p-6"] {
        padding: 16px !important;
    }

    /* Product icons */
    #products-carousel div[class*="w-14 h-14"],
    #products-carousel div[class*="w-20 h-20"] {
        width: 48px !important;
        height: 48px !important;
    }

    #products-carousel div[class*="w-14 h-14"] svg,
    #products-carousel div[class*="w-20 h-20"] svg {
        width: 24px !important;
        height: 24px !important;
    }

    /* Homepage case study card padding tweak for small mobile */
    #case-study-track > div > div > div {
        padding: 16px !important;
    }

    /* --- ABOUT PAGE MOBILE --- */
    /* Hero section - keep LEFT side visible on small screens */
    section[class*="relative overflow-hidden py-16"] div[class*="rounded-3xl shadow-lg overflow-hidden"][style*="max-width: 1339px"] {
        min-height: 350px !important;
    }

    section[class*="relative overflow-hidden py-16"] div[class*="rounded-3xl shadow-lg overflow-hidden"][style*="max-width: 1339px"] img {
        object-position: 0% 50% !important;
        object-fit: cover !important;
        transform: scale(1.2) !important;
        transform-origin: left center !important;
    }

    section[class*="relative overflow-hidden py-16"] div[class*="rounded-3xl shadow-lg overflow-hidden"]>div[class*="relative z-10 p-8"] {
        padding: 20px !important;
        height: auto !important;
        min-height: 350px !important;
    }

    /* Fix text clipping on small mobile */
    section[class*="bg-[#0a0a1a]"] p,
    section[class*="bg-[#090619]"] p {
        max-width: 100% !important;
        width: 100% !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }


    /* --- HERO SECTIONS --- */
    section[class*="min-h-[70vh]"] {
        min-height: 40vh !important;
    }

    /* Case Studies hero - even more compact on small mobile */
    section[class*="min-h-[70vh]"][class*="pt-32"] {
        padding-top: 70px !important;
        padding-bottom: 24px !important;
    }


    section[class*="pt-32"]>div>div[class*="max-w"] {
        min-height: 300px !important;
    }

    /* --- GRIDS --- */
    /* Products: single column */
    div[class*="grid"][class*="grid-cols-1"][class*="md:grid-cols-2"][class*="lg:grid-cols-3"] {
        grid-template-columns: 1fr !important;
    }

    /* Footer: stacked */
    footer>div>div[class*="grid"] {
        grid-template-columns: 1fr !important;
    }

    /* --- PRODUCT CARDS --- */
    div[class*="bg-white"][class*="rounded-[20px]"][style*="width: 325px"] {
        min-height: 360px;
    }

    div[class*="bg-white"][class*="rounded-[20px]"] div[class*="p-5"] {
        padding: 16px !important;
    }

    /* --- CASE STUDY CARDS (page) --- */
    div[class*="relative mx-auto"][style*="width: 406px"] {
        min-height: 380px !important;
    }

    div[class*="relative overflow-hidden"][style*="height: 180px"] {
        height: 140px !important;
    }

    /* Engagement stats - wrap nicely */
    div[class*="flex items-center gap-6"][class*="text-gray-400"] {
        gap: 8px !important;
        font-size: 12px !important;
    }

    div[class*="flex items-center gap-6"][class*="text-gray-400"] svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* --- SIDEBAR FILTERS --- */
    aside[class*="w-[200px]"]>div {
        flex-direction: column;
    }

    aside[class*="w-[200px]"]>div[class*="mb-8"] {
        min-width: 100%;
    }

    /* --- BUTTONS --- */
    .btn-primary,
    .btn-secondary,
    button[class*="px-5"],
    a[class*="px-5"] {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }

    /* --- PAGINATION --- */
    div[class*="flex items-center justify-center"][class*="mt-12"] button[class*="w-10"] {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }

    /* --- FOOTER --- */
    footer div[class*="flex flex-wrap"][class*="gap-8"] a {
        width: 100%;
        justify-content: center;
    }

    /* Footer address */
    footer p {
        font-size: 13px !important;
    }

    /* Footer links */
    footer ul li {
        margin-bottom: 12px;
    }

    footer ul a {
        font-size: 13px !important;
    }

    /* --- SPACING --- */
    section[class*="pt-32"] {
        padding-top: 80px !important;
    }

    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    div[class*="gap-6"] {
        gap: 12px !important;
    }

    /* Search bar stacking */
    div[class*="flex items-center bg-transparent border"] {
        flex-direction: column;
        border: none !important;
        gap: 12px;
    }

    div[class*="flex items-center bg-transparent border"] input {
        width: 100%;
        border: 1px solid #4b5563;
        border-radius: 9999px;
    }

    div[class*="flex items-center bg-transparent border"] button {
        width: 100%;
        margin-right: 0 !important;
    }
}

/* ========================================
   UTILITY CLASSES FOR MOBILE
======================================== */

/* Hide on mobile */
@media (max-width: 768px) {
    .mobile-hidden {
        display: none !important;
    }
}

/* Show only on mobile */
@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
}

/* Ensure images don't overflow. Excludes Convocore chatbot images (avatars,
   inline image attachments) so they keep their intrinsic Convocore-defined
   sizing without being stretched or distorted. */
@media (max-width: 768px) {
    img:not(:is(#VG_OVERLAY_CONTAINER, #VG_ROOT_INNER, #vg-theme-container, .vg-render-container) *) {
        max-width: 100%;
        height: auto;
    }
}

/* Better touch targets. Same Convocore exclusion as above — chatbot icon
   buttons must stay at their natural ~24px size. */
@media (max-width: 768px) {

    button:not(:is(#VG_OVERLAY_CONTAINER, #VG_ROOT_INNER, #vg-theme-container, .vg-render-container) *),
    a:not(:is(#VG_OVERLAY_CONTAINER, #VG_ROOT_INNER, #vg-theme-container, .vg-render-container) *),
    select:not(:is(#VG_OVERLAY_CONTAINER, #VG_ROOT_INNER, #vg-theme-container, .vg-render-container) *) {
        min-height: 44px;
    }

    /* Exclude carousel navigation dots from touch-target sizing */
    .services-dot,
    .case-study-dot,
    .carousel-dot,
    .testimonial-dot,
    .testimonial-dot-mobile,
    .product-dot {
        min-height: auto !important;
        min-width: auto !important;
    }

    input[type="checkbox"] {
        min-width: 18px;
        min-height: 18px;
    }
}

/* Prevent horizontal scroll */
html,
body {
    overflow-x: hidden;
}

/* Make service page — stats grid: 2×2 on mobile */
@media (max-width: 768px) {
    #mk-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
}