<div class="row">
 <div class="col-md-6">
 <!-- img slide -->
 <div class="artwork" id="artwork">
    <div class="zoom" onmousemove="zoom(event)"
       style="background-image: url(../../assets/images/rm-artist/artwork-01.jpg)">
       <!-- img -->
       <!-- img --><img src="../../assets/images/rm-artist/artwork-01.jpg" alt="">
    </div>
    <div>
       <div class="zoom" onmousemove="zoom(event)"
          style="background-image: url(../../assets/images/rm-artist/artwork-03.jpg)">
          <!-- img -->
          <img src="../../assets/images/rm-artist/artwork-03.jpg" alt="">
       </div>
    </div>
    <div>
       <div class="zoom" onmousemove="zoom(event)"
          style="background-image: url(../../assets/images/rm-artist/artwork-05.jpg)">
          <!-- img -->
          <img src="../../assets/images/rm-artist/artwork-05.jpg" alt="">
       </div>
    </div>
    <div>
       <div class="zoom" onmousemove="zoom(event)"
          style="background-image: url(../../assets/images/rm-artist/artwork-10.jpg)">
          <!-- img -->
          <img src="../../assets/images/rm-artist/artwork-10.jpg" alt="">
       </div>
    </div>
 </div>
 <!-- artwork tools -->
 <div class="artwork-tools">
    <div class="thumbnails row g-3" id="productThumbnails">
       <div class="col-3">
          <div class="thumbnails-img">
             <!-- img -->
             <img src="../../assets/images/rm-artist/artwork-01.jpg" alt="">
          </div>
       </div>
       <div class="col-3">
          <div class="thumbnails-img">
             <!-- img -->
             <img src="../../assets/images/rm-artist/artwork-03.jpg" alt="">
          </div>
       </div>
       <div class="col-3">
          <div class="thumbnails-img">
             <!-- img -->
             <img src="../../assets/images/rm-artist/artwork-05.jpg" alt="">
          </div>
       </div>
       <div class="col-3">
          <div class="thumbnails-img">
             <!-- img -->
             <img src="../../assets/images/rm-artist/artwork-10.jpg" alt="">
          </div>
       </div>
    </div>
 </div>
 </div>
 <div class="col-md-6">
 <div class="ps-lg-10 mt-6 mt-md-0">
    <!-- content -->
    <a href="#!" class="mb-4 d-block">Bridal Accessories</a>
    <!-- heading -->
    <h1 class="mb-1">Napolitanke Ljesnjak </h1>
    <div class="mb-4">
       <!-- rating -->
       <!-- rating --> <small class="text-warning"> <i class="bi bi-star-fill"></i>
       <i class="bi bi-star-fill"></i>
       <i class="bi bi-star-fill"></i>
       <i class="bi bi-star-fill"></i>
       <i class="bi bi-star-half"></i></small><a href="#" class="ms-2">(30 reviews)</a>
    </div>
    <div class="fs-4">
       <!-- price --><span class="fw-bold text-dark">Price pending</span> <span
          class="text-decoration-line-through text-muted">Price pending</span><span><small class="fs-6 ms-2 text-danger">Details pending
       Off</small></span>
    </div>
    <!-- hr -->
    <hr class="my-6">
    <div class="mb-5">
       <button type="button" class="btn btn-outline-secondary">250g</button>
       <!-- btn --> <button type="button" class="btn btn-outline-secondary">500g</button>
       <!-- btn --> <button type="button" class="btn btn-outline-secondary">1kg</button>
    </div>
    <div>
       <!-- input -->
       <div class="input-group input-spinner  ">
          <input type="button" value="-" class="button-minus  btn  btn-sm " data-field="quantity">
          <input type="number" step="1" max="10" value="1" name="quantity" class="quantity-field form-control-sm form-input   ">
          <input type="button" value="+" class="button-plus btn btn-sm " data-field="quantity">
       </div>
    </div>
    <div class="mt-3 row justify-content-start g-2 align-items-center">
       <div class="col-xxl-4 col-lg-4 col-md-5 col-5 d-grid">
          <!-- button -->
          <!-- btn --> <button type="button" class="btn btn-primary"><i class="feather-icon icon-shopping-bag me-2"></i>Add to
          cart</button>
       </div>
       <div class="col-md-4 col-4">
          <!-- btn -->
          <a class="btn btn-light " href="#" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Compare"><i class="bi bi-arrow-left-right"></i></a>
          <a class="btn btn-light " href="#!" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Wishlist"><i class="feather-icon icon-heart"></i></a>
       </div>
    </div>
    <!-- hr -->
    <hr class="my-6">
    <div>
       <!-- table -->
       <table class="table table-borderless">
          <tbody>
             <tr>
                <td>Artwork Code:</td>
                <td>FBB00255</td>
             </tr>
             <tr>
                <td>Availability:</td>
                <td>In Stock</td>
             </tr>
             <tr>
                <td>Type:</td>
                <td>Keepsakes</td>
             </tr>
             <tr>
                <td>Shipping:</td>
                <td><small>01 day shipping.<span class="text-muted">( Free pickup today)</span></small></td>
             </tr>
          </tbody>
       </table>
    </div>
    <div class="mt-8">
       <!-- dropdown -->
       <div class="dropdown">
          <a class="btn btn-outline-secondary dropdown-toggle" href="#" role="button"
             data-bs-toggle="dropdown" aria-expanded="false">
          Share
          </a>
          <ul class="dropdown-menu" >
             <li><a class="dropdown-item" href="#"><i class="bi bi-facebook me-2"></i>Facebook</a></li>
             <li><a class="dropdown-item" href="#"><i class="bi bi-twitter me-2"></i>Twitter</a></li>
             <li><a class="dropdown-item" href="#"><i class="bi bi-instagram me-2"></i>Instagram</a></li>
          </ul>
       </div>
    </div>
 </div>
                            </div>
                         </div>

