Untitled

<style scoped>
                        @media only screen and (max-width:767px) {
                          .step:not(:last-child):after {
                            height: 60% !important;
                          }
                        }

                        .wrapper {
                          /* min-height: 100vh; */
                          // display: flex;
                          // justify-content: center;
                          // align-items: center;
                        }

                        .steps {
                          // max-width: 300px;
                          // margin: 0 auto;
                        }

                        .step {
                          display: flex;
                          position: relative;
                        }

                        .step:after {
                          content: "";
                          position: absolute;
                          left: 15px;
                          top: 32px;
                          height: 0;
                          width: 2px;
                          background-color: #38A849;
                        }

                        .step .info {
                          margin: 8px 0 20px;
                        }

                        .step .title {
                          font-size: 16px;
                          font-weight: 600;
                          margin: 0 0 8px;
                          color: white;
                        }

                        .step .text {
                          // font-size: 12px;
                          color: rgba(255, 255, 255, 0.7);
                          padding-bottom: 0;
                          margin: 0;
                        }

                        .step:not(:last-child):after {
                          height: 65%;
                        }

                        .number {
                          width: 32px;
                          height: 32px;
                          background-color: transparent;
                          border-radius: 50%;
                          border: 2px solid #38A849;
                          flex-shrink: 0;
                          display: flex;
                          justify-content: center;
                          align-items: center;
                          color: white;
                          font-size: 15px;
                          font-weight: 600;
                          margin-right: 14px;
                        }

                        .number.completed {
                          background-color: #38a849;
                        }

                        .number svg {
                          width: 16px;
                          height: 16px;
                          object-fit: contain;
                        }

                        .number svg path {
                          fill: white;
                        }

                        .ol-tc li {
                          margin-bottom: 10px;
                          color: #ffffffb3;
                        }
                      </style>
                      <!-- <h2 class="font-weight-bold ">How It <span style=" color: #38a849">Works?</span>
                        </h2> -->
                      <div class="row">
                        <div class='wrapper col-md-6'>
                          <h2 class="font-weight-bold ">Prebook <span style=" color: #38a849">process</span>
                          </h2>


                          <div class='steps' id='steps'>

                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="mb-5">
                            <h2 class="font-weight-bold " style=" color: #38a849">Terms & Conditions
                              <!-- <span style=" color: #38a849">Works?</span> -->
                            </h2>
                            <ol class="ol-tc">
                              <li>Pre-Order amount of Rs. 500/- is non-refundable.</li>
                              <li>Order shall only be dispatched after the final payment is made.</li>
                              <li>A minimum of 1 month is the wait time after Pre-Order.</li>
                              <li>Color and Model change cannot happen after Pre-Order.</li>
                            </ol>
                          </div>
                        </div>
                      </div>
                      <script>
                        let steps = document.querySelector("#steps");
                        let wizards = [
                          {
                            complete: false,
                            number: 1,
                            title: "STEP 1",
                            text:
                              "We’ll notify about Stock availability"
                          },
                          {
                            complete: false,
                            number: 2,
                            title: "STEP 2",
                            text:
                              "Call for the Final Payment"
                          },
                          {
                            complete: false,
                            number: 3,
                            title: "STEP 3",
                            text:
                              "Your Electric Cycle shall be dispatched"
                          },
                          {
                            complete: false,
                            number: 4,
                            title: "STEP 4",
                            text:
                              "Your Electric Cycle shall be delivered in 10-15 days"
                          },
                        ];

                        let tickIcon = `<svg viewBox="0 0 512 512" width="100" title="check">
        <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" />`;

                        steps.innerHTML = wizards
                          .map(function (wizard) {
                            return (
                              `<div class='step'>` +
                              `<div class='number ${wizard.complete && 'completed'}'>` +
                              (wizard.complete ? tickIcon : wizard.number) +
                              `</div>` +
                              `<div class='info'>` +
                              `<p class='title'>${wizard.title}</p>` +
                              `<p class='text'>${wizard.text}</p>` +
                              "</div>" +
                              "</div>"
                            );
                          })
                          .join("");

                      </script>