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

.cards {
    display: flex;
    justify-content: center;
    align-items: center;
    /*min-height: 100vh;*/
   /* background: #161623;*/
}

.cards::before 
{
    content: '';
    position: absolute;
    /*top: 0;*/
    left: 0;
    width: 100%;
    height:100%;
    /*background: linear-gradient(#f00,#f0f);
    clip-path:circle(30% at right 70%)*/
    
}

.cards::after 
{
    content: '';
    position: absolute;
    /*top: 0;*/
    left: 0;
    width: 100%;
    height:100%;
    /*background: linear-gradient(#2196f3,#e91e63);
    clip-path:circle(20% at 10% 10%)*/
    
}

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

.container .card
{
    position:relative;
    width:280px;
    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;
    transmition:0.5%;
    
}

.container .card .content h2
{
position:absolute;
top:-80px;
right:30px;
font-size:8em;
color:rgba(255,255,255,0,05);
pointer-events:none;
}
.container .card .content h3
{
font-size:1.8em;
color:#fff;
z-index:1;
}

.container .card .content p
{
font-size:1em;
color:#fff;
font-weight:300;
}

.container .card .content a
{
    position:relative;
    display:inline-block;
    padding:8px 20px;
    margin-top:15px;
    background-attachment:#fff;
    color:#000;
    border-radius:20px;
    text-decoration: none;
    font-weight:500;
    box-shadow : 0 5px 15px rgba(0,0,0,0.2);
	/*add new booton collapse*/
	background-color: #B8D8F9;
}
}