.dn-steps {
  padding: clamp(70px, 6vw, 90px) 0;
  font-size: clamp(20px, 2.4vw, 25px);
  line-height: 1.4;
}

.dn-steps .container {
  width: calc(914px + 96px * 2);
}

.dn-steps__title {
  font-weight: 700;
  font-size: clamp(30px, 4vw, 40px);
  margin: 0 0 clamp(30px, 2vw, 45px);
}

.dn-steps__text p:last-child {
  margin: 0;
}

.dn-steps__number {
  font-size: clamp(29px, 3vw, 35px);
  width: clamp(48px, 5vw, 80px);
  height: clamp(48px, 5vw, 80px);
  color: #321879;
  background: #fff;
  border-radius: 100%;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1;
}

.dn-steps__subtitle {
  font-weight: 700;
  font-size: clamp(24px, 3vw, 29px);
  margin-bottom: 10px;
}

.dn-steps__text {
  margin-bottom: 10px;
}

.dn-steps__note {
  font-size: clamp(12px, 2vw, 18px);
}

.dn-steps__in {
  max-width: clamp(572px, 59vw, 772px);
  margin: 0 auto;
}

.dn-steps:not(.new-design) .row {
  margin-bottom: clamp(30px, 4vw, 50px);
}

.dn-steps__after {
  margin-top: 80px;
  background: #ede0ff;
  border-radius: 13px;
  color: #321879;
  padding: 40px clamp(25px, 3vw, 40px);
}

.dn-steps__after-in {
  max-width: 696px;
}

@media screen and (min-width: 992px) {
  .dn-steps .row:nth-child(even) {
    flex-direction: row-reverse;
  }
}












.dn-steps.new-design .container {
  width: calc(980px + 96px * 2);
}

.dn-steps.new-design .dn-steps__after {
  background: transparent;
  padding: 0;
}

.dn-steps.new-design .dn-steps__image {
  max-width: 265px;
  margin-bottom: -30px;
}

.dn-steps.new-design .dn-steps__number {
  width: clamp(48px, 5vw, 60px);
  height: clamp(48px, 5vw, 60px);
  font-size: 29px;
  color: #fff;
  background: #321879;
  margin-bottom: 30px;
}

.dn-steps.new-design .dn-steps__title {
  max-width: clamp(300px, 60vw, 640px);
  margin: 0 auto clamp(30px, 4vw, 60px);
}

.dn-steps__item {
  border-radius: 28px;
  padding: 30px;
  margin-bottom: 40px;
}

.dn-steps__item[style*="color: #ffffff;"] .dn-steps__number {
  background: #fff;
  color: #321879;
}

.dn-steps__item img {
  max-width: 100%;
}

@media screen and (min-width: 992px) {
  .dn-steps.new-design .dn-steps__image {
    padding-top: clamp(10px, 4vw, 60px);
  }
}

@media screen and (max-width: 991px) {
  .dn-steps.new-design .dn-steps__title span {
    display: inline-block;
  }
}