@include('partials.header-ar')
<main>
      <section class="sec-slider">
        <div class="container-fluid p-0">
          <!-- Swiper -->
          <div class="swiper mySwiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="{{ asset('images/slider-image-1.webp') }}" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="{{ asset('images/slider-image-2.webp') }}" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="{{ asset('images/slider-image-1.webp') }}" alt="" />
              </div>
            </div>
          </div>
          <div
            class="swiper-pagination position-relative bottom-0 mx-auto pt-4"
          ></div>
        </div>
      </section>

      <section id="the-platform" class="the-platform">
      <div class="container-fluid px-0">
        <h2 class="text-center py-5">The <span
          class="primary-color">Platform</span></h2>
        <img class="img-fluid" src="{{ asset('images/the-platform.png') }}" alt="">
      </div>
      </section>

      <section id="platform-features" class="sec-platform"></section>

      <div class="container py-5 basic-pkg sec-features">
<div class="row">
<div class="col-12">
<h1 class="text-center display-6 fw-normal primary-color pb-5"><span class="text-dark">  Platform </span>Feature</h1>
</div>

<div class="col-md-9 col-sm-12 features-block">
 <div class="row">
  <div class="col-md-6">
    <div class="row align-items-center">
      <div class="col-6">
      <img src="{{ asset('images/img1.png') }}" class="img-fluid" />
      </div>
      <div class="col-6">
      <p class="fs-6">Customers Mobile App</p>
      <div class="row">
        <div class="col-3 p-0">
          <img src="{{ asset('images/icon1.png') }}" class="img-fluid" alt="">
          </div>
          <div class="col-9 p-0">
            <p class="fs-6">Multilanguage <span class="d-block fs-6" style="
    font-size: 12px !important;
">English, Arabic, Others If Demand</span></p>
            </div>
          </div>
          <div class="row">
            <div class="col-3 p-0">
              <img src="{{ asset('images/icon2.png') }}" class="img-fluid" alt="">
              </div>
              <div class="col-9 p-0">
                <p class="fs-6">Many Delivery Options <span class="d-block fs-6" style="
        font-size: 12px !important;
    ">Delivery, Pickup, Dine in</span></p>
                </div>
              </div>
              <div class="row">
                <div class="col-3 p-0">
                  <img src="{{ asset('images/icon3.png') }}" class="img-fluid" alt="">
                  </div>
                  <div class="col-9 p-0">
                    <p class="fs-6">Many Payments Methods<span class="d-block fs-6" style="
            font-size: 12px !important;
        ">Cash, Online, Credit Card</span></p>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-3 p-0">
                      <img src="{{ asset('images/icon4.png') }}" class="img-fluid" alt="">
                      </div>
                      <div class="col-9 p-0">
                        <p class="fs-6">Easy Items Customization<span class="d-block fs-6" style="
                font-size: 12px !important;
            ">Check Box And Radio Buttons Options</span></p>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-3 p-0">
                          <img src="{{ asset('images/icon5.png') }}" class="img-fluid" alt="">
                          </div>
                          <div class="col-9 p-0">
                            <p class="fs-6">Loyalty System<span class="d-block fs-6" style="
                    font-size: 12px !important;
                ">Discounts, Offers And Promo Codes</span></p>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-3 p-0">
                              <img src="{{ asset('images/icon6.png') }}" class="img-fluid" alt="">
                              </div>
                              <div class="col-9 p-0">
                                <p class="fs-6">SMS OTP Verification<span class="d-block fs-6" style="
                        font-size: 12px !important;
                    ">SMS To Verify Correct Mobile Number</span></p>
                  </div>
                </div>   
      </div>
    </div>
    <div class="row align-items-center hm-leftbox">
      <div class="col-6">
      <img src="{{ asset('images/img3.png') }}" class="img-fluid">
      </div>
      <div class="col-6">
      <p class="fs-6">Delivery Mobile App</p>
      <div class="row">
        <div class="col-3 p-0">
          <img src="{{ asset('images/icon11.png') }}" class="img-fluid px-2" alt="">
          </div>
          <div class="col-9 p-0">
            <p class="fs-6">Easy To Pickup Orders<span class="d-block fs-6" style="
    font-size: 12px !important;
