/* ==============================================================
   Netal Enterprises - Comprehensive Mobile & Tablet Optimization
   Strictly targeted max-widths to guarantee ZERO desktop impact
   Desktop locked at 1200px+
   ============================================================== */

/* =========================================
   LAPTOP & TABLET MAX (max-width: 1199.98px)
   Global Fixes applied to everything below Desktop
   ========================================= */
@media (max-width: 1199.98px) {
    /* 1. Global Overflow & Horizontal Scroll Fix */
    html, body {
        overflow-x: clip !important;
        width: 100%;
        max-width: 100vw;
    }

    /* Fix Bootstrap row negative margins causing scroll on mobile */
    .row {
        margin-right: 0 !important;
        margin: 0 !important;
          right: 0 !important;
    }
    
    .row:not(.g-0) > * {
        padding-right: 15px;
        padding-left: 15px;
    }

    /* 2. Fluid Typography & Spacing */
    h1, .h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.2; margin-bottom: 20px; }
    h2, .h2 { font-size: clamp(1.75rem, 4vw, 2.25rem); line-height: 1.25; margin-bottom: 20px; }
    h3, .h3 { font-size: clamp(1.5rem, 3.5vw, 1.75rem); margin-bottom: 8px; }
    h4, .h4 { font-size: clamp(1.25rem, 3vw, 1.5rem); margin-bottom: 8px; }
    h5, .h5 { font-size: clamp(1.1rem, 2.5vw, 1.25rem); margin-bottom: 8px; }
    p { margin-bottom: 8px; }

    /* Touch target minimums for accessibility */
    .btn, a.nav-link, button.navbar-toggler, .page-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* 3. Global Image Safety */
    img, picture, svg, video {
        max-width: 100% !important;
        height: auto;
        object-fit: cover;
    }

    /* 4. Table Responsiveness */
    table, .table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-collapse: collapse;
    }

    /* 5. Generic Container Padding */
    .container:not(.p-0), .container-fluid:not(.p-0) {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* 6. Form Elements */
    input, select, textarea {
        max-width: 100%;
        font-size: 16px; /* Prevents iOS Safari zoom on focus */
    }
    
    /* =========================================
       NEW MOBILE UI/UX POLISH
       ========================================= */
       
    /* Hero Section */
    #mobileHeroSlider {
        height: auto !important;
    }
    #mobileHeroSlider .carousel-item {
        height: auto !important;
    }
    #mobileHeroSlider .carousel-item img {
        aspect-ratio: 4/3;
        object-fit: cover;
        height: auto !important;
        width: 100%;
    }
    .hero-btn-row {
        gap: 16px;
        flex-wrap: nowrap;
    }

    /* Product Cards */
    .product-card {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .product-card-body {
        padding: 16px 20px;
        /* flex-grow removed */
        display: flex;
        flex-direction: column;
    }
    .product-card-body h5 {
        margin-bottom: 16px !important;
        text-align: center !important;
    }
    .product-card-img img, .product-item img {
        aspect-ratio: 1/1;
        object-fit: cover;
        height: auto;
        width: 100%;
    }
    
    /* Product Section Spacing */
    .product-card-actions {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Carousel Controls */
    .carousel-control-prev, .carousel-control-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 44px;
        width: 44px;
        background: rgba(13, 40, 83, 0.85);
        border-radius: 50%;
        opacity: 0.9;
        z-index: 10;
        margin: 0;
    }
    .carousel-control-prev { left: 10px; }
    .carousel-control-next { right: 10px; }

    /* Global Section Spacing */
    .py-5, .section-padding {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
    .my-5 {
        margin-top: 60px !important;
        margin-bottom: 60px !important;
    }
    
    .gap-2, .gap-3, .gap-4 {
        gap: 20px !important; /* Standardized content gap */
    }


    /* Forms & Buttons */
    .form-control {
        min-height: 44px;
        margin-bottom: 8px;
    }
    .btn {
        min-height: 44px;
        border-radius: 6px;
        padding: 12px 24px;
    }
    .btn-group, .d-flex .btn {
        gap: 16px;
    }

    /* Floating Button */
    .back-to-top {
        bottom: 80px !important;
        right: 24px !important;
        z-index: 9999 !important;
    }

    /* Typography & Footer */
    footer .container {
        padding-top: 60px !important;
        padding-bottom: 40px !important;
        text-align: center;
    }
    footer .col-lg-3, footer .col-md-6 {
        margin-bottom: 32px;
    }
    footer .d-flex.justify-content-start {
        justify-content: center !important;
    }
    footer h4, footer h5 {
        text-align: center !important;
    }
    footer p, footer .btn-link {
        text-align: center !important;
        display: block !important;
    }
    .copyright .row {
        flex-direction: column !important;
        text-align: center !important;
        gap: 15px;
    }
    .copyright .col-md-6 {
        text-align: center !important;
        width: 100% !important;
    }

    /* Hero Section */
    .hero-btn-row {
        justify-content: center !important;
        padding-top: 10px !important;
    }



    /* Testimonial Section */
    .testimonial-carousel .owl-stage-outer {
        padding: 20px 0 !important;
        overflow: visible !important;
    }
    .testimonial-carousel .owl-nav .owl-prev { left: -10px !important; }
    .testimonial-carousel .owl-nav .owl-next { right: -10px !important; }

    /* Happy Clients */
    .vendor-carousel img, .client-logo img {
        object-fit: contain !important;
        max-height: 80px !important;
        width: auto !important;
        margin: 0 auto !important;
    }

    /* About Section */
    .fact-item {
        padding: 20px !important;
    }/* =========================================
   TABLET (max-width: 991.98px)
   ========================================= */
@media (max-width: 991.98px) {
    /* TOP BAR (Location & Social Icons on Mobile) */
    header > .container-fluid.d-none.d-lg-block:first-of-type {
        display: flex !important;
        align-items: center !important;
        min-height: 38px !important;
        height: 38px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        background-color: #0D2853 !important;
    }
    
    header > .container-fluid.d-none.d-lg-block:first-of-type .row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
    }

    header > .container-fluid.d-none.d-lg-block:first-of-type .col-lg-6.text-start {
        width: auto !important;
        text-align: left !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    header > .container-fluid.d-none.d-lg-block:first-of-type .col-lg-6.text-start a:first-child,
    header > .container-fluid.d-none.d-lg-block:first-of-type .col-lg-6.text-start span {
        display: none !important;
    }
    
    header > .container-fluid.d-none.d-lg-block:first-of-type .col-lg-6.text-start a:nth-child(2) {
        display: flex !important;
        align-items: center !important;
        font-size: clamp(11.5px, 2.7vw, 13px) !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
    }

    header > .container-fluid.d-none.d-lg-block:first-of-type .col-lg-6.text-start a:nth-child(2) i {
        font-size: clamp(13px, 3vw, 15px) !important;
    }

    header > .container-fluid.d-none.d-lg-block:first-of-type .col-lg-6.text-end {
        width: auto !important;
        text-align: right !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    header > .container-fluid.d-none.d-lg-block:first-of-type .col-lg-6.text-end a:first-child {
        display: none !important;
    }
    
    header > .container-fluid.d-none.d-lg-block:first-of-type .col-lg-6.text-end a:not(:first-child) {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        font-size: clamp(13px, 3vw, 15px) !important;
        margin: 0 !important;
    }
    
    /* MIDDLE BAR (Logo & Hamburger Menu) */
    header > .container-fluid.py-4 {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    
    header > .container-fluid.py-4 h2 {
        font-size: 22px !important;
    }

                /* =================================================================
   MOBILE SECONDARY NAVIGATION  (max-width: 991.98px)
   ================================================================= */
@media (max-width: 991.98px) {

/* --- Navbar shell --- */
nav.navbar.navbar-expand-lg {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    height: 38px !important;
    position: relative !important;
    border: none !important;
    overflow: visible !important;
}
nav.navbar.navbar-expand-lg > .container-fluid {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
}

/* --- EXACT Reference Spacing for Nav Items --- */
#navbarCollapse {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
}
#navbarCollapse .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-evenly !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
#navbarCollapse .nav-item {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
#navbarCollapse .nav-link {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    padding: 0 4px !important;
    font-size: clamp(10.5px, 2.7vw, 13px) !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
    position: relative !important;
}
#navbarCollapse .dropdown-toggle::after {
    margin-left: 3px !important;
    vertical-align: middle !important;
}

/* --- Active underline --- */
#navbarCollapse .nav-link.active::after,
#navbarCollapse .nav-item .nav-link[style*="D22622"]::after {
    content: '' !important;
    position: absolute !important;
    bottom: 4px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% + 18px) !important;
    height: 2px !important;
    background: #D22622 !important;
    border-radius: 2px !important;
}

/* Use fixed widths for root items so underline isn't huge due to flex-grow */
#navbarCollapse a.nav-item.nav-link.active::after,
#navbarCollapse a.nav-item.nav-link[style*="D22622"]::after {
    width: 60px !important; 
}
#navbarCollapse a.nav-item.nav-link[href="/"].active::after,
#navbarCollapse a.nav-item.nav-link[href="/"][style*="D22622"]::after {
    width: 50px !important; 
}

