/* =====================================================
   BASE
===================================================== */
.devsblink-ap-animate {
  opacity: 0;
  animation-duration: 0.8s;
  animation-fill-mode: both;
  animation-timing-function: ease-out;
  will-change: transform, opacity;
}

.devsblink-ap-animated {
  opacity: 1;
}

/* =====================================================
   FADE
===================================================== */
@keyframes devsblinkApFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.devsblink-ap-animated.devsblink-ap-fade-in,
.elementor-element.animated.devsblink-ap-fade-in {
  animation-name: devsblinkApFadeIn;
}

@keyframes devsblinkApFadeInDown {
  from {
    opacity: 0;
    transform: translateY(-70px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.devsblink-ap-animated.devsblink-ap-fade-in-down,
.elementor-element.animated.devsblink-ap-fade-in-down {
  animation-name: devsblinkApFadeInDown;
}

@keyframes devsblinkApFadeInUp {
  from {
    opacity: 0;
    transform: translateY(70px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.devsblink-ap-animated.devsblink-ap-fade-in-up,
.elementor-element.animated.devsblink-ap-fade-in-up {
  animation-name: devsblinkApFadeInUp;
}

@keyframes devsblinkApFadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-150px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.devsblink-ap-animated.devsblink-ap-fade-in-left,
.elementor-element.animated.devsblink-ap-fade-in-left {
  animation-name: devsblinkApFadeInLeft;
}

@keyframes devsblinkApFadeInRight {
  from {
    opacity: 0;
    transform: translateX(150px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.devsblink-ap-animated.devsblink-ap-fade-in-right,
.elementor-element.animated.devsblink-ap-fade-in-right {
  animation-name: devsblinkApFadeInRight;
}

/* =====================================================
   ZOOM
===================================================== */
@keyframes devsblinkApZoomIn {
  from {
    opacity: 0;
    transform: scale(0.75);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.devsblink-ap-animated.devsblink-ap-zoom-in,
.elementor-element.animated.devsblink-ap-zoom-in {
  animation-name: devsblinkApZoomIn;
}

@keyframes devsblinkApZoomOut {
  from {
    opacity: 0;
    transform: scale(1.25);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.devsblink-ap-animated.devsblink-ap-zoom-out,
.elementor-element.animated.devsblink-ap-zoom-out {
  animation-name: devsblinkApZoomOut;
}

@keyframes devsblinkApZoomInUp {
  from {
    opacity: 0;
    transform: scale(0.5) translateY(-200px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.devsblink-ap-animated.devsblink-ap-zoom-in-up,
.elementor-element.animated.devsblink-ap-zoom-in-up {
  animation-name: devsblinkApZoomInUp;
}

@keyframes devsblinkApZoomInDown {
  from {
    opacity: 0;
    transform: scale(0.5) translateY(200px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.devsblink-ap-animated.devsblink-ap-zoom-in-down,
.elementor-element.animated.devsblink-ap-zoom-in-down {
  animation-name: devsblinkApZoomInDown;
}

@keyframes devsblinkApZoomInLeft {
  from {
    opacity: 0;
    transform: scale(0.5) translateX(-200px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateX(0);
  }
}
.devsblink-ap-animated.devsblink-ap-zoom-in-left,
.elementor-element.animated.devsblink-ap-zoom-in-left {
  animation-name: devsblinkApZoomInLeft;
}

@keyframes devsblinkApZoomInRight {
  from {
    opacity: 0;
    transform: scale(0.5) translateX(200px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateX(0);
  }
}
.devsblink-ap-animated.devsblink-ap-zoom-in-right,
.elementor-element.animated.devsblink-ap-zoom-in-right {
  animation-name: devsblinkApZoomInRight;
}

/* =====================================================
   SLIDE
===================================================== */
@keyframes devsblinkApSlideInDown {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.devsblink-ap-animated.devsblink-ap-slide-in-down,
.elementor-element.animated.devsblink-ap-slide-in-down {
  animation-name: devsblinkApSlideInDown;
}

@keyframes devsblinkApSlideInUp {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.devsblink-ap-animated.devsblink-ap-slide-in-up,
.elementor-element.animated.devsblink-ap-slide-in-up {
  animation-name: devsblinkApSlideInUp;
}

@keyframes devsblinkApSlideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.devsblink-ap-animated.devsblink-ap-slide-in-left,
.elementor-element.animated.devsblink-ap-slide-in-left {
  animation-name: devsblinkApSlideInLeft;
}

@keyframes devsblinkApSlideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.devsblink-ap-animated.devsblink-ap-slide-in-right,
.elementor-element.animated.devsblink-ap-slide-in-right {
  animation-name: devsblinkApSlideInRight;
}