/* ===================================
   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: 0 2px 15px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.index-features .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 25px rgba(0,0,0,0.15);
}

/* Feature Cards */
.feature-card {
  box-shadow: 0 2px 15px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 25px rgba(0,0,0,0.15);
}

/* 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;
  }
}