.roadmap {
  position: relative;
  /* background-color: #170429; */
}

.roadmap_bg {
  position: absolute;
  width: 100%;
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
  z-index: 1;
  bottom: -610px;
}

.roadmap_bg img {
  position: absolute;
}

.roadmap_bg_gd {
  top: -20px;
  -webkit-filter: blur(8px);
  filter: blur(8px);
  opacity: 0.3;
}

.roadmap_container {
  z-index: 3;
  margin-top: 500px;
  position: relative;
}

.roadmap_content_container {
  margin-top: 50px;
  position: relative;
}

.roadmap_content_img {
  width: 1200px;
  /* height: 1366.82px; */
}

.roadmap_content_wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 16px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.roadap_content_title {
  font-family: "Work Sans 700";
  color: #ffc700;
  max-width: 200px;
  text-align: center;
  font-size: 24px;
  line-height: 28px;
}

.roadap_content_title_3string {
  max-width: 270px;
}

.roadap_content_title_future {
  color: #ffffff;
}

.roadap_content_title_start {
  font-size: 36px;
  line-height: 28px;
  text-align: start;
}

.roadap_content_data {
  font-family: "Work Sans 400";
  font-size: 20px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.57);
}

.roadmap_content_start {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.roadmap_content_i_description {
  font-family: "Work Sans 400";
  font-size: 14px;
  line-height: 121%;
  color: #ffffff;
  position: absolute;
  background: #18032d;
  -webkit-box-shadow: 9px 9px 19px 8px rgba(0, 0, 0, 0.25);
  box-shadow: 9px 9px 19px 8px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(29px);
  backdrop-filter: blur(29px);
  border-radius: 4px;
  width: 287.06px;
  padding: 27px 23px;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  z-index: 5;
  background-image: radial-gradient(circle at 100% 100%,
      transparent 4px,
      rgba(255, 255, 255, 0.18) 4px,
      rgba(255, 255, 255, 0.18) 5px,
      transparent 5px),
    -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.18)), to(rgba(23, 4, 41, 0.1))),
    radial-gradient(circle at 0% 100%,
      transparent 4px,
      rgba(23, 4, 41, 0.1) 4px,
      rgba(23, 4, 41, 0.1) 5px,
      transparent 5px),
    -webkit-gradient(linear, left top, left bottom, from(rgba(23, 4, 41, 0.1)), to(rgba(23, 4, 41, 0.1))),
    radial-gradient(circle at 0% 0%,
      transparent 4px,
      rgba(23, 4, 41, 0.1) 4px,
      rgba(23, 4, 41, 0.1) 5px,
      transparent 5px),
    -webkit-gradient(linear, right top, left top, from(rgba(23, 4, 41, 0.1)), to(rgba(255, 255, 255, 0.18))),
    radial-gradient(circle at 100% 0%,
      transparent 4px,
      rgba(255, 255, 255, 0.18) 4px,
      rgba(255, 255, 255, 0.18) 5px,
      transparent 5px),
    -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0.18)), to(rgba(255, 255, 255, 0.18)));
  background-image: -o-radial-gradient(100% 100%,
      circle,
      transparent 4px,
      rgba(255, 255, 255, 0.18) 4px,
      rgba(255, 255, 255, 0.18) 5px,
      transparent 5px),
    -o-linear-gradient(left, rgba(255, 255, 255, 0.18), rgba(23, 4, 41, 0.1)),
    -o-radial-gradient(0% 100%, circle, transparent 4px, rgba(23, 4, 41, 0.1) 4px, rgba(23, 4, 41, 0.1) 5px, transparent 5px),
    -o-linear-gradient(top, rgba(23, 4, 41, 0.1), rgba(23, 4, 41, 0.1)),
    -o-radial-gradient(0% 0%, circle, transparent 4px, rgba(23, 4, 41, 0.1) 4px, rgba(23,
        4,
        41,
        0.1) 5px, transparent 5px),
    -o-linear-gradient(right, rgba(23, 4, 41, 0.1), rgba(255, 255, 255, 0.18)),
    -o-radial-gradient(100% 0%, circle, transparent 4px, rgba(255,
        255,
        255,
        0.18) 4px, rgba(255, 255, 255, 0.18) 5px, transparent 5px),
    -o-linear-gradient(bottom, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.18));
  background-image: radial-gradient(circle at 100% 100%,
      transparent 4px,
      rgba(255, 255, 255, 0.18) 4px,
      rgba(255, 255, 255, 0.18) 5px,
      transparent 5px),
    linear-gradient(to right, rgba(255, 255, 255, 0.18), rgba(23, 4, 41, 0.1)),
    radial-gradient(circle at 0% 100%,
      transparent 4px,
      rgba(23, 4, 41, 0.1) 4px,
      rgba(23, 4, 41, 0.1) 5px,
      transparent 5px),
    linear-gradient(to bottom, rgba(23, 4, 41, 0.1), rgba(23, 4, 41, 0.1)),
    radial-gradient(circle at 0% 0%,
      transparent 4px,
      rgba(23, 4, 41, 0.1) 4px,
      rgba(23, 4, 41, 0.1) 5px,
      transparent 5px),
    linear-gradient(to left, rgba(23, 4, 41, 0.1), rgba(255, 255, 255, 0.18)),
    radial-gradient(circle at 100% 0%,
      transparent 4px,
      rgba(255, 255, 255, 0.18) 4px,
      rgba(255, 255, 255, 0.18) 5px,
      transparent 5px),
    linear-gradient(to top,
      rgba(255, 255, 255, 0.18),
      rgba(255, 255, 255, 0.18));
  background-size: 5px 5px, calc(100% - 10px) 1px, 5px 5px,
    1px calc(100% - 10px);
  background-position: top left, top center, top right, center right,
    bottom right, bottom center, bottom left, center left;
  background-repeat: no-repeat;
}