<div class="row">
    <div class="col-lg-8 col-md-7">
       <div class="py-3">
          <!-- alert -->
          <div class="alert alert-danger p-2" role="alert">
             You’ve got FREE delivery. Start <a href="#!" class="alert-link">checkout now!</a>
          </div>
          <ul class="list-group list-group-flush">
             <!-- list group -->
             <li class="list-group-item py-3 py-lg-0 px-0 border-top">
                <!-- row -->
                <div class="row align-items-center">
                   <div class="col-3 col-md-2">
                      <!-- img --> <img src="../../assets/images/rm-artist/artwork-01.jpg" alt="Ecommerce"
 class="img-fluid">
                   </div>
                   <div class="col-4 col-md-5">
                      <!-- title -->
                      <a href="gallery-single.html" class="text-inherit">
 <h6 class="mb-0">Personalized Keychain</h6>
                      </a>
                      <span><small class="text-muted">.98 / lb</small></span>
                      <!-- text -->
                      <div class="mt-2 small lh-1">
 <a href="#!" class="text-decoration-none text-inherit">
    <span
       class="me-1 align-text-bottom">
       <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
          class="feather feather-trash-2 text-primary rm-remove-icon">
          <polyline points="3 6 5 6 21 6"></polyline>
          <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
          </path>
          <line x1="10" y1="11" x2="10" y2="17"></line>
          <line x1="14" y1="11" x2="14" y2="17"></line>
       </svg>
    </span>
          <span class="text-muted">Remove</span>
   </a>
    </div>
    </div>
  <!-- input group -->
   <div class="col-3 col-md-3 col-lg-2">
      <!-- input -->
      <div class="input-group input-spinner  ">
         <input type="button" value="-" class="button-minus  btn  btn-sm " data-field="quantity">
         <input type="number" step="1" max="10" value="1" name="quantity" class="quantity-field form-control-sm form-input   ">
         <input type="button" value="+" class="button-plus btn btn-sm " data-field="quantity">
      </div>
   </div>
   <!-- price -->
   <div class="col-2 text-lg-end text-start text-md-end col-md-2">
      <span class="fw-bold">Price pending</span>
   </div>
      </div>
   </li>
   <!-- list group -->
   <li class="list-group-item py-3 py-lg-0 px-0">
      <!-- row -->
      <div class="row align-items-center">
         <div class="col-3 col-md-2">
            <!-- img --> <img src="../../assets/images/rm-artist/artwork-03.jpg" alt="Ecommerce"
               class="img-fluid">
         </div>
         <div class="col-4 col-md-5">
            <!-- title -->
            <a href="gallery-single.html" class="text-inherit">
               <h6 class="mb-0">Personalized Mug </h6>
    </a>
    <span><small class="text-muted">250g</small></span>
    <!-- text -->
    <div class="mt-2 small lh-1">
       <a href="#!" class="text-decoration-none text-inherit">
          <span
             class="me-1 align-text-bottom">
             <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="feather feather-trash-2 text-primary rm-remove-icon">
                <polyline points="3 6 5 6 21 6"></polyline>
                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
                </path>
                <line x1="10" y1="11" x2="10" y2="17"></line>
                <line x1="14" y1="11" x2="14" y2="17"></line>
             </svg>
          </span>
          <span class="text-muted">Remove</span>
       </a>
    </div>
 </div>
 <!-- input group -->
 <div class="col-3 col-md-3 col-lg-2">
    <!-- input -->
    <div class="input-group input-spinner  ">
       <input type="button" value="-" class="button-minus  btn  btn-sm " data-field="quantity">
       <input type="number" step="1" max="10" value="1" name="quantity" class="quantity-field form-control-sm form-input   ">
       <input type="button" value="+" class="button-plus btn btn-sm " data-field="quantity">
    </div>
 </div>
 <!-- price -->
 <div class="col-2 text-lg-end text-start text-md-end col-md-2">
    <span class="fw-bold text-danger">Price pending</span>
    <div class="text-decoration-line-through text-muted small">Price pending</div>
 </div>
        </div>
   </li>
  <!-- list group -->
  <li class="list-group-item py-3 py-lg-0 px-0">
  <!-- row -->
 <div class="row align-items-center">
 <div class="col-3 col-md-2">
    <!-- img --> <img src="../../assets/images/rm-artist/artwork-05.jpg" alt="Ecommerce"
       class="img-fluid">
 </div>
 <div class="col-4 col-md-5">
    <!-- title -->
    <a href="gallery-single.html" class="text-inherit">
       <h6 class="mb-0">Custom Gift Set</h6>
    </a>
    <span><small class="text-muted">1 kg</small></span>
    <!-- text -->
    <div class="mt-2 small lh-1">
    <a href="#!" class="text-decoration-none text-inherit">
       <span
          class="me-1 align-text-bottom">
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
             class="feather feather-trash-2 text-primary rm-remove-icon">
             <polyline points="3 6 5 6 21 6"></polyline>
             <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
             </path>
             <line x1="10" y1="11" x2="10" y2="17"></line>
             <line x1="14" y1="11" x2="14" y2="17"></line>
          </svg>
       </span>
       <span class="text-muted">Remove</span>
    </a>
     </div>
  </div>
  <!-- input group -->
  <div class="col-3 col-md-3 col-lg-2">
     <!-- input -->
   <div class="input-group input-spinner  ">
      <input type="button" value="-" class="button-minus  btn  btn-sm " data-field="quantity">
      <input type="number" step="1" max="10" value="1" name="quantity" class="quantity-field form-control-sm form-input   ">
      <input type="button" value="+" class="button-plus btn btn-sm " data-field="quantity">
   </div>
