.flip-cards {

	h2 {
		font-size: 30px;
		color: #005EAD;
		margin-bottom: 20px;
	}

	h3 {
		font-size: 24px;
		color: #005EAD;
		line-height: 1.2;
		letter-spacing: -1px;

		img {
			min-height: 30px;
			min-width: 30px;
		}
	}

	p {
		font-size: 18px;
	}

	.card-container {
		perspective: 1000px; /* Essential for 3D effect */
	}

	.card {
		width: 100%;
		height: 100%;
		position: relative;
		transition: transform 600ms, background-color 200ms; /* Smooth transition for the flip */
		transform-style: preserve-3d; /* Ensures child elements are rendered in 3D space */
		background-color: #ececec;
		cursor: pointer;

		&:hover {
			background-color: #e5e5e5;
		}

		.image-container {
			aspect-ratio: 1;
			width: 100%;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}

	.card-front,
	.card-back {
		backface-visibility: hidden; /* Hides the back of the element when facing away */
	}

	.card-back {
		top: 0;
		left: 0;
		position: absolute;
		transform: rotateY(180deg); /* Rotates the back face initially */
	}

	.card.flipped {
		transform: rotateY(180deg); /* Rotates the entire card to show the back */
	}
}