.enrollment-card {
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 20px;
  margin-bottom: 30px;
  box-shadow: 0 10px 40px color-mix(in srgb, var(--default-color), transparent 90%);
  position: sticky;
  top: 75px;
  border-top:6px solid #1aa6b7;
}

.enrollment-card .card-header {
  padding: 30px 30px 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 95%);
}

.enrollment-card .card-header .price-display {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.enrollment-card .card-header .price-display .current-price {
  font-size: 36px;
  font-weight: 700;
  color: var(--accent-color);
}

.enrollment-card .card-header .price-display .original-price {
  font-size: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  text-decoration: line-through;
}

.enrollment-card .card-header .price-display .discount {
  padding: 5px 12px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
  color: var(--accent-color);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

.enrollment-card .card-header .enrollment-count {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.enrollment-card .card-header .enrollment-count i {
  color: var(--accent-color);
}

.enrollment-card .card-body {
  padding: 30px;
}

.enrollment-card .card-body .service-highlights {
  margin-bottom: 30px;
}

.enrollment-card .card-body .service-highlights .highlight-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.enrollment-card .card-body .service-highlights .highlight-item i {
  color: var(--accent-color);
  font-size: 16px;
  width: 16px;
}

.enrollment-card .card-body .service-highlights .highlight-item span {
  font-size: 14px;
  color: var(--default-color);
}

.enrollment-card .card-body .action-buttons {
  margin-bottom: 25px;
}

.enrollment-card .card-body .action-buttons .btn-primary {
  width: 100%;
  padding: 16px; 
  background: linear-gradient(135deg, var(--accent-color),  #00c3a1 );
  color: var(--contrast-color);
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  transition: all 0.3s;
}

.enrollment-card .card-body .action-buttons .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px color-mix(in srgb, var(--accent-color), transparent 60%);
}

.enrollment-card .card-body .action-buttons .btn-secondary {
  width: 100%;
  padding: 16px;
  background-color: transparent;
  color: var(--accent-color);
  border: 2px solid var(--accent-color);
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s;
}

.enrollment-card .card-body .action-buttons .btn-secondary:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.enrollment-card .card-body .guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.enrollment-card .card-body .guarantee i {
  color: var(--accent-color);
}


@media (max-width: 992px) {
  .enrollment-card {
    position: static;
  }
}