/* ===========================================
   ANIMATIONS
=========================================== */

/* Fade In Animation */
.fade-in{

    opacity: 0;
    transform: translateY(30px);
    animation: fadeIn .6s ease forwards;

}

@keyframes fadeIn{

    to{
        opacity: 1;
        transform: translateY(0);
    }

}

/* Smooth Scrollbar */
::-webkit-scrollbar{

    width: 8px;

}

::-webkit-scrollbar-track{

    background: var(--background);

}

::-webkit-scrollbar-thumb{

    background: var(--primary);
    border-radius: 4px;

}

::-webkit-scrollbar-thumb:hover{

    background: var(--primary-dark);

}

/* About Section Animation */
.about-grid{

    opacity: 0;
    transform: translateY(40px);
    animation: fadeInUp 0.8s ease forwards;

}

@keyframes fadeInUp{

    to{
        opacity: 1;
        transform: translateY(0);
    }

}