.mainHeader {
    height: 100vh;
    min-height: 120em;
    background-image: url(https://wallpaperaccess.com/full/1566401.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    }
    
    #footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 2.5rem;  
      }

/* Card CSS */
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

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

.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: 280px;
height: 400px;
margin: 30px;
box-shadow: 20px 20px 50px rgba(0 , 0, blue0, 0.5);
border-radius: 15px;
background: rgba(255, 255, 255, 0.1);
overflow: hidden;
display: flex;
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(100px);
opacity: 0;
transition: 0.5s;
}

.container .card:hover .content {

transform: translateY(0px);
opacity: 1;

}

.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, green0, 0, 0.2);


}