/* =====================================
   KEYFRAMES
===================================== */

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

@keyframes fadeIn{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
@keyframes scroll{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-50%);
}
}

/* =====================================
   ANIMATION CLASSES
===================================== */

.fade-in{
    animation: fadeIn 1s ease forwards;
}

.fade-in-up{
    animation: fadeInUp 1s ease forwards;
}

/* Social hover animation */
.social-icons a{
    transition: 0.3s ease;
}

.social-icons a:hover{
    transform: translateY(-3px);
}
/*contact.html*/
@keyframes fadeUp{
from{
opacity:0;
transform:translateY(30px);
}
to{
opacity:1;
transform:translateY(0);
}
}