@charset "UTF-8";
.video-section-2 {
  height: auto;
  padding: 0;
  --plyr-control-spacing: 25px;
  --plyr-range-border-radius: 0px;
  --plyr-range-track-height: 10px; /* Height of the progress bar */
  --plyr-range-fill-background: var(
    --button-background-color-hover
  ); /* Color of the filled portion (played progress) */
  --plyr-range-thumb-background: var(
    --button-background-color-hover
  ); /* Color of the thumb (dot on the progress bar) */
  --plyr-range-thumb-height: 0px; /* Height of the thumb */
  --plyr-range-thumb-width: 0px; /* Width of the thumb */
  --plyr-range-thumb-border-radius: 0px; /* Shape of the thumb (circle) */
  --plyr-range-thumb-shadow: none; /* Shadow effect on the thumb */
  --plyr-control-icon-size: 18px;
  --plyr-range-track-border-radius: 0; /* Square track edges */
  --plyr-range-fill-border-radius: 0;
  --plyr-control-radius: 0px;
  --plyr-badge-border-radius: 0px;
  /* Base progress bar track – remove rounded ends */
  /* Remove radius from the fill (the colored played portion) */
  /* Optional: remove border-radius from the outer progress container */
  /* WebKit (Chrome, Safari) */
  /* Firefox */
  --play-button-size: 100px;
}
.video-section-2 .section-side-one {
  position: relative;
}
.video-section-2 .preview-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}
.video-section-2 .main-video {
  position: relative;
  z-index: 1;
}
.video-section-2 .plyr--video {
  position: relative;
}
.video-section-2 .plyr--video .plyr__controls {
  max-width: var(--content-width);
  padding-left: var(--horizontal-padding);
  padding-right: var(--horizontal-padding);
  margin: 0 auto;
  background: none;
}
.video-section-2 .plyr--video:after {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: calc(var(--plyr-control-spacing) * 5);
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7490196078));
  z-index: 1;
}
.video-section-2 .plyr__controls__item.plyr__time {
  --plyr-control-spacing: 10px;
}
.video-section-2 .plyr__progress input[type=range],
.video-section-2 .plyr__progress__buffer {
  border-radius: 0 !important;
}
.video-section-2 .plyr__progress {
  margin-right: var(--plyr-control-spacing);
}
.video-section-2 .plyr__progress input[type=range]::-webkit-slider-runnable-track {
  border-radius: 0 !important;
}
.video-section-2 .plyr__progress input[type=range]::-moz-range-track {
  border-radius: 0 !important;
}
.video-section-2 .plyr__progress input[type=range]::-ms-track {
  border-radius: 0 !important;
}
.video-section-2 .plyr__progress input[type=range]::-webkit-slider-thumb {
  border-radius: 0 !important;
}
.video-section-2 .plyr__progress {
  border-radius: 0 !important;
}
.video-section-2 .plyr__progress__buffer {
  border-radius: 0px !important;
}
.video-section-2 .plyr__progress__buffer::-webkit-progress-bar {
  border-radius: 0px !important;
}
.video-section-2 .plyr__progress__buffer::-webkit-progress-value {
  border-radius: 0px !important;
}
.video-section-2 .plyr__progress__buffer::-moz-progress-bar {
  border-radius: 0px !important;
}
.video-section-2 .plyr--video .plyr__control {
  border: 0px solid white;
}
.video-section-2 .plyr--video .plyr__control svg {
  transition: fill var(--transition-timing) var(--transition-ease);
}
.video-section-2 .plyr--video .plyr__control:hover {
  background-color: rgba(0, 0, 0, 0);
}
.video-section-2 .plyr--video .plyr__control:hover svg {
  fill: var(--button-background-color-hover);
}
.video-section-2 .custom-overlay {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.video-section-2 .play-button {
  cursor: pointer;
  color: white;
  border-color: white;
  width: var(--play-button-size);
  height: var(--play-button-size);
  background-color: var(--button-background-color);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-timing) var(--transition-ease);
}
.video-section-2 .play-button:before {
  display: none;
}
.video-section-2 .play-button svg {
  fill: var(--button-text-color);
  width: calc(var(--play-button-size) / 3);
  height: calc(var(--play-button-size) / 3);
  transition: fill var(--transition-timing) var(--transition-ease);
}
.video-section-2 .play-button:hover {
  background-color: var(--button-background-color-hover);
}
.video-section-2 .play-button:hover svg {
  fill: var(--button-text-color-hover);
}
@media screen and (max-width: 885px) {
  .video-section-2 {
    --play-button-size: 80px;
  }
}