.hero {
  position: relative;
  display: flex;
  align-items: center;   
  justify-content: center;
  min-height: 80vh;     
  overflow: hidden;
  color: #fff;         
  text-align: center;    
  width: 100%;
}



.hero-bg-img,
.hero video.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;          
}

.hero-content {
  position: relative;
  z-index: 1;          
  padding: 2rem;

}

.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  isolation: isolate;
  z-index: 1;
}

.hero-bg-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw; 
  min-width: 177.78vh;
  min-height: 100vh;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  z-index: 10;
}

.hero-bg-video .video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}


.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:#fff;
  z-index: 0;
  width: 100%;
  height:100% ;
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero-content h1 ,
.hero-content p{
  text-shadow: 0 0 4px black;
}