.project-steps .project-steps-inner {
  display: flex;
  align-items: center;
}
.project-steps .project-steps-inner .step-div.black {
  background-color: var(--black);
  color: var(--white);
}

.project-steps .project-steps-inner .step-arrow-div.black {
  background-color: var(--black);
  border: 2px solid var(--white);
  margin-left: -18px;
  margin-right: -18px;
}

.project-steps .project-steps-inner .step-div {
  width: 100%;

  height: 200px !important;
  border-radius: 8px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--white);
  color: var(--bleck);

  box-shadow: var(--shadow);
}

.project-steps .project-steps-inner .step-arrow-div {
  width: 50px !important;
  height: 50px !important;
  display: flex;
  flex-shrink: 0 !important;

  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1px solid var(--grey4);
  z-index: 1;
  margin-left: -17px;
  margin-right: -17px;

  background-color: var(--white);
}

.project-steps .project-steps-inner .step-arrow-div img {
  width: 21px;
  height: 16px;
}

@media screen and (max-width: 840px) {
  .project-steps .project-steps-inner {
    flex-direction: column;
  }

  .project-steps .project-steps-inner .step-div {
    width: 100%;

    max-width: unset;
    height: min-content !important;
    border-radius: 8px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    background-color: var(--white);
    color: var(--bleck);

    box-shadow: var(--shadow);
  }

  .project-steps .project-steps-inner .step-arrow-div {
    width: 50px !important;
    height: 50px !important;
    display: flex;
    flex-shrink: 0 !important;

    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 1px solid var(--grey4);
    z-index: 1;
    margin-top: -19px;
    margin-bottom: 2px;

    background-color: var(--white);
  }

  .project-steps .project-steps-inner .step-arrow-div img {
    transform: rotate(90deg);
  }

  .step-div-text {
    width: 100%;
    max-width: 350px;
  }
}

@media screen and (max-width: 500px) {
  .step-div-text {
    width: 100%;
    max-width: 300px;
  }
}