/* ===================================
   INDEX CSS
   Styles for the landing page
   =================================== */

/* Hero Section */
.hero-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 80vh;
  display: flex;
  align-items: center;
}

.hero-section .lead {
  font-size: 1.25rem;
  opacity: 0.9;
}

/* Features Section */
.index-features {
  background-color: #f8f9fa !important;
}

.index-features .card-body {
  background-color: transparent !important;
  box-shadow: none !important;
}

.index-features .card {
  background-color: white !important;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.index-features .card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

/* Index Responsive */
@media (max-width: 768px) {
  .hero-section {
    min-height: 60vh;
  }

  .hero-section .display-4 {
    font-size: 2.5rem;
  }

  .hero-section .lead {
    font-size: 1.1rem;
  }
}