/* IMAGE FLOAT */

.hero-image{
  animation:float 5s ease-in-out infinite;
}

@keyframes float{

  0%{
    transform:translateY(0px);
  }

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

  100%{
    transform:translateY(0px);
  }

}

/* FADE */

.hero-title,
.hero-info,
.review-card,
.navbar{
  animation:fadeUp 1s ease forwards;
}

@keyframes fadeUp{

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

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

}