.animate-arrow {
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  /*&:hover {
    span {
      &:nth-child(1) {
        transform: translateX(120%) translateY(-120%);
      }

      &:nth-child(2) {
        transform: translateX(0) translateY(0);
      }
    }
  }*/
}
.animate-arrow svg {
  transition: transform 0.3s cubic-bezier(0.3, 0.1, 0.26, 1), opacity 0.3s cubic-bezier(0.3, 0.1, 0.26, 1);
}
.animate-arrow span {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.3, 0.1, 0.26, 1);
}
.animate-arrow span:nth-child(1) svg {
  color: #959595;
  transform: translateX(0) translateY(0);
}
.animate-arrow span:nth-child(2) {
  position: absolute;
  inset: 0;
  transform: translateX(-120%) translateY(120%);
}
.animate-arrow span:nth-child(2) svg {
  color: #ff7100;
}