/* ========================================
   HERO DECORATION LINES
======================================== */

.hero-line {
  position: absolute;

  border: 2px solid var(--yellow);

  border-color:
    var(--yellow)
    transparent
    transparent
    transparent;

  border-radius: 50%;

  opacity: 0.9;
}

.hero-line-top {
  width: 500px;
  height: 500px;

  top: -260px;
  left: -100px;

  transform: rotate(18deg);
}

.hero-line-bottom {
  width: 420px;
  height: 420px;

  right: -120px;
  bottom: -180px;

  transform: rotate(-12deg);
}