.footer-icons {
  position: relative;
}

.footer-icon {
  display: none;
}

@media (min-width: 769px) {
  .footer-icon {
    display: block;
    position: absolute;
    width: 50px;
    background-color: var(--white);
    padding: 5px;
    border-radius: 50px;
    z-index: 1;
    animation: footerIconSlideUp 2s ease 0s normal none;
    transition: transform var(--animation-duration-normal) var(--animation-timing-ease-out);
    transform: translateY(50px);
  }

  @keyframes footerIconSlideUp {
    0% {
      transform: translateY(500px);
    }
  
    100% {
      transform: translateY(50px);
    }
  }
}

@media (min-width: 1025px) {
  .footer-icon {
    transition: transform var(--animation-duration-normal) var(--animation-timing-ease-out);
    transform: translateY(0px);
  }

  @keyframes footerIconSlideUp {
    0% {
      transform: translateY(500px);
    }
  
    100% {
      transform: translateY(0px);
    }
  }
}

.footer-icon-1 {
  left: 5%;
  top: 0rem;
  animation: footerIconSlideUp 2s ease 0s normal none;
}

.footer-icon-2 {
  left: 10%;
  top: 8rem;
  animation: footerIconSlideUp 3s ease 0s normal none;
}

.footer-icon-3 {
  left: 15%;
  top: 2rem;
  animation: footerIconSlideUp 2.5s ease 0s normal none;
}

.footer-icon-4 {
  left: 25%;
  top: 7rem;
  animation: footerIconSlideUp 2s ease 0s normal none;
}

.footer-icon-5 {
  left: 35%;
  top: 6rem;
  animation: footerIconSlideUp 2.5s ease 0s normal none;
}

.footer-icon-6 {
  right: 40%;
  top: 9rem;
  animation: footerIconSlideUp 1.5s ease 0s normal none;
}

.footer-icon-7 {
  right: 15%;
  top: 11rem;
  animation: footerIconSlideUp 2s ease 0s normal none;
}

.footer-icon-8 {
  right: 5%;
  top: 10rem;
  animation: footerIconSlideUp 1s ease 0s normal none;
}