.flip-card {
    background-color: transparent;
    width: 300px;
    height: 200px;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

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

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex; /* Added for better content alignment */
    flex-direction: column;
    justify-content: center; /* Vertically center content */
    align-items: center; /* Horizontally center content */
}

.flip-card-front {
    background-color: #f9f9f9;
    color: #000;
    border-radius: 10px; /* Added for rounded corners */
    border: 1px solid #ddd;
}

.flip-card-back {
    background-color: #007bff;
    color: white;
    transform: rotateY(180deg);
    border-radius: 10px; /* Added for rounded corners */
}

/* Optional: Style for content inside the cards.  Added for better spacing*/
.flip-card-front h5,
.flip-card-back h5 {
    margin-bottom: 0.5rem;
}
.flip-card-front p,
.flip-card-back p{
    font-size: 0.9rem;
    margin-bottom: 0;
}