.hero-right {
  position: relative;
  width: 280px;
  height: 280px;
  margin: auto;
}

.rocket-wrapper {
  position: absolute;
  top: 40%;
  left: 40%;
  transform: translate(-50%, -50%);
  animation: fly-forward-back 4s ease-in-out infinite;
  z-index: 2;
}

.rocket {
  width: 250px;
  display: block;
}

.frequency {
  position: absolute;
  bottom: -15px; /* attach at tail */
  left: 50%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px solid rgba(255, 105, 180, 0.6);
  animation: pulse 2.0s infinite ease-out;
  transform: translateX(-50%);
  z-index: -1;
}

@keyframes fly-forward-back {
  0% {
    transform: translate(-50%, -50%);
  }
  50% {
    transform: translate(-45%, -55%);
  }
  100% {
    transform: translate(-50%, -50%);
  }
}


@keyframes pulse {
  0% {
    transform: translateX(-50%) scale(0.5);
    opacity: 0.8;
  }
  100% {
    transform: translateX(-50%) scale(2.8);
    opacity: 0;
  }
}