</div>
 <!-- price -->
  <div class="col-2 text-lg-end text-start text-md-end col-md-2">
     <span class="fw-bold">Price pending</span>
     <div class="text-decoration-line-through text-muted small">Price pending</div>
  </div>
    </div>
 </li>
 <!-- list group -->
 <li class="list-group-item py-3 py-lg-0 px-0">
    <!-- row -->
    <div class="row align-items-center">
       <div class="col-3 col-md-2">
          <!-- img --> <img src="../../assets/images/rm-artist/artwork-10.jpg" alt="Ecommerce"
             class="img-fluid">
       </div>
       <div class="col-4 col-md-5">
  <!-- title -->
 <a href="gallery-single.html" class="text-inherit">
    <h6 class="mb-0">Bridal Hand Fan</h6>
 </a>
 <span><small class="text-muted">250g</small></span>
 <!-- text -->
 <div class="mt-2 small lh-1">
    <a href="#!" class="text-decoration-none text-inherit">
       <span
          class="me-1 align-text-bottom">
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
             class="feather feather-trash-2 text-primary rm-remove-icon">
             <polyline points="3 6 5 6 21 6"></polyline>
             <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
             </path>
             <line x1="10" y1="11" x2="10" y2="17"></line>
             <line x1="14" y1="11" x2="14" y2="17"></line>
          </svg>
       </span>
       <span class="text-muted">Remove</span>
    </a>
      </div>
   </div>
   <!-- input group -->
   <div class="col-3 col-md-3 col-lg-2">
      <!-- input -->
      <div class="input-group input-spinner  ">
         <input type="button" value="-" class="button-minus  btn  btn-sm " data-field="quantity">
         <input type="number" step="1" max="10" value="1" name="quantity" class="quantity-field form-control-sm form-input   ">
         <input type="button" value="+" class="button-plus btn btn-sm " data-field="quantity">
      </div>
   </div>
   <!-- price -->
   <div class="col-2 text-lg-end text-start text-md-end col-md-2">
      <span class="fw-bold">Price pending</span>
      <div class="text-decoration-line-through text-muted small">Price pending</div>
   </div>
     </div>
  </li>
  <!-- list group -->
  <li class="list-group-item py-3 py-lg-0 px-0 border-bottom">
     <!-- row -->
     <div class="row align-items-center">
        <div class="col-3 col-md-2">
           <!-- img --> <img src="../../assets/images/rm-artist/artwork-15.jpg" alt="Ecommerce"
              class="img-fluid">
        </div>
    <div class="col-4 col-md-5">
       <!-- title -->
       <a href="gallery-single.html" class="text-inherit">
          <h6 class="mb-0">Acrylic Name Plaque </h6>
       </a>
       <span><small class="text-muted">100g</small></span>
       <!-- text -->
       <div class="mt-2 small lh-1">
          <a href="#!" class="text-decoration-none text-inherit">
             <span
                class="me-1 align-text-bottom">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
     class="feather feather-trash-2 text-primary rm-remove-icon">
     <polyline points="3 6 5 6 21 6"></polyline>
     <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
     </path>
     <line x1="10" y1="11" x2="10" y2="17"></line>
     <line x1="14" y1="11" x2="14" y2="17"></line>
     </svg>
  </span>
  <span class="text-muted">Remove</span>
     </a>
  </div>
  </div>
  <!-- input group -->
  <div class="col-3 col-md-3 col-lg-2">
  <!-- input -->
  <div class="input-group input-spinner  ">
     <input type="button" value="-" class="button-minus  btn  btn-sm " data-field="quantity">
     <input type="number" step="1" max="10" value="1" name="quantity" class="quantity-field form-control-sm form-input   ">
     <input type="button" value="+" class="button-plus btn btn-sm " data-field="quantity">
  </div>
   </div>
   <!-- price -->
   <div class="col-2 text-lg-end text-start text-md-end col-md-2">
      <span class="fw-bold">Price pending</span>
      <div class="text-decoration-line-through text-muted small">Price pending</div>
   </div>
      </div>
   </li>