/* --- Dividers: use ::before to prevent conflict with active underline --- */
#navbarCollapse .nav-item:not(:last-child) .nav-link::before {
    content: '';
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    height: 14px;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
    z-index: 1;
}

/* --- DROPDOWN OVERLAY (Pure CSS positioning) --- */
.mega-menu-custom.mega-menu-custom, .dropdown-custom-menu.dropdown-custom-menu {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    left: 0 !important;
    right: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: calc(100vh - 114px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background: #ffffff !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
    border-radius: 0 0 20px 20px !important;
    border-top: none !important;
    padding: 16px !important;
    z-index: 9999 !important;
    display: none !important;
    transform: none !important;
    animation: none !important;
    margin: 0 !important;
}
.mega-menu-custom.mega-menu-custom.show, .dropdown-custom-menu.dropdown-custom-menu.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    left: 0 !important;
    right: auto !important;
    width: 100vw !important;
    transform: none !important;
    animation: none !important;
    margin: 0 !important;
    border-top: none !important;
}

/* --- KILL INLINE ANIMATIONS ON MOBILE --- */
#navbarCollapse .nav-item.dropdown:hover .mega-menu-custom.mega-menu-custom,
#navbarCollapse .nav-item.dropdown:hover .dropdown-custom-menu.dropdown-custom-menu {
    animation: none !important;
    transform: none !important;
    margin: 0 !important;
}

