@keyframes gradient-animation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-animation 15s ease infinite;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeInUp {
  opacity: 0; /* Set initial state for animation */
  animation: fadeInUp 0.8s ease-out forwards;
}

@keyframes phone-glow {
  0%, 100% {
    box-shadow: 0 0 15px -5px rgba(74, 222, 128, 0.4);
  }
  50% {
    box-shadow: 0 0 25px 0px rgba(74, 222, 128, 0.7);
  }
}

.animate-phone-glow {
  animation: phone-glow 4s ease-in-out infinite;
}