@charset "utf-8";

.certification-main .page-container {
  display: block;
}

.certification-main .page-main {
  width: 100%;
}

.certificate-section {
  --certificate-width: 490px;
  padding: 70px 0;
  background: #fff;
}

.certificate-carousel {
  --drag-offset: 0px;
  position: relative;
  overflow: hidden;
  padding-top: 30px;
  padding-bottom: 42px;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}

.certificate-carousel.is-dragging {
  cursor: grabbing;
}

.certificate-carousel.is-dragging .certificate-slide,
.certificate-carousel.is-dragging .certificate-slide::after {
  transition-duration: 0s;
}

.certificate-stage {
  position: relative;
  height: 760px;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.certificate-slide {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: var(--certificate-width);
  max-width: 34vw;
  aspect-ratio: .7 / 1;
  opacity: 0;
  transform: translateX(calc(-50% + var(--drag-offset))) translateZ(-20px) scale(.9);
  transform-origin: center center;
  transition: transform .9s cubic-bezier(.22, 1, .36, 1), opacity .9s cubic-bezier(.22, 1, .36, 1);
  will-change: transform, opacity;
}

.certificate-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .9s cubic-bezier(.22, 1, .36, 1);
}

.certificate-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
}

.certificate-slide.is-active {
  left: calc(50% - (min(var(--certificate-width), 34vw) / 2));
  z-index: 5;
  opacity: 1;
  transform: translateX(var(--drag-offset));
}

.certificate-slide.is-prev,
.certificate-slide.is-next {
  z-index: 4;
  opacity: .82;
}

.certificate-slide.is-prev {
  transform: translateX(calc(-50% - 250px + var(--drag-offset))) translateZ(-20px) rotateY(20deg) scale(.98);
}

.certificate-slide.is-next {
  transform: translateX(calc(-50% + 250px + var(--drag-offset))) translateZ(-20px) rotateY(-20deg) scale(.98);
}

.certificate-slide.is-prev2,
.certificate-slide.is-next2 {
  z-index: 3;
  opacity: .62;
}

.certificate-slide.is-prev3,
.certificate-slide.is-next3 {
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}

.certificate-slide.is-prev2 {
  transform: translateX(calc(-50% - 500px + var(--drag-offset))) translateZ(-40px) rotateY(20deg) scale(.94);
}

.certificate-slide.is-next2 {
  transform: translateX(calc(-50% + 500px + var(--drag-offset))) translateZ(-40px) rotateY(-20deg) scale(.94);
}

.certificate-slide.is-prev3 {
  transform: translateX(calc(-50% - 750px + var(--drag-offset))) translateZ(-60px) rotateY(20deg) scale(.9);
}

.certificate-slide.is-next3 {
  transform: translateX(calc(-50% + 750px + var(--drag-offset))) translateZ(-60px) rotateY(-20deg) scale(.9);
}

.certificate-slide.is-prev::after,
.certificate-slide.is-prev2::after {
  opacity: 1;
  background: linear-gradient(90deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0));
}

.certificate-slide.is-next::after,
.certificate-slide.is-next2::after {
  opacity: 1;
  background: linear-gradient(270deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0));
}

.certificate-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.certificate-dot {
  width: 16px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: #d2d2d2;
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}

.certificate-dot.active {
  width: 34px;
  background: var(--accentcolor);
}

@media (max-width: 1440px) {
  .certificate-section {
    --certificate-width: 440px;
  }

  .certificate-stage {
    height: 690px;
  }

  .certificate-slide.is-prev {
    transform: translateX(calc(-50% - 225px + var(--drag-offset))) translateZ(-20px) rotateY(20deg) scale(.98);
  }

  .certificate-slide.is-next {
    transform: translateX(calc(-50% + 225px + var(--drag-offset))) translateZ(-20px) rotateY(-20deg) scale(.98);
  }

  .certificate-slide.is-prev2 {
    transform: translateX(calc(-50% - 450px + var(--drag-offset))) translateZ(-40px) rotateY(20deg) scale(.94);
  }

  .certificate-slide.is-next2 {
    transform: translateX(calc(-50% + 450px + var(--drag-offset))) translateZ(-40px) rotateY(-20deg) scale(.94);
  }

  .certificate-slide.is-prev3 {
    transform: translateX(calc(-50% - 675px + var(--drag-offset))) translateZ(-60px) rotateY(20deg) scale(.9);
  }

  .certificate-slide.is-next3 {
    transform: translateX(calc(-50% + 675px + var(--drag-offset))) translateZ(-60px) rotateY(-20deg) scale(.9);
  }
}

@media (max-width: 1024px) {
  .certificate-section {
    --certificate-width: 360px;
    padding: 40px 0;
  }

  .certificate-stage {
    height: 560px;
  }

  .certificate-slide {
    max-width: 48vw;
  }

  .certificate-slide.is-active {
    left: calc(50% - (min(var(--certificate-width), 48vw) / 2));
  }

  .certificate-slide.is-prev {
    transform: translateX(calc(-50% - 190px + var(--drag-offset))) translateZ(-20px) rotateY(20deg) scale(.96);
  }

  .certificate-slide.is-next {
    transform: translateX(calc(-50% + 190px + var(--drag-offset))) translateZ(-20px) rotateY(-20deg) scale(.96);
  }

  .certificate-slide.is-prev2,
  .certificate-slide.is-next2 {
    opacity: .42;
  }

  .certificate-slide.is-prev2 {
    transform: translateX(calc(-50% - 380px + var(--drag-offset))) translateZ(-40px) rotateY(20deg) scale(.92);
  }

  .certificate-slide.is-next2 {
    transform: translateX(calc(-50% + 380px + var(--drag-offset))) translateZ(-40px) rotateY(-20deg) scale(.92);
  }

  .certificate-slide.is-prev3 {
    transform: translateX(calc(-50% - 570px + var(--drag-offset))) translateZ(-60px) rotateY(20deg) scale(.88);
  }

  .certificate-slide.is-next3 {
    transform: translateX(calc(-50% + 570px + var(--drag-offset))) translateZ(-60px) rotateY(-20deg) scale(.88);
  }
}

@media (max-width: 640px) {
  .certificate-section {
    --certificate-width: 280px;
  }

  .certificate-stage {
    height: 430px;
  }

  .certificate-slide {
    max-width: 72vw;
  }

  .certificate-slide.is-active {
    left: calc(50% - (min(var(--certificate-width), 72vw) / 2));
  }

  .certificate-slide.is-prev,
  .certificate-slide.is-next {
    opacity: .45;
  }

  .certificate-slide.is-prev {
    transform: translateX(calc(-50% - 145px + var(--drag-offset))) translateZ(-20px) rotateY(20deg) scale(.9);
  }

  .certificate-slide.is-next {
    transform: translateX(calc(-50% + 145px + var(--drag-offset))) translateZ(-20px) rotateY(-20deg) scale(.9);
  }

  .certificate-slide.is-prev2,
  .certificate-slide.is-next2,
  .certificate-slide.is-prev3,
  .certificate-slide.is-next3 {
    opacity: 0;
  }

  .certificate-slide.is-prev3 {
    transform: translateX(calc(-50% - 435px + var(--drag-offset))) translateZ(-60px) rotateY(20deg) scale(.86);
  }

  .certificate-slide.is-next3 {
    transform: translateX(calc(-50% + 435px + var(--drag-offset))) translateZ(-60px) rotateY(-20deg) scale(.86);
  }
}