Untitled

<div class="product-block" style="text-align: left;">
                          <style scoped>
                            @media only screen and (max-width:767px) {
                              .step:not(:last-child):after {
                                height: 60% !important;
                              }
                            }

                            @media only screen and (max-width:1024px) {}

                            .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-lg-6'>
                              <h2 class="font-weight-bold ">Prebook <span style=" color: #38a849">process</span>
                              </h2>


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

                              </div>
                            </div>
                            <div class="col-lg-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>
                        </div>