.mega-menu-custom .mega-menu-cols {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}
.mega-menu-custom .mega-menu-col {
    padding-top: 0 !important;
    width: 100% !important;
}
.mega-menu-custom .mega-menu-col[style*="padding-top"] {
    padding-top: 0 !important;
}} 

/* 481px - 767px (Tablet / Large Mobile) */
@media (max-width: 767.98px) and (min-width: 481px) {
    #navbarCollapse a.nav-item[href*="manufacturing"] {
        display: none !important;
    }
}

/* 320px - 480px (Mobile) */
@media (max-width: 480px) {

      #navbarCollapse a.nav-item[href*="about-us"],
      #navbarCollapse a.nav-item[href*="manufacturing"] {
          display: none !important;
      }
}



/* =========================================
   LARGE MOBILE (max-width: 767.98px)
   ========================================= */
@media (max-width: 767.98px) {
    /* Hero Text Adjustments */
    .display-1 { font-size: 2.2rem !important; }
    .display-2 { font-size: 1.8rem !important; }
    
    .carousel-caption h1 {
        font-size: 2rem !important;
    }
    .carousel-caption p {
        font-size: 1rem !important;
    }

    form .col-md-6, form .col-12 {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .page-header {
        padding: 1.5rem 0 !important;
        min-height: auto !important;
        margin-bottom: 1.5rem !important;
    }
    .page-header .py-5 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    .premium-mfg-section {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    .natural-contact-section {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    /* Minimal Breadcrumb Override for Mobile */
    .container-fluid.bg-light.py-4.mb-5 {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        margin-bottom: 0px !important;
    }
    .breadcrumb {
        font-size: 12px !important;
        margin-bottom: 0 !important;
    }
    
    .py-5 {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
}

/* =========================================
   ULTRA SMALL MOBILE (max-width: 374.98px)
   ========================================= */
@media (max-width: 374.98px) {
    h1, .h1 { font-size: 1.5rem !important; margin-bottom: 8px; }
    h2, .h2 { font-size: 1.3rem !important; margin-bottom: 8px; }
    
    .btn {
        padding: 10px 16px;
        font-size: 13px;
    }
    
    .container, .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* EMERGENCY OVERFLOW FIX */
@media (max-width: 575.98px) {
  body { overflow-x: clip !important; width: 100% !important; position: relative; }
  .container, .container-fluid, .row { max-width: 100vw !important; overflow-x: clip !important; }
  .product-slide { max-width: 100vw !important; box-sizing: border-box !important; }
}

/* =========================================
   ADVANCED MOBILE DESIGN SYSTEM (V2)
   ========================================= */
@media (max-width: 991.98px) {
    /* 1. Spacing System */
    .section-title, .text-center h6 {
        margin-bottom: 24px !important;
    }
    .section-title + p, .text-center > p {
        margin-bottom: 32px !important;
    }
    .py-5, .container-xxl.py-5 {
        padding-top: 80px !important;
        padding-bottom: 64px !important;
    }

    /* =============================================
       2. TEAM SECTION - PREMIUM RESPONSIVE REBUILD
       ============================================= */

    /* Card shell: full height via Bootstrap h-100, flex column via d-flex flex-column */
    .team-item {
        height: 100% !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
        border: 1px solid rgba(0, 0, 0, 0.04) !important;
    }

    /* 1. Grid & Usable Width Optimization
       Override Bootstrap gutters locally to increase card width.
       Default g-4 is 24px gap. We reduce it to 10px horizontal, 12px vertical.
       This yields an effective calc(50% - 5px) per column without breaking the grid. */
    #our-team .row.g-4 {
        --bs-gutter-x: 10px !important;
        --bs-gutter-y: 12px !important;
    }

    /* 2. Image Area (70% dominance)
       Edge-to-edge design. Zero padding, zero margin. */
    .team-item .img-wrapper {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        height: clamp(200px, 48vw, 320px) !important;
        background-color: transparent !important;
        overflow: hidden !important;
        display: block !important;
    }

    .team-item img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: cover !important;
        object-position: top center !important;
    }

    /* 3. Content Area (30%)
       Reduced padding creates more text width and reduces empty space above/below.
       justify-content: flex-start ensures all names start at the exact same vertical level.
       gap: 4px strictly controls the small space between Name and Designation. */
    .team-item .text-center {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 12px 10px !important;
        flex-grow: 1 !important;
        gap: 4px !important;
    }

    /* 4. Name Typography
       One responsive system for all. nowrap removed so long names like
       "Laxminarayan Vaishnav" can naturally wrap into 2 lines. */
    .team-item .text-center h6 {
        width: 100% !important;
        text-align: center !important;
        font-size: clamp(10.5px, 3vw, 15px) !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        margin: 0 !important;
        padding: 0 !important;
        word-break: break-word !important;
        flex-shrink: 0 !important;
    }

    /* 5. Designation
       Natural wrap (max 2 lines expected due to font scale).
       Margin and padding removed since parent 'gap' handles spacing now. */
    .team-item .text-center small {
        width: 100% !important;
        text-align: center !important;
        font-size: clamp(9.5px, 2.5vw, 12px) !important;
        line-height: 1.35 !important;
        margin: 0 !important;
        padding: 0 !important;
        word-break: break-word !important;
        flex-shrink: 0 !important;
    }

    /* 6. Floating Back-to-Top Button
       Raise button so it never overlaps the last card. */
    .back-to-top {
        bottom: 80px !important;
    }

    /* 3. Testimonial Viewport */
    .testimonial-carousel .owl-stage {
        display: flex !important;
        align-items: stretch !important;
    }
    .testimonial-carousel .owl-item {
        display: flex !important;
        flex: 1 1 auto !important;
    }
    .testimonial-carousel .testimonial-item {
        height: 100% !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .testimonial-carousel .owl-stage-outer {
        padding: 15px 10px !important;
        margin: 0 !important;
    }

    .vendor-carousel .owl-item, 
    .client-carousel .owl-item {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: auto !important;
        min-height: 80px !important;
    }
    .vendor-carousel img, 
    .client-carousel img {
        height: auto !important;
        width: auto !important;
        max-height: 60px !important;
        max-width: 100% !important;
        object-fit: contain !important;
        margin: 0 auto !important;
    }

    /* 5. Footer Hierarchy (Mobile Specific Alignments) */
    /* Reset everything to left aligned by default */
    footer, footer p, footer a, footer .d-flex {
        text-align: left !important;
    }

    /* Center all footer headings as requested */
    footer h3, footer h4, footer h5, footer h6 {
        text-align: center !important;
        width: 100% !important;
    }

    /* Center all red underlines below headings */
    footer h3 + div,
    footer h4 + div,
    footer h5 + div,
    footer h6 + div {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Center the Follow Us social icons */
    footer h6 + .d-flex {
        justify-content: center !important;
    }

    /* Center align copyright and bottom footer content (overriding Bootstrap) */
    footer .container.py-3 .text-center,
    footer .container.py-3 .text-md-end {
        text-align: center !important;
    }
    footer .container.py-3 .col-md-6 {
        justify-content: center !important;
    }

    /* Reduce excessive vertical spacing in the main footer */
    footer .container.py-5 {
        padding-bottom: 16px !important;
        margin-bottom: 0 !important;
    }

    /* Bulletproof Copyright Bar Slimming */
    footer > div:last-child {
        padding: 10px 15px !important;
    }
    footer > div:last-child .container {
        padding: 0 !important;
    }
    footer > div:last-child .row {
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centers the content block */
        gap: 4px !important; /* Tiny gap between lines */
    }
    footer > div:last-child .col-md-6 {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        flex: 0 0 auto !important;
        text-align: center !important; /* Forces center alignment */
    }
    footer > div:last-child p {
        font-size: 11.5px !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important; /* Forces center alignment */
    }

    /* 7. Fix Testimonial Cards Overflow on Mobile */
    .position-relative[style*="padding: 0 50px;"] {
        padding: 0 30px !important; /* Space for mobile buttons */
    }
    #reviewSlider {
        overflow-x: auto !important; 
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important; 
        padding-bottom: 10px !important;
    }
    #reviewSlider::-webkit-scrollbar {
        display: none; 
    }
    /* Restore and resize buttons for mobile */
    #reviewPrev, #reviewNext {
        display: flex !important; 
        width: 32px !important; 
        height: 32px !important;
    }
    #reviewPrev i, #reviewNext i {
        font-size: 12px !important;
    }
    .review-card {
        /* Screen width minus Container padding(30px) minus Wrapper padding(60px) minus extra buffer(10px) */
        width: calc(100vw - 100px) !important; 
        max-width: 340px !important;
        scroll-snap-align: center !important; 
        padding: 20px !important; /* Slightly smaller inner padding for mobile */
    }

    /* 8. Equalize Product Cards */
    .product-carousel .owl-stage, 
    #retailSlider .owl-stage, 
    #industrialSlider .owl-stage {
        display: flex !important;
        align-items: stretch !important;
    }
    .product-carousel .owl-item,
    #retailSlider .owl-item,
    #industrialSlider .owl-item,
    .related-products-slider .owl-item {
        display: flex !important;
        align-items: stretch !important;
    }
    .product-card {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        width: 100% !important;
    }
    .product-card-body {
        flex-grow: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    /* 7. Optimize First Fold */
    #mobileHeroSlider .carousel-inner {
        max-height: none !important;
    }
    #mobileHeroSlider img {
        /* Removed 40vh to prevent mobile scroll layout shift */
        height: auto !important;
        aspect-ratio: 4/3 !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
    .hero-btn-row {
        margin-bottom: 24px !important;
    }

    /* 9. About Us Stats Inline on Mobile */
    /* Target the specific row in the About Us section without modifying HTML */
    .container-xxl .row.g-3.pb-4 {
        flex-wrap: nowrap !important;
        gap: 0 !important;
        margin-left: -4px;
        margin-right: -4px;
    }
    .container-xxl .row.g-3.pb-4 > div.col-sm-4 {
        width: 33.33% !important;
        flex: 0 0 33.33% !important;
        padding: 0 4px !important;
    }
    .container-xxl .row.g-3.pb-4 .p-4 {
        padding: 10px 4px !important;
    }
    .container-xxl .row.g-3.pb-4 i.fa-2x {
        font-size: 1.2rem !important;
        margin-bottom: 5px !important;
    }
    .container-xxl .row.g-3.pb-4 h2 {
        font-size: 1.25rem !important;
        margin-bottom: 2px !important;
    }
    .container-xxl .row.g-3.pb-4 p {
        font-size: 10px !important;
        line-height: 1.1 !important;
        letter-spacing: -0.2px;
    }

    /* 12. Category Page Mobile Hero Hierarchy Refinements */
    
    /* Breadcrumb to Hero Section */
    .container-fluid.bg-light.mb-5 + .container-xxl.py-5 {
        padding-top: 24px !important; /* Balanced breathing room */
        margin-top: 0px !important;
    }

    /* Section Label */
    .container-fluid.bg-light.mb-5 + .container-xxl.py-5 .text-center h6 {
        margin-bottom: 12px !important;
    }

    /* Main Heading (Single line on 390px+) */
    .container-fluid.bg-light.mb-5 + .container-xxl.py-5 .text-center h2 {
        font-size: clamp(1.4rem, 6vw, 1.7rem) !important;
        letter-spacing: -0.5px !important;
        margin-bottom: 4px !important; /* Reduced space between heading and text */
        max-width: 100% !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: clip !important;
    }

    @media (max-width: 389px) {
        .container-fluid.bg-light.mb-5 + .container-xxl.py-5 .text-center h2 {
            white-space: normal !important;
        }
    }

    /* Description to Featured Image/Grid */
    .container-fluid.bg-light.mb-5 + .container-xxl.py-5 .text-center.mb-5 {
        margin-bottom: 32px !important;
    }
}





