/* =====================================================
   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;
}

/**
 * -------------------------------------------------------
 * # CounterDown
 * -------------------------------------------------------
 */
.ap-countdown-wrapper,
.ap-countdown-single-item {
  display: flex;
}

.ap-countdown-wrapper {
  flex: 0 0 100%;
  flex-wrap: wrap;
}

.ap-countdown-single-item {
  flex-direction: column;
  position: relative;
  align-items: center;
  transition: 0.4s;
}

.ap-countdown-single-item:not(:last-child) {
  margin-right: 40px;
}

.ap-countdown-reverse-position-enable .ap-countdown-single-item {
  flex-direction: column-reverse;
}

.ap-countdown-divider-enable .ap-countdown-single-item:not(:last-child):after {
  content: ":";
  font-size: 30px;
  position: absolute;
  right: -20px;
  top: 20px;
  font-weight: 700;
}

.ap-countdown-digit {
  margin-bottom: 0;
  font-size: 50px;
  font-weight: 700;
  line-height: 1;
}

/**
* -------------------
* # Progressbar
* -------------------
*/
.db-fw-progressbar-wrapper .db-fw-progressbar {
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background-color: #e6e6e6;
}
.db-fw-progressbar-wrapper .progressbar {
  position: absolute;
  height: 10px;
  width: 10px;
  border-radius: 5px;
  max-width: 100%;
  background-color: #000;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
}
.db-fw-progressbar-wrapper .progressbar.default-speed {
  transition: width 1200ms ease-in-out;
}
.db-fw-progressbar-wrapper .progressbar::-webkit-progress-bar {
  background-color: transparent;
}
.db-fw-progressbar-wrapper .progressbar::-webkit-progress-value {
  background-color: transparent;
}
.db-fw-progressbar-wrapper .progressbar::-moz-progress-bar {
  background-color: transparent;
}
.db-fw-progressbar-wrapper .content {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.db-fw-progressbar-wrapper .title {
  font-weight: 500;
  font-size: 16px;
  margin: 0;
  color: #000;
}
.db-fw-progressbar-wrapper .progress-label {
  margin-inline-start: 10px;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
}
.db-fw-progressbar-wrapper .progressbar .progress-label {
  display: inline-flex;
  position: absolute;
  inset-inline-start: auto;
  inset-inline-end: 0;
  top: calc(-200% + var(--label-spacing, 0px));
}

.ap-animation-builder-active {
  opacity: 0;
  transition: opacity 420ms ease;
}

.ap-animation-builder-active.is-ap-animation-builder-visible {
  opacity: 1;
}