.flip-card {
    background-color: transparent;
    position:relative;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
.flip-card-inner {
    position: relative;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    cursor: pointer;
  }
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
    position: absolute;
    backface-visibility: hidden;
}
.flip-card-front {
    background-color: #ffffff;
    color: black;
}
.flip-card-back {
    background-color: #007bff;
    color: white;
    transform: rotateY(180deg);
}