.animated-text {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.words {
  display: inline-block;
  height: 120px; /* same as line height */
  line-height: 120px;
  overflow: hidden;
  position: relative;
}

.words span {
  display: block;
  line-height: 120px;
  animation: scrollWords 6s infinite;
}

/* @keyframes scrollWords {
  0%   { transform: translateY(0%); }
  20%  { transform: translateY(0%); }

  33%  { transform: translateY(-100%); }
  53%  { transform: translateY(-100%); }

  66%  { transform: translateY(-200%); }
  86%  { transform: translateY(-200%); }

  100% { transform: translateY(0%); }
} */

@keyframes scrollWords {
  0%,
  15% {
    transform: translateY(0%);
  } /* Code */
  25%,
  40% {
    transform: translateY(-100%);
  } /* API */
  50%,
  65% {
    transform: translateY(-200%);
  } /* Script */
  75%,
  90% {
    transform: translateY(-300%);
  } /* Software */
  100% {
    transform: translateY(0%);
  } /* back to Code */
}

.marquee-container {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

.marquee {
  display: inline-flex;
  justify-content: space-around;
  column-gap: 60px;
  align-items: center;
  width: 100%;
  animation: marquee 20s alternate infinite;
  white-space: nowrap;

  @media (max-width: 768px) {
    column-gap: 40px;
    width: 175%;

    animation-name: marquee-tablet;
  }

  @media (max-width: 425px) {
    column-gap: 40px;
    width: 225%;

    animation-name: marquee-mobile;
  }
}

.marquee2 {
  margin-left: 4rem;
}

@keyframes marquee {
  0% {
    transform: translateX(10%);
  }
  100% {
    transform: translateX(-110%);
  }
}

@keyframes marquee-tablet {
  0% {
    transform: translateX(10%);
  }
  100% {
    transform: translateX(-150%);
  }
}

@keyframes marquee-mobile {
  0% {
    transform: translateX(10%);
  }
  100% {
    transform: translateX(-175%);
  }
}

.swiper-pagination.home-swiper {
  background-color: #ffffff80;
  max-width: max-content;
  margin-inline: auto;
  border-radius: 10px;
  padding: 0 0.25rem;
  left: 50%;
  transform: translateX(-50%);
  line-height: 1rem;
  /* bottom: 310px; */
}

.bg {
  opacity: 0.90;
  height: 100%;
  object-fit: cover;
}

.meta {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 20;
  pointer-events: none;
  color: #fff;
  transition: transform 300ms ease, opacity 300ms ease;
  height: max-content;

  & > div {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

.name {
  font-weight: 600;
  font-size: 24px;
  display: block;
}
.role {
  font-size: 18px;
  color: #EDF2FF;
  display: block;
  margin-top: 12px;
}

/* responsive tweaks */
@media (max-width: 900px) {
  .carousel {
    height: 380px;
    gap: 12px;
  }
  .slide {
    min-width: 60px;
  }
}
@media (max-width: 520px) {
  .carousel {
    height: 320px;
    gap: 8px;
  }
  .slide {
    min-width: 48px;
  }
}