<!doctype html>
<html lang="en">      

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Syndron – Bootstrap 5 eCommerce Template</title>
  <!--font-->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
    rel="stylesheet">

  <!--Plugins-->
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="assets/plugins/swiper/css/swiper-bundle.min.css">

  <!--Bootstrap files-->
  <link href="assets/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="assets/css/bootstrap-icons.min.css">
  <!--main style sheet-->
  <link href="assets/sass/style.css" rel="stylesheet">

</head>

<body>

  <!--start header-->
  <header class="top-header py-2">
    <div class="top-strip d-flex align-items-center gap-4 container px-3">
      <div class="strip-menu-left d-none d-lg-flex">
        <ul class="nav align-items-center gap-2">
          <li class="nav-item">
            <a class="nav-link py-1" href="javascript:;">Shipping</a>
          </li>
          <li class="nav-item">
            <a class="nav-link py-1" href="javascript:;">FAQ</a>
          </li>
          <li class="nav-item">
            <a class="nav-link py-1" href="javascript:;">Returns Policy</a>
          </li>
          <li class="nav-item">
            <a class="nav-link py-1" href="javascript:;">Track Order</a>
          </li>
        </ul>
      </div>
      <div class="strip-social-links ms-lg-auto flex-lg-grow-0 flex-grow-1">
        <ul class="nav align-items-center gap-2">
          <li class="nav-item">
            <a class="nav-link" href="javascript:;"><i class="bi bi-facebook"></i></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:;"><i class="bi bi-twitter-x"></i></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:;"><i class="bi bi-linkedin"></i></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:;"><i class="bi bi-pinterest"></i></a>
          </li>
        </ul>
      </div>
      <div class="dropdown language">
        <a class="btn btn-sm btn-language btn-outline-light border-0 d-flex align-items-center gap-2 px-2 dropdown-toggle dropdown-toggle-nocaret"
          href="javascript:;" data-bs-toggle="dropdown">
          <span>English</span><span><i class="bi bi-chevron-down"></i></span>
        </a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="javascript:;">French</a></li>
          <li><a class="dropdown-item" href="javascript:;">Spanish</a></li>
          <li><a class="dropdown-item" href="javascript:;">hindi</a></li>
        </ul>
      </div>
      <div class="dropdown language">
        <a class="btn btn-sm btn-language btn-outline-light border-0 d-flex align-items-center gap-2 px-2 dropdown-toggle dropdown-toggle-nocaret"
          href="javascript:;" data-bs-toggle="dropdown">
          <span>USD</span><span><i class="bi bi-chevron-down"></i></span>
        </a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="javascript:;">EUR</a></li>
          <li><a class="dropdown-item" href="javascript:;">INR</a></li>
          <li><a class="dropdown-item" href="javascript:;">KGM</a></li>
          <li><a class="dropdown-item" href="javascript:;">DSR</a></li>
        </ul>
      </div>
    </div>
  </header>
  <!--end header-->


  <!--start nav-->
  <nav class="navbar navbar-expand-xl border-bottom py-3">
    <div class="container px-3">
      <a class="navbar-brand d-none d-xl-flex" href="index.html">
        <img src="assets/images/gallery/logo.png" class="logo-img" alt="">
      </a>
      <button type="button" class="d-xl-none btn-menu-close" data-bs-toggle="offcanvas"
        data-bs-target="#offcanvasNavbar">
        <i class="bi bi-list"></i>
      </button>
      <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNavbar">
        <div class="offcanvas-header">
          <img src="assets/images/gallery/logo.png" class="logo-img2" alt="">
          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="nav-search p-3 pt-0 border-bottom d-flex d-xl-none">
          <form class="position-relative w-100">
            <input type="text" class="form-control nav-search-control ps-5 border-0 py-2" placeholder="what are you looking for ?">
            <span class="position-absolute top-50 start-0 translate-middle-y"><i class="bi bi-search fs-6 ms-3"></i></span>
         </form>
        </div>
        <div class="offcanvas-body p-0">
          <ul class="navbar-nav mx-auto gap-0 gap-xl-2">
            <li class="nav-item">
              <a class="nav-link" href="index.html">
                <span class="parent-menu-name">Home</span>
              </a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle dropdown-toggle-nocaret" href="javascript:;" data-bs-toggle="dropdown">
                <span class="parent-menu-name">Shop</span>
                <span class="parent-menu-icon ms-2"><i class="bi bi-chevron-down"></i></span>
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="shop-grid-left-sidebar.html">Shop Grid Leftside</a></li>
                <li><a class="dropdown-item" href="shop-grid-right-sidebar.html">Shop Grid Rightside</a></li>
                <li><a class="dropdown-item" href="shop-list-left-sidebar.html">Shop List Leftside</a></li>
                <li><a class="dropdown-item" href="shop-list-right-sidebar.html">Shop List Rightside</a></li>
                <li>
                  <hr class="dropdown-divider">
                </li>
                <li><a class="dropdown-item" href="shop-grid-offcanvas-filter.html">Shop Grid Offcanvas</a></li>
                <li><a class="dropdown-item" href="shop-list-ofcanvas-filter.html">Shop List Offcanvas</a></li>
                <li>
                  <hr class="dropdown-divider">
                </li>
                <li class="nav-item dropdown">
                  <a class="dropdown-item dropdown-toggle dropdown-toggle-nocaret d-flex align-items-center justify-content-between" href="javascript:;"
                    data-bs-toggle="dropdown">
                     <span>Shop Categories</span>
                     <span><i class="bi bi-chevron-right"></i></span>
                    </a>
                  <ul class="dropdown-menu submenu">
                    <li><a class="dropdown-item" href="shop-circular-catgories.html">Circular View</a></li>
                    <li><a class="dropdown-item" href="shop-grid-catgories.html">Grid View</a></li>
                  </ul>
                </li>
                <li><a class="dropdown-item" href="product-detail.html">Product Details</a></li>
                <li><a class="dropdown-item" href="product-detail-grid.html">Product Detail Grid</a></li>
                <li><a class="dropdown-item" href="shopping-cart.html">Shopping Cart</a></li>
                <li><a class="dropdown-item" href="checkout.html">Checkout</a></li>
                <li><a class="dropdown-item" href="wishlist.html">Wishlist</a></li>
                <li><a class="dropdown-item" href="wishlist-2.html">Wishlist 2</a></li>
              </ul>
            </li>
            <li class="nav-item dropdown position-static">
              <a class="nav-link dropdown-toggle dropdown-toggle-nocaret" href="javascript:;" data-bs-toggle="dropdown">
                <span class="parent-menu-name">Fashion</span>
                <span class="parent-menu-icon ms-2"><i class="bi bi-chevron-down"></i></span>
              </a>
              <div class="dropdown-menu mega-menu p-lg-3 start-0 end-0 rounded-0">
                <div class="container px-3">
                 <div class="row row-cols-1 row-cols-lg-5 g-3">
                  <div class="col">
                    <div class="list-group list-group-flush">
                      <h5 class="list-group-item mega-menu-title px-0 mb-0">Apparel</h5>
                      <a href="javascript:;" class="list-group-item mega-menu-link px-0">Casual Wear</a>
                      <a href="javascript:;" class="list-group-item mega-menu-link px-0">Formal Wear</a>
                      <a href="javascript:;" class="list-group-item mega-menu-link px-0">Streetwear</a>
                      <a href="javascript:;" class="list-group-item mega-menu-link px-0">Athleisure</a>
                      <a href="javascript:;" class="list-group-item mega-menu-link px-0">Loungewear</a>
                      <a href="javascript:;" class="list-group-item mega-menu-link px-0">Outerwear</a>
                      <a href="javascript:;" class="list-group-item mega-menu-link px-0">Ethnic Wear</a>
                      <a href="javascript:;" class="list-group-item mega-menu-link px-0">Pajamas</a>
                      <a href="javascript:;" class="list-group-item mega-menu-link px-0">Oversized</a>
                    </div>
                  </div>
                  <div class="col">
                    <div class="list-group list-group-flush">
                      <h5 class="list-group-item mega-menu-title mb-0 px-0">Footwear</h5>
                      <a href="javascript:;" class="list-group-item mega-menu-link px-0">Sneakers</a>
                      <a href="javascript:;" class="list-group-item mega-menu-link px-0">Boots</a>
                      <a href="javascript:;" class="list-group-item mega-menu-link px-0">Formal Shoes</a>
                      <a href="javascript:;" class="list-group-item mega-menu-link px-0">Sandals</a>
                      <a href="javascript:;" class="list-group-item mega-menu-link px-0">Sports Shoes</a>
                      <a href="javascript:;" class="list-group-item mega-menu-link px-0">Dress shoes</a>
                      <a href="javascript:;" class="list-group-item mega-menu-link px-0">Luxury Sneakers</a>
                      <a href="javascript:;" class="list-group-item mega-menu-link px-0">Chelsea Boots</a>
                      <a href="javascript:;" class="list-group-item mega-menu-link px-0">Training Shoes</a>
                    </div>
                  </div>
                  <div class="col">
                    <div class="list-group list-group-flush">
                      <h5 class="list-group-item mega-menu-title mb-0 px-0">Accessories</h5>
                      <a href="javascript:;" class="list-group-item mega-menu-link px-0">Backpacks</a>
                      <a href="javascript:;" class="list-group-item mega-menu-link px-0">Watches</a>
                      <a href="javascript:;" class="list-group-item mega-menu-link px-0">Sunglasses</a>
                      <a href="javascript:;" class="list-group-item mega-menu-link px-0">Jewelry</a>
                      <a href="javascript:;" class="list-group-item mega-menu-link px-0">Leather Belts</a>
                      <a href="javascript:;" class="list-group-item mega-menu-link px-0">Smartwatches</a>
                      <a href="javascript:;" class="list-group-item mega-menu-link px-0">Casual Watches</a>
                      <a href="javascript:;" class="list-group-item mega-menu-link px-0">Baseball Caps</a>
                      <a href="javascript:;" class="list-group-item mega-menu-link px-0">Designer Belts</a>
                    </div>
                  </div>
                  <div class="col">
                    <div class="list-group">
                      <div class="card border">
                        <div class="card-body p-2">
                          <div class="position-relative">
                            <img src="assets/images/gallery/mega-menu-img-1.jpg" class="img-fluid rounded" alt="">
                            <div class="position-absolute bottom-0 end-0 start-0 m-3">
                              <button type="button" class="btn border bg-white px-4 rounded-3 w-100">Women</button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col">
                    <div class="list-group">
                      <div class="card border">
                        <div class="card-body p-2">
                          <div class="position-relative">
                            <img src="assets/images/gallery/mega-menu-img-2.jpg" class="img-fluid rounded" alt="">
                            <div class="position-absolute bottom-0 end-0 start-0 m-3">
                              <button type="button" class="btn border bg-white px-4 rounded-3 w-100">Men</button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div><!--end row-->
               </div>
              </div>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle dropdown-toggle-nocaret" href="javascript:;" data-bs-toggle="dropdown">
                <span class="parent-menu-name">Blog</span>
                <span class="parent-menu-icon ms-2"><i class="bi bi-chevron-down"></i></span>
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="blog.html">Blog Post</a></li>
                <li><a class="dropdown-item" href="blog-grid.html">Blog Grid</a></li>
                <li>
                  <hr class="dropdown-divider">
                </li>
                <li><a class="dropdown-item" href="blog-details.html">Blog Details</a></li>
              </ul>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle dropdown-toggle-nocaret" href="javascript:;" data-bs-toggle="dropdown">
                <span class="parent-menu-name">Pages</span>
                <span class="parent-menu-icon ms-2"><i class="bi bi-chevron-down"></i></span>
              </a>
              <ul class="dropdown-menu">
                <li class="nav-item dropdown">
                  <a class="dropdown-item dropdown-toggle dropdown-toggle-nocaret d-flex align-items-center justify-content-between" href="javascript:;"
                    data-bs-toggle="dropdown">
                     <span>Account</span>
                     <span><i class="bi bi-chevron-right"></i></span>
                    </a>
                  <ul class="dropdown-menu submenu">
                    <li><a class="dropdown-item" href="account-orders.html">Orders</a></li>
                    <li><a class="dropdown-item" href="account-my-profile.html">Profile</a></li>
                    <li><a class="dropdown-item" href="account-addresses.html">Addresses</a></li>
                    <li><a class="dropdown-item" href="account-payment-methods.html">Payment Methods</a></li>
                    <li><a class="dropdown-item" href="account-wishlist.html">Wishlist</a></li>
                  </ul>
                </li>
                <li class="nav-item dropdown">
                  <a class="dropdown-item dropdown-toggle dropdown-toggle-nocaret d-flex align-items-center justify-content-between" href="javascript:;"
                    data-bs-toggle="dropdown">
                     <span>Authentication</span>
                     <span><i class="bi bi-chevron-right"></i></span>
                    </a>
                  <ul class="dropdown-menu submenu">
                    <li><a class="dropdown-item" href="auth-login.html">Login</a></li>
                    <li><a class="dropdown-item" href="auth-register.html">Register</a></li>
                    <li><a class="dropdown-item" href="auth-forgot-password.html">Forgot Password</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="about-us.html">
                <span class="parent-menu-name">About</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="contact-us.html">
                <span class="parent-menu-name">Contact</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="right-links nav gap-2 d-flex">
        <a class="nav-link" href="javascript:;" data-bs-toggle="modal" data-bs-target="#searchModal"><i class="bi bi-search"></i></a>
        <a class="nav-link" href="account-my-profile.html"><i class="bi bi-person-circle"></i></a>
        <a class="nav-link position-relative" href="wishlist.html"><i class="bi bi-heart"></i><span class="notify-badge">5</span></a>
        <a class="nav-link position-relative" data-bs-toggle="offcanvas" href="#offcanvasCart"><i class="bi bi-basket2"></i><span class="notify-badge">8</span></a>
      </div>
    </div>
  </nav>
  <!--end nav-->

  <!--start slider-->
  <section class="main-slider-wrapper">
    <div class="swiper main-slider position-relative">
      <div class="swiper-wrapper">
        <div class="swiper-slide position-relative">
          <div class="slider-content position-absolute top-50 start-0 end-0 translate-middle-y">
            <div class="container px-3">
              <p class="sub-title mb-lg-3">Elegance Redefined</p>
              <h2 class="large-title">Stay Confident! <br>Shop the latest trends now</h2>
              <div class="slide-btn mt-lg-5">
                <a href="javascript:;" class="btn btn-dark px-md-5 py-md-3 rounded-5">Explore Collection</a>
              </div>
            </div>
          </div>
          <img src="assets/images/gallery/slider/slide-5.png" class="img-fluid rounded-0" alt="">
        </div>
        <div class="swiper-slide">
          <div class="slider-content position-absolute top-50 start-0 end-0 translate-middle-y">
            <div class="container py-4 px-3">
              <p class="sub-title mb-lg-3">The Chic Closet</p>
              <h2 class="large-title">Casual Fashion <br> Dress up, feel amazing</h2>
              <div class="slide-btn mt-lg-5">
                <button class="btn btn-dark px-md-5 py-md-3 rounded-5">Explore Collection</button>
              </div>
            </div>
          </div>
          <img src="assets/images/gallery/slider/slide-2.png" class="img-fluid rounded-0" alt="">
        </div>
        <div class="swiper-slide">
          <div class="slider-content position-absolute top-50 start-0 end-0 translate-middle-y">
            <div class="container py-4 px-3">
              <p class="sub-title mb-lg-3">Gypsy Soul Styles</p>
              <h2 class="large-title">Step Up Your Fashion <br> Discover statement pieces today</h2>
              <div class="slide-btn mt-lg-5">
                <button class="btn btn-dark px-md-5 py-md-3 rounded-5">Explore Collection</button>
              </div>
            </div>
          </div>
          <img src="assets/images/gallery/slider/slide-3.png" class="img-fluid rounded-0" alt="">
        </div>
        <div class="swiper-slide">
          <div class="slider-content position-absolute top-50 start-0 end-0 translate-middle-y">
            <div class="container py-4 px-3">
              <p class="sub-title mb-lg-3">Street Style Diaries</p>
              <h2 class="large-title">Vintage Glam <br> Dress like a classic beauty</h2>
              <div class="slide-btn mt-lg-5">
                <button class="btn btn-dark px-md-5 py-md-3 rounded-5">Explore Collection</button>
              </div>
            </div>
          </div>
          <img src="assets/images/gallery/slider/slide-4.png" class="img-fluid rounded-0" alt="">
        </div>
      </div>
      <div class="swiper-nav d-flex align-items-center justify-content-between gap-3 position-absolute end-0 start-0 mx-3 d-none d-lg-flex">
        <div class="slide-icon main-slider-icon-left"><i class="bi bi-arrow-left"></i></div>
        <div class="slide-icon main-slider-icon-right"><i class="bi bi-arrow-right"></i></div>
      </div>
    </div>
  </section>
  <!--end slider-->


  <!--start main content-->
  <main class="main-content">
    <!--start cotegories-->
    <section class="categories-slider-wrapper py-5">
      <div class="container position-relative px-3">
        <div class="d-flex align-items-center justify-content-between mb-5">
          <h2 class="section-title">Top Categories</h2>
          <a href="javascript:;" class="btn btn-outline-dark px-4">All Categories</a>
        </div>
        <div class="categories-catalog">
          <div class="swiper categories-slider">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <a href="shop-grid-catgories.html">
                  <div class="d-flex flex-column align-items-center gap-3">
                    <img src="assets/images/gallery/categories/01.png" class="cat-img img-fluid rounded-circle" alt="">
                    <div class="text-center">
                      <h3 class="cat-title mb-0">Fashion</h3>
                      <p class="mb-0 cat-number">48 Products</p>
                    </div>
                  </div>
                </a>
              </div>
              <div class="swiper-slide">
                <a href="shop-circular-catgories.html">
                  <div class="d-flex flex-column align-items-center gap-3">
                    <img src="assets/images/gallery/categories/02.png" class="cat-img img-fluid rounded-circle" alt="">
                    <div class="text-center">
                      <h3 class="cat-title mb-0">Topwear</h3>
                      <p class="mb-0 cat-number">67 Products</p>
                    </div>
                  </div>
                </a>
              </div>
              <div class="swiper-slide">
                <a href="shop-grid-catgories.html">
                  <div class="d-flex flex-column align-items-center gap-3">
                    <img src="assets/images/gallery/categories/03.png" class="cat-img img-fluid rounded-circle" alt="">
                    <div class="text-center">
                      <h3 class="cat-title mb-0">Lingerie</h3>
                      <p class="mb-0 cat-number">48 Products</p>
                    </div>
                  </div>
                </a>
              </div>
              <div class="swiper-slide">
                <a href="shop-circular-catgories.html">
                  <div class="d-flex flex-column align-items-center gap-3">
                    <img src="assets/images/gallery/categories/04.png" class="cat-img img-fluid rounded-circle" alt="">
                    <div class="text-center">
                      <h3 class="cat-title mb-0">Dresses</h3>
                      <p class="mb-0 cat-number">48 Products</p>
                    </div>
                  </div>
                </a>
              </div>
              <div class="swiper-slide">
                <a href="shop-grid-catgories.html">
                  <div class="d-flex flex-column align-items-center gap-3">
                    <img src="assets/images/gallery/categories/05.png" class="cat-img img-fluid rounded-circle" alt="">
                    <div class="text-center">
                      <h3 class="cat-title mb-0">Shoes</h3>
                      <p class="mb-0 cat-number">94 Products</p>
                    </div>
                  </div>
                </a>
              </div>
              <div class="swiper-slide">
                <a href="shop-circular-catgories.html">
                  <div class="d-flex flex-column align-items-center gap-3">
                    <img src="assets/images/gallery/categories/06.png" class="cat-img img-fluid rounded-circle" alt="">
                    <div class="text-center">
                      <h3 class="cat-title mb-0">Jackets</h3>
                      <p class="mb-0 cat-number">37 Products</p>
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="category-swiper-nav d-flex align-items-center justify-content-center justify-content-lg-between gap-3 end-0 start-0 translate-middle-y">
          <div class="slide-icon categories-slider-icon-left"><i class="bi bi-arrow-left"></i></div>
          <div class="slide-icon categories-slider-icon-right"><i class="bi bi-arrow-right"></i></div>
        </div>
      </div>
    </section>
    <!--end cotegories-->

    <!--start tabular product-->
    <section class="tabular-product py-5">
      <div class="container px-3">
        <div class="table-responsive">
          <ul class="nav nav-pills mx-auto mb-4 p-2 rounded-5 border shadow-sm overflow-x-auto">
            <li class="nav-item">
              <button class="nav-link active rounded-5 px-5" data-bs-toggle="pill" data-bs-target="#new-arrivals"
                type="button">New Arrivals</button>
            </li>
            <li class="nav-item">
              <button class="nav-link rounded-5 px-5" data-bs-toggle="pill" data-bs-target="#best-seller"
                type="button">Best Seller</button>
            </li>
            <li class="nav-item">
              <button class="nav-link rounded-5 px-5" data-bs-toggle="pill" data-bs-target="#trending"
                type="button">Trending</button>
            </li>
            <li class="nav-item">
              <button class="nav-link rounded-5 px-5" data-bs-toggle="pill" data-bs-target="#Offers"
                type="button">Offers</button>
            </li>
          </ul>
        </div>
        <div class="tab-content">
          <div class="tab-pane fade show active" id="new-arrivals">
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-4">
              <div class="col">
                <div class="product-card border rounded-3 p-3">
                  <div class="d-flex flex-column gap-3">
                    <div class="position-relative">
                      <a href="product-detail.html">
                        <img src="assets/images/gallery/tabular-product/01.png" class="product-img img-fluid rounded-3"
                          alt="">
                      </a>
                      <div class="position-absolute top-0 end-0 m-3 product-actions">
                        <div class="d-flex flex-column gap-2">
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-heart"></i></a>
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-funnel"></i></a>
                          <a href="javascript:;" class="btn btn-action" data-bs-toggle="modal" data-bs-target="#QuickViewModal"><i class="bi bi-eye"></i></a>
                        </div>
                      </div>
                      <div class="position-absolute bottom-0 start-0 end-0 m-3 product-cart">
                        <a href="javascript:;" class="btn btn-dark rounded-5 w-100">Add to cart</a>
                      </div>
                    </div>
                    <div class="">
                      <h3 class="product-name mb-1" data-bs-toggle="tooltip" data-bs-placement="left"
                        data-bs-title="Wishlist">Grey Venish Pant</h3>
                      <p class="mb-0 product-price">$499</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="product-card border rounded-3 p-3">
                  <div class="d-flex flex-column gap-3">
                    <div class="position-relative">
                      <div class="discount-ribben position-absolute top-0 start-0 m-3">10%</div>
                      <a href="product-detail-grid.html">
                        <img src="assets/images/gallery/tabular-product/02.png" class="product-img img-fluid rounded-3"
                          alt="">
                      </a>
                      <div class="position-absolute top-0 end-0 m-3 product-actions">
                        <div class="d-flex flex-column gap-2">
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-heart"></i></a>
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-funnel"></i></a>
                          <a href="javascript:;" class="btn btn-action" data-bs-toggle="modal" data-bs-target="#QuickViewModal"><i class="bi bi-eye"></i></a>
                        </div>
                      </div>
                      <div class="position-absolute bottom-0 start-0 end-0 m-3 product-cart">
                        <a href="javascript:;" class="btn btn-dark rounded-5 w-100">Add to cart</a>
                      </div>
                    </div>
                    <div class="">
                      <h3 class="product-name mb-1">Grey Venish Pant</h3>
                      <p class="mb-0 product-price d-flex align-items-center gap-2"><span
                          class="prev-price text-decoration-line-through">$698</span>$499</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="product-card border rounded-3 p-3">
                  <div class="d-flex flex-column gap-3">
                    <div class="position-relative">
                      <a href="product-detail.html">
                        <img src="assets/images/gallery/tabular-product/03.png" class="product-img img-fluid rounded-3"
                          alt="">
                      </a>
                      <div class="position-absolute top-0 end-0 m-3 product-actions">
                        <div class="d-flex flex-column gap-2">
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-heart"></i></a>
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-funnel"></i></a>
                          <a href="javascript:;" class="btn btn-action" data-bs-toggle="modal" data-bs-target="#QuickViewModal"><i class="bi bi-eye"></i></a>
                        </div>
                      </div>
                      <div class="position-absolute bottom-0 start-0 end-0 m-3 product-cart">
                        <a href="javascript:;" class="btn btn-dark rounded-5 w-100">Add to cart</a>
                      </div>
                    </div>
                    <div class="">
                      <h3 class="product-name mb-1">Grey Venish Pant</h3>
                      <p class="mb-0 product-price">$348</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="product-card border rounded-3 p-3">
                  <div class="d-flex flex-column gap-3">
                    <div class="position-relative">
                      <div class="discount-ribben position-absolute top-0 start-0 m-3">25%</div>
                      <a href="product-detail-grid.html">
                        <img src="assets/images/gallery/tabular-product/04.png" class="product-img img-fluid rounded-3"
                          alt="">
                      </a>
                      <div class="position-absolute top-0 end-0 m-3 product-actions">
                        <div class="d-flex flex-column gap-2">
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-heart"></i></a>
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-funnel"></i></a>
                          <a href="javascript:;" class="btn btn-action" data-bs-toggle="modal" data-bs-target="#QuickViewModal"><i class="bi bi-eye"></i></a>
                        </div>
                      </div>
                      <div class="position-absolute bottom-0 start-0 end-0 m-3 product-cart">
                        <a href="javascript:;" class="btn btn-dark rounded-5 w-100">Add to cart</a>
                      </div>
                    </div>
                    <div class="">
                      <h3 class="product-name mb-1">Grey Venish Pant</h3>
                      <p class="mb-0 product-price d-flex align-items-center gap-2"><span
                          class="prev-price text-decoration-line-through">$647</span>$245</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="product-card border rounded-3 p-3">
                  <div class="d-flex flex-column gap-3">
                    <div class="position-relative">
                      <div class="discount-ribben position-absolute top-0 start-0 m-3">50%</div>
                      <a href="product-detail.html">
                        <img src="assets/images/gallery/tabular-product/05.png" class="product-img img-fluid rounded-3"
                          alt="">
                      </a>
                      <div class="position-absolute top-0 end-0 m-3 product-actions">
                        <div class="d-flex flex-column gap-2">
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-heart"></i></a>
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-funnel"></i></a>
                          <a href="javascript:;" class="btn btn-action" data-bs-toggle="modal" data-bs-target="#QuickViewModal"><i class="bi bi-eye"></i></a>
                        </div>
                      </div>
                      <div class="position-absolute bottom-0 start-0 end-0 m-3 product-cart">
                        <a href="javascript:;" class="btn btn-dark rounded-5 w-100">Add to cart</a>
                      </div>
                    </div>
                    <div class="">
                      <h3 class="product-name mb-1">Grey Venish Pant</h3>
                      <p class="mb-0 product-price d-flex align-items-center gap-2"><span
                          class="prev-price text-decoration-line-through">$647</span>$245</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="product-card border rounded-3 p-3">
                  <div class="d-flex flex-column gap-3">
                    <div class="position-relative">
                      <a href="product-detail-grid.html">
                        <img src="assets/images/gallery/tabular-product/08.png" class="product-img img-fluid rounded-3"
                          alt="">
                      </a>
                      <div class="position-absolute top-0 end-0 m-3 product-actions">
                        <div class="d-flex flex-column gap-2">
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-heart"></i></a>
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-funnel"></i></a>
                          <a href="javascript:;" class="btn btn-action" data-bs-toggle="modal" data-bs-target="#QuickViewModal"><i class="bi bi-eye"></i></a>
                        </div>
                      </div>
                      <div class="position-absolute bottom-0 start-0 end-0 m-3 product-cart">
                        <a href="javascript:;" class="btn btn-dark rounded-5 w-100">Add to cart</a>
                      </div>
                    </div>
                    <div class="">
                      <h3 class="product-name mb-1">Grey Venish Pant</h3>
                      <p class="mb-0 product-price d-flex align-items-center gap-2"><span
                          class="prev-price text-decoration-line-through">$948</span>$346</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="product-card border rounded-3 p-3">
                  <div class="d-flex flex-column gap-3">
                    <div class="position-relative">
                      <a href="product-detail.html">
                        <img src="assets/images/gallery/tabular-product/06.png" class="product-img img-fluid rounded-3"
                          alt="">
                      </a>
                      <div class="position-absolute top-0 end-0 m-3 product-actions">
                        <div class="d-flex flex-column gap-2">
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-heart"></i></a>
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-funnel"></i></a>
                          <a href="javascript:;" class="btn btn-action" data-bs-toggle="modal" data-bs-target="#QuickViewModal"><i class="bi bi-eye"></i></a>
                        </div>
                      </div>
                      <div class="position-absolute bottom-0 start-0 end-0 m-3 product-cart">
                        <a href="javascript:;" class="btn btn-dark rounded-5 w-100">Add to cart</a>
                      </div>
                    </div>
                    <div class="">
                      <h3 class="product-name mb-1">Grey Venish Pant</h3>
                      <p class="mb-0 product-price">$348</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="product-card border rounded-3 p-3">
                  <div class="d-flex flex-column gap-3">
                    <div class="position-relative">
                      <div class="discount-ribben position-absolute top-0 start-0 m-3">On Sale</div>
                      <a href="product-detail-grid.html">
                        <img src="assets/images/gallery/tabular-product/07.png" class="product-img img-fluid rounded-3"
                          alt="">
                      </a>
                      <div class="position-absolute top-0 end-0 m-3 product-actions">
                        <div class="d-flex flex-column gap-2">
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-heart"></i></a>
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-funnel"></i></a>
                          <a href="javascript:;" class="btn btn-action" data-bs-toggle="modal" data-bs-target="#QuickViewModal"><i class="bi bi-eye"></i></a>
                        </div>
                      </div>
                      <div class="position-absolute bottom-0 start-0 end-0 m-3 product-cart">
                        <a href="javascript:;" class="btn btn-dark rounded-5 w-100">Add to cart</a>
                      </div>
                    </div>
                    <div class="">
                      <h3 class="product-name mb-1">Grey Venish Pant</h3>
                      <p class="mb-0 product-price d-flex align-items-center gap-2"><span
                          class="prev-price text-decoration-line-through">$647</span>$245</p>
                    </div>
                  </div>
                </div>
              </div>
            </div><!--end row-->
          </div>
          <div class="tab-pane fade" id="best-seller">
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-4">
              <div class="col">
                <div class="product-card border rounded-3 p-3">
                  <div class="d-flex flex-column gap-3">
                    <div class="position-relative">
                      <a href="product-detail.html">
                        <img src="assets/images/gallery/tabular-product/05.png" class="product-img img-fluid rounded-3"
                          alt="">
                      </a>
                      <div class="position-absolute top-0 end-0 m-3 product-actions">
                        <div class="d-flex flex-column gap-2">
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-heart"></i></a>
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-funnel"></i></a>
                          <a href="javascript:;" class="btn btn-action" data-bs-toggle="modal" data-bs-target="#QuickViewModal"><i class="bi bi-eye"></i></a>
                        </div>
                      </div>
                      <div class="position-absolute bottom-0 start-0 end-0 m-3 product-cart">
                        <a href="javascript:;" class="btn btn-dark rounded-5 w-100">Add to cart</a>
                      </div>
                    </div>
                    <div class="">
                      <h3 class="product-name mb-1" data-bs-toggle="tooltip" data-bs-placement="left"
                        data-bs-title="Wishlist">Grey Venish Pant</h3>
                      <p class="mb-0 product-price">$499</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="product-card border rounded-3 p-3">
                  <div class="d-flex flex-column gap-3">
                    <div class="position-relative">
                      <div class="discount-ribben position-absolute top-0 start-0 m-3">10%</div>
                      <a href="product-detail-grid.html">
                        <img src="assets/images/gallery/tabular-product/04.png" class="product-img img-fluid rounded-3"
                          alt="">
                      </a>
                      <div class="position-absolute top-0 end-0 m-3 product-actions">
                        <div class="d-flex flex-column gap-2">
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-heart"></i></a>
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-funnel"></i></a>
                          <a href="javascript:;" class="btn btn-action" data-bs-toggle="modal" data-bs-target="#QuickViewModal"><i class="bi bi-eye"></i></a>
                        </div>
                      </div>
                      <div class="position-absolute bottom-0 start-0 end-0 m-3 product-cart">
                        <a href="javascript:;" class="btn btn-dark rounded-5 w-100">Add to cart</a>
                      </div>
                    </div>
                    <div class="">
                      <h3 class="product-name mb-1">Grey Venish Pant</h3>
                      <p class="mb-0 product-price d-flex align-items-center gap-2"><span
                          class="prev-price text-decoration-line-through">$698</span>$499</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="product-card border rounded-3 p-3">
                  <div class="d-flex flex-column gap-3">
                    <div class="position-relative">
                      <a href="product-detail.html">
                        <img src="assets/images/gallery/tabular-product/06.png" class="product-img img-fluid rounded-3"
                          alt="">
                      </a>
                      <div class="position-absolute top-0 end-0 m-3 product-actions">
                        <div class="d-flex flex-column gap-2">
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-heart"></i></a>
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-funnel"></i></a>
                          <a href="javascript:;" class="btn btn-action" data-bs-toggle="modal" data-bs-target="#QuickViewModal"><i class="bi bi-eye"></i></a>
                        </div>
                      </div>
                      <div class="position-absolute bottom-0 start-0 end-0 m-3 product-cart">
                        <a href="javascript:;" class="btn btn-dark rounded-5 w-100">Add to cart</a>
                      </div>
                    </div>
                    <div class="">
                      <h3 class="product-name mb-1">Grey Venish Pant</h3>
                      <p class="mb-0 product-price">$348</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="product-card border rounded-3 p-3">
                  <div class="d-flex flex-column gap-3">
                    <div class="position-relative">
                      <div class="discount-ribben position-absolute top-0 start-0 m-3">On Sale</div>
                      <a href="product-detail-grid.html">
                        <img src="assets/images/gallery/tabular-product/01.png" class="product-img img-fluid rounded-3"
                          alt="">
                      </a>
                      <div class="position-absolute top-0 end-0 m-3 product-actions">
                        <div class="d-flex flex-column gap-2">
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-heart"></i></a>
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-funnel"></i></a>
                          <a href="javascript:;" class="btn btn-action" data-bs-toggle="modal" data-bs-target="#QuickViewModal"><i class="bi bi-eye"></i></a>
                        </div>
                      </div>
                      <div class="position-absolute bottom-0 start-0 end-0 m-3 product-cart">
                        <a href="javascript:;" class="btn btn-dark rounded-5 w-100">Add to cart</a>
                      </div>
                    </div>
                    <div class="">
                      <h3 class="product-name mb-1">Grey Venish Pant</h3>
                      <p class="mb-0 product-price d-flex align-items-center gap-2"><span
                          class="prev-price text-decoration-line-through">$647</span>$245</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="product-card border rounded-3 p-3">
                  <div class="d-flex flex-column gap-3">
                    <div class="position-relative">
                      <div class="discount-ribben position-absolute top-0 start-0 m-3">50%</div>
                      <a href="product-detail.html">
                        <img src="assets/images/gallery/tabular-product/03.png" class="product-img img-fluid rounded-3"
                          alt="">
                      </a>
                      <div class="position-absolute top-0 end-0 m-3 product-actions">
                        <div class="d-flex flex-column gap-2">
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-heart"></i></a>
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-funnel"></i></a>
                          <a href="javascript:;" class="btn btn-action" data-bs-toggle="modal" data-bs-target="#QuickViewModal"><i class="bi bi-eye"></i></a>
                        </div>
                      </div>
                      <div class="position-absolute bottom-0 start-0 end-0 m-3 product-cart">
                        <a href="javascript:;" class="btn btn-dark rounded-5 w-100">Add to cart</a>
                      </div>
                    </div>
                    <div class="">
                      <h3 class="product-name mb-1">Grey Venish Pant</h3>
                      <p class="mb-0 product-price d-flex align-items-center gap-2"><span
                          class="prev-price text-decoration-line-through">$647</span>$245</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="product-card border rounded-3 p-3">
                  <div class="d-flex flex-column gap-3">
                    <div class="position-relative">
                      <a href="product-detail-grid.html">
                        <img src="assets/images/gallery/tabular-product/02.png" class="product-img img-fluid rounded-3"
                          alt="">
                      </a>
                      <div class="position-absolute top-0 end-0 m-3 product-actions">
                        <div class="d-flex flex-column gap-2">
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-heart"></i></a>
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-funnel"></i></a>
                          <a href="javascript:;" class="btn btn-action" data-bs-toggle="modal" data-bs-target="#QuickViewModal"><i class="bi bi-eye"></i></a>
                        </div>
                      </div>
                      <div class="position-absolute bottom-0 start-0 end-0 m-3 product-cart">
                        <a href="javascript:;" class="btn btn-dark rounded-5 w-100">Add to cart</a>
                      </div>
                    </div>
                    <div class="">
                      <h3 class="product-name mb-1">Grey Venish Pant</h3>
                      <p class="mb-0 product-price d-flex align-items-center gap-2"><span
                          class="prev-price text-decoration-line-through">$948</span>$346</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="product-card border rounded-3 p-3">
                  <div class="d-flex flex-column gap-3">
                    <div class="position-relative">
                      <a href="product-detail.html">
                        <img src="assets/images/gallery/tabular-product/08.png" class="product-img img-fluid rounded-3"
                          alt="">
                      </a>
                      <div class="position-absolute top-0 end-0 m-3 product-actions">
                        <div class="d-flex flex-column gap-2">
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-heart"></i></a>
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-funnel"></i></a>
                          <a href="javascript:;" class="btn btn-action" data-bs-toggle="modal" data-bs-target="#QuickViewModal"><i class="bi bi-eye"></i></a>
                        </div>
                      </div>
                      <div class="position-absolute bottom-0 start-0 end-0 m-3 product-cart">
                        <a href="javascript:;" class="btn btn-dark rounded-5 w-100">Add to cart</a>
                      </div>
                    </div>
                    <div class="">
                      <h3 class="product-name mb-1">Grey Venish Pant</h3>
                      <p class="mb-0 product-price">$348</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="product-card border rounded-3 p-3">
                  <div class="d-flex flex-column gap-3">
                    <div class="position-relative">
                      <div class="discount-ribben position-absolute top-0 start-0 m-3">15%</div>
                      <a href="product-detail-grid.html">
                        <img src="assets/images/gallery/tabular-product/07.png" class="product-img img-fluid rounded-3"
                          alt="">
                      </a>
                      <div class="position-absolute top-0 end-0 m-3 product-actions">
                        <div class="d-flex flex-column gap-2">
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-heart"></i></a>
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-funnel"></i></a>
                          <a href="javascript:;" class="btn btn-action" data-bs-toggle="modal" data-bs-target="#QuickViewModal"><i class="bi bi-eye"></i></a>
                        </div>
                      </div>
                      <div class="position-absolute bottom-0 start-0 end-0 m-3 product-cart">
                        <a href="javascript:;" class="btn btn-dark rounded-5 w-100">Add to cart</a>
                      </div>
                    </div>
                    <div class="">
                      <h3 class="product-name mb-1">Grey Venish Pant</h3>
                      <p class="mb-0 product-price d-flex align-items-center gap-2"><span
                          class="prev-price text-decoration-line-through">$647</span>$245</p>
                    </div>
                  </div>
                </div>
              </div>
            </div><!--end row-->
          </div>
          <div class="tab-pane fade" id="trending">
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-4">
              <div class="col">
                <div class="product-card border rounded-3 p-3">
                  <div class="d-flex flex-column gap-3">
                    <div class="position-relative">
                      <a href="product-detail.html">
                        <img src="assets/images/gallery/tabular-product/08.png" class="product-img img-fluid rounded-3"
                          alt="">
                      </a>
                      <div class="position-absolute top-0 end-0 m-3 product-actions">
                        <div class="d-flex flex-column gap-2">
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-heart"></i></a>
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-funnel"></i></a>
                          <a href="javascript:;" class="btn btn-action" data-bs-toggle="modal" data-bs-target="#QuickViewModal"><i class="bi bi-eye"></i></a>
                        </div>
                      </div>
                      <div class="position-absolute bottom-0 start-0 end-0 m-3 product-cart">
                        <a href="javascript:;" class="btn btn-dark rounded-5 w-100">Add to cart</a>
                      </div>
                    </div>
                    <div class="">
                      <h3 class="product-name mb-1" data-bs-toggle="tooltip" data-bs-placement="left"
                        data-bs-title="Wishlist">Grey Venish Pant</h3>
                      <p class="mb-0 product-price">$499</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="product-card border rounded-3 p-3">
                  <div class="d-flex flex-column gap-3">
                    <div class="position-relative">
                      <div class="discount-ribben position-absolute top-0 start-0 m-3">10%</div>
                      <a href="product-detail-grid.html">
                        <img src="assets/images/gallery/tabular-product/07.png" class="product-img img-fluid rounded-3"
                          alt="">
                      </a>
                      <div class="position-absolute top-0 end-0 m-3 product-actions">
                        <div class="d-flex flex-column gap-2">
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-heart"></i></a>
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-funnel"></i></a>
                          <a href="javascript:;" class="btn btn-action" data-bs-toggle="modal" data-bs-target="#QuickViewModal"><i class="bi bi-eye"></i></a>
                        </div>
                      </div>
                      <div class="position-absolute bottom-0 start-0 end-0 m-3 product-cart">
                        <a href="javascript:;" class="btn btn-dark rounded-5 w-100">Add to cart</a>
                      </div>
                    </div>
                    <div class="">
                      <h3 class="product-name mb-1">Grey Venish Pant</h3>
                      <p class="mb-0 product-price d-flex align-items-center gap-2"><span
                          class="prev-price text-decoration-line-through">$698</span>$499</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="product-card border rounded-3 p-3">
                  <div class="d-flex flex-column gap-3">
                    <div class="position-relative">
                      <a href="product-detail-grid.html">
                        <img src="assets/images/gallery/tabular-product/06.png" class="product-img img-fluid rounded-3"
                          alt="">
                      </a>
                      <div class="position-absolute top-0 end-0 m-3 product-actions">
                        <div class="d-flex flex-column gap-2">
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-heart"></i></a>
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-funnel"></i></a>
                          <a href="javascript:;" class="btn btn-action" data-bs-toggle="modal" data-bs-target="#QuickViewModal"><i class="bi bi-eye"></i></a>
                        </div>
                      </div>
                      <div class="position-absolute bottom-0 start-0 end-0 m-3 product-cart">
                        <a href="javascript:;" class="btn btn-dark rounded-5 w-100">Add to cart</a>
                      </div>
                    </div>
                    <div class="">
                      <h3 class="product-name mb-1">Grey Venish Pant</h3>
                      <p class="mb-0 product-price">$348</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="product-card border rounded-3 p-3">
                  <div class="d-flex flex-column gap-3">
                    <div class="position-relative">
                      <div class="discount-ribben position-absolute top-0 start-0 m-3">25%</div>
                      <a href="product-detail.html">
                        <img src="assets/images/gallery/tabular-product/05.png" class="product-img img-fluid rounded-3"
                          alt="">
                      </a>
                      <div class="position-absolute top-0 end-0 m-3 product-actions">
                        <div class="d-flex flex-column gap-2">
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-heart"></i></a>
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-funnel"></i></a>
                          <a href="javascript:;" class="btn btn-action" data-bs-toggle="modal" data-bs-target="#QuickViewModal"><i class="bi bi-eye"></i></a>
                        </div>
                      </div>
                      <div class="position-absolute bottom-0 start-0 end-0 m-3 product-cart">
                        <a href="javascript:;" class="btn btn-dark rounded-5 w-100">Add to cart</a>
                      </div>
                    </div>
                    <div class="">
                      <h3 class="product-name mb-1">Grey Venish Pant</h3>
                      <p class="mb-0 product-price d-flex align-items-center gap-2"><span
                          class="prev-price text-decoration-line-through">$647</span>$245</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="product-card border rounded-3 p-3">
                  <div class="d-flex flex-column gap-3">
                    <div class="position-relative">
                      <div class="discount-ribben position-absolute top-0 start-0 m-3">50%</div>
                      <a href="product-detail-grid.html">
                        <img src="assets/images/gallery/tabular-product/04.png" class="product-img img-fluid rounded-3"
                          alt="">
                      </a>
                      <div class="position-absolute top-0 end-0 m-3 product-actions">
                        <div class="d-flex flex-column gap-2">
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-heart"></i></a>
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-funnel"></i></a>
                          <a href="javascript:;" class="btn btn-action" data-bs-toggle="modal" data-bs-target="#QuickViewModal"><i class="bi bi-eye"></i></a>
                        </div>
                      </div>
                      <div class="position-absolute bottom-0 start-0 end-0 m-3 product-cart">
                        <a href="javascript:;" class="btn btn-dark rounded-5 w-100">Add to cart</a>
                      </div>
                    </div>
                    <div class="">
                      <h3 class="product-name mb-1">Grey Venish Pant</h3>
                      <p class="mb-0 product-price d-flex align-items-center gap-2"><span
                          class="prev-price text-decoration-line-through">$647</span>$245</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="product-card border rounded-3 p-3">
                  <div class="d-flex flex-column gap-3">
                    <div class="position-relative">
                      <a href="product-detail.html">
                        <img src="assets/images/gallery/tabular-product/03.png" class="product-img img-fluid rounded-3"
                          alt="">
                      </a>
                      <div class="position-absolute top-0 end-0 m-3 product-actions">
                        <div class="d-flex flex-column gap-2">
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-heart"></i></a>
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-funnel"></i></a>
                          <a href="javascript:;" class="btn btn-action" data-bs-toggle="modal" data-bs-target="#QuickViewModal"><i class="bi bi-eye"></i></a>
                        </div>
                      </div>
                      <div class="position-absolute bottom-0 start-0 end-0 m-3 product-cart">
                        <a href="javascript:;" class="btn btn-dark rounded-5 w-100">Add to cart</a>
                      </div>
                    </div>
                    <div class="">
                      <h3 class="product-name mb-1">Grey Venish Pant</h3>
                      <p class="mb-0 product-price d-flex align-items-center gap-2"><span
                          class="prev-price text-decoration-line-through">$948</span>$346</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="product-card border rounded-3 p-3">
                  <div class="d-flex flex-column gap-3">
                    <div class="position-relative">
                      <a href="product-detail-grid.html">
                        <img src="assets/images/gallery/tabular-product/02.png" class="product-img img-fluid rounded-3"
                          alt="">
                      </a>
                      <div class="position-absolute top-0 end-0 m-3 product-actions">
                        <div class="d-flex flex-column gap-2">
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-heart"></i></a>
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-funnel"></i></a>
                          <a href="javascript:;" class="btn btn-action" data-bs-toggle="modal" data-bs-target="#QuickViewModal"><i class="bi bi-eye"></i></a>
                        </div>
                      </div>
                      <div class="position-absolute bottom-0 start-0 end-0 m-3 product-cart">
                        <a href="javascript:;" class="btn btn-dark rounded-5 w-100">Add to cart</a>
                      </div>
                    </div>
                    <div class="">
                      <h3 class="product-name mb-1">Grey Venish Pant</h3>
                      <p class="mb-0 product-price">$348</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="product-card border rounded-3 p-3">
                  <div class="d-flex flex-column gap-3">
                    <div class="position-relative">
                      <div class="discount-ribben position-absolute top-0 start-0 m-3">On Sale</div>
                      <a href="product-detail.html">
                        <img src="assets/images/gallery/tabular-product/01.png" class="product-img img-fluid rounded-3"
                          alt="">
                      </a>
                      <div class="position-absolute top-0 end-0 m-3 product-actions">
                        <div class="d-flex flex-column gap-2">
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-heart"></i></a>
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-funnel"></i></a>
                          <a href="javascript:;" class="btn btn-action" data-bs-toggle="modal" data-bs-target="#QuickViewModal"><i class="bi bi-eye"></i></a>
                        </div>
                      </div>
                      <div class="position-absolute bottom-0 start-0 end-0 m-3 product-cart">
                        <a href="javascript:;" class="btn btn-dark rounded-5 w-100">Add to cart</a>
                      </div>
                    </div>
                    <div class="">
                      <h3 class="product-name mb-1">Grey Venish Pant</h3>
                      <p class="mb-0 product-price d-flex align-items-center gap-2"><span
                          class="prev-price text-decoration-line-through">$647</span>$245</p>
                    </div>
                  </div>
                </div>
              </div>
            </div><!--end row-->
          </div>
          <div class="tab-pane fade" id="Offers">
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-4">
              <div class="col">
                <div class="product-card border rounded-3 p-3">
                  <div class="d-flex flex-column gap-3">
                    <div class="position-relative">
                      <a href="product-detail-grid.html">
                        <img src="assets/images/gallery/tabular-product/01.png" class="product-img img-fluid rounded-3"
                          alt="">
                      </a>
                      <div class="position-absolute top-0 end-0 m-3 product-actions">
                        <div class="d-flex flex-column gap-2">
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-heart"></i></a>
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-funnel"></i></a>
                          <a href="javascript:;" class="btn btn-action" data-bs-toggle="modal" data-bs-target="#QuickViewModal"><i class="bi bi-eye"></i></a>
                        </div>
                      </div>
                      <div class="position-absolute bottom-0 start-0 end-0 m-3 product-cart">
                        <a href="javascript:;" class="btn btn-dark rounded-5 w-100">Add to cart</a>
                      </div>
                    </div>
                    <div class="">
                      <h3 class="product-name mb-1" data-bs-toggle="tooltip" data-bs-placement="left"
                        data-bs-title="Wishlist">Grey Venish Pant</h3>
                      <p class="mb-0 product-price">$499</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="product-card border rounded-3 p-3">
                  <div class="d-flex flex-column gap-3">
                    <div class="position-relative">
                      <div class="discount-ribben position-absolute top-0 start-0 m-3">10%</div>
                      <a href="product-detail-grid.html">
                        <img src="assets/images/gallery/tabular-product/07.png" class="product-img img-fluid rounded-3"
                          alt="">
                      </a>
                      <div class="position-absolute top-0 end-0 m-3 product-actions">
                        <div class="d-flex flex-column gap-2">
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-heart"></i></a>
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-funnel"></i></a>
                          <a href="javascript:;" class="btn btn-action" data-bs-toggle="modal" data-bs-target="#QuickViewModal"><i class="bi bi-eye"></i></a>
                        </div>
                      </div>
                      <div class="position-absolute bottom-0 start-0 end-0 m-3 product-cart">
                        <a href="javascript:;" class="btn btn-dark rounded-5 w-100">Add to cart</a>
                      </div>
                    </div>
                    <div class="">
                      <h3 class="product-name mb-1">Grey Venish Pant</h3>
                      <p class="mb-0 product-price d-flex align-items-center gap-2"><span
                          class="prev-price text-decoration-line-through">$698</span>$499</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="product-card border rounded-3 p-3">
                  <div class="d-flex flex-column gap-3">
                    <div class="position-relative">
                      <a href="product-detail.html">
                        <img src="assets/images/gallery/tabular-product/05.png" class="product-img img-fluid rounded-3"
                          alt="">
                      </a>
                      <div class="position-absolute top-0 end-0 m-3 product-actions">
                        <div class="d-flex flex-column gap-2">
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-heart"></i></a>
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-funnel"></i></a>
                          <a href="javascript:;" class="btn btn-action" data-bs-toggle="modal" data-bs-target="#QuickViewModal"><i class="bi bi-eye"></i></a>
                        </div>
                      </div>
                      <div class="position-absolute bottom-0 start-0 end-0 m-3 product-cart">
                        <a href="javascript:;" class="btn btn-dark rounded-5 w-100">Add to cart</a>
                      </div>
                    </div>
                    <div class="">
                      <h3 class="product-name mb-1">Grey Venish Pant</h3>
                      <p class="mb-0 product-price">$348</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="product-card border rounded-3 p-3">
                  <div class="d-flex flex-column gap-3">
                    <div class="position-relative">
                      <div class="discount-ribben position-absolute top-0 start-0 m-3">25%</div>
                      <a href="product-detail-grid.html">
                        <img src="assets/images/gallery/tabular-product/03.png" class="product-img img-fluid rounded-3"
                          alt="">
                      </a>
                      <div class="position-absolute top-0 end-0 m-3 product-actions">
                        <div class="d-flex flex-column gap-2">
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-heart"></i></a>
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-funnel"></i></a>
                          <a href="javascript:;" class="btn btn-action" data-bs-toggle="modal" data-bs-target="#QuickViewModal"><i class="bi bi-eye"></i></a>
                        </div>
                      </div>
                      <div class="position-absolute bottom-0 start-0 end-0 m-3 product-cart">
                        <a href="javascript:;" class="btn btn-dark rounded-5 w-100">Add to cart</a>
                      </div>
                    </div>
                    <div class="">
                      <h3 class="product-name mb-1">Grey Venish Pant</h3>
                      <p class="mb-0 product-price d-flex align-items-center gap-2"><span
                          class="prev-price text-decoration-line-through">$647</span>$245</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="product-card border rounded-3 p-3">
                  <div class="d-flex flex-column gap-3">
                    <div class="position-relative">
                      <div class="discount-ribben position-absolute top-0 start-0 m-3">50%</div>
                      <a href="product-detail-grid.html">
                        <img src="assets/images/gallery/tabular-product/01.png" class="product-img img-fluid rounded-3"
                          alt="">
                      </a>
                      <div class="position-absolute top-0 end-0 m-3 product-actions">
                        <div class="d-flex flex-column gap-2">
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-heart"></i></a>
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-funnel"></i></a>
                          <a href="javascript:;" class="btn btn-action" data-bs-toggle="modal" data-bs-target="#QuickViewModal"><i class="bi bi-eye"></i></a>
                        </div>
                      </div>
                      <div class="position-absolute bottom-0 start-0 end-0 m-3 product-cart">
                        <a href="javascript:;" class="btn btn-dark rounded-5 w-100">Add to cart</a>
                      </div>
                    </div>
                    <div class="">
                      <h3 class="product-name mb-1">Grey Venish Pant</h3>
                      <p class="mb-0 product-price d-flex align-items-center gap-2"><span
                          class="prev-price text-decoration-line-through">$647</span>$245</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="product-card border rounded-3 p-3">
                  <div class="d-flex flex-column gap-3">
                    <div class="position-relative">
                      <a href="product-detail.html">
                        <img src="assets/images/gallery/tabular-product/02.png" class="product-img img-fluid rounded-3"
                          alt="">
                      </a>
                      <div class="position-absolute top-0 end-0 m-3 product-actions">
                        <div class="d-flex flex-column gap-2">
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-heart"></i></a>
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-funnel"></i></a>
                          <a href="javascript:;" class="btn btn-action" data-bs-toggle="modal" data-bs-target="#QuickViewModal"><i class="bi bi-eye"></i></a>
                        </div>
                      </div>
                      <div class="position-absolute bottom-0 start-0 end-0 m-3 product-cart">
                        <a href="javascript:;" class="btn btn-dark rounded-5 w-100">Add to cart</a>
                      </div>
                    </div>
                    <div class="">
                      <h3 class="product-name mb-1">Grey Venish Pant</h3>
                      <p class="mb-0 product-price d-flex align-items-center gap-2"><span
                          class="prev-price text-decoration-line-through">$948</span>$346</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="product-card border rounded-3 p-3">
                  <div class="d-flex flex-column gap-3">
                    <div class="position-relative">
                      <a href="product-detail-grid.html">
                        <img src="assets/images/gallery/tabular-product/04.png" class="product-img img-fluid rounded-3"
                          alt="">
                      </a>
                      <div class="position-absolute top-0 end-0 m-3 product-actions">
                        <div class="d-flex flex-column gap-2">
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-heart"></i></a>
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-funnel"></i></a>
                          <a href="javascript:;" class="btn btn-action" data-bs-toggle="modal" data-bs-target="#QuickViewModal"><i class="bi bi-eye"></i></a>
                        </div>
                      </div>
                      <div class="position-absolute bottom-0 start-0 end-0 m-3 product-cart">
                        <a href="javascript:;" class="btn btn-dark rounded-5 w-100">Add to cart</a>
                      </div>
                    </div>
                    <div class="">
                      <h3 class="product-name mb-1">Grey Venish Pant</h3>
                      <p class="mb-0 product-price">$348</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="product-card border rounded-3 p-3">
                  <div class="d-flex flex-column gap-3">
                    <div class="position-relative">
                      <div class="discount-ribben position-absolute top-0 start-0 m-3">-15%</div>
                      <a href="product-detail.html">
                        <img src="assets/images/gallery/tabular-product/06.png" class="product-img img-fluid rounded-3"
                          alt="">
                      </a>
                      <div class="position-absolute top-0 end-0 m-3 product-actions">
                        <div class="d-flex flex-column gap-2">
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-heart"></i></a>
                          <a href="javascript:;" class="btn btn-action"><i class="bi bi-funnel"></i></a>
                          <a href="javascript:;" class="btn btn-action" data-bs-toggle="modal" data-bs-target="#QuickViewModal"><i class="bi bi-eye"></i></a>
                        </div>
                      </div>
                      <div class="position-absolute bottom-0 start-0 end-0 m-3 product-cart">
                        <a href="javascript:;" class="btn btn-dark rounded-5 w-100">Add to cart</a>
                      </div>
                    </div>
                    <div class="">
                      <h3 class="product-name mb-1">Grey Venish Pant</h3>
                      <p class="mb-0 product-price d-flex align-items-center gap-2"><span
                          class="prev-price text-decoration-line-through">$647</span>$245</p>
                    </div>
                  </div>
                </div>
              </div>
            </div><!--end row-->
          </div>
        </div>
      </div>
    </section>
    <!--end tabular product-->


    <!--start special offer-->
    <section class="special-offer py-5">
      <div class="container px-3">
        <div class="d-flex align-items-center justify-content-center mb-4">
          <h2 class="section-title">Just for you</h2>
        </div>
        <div class="row g-4">
          <div class="col-12 col-xl-6 d-flex">
            <div class="card w-100 border">
              <div class="card-body">
                <!-- Swiper -->
                <div class="swiper dealsSwiper position-relative">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <div class="text-center position-relative">
                        <div class="discount-ribben position-absolute top-0 start-0 m-3">-28%</div>
                        <img src="assets/images/gallery/deals/04.png" class="img-fluid rounded-3" alt="">
                        <div class="mt-4">
                          <h6>Black Sunglass for men</h6>
                          <div class="d-flex align-items-center justify-content-center gap-2 mt-2">
                            <h5 class="mb-0 text-decoration-line-through text-danger">$246</h5>
                            <h5 class="mb-0">$649</h5>
                          </div>
                          <div class="mt-3">
                            <a href="shop-grid-left-sidebar.html" class="btn btn-dark px-4">Buy Now</a>
                          </div>
                          <div class="d-flex align-items-center justify-content-center gap-3 mt-4">
                            <button type="button" class="btn btn-light">5d</button>
                            <button type="button" class="btn btn-light">16h</button>
                            <button type="button" class="btn btn-light">45m</button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="swiper-slide">
                      <div class="text-center position-relative">
                        <div class="discount-ribben position-absolute top-0 start-0 m-3">-37%</div>
                        <img src="assets/images/gallery/deals/03.png" class="img-fluid rounded-3" alt="">
                        <div class="mt-4">
                          <h6>Black Sunglass for men</h6>
                          <div class="d-flex align-items-center justify-content-center gap-2 mt-2">
                            <h5 class="mb-0 text-decoration-line-through text-danger">$246</h5>
                            <h5 class="mb-0">$649</h5>
                          </div>
                          <div class="mt-3">
                            <a href="shop-grid-left-sidebar.html" class="btn btn-dark px-4">Buy Now</a>
                          </div>
                          <div class="d-flex align-items-center justify-content-center gap-3 mt-4">
                            <button type="button" class="btn btn-light">5d</button>
                            <button type="button" class="btn btn-light">16h</button>
                            <button type="button" class="btn btn-light">45m</button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-nav d-flex align-items-center justify-content-center gap-3 mt-5">
                    <div class="slide-icon deal-slide-icon-left"><i class="bi bi-arrow-left"></i></div>
                    <div class="slide-icon deal-slide-icon-right"><i class="bi bi-arrow-right"></i></div>
                  </div>
                </div>
                <!--swiper-->
              </div>
            </div>
          </div>
          <div class="col-12 col-xl-6 d-flex">
            <div class="d-flex flex-column gap-4 w-100">
              <div class="card rounded-3 bg-light border-0">
                <div class="card-body">
                  <div class="row g-4 align-items-center">
                    <div class="col-12 col-md-7">
                      <h6>Flash Sale</h6>
                      <h5 class="fw-semibold">Exclusive Deals for Members: Unlock Special Offers</h5>
                      <div class="d-flex align-items-center gap-2 my-4">
                        <h4 class="mb-0 text-decoration-line-through text-danger">$647</h4>
                        <h4 class="mb-0">$245</h4>
                      </div>
                      <a href="shop-list-left-sidebar.html" class="btn btn-dark px-4">Shop Now</a>
                    </div>
                    <div class="col-12 col-md-5">
                      <div>
                        <img src="assets/images/gallery/deals/01.png" class="img-fluid rounded-3" alt="">
                      </div>
                    </div>
                  </div><!--end row-->
                </div>
              </div>
              <div class="card rounded-3 bg-light border-0">
                <div class="card-body">
                  <div class="row g-4 align-items-center">
                    <div class="col-12 col-md-7 order-2">
                      <h6>Shop the Sale</h6>
                      <h5 class="fw-semibold">Top Brands, Bottom Prices Emphasizes quality and value</h5>
                      <div class="d-flex align-items-center gap-2 my-4">
                        <h4 class="mb-0 text-decoration-line-through text-danger">$769</h4>
                        <h4 class="mb-0">$357</h4>
                      </div>
                      <a href="shop-grid-offcanvas-filter.html" class="btn btn-dark px-4">Shop Now</a>
                    </div>
                    <div class="col-12 col-md-5">
                      <div class="">
                        <img src="assets/images/gallery/deals/02.png" class="img-fluid rounded-3" alt="">
                      </div>
                    </div>
                  </div><!--end row-->
                </div>
              </div>
              <div class="card rounded-3 bg-light border-0">
                <div class="card-body">
                  <div class="row g-4 align-items-center">
                    <div class="col-12 col-md-7">
                      <h6>Mystery Deals</h6>
                      <h5 class="fw-semibold">Uncover Hidden Treasures Cool Deals Await</h5>
                      <div class="d-flex align-items-center gap-2 my-4">
                        <h4 class="mb-0 text-decoration-line-through text-danger">$599</h4>
                        <h4 class="mb-0">$458</h4>
                      </div>
                      <a href="shop-list-right-sidebar.html" class="btn btn-dark px-4">Shop Now</a>
                    </div>
                    <div class="col-12 col-md-5">
                      <div>
                        <img src="assets/images/gallery/deals/05.png" class="img-fluid rounded-3" alt="">
                      </div>
                    </div>
                  </div><!--end row-->
                </div>
              </div>
            </div>
          </div>
        </div><!--end row-->
      </div>
    </section>
    <!--end special offer-->


    <!--start brands-->
    <section class="special-offer py-5">
      <div class="container px-3">
        <div class="d-flex align-items-center justify-content-center mb-4">
          <h2 class="section-title">Shop By Brands</h2>
        </div>
        <div class="">
          <div class="row row-cols-1 row-cols-lg-5 g-4">
            <div class="col">
              <div class="brand-logo p-3 border rounded-3">
                <img src="assets/images/gallery/brands/01.webp" class="img-fluid" alt="">
              </div>
            </div>
            <div class="col">
              <div class="brand-logo p-3 border rounded-3">
                <img src="assets/images/gallery/brands/02.webp" class="img-fluid" alt="">
              </div>
            </div>
            <div class="col">
              <div class="brand-logo p-3 border rounded-3">
                <img src="assets/images/gallery/brands/03.webp" class="img-fluid" alt="">
              </div>
            </div>
            <div class="col">
              <div class="brand-logo p-3 border rounded-3">
                <img src="assets/images/gallery/brands/04.webp" class="img-fluid" alt="">
              </div>
            </div>
            <div class="col">
              <div class="brand-logo p-3 border rounded-3">
                <img src="assets/images/gallery/brands/05.webp" class="img-fluid" alt="">
              </div>
            </div>
            <div class="col">
              <div class="brand-logo p-3 border rounded-3">
                <img src="assets/images/gallery/brands/06.webp" class="img-fluid" alt="">
              </div>
            </div>
            <div class="col">
              <div class="brand-logo p-3 border rounded-3">
                <img src="assets/images/gallery/brands/07.webp" class="img-fluid" alt="">
              </div>
            </div>
            <div class="col">
              <div class="brand-logo p-3 border rounded-3">
                <img src="assets/images/gallery/brands/08.webp" class="img-fluid" alt="">
              </div>
            </div>
            <div class="col">
              <div class="brand-logo p-3 border rounded-3">
                <img src="assets/images/gallery/brands/09.webp" class="img-fluid" alt="">
              </div>
            </div>
            <div class="col">
              <div class="brand-logo p-3 border rounded-3">
                <img src="assets/images/gallery/brands/10.webp" class="img-fluid" alt="">
              </div>
            </div>
          </div><!--end row-->
        </div>
      </div>
    </section>
    <!--end brands-->

    <!--start shop Instagram-->
    <section class="shop-instagram py-5">
      <div class="container px-3">
        <div class="d-flex align-items-center justify-content-center mb-4">
          <h2 class="section-title">Shop By Instagram</h2>
        </div>
        <div class="swiper Instagram-Swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="position-relative overflow-hidden rounded-3">
                <div
                  class="instagram-block position-absolute top-0 bottom-0 start-0 end-0 d-flex align-items-center justify-content-center">
                  <a href="javascript:;" class="instagram-logo"><i class="bi bi-instagram"></i></a>
                </div>
                <img src="assets/images/gallery/categories/01.png" class="img-fluid rounded-3" alt="">
              </div>
            </div>
            <div class="swiper-slide">
              <div class="position-relative overflow-hidden rounded-3">
                <div
                  class="instagram-block position-absolute top-0 bottom-0 start-0 end-0 d-flex align-items-center justify-content-center">
                  <a href="javascript:;" class="instagram-logo"><i class="bi bi-instagram"></i></a>
                </div>
                <img src="assets/images/gallery/categories/02.png" class="img-fluid rounded-3" alt="">
              </div>
            </div>
            <div class="swiper-slide">
              <div class="position-relative overflow-hidden rounded-3">
                <div
                  class="instagram-block position-absolute top-0 bottom-0 start-0 end-0 d-flex align-items-center justify-content-center">
                  <a href="javascript:;" class="instagram-logo"><i class="bi bi-instagram"></i></a>
                </div>
                <img src="assets/images/gallery/categories/03.png" class="img-fluid rounded-3" alt="">
              </div>
            </div>
            <div class="swiper-slide">
              <div class="position-relative overflow-hidden rounded-3">
                <div
                  class="instagram-block position-absolute top-0 bottom-0 start-0 end-0 d-flex align-items-center justify-content-center">
                  <a href="javascript:;" class="instagram-logo"><i class="bi bi-instagram"></i></a>
                </div>
                <img src="assets/images/gallery/categories/04.png" class="img-fluid rounded-3" alt="">
              </div>
            </div>
            <div class="swiper-slide">
              <div class="position-relative overflow-hidden rounded-3">
                <div
                  class="instagram-block position-absolute top-0 bottom-0 start-0 end-0 d-flex align-items-center justify-content-center">
                  <a href="javascript:;" class="instagram-logo"><i class="bi bi-instagram"></i></a>
                </div>
                <img src="assets/images/gallery/categories/05.png" class="img-fluid rounded-3" alt="">
              </div>
            </div>
            <div class="swiper-slide">
              <div class="position-relative overflow-hidden rounded-3">
                <div
                  class="instagram-block position-absolute top-0 bottom-0 start-0 end-0 d-flex align-items-center justify-content-center">
                  <a href="javascript:;" class="instagram-logo"><i class="bi bi-instagram"></i></a>
                </div>
                <img src="assets/images/gallery/categories/06.png" class="img-fluid rounded-3" alt="">
              </div>
            </div>
            <div class="swiper-slide">
              <div class="position-relative overflow-hidden rounded-3">
                <div
                  class="instagram-block position-absolute top-0 bottom-0 start-0 end-0 d-flex align-items-center justify-content-center">
                  <a href="javascript:;" class="instagram-logo"><i class="bi bi-instagram"></i></a>
                </div>
                <img src="assets/images/gallery/categories/01.png" class="img-fluid rounded-3" alt="">
              </div>
            </div>
            <div class="swiper-slide">
              <div class="position-relative overflow-hidden rounded-3">
                <div
                  class="instagram-block position-absolute top-0 bottom-0 start-0 end-0 d-flex align-items-center justify-content-center">
                  <a href="javascript:;" class="instagram-logo"><i class="bi bi-instagram"></i></a>
                </div>
                <img src="assets/images/gallery/categories/02.png" class="img-fluid rounded-3" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!--end shop Instagram-->


    <!--services-->
    <section class="services py-5">
      <div class="container px-3">
        <div class="row row-cols-1 row-cols-lg-4">
          <div class="col">
            <div class="card rounded-3 border-0">
              <div class="card-body">
                <div class="text-center">
                  <div class="fs-2 mb-4">
                    <i class="bi bi-arrow-return-left"></i>
                  </div>
                  <h5>30-Day Return Policy</h5>
                  <p>Shop worry-free with hassle-free returns</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card rounded-3 border-0">
              <div class="card-body">
                <div class="text-center">
                  <div class="fs-2 mb-4">
                    <i class="bi bi-truck"></i>
                  </div>
                  <h5>Complimentary Shipping</h5>
                  <p>What you see is what you pay—no hidden fees</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card rounded-3 border-0">
              <div class="card-body">
                <div class="text-center">
                  <div class="fs-2 mb-4">
                    <i class="bi bi-headset"></i>
                  </div>
                  <h5>24/7 Support</h5>
                  <p>Round-the-clock support, always here for you</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card rounded-3 border-0">
              <div class="card-body">
                <div class="text-center">
                  <div class="fs-2 mb-4">
                    <i class="bi bi-people"></i>
                  </div>
                  <h5>Exclusive Member</h5>
                  <p>Exclusive deals for our valued customers</p>
                </div>
              </div>
            </div>
          </div>
        </div><!--end row-->
      </div>
    </section>
    <!--end services-->
  </main>
  <!--end main content-->
  

   <!--footer widgets-->
   <section class="footer-widgets py-5 border-top">
      <div class="container px-3">
        <div class="row g-4">
           <div class="col-12 col-lg-4">
               <div class="footer-widget-1">
                  <div class="">
                    <img src="assets/images/gallery/logo.png" width="130" alt="">
                  </div>
                  <div>
                    <address>
                      <strong>Address:</strong>
                      84-A London Street, United Kingdom
                    </address>
                  </div>
                  <p><button type="button" class="btn btn-sm btn-outline-dark px-4">Get Darection<i class="bi bi-arrow-up-right ms-2"></i></button></p>
                  <p><span><i class="bi bi-envelope me-2"></i></span>codervent@gmail.com</p>
                  <p><span><i class="bi bi-telephone me-2"></i></span>648-378-2255</p>
                  <p><span><i class="bi bi-globe me-2"></i></span>www.codervent.com</p>
                  <div class="social-link d-flex align-items-center gap-2">
                    <a href="javascript:;" class="btn btn-outline-dark"><i class="bi bi-facebook"></i></a>
                    <a href="javascript:;" class="btn btn-outline-dark"><i class="bi bi-twitter-x"></i></a>
                    <a href="javascript:;" class="btn btn-outline-dark"><i class="bi bi-instagram"></i></a>
                    <a href="javascript:;" class="btn btn-outline-dark"><i class="bi bi-youtube"></i></a>
                    <a href="javascript:;" class="btn btn-outline-dark"><i class="bi bi-amazon"></i></a>
                  </div>
               </div>
           </div>
           <div class="col-12 col-lg-3">
              <div class="d-flex align-items-start justify-content-between gap-4">
                <div class="">
                  <h5 class="mb-3">Top Categories</h5>
                  <ul class="list-unstyled d-flex flex-column gap-2">
                      <li><a href="shop-circular-catgories.html" class="footer-link">Topwear</a></li>
                      <li><a href="shop-list-left-sidebar.html" class="footer-link">Accessories</a></li>
                      <li><a href="shop-grid-offcanvas-filter.html" class="footer-link">Men Fashion</a></li>
                      <li><a href="shop-list-right-sidebar.html" class="footer-link">Gym Fitness</a></li>
                      <li><a href="shop-list-ofcanvas-filter.html" class="footer-link">Sunglass</a></li>
                      <li><a href="shop-grid-left-sidebar.html" class="footer-link">Jeans</a></li>
                      <li><a href="shop-grid-left-sidebar.html" class="footer-link">Formal Pants</a></li>
                      <li><a href="shop-grid-left-sidebar.html" class="footer-link">Lingerie</a></li>
                  </ul>
                 </div>
                  <div class="footer-widget-3">
                    <h5 class="mb-3">Account</h5>
                    <ul class="list-unstyled d-flex flex-column gap-2">
                       <li><a href="checkout.html" class="footer-link">Order tracking</a></li>
                       <li><a href="javascript:;" class="footer-link">Shipping policy</a></li>
                       <li><a href="account-my-profile.html" class="footer-link">Your account</a></li>
                       <li><a href="account-addresses.html" class="footer-link">Delivery info</a></li>
                       <li><a href="javascript:;" class="footer-link">Taxes & fees</a></li>
                       <li><a href="javascript:;" class="footer-link">Refunds policy</a></li>
                    </ul>
                  </div>
              </div>
            </div>
            <div class="col-12 col-lg-4 offset-lg-1">
              <div class="footer-widget-4">
                <h5 class="mb-3">Newletter</h5>
                <p class="news-letter-caption">Subscribe to our newsletter and enjoy 10% off your first order</p>
                <div class="input-group input-group-lg mt-3">
                  <input type="text" class="form-control border-dark" placeholder="Enter your email">
                  <button class="btn btn-dark" type="button"><i class="bi bi-arrow-up-right"></i></button>
                </div>
                <p class="news-letter-caption mt-4 mb-2">Download Mobile Application</p>
                <div class="d-flex align-items-center gap-3">
                  <a href="javascript:;"><img src="assets/images/gallery/google-play-store.png" width="140" class="rounded-3" alt=""></a>
                  <a href="javascript:;"><img src="assets/images/gallery/apple-play-store.png" width="140" class="rounded-3" alt=""></a>
                </div>
              </div>
            </div>
        </div><!--end row-->  
    </div>
  </section>
  <!--end footer widgets-->


  <!--start footer strip-->
  <footer class="footer-strip py-4 border-top">
      <div class="container px-3">
        <div class="row g-4">
          <div class="col-12 col-lg-auto">
            <p class="mb-0 font-12">@All rights reserved. Made by Codervent</p>
          </div>
          <div class="col-12 col-lg-auto">
            <div class="d-flex align-items-center gap-3">
              <a href="javascript:;" class="font-12 text-secondary">Privacy</a>
              <a href="javascript:;" class="font-12 text-secondary">Affiliates</a>
              <a href="javascript:;" class="font-12 text-secondary">Terms of use</a>
            </div>
         </div>
         <div class="col-12 col-lg-auto ms-lg-auto">
          <div class="d-flex align-items-center gap-3">
            <a href="javascript:;"><img src="assets/images/gallery/payment/paypal.png" class="img-fluid" width="60" alt=""></a>
            <a href="javascript:;"><img src="assets/images/gallery/payment/visa.png" class="img-fluid" width="50" alt=""></a>
            <a href="javascript:;"><img src="assets/images/gallery/payment/money.png" class="img-fluid" width="35" alt=""></a>
            <a href="javascript:;"><img src="assets/images/gallery/payment/stripe.png" class="img-fluid" width="40" alt=""></a>
          </div>
         </div>
       </div><!--end row-->
      </div>
  </footer>
 <!--end footer strip-->


 <!--back to top button-->
    <a href="javaScript:;" class="back-to-top"><i class="bi bi-arrow-up"></i></a>
 <!--end back to top button-->


  <!--start off canvas cart-->
  <div class="offcanvas offcanvas-end offcanvas-cart p-2" tabindex="-1" id="offcanvasCart" >
    <div class="offcanvas-header border-bottom">
      <h5 class="offcanvas-title">Shopping cart</h5>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
       <div class="cart-product-list d-flex flex-column">
          <div class="cart-product-list-item d-flex align-items-center gap-3">
            <div class="flex-shrink-0">
              <a href="javascript:;">
                <img src="assets/images/gallery/categories/01.png" width="100" class="cart-product-img rounded-3" alt="">
             </a>
            </div>
             <div class="cart-product-info flex-grow-1">
               <p class="mb-1 cart-product-name">Polarized shirt for women</p>
               <h5 class="mb-0 cart-product-price">$87</h5>
               <div class="d-flex align-items-center justify-content-between mt-2">
                 <p class="mb-0 font-14 cart-product-qty">Qty 1</p>
                 <button type="button" class="cart-product-btn-delete btn btn-outline-dark border btn-sm rounded-3"><i class="bi bi-trash3"></i></button>
               </div>
             </div>
          </div>
          <hr class="border-bottom border-1 border">
          <div class="cart-product-list-item d-flex align-items-center gap-3">
            <div class="flex-shrink-0">
              <a href="javascript:;">
                <img src="assets/images/gallery/categories/02.png" width="100" class="cart-product-img rounded-3" alt="">
             </a>
            </div>
             <div class="cart-product-info flex-grow-1">
               <p class="mb-1 cart-product-name">Polarized shirt for women</p>
               <h5 class="mb-0 cart-product-price">$87</h5>
               <div class="d-flex align-items-center justify-content-between mt-2">
                 <p class="mb-0 font-14 cart-product-qty">Qty 1</p>
                 <button type="button" class="cart-product-btn-delete btn btn-outline-dark border btn-sm rounded-3"><i class="bi bi-trash3"></i></button>
               </div>
             </div>
          </div>
          <hr class="border-bottom border-1 border">
          <div class="cart-product-list-item d-flex align-items-center gap-3">
            <div class="flex-shrink-0">
              <a href="javascript:;">
                <img src="assets/images/gallery/categories/03.png" width="100" class="cart-product-img rounded-3" alt="">
             </a>
            </div>
             <div class="cart-product-info flex-grow-1">
               <p class="mb-1 cart-product-name">Polarized shirt for women</p>
               <h5 class="mb-0 cart-product-price">$87</h5>
               <div class="d-flex align-items-center justify-content-between mt-2">
                 <p class="mb-0 font-14 cart-product-qty">Qty 1</p>
                 <button type="button" class="cart-product-btn-delete btn btn-outline-dark border btn-sm rounded-3"><i class="bi bi-trash3"></i></button>
               </div>
             </div>
          </div>
          <hr class="border-bottom border-1 border">
          <div class="cart-product-list-item d-flex align-items-center gap-3">
            <div class="flex-shrink-0">
              <a href="javascript:;">
                <img src="assets/images/gallery/categories/04.png" width="100" class="cart-product-img rounded-3" alt="">
             </a>
            </div>
             <div class="cart-product-info flex-grow-1">
               <p class="mb-1 cart-product-name">Polarized shirt for women</p>
               <h5 class="mb-0 cart-product-price">$87</h5>
               <div class="d-flex align-items-center justify-content-between mt-2">
                 <p class="mb-0 font-14 cart-product-qty">Qty 1</p>
                 <button type="button" class="cart-product-btn-delete btn btn-outline-dark border btn-sm rounded-3"><i class="bi bi-trash3"></i></button>
               </div>
             </div>
          </div>
          <hr class="border-bottom border-1 border">
          <div class="cart-product-list-item d-flex align-items-center gap-3">
            <div class="flex-shrink-0">
              <a href="javascript:;">
                <img src="assets/images/gallery/categories/05.png" width="100" class="cart-product-img rounded-3" alt="">
             </a>
            </div>
             <div class="cart-product-info flex-grow-1">
               <p class="mb-1 cart-product-name">Polarized shirt for women</p>
               <h5 class="mb-0 cart-product-price">$87</h5>
               <div class="d-flex align-items-center justify-content-between mt-2">
                 <p class="mb-0 font-14 cart-product-qty">Qty 1</p>
                 <button type="button" class="cart-product-btn-delete btn btn-outline-dark border btn-sm rounded-3"><i class="bi bi-trash3"></i></button>
               </div>
             </div>
          </div>
          <hr class="border-bottom border-1 border">
          <div class="cart-product-list-item d-flex align-items-center gap-3">
            <div class="flex-shrink-0">
              <a href="javascript:;">
                <img src="assets/images/gallery/categories/06.png" width="100" class="cart-product-img rounded-3" alt="">
             </a>
            </div>
             <div class="cart-product-info flex-grow-1">
               <p class="mb-1 cart-product-name">Polarized shirt for women</p>
               <h5 class="mb-0 cart-product-price">$87</h5>
               <div class="d-flex align-items-center justify-content-between mt-2">
                 <p class="mb-0 font-14 cart-product-qty">Qty 1</p>
                 <button type="button" class="cart-product-btn-delete btn btn-outline-dark border btn-sm rounded-3"><i class="bi bi-trash3"></i></button>
               </div>
             </div>
          </div>
       </div>
    </div>
    <div class="cart-product-checout p-3 border-top">
      <div class="d-flex align-items-center justify-content-between mb-3">
        <p class="mb-0">Subtotal</p>
        <h5 class="mb-0">$257.6</h5>
      </div>
       <div class="d-flex align-items-center gap-3">
           <a href="shopping-cart.html" class="btn btn-light border px-4 py-2 flex-fill">View Cart</a>
           <a href="checkout.html" class="btn btn-dark px-4 py-2 border border-dark flex-fill">Checkout</a>
       </div>   
    </div>
  </div>
  <!--end off canvas cart-->
  

