.roadmap__section {
  width: calc(67% - 3.4375rem);
}
.roadmap__inner {
  margin-top: 5.625rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  row-gap: 6.25rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.roadmap__item {
  position: relative;
  border-radius: 1.25rem;
  width: 20rem;
  background-color: var(--white-color);
}
.roadmap__item::before {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 1.25rem;
  height: calc(100% + 0.1875rem);
  width: calc(100% + 0.1875rem);
  background: -webkit-gradient(linear, left bottom, left top, from(var(--main-color)), to(var(--white-color)));
  background: linear-gradient(to top, var(--main-color), var(--white-color));
}
.roadmap__item::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -5rem;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 3.5rem;
  height: 2.375rem;
  background: url('data:image/svg+xml,<svg width="56.000000" height="38.000000" viewBox="0 0 56 38" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><desc>Created with Pixso.</desc><defs/><path id="Arrow" d="M34.21 37.01C32.97 35.73 33 33.67 34.28 32.42L48.11 19L34.28 5.57C33 4.32 32.96 2.27 34.21 0.98C35.45 -0.3 37.5 -0.34 38.79 0.91L55.01 16.67C55.64 17.28 56 18.12 56 19C56 19.87 55.64 20.71 55.01 21.32L38.79 37.08C38.16 37.69 37.35 38 36.54 38C35.72 38 34.84 37.66 34.21 37.01ZM19.99 38C20.8 38 21.61 37.69 22.24 37.08L38.46 21.32C39.09 20.71 39.45 19.87 39.45 19C39.45 18.12 39.09 17.28 38.46 16.67L22.24 0.91C20.96 -0.34 18.91 -0.3 17.66 0.98C16.42 2.27 16.45 4.32 17.73 5.57L31.56 19L17.73 32.42C16.45 33.67 16.41 35.72 17.66 37.01C18.3 37.67 19.14 38 19.99 38ZM0.91 37.01C1.54 37.67 2.39 38 3.23 38C4.04 38 4.86 37.69 5.49 37.08L21.71 21.32C22.34 20.71 22.69 19.87 22.69 19C22.69 18.12 22.34 17.28 21.71 16.67L5.49 0.91C4.2 -0.34 2.16 -0.3 0.91 0.98C-0.34 2.27 -0.3 4.32 0.98 5.57L14.8 19L0.98 32.42C-0.3 33.67 -0.34 35.72 0.91 37.01Z" fill="%23000000" fill-opacity="1.000000" fill-rule="nonzero"/></svg>') center no-repeat;
  background-size: contain;
}
.roadmap__item:last-child::after {
  display: none;
}
.roadmap__item:nth-child(2n)::after {
  content: "";
  position: absolute;
  top: auto;
  left: -80%;
  right: auto;
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
  width: 25rem;
  height: 5.625rem;
  background: none;
  background-size: contain;
}
.roadmap__item_picture {
  position: relative;
  z-index: 1;
  height: 13.125rem;
  width: 100%;
}
.roadmap__item_picture::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5.625rem;
  background: -webkit-gradient(linear, left bottom, left top, from(var(--white-color)), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(0deg, var(--white-color), rgba(255, 255, 255, 0) 100%);
}
.roadmap__item_picture_img {
  border-top-left-radius: 1.25rem;
  border-top-right-radius: 1.25rem;
  -o-object-fit: cover;
     object-fit: cover;
}
.roadmap__item_content {
  position: relative;
  z-index: 2;
  padding: 0.625rem;
  padding-top: 0;
  padding-bottom: 1.25rem;
  text-align: center;
}
.roadmap__item_content_title {
  font-size: 1.5rem;
  font-weight: 800;
  text-transform: uppercase;
}
.roadmap__item_content_text {
  margin-top: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
}
.roadmap__item_content_link {
  margin-top: 1.125rem;
  padding: 0.75rem 0;
  border-radius: 0.375rem;
  width: 100%;
  display: inline-block;
  background-color: var(--main-color);
  color: var(--white-color);
  font-size: 1rem;
  font-weight: 600;
}
.roadmap__item_numeric {
  position: absolute;
  top: -2.8125rem;
  left: 0;
  z-index: -2;
  padding: 0.75rem;
  border-radius: 0.375rem;
  height: 4.0625rem;
  width: 6.6875rem;
  background-color: var(--black-color);
  color: var(--white-color);
  font-size: 1.25rem;
  font-weight: 800;
  text-align: center;
}
.roadmap__arrow {
  margin-left: -3.125rem;
  height: 5.125rem;
  width: 100%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.roadmap-category__box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 3.4375rem;
}

@media (max-width: 1200px) {
  .roadmap__inner {
    gap: 90px 30px;
  }
  .roadmap__item {
    width: 45.5%;
  }
  .roadmap__item:nth-child(3)::after {
    display: block;
  }
  .roadmap__item:nth-child(2)::after {
    display: none;
  }
  .roadmap__item:nth-child(5)::after {
    display: none;
  }
  .roadmap__arrow {
    display: none;
  }
  .roadmap-category__box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0;
  }
  .roadmap__section {
    width: 100%;
  }
  .roadmap__inner {
    margin-top: 60px;
  }
  .roadmap__item:nth-child(2n)::after {
    left: -50%;
  }

  .category__column {
    height: 500px !important;
}
}

@media (max-width: 992px) {
  .roadmap__item::after {
    right: -4.0625rem;
    width: 2.8125rem;
    height: 1.875rem;
  }
}

@media (max-width: 768px) {
  .roadmap__item::after {
    right: -3.4375rem;
    width: 2.8125rem;
    height: 1.875rem;
  }
}

@media (max-width: 650px) {
  .roadmap__inner {
    row-gap: 100px;
  }
  .roadmap__item {
    width: 100%;
  }
  .roadmap__item::after {
    display: block !important;
  }
  .roadmap__item::after {
    top: auto;
    bottom: -3.75rem;
    left: 50%;
    -webkit-transform: translate(-50%, 0) rotate(90deg);
        -ms-transform: translate(-50%, 0) rotate(90deg);
            transform: translate(-50%, 0) rotate(90deg);
  }
  .roadmap__item:last-child::after {
    display: none !important;
  }
  .roadmap-category__box {
    gap: 0;
  }
}

@media (max-width: 576px) {
  .roadmap__inner {
    margin-top: 80px;
  }
}