:root {
  --rotate-speed: 20;
  --count: 8;
  --easeInOutSine: cubic-bezier(0.37, 0, 0.63, 1);
  --easing: cubic-bezier(0, 0.37, 1, 0.63);
}

.void {
  width: 100%;
  max-width: 1024px;
  margin: auto;
  position: relative;
  /* aspect-ratio: 1 / 1; */
}
ul.rotate-ul:hover * {
  animation-play-state: paused;
}
ul.rotate-ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  outline: 2px dotted magenta;
  z-index: 1;
}
li.rotate-li {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* outline: 2px dashed cyan; */
  width: 100%;
  animation: rotateCW calc(var(--rotate-speed) * 1s) var(--easing) infinite;
}
.card {
  width: 27%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px 24px;
  gap: 8px;
  background: #ffffff;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0px 16px 32px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #535062;
  animation: rotateCCW calc(var(--rotate-speed) * 1s) var(--easing) infinite;
}
a {
  text-decoration: none;
  color: unset;
}
.model-name {
  font-weight: 500;
  font-size: 18px;
  line-height: 150%;
  color: #3b2ed0;
  display: block;
}

li:nth-child(2),
li:nth-child(2) .card {
  animation-delay: calc((var(--rotate-speed) / var(--count)) * -1s);
}
li:nth-child(3),
li:nth-child(3) .card {
  animation-delay: calc((var(--rotate-speed) / var(--count)) * -2s);
}
li:nth-child(4),
li:nth-child(4) .card {
  animation-delay: calc((var(--rotate-speed) / var(--count)) * -3s);
}
li:nth-child(5),
li:nth-child(5) .card {
  animation-delay: calc((var(--rotate-speed) / var(--count)) * -4s);
}
li:nth-child(6),
li:nth-child(6) .card {
  animation-delay: calc((var(--rotate-speed) / var(--count)) * -5s);
}
li:nth-child(7),
li:nth-child(7) .card {
  animation-delay: calc((var(--rotate-speed) / var(--count)) * -6s);
}
li:nth-child(8),
li:nth-child(8) .card {
  animation-delay: calc((var(--rotate-speed) / var(--count)) * -7s);
}

@keyframes rotateCW {
  from {
    transform: translate3d(0px, -50%, -1px) rotate(-45deg);
  }
  to {
    transform: translate3d(0px, -50%, 0px) rotate(-315deg);
  }
}
@keyframes rotateCCW {
  from {
    transform: rotate(45deg);
  }
  to {
    transform: rotate(315deg);
  }
}
@keyframes pulseGlow {
  from {
    background-size: 60%;
  }
  to {
    background-size: 100%;
  }
}

.center-circle {
  position: absolute;
  width: 230px;
  aspect-ratio: 1 / 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  box-shadow: 0px 18px 36px -18px rgba(12, 5, 46, 0.3), 0px 30px 60px -12px rgba(12, 5, 46, 0.25);
  border-radius: 50%;
}
.second-circle {
  position: absolute;
  width: 40%;
  aspect-ratio: 1 / 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #f5f4fe;
  opacity: 0.5;
  box-shadow: 0px 18px 36px -18px rgba(12, 5, 46, 0.3), 0px 30px 60px -12px rgba(12, 5, 46, 0.25);
  border-radius: 50%;
}
.last-circle {
  position: absolute;
  width: 66%;
  aspect-ratio: 1 / 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #f5f4fe;
  opacity: 0.25;
  box-shadow: 0px 18px 36px -18px rgba(12, 5, 46, 0.3), 0px 30px 60px -12px rgba(12, 5, 46, 0.25);
  border-radius: 50%;
}
.crop {
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1));
}
.mask {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50%;
  animation: pulseGlow 5s linear infinite alternate;
  background-position: 100% 50%;
  background-repeat: no-repeat;
  background-image: radial-gradient(100% 50% at 100% 50%, rgba(13, 148, 136, 0.25) 0%, rgba(13, 148, 136, 0.247) 11.79%, rgba(13, 148, 136, 0.242) 21.38%, rgba(13, 148, 136, 0.232) 29.12%, rgba(13, 148, 136, 0.219) 35.34%, rgba(13, 148, 136, 0.204) 40.37%, rgba(13, 148, 136, 0.187) 44.56%, rgba(13, 148, 136, 0.167) 48.24%, rgba(13, 148, 136, 0.147) 51.76%, rgba(13, 148, 136, 0.126) 55.44%, rgba(13, 148, 136, 0.103) 59.63%, rgba(13, 148, 136, 0.081) 64.66%, rgba(13, 148, 136, 0.059) 70.88%, rgba(13, 148, 136, 0.038) 78.62%, rgba(13, 148, 136, 0.018) 88.21%, rgba(13, 148, 136, 0) 100%);
}
.mask:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 100%;
  right: 0;
  display: block;
  background-image: linear-gradient(180deg, rgba(13, 148, 136, 0) 0%, #0d9488 50%, rgba(13, 148, 136, 0) 100%);
}

@media (max-width: 767px) {
  #sliderWrapper button {
    margin-top: 50px;
  }
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

.float-animation {
  animation: float 2s ease-in-out infinite;
}

.writing-vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.team-card {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
}

.team-avatar {
  height: 300px;
  object-fit: cover;
}

.team-carousel-track {
  transition: transform 0.4s ease-in-out;
}

.scale-150 {
  transform: scale(1.8);
}