.iboost-jewelry-slider .iboost-circle-svg,
.iboost-jewelry-slider .iboost-model-image-wrap {
  opacity: 0;
}

.iboost-jewelry-slide.is-animating .iboost-circle-svg,
.iboost-jewelry-slide.is-animating .iboost-model-image-wrap {
  opacity: 1;
}

.iboost-jewelry-slider,
.iboost-jewelry-slider * {
  box-sizing: border-box;
}

.iboost-jewelry-slider {
  align-items: center;
  background: #fff;
  display: flex;
  min-height: 720px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.iboost-slider-stage {
  flex: 1;
  height: 720px;
  min-width: 0;
  position: relative;
}

.iboost-jewelry-slide {
  align-items: center;
  display: flex;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  visibility: hidden;
}

.iboost-jewelry-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.iboost-slide-inner {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  max-width: 1500px;
  padding: 195px 80px 25px;
  position: relative;
  width: 100%;
}

.iboost-slide-visual {
  flex: 0 0 350px;
  height: 350px;
  margin: 0 12px;
  position: relative;
  transform: translateY(40px);
  width: 350px;
  z-index: 2;
}

.iboost-circle-wrap {
  display: block;
  height: 350px;
  opacity: 0;
  position: relative;
  transform: scale(0.6);
  transform-origin: center;
  visibility: hidden;
  width: 350px;
}

.iboost-jewelry-slide.is-animating .iboost-circle-wrap {
  animation: iboostZoomIn 0.85s cubic-bezier(0.2, 0.75, 0.25, 1) 0.45s forwards;
  visibility: visible;
}

@keyframes iboostZoomIn {
  0% {
    opacity: 0;
    transform: scale(0.6);
    visibility: hidden;
  }

  1% {
    visibility: visible;
  }

  100% {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
  }
}

.iboost-model-image-wrap {
  border-radius: 50%;
  height: 318px;
  left: 50%;
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 318px;
  z-index: 1;
}

.iboost-model-image {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.iboost-circle-svg {
  height: 350px;
  inset: 0;
  object-fit: contain;
  pointer-events: none;
  position: absolute;
  width: 350px;
  z-index: 2;
}

.iboost-slide-dots {
  align-items: center;
  bottom: calc(100% + 20px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  z-index: 3;
}

/* Dot starting state */
.iboost-dot {
  display: block;
  height: 60px;
  width: 60px;
  object-fit: contain;
  opacity: 1;
  transform: translateY(60px);
  visibility: hidden;
}

.iboost-jewelry-slide.is-animating .iboost-dot-bottom {
  animation: iboostDotSlideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.8s forwards;
}

.iboost-jewelry-slide.is-animating .iboost-dot-top {
  animation: iboostDotSlideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.3s forwards;
}

@keyframes iboostDotSlideUp {
  from {
    visibility: visible;
    transform: translateY(70px);
  }

  to {
    visibility: visible;
    transform: translateY(0);
  }
}

.iboost-slide-text {
  color: #050505;
  flex: 1;
  font-family: "Times New Roman", Times, serif;
  font-size: clamp(52px, 5vw, 92px);
  font-weight: 400;
  line-height: 0.95;
  position: relative;
  white-space: nowrap;
  z-index: 3;
}

.iboost-slide-text-left {
  opacity: 0;
  text-align: right;
  top: -54px;
  transform: translateY(46px);
}

.iboost-slide-text-right {
  opacity: 0;
  text-align: left;
  top: -13px;
  transform: translateY(-46px);
}

.iboost-jewelry-slide.is-animating .iboost-slide-text-left {
  animation: iboostFadeUp 0.8s cubic-bezier(0.2, 0.75, 0.25, 1) 0.58s forwards;
}

.iboost-jewelry-slide.is-animating .iboost-slide-text-right {
  animation: iboostFadeDown 0.8s cubic-bezier(0.2, 0.75, 0.25, 1) 0.7s forwards;
}

.iboost-slider-arrow {
  align-items: center;
  background: transparent;
  border: 1px solid #171717;
  border-radius: 50%;
  color: #171717;
  cursor: pointer;
  display: flex;
  flex: 0 0 46px;
  font-family: Arial, sans-serif;
  font-size: 30px;
  height: 46px;
  justify-content: center;
  line-height: 1;
  margin: 0 38px;
  padding: 0 0 3px;
  position: relative;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
  width: 46px;
  z-index: 6;
}

.iboost-slider-arrow:hover {
  background: #171717;
  color: #fff;
}

@keyframes iboostFadeUp {
  from {
    opacity: 0;
    transform: translateY(38px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes iboostFadeDown {
  from {
    opacity: 0;
    transform: translateY(-38px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes iboostZoomIn {
  from {
    opacity: 0;
    transform: scale(0.6);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 1100px) {
  .iboost-slide-inner {
    padding: 185px 40px 25px;
  }

  .iboost-slide-visual,
  .iboost-circle-wrap,
  .iboost-circle-svg {
    height: 330px;
    width: 330px;
  }

  .iboost-slide-visual {
    flex-basis: 330px;
    transform: translateY(35px);
  }

  .iboost-model-image-wrap {
    height: 280px;
    width: 280px;
  }

  .iboost-slide-text {
    font-size: clamp(44px, 5vw, 70px);
  }

  .iboost-slide-text-left {
    top: -35px;
  }

  .iboost-slide-text-right {
    top: -10px;
  }

  .iboost-dot {
    height: 70px;
    width: 70px;
  }
}

@media (max-width: 820px) {
  .iboost-jewelry-slider {
    min-height: 820px;
  }

  .iboost-slider-stage {
    height: 820px;
  }

  .iboost-slide-inner {
    flex-direction: column;
    padding: 190px 60px 35px;
  }

  .iboost-slide-visual {
    flex-basis: auto;
    height: 390px;
    margin: 14px 0;
    order: 2;
    transform: translateY(25px);
    width: 390px;
  }

  .iboost-circle-wrap,
  .iboost-circle-svg {
    height: 390px;
    width: 390px;
  }

  .iboost-model-image-wrap {
    height: 332px;
    width: 332px;
  }

  .iboost-dot {
    height: 70px;
    width: 70px;
  }

  .iboost-slide-dots {
    gap: 16px;
  }

  .iboost-slide-text {
    font-size: clamp(42px, 9vw, 68px);
    text-align: center;
    white-space: normal;
    width: 100%;
  }

  .iboost-slide-text-left {
    order: 1;
    top: 20px;
  }

  .iboost-slide-text-right {
    order: 3;
    top: 25px;
  }

  .iboost-slider-arrow {
    margin: 0 16px;
  }
}

@media (max-width: 520px) {
  .iboost-jewelry-slider {
    min-height: 820px;
  }

  .iboost-slider-stage {
    height: 820px;
  }

  .iboost-slide-inner {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 190px 18px 90px;
    width: 100%;
  }

  /* LEFT TEXT */
  .iboost-slide-text-left {
    flex: none;
    font-size: 40px;
    margin: 0 0 35px;
    order: 1;
    position: relative;
    text-align: center;
    top: 0;
    width: 100%;
  }

  /* CENTER IMAGE AREA */
  .iboost-slide-visual {
    flex: none;
    height: 330px;
    margin: 145px auto 0;
    order: 2;
    position: relative;
    transform: none;
    width: 330px;
  }

  .iboost-circle-wrap,
  .iboost-circle-svg {
    height: 330px;
    width: 330px;
  }

  .iboost-model-image-wrap {
    height: 305px;
    width: 305px;
  }

  /* DOT AREA ABOVE CIRCLE */
  .iboost-slide-dots {
    bottom: calc(100% + 18px);
    gap: 14px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
  }

  .iboost-dot {
    height: 58px;
    width: 58px;
  }

  /* RIGHT TEXT */
  .iboost-slide-text-right {
    flex: none;
    font-size: 40px;
    margin: 28px 0 0;
    order: 3;
    position: relative;
    text-align: center;
    top: 0;
    width: 100%;
  }

  .iboost-slide-text {
    line-height: 1;
    white-space: normal;
  }

  /* NAVIGATION */
  .iboost-slider-arrow {
    bottom: 25px;
    height: 44px;
    margin: 0;
    position: absolute;
    width: 44px;
  }

  .iboost-slider-prev {
    left: 20px;
  }

  .iboost-slider-next {
    right: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iboost-jewelry-slide.is-active .iboost-circle-wrap,
  .iboost-jewelry-slide.is-active .iboost-dot,
  .iboost-jewelry-slide.is-active .iboost-slide-text {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}