<!-- start quick view modal -->
<div class="modal fade" id="QuickViewModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable modal-dialog-centered">
    <div class="modal-content rounded-3">
      <div class="modal-header px-4">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Product Details</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-4">
        <div class="row g-4">
          <div class="col-12 col-xl-6">
            <div class="product-images-grid">
              <div class="product-zoom-images">
                <div class="row row-cols-2 g-4">
                  <div class="col">
                    <div>
                      <img src="assets/images/gallery/product-images/01.png" class="img-fluid rounded-3" alt="">
                    </div>
                  </div>
                  <div class="col">
                    <div>
                      <img src="assets/images/gallery/product-images/02.png" class="img-fluid rounded-3" alt="">
                    </div>
                  </div>
                  <div class="col">
                    <div>
                      <img src="assets/images/gallery/product-images/03.png" class="img-fluid rounded-3" alt="">
                    </div>
                  </div>
                  <div class="col">
                    <div>
                      <img src="assets/images/gallery/product-images/04.png" class="img-fluid rounded-3" alt="">
                    </div>
                  </div>
                </div><!--end row-->
              </div>
           </div>
          </div>
          <div class="col-12 col-xl-6">
             <div class="product-details">
               <p class="mb-1">Women Topwar</p>
               <h2 class="mb-0">Solid Round Neck T-shirt</h2>
               <div class="d-flex align-items-center gap-2 my-3">  
                 <span class="ratings 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-fill"></i>
                 </span>      
                 <span class="font-14">(568 reviews)</span>                            
               </div>
                <div class="product-price d-flex align-items-center gap-2">
                   <span class="fs-3 fw-semibold">$357.89</span>
                   <span class="fs-6 text-decoration-line-through text-body-tertiary text-opacity-50">$864.99</span>
                   <span class="badge badge-pill bg-danger rounded-5">-25%</span>
                </div>
                <p class="product-short-desc mt-3 mb-0">A solid round neck T-shirt offers a timeless, versatile style perfect for casual or layered looks.
                  Made from soft, breathable fabric, it provides all-day comfort and effortless fashion.</p>

                 <div class="product-colors mt-4">
                   <p class="mb-2">Select Color</p>
                   <div class="product-color-list d-flex align-items-center gap-3">
                      <div class="product-color-list-item">
                        <input type="radio" class="btn-check" name="options-color" id="color-option1">
                        <label class="btn btn-product-color bg-primary" for="color-option1"></label>
                      </div>
                      <div class="product-color-list-item">
                       <input type="radio" class="btn-check" name="options-color" id="color-option2" checked>
                       <label class="btn btn-product-color bg-pink" for="color-option2"></label>
                     </div>
                     <div class="product-color-list-item">
                       <input type="radio" class="btn-check" name="options-color" id="color-option3">
                       <label class="btn btn-product-color bg-orange" for="color-option3"></label>
                     </div>
                     <div class="product-color-list-item">
                       <input type="radio" class="btn-check" name="options-color" id="color-option4">
                       <label class="btn btn-product-color bg-indigo" for="color-option4"></label>
                     </div>
                     <div class="product-color-list-item">
                       <input type="radio" class="btn-check" name="options-color" id="color-option5">
                       <label class="btn btn-product-color bg-black" for="color-option5"></label>
                     </div>
                   </div>
                 </div> 
                 <div class="product-size mt-4">
                  <div class="product-size-list d-flex align-items-center gap-3">
                     <div class="product-size-list-item">
                       <input type="radio" class="btn-check" name="options-size" id="size-option1">
                       <label class="btn btn-outline-dark btn-product-size" for="size-option1">S</label>
                     </div>
                     <div class="product-size-list-item">
                      <input type="radio" class="btn-check" name="options-size" id="size-option2" checked>
                      <label class="btn btn-outline-dark btn-product-size" for="size-option2">M</label>
                    </div>
                    <div class="product-size-list-item">
                      <input type="radio" class="btn-check" name="options-size" id="size-option3">
                      <label class="btn btn-outline-dark btn-product-size" for="size-option3">L</label>
                    </div>
                    <div class="product-size-list-item">
                      <input type="radio" class="btn-check" name="options-size" id="size-option4">
                      <label class="btn btn-outline-dark btn-product-size" for="size-option4">XL</label>
                    </div>
                    <div class="product-size-list-item">
                      <input type="radio" class="btn-check" name="options-size" id="size-option5">
                      <label class="btn btn-outline-dark btn-product-size" for="size-option5">XXL</label>
                    </div>
                  </div>
                </div>
                 <div class="product-quantity mt-4">
                   <p class="mb-2">Quantity</p>
                   <div class="input-group">
                     <button class="btn border border-2 border-end-0" data-decrement type="button"><i class="bi bi-dash"></i></button>
                     <input type="number" class="form-control border-2 text-center" min="0" value="1" readonly>
                     <button class="btn border border-2 border-start-0" data-increment type="button"><i class="bi bi-plus"></i></button>
                   </div>
                 </div>

                 <div class="product-cart-buttons d-grid d-md-flex align-items-center gap-3 mt-4">
                    <button type="button" class="btn btn-dark border border-2 rounded-5 border-dark py-2 px-5 d-flex align-items-center justify-content-center gap-2 w-100"><i class="bi bi-cart-plus"></i>Add to cart</button>
                    <button type="button" class="btn border border-2 py-2 px-5 rounded-5 d-flex align-items-center justify-content-center gap-2"><i class="bi bi-heart"></i>wishlist</button>    
                 </div>

                 <div class="mt-4">
                   <p class="mb-2 d-flex align-items-center gap-2 font-14"><i class="bi bi-truck"></i>
                     <span><span class="fw-semibold">Free shipping & returns:</span> Enjoy free shipping and returns on all orders over $200!</span></p>
                   <p class="mb-2 d-flex align-items-center gap-2 font-14"><i class="bi bi-alarm"></i><span><span class="fw-semibold">Estimated Delivery:</span> International: 10-15 days | United States: 8-10 days</span></p>
                   <p class="mb-0 mt-3 d-flex align-items-center gap-2 font-14"><i class="bi bi-share"></i><span>Share this product</span></p>
                   <div class="mt-2 d-flex align-items-center gap-2 product-share-link">
                      <a href="javascript:;" class="btn btn-sm btn-outline-dark border"><i class="bi bi-facebook"></i></a>
                      <a href="javascript:;" class="btn btn-sm btn-outline-dark border"><i class="bi bi-twitter-x"></i></a>
                      <a href="javascript:;" class="btn btn-sm btn-outline-dark border"><i class="bi bi-linkedin"></i></a>
                      <a href="javascript:;" class="btn btn-sm btn-outline-dark border"><i class="bi bi-instagram"></i></a>
                      <a href="javascript:;" class="btn btn-sm btn-outline-dark border"><i class="bi bi-snapchat"></i></a>
                   </div>
                 </div>
             </div>
          </div>
       </div><!--end row-->
      </div>
    </div>
  </div>
