/* ==================================================
   11. Animation
================================================== */

/* ==================================================
   Fade Up
================================================== */

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

/* ==================================================
   Fade Left
================================================== */

.fade-left{

    opacity:0;

    transform:translateX(-40px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.fade-left.show{

    opacity:1;

    transform:translateX(0);

}

/* ==================================================
   Fade Right
================================================== */

.fade-right{

    opacity:0;

    transform:translateX(40px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.fade-right.show{

    opacity:1;

    transform:translateX(0);

}

/* ==================================================
   Scale Up
================================================== */

.scale-up{

    opacity:0;

    transform:scale(.92);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.scale-up.show{

    opacity:1;

    transform:scale(1);

}

/* ==================================================
   Card Hover
================================================== */

.card-hover{

    transition:
        transform .35s,
        box-shadow .35s;

}

.card-hover:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 35px rgba(0,0,0,.15);

}

/* ==================================================
   Image Hover
================================================== */

.image-hover{

    overflow:hidden;

}

.image-hover img{

    transition:transform .5s ease;

}

.image-hover:hover img{

    transform:scale(1.08);

}

/* ==================================================
   Button Hover
================================================== */

.button-hover{

    transition:
        transform .3s,
        box-shadow .3s;

}

.button-hover:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(0,0,0,.18);

}

/* ==================================================
   Arrow Animation
================================================== */

.arrow-hover{

    transition:transform .3s;

}

.arrow-hover:hover{

    transform:translateX(6px);

}

/* ==================================================
   Smooth Scroll
================================================== */

html{

    scroll-behavior:smooth;

}

/* ==================================================
   Fade In
================================================== */

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

.fade-in{

    animation:fadeIn .8s ease forwards;

}

/* ==================================================
   Scroll Mouse
================================================== */

@keyframes scrollMove{

    0%{

        opacity:0;

        transform:translateY(0);

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:translateY(12px);

    }

}

/* ==================================================
   Hero Text
================================================== */

@keyframes heroFadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.hero-content h1{

    animation:heroFadeUp .8s ease both;

}

.hero-content p{

    animation:heroFadeUp .8s ease .2s both;

}

.hero-btn{

    animation:heroFadeUp .8s ease .4s both;

}

/* ==================================================
   Loading
================================================== */

@keyframes loadingFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

body{

    animation:loadingFade .5s ease;

}