{#@font-face {
  font-family: Poppins-Regular;
  src: url(https://pages.98thpercentile.com/hubfs/Website%20Images/Spell%20kahoot%206%202023/Spell%20kahoot%206.0%20fonts/Poppins-Regular.ttf);
}


.steps-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.step-box {
  width: 100%;
  max-width: 300px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  position: relative;
}

.step-icon {
  width: 100px;
  height: 100px;
  background-color: #EAE6FA; /* Fixed Light Purple */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -50px auto 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.step-icon img {
  width: 60%;
  height: auto;
}

.step-number {
  color: rgba(138, 43, 226, .2);
  font-size: 161px;
  font-weight: 700;
  left: 20px;
  opacity: 55%;
  position: absolute;
  top: 0;
  z-index: 0;
}
.step-text {
  position: relative;
  z-index: 1;

}
.step-text p{
  font-family: Poppins-Regular!important;
  font-size:20px;
}
#}
.steps-container {
  display: flex;
  gap: 20px;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 30px; /* Added padding for better spacing */
}

.step-box {
  flex: 0 0 auto; /* Prevents shrinking */
  width: 300px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  position: relative;
}

.step-icon {
  width: 100px;
  height: 100px;
  background-color: #EAE6FA; /* Fixed Light Purple */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -50px auto 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  z-index: 2; /* Ensures it's always above the number */
  overflow: visible; /* Prevents cutting */
}

.step-icon img {
  width: 60%;
  height: auto;
  object-fit: contain; /* Ensures full visibility */
}

.step-number {
  color: rgba(138, 43, 226, 0.2);
  font-size: 161px;
  font-weight: 700;
  left:20px;
  opacity: 55%;
  position: absolute;
  top: 20px; /* Moves it slightly down */
  z-index: 1;
}

.step-text {
  position: relative;
  z-index: 2;
}

.step-text p {
  font-family: Poppins-Regular !important;
  font-size: 18px;
}