.vjs-v8 {
  width: 100%;
  height: 100%;
}

button.control-button.close-button {
  position: absolute;
  z-index: 20;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
}

.modal .modal-content {
  padding-top: 60px;
  padding-bottom: 60px;
}

.modal .modal-content .fullscreen_exit-button {
  padding-right: 15px;
}

.video-banner-layout .video-banner-wrapper .video-block-container .close-button::before {
  display: none;
}

.right-section {
  flex: 1;
  flex-direction: row-reverse;
}

.video-block-container .right-section {
  flex: initial;
  flex-direction: row-reverse;
}

.modal .play-btn img {
  display: none !important;
}

.vjs-poster img {
  display: none;
}

.modal .modal-content .bottom-controls .left-section {
  display: flex;
  position: relative;
  margin-right: auto;
}

.video-controls-overlay .video-timer {
  display: none;
}

.modal .video-controls-overlay .video-timer {
  display: flex;
  margin-right: 16px;
}

.modal .video-controls-overlay .playBtn {
  display: none;
}

.video-controls-overlay .right-section .fullscreen_exit::before {
  background: url(/icons/fullscreen_exit.svg);
  height: 24px;
  width: 24px;
  border: none;
  cursor: pointer;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
}

.video-card__navigation-wrapper .video-title {
  margin-bottom: 0;
  font-size: 0.875rem;
  font-family: var(--body-font-family);
  font-weight: 500;
  line-height: 1.125rem;
  margin-top: 0;
  width: 50%;
  margin-right: auto;

  @media (width >=1024px) {
    font-size: 0.875rem;
  }
}

.video-card__navigation-wrapper {
  display: flex;
  justify-content: right;
  padding-right: 19px;
  gap: 8px;
  margin-top: 16px;

  @media (width >=1024px) {
    gap: 16px;
    margin-top: 24px;
  }

  .next_arrow,
  .prev_arrow {
    width: 32px;
    height: 32px;
    background-size: 16px 16px;
    background-position: center;
    background-color: transparent;
    padding: 8px;

    @media (width >=1024px) {
      width: 48px;
      height: 48px;
      background-size: 24px 24px;
      padding: 12px;
    }
  }

  .prev_arrow {
    background-image: url(/icons/arrow-left-blue.svg);
    background-repeat: no-repeat;
    border: 1px solid var(--blue, #171c8f);
    cursor: pointer;
    margin-left: -20px;
  }

  .next_arrow {
    background-image: url(/icons/arrow-left-blue.svg);
    background-repeat: no-repeat;
    border: 1px solid var(--blue, #171c8f);
    cursor: pointer;
    z-index: 2;
    margin-right: -20px;
    rotate: 180deg;
  }
}

.video-banner-wrapper {
  &.sound-button {
    display: block;
    margin-right: 24px;
  }

  .video-banner-wrapper {
    .close-button {
      display: none;
    }
  }
}

.modal .video-controls-overlay .play-pause-button {
  display: flex;
}

.video-controls-overlay .play-pause-button {
  display: none;
}

.video-banner-wrapper.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: var(--tertiary-black);
}

.video-banner-wrapper.fullscreen .video-overlay-container {
  height: 592px;
  /* Fixed height for the video container */
  width: auto;
  /* Maintain aspect ratio */
  max-width: 100%;
  /* Ensure it doesn't overflow horizontally */
  min-height: 592px;
}

.video-banner-wrapper.fullscreen video {
  height: 592px;
  /* Fixed height for the video */
  width: auto;
  /* Maintain aspect ratio */
  object-fit: contain;
  /* Ensure the video fits within the container */
}

.video-controls-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  padding: 12px;
  transition: opacity 0.3s ease;
  z-index: 17;

  .close-button {
    display: none;
  }

  .sound-button {
    margin-right: 24px;
  }
}

.video-controls-overlay .progress-bar-container {
  display: none;
}

.top-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  bottom: 500px;
}

.left-section,
.right-section {
  display: flex;
  align-items: center;
}

.modal .video-controls-overlay .progress-bar-container {
  display: flex;
  right: 0;
  margin-right: 24px;
}

