.card-container {
    display: flex;
    justify-content: space-around;
    margin: 20px auto;
}

.card2 {
    width: 300px;
    /* Ancho de la tarjeta */
    height: 300px;
    /* Altura de la tarjeta */
    overflow: hidden;
    position: relative;
}

.card-img {
    width: 100%;
    height: 100%;
    position: relative;
}

.card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Para cubrir completamente el área del div */
    transition: opacity 0.3s ease;
    /* Transición suave de la opacidad */
    opacity: 1;
    /* Establece la opacidad inicial */
}

.card:hover .card-img img {
    opacity: 0.7;
    /* Hacer la imagen más oscura al pasar el puntero sobre la tarjeta */
}

.card-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.685);
    /* Fondo semitransparente para el texto */
    color: #fff;
    /* Color del texto */
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    /* Inicialmente invisible */
    transition: opacity 0.3s ease;
    /* Transición suave de la opacidad */
}

.card2:hover .card-text {
    opacity: 1;
    /* Hacer visible el texto al pasar el puntero sobre la tarjeta */
}


/* 3d contacto */
.flip-card {
	perspective: 1000px;
	width: 100%;
	height: 900px;
	position: relative;
}

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

.card-body {
	overflow: hidden;
}

.flip-card:not(.flipped) .flip-card-inner {
	transform: rotateY(0deg);
}

.flip-card.flipped .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;
}

.flip-card-front {
	transform: rotateY(0deg);
}

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