<!-- Paste the ful{% comment %}
<!-- Designed by Foysal Ahmed - Shopify Expert -->
<!-- YouTube: https://www.youtube.com/@foysalshopifyexpert -->
<!-- Hire Me: https://www.upwork.com/o/profiles/users/~01db3174219919c689/ -->
{% endcomment %}

<style>
.foysal-video-slideshow-component {
  position: relative;
  display: flex;
  flex-direction: column;
}

.foysal-video-slideshow-component .foysal-video-slideshow.foysal-video-banner {
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 0;
  gap: 0;
  overflow-y: hidden;
}

.foysal-video-slideshow__slide {
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  visibility: visible;
  width: 100%;
  flex: 0 0 100%;
  scroll-snap-align: start;
}

@media screen and (max-width: 749px) {
  .foysal-video-slideshow--placeholder.foysal-video-banner--mobile-bottom.foysal-video-banner--16-9 .foysal-video-slideshow__media,
  .foysal-video-slideshow--placeholder.foysal-video-banner--16-9:not(.foysal-video-banner--mobile-bottom) {
    height: 28rem;
  }
}

@media screen and (min-width: 750px) {
  .foysal-video-slideshow--placeholder.foysal-video-banner--16-9 {
    height: 56rem;
  }
}

.foysal-video-slideshow__text.foysal-video-banner__box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 54.5rem;
}

.foysal-video-slideshow__text > * {
  max-width: 100%;
}

@media screen and (max-width: 749px) {
  foysal-video-slideshow-component.page-width .foysal-video-slideshow__text {
    border-right: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
    border-left: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
  }

  .foysal-video-banner--mobile-bottom .foysal-video-slideshow__text.foysal-video-banner__box {
    max-width: 100%;
  }

  .foysal-video-banner--mobile-bottom .foysal-video-slideshow__text-wrapper {
    flex-grow: 1;
  }

  .foysal-video-banner--mobile-bottom .foysal-video-slideshow__text.foysal-video-banner__box {
    height: 100%;
  }

  .foysal-video-banner--mobile-bottom .foysal-video-slideshow__text .button {
    flex-grow: 0;
  }

  .foysal-video-slideshow__text.foysal-video-slideshow__text-mobile--left {
    align-items: flex-start;
    text-align: left;
  }

  .foysal-video-slideshow__text.foysal-video-slideshow__text-mobile--right {
    align-items: flex-end;
    text-align: right;
  }
}

@media screen and (min-width: 750px) {
  .foysal-video-slideshow__text.foysal-video-slideshow__text--left {
    align-items: flex-start;
    text-align: left;
  }

  .foysal-video-slideshow__text.foysal-video-slideshow__text--right {
    align-items: flex-end;
    text-align: right;
  }
}

.foysal-video-slideshow:not(.foysal-video-banner--mobile-bottom) .foysal-video-slideshow__text-wrapper {
  height: 100%;
}

@media screen and (min-width: 750px) {
  .foysal-video-slideshow__text-wrapper.foysal-video-banner__content {
    height: 100%;
    padding: 5rem;
  }
}

.foysal-video-slideshow__controls {
  border: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

.foysal-video-slideshow__controls--top {
  order: 2;
  z-index: 1;
}

@media screen and (max-width: 749px) {
  .foysal-video-slideshow__controls--border-radius-mobile {
    border-bottom-right-radius: var(--text-boxes-radius);
    border-bottom-left-radius: var(--text-boxes-radius);
  }
}

.spaced-section--full-width:last-child foysal-video-slideshow-component:not(.page-width) .foysal-video-slideshow__controls {
  border-bottom: none;
}

@media screen and (min-width: 750px) {
  .foysal-video-slideshow__controls {
    position: relative;
  }
}

foysal-video-slideshow-component:not(.page-width) .foysal-video-slider-buttons {
  border-right: 0;
  border-left: 0;
}

.foysal-video-slideshow__control-wrapper {
  display: flex;
}

.foysal-video-slideshow__autoplay {
  position: absolute;
  right: 0;
  border-left: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 749px) {
  foysal-video-slideshow-component.page-width .foysal-video-slideshow__autoplay {
    right: 1.5rem;
  }
}

@media screen and (min-width: 750px) {
  .foysal-video-slideshow__autoplay.foysal-video-slider-button {
    position: inherit;
    margin-left: 0.6rem;
    padding: 0 0 0 0.6rem;
    border-left: 0.1rem solid rgba(var(--color-foreground), 0.08);
  }
}

.foysal-video-slideshow__autoplay .icon.icon-play,
.foysal-video-slideshow__autoplay .icon.icon-pause {
  display: block;
  position: absolute;
  opacity: 1;
  transform: scale(1);
  transition: transform 150ms ease, opacity 150ms ease;
  width: 0.8rem;
  height: 1.2rem;
}

.foysal-video-slideshow__autoplay .icon.icon-play {
  height: 1rem;
}

.foysal-video-slideshow__autoplay path {
  fill: rgba(var(--color-foreground), 0.75);
}

.foysal-video-slideshow__autoplay:hover path {
  fill: rgb(var(--color-foreground));
}

@media screen and (forced-colors: active) {
  .foysal-video-slideshow__autoplay path,
  .foysal-video-slideshow__autoplay:hover path {
    fill: CanvasText;
  }
}

.foysal-video-slideshow__autoplay:hover .svg-wrapper {
  transform: scale(1.1);
}

.foysal-video-slideshow__autoplay--paused .icon-pause,
.foysal-video-slideshow__autoplay:not(.foysal-video-slideshow__autoplay--paused) .icon-play {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.8);
}

foysal-video-slider-component {
  --desktop-margin-left-first-item: max(
    5rem,
    calc((100vw - var(--page-width) + 10rem - var(--grid-desktop-horizontal-spacing)) / 2)
  );
  position: relative;
  display: block;
}

foysal-video-slider-component.foysal-video-slider-component-full-width {
  --desktop-margin-left-first-item: 1.5rem;
}

@media screen and (max-width: 749px) {
  foysal-video-slider-component.page-width {
    padding: 0 1.5rem;
  }
}

@media screen and (min-width: 749px) and (max-width: 990px) {
  foysal-video-slider-component.page-width {
    padding: 0 5rem;
  }
}

.foysal-video-slider__slide {
  --focus-outline-padding: 0.5rem;
  --shadow-padding-top: calc((var(--shadow-vertical-offset) * -1 + var(--shadow-blur-radius)) * var(--shadow-visible));
  --shadow-padding-bottom: calc((var(--shadow-vertical-offset) + var(--shadow-blur-radius)) * var(--shadow-visible));
  scroll-snap-align: start;
  flex-shrink: 0;
  padding-bottom: 0;
}

@media screen and (max-width: 749px) {
  .foysal-video-slider.foysal-video-slider--mobile {
    position: relative;
    flex-wrap: inherit;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: 1.5rem;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
  }

  .foysal-video-slider--mobile:after {
    content: '';
    width: 0;
    padding-left: 1.5rem;
  }

  .foysal-video-slider.foysal-video-slider--mobile .foysal-video-slider__slide {
    margin-bottom: 0;
    padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
    padding-bottom: max(var(--focus-outline-padding), var(--shadow-padding-bottom));
  }

  .foysal-video-slider.foysal-video-slider--mobile.contains-card--standard .foysal-video-slider__slide:not(.collection-list__item--no-media) {
    padding-bottom: var(--focus-outline-padding);
  }

  .foysal-video-slider.foysal-video-slider--mobile.contains-content-container .foysal-video-slider__slide {
    --focus-outline-padding: 0rem;
  }
}

@media screen and (min-width: 750px) {
  .foysal-video-slider.foysal-video-slider--tablet-up {
    position: relative;
    flex-wrap: inherit;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: 1rem;
    -webkit-overflow-scrolling: touch;
  }

  .foysal-video-slider.foysal-video-slider--tablet-up .foysal-video-slider__slide {
    margin-bottom: 0;
  }
}

.foysal-video-slider--everywhere {
  position: relative;
  flex-wrap: inherit;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
}

