:root {
  --bg-color: #131f24;
  --accent-color: #58cc02;
  --grey: #52656d;
  --dark-grey: #37464f;
  --path-width: 70px;
  --path-height: 65px;
}

.light_theme {
  --bg-color: #fff;
  --grey: #afafaf;
  --dark-grey: #e5e5e5;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: var(--bg-color);
}

.main_wrapper {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}
.path_header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 50px;
  margin-bottom: 50px;
}
.path_header::before,
.path_header::after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 2px;
  background-color: var(--dark-grey);
}
.path_header_title {
  color: var(--grey);
  font-size: 20px;
  font-weight: 700;
}

.path_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.path_image {
  width: 250px;
  position: absolute;
}
.path_image__top {
  top: 150px;
}
.path_image__bottom {
  bottom: 50px;
}
.path_section:nth-child(odd) .path_image__top {
  left: 0;
}
.path_section:nth-child(even) .path_image__top {
  right: 0;
}
.path_section:nth-child(odd) .path_image__bottom {
  right: 0;
}
.path_section:nth-child(even) .path_image__bottom {
  left: 0;
}
.path_image img {
  width: 100%;
}

.path_el {
  position: relative;
}
.path_el_box {
  width: var(--path-width);
  height: var(--path-height);
  border-radius: 50%;
  margin: 20px auto 0;
}
.path_el.active:not(.go_here) .path_el_box {
  width: calc(var(--path-width) + 15px);
  height: calc(var(--path-height) + 20px);
  border: 8px solid var(--dark-grey);
}

.progress-ring {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-90deg); /* чтобы начиналось сверху */
  z-index: 1;
  pointer-events: none;
  --radius: 46.5;
  --circumference: calc(2 * 3.1416 * var(--radius));
  --offset: calc(var(--circumference) * (1 - var(--progress)));
}
.progress-ring__circle {
  fill: none;
  stroke-width: 8;
  stroke: var(--accent-color);
  stroke-dasharray: var(--circumference);
  stroke-dashoffset: var(--offset);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s ease;
}

.path_section:nth-child(odd) .path_el:nth-child(2),
.path_section:nth-child(odd) .path_el:nth-child(4) {
  left: 50px;
}
.path_section:nth-child(odd) .path_el:nth-child(3) {
  left: 70px;
}
.path_section:nth-child(odd) .path_el:nth-child(6),
.path_section:nth-child(odd) .path_el:nth-child(8) {
  right: 50px;
}
.path_section:nth-child(odd) .path_el:nth-child(7) {
  right: 70px;
}
.path_section:nth-child(even) .path_el:nth-child(2),
.path_section:nth-child(even) .path_el:nth-child(4) {
  right: 50px;
}
.path_section:nth-child(even) .path_el:nth-child(3) {
  right: 70px;
}
.path_section:nth-child(even) .path_el:nth-child(6),
.path_section:nth-child(even) .path_el:nth-child(8) {
  left: 50px;
}
.path_section:nth-child(even) .path_el:nth-child(7) {
  left: 70px;
}
.path_el:last-child {
  left: 0 !important;
}

.path_el_signboard {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  border: 2px solid var(--dark-grey);
  padding: 10px 20px;
  text-transform: uppercase;
  border-radius: 10px;
  color: var(--accent-color);
  background-color: var(--bg-color);
  font-weight: 600;
  animation: upDown 2s ease-in-out infinite;
  opacity: 1;
  visibility: visible;
  transition: opacity .3s, visibility .3s;
  white-space: nowrap;
}
.show .path_el_signboard {
  opacity: 0;
  visibility: hidden;
}
@keyframes upDown {
  0% {
    top: -30px;
  }
  50% {
    top: -40px;
  }
  100% {
    top: -30px;
  }
}
.path_el_signboard::after {
  content: '';
  display: block;
  border: 2px solid transparent;
  border-right-color: var(--dark-grey);
  border-bottom-color: var(--dark-grey);
  background-color: var(--bg-color);
  width: 14px;
  height: 14px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%) rotateZ(45deg);
}

.path_el_btn {
  width: var(--path-width);
  height: var(--path-height);
  background-color: var(--dark-grey);
  margin: 7px auto 0;
  border: none;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: relative;
  z-index: 0;
  transform: translateY(0);
}
.path_el_btn::after {
  content: '';
  left: 0;
  right: 0;
  position: absolute;
  z-index: -1;
  box-shadow: 0 8px 0 rgb(0 0 0 / 0.2), 0 8px 0 var(--dark-grey);
  height: 60px;
  border-radius: 50%;
}
.path_el_btn:hover {
  transform: translateY(2px);
}
.path_el_btn:hover::after {
  box-shadow: 0 6px 0 rgb(0 0 0 / 0.2), 0 6px 0 var(--dark-grey);
}
.path_el_btn:active {
  transform: translateY(6px);
}
.path_el_btn:active::after {
  box-shadow: none;
}
.path_el.active .path_el_btn,
.path_el.passed .path_el_btn {
  background-color: var(--accent-color);
}
.path_el.active .path_el_btn::after,
.path_el.passed .path_el_btn::after {
  box-shadow: 0 8px 0 rgb(0 0 0 / 0.2), 0 8px 0 var(--accent-color);
}
.path_el.active .path_el_btn:hover::after,
.path_el.passed .path_el_btn:hover::after {
  box-shadow: 0 6px 0 rgb(0 0 0 / 0.2), 0 6px 0 var(--accent-color);
}
.path_el.active .path_el_btn:active::after,
.path_el.passed .path_el_btn:active::after {
  box-shadow: none;
}
.path_el.passed .path_el_btn {
  /* background-image: url(img2.svg); */
}

