.hero-bg-image {
    background: url('../img/soft-bg.jpg') no-repeat center center;
    background-size: cover;
    height: 50vh; /* or 400px for a shorter hero */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    color: white;
  }
  
  .hero-overlay {
    background: rgba(0, 0, 0, 0.4); /* optional: dark overlay for readability */
    padding: 40px;
    border-radius: 10px;
  }
  
  .hero-bg-image h2 {
    font-weight: 700;
    margin: 0;
  }