* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
}
body {
  font-family: "Inter", serif, sans-serif;
}
main {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    #5b51ff 0%,
    /* Rich purple */ #827bfa 50%,
    /* Medium purple */ #c5b5ff3b 100% /* Light purple */
  );
}
.step-Progress-Container {
  width: 80%;
  max-width: 356px;
  height: fit-content;
  max-height: 70%;
  background: #ffffff;
  border-radius: 32px;
  /* overflow: hidden; */
  padding: 32px;
  box-shadow: 0 20px 40px rgba(49, 46, 105, 0.904),
    /* Main shadow */ 0 8px 16px rgba(51, 41, 253, 0.993); /* Subtle secondary shadow */
}
.steps {
  display: flex;
  /* background-color: pink; */
  flex-direction: column;
  gap: 32px;
  position: relative;
  margin-left: 18px;
  height: 80%;
  /* overflow-y: auto; */
  overflow: hidden;
}

.step {
  display: flex;
  /* justify-content: center; */
  align-items: center;
  gap: 28px;
  overflow-y: auto;
}
.circle {
  height: 48px;
  width: 48px;
  border-radius: 50%;
  background-color: white;
  border: 2px solid rgb(172, 171, 171);
  z-index: 2;
  transition: .8s ease;
}
.stepText h4 {
  font-size: 20px;
  font-weight: 500;
  text-transform: capitalize;
}
.stepText h6 {
  font-size: 14px;
  font-weight: 400;
  margin-top: 6px;
  color: rgb(105, 105, 105);
}
.buttons {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  height: 10%;
}
.button {
  font-size: 18px;
  padding: 8px 16px;
  font-family: "Inter", sans-serif;
  border-radius: 8px;
  border: none;
  background-color: #827bfa;
  color: white;
  cursor: pointer;
}
.button:disabled{
  background-color: rgb(155, 154, 154);
  cursor: not-allowed;
}
.button:active{
  scale: .98;
}
.steps::before {
  content: '';
  background-color: rgba(172, 171, 171, 0.651);
  width: 6px;
  height: 100%;
  position: absolute;
  left: 8.8%;
  top: 0;
  transform: translateX(-50%);
  z-index: 1;
}
.progress {
  background-color:#9790fa ;
  width: 6px;
  height: 0%;
  position: absolute;
  left: 8.8%;
  top: 0;
  transform: translateX(-50%);
  z-index: 1;
  transition: .3s ease;
}
.step.active .circle {
  background-color: #9790fa;
  border-color: #9790fa;
}