/* ==========================================================================
   ACLIMA HEALTHCARE INFRASTRUCTURE — COMPREHENSIVE MOBILE RESPONSIVE STYLESHEET
   Supports: Smartphones (portrait & landscape), Tablets (portrait & landscape)
   Breakpoints: <= 991.98px (Tablets & Mobile), <= 767.98px (Mobile), <= 575.98px (Small Mobile), <= 380px (Extra Small)
   ========================================================================== */

/* ── 1. GLOBAL MOBILE RESET & OVERFLOW PREVENTION ── */
@media (max-width: 991.98px) {
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative;
    -webkit-text-size-adjust: 100%;
  }

  .main-wrapper {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative;
  }

  /* Prevent images, videos, iframes from ever blowing past viewport */
  img, video, iframe, embed, object {
    max-width: 100% !important;
    height: auto;
  }

  /* Prevent iOS Safari zooming when focusing form fields */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Universal table responsive overflow prevention */
  table {
    max-width: 100%;
  }

  .table-responsive,
  .spec-table-wrap,
  .comparison-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .spec-table,
  .comparison-table {
    display: table;
    width: 100% !important;
    min-width: 480px;
  }

  /* Big background decorative text overflow fix (e.g., MISSION, PHILOSOPHY, UNDERSTANDING) */
  p.sty-text {
    font-size: clamp(26px, 7vw, 38px) !important;
    opacity: 0.3 !important;
    word-break: break-word !important;
    line-height: 1.1 !important;
    margin-top: 15px !important;
  }

  /* Container gutters */
  .container,
  .container-fluid {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* ── 2. HEADER & MOBILE DRAWER NAVIGATION ── */
@media (max-width: 991.98px) {
  /* Header Bar Layout */
  .header.header-nine {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1050 !important;
    background: #ffffff !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08) !important;
    height: auto !important;
    min-height: 70px !important;
  }

  .header.header-nine .header-nav {
    height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 !important;
  }

  .header.header-nine .navbar-header {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: auto !important;
    float: none !important;
  }

  /* Hamburger Button */
  #mobile_btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    background: #f0f7f3 !important;
    color: #016436 !important;
    border-radius: 10px !important;
    border: 1px solid #d4e8dd !important;
    font-size: 18px !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }

  #mobile_btn:hover,
  #mobile_btn:active {
    background: #016436 !important;
    color: #ffffff !important;
  }

  .header.header-nine .logo img {
    height: 46px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  .header.header-nine .dark-logo {
    display: none !important;
  }

  /* Right Action Icons in Header */
  .header.header-nine .header-navbar-rht {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .header.header-nine .header-navbar-rht li .details-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    background: #f0f7f3 !important;
    color: #016436 !important;
    border-radius: 10px !important;
    border: 1px solid #d4e8dd !important;
    font-size: 20px !important;
    transition: all 0.2s ease !important;
  }

  .header.header-nine .header-navbar-rht li .details-btn:hover {
    background: #016436 !important;
    color: #ffffff !important;
  }

  /* Overlay Backdrop */
  .sidebar-overlay {
    background-color: rgba(0, 0, 0, 0.65) !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1055 !important;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .sidebar-overlay.opened,
  html.menu-opened .sidebar-overlay {
    display: block !important;
    opacity: 1 !important;
  }

  /* Mobile Drawer */
  .header .header-nav .main-menu-wrapper {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 320px !important;
    max-width: 86vw !important;
    background: #ffffff !important;
    z-index: 1060 !important;
    transform: translateX(-105%) !important;
    -webkit-transform: translateX(-105%) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.15) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
  }

  html.menu-opened .header .header-nav .main-menu-wrapper,
  .main-wrapper.slide-nav .header .header-nav .main-menu-wrapper {
    transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
  }

  /* Menu Drawer Header */
  .header .header-nav .menu-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    background: #ffffff !important;
    border-bottom: 2px solid #edf4f0 !important;
    height: 70px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
  }

  .header .header-nav .menu-header .menu-logo img {
    height: 42px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  .header .header-nav .menu-header .menu-close {
    width: 36px !important;
    height: 36px !important;
    background: #f1f5f3 !important;
    color: #334155 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }

  .header .header-nav .menu-header .menu-close:hover {
    background: #e23b3b !important;
    color: #ffffff !important;
  }

  /* Main Nav List */
  .header .header-nav .main-nav {
    display: flex !important;
    flex-direction: column !important;
    list-style: none !important;
    padding: 12px 14px 20px !important;
    margin: 0 !important;
    background: transparent !important;
    flex-grow: 1 !important;
  }

  .header .header-nav .main-nav > li {
    border-bottom: 1px solid #f0f4f2 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
  }

  .header .header-nav .main-nav > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
  }

  .header .header-nav .main-nav > li.active > a,
  .header .header-nav .main-nav > li > a:hover {
    color: #016436 !important;
  }

  .header .header-nav .main-nav > li > a span i,
  .header .header-nav .main-nav > li > a > i {
    width: 28px !important;
    height: 28px !important;
    background: #f0f5f2 !important;
    color: #016436 !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    transition: transform 0.3s ease, background 0.2s ease !important;
    border: 1px solid #d9e6de !important;
  }

  .header .header-nav .main-nav > li.subdrop > a span i {
    transform: rotate(180deg) !important;
    background: #016436 !important;
    color: #ffffff !important;
  }

  /* Submenus on Mobile */
  .header .header-nav .main-nav > li .submenu {
    display: none;
    position: static !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    background: #f9fbf9 !important;
    border: 1px solid #e4eee7 !important;
    border-radius: 10px !important;
    margin: 4px 0 12px !important;
    padding: 8px 10px !important;
    box-shadow: none !important;
    transform: none !important;
    float: none !important;
  }

  .header .header-nav .main-nav > li.subdrop > .submenu {
    display: block !important;
  }

  /* Remove all desktop mega-menu desktop widths */
  #solutionsMenu .sub-menu-two,
  .header .has-submenu .sub-menu-one,
  .header .has-submenu .sub-menu-three {
    min-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    position: static !important;
    padding: 6px !important;
    margin: 4px 0 !important;
  }

  /* Submenu links styling */
  .sub-menu-one .sub-menu-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .sub-menu-one .sub-menu-list li {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #eef3ef !important;
  }

  .sub-menu-one .sub-menu-list li:last-child {
    border-bottom: none !important;
  }

  .sub-menu-one .sub-menu-list a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 8px !important;
    font-size: 13.5px !important;
    color: #334155 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    white-space: normal !important;
    line-height: 1.35 !important;
  }

  .sub-menu-one .sub-menu-list a:hover,
  .sub-menu-one .sub-menu-list a:active {
    color: #016436 !important;
    padding-left: 12px !important;
  }

  .sub-menu-one .sub-menu-list i {
    width: 26px !important;
    height: 26px !important;
    background: #016436 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
  }

  .sub-menu-one img {
    display: none !important;
  }

  /* Standard Knowledge Centre Submenu */
  .header .header-nav .main-nav > li .submenu li a {
    padding: 9px 12px !important;
    font-size: 13.5px !important;
    color: #334155 !important;
    border-bottom: 1px solid #eef3ef !important;
    display: block !important;
    text-decoration: none !important;
  }

  .header .header-nav .main-nav > li .submenu li:last-child a {
    border-bottom: none !important;
  }

  /* Products Megamenu inside Mobile Drawer */
  .megamenu-wrapper {
    padding: 4px !important;
  }

  .mega-inner {
    display: block !important;
  }

  .mega-sidebar {
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }

  .mega-cat {
    padding: 6px 4px !important;
    border-bottom: 1px solid #eef3ef !important;
  }

  .mega-cat:last-child {
    border-bottom: none !important;
  }

  .mega-cat a {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    font-size: 13.5px !important;
    color: #334155 !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    white-space: normal !important;
  }

  .mega-cat a:hover {
    color: #016436 !important;
  }

  .mcat-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    background: #016436 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .mcat-icon i {
    font-size: 12px !important;
  }

  /* Mobile Drawer Bottom Contact Block */
  .header-items {
    padding: 16px !important;
    background: #f8faf9 !important;
    border-top: 1px solid #e2ede6 !important;
    margin-top: auto !important;
  }

  .header-items .about-popup-item .title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #016436 !important;
    margin-bottom: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }

  .header-items .support-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
  }

  .header-items .support-item .avatar {
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
    background: #016436 !important;
    color: #ffffff !important;
  }

  .header-items .support-item .title {
    font-size: 11px !important;
    color: #64748b !important;
    margin: 0 !important;
  }

  .header-items .support-item .link {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin: 0 !important;
  }

  .header-items .support-item .link a {
    color: #1e293b !important;
    text-decoration: none !important;
  }
}

