.how-it-works-block-national-sell {
  padding: 0 2rem;
  margin: 0 0 3rem 0;
}

.hiw-steps-block-wrapper {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.how-it-works-block-national-sell > h2 {
  text-align: center;
}

.how-it-works-block-national-sell > h2:after {
  display: block;
  content: "";
  width: 80px;
  height: 5px;
  margin: 10px auto 0 auto;
  background-color: #6ac5cc;
}
.how-it-works-block-national-sell .hiw-block-step {
  margin-bottom: 4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.how-it-works-block-national-sell .hiw-block-step:last-of-type {
  margin-bottom: 0;
}

.how-it-works-block-national-sell .hiw-block-step h4 {
  text-transform: uppercase;
}
.how-it-works-block-national-sell .hiw-block-step h3 {
  font-weight: 300;
  color: #000;
  padding: 0;
  margin: 0;
}
.how-it-works-block-national-sell .hiw-block-step h4 {
  padding: 0;
  font-weight: 300;
  font-size: 0.95rem;
  margin: 0;
  display: inline-block;
}
.how-it-works-block-national-sell .hiw-block-step-icon {
  width: 144px;
  min-height: 148px;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.hiw-block-step-icon img {
  width: 75%;
}

.how-it-works-block-national-sell .hiw-block-step:nth-of-type(2) .hiw-block-step-icon img {
  width: 75px;
}

.how-it-works-block-national-sell .hiw-block-step-content {
  text-align: center;
  width: 100%;
}
.how-it-works-block-national-sell .hiw-block-step-content p {
  width: 100%;
  line-height: 1.7;
}

/* Add arrows on mobile under each step */
.how-it-works-block-national-sell .hiw-block-step {
  position: relative;
}
.how-it-works-block-national-sell .hiw-block-step::after {
  content: "";
  position: absolute;
  bottom: -60px;
  left: calc(50%-15px);
  width: 30px;
  height: 30px;
  background-image: url("../png/teal-arrow-3.png");
  transform: rotate(90deg);
  background-size: 30px 30px;
}

/* Remove arrow on after last step on mobile */
.how-it-works-block-national-sell .hiw-block-step:last-of-type::after {
  opacity: 0;
}

@media screen and (min-width: 640px) {
  /*if there is a 4th step */
  .how-it-works-block-national-sell .hiw-steps-block-wrapper:has(.hiw-block-step:nth-of-type(4)) {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 2rem 1fr;
    grid-template-columns: 1fr 1fr;
    grid-row: auto auto;
    -webkit-column-gap: 2rem;
    -moz-column-gap: 2rem;
    column-gap: 2rem;
    row-gap: 0;
  }

  .how-it-works-block-national-sell .hiw-block-step-content {
    position: relative;
  }

  /*if there is a 4th step remove the down arrows earlier than if there are only 3 steps */
  .how-it-works-block-national-sell .hiw-steps-block-wrapper:has(.hiw-block-step:nth-of-type(4)) .hiw-block-step::after {
    opacity: 0;
  }

  /*if there is a 4th step */
  .how-it-works-block-national-sell .hiw-steps-block-wrapper:has(.hiw-block-step:nth-of-type(4)) .hiw-block-step-content > h3::after {
    content: "";
    position: absolute;
    right: -30px;
    width: 30px;
    height: 30px;
    background-image: url("../png/teal-arrow-3.png");
    background-size: 30px 30px;
  }

  /*hide the second and last arrow */
  .how-it-works-block-national-sell .hiw-block-step:nth-of-type(2) .hiw-block-step-content > h3::after,
  .how-it-works-block-national-sell .hiw-block-step:last-of-type .hiw-block-step-content > h3::after {
    opacity: 0;
  }
}

@media screen and (min-width: 860px) {
  /* Remove down arrows used on mobile since steps are now horizontal not vertical */
  .how-it-works-block-national-sell .hiw-block-step::after {
    opacity: 0;
  }

  .how-it-works-block-national-sell .hiw-block-step-content > h3::after {
    content: "";
    position: absolute;
    right: -30px;
    width: 30px;
    height: 30px;
    background-image: url("../png/teal-arrow-3.png");
    background-size: 30px 30px;
  }
  /* if there is not a 4th step (3 steps or less) */
  .how-it-works-block-national-sell .hiw-steps-block-wrapper:not(:has(.hiw-block-step:nth-of-type(4))) {
    display: -ms-grid;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    gap: 2rem;
  }

  /* if there is not a 4th step (3 steps or less) */
  .how-it-works-block-national-sell .hiw-steps-block-wrapper:not(:has(.hiw-block-step:nth-of-type(4))) .hiw-block-step:nth-of-type(2) .hiw-block-step-content > h3::after {
    opacity: 1;
  }
}

@media screen and (min-width: 940px) {
  .how-it-works-block-national-sell .hiw-block-step:nth-of-type(2) .hiw-block-step-content > h3::after {
    opacity: 1;
  }

  .how-it-works-block-national-sell {
    margin: 0;
    max-width: 95%;
  }

  .how-it-works-block-national-sell .hiw-steps-block-wrapper {
    display: -ms-grid;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
  }

  .how-it-works-block-national-sell .hiw-block-step-icon {
    width: 144px;
    margin: 0;
  }

  .how-it-works-block-national-sell .hiw-block-step {
    margin-bottom: 0;
  }

  .how-it-works-block-national-sell .hiw-block-step-content {
    display: block;
  }

  .how-it-works-block-national-sell > h2 {
    font-size: 2.81rem;
    line-height: 3.2rem;
  }
}