.hero-bg {
  position: relative; /* Needed for the ::before to position correctly */
  background: url("../images/hero.jpg") center center;
  background-size: cover;
  z-index: 1;
}

.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0; /* Covers the entire element (top, right, bottom, left) */
  background-color: rgba(0, 0, 0, 0.65); /* 50% black overlay */
  pointer-events: none; /* Optional: allows clicks to pass through the overlay */
}

.hero-bg .text {
  position: relative; /* Needed for the ::before to position correctly */
  z-index: 3;
}