section.hero {

  .heroSwiper {
    width: 100%;
    height: 100%;

    .swiper-slide {
      background-size: cover;
      background-position: center;
      position: relative;
      transition: transform 1000ms cubic-bezier(0.25, 0.1, 0.25, 1);

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

        h2 {
          color: var(--white-color);
          text-align: center;
          font-family: var(--font-semibold-600);
          font-size: clamp(2.375rem, 3vw + 1.25rem, 3.125rem);
          font-style: normal;
          font-weight: 600;
          line-height: 1.1;
        }

        .subtitle {
          display: block;
          color: var(--white-color);
          font-size: 18px;
          font-family: var(--font-medium-500);
          margin-bottom: 15px;
          letter-spacing: 1px;
        }

      }

      .hero-video {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;

        video {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

      }

      .slide-footer {
        position: absolute;
        bottom: 150px;
        right: 100px;
        display: block;
        width: auto;
        height: auto;

        .btn-play-video {
          color: var(--white-color);
          font-family: var(--font-light-300);
          font-size: 26px;
          font-style: normal;
          font-weight: 400;
          line-height: 140%;
          transition: .1s ease;

          svg path {
            transition: .1s ease;
          }

          span {
            display: inline-block;
            padding-right: 1rem;
            transition: .3s ease-in-out;
          }

          &:hover {
            color: var(--primary-color);
          }

          &:hover span {
            padding-right: .7rem;
          }

          &:hover svg path {
            stroke: var(--primary-color);
          }

        }

      }

    }

  }

  .swiper-button-prev,
  .swiper-button-next {
    width: 50px;
    height: 50px;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
  }

  .swiper-button-prev:after,
  .swiper-rtl .swiper-button-next:after,
  .swiper-button-next:after,
  .swiper-rtl .swiper-button-prev:after {
    content: '';
  }

  .swiper-button-prev {
    left: 30px;
  }

  .swiper-button-next {
    right: 30px;
  }

}


section.hero {

  .heroSwiper {

    .hero-buttons {
      display: flex;
      gap: 15px;
      justify-content: center;
      align-items: center;
    }

  }

  .swiper-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 10;
    display: flex;
    gap: 10px;
    display: none;

    .swiper-button-pause,
    .swiper-button-play {
      width: 50px;
      height: 50px;
      border: 1px solid white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .swiper-button-pause:hover,
    .swiper-button-play:hover {
      background-color: rgba(255, 255, 255, 0.2);
    }

    .swiper-button-pause i,
    .swiper-button-play i {
      font-size: 1.5em;
    }

    .swiper-button-play {
      display: none;
    }

  }

}


/* Responsive Styles */
@media (max-width: 1200px) {}

@media (max-width: 1024px) {}

@media (max-width: 992px) {

  section.hero {
    .swiper-button-prev {
      display: none;
    }

    .swiper-button-next {
      display: none;
    }

    .heroSwiper {
      .swiper-controls {
        display: none;
      }

      .swiper-slide {
        .slide-footer {
          width: 80%;
          text-align: center;
        }

      }

    }

  }

}

@media (max-width: 768px) {

  .slide-content h2 {
    font-size: 36px;
  }

  .hero-buttons {
    flex-direction: column;
  }

  .swiper-controls {
    bottom: 10px;
    right: 10px;
  }

  .swiper-button-pause,
  .swiper-button-play {
    width: 40px;
    height: 40px;
  }

  .swiper-button-pause i,
  .swiper-button-play i {
    font-size: 1.2em;
  }

}

@media (max-width: 600px) {}

@media (max-width: 560px) {

  section.hero {
    .heroSwiper {
      .swiper-slide {
        .slide-footer {
          right: auto;
          left: 40px;
        }

      }

      .swiper-controls {
        bottom: 135px;
        right: 25px;
      }

    }

  }

}

@media (max-width: 480px) {

  section.hero {
    .heroSwiper {
      .swiper-slide {
        .slide-footer {
          bottom: 185px;
        }
      }
    }
  }

  section.hero {

    .heroSwiper {
      .swiper-slide {

        .slide-content {
          top: 42%;
        }

        .slide-footer {
          bottom: 35%;
        }

      }
    }
  }

}

@media (max-width: 320px) {

  section.hero {
    .heroSwiper {
      .swiper-slide {
        .slide-content {
          h2 {
            font-size: 1.7rem;
            line-height: 1;
          }
        }
      }
    }
  }

}