/* Custom styles that extend Tailwind */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
    font-family: 'Inter', sans-serif;
    background-color: #0f172a;
    color: #e2e8f0;
}
/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Custom animation for hover effects */
.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.03);
}

/* Custom shadow for cards */
.custom-shadow {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

/* Dark mode overrides */
.bg-white {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

.text-gray-700, .text-gray-600 {
    color: #cbd5e1 !important;
}

.text-gray-900 {
    color: #f8fafc !important;
}

.border-gray-300 {
    border-color: #334155 !important;
}

.hover\:bg-gray-50:hover {
    background-color: #334155 !important;
}
/* Animation for section entrance */
.section-entrance {
    animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Firefox-compatible gradient text */
.gradient-text {
  background: linear-gradient(135deg, #6366F1, #F43F5E);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
}

/* Firefox-compatible gradient button */
.gradient-button {
  background: linear-gradient(135deg, #6366F1, #F43F5E);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-weight: 500;
  box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3);
  transition: all 0.3s ease;
  display: inline-block;
}

.gradient-button:hover {
  box-shadow: 0 20px 25px -5px rgba(99, 102, 241, 0.4);
  transform: translateY(-2px);
}

/* Outline button */
.outline-button {
  border: 2px solid #6366F1;
  color: #6366F1;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: inline-block;
}

.outline-button:hover {
  background: #6366F1;
  color: white;
}

/* Firefox-compatible glass cards */
.glass-card {
  width: 20rem;
  height: 20rem;
  border-radius: 1.5rem;
  position: absolute;
  border: 1px solid #334155;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
  background: rgba(30, 41, 59, 0.6);
}

/* Backdrop blur with Firefox fallback */
@supports (backdrop-filter: blur(12px)) {
  .glass-card {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(30, 41, 59, 0.5);
  }
}

.glass-card-1 {
  right: -1rem;
  bottom: -1rem;
  z-index: -1;
}

.glass-card-2 {
  left: -1rem;
  top: -1rem;
  z-index: -1;
}