/* Fix WOW.js on mobile preventing infinite blank screen loading */
@media (max-width: 767.98px) {
    .wow {
        visibility: visible !important;
        animation-name: none !important;
    }
}
/* Fixes for Product Header and Slider Navs on Mobile */
@media (max-width: 767.98px) {
    /* 1. Make Retail/Industrial Products text and View All Button fit on one line */
    .btn-view-all {
        padding: 5px 12px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }
    
    .d-flex.justify-content-between.align-items-center > h4.mb-0 {
        font-size: 14px !important;
        white-space: nowrap !important;
    }
    
    /* Ensure the container wrapping them handles spacing properly */
    .d-flex.justify-content-between.align-items-center {
        gap: 8px !important;
    }
    
    /* 2. Hide product slider buttons on mobile (use swipe instead) */
    #retailSlider .owl-nav,
    #industrialSlider .owl-nav,
    #accessoriesSlider .owl-nav,
    #videoSlider .owl-nav,
    #productSlider .owl-nav {
        display: none !important;
    }
}
/* Hero Section Mobile Enhancements */
@media (max-width: 767.98px) {
    /* Full width fix for hero container */
    .container-fluid.p-0 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    #mobile-hero-col {
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-top: 24px !important;
    }
    
    /* 1. India's Trusted Manufacturer of on one line */
    #mobile-hero-col h1.fw-bolder {
        font-size: 18px !important;
    }
    
    /* 2. 25+ YEARS OF MANUFACTURING EXCELLENCE - make it smaller */
    #mobile-hero-col .d-inline-flex.rounded-pill {
        padding: 4px 10px 4px 6px !important;
        margin-bottom: 15px !important;
    }
    #mobile-hero-col .d-inline-flex.rounded-pill > span:first-child {
        width: 20px !important; 
        height: 20px !important; 
        margin-right: 6px !important;
    }
    #mobile-hero-col .d-inline-flex.rounded-pill i {
        font-size: 10px !important;
    }
    #mobile-hero-col .d-inline-flex.rounded-pill > span:last-child {
        font-size: 9px !important;
    }
    
    /* 3. Four feature badges in a single line (Icon + Text side by side) */
    #mobile-hero-col > .d-flex.flex-wrap.gap-4 {
        flex-wrap: nowrap !important;
        gap: 0px !important;
        justify-content: space-evenly !important;
        width: 100% !important;
    }
    #mobile-hero-col > .d-flex.flex-wrap.gap-4 > div {
        flex-direction: row !important;
        align-items: center !important;
        text-align: left !important;
        gap: 2px !important;
    }
    #mobile-hero-col > .d-flex.flex-wrap.gap-4 > div > div.rounded-circle {
        width: 26px !important; 
        height: 26px !important; 
        border-width: 1px !important;
        margin: 0 !important;
    }
    #mobile-hero-col > .d-flex.flex-wrap.gap-4 > div > div.rounded-circle i {
        font-size: 12px !important;
    }
    #mobile-hero-col > .d-flex.flex-wrap.gap-4 > div > span {
        font-size: 7.5px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }
    
    /* 4. Request Quote and Download Brochure buttons in one line */
    #mobile-hero-col > .d-flex.flex-wrap.gap-3 {
        flex-wrap: nowrap !important;
        gap: 8px !important;
        justify-content: center !important;
    }
    #mobile-hero-col > .d-flex.flex-wrap.gap-3 > a.btn {
        flex: 0 0 auto !important; 
        padding: 8px 12px !important;
        font-size: 8.5px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        text-align: center !important;
    }
    #mobile-hero-col > .d-flex.flex-wrap.gap-3 > a.btn > span.ms-2 {
        margin: 0 0 0 -1px !important;
    }
    #mobile-hero-col > .d-flex.flex-wrap.gap-3 > a.btn > i.me-2 {
        margin: 0 -1px 0 0 !important;
    }
    #mobile-hero-col > .d-flex.flex-wrap.gap-3 > a.btn > i.fa-download {
        margin: 0 !important;
        margin-right: 1px !important;
    }
    #mobile-hero-col > .d-flex.flex-wrap.gap-3 > a.btn i {
        font-size: 10px !important;
    }
    
    /* 5. Trusted by Retail Stores... on one line */
    #mobile-hero-col > .animated.slideInUp:last-child {
        font-size: 9.5px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
    
    /* 7. Auto slider image full width (break out of column padding) */
    #mobileHeroSlider {
        width: calc(100% + 24px) !important;
        margin-left: -12px !important;
        margin-right: -12px !important;
        border-radius: 0 !important;
    }
    #mobileHeroSlider img {
        border-radius: 0 !important;
    }
}
/* Top Bar Mobile Enhancements */
@media (max-width: 767.98px) {
    /* Top bar container padding */
    .container-fluid.px-2.px-lg-5.d-block {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
        
    /* Make the logo smaller on mobile */
    .header-logo-img {
        max-height: 30px !important;
    }

        
    /* Center Badges Mobile Scaling */
    .mobile-header-badges {
        padding: 0 !important;
        gap: 0 !important;
        justify-content: space-evenly !important;
    }
    
    .mobile-header-badges > div,
    .mobile-header-badges > a {
        padding-left: 2px !important;
        padding-right: 2px !important;
        transform: scale(0.65);
        transform-origin: center;
        border-left: none !important;
    }
    
    /* Make India icon margin fix */
    .mobile-header-badges .fa-paw {
        font-size: 18px !important;
    }

    /* Location text styling */
    .col-6.text-start.d-flex > a {
        font-size: 10px !important;
        white-space: nowrap !important;
    }
    .col-6.text-start.d-flex > a > i {
        font-size: 11px !important;
        margin-right: 4px !important;
    }
    
    /* Social Icons styling */
    .topbar-socials {
        gap: 4px !important;
        padding-left: 0 !important;
        border-left: none !important;
    }
    .topbar-socials > a {
        width: 22px !important;
        height: 22px !important;
        font-size: 10px !important;
    }
    .topbar-socials > a > i {
        font-size: 11px !important;
    }
}



/* =========================================
   TABLET OPTIMIZATION (min-width: 768px) and (max-width: 991.98px)
   ========================================= */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Header Badges */
    .mobile-header-badges {
        gap: 15px !important;
        justify-content: center !important;
        padding: 0 !important;
    }
    .mobile-header-badges > div,
    .mobile-header-badges > a {
        transform: scale(0.85);
        transform-origin: center;
        border-left: none !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    /* Hero Section (Tablet uses the mobile hero HTML, but needs larger fonts/spacing) */
    #mobile-hero-col {
        padding: 40px 30px !important;
    }
    
    #mobile-hero-col h1.fw-bolder {
        font-size: 32px !important;
        line-height: 1.3 !important;
        margin-bottom: 25px !important;
    }
    
    #mobile-hero-col .d-inline-flex.rounded-pill {
        padding: 6px 15px 6px 8px !important;
        margin-bottom: 20px !important;
    }
    
    #mobile-hero-col .d-inline-flex.rounded-pill > span:first-child {
        width: 25px !important; 
        height: 25px !important; 
        margin-right: 8px !important;
    }
    
    #mobile-hero-col .d-inline-flex.rounded-pill i {
        font-size: 14px !important;
    }
    
    #mobile-hero-col .d-inline-flex.rounded-pill > span:last-child {
        font-size: 13px !important;
    }
    
    /* 4 Feature Badges in Hero */
    #mobile-hero-col > .d-flex.flex-wrap.gap-4 {
        gap: 20px !important;
        margin-bottom: 30px !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
    }
    
    #mobile-hero-col > .d-flex.flex-wrap.gap-4 > div {
        flex-direction: row !important;
        align-items: center !important;
        text-align: left !important;
        gap: 5px !important;
    }
    
    #mobile-hero-col > .d-flex.flex-wrap.gap-4 > div > div.rounded-circle {
        width: 35px !important; 
        height: 35px !important; 
        border-width: 1.5px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    #mobile-hero-col > .d-flex.flex-wrap.gap-4 > div > div.rounded-circle i {
        font-size: 16px !important;
    }
    
    #mobile-hero-col > .d-flex.flex-wrap.gap-4 > div > span {
        font-size: 11px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }
    
    /* Buttons in Hero */
    #mobile-hero-col > .d-flex.flex-wrap.gap-3 {
        gap: 20px !important;
        margin-bottom: 25px !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
    }
    
    #mobile-hero-col > .d-flex.flex-wrap.gap-3 > a.btn {
        padding: 12px 24px !important;
        font-size: 13px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    #mobile-hero-col > .d-flex.flex-wrap.gap-3 > a.btn i {
        font-size: 14px !important;
    }
    
    /* "Trusted by" text */
    #mobile-hero-col > .animated.slideInUp:last-child {
        font-size: 14px !important;
        margin-top: 15px !important;
        text-align: center !important;
    }
    
    /* Hero Slider Image */
    #mobileHeroSlider {
        width: calc(100% + 60px) !important;
        margin-left: -30px !important;
        margin-right: -30px !important;
        border-radius: 0 !important;
    }
}




