.what-to-expect {
  background-color: var(--dark-violet);
  color: white;
  padding: var(--font-16) var(--font-24);
  height: 42.36rem;
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 768px) {
  .what-to-expect {
    height: 17.64rem ;
  }
}


@media screen and (min-width: 768px) {
  .expect-title {
  }
}

.expect-container {
  margin-top: auto;
  position: relative;
}

@media screen and (min-width: 768px) {
  .expect-container {
    align-self: flex-end;
  }
}

.expect-image img:nth-child(1) {
  width: 16.54rem;
  height: 13rem;
  object-fit: ;
  position: absolute;
  top: -13rem;
}

@media screen and (min-width: 768px) {
  .expect-image img:nth-child(1) {
    display: none;
  }
}

.expect-image img:nth-child(2) {
  display: none;
}

@media screen and (min-width: 768px) {
  .expect-image img:nth-child(2) {
    display: block;
    width: 16.03rem;
    height: 17.64rem;
    position: absolute;
    top: -5.5rem;
    left: -12rem;
    /* border: 1px solid red; */
  }
}

.expect-steps {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
  justify-content: ;
  margin-top: auto;
}

@media screen and (min-width: 768px) {
  .expect-steps {
    flex-direction: row;
    flex-wrap: wrap;
    width: 23rem;
    justify-content: flex-end;
    gap: .3rem;
    /* border: 1px solid red; */
    
  }
}

.step-box {
  background-color: var(--brandClr);
  width: 16.54rem;
  height: 4.54rem;
  padding: 0.6rem 0.6rem;
  display: flex;
  flex-direction: column;
  border-radius: var(--font-12);
}

@media screen and (min-width: 768px) {
    .step-box {
        
    }
  .step-box:nth-child(1) {
    /* background-color: red; */
    height: 5.54rem;
    width: 8.98rem;
  }
  .step-box:nth-child(2) {
    /* background-color: rgb(42, 39, 39); */
    height: 5.54rem;
    width: 7.66rem;
  }
  .step-box:nth-child(3), .step-box:nth-child(4), .step-box:nth-child(5) {

    width: 6.41rem;
    height: 5.54rem;
    /* background-color: rgb(49, 158, 82); */
  }

}

.step-box h3 {
  font-size: var(--font-16);
  font-weight: 600;
 
}

@media screen and (min-width: 768px) {
  .step-box h3 {
    font-size: var(--font-lg-24);
     margin-top: auto;
  }
}

.step-box p {
  font-size: var(--font-14);
  font-weight: 400;
}

@media screen and (min-width: 768px) {
  .step-box p {
    font-size: var(--font-lg-20);
  }
}