/* Header */

.pioneer-section {
  text-align: center;
}


.wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 2rem;
  background: #fff;
}

.circle-scene {
  position: relative;
  width: 780px;
  height: 380px;
}

.inner {
  position: absolute;
  top: 47%;
  left: 51%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 240px;
  transition: opacity 0.25s;
}

.num {
  font-size: 62px;
  font-weight: 500;
  background: linear-gradient(160deg, #6b5ce7, #c94fa0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  display: inline-block;
}

.sup {
  font-size: 22px;
  font-weight: 500;
  vertical-align: super;
  background: linear-gradient(160deg, #6b5ce7, #c94fa0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.title {
  font-size: 17px;
  font-weight: 600;
  color: #222;
  margin: 8px 0 6px;
  line-height: 1.35;
}

.sub {
  font-size: 12px;
  color: #888;
  line-height: 1.6;
}

.arr-btn {
  cursor: pointer;
}

.arr-btn:hover polygon {
  fill: #222;
}







/* Quote */

.bottom-quote {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.6;
  color: #222;
}

.bottom-quote span {

  background: linear-gradient(135deg, #2563eb, #d946ef);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  font-weight: 600;
}

.quote-author {

  text-align: center;

  margin-top: 20px;

  font-size: 15px;
  font-weight: 700;

  color: #555;

  text-transform: uppercase;
}

/* Responsive */

@media(max-width:1200px) {



  .center-title {
    font-size: 34px;
  }

  .bottom-quote {
    font-size: 30px;
  }

}

@media(max-width:992px) {

  .orbit-wrapper {
    height: 650px;
  }

  .outer-orbit {
    width: 90%;
  }

  .inner-orbit {
    width: 320px;
    height: 320px;
  }

}

.mob-circle {
  display: none;
}

@media(max-width:768px) {

  .mob-circle {
    display: block;
  }

  .circle-scene {
    display: none;
  }

  .inner {
    top: 55%;
  }

  .center-number {
    font-size: 70px;
  }

  .center-title {
    font-size: 28px;
  }

  .center-text {
    font-size: 16px;
  }

  .center-content {
    width: 300px;
  }

  .bottom-quote {
    font-size: 24px;
  }

  .orbit-wrapper {
    transform: scale(.82);
  }

}

@media(max-width:576px) {

  .orbit-wrapper {
    transform: scale(.65);
    height: 520px;
  }

  .bottom-quote {
    font-size: 20px;
  }

}