/* ── 3. HOME PAGE (index.blade.php) RESPONSIVE ENHANCEMENTS ── */
@media (max-width: 991.98px) {
  /* Hero Slider Banner */
  .hero-section-nine {
    padding: 0 !important;
    min-height: auto !important;
  }

  .banner-section-nine {
    padding: 40px 0 50px !important;
  }

  .banner-section-nine .section-header-nine .section-title {
    font-size: clamp(22px, 5.5vw, 34px) !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
  }

  .banner-section-nine .section-header-nine .section-title br {
    display: inline !important;
  }

  .banner-section-nine .section-header-nine .paragraph {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
    color: #1e293b !important;
  }

  .banner-section-nine .section-header-nine .paragraph br {
    display: none !important;
  }

  .banner-btn-nine {
    gap: 12px !important;
  }

  .banner-btn-nine .btn {
    padding: 10px 18px !important;
    font-size: 13.5px !important;
  }

  .banner-section-nine .call-item {
    gap: 8px !important;
  }

  .banner-section-nine .call-item .call-info-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }

  .hero-arrow {
    display: none !important; /* Hide intrusive arrows on mobile */
  }

  /* Responsive Trust Strip */
  .trust-strip {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    margin-top: 18px !important;
    background: rgba(0, 0, 0, 0.75) !important;
  }

  .trust-label {
    width: 100% !important;
    border-right: none !important;
    margin-bottom: 4px !important;
    font-size: 11px !important;
    color: #a7f3d0 !important;
  }

  .trust-items {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .trust-item {
    padding: 3px 8px !important;
    font-size: 11.5px !important;
    border-right: none !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
  }

  /* Product Categories Grid on Mobile (Overcoming Desktop Accordion & Display:None bug) */
  .services-section-nine {
    padding: 50px 0 !important;
  }

  .services-section-nine .section-header-nine .section-title {
    font-size: clamp(22px, 5vw, 32px) !important;
    line-height: 1.25 !important;
  }

  .services-section-nine .section-header-nine p {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
  }

  .services-content-nine {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    margin-top: 14px !important;
  }

  /* Ensure all 10 items stay fully visible */
  .services-content-nine .services-item-nine:nth-child(4),
  .services-content-nine .services-item-nine:nth-child(5) {
    display: block !important;
  }

  .services-item-nine {
    width: 100% !important;
    height: 250px !important;
    border-radius: 14px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #e2ede6 !important;
  }

  .services-item-nine::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(1, 100, 54, 0.95) 85%) !important;
    z-index: 2 !important;
  }

  .services-item-nine .title {
    display: none !important; /* Hide rotated text on mobile */
  }

  .services-item-nine .services-profile {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
  }

  .services-item-nine .services-profile img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .services-item-nine .services-info {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 3 !important;
    padding: 14px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  .services-item-nine .services-info .services-icon {
    width: 36px !important;
    height: 36px !important;
    background: #ffffff !important;
    color: #016436 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 2px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  }

  .services-item-nine .services-info .services-icon i {
    color: #016436 !important;
    font-size: 15px !important;
  }

  .services-item-nine .services-info .custom-title {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 2px !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6) !important;
  }

  .services-item-nine .services-info .description {
    display: none !important;
  }

  .services-item-nine .services-info .btn {
    padding: 4px 10px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    background: #ffffff !important;
    color: #016436 !important;
    border-radius: 6px !important;
    border: none !important;
    margin-top: 2px !important;
  }

  /* RFQ Process 4 Steps */
  .bookus-section {
    padding: 50px 0 !important;
  }

  .bookus-section .way-icon {
    display: none !important; /* Hide overlapping horizontal line */
  }

  .book-item {
    margin-bottom: 16px !important;
    padding: 20px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  /* Why Choose ACLIMA (services-section-five) 5 items display */
  .services-section-five {
    padding: 50px 0 !important;
  }

  .services-section-five .services-details {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .services-item-five.two,
  .services-item-five.three,
  .services-item-five.four,
  .services-item-five.five {
    display: block !important; /* Override template bug hiding items */
  }

  .services-item-five {
    height: 250px !important;
    width: 100% !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
  }

  .services-item-five .large-img {
    opacity: 1 !important; /* Always show image on touch screens */
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .services-item-five .services-content {
    padding: 16px !important;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.85) 100%) !important;
    border-right: none !important;
    position: relative !important;
    z-index: 2 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
  }

  .services-item-five .services-content .services-icon {
    width: 42px !important;
    height: 42px !important;
    margin-bottom: 8px !important;
    border-radius: 8px !important;
  }

  .services-item-five .services-content .custom-title {
    font-size: 15px !important;
    margin-bottom: 4px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
  }

  .services-item-five .services-content .description {
    font-size: 12px !important;
    line-height: 1.4 !important;
    opacity: 0.9 !important;
    color: #ffffff !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .services-item-five .services-content .more-link {
    display: none !important;
  }

  /* Technology Showcase section buttons */
  .technology-section-thirteen {
    padding: 50px 0 !important;
  }

  .technology-section-thirteen .d-flex.gap-4 {
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 15px !important;
  }

  .technology-section-thirteen .d-flex.gap-4 .btn {
    flex: 1 1 100% !important;
    justify-content: center !important;
    padding: 11px 18px !important;
    font-size: 13.5px !important;
  }

  .technology-img-thirteen {
    margin-bottom: 24px !important;
  }

  /* Bulk Requirement section */
  .about-section-fourteen {
    padding: 40px 0 !important;
  }

  .about-img-fourteen {
    margin-bottom: 24px !important;
  }

  .about-wrap {
    display: block !important;
  }

  .abt-video {
    margin-top: 20px !important;
  }

  .abt-video img {
    height: 220px !important;
  }

  /* Why Choose Video section */
  .whychoose-section-nine {
    padding-bottom: 40px !important;
  }

  .whychoose-section-nine .choose-img-nine video {
    width: 100% !important;
    height: auto !important;
    max-height: 320px !important;
    border-radius: 12px !important;
  }

  /* Reset harmful negative margin on teen-sec step cards */
  .teen-sec {
    margin-top: 0 !important;
    padding-top: 20px !important;
    padding-bottom: 40px !important;
  }

  .choose-step-nine .choose-step {
    margin-bottom: 15px !important;
  }

  /* Testimonials */
  .testimonial-section-nine {
    padding: 50px 0 !important;
  }

  .testimonial-item-nine {
    flex-direction: column !important;
    padding: 20px !important;
  }

  .testimonial-author {
    margin-top: 14px !important;
  }

  .testimonial-author img {
    max-height: 120px !important;
    width: auto !important;
  }

  /* Planning CTA Way Banner */
  .way-section {
    padding: 40px 0 !important;
  }

  .way-bg {
    padding: 30px 20px !important;
    border-radius: 16px !important;
  }

  .way-inner-header h2 {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  .way-inner-header .btn {
    margin-bottom: 8px !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }

  .way-img {
    margin-top: 20px !important;
    text-align: center !important;
  }

  .way-img img {
    max-height: 250px !important;
    width: auto !important;
  }
}

/* Single column adjustments on small phones (< 576px) */
@media (max-width: 575.98px) {
  .services-content-nine {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .services-item-nine {
    height: 175px !important;
  }

  .services-item-nine .services-info {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    background: linear-gradient(180deg, transparent 0%, rgba(1, 100, 54, 0.95) 45%) !important;
  }

  .services-item-nine .services-info .custom-title {
    font-size: 14px !important;
    max-width: 65% !important;
  }

  .services-section-five .services-details {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .services-item-five {
    height: 210px !important;
  }

  .banner-btn-nine .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .banner-section-nine .call-item {
    width: 100% !important;
    justify-content: center !important;
    margin-top: 4px !important;
  }
}

/* ── 4. CATEGORY & PRODUCTS LISTING PAGES RESPONSIVENESS ── */
@media (max-width: 991.98px) {
  /* Inner Banner */
  .inner-banner {
    padding: 60px 0 35px !important;
  }

  .inner-banner h1 {
    font-size: clamp(20px, 5vw, 30px) !important;
    line-height: 1.25 !important;
  }

  .inner-banner .breadcrumb {
    margin-top: 10px !important;
  }

  .inner-banner .breadcrumb-item {
    padding: 5px 14px !important;
    font-size: 12px !important;
  }

  /* Category Navigation Pills (Horizontal Swipe on Mobile) */
  .category-nav-bar {
    margin-top: -15px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
  }

  .category-nav-bar > div {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    padding-bottom: 6px !important;
    justify-content: flex-start !important;
  }

  .btn-category-pill {
    padding: 7px 16px !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Subcategory Banner */
  .subcat-section {
    margin-bottom: 50px !important;
    scroll-margin-top: 80px !important;
  }

  .subcat-header {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
  }

  .subcat-heading {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  .subcat-heading .badge {
    font-size: 11px !important;
    padding: 3px 8px !important;
  }

  .subcat-banner {
    height: 180px !important;
    border-radius: 12px !important;
  }

  .subcat-banner-overlay {
    padding: 18px !important;
    background: linear-gradient(90deg, rgba(0,0,0,0.82) 65%, rgba(0,0,0,0.3) 100%) !important;
  }

  .subcat-banner-content h4 {
    font-size: 18px !important;
    margin-bottom: 4px !important;
  }

  .subcat-banner-content p {
    font-size: 12px !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* Product Grid Cards */
  .product-grid-card {
    border-radius: 12px !important;
    margin-bottom: 10px !important;
  }

  .p-img-wrapper {
    padding-top: 75% !important;
  }

  .p-body {
    padding: 14px !important;
  }

  .p-title {
    font-size: 15px !important;
    height: auto !important;
    margin-bottom: 6px !important;
  }

  .product-features-list li {
    font-size: 12px !important;
    margin-bottom: 4px !important;
  }

  .p-action-btn {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }

  /* Catalog Topbar (Sorting & Count) */
  .catalog-topbar {
    padding: 12px 14px !important;
    margin-bottom: 18px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .catalog-topbar select {
    width: 100% !important;
  }

  /* Products.blade.php Sidebar on Mobile */
  .mobile-filter-btn {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    margin-bottom: 15px !important;
  }

  .products-layout {
    padding: 20px 0 50px !important;
  }
}

@media (max-width: 575.98px) {
  /* Product cards: 1 column on extra narrow phones */
  .row.g-4 > .col-sm-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .subcat-banner {
    height: 150px !important;
  }
}

/* ── 5. PRODUCT DETAILS PAGE (product-details.blade.php) ── */
@media (max-width: 991.98px) {
  .pd-breadcrumb-banner {
    padding: 24px 0 20px !important;
  }

  .bc-title {
    font-size: clamp(18px, 4.5vw, 24px) !important;
    line-height: 1.3 !important;
  }

  .bc-pill {
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
  }

  .bc-pill li {
    font-size: 11.5px !important;
    padding: 4px 10px !important;
  }

  /* Sticky Product In-Page Nav */
  .pd-nav-bar {
    top: 70px !important; /* Below mobile sticky header */
  }

  .nav-scroll {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    padding: 8px 12px !important;
  }

  .pd-nav-link,
  .pd-nav-cta {
    font-size: 12px !important;
    padding: 7px 14px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Specification tabs & tables */
  .spec-tabs-wrap {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 10px !important;
    padding: 6px !important;
    gap: 4px !important;
  }

  .spec-tabs-wrap .nav-link {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 7px 14px !important;
    font-size: 12.5px !important;
  }

  .spec-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin-top: 12px !important;
  }

  .spec-table {
    min-width: 400px !important;
  }

  /* Overview parameter grid */
  .ov-param-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* Inquiry Form & Info Box */
  .inq-info-box {
    padding: 20px !important;
    border-radius: 14px !important;
    margin-bottom: 20px !important;
  }

  .inq-form-card {
    padding: 20px !important;
    border-radius: 14px !important;
  }

  /* Features & highlights cards */
  .feat-card {
    padding: 16px !important;
  }

  .feat-card-icon {
    width: 42px !important;
    height: 42px !important;
    font-size: 17px !important;
  }

  .doc-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .doc-card .btn {
    width: 100% !important;
    text-align: center !important;
  }
}

@media (max-width: 575.98px) {
  .ov-param-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 6. QUOTE, BOQ & SOLUTION PAGES RESPONSIVENESS ── */
@media (max-width: 991.98px) {
  /* Hero headers in quote & solution pages */
  .hero-inner {
    grid-template-columns: 1fr !important;
    padding: 35px 0 !important;
    gap: 20px !important;
    min-height: auto !important;
  }

  .hero h1 {
    font-size: clamp(24px, 5.5vw, 34px) !important;
    line-height: 1.2 !important;
  }

  .hero p {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
  }

  .hero-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .hero-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .two-col,
  .two {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Category grids in Quote / Catalogue pages */
  .category-grid,
  .catalog-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Info Strip points */
  .info-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 16px !important;
  }

  .hero-stat-grid,
  .stat {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Layout with Sticky TOC Sidebar (vj.css) */
  .layout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 20px 0 40px !important;
  }

  .sidebar {
    position: static !important;
  }

  .toc {
    display: none !important; /* Hide long TOC taking vertical space on mobile */
  }

  .section {
    padding: 24px 18px !important;
    border-radius: 12px !important;
  }

  img.n-img {
    height: auto !important;
    max-height: 260px !important;
  }

  .dropzone {
    padding: 16px !important;
  }
}

@media (max-width: 575.98px) {
  .category-grid,
  .catalog-grid,
  .info-strip,
  .hero-stat-grid,
  .stat {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .category-card,
  .catalog-card {
    padding: 16px !important;
  }
}

/* ── 7. ABOUT US, HIF, QUALITY & TEAM PAGES ── */
@media (max-width: 991.98px) {
  .banner-section-fifteen {
    padding: 50px 0 35px !important;
  }

  .banner-content-fifteen {
    padding: 24px !important;
    border-radius: 20px !important;
  }

  .banner-content-fifteen .title {
    font-size: clamp(20px, 4.8vw, 28px) !important;
    line-height: 1.3 !important;
  }

  .banner-content-fifteen .description {
    font-size: 14px !important;
  }

  .banner-content-fifteen .banner-btn {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* Vision Mission Values Tabs on Mobile (about.blade.php) */
  .home2-pmv-section {
    padding: 50px 0 !important;
  }

  .home2-pmv-section .pmv-bottom .pmv-nav ul {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding-bottom: 8px !important;
    -webkit-overflow-scrolling: touch !important;
    border-bottom: none !important;
  }

  .home2-pmv-section .pmv-bottom .pmv-nav ul::after {
    display: none !important;
  }

  .home2-pmv-section .pmv-bottom .pmv-nav ul li {
    width: auto !important;
    flex-shrink: 0 !important;
  }

  .home2-pmv-section .pmv-bottom .pmv-nav ul li a {
    padding: 8px 18px !important;
    font-size: 13.5px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border-radius: 25px !important;
    white-space: nowrap !important;
  }

  .home2-pmv-section .pmv-bottom .pmv-nav ul li a.active {
    background: #f7bc2f !important;
    color: #016436 !important;
  }

  .home2-pmv-section .pmv-bottom .pmv-nav ul li a::after {
    display: none !important;
  }

  .home2-pmv-section img {
    margin-top: 15px !important;
    max-height: 240px !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  .home2-pmv-section h4 {
    font-size: 18px !important;
    line-height: 1.35 !important;
  }

  .home2-pmv-section p {
    font-size: 13.5px !important;
  }

  .about-img-info {
    margin-bottom: 25px !important;
  }
}

/* ── 8. CONTACT US & BLOG PAGES ── */
@media (max-width: 991.98px) {
  .contact-section {
    padding: 40px 0 !important;
  }

  .contact-card {
    margin-bottom: 12px !important;
  }

  .contact-form-card {
    margin-top: 20px !important;
  }

  .contact-map iframe {
    width: 100% !important;
    height: 280px !important;
    display: block !important;
  }

  .blog-detail-wrapper {
    padding: 18px !important;
  }

  .blog-detail-img {
    max-height: 250px !important;
  }

  .blog-detail-meta {
    flex-wrap: wrap !important;
    gap: 10px !important;
    font-size: 12.5px !important;
  }
}

@media (min-width: 992px) {
  .footer-widget-company {
    margin-left: 60px;
  }
}

/* ── 9. FOOTER RESPONSIVE STYLING ── */
@media (max-width: 991.98px) {
  .footer-four .footer-top {
    padding: 40px 0 20px !important;
  }

  .footer-widget {
    margin-left: 0 !important;
    margin-bottom: 24px !important;
  }

  .footer-widget .footer-title {
    font-size: 16px !important;
    margin-bottom: 12px !important;
  }

  .footer-widget .footer-menu li {
    margin-bottom: 8px !important;
  }

  .footer-widget .footer-menu li a {
    font-size: 13.5px !important;
  }

  .footer-four .footer-bottom {
    padding: 16px 0 !important;
  }

  .footer-four .copyright {
    flex-direction: column !important;
    gap: 10px !important;
    text-align: center !important;
  }

  .footer-four .copyright-menu .policy-menu {
    justify-content: center !important;
  }

  .footer-bg-02,
  .footer-bg-03,
  .footer-bg-04 {
    display: none !important;
  }
}

/* ── 10. MOBILE STICKY BOTTOM ACTION BAR (Ultra Premium UX) ── */
.mobile-sticky-bar {
  display: none;
}

@media (max-width: 991.98px) {
  /* Give bottom spacing so content and progress button don't get covered */
  body {
    padding-bottom: 64px !important;
  }

  .mobile-sticky-bar {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 60px !important;
    background: #ffffff !important;
    border-top: 1px solid #e2ece6 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
    z-index: 1040 !important;
    align-items: center !important;
    justify-content: space-around !important;
    padding: 4px 6px !important;
  }

  .mobile-bar-btn {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    color: #475569 !important;
    text-decoration: none !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 4px !important;
    transition: all 0.2s ease !important;
    gap: 3px !important;
  }

  .mobile-bar-btn i {
    font-size: 18px !important;
    color: #016436 !important;
    transition: transform 0.2s ease !important;
  }

  .mobile-bar-btn:active i,
  .mobile-bar-btn:hover i {
    transform: scale(1.15) !important;
  }

  .mobile-bar-btn.btn-highlight {
    background: linear-gradient(135deg, #016436 0%, #028a4a 100%) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 6px 8px !important;
    box-shadow: 0 4px 12px rgba(1, 100, 54, 0.25) !important;
  }

  .mobile-bar-btn.btn-highlight i {
    color: #ffffff !important;
  }

  .mobile-bar-btn.btn-highlight:active {
    transform: translateY(-2px) !important;
  }

  /* Move scroll to top button up above the mobile bar */
  .progress-wrap {
    bottom: 74px !important;
    right: 18px !important;
    width: 42px !important;
    height: 42px !important;
  }
}