">Full Details For Your Pickup Location</span></p>
            </div>
          </div>
          <div class="row">
            <div class="col-3 p-0">
              <img src="{{ asset('images/icon12.png') }}" class="img-fluid px-2" alt="">
              </div>
              <div class="col-9 p-0">
                <p class="fs-6">Easy To Drop off Orders<span class="d-block fs-6" style="
        font-size: 12px !important;
    ">Full Details For Your Drop Off Location</span></p>
                </div>
              </div>
              <div class="row">
                <div class="col-3 p-0">
                  <img src="{{ asset('images/icon13.png') }}" class="img-fluid px-2" alt="">
                  </div>
                  <div class="col-9 p-0">
                    <p class="fs-6">Communication<span class="d-block fs-6" style="
            font-size: 12px !important;
        ">Easy To Contact Store And Client</span></p>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-3 p-0">
                      <img src="{{ asset('images/icon14.png') }}" class="img-fluid px-2" alt="">
                      </div>
                      <div class="col-9 p-0">
                        <p class="fs-6">Rating<span class="d-block fs-6" style="
                font-size: 12px !important;
            ">Rate Clients After Deliver Orders</span></p>
            </div>
          </div>          
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="row align-items-center right-hm-col">     
      <div class="col-6">
      <p class="fs-6 text-end">Store Mobile App</p>
            <div class="row">  
              <div class="col-9 p-0">
                <p class="fs-6 text-end">Orders Management<span class="d-block fs-6" style="
        font-size: 12px !important;
    ">Accept Or Decline Received Orders</span></p>
                </div>
                <div class="col-3 p-0">
                  <img src="{{ asset('images/icon-7.png') }}" class="img-fluid px-2" alt="">
                  </div>
              </div> 
              <div class="row">  
                <div class="col-9 p-0">
                  <p class="fs-6 text-end">Inventory Management<span class="d-block fs-6" style="
          font-size: 12px !important;
      ">Active Your Available Items By Only One Click</span></p>
                  </div>
                  <div class="col-3 p-0">
                    <img src="{{ asset('images/icon-8.png') }}" class="img-fluid px-2" alt="">
                    </div>
                </div> 
                <div class="row">  
                  <div class="col-9 p-0">
                    <p class="fs-6 text-end">Dashboard And Reports<span class="d-block fs-6" style="
            font-size: 12px !important;
        ">Check Your Work Any Moment</span></p>
                    </div>
                    <div class="col-3 p-0">
                      <img src="{{ asset('images/icon-9.png') }}" class="img-fluid px-1" alt="">
                      </div>
                  </div>   
              <div class="row">  
                <div class="col-9 p-0">
                  <p class="fs-6 text-end">Driver Picker<span class="d-block fs-6" style="
          font-size: 12px !important;
      ">Choose Your Driver By His Distance Away From You</span></p>
                  </div>
                  <div class="col-3 p-0">
                    <img src="{{ asset('images/icon-10.png') }}" class="img-fluid px-1" alt="">
                    </div>
                </div>                             
    
      </div>
      <div class="col-6">
        <img src="{{ asset('images/img2.png') }}" class="img-fluid">
        </div>
    </div>
  </div>
 </div>
</div>
<div class="col-md-3 col-sm-12">
<button type="button" class="btn  greenbg text-white py-2 px-5 fs-6 mb-5 float-end rounded-pill"><img src="{{ asset('images/h-sec.png') }}" class="img-fluid" style="width:30px;">High Security</button>
<button type="button" class="btn bluebg text-white py-2 px-5 fs-6 mb-5 float-end rounded-pill"><img src="{{ asset('images/children.png') }}" class="img-fluid" style="width:30px;">Easy To Use</button>
<button type="button" class="btn maroonbg text-white py-2 px-5 fs-6 mb-5 float-end rounded-pill"><img src="{{ asset('images/phone.png') }}" class="img-fluid" style="width:30px;">Best UI/UX</button>
<button type="button" class="btn purplebg text-white py-2 px-5 fs-6 mb-5 float-end rounded-pill"><img src="{{ asset('images/rocket.png') }}" class="img-fluid" style="width:30px;">High Speed</button>
<button type="button" class="btn graybg text-white py-2 px-5 fs-6 mb-5 float-end rounded-pill"><img src="{{ asset('images/settings.png') }}" class="img-fluid" style="width:30px;">Customizable</button>
<button type="button" class="btn darkbluebg text-white py-2 px-5 fs-6 mb-5 float-end rounded-pill"><img src="{{ asset('images/sheeld.png') }}" class="img-fluid" style="width:30px;">High Quality</button>
<button type="button" class="btn brownbg text-white py-2 px-5 fs-6 mb-5 float-end rounded-pill"><img src="{{ asset('images/flexible.png') }}" class="img-fluid" style="width:30px;">Flexible</button>
<button type="button" class="btn purbpledarbg text-white py-2 px-5 fs-6 mb-5 float-end rounded-pill"><img src="{{ asset('images/price.png') }}" class="img-fluid" style="width:30px;">Best Price</button>
</div>

