.howweplanoral__container {
  display: block;
  width: 18.72rem;
  /* height: 43.63rem; */
  angle: 0 deg;
  opacity: 1;
  background-color: #62186f;
  padding: 2.31rem 0.63rem 0.81rem 1.01rem;
  background-image: url("../assets/backgroundgrid.webp");
  background-repeat: no-repeat;
  background-size: cover;
}

.howweplanoral__title {
  color: #fffffe;
}

.howweplanoral__description {
  font-weight: 400;
  font-style: Regular;
  font-size: 0.909rem;
  leading-trim: NONE;
  line-height: 100%;
  letter-spacing: 0%;
  color: #fffffe;
  margin: 0.36rem 0 2.18rem 0;
}

.treatment_discussion {
  font-family: Poppins;
  font-weight: 400;
  font-style: Regular;
  font-size: 0.909rem;
  leading-trim: NONE;
  line-height: 100%;
  letter-spacing: 0%;
  width: 15.86rem;
  height: 2.72rem;
  angle: 0 deg;
  opacity: 1;
  margin: 0 0 0.54rem 0;
  color: #ffffff;
}

.howweplanoral__description {
  font-weight: 400;
  font-style: Regular;
  font-size: 0.909rem;
  leading-trim: NONE;
  line-height: 100%;
  letter-spacing: 0%;
  color: #fffffe;
  width: 15.86rem;
  /* height: 2.72rem; */
  angle: 0 deg;
  opacity: 1;
}

.specilisation_container {
  display: flex;
  flex-direction: column;
  gap: 0.54rem;
}

.specilisation_btn {
  angle: 0 deg;
  opacity: 1;
  border-radius: 2.18rem;
  padding: 0.45rem 1.09rem;
  gap: 0.45rem;
  font-weight: 500;
  font-style: Medium;
  font-size: 0.909rem;
  leading-trim: NONE;
  line-height: 100%;
  letter-spacing: 0%;
}

.specilisation_btn1 {
  width: 11.45rem;
  background-color: #ffffff;
  color: #62186f;
}

.specilisation_btn2 {
  width: 14.18rem;
  background-color: #62186f;
  color: #ffffff;
  border: 1px solid #c7527f;
}

.specilisation_btn3 {
  width: 16.68rem;
  background-color: #ffffff;
  color: #62186f;
}

.specilisation_btn4 {
  width: 17.04rem;
  background-color: #62186f;
  color: #ffffff;
  border: 1px solid #c7527f;
}

.howweplanoral__because {
  font-weight: 700;
  font-style: Bold;
  font-size: 1.01rem;
  leading-trim: NONE;
  line-height: 120%;
  letter-spacing: 0%;
  color: #fffffe;
  margin: 3.63rem 0 0.72rem 0;
}

.specilisation_call-btn {
  width: 16.54rem;
  height: 2.45rem;
  angle: 0 deg;
  opacity: 1;
  border-radius: 0.18rem;
  padding: 0.54rem;
  gap: 0.54rem;
  background: #fdfdfd;
  font-weight: 600;
  font-style: SemiBold;
  font-size: 0.909rem;
  leading-trim: NONE;
  line-height: 100%;
  letter-spacing: 0%;
  color: #802a8f;
  display: block;
}

.specilisation_call-btn-desktop {
  display: none;
}
.treatmentsteps__container {
  display: block;
}
.step__text {
  font-weight: 400;
  font-style: Regular;
  font-size: 0.909rem;
  leading-trim: NONE;
  line-height: 100%;
  letter-spacing: 0%;
  color: #ffffff;
  width: 15.86rem;
  angle: 0 deg;
  opacity: 1;
  margin: 0 0 0.72rem 0;
  list-style-type: square;
}
.step2__container,
.step3__container {
  margin: 3.36rem 0 0 0;
}
.treatment__list {
  margin: 0 0 0 0.72rem;
}
  .mobile-step {
    display: block;
  }
  .desktop-step{
    display: none;
  }
@media screen and (min-width: 768px) {
  .howweplanoral__container {
    width: 35.8rem;
    height: 15.09rem;
    angle: 0 deg;
    opacity: 1;
    padding: 0.603rem 2.75rem 2.52rem 2.26rem;
    margin: 2.26rem 0 1.5rem 0;
    background-image: url("../assets/backgroundgrid.webp");
    background-repeat: no-repeat;
    background-size: cover;
  }

  .howweplanoral__title {
    width: 16.41rem;
    angle: 0 deg;
    opacity: 1;
    margin: 0 0 0.226rem 0;
  }

  .howweplanoral__description {
    font-weight: 400;
    font-style: Regular;
    font-size: 0.45rem;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    width: 12.92rem;
    /* height: 2.03rem; */
    angle: 0 deg;
    opacity: 1;
    margin: 0 0 0.905rem 0;
  }

  .treatment_discussion {
    font-weight: 400;
    font-style: Regular;
    font-size: 0.45rem;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    width: 8.2rem;
    height: 0.67rem;
    angle: 0 deg;
    opacity: 1;
  }

  /* Pills layout*/
  .specilisation_container {
    flex-direction: row;
  }

  .specilisation_btn {
    border-radius: 1.08rem;
    padding: 0.226rem 0.54rem;
    gap: 0.226rem;
    font-weight: 500;
    font-style: Medium;
    font-size: 0.45rem;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
  }

  .specilisation_btn1 {
    width: 5.7rem;
    background: #ffffff;
    color: #62186f;
  }

  .specilisation_btn2 {
    width: 7.2rem;
    background: #62186f;
    color: #ffffff;
    border: 0.0226rem solid #c7527f;
  }

  .specilisation_btn3 {
    width: 8.51rem;
    background: #ffffff;
    color: #62186f;
  }

  .specilisation_btn4 {
    width: 8.68rem;
    background: #62186f;
    color: #ffffff;
    border: 0.0226rem solid #c7527f;
  }

  .howweplanoral__because {
    width: 9.33rem;
    height: 1.09rem;
    angle: 0 deg;
    opacity: 1;
    font-family: Poppins;
    font-weight: 700;
    font-style: Bold;
    font-size: 0.45rem;
    leading-trim: NONE;
    line-height: 120%;
    letter-spacing: 0%;
    margin: 1.5rem 0 0.72rem 0;
  }

  .specilisation_call-btn {
    display: none;
  }

  .specilisation_call-btn-desktop {
    width: 6.86rem;
    height: 1.01rem;
    angle: 0 deg;
    opacity: 1;
    border-radius: 0.075rem;
    gap: 0.226rem;
    padding: 0.226rem;
    font-weight: 600;
    font-style: Semibold;
    font-size: 0.377rem;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: #62186f;
    display: block;
  }
  .treatmentsteps__container {
    display: none;
  }
    .mobile-step {
    display: none;
  }
  .desktop-step{
    display: block;
  }
}