.card {
  background: white;
  padding: 2rem;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  transition: .4s;
}
.card h3 {
  margin-top: 1rem;
  font-weight: 600;
}
.card:hover {
  transform: translateY(-10px) scale(1.05);
}

.animate-fade {
  animation: fadeIn 1s ease forwards;
}
.animate-fade-delay {
  animation: fadeIn 1s ease .5s forwards;
  opacity: 0;
}
.animate-slide-left {
  animation: slideLeft 1s ease forwards;
}
.animate-float {
  animation: float 4s ease-in-out infinite;
}

/* Scroll animation */
.animate-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: 1s;
}
.animate-scroll.show {
  opacity: 1;
  transform: translateY(0);
}

/* Keyframes */
@keyframes fadeIn {
  from {opacity:0; transform:translateY(20px);}
  to {opacity:1; transform:none;}
}
@keyframes slideLeft {
  from {opacity:0; transform:translateX(-50px);}
  to {opacity:1; transform:none;}
}
@keyframes float {
  0%,100% {transform:translateY(0);}
  50% {transform:translateY(-15px);}
}