.textReveal.active::after,
.textReveal.active::after {
   animation: a-ltr-after 1.5s cubic-bezier(0.77, 0, 0.18, 1) forwards;
}

.textReveal.active::before,
.textReveal.active::before {
   animation: a-ltr-before 1.5s cubic-bezier(0.77, 0, 0.18, 1) forwards;
}

#intro .intro-content h2 .textReveal.active::before,
#intro .intro-content h2 .textReveal.active::after,
#intro .intro-content p .textReveal.active:nth-of-type(1)::before,
#intro .intro-content p .textReveal.active:nth-of-type(1)::after {
   animation-delay: 1s;
}

#intro .intro-content p .textReveal.active:nth-of-type(2)::before,
#intro .intro-content p .textReveal.active:nth-of-type(2)::after {
   animation-delay: 1.25s;
}

#intro .intro-content p .textReveal.active:nth-of-type(3)::before,
#intro .intro-content p .textReveal.active:nth-of-type(3)::after {
   animation-delay: 1.5s;
}

#about .textReveal.active:nth-of-type(2)::after,
#about .textReveal.active:nth-of-type(2)::before {
   animation-delay: 0.05s;
}
#about .textReveal.active:nth-of-type(3)::after,
#about .textReveal.active:nth-of-type(3)::before {
   animation-delay: 0.1s;
}
#about .textReveal.active:nth-of-type(4)::after,
#about .textReveal.active:nth-of-type(4)::before {
   animation-delay: 0.15s;
}
#about .textReveal.active:nth-of-type(5)::after,
#about .textReveal.active:nth-of-type(5)::before {
   animation-delay: 0.2s;
}
#about .textReveal.active:nth-of-type(6)::after,
#about .textReveal.active:nth-of-type(6)::before {
   animation-delay: 0.25s;
}

.about-img,
.contact-img,
.services_crm__img .crm_img,
.services_website__img .website_img,
.services_sla__img .sla_img {
   animation: elevation 1.5s ease 0s infinite alternate none;
}

.services_crm__img,
.services_website__img {
  animation: image-rtl linear both;
  animation-timeline: view();
  animation-range: entry 10% cover 40%;
}

.services_sla__img,
.services_dialer__img {
  animation: image-ltr linear both;
  animation-timeline: view();
  animation-range: entry 10% cover 40%;
}


#about .icon {
   animation-name: bounceXY;
   animation-duration: 3s;
   animation-timing-function: ease;
   animation-iteration-count: infinite;
}

.html_icon {
   animation-delay: 0.5s !important;
}

.css_icon {
   animation-delay: 1s;
}

.brackets_icon {
   animation-delay: 1.5s;
}

.selfClosed_icon {
   animation-delay: 2s;
}

.php_icon {
   animation-delay: 2.5s;
}

.letter {
   transform: translateY(10px);
   animation: bounceY 3s ease-in-out infinite;
}

.letter_r {
   animation-delay: 1s;
}
.letter_m {
   animation-delay: 2s;
}

.gear {
   animation: bounceX 2s ease infinite;
}

.gear.small-gear {
   animation-delay: 1s;
}

.toolkit-carousel {
   overflow: hidden;
   width: 100%;
   padding: 20px 0;
}
.marquee {
   display: inline-flex;
   width: 100%;
   white-space: nowrap;
}
.marquee-track {
   display: flex;
   animation: scroll-left 15s linear infinite;
   will-change: transform;
}
.marquee-item {
   flex: 0 0 auto;
   padding: 0 20px;
}
.marquee-item img {
   height: 50px;
   /* object-fit: contain; */
   filter: grayscale(100);
   opacity: 0.5;
}

@media (hover: hover) {
   .marquee-track:hover {
      animation-play-state: paused;
   }
}

@keyframes scroll-left {
   0% {
      transform: translate3d(0, 0, 0);
   }
   100% {
      transform: translate3d(-50%, 0, 0);
   }
}

@keyframes elevation {
   0% {
      transform: translateY(0);
   }

   100% {
      transform: translateY(5px);
   }
}

@keyframes bounceX {
   0%,
   100% {
      transform: translateX(0);
   }
   50% {
      transform: translateX(7px);
   }
}

@keyframes bounceY {
   0%,
   20%,
   100% {
      transform: translateY(10px);
   }
   10% {
      transform: translateY(0px);
   }
}

@keyframes bounceXY {
   0% {
      transform: translate(0, 0);
   }
   50% {
      transform: translate(5px, 2.5px);
   }
   100% {
      transform: translate(0, 0);
   }
}

@keyframes spin {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}

@keyframes a-ltr-after {
   0% {
      transform: translateX(-100%);
   }
   100% {
      transform: translateX(101%);
   }
}

@keyframes a-ltr-before {
   0% {
      transform: translateX(0);
   }
   100% {
      transform: translateX(201%);
   }
}

@keyframes image-ltr {
   from {
      transform: translateX(-100%);
   }

   to {
      transform: translateX(-10%);
   }
}

@keyframes image-rtl {
   from {
     transform: translateX(100%);
   }
   to {
     transform: translateX(10%);
   }
 }