Access_Website/parts/process.php

<!-- stert of process-section -->
<section class="wpo-process-section section-padding">
  <div class="container">
    <div class="process-wrap">
      <div class="row">
        <div class="col col-lg-3 col-md-6 col-12">
          <div class="process-item">
            <div class="top-contnent"> <img src="assets/images/process/1.jpg" alt="">
              <div class="item-shape"> <img src="assets/images/process/item-shape.svg" alt=""> </div>
              <div class="text"> <span>Step - 01</span> </div>
              <div class="shape-1">
                <svg width="158" height="89" viewBox="0 0 158 89" fill="none">
                  <g opacity="0.15">
                    <path d="M0.0332031 30.3796L157.05 0L157.354 43.7086L30.269 88.9426"
                                                    fill="#868686" />
                  </g>
                </svg>
              </div>
              <div class="shape-2">
                <svg width="48" height="17" viewBox="0 0 48 17" fill="none">
                  <path
                                                d="M47.3549 0.599976L22.8851 16.5564L0.691406 12.5793L47.3549 0.599976Z" />
                </svg>
              </div>
            </div>
            <div class="content">
              <h2>Select Services</h2>
              <p> Pellentesque habitant morbi trist fames ac turp egestas.
                Aliquam enim feugiat mattis. </p>
            </div>
          </div>
        </div>
        <div class="col col-lg-3 col-md-6 col-12">
          <div class="process-item">
            <div class="top-contnent"> <img src="assets/images/process/2.jpg" alt="">
              <div class="item-shape"> <img src="assets/images/process/item-shape.svg" alt=""> </div>
              <div class="text"> <span>Step - 02</span> </div>
              <div class="shape-1">
                <svg width="158" height="89" viewBox="0 0 158 89" fill="none">
                  <g opacity="0.15">
                    <path d="M0.0332031 30.3796L157.05 0L157.354 43.7086L30.269 88.9426"
                                                    fill="#868686" />
                  </g>
                </svg>
              </div>
              <div class="shape-2">
                <svg width="48" height="17" viewBox="0 0 48 17" fill="none">
                  <path
                                                d="M47.3549 0.599976L22.8851 16.5564L0.691406 12.5793L47.3549 0.599976Z" />
                </svg>
              </div>
            </div>
            <div class="content">
              <h2>Percel Information</h2>
              <p> Pellentesque habitant morbi trist fames ac turp egestas.
                Aliquam enim feugiat mattis. </p>
            </div>
          </div>
        </div>
        <div class="col col-lg-3 col-md-6 col-12">
          <div class="process-item">
            <div class="top-contnent"> <img src="assets/images/process/3.jpg" alt="">
              <div class="item-shape"> <img src="assets/images/process/item-shape.svg" alt=""> </div>
              <div class="text"> <span>Step - 03</span> </div>
              <div class="shape-1">
                <svg width="158" height="89" viewBox="0 0 158 89" fill="none">
                  <g opacity="0.15">
                    <path d="M0.0332031 30.3796L157.05 0L157.354 43.7086L30.269 88.9426"
                                                    fill="#868686" />
                  </g>
                </svg>
              </div>
              <div class="shape-2">
                <svg width="48" height="17" viewBox="0 0 48 17" fill="none">
                  <path
                                                d="M47.3549 0.599976L22.8851 16.5564L0.691406 12.5793L47.3549 0.599976Z" />
                </svg>
              </div>
            </div>
            <div class="content">
              <h2>Transportation</h2>
              <p> Pellentesque habitant morbi trist fames ac turp egestas.
                Aliquam enim feugiat mattis. </p>
            </div>
          </div>
        </div>
        <div class="col col-lg-3 col-md-6 col-12">
          <div class="process-item">
            <div class="top-contnent"> <img src="assets/images/process/4.jpg" alt="">
              <div class="item-shape"> <img src="assets/images/process/item-shape.svg" alt=""> </div>
              <div class="text"> <span>Step - 04</span> </div>
              <div class="shape-1">
                <svg width="158" height="89" viewBox="0 0 158 89" fill="none">
                  <g opacity="0.15">
                    <path d="M0.0332031 30.3796L157.05 0L157.354 43.7086L30.269 88.9426"
                                                    fill="#868686" />
                  </g>
                </svg>
              </div>
              <div class="shape-2">
                <svg width="48" height="17" viewBox="0 0 48 17" fill="none">
                  <path
                                                d="M47.3549 0.599976L22.8851 16.5564L0.691406 12.5793L47.3549 0.599976Z" />
                </svg>
              </div>
            </div>
            <div class="content">
              <h2>Takeover Products</h2>
              <p> Pellentesque habitant morbi trist fames ac turp egestas.
                Aliquam enim feugiat mattis. </p>
            </div>
          </div>
        </div>
      </div>
      <div class="border-shape">
        <svg width="1014" height="93" viewBox="0 0 1014 93" fill="none">
          <path
                                d="M1 50.9659C56.3481 18.4898 187.969 -31.1736 271.668 29.9813C376.292 106.425 467.026 98.4469 528 77.5C594.713 54.5817 761.5 15.5 831.5 24C901.5 32.5 936.5 57 1013.5 75"
                                stroke="#C4CDD3" stroke-width="1.5" stroke-dasharray="2 2" />
        </svg>
      </div>
    </div>
  </div>
</section>
<!-- end of process-section -->