.hero {
  margin-top: clamp(var(--space-19s), 12vw, var(--space-24));
}

.hero-title-main {
  display: inline-block;
  width: 100%;
  text-align: left;
  margin: 0 auto;

  color: var(--color-dark-gray);
  font-size: clamp(var(--fs-3xl), 5vw, var(--fs-7xl));
  font-weight: 500;
  line-height: var(--lh-01);
}

.hero-title-secondary {
  width: 17.9rem;
  color: var(--color-light-gray);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: var(--lh-4);
  margin-bottom: 0;
}

.hero-animation {
  opacity: 0.95;
  display: block;
  position: relative;
  margin: 0 auto;
  /* center animation*/

  width: clamp(21.8rem, 60vw, 45.5rem);
  height: auto;
  max-width: 100%;
  min-width: 24rem;

  transform: translateY(0);
  transition: transform var(--transition-duration);
  z-index: 3;
}

.rockone-hero-logo {
  display: block;
  width: clamp(20.4rem, 90vw, 75.8rem);
  height: auto;
  max-width: 100%;
  z-index: 1;
  position: relative;
  margin-right: auto;
  transform: translateY(calc(-1 * var(--space-8)));
}

.hero-calltoaction {
  display: flex;
  align-items: center;
  align-self: start;
  margin-top: var(--space-4l);
}

.hero-caption {
  width: 11.2rem;
  font-size: var(--fs-xs);
  line-height: var(--lh-4);
  color: var(--color-light-gray);
  margin-top: 0;
  font-weight: 500;
}

.cta-btn {
  margin-left: var(--space-5);
}

.hero-main-row {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.hero-media-column {
  position: relative;
  z-index: 1;
}

.hero-calltoaction {
  position: static;
  align-items: flex-start;
  justify-content: left;
  text-align: left;
  z-index: 1;
}

@media (max-width: 768px) {
  .hero-animation {
    transform: translateX(calc(-1 * var(--space-7))) translateY(calc(-1 * var(--space-4)));
  }

  .rockone-hero-logo {
    transform: translateY(calc(-1 * var(--space-11))) !important;
  }

  .hero-calltoaction {
    transform: translateY(calc(-1 * var(--space-9l))) !important;
  }

  .hero-title-main {
    line-height: var(--lh-001) !important;
  }

}

@media (min-width: 768px) {
  .hero-animation {
    transform: translateY(-6.2rem);
  }

  .rockone-hero-logo {
    margin-top: -8.7rem;
  }

  .background-line-middle {
    left: 74%;
  }

  .hero-caption {
    width: 17rem;
    font-size: var(--fs-base);
    margin-bottom: var(--space-5l);
  }

  .hero-title-secondary {
    font-size: var(--fs-base);
    max-width: 15.31rem;
    margin-top: var(--space-5l);
  }
}

@media (min-width:1024px) {
  .hero-animation {
    transform: translateY(-15.4rem) translateX(-5.2rem);

  }

  .rockone-hero-logo {
    margin-top: -24.8rem;
    transform: translateX(var(--space-1l)) !important
  }

  .hero-main-row {
    align-items: center;
    justify-content: center;
  }

  .hero-calltoaction {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    text-align: left;
    flex-direction: column;
    transform: translateY(var(--space-12))
  }

  .cta-btn {
    margin-left: 0;
  }
}

@keyframes logo-fade-in-up {
  from {
    opacity: 0.1;
  }

  to {
    opacity: 1;
  }
}

.rockone-hero-logo {
  opacity: 0;
  transform: translateY(2.5rem);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.22, 1.61, .36, 1);
}

.rockone-hero-logo.animate-in {
  opacity: 1;
  transform: translateY(0);
}