.primary-button {
  position: relative;
  display: flex;
  column-gap: 16px;
  align-items: center;
  border-radius: 500px;
  overflow: hidden;
}

.primary-button {
  background-color: var(--orange-cta);
}

.primary-button a,
.primary-button p {
  color: var(--white);
}

.primary-button a {
  display: flex;
  align-items: center;
  column-gap: 16px;
  z-index: 2;
  padding: 16px 32px;
}

.primary-button::after {
  content: "";
  position: absolute;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  top: calc(100% + 4px);
  left: -2px;
  background-color: var(--white);
  border-radius: 500px;
  transition: 0.6s ease-in-out;
}

.primary-button:hover::after {
  top: -2px;
}

.arrow-container {
  position: relative;
  height: 16px;
  width: 16px;
}

.arrow-container * {
  aspect-ratio: 1;
}

.button-arrow-flying-start {
  transition: 0.6s ease-in-out;
}

.button-arrow-flying-end {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-35px, 35px);
  transition: 0.6s ease-in-out;
}

.primary-button:hover .button-arrow-flying-start {
  transform: translate(35px, -35px);
}

.primary-button:hover .button-arrow-flying-end {
  transform: translate(0px, 0px);
}

@media screen and (max-width: 900px) {

  .primary-button a {
    padding: 12px 16px;
  }
}