.bottom-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.control-button {
  background: transparent;
  border: none;
  cursor: pointer;
  width: 24px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.control-button:hover {
  opacity: 1;
}

.fullscreen-button::before {
  content: '';
  background: url(/icons/fullscreen-white.svg) no-repeat center;
  width: 24px;
  height: 24px;
  display: block;
}

.sound-button::before {
  content: '';
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path></svg>')
    no-repeat center;
  width: 24px;
  height: 24px;
  display: block;
  margin-right: 12px;
}

.close-button::before {
  content: '';
  background: url(/icons/close_white.svg) no-repeat center;
  width: 24px;
  height: 24px;
  display: block;
}

.video-timer {
  display: flex;
  align-items: center;
  gap: 4px;
  color: white;
  font-size: 14px;
  margin-right: auto;
}

.video-timer p {
  margin: 0;
}

.progress-bar-container {
  position: relative;
  width: 100%;
  height: 4px;
  background-color: var(--tertiary-light-grey);
  cursor: pointer;
  left: 0;
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: var(----primary-blue-700, #171c8f);
  width: 0;
  transition: width 0.1s linear;

  &::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background-color: var(----primary-blue-700, #171c8f);
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 3;
  transition: opacity 0.3s ease;
}

.play-btn img {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.video-content {
  padding: 1rem;
  background: var(--background-color);
}

.video-title {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--background-color);
}

.video-overlay-container {
  position: relative;
  width: 100%;
  background: var(--tertiary-black);
  overflow: hidden;
}

.video-overlay-container video {
  width: 100%;
  height: auto;
  display: block;
}

.video-content .video-card-title {
  & h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    margin: 0;
    font-size: var(--heading-font-20-mob-text);
    line-height: var(--heading-lh-19-mob-display);
    font-style: normal;
    font-weight: var(--fw-500);
    color: var(--primary-main);
    margin-bottom: 8px;
    height: auto;

    @media (width >= 1024px) {
      font-size: var(--heading-font-16-des);
      line-height: var(--heading-lh-21-des-text-small);
    }
  }
}

.modal-video-wrapper .video-controls-overlay {
  visibility: visible;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 5;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;

  .control-button {
    border: none;
    outline: none;
    cursor: pointer;
  }

  .top-controls {
    display: flex;
    pointer-events: all;
    justify-content: space-between;

    .left-section {
      display: flex;
      gap: 0.75rem;
    }

    .fullscreen-button {
      background: url(/icons/fullscreen.svg) no-repeat center;
      height: 24px;
      width: 24px;
    }

    .close-button {
      background: url(/icons/close_white.svg) no-repeat center;
      height: 24px;
      width: 24px;
      display: none;
    }

    .sound-button {
      background: url(/icons/volume-on-icon.svg) no-repeat center;
      height: 24px;
      width: 24px;
    }
  }

  .bottom-controls {
    display: none;
    gap: 16px;
    align-items: center;
    pointer-events: all;

    .left-section {
      display: flex;
      gap: 8px;
      align-items: center;

      .play-pause-button {
        background: url(/icons/pause-icon.svg) no-repeat center;
        height: 24px;
        width: 24px;
      }

      .sound-button {
        background: url(/icons/volume-on-icon.svg) no-repeat center;
        height: 24px;
        width: 24px;
      }

      .video-timer {
        display: flex;
        gap: 2px;

        p {
          color: var(--tertiary-light-grey);
          font-size: 0.875rem;
          line-height: 1.125rem;
          font-family: var(--body-font-family);
          font-weight: 400;
          word-wrap: break-word;
          margin: 0;

          @media (width >=1024px) {
            font-size: 0.75rem;
          }
        }
      }
    }

    .right-section {
      width: 100%;

      .progress-bar-container {
        height: 4px;
        position: relative;
        background-color: var(--tertiary-light-grey);

        .progress-bar {
          background-color: var(--primary-main);
          width: 0%;
          height: 100%;
          position: relative;

          &::after {
            content: '';
            position: absolute;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background-color: var(--primary-main);
            right: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
    }
  }
}

.video-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  background: var(--tertiary-black);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: none;
}

.video-modal video {
  width: 90%;
  height: 90%;
}

.video-modal .close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  background: url(/icons/close_white.svg) no-repeat center;
  height: 24px;
  width: 24px;
}

.video-tabs-container {
  background-color: var(--Tertiary-White);
  padding-top: 20px;

  .video-wrapper {
    display: flex;
    flex-direction: column;
    background: none;
    padding-bottom: 0;

    @media (width>=768px) {
      padding-bottom: 40px;
    }

    h2 {
      color: var(--secondary-black);
      font-family: var(--body-font-family);
      font-size: 1.5rem;
      font-style: normal;
      font-weight: 700;
      line-height: 1.875rem;
      letter-spacing: 0.64px;
      margin: 0;
      width: 270px;
      padding-bottom: 16px;

      @media (width >=768px) {
        padding-bottom: 24px;
      }

      @media (width >=1024px) {
        line-height: 2.5rem;
      }
    }

    p {
      color: var(--secondary-black);
      font-family: var(--body-font-family);
      font-size: 0.875rem;
      font-style: normal;
      font-weight: var(--fw-300);
      line-height: 1.125rem;
      margin: 0;

      @media (width >=1024px) {
        font-size: 0.75rem;
      }
    }
  }

  .video-wrapper-item {
    width: 100%;
    display: flex;
    height: 100%;
    flex-flow: column;
    overflow-x: scroll;
    flex-direction: row;
    gap: 16px;
    scrollbar-width: none;
    padding-bottom: 20px;

    @media (width >=768px) {
      display: flex;
      flex-flow: column wrap;
      padding-bottom: 0;
    }

    .video-banner-layout {
      min-width: 90%;
      height: 100%;

      .video-banner-wrapper {
        background: var(--Tertiary-White);
        color: var(--tertiary-black);

        .container {
          padding: 0;

          .video-title {
            font-family: var(--body-font-family);
            font-size: 0.875rem;
            font-weight: var(--fw-500);
            line-height: 1.125rem;
            text-align: left;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
            margin-bottom: 8px;

            @media (width >=1024px) {
              line-height: 0.75rem;
            }
          }

          .video-desc {
            color: var(--text-color);
            font-family: var(--secondary-font-arena);
            font-size: 14px;
            font-weight: 300;
            line-height: 18px;
            text-align: left;
          }
        }

        .play-btn {
          padding: 0;
          /* background: transparent; */
          background: var(--black-shade);
          border: 0;
          /* position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px; */
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          z-index: 10;
        }

        .video-content {
          padding: 24px 0 0 0;
          background: var(--Tertiary-White);

          @media (width >=768px) {
            padding-top: 16px;
          }

          p {
            margin: 0;
          }
        }

        .video-block-container {
          position: relative;
          /* height: auto;
            bottom: -9px; */
          width: 100%;
          margin: 0 auto;
          overflow: hidden;

          .mute-btn-wrapper {
            position: absolute;
            bottom: 36px;
            right: 50px;

            @media (width>=768px) {
              bottom: 70px;
              right: 56px;
            }

            .mute-block-btn,
            .unmute-block-btn {
              background: transparent;
              border: 0;
              display: none;

              &.active {
                display: block;
              }
            }

            .unmute-block-btn {
              img {
                width: 32px;
              }
            }
          }
        }
      }
    }

    > div {
      display: contents;
    }
  }
}

.video-block-container::before {
  content: '';
  display: block;
}

.video-overlay-container .play-btn {
  /* position: absolute; */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-overlay-container,
.video-overlay-container video {
  position: relative;
  width: 100%;
  background: var(--tertiary-black);
  overflow: hidden;
  object-fit: cover;
}

@media (width >=768px) {
  video {
    aspect-ratio: 5 /3;
  }

  .video-tabs-container {
    padding-top: 40px;
    padding-bottom: 90px;

    .video-wrapper-item {
      .video-banner-layout {
        min-width: unset;
        height: 100%;
      }
    }

    .video-wrapper {
      flex-direction: row;
      justify-content: space-between;
      width: 100%;

      .video-wrapper-title {
        h2 {
          font-size: 48px;
          line-height: 56px;
          letter-spacing: 0.96px;
          width: 340px;
          padding-bottom: 0;
        }
      }

      .video-wrapper-description {
        width: 41%;

        p {
          /* width: 505px; */
          font-size: 16px;
          line-height: 20px;
        }
      }
    }

    .video-wrapper-item {
      gap: 24px;
      flex-direction: row;
      overflow: hidden;

      .video-banner-layout {
        .video-banner-wrapper {
          .container {
            .video-content {
              .video-title {
                font-size: 18px;
                line-height: 24px;
              }

              .video-desc {
                color: var(--text-color);
                font-family: var(--secondary-font-arena);
                font-size: 14px;
                font-weight: 300;
                line-height: 18px;
                padding-top: 0px;
              }
            }
          }
        }
      }
    }
  }
}

@media (width >=1024px) {
  .video-tabs-container {
    padding-bottom: 40px;

    & .video-wrapper {
      & .video-wrapper-title {
        h2 {
          font-size: 32px;
          line-height: 38px;
          letter-spacing: 0;
          width: 340px;
          padding-bottom: 0;
        }
      }
    }
  }

  .modal .modal-content .video-overlay-container,
  .modal .modal-content .video-overlay-container video {
    width: 100%;
    height: calc(100% - 125px);
  }

  .video-overlay-container,
  .video-overlay-container video {
    height: 240px;
  }

  .video-banner-layout {
    .video-banner-wrapper {
      padding-bottom: 12px;
    }
  }
}
.video-tabs-container:has(.slider) {
  padding-top: 3rem;

  @media (width>=1024px) {
    padding-top: 5rem;
    padding-bottom: 0;
  }

  .slider {
    padding-left: 1.25rem;
    @media (width>=1024px) {
      padding: 0 3.5rem 0;
    }

    .video-wrapper {
      padding-right: 1.25rem;
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      align-items: center;
      padding-bottom: 1rem;

      @media (width>=1024px) {
        padding-bottom: 2.5rem;
      }

      .video-wrapper-title {
        max-width: 340px;
        @media (width>=1024px) {
          flex: none;
        }

        :is(h1, h2, h3, h4, h5, h6) {
          margin: 0;
          color: var(--neutrals-headings);
          font-family: var(--body-font-arena);
          font-size: var(--heading-font-size-m);
          font-weight: var(--fw-700);
          font-style: normal;
          line-height: 1.75rem;

          @media (width>=1024px) {
            font-size: var(--heading-font-1-des);
            line-height: 2.375rem;
          }
        }
      }
      .button__content {
        display: flex;
        gap: 0.5rem;

        @media (width>=1024px) {
          gap: 1rem;
        }

        .nav-arrow {
          width: 2rem;
          height: 2rem;
          background: url(/icons/arrow_forward-black.svg) center no-repeat;
          background-size: 1rem 1rem;
          padding: var(--space-8px);
          border: 1px solid var(--primary-blue-700);
          cursor: pointer;

          @media (width>=1024px) {
            width: 3rem;
            height: 3rem;
            background-size: 1.5rem 1.5rem;
            padding: var(--space-12px);
          }

          &:disabled {
            opacity: 0.5;
            cursor: not-allowed;
          }
        }

        .prev {
          transform: rotate(180deg);
        }
      }
    }

    .video-wrapper-item {
      width: 100%;
      display: flex;
      height: 100%;
      flex-flow: column;
      overflow-x: scroll;
      flex-direction: row;
      gap: 1rem;
      scrollbar-width: none;
      padding-bottom: 0;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;

      @media (width>=1024px) {
        gap: 1.5rem;
      }
      .video-banner-layout {
        min-width: 89.412%;
        scroll-snap-align: start;

        @media (width>=1024px) {
          min-width: unset;
          flex-shrink: 0;
        }

        .video-overlay-container {
          .video-controls-overlay {
            padding: var(--space-8px);
          }

          .vjs-poster {
            background: none;
          }
        }
      }
      .service-slider {
        @media (width >= 768px) {
          min-width: unset;
          flex: 0 0 calc((100% - 2rem) / 3);
        }
        .video-content{
          padding: 0;
        }        
      }
    }
  }
}
.video-tabs-container:has(.service-slider-container) {

  @media (width >= 768px) {
    padding-right: 1.25rem;
    padding-bottom: 2.5rem;
  }
  @media (width >= 1024px) {
    padding-bottom: 3.5rem;
    padding-right: 0;
  }
}