/* ==============================================================
   Flagship Premium Mobile Navigation Overlay
   ============================================================== */
.premium-mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #0B2A5B;
    background-image: linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.premium-mobile-overlay.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.premium-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    flex-shrink: 0;
}

.premium-mobile-close {
    background: transparent;
    border: none;
    color: #ffffff;
    width: 48px;
    height: 48px;
    font-size: 32px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}

.premium-mobile-close:hover {
    color: #E53935;
    transform: scale(1.1);
}

.premium-mobile-nav {
    gap: 12px;
    /* flex-grow removed */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 5px 30px;
    gap: 24px;
}

.premium-mobile-nav-item {
    font-family: 'Archivo', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.2;
    color: #ffffff;
    text-decoration: none !important;
    letter-spacing: 0.5px;
    transition: color 0.2s ease, transform 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.05);
}

.premium-mobile-nav-item:hover {
    color: #E53935;
}

.premium-mobile-nav-item.active {
    color: #E53935;
}

.premium-mobile-nav-item.active::before {
    content: '';
    position: absolute;
    left: -20px;
    top: calc(50% - 8px);
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    background-color: #E53935;
    border-radius: 2px;
}

.premium-submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.5);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
}

.premium-mobile-nav-item:hover .premium-submenu-toggle {
    color: #E53935;
}

