#hero {
  position: relative; /* Ensure positioning for the pseudo-element */
  min-height: 70dvh;
  min-width: 100dvw;
  border-radius: 0;
  bottom: 100px;
  overflow: hidden; /* Prevent content from overflowing */
}

#hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(to top right, rgba(0, 0, 0, 0.3), rgba(75, 156, 255, 0.3)), /* Gradient */
    url('./background-image.webp'); /* Background image */
  background-size: cover; /* or "contain" depending on your needs */
  background-position: 50% 30%; /* Center the image */
  background-repeat: no-repeat;
  transform: scaleX(-1); /* Flip the image horizontally */
  z-index: -1; /* Ensure it stays behind other content */
}

.hero-text{
  margin-top: 4rem;
  width: clamp(70%, 80%, 90%);
}