.dashboard-cards {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.5rem;
  justify-content: space-between;
}

.card {
  flex: 1 1 250px;
  border-radius: 25px!important; /* smooth rounded edges */
  padding: 2rem 1.8rem!important;;
  display: flex!important;;
  flex-direction: column!important;;
  align-items: center!important;;
  justify-content: center!important;;
  gap: 0.8rem!important;
  /* background: linear-gradient(145deg, #fff9e6, #ffefb0)!important; */
  box-shadow: 0 4px 10px rgba(0,0,0,0.06)!important;
  transition: all 0.3s ease!important;;
  border: none!important; /* 👈 removes any visible border */
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.1);
}

.card-icon {
  background: white;
  border-radius: 50%;
  padding: 0.8rem;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111827;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.card-value {
  font-size: 1.4rem;
  font-weight: 600;
  color: #1f2937;
}

.card-label {
  color: #4b5563;
  font-size: 0.9rem;
}

/* Optional: define different colors for variety */
.card-yellow {
 background: linear-gradient(145deg, #fff9e6, #ffefb0);
}

.card-blue {
  background: linear-gradient(145deg, #f0f7ff, #cfe6ff);
}

.card-green {
  background: linear-gradient(145deg, #edfdf2, #c5f6d5);
}

.card-pink {
  background: linear-gradient(145deg, #fff1f3, #ffd8de);
}