/* Add to animate.css if not already there */
.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

/* Primary buttons animation */
.primary-btn {
    animation-name: fadeIn;
    animation-duration: 0.5s;
}

.secondary-btn {
    animation-name: fadeIn;
    animation-duration: 0.5s;
    animation-delay: 0.3s;
}

.hero-image img {
    animation-name: fadeInUp;
    animation-duration: 5s;
}

.tool-card {
    animation-name: fadeIn;
    animation-duration: 5s;
}

/* Add animations to sections */
.features, .how-it-works, .security, .testimonials, .pricing, .faq, .cta {
    animation-name: fadeIn;
    animation-duration: 1s;
}
/* animate.css */
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDown {
  animation-name: fadeInDown;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  animation-name: fadeInUp;
}

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  animation-name: pulse;
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  animation-name: bounceIn;
}

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

.delay-2s {
  animation-delay: 2s;
}

.delay-3s {
  animation-delay: 3s;
}

.delay-4s {
  animation-delay: 4s;
}

.delay-5s {
  animation-delay: 5s;
}

.fast {
  animation-duration: 0.5s;
}

.faster {
  animation-duration: 0.3s;
}

.slow {
  animation-duration: 2s;
}

.slower {
  animation-duration: 3s;
}