.video-banner {
  position: relative;
  height: 100vh;
  max-height: 878px;
  overflow: hidden;
}

.video-banner:before {
    position: absolute;
    content: "";
    height: 227px;
    z-index: 9;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.00) 93.42%);
}


.video-banner__image,
.video-banner__video 
 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.module---video-banner .video__frame-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw;
  min-height: 100vh;
  min-width: 177.78vh;
  pointer-events: none;
}



.video-banner__image img
{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-banner .video__frame-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-banner__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
 .video-banner__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /*background: linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.00) 37.02%);*/
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.0) 37.02%);
   z-index: 1; 
  
}
.video-banner .video-banner__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 48px;
 z-index: 2; 
   
}
.video-banner__content .container {
  height: 100%;
}
.video-banner__title {
  color: var(--mono1);
  margin: 0;
  max-width: 100%;
  font-size: 60px;
  line-height: 1.1;
  font-weight: 400;
}
.video-banner .action-button {
  position: absolute;
  right: 48px;
  bottom: 48px;
  z-index: 3; 
   
}
.play-pause-text{
  font-family:var(--font-secondary-regular);
  font-size:12px
}
.video-banner  .action-button{
  padding:13px;
  display:flex;
  justify-content:center;
  align-items:center;
}
.video-banner .action-button:before {
  margin-top: -1px;
  font-size: 2.4rem;
  font-family: var(--font-secondary-regular);
  ;
}
.video-banner .action-button.icon-pause:before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 13px;
  background: currentColor;
  box-shadow: 7px 0 0 currentColor;
  /* second bar */
  margin-right: 7px;
  vertical-align: middle;
  flex-shrink: 0;
}
.video-banner .action-button.icon-play:before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent currentColor;
  vertical-align: middle;
  flex-shrink: 0;
}


@media (min-width: 768px) and (max-width: 1024px)  {

  .video-banner {
    height: 70vh;
    min-height: unset;
  }

  
  .video__frame-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 56.25vw;
    min-height: 100%;
    min-width: 177.78vh;
  }

  .video__frame-wrapper > div,
  .video__frame-wrapper > iframe,
  .video__frame-wrapper iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .video-banner__title {  
  font-size: 45px;
  }
}

@media (max-width: 767.98px) {

  .video-banner {
    height: auto;
    min-height: unset;
    display: flex;
    flex-direction: column;
  }
  
  .video-banner:before{
  	height: 147px;
  }



 .video-banner__video,
  .video-banner__image {
    position: relative !important;
    width: 100%;
    /*height: 56.25vw !important;*/  /* 16:9 based on screen width — matches iframe naturally */
    height: 100vw !important;
    padding-bottom: 0;
    flex-shrink: 0;
  }

  
  .video-banner .video__frame-wrapper > div,
  .video-banner .video__frame-wrapper > iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  
  .video-banner .video__frame-wrapper iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .video-banner .video__frame-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
    min-height: unset;
    min-width: unset;
  }


  .video-banner .video-banner__overlay {
    display: none;
  }

  .video-banner .video-banner__content {
    position: relative;
    bottom: unset;
    left: unset;
    right: unset;
    background-color: #004A33;
    padding: 24px 0;
/*     min-height: 150px; */
    z-index: 2;
  }

  .video-banner .video-banner__title {
    font-size: 32px;
  }

  .video-banner .action-button {
    position: absolute;
    right: 17px;
    bottom: 12px;
    top: unset;
    padding: 12px;
  }

  .video-banner .action-button .play-pause-text {
    display: none;
  }

  .video-banner .action-button.icon-play:before {
    margin-right: -2px;
  }

  .video-banner .action-button.icon-pause:before {
    margin-right: 6px;
  }
}