.fade-up{

opacity:0;

transform:translateY(40px);

transition:.8s;

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}

.scale{

transform:scale(.8);

opacity:0;

transition:.8s;

}

.scale.show{

opacity:1;

transform:scale(1);

}


/* Floating Image */

@keyframes floatImage{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

/* Floating Cards */

@keyframes floatCard{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}
}

/*======================================================
                HERO ANIMATION
======================================================*/

.hero-image img{

    animation:

    heroFloat

    5s

    ease-in-out

    infinite;

}

.rating-card{

    animation:

    cardFloat

    4s

    ease-in-out

    infinite;

}

.student-card{

    animation:

    cardFloat

    4s

    .5s

    ease-in-out

    infinite;

}

.placement-card{

    animation:

    cardFloat

    4s

    1s

    ease-in-out

    infinite;

}

@keyframes heroFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

@keyframes cardFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}

/*===================================
COURSE CARD
===================================*/

.course-card{

animation:fadeUp .8s ease both;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*====================================
WHY SECTION
====================================*/

.experience-card{

animation:floatCard 4s ease-in-out infinite;

}

.why-image img{

animation:heroFloat 5s ease-in-out infinite;

}

/*======================================================
            LOCATION SECTION
======================================================*/

.road-line{

animation:

roadMove

2s linear infinite;

}

.pin{

animation:

pulsePin

2s ease infinite;

}

@keyframes roadMove{

from{

background-position:0 0;

}

to{

background-position:0 80px;

}

}

@keyframes pulsePin{

0%,100%{

transform:translateX(-50%) scale(1);

}

50%{

transform:translateX(-50%) scale(1.08);

}

}

/*======================================================
                TESTIMONIALS
======================================================*/

.testimonial-card{

animation:fadeUp .8s ease both;

}

.testimonial-card:nth-child(2){

animation-delay:.2s;

}

.testimonial-card:nth-child(3){

animation-delay:.4s;

}