.hero-content{
    animation:fadeUp 1s ease;
}

.card{
    animation:fadeCard 0.8s ease;
}

nav{
    animation:slideDown 0.8s ease;
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fadeCard{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes slideDown{
    from{
        opacity:0;
        transform:translateY(-40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
/* LOADER */

#loader{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:#000;

display:flex;
flex-direction:column;

justify-content:center;
align-items:center;

z-index:99999;

}

#loader img{

width:120px;
height:120px;
border-radius:50%;

animation:spinLogo 2s linear infinite;

}

#loader h2{

color:#d4af37;
margin-top:20px;
font-size:30px;

}

@keyframes spinLogo{

0%{
transform:rotate(0deg);
}

100%{
transform:rotate(360deg);
}

}