/* FontAwesome for working BootSnippet :> */

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
#team {
    background: #fff ;
}

/* Flip container setup */
.image-flip {
    width: 100%;
    height: 312px; /* Set the height for the card container */
    position: relative;
    perspective: 1000px; /* 3D perspective for the flip effect */
}

.mainflip {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.8s ease-in-out; /* Smooth transition for flipping */
    transform-style: preserve-3d; /* Maintain 3D perspective */
}

/* Frontside and backside setup */
.frontside, .backside {
    width: 100%;
    height: 100%; /* Ensure height consistency */
    position: absolute; /* Stack front and back on top of each other */
    top: 0;
    left: 0;
    backface-visibility: hidden; /* Prevent seeing the back during flip */
    transition: transform 0.8s ease-in-out; /* Smooth flip transition */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Initial state for front and back sides */
.frontside {
    transform: rotateY(0deg); /* Front starts visible */
}

.backside {
    transform: rotateY(-180deg); /* Back is hidden initially */
    background-color: #fff; /* Background for backside */
    box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); /* Optional shadow */
}

/* Flip effect on hover */
.image-flip:hover .frontside {
    transform: rotateY(180deg); /* Front rotates out */
}

.image-flip:hover .backside {
    transform: rotateY(0deg); /* Back rotates in */
}

/* Ensure cards take full size */
.frontside .card, .backside .card {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Image styling for consistent size */
.frontside .card-body img, .backside .card-body img {
    width: 150px;
    height: 150px;
    border-radius: 50%; /* Make images circular */
    object-fit: cover; /* Ensure images maintain aspect ratio */
}