.foysal-video-slider.foysal-video-slider--everywhere .foysal-video-slider__slide {
  margin-bottom: 0;
  scroll-snap-align: center;
}

@media (prefers-reduced-motion) {
  .foysal-video-slider {
    scroll-behavior: auto;
  }
}

.foysal-video-slider {
  scrollbar-color: rgb(var(--color-foreground)) rgba(var(--color-foreground), 0.04);
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.foysal-video-slider::-webkit-scrollbar {
  height: 0.4rem;
  width: 0.4rem;
  display: none;
}

.foysal-video-slider::-webkit-scrollbar-thumb {
  background-color: rgb(var(--color-foreground));
  border-radius: 0.4rem;
  border: 0;
}

.foysal-video-slider::-webkit-scrollbar-track {
  background: rgba(var(--color-foreground), 0.04);
  border-radius: 0.4rem;
}

.foysal-video-slider-counter {
  display: flex;
  justify-content: center;
  min-width: 4.4rem;
}

@media screen and (min-width: 750px) {
  .foysal-video-slider-counter--dots {
    margin: 0 1.2rem;
  }
}

.foysal-video-slider-counter__link {
  padding: 1rem;
}

@media screen and (max-width: 749px) {
  .foysal-video-slider-counter__link {
    padding: 0.7rem;
  }
}

.foysal-video-slider-counter__link--dots .dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 0.1rem solid rgba(var(--color-foreground), 0.5);
  padding: 0;
  display: block;
}

.foysal-video-slider-counter__link--active.foysal-video-slider-counter__link--dots .dot {
  background-color: rgb(var(--color-foreground));
}

@media screen and (forced-colors: active) {
  .foysal-video-slider-counter__link--active.foysal-video-slider-counter__link--dots .dot {
    background-color: CanvasText;
  }
}

.foysal-video-slider-counter__link--dots:not(.foysal-video-slider-counter__link--active):hover .dot {
  border-color: rgb(var(--color-foreground));
}

.foysal-video-slider-counter__link--dots .dot,
.foysal-video-slider-counter__link--numbers {
  transition: transform 0.2s ease-in-out;
}

.foysal-video-slider-counter__link--active.foysal-video-slider-counter__link--numbers,
.foysal-video-slider-counter__link--dots:not(.foysal-video-slider-counter__link--active):hover .dot,
.foysal-video-slider-counter__link--numbers:hover {
  transform: scale(1.1);
}

.foysal-video-slider-counter__link--numbers {
  color: rgba(var(--color-foreground), 0.5);
  text-decoration: none;
}

.foysal-video-slider-counter__link--numbers:hover {
  color: rgb(var(--color-foreground));
}

.foysal-video-slider-counter__link--active.foysal-video-slider-counter__link--numbers {
  text-decoration: underline;
  color: rgb(var(--color-foreground));
}

.foysal-video-slider-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 990px) {
  .foysal-video-slider:not(.foysal-video-slider--everywhere):not(.foysal-video-slider--desktop) + .foysal-video-slider-buttons {
    display: none;
  }
}

@media screen and (max-width: 989px) {
  .foysal-video-slider--desktop:not(.foysal-video-slider--tablet) + .foysal-video-slider-buttons {
    display: none;
  }
}

@media screen and (min-width: 750px) {
  .foysal-video-slider--mobile + .foysal-video-slider-buttons {
    display: none;
  }
}

