.card {
  margin: 10px 1px;
    border: 1px solid #b6aeae;
    border-radius: 8px;
    padding: 10px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    background-color: #eef1f8;
}


.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-5px);
  border-color: #007bff;
  background-color: #f8f9fa;
}

.card p {
    font-size: 18px;
}

/* Flip Cards CSS */
.card-container {
  display: grid;
  perspective: 700px;
}

.card-flip {
  display: grid;
  grid-template: 1fr / 1fr;
  grid-template-areas: "frontAndBack";
  transform-style: preserve-3d;
  transition: all 0.7s ease;
}

.card-flip div {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.front {
  grid-area: frontAndBack;
}

.back {
  grid-area: frontAndBack;
  transform: rotateY(-180deg);
}

.card-container:hover .card-flip {
  transform: rotateY(180deg);
}

.card-block{
  text-align: center;
}

.info {
    background-color: #ffffcc;
  border-left: 6px solid #ffeb3b;
}