body {
  overflow-x: hidden;
}

.fan-slider-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  padding-top: 0;
  overflow-x: clip;
  box-sizing: border-box;
}
@media screen and (max-width: 1024px) {
  .fan-slider-wrapper {
    padding-top: 40px;
  }
}
@media screen and (max-width: 880px) {
  .fan-slider-wrapper {
    padding-top: 60px;
  }
}
@media screen and (max-width: 768px) {
  .fan-slider-wrapper {
    padding-top: 40px;
  }
}
@media screen and (max-width: 450px) {
  .fan-slider-wrapper {
    padding-top: 60px;
  }
}
.fan-slider-wrapper *,
.fan-slider-wrapper *::before,
.fan-slider-wrapper *::after {
  box-sizing: border-box;
}

.slider-outer {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slider-stage {
  position: relative;
  width: 100%;
  height: 960px;
}

.slide {
  position: absolute;
  bottom: 100px;
  overflow: hidden;
  transition: width 0.65s cubic-bezier(0.77, 0, 0.18, 1), height 0.65s cubic-bezier(0.77, 0, 0.18, 1), left 0.65s cubic-bezier(0.77, 0, 0.18, 1), bottom 0.65s cubic-bezier(0.77, 0, 0.18, 1), transform 0.65s cubic-bezier(0.77, 0, 0.18, 1), clip-path 0.65s cubic-bezier(0.77, 0, 0.18, 1), box-shadow 0.65s ease, opacity 0.65s ease;
  cursor: pointer;
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.slide.active {
  width: 800px;
  height: 800px;
  left: calc(50% - 400px);
  transform: rotate(0deg);
  transform-origin: bottom center;
  clip-path: inset(0 round 24px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
  z-index: 3;
}
.slide.prev {
  width: 770px;
  height: 770px;
  left: calc(50% - 1230px);
  bottom: 46px;
  transform: rotate(-8deg);
  transform-origin: bottom center;
  z-index: 2;
  opacity: 0.92;
  clip-path: inset(0 round 20px);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.14);
}
.slide.next {
  width: 770px;
  height: 770px;
  left: calc(50% + 460px);
  bottom: 46px;
  transform: rotate(8deg);
  transform-origin: bottom center;
  z-index: 2;
  opacity: 0.92;
  clip-path: inset(0 round 20px);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.14);
}
.slide.far-prev {
  width: 600px;
  height: 600px;
  left: calc(50% - 1950px);
  bottom: 27px;
  transform: rotate(-14deg);
  transform-origin: bottom center;
  clip-path: inset(0 round 20px);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
.slide.far-next {
  width: 600px;
  height: 600px;
  left: calc(50% + 1350px);
  bottom: 27px;
  transform: rotate(14deg);
  transform-origin: bottom center;
  clip-path: inset(0 round 20px);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
.slide.hidden {
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  left: calc(50% - 400px);
  transform: rotate(0deg);
  clip-path: inset(0 round 20px);
}

.nav-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  pointer-events: none;
  z-index: 10;
}

.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2.5px solid #f08300;
  background: rgba(255, 248, 240, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(240, 131, 0, 0.15);
  pointer-events: all;
  transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
}
.nav-btn:hover {
  background: #f08300;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 8px 24px rgba(240, 131, 0, 0.35);
}
.nav-btn:hover svg {
  stroke: #fff;
}
.nav-btn svg {
  width: 22px;
  height: 22px;
  stroke: #f08300;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.25s;
}
.nav-btn#prevBtn {
  left: 12px;
}
.nav-btn#nextBtn {
  right: 12px;
}

.dots {
  display: flex;
  gap: 16px;
  margin-top: -70px;
  z-index: 2;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  border: 1px solid #f08300;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
  padding: 0;
}
.dot:not(.active):hover {
  background: rgba(255, 255, 255, 0.8);
}
.dot.active {
  background: #f08300;
  transform: scale(1.45);
}

