/* SwiperJS fix */

div:has(> .swiper) {
  position: relative;
}

.swiper {
  margin-bottom: 5rem;
}

.swiper.swiper--coverflow {
  overflow: visible;
}

.swiper-wrapper {
  --col-gap: var(--wp--preset--spacing--30);
  --row-gap: var(--wp--preset--spacing--40);
  align-items: stretch !important;
}

.svc-swiper.swiper.swiper--lg-disabled > .swiper-wrapper {
  height: 28em;
}

.swiper-slide {
  display: flex !important;
  height: unset !important;
}

.swiper > .swiper-pagination {
  align-items: center;
  bottom: 0 !important;
  display: flex;
  gap: 0 0.7rem;
  justify-content: center;
  margin: var(--wp--preset--spacing--50) 0 0;
  position: relative;
}

.swiper-pagination .swiper-pagination-bullet {
  border-radius: 50% !important;
  background: var(--wp--preset--color--base-1);
  cursor: pointer;
  height: 12px !important;
  opacity: 0.2;
  transition: all 0.16s ease-in-out;
  width: 12px !important;
}

.swiper-pagination-bullet-active {
  background: var(--wp--preset--color--accent-1) !important;
  opacity: 1 !important;
}

.swiper-button-prev, 
.swiper-button-next {
  color: var(--wp--preset--color--accent-1) !important;
  outline: none;
  transition: color 0.16s ease-in-out;
}

.swiper-button-prev > svg, 
.swiper-button-next > svg {
  height: 4rem;
  width: 2rem;
}

@media (640px >= width) {

  .swiper.swiper--hide-duplicate-sm {
    margin-bottom: 1rem;
  }
  
  .swiper.swiper--coverflow .swiper-slide:not(.swiper-slide-active) > .card {
    opacity: 0.8;
  }
  
  .swiper-button-prev, 
  .swiper-button-next {
    border-radius: 50%;
  }
  
  .swiper-button-prev {
    left: -1.8rem !important;
  }

  .swiper-button-next {
    right: -1.8rem !important;
  }

  .swiper-button-prev > svg, 
  .swiper-button-next > svg {
    width: 2rem;
  }

  .swiper-pagination, 
  .swiper.swiper--hide-duplicate-sm > .swiper-wrapper > .swiper-slide.swiper-slide-duplicate, 
  .swiper.swiper--hide-duplicate-sm ~ .swiper-button-prev, 
  .swiper.swiper--hide-duplicate-sm ~ .swiper-button-next {
    display: none !important;
  }

}

@media (640px < width) {

  .swiper {
    margin-bottom: 3rem;
  }

  .svc-swiper.swiper.swiper--md-disabled > .swiper-wrapper, 
  .svc-swiper.swiper.swiper--lg-disabled > .swiper-wrapper {
    --col-gap: calc(var(--wp--preset--spacing--8)/2);
    border-radius: var(--wp--preset--spacing--10);
    overflow: hidden;
  }

  .svc-swiper.swiper.swiper--md-disabled > .swiper-wrapper > .swiper-slide, 
  .svc-swiper.swiper.swiper--lg-disabled > .swiper-wrapper > .swiper-slide {
    cursor: pointer;
    opacity: 1;
    transition: transform 0.4s ease-in-out, 
      width 0.4s ease-in-out, 
      z-index 0s 0.4s !important;
    top: 0;
    width: calc( ( 100% - 8px ) / 3) !important;
    z-index: 0 !important;
  }

  .svc-swiper.swiper > .swiper-wrapper > .swiper-slide:has(> #svc-1) {
    order: 0;
  }

  .svc-swiper.swiper > .swiper-wrapper > .swiper-slide:has(> #svc-2) {
    justify-content: center;
    order: 1;
  }
  
  .svc-swiper.swiper > .swiper-wrapper > .swiper-slide:has(> #svc-3) {
    justify-content: flex-end;
    order: 2;
  }
  
}