.roadmap_content_start {
  position: absolute;
  top: 185px;
  left: 115px;
}

.roadmap_content_i_description_start {
  top: -31px;
  left: -124px;
}

.roadmap_content_i:hover+div {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.roadmap_content_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: absolute;
  top: 396px;
  left: 198px;
  max-width: 851px;
}

.roadmap_content_i_wrap1 {
  position: absolute;
  top: 450px;
  left: 101px;
}

.roadmap_content_i_description_1 {
  top: -31px;
  left: -35px;
}

.roadmap_content_i_wrap2 {
  position: absolute;
  top: 450px;
  left: 448px;
}

.roadmap_content_i_description_2 {
  top: -31px;
  left: -35px;
}

.roadmap_content_i_wrap3 {
  position: absolute;
  top: 444px;
  left: 857px;
}

.roadmap_content_i_description_3 {
  top: -173px;
  left: -40px;
}

.roadmap_content_i_wrap4 {
  position: absolute;
  top: 695px;
  left: 102px;
}

.roadmap_content_i_description_4 {
  top: -154px;
  left: -35px;
}

.roadmap_content_i_wrap5 {
  position: absolute;
  top: 695px;
  left: 425px;
}

.roadmap_content_i_description_5 {
  top: -31px;
  left: -35px;
}

.roadmap_content_i_wrap6 {
  position: absolute;
  top: 695px;
  left: 857px;
}

.roadmap_content_i_description_6 {
  top: -142px;
  left: -35px;
}

.roadmap_content_i_wrap7 {
  position: absolute;
  top: 961px;
  left: 121px;
}

.roadmap_content_i_description_7 {
  top: -170px;
  left: -35px;
}

.roadmap_content_i_wrap8 {
  position: absolute;
  top: 955px;
  left: 458px;
}

.roadmap_content_i_description_8 {
  top: -31px;
  left: -35px;
}

.roadmap_content_i_wrap9 {
  position: absolute;
  top: 961px;
  left: 816px;
}

.roadmap_content_i_description_9 {
  top: -31px;
  left: -30px;
}

.roadmap_content_i_wrap10 {
  position: absolute;
  top: 1244px;
  left: 425px;
}

.roadmap_content_i_description_10 {
  top: -120px;
  left: -35px;
}

.roadmap_content_i_wrap11 {
  position: absolute;
  top: 1244px;
  left: 452px;
}

.roadmap_content_i_description_11 {
  top: -56px;
  left: -35px;
}

.roadmap_content_i_wrap12 {
  position: absolute;
  top: 1244px;
  left: 817px;
}

.roadmap_content_i_description_12 {
  top: -122px;
  left: -35px;
}

.roadmap_content_container_mobile {
  display: none;
  -webkit-overflow-scrolling: touch;
}

/*Убрать полосу прокрутки для всей страницы*/
.roadmap_content_container_mobile::-webkit-scrollbar {
  width: 0;
}

