/*======================================
            FADE UP
======================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*======================================
            FADE LEFT
======================================*/

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-80px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*======================================
            FADE RIGHT
======================================*/

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(80px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*======================================
            ZOOM
======================================*/

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.8);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/*======================================
            FLOATING
======================================*/

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

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

.fade-up{

    animation:fadeUp .8s ease forwards;

}

.fade-left{

    animation:fadeLeft .8s ease forwards;

}

.fade-right{

    animation:fadeRight .8s ease forwards;

}

.zoom{

    animation:zoomIn .7s ease forwards;

}

.hero-image img{

    animation:

        floating 5s ease-in-out infinite;

}

.tech-card,

.service-card,

.project-card,

.timeline-content{

    animation:

        zoomIn .8s ease;

}

.btn-primary,

.btn-secondary{

    transition:

        transform .3s,

        box-shadow .3s;

}

.section-title{

    animation:

        fadeUp .9s ease;

}

footer{

    animation:

        fadeUp .8s ease;

}

/*======================================
        SCROLL REVEAL
======================================*/

.reveal{

    opacity:0;

    transform:translateY(50px);

    transition:all .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/*======================================
        FADE LEFT
======================================*/

.reveal-left{

    opacity:0;

    transform:translateX(-60px);

    transition:all .8s ease;

}

.reveal-left.active{

    opacity:1;

    transform:translateX(0);

}

/*======================================
            ZOOM
======================================*/

.reveal-scale{

    opacity:0;

    transform:scale(.8);

    transition:all .8s ease;

}

.reveal-scale.active{

    opacity:1;

    transform:scale(1);

}