.how-it-works {
  padding: 90px 60px;
  background: #CBE5E1;
}

.how-it-works .wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.how-it-works .top-content {
  display: flex;
  flex-direction: column;
  gap: 29px;
  align-items: center;
  width: 100%;
  max-width: 622px;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 60px;
}

.how-it-works .bottom-content {
  display: flex;
  gap: 20px;
  padding-top: 66px;
  align-items: flex-start;
}

.how-it-works .bottom-content .item {
  width: 100%;
  max-width: calc(100% / 4);
  background: #fff;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 50px;
  position: relative;
}
.how-it-works .bottom-content .item p {
  margin-bottom: 0;
}
.how-it-works .bottom-content .item:before {
  content: '';
  display: block;
  width: 36px;
  height: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='22' viewBox='0 0 32 22' fill='none'%3E%3Cpath d='M15.5884 0L31.1768 21.75H-7.82013e-05L15.5884 0Z' fill='white'/%3E%3C/svg%3E");
  top: -21px;
  position: absolute;
  background-repeat: no-repeat;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.how-it-works .bottom-content .divider {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 200px;
  background-color: #00816D;
  top: -86px;
  position: absolute;
  background-repeat: no-repeat;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.how-it-works .bottom-content .item:after {
  content: '';
  display: block;
  width: calc(100% - 36px);
  height: 6px;
  border-radius: 20px;
  background-color: #00816D;
  position: absolute;
  top: -79px;
  left: 57%;
}

.how-it-works .bottom-content .item:last-child:after {
  display: none;
}

.how-it-works .bottom-content .item .icon-wrap {
  width: 84px;
  height: 84px;
}

.how-it-works .bottom-content .item .item-content {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.how-it-works .button-wrap {
  margin-top: 50px;
}

.how-it-works .button-wrap a {
  color: #244545;
  font-size: 18px;
  font-style: normal;
  font-weight: 800;
  line-height: 100%;
  letter-spacing: -0.18px;
  margin: 0 auto;
  display: block;
  width: fit-content;
  max-width: 266px;
  padding: 20px 44px;
  border-radius: 100px;
  text-align: center;
  background: #F1B434;
  text-decoration: none;
  transition: all ease 200ms;
}
.how-it-works .button-wrap a:hover {
  background: #3f4483;
  color: #fff;
}


@media screen and (max-width: 1024px) {
  .how-it-works .bottom-content {
    flex-direction: column;
    padding-top: 0;
    padding-left: 60px;
  }
  .how-it-works .bottom-content .item {
    max-width: 100%;
  }
  .how-it-works .bottom-content .item:before {
    rotate: -90deg;
    top: 8px;
    left: -24px;
    right: unset;
  }

  .how-it-works .bottom-content .divider {
    top: 15px;
    left: -80px;
    right: unset;
  }

  .how-it-works .bottom-content .item:after {
    width: 6px;
    height: calc(100% - 30px);
    top: 51px;
    left: -73px;
  }
} 

@media screen and (max-width: 767px) {
  .how-it-works {
    padding: 75px 30px;
  }
  .how-it-works .top-content {
    gap: 40px;
    margin-bottom: 20px;
  }
  .how-it-works .bottom-content {
    padding-left: 70px;
  }
  .how-it-works .button-wrap {
    margin-top: 30px;
  }
  .how-it-works .bottom-content .item:after {
    left: -48px;
  }

  .how-it-works .bottom-content .divider {
    left: -54px;
  }
}


@media screen and (max-width: 439px) {
  .how-it-works .bottom-content {
    padding-left: 44px;
}
}