USP

<style>
  .slideshow-height-full {
    height: auto;
  }

  .zenith-slideshow {
    overflow: hidden;
    position: relative;
    width: 100%;
    line-height: 0;
    background: transparent;
  }

  .zenith-slideshow .slides-wrapper {
    display: flex;
    transition: transform .5s ease;
    width: 100%;
    height: 100%;
  }

  .zenith-slideshow .slide {
    min-width: 100%;
    box-sizing: border-box;
    position: relative;
    height: 100%;
  }

  .zenith-slideshow .desktop-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .position-middle {
    top: 45%;
  }

  .imageTextDiv {
    width: 50%;
    height: 0;
    margin: auto;
    position: relative;
    text-align: center;
  }

  .zenithImage {
    width: 100%;
  }

  .zenith-slideshow .mobile-media {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media screen and (max-width: 768px) {
    .zenith-slideshow .desktop-media {
      display: none;
    }

    .zenith-slideshow .mobile-media {
      display: block;
    }
  }

  @media screen and (min-width: 750px) {
    .section+.section {
      margin-top: 0px;
    }
  }
</style>

<section id="shopify-section-template--23908885332267__slideshow_QKWgiF" class="shopify-section section">
  <div id="slideshow-template--23908885332267__slideshow_QKWgiF"
    class="zenith-slideshow  color-scheme-4  slideshow-height-full">
    <div class="slides-wrapper" style="transform: translateX(0%);">

      <div class="slide image-slide">
        <div class="desktop-media">
          <img class=" zenithImage"
            src="https://cdn.shopify.com/s/files/1/0630/4441/9827/files/icons_new_90a7169b-56b6-4c5a-9a25-08a37c5bfe27.png?v=1748590379" alt=""
            loading="lazy">
        </div>

        <div class="mobile-media">
          <img class="zenithImage"
            src="https://cdn.shopify.com/s/files/1/0630/4441/9827/files/icons_new_mobile_view.png?v=1748509243" alt=""
            loading="lazy">
        </div>
      </div>

    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const slidesWrapper = document.querySelector('#slideshow-template--23908885332267__slideshow_QKWgiF.zenith-slideshow .slides-wrapper');
      const slides = document.querySelectorAll('#slideshow-template--23908885332267__slideshow_QKWgiF.zenith-slideshow .slide');
      const videos = document.querySelectorAll('.zenithVideo video');
      const prevButton = document.querySelector('.prevSlide');
      const nextButton = document.querySelector('.nextSlide');
      const slideshow = document.querySelector('.zenith-slideshow');

      let currentSlide = 0;
      let slideInterval;

      function setSlidesHeight() {
        const firstSlide = slides[0];
        const firstSlideHeight = firstSlide.offsetHeight;
        slides.forEach(slide => {
          slide.style.height = firstSlideHeight + 'px';
        });
      }

      function showSlide(index) {
        if (index < 10) {
          slidesWrapper.style.transform = `translateX(-${index * 100}%)`;
        }
      }

      function nextSlide() {
        currentSlide = (currentSlide + 1) % slides.length;
        showSlide(currentSlide);
        checkSlideType();
      }

      function prevSlide() {
        currentSlide = (currentSlide - 1 + slides.length) % slides.length;
        showSlide(currentSlide);
        checkSlideType();
      }

      function checkSlideType() {
        clearInterval(slideInterval);
        const currentSlideElement = slides[currentSlide];
        if (currentSlideElement.classList.contains('video-slide')) {
          const video = currentSlideElement.querySelector('video');
          if (video) {
            video.play();
            video.addEventListener('ended', nextSlide, { once: true });
          }
        } else {
          slideInterval = setInterval(nextSlide, 5 * 1000); // sliding time interval
        }
      }
      let startX;
      slidesWrapper.addEventListener('touchstart', function (event) {
        startX = event.touches[0].clientX;
      });

      slidesWrapper.addEventListener('touchend', function (event) {
        const endX = event.changedTouches[0].clientX;
        const threshold = 50;
        if (startX - endX > threshold) {
          nextSlide();
        } else if (endX - startX > threshold) {
          prevSlide();
        }
      });
      nextButton.addEventListener('click', nextSlide);
      prevButton.addEventListener('click', prevSlide);

      if (slideshow.classList.contains('slideshow-height-full')) {
        window.addEventListener('resize', setSlidesHeight);
        setSlidesHeight();
      }

      showSlide(currentSlide);
      checkSlideType();

    });
  </script>


</section>