.hero_area {
    position: relative;
    height: 100vh;
    background-color: #b5caee;
    background-image: url(../images/hero-bg.png);
    background-size: cover;
    background-position: center center;
  }
  
  .hero_area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(94, 60, 99, 0.85); /* Semi-transparent overlay */
    z-index: 1; /* Ensure the overlay is above the image */
  }
  
  .hero_area > * {
    position: relative;
    z-index: 2; /* Content on top of the overlay */
  }