/* Course List Styles */
.courses-page .hero-section {
  background: linear-gradient(135deg, var(--royal-blue) 0%, var(--electric-blue) 100%) !important;
}

.course-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: none;
  border-radius: 12px;
  overflow: hidden;
}

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

.course-card .card-img-top {
  height: 180px;
  object-fit: cover;
}

.course-card .badge {
  font-size: 0.75rem;
}

.learning-paths .card,
.testimonials .card {
  border-radius: 12px;
}

.testimonials .card {
  transition: transform 0.3s ease;
}

.testimonials .card:hover {
  transform: translateY(-3px);
}

/* Star rating */
.text-warning {
  color: var(--lightning-yellow) !important;
}

/* Category badges */
.bg-info {
  background-color: var(--electric-blue) !important;
}

.bg-danger {
  background-color: #dc3545 !important;
}

.bg-success {
  background-color: #198754 !important;
}

.bg-primary {
  background-color: var(--royal-blue) !important;
}

.bg-warning {
  background-color: var(--lightning-yellow) !important;
  color: #000 !important;
}

/* Filter sidebar */
.list-group-item.active {
  background-color: var(--electric-blue) !important;
  border-color: var(--electric-blue) !important;
}

.list-group-item:hover:not(.active) {
  background-color: #f8f9fa;
}

/* Hero section adjustments */
.hero-section {
  padding: 3rem 0 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-section .display-4 {
    font-size: 2rem !important;
  }
  
  .search-bar .form-control {
    margin-bottom: 1rem;
  }
  
  .search-bar .btn {
    width: 100%;
  }
}

/* Custom button styles */
.btn-primary {
  background-color: var(--royal-blue) !important;
  border-color: var(--royal-blue) !important;
}

.btn-primary:hover {
  background-color: var(--electric-blue) !important;
  border-color: var(--electric-blue) !important;
}

.btn-outline-primary {
  color: var(--royal-blue) !important;
  border-color: var(--royal-blue) !important;
}

.btn-outline-primary:hover {
  background-color: var(--royal-blue) !important;
  color: white !important;
}

/* Text colors */
.text-primary {
  color: var(--royal-blue) !important;
}