/* Добавляем анимацию current событию */
.roadmap_current_event {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounce {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.roadmap_mobile_wrapper {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  top: -297px;
  left: 10px;
  gap: 93px;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
}

.roadmap_mobile_content_container {
  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: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 5px;
  max-width: 170px;
}

.roadmap_mobile_content_title {
  font-family: "Work Sans 700";
  font-size: 21px;
  line-height: 24px;
  color: #ffc700;
  width: 148px;
}

.roadmap_mobile_content_title_future {
  color: #ffffff;
}

.roadmap_mobile_content_data {
  font-family: "Work Sans 400";
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0.0585859px;
  color: rgba(255, 255, 255, 0.57);
}

.roadmap_mobile_content_description {
  font-family: "Work Sans 400";
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0.0760667px;
  color: #ffffff;
  margin-top: 11px;
}

@media screen and (max-width: 1439px) {
  .roadmap_container {
    margin-top: 400px;
  }

  .roadmap_content_img {
    width: 919.7px;
    /* height: 1042.11px; */
  }

  .roadmap_content_wrapper {
    gap: 10px;
  }

  .roadap_content_title {
    font-size: 18px;
    line-height: 21px;
    max-width: 140px;
  }

  .roadap_content_title_3string {
    max-width: 270px;
  }

  .roadap_content_title_start {
    font-size: 27.4474px;
    line-height: 21px;
  }

  .roadap_content_data {
    font-size: 16px;
    line-height: 18px;
  }

  .roadmap_content_i_description {
    font-size: 12px;
    line-height: 121%;
  }

  .roadmap_content_start {
    position: absolute;
    top: 23px;
    left: 90px;
  }

  .roadmap_content_i_wrap1 {
    top: 325px;
    left: 86px;
  }

  .roadmap_content_i_description_1 {
    top: -31px;
    left: -70px;
  }

  .roadmap_content_i_wrap2 {
    top: 325px;
    left: 339px;
  }

  .roadmap_content_i_description_2 {
    top: -31px;
    left: -35px;
  }

  .roadmap_content_i_wrap3 {
    top: 325px;
    left: 655px;
  }

  .roadmap_content_i_description_3 {
    top: -136px;
    left: -40px;
  }

  .roadmap_content_i_wrap4 {
    position: absolute;
    top: 528px;
    left: 85px;
  }

  .roadmap_content_i_description_4 {
    top: -123px;
    left: -61px;
  }

  .roadmap_content_i_wrap5 {
    top: 528px;
    left: 292px;
  }

  .roadmap_content_i_description_5 {
    top: -32px;
    left: -5px;
  }

  .roadmap_content_i_wrap6 {
    top: 528px;
    left: 662px;
  }

  .roadmap_content_i_description_6 {
    top: -109px;
    left: -67px;
  }

  .roadmap_content_i_wrap7 {
    top: 734px;
    left: 95px;
  }

  .roadmap_content_i_description_7 {
    top: -144px;
    left: -69px;
  }

  .roadmap_content_i_wrap8 {
    top: 734px;
    left: 357px;
  }

  .roadmap_content_i_description_8 {
    top: -18px;
    left: -57px;
  }

  .roadmap_content_i_wrap9 {
    top: 734px;
    left: 595px;
  }

  .roadmap_content_i_description_9 {
    top: -12px;
    left: -7px;
  }

  .roadmap_content_i_wrap10 {
    top: 930px;
    left: 320px;
  }

  .roadmap_content_i_description_10 {
    top: -139px;
    left: -59px;
  }

  .roadmap_content_i_wrap11 {
    top: 930px;
    left: 357px;
  }

  .roadmap_content_i_description_11 {
    top: -51px;
    left: -63px;
  }

  .roadmap_content_i_wrap12 {
    top: 930px;
    left: 596px;
  }

  .roadmap_content_i_description_12 {
    top: -65px;
    left: -8px;
  }

  .roadmap_bg {
    position: absolute;
    width: 100%;
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
    z-index: 1;
    bottom: -330px;
  }
}

@media screen and (max-width: 1100px) {
  .roadmap_container {
    margin-top: 300px;
  }

  .roadmap_content_img {
    /* width: 706.71px; */
    /* height: 800.77px; */
  }

  .roadmap_content_wrapper {
    gap: 6px;
  }

  .roadap_content_title {
    font-size: 14px;
    line-height: 16px;
    max-width: 140px;
  }

  .roadap_content_title_3string {
    max-width: 200px;
  }

  .roadap_content_title_start {
    font-size: 21px;
    line-height: 16px;
  }

  .roadap_content_data {
    font-size: 12px;
    line-height: 14px;
  }

  .roadmap_content_i_description {
    font-size: 10px;
    line-height: 121%;
    padding: 10px;
  }

  .roadmap_content_start {
    top: 108px;
    left: 62px;
  }

  .roadmap_content_i_description_start {
    top: -16px;
    left: -52px;
  }

  .roadmap_content_i_wrap1 {
    top: 250px;
    left: 54px;
  }

  .roadmap_content_i_description_1 {
    top: 0px;
    left: -70px;
  }

  .roadmap_content_i_wrap2 {
    top: 250px;
    left: 262px;
  }

  .roadmap_content_i_description_2 {
    top: -16px;
    left: -69px;
  }

  .roadmap_content_i_wrap3 {
    top: 250px;
    left: 494px;
  }

  .roadmap_content_i_description_3 {
    top: -57px;
    left: -74px;
  }

  .roadmap_content_i_wrap4 {
    top: 400px;
    left: 51px;
  }

  .roadmap_content_i_description_4 {
    top: -56px;
    left: -61px;
  }

  .roadmap_content_i_wrap5 {
    top: 400px;
    left: 227px;
  }

  .roadmap_content_i_description_5 {
    top: 3px;
    left: -36px;
  }

  .roadmap_content_i_wrap6 {
    top: 400px;
    left: 491px;
  }

  .roadmap_content_i_description_6 {
    top: -56px;
    left: -67px;
  }

  .roadmap_content_i_wrap7 {
    top: 556px;
    left: 74px;
  }

  .roadmap_content_i_description_7 {
    top: -73px;
    left: -69px;
  }

  .roadmap_content_i_wrap8 {
    top: 556px;
    left: 266px;
  }

  .roadmap_content_i_description_8 {
    top: -18px;
    left: -57px;
  }

  .roadmap_content_i_wrap9 {
    top: 556px;
    left: 464px;
  }

  .roadmap_content_i_description_9 {
    top: 13px;
    left: -51px;
  }

  .roadmap_content_i_wrap10 {
    top: 712px;
    left: 250px;
  }

  .roadmap_content_i_description_10 {
    top: -70px;
    left: -59px;
  }

  .roadmap_content_i_wrap11 {
    top: 712px;
    left: 263px;
  }

  .roadmap_content_i_description_11 {
    top: -25px;
    left: -63px;
  }

  .roadmap_content_i_wrap12 {
    top: 730px;
    left: 463px;
  }

  .roadmap_content_i_description_12 {
    top: -70px;
    left: -48px;
  }

  .roadmap_bg {
    bottom: -222px;
  }
}



@media screen and (min-width: 2000px) {
  .roadmap_container {
    margin-top: 550px;
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
  }

  .roadmap_bg {
    bottom: -781px;
  }
}

.new-wrapper {
  left: 106px;
  top: 266px;
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  gap: 85px 120px;
  margin-left: -23px;
}

.roadmap_content_wrapper {
  width: 250px;
  height: 180px;
}

.roadmap_content_wrapper-start {
  position: absolute;
  top: -245px;
}

@media screen and (max-width: 1439px) {
  .roadmap_content_img {
    width: 919.7px;
  }

  .new-wrapper {
    gap: 82px 83px;
    margin-left: -43px;
    margin-top: -54px;
  }

  .roadmap_content_wrapper {
    width: 200px;
    height: 120px;
  }

  .roadmap_content_wrapper-start {
    top: -200px;
  }
}

@media screen and (max-width: 1100px) {
  .roadmap_container {
    margin-top: 300px;
  }

  .roadmap_content_img {
    width: 706.71px;
  }

  .new-wrapper {
    gap: 55px 60px;
    margin-left: -63px;
    margin-top: -101px;
  }

  .roadmap_content_wrapper {
    width: 160px;
    height: 100px;
  }

  .roadmap_content_wrapper-start {
    top: -150px;
  }
}

/* //////////////////////////////////////////// */
.roadmap_mobile_wrapper {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  left: 10px;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  gap: 96px;
  top: 10px;
}

@media screen and (max-width: 767px) {
  .roadmap_content_img_mobile {
    padding-right: 200px;
    position: relative;
  }

  .roadmap_content_container_mobile {
    display: block;
    width: 100vw;
    height: 570px;
    overflow-x: auto;
    overflow-y: auto;
    position: relative;
    /* left: 66px; */
    top: 100px;
    -webkit-overflow-scrolling: touch;
  }
}

@media screen and (max-width: 767px) {
  .roadmap_container {
    margin-top: 300px;
  }

  .roadmap_content_container {
    display: none;
  }

  .roadmap_content_container_mobile {
    -webkit-overflow-scrolling: touch;
    display: block;
    width: 100vw;
    height: 570px;
    overflow-x: auto;
    overflow-y: clip;
  }

  .roadmap_content_img_mobile {
    padding-right: 200px;
    position: relative;
    /* left: -151px; */
  }

  .roadmap_bg {
    bottom: -40px;
  }
}

@media screen and (max-width: 479px) {
  .roadmap {
    margin-top: -150px;
  }

  .roadmap_container {
    margin-top: 400px;
  }

  .roadmap_content_img_mobile {
    padding-right: 100px;
  }

  .roadmap_bg_gd {
    top: -9px;
    -webkit-filter: blur(3px);
    filter: blur(3px);
    opacity: 0.3;
  }
}