*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}

body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: white;
}

body::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,192,203,0.5);
clip-path: circle(30% at right 70%);
}

body::after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,105,180,0.5);
clip-path: circle(40% at 10% 10%);
}

.container{
position: relative;
display: flex;
justify-content: center;
align-items: center;
max-width: 1200px;
flex-wrap: wrap;
z-index: 1;
}

.container .card{
position: relative;
width: 350px;
height: 400px;
margin: 30px;
box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
border-radius: 15px;
background: rgba(255,255,255,0.1);
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid rgba(255,255,255,0.5);
border-left: 1px solid rgba(255,255,255,0.5);
backdrop-filter: blur(5px);
}

.container .card .content{
padding: 20px;
text-align: center;
transform: translateY(25px);
transition: 0.5s;
}

.container .card:hover .content{
transform: translateY(0px);
}

.container .card .content h2{
position:relative;
top:-66px;
font-size: 4em;
color: rgba(255,255,255,0.35);
pointer-events: none;
}

.container .card .content h3{
font-size: 1.8em;
color: #fff;
z-index: 1;
}

.container .card .content p{
font-size: 1.35em;
color: white;
font-weight: 300;
}

.container .card .content button{
position: relative;
display: inline-block;
padding: 8px 20px;
margin-top: 15px;
background: #fff;
color: #000;
border-radius: 20px;
text-decoration: none;
font-weight: 500;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}