/* Start Carousel Section */
.carousel__item.translate-x-0 .carousel__text {
  opacity: 0;
  transform: translate3d(0, 80%, 0);
  -webkit-transform: translate3d(0, 80%, 0);
  -moz-transform: translate3d(0, 80%, 0);
  -ms-transform: translate3d(0, 80%, 0);
  -o-transform: translate3d(0, 80%, 0);
  animation: carouselText 1s ease forwards;
  -webkit-animation: carouselText 1s ease forwards;
  animation-delay: 0.8s;
}
@keyframes carouselText {
  0% {
    opacity: 0;
    transform: translate3d(0, 80%, 0);
    -webkit-transform: translate3d(0, 80%, 0);
    -ms-transform: translate3d(0, 80%, 0);
    -moz-transform: translate3d(0, 80%, 0);
    -o-transform: translate3d(0, 80%, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
  }
}
/* End Carousel Section */

/* Start Clients Animation */
.slider-container.active-static-con {
  align-items: center;
  justify-content: center;
}
.slider-container .slider-track {
  display: flex;
  gap: 2rem;
}
.slider-container .slider-track.active-static {
  width: calc(250px * var(--num));
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.slider-container .slider-track.active-anim {
  /* Card width * Number of cards (Main + Duplicate) */
  width: calc(250px * calc(var(--num) * 2));
}
.slider-container:nth-child(odd) .slider-track.active-anim {
  animation: moveScrollRightToLeft 40s linear infinite;
  -webkit-animation: moveScrollRightToLeft 40s linear infinite;
}
@keyframes moveScrollRightToLeft {
  0% {
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
  }
  /* If the direction LTR calc(250px*9) Else calc(-250px*9) */
  100% {
    transform: translateX(calc(250px * var(--num)));
    -webkit-transform: translateX(calc(250px * var(--num)));
    -moz-transform: translateX(calc(250px * var(--num)));
    -ms-transform: translateX(calc(250px * var(--num)));
    -o-transform: translateX(calc(250px * var(--num)));
}
}
.slider-container:nth-child(even) .slider-track.active-anim {
  animation: moveScrollLeftToRight 40s linear infinite;
  -webkit-animation: moveScrollLeftToRight 40s linear infinite;
}
@keyframes moveScrollLeftToRight {
  0% {
    transform: translateX(calc(250px * var(--num)));
    -webkit-transform: translateX(calc(250px * var(--num)));
    -moz-transform: translateX(calc(250px * var(--num)));
    -ms-transform: translateX(calc(250px * var(--num)));
    -o-transform: translateX(calc(250px * var(--num)));
}
  100% {
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
  }
}
.slider-container .slider-track:hover {
  animation-play-state: paused;
}
/* End Clients Animation */

.general__btn:not(.general__btn-submit):hover svg,
.service__btn:hover svg {
  animation: moveGeneralBtn 0.3s linear infinite alternate;
  -webkit-animation: moveGeneralBtn 0.3s linear infinite alternate;
}
@keyframes moveGeneralBtn {
  0% {
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
  }
  100% {
    transform: translateX(-10px);
    -webkit-transform: translateX(-10px);
    -moz-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    -o-transform: translateX(-10px);
  }
}

.general__btn.resume__btn:hover svg {
  animation: moveResumeBtn 0.3s linear infinite alternate;
  -webkit-animation: moveResumeBtn 0.3s linear infinite alternate;
}
@keyframes moveResumeBtn {
  0% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
  }
}

.about__content-logo,
.about__content-text,
.about__content-tags {
  opacity: 0;
}
.about__content-logo.active {
  animation: aboutAnimLogo 0.5s linear forwards;
  -webkit-animation: aboutAnimLogo 0.5s linear forwards;
}
.about__content-text.active {
  animation: aboutAnimText 0.5s linear forwards;
  -webkit-animation: aboutAnimText 0.5s linear forwards;
}
.about__content-tags.active {
  animation: aboutAnimTags 0.5s linear forwards;
  -webkit-animation: aboutAnimTags 0.5s linear forwards;
}

@keyframes aboutAnimLogo {
  0% {
    opacity: 0;
    transform: translateX(100px);
    -webkit-transform: translateX(100px);
    -moz-transform: translateX(100px);
    -ms-transform: translateX(100px);
    -o-transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
  }
}
@keyframes aboutAnimText {
  0% {
    opacity: 0;
    transform: translateX(-100px);
    -webkit-transform: translateX(-100px);
    -moz-transform: translateX(-100px);
    -ms-transform: translateX(-100px);
    -o-transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
  }
}
@keyframes aboutAnimTags {
  0% {
    opacity: 0;
    transform: translateY(100px);
    -webkit-transform: translateY(100px);
    -moz-transform: translateY(100px);
    -ms-transform: translateY(100px);
    -o-transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
  }
}

.contact-info__card,
.contact-map__card {
  opacity: 0;
}
.contact-info__card.active {
  animation: contactAnimInfo 0.5s linear forwards;
  -webkit-animation: contactAnimInfo 0.5s linear forwards;
}
.contact-map__card.active {
  animation: contactAnimMap 0.5s linear forwards;
  -webkit-animation: contactAnimMap 0.5s linear forwards;
}
@keyframes contactAnimInfo {
  0% {
    opacity: 0;
    transform: translateX(100px);
    -webkit-transform: translateX(100px);
    -moz-transform: translateX(100px);
    -ms-transform: translateX(100px);
    -o-transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
  }
}
@keyframes contactAnimMap {
  0% {
    opacity: 0;
    transform: translateX(-100px);
    -webkit-transform: translateX(-100px);
    -moz-transform: translateX(-100px);
    -ms-transform: translateX(-100px);
    -o-transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
  }
}