.premium-submenu {
    border-bottom: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: -8px;
}

.premium-submenu.expanded {
    max-height: 1200px;
    margin-top: 4px;
    margin-bottom: 8px;
}

.premium-submenu-item {
    display: block;
    font-family: 'Archivo', sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.65);
    text-align: left;
    text-decoration: none !important;
    transition: color 0.2s ease, transform 0.2s ease;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.premium-submenu-item:hover {
    color: #ffffff;
    transform: translateX(4px);
    border-left-color: #E53935;
}

.premium-mobile-footer {
    padding: 24px 30px 20px 30px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.premium-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    text-align: center;
    border-radius: 12px;
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.5px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.premium-btn-primary {
    background-color: #E53935;
    color: #ffffff;
    border: none;
    height: 44px;
    box-shadow: 0 4px 15px rgba(229, 57, 53, 0.3);
}

.premium-btn-primary:hover {
    background-color: #c62828;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(229, 57, 53, 0.4);
}

.premium-btn-outline {
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.15);
    height: 44px;
}

.premium-btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.premium-btn-whatsapp {
    background-color: rgba(37, 211, 102, 0.05);
    color: #25D366;
    border: 1px solid rgba(37, 211, 102, 0.3);
    height: 44px;
}

.premium-btn-whatsapp:hover {
    background-color: rgba(37, 211, 102, 0.1);
    color: #25D366;
    border-color: #25D366;
    transform: translateY(-2px);
}

