.contact-button #mail-icon {
  transform-origin: center;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.contact-button:hover #mail-icon {
  animation: flyAway 1.2s ease forwards;
}

.contact-button:not(:hover) #mail-icon {
  animation: flyBack 1s ease forwards;
}

@keyframes flyAway {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  30% {
    transform: translate(-5px, -10px) rotate(-5deg) scale(1.1);
    opacity: 1;
  }
  70% {
    transform: translate(40px, -50px) rotate(-20deg) scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: translate(100px, -90px) rotate(-35deg) scale(0.2);
    opacity: 0;
  }
}

@keyframes flyBack {
  0% {
    transform: translate(100px, -90px) rotate(-35deg) scale(0.2);
    opacity: 0;
  }
  30% {
    transform: translate(40px, -50px) rotate(-20deg) scale(1.2);
    opacity: 0.8;
  }
  70% {
    transform: translate(-5px, -10px) rotate(-5deg) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
}