.contents {
    position: relative;
    bottom:10%;
	padding-top:50px;
	padding-bottom:50px;
	padding-left:100px;
	padding-right:100px;
	margin:auto;
}
.member-container {
	width:100%;
	text-align:center;
}

.member-card {
	perspective: 1000px;
	width:350px;
	height: 450px;
	/* background-color:#f5f5f5; */
	display:inline-block;
	margin:10px;
	padding:0;
	border-radius: 10px;

}
.member-card a {
	color:white;
	transition:150ms;
	text-decoration:none;
}

.member-card a:hover {
	color:#f5f5f5;
	text-decoration:underline;
}
.member-card .member-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.6s;
	transform-style: preserve-3d;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

/* .member-card:hover .member-card-inner {
	transform: rotateY(180deg);
} */

.member-card-front, .member-card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}


.member-card-back {
	background-color: #132343;
	color: white;
	transform: rotateY(180deg);
	overflow-y:scroll;
}

.member-card-back p{
	font-size:18px;
	line-height: 30px;
	padding:30px;
}
.member-card h1 {
	font-size:25px;
}

.member-card h5 {
	font-size:16px;
	color:gray;
}

.member-image {
	height: 280px;
	width: 100%;
	background-color:blue;
	clip-path: polygon(0 0, 100% 0, 100% 84%, 0% 100%);
	background: transparent no-repeat center;
	background-size: cover;
}
.member-card .member-info-container {
	height:120px;
	width:100%;
}

.member-card .member-info-container .label-container{
	height:fit-content;
	width:100%;
	position:relative;
	display:block;
	top:50%;
	transform:translateY(-50%);

}

/* new card */

/* From Uiverse.io by JohnnyCSilva */ 
.card {
	width: 100%;
	max-width: 400px; /* Set a max width to prevent overflow */
	height: 100%; /* Make the height adjust automatically */
	background: #313131;
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: white;
	transition: 0.2s ease-in-out;
	position: relative; /* Ensure child elements are positioned relative to the card */
	overflow: hidden; /* Prevent text from overflowing */
}

.img {
	width: auto;
	height: 100%; /* Adjust the height proportionally */ /* Limit image height */
	position: absolute;
	top: 0;
	transition: 0.2s ease-in-out;
	z-index: 1;
}

.textBox {
	opacity: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 15px;
	transition: 0.2s ease-in-out;
	z-index: 2;
	padding: 20px; /* Add padding to avoid text sticking to edges */
}

.textBox > .text {
	font-weight: bold;
	width: 100%;
	text-align: center; /* Center-align the text */
}

.textBox > .head {
	font-size: 20px;
}

.textBox > .price {
	font-size: 14px;
	color: rgb(240, 232, 232);
	word-wrap: break-word; /* Allow long text to wrap */
	text-align: center; /* Center-align the text */
}

.textBox > span {
	font-size: 12px;
	color: lightgrey;
	text-align: center; /* Center-align the text */
}

.card:hover > .textBox {
	opacity: 1;
}

.card:hover > .img {
	filter: blur(7px);
	animation: anim 3s infinite;
}

@keyframes anim {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-20px);
	}
	100% {
		transform: translateY(0);
	}
}

.card:hover {
	transform: scale(1.04) rotate(-1deg);
}