</ul>
<!-- btn -->
  <div class="d-flex justify-content-between mt-4">
     <a href="#!" class="btn btn-primary">Continue Shopping</a>
     <a href="#!" class="btn btn-dark">Update Cart</a>
  </div>
 </div>
   </div>
   <!-- sidebar -->
   <div class="col-12 col-lg-4 col-md-5">
      <!-- card -->
      <div class="mb-5 card mt-6">
         <div class="card-body p-6">
  <!-- heading -->
  <h2 class="h5 mb-4">Summary</h2>
  <div class="card mb-2">
     <!-- list group -->
     <ul class="list-group list-group-flush">
        <!-- list group item -->
        <li class="list-group-item d-flex justify-content-between align-items-start">
           <div class="me-auto">
              <div>Item Subtotal</div>
           </div>
           <span>Price pending</span>
        </li>
        <!-- list group item -->
   <li class="list-group-item d-flex justify-content-between align-items-start">
      <div class="me-auto">
         <div>Service Fee</div>
      </div>
      <span>Price pending</span>
   </li>
   <!-- list group item -->
   <li class="list-group-item d-flex justify-content-between align-items-start">
      <div class="me-auto">
         <div class="fw-bold">Subtotal</div>
      </div>
      <span class="fw-bold">Price pending</span>
   </li>
    </ul>
 </div>
 <div class="d-grid mb-1 mt-4">
    <!-- btn -->
    <button class="btn btn-primary btn-lg d-flex justify-content-between align-items-center" type="submit">
    Go to Checkout <span class="fw-bold">Price pending</span></button>
 </div>
 <!-- text -->
 <p><small>By placing your order, you agree to be bound by the RM Artist <a href="#!">Terms of Service</a>
    and <a href="#!">Privacy Policy.</a> </small>
 </p>
 <!-- heading -->
    <div class="mt-8">
       <h2 class="h5 mb-3">Add Promo or Gift Card</h2>
       <form>
          <div class="mb-2">
             <!-- input -->
             <label for="giftcard" class="form-label sr-only">Email address</label>
             <input type="text" class="form-control" id="giftcard" placeholder="Promo or Gift Card">
          </div>
          <!-- btn -->
          <div class="d-grid"><button type="submit" class="btn btn-outline-dark mb-1">Redeem</button></div>
          <p class="text-muted mb-0"> <small>Terms & Conditions apply</small></p>
       </form>
    </div>
  </div>
 </div>