.premium-social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 16px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.premium-social-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.7);
    font-size: 18px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.premium-social-link:hover {
    background-color: #E53935;
    color: #ffffff;
    border-color: #E53935;
    transform: translateY(-3px);
}

/* Custom Hero Buttons on Mobile (Force Side-by-Side) */
@media (max-width: 575.98px) {
    .hero-btn {
        padding: 10px 10px !important;
        font-size: 10px !important;
        flex: 1 !important;
        min-width: 0 !important;
        max-width: none !important;
        white-space: nowrap !important;
    }
    .hero-icon-circle {
        width: 18px !important;
        height: 18px !important;
        margin-left: 0.25rem !important; /* ms-1 */
    }
    .hero-icon-arrow {
        font-size: 8px !important;
    }
    .hero-icon-download {
        font-size: 11px !important;
        margin-right: 0.25rem !important; /* me-1 */
    }
}

/* Smaller Subheading on Mobile */
@media (max-width: 575.98px) {
    #mobile-hero-col p.mb-4.animated.slideInLeft {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }
}

@media (max-width: 767.98px) {
    /* Product Card Spacing & Font Size Reduction */
    .product-card-body h5 {
        font-size: 12px !important;
        margin-bottom: 8px !important;
        min-height: 34px !important; 
        line-height: 1.4 !important;
    }
    .btn-details, .btn-quote {
        font-size: 12px !important;
        padding: 8px !important;
    }
    .product-card-body {
        padding: 12px 12px !important;
    }
}

