.how-reason-helps-block {
  background-color: #FCFAFF;
}

.how-reason-helps-block header.header {
  .title,
  h1.title {
    font-size: 40px;
    line-height: 50px;
    color: #222222;
    text-transform: uppercase;

    @media screen and (max-width: 1580px) {
      font-size: 25px;
      line-height: 30px;
    }

    @media screen and (max-width: 992px) {
      font-size: 20px;
      line-height: 24px;
    }

    @media screen and (max-width: 520px) {
      font-size: 16px;
      line-height: 19.5px;
    }
  }

  .description,
  .description p {
    font-size: 28px;
    line-height: 34.13px;
    color: #222222;

    @media screen and (max-width: 768px) {
      font-size: 20px;
      line-height: 24px;
    }

    @media screen and (max-width: 520px) {
      font-size: 12px;
      line-height: 14.63px;
    }
  }
}

.how-reason-helps-block section.content {
  .rounded-circle {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: conic-gradient(from -90deg at 50% 50%, #3E0099 0deg, #E92651 161.25deg, #3E0099 360deg);

    @media screen and (max-width: 768px) {
      width: 72px;
      height: 72px;
    }

    @media screen and (max-width: 520px) {
      width: 52px;
      height: 52px;
    }
  }

  .image-wrapper img {
    width: 50%;
    height: 50%;
    object-fit: contain;
  }

  .card-content {
    .pre-title,
    .pre-title p {
      font-size: 28px;
      line-height: 34.13px;
      color: #6800FF;

      @media screen and (max-width: 768px) {
        font-size: 20px;
        line-height: 24px;
      }

      @media screen and (max-width: 520px) {
        font-size: 16px;
        line-height: 19.5px;
      }
    }

    .title,
    h2.title {
      font-size: 28px;
      font-weight: 600;
      line-height: 34.13px;
      color: #222222;
      text-transform: uppercase;

      @media screen and (max-width: 768px) {
        font-size: 20px;
        line-height: 24px;
      }

      @media screen and (max-width: 520px) {
        font-size: 16px;
        line-height: 19.5px;
      }
    }

    .description,
    .description p {
      font-size: 16px;
      font-weight: 400;
      line-height: 19.5px;
      color: #222222;

      @media screen and (max-width: 768px) {
        font-size: 14px;
        line-height: 17px;
      }

      @media screen and (max-width: 520px) {
        font-size: 10px;
        line-height: 12.19px;
      }
    }

    @media screen and (max-width: 520px) {
      .title-wrapper {
        display: flex;
        flex-direction: row;
        gap: 10px;
      }
    }
  }
}