#featured {
    background-image: url(../../images/feature-bw.jpg);

}
#featured h3{
  color: white;
  margin-bottom: 0;
}
#featured h5{
  width: 390px;
  text-shadow: -1px 2px 4px rgba(220,220,220,0.62);
}
@media (max-width: 484px) {
   .banner{
      min-height: 56rem !important; /* Corrected */
    }
    .banner .carousel-caption{
      top: 18em !important;
      height: 35rem !important;
    }
    .featured .details h3 {
          margin-bottom: 1rem!important;
      }

   .details h5:before {
          right: 250px;
          width: 130%;
    }
    #featured h5{
      padding-right: 120px;
    }
    #featured {
      min-height: 275px !important;
      max-height: 290px;
    }
    #featured .bg-video{
      min-height: 10%!important;
      height: 100%!important;
    }
}
#featured {
    position: relative;
    width: 100%;
    height: 400px; /* adjust as needed */
    overflow: hidden;
}

/* Video fills the container */
#featured .bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 1;
}

/* Optional dark overlay for readability */
#featured::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2;
}

/* Text layer */
#featured .overlay {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 40px;
}

#featured h3,
#featured h5 {
    color: #fff;
}