/* Add this to the top of your CSS to prevent horizontal overflow */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  margin: 0;
  padding: 0;
  padding-top: 80px;
  overflow-x: hidden; /* prevents horizontal scrolling */
  width: 100%;
}

#bg {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-image: url('../Images/branding-logo.png');
  background-size: 100px 100px;
  height: 100vh;
  width: 100vw;
  animation: scroll 90s infinite linear;
  opacity: 0.05;
  background-repeat: repeat;
  z-index: 0; /* stays at the very back */
  pointer-events: none; /* ensures it never blocks clicks */
}

@keyframes scroll {
  100% {
    background-position: -3000px 0px;
  }
}

.hero-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* keeps text + image aligned at the top */
  gap: 2rem; /* spacing between text and image */
}

.hero-text {
  flex: 1; /* takes up more space (left side) */
}

.hero-section p {
  font-size: 1.5rem;
  line-height: 1.4;
  margin-bottom: 0.25rem;
  padding-left: 3vw;
  color: #fff;
}

.hero-wrapper {
  position: relative;
  width: 100%;
  max-width: 100vw; /* prevent overflow */
}

.hero-image {
  position: absolute;
  top: 7%;      /* adjust vertical position */
  right: 7%;     /* pushes it to the far right */
}

.hero-image img {
  width: 30vw;
  height: auto;
  max-width: 100%; /* prevent image overflow */
}

.hero-header h1 {
  font-family: product-sans, sans-serif;
  font-weight: bold;
  font-size: 5rem;
  margin-bottom: 0.5rem;
  padding-left: 3vw;
  padding-top: 3vw;
  color: #f89899;
  word-wrap: break-word; /* prevent text overflow */
}

.hero-section {
  width: 55vw;
  max-width: calc(100vw - 2rem); /* prevent overflow with padding */
  height: 55vh;
  min-height: 400px;
  align-items: left;
  border-radius: 2rem;
  color: #fff;
  font-family: product-sans, sans-serif;
  z-index: 1;         /* ensures hero sits above background */
  box-sizing: border-box; /* include padding in width calculations */
}

.hero-content {
  display: flex;
  flex-direction: column; /* stack children vertically */
  align-items: flex-start; /* or center, depending on design */
  text-align: left;
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
  .hero-section {
    width: 90vw;
    max-width: calc(100vw - 2rem);
    margin: 0 auto;        /* center hero-section */
    height: auto;
    padding: 2rem;
    border-radius: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;   /* center all children */
    text-align: center;
  }
  
  .hero-content {
    flex-direction: column;  /* stack text and image vertically */
    align-items: center;     /* center content */
    text-align: center;      /* center text */
    gap: 1.5rem;             /* spacing between sections */
    width: 100%;
  }
  
  .hero-text {
    width: 100%;
  }
  
  .hero-text p {
    font-size: 1.2rem;       /* smaller font for readability */
    padding-left: 0;         /* remove horizontal padding */
    padding-right: 0;        /* ensure no right padding */
  }
  
  .hero-image {
    position: relative;    /* remove absolute positioning */
    top: 0;
    right: 0;
    width: 60%;
    max-width: 300px;      /* prevent image from being too large */
    margin: 0 auto;        /* center the image */
  }
  
  .hero-image img {
    width: 100%;
    height: auto;
    margin-top: 3rem;      /* spacing above image */
  }

  .hero-header {
    text-align: center;     /* center the h1 */
    width: 100%;            /* take full width */
    margin: 0 auto;         /* ensure centered in the section */
    padding-left: 0;        /* remove leftover padding */
    padding-right: 0;       /* ensure no right padding */
    padding-top: 1rem;      /* optional spacing from top */
  }
  
  .hero-header h1 {
    font-size: 3rem;        /* scale down header for mobile */
    word-wrap: break-word;  /* prevent text overflow */
    hyphens: auto;          /* allow hyphenation if needed */
  }
}

/* Fix background for mobile */
@media (max-width: 768px) {
  #bg {
    background-size: 50px 50px; /* shrink repeated background logos */
  }
}

@media (max-width: 576px) {
  .hero-section {
    width: 95vw;
    max-width: calc(100vw - 1rem);
    padding: 1rem;
    min-height: auto;
  }
  
  .hero-text p {
    font-size: 1rem;
    line-height: 1.4;
  }
  
  .hero-header h1 {
    font-size: 2.2rem;
    padding: 0;
    margin: 0 0 0.5rem 0;
  }
  
  .hero-image {
    width: 80%;
    max-width: 250px;
  }
  
  #bg {
    background-size: 30px 30px; /* even smaller background for very small screens */
  }
}

/* Additional viewport fix */
@media (max-width: 480px) {
  .hero-header h1 {
    font-size: clamp(1.8rem, 8vw, 2.2rem); /* responsive font size */
  }
}