</div>
</div>

 <div class="row">
                            <div class="offset-lg-1 col-lg-3 col-12">
                                <div class="mb-8 mt-8">
                                    <!-- title -->
                                    <h5 class="mb-3">Categories</h5>
                                    <!-- nav -->
                                    <ul class="nav nav-category" id="categoryCollapseMenu">
                                      <li class="nav-item border-bottom w-100 " ><a href="#"
                                          class="nav-link collapsed" data-bs-toggle="collapse"
                                          data-bs-target="#categoryFlushOne" aria-expanded="false" aria-controls="categoryFlushOne">Personalized Mugs <i class="feather-icon icon-chevron-right"></i></a>
                                        <!-- accordion collapse -->
                                        <div id="categoryFlushOne" class="accordion-collapse collapse"
                                          data-bs-parent="#categoryCollapseMenu">
                                          <div>
                                            <!-- nav -->

                                            <ul class="nav flex-column ms-3">
                                              <!-- nav item -->
                                              <li class="nav-item"><a href="#!" class="nav-link">Personalized Mugs</a></li>
                                              <!-- nav item -->
                                              <li class="nav-item"><a href="#!" class="nav-link">Personalized Drinkware</a></li>
                                              <!-- nav item -->
                                              <li class="nav-item"><a href="#!" class="nav-link">Custom Mugs</a></li>
                                              <!-- nav item -->
                                              <li class="nav-item"><a href="#!" class="nav-link">Eggs</a></li>
                                              <!-- nav item -->
                                              <li class="nav-item"><a href="#!" class="nav-link">Bread</a></li>
                                              <!-- nav item -->
                                              <li class="nav-item"><a href="#!" class="nav-link">Fans & Bridal Accessories</a></li>
                                              <!-- nav item -->
                                              <li class="nav-item"><a href="#!" class="nav-link">Bridal Details & More</a></li>
                                              <!-- nav item -->
                                              <li class="nav-item"><a href="#!" class="nav-link">Curated Gift Sets</a></li>
                                              <!-- nav item -->
                                              <li class="nav-item"><a href="#!" class="nav-link">Paneer & Tofu</a></li>
                                              <!-- nav item -->
                                              <li class="nav-item"><a href="#!" class="nav-link">Cream & Whitener</a></li>
                                              <!-- nav item -->
                                              <li class="nav-item"><a href="#!" class="nav-link">Curated Gifts</a></li>
                                              <!-- nav item -->
                                              <li class="nav-item"><a href="#!" class="nav-link">Vegan Drinks</a></li>
                                            </ul>



                                          </div>
                                        </div>

                                      </li>
                                      <!-- nav item -->
                                      <li class="nav-item border-bottom w-100 " ><a href="#"
                                          class="nav-link collapsed" data-bs-toggle="collapse"
                                          data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
                                          Keychains &
                                          Small Gifts <i class="feather-icon icon-chevron-right"></i>
                                        </a>

                                        <!-- collapse -->
                                        <div id="flush-collapseTwo" class="accordion-collapse collapse"
                                          data-bs-parent="#categoryCollapseMenu">
                                          <div>



                                            <ul class="nav flex-column ms-3">
                                              <!-- nav item -->
                                              <li class="nav-item"><a href="#!" class="nav-link">Chips & Crisps</a></li>
                                              <!-- nav item -->
                                              <li class="nav-item"><a href="#!" class="nav-link">Nachos</a></li>
                                              <!-- nav item -->
                                              <li class="nav-item"><a href="#!" class="nav-link">Small Keepsakes</a></li>
                                              <!-- nav item -->
                                              <li class="nav-item"><a href="#!" class="nav-link">Bhujia & Mixtures</a></li>
                                              <!-- nav item -->
                                              <li class="nav-item"><a href="#!" class="nav-link">Personalized Keychains</a></li>
                                              <!-- nav item -->
                                              <li class="nav-item"><a href="#!" class="nav-link">Curated Gift Sets</a></li>
                                              <!-- nav item -->
                                              <li class="nav-item"><a href="#!" class="nav-link">Cakes & Rolls</a></li>
                                              <!-- nav item -->
                                              <li class="nav-item"><a href="#!" class="nav-link">Energy Bars</a></li>
                                              <!-- nav item -->
                                              <li class="nav-item"><a href="#!" class="nav-link">Papad & Fryums</a></li>
                                              <!-- nav item -->
                                              <li class="nav-item"><a href="#!" class="nav-link">Rusks & Wafers</a></li>
                                            </ul>


                                          </div>
                                        </div>

                                      </li>
                                      <li class="nav-item border-bottom w-100 " > <a
                                          href="#" class="nav-link collapsed" data-bs-toggle="collapse"
                                          data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">Bridal Keepsakes <i class="feather-icon icon-chevron-right"></i></a>

                                        <!-- collapse -->
                                        <div id="flush-collapseThree" class="accordion-collapse collapse"
                                          data-bs-parent="#categoryCollapseMenu">
                                          <div>

                                            <ul class="nav flex-column ms-3">
                                              <!-- nav item -->
                                              <li class="nav-item">
                                                <a class="nav-link active" aria-current="page" href="#!">Wedding Keepsakes</a>
                                              </li>
                                              <!-- nav item -->
                                              <li class="nav-item">
                                                <a class="nav-link" href="#!">Herbs & Seasonings</a>
                                              </li>
                                              <!-- nav item -->
                                              <li class="nav-item">
                                                <a class="nav-link" href="#!">Bridal Gifts</a>
                                              </li>
                                              <!-- nav item -->
                                              <li class="nav-item">
                                                <a class="nav-link" href="#!">Handcrafted Bridal Keepsakes</a>
                                              </li>
                                              <!-- nav item -->
                                              <li class="nav-item">
                                                <a class="nav-link" href="#!">Cuts & Sprouts</a>
                                              </li>
                                              <!-- nav item -->
                                              <li class="nav-item">
                                                <a class="nav-link" href="#!">Exotic Keepsakes & Veggies</a>
                                              </li>
                                              <!-- nav item -->
                                              <li class="nav-item">
                                                <a class="nav-link" href="#!">Flower Bouquets, Bunches</a>
                                              </li>
                                            </ul>
                                          </div>
                                        </div>
                                      </li>
                                      <li class="nav-item border-bottom w-100 "> <a
                                          href="#" class="nav-link collapsed"  data-bs-toggle="collapse"
                                          data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour">Cold Drinks & Juices <i class="feather-icon icon-chevron-right"></i></a>

                                        <!-- collapse -->
                                        <div id="flush-collapseFour" class="accordion-collapse collapse"
                                          data-bs-parent="#categoryCollapseMenu">
                                          <div>
                                            <ul class="nav flex-column ms-3">
                                              <!-- nav item -->
                                              <li class="nav-item"><a href="#!" class="nav-link">Soft Drinks</a></li>
                                              <!-- nav item -->
                                              <li class="nav-item"><a href="#!" class="nav-link">Colorful Keepsakes</a></li>
                                              <!-- nav item -->
                                              <li class="nav-item"><a href="#!" class="nav-link">Coldpress</a></li>
                                              <!-- nav item -->
                                              <li class="nav-item"><a href="#!" class="nav-link">Energy Drinks</a></li>
                                              <!-- nav item -->
                                              <li class="nav-item"><a href="#!" class="nav-link">Water & Ice Cubes</a></li>
                                              <!-- nav item -->
                                              <li class="nav-item"><a href="#!" class="nav-link">Soda & Mixers</a></li>
                                              <!-- nav item -->
                                              <li class="nav-item"><a href="#!" class="nav-link">Concentrates & Syrups</a></li>
                                              <!-- nav item -->
                                              <li class="nav-item"><a href="#!" class="nav-link">Detox & Energy Drinks</a></li>
                                              <!-- nav item -->
                                              <li class="nav-item"><a href="#!" class="nav-link">Colorful Keepsake Collection</a></li>
                                            </ul>
                                          </div>
                                        </div>
                                      </li>



                                      <li class="nav-item border-bottom w-100 " > <a
                                          href="#" class="nav-link collapsed" data-bs-toggle="collapse"
                                          data-bs-target="#flush-collapseFive" aria-expanded="false" aria-controls="flush-collapseFive">Breakfast & LED & Acrylic Art <i class="feather-icon icon-chevron-right"></i></a>

                                        <!-- collapse -->
                                        <div id="flush-collapseFive" class="accordion-collapse collapse"
                                          data-bs-parent="#categoryCollapseMenu">
                                          <div>

                                            <ul class="nav flex-column ms-3">
                                              <!-- nav item -->
                                              <li class="nav-item">
                                                <a class="nav-link active" aria-current="page" href="#!">Batter</a>
                                              </li>
                                              <!-- nav item -->
                                              <li class="nav-item">
                                                <a class="nav-link" href="#!">Morning Gift Sets</a>
                                              </li>
                                              <!-- nav item -->
                                              <li class="nav-item">
                                                <a class="nav-link" href="#!">Noodles, Pasta & Soup</a>
                                              </li>
                                              <!-- nav item -->
                                              <li class="nav-item">
                                                <a class="nav-link" href="#!">Custom Keychainss</a>
                                              </li>
                                              <!-- nav item -->
                                              <li class="nav-item">
                                                <a class="nav-link" href="#!">Frozen Veg</a>
                                              </li>
                                              <!-- nav item -->
                                              <li class="nav-item">
                                                <a class="nav-link" href="#!">Vermicelli</a>
                                              </li>
                                              <!-- nav item -->
                                              <li class="nav-item">
                                                <a class="nav-link" href="#!">Instant Mixes</a>
                                              </li>
                                            </ul>
                                          </div>
                                        </div>
                                      </li>
                                      <li class="nav-item border-bottom w-100 " > <a href="#"
                                          class="nav-link collapsed" data-bs-toggle="collapse"
                                          data-bs-target="#flush-collapseSix" aria-expanded="false" aria-controls="flush-collapseSix">Bridal Accessories & Hand Fans <i class="feather-icon icon-chevron-right"></i></a>

                                        <!-- collapse -->
                                        <div id="flush-collapseSix" class="accordion-collapse collapse"
                                          data-bs-parent="#categoryCollapseMenu">
                                          <div>

                                            <ul class="nav flex-column ms-3">
                                              <!-- nav item -->
                                              <li class="nav-item">
                                                <a class="nav-link active" aria-current="page" href="#!">Cookies</a>
                                              </li>
                                              <!-- nav item -->
                                              <li class="nav-item">
                                                <a class="nav-link" href="#!">Glucose & Marie</a>
                                              </li>
                                              <!-- nav item -->
                                              <li class="nav-item">
                                                <a class="nav-link" href="#!">Sweet & Salty</a>
                                              </li>
                                              <!-- nav item -->
                                              <li class="nav-item">
                                                <a class="nav-link" href="#!">Healthy & Digestive</a>
                                              </li>
                                              <!-- nav item -->
                                              <li class="nav-item">
                                                <a class="nav-link" href="#!">Hand Fans</a>
                                              </li>
                                              <!-- nav item -->
                                              <li class="nav-item">
                                                <a class="nav-link" href="#!">Rusks & Wafers</a>
                                              </li>
                                              <!-- nav item -->
                                              <li class="nav-item">
                                                <a class="nav-link" href="#!">Cakes & Rolls</a>
                                              </li>
                                              <!-- nav item -->
                                              <li class="nav-item">
                                                <a class="nav-link" href="#!">
                                                  Fans & Bridal Accessories</a>
                                              </li>
                                            </ul>

                                          </div>
                                        </div>
                                      </li>
                                      <li class="nav-item border-bottom w-100 " > <a
                                          href="#" class="nav-link collapsed" data-bs-toggle="collapse"
                                          data-bs-target="#flush-collapseSeven" aria-expanded="false" aria-controls="flush-collapseSeven">Wedding Gifts <i class="feather-icon icon-chevron-right"></i></a>

                                        <!-- collapse -->
                                        <div id="flush-collapseSeven" class="accordion-collapse collapse"
                                          data-bs-parent="#categoryCollapseMenu">
                                          <div>

                                            <ul class="nav flex-column ms-3">
                                              <!-- nav item -->
                                              <li class="nav-item">
                                                <a class="nav-link active" aria-current="page" href="#!">Chicken</a>
                                              </li>
                                              <!-- nav item -->
                                              <li class="nav-item">
                                                <a class="nav-link" href="#!">Sausage, Salami & Ham</a>
                                              </li>
                                              <!-- nav item -->
                                              <li class="nav-item">
                                                <a class="nav-link" href="#!">Special Occasion Gifts</a>
                                              </li>
                                              <!-- nav item -->
                                              <li class="nav-item">
                                                <a class="nav-link" href="#!">Eggs</a>
                                              </li>
                                              <!-- nav item -->
                                              <li class="nav-item">
                                                <a class="nav-link" href="#!">Custom Keychains</a>
                                              </li>

                                            </ul>
                                          </div>
                                        </div>
                                      </li>

                                    </ul>
                                  </div>

                                  <div class="mb-8">

                                    <h5 class="mb-3">Collections</h5>
                                    <div class="my-4">
                                      <!-- input -->
                                      <input type="search" class="form-control" placeholder="Search by collection">
                                    </div>
                                    <!-- form check -->
                                    <div class="form-check mb-2">
                                      <!-- input -->
                                      <input class="form-check-input" type="checkbox" value="" id="eGrocery" checked>
                                      <label class="form-check-label" for="eGrocery">
                                        E-Art & Gifts
                                      </label>
                                    </div>
                                    <!-- form check -->
                                    <div class="form-check mb-2">
                                      <!-- input -->
                                      <input class="form-check-input" type="checkbox" value="" id="DealShare">
                                      <label class="form-check-label" for="DealShare">
                                        DealShare
                                      </label>
                                    </div>
                                    <!-- form check -->
                                    <div class="form-check mb-2">
                                      <!-- input -->
                                      <input class="form-check-input" type="checkbox" value="" id="Dmart">
                                      <label class="form-check-label" for="Dmart">
                                        DMart
                                      </label>
                                    </div>
                                    <!-- form check -->
                                    <div class="form-check mb-2">
                                      <!-- input -->
                                      <input class="form-check-input" type="checkbox" value="" id="Blinkit">
                                      <label class="form-check-label" for="Blinkit">
                                        Blinkit
                                      </label>
                                    </div>
                                    <!-- form check -->
                                    <div class="form-check mb-2">
                                      <!-- input -->
                                      <input class="form-check-input" type="checkbox" value="" id="BigBasket">
                                      <label class="form-check-label" for="BigBasket">
                                        BigBasket
                                      </label>
                                    </div>
                                    <!-- form check -->
                                    <div class="form-check mb-2">
                                      <!-- input -->
                                      <input class="form-check-input" type="checkbox" value="" id="StoreFront">
                                      <label class="form-check-label" for="StoreFront">
                                        StoreFront
                                      </label>
                                    </div>
                                    <!-- form check -->
                                    <div class="form-check mb-2">
                                      <!-- input -->
                                      <input class="form-check-input" type="checkbox" value="" id="Spencers">
                                      <label class="form-check-label" for="Spencers">
                                        Spencers
                                      </label>
                                    </div>
                                    <!-- form check -->
                                    <div class="form-check mb-2">
                                      <!-- input -->
                                      <input class="form-check-input" type="checkbox" value="" id="onlineGrocery">
                                      <label class="form-check-label" for="onlineGrocery">
                                        Online Art & Gifts
                                      </label>
                                    </div>

                                  </div>
                                  <div class="mb-8">
                                    <!-- price -->
                                    <h5 class="mb-3">Price</h5>
                                    <div>
                                      <!-- range -->
                                      <div id="priceRange" class="mb-3"></div>
                                      <small class="text-muted">Price:</small> <span id="priceRange-value" class="small"></span>

                                    </div>



                                  </div>
                                  <!-- rating -->
                                  <div class="mb-8">

                                    <h5 class="mb-3">Rating</h5>
                                    <div>
                                      <!-- form check -->
                                      <div class="form-check mb-2">
                                        <!-- input -->
                                        <input class="form-check-input" type="checkbox" value="" id="ratingFive">
                                        <label class="form-check-label" for="ratingFive">
                                          <i class="bi bi-star-fill text-warning"></i>
                                          <i class="bi bi-star-fill text-warning "></i>
                                          <i class="bi bi-star-fill text-warning "></i>
                                          <i class="bi bi-star-fill text-warning "></i>
                                          <i class="bi bi-star-fill text-warning "></i>
                                        </label>
                                      </div>
                                      <!-- form check -->
                                      <div class="form-check mb-2">
                                        <!-- input -->
                                        <input class="form-check-input" type="checkbox" value="" id="ratingFour" checked>
                                        <label class="form-check-label" for="ratingFour">
                                          <i class="bi bi-star-fill text-warning"></i>
                                          <i class="bi bi-star-fill text-warning "></i>
                                          <i class="bi bi-star-fill text-warning "></i>
                                          <i class="bi bi-star-fill text-warning "></i>
                                          <i class="bi bi-star text-warning"></i>
                                        </label>
                                      </div>
                                      <!-- form check -->
                                      <div class="form-check mb-2">
                                        <!-- input -->
                                        <input class="form-check-input" type="checkbox" value="" id="ratingThree">
                                        <label class="form-check-label" for="ratingThree">
                                          <i class="bi bi-star-fill text-warning"></i>
                                          <i class="bi bi-star-fill text-warning "></i>
                                          <i class="bi bi-star-fill text-warning "></i>
                                          <i class="bi bi-star text-warning"></i>
                                          <i class="bi bi-star text-warning"></i>
                                        </label>
                                      </div>
                                      <!-- form check -->
                                      <div class="form-check mb-2">
                                        <!-- input -->
                                        <input class="form-check-input" type="checkbox" value="" id="ratingTwo">
                                        <label class="form-check-label" for="ratingTwo">
                                          <i class="bi bi-star-fill text-warning"></i>
                                          <i class="bi bi-star-fill text-warning"></i>
                                          <i class="bi bi-star text-warning"></i>
                                          <i class="bi bi-star text-warning"></i>
                                          <i class="bi bi-star text-warning"></i>
                                        </label>
                                      </div>
                                      <!-- form check -->
                                      <div class="form-check mb-2">
                                        <!-- input -->
                                        <input class="form-check-input" type="checkbox" value="" id="ratingOne">
                                        <label class="form-check-label" for="ratingOne">
                                          <i class="bi bi-star-fill text-warning"></i>
                                          <i class="bi bi-star text-warning"></i>
                                          <i class="bi bi-star text-warning"></i>
                                          <i class="bi bi-star text-warning"></i>
                                          <i class="bi bi-star text-warning"></i>
                                        </label>
                                      </div>
                                    </div>


                                  </div>
                                  <div class="mb-8 position-relative">
                                    <!-- Banner Design -->
                                    <!-- Banner Content -->
                                    <div class="position-absolute p-5 py-8">
                                      <h3 class="mb-0">Bridal Gifts </h3>
                                      <p>Crafted with personal details</p>
                                      <a href="#" class="btn btn-dark">View Gallery<i class="feather-icon icon-arrow-right ms-1"></i></a>
                                    </div>
                                    <!-- Banner Content -->
                                    <!-- Banner Image -->
                                    <!-- img --><img src="../../assets/images/rm-artist/artwork-40.jpg" alt=""
                                      class="img-fluid rounded ">
                                    <!-- Banner Image -->
                                  </div>

                            </div>
                          </div>