/* Global layout fixes — prevents horizontal scroll / white gap on mobile */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  width: 100%;
}

body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

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

.navbar,
header,
footer,
section,
.container,
.who-container,
.work-container,
.faq-container,
.process-container,
.bento-layout,
.service-ecosystem,
.footer-top,
.footer-container,
.contact-content,
.map-location iframe {
  max-width: 100%;
}

.service-ecosystem,
.bento-box,
.ai-feature,
.hero-premium,
.faq-section,
.who-section {
  overflow-x: hidden;
}

.content-box {
  margin-left: 0;
  width: 100%;
  max-width: 100%;
}

@media (max-width: 768px) {
  header {
    padding: 15px 20px !important;
  }

  .navbar {
    padding: 12px 16px !important;
  }

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

  .section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .service-ecosystem {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  .bento-box {
    padding: 24px !important;
  }

  .ai-bg-glow {
    width: 280px !important;
    height: 280px !important;
    right: -30% !important;
  }

  .hero-bg {
    transform: none !important;
  }

  nav a {
    margin-left: 0 !important;
  }

  nav {
    width: 100%;
    left: 0;
    right: 0;
  }

  .faq-container,
  .work-container,
  .who-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .industrial-supplies,
  .services-grid-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .glow {
    width: 280px !important;
    height: 280px !important;
  }
}

.industrial-supplies {
  max-width: 100%;
}