.show-on-scroll {
    opacity: 0;
    transform: translateY(4em);
    transition: transform 1s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 0.3s 0.25s ease-out;
    will-change: transform, opacity;
  }
  .show-on-scroll.delay2 {
    transition-delay: 0.25s;
  }
  .show-on-scroll.delay3 {
    transition-delay: 0.45s;
  }
  .show-on-scroll.delay4 {
    transition-delay: 0.65s;
  }
  .show-on-scroll.delay5 {
    transition-delay: 1s;
  }
  .show-on-scroll.delay6 {
    transition-delay: 1.25s;
  }
  .show-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .show-on-scroll.slide-on-scroll {
    opacity: 0;
    transform: translateX(4em);
    transition: transform 1s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 0.3s 0.25s ease-out;
    will-change: transform, opacity;
  }
  .show-on-scroll.slide-on-scroll.delay2 {
    transition-delay: 0.25s;
  }
  .show-on-scroll.slide-on-scroll.delay3 {
    transition-delay: 0.45s;
  }
  .show-on-scroll.slide-on-scroll.delay4 {
    transition-delay: 0.65s;
  }
  .show-on-scroll.slide-on-scroll.delay5 {
    transition-delay: 1s;
  }
  .show-on-scroll.slide-on-scroll.delay6 {
    transition-delay: 1.25s;
  }
  .show-on-scroll.slide-on-scroll.is-visible {
    opacity: 1;
    transform: translateX(0);
  }
  
  
  .show-on-scroll.color-on-scroll {
    opacity: 1;
    transform: none;
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    transform: scale(.95);
    -webkit-transform: scale(.95);
    -ms-transform: scale(.95);
    transition: filter 1s 0.25s cubic-bezier(0, 1, 0.3, 1), transform 1s 0.25s cubic-bezier(0, 1, 0.3, 1);
    will-change: filter, transform;
  }
  .color-on-scroll.delay2 {
    transition-delay: 0.25s;
  }
  .color-on-scroll.delay3 {
    transition-delay: 0.45s;
  }
  .color-on-scroll.delay4 {
    transition-delay: 0.65s;
  }
  .color-on-scroll.delay5 {
    transition-delay: 1s;
  }
  .color-on-scroll.delay6 {
    transition-delay: 1.25s;
  }
  
  .show-on-scroll.color-on-scroll.is-visible {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
  }
  
  
  .hearticon {
    animation: pulse 1s infinite;
  }
  
  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(0.9);
    }
  }