/* Centering the steps-container */
.steps-container {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin: 20px auto;
  margin-top: 20px;
  margin-bottom: 0;
  font-family: "Poppins", sans-serif;
  width: 490px; /* Ensures the container width is only as wide as its content */
}

/* Media queries for smaller screens */
@media (max-width: 600px) {
  .steps-container {
    width: 90%; /* Adjust width for smaller screens */
  }
}

.text-wrap {
  text-align: center;
  position: relative;
  display: inline-block;
  font-family: poppins;
  margin-right: 20px;
}

.circle {
  background-color: #191919;
  color: #cdcdcd;
  border-radius: 50%;
  height: 35px;
  width: 35px;
  font-family: poppins;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  line-height: 35px;
  font-weight: bold;
}

.text {
  font-weight: bold;
  margin-top: 5px;
  color: #cdcdcd;
  font-family: poppins;
  padding: 0;
}

.text-wrap.active .circle {
  background-color: #cdcdcd;
  color: #191919;
}

.text-wrap.active .text {
  color: #cdcdcd;
}

.whole-container {
  margin-left: auto; /* Set left margin to auto */
  margin-right: auto; /* Set right margin to auto */
  margin-bottom: 40px;
}