$color_1: black;
$background-color_1: #f2f1f1;

.flip-card {
    height: 300px;
	perspective: 1000px;
	&:hover {
		.flip-card-inner {
			transform: rotateY(180deg);
		}
	}
    .flip-card-inner {
        background: transparent;
        position: relative;
        width: 100%;
        height: 100%;
        transition: transform 0.9s;
        transform-style: preserve-3d;

        // Let Elementor controls handle horizontal alignment per side.
        .flip-card-front,
        .flip-card-back {
            text-align: center;
        }

        .flip-card-front {
            position: absolute;
            border-radius: 12px;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            color: $color_1;
            background-color: $background-color_1;

            // Make image respect text-align on the front side.
            img {
                display: inline-block;
            }

            .flip_card_icon{
                display: flex;
            }
        }
        .flip-card-back {
            position: absolute;
            border-radius: 12px;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            background-color: $background-color_1;
            color: $color_1;
            transform: rotateY(180deg);

            // Make back icon respect text-align on the back side.
            svg {
                display: inline-block;
            }

            .flip_card_button{
                a{
                    border: 1px solid black;
                }
                &:hover{
                    a{
                        color: $color_1;
                    }
                }
            }
            
        }
    }
}