/* =====================================
   FADE IN
===================================== */

.fade-in{
    animation:fadeIn 1s ease-in-out;
}

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}


/* =====================================
   SLIDE UP
===================================== */

.slide-up{
    animation:slideUp 1s ease;
}

@keyframes slideUp{

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

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

}


/* =====================================
   SLIDE LEFT
===================================== */

.slide-left{
    animation:slideLeft 1s ease;
}

@keyframes slideLeft{

    from{
        opacity:0;
        transform:translateX(-60px);
    }

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

}


/* =====================================
   SLIDE RIGHT
===================================== */

.slide-right{
    animation:slideRight 1s ease;
}

@keyframes slideRight{

    from{
        opacity:0;
        transform:translateX(60px);
    }

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

}


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

.hero-image img{

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

}

@keyframes floating{

    0%{
        transform:translateY(0);
    }

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

    100%{
        transform:translateY(0);
    }

}


/* =====================================
   BUTTON HOVER
===================================== */

.btn{

    transition:all .3s ease;

}

.btn:hover{

    transform:translateY(-5px) scale(1.03);

}


/* =====================================
   CARD HOVER
===================================== */

.hobby-card{

    transition:all .4s ease;

}

.hobby-card:hover{

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

}


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

.hobby-card img{

    transition:transform .5s;

}

.hobby-card:hover img{

    transform:scale(1.08);

}


/* =====================================
   PROFILE IMAGE
===================================== */

.about-image img{

    transition:.4s;

}

.about-image img:hover{

    transform:scale(1.04);

}


/* =====================================
   NAVBAR LINK
===================================== */

.nav-links a{

    position:relative;

}

.nav-links a::after{

    content:"";
    position:absolute;
    width:0;
    height:2px;
    left:0;
    bottom:-6px;
    background:#8ecae6;
    transition:.3s;

}

.nav-links a:hover::after,
.nav-links a.active::after{

    width:100%;

}


/* =====================================
   SCROLL ANIMATION
===================================== */

.hidden{

    opacity:0;
    transform:translateY(50px);
    transition:all .8s ease;

}

.show{

    opacity:1;
    transform:translateY(0);

}