.foysal-video-slider-button {
  color: rgba(var(--color-foreground), 0.75);
  background: transparent;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.foysal-video-slider-button:not([disabled]):hover {
  color: rgb(var(--color-foreground));
}

.foysal-video-slider-button .icon {
  height: 0.6rem;
}

.foysal-video-slider-button[disabled] .icon {
  color: rgba(var(--color-foreground), 0.3);
  cursor: not-allowed;
}

/* --- REPLACE WITH THIS CODE --- */
.foysal-video-slider-button--next .svg-wrapper {
  transform: rotate(-90deg);
}

.foysal-video-slider-button--prev .svg-wrapper {
  transform: rotate(90deg);
}

.foysal-video-slider-button--next:not([disabled]):hover .svg-wrapper {
  transform: rotate(-90deg) scale(1.1);
}

.foysal-video-slider-button--prev:not([disabled]):hover .svg-wrapper {
  transform: rotate(90deg) scale(1.1);
}

.foysal-video-banner {
  display: flex;
  position: relative;
  flex-direction: column;
  z-index: auto;
  isolation: isolate;
}

.foysal-video-banner__box {
  text-align: center;
}

.foysal-video-banner__box.gradient {
  transform: perspective(0);
}

@media only screen and (max-width: 749px) {
  .foysal-video-banner--content-align-mobile-right .foysal-video-banner__box {
    text-align: right;
  }

  .foysal-video-banner--content-align-mobile-left .foysal-video-banner__box {
    text-align: left;
  }
}

@media only screen and (min-width: 750px) {
  .foysal-video-banner--content-align-right .foysal-video-banner__box {
    text-align: right;
  }

  .foysal-video-banner--content-align-left .foysal-video-banner__box {
    text-align: left;
  }

  .foysal-video-banner--content-align-left.foysal-video-banner--desktop-transparent .foysal-video-banner__box,
  .foysal-video-banner--content-align-right.foysal-video-banner--desktop-transparent .foysal-video-banner__box,
  .foysal-video-banner--medium.foysal-video-banner--desktop-transparent .foysal-video-banner__box {
    max-width: 68rem;
  }
}

.foysal-video-banner__media {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.foysal-video-banner__media.foysal-video-banner--16-9 {
  aspect-ratio: 16/9;
}

.foysal-video-banner__media.foysal-video-banner--4-3 {
  aspect-ratio: 4/3;
}

.foysal-video-banner__media.foysal-video-banner--21-9 {
  aspect-ratio: 21/9;
}

.foysal-video-banner__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.foysal-video-banner__media video:not([data-loaded="true"]) {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.foysal-video-banner__media video[data-loaded="true"] {
  opacity: 1;
}

.foysal-video-banner__media::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: foysal-video-spinner 1s linear infinite;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.foysal-video-banner__media[data-loading="true"]::before {
  opacity: 1;
}

@keyframes foysal-video-spinner {
  to {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 749px) {
  .foysal-video-banner--small.foysal-video-banner--mobile-bottom:not(.foysal-video-banner--adapt) .foysal-video-banner__media,
  .foysal-video-banner--small.foysal-video-banner--stacked:not(.foysal-video-banner--mobile-bottom):not(.foysal-video-banner--adapt) > .foysal-video-banner__media {
    height: 28rem;
  }

  .foysal-video-banner--medium.foysal-video-banner--mobile-bottom:not(.foysal-video-banner--adapt) .foysal-video-banner__media,
  .foysal-video-banner--medium.foysal-video-banner--stacked:not(.foysal-video-banner--mobile-bottom):not(.foysal-video-banner--adapt) > .foysal-video-banner__media {
    height: 34rem;
  }

  .foysal-video-banner--large.foysal-video-banner--mobile-bottom:not(.foysal-video-banner--adapt) .foysal-video-banner__media,
  .foysal-video-banner--large.foysal-video-banner--stacked:not(.foysal-video-banner--mobile-bottom):not(.foysal-video-banner--adapt) > .foysal-video-banner__media {
    height: 39rem;
  }

  .foysal-video-banner--small:not(.foysal-video-banner--mobile-bottom):not(.foysal-video-banner--adapt) .foysal-video-banner__content {
    min-height: 28rem;
  }

  .foysal-video-banner--medium:not(.foysal-video-banner--mobile-bottom):not(.foysal-video-banner--adapt) .foysal-video-banner__content {
    min-height: 34rem;
  }

  .foysal-video-banner--large:not(.foysal-video-banner--mobile-bottom):not(.foysal-video-banner--adapt) .foysal-video-banner__content {
    min-height: 39rem;
  }
}

@media screen and (min-width: 750px) {
  .foysal-video-banner {
    flex-direction: row;
  }

  .foysal-video-banner--small:not(.foysal-video-banner--adapt) {
    min-height: 42rem;
  }

  .foysal-video-banner--medium:not(.foysal-video-banner--adapt) {
    min-height: 56rem;
  }

  .foysal-video-banner--large:not(.foysal-video-banner--adapt) {
    min-height: 72rem;
  }

  .foysal-video-banner__content.foysal-video-banner__content--top-left {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .foysal-video-banner__content.foysal-video-banner__content--top-center {
    align-items: flex-start;
    justify-content: center;
  }

  .foysal-video-banner__content.foysal-video-banner__content--top-right {
    align-items: flex-start;
    justify-content: flex-end;
  }

  .foysal-video-banner__content.foysal-video-banner__content--middle-left {
    align-items: center;
    justify-content: flex-start;
  }

  .foysal-video-banner__content.foysal-video-banner__content--middle-center {
    align-items: center;
    justify-content: center;
  }

  .foysal-video-banner__content.foysal-video-banner__content--middle-right {
    align-items: center;
    justify-content: flex-end;
  }

  .foysal-video-banner__content.foysal-video-banner__content--bottom-left {
    align-items: flex-end;
    justify-content: flex-start;
  }

  .foysal-video-banner__content.foysal-video-banner__content--bottom-center {
    align-items: flex-end;
    justify-content: center;
  }

  .foysal-video-banner__content.foysal-video-banner__content--bottom-right {
    align-items: flex-end;
    justify-content: flex-end;
  }
}

@media screen and (max-width: 749px) {
  .foysal-video-banner:not(.foysal-video-banner--stacked) {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .foysal-video-banner--stacked {
    height: auto;
  }

  .foysal-video-banner--stacked .foysal-video-banner__media {
    flex-direction: column;
  }
}

.foysal-video-banner--adapt {
  height: auto;
}

@media screen and (max-width: 749px) {
  .foysal-video-banner--mobile-bottom .foysal-video-banner__media,
  .foysal-video-banner--stacked:not(.foysal-video-banner--mobile-bottom) .foysal-video-banner__media {
    position: relative;
  }

  .foysal-video-banner--stacked.foysal-video-banner--adapt .foysal-video-banner__content {
    height: auto;
  }

  .foysal-video-banner:not(.foysal-video-banner--mobile-bottom):not(.email-signup-banner) .foysal-video-banner__box {
    background: transparent;
  }

  .foysal-video-banner:not(.foysal-video-banner--mobile-bottom) .foysal-video-banner__box {
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .foysal-video-banner:not(.foysal-video-banner--mobile-bottom) .button--secondary {
    --alpha-button-background: 0;
  }

  .foysal-video-banner--stacked:not(.foysal-video-banner--mobile-bottom):not(.foysal-video-banner--adapt) .foysal-video-banner__content {
    position: absolute;
    height: auto;
  }

  .foysal-video-banner--stacked.foysal-video-banner--adapt:not(.foysal-video-banner--mobile-bottom) .foysal-video-banner__content {
    max-height: 100%;
    overflow: hidden;
    position: absolute;
  }

  .foysal-video-banner--stacked:not(.foysal-video-banner--adapt) .foysal-video-banner__media {
    position: relative;
  }

  .foysal-video-banner::before {
    display: none !important;
  }
}

.foysal-video-banner__content {
  padding: 0;
  display: flex;
  position: relative;
  width: 100%;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

@media screen and (min-width: 750px) {
  .foysal-video-banner__content {
    padding: 5rem;
  }

  .foysal-video-banner__content--top-left {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .foysal-video-banner__content--top-center {
    align-items: flex-start;
    justify-content: center;
  }

  .foysal-video-banner__content--top-right {
    align-items: flex-start;
    justify-content: flex-end;
  }

  .foysal-video-banner__content--middle-left {
    align-items: center;
    justify-content: flex-start;
  }

  .foysal-video-banner__content--middle-center {
    align-items: center;
    justify-content: center;
  }

  .foysal-video-banner__content--middle-right {
    align-items: center;
    justify-content: flex-end;
  }

  .foysal-video-banner__content--bottom-left {
    align-items: flex-end;
    justify-content: flex-start;
  }

  .foysal-video-banner__content--bottom-center {
    align-items: flex-end;
    justify-content: center;
  }

  .foysal-video-banner__content--bottom-right {
    align-items: flex-end;
    justify-content: flex-end;
  }
}

@media screen and (max-width: 749px) {
  .foysal-video-banner--mobile-bottom:not(.foysal-video-banner--stacked) .foysal-video-banner__content {
    order: 2;
  }

  .foysal-video-banner:not(.foysal-video-banner--mobile-bottom) .field__input,
  .foysal-video-banner--mobile-bottom:not(.foysal-video-banner--stacked) .foysal-video-banner__box.color-scheme-1 {
    background: transparent;
  }
}

.foysal-video-banner__box {
  padding: 4rem 1.5rem;
  position: relative;
  height: fit-content;
  align-items: center;
  text-align: center;
  width: 100%;
  word-wrap: break-word;
  z-index: 1;
}

.foysal-video-banner--mobile-bottom .foysal-video-banner__box {
  padding: 4rem 3.5rem;
}

@media screen and (min-width: 750px) {
  .foysal-video-banner__box {
    padding: 4rem 3.5rem;
  }

  .foysal-video-banner--desktop-transparent .foysal-video-banner__box {
    padding: 4rem 0;
    background: transparent;
    max-width: 89rem;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .foysal-video-banner--desktop-transparent .button--secondary {
    --alpha-button-background: 0;
  }

  .foysal-video-banner--desktop-transparent .content-container:after {
    display: none;
  }
}

@media screen and (max-width: 749px) {
  .foysal-video-banner--mobile-bottom::after,
  .foysal-video-banner--mobile-bottom .foysal-video-banner__media::after {
    display: none;
  }
}

.foysal-video-banner::after,
.foysal-video-banner__media::after {
  content: '';
  position: absolute;
  top: 0;
  background: rgba(0, 0, 0, var(--video-overlay-opacity, 0));
  z-index: 1;
  width: 100%;
  height: 100%;
}

.foysal-video-banner__box > * + .foysal-video-banner__text {
  margin-top: 1.5rem;
}

@media screen and (min-width: 750px) {
  .foysal-video-banner__box > * + .foysal-video-banner__text {
    margin-top: 2rem;
  }
}

.foysal-video-banner__box > * + * {
  margin-top: 1rem;
}

.foysal-video-banner__box > *:first-child {
  margin-top: 0;
}

@media screen and (max-width: 749px) {
  .foysal-video-banner--stacked .foysal-video-banner__box {
    width: 100%;
  }
}

@media screen and (min-width: 750px) {
  .foysal-video-banner__box {
    width: auto;
    max-width: 71rem;
    min-width: 45rem;
  }
}

@media screen and (min-width: 1400px) {
  .foysal-video-banner__box {
    max-width: 90rem;
  }
}

.foysal-video-banner__heading {
  margin-bottom: 0;
}

.foysal-video-banner__box .foysal-video-banner__heading + * {
  margin-top: 1rem;
}

.foysal-video-banner__buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 45rem;
  word-break: break-word;
}

@media screen and (max-width: 749px) {
  .foysal-video-banner--content-align-mobile-right .foysal-video-banner__buttons--multiple {
    justify-content: flex-end;
  }

  .foysal-video-banner--content-align-mobile-center .foysal-video-banner__buttons--multiple > * {
    flex-grow: 1;
    min-width: 22rem;
  }
}

@media screen and (min-width: 750px) {
  .foysal-video-banner--content-align-center .foysal-video-banner__buttons--multiple > * {
    flex-grow: 1;
    min-width: 22rem;
  }

  .foysal-video-banner--content-align-right .foysal-video-banner__buttons--multiple {
    justify-content: flex-end;
  }
}

.foysal-video-banner__box > * + .foysal-video-banner__buttons {
  margin-top: 2rem;
}

@media screen and (max-width: 749px) {
  .foysal-video-banner:not(.foysal-video-slideshow) .rte a,
  .foysal-video-banner:not(.foysal-video-slideshow) .inline-richtext a:hover,
  .foysal-video-banner:not(.foysal-video-slideshow) .rte a:hover {
    color: currentColor;
  }
}

@media screen and (min-width: 750px) {
  .foysal-video-banner--desktop-transparent .rte a,
  .foysal-video-banner--desktop-transparent .inline-richtext a:hover,
  .foysal-video-banner--desktop-transparent .rte a:hover {
    color: currentColor;
  }
}

/* Premium Features - Only show if enabled */
.foysal-premium-features {
  {% unless section.settings.show_cta_buttons %}display: none;{% endunless %}
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.foysal-premium-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.foysal-premium-button--youtube {
  background: #ff0000;
  color: white;
}

.foysal-premium-button--youtube:hover {
  background: #cc0000;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.foysal-premium-button--hire {
  background: #14a800;
  color: white;
}

.foysal-premium-button--hire:hover {
  background: #0f8a00;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.foysal-premium-button .icon {
  margin-right: 0.5rem;
  width: 20px;
  height: 20px;
}

.foysal-copyright {
  {% unless section.settings.show_cta_buttons %}display: none;{% endunless %}
  text-align: center;
  margin-top: 2rem;
  font-size: 0.9rem;
  color: rgba(var(--color-foreground), 0.7);
}

/* Fullscreen toggle */
.foysal-fullscreen-toggle {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 10;
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.foysal-fullscreen-toggle:hover {
  background: rgba(0,0,0,0.7);
}

.foysal-fullscreen-toggle .icon {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}

/* Fullscreen mode */
.foysal-video-slideshow-component.foysal-fullscreen-active {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: black;
}

.foysal-video-slideshow-component.foysal-fullscreen-active .foysal-video-slideshow {
  height: 100vh;
}

.foysal-video-slideshow-component.foysal-fullscreen-active .foysal-video-banner__media {
  height: 100vh;
}

/* Progress bar */
.foysal-slideshow-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.2);
  z-index: 10;
}

.foysal-slideshow-progress-bar {
  height: 100%;
  background: white;
  width: 0%;
  transition: width linear;
}

/* Video controls */
.foysal-video-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
  background: rgba(0,0,0,0.5);
  padding: 8px 12px;
  border-radius: 4px;
}

.foysal-video-control-button {
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.foysal-video-control-button:hover {
  background: rgba(255,255,255,0.2);
}

.foysal-video-control-button .icon {
  width: 16px;
  height: 16px;
}

/* Responsive adjustments */
@media screen and (max-width: 749px) {
  .foysal-premium-features {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  
  .foysal-premium-button {
    width: 100%;
    max-width: 250px;
  }
  
  .foysal-video-controls {
    bottom: 60px;
  }
  
  .foysal-fullscreen-toggle {
    bottom: 10px;
    right: 10px;
  }
}


/* --- START: FIX FOR FULL WIDTH & HEIGHT (Conditional) --- */

/* This applies full-screen styles ONLY when the main component 
  does NOT have the '.page-width' class.
*/
foysal-video-slideshow-component:not(.page-width) .foysal-video-slideshow.foysal-video-banner {
  /* Forces the banner to fill the entire screen height */
  height: 100vh;
  min-height: 100vh;

  /* Forces the banner to fill the entire screen width */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Ensures the inner content also fills the height, but only in full-screen mode */
foysal-video-slideshow-component:not(.page-width) .foysal-video-slideshow.foysal-video-banner .foysal-video-banner__media,
foysal-video-slideshow-component:not(.page-width) .foysal-video-slideshow.foysal-video-banner .foysal-video-banner__content {
    height: 100%;
}

/* --- END OF FIX --- */



</style>

<foysal-video-slideshow-component
  class="foysal-video-slider-mobile-gutter{% if section.settings.layout == 'grid' %} page-width{% endif %}{% if section.settings.show_text_below %} mobile-text-below{% endif %}"
  role="region"
  aria-roledescription="{{ 'sections.slideshow.carousel' | t }}"
  aria-label="{{ section.settings.accessibility_info | escape }}"
>


  <div
    class="foysal-video-slideshow foysal-video-banner foysal-video-banner--{{ section.settings.slide_height }} grid grid--1-col foysal-video-slider foysal-video-slider--everywhere{% if section.settings.show_text_below %} foysal-video-banner--mobile-bottom{% endif %}{% if section.blocks.first.settings.video_url == blank %} foysal-video-slideshow--placeholder{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
    id="FoysalVideoSlider-{{ section.id }}"
    aria-live="polite"
    aria-atomic="true"
    data-autoplay="{{ section.settings.auto_rotate }}"
    data-speed="{{ section.settings.change_slides_speed }}"
  >
    {%- for block in section.blocks -%}
      <style>
        #FoysalVideoSlide-{{ section.id }}-{{ forloop.index }} .foysal-video-banner__media::after {
          --video-overlay-opacity: {{ block.settings.video_overlay_opacity | divided_by: 100.0 }};
        }
      </style>
      <div
        class="foysal-video-slideshow__slide grid__item grid--1-col foysal-video-slider__slide"
        id="FoysalVideoSlide-{{ section.id }}-{{ forloop.index }}"
        {{ block.shopify_attributes }}
        role="group"
        aria-roledescription="{{ 'sections.slideshow.slide' | t }}"
        aria-label="{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
        tabindex="-1"
      >
        <div class="foysal-video-slideshow__media foysal-video-banner__media foysal-video-banner--{{ block.settings.video_aspect_ratio }} media{% if block.settings.video_url == blank %} placeholder{% endif %}">
          {%- if block.settings.video_url != blank -%}
            <video 
              autoplay 
              {% if block.settings.muted %}muted{% endif %} 
              loop 
              playsinline
              preload="none"
              poster=""
            >
              <source src="{{ block.settings.video_url }}" type="video/mp4">
              <p>Your browser doesn't support video playback.</p>
            </video>
          {%- else -%}
            {%- assign placeholder_slide = forloop.index | modulo: 2 -%}
            {%- if placeholder_slide == 1 -%}
              {{ 'hero-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }}
            {%- else -%}
              {{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
            {%- endif -%}
          {%- endif -%}
        </div>
        <div class="foysal-video-slideshow__text-wrapper foysal-video-banner__content foysal-video-banner__content--{{ block.settings.box_align }} page-width{% if block.settings.show_text_box == false %} foysal-video-banner--desktop-transparent{% endif %}{% if settings.animations_reveal_on_scroll and forloop.index == 1 %} scroll-trigger animate--slide-in{% endif %}">
          <div class="foysal-video-slideshow__text foysal-video-banner__box content-container content-container--full-width-mobile color-{{ block.settings.color_scheme }} gradient foysal-video-slideshow__text--{{ block.settings.text_alignment }} foysal-video-slideshow__text-mobile--{{ block.settings.text_alignment_mobile }}">
            {%- if block.settings.heading != blank -%}
              <h2 class="foysal-video-banner__heading inline-richtext {{ block.settings.heading_size }}">
                {{ block.settings.heading }}
              </h2>
            {%- endif -%}
            {%- if block.settings.subheading != blank -%}
              <div class="foysal-video-banner__text rte">
                <p>{{ block.settings.subheading }}</p>
              </div>
            {%- endif -%}
            {%- if block.settings.button_label != blank -%}
              <div class="foysal-video-banner__buttons">
                <a
                  {% if block.settings.link %}
                    href="{{ block.settings.link }}"
                  {% else %}
                    role="link" aria-disabled="true"
                  {% endif %}
                  class="button {% if block.settings.button_style_secondary %}button--secondary{% else %}button--primary{% endif %}"
                >
                  {{- block.settings.button_label | escape -}}
                </a>
              </div>
            {%- endif -%}
          </div>
        </div>
        
        <!-- Video controls for this slide -->
        <div class="foysal-video-controls">
          <button class="foysal-video-control-button" aria-label="Play/Pause">
            <svg class="icon" viewBox="0 0 24 24">
              <path fill="currentColor" d="M8,5.14V19.14L19,12.14L8,5.14Z" />
            </svg>
          </button>
          <button class="foysal-video-control-button" aria-label="Mute/Unmute">
            <svg class="icon" viewBox="0 0 24 24">
              <path fill="currentColor" d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z" />
            </svg>
          </button>
        </div>
        
        <!-- Progress bar for this slide -->
        <div class="foysal-slideshow-progress">
          <div class="foysal-slideshow-progress-bar" style="width: 0%"></div>
        </div>
        
        <!-- Fullscreen toggle -->
        <button class="foysal-fullscreen-toggle" aria-label="Toggle fullscreen">
          <svg class="icon" viewBox="0 0 24 24">
            <path fill="currentColor" d="M5,5H10V7H7V10H5V5M14,5H19V10H17V7H14V5M17,14H19V19H14V17H17V14M10,17V19H5V14H7V17H10Z" />
          </svg>
          Fullscreen
        </button>
      </div>
    {%- endfor -%}
  </div>

  {%- if section.blocks.size > 1 and section.settings.auto_rotate == false -%}
    <div class="foysal-video-slideshow__controls foysal-video-slider-buttons{% if section.settings.show_text_below %} foysal-video-slideshow__controls--border-radius-mobile{% endif %}">
      <button
        type="button"
        class="foysal-video-slider-button foysal-video-slider-button--prev"
        name="previous"
        aria-label="{{ 'sections.slideshow.previous_slideshow' | t }}"
        aria-controls="FoysalVideoSlider-{{ section.id }}"
      >
        <span class="svg-wrapper">
          {{- 'icon-caret.svg' | inline_asset_content -}}
        </span>
      </button>
      <div class="foysal-video-slider-counter foysal-video-slider-counter--{{ section.settings.slider_visual }}{% if section.settings.slider_visual == 'counter' or section.settings.slider_visual == 'numbers' %} caption{% endif %}">
        {%- if section.settings.slider_visual == 'counter' -%}
          <span class="foysal-video-slider-counter--current">1</span>
          <span aria-hidden="true"> / </span>
          <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
          <span class="foysal-video-slider-counter--total">{{ section.blocks.size }}</span>
        {%- else -%}
          <div class="foysal-video-slideshow__control-wrapper">
            {%- for block in section.blocks -%}
              <button
                class="foysal-video-slider-counter__link foysal-video-slider-counter__link--{{ section.settings.slider_visual }} link"
                aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
                aria-controls="FoysalVideoSlider-{{ section.id }}"
              >
                {%- if section.settings.slider_visual == 'numbers' -%}
                  {{ forloop.index -}}
                {%- else -%}
                  <span class="dot"></span>
                {%- endif -%}
              </button>
            {%- endfor -%}
          </div>
        {%- endif -%}
      </div>
      <button
        type="button"
        class="foysal-video-slider-button foysal-video-slider-button--next"
        name="next"
        aria-label="{{ 'sections.slideshow.next_slideshow' | t }}"
        aria-controls="FoysalVideoSlider-{{ section.id }}"
      >
        <span class="svg-wrapper">
          {{- 'icon-caret.svg' | inline_asset_content -}}
        </span>
      </button>

      {%- if section.settings.auto_rotate -%}
        <button
          type="button"
          class="foysal-video-slideshow__autoplay foysal-video-slider-button{% if section.settings.auto_rotate == false %} foysal-video-slideshow__autoplay--paused{% endif %}"
          aria-label="{{ 'sections.slideshow.pause_slideshow' | t }}"
        >
          <span class="svg-wrapper">
            {{- 'icon-pause.svg' | inline_asset_content -}}
          </span>
          <span class="svg-wrapper">
            {{- 'icon-play.svg' | inline_asset_content -}}
          </span>
        </button>
      {%- endif -%}
    </div>
  {%- endif -%}

  {%- if section.settings.auto_rotate and section.blocks.size > 1 -%}
    <div class="foysal-video-slideshow__controls foysal-video-slideshow__controls--top foysal-video-slider-buttons{% if section.settings.show_text_below %} foysal-video-slideshow__controls--border-radius-mobile{% endif %}">
      <button
        type="button"
        class="foysal-video-slider-button foysal-video-slider-button--prev"
        name="previous"
        aria-label="{{ 'sections.slideshow.previous_slideshow' | t }}"
        aria-controls="FoysalVideoSlider-{{ section.id }}"
      >
        <span class="svg-wrapper">
          {{- 'icon-caret.svg' | inline_asset_content -}}
        </span>
      </button>
      <div class="foysal-video-slider-counter foysal-video-slider-counter--{{ section.settings.slider_visual }}{% if section.settings.slider_visual == 'counter' or section.settings.slider_visual == 'numbers' %} caption{% endif %}">
        {%- if section.settings.slider_visual == 'counter' -%}
          <span class="foysal-video-slider-counter--current">1</span>
          <span aria-hidden="true"> / </span>
          <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
          <span class="foysal-video-slider-counter--total">{{ section.blocks.size }}</span>
        {%- else -%}
          <div class="foysal-video-slideshow__control-wrapper">
            {%- for block in section.blocks -%}
              <button
                class="foysal-video-slider-counter__link foysal-video-slider-counter__link--{{ section.settings.slider_visual }} link"
                aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
                aria-controls="FoysalVideoSlider-{{ section.id }}"
              >
                {%- if section.settings.slider_visual == 'numbers' -%}
                  {{ forloop.index -}}
                {%- else -%}
                  <span class="dot"></span>
                {%- endif -%}
              </button>
            {%- endfor -%}
          </div>
        {%- endif -%}
      </div>
      <button
        type="button"
        class="foysal-video-slider-button foysal-video-slider-button--next"
        name="next"
        aria-label="{{ 'sections.slideshow.next_slideshow' | t }}"
        aria-controls="FoysalVideoSlider-{{ section.id }}"
      >
        <span class="svg-wrapper">
          {{- 'icon-caret.svg' | inline_asset_content -}}
        </span>
      </button>

      {%- if section.settings.auto_rotate -%}
        <button
          type="button"
          class="foysal-video-slideshow__autoplay foysal-video-slider-button{% if section.settings.auto_rotate == false %} foysal-video-slideshow__autoplay--paused{% endif %}"
          aria-label="{{ 'sections.slideshow.pause_slideshow' | t }}"
        >
          <span class="svg-wrapper">
            {{- 'icon-pause.svg' | inline_asset_content -}}
          </span>
          <span class="svg-wrapper">
            {{- 'icon-play.svg' | inline_asset_content -}}
          </span>
        </button>
      {%- endif -%}
    </div>
  {%- endif -%}


  
  <!-- Premium Features Section -->
  <div class="foysal-premium-features">
    <a href="https://www.youtube.com/@foysalshopifyexpert" target="_blank" class="foysal-premium-button foysal-premium-button--youtube">
      <svg class="icon" viewBox="0 0 24 24">
        <path fill="currentColor" d="M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z" />
      </svg>
      Subscribe to My Channel
    </a>
    <a href="https://www.upwork.com/o/profiles/users/~01db3174219919c689/" target="_blank" class="foysal-premium-button foysal-premium-button--hire">
      <svg class="icon" viewBox="0 0 24 24">
        <path fill="currentColor" d="M19,13C19.34,13 19.67,13.04 20,13.09V10C20,8.9 19.1,8 18,8H17V6C17,3.24 14.76,1 12,1C9.24,1 7,3.24 7,6V8H6C4.9,8 4,8.9 4,10V20C4,21.1 4.9,22 6,22H13.81C13.3,21.12 13,20.1 13,19C13,15.69 15.69,13 19,13M9,6C9,4.34 10.34,3 12,3C13.66,3 15,4.34 15,6V8H9V6M12,17C10.9,17 10,16.1 10,15C10,13.9 10.9,13 12,13C13.1,13 14,13.9 14,15C14,16.1 13.1,17 12,17M22.5,17.25L17.75,22L15,19L16.16,17.84L17.75,19.43L21.34,15.84L22.5,17.25Z" />
      </svg>
      Hire Me on Upwork
    </a>
  </div>
  
  <!-- Copyright Section -->
  <div class="foysal-copyright">
    &copy; {{ "now" | date: "%Y" }} Foysal Ahmed - Shopify Expert. All rights reserved.
  </div>
</foysal-video-slideshow-component>

<script>
class FoysalVideoSliderComponent extends HTMLElement {
  constructor() {
    super();
    this.slider = this.querySelector('[id^="FoysalVideoSlider-"]');
    this.sliderItems = this.querySelectorAll('[id^="FoysalVideoSlide-"]');
    this.enableSliderLooping = false;
    this.currentPageElement = this.querySelector('.foysal-video-slider-counter--current');
    this.pageTotalElement = this.querySelector('.foysal-video-slider-counter--total');
    this.prevButton = this.querySelector('button[name="previous"]');
    this.nextButton = this.querySelector('button[name="next"]');

    if (!this.slider || !this.nextButton) return;

    this.initPages();
    const resizeObserver = new ResizeObserver((entries) => this.initPages());
    resizeObserver.observe(this.slider);

    this.slider.addEventListener('scroll', this.update.bind(this));
    this.prevButton.addEventListener('click', this.onButtonClick.bind(this));
    this.nextButton.addEventListener('click', this.onButtonClick.bind(this));
  }

  initPages() {
    this.sliderItemsToShow = Array.from(this.sliderItems).filter((element) => element.clientWidth > 0);
    if (this.sliderItemsToShow.length < 2) return;
    this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft;
    this.slidesPerPage = Math.floor(
      (this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset
    );
    this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1;
    this.update();
  }

  resetPages() {
    this.sliderItems = this.querySelectorAll('[id^="FoysalVideoSlide-"]');
    this.initPages();
  }

  update() {
    if (!this.slider || !this.nextButton) return;

    const previousPage = this.currentPage;
    this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1;

    if (this.currentPageElement && this.pageTotalElement) {
      this.currentPageElement.textContent = this.currentPage;
      this.pageTotalElement.textContent = this.totalPages;
    }

    if (this.currentPage != previousPage) {
      this.dispatchEvent(
        new CustomEvent('slideChanged', {
          detail: {
            currentPage: this.currentPage,
            currentElement: this.sliderItemsToShow[this.currentPage - 1],
          },
        })
      );
    }

    if (this.enableSliderLooping) return;

    if (this.isSlideVisible(this.sliderItemsToShow[0]) && this.slider.scrollLeft === 0) {
      this.prevButton.setAttribute('disabled', 'disabled');
    } else {
      this.prevButton.removeAttribute('disabled');
    }

    if (this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1])) {
      this.nextButton.setAttribute('disabled', 'disabled');
    } else {
      this.nextButton.removeAttribute('disabled');
    }
  }

  isSlideVisible(element, offset = 0) {
    const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset;
    return element.offsetLeft + element.clientWidth <= lastVisibleSlide && element.offsetLeft >= this.slider.scrollLeft;
  }

  onButtonClick(event) {
    event.preventDefault();
    const step = event.currentTarget.dataset.step || 1;
    this.slideScrollPosition =
      event.currentTarget.name === 'next'
        ? this.slider.scrollLeft + step * this.sliderItemOffset
        : this.slider.scrollLeft - step * this.sliderItemOffset;
    this.setSlidePosition(this.slideScrollPosition);
  }

  setSlidePosition(position) {
    this.slider.scrollTo({
      left: position,
    });
  }
}

customElements.define('foysal-video-slider-component', FoysalVideoSliderComponent);

class FoysalVideoSlideshowComponent extends FoysalVideoSliderComponent {
  constructor() {
    super();
    this.sliderControlWrapper = this.querySelector('.foysal-video-slider-buttons');
    this.enableSliderLooping = true;
    this.fullscreenActive = false;
    this.currentVideo = null;
    this.progressBars = [];
    this.progressIntervals = [];

    if (!this.sliderControlWrapper) return;

    this.sliderFirstItemNode = this.slider.querySelector('.foysal-video-slideshow__slide');
    if (this.sliderItemsToShow.length > 0) this.currentPage = 1;

    this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll('.foysal-video-slider-counter__link'));
    this.sliderControlLinksArray.forEach((link) => link.addEventListener('click', this.linkToSlide.bind(this)));
    this.slider.addEventListener('scroll', this.setSlideVisibility.bind(this));
    this.setSlideVisibility();

    this.initVideoHandling();
    this.initFullscreenToggle();
    this.initProgressBars();
    this.initVideoControls();

    if (this.slider.getAttribute('data-autoplay') === 'true') this.setAutoPlay();
  }

  initVideoHandling() {
    this.videos = this.querySelectorAll('video');
    this.handleVideoErrors();
    this.initVideoLoadingStates();
    this.loadInitialVideo();
  }

  initVideoLoadingStates() {
    this.videos.forEach((video) => {
      video.setAttribute('preload', 'none');
      video.videoLoaded = false;
      video.addEventListener('loadeddata', () => {
        video.videoLoaded = true;
      });
    });
  }

  loadInitialVideo() {
    if (this.sliderItemsToShow.length > 0) {
      const firstSlide = this.sliderItemsToShow[0];
      const firstVideo = firstSlide.querySelector('video');
      if (firstVideo) {
        this.loadVideo(firstVideo);
      }
    }
  }

  handleVideoErrors() {
    this.videos.forEach((video) => {
      video.addEventListener('error', () => {
        const placeholder = video.closest('.foysal-video-slideshow__media');
        if (placeholder) {
          placeholder.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; background: #f3f3f3; color: #666;">Video could not be loaded</div>';
        }
      });
    });
  }

  loadVideo(video) {
    if (!video) return;
    
    if (video.videoLoaded) {
      video.setAttribute('data-loaded', 'true');
      return;
    }
    
    const mediaContainer = video.closest('.foysal-video-banner__media');
    if (mediaContainer) {
      mediaContainer.setAttribute('data-loading', 'true');
    }
    
    video.setAttribute('preload', 'auto');
    
    if (!video.src && video.querySelector('source')) {
      const source = video.querySelector('source');
      video.src = source.src;
    }
    
    video.load();
    
    video.addEventListener('loadeddata', () => {
      video.setAttribute('data-loaded', 'true');
      video.videoLoaded = true;
      if (mediaContainer) {
        mediaContainer.removeAttribute('data-loading');
      }
    }, { once: true });
  }

  unloadVideo(video) {
    if (!video) return;
    video.pause();
    video.setAttribute('preload', 'none');
    video.removeAttribute('data-loaded');
    video.currentTime = 0;
    video.videoLoaded = false;
    
    const mediaContainer = video.closest('.foysal-video-banner__media');
    if (mediaContainer) {
      mediaContainer.removeAttribute('data-loading');
    }
  }

  preloadNextSlide() {
    clearTimeout(this.preloadTimeout);
    this.preloadTimeout = setTimeout(() => {
      const nextIndex = this.currentPage === this.sliderItemsToShow.length ? 0 : this.currentPage;
      const nextSlide = this.sliderItemsToShow[nextIndex];
      if (nextSlide) {
        const nextVideo = nextSlide.querySelector('video');
        if (nextVideo && !nextVideo.videoLoaded) {
          this.loadVideo(nextVideo);
        }
      }
    }, 300);
  }

  initFullscreenToggle() {
    this.fullscreenButtons = this.querySelectorAll('.foysal-fullscreen-toggle');
    this.fullscreenButtons.forEach(button => {
      button.addEventListener('click', this.toggleFullscreen.bind(this));
    });
    
    // Listen for fullscreen change events
    document.addEventListener('fullscreenchange', this.handleFullscreenChange.bind(this));
    document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange.bind(this));
    document.addEventListener('msfullscreenchange', this.handleFullscreenChange.bind(this));
  }

  toggleFullscreen() {
    if (!this.fullscreenActive) {
      this.enterFullscreen();
    } else {
      this.exitFullscreen();
    }
  }

  enterFullscreen() {
    if (this.requestFullscreen) {
      this.requestFullscreen();
    } else if (this.webkitRequestFullscreen) {
      this.webkitRequestFullscreen();
    } else if (this.msRequestFullscreen) {
      this.msRequestFullscreen();
    }
    
    this.classList.add('foysal-fullscreen-active');
    this.fullscreenActive = true;
    
    // Update all fullscreen buttons
    this.fullscreenButtons.forEach(button => {
      const icon = button.querySelector('.icon');
      if (icon) {
        icon.innerHTML = '<path fill="currentColor" d="M14,14H19V16H16V19H14V14M5,14H10V19H8V16H5V14M8,5H10V10H5V8H8V5M19,8V10H14V5H16V8H19Z" />';
      }
      button.textContent = 'Exit Fullscreen';
      if (icon) button.prepend(icon);
    });
  }

  exitFullscreen() {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
    
    this.classList.remove('foysal-fullscreen-active');
    this.fullscreenActive = false;
    
    // Update all fullscreen buttons
    this.fullscreenButtons.forEach(button => {
      const icon = button.querySelector('.icon');
      if (icon) {
        icon.innerHTML = '<path fill="currentColor" d="M5,5H10V7H7V10H5V5M14,5H19V10H17V7H14V5M17,14H19V19H14V17H17V14M10,17V19H5V14H7V17H10Z" />';
      }
      button.textContent = 'Fullscreen';
      if (icon) button.prepend(icon);
    });
  }

  handleFullscreenChange() {
    if (!document.fullscreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
      this.classList.remove('foysal-fullscreen-active');
      this.fullscreenActive = false;
      
      // Update all fullscreen buttons
      this.fullscreenButtons.forEach(button => {
        const icon = button.querySelector('.icon');
        if (icon) {
          icon.innerHTML = '<path fill="currentColor" d="M5,5H10V7H7V10H5V5M14,5H19V10H17V7H14V5M17,14H19V19H14V17H17V14M10,17V19H5V14H7V17H10Z" />';
        }
        button.textContent = 'Fullscreen';
        if (icon) button.prepend(icon);
      });
    }
  }

  initProgressBars() {
    this.progressBars = Array.from(this.querySelectorAll('.foysal-slideshow-progress-bar'));
    this.progressIntervals = [];
    
    // Initialize all progress bars to 0
    this.progressBars.forEach(bar => {
      bar.style.width = '0%';
    });
  }

  updateProgressBar(index) {
    // Clear all existing intervals
    this.progressIntervals.forEach(interval => clearInterval(interval));
    this.progressIntervals = [];
    
    // Reset all progress bars
    this.progressBars.forEach(bar => {
      bar.style.width = '0%';
    });
    
    // If not autoplaying, don't show progress
    if (!this.autoplay || !this.slider.getAttribute('data-autoplay') === 'true') return;
    
    const currentBar = this.progressBars[index];
    if (!currentBar) return;
    
    const speed = parseInt(this.slider.dataset.speed) * 1000;
    let width = 0;
    const increment = 100 / (speed / 100);
    
    const interval = setInterval(() => {
      if (width >= 100) {
        clearInterval(interval);
      } else {
        width += increment;
        currentBar.style.width = width + '%';
      }
    }, 100);
    
    this.progressIntervals.push(interval);
  }

  initVideoControls() {
    this.videoControlButtons = this.querySelectorAll('.foysal-video-control-button');
    this.videoControlButtons.forEach(button => {
      button.addEventListener('click', (e) => {
        const slide = button.closest('.foysal-video-slideshow__slide');
        const video = slide.querySelector('video');
        
        if (!video) return;
        
        if (button.querySelector('path[d*="M8,5"]')) {
          // Play button
          video.play();
          button.innerHTML = '<svg class="icon" viewBox="0 0 24 24"><path fill="currentColor" d="M14,19H18V5H14M6,19H10V5H6V19Z" /></svg>';
          video.muted = false; // Unmute when playing
        } else if (button.querySelector('path[d*="M14,19H18"]')) {
          // Pause button
          video.pause();
          button.innerHTML = '<svg class="icon" viewBox="0 0 24 24"><path fill="currentColor" d="M8,5.14V19.14L19,12.14L8,5.14Z" /></svg>';
        } else if (button.querySelector('path[d*="M3,9V15H7L12,20V4L7,9H3Z"]')) {
          // Mute/unmute button
          video.muted = !video.muted;
          if (video.muted) {
            button.innerHTML = '<svg class="icon" viewBox="0 0 24 24"><path fill="currentColor" d="M12,4L9.91,6.09L12,8.18M4.27,3L3,4.27L7.73,9H3V15H7L12,20V13.27L16.25,17.53C15.58,18.04 14.83,18.46 14,18.7V20.77C15.38,20.45 16.63,19.82 17.68,18.96L19.73,21L21,19.73L12,10.73M19,12C19,12.94 18.8,13.82 18.46,14.64L19.97,16.15C20.62,14.91 21,13.5 21,12C21,7.72 18,4.14 14,3.23V5.29C16.89,6.15 19,8.83 19,12M16.5,12C16.5,10.23 15.5,8.71 14,7.97V10.18L16.45,12.63C16.5,12.43 16.5,12.21 16.5,12Z" /></svg>';
          } else {
            button.innerHTML = '<svg class="icon" viewBox="0 0 24 24"><path fill="currentColor" d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z" /></svg>';
          }
        }
      });
    });
  }

  setAutoPlay() {
    this.autoplaySpeed = this.slider.dataset.speed * 1000;
    this.addEventListener('mouseover', this.focusInHandling.bind(this));
    this.addEventListener('mouseleave', this.focusOutHandling.bind(this));
    this.addEventListener('focusin', this.focusInHandling.bind(this));
    this.addEventListener('focusout', this.focusOutHandling.bind(this));

    if (this.querySelector('.foysal-video-slideshow__autoplay')) {
      this.sliderAutoplayButton = this.querySelector('.foysal-video-slideshow__autoplay');
      this.sliderAutoplayButton.addEventListener('click', this.autoPlayToggle.bind(this));
      this.autoplayButtonIsSetToPlay = true;
      this.play();
    } else {
      this.play();
    }
  }

  onButtonClick(event) {
    super.onButtonClick(event);
    this.wasClicked = true;

    const isFirstSlide = this.currentPage === 1;
    const isLastSlide = this.currentPage === this.sliderItemsToShow.length;

    if (!isFirstSlide && !isLastSlide) {
      return;
    }

    if (isFirstSlide && event.currentTarget.name === 'previous') {
      this.slideScrollPosition =
        this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length;
    } else if (isLastSlide && event.currentTarget.name === 'next') {
      this.slideScrollPosition = 0;
    }

    this.setSlidePosition(this.slideScrollPosition);
  }

  update() {
    super.update();
    this.sliderControlButtons = this.querySelectorAll('.foysal-video-slider-counter__link');
    this.prevButton.removeAttribute('disabled');

    if (!this.sliderControlButtons.length) return;

    this.sliderControlButtons.forEach((link) => {
      link.classList.remove('foysal-video-slider-counter__link--active');
      link.removeAttribute('aria-current');
    });
    this.sliderControlButtons[this.currentPage - 1].classList.add('foysal-video-slider-counter__link--active');
    this.sliderControlButtons[this.currentPage - 1].setAttribute('aria-current', true);
    
    // Update progress bar for current slide
    this.updateProgressBar(this.currentPage - 1);
  }

  autoPlayToggle() {
    this.togglePlayButtonState(this.autoplayButtonIsSetToPlay);
    this.autoplayButtonIsSetToPlay ? this.pause() : this.play();
    this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay;
  }

  focusOutHandling(event) {
    if (this.sliderAutoplayButton) {
      const focusedOnAutoplayButton =
        event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target);
      if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return;
      this.play();
    } else {
      this.play();
    }
  }

  focusInHandling(event) {
    if (this.sliderAutoplayButton) {
      const focusedOnAutoplayButton =
        event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target);
      if (focusedOnAutoplayButton && this.autoplayButtonIsSetToPlay) {
        this.play();
      } else if (this.autoplayButtonIsSetToPlay) {
        this.pause();
      }
    } else {
      this.pause();
    }
  }

  play() {
    this.slider.setAttribute('aria-live', 'off');
    clearInterval(this.autoplay);
    this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed);
    
    // Update progress bars
    this.updateProgressBar(this.currentPage - 1);
  }

  pause() {
    this.slider.setAttribute('aria-live', 'polite');
    clearInterval(this.autoplay);
    
    // Clear progress bar intervals
    this.progressIntervals.forEach(interval => clearInterval(interval));
    this.progressIntervals = [];
  }

  togglePlayButtonState(pauseAutoplay) {
    if (pauseAutoplay) {
      this.sliderAutoplayButton.classList.add('foysal-video-slideshow__autoplay--paused');
      this.sliderAutoplayButton.setAttribute('aria-label', window.accessibilityStrings.playSlideshow);
    } else {
      this.sliderAutoplayButton.classList.remove('foysal-video-slideshow__autoplay--paused');
      this.sliderAutoplayButton.setAttribute('aria-label', window.accessibilityStrings.pauseSlideshow);
    }
  }

  autoRotateSlides() {
    const slideScrollPosition =
      this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.sliderItemOffset;

    this.setSlidePosition(slideScrollPosition);
  }

  setSlideVisibility(event) {
    this.sliderItemsToShow.forEach((item, index) => {
      const linkElements = item.querySelectorAll('a');
      const videoElements = item.querySelectorAll('video');
      
      if (index === this.currentPage - 1) {
        if (linkElements.length)
          linkElements.forEach((button) => {
            button.removeAttribute('tabindex');
          });
        item.setAttribute('aria-hidden', 'false');
        item.removeAttribute('tabindex');
        
        videoElements.forEach((video) => {
          this.loadVideo(video);
          video.play().catch(() => {});
        });
      } else {
        if (linkElements.length)
          linkElements.forEach((button) => {
            button.setAttribute('tabindex', '-1');
          });
        item.setAttribute('aria-hidden', 'true');
        item.setAttribute('tabindex', '-1');
        
        videoElements.forEach((video) => {
          if (Math.abs(index - (this.currentPage - 1)) > 1) {
            this.unloadVideo(video);
          } else {
            video.pause();
          }
        });
      }
    });
    
    this.preloadNextSlide();
    this.wasClicked = false;
  }

  linkToSlide(event) {
    event.preventDefault();
    const slideScrollPosition =
      this.slider.scrollLeft +
      this.sliderFirstItemNode.clientWidth *
        (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage);
    this.slider.scrollTo({
      left: slideScrollPosition,
    });
  }
}

customElements.define('foysal-video-slideshow-component', FoysalVideoSlideshowComponent);
</script>

{%- if request.design_mode -%}
  <script src="{{ 'theme-editor.js' | asset_url }}" defer="defer"></script>
{%- endif -%}

{% schema %}
{
  "name": "Premium Video Slideshow",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "select",
      "id": "layout",
      "options": [
        {
          "value": "full_bleed",
          "label": "Full width"
        },
        {
          "value": "grid",
          "label": "Grid"
        }
      ],
      "default": "full_bleed",
      "label": "Layout"
    },
    {
      "type": "select",
      "id": "slide_height",
      "options": [
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "medium",
          "label": "Medium"
        },
        {
          "value": "large",
          "label": "Large"
        }
      ],
      "default": "medium",
      "label": "Slide height"
    },
    {
      "type": "select",
      "id": "slider_visual",
      "options": [
        {
          "value": "dots",
          "label": "Dots"
        },
        {
          "value": "counter",
          "label": "Counter"
        },
        {
          "value": "numbers",
          "label": "Numbers"
        }
      ],
      "default": "counter",
      "label": "Slider navigation style"
    },
    {
      "type": "checkbox",
      "id": "auto_rotate",
      "label": "Auto-rotate slides",
      "default": false
    },
    {
      "type": "range",
      "id": "change_slides_speed",
      "min": 3,
      "max": 9,
      "step": 2,
      "unit": "s",
      "label": "Change slides every",
      "default": 5
    },
    {
      "type": "header",
      "content": "Mobile settings"
    },
    {
      "type": "checkbox",
      "id": "show_text_below",
      "label": "Show text below video on mobile",
      "default": true
    },
    {
      "type": "header",
      "content": "Accessibility"
    },
    {
      "type": "text",
      "id": "accessibility_info",
      "label": "Accessibility label",
      "info": "Describe the slideshow for screen readers",
      "default": "Video slideshow"
    },
    {
      "type": "header",
      "content": "Premium Features",
      "info": "Additional premium features added by Foysal Ahmed"
    },
    {
      "type": "checkbox",
      "id": "show_cta_buttons",
      "label": "Show call-to-action buttons",
      "default": true,
      "info": "Display YouTube and Hire Me buttons"
    }
  ],
  "blocks": [
    {
      "type": "slide",
      "name": "Video slide",
      "limit": 5,
      "settings": [
        {
          "type": "url",
          "id": "video_url",
          "label": "Video URL",
          "info": "Upload video to Files section, then paste the URL here. Supports MP4 format for best compatibility."
        },
        {
          "type": "checkbox",
          "id": "muted",
          "label": "Mute video",
          "default": true,
          "info": "Uncheck to enable sound (autoplay may still require muted in some browsers)"
        },
        {
          "type": "select",
          "id": "video_aspect_ratio",
          "options": [
            {
              "value": "16-9",
              "label": "16:9 (Widescreen)"
            },
            {
              "value": "4-3",
              "label": "4:3 (Standard)"
            },
            {
              "value": "21-9",
              "label": "21:9 (Ultrawide)"
            }
          ],
          "default": "16-9",
          "label": "Video aspect ratio"
        },
        {
          "type": "range",
          "id": "video_overlay_opacity",
          "min": 0,
          "max": 100,
          "step": 10,
          "unit": "%",
          "label": "Video overlay opacity",
          "default": 0
        },
        {
          "type": "header",
          "content": "Text content"
        },
        {
          "type": "inline_richtext",
          "id": "heading",
          "default": "Video slide heading",
          "label": "Heading"
        },
        {
          "type": "select",
          "id": "heading_size",
          "options": [
            {
              "value": "h2",
              "label": "Small"
            },
            {
              "value": "h1",
              "label": "Medium"
            },
            {
              "value": "h0",
              "label": "Large"
            },
            {
              "value": "hxl",
              "label": "Extra large"
            },
            {
              "value": "hxxl",
              "label": "XX-Large"
            }
          ],
          "default": "h1",
          "label": "Heading size"
        },
        {
          "type": "inline_richtext",
          "id": "subheading",
          "default": "Tell your story with engaging video content",
          "label": "Subheading"
        },
        {
          "type": "header",
          "content": "Button"
        },        
        {
          "type": "text",
          "id": "button_label",
          "default": "Learn more",
          "label": "Button label",
          "info": "Leave empty to hide button"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Button link"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary",
          "label": "Use secondary button style",
          "default": false
        },
        {
          "type": "header",
          "content": "Layout"
        },         
        {
          "type": "checkbox",
          "id": "show_text_box",
          "label": "Show text box background",
          "default": true
        },
        {
          "type": "select",
          "id": "box_align",
          "options": [
            {
              "value": "top-left",
              "label": "Top left"
            },
            {
              "value": "top-center",
              "label": "Top center"
            },
            {
              "value": "top-right",
              "label": "Top right"
            },
            {
              "value": "middle-left",
              "label": "Middle left"
            },
            {
              "value": "middle-center",
              "label": "Middle center"
            },
            {
              "value": "middle-right",
              "label": "Middle right"
            },
            {
              "value": "bottom-left",
              "label": "Bottom left"
            },
            {
              "value": "bottom-center",
              "label": "Bottom center"
            },
            {
              "value": "bottom-right",
              "label": "Bottom right"
            }
          ],
          "default": "middle-center",
          "label": "Text alignment on video"
        },
        {
          "type": "select",
          "id": "text_alignment",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "default": "center",
          "label": "Text alignment"
        },
        {
          "type": "select",
          "id": "text_alignment_mobile",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "default": "center",
          "label": "Mobile text alignment"
        },        
        {
          "type": "color_scheme",
          "id": "color_scheme",
          "label": "Color scheme",
          "default": "scheme-1"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Premium Video Slideshow",
      "blocks": [
        {
          "type": "slide"
        },
        {
          "type": "slide"
        }
      ]
    }
  ]
}
{% endschema %}l code snippet here -->