.flip-card {
    perspective: 1000px;
}

.flip-card-inner {
    min-height: 350px;
    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%;
    backface-visibility: hidden;
}

.flip-card-front {
    background-color: #f8f9fa;
    color: #000;
}

.flip-card-back {
    background-color: #343a40;
    color: #000;
    transform: rotateY(180deg);
}

.card-img-top {
    max-height: 350px;
    object-fit: cover;
    object-position: top;
}

.image-container-fade {
    position: relative;
    width: 100%;
    /* Ajusta el ancho según tus necesidades */
    height: 350px;
    /* Ajusta la altura según tus necesidades */
    overflow: hidden;

}

.image-container-fade img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease-in-out;
    object-position: top;
    /* Transición de opacidad */
}

.image-container-fade .back-image {
    opacity: 0;
    /* La segunda imagen está oculta inicialmente */
}

.image-container-fade.fade-effect:hover .front-image {
    opacity: 0;
    /* La primera imagen se desvanece al hacer hover */
}

.image-container-fade.fade-effect:hover .back-image {
    opacity: 1;
    /* La segunda imagen aparece al hacer hover */
}