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



.container
{
position: relative;
width: 100%;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

.container .card
{
position: relative;
width: 300px;
height: 420px;
background: #ffffff;
margin: 20px;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 25px rgba(0,0,0,0.2);
transition: 0.5s;
}

.container:hover .card
{
filter: blur(20px);
transform: scale(0.9);
opacity: 0.5;
}

.container .card:hover
{
filter: blur(0px);
transform: scale(1.1);
opacity: 1;
}


.container .card .circle
{
position: relative;
width: 100%;
height: 100%;
background: #F19221;
clip-path: circle(180px at center 0);
text-align: center;
}

.container .card .circle h2
{
color: #ffffff;
font-size: 2.5em;
padding: 40px 0;
}

.container .card .content
{
position: absolute;
bottom: 10px;
padding: 20px;
text-align: center;
}

.container .card .content p
{
color: #000000;
margin-bottom: 15px;
}



.container .card:nth-child(1) .circle,
.container .card:nth-child(1) input
{
background: #F19221;
}

.container .card:nth-child(2) .circle,
.container .card:nth-child(2) input
{
background: #F19221;
}