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

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(40px);
    }

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

}

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

@keyframes float{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }

}

.product-card{
    animation:fadeUp .8s ease both;
}

.hero img{
    animation:fadeIn 1.5s ease;
}

.about-box{
    animation:float 5s ease-in-out infinite;
}

.reveal{
    opacity:0;
    transform:translateY(40px);
    transition:all .8s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}