.res-steps-light {
  background-color: #fff;
  .container {
    text-align: center;
    gap: var(--spacing_medium);


    .steps-top {
      max-width: 750px;
      margin: 0 auto;
    }
    .steps-inner {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: var(--spacing_medium);
      position: relative;
      z-index: 2;

      @media screen and (min-width: 992px) {
        &:before {
          content: '';
          width: 100%;
          height: 1px;
          background-color: #F1F1F1;
          position: absolute;
          top: 21px;
          z-index: -1;
        }
      }

      @media screen and (max-width: 991px) {
        flex-direction: column;
      }
      .res-step {
        flex: 1;

        .step-no-wrapper {
          display: flex;
          border: 2px solid var(--res4);
          width: 40px;
          border-radius: 50%;
          height: 40px;
          margin: 0 auto;
          background: #fff;
        }
        .step-number {
          font-size: 18px;
          margin: auto;
          background: linear-gradient(45deg, var(--res3), var(--res4));
          -webkit-background-clip: text;
          -webkit-text-fill-color: rgba(0, 0, 0, 0);
          background-clip: text;
          color: rgba(0, 0, 0, 0);
          flex: 1;
        }

        .step-heading {
          font-size: 18px;
          font-weight: 600;
          flex: 3;
          display: flex;
          justify-content: center;

        }

        .step-body {
          flex: 3;
        }
      }
    }
  }
}