.how-we-work {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 42rem;
  overflow: hidden;
  margin: 0 0 6rem;
}

.how-we-work h2{
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  color: var(--blue);
  margin: 8rem 0 0;
}

.how-we-work p{
  text-align: center;
  font-size: 25px;
  font-weight: lighter;
  margin: 0 0 8rem;
  color: var(--blue);
}

.wheel-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: none;
  position: relative;
  width: 62rem;
  height: 62rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 8px 6px 20px rgba(0, 0, 0, 0.119), 0 1.5px 6px rgba(0, 0, 0, 0.152);
}

.wheel {
  width: 35rem;
  height: 100%;
  border-radius: 50%;
  flex-direction: column;
  text-align: center;
  padding: 5rem 4rem;
  box-sizing: border-box;
}

#wheel-title {
  color: var(--orange);
  font-size: 55px;
  font-family: 'roboto slab';
  line-height: 1.1;
  text-align: center;
  display: flex;
  justify-content: center;
  white-space: pre-line;
;

}

#wheel-description {
  color: black;
  font-size: 1.25rem;
  line-height: 1.5rem;
  margin: 1rem 0;

  span {
    font-style: italic;
    color: var(--blue);
    font-weight: bold;
  }
}

/* Position numbers outside the wheel */
.wheel-number {
  position: absolute;
  left: 50%; top: 50%;
  width: 3rem; height: 3rem;
  background-color: var(--blue);
  color: white;
  border-radius: 50%;
  display: flex; justify-content: center; align-items: center;
  font-weight: bold; font-size: 1.2rem;
  cursor: pointer; pointer-events: auto;
  transition: background 0.2s, transform 0.5s cubic-bezier(.68,-0.55,.27,1.55);
  /* Place on arc using custom property */
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--radius, 30rem)));


}

.wheel-number-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; height: 100%;
  font-weight: bold;
  font-size: 1.2rem;
  /* Counter-rotate to keep upright */
  transform: rotate(calc(-1 * var(--angle) - var(--arc-rotation, 0deg)));
  transition: transform 0.5s cubic-bezier(.68,-0.55,.27,1.55);
}

.wheel-numbers-arc {
  position: absolute;
  left: 0; top: 0;
  height: 100%; width: 100%;
  pointer-events: none; /* let numbers handle events */
  z-index: 2;
  transition: transform 0.8s cubic-bezier(.68,-0.55,.27,1.55);
}

.wheel-number:hover {
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--radius, 30rem)));
}

.wheel-number.active {
  background-color: var(--orange);
  z-index: 3;
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--radius, 30rem)));
}

#wheel-title, #wheel-description {
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: float-fade 3s ease-in-out infinite;
}

.wheel.fade-in #wheel-title,
.wheel.fade-in #wheel-description {
  opacity: 1;
  
}

@media (max-width: 1020px) {

.wheel {
  padding: 3rem 6rem;
}

  #wheel-title {
    font-size: 35px;
    word-wrap: break-word;
  }
  #wheel-description {
    word-wrap: break-word;
    padding: 0 1rem;
  }

}