<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="assets/css/bootstrap/bootstrap.min.css" />

    <!-- Font Awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />

    <!-- Custom Styles -->
    <link rel="stylesheet" href="assets/css/style.css" />

    <!-- animation -->
    <link rel="stylesheet" href="assets/css/animation.css" />

    <!-- responsive -->
    <link rel="stylesheet" href="assets/css/responsive.css" />
  </head>

  <body>
    <!-- Main content container -->
    <main class="overflow-hidden trim-price">
      <!-- Header section -->
      <header class="wrapper FadeC">
        <!-- Logo and contact information -->
        <div class="logo">
          <img src="assets/images/icon.png" alt="Icon" />
          Fimro.
        </div>
        <div class="contact">
          <!-- Social icons -->
          <div class="social-icons">
            <a href="#"><i class="fa-brands fa-facebook"></i></a>
            <a href="#"><i class="fa-brands fa-twitter"></i></a>
            <a href="#"><i class="fa-brands fa-youtube"></i></a>
            <a href="#"><i class="fa-brands fa-google-plus-g"></i></a>
          </div>
          <!-- Call information -->
          <div class="call">
            <i class="fa-solid fa-phone-volume"></i>
            <article class="call-details">
              <span>Give us a call</span>
              <a href="tel:+92 123 456 7890"><h5>+92 123 456 7890</h5></a>
            </article>
          </div>
        </div>
      </header>

      <!-- Particle images -->
      <div class="particles">
        <img src="assets/images/price/particle1.jpg" alt="particle" />
        <img src="assets/images/price/particle2.jpg" alt="particle" />
      </div>

      <!-- Price table section -->
      <section class="priceTable FadeC">
        <div class="priceWrap position-relative">
          <div class="row priceList">
            <!-- Column for Internet for Home promotion -->
            <div class="col-md-5 order_c lg-100">
              <div class="priceDiscount">
                <h4>Internet for Home</h4>
                <h1>
                  Discount Up to <span class="higlight-text">30%</span> For New
                  Members.
                </h1>
                <p class="desc">
                  Since 1985 Reed has pioneered specialist recruitment, sourcing
                  Knowledgeable
                </p>
                <div class="row">
                  <div class="col-md-6 pe-lg-0">
                    <!-- Features -->
                    <div class="feature">
                      <i class="fa-solid fa-satellite-dish"></i>
                      <p>Behind our Digital Marketing</p>
                    </div>
                  </div>
                  <div class="col-md-6 ps-lg-0">
                    <div class="feature">
                      <i class="fa-solid fa-tower-broadcast"></i>
                      <p>Business & the Digital World Together.</p>
                    </div>
                  </div>
                </div>
                <button class="btn-hover trim-btn">Get Started</button>
              </div>
            </div>
            <!-- Column for Promo Table 1 -->
            <div class="col-md-7 ps-lg-5 lg-100">
              <div class="row">
                <div class="col-md-6">
                  <div class="PriceTableHeading">Promo Table</div>
                  <div class="pricetableContent">
                    <div class="priceHead">
                      <h1>
                        <sub>$</sub><span class="planPrice">150</span
                        ><sup>per hr</sup>
                      </h1>
                      <p class="serviceType">Product Design</p>
                    </div>
                    <div class="priceContentInner">
                      <ul class="contentList">
                        <li>
                          <i class="fa-solid fa-circle-check"></i>UI/UX Design
                        </li>
                        <li>
                          <i class="fa-solid fa-circle-check"></i>Branding
                        </li>
                        <li>
                          <i class="fa-solid fa-circle-check"></i>Development
                        </li>
                        <li>
                          <i class="fa-solid fa-circle-check"></i>UI/UX Design
                        </li>
                        <li>
                          <i class="fa-solid fa-circle-check"></i>Branding
                        </li>
                      </ul>
                    </div>
                    <div class="priceFooter">
                      <span class="higlight-text">5%</span> VAT Included<br />
                      Installation Charge: 1500 TK
                    </div>
                  </div>
                  <button class="btn-hover pricaTableBtn">Get Started</button>
                </div>
                <!-- Column for Promo Table 2 -->
                <div class="col-md-6">
                  <div class="PriceTableHeading">Promo Table</div>
                  <div class="pricetableContent">
                    <div class="priceHead">
                      <h1>
                        <sub>$</sub><span class="planPrice">299</span
                        ><sup>per hr</sup>
                      </h1>
                      <p class="serviceType">Unlimited Design</p>
                    </div>
                    <div class="priceContentInner">
                      <ul class="contentList">
                        <li>
                          <i class="fa-solid fa-circle-check"></i>UI/UX Design
                        </li>
                        <li>
                          <i class="fa-solid fa-circle-check"></i>Branding
                        </li>
                        <li>
                          <i class="fa-solid fa-circle-check"></i>Development
                        </li>
                        <li>
                          <i class="fa-solid fa-circle-check"></i>UI/UX Design
                        </li>
                        <li>
                          <i class="fa-solid fa-circle-check"></i>Branding
                        </li>
                      </ul>
                    </div>
                    <div class="priceFooter">
                      <span class="higlight-text">5%</span> VAT Included<br />
                      Installation Charge: 1500 TK
                    </div>
                  </div>
                  <button class="btn-hover pricaTableBtn">Get Started</button>
                </div>
              </div>
            </div>
          </div>

          <!-- Payment form section -->
          <div class="payment d-none FadeC">
            <div class="row">
              <!-- Form header -->
              <h1 class="form-heading">Start using your Fused Account Today</h1>
              <div class="col-md-5 tab-100">
                <!-- Cart details -->
                <div class="cartDiv">
                  <!-- Cart header with plan details -->
                  <div class="cartHead cartWrap">
                    <h3>
                      Subcribe to <span class="DynamicPlan">Basic Plan</span>
                    </h3>
                    <p>
                      $ <span class="dynamicPrice">45</span>
                      <span class="duration">Per Month</span>
                    </p>
                  </div>
                  <!-- Cart features list -->
                  <div class="cartWrap">
                    <ul class="cartList border-end-custom">
                      <li>
                        <i class="fa-solid fa-circle-check"></i>Upload Files up
                        To 5GB
                      </li>
                      <li>
                        <i class="fa-solid fa-circle-check"></i>Unlimited
                        Storage
                      </li>
                      <li>
                        <i class="fa-solid fa-circle-check"></i>Techical Support
                      </li>
                      <button id="load">
                        <i class="fa-solid fa-plus"></i>Show More Features
                      </button>
                    </ul>
                    <!-- Cart pricing details -->
                    <div class="cartTotal border-end-custom">
                      <!-- Selected plan -->
                      <div class="selectedPlan">
                        <div class="d-flex justify-content-between">
                          <article>
                            <h2 class="cartHeading DynamicPlan">Basic Plan</h2>
                            <p class="cartHeading-desc">
                              Invoice For the Month
                            </p>
                          </article>
                          <span class="planAmount">
                            $ <span class="dynamicPrice">45</span>
                          </span>
                        </div>
                        <!-- Sub Total -->
                        <div class="d-flex justify-content-between mt-4">
                          <article>
                            <h2 class="cartHeading">Sub Total</h2>
                          </article>
                          <span class="planAmount">
                            $ <span class="dynamicPrice">45</span>
                          </span>
                        </div>
                      </div>
                      <!-- Coupon input field -->
                      <div class="coupenInput">
                        <input
                          type="text"
                          class="subheading"
                          placeholder="Insert Coupon Code"
                        />
                      </div>
                      <!-- Total Tax/VAT -->
                      <div class="Total border-end-custom">
                        <h4>Total Tax/VAT</h4>
                        <p>$ 0</p>
                      </div>
                      <!-- Total Price -->
                      <div class="totalInvoice border-end-custom">
                        <h4 class="cartHeading">Total Price</h4>
                        <p class="planAmount">
                          $ <span class="dynamicPrice">45</span>
                        </p>
                      </div>
                      <!-- Annual Cost details -->
                      <div class="selected border-end-custom">
                        <h1 class="cartHeading">Annual Cost</h1>
                        <div class="d-flex justify-content-between mt-5">
                          <article>
                            <h2 class="cartHeading DynamicPlan">Basic Plan</h2>
                            <p class="subheading">
                              $ <span class="dynamicPrice">45</span> x 12 Months
                            </p>
                          </article>
                          <span class="planAmount"
                            >$ <span id="calcPrice">45</span></span
                          >
                        </div>
                        <div class="d-flex justify-content-between mt-4">
                          <article>
                            <h2 class="cartHeading">Discount</h2>
                            <p class="subheading">Annual ( Promotion )</p>
                          </article>
                          <span class="planAmount">- $ 108</span>
                        </div>
                      </div>
                      <!-- Invoice information -->
                      <div class="invoiceInfo">
                        <div class="d-flex justify-content-between">
                          <article>
                            <h2 class="cartHeading">Annual Cost</h2>
                          </article>
                          <span class="planAmount">$445</span>
                        </div>
                        <p>
                          Annual plan function the same as the Monthly plans
                          with 20% discount
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-7 tab-100">
                <!-- Payment form -->
                <form novalidate id="step1">
                  <div class="inputField">
                    <label>Full Name</label>
                    <input type="text" name="name" required />
                  </div>
                  <div class="inputField">
                    <label>Email Address</label>
                    <input type="email" name="email" required />
                  </div>
                  <div class="inputField">
                    <label>Phone</label>
                    <input type="number" name="phone" />
                  </div>
                  <h1 class="cartHeading formHeading">
                    Payment Information<i class="fa-solid fa-lock"></i>
                  </h1>
                  <!-- Payment method tabs -->
                  <div class="row" id="myTab" role="tablist">
                    <div class="col-md-4">
                      <div
                        class="paymentType active"
                        id="card-tab"
                        data-bs-toggle="tab"
                        data-bs-target="#card-tab-pane"
                        type="button"
                        role="tab"
                        aria-controls="card-tab-pane"
                        aria-selected="true"
                      >
                        <i class="fa-regular fa-credit-card"></i>
                        <span>card</span>
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div
                        class="paymentType"
                        id="paypal-tab"
                        data-bs-toggle="tab"
                        data-bs-target="#paypal-tab-pane"
                        type="button"
                        role="tab"
                        aria-controls="paypal-tab-pane"
                        aria-selected="false"
                      >
                        <i class="fa-brands fa-paypal"></i>
                        <span>PayPal</span>
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div
                        class="paymentType"
                        id="crypto-tab"
                        data-bs-toggle="tab"
                        data-bs-target="#crypto-tab-pane"
                        type="button"
                        role="tab"
                        aria-controls="crypto-tab-pane"
                        aria-selected="false"
                      >
                        <i class="fa-brands fa-btc"></i>
                        <span>Crypto</span>
                      </div>
                    </div>
                  </div>
                  <!-- Payment method content -->
                  <div id="tab-content" class="tab-content">
                    <!-- Card payment method -->
                    <fieldset
                      class="tab-pane fade show active"
                      id="card-tab-pane"
                      role="tabpanel"
                      aria-labelledby="card-tab"
                      tabindex="0"
                    >
                      <div class="inputField">
                        <label>Card Number</label>
                        <input type="number" name="card-number" />
                      </div>
                      <div class="row">
                        <div class="col-md-6">
                          <div class="inputField">
                            <label>Expiration Date</label>
                            <input type="date" name="expiration" />
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="inputField">
                            <label>CVV</label>
                            <input type="number" name="cvv" />
                          </div>
                        </div>
                      </div>
                    </fieldset>
                    <!-- PayPal payment method -->
                    <fieldset
                      class="tab-pane fade"
                      id="paypal-tab-pane"
                      role="tabpanel"
                      aria-labelledby="paypal-tab"
                      tabindex="0"
                    >
                      <div class="inputField">
                        <label>Email Address</label>
                        <input type="email" name="PP-email" />
                      </div>
                    </fieldset>
                    <!-- Crypto payment method -->
                    <fieldset
                      class="tab-pane fade"
                      id="crypto-tab-pane"
                      role="tabpanel"
                      aria-labelledby="crypto-tab"
                      tabindex="0"
                    >
                      <div class="inputField">
                        <label>Wallet Address</label>
                        <input type="text" name="crypto-address" />
                      </div>
                    </fieldset>
                  </div>
                  <div class="row">
                    <div class="col-md-6">
                      <div class="inputField">
                        <label>City</label>
                        <input type="text" name="city" required />
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="inputField">
                        <label>State / Province</label>
                        <select name="province" required>
                          <option value="punjab">Punjab</option>
                          <option value="Sindh">Sindh</option>
                        </select>
                        <span></span>
                      </div>
                    </div>
                  </div>
                  <!-- Agreement checkbox -->
                  <div class="agreement">
                    <input type="checkbox" name="agree" />
                    <p>
                      I understand that this subscription will automatically
                      renew and will continue until I cancel. I also understand
                      I can cancel this subscription at any time.
                    </p>
                  </div>
                  <!-- Payment button -->
                  <button type="button" class="btn-hover" id="sub">
                    Make Payment
                  </button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <div id="error"></div>

    <!-- Bootstrap JS -->
    <script src="assets/js/bootstrap/bootstrap.min.js"></script>

    <!-- jQuery -->
    <script src="assets/js/jQuery/jquery-3.7.0.min.js"></script>

    <!-- Custom JS -->
    <script src="assets/js/custom.js"></script>
  </body>
</html>
