/*---------------------- treatment timeline start ----------------------*/

.treat-time-header {
  margin-bottom: 3rem;
}

.treat-time-header .title {
  color: #9c3587;
  color: var(--purple-brite);
}

.treat-time-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  row-gap: 3rem;
  -moz-column-gap: 3rem;
       column-gap: 3rem;
}

.treat-time-wrap .time-block {
  justify-content: center;
  text-align: center;
  flex: 0 0 100%;
}

.treat-time-wrap .time-details {
  color: #9c3587;
  color: var(--purple-brite);
}

.treat-time-wrap .cal-image {
  width: 9rem;
  margin: 1rem auto;
}

.treat-time-wrap .cal-image img {
  width: 100%;
}

.treat-time-wrap .time-details > p {
  padding: 0;
}

.treat-time-wrap .time-details .descript {
  display: block;
  font-size: clamp(0.77rem, 2vw, 0.88rem);
  font-size: var(--ts-small-body);
}

@media only screen and (min-width: 576px) {
  .treat-time-wrap .time-block {
    flex: 0 0 20%;
  }
}

@media only screen and (min-width: 992px) {
  .treat-time-wrap {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }
}

@media only screen and (min-width: 1200px) {
  .treat-time-wrap {
    -moz-column-gap: 0;
         column-gap: 0;
    background-image: url("stain.svg");
    background-repeat: no-repeat;
    background-position: 50% 14%;
    background-size: contain;
  }
  .treat-time-wrap .time-details > p {
    padding: 0 1rem;
  }
}

@media only screen and (min-width: 1400px) {
  .treat-time-wrap {
    background-position: 50% 0%;
    background-size: 90% 75%;
  }
}
/*---------------------- treatment timeline end ----------------------*/