</div>

<div class="row pt-5 align-items-center">
  <div class="col-md-4 text-end">
    <p class="fs-6 fw-bold text-end">Management Portal Website</p>
    <div class="row align-items-center">  
      <div class="col-10 p-0">
        <p class="fs-6 text-end">Branches Management<span class="d-block fs-6" style="
font-size: 12px !important;
">Add, Edit And Remove Branches</span></p>
        </div>
        <div class="col-2 p-0">
          <img src="{{ asset('images/icon15.png') }}" class="img-fluid px-2" alt="">
          </div>
      </div>
      <div class="row align-items-center">  
        <div class="col-10 p-0">
          <p class="fs-6 text-end">Items And Categories Management<span class="d-block fs-6" style="
  font-size: 12px !important;
  ">Add, Edit, Remove, Active Items, Categories And Sub Categories</span></p>
          </div>
          <div class="col-2 p-0">
            <img src="{{ asset('images/icon16.png') }}" class="img-fluid px-2" alt="">
            </div>
        </div>
        <div class="row align-items-center">  
          <div class="col-10 p-0">
            <p class="fs-6 text-end">Clients And Drivers Management<span class="d-block fs-6" style="
    font-size: 12px !important;
    ">Add, Edit, Remove, Block Clients And Drivers</span></p>
            </div>
            <div class="col-2 p-0">
              <img src="{{ asset('images/icon17.png') }}" class="img-fluid px-2" alt="">
              </div>
          </div>
          <div class="row align-items-center">  
            <div class="col-10 p-0">
              <p class="fs-6 text-end">Full Reports<span class="d-block fs-6" style="
      font-size: 12px !important;
      ">Reports For Clients, Drivers, Branches, Items, With Full Details</span></p>
              </div>
              <div class="col-2 p-0">
                <img src="{{ asset('images/icon18.png') }}" class="img-fluid px-2" alt="">
                </div>
            </div>
  </div>
  <div class="col-md-8">
    <img src="{{ asset('images/img4.png') }}" class="img-fluid">
  </div>
</div>
<div class="row">
  <div class="col-md-9">
    <div class="row">
   <div  class="col-md-9">
    <div class="row align-items-center mb-3">
      <div class="col-1">
        <img src="{{ asset('images/icon19.png') }}" class="img-fluid" alt="">
        </div>
        <div class="col-11 p-0">
          <p class="fs-6">Available Every Where <span class="d-block fs-6" style="
  font-size: 12px !important;
">You Can Get Your App From Google Play Store<br />
Apple Store And Huawei App Gallery
</span></p>

  </div>
  </div>
  <a href="#"><img src="{{ asset('images/google-play.PNG') }}" class="img-fluid mb-2 d-block" alt=""></a>
<a href="#"><img src="{{ asset('images/appstore.PNG') }}" class="img-fluid mb-2 d-block" alt=""></a>
<a href="#"><img src="{{ asset('images/appgallery.PNG') }}" class="img-fluid mb-2 d-block" alt=""></a>
<h3 class="fs-4 pt-4">We Are <span class="primary-color">The Right Choice</span></h3>
<p class="fs-6">If You're Looking For Ecommerce Apps For You Business</p>

   </div>
   <div  class="col-md-3 felx-palt-div">
    <div class="row">  
      <div class="col-9 p-0">
        <p class="fs-6 text-end">Flexible Platform <span class="d-block fs-6" style="
