/* styles.css */
body {
  background-color: #111827;
  color: white;
}

.gradient-text {
  background: linear-gradient(135deg, #ec4899, #f97316) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.bg-gradient-brand {
  background: linear-gradient(to right, #ec4899, #f97316) !important;
}

.bg-brand-dark {
  background-color: #111827;
}

.text-brand-orange {
  color: #f97316;
}

.text-brand-pink {
  color: #ec4899;
}

.border-brand-orange {
  border-color: #f97316;
}

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

.gradient-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #ec4899, #f97316);
  background-size: 200%;
  animation: gradientFlow 3s ease infinite;
  z-index: -1;
}