</div>
<!-- end quick view modal -->


    <!-- start search sodal -->
    <div class="modal fade search-modal" id="searchModal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content p-lg-2 p-0">
          <div class="p-4">
            <div class="d-flex align-items-center justify-content-between">
              <h1 class="modal-title fs-5 mb-0">Search</h1>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
             <form class="position-relative mt-3">
                <input type="text" class="form-control form-control-lg form-control-search pe-5 border-2" placeholder="Search the products">
                <span class="position-absolute top-50 end-0 translate-middle-y"><i class="bi bi-search fs-6 me-3"></i></span>
             </form>
             <div class="search-keywords mt-4">
              <h5 class="mb-3">Top searches keywords</h5>
              <div class="d-flex align-items-center flex-nowrap gap-2 overflow-x-auto">
                <button type="button" class="btn border border-2 px-4 rounded-5 flex-shrink-0">shirts</button>
                <button type="button" class="btn border border-2 px-4 rounded-5 flex-shrink-0">jeans</button>
                <button type="button" class="btn border border-2 px-4 rounded-5 flex-shrink-0">shoes</button>
                <button type="button" class="btn border border-2 px-4 rounded-5 flex-shrink-0">women fashion</button>
                <button type="button" class="btn border border-2 px-4 rounded-5 flex-shrink-0">men shirts</button>
                <button type="button" class="btn border border-2 px-4 rounded-5 flex-shrink-0">laptops</button>
                <button type="button" class="btn border border-2 px-4 rounded-5 flex-shrink-0">sneakers</button>
                <button type="button" class="btn border border-2 px-4 rounded-5 flex-shrink-0">dressess</button>
              </div>
            </div>
           </div>
          <div class="modal-body p-4">
            <div class="top-categories">
              <h5 class="mb-3">Top searches categories</h5>
              <div class="swiper search-category-slider">
                <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <div class="card rounded-3 border-0">
                      <div class="card-body p-0">
                        <a href="javascript:;" class="btn border-2 bg-white px-4 position-absolute top-50 start-50 translate-middle">Bags</a>
                        <a href="javascript:;">
                          <img src="assets/images/gallery/search-box/01.png" class="img-fluid rounded-3" alt="">
                        </a>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="card rounded-3 border-0">
                      <div class="card-body p-0">
                        <a href="javascript:;" class="btn border-2 bg-white px-4 position-absolute top-50 start-50 translate-middle">TShirt</a>
                        <a href="javascript:;">
                          <img src="assets/images/gallery/search-box/02.png" class="img-fluid rounded-3" alt="">
                        </a>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="card rounded-3 border-0">
                      <div class="card-body p-0">
                        <a href="javascript:;" class="btn border-2 bg-white px-4 position-absolute top-50 start-50 translate-middle">Sunglass</a>
                        <a href="javascript:;">
                          <img src="assets/images/gallery/search-box/03.png" class="img-fluid rounded-3" alt="">
                        </a>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="card rounded-3 border-0">
                      <div class="card-body p-0">
                        <a href="javascript:;" class="btn border-2 bg-white px-4 position-absolute top-50 start-50 translate-middle">Watches</a>
                        <a href="javascript:;">
                          <img src="assets/images/gallery/search-box/04.png" class="img-fluid rounded-3" alt="">
                        </a>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="card rounded-3 border-0">
                      <div class="card-body p-0">
                        <a href="javascript:;" class="btn border-2 bg-white px-4 position-absolute top-50 start-50 translate-middle">Shoes</a>
                        <a href="javascript:;">
                          <img src="assets/images/gallery/search-box/05.png" class="img-fluid rounded-3" alt="">
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="recently-viewed mt-5">
              <h5 class="mb-3">Recently viewed products</h5>
              <div class="d-flex flex-column gap-3">
                <div class="d-flex flex-column flex-lg-row align-items-lg-center gap-3 border p-3 rounded-3">
                   <a href="javascript:;">
                       <img src="assets/images/gallery/categories/01.png" class="rounded-3" width="100" alt="">
                   </a>
                    <div class="flex-grow-1">
                      <h4 class="mb-1">$149</h4>
                       <p class="mb-0">Light Gray Formal Shirt</p>
                       <div class="ratings fs-6 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-fill"></i>
                      </div>
                    </div>
                    <div class="d-grid gap-2">
                       <a href="javascript:;" class="btn btn-dark border border-dark px-4">Buy Now</a>
                       <a href="javascript:;" class="btn btn-light border px-4">Go To shop</a>
                    </div>
                 </div>
                 <div class="d-flex flex-column flex-lg-row align-items-lg-center gap-3 border p-3 rounded-3">
                  <a href="javascript:;">
                      <img src="assets/images/gallery/categories/02.png" class="rounded-3" width="100" alt="">
                  </a>
                   <div class="flex-grow-1">
                     <h4 class="mb-1">$479</h4>
                      <p class="mb-0">Light Gray Formal Shirt</p>
                      <div class="ratings fs-6 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-fill"></i>
                     </div>
                   </div>
                   <div class="d-grid gap-2">
                      <a href="javascript:;" class="btn btn-dark border border-dark px-4">Buy Now</a>
                      <a href="javascript:;" class="btn btn-light border px-4">Go To shop</a>
                   </div>
                </div>
                <div class="d-flex flex-column flex-lg-row align-items-lg-center gap-3 border p-3 rounded-3">
                  <a href="javascript:;">
                      <img src="assets/images/gallery/categories/03.png" class="rounded-3" width="100" alt="">
                  </a>
                   <div class="flex-grow-1">
                     <h4 class="mb-1">$359</h4>
                      <p class="mb-0">Light Gray Formal Shirt</p>
                      <div class="ratings fs-6 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-fill"></i>
                     </div>
                   </div>
                   <div class="d-grid gap-2">
                      <a href="javascript:;" class="btn btn-dark border border-dark px-4">Buy Now</a>
                      <a href="javascript:;" class="btn btn-light border px-4">Go To shop</a>
                   </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- end search modal -->

     
  <!--JS file-->
  <script src="assets/js/jquery.min.js"></script>
  <script src="assets/js/bootstrap.bundle.min.js"></script>
  <!-- Swiper JS -->
  <script src="assets/plugins/swiper/js/swiper-bundle.min.js"></script>
  <script src="assets/js/search-slider.js"></script>
  <!-- Initialize Swiper -->
  <script src="assets/js/index.js"></script>
   <!-- Initialize Swiper -->
   <script src="assets/js/product-details.js"></script>

  <script src="assets/js/main.js"></script>
</body>

</html>