<?xml version="1.0"?>
<t name="Steps" t-name="website.s_process_steps">
    <section class="s_process_steps pt72 pb72 s_process_steps_connector_line" data-vcss="002" data-vxml="002">
        <svg class="s_process_step_svg_defs position-absolute">
            <defs>
                <marker class="s_process_steps_arrow_head" markerWidth="15" markerHeight="10" refX="6" refY="6" orient="auto">
                    <path d="M 2,2 L10,6 L2,10 L6,6 L2,2" vector-effect="non-scaling-size"/>
                </marker>
            </defs>
        </svg>
        <div class="container">
            <h2 class="mb-4 text-center h3-fs">Our process in four easy steps</h2>
            <div class="row g-0">
                <div class="col-lg-3 s_process_step position-relative pt24 pb24">
                    <svg class="s_process_step_connector position-absolute z-index-1" viewBox="0 0 100 20" preserveAspectRatio="none">
                        <path d="M 0 10 L 100 10" vector-effect="non-scaling-stroke"/>
                    </svg>
                    <div class="s_process_step_number d-flex align-items-center justify-content-center mx-auto rounded-circle bg-primary-light" data-name="Step Number">
                        <h3 class="mb-0 text-primary text-center">1</h3>
                    </div>
                    <div class="s_process_step_content mt-3 px-3 text-center">
                        <h3 class="h4-fs">Add to cart</h3>
                        <p>Let your customers understand your process.</p>
                    </div>
                </div>
                <div class="col-lg-3 s_process_step position-relative pt24 pb24">
                    <svg class="s_process_step_connector position-absolute z-index-1" viewBox="0 0 100 20" preserveAspectRatio="none">
                        <path d="M 0 10 L 100 10" vector-effect="non-scaling-stroke"/>
                    </svg>
                    <div class="s_process_step_number d-flex align-items-center justify-content-center mx-auto rounded-circle bg-primary-light" data-name="Step Number">
                        <h3 class="mb-0 text-primary text-center">2</h3>
                    </div>
                    <div class="s_process_step_content mt-3 px-3 text-center">
                        <h3 class="h4-fs">Sign in</h3>
                        <p>Click on the number to adapt it to your purpose.</p>
                    </div>
                </div>
                <div class="col-lg-3 s_process_step position-relative pt24 pb24">
                    <svg class="s_process_step_connector position-absolute z-index-1" viewBox="0 0 100 20" preserveAspectRatio="none">
                        <path d="M 0 10 L 100 10" vector-effect="non-scaling-stroke"/>
                    </svg>
                    <div class="s_process_step_number d-flex align-items-center justify-content-center mx-auto rounded-circle bg-primary-light" data-name="Step Number">
                        <h3 class="mb-0 text-primary text-center">3</h3>
                    </div>
                    <div class="s_process_step_content mt-3 px-3 text-center">
                        <h3 class="h4-fs">Pay</h3>
                        <p>Duplicate blocks to add more steps.</p>
                    </div>
                </div>
                <div class="col-lg-3 s_process_step position-relative pt24 pb24">
                    <svg class="s_process_step_connector position-absolute z-index-1" viewBox="0 0 100 20" preserveAspectRatio="none">
                        <path d="M 0 10 L 100 10" vector-effect="non-scaling-stroke"/>
                    </svg>
                    <div class="s_process_step_number d-flex align-items-center justify-content-center mx-auto rounded-circle bg-primary-light" data-name="Step Number">
                        <h3 class="mb-0 text-primary text-center">4</h3>
                    </div>
                    <div class="s_process_step_content mt-3 px-3 text-center">
                        <h3 class="h4-fs">Get Delivered</h3>
                        <p>Select and delete blocks to remove some steps.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</t>

