.contact-tag {
    background-color: #f1f1f1 !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    transition: background-color 0.3s, color 0.3s;
}

.contact-tag.selected {
    background-color: black !important;
    color: white !important;
}

.card-wrapper {
  position: relative;
  border-radius: 40px;
}

.card-front,
.card-back {
  position: absolute;      /* stack them on top of each other */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 40px;
  transition: opacity 0.3s ease;
}

.card-back {
  background-color: #D4FF27;
  opacity: 0;              /* hidden by default */
  pointer-events: none;    /* not clickable until visible */
}

.card-front {
  opacity: 1;
}

.card-wrapper:hover .card-front {
  opacity: 0;
  pointer-events: none;
}

.card-wrapper:hover .card-back {
  opacity: 1;
  pointer-events: auto;
}