.steps {
  padding: 85px 0;
  position: relative;
  overflow: visible;
  border-radius: calc(var(--intro-border-radius) * 4);
  
}
.steps-background_color {
  background: var(--color-background);
}
.steps-background_img {
  background: radial-gradient(70% 60% at 0% 0%, rgba(123, 47, 247, .7), transparent 60%), radial-gradient(70% 60% at 100% 100%, rgba(255, 45, 85, .62), transparent 60%), linear-gradient(rgba(18, 8, 43, .8), rgba(18, 8, 43, .8)), #12082b center / cover no-repeat;
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 50px;
}
.steps-background_gradient {
  background: var(--zb-grad);
    background-size: 160% 100%;
  margin-bottom: 50px;
}
.steps_block {
  display: flex;
  gap: 60px;
  align-items: center;
  justify-content: space-between;

}


.steps_content {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  max-width: 100%;
  text-align: center;
  @media (max-width: 991px) {
  grid-template-columns: 1fr 7fr;
  grid-template-rows: 1fr;
  }
}

.steps_title {
  color: var(--color-text-second);
  font-size: var(--h2-size-main);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 20px;
  text-align: center;
}

.steps_description {
  color: var(--color-text-second);
  font-size: 18px;
  line-height: 1.6;
  opacity: 0.5;
  text-align: center;
  @media (min-width: 991px) {
      width: 80%;
      margin: 0 auto;
  }
}
.steps_content_block,
.step_num_block {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 16px;
  color: var(--color-text-second);
  margin: auto;
  margin-bottom: 32px;
  width: 100%;
  
  @media (max-width: 991px) {
    grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  text-align: start;
  height: 100%;
  margin: 0;
  }
}
.step_num_block::after {
  content: '';
  position: absolute;
  height: 2px;
  width: 70%;
  background: linear-gradient(90deg, rgba(123, 47, 247, .0), #7B2FF7, #FF2D55, rgba(255, 45, 85, 0));;
background-size: 160% 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  @media (max-width: 991px) {
  width: 1px;
  height: 70%;
  transform: translate(-50%, -70%);
  }
}
.step {
  margin-bottom: 32px;
}
.step_num {
  background: var(--zb-grad);
background-size: 160% 100%;
  color: #fff;
  font-size: 32px;
  border-radius: calc(var(--border-radius) * 3);
  width: fit-content;
  margin: auto;
  padding: 16px;
  width: 70px;
  height: 50px;
  position: relative;
  z-index: 2;
  @media (max-width: 991px) {
    margin: 0 auto;
  }
}
.step_num span{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.step_head {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 6px;
}