<section class="progress_bar_new_section">
  <div class="container">
    <div class="progress-wrapper">

      <div class="progress-step completed">
        <span class="circle">✔</span>
        <p>Order Summary</p>
      </div>

      <div class="progress-line completed"></div>

      <div class="progress-step active">
        <span class="circle">✔</span>
        <p>Checkout</p>
      </div>

      <div class="progress-line"></div>

      <div class="progress-step pending_circle">
        <span class="circle">✔</span>
        <p>Payment</p>
      </div>

    </div>
  </div>
</section>


<section class="progress_bar_new_section_two">
  <div class="container">
    <div class="row">
      <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
        <div class="progress_bar_new_section_two_left">
          <h5>Checkout</h5>
          <form class="checkout_section_from_new_modification">
            <div class="row">

              <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="mb-3">
                  <label class="form-label full_name_label_class">Full Name</label>
                  <input type="text" class="form-control checkout_input_field" placeholder="Enter your full name">
                </div>
              </div>

              <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                <div class="mb-3">
                  <label class="form-label full_name_label_class">Email ID</label>
                  <input type="email" class="form-control checkout_input_field" placeholder="Enter your email id">
                </div>
              </div>

              <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                <div class="mb-3">
                  <label class="form-label full_name_label_class">Phone Number</label>
                  <input type="text" class="form-control checkout_input_field" placeholder="+91 0000 000 000">
                </div>
              </div>

              <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="mb-3">
                  <label class="form-label full_name_label_class">Address</label>
                  <input type="text" class="form-control checkout_input_field" placeholder="Enter your address">
                </div>
              </div>

              <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="mb-3">
                  <label class="form-label full_name_label_class">Landmark</label>
                  <input type="text" class="form-control checkout_input_field" placeholder="Enter your landmark">
                </div>
              </div>

              <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="mb-3">
                  <label class="form-label full_name_label_class">State*</label>
                  <select class="form-select checkout_input_field_new_section" aria-label="Default select example">
                    <option selected>Select State</option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                  </select>
                </div>
              </div>

              <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                <div class="mb-3">
                  <label class="form-label full_name_label_class">City*</label>
                  <input type="text" class="form-control checkout_input_field" placeholder="City">
                </div>
              </div>

              <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                <div class="mb-3">
                  <label class="form-label full_name_label_class">ZIP Code*</label>
                  <input type="text" class="form-control checkout_input_field" placeholder="Enter ZIP Code">
                </div>
              </div>

              <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="mb-3">
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                    <label class="form-check-label form_check_label_custom" for="flexCheckDefault">
                      I confirm that the provided information is correct
                    </label>
                  </div>
                </div>
              </div>

            </div>
          </form>
        </div>
      </div>
      <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
        <div class="progress_bar_new_section_two_right">
          <div class="cart-box">
            <div class="cart-title">Proceed to Pay</div>
            <!-- Product -->
            <div class="d-flex align-items-center gap-3 review_your_cart_section_inner" style="display:none !important">
              <div class="progress_bar_new_section_two_right_img">
                <img src="assets/images/fourth-product.webp" class="img-fluid">
              </div>

              <div class="flex-grow-1">
                <div class="fw-semibold premium_checkout_one">Premium Quality Roasted Makhana</div>
                <div class="premium_checkout_two">50g</div>
                <div class="price">₹125</div>
              </div>

            </div>

            <!-- Summary -->
            <div class="summary-row">
              <span class="summary_row_one">Subtotal</span>
              <span class="summary_row_two">₹125</span>
            </div>
            <div class="summary-row">
              <span class="summary_row_one">Delivery</span>
              <span class="summary_row_two">₹100</span>
            </div>
            <div class="summary-row summary-total">
              <span class="summary_total_one">Total</span>
              <span class="summary_total_two">₹225</span>
            </div>
            <div class="divider"></div>
            <div class="summary-row">
              <span class="summary_row_one">Coupon Discount</span>
              <span class="summary_row_two discount_green">-30%</span>
            </div>
            <div class="summary-row summary-total">
              <span class="summary_total_one">Total</span>
              <span class="summary_total_two total_price_red">₹157.5</span>
            </div>
            <!-- Coupon -->
            <div class="coupon-box">
              <div class="coupon_box_block position-relative">
                <input type="text" placeholder="Coupon Code">
                <img src="assets/images/coupon-icon.webp" class="img-fluid coupon_box_block_img">
              </div>
              <button class="apply-btn">Apply</button>
            </div>
            <!-- Pay Button -->
            <button class="pay-btn">Pay</button>
            <div class="footer-text">
              Safe & Secure Payments • 100% Authentic Products
            </div>
            <div class="divider"></div>
            <div class="cod-wrapper" id="codBox">

              <div class="cod-header">
                <h6>Cash on Delivery</h6>
                <i class="fa-solid fa-chevron-down cod-arrow"></i>
              </div>

              <div class="cod-body">
                <p>
                  Most of our customers prefer online payment for a safe and
                  contactless delivery experience.
                </p>
                <button class="btn cod-btn w-100">
                  Place Order
                </button>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>