/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

/* Import Bootstrap CSS */
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css');

/* Your custom styles */
body {
  font-family: 'Inter', sans-serif;
}


body {
  font-family: 'Inter', sans-serif;
  background-color: #111827; /* Tailwind's bg-gray-900 */
  color: white;
}
.card-custom {
  background-color: #1f2937; /* bg-gray-800 */
  border: 1px solid #374151; /* border-gray-700 */
  border-radius: 1rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
.gradient-text {
  background: linear-gradient(to right, #60a5fa, #a78bfa); /* from-blue-400 to-purple-500 */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.btn-gradient {
  background: linear-gradient(to right, #3b82f6, #8b5cf6); /* from-blue-500 to-purple-600 */
  color: white;
  border: none;
  border-radius: 9999px; /* fully rounded */
  transition: transform 0.3s ease, background 0.3s ease;
}
.btn-gradient:hover {
  background: linear-gradient(to right, #2563eb, #7c3aed); /* hover shades */
  transform: scale(1.05);
}
.modal-content {
  background-color: #1f2937;
  border: 1px solid #374151;
  color: #d1d5db; /* text-gray-300 */
  border-radius: 0.75rem;
}
.modal-title {
  color: #e5e7eb; /* text-gray-200 */
}