/* Fix for white space issue on both mobile and desktop */

/* Reset viewport width and ensure no horizontal overflow */
html, body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* Make sure all containers respect the 100% width limit */
.container {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Fix for background elements */
section {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

/* Fix for hero section that might be causing overflow */
.bg-gradient-to-r {
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
}

/* Fix potential issues with fixed header */
#main-header {
  width: 100%;
  max-width: 100vw;
}

/* Fix any potential grid issues */
.grid {
  width: 100%;
  max-width: 100%;
}

/* Media queries for better control on different devices */
@media screen and (max-width: 1440px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media screen and (max-width: 768px) {
  html, body {
    overflow-x: clip; /* Modern alternative to hidden that prevents repainting */
  }
  
  /* Ensure no padding issues on mobile */
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}