.card {
  background: var(--details-card-bg);
  border: var(--details-card-border);
  border-radius: 12px;
}

.yellow {
  border: 1px solid rgba(255, 215, 0, 0.4);
}

.purple {
  border: 1px solid rgba(147, 51, 234, 0.4);
}

.purple .sectionTitle {
  color: rgb(196, 181, 253) !important;
}

.red {
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.red .sectionTitle {
  color: rgb(252, 165, 165) !important;
}

.orange {
  border: 1px solid rgba(249, 115, 22, 0.4);
}

.orange .sectionTitle {
  color: rgb(253, 186, 116) !important;
}

.cyan {
  border: 1px solid rgba(6, 182, 212, 0.4);
}

.cyan .sectionTitle {
  color: rgb(165, 243, 252) !important;
}

.blue {
  border: 1px solid rgba(59, 130, 246, 0.4);
}

.blue .sectionTitle {
  color: rgb(59, 130, 246) !important;
}

.green {
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.green .sectionTitle {
  color: rgb(187, 247, 208) !important;
}

.detailsCardIcon {
  object-fit: cover;
  object-position: center;
  border: 2px solid rgba(148, 163, 184, 0.4);
  border-radius: 50%;
}