@media (max-width: 991.98px) {
    /* Equal Height for Stats Boxes */
    .container-xxl .row.g-3.pb-4 > div.col-sm-4 {
        display: flex !important;
    }
    .container-xxl .row.g-3.pb-4 > div.col-sm-4 > div.border {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .container-xxl .row.g-3.pb-4 .p-4 {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
}

/* Make Hamburger Menu Button Smoother and more responsive */
.mobile-menu-btn {
    touch-action: manipulation !important; 
    padding: 15px !important; 
    margin-right: -5px !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
}
.mobile-menu-btn i {
    pointer-events: none !important;
}

/* =========================================
   GLOBAL MOBILE CLICK FIX (Double-Tap Issue)
   ========================================= */
@media (max-width: 991.98px) {
    /* 1. Prevent iOS from trapping the first tap as a hover state by removing transforms on hover */
    a:hover, button:hover, .btn:hover, .premium-btn:hover, .btn-details:hover, .btn-quote:hover, 
    .btn-view-all:hover, .btn-primary-cta:hover, .btn-secondary-outline:hover, .netal-btn:hover {
        transform: none !important;
    }
    
    /* 2. Add an instant "Press" effect so users get visual feedback on the EXACT moment of tap */
    a:active, button:active, .btn:active, .premium-btn:active, .btn-details:active, .btn-quote:active {
        transform: scale(0.95) !important;
        opacity: 0.85 !important;
        transition: transform 0.1s, opacity 0.1s !important;
    }

    /* 3. Disable 300ms click delay globally for all interactive elements */
    a, button, .btn, .premium-btn, input, select, textarea {
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }
}

/* Hide scroll-to-top and slider nav buttons on mobile & tablets */
@media (max-width: 1199.98px) {
    .back-to-top {
        display: none !important;
    }
    .carousel-control-prev, .carousel-control-next, .owl-nav {
        display: none !important;
    }
    #reviewPrev, #reviewNext {
        display: none !important;
    }
}

/* Bulletproof Anti-Jump Fix for Mobile Hero Slider */
@media (max-width: 991.98px) {
    #mobileHeroSlider .carousel-inner {
        aspect-ratio: 4/3 !important;
        height: auto !important;
        overflow: hidden !important;
    }
    #mobileHeroSlider .carousel-item {
        height: 100% !important;
    }
    #mobileHeroSlider .carousel-item img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
        position: absolute !important;
        top: 0; left: 0;
    }
}