.hero-section {
  position: relative;
  width: 100%;
  height: 50vh;
  overflow: hidden;
 
}

.video-background {
  position: absolute;
  background-color:#003057;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /*z-index: -1;*/
}
.video-background video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-background iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.slanted-overlay {
 overflow: visible;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
   left: 10%;
    opacity: 0.75;
    background: #003057;
    z-index: 2
       -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: skew(-25deg,0);
    -ms-transform: skew(-25deg,0);
    transform: skew(-25deg,0)
}

.slanted-overlay::before{
  z-index: 2;
   content: " ";
    background: #003057;
    opacity: .75;
    width: 110%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: -10%;
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
}

.hero-content h1 {
  font-size: 3rem;
  margin: 0;
}

.bg-video {
  position: fixed;
  left: 0;
  top: 0;
  background-size: cover;
  background: no-repeat center;

  user-select: none;
  pointer-events: none;

  /*custom styles, for example grayscale appearance*/
  filter: grayscale(0.8);

  /*additional tweaks for positioning, read more in the link above*/
  height: 110%;
  width: 177.77777778vh; /* 100 * 16 / 9 */
  min-width: 110%;
  min-height: 56.25vw; /* 100 * 9 / 16 */
  overflow:hidden;
}