font-size: 12px !important;
">Whatever Your Clients Type Or Age
Whatever Your Work Kind Or Size
Whatever Your Style
Whatever Your Color
Whatever Your Options</span></p>
        </div>
        <div class="col-3 p-0">
          <img src="{{ asset('images/icon20.png') }}" class="img-fluid px-2" alt="">
          </div>
      </div>
      <div class="row">  
        <div class="col-9 p-0">
          <p class="fs-6 text-end">Native Not Hybrid<span class="d-block fs-6" style="
  font-size: 12px !important;
">All Android Apps Is Native Apps
All Apple Apps Is Native Apps</span></p>
          </div>
          <div class="col-3 p-0">
            <img src="{{ asset('images/icon21.png') }}" class="img-fluid px-2" alt="">
            </div>
        </div>
   </div>
</div>
    
<img src="{{ asset('images/rectangle.png') }}" class="img-fluid">
  </div>


  <div class="col-md-3 text-start rect-img">
    <img src="{{ asset('images/mobile.png') }}" class="img-fluid w-75">
  </div>
</div>





</div>

      <section id="demos" class="demos py-xxl-5 d-none">
      <div class="container">
        <h2 class="text-center py-5">Whatever Your <span
          class="primary-color">Business</span> Is, We Got You Covered Take A Look At Some Demos By Choosing Your <span
          class="primary-color">Business</span> Type</h2>
          <!-- Swiper -->
        <div class="swiper mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="{{ asset('images/demo-1.png') }}" alt=""></div>
            <div class="swiper-slide"><img src="{{ asset('images/demo-2.png') }}" alt=""></div>
            <div class="swiper-slide"><img src="{{ asset('images/demo-3.png') }}" alt=""></div>
            <div class="swiper-slide"><img src="{{ asset('images/demo-4.png') }}" alt=""></div>
            <div class="swiper-slide"><img src="{{ asset('images/demo-1.png') }}" alt=""></div>
            <div class="swiper-slide"><img src="{{ asset('images/demo-2.png') }}" alt=""></div>
            <div class="swiper-slide"><img src="{{ asset('images/demo-3.png') }}" alt=""></div>
            <div class="swiper-slide"><img src="{{ asset('images/demo-4.png') }}" alt=""></div>
          </div>
          <div class="swiper-pagination"></div>
          <!-- If we need navigation buttons -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
        <div class="button-wrapper text-end">
          <button type="button" class="btn bg-primary-color text-white py-2 px-4 fs-6 rounded-pill mt-5">
          See All Demos
          </button>
      </div>
    </section>

    <section id="our-clients" class="our-clients py-xxl-5 d-none">
      <div class="container py-5">
        <h2 class="text-center py-5">Our <span
          class="primary-color">Clients</span></h2>
        <!-- Swiper -->
        <div class="swiper mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide d-flex justify-content-center flex-column border border-2 shadow-sm py-4 px-3 rounded-5">
              <img src="{{ asset('images/client-1.png') }}" alt="">
              <h6>dipndip</h6>
              <p>Coffee And Sweets</p>
              <p class="location primary-color">KSA</p>
            </div>
            <div class="swiper-slide d-flex justify-content-center flex-column border border-2 shadow-sm py-4 px-4 rounded-5">
              <img src="{{ asset('images/client-2.png') }}" alt="">
              <h6>Shamiat Al Zain</h6>
              <p>Chicken and Pizza Restaurant</p>
              <p class="location primary-color">Jordan</p>
            </div>
            <div class="swiper-slide d-flex justify-content-center flex-column border border-2 shadow-sm py-4 px-4 rounded-5">
              <img src="{{ asset('images/client-3.png') }}" alt="">
              <h6>Wajjba</h6>
              <p>Home Made Food</p>
              <p class="location primary-color">Jordan</p>
            </div>
            <div class="swiper-slide d-flex justify-content-center flex-column border border-2 shadow-sm py-4 px-4 rounded-5">
              <img src="{{ asset('images/client-4.png') }}" alt="">
              <h6>Rawabi Farah</h6>
              <p>Sweeds And Grocery</p>
              <p class="location primary-color">Jordan</p>
            </div>
            <div class="swiper-slide d-flex justify-content-center flex-column border border-2 shadow-sm py-4 px-3 rounded-5">
              <img src="{{ asset('images/client-1.png') }}" alt="">
              <h6>dipndip</h6>
              <p>Coffee And Sweets</p>
              <p class="location primary-color">KSA</p>
            </div>
            <div class="swiper-slide d-flex justify-content-center flex-column border border-2 shadow-sm py-4 px-4 rounded-5">
              <img src="{{ asset('images/client-2.png') }}" alt="">
              <h6>Shamiat Al Zain</h6>
              <p>Chicken and Pizza Restaurant</p>
              <p class="location primary-color">Jordan</p>
            </div>
            <div class="swiper-slide d-flex justify-content-center flex-column border border-2 shadow-sm py-4 px-4 rounded-5">
              <img src="{{ asset('images/client-3.png') }}" alt="">
              <h6>Wajjba</h6>
              <p>Home Made Food</p>
              <p class="location primary-color">Jordan</p>
            </div>
            <div class="swiper-slide d-flex justify-content-center flex-column border border-2 shadow-sm py-4 px-4 rounded-5">
              <img src="{{ asset('images/client-4.png') }}" alt="">
              <h6>Rawabi Farah</h6>
              <p>Sweeds And Grocery</p>
              <p class="location primary-color">Jordan</p>
            </div>
          </div>
          <div class="swiper-pagination"></div>
          <!-- If we need navigation buttons -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
        <div class="button-wrapper text-end">
          <button type="button" class="btn bg-primary-color text-white py-2 px-4 fs-6 rounded-pill mt-5">
          See All Clients
          </button>
      </div>
      </div>
    </div>
    </section>

    <section id="packs" class="our-packs py-xxl-5">
      <div class="container py-5">
        <h2 class="text-center py-5">Our <span class="primary-color">Packs</span></h2>
        <div class="row">
          <div class="col-12 col-lg-3">
            <div class="pack border border-1 shadow-sm rounded-4 pt-5">
              <h3 class="text-center pb-3 primary-color">Basic</h3>
              <h4 class="text-center h2 py-3 border-top border-bottom border-1 d-flex flex-column">750 JOD<span
                  class="h6">Annually</span><span class="text-black-50" style="font-size:12px;">Free Month to Prepare Store</span></h4>
              <h6 class="text-center primary-color pt-2">Applications Kit</h6>
              <p class="text-center px-2" style="font-size:12px;">Customers App, Store App & Delivery App</p>
              <ul class="pack-points pt-4 list-unstyled px-2">
                <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>Single Branch
                </li>
                <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>Control Panel - Basic Options</li>
                <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>300 Items</li>
                <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>2 Admin Accounts for Control Panel</li>
                <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>2 Accounts for Store App</li>
                <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>Delivery Option in Store App</li>
                <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>Online Payment</li>
                  <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>10K SMS - OTP ( 1st launch )</li>
              </ul>
              <div class="btn-wrapper text-center">
                <a href="{{ route('basic') }}" class="btn bg-primary-color text-white py-2 px-4 fs-6 rounded-pill w-75 position-relative">Select</a>
              </div>
            </div>
          </div>

          <div class="col-12 col-lg-3">
            <div class="pack border border-1 shadow-sm rounded-4 pt-5">
              <h3 class="text-center pb-3 primary-color">Pro</h3>
              <h4 class="text-center h2 py-3 border-top border-bottom border-1 d-flex flex-column">1400 JOD<span
                  class="h6">Annually</span><span class="text-black-50" style="font-size:12px;">Free Month to Prepare Store</span></h4>
              <h6 class="text-center primary-color pt-2">Applications Kit</h6>
              <p class="text-center px-2" style="font-size:12px;">Customers App, Store App & Delivery App</p>
              <ul class="pack-points pt-4 list-unstyled px-2">
                <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>Single Branch
                </li>
                <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>Control Panel - Pro Options</li>
                <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>1500 Items</li>
                <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>10 Admin Accounts for Control Panel</li>
                <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>4 Accounts for Store App</li>
                <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>4 Accounts for Delivery App</li>
                <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>Online Payment</li>
                  <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>10K SMS - OTP ( 1st launch )</li>
                  <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>Business Landing Page</li>
              </ul>
              <div class="btn-wrapper text-center">
                <a href="{{ route('pro') }}" class="btn bg-primary-color text-white py-2 px-4 fs-6 rounded-pill w-75 position-relative">Select</a>
              </div>
            </div>
          </div>

          <div class="col-12 col-lg-3">
            <div class="pack border border-1 shadow-sm rounded-4 pt-5">
              <h3 class="text-center pb-3 primary-color">Pro +</h3>
              <h4 class="text-center h2 py-3 border-top border-bottom border-1 d-flex flex-column">2400 JOD<span
                  class="h6">Annually</span><span class="text-black-50" style="font-size:12px;">Free Month to Prepare Store</span></h4>
              <h6 class="text-center primary-color pt-2">Applications Kit</h6>
              <p class="text-center px-2" style="font-size:12px;">Customers App, Store App & Delivery App</p>
              <ul class="pack-points pt-4 list-unstyled px-2">
                <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>3 Branches
                </li>
                <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>Control Panel - Pro + Options</li>
                <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>Unlimited Items</li>
                <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>Unlimited Accounts for Control Panel</li>
                <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>10 Accounts for Store App / Branch</li>
                <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>10 Accounts for Delivery App / Branch</li>
                <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>Online Payment</li>
                  <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>10K SMS - OTP ( 1st launch )</li>
                  <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>Business Landing Page</li>
              </ul>
              <div class="btn-wrapper text-center">
                <a href="{{ route('pro-plus') }}" class="btn bg-primary-color text-white py-2 px-4 fs-6 rounded-pill w-75 position-relative">Select</a>
              </div>
            </div>
          </div>

          <div class="col-12 col-lg-3">
            <div class="pack border border-1 shadow-sm rounded-4 pt-5">
              <h3 class="text-center pb-3 primary-color">Unlimited</h3>
              <h4 class="text-center h2 py-3 border-top border-bottom border-1 d-flex flex-column">3500 JOD<span
                  class="h6">Annually</span><span class="text-black-50" style="font-size:12px;">Free Month to Prepare Store</span></h4>
              <h6 class="text-center primary-color pt-2">Applications Kit</h6>
              <p class="text-center px-2" style="font-size:12px;">Customers App, Store App & Delivery App</p>
              <ul class="pack-points pt-4 list-unstyled px-2">
                <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>Unlimited Branches
                </li>
                <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>Control Panel - Unlimited Options</li>
                <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>Unlimited Items</li>
                <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>Unlimited Control Panel Accounts</li>
                <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>Unlimited Accounts for Store App</li>
                <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>Unlimited Accounts for Delivery App</li>
                <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>Online Payment</li>
                  <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>10K SMS - OTP ( 1st launch )</li>
                  <li class="d-flex"><span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor"
                      class="bi bi-check" viewBox="0 0 16 16">
                      <path
                        d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>
                  </span>Business Landing Page</li>
              </ul>
              <div class="btn-wrapper text-center">
                <a href="{{ route('unlimited') }}" class="btn bg-primary-color text-white py-2 px-4 fs-6 rounded-pill w-75 position-relative">Select</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="extra-components py-xxl-5">
      <div class="container py-5">
      <h2 class="text-center py-5">Extras Components</h2>
        <!-- Tabs Navigation -->
        <!-- <nav class="py-2 border-top border-bottom">
          <div class="nav justify-content-center" id="nav-tab" role="tablist">
            <button class="nav-link active fs-6" id="nav-branch-tab" data-bs-toggle="tab" data-bs-target="#nav-branch"
              type="button" role="tab" aria-controls="nav-branch" aria-selected="true">Branch</button>
            <button class="nav-link fs-6" id="nav-500-jod-tab" data-bs-toggle="tab" data-bs-target="#nav-500-jod"
              type="button" role="tab" aria-controls="nav-500-jod" aria-selected="false">500 JOD Annually</button>
            <button class="nav-link fs-6" id="nav-store-tab" data-bs-toggle="tab" data-bs-target="#nav-store"
              type="button" role="tab" aria-controls="nav-store" aria-selected="false">Store Account</button>
            <button class="nav-link fs-6" id="nav-100-jod-tab" data-bs-toggle="tab" data-bs-target="#nav-100-jod"
              type="button" role="tab" aria-controls="nav-100-jod" aria-selected="false">100 JOD Annually</button>
            <button class="nav-link fs-6" id="nav-delivery-tab" data-bs-toggle="tab" data-bs-target="#nav-delivery"
              type="button" role="tab" aria-controls="nav-delivery" aria-selected="false">Delivery Account</button>
          </div>
        </nav> -->
        <!-- Tabs Navigation -->
        <ul class="features py-4 border-top border-bottom list-unstyled">
          <div class="d-flex justify-content-center gap-4">
            <li class="fs-4">Branch</li>
            <li class="fs-4">500 JOD Annually</li>
            <li class="fs-4">Store Account</li>
            <li class="fs-4">100 JOD Annually</li>
            <li class="fs-4">Delivery Account</li>
            <li class="fs-4">100 JOD Annually</li>
          </div>
        </ul>

        <div class="pack border border-1 shadow-sm rounded-4 pt-4">
                <h3 class="text-center pb-3 primary-color">Market Place</h3>
                <h4 class="text-center h2 py-3 border-top border-bottom border-1 d-flex flex-column">5,000 JOD <span
                    class="h6 fw-normal">Annually + 10% Commission / Order</span></h4>
                <h6 class="text-center primary-color pt-2">Applications Kit</h6>
                <p class="text-center px-2">Customers App, Store App & Delivery App</p>
                <h5 class="text-center fs-6">Unlimited Branches, Control Panel Options, Items, Admins, Accounts and More</h5>
                <div class="btn-wrapper text-center">
                  <a href="{{ route('market-place') }}" class="btn bg-primary-color text-white py-2 px-4 fs-6 rounded-pill w-25 position-relative">Select</a>
                </div>
              </div>
            </div>

        <!-- Tabs Content -->
        <!-- <div class="tab-content" id="nav-tabContent">
          <div class="tab-pane fade show active" id="nav-branch" role="tabpanel" aria-labelledby="nav-branch-tab"
            tabindex="0">
            <div class="col-12 py-5">
              <div class="pack border border-1 shadow-sm rounded-4 pt-4">
                <h3 class="text-center pb-3 primary-color">Market Place</h3>
                <h4 class="text-center h2 py-3 border-top border-bottom border-1 d-flex flex-column">5,000 JOD <span
                    class="h6 fw-normal">Annually + 10% Commission / Order</span></h4>
                <h6 class="text-center primary-color pt-2">Applications Kit</h6>
                <p class="text-center px-2">Customers App, Store App & Delivery App</p>
                <h5 class="text-center fs-6">Unlimited Branches, Control Panel - Full Options, Unlimited Items,
                  Unlimited Admins and More</h5>
                <div class="btn-wrapper text-center">
                  <a href="{{ route('pro-plus') }}" class="btn bg-primary-color text-white py-2 px-4 fs-6 rounded-pill w-25 position-relative">Select</a>
                </div>
              </div>
            </div>

          </div>
          <div class="tab-pane fade" id="nav-500-jod" role="tabpanel" aria-labelledby="nav-500-jod-tab" tabindex="0">
            <div class="col-12 py-5">
              <div class="pack border border-1 shadow-sm rounded-4 pt-4">
                <h3 class="text-center pb-3 primary-color">Market Place</h3>
                <h4 class="text-center h2 py-3 border-top border-bottom border-1 d-flex flex-column">5,000 JOD <span
                    class="h6 fw-normal">Annually + 10% Commission / Order</span></h4>
                <h6 class="text-center primary-color pt-2">Applications Kit</h6>
                <p class="text-center px-2">Customers App, Store App & Delivery App</p>
                <h5 class="text-center fs-6">Unlimited Branches, Control Panel - Full Options, Unlimited Items,
                  Unlimited Admins and More</h5>
                <div class="btn-wrapper text-center">
                  <a href="{{ route('pro-plus') }}" class="btn bg-primary-color text-white py-2 px-4 fs-6 rounded-pill w-25 position-relative">Select</a>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="nav-store" role="tabpanel" aria-labelledby="nav-store-tab" tabindex="0">
            <div class="col-12 py-5">
              <div class="pack border border-1 shadow-sm rounded-4 pt-4">
                <h3 class="text-center pb-3 primary-color">Market Place</h3>
                <h4 class="text-center h2 py-3 border-top border-bottom border-1 d-flex flex-column">5,000 JOD <span
                    class="h6 fw-normal">Annually + 10% Commission / Order</span></h4>
                <h6 class="text-center primary-color pt-2">Applications Kit</h6>
                <p class="text-center px-2">Customers App, Store App & Delivery App</p>
                <h5 class="text-center fs-6">Unlimited Branches, Control Panel - Full Options, Unlimited Items,
                  Unlimited Admins and More</h5>
                <div class="btn-wrapper text-center">
                  <a href="{{ route('pro-plus') }}" class="btn bg-primary-color text-white py-2 px-4 fs-6 rounded-pill w-25 position-relative">Select</a>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="nav-100-jod" role="tabpanel" aria-labelledby="nav-100-jod-tab" tabindex="0">
            <div class="col-12 py-5">
              <div class="pack border border-1 shadow-sm rounded-4 pt-4">
                <h3 class="text-center pb-3 primary-color">Market Place</h3>
                <h4 class="text-center h2 py-3 border-top border-bottom border-1 d-flex flex-column">5,000 JOD <span
                    class="h6 fw-normal">Annually + 10% Commission / Order</span></h4>
                <h6 class="text-center primary-color pt-2">Applications Kit</h6>
                <p class="text-center px-2">Customers App, Store App & Delivery App</p>
                <h5 class="text-center fs-6">Unlimited Branches, Control Panel - Full Options, Unlimited Items,
                  Unlimited Admins and More</h5>
                <div class="btn-wrapper text-center">
                  <a href="{{ route('pro-plus') }}" class="btn bg-primary-color text-white py-2 px-4 fs-6 rounded-pill w-25 position-relative">Select</a>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="nav-delivery" role="tabpanel" aria-labelledby="nav-delivery-tab" tabindex="0">
            <div class="col-12 py-5">
              <div class="pack border border-1 shadow-sm rounded-4 pt-4">
                <h3 class="text-center pb-3 primary-color">Market Place</h3>
                <h4 class="text-center h2 py-3 border-top border-bottom border-1 d-flex flex-column">5,000 JOD <span
                    class="h6 fw-normal">Annually + 10% Commission / Order</span></h4>
                <h6 class="text-center primary-color pt-2">Applications Kit</h6>
                <p class="text-center px-2">Customers App, Store App & Delivery App</p>
                <h5 class="text-center fs-6">Unlimited Branches, Control Panel - Full Options, Unlimited Items,
                  Unlimited Admins and More</h5>
                <div class="btn-wrapper text-center">
                  <a href="{{ route('pro-plus') }}" class="btn bg-primary-color text-white py-2 px-4 fs-6 rounded-pill w-25 position-relative">Select</a>
                </div>
              </div>
            </div>
          </div>
        </div> -->
        <!-- Tabs Content -->
      </div>
    </section>

    <section id="contact-us" class="sec-contact">
        <div class="container-lg py-5 my-5">
          <h2 class="text-center">Contact Us Now, To Make Your Business More <span class="primary-color">Professional</span></h2>
          <div class="row">
              <div class="col-12 mx-auto">
                <div class="form py-lg-5">
                  <form action="" method="">
                  <div class="input-group input-group-sm mb-3">
                    <span class="input-group-text" id="inputGroup-sizing-sm">
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="var(--primary-color)" class="bi bi-person-fill" viewBox="0 0 16 16">
                      <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"/>
                    </svg></span>
                    <input type="text" class="form-control py-2" placeholder="Name" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" required>
                  </div>
                  <div class="input-group input-group-sm mb-3">
                    <span class="input-group-text" id="inputGroup-sizing-sm">
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="var(--primary-color)" class="bi bi-envelope-fill" viewBox="0 0 16 16">
                        <path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555ZM0 4.697v7.104l5.803-3.558L0 4.697ZM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757Zm3.436-.586L16 11.801V4.697l-5.803 3.546Z"/>
                      </svg></span>
                    <input type="text" class="form-control py-2" placeholder="Email" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" required>
                  </div>
                  <div class="input-group input-group-sm mb-3">
                    <span class="input-group-text" id="inputGroup-sizing-sm">
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="var(--primary-color)" class="bi bi-telephone-fill" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"/>
                      </svg></span>
                    <input type="text" class="form-control py-2" placeholder="Phone No" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" required>
                  </div>
                  <div class="form-floating">
                    <textarea class="form-control py-2" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
                    <label for="floatingTextarea">Message</label>
                  </div>
                  <div class="btn-wrapper text-end">
                    <button type="submit" class="btn rounded-pill bg-primary-color text-white mt-4 text-end px-5">Send</button>
                  </div>
                </form>
                </div>
              </div>
          </div>
        </div>
      </section>

    </main>
@include('partials.footer')