/* =============================================
   CTA VISIBILITY FIXES (light + dark themes)
   Ensure outline buttons are clearly visible on
   gradient/dark backgrounds across all pages.
   ============================================= */

/* Default/light theme CTA buttons on gradient backgrounds
   (Get Quote / Contact Us etc.) use brown→yellow gradient with dark text. */
.gradient-primary a.border-white,
.gradient-primary a.text-white.border-white,
.gradient-primary a[href*="contact"],
.gradient-primary a[aria-label*="Contact" i],
.gradient-primary a[href*="get-quote"],
.gradient-primary a[href*="quote"] {
  background: linear-gradient(135deg, #b45309 0%, #facc15 100%) !important; /* brown → yellow */
  color: #111827 !important; /* dark text for contrast */
  border-color: transparent !important;
  border-width: 0 !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  box-shadow: 0 4px 12px rgba(146, 64, 14, 0.35) !important;
}

/* Force CTA background to brand blue–purple gradient (override any teal) */
.gradient-primary {
  background: linear-gradient(135deg, #6A11CB 0%, #2575FC 100%) !important;
}

/* Extra-strong overrides for specific CTA sections */
#homepageCta,
#productsCta {
  background: linear-gradient(135deg, #6A11CB 0%, #2575FC 100%) !important;
  background-color: transparent !important;
}

/* Amazon-style CTA buttons (brown → yellow gradient) inside CTA sections */
#homepageCta a[href*="get-quote"],
#productsCta a[href*="get-quote"],
#homepageCta a[href^="tel"],
#productsCta a[href^="tel"],
#homepageCta a[href*="contact.php"],
#productsCta a[href*="contact.php"],
.gradient-primary a[href*="contact.php"] {
  background: linear-gradient(135deg, #b45309 0%, #facc15 100%) !important; /* brown → yellow */
  color: #111827 !important; /* dark text for contrast */
  border-color: transparent !important;
  border-width: 0 !important;
  font-weight: 700 !important;
  /* Strong 3D-style depth (similar to ONE STOP FOR text) */
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  box-shadow:
    0 3px 0 rgba(120, 53, 15, 0.75),   /* crisp base edge */
    0 10px 16px rgba(120, 53, 15, 0.45),
    0 22px 32px rgba(0, 0, 0, 0.26) !important;
}

#homepageCta a[href*="get-quote"]:hover,
#productsCta a[href*="get-quote"]:hover,
#homepageCta a[href^="tel"]:hover,
#productsCta a[href^="tel"]:hover,
#homepageCta a[href*="contact.php"]:hover,
#productsCta a[href*="contact.php"]:hover,
.gradient-primary a[href*="contact.php"]:hover {
  background: linear-gradient(135deg, #92400e 0%, #fbbf24 100%) !important; /* slightly darker hover */
  box-shadow:
    0 4px 0 rgba(120, 53, 15, 0.85),
    0 14px 22px rgba(120, 53, 15, 0.55),
    0 26px 40px rgba(0, 0, 0, 0.32) !important;
}

/* Dark mode: use same blue–purple gradient for text-gradient as light mode (no teal) */
[data-theme="dark"] .text-gradient {
  background: linear-gradient(135deg, #6A11CB 0%, #2575FC 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.gradient-primary a.border-white:hover,
.gradient-primary a.text-white.border-white:hover,
.gradient-primary a[href*="get-quote"]:hover,
.gradient-primary a[href*="quote"]:hover,
.gradient-primary a[href*="contact"]:hover,
.gradient-primary a[aria-label*="Contact" i]:hover {
  background: #ffffff !important;
  color: var(--primary) !important;
}

/* Dark theme: yellow/orange CTAs (Get Quote, Contact, etc.) on gradients
   should keep the same brown→yellow style with DARK text for consistency. */
[data-theme="dark"] .gradient-primary a.border-white,
[data-theme="dark"] .gradient-primary a.text-white.border-white,
[data-theme="dark"] .gradient-primary a[href*="contact"],
[data-theme="dark"] .gradient-primary a[aria-label*="Contact" i],
[data-theme="dark"] .gradient-primary a[href*="get-quote"],
[data-theme="dark"] .gradient-primary a[href*="quote"] {
  background: linear-gradient(135deg, #b45309 0%, #facc15 100%) !important; /* brown → yellow */
  color: #111827 !important; /* dark text for contrast */
  border-color: transparent !important;
  border-width: 0 !important;
  text-shadow: none !important;
  box-shadow: 0 4px 12px rgba(146, 64, 14, 0.35) !important;
}

[data-theme="dark"] .gradient-primary a.border-white:hover,
[data-theme="dark"] .gradient-primary a.text-white.border-white:hover,
[data-theme="dark"] .gradient-primary a[href*="get-quote"]:hover,
[data-theme="dark"] .gradient-primary a[href*="quote"]:hover,
[data-theme="dark"] .gradient-primary a[href*="contact"]:hover,
[data-theme="dark"] .gradient-primary a[aria-label*="Contact" i]:hover {
  background: linear-gradient(135deg, #92400e 0%, #fbbf24 100%) !important; /* darker hover */
  color: #111827 !important;
}

:root { --header-height: 72px; }

/* Desktop/tablet defaults remain unchanged; mobile overrides come later */
section.hero-gradient { padding-top: calc(var(--header-height, 72px) + 0px) !important; }
.hero-gradient { min-height: auto !important; align-items: flex-start !important; }
section.hero-gradient.min-h-screen { min-height: auto !important; }
section.hero-gradient.items-center { align-items: flex-start !important; }
main > section:first-of-type { margin-top: 0 !important; }

/* Remove extra inner padding for hero sections globally */
main > section:first-child .section-padding,
section:first-of-type .section-padding { padding-top: 0 !important; }
.hero-gradient .section-padding { padding-top: 0 !important; }
.hero-gradient .container-custom { padding-top: 8px !important; }

/* Home hero (ONE STOP FOR) baseline spacing below global search bar */
.hero-with-search .container-custom {
  padding-top: 40px !important;
}

@supports (padding: max(0px)) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  header { padding-top: env(safe-area-inset-top); }
  #mobileMenu { padding-bottom: env(safe-area-inset-bottom); }
}

/* Global search bar below header (Amazon-style) */
.mobile-search-wrapper {
  display: block !important;
  margin-top: 0 !important;
  padding: 8px 16px !important; /* slightly tighter on mobile */
  background: linear-gradient(90deg, #0f172a 0%, #1e40af 35%, #4c1d95 75%, #312e81 100%) !important; /* dark blue → indigo → purple */
}
.site-search-bar {
  max-width: 900px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: stretch !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  min-height: 42px !important;
}
.site-search-scope {
  flex: 0 0 90px !important;
  background: #e5e7eb !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-right: 1px solid #d1d5db !important;
}
.site-search-scope select {
  width: 100% !important;
  border: none !important;
  background: #e5e7eb !important;
  padding: 8px 10px !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  height: 42px !important;
  color: #111827 !important; /* dark text for strong contrast on light scope bg */
}

/* Dark mode: keep scope text dark so it stays readable on the light gray bg */
[data-theme="dark"] .site-search-scope select {
  color: #111827 !important;
}

/* Extra-strong targetting so closed label is always readable */
header .site-search-scope select,
.site-search-bar .site-search-scope select,
select[name="scope"] {
  color: #111827 !important;
  background-color: #e5e7eb !important;
  text-shadow: none !important;
}

/* Override header-specific ID so 'All' label is readable in both themes */
#searchScope {
  color: #111827 !important;
  background-color: #e5e7eb !important;
  border: 0 !important;
}

[data-theme="dark"] #searchScope {
  color: #111827 !important;
  background-color: #e5e7eb !important;
}

/* Improve dropdown option visibility where browsers allow styling */
.site-search-scope select option {
  color: #111827 !important;
  background: #ffffff !important;
}

[data-theme="dark"] .site-search-scope select option {
  color: #111827 !important;
  background: #e5e7eb !important;
}
.site-search-input {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
}
.site-search-input input[type="search"] {
  width: 100% !important;
  border: none !important;
  padding: 8px 12px !important;
  font-size: 15px !important;
  outline: none !important;
  background: #ffffff !important;
  height: 42px !important;
}
.site-search-button {
  flex: 0 0 52px !important;
  border: none !important;
  background: #facc15 !important; /* yellow background so icon is clearly visible */
  color: #111827 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 18px !important;
  height: 42px !important;
}

.site-search-button img.site-search-icon {
  width: 22px !important;
  height: 22px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* Footer global overrides: compact lists and inline icon-text alignment */
footer ul.space-y-2 li { margin: 0.05rem 0 !important; }
footer ul.space-y-2 > * + * { margin-top: 0.05rem !important; }
footer ul.space-y-2 a { line-height: 1.28 !important; display: inline-block !important; }

footer .space-y-3 > div {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 0.3rem !important;
  margin-bottom: 0.3rem !important;
}
footer .space-y-3 > * + * { margin-top: 0.3rem !important; }
footer .space-y-3 > div > span.text-primary {
  flex: 0 0 0.9rem !important;
  width: 0.9rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 0.35rem !important;
  margin-top: 0.1rem !important;
}
footer .space-y-3 > div > div,
footer .space-y-3 > div > a,
footer .space-y-3 > div > span:not(.text-primary) {
  margin: 0 !important;
  line-height: 1.45 !important;
}

/* FINAL override: ensure text is to the right of icons for all rows */
footer .space-y-3 > .contact-item { display: grid !important; grid-template-columns: 1.2rem 1fr !important; align-items: start !important; column-gap: 0.4rem !important; }
footer .space-y-3 > .contact-item > .contact-icon { width: 1.2rem !important; height: 1.2rem !important; display: flex !important; align-items: flex-start !important; justify-content: center !important; margin: 0 !important; }
footer .space-y-3 > .contact-item > div,
footer .space-y-3 > .contact-item > a,
footer .space-y-3 > .contact-item > span:not(.contact-icon) { margin: 0 !important; line-height: 1.45 !important; }

@media (max-width: 1023px) {
  /* Bottom nav: reserve space so content isn't covered */
  body { padding-bottom: env(safe-area-inset-bottom, 0) !important; }
  .mobile-search-wrapper { margin-top: 0 !important; }
  main { padding-top: calc(var(--header-height, 64px) + env(safe-area-inset-top, 0) + 4px) !important; }
  /* FINAL: remove header-offset on mobile since header is sticky (not overlay) */
  main { padding-top: 0 !important; }
  section.section-padding { padding-top: 18px !important; padding-bottom: 28px !important; }
  /* First section below header/search on ALL pages: very small top padding */
  main > section:first-child,
  section:first-of-type {
    padding-top: 6px !important;
    margin-top: 0 !important;
  }

  /* Hero sections (home hero, min-h-screen, etc.) start close to search bar */
  section.hero-gradient,
  section.hero-gradient.min-h-screen,
  section.min-h-screen,
  section.min-h-screen.pt-32,
  #portfolioHero {
    padding-top: 6px !important;
    margin-top: 0 !important;
  }

  /* On mobile, bring ONE STOP FOR hero even closer to the search bar */
  .hero-with-search .container-custom {
    padding-top: 20px !important;
  }

  /* Pull up first hero sections slightly to cancel any residual spacing */
  section.hero-gradient.hero-with-search { margin-top: -10px !important; }
  section.min-h-screen.pt-32 { margin-top: -10px !important; }
  #portfolioHero { margin-top: -10px !important; }
  h1 { line-height: 1.2 !important; }
  p { line-height: 1.6 !important; }
  *, *::before, *::after { max-width: none !important; }
  html, body { max-width: 100% !important; overflow-x: hidden !important; }
  img, video, canvas, svg { max-width: 100% !important; height: auto !important; display: block !important; }

  header { position: sticky !important; top: 0 !important; z-index: 999 !important; width: 100% !important; }
  header .header-container { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 16px !important; gap: 12px !important; width: 100% !important; }
  .logo-section { display: flex !important; align-items: center !important; gap: 10px !important; flex: 1 1 auto !important; max-width: none !important; min-width: 0 !important; }
  .logo-section a { display: flex !important; align-items: center !important; gap: 10px !important; }
  .logo-section *, .logo-section a { pointer-events: auto !important; }
  .logo-section img { width: 38px !important; height: 38px !important; }
  .company-name { font-size: 15px !important; font-weight: 700 !important; white-space: normal !important; line-height: 1.2 !important; max-width: calc(100vw - 112px) !important; overflow: visible !important; text-overflow: initial !important; display: inline-block !important; }
  .logo-section .company-name { color: #1a1a1a !important; }
  [data-theme="dark"] .logo-section .company-name { color: #f9fafb !important; }
  footer .footer-company-name #footerBrandMix { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: inherit !important; color: #1a1a1a !important; }
  [data-theme="dark"] footer .footer-company-name #footerBrandMix { color: #f9fafb !important; }
  .company-tagline { display: none !important; }

  .desktop-nav { display: none !important; }
  .header-actions { display: none !important; }
  .mobile-menu-btn { display: flex !important; visibility: visible !important; opacity: 1 !important; position: relative !important; z-index: 1000 !important; }
  #mobileMenu { display: none !important; position: fixed !important; top: var(--header-height, 64px) !important; left: 0 !important; right: 0 !important; bottom: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; background: #ffffff !important; }
  #mobileMenu.active { display: block !important; }
  [data-theme="dark"] #mobileMenu { background: #0f172a !important; }
  #mobileMenu .py-4 { padding: 14px 0 !important; }
  #mobileMenu a { display: block !important; padding: 14px 18px !important; font-size: 16px !important; border-bottom: 1px solid rgba(0,0,0,0.06) !important; color: #111827 !important; text-decoration: none !important; opacity: 1 !important; pointer-events: auto !important; }
  [data-theme="dark"] #mobileMenu a { color: #e5e7eb !important; border-bottom-color: rgba(255,255,255,0.08) !important; }
  #mobileMenu a:hover { background: rgba(0,0,0,0.03) !important; }
  [data-theme="dark"] #mobileMenu a:hover { background: rgba(255,255,255,0.06) !important; }
  #mobileMenu .mobile-services-menu { display: none; }
  #mobileMenu .mobile-services-menu.active { display: block; }
  #mobileMenu .btn-primary { background: linear-gradient(135deg, #b45309 0%, #facc15 100%) !important; color: #111827 !important; border: none !important; border-radius: 10px !important; font-weight: 600 !important; }
  #mobileMenu .btn-outline { background: transparent !important; color: var(--primary) !important; border: 2px solid var(--primary) !important; border-radius: 10px !important; font-weight: 600 !important; }
  [data-theme="dark"] #mobileMenu .btn-outline { color: #a5b4fc !important; border-color: #a5b4fc !important; }
  #mobileMenu .px-4.pt-4.pb-2 { padding: 16px !important; }
  body.menu-open .fixed.bottom-6.right-6 { display: none !important; }

  .container, .container-custom { padding-left: 16px !important; padding-right: 16px !important; max-width: 100% !important; }
  .grid { display: grid !important; gap: 16px !important; }
  /* Amazon/Flipkart style: enforce 2-up product/portfolio cards */
  #productsGrid,
  #categoriesGrid,
  #portfolio-grid,
  .products-grid,
  .portfolio-grid,
  .cards-auto-2,
  .grid.cards-auto-2 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  /* Clients grid: always 3 columns on phones/tablets for better visibility */
  #clientsGrid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  /* Clients grid: tighter gaps so tiles get more width */
  #clientsGrid { gap: 10px !important; }
  /* Clients tiles: compact padding and taller tiles for bigger logos */
  #clientsGrid .bg-white { padding: 8px !important; }
  #clientsGrid .h-24 { height: auto !important; min-height: clamp(84px, 22vw, 112px) !important; }
  #clientsGrid .flex.items-center.justify-center { padding: 2px !important; }
  #clientsGrid img { width: auto !important; max-width: 100% !important; height: clamp(64px, 16vw, 96px) !important; max-height: none !important; object-fit: contain !important; }
  /* Footer main grid: force single column on phones */
  footer .grid[data-desktop-cols="4"] { display: grid !important; grid-template-columns: 1fr !important; }
  /* 2-up cards on phones: apply to product/portfolio grids only (do not affect clients) */
  @media (max-width: 1024px) {
    #productsGrid,
    .products-grid,
    .portfolio-grid,
    .cards-grid,
    .grid.cards-auto-2 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  }

  /* Keep hero section single-column for clean composition */
  .hero-gradient .grid { grid-template-columns: 1fr !important; }
  #scrollServicesCard { max-width: 100% !important; }
  .hero-gradient .container-custom { padding-left: 16px !important; padding-right: 16px !important; }
  #scrollServicesCard { height: auto !important; overflow: visible !important; }
  #scrollServicesCard .bg-white { max-width: 380px !important; margin: 0 auto !important; }
  .float-animation { display: none !important; }

  button, .btn { width: auto !important; min-height: 44px !important; }
  .btn.w-full, .btn.block, button.w-full, .w-full.btn { width: 100% !important; }

  input, select, textarea { width: 100% !important; font-size: 16px !important; }

  /* Enforce horizontal text flow and allow safe wrapping */
  h1, h2, h3, h4, h5, h6, p, li, a, span, strong, em, small, label {
    writing-mode: horizontal-tb !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
  /* Headings: never clip or ellipsize */
  h1, h2, h3, h4, h5, h6 { overflow: visible !important; text-overflow: clip !important; }
  /* Paragraphs: allow wrapping with hyphenation where needed */
  p { hyphens: auto !important; -webkit-hyphens: auto !important; -ms-hyphens: auto !important; overflow-wrap: break-word !important; word-break: normal !important; }

  /* Offset sections for sticky header height (tighter to header) */
  section { scroll-margin-top: calc(var(--header-height, 72px) + 2px) !important; }
  section.min-h-screen,
  section.pt-32,
  .pt-32 { padding-top: calc(var(--header-height, 72px) + 0px) !important; }

  /* Service cards: larger round icon on phones, no clipping */
  .card .w-16.h-16 { width: 120px !important; height: 120px !important; padding: 4px !important; overflow: visible !important; line-height: 1 !important; }
  .card .w-16.h-16 span,
  .card .w-16.h-16 img,
  .card .w-16.h-16 svg { font-size: 48px !important; max-width: 100% !important; max-height: 100% !important; display: inline-block !important; object-fit: contain !important; line-height: 1 !important; }

  /* Hero section scroll services card icon: avoid clipping */
  #scrollServicesCard .w-24.h-24 { width: 128px !important; height: 128px !important; padding: 8px !important; overflow: visible !important; line-height: 1 !important; }
  #scrollServicesCard .w-24.h-24 span,
  #scrollServicesCard .w-24.h-24 img,
  #scrollServicesCard .w-24.h-24 svg { font-size: 56px !important; max-width: 100% !important; max-height: 100% !important; display: inline-block !important; object-fit: contain !important; line-height: 1 !important; }

  /* Footer headings should wrap by words only (no mid-word breaks) */
  footer h3 { white-space: normal !important; word-break: keep-all !important; overflow-wrap: normal !important; hyphens: manual !important; letter-spacing: normal !important; }

  /* Remove inner scrollbars in small logo tiles/cards */
  .grid .bg-white, .grid .rounded-lg, .grid .h-24, .grid .h-24 > * { overflow: hidden !important; scrollbar-width: none !important; }
  .grid .bg-white::-webkit-scrollbar, .grid .rounded-lg::-webkit-scrollbar, .grid .h-24::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }

  .grid .h-24 img { height: clamp(56px, 16vw, 92px) !important; max-height: none !important; width: auto !important; object-fit: contain !important; }

  /* Footer lists: single column on phones for readability */
  footer ul.space-y-2 { display: block !important; }
  footer ul.space-y-2 li { margin: 6px 0 !important; }
  footer ul.space-y-2 a { display: block !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; hyphens: auto !important; }
  footer .section-padding { padding-top: 28px !important; padding-bottom: 72px !important; }
  footer { padding-bottom: calc(72px + env(safe-area-inset-bottom,0)) !important; }
  footer .grid[data-desktop-cols="4"] { display: block !important; }
  footer .grid[data-desktop-cols="4"] > * { width: 100% !important; margin-bottom: 18px !important; }
  footer h3, footer p, footer a, footer li, footer span, footer div { overflow: visible !important; white-space: normal !important; text-overflow: clip !important; writing-mode: horizontal-tb !important; }
  footer h3 { white-space: nowrap !important; }

  /* Footer: company name single-line beside logo (no ellipsis) */
  footer .footer-company-name { white-space: nowrap !important; overflow: visible !important; text-overflow: initial !important; display: block !important; max-width: none !important; font-size: 18px !important; }
  footer .flex.items-center.mb-6 > div { display: flex !important; flex-direction: column !important; justify-content: center !important; }

  /* Footer: tighten list spacing */
  footer ul.space-y-2 li { margin: 0.05rem 0 !important; }
  footer ul.space-y-2 > * + * { margin-top: 0.05rem !important; }
  footer ul.space-y-2 a { line-height: 1.25 !important; display: inline-block !important; }

  /* Footer: contact items tighter */
  footer .space-y-3 > div { margin-bottom: 0.35rem !important; gap: 0.35rem !important; }
  footer .space-y-3 > * + * { margin-top: 0.35rem !important; }

  /* Footer: place Contact Info in right column */
  footer .grid[data-desktop-cols="4"] > .footer-contact {
    grid-column: 2 / -1 !important;
    justify-self: end !important;
    align-self: start !important;
    width: max-content !important;
    margin-left: auto !important;
    text-align: left !important;
  }

  /* Footer: bottom row horizontal */
  footer .border-t { display: block !important; width: 100% !important; padding-top: 1.25rem !important; margin-top: 1.5rem !important; }
  footer .border-t > .flex { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0.75rem !important; flex-wrap: nowrap !important; width: 100% !important; text-align: center !important; }
  footer .bottom-links { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 1.25rem !important; }
  /* Constrain company description to avoid merging with other columns */
  footer .footer-desc { max-width: 440px !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; }
}

@media (min-width: 1024px) {
  .mobile-menu-btn, #mobileMenu { display: none !important; }
  /* Clients grid: always 4 columns on desktop */
  #clientsGrid { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
  /* Remove inner scrollbars in logo tiles */
  .grid .h-24, .grid .h-24 > * { overflow: hidden !important; scrollbar-width: none !important; }
  .grid .h-24::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
  .grid .h-24 img { max-height: 5rem !important; object-fit: contain !important; }

  /* Footer: enforce 2 columns (company left fixed, contact right) and prevent clipping */
  footer .grid[data-desktop-cols="4"] { display: grid !important; grid-template-columns: 480px 1fr !important; gap: 3rem !important; grid-auto-flow: row !important; align-items: start !important; justify-items: stretch !important; }
  footer h3, footer p, footer a, footer li, footer span, footer div { overflow: visible !important; white-space: normal !important; text-overflow: clip !important; writing-mode: horizontal-tb !important; }
  footer h3 { white-space: nowrap !important; }

  /* Footer: company name single-line beside logo (no ellipsis) */
  footer .footer-company-name { white-space: nowrap !important; overflow: visible !important; text-overflow: initial !important; display: block !important; max-width: none !important; font-size: 18px !important; }
  footer .flex.items-center.mb-6 > div { display: flex !important; flex-direction: column !important; justify-content: center !important; }

  /* Footer: tighten list spacing */
  footer ul.space-y-2 li { margin: 0.05rem 0 !important; }
  footer ul.space-y-2 > * + * { margin-top: 0.05rem !important; }
  footer ul.space-y-2 a { line-height: 1.25 !important; display: inline-block !important; }

  /* Footer: contact items tighter */
  footer .space-y-3 > div { margin-bottom: 0.35rem !important; gap: 0.35rem !important; }
  footer .space-y-3 > * + * { margin-top: 0.35rem !important; }

  /* Footer: place Contact Info in right column */
  footer .grid[data-desktop-cols="4"] > .footer-contact {
    grid-column: 2 / -1 !important;
    justify-self: end !important;
    align-self: start !important;
    width: max-content !important;
    margin-left: auto !important;
    text-align: left !important;
  }

  /* Footer: bottom row horizontal */
  footer .border-t { display: block !important; width: 100% !important; padding-top: 1.25rem !important; margin-top: 1.5rem !important; }
  footer .border-t > .flex { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 1rem !important; flex-wrap: nowrap !important; width: 100% !important; }
  /* Constrain company description to avoid merging with other columns */
  footer .footer-desc { max-width: 440px !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; }
}

@media (max-width: 768px) {
  /* Flipkart-like card visuals (mobile) */
  .card.product-item,
  .product-item.card,
  .portfolio-item .card,
  .service-card,
  .cards-auto-2 .card { padding: 12px !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important; }

  /* Larger image area like e-commerce tiles */
  .product-item .bg-gray-100,
  .cards-auto-2 .bg-gray-100,
  #categoriesGrid .rounded-lg,
  .portfolio-item .card > div:first-child { height: 140px !important; min-height: 140px !important; max-height: 140px !important; padding: 10px !important; }
  .product-item .bg-gray-100 img,
  .product-item .bg-gray-100 span,
  #categoriesGrid .rounded-lg img,
  #categoriesGrid .rounded-lg video,
  .portfolio-item .card > div:first-child img { object-fit: contain !important; max-height: 100% !important; }

  /* Remove any line clamp/truncation on mobile (titles/descriptions) */
  .product-item h3,
  .cards-auto-2 h3,
  .portfolio-item .card h3 { display: block !important; -webkit-line-clamp: unset !important; line-clamp: unset !important; -webkit-box-orient: initial !important; overflow: visible !important; min-height: auto !important; white-space: normal !important; text-overflow: clip !important; word-break: break-word !important; overflow-wrap: anywhere !important; }
  .product-item p.text-gray-600,
  .portfolio-item .card p.text-gray-600 { display: block !important; -webkit-line-clamp: unset !important; line-clamp: unset !important; -webkit-box-orient: initial !important; overflow: visible !important; min-height: auto !important; white-space: normal !important; text-overflow: clip !important; word-break: break-word !important; overflow-wrap: anywhere !important; }

  /* Force visible overflow on cards that carry overflow-hidden */
  .card.overflow-hidden { overflow: visible !important; }
  .portfolio-item .card { overflow: visible !important; }

  /* Price emphasis */
  .product-item .text-primary,
  .cards-auto-2 .text-primary { font-size: 16px !important; font-weight: 700 !important; }

  /* Service cards: larger round video/icon on phones */
  .card .w-16.h-16 { width: 160px !important; height: 160px !important; padding: 0 !important; }
  .card .w-16.h-16 span,
  .card .w-16.h-16 img,
  .card .w-16.h-16 video,
  .card .w-16.h-16 svg { font-size: 48px !important; max-width: 100% !important; max-height: 100% !important; display: inline-block !important; object-fit: cover !important; line-height: 1 !important; }

  /* Hero scroll services card icon/video slightly larger on phones */
  #scrollServicesCard .w-24.h-24 { width: 112px !important; height: 112px !important; padding: 10px !important; }
  #scrollServicesCard .w-24.h-24 span,
  #scrollServicesCard .w-24.h-24 img,
  #scrollServicesCard .w-24.h-24 video,
  #scrollServicesCard .w-24.h-24 svg { font-size: 44px !important; max-width: 100% !important; max-height: 100% !important; display: inline-block !important; object-fit: contain !important; line-height: 1 !important; }

  /* Action buttons row: two side-by-side, larger tap target */
  .product-item .flex:last-child,
  .cards-auto-2 .flex:last-child { gap: 8px !important; }
  .product-item .btn,
  .cards-auto-2 .btn,
  .product-item a.btn-primary,
  .product-item a.btn-outline { min-height: 44px !important; font-weight: 600 !important; }

  /* Filter chips: horizontal scroll (no wrap) with comfortable spacing */
  .flex.flex-wrap.justify-center {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    justify-content: flex-start !important;
    text-align: left !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 16px !important;
    scroll-padding-right: 16px !important;
    scrollbar-gutter: stable both-edges !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    clip-path: none !important;
    border-radius: 12px !important;
    gap: 10px !important;
    padding-bottom: 4px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
    position: relative !important;
    z-index: 5 !important;
    clear: both !important;
    height: auto !important;
    min-height: 44px !important;
  }
  .flex.flex-wrap.justify-center::-webkit-scrollbar { display: none !important; }

  /* Guard spacers so first/last chip are fully visible */
  .flex.flex-wrap.justify-center::before,
  .flex.flex-wrap.justify-center::after {
    content: "";
    flex: 0 0 16px !important;
    display: block !important;
  }

  /* Ensure chip container sections participate in normal flow (no overlay) */
  .text-center.mb-8, .text-center.mb-12 {
    position: static !important;
    overflow: visible !important;
    height: auto !important;
    margin-bottom: 10px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* Chip buttons: inline-flex, no transforms, no absolute positioning */
  .portfolio-filter {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    transform: none !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 8px 14px !important;
    max-width: none !important;
    text-overflow: clip !important;
    overflow: visible !important;
    min-width: max-content !important;
  }

  /* Make all ancestor containers allow full chip visibility */
  .container-custom,
  .container-custom *,
  .text-center,
  .text-center * {
    overflow: visible !important;
  }

  /* Ensure the grids start below the chips with clear separation */
  #categoriesGrid, #portfolio-grid {
    clear: both !important;
    margin-top: 12px !important;
    position: relative !important;
    z-index: 0 !important;
  }

  /* Media containers: clip videos/images strictly to their boxes */
  #categoriesGrid .rounded-lg,
  .portfolio-item .card > div:first-child {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    z-index: 0 !important;
  }
  #categoriesGrid .rounded-lg video,
  .portfolio-item .card > div:first-child video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }
  /* Ensure text/content stays above media */
  #categoriesGrid .card h3,
  #categoriesGrid .card p,
  .portfolio-item .card h3,
  .portfolio-item .card p {
    position: relative !important;
    z-index: 1 !important;
  }

  /* Disable hover scale on mobile to avoid media bleeding */
  .hover\:scale-105 { transform: none !important; }

  /* Ultra-aggressive: never truncate text on mobile; always wrap safely */
  h1, h2, h3, h4, h5, h6,
  .card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
  .card p, .portfolio-card h3, .portfolio-card p,
  #categoriesGrid h3, #categoriesGrid p,
  #portfolio-grid h3, #portfolio-grid p,
  .line-clamp-1, .line-clamp-2, .line-clamp-3, .truncate,
  [class*="line-clamp"], .text-ellipsis {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-clamp: unset !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
    display: block !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Text containers inside cards should not clip */
  .card .overflow-hidden,
  .portfolio-card .overflow-hidden,
  #categoriesGrid .overflow-hidden,
  #portfolio-grid .overflow-hidden {
    overflow: visible !important;
  }

  /* Ensure flex items can shrink so text can wrap instead of clipping */
  .card, .card .flex, .card .flex > *,
  #categoriesGrid > a.card, #portfolio-grid > a {
    min-width: 0 !important;
  }

  /* Buttons/chips text should be fully visible within scroller */
  .portfolio-filter {
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    scroll-snap-align: start !important;
    flex: 0 0 auto !important;
  }
}

/* === FINAL OVERRIDE: Clients grid tiles in dark mode === */
[data-theme="dark"] #clientsGrid > div,
[data-theme="dark"] #clientsGrid .bg-white,
[data-theme="dark"] #clientsGrid .rounded-lg {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

[data-theme="dark"] #clientsGrid > div::before,
[data-theme="dark"] #clientsGrid > div::after {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* =============================================
   FINAL GLOBAL BUTTON COLOR OVERRIDE (ALL PAGES)
   This file is loaded last, so these rules win
   over any earlier teal/legacy button colors.
   ============================================= */

.btn-primary,
.card .btn-primary,
.product-item .btn-primary,
button.btn-primary,
button[class*="btn-primary"],
a.btn-primary,
a[class*="btn-primary"],
.btn-primary:hover,
.card .btn-primary:hover,
.product-item .btn-primary:hover,
button.btn-primary:hover,
button[class*="btn-primary"]:hover,
a.btn-primary:hover,
a[class*="btn-primary"]:hover,
.btn-primary:active,
.card .btn-primary:active,
.product-item .btn-primary:active,
button.btn-primary:active,
button[class*="btn-primary"]:active,
a.btn-primary:active,
a[class*="btn-primary"]:active {
  background: linear-gradient(135deg, #b45309 0%, #facc15 100%) !important; /* brown → yellow */
  color: #111827 !important; /* dark text for contrast */
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(146, 64, 14, 0.35) !important;
}

/* Amazon-style Get Free Quote buttons: any link to get-quote.php + main submit button */
a[href*="get-quote.php"],
button#quoteSubmitBtn.btn-primary {
  background: linear-gradient(135deg, #b45309 0%, #facc15 100%) !important;
  color: #111827 !important;
  border-color: transparent !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(146, 64, 14, 0.35) !important;
}

 a[href*="get-quote.php"]:hover,
button#quoteSubmitBtn.btn-primary:hover {
  background: linear-gradient(135deg, #92400e 0%, #fbbf24 100%) !important;
  box-shadow: 0 6px 16px rgba(146, 64, 14, 0.45) !important;
}

.btn-primary:hover,
.card .btn-primary:hover,
.product-item .btn-primary:hover,
button.btn-primary:hover,
button.btn-primary:active,
a.btn-primary:hover,
a.btn-primary:active {
  box-shadow: 0 6px 16px rgba(146, 64, 14, 0.45) !important;
}

.btn-outline,
.card .btn-outline,
.product-item .btn-outline,
button.btn-outline,
a.btn-outline,
.btn-outline:active,
.card .btn-outline:active,
.product-item .btn-outline:active,
button.btn-outline:active,
a.btn-outline:active {
  background: transparent !important;
  color: #2575FC !important;
  border: 2px solid #2575FC !important;
}

.btn-outline:hover,
.card .btn-outline:hover,
.product-item .btn-outline:hover,
button.btn-outline:hover,
a.btn-outline:hover {
  background: linear-gradient(135deg, #6A11CB, #2575FC) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* Dark mode: ensure Buy Now style buttons in product cards use DARK text 
   on the orange/yellow gradient (do not affect header or other CTAs). */
[data-theme="dark"] .card a.btn-primary.w-full,
[data-theme="dark"] .card .btn-primary.w-full {
  color: #111827 !important;
}

/* Dark mode: yellow Buy Now button on customization page */
[data-theme="dark"] .btn-primary-custom {
  color: #111827 !important;
}

/* Dark mode: all Get Quote CTAs (any link to get-quote) should use dark text
   on their yellow/orange backgrounds, just like Buy Now. */
[data-theme="dark"] a[href*="get-quote"] {
  color: #111827 !important;
}

/* HEADER: Make Call, Account, and My Orders buttons show the same
   brown→yellow gradient with dark text on hover/click as Get Quote.
   Do NOT change Get Quote itself (btn-primary-header is left as-is). */
.header-actions .btn-outline-header:hover,
.header-actions .account-btn:hover,
.header-actions .track-order-btn:hover {
  background: linear-gradient(135deg, #b45309 0%, #facc15 100%) !important;
  color: #111827 !important;
  border-color: transparent !important;
}