@media (max-width: 1024px) {
  .slider-stage {
    height: 760px;
  }
  .nav-overlay {
    width: min(100%, 960px);
  }
  .slide.active {
    width: 620px;
    height: 620px;
    left: calc(50% - 310px);
  }
  .slide.prev {
    width: 600px;
    height: 600px;
    left: calc(50% - 955px);
    bottom: 58px;
  }
  .slide.next {
    width: 600px;
    height: 600px;
    left: calc(50% + 360px);
    bottom: 58px;
  }
  .slide.far-prev {
    width: 460px;
    height: 460px;
    left: calc(50% - 1520px);
    bottom: 44px;
  }
  .slide.far-next {
    width: 460px;
    height: 460px;
    left: calc(50% + 1060px);
    bottom: 44px;
  }
  .slide.hidden {
    left: calc(50% - 310px);
  }
}
@media (max-width: 768px) {
  .slider-stage {
    height: 560px;
  }
  .nav-overlay {
    width: 100%;
  }
  .slide.active {
    width: 440px;
    height: 440px;
    left: calc(50% - 220px);
    bottom: 60px;
  }
  .slide.prev {
    width: 415px;
    height: 415px;
    left: calc(50% - 670px);
    bottom: 31px;
  }
  .slide.next {
    width: 415px;
    height: 415px;
    left: calc(50% + 255px);
    bottom: 31px;
  }
  .slide.far-prev {
    width: 320px;
    height: 320px;
    left: calc(50% - 1060px);
    bottom: 21px;
  }
  .slide.far-next {
    width: 320px;
    height: 320px;
    left: calc(50% + 745px);
    bottom: 21px;
  }
  .slide.hidden {
    left: calc(50% - 220px);
    bottom: 60px;
  }
  .nav-btn {
    width: 44px;
    height: 44px;
  }
  .nav-btn svg {
    width: 18px;
    height: 18px;
  }
  .dots {
    margin-top: -30px;
  }
  .dot {
    width: 10px;
    height: 10px;
  }
}
@media (max-width: 600px) {
  .slider-stage {
    height: 440px;
  }
  .nav-btn {
    width: 40px;
    height: 40px;
  }
  .nav-btn svg {
    width: 18px;
    height: 18px;
  }
  .slide.active {
    width: 340px;
    height: 340px;
    left: calc(50% - 170px);
    bottom: 60px;
  }
  .slide.prev {
    width: 320px;
    height: 320px;
    left: calc(50% - 520px);
    bottom: 38px;
  }
  .slide.next {
    width: 320px;
    height: 320px;
    left: calc(50% + 200px);
    bottom: 38px;
  }
  .slide.far-prev {
    width: 245px;
    height: 245px;
    left: calc(50% - 815px);
    bottom: 30px;
  }
  .slide.far-next {
    width: 245px;
    height: 245px;
    left: calc(50% + 575px);
    bottom: 30px;
  }
  .slide.hidden {
    left: calc(50% - 170px);
    bottom: 60px;
  }
  .dots {
    margin-top: -25px;
  }
}
@media (max-width: 450px) {
  .slider-stage {
    height: 415px;
  }
  .nav-btn {
    width: 32px;
    height: 32px;
    top: 44%;
  }
  .nav-btn svg {
    width: 16px;
    height: 16px;
  }
  .slide.active {
    width: 320px;
    height: 320px;
    left: calc(50% - 160px);
    bottom: 60px;
  }
  .slide.prev {
    width: 300px;
    height: 300px;
    left: calc(50% - 470px);
    bottom: 35px;
  }
  .slide.next {
    width: 300px;
    height: 300px;
    left: calc(50% + 170px);
    bottom: 35px;
  }
  .slide.far-prev {
    width: 230px;
    height: 230px;
    left: calc(50% - 725px);
    bottom: 22px;
  }
  .slide.far-next {
    width: 230px;
    height: 230px;
    left: calc(50% + 495px);
    bottom: 22px;
  }
  .slide.hidden {
    left: calc(50% - 160px);
    bottom: 60px;
  }
  .dots {
    margin-top: -40px;
  }
  .dot {
    width: 9px;
    height: 9px;
  }
}/*# sourceMappingURL=fan-slider.css.map */