.path_el_start {
  width: 300px;
  height: auto;
  border: 2px solid var(--grey);
  background-color: #202f36;
  color: #52656d;
  padding: 16px;
  border-radius: 15px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.path_el.show .path_el_start {
  opacity: 1;
  visibility: visible;
}
.path_el.active .path_el_start,
.path_el.passed .path_el_start {
  top: 40px;
  border-color: var(--accent-color);
  background-color: var(--accent-color);
  color: #fff;
}
.path_el_start,
.path_el.passed .path_el_start {
  top: 20px;
}
.path_section:nth-child(odd) .path_el:nth-child(2) .path_el_start,
.path_section:nth-child(odd) .path_el:nth-child(4) .path_el_start {
  transform: translateX(calc(-50% + -50px));
}
.path_section:nth-child(odd) .path_el:nth-child(3) .path_el_start {
  transform: translateX(calc(-50% + -70px));
}
.path_section:nth-child(odd) .path_el:nth-child(6) .path_el_start,
.path_section:nth-child(odd) .path_el:nth-child(8) .path_el_start {
  transform: translateX(calc(-50% + 50px));
}
.path_section:nth-child(odd) .path_el:nth-child(7) .path_el_start {
  transform: translateX(calc(-50% + 70px));
}
.path_section:nth-child(even) .path_el:nth-child(2) .path_el_start,
.path_section:nth-child(even) .path_el:nth-child(4) .path_el_start {
  transform: translateX(calc(-50% + 50px));
}
.path_section:nth-child(even) .path_el:nth-child(3) .path_el_start {
  transform: translateX(calc(-50% + 70px));
}
.path_section:nth-child(even) .path_el:nth-child(6) .path_el_start,
.path_section:nth-child(even) .path_el:nth-child(8) .path_el_start {
  transform: translateX(calc(-50% + -50px));
}
.path_section:nth-child(even) .path_el:nth-child(7) .path_el_start {
  transform: translateX(calc(-50% + -70px));
}
.path_el:last-child .path_el_start {
  transform: translateX(-50%) !important;
}
.path_el_start::after {
  content: '';
  display: block;
  border: 2px solid transparent;
  border-left-color: var(--grey);
  border-top-color: var(--grey);
  background-color: #202f36;
  width: 14px;
  height: 14px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%) rotateZ(45deg);
}
.path_el.active .path_el_start::after,
.path_el.passed .path_el_start::after {
  border-left-color: var(--accent-color);
  border-top-color: var(--accent-color);
  background-color: var(--accent-color);
}
.path_section:nth-child(odd) .path_el:nth-child(2) .path_el_start::after,
.path_section:nth-child(odd) .path_el:nth-child(4) .path_el_start::after {
  transform: translate(calc(-50% + 50px), -50%) rotateZ(45deg);
}
.path_section:nth-child(odd) .path_el:nth-child(3) .path_el_start::after {
  transform: translate(calc(-50% + 70px), -50%) rotateZ(45deg);
}
.path_section:nth-child(odd) .path_el:nth-child(6) .path_el_start::after,
.path_section:nth-child(odd) .path_el:nth-child(8) .path_el_start::after {
  transform: translate(calc(-50% + -50px), -50%) rotateZ(45deg);
}
.path_section:nth-child(odd) .path_el:nth-child(7) .path_el_start::after {
  transform: translate(calc(-50% + -70px), -50%) rotateZ(45deg);
}
.path_section:nth-child(even) .path_el:nth-child(2) .path_el_start::after,
.path_section:nth-child(even) .path_el:nth-child(4) .path_el_start::after {
  transform: translate(calc(-50% + -50px), -50%) rotateZ(45deg);
}
.path_section:nth-child(even) .path_el:nth-child(3) .path_el_start::after {
  transform: translate(calc(-50% + -70px), -50%) rotateZ(45deg);
}
.path_section:nth-child(even) .path_el:nth-child(6) .path_el_start::after,
.path_section:nth-child(even) .path_el:nth-child(8) .path_el_start::after {
  transform: translate(calc(-50% + 50px), -50%) rotateZ(45deg);
}
.path_section:nth-child(even) .path_el:nth-child(7) .path_el_start::after {
  transform: translate(calc(-50% + 70px), -50%) rotateZ(45deg);
}
.path_el:last-child .path_el_start::after {
  transform: translate(-50%, -50%) rotateZ(45deg) !important;
}

.path_el_start_title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}
.path_el_start_info {
  font-size: 18px;
  margin-bottom: 15px;
}
.path_el_start_link {
  display: block;
  background-color: #fff;
  color: var(--accent-color);
  border-radius: 15px;
  padding: 0 20px;
  height: 50px;
  line-height: 50px;
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.path_el_start_btn {
  display: block;
  width: 100%;
  border: none;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 15px;
  padding: 0 20px;
  height: 50px;
  background-color: var(--dark-grey);
  color: inherit;
}