/* =====================================
   ANIMATIONS.CSS
===================================== */

/* Fade In */

@keyframes fadeIn {

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

/* Slide Up */

@keyframes slideUp{

    from{

        opacity:0;
        transform:translateY(60px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/* Slide Left */

@keyframes slideLeft{

    from{

        opacity:0;
        transform:translateX(-60px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

/* Slide Right */

@keyframes slideRight{

    from{

        opacity:0;
        transform:translateX(60px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

/* Zoom In */

@keyframes zoomIn{

    from{

        opacity:0;
        transform:scale(.8);

    }

    to{

        opacity:1;
        transform:scale(1);

    }

}

/* Floating Animation */

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

/* Apply Animations */

.hero-content{

    animation:slideLeft 1s ease;

}

.hero-image{

    animation:slideRight 1s ease;

}

.feature-box{

    animation:slideUp .8s ease;

}

.course-card{

    animation:zoomIn .8s ease;

}

.testimonial-card{

    animation:fadeIn 1s ease;

}

.logo-img{

    animation:floating 3s ease-in-out infinite;

}

.primary-btn,
.secondary-btn,
.trial-btn{

    transition:.3s;

}

.primary-btn:hover,
.secondary-btn:hover,
.trial-btn:hover{

    transform:translateY(-4px);

}

.feature-box:hover,
.course-card:hover,
.testimonial-card:hover{

    transform:translateY(-10px);

    transition:.3s;

}

img{

    transition:.4s;

}

img:hover{

    transform:scale(1.03);

}