.hero-wrap .carousel-item{
    height: clamp(420px, 68vh, 820px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .hero-overlay{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero-overlay::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.2));
  }
  .hero-overlay .container{
    position: relative;
    z-index: 1;
  }
  @media (max-width: 576px){
    .hero-overlay h1{ font-size: 1.75rem; }
    .hero-overlay .lead{ font-size: 1rem; }
  }