style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --primary-color: #6366f1; /* indigo-500 as default */
  --secondary-color: #f59e0b; /* amber-500 as default */
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: #f9fafb;
}

/* Custom button styles */
.btn-primary {
  @apply bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300;
}

.btn-secondary {
  @apply bg-amber-500 hover:bg-amber-600 text-gray-900 font-bold py-3 px-6 rounded-lg transition duration-300;
}

/* Gradient backgrounds */
.bg-gradient-primary {
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

/* Card hover effect */
.card-hover {
  transition: all 0.3s ease-in-out;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Section spacing */
.section-gap {
  padding: 5rem 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-content {
    padding: 2rem 1rem;
  }
  
  .slot-grid {
    grid-template-columns: 1fr;
  }
}

/* Animation for hero section */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

.floating {
  animation: float 3s ease-in-out infinite;
}