.circle-container {
  position: relative;
  width: 30em;
  height: 30em;
  border-radius: 50%;
  padding: 0;
  list-style: none;
  margin: 0em auto 3em;
  border: 3px dotted rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  /*background-color: #0f1932;*/
}
.circle-container > li {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 46%;
  margin: -1em;
  width: 3.2em;
  height: 2.5em;
  /*width: 2em;
  height: 2em;*/
  font-family: "Open Sans", sans-serif;
  color: #333333;
  /*font-size: 32px;*/
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 1px;
  border-radius: 40px;
  background-color: #FAFBFC;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.08);
  transition: all 0.4s;
}
.circle-container > li.active {
  background-color: #35CC62;
  box-shadow: 0 8px 16px 0 rgba(0, 153, 46, 0.25);
  color: white;
  transition: all 0.4s cubic-bezier(0.17, 0.67, 0.83, 0.67);
}
.circle-container > li:hover {
  cursor: pointer;
}
.circle-container > li:nth-of-type(1) {
  transform: rotate(51deg) translate(7.5em) rotate(-51deg);
}
.circle-container > li:nth-of-type(2) {
  transform: rotate(102deg) translate(7.5em) rotate(-102deg);
}
.circle-container > li:nth-of-type(3) {
  transform: rotate(154deg) translate(7.5em) rotate(-154deg);
}
.circle-container > li:nth-of-type(4) {
  transform: rotate(205deg) translate(7.5em) rotate(-205deg);
}
.circle-container > li:nth-of-type(5) {
  transform: rotate(257deg) translate(7.5em) rotate(-257deg);
}
.circle-container > li:nth-of-type(6) {
  transform: rotate(308deg) translate(7.5em) rotate(-308deg);
}
.circle-container > li:nth-of-type(7) {
  transform: rotate(360deg) translate(7.5em) rotate(-360deg);
}

.circle-container .step-text {
  font-family: "Open Sans", sans-serif;
  color: #ffffff;
  font-size: 14px;
  letter-spacing: 0.11px;
  text-align: center;
  padding: 0 1em;
  transition: all 0.5s ease-in;
}
.circle-container .step-heading {
  font-family: "Open Sans", sans-serif;
  color: #ffffff;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  transition: all 0.5s ease-in;
}
.circle-container .step-separator {
  height: 2px;
  width: 60px;
  background-color: rgba(44, 190, 15, 0.6);
  margin: 0.5em auto;
}