@media (640px < width <= 1024px) {

  .swiper.swiper--hide-duplicate-md {
    padding-bottom: 1rem;
  }
  
  .swiper.swiper--md-disabled {
    left: 0 !important;
    overflow: visible;
    padding-bottom: 1rem;
    width: 100% !important;
  }
  
  .swiper.swiper--md-disabled > .swiper-wrapper {
    flex-wrap: wrap;
    gap: var(--row-gap) var(--col-gap);
    transform: none !important;
  }
  
  .swiper.swiper--md-disabled > .swiper-wrapper > .swiper-slide {
    margin: 0 !important;
    transform: none !important;
    width: calc( (100% - ( var(--col-gap) * ( var(--swiper-slides-md) - 1 ) ) ) / var(--swiper-slides-md) ) !important;
    z-index: 0 !important;
  }
  
  .swiper.swiper--md-disabled .swiper-slide > .card {
    margin: 0 !important;
  }
  
  .swiper.swiper--coverflow:not(.swiper--md-disabled) .swiper-slide:not(.swiper-slide-active) > .card {
    opacity: 0.8;
  }
  
  .swiper.swiper--hide-duplicate-md > .swiper-wrapper > .swiper-slide.swiper-slide-duplicate, 
  .swiper.swiper--hide-duplicate-md > .swiper-pagination, 
  .swiper.swiper--hide-duplicate-md ~ .swiper-button-prev, 
  .swiper.swiper--hide-duplicate-md ~ .swiper-button-next, 
  .swiper.swiper--md-disabled > .swiper-wrapper > .swiper-slide.swiper-slide-duplicate, 
  .swiper.swiper--md-disabled ~ .swiper-button-prev, 
  .swiper.swiper--md-disabled ~ .swiper-button-next  {
    display: none !important;
  }
  
}

@media (782px <= width) {

  .swiper.benefit-swiper {
    margin: -6rem var(--wp--preset--spacing--60) -9rem;
  }

  .swiper-pagination {
    margin-bottom: calc(var(--wp--preset--spacing--10) * -1);
    padding-bottom: var(--wp--preset--spacing--10);
  }

  .swiper-pagination .swiper-pagination-bullet {
    background: var(--wp--preset--color--contrast-1);
  }

}

@media (782px > width) {

  .swiper.benefit-swiper {
    margin-bottom: 2rem;
  }

}

@media (1024px < width) {

  .swiper.benefit-swiper {
    margin: -6rem var(--wp--preset--spacing--40) -8rem;
  }

  .svc-swiper.swiper.swiper--lg-disabled > .swiper-wrapper {
    height: 30em;
  }

  .swiper.swiper--hide-duplicate-lg {
    margin-bottom: 1rem;
  }
  
  .swiper.swiper--lg-disabled {
    left: 0 !important;
    overflow: visible;
    margin-bottom: 1rem;
    width: 100% !important;
  }
  
  .swiper.swiper--lg-disabled > .swiper-wrapper {
    flex-wrap: wrap;
    gap: var(--row-gap) var(--col-gap);
    transform: none !important;
  }
  
  .swiper.swiper--lg-disabled > .swiper-wrapper > .swiper-slide {
    margin: 0 !important;
    transform: none !important;
    width: calc( (100% - ( var(--col-gap) * ( var(--swiper-slides-lg) - 1 ) ) ) / var(--swiper-slides-lg) ) !important;
    z-index: 0 !important;
  }
  
  .swiper.swiper--hide-duplicate-lg > .swiper-wrapper > .swiper-slide.swiper-slide-duplicate, 
  .swiper.swiper--hide-duplicate-lg > .swiper-pagination, 
  .swiper.swiper--hide-duplicate-lg ~ .swiper-button-prev, 
  .swiper.swiper--hide-duplicate-lg ~ .swiper-button-next, 
  .swiper.swiper--lg-disabled > .swiper-wrapper > .swiper-slide.swiper-slide-duplicate, 
  .swiper.swiper--lg-disabled ~ .swiper-button-prev, 
  .swiper.swiper--lg-disabled ~ .swiper-button-next {
    display: none !important;
  }
    
}

@media (hover: hover) {

  .swiper-pagination-bullet:hover:not(.swiper-pagination-bullet-active) {
    opacity: 0.5 !important;
  }

  .swiper-button-prev:hover, 
  .swiper-button-next:hover {
    color: var(--wp--preset--color--accent-2) !important;
  }

}