@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
  --primary-color: #4f46e5;
  --secondary-color: #7c3aed;
  --dark-color: #1e293b;
  --light-color: #f8fafc;
  --accent-color: #10b981;
  --text-color: #334155;
  --text-light: #64748b;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
body {
  font-family: 'Inter', sans-serif;
  scroll-behavior: smooth;
  color: var(--text-color);
  background-color: var(--light-color);
  line-height: 1.6;
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease forwards;
}

.gradient-text {
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hover-scale {
  transition: transform 0.3s ease;
}
.hover-scale:hover {
  transform: scale(1.03);
}

.floating {
  animation: float 6s ease-in-out infinite;
}
.btn-primary {
  @apply bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-medium py-3 px-8 rounded-full transition-all duration-300 shadow-lg hover:shadow-xl;
}

.btn-secondary {
  @apply bg-white hover:bg-gray-50 text-primary border border-primary font-medium py-3 px-8 rounded-full transition-all duration-300 hover:shadow-md;
}

.btn-accent {
  @apply bg-accent hover:bg-accent/90 text-white font-medium py-3 px-8 rounded-full transition-all duration-300 shadow-lg hover:shadow-xl;
}
.section-heading {
  @apply text-4xl md:text-5xl font-bold mb-6 text-center;
}

.section-subheading {
  @apply text-xl md:text-2xl text-text-light max-w-3xl mx-auto text-center mb-12;
}

.section-divider {
  @apply w-24 h-1 bg-gradient-to-r from-primary to-secondary mx-auto my-6 rounded-full;
}

.section-padding {
  @apply py-20 md:py-28;
}
.card-hover {
  @apply bg-white p-8 rounded-3xl shadow-md hover:shadow-xl transition-all duration-300 border border-gray-100 hover:border-transparent hover:bg-gradient-to-br hover:from-white hover:to-gray-50;
}

.feature-card {
  @apply card-hover hover:scale-[1.02] relative overflow-hidden;
}

.feature-card::before {
  content: '';
  @apply absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-primary to-secondary;
}
.gradient-bg {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}

.hero-gradient {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.1) 0%, rgba(124, 58, 237, 0.1) 100%);
}

.text-gradient {
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dark-bg {
  @apply bg-dark text-light;
}

.glassy-card {
  @apply bg-white/80 backdrop-blur-md border border-white/20 rounded-xl shadow-lg;
}