@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fadeIn {
  animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fadeInUp {
  animation: fadeInUp 0.5s ease-in-out;
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.animate-scaleIn {
  animation: scaleIn 0.5s ease-in-out;
}

.nav-link {
  color: #4B5563; /* text-gray-600 */
  font-size: 1rem; /* text-base */
  font-weight: 500; /* font-medium */
  transition-property: color;
  transition-duration: 300ms;
}
.nav-link:hover {
  color: #4F46E5; /* text-indigo-600 */
}
@media (min-width: 1024px) {
  .nav-link {
    font-size: 1.125rem; /* lg:text-lg */
  }
}

.mobile-link {
  color: #374151; /* text-gray-700 */
  font-weight: 500; /* font-medium */
  transition: color 150ms;
}
.mobile-link:hover {
  color: #4F46E5; /* text-indigo-600 */
}

.btn-indigo {
  color: #fff; /* text-white */
  background-color: #4F46E5; /* bg-indigo-600 */
  padding: 0.1rem 0.7rem; /* px-4 py-1 */
  border-radius: 9999px; /* rounded-full */
  font-weight: 400; /* font-medium */
  font-size: 0.700rem; /* text-sm */
  transition: all 300ms;
  transform: scale(1);
}
.btn-indigo:hover {
  background-color: #4338CA; /* bg-indigo-700 */
  transform: scale(1.05);
}
@media (min-width: 768px) {
  .btn-indigo {
    padding: 0.5rem 1.25rem; /* md:px-5 md:py-2 */
    font-size: 1rem; /* md:text-base */
  }
}

.btn-red {
  color: #fff; /* text-white */
  background-color: #DC2626; /* bg-red-600 */
  padding: 0.1rem 0.7rem; /* px-4 py-1 */
  border-radius: 9999px; /* rounded-full */
  font-weight: 400; /* font-medium */
  font-size: 0.700rem; /* text-sm */
  transition: all 300ms;
  transform: scale(1);
}
.btn-red:hover {
  background-color: #B91C1C; /* bg-red-700 */
  transform: scale(1.05);
}
@media (min-width: 768px) {
  .btn-red {
    padding: 0.5rem 1.25rem; /* md:px-5 md:py-2 */
    font-size: 1rem; /* md:text-base */
  }
}
