#index #content-wrapper {
  margin-top: 0px;
}

.vh-hero {
  position: relative;
  /*width: 100%;*/
  margin-left: 20px;
  margin-right: 5px;
  overflow: hidden;
  margin-bottom: 30px;
  height: 90vh;
  background: #f4f2ef; /* stripes color (desktop) */
}

.vh-video,
.vh-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;          
  object-position: center center;
  background: #f4f2ef;         
}

@media (min-width: 768px) {
  .vh-hero {
    height: calc(100vh - 172px);     
    height: calc(100dvh - 172px);
  }

  .vh-video,
  .vh-poster {
    object-fit: contain;              
    object-position: center center;
  }
}



/* Media wrapper */
.vh-media {
  position: absolute;
  inset: 0;
}

/* Poster shown initially */
.vh-poster {
  background-image: var(--vh-poster-url);
  background-size: contain;      /* desktop default */
  background-position: center;
  background-repeat: no-repeat;
  background-color: #f4f2ef;

  z-index: 2;
  opacity: 1;
  transition: opacity 250ms ease;
}


.vh-video {
  z-index: 1;
  display: block;
  background: #f4f2ef;
}


.vh-hero.vh-video-ready .vh-poster {
  opacity: 0;
  pointer-events: none;
}


.vh-grad {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.vh-grad-top {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.35),
    rgba(0, 0, 0, 0.25),
    transparent
  );
}

.vh-grad-left {
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.60),
    rgba(0, 0, 0, 0.15),
    transparent
  );
}

.vh-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;
  padding: 24px 16px;

  pointer-events: auto;
}

.vh-content {
  max-width: 920px;
  width: 100%;
}

.vh-title {
  margin: 0 0 10px;
  font-size: clamp(22px, 3.2vw, 44px);
  line-height: 1.1;
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

.vh-subtitle {
  margin: 0 0 18px;
  font-size: clamp(14px, 1.6vw, 18px);
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

.vh-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 18px;
  border-radius: 10px;
  text-decoration: none;

  font-weight: 700;
  font-size: 14px;

  color: #0b0b0b;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}


.vh-video::-webkit-media-controls,
.vh-video::-webkit-media-controls-enclosure,
.vh-video::-webkit-media-controls-panel,
.vh-video::-webkit-media-controls-play-button,
.vh-video::-webkit-media-controls-start-playback-button,
.vh-video::-webkit-media-controls-timeline,
.vh-video::-webkit-media-controls-current-time-display,
.vh-video::-webkit-media-controls-time-remaining-display,
.vh-video::-webkit-media-controls-mute-button,
.vh-video::-webkit-media-controls-volume-slider {
  display: none !important;
  -webkit-appearance: none !important;
}

.vh-video {
  outline: none;
}


.vh-video,
.vh-media {
  pointer-events: none;
}

@media (max-width: 767px) {
  .vh-hero {
    height: calc(100vh - 172px);     
    height: calc(100dvh - 172px);
    background: #000;                
  }

  .vh-video {
    object-fit: cover;               
    object-position: 50% 50%;       
    background: transparent;
  }

  /* Poster must match the same behavior as video on mobile */
  .vh-poster {
    object-fit: cover;
    background-size: cover;          
    background-position: 50% 50%;
    background-color: #000;
  }
}