:root{
	--clr: #222;
}
.font-family{
	font-family: 'Tektur', sans-serif;
}
.main{
	display:flex;
	justify-content:center;
	align-items:center;
	min-height:100vh;
	background:var(--clr);
}
.container{
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	gap:60px;
	margin-top:60px;
	/* margin-bottom:100px; */
}
.container .card{
	position:relative;
	width:400px;
	height:350px;
	background: #fff;
	border-radius:20px;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	cursor:pointer;
	transition:0.5s;
}
.container .card:hover{
	height:360px;
}
.container .card .imgBx{
	position:absolute;
	inset: 20px 20px 50px 20px;
	/* background:red; */
	border-radius:15px;
	transition:0.5s;
	z-index:1;
}
.container .card .imgBx::before{
	content:'';
	position:absolute;
	width:20px;
	height:20px;
	background:transparent;
	left:-30px;
	border-top-right-radius:20px;
	transform:translateY(-100px);
	opacity:0;
	box-shadow:5px -5px 0px 4px var(--clr);
	pointer-events:none;
	transition:0.5s;
	z-index:0;
}
.container .card:hover .imgBx::before{
	opacity:1;
	transform:translateY(49px);
}
.container .card .imgBx::after{
	content:'';
	position:absolute;
	width:20px;
	height:20px;
	background:transparent;
	right:-30px;
	border-top-left-radius:20px;
	transform:translateY(-100px);
	opacity:0;
	box-shadow:-5px -5px 0px 4px var(--clr);
	pointer-events:none;
	transition:0.5s;
}
.container .card:hover .imgBx::after{
	opacity:1;
	transform:translateY(49px);
}
.container .card:hover .imgBx{
	inset: -50px 60px 250px 60px;
	box-shadow: 0px 0px 0px 10px var(--clr);
}
.container .card .imgBx img{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:15px;
}
/* .container .card .row{ */
	/* position:relative; */
	/* padding:40px; */
	/* text-align:center; */
	/* opacity:0; */
	/* visibility:hidden; */
	/* transform:translateY(-50px); */
	/* transition:0.5s; */
/* } */
.container .card:hover .row{
	opacity:1;
	visibility:visible;
	transform:translateY(40px);
}
.container .card .name{
	position:absolute;
	bottom:8px;
	color:#333;
	transition:0.5s;
	font-weight:600;
}
.container .card:hover .name{
	padding:5px 25px;
	/* background:#65ff50; */
	background:#3dcbeb;
	bottom:-25px;
	border-radius:15px;
	color:white;
	box-shadow:0 0 0 10px var(--clr);
}	
.gap-card{
	column-gap:100px;
}
.detels{
	display:flex;
	width:100%;
	column-gap:5px;
	
}
.flex20{
	flex:10%;
}
.flex80{
	flex:90%;
}
.detels{
	opacity:0;
	/* transition:1s; */
	/* padding:20px; */
}
.container .card:hover .detels{
	opacity:1;
	transition:1s;
	/* margin-top:70px; */
}
.container .card:hover  .list{
	margin-top:85px;
	width:100%;
}
/* bold{ */
	/* margin-left: 25%; */
/* } */
.border-bottom{
	border-bottom:1px solid black
}
.width{
	width:80%;
}