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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Universal Innovation LLP</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"
        integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/responsive.css">

    <!-- ==============================fontawesome==================================== -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"
        integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <!-- ==============================bootsrap=============================== -->

    <link rel="stylesheet" href="js/bootstrap-min.css">

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

    <link rel="stylesheet" href="icon/icomoon/style.css">
    <!-- css -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <link rel="stylesheet" href="css/animate.css">


    <!-- ==============================carousel css============================== -->

    <link rel="stylesheet" href="js/owl-carousel-min.css">
    <link rel="stylesheet" href="js/owl-theme-min.css">

    <!-- ==========================aos css============================= -->
    <link rel="stylesheet" href="js/aos.css">



    <link rel="stylesheet" href="css/vertical_carousal.min.css">

    <script src="js/vertical_carousal.min.js"></script>
    <!-- ===================================jquery js===================================== -->
    <script src="js/jquery-min.js"></script>

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

    <!-- ===================================Carousel js===================================== -->
    <script type="text/javascript" src="js/owl-carousel-min.js"></script>

    <!-- =================================aos js============================== -->
    <script src="js/aos.js"></script>


    <!-- =================================slick slider link============================== -->
    <link rel="stylesheet" href="js/slick-min.css">
    <link rel="stylesheet" href="js/slick-theme-min.css">

    <!-- =============================zoomer======================= -->
    <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.6.0/css/all.css">
    <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.6.0/css/sharp-regular.css">
    <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@100;800&display=swap" rel="stylesheet">

    <!-- =================================slick slider link============================== -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>


    <!-- =================================slick slider js============================== -->
    <script src="js/slick-min.js"></script>


    <!-- =================================text animation js============================== -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>


    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/swiper-bundle.min.js"></script>
    <script src="js/bootstrap-select.min.js"></script>
    <script src="js/count-down.js"></script>
    <script src="js/infinityslide.js"></script>
    <script src="js/wow.min.js"></script>


    <script src="js/carousel.js"></script>
    <script src="js/main.js"></script>

</head>



<body>

    <!-- 
    <div class="lux-loader">
        <div class="loader-inner">

            <div class="furniture-icon">
                <svg width="80" height="80" viewBox="0 0 64 64" fill="none">
                    <path d="M10 30H54V40H10V30Z" stroke="#c6a87d" stroke-width="2" />
                    <path d="M14 30V24C14 20 18 18 22 18H42C46 18 50 20 50 24V30" stroke="#c6a87d" stroke-width="2" />
                    <path d="M14 40V46M50 40V46" stroke="#c6a87d" stroke-width="2" />
                </svg>
            </div>

            <div class="circle-spin"></div>

            <p>Loading Collection...</p>

        </div>
    </div> -->



    <main id="wrapper">
        <!-- <div class="tf-topbar topbar-s2 d-none d-md-flex">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-4">
                        <div class="tf-list">
                            <ul>
                                <li><a href="about-us.php" class="link">Company Profile</a></li>
                                <li><span class="br-line type-vertical"></span></li>
                                <li><a href="#" class="link">Contact Us</a></li>
                                <li><span class="br-line type-vertical"></span></li>
                                <li><a href="#" class="link">Wishlist</a></li>
                                <li><span class="br-line type-vertical"></span></li>
                                <li><a href="#" class="link">Order Tracking</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-4 responsive-display">
                        <div class="header-para">
                            <p>100% Secure delivery without contacting the courier</p>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="tf-list-right">
                            <ul>
                                <li>Need help? Call Us:<a href="#" class="link"> <span> +91 8250111179</span></a></li>
                                <li><a class="link" href="#"><i class="fab fa-facebook-f"></i></a></li>
                                <li><a class="link" href="#"><i class="fab fa-instagram"></i></a></li>
                                <li><a class="link" href="#"><i class="fab fa-pinterest-p"></i></a></li>
                                <li><a class="link" href="#"><i class="fa-brands fa-x-twitter"></i></a></li>
                            </ul>

                        </div>
                    </div>
                </div>
            </div>
        </div> -->
        <!-- /Topbar -->
        <!-- Header -->
        <header class="tf-header header-s3 has-by-category">
            <div class="header-inner_wrap">
                <div class="container-fluid">
                    <div class="header-inner">
                        <div class="box-open-menu-mobile d-xl-none">
                            <a href="#mobileMenu" data-bs-toggle="offcanvas" class="btn-open-menu">
                                <i class="icon icon-List"></i>
                            </a>
                        </div>
                        <div class="box-open-header-bottom">
                            <div class="btn-open-header-bottom cs-pointer">
                                <i class="icon icon-List fs-24"></i>
                            </div>
                        </div>
                        <div class="header-left">
                            <a href="index.php" class="logo-site">
                                <img loading="lazy" width="150" src="images/logo.png" alt="Image">
                            </a>
                        </div>
                        <div class="header-center d-none d-xl-block">
                            <form action="" class="form_search-product">
                                <!-- <div class="select-category">
                                    <select name="product_cate" id="product_cate" class="dropdown_product_cate">
                                        <option value="all" selected="selected">All Categories</option>
                                        <option class="level-0" value="skincare">Skincare</option>
                                        <option class="level-0" value="makeup">Makeup</option>
                                        <option class="level-0" value="haircare">Haircare</option>
                                        <option class="level-0" value="body-care">Body care</option>
                                        <option class="level-0" value="fragrances">Fragrances</option>
                                        <option class="level-0" value="lip-care">Lip care</option>
                                        <option class="level-0" value="nail-care">Nail care</option>
                                        <option class="level-0" value="beauty-tools-accessories">Beauty tools &
                                            accessories
                                        </option>
                                        <option class="level-0" value="natural-beauty">Natural beauty</option>
                                        <option class="level-0" value="baby-kids-care">Baby & Kids Care</option>
                                        <option class="level-0" value="eye-care">Eye care</option>
                                    </select>
                                </div> -->
                                <!-- <span class="br-line type-vertical"></span> -->
                                <fieldset class="fieldset-search">
                                    <input class="ipt" type="text" placeholder="Search for products..." required>
                                    <button type="submit" class="btn-action">
                                        <i class="icon icon-MagnifyingGlass"></i>
                                    </button>
                                </fieldset>
                            </form>
                        </div>
                        <div class="header-right">
                            <!-- <ul class="nav-icon-list">
                                <li class="d-none d-sm-block d-xl-none">
                                    <a href="#search" data-bs-toggle="modal" class="nav-icon-item link">
                                        <i class="icon icon-MagnifyingGlass"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="#sign" data-bs-toggle="modal" class="nav-icon-item link has-text">
                                        <i class="icon icon-User"></i>
                                        <span class="d-none d-xl-block">
                                            Account
                                        </span>
                                    </a>
                                </li>
                                <li class="d-none d-sm-block">
                                    <a href="#" class="nav-icon-item link has-text">
                                        <i class="icon icon-HeartStraight"></i>
                                        <span class="d-none d-xl-block">
                                            Wishlist
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#shoppingCart" data-bs-toggle="offcanvas"
                                        class="nav-icon-item link has-text shop-cart">
                                        <i class="icon icon-Handbag"></i>
                                        <span class="d-none d-xl-block">
                                            Cart
                                        </span>
                                        <span class="count">
                                            12
                                        </span>
                                    </a>
                                </li>
                            </ul> -->
                            <div class="tf-list-right">
                                <ul>
                                    <li><a class="link" href="#"><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a class="link" href="#"><i class="fab fa-instagram"></i></a></li>
                                    <li><a class="link" href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
                                    <!-- <li><a class="link" href="#"><i class="fa-brands fa-x-twitter"></i></a></li> -->
                                </ul>

                            </div>

                            <!-- <div class="support-box">
                                <div class="support-icon">
                                    <i class="fa-regular fa-headphones"></i>
                                </div>
                                <div class="support-text">
                                    <h3>+91 8250111179</h3>
                                    <p>24/7 Support Center</p>
                                </div>
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="header-bottom_wrap d-none d-xl-block">
                <div class="container-fluid">
                    <div class="header-bottom">
                        <div class="col-left">
                            <!-- <div class="nav-category-wrap main-action-active">
                                <div class="btn-nav-drop btn-active text-nowrap">
                                    <i class="icon icon-List fs-24"></i>
                                    <span class="name-category fw-medium">Browse All Categories</span>
                                    <i class="icon icon-CaretDown"></i>
                                </div>
                                <ul class="box-nav-category active-item">
                                    <li>
                                        <a href="products-category.php" class="nav-category_link">
                                            Namkeen Snacks
                                        </a>
                                    </li>
                                    <li>
                                        <a href="products-category.php" class="nav-category_link">
                                            Namkeen
                                        </a>
                                    </li>
                                    <li>
                                        <a href="products-category.php" class="nav-category_link">
                                            Roasted Snacks
                                        </a>
                                    </li>
                                    <li>
                                        <a href="products-category.php" class="nav-category_link">
                                            Traditional Indian Snacks
                                        </a>
                                    </li>
                                    <li>
                                        <a href="products-category.php" class="nav-category_link">
                                            Spicy Snacks
                                        </a>
                                    </li>
                                    <li>
                                        <a href="products-category.php" class="nav-category_link">
                                            Diet & Light Snacks
                                        </a>
                                    </li>
                                    <li>
                                        <a href="products-category.php" class="nav-category_link">
                                            Best Selling Products
                                        </a>
                                    </li>
                                    <li>
                                        <a href="products-category.php" class="nav-category_link">
                                            Export Quality Products
                                        </a>
                                    </li>
                                </ul>
                            </div> -->
                            <nav class="box-navigation">
                                <ul class="box-nav-menu">
                                    <li class="menu-item position-relative">
                                        <a href="index.php" class="item-link">
                                            <span class="text cus-text">
                                                Home
                                            </span>
                                        </a>
                                    </li>
                                    <li class="menu-item position-relative">
                                        <a href="about-us.php" class="item-link">
                                            <span class="text cus-text">
                                                Company Profile
                                            </span>
                                        </a>
                                    </li>
                                    <li class="menu-item position-relative">
                                        <a href="#" class="item-link">
                                            <span class="text cus-text">
                                                Products
                                            </span>
                                            <i class="icon icon-CaretDown"></i>
                                        </a>
                                        <div class="sub-menu mega-menu-item">
                                            <ul class="sub-menu_list">
                                                <li>
                                                    <a href="products-category.php" class="sub-menu_link has-text">
                                                        <span class="cus-text">
                                                            Spicy
                                                        </span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="products-category.php" class="sub-menu_link has-text">
                                                        <span class="cus-text">
                                                            Namkeen
                                                        </span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="products-category.php" class="sub-menu_link has-text">
                                                        <span class="cus-text">
                                                            Khatta
                                                        </span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="products-category.php" class="sub-menu_link has-text">
                                                        <span class="cus-text">
                                                            Sweet & Spicy
                                                        </span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="products-category.php" class="sub-menu_link has-text">
                                                        <span class="cus-text">
                                                            Besan Based
                                                        </span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                    <li class="menu-item position-relative">
                                        <a href="best-seller.php" class="item-link">
                                            <span class="text cus-text">
                                                Best Sellers
                                            </span>
                                        </a>
                                    </li>
                                    <li class="menu-item position-relative">
                                        <a href="new-arrival.php" class="item-link">
                                            <span class="text cus-text">
                                                New Arrivals
                                            </span>
                                        </a>
                                    </li>
                                    <li class="menu-item position-relative">
                                        <a href="testimonial.php" class="item-link">
                                            <span class="text cus-text">
                                                Our Testimonial
                                            </span>
                                        </a>
                                    </li>
                                    <li class="menu-item position-relative">
                                        <a href="contact-us.php" class="item-link">
                                            <span class="text cus-text">
                                                Contact Us
                                            </span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                        <div class="col-right">
                            <div class="support-box">
                                <div class="support-icon">
                                    <i class="fa-regular fa-headphones"></i>
                                </div>
                                <div class="support-text">
                                    <h3>1800 123 4567</h3>
                                    <p>24/7 Support Center</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- /Header -->

    </main>
    <!-- Mobile Menu -->
    <div class="offcanvas offcanvas-start canvas-mb" id="mobileMenu">
        <div class="canvas-header">
            <span class="icon-close-popup" data-bs-dismiss="offcanvas">
                <i class="icon icon-X2"></i>
            </span>
            <form class="form-search-nav">
                <fieldset>
                    <input type="text" placeholder="What are you looking for?" required>
                </fieldset>
                <button type="submit" class="btn-action">
                    <i class="icon icon-MagnifyingGlass"></i>
                </button>
            </form>
        </div>
        <div class="canvas-body">
            <div class="mb-content-top">
                <ul class="nav-ul-mb" id="wrapper-menu-navigation"></ul>
            </div>
        </div>
    </div>
    <!-- /Mobile Menu -->
    <!-- Forgot Pass -->
    <div class="modal modalCentered fade modal-log modal-log_forgot" id="modalForgot">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <span class="icon-close-popup" data-bs-dismiss="modal">
                    <i class="icon-X2"></i>
                </span>
                <div class="modal-heading text-center">
                    <h3 class="title-pop mb-8">Forgot Password</h3>
                    <p class="desc-pop cl-text-2">We’ll send instructions to reset your password.</p>
                </div>
                <div class="modal-main">
                    <form class="form-log">
                        <div class="form-content">
                            <fieldset class="tf-field">
                                <label for="forgot-user" class="tf-lable fw-medium">
                                    Username or email address
                                    <span class="text-primary">*</span>
                                </label>
                                <input type="text" id="forgot-user" placeholder="Username or email address*" required>
                            </fieldset>
                        </div>
                        <div class="group-action">
                            <button type="submit" class="tf-btn animate-btn w-100">
                                Get Reset Code
                            </button>
                            <p class="orther-log text-center">
                                Remember your password?
                                <a href="#sign" data-bs-toggle="modal" class="text-primary text-decoration-underline">
                                    Sign In
                                </a>
                            </p>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- /Forgot Pass -->

    <!-- Share -->
    <div class="modal modalCentered fade modal-share" id="share">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-heading d-flex align-items-center justify-content-between">
                    <h4 class="title-pop">Share</h4>
                    <span class="cs-pointer d-flex link" data-bs-dismiss="modal">
                        <i class="icon-X2 fs-24"></i>
                    </span>
                </div>
                <div class="modal-main">
                    <ul class="tf-social-icon-2 hv-dark mb-20">
                        <li>
                            <a href="https://www.facebook.com/">
                                <i class="icon icon-FacebookLogo"></i>
                            </a>
                        </li>
                        <li>
                            <a href="https://x.com/">
                                <i class="icon icon-XLogo"></i>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.instagram.com/">
                                <i class="icon icon-InstagramLogo"></i>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.tiktok.com/">
                                <i class="icon icon-TiktokLogo"></i>
                            </a>
                        </li>
                    </ul>
                    <div class="wrap-code btn-coppy-text">
                        <p class="coppyText cl-text-2" id="coppyText">http://themesflat.com</p>
                        <div class="btn-action-copy tf-btn">Copy</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /Share -->
    <!-- Ask -->
    <div class="modal modalCentered fade modal-log modal-ask" id="ask">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <span class="icon-close-popup" data-bs-dismiss="modal">
                    <i class="icon-X2"></i>
                </span>
                <div class="modal-heading text-center">
                    <h3 class="title-pop mb-8">Ask A Question</h3>
                    <p class="desc-pop cl-text-2">Have a question? Ask us today!</p>
                </div>
                <div class="modal-main">
                    <form class="form-log mb-20">
                        <div class="form-content">
                            <fieldset class="tf-field">
                                <label for="name-ask" class="tf-lable fw-medium">
                                    Your Name<span class="text-primary">*</span>
                                </label>
                                <input type="text" id="name-ask" placeholder="Your Name*" required>
                            </fieldset>
                            <fieldset class="tf-field">
                                <label for="email-ask" class="tf-lable fw-medium">
                                    Your Email<span class="text-primary">*</span>
                                </label>
                                <input type="email" id="email-ask" placeholder="Your Email*" required>
                            </fieldset>
                            <fieldset class="tf-field">
                                <label for="phone-ask" class="tf-lable fw-medium">
                                    Your phone
                                </label>
                                <input type="number" id="phone-ask" placeholder="Your phone" required>
                            </fieldset>
                            <fieldset class="tf-field">
                                <label for="message-ask" class="tf-lable fw-medium">
                                    Your Message
                                    <span class="text-primary">*</span>
                                </label>
                                <textarea id="message-ask" placeholder="Your Message*" required></textarea>
                            </fieldset>
                        </div>
                        <div class="group-action">
                            <button type="submit" class="tf-btn animate-btn w-100">
                                Subcribe
                            </button>
                        </div>
                    </form>
                    <ul class="tf-social-icon-2 hv-dark justify-content-center">
                        <li>
                            <a href="https://www.facebook.com/">
                                <i class="icon icon-FacebookLogo"></i>
                            </a>
                        </li>
                        <li>
                            <a href="https://x.com/">
                                <i class="icon icon-XLogo"></i>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.instagram.com/">
                                <i class="icon icon-InstagramLogo"></i>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.tiktok.com/">
                                <i class="icon icon-TiktokLogo"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- /Ask -->
    <!-- Compare -->
    <div class="offcanvas offcanvas-bottom canvas-compare" id="compare">
        <div class="canvas-wrapper">
            <div class="canvas-body">
                <div class="container">
                    <div class="tf-compare-list main-list-clear wrap-empty_text">
                        <div class="tf-compare-head">
                            <h4 class="title letter-space-0">Compare products</h4>
                        </div>
                        <div class="tf-compare-offcanvas list-empty">
                            <p class="box-text_empty cl-text-2">Your Compare is curently empty</p>
                            <div class="tf-compare-item file-delete">
                                <a href="#">
                                    <div class="icon remove">
                                        <i class="icon-X2"></i>
                                    </div>
                                    <img class="radius-3 aspect-ratio-1" width="660" height="660"
                                        src="assets/images/product/mental/product-1.jpg" alt="Image">
                                </a>
                            </div>
                            <div class="tf-compare-item file-delete">
                                <a href="#">
                                    <div class="icon remove">
                                        <i class="icon-X2"></i>
                                    </div>
                                    <img class="radius-3 aspect-ratio-1" width="660" height="660"
                                        src="assets/images/product/mental/product-2.jpg" alt="Image">
                                </a>
                            </div>
                            <div class="tf-compare-item file-delete">
                                <a href="#">
                                    <div class="icon remove">
                                        <i class="icon-X2"></i>
                                    </div>
                                    <img class="radius-3 aspect-ratio-1" width="660" height="660"
                                        src="assets/images/product/mental/product-3.jpg" alt="Image">
                                </a>
                            </div>
                        </div>
                        <div class="tf-compare-buttons justify-content-center">
                            <a href="#" class="tf-btn animate-btn">Compare </a>
                            <div class="tf-btn btn-white btn-stroke clear-list-empty tf-compare-button-clear-all">
                                Clear All
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /Compare -->
    <!-- Quick Add -->
    <div class="modal modalCentered fade modal-quickadd" id="quickAdd">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="d-flex align-items-center justify-content-between mb-20">
                    <h5>Quick Add</h5>
                    <span class="d-flex cs-pointer link" data-bs-dismiss="modal">
                        <i class="icon icon-X2 fs-24"></i>
                    </span>
                </div>
                <div class="tf-product-quick_add tf-quick-prd_variant">
                    <div class="product-mini-view">
                        <a href="#" class="prd-image">
                            <img class="img-product" width="80" height="107"
                                src="assets/images/product/single/detail-1.jpg" alt="Image Product">
                        </a>
                        <div class="prd-content">
                            <a href="#" class="prd-name fw-medium link-underline link text-capitalize">
                                linen slim-fit shirt
                            </a>
                            <div class="price-wrap">
                                <span class="price-new text-primary fw-semibold price-on-sale">$79.99</span>
                                <span class="price-old text-caption-01 cl-text-3">$99,99</span>
                            </div>
                        </div>
                    </div>
                    <div class="quick-variant-picker picker_color">
                        <div class="variant-picker_label mb-12">
                            <div>
                                Colors:
                                <span class="variant__value text-capitalize fw-medium">Gray</span>
                            </div>
                        </div>
                        <div class="variant-picker_values">
                            <div class="hover-tooltip tooltip-bot color_btn style-image active">
                                <div class="img">
                                    <img loading="lazy" width="60" height="60"
                                        src="assets/images/product/single/img_square/detail-1_2.jpg"
                                        data-src="assets/images/product/single/detail-1.jpg" alt="img">
                                </div>
                                <span class="tooltip color__label">Green</span>
                            </div>
                            <div class="hover-tooltip tooltip-bot color_btn style-image">
                                <div class="img">
                                    <img loading="lazy" width="60" height="60"
                                        src="assets/images/product/single/img_square/detail-1_5.jpg"
                                        data-src="assets/images/product/single/detail-1_5.jpg" alt="img">
                                </div>
                                <span class="tooltip color__label">Gray</span>
                            </div>
                        </div>
                    </div>
                    <div class="quick-variant-picker picker_size">
                        <div class="variant-picker_label mb-12">
                            <div>
                                Size:
                                <span class="variant__value text-capitalize fw-medium">L</span>
                            </div>
                            <a href="#findSize" data-bs-toggle="modal"
                                class="tf-btn-line-2 style-primary text-caption-01 fw-semibold">
                                Size Guide
                            </a>
                        </div>
                        <div class="variant-picker_values">
                            <span class="size_btn" data-quick-size="S" data-quick-price="39.99">S</span>
                            <span class="size_btn" data-quick-size="M" data-quick-price="59.99">M</span>
                            <span class="size_btn active" data-quick-size="L" data-quick-price="79.99">L</span>
                            <span class="size_btn" data-quick-size="XL" data-quick-price="89.99">XL</span>
                            <span class="size_btn disabled" data-quick-size="XX" data-quick-price="99.99">XXL</span>
                        </div>
                    </div>
                    <div class="product-total-quantity">
                        <p class="">
                            Quantity:
                        </p>
                        <div class="group-action">
                            <div class="wg-quantity">
                                <button class="btn-quantity btn-decrease">
                                    <i class="icon icon-minus"></i>
                                </button>
                                <input class="quantity-product" type="text" name="number" value="1">
                                <button class="btn-quantity btn-increase">
                                    <i class="icon icon-plus"></i>
                                </button>
                            </div>
                            <a href="#shoppingCart" data-bs-toggle="offcanvas"
                                class="btn-action-price tf-btn type-xl animate-btn w-100">
                                Add to Cart
                                <span class="d-none d-sm-block d-md-none d-lg-block">&nbsp;-&nbsp;</span>
                                <span class="price-add d-none d-sm-block d-md-none d-lg-block">$79.99</span>
                            </a>
                        </div>
                        <a href="#" class="tf-btn type-xl btn-primary animate-btn w-100">
                            Buy It Now
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /Quick Add -->
    <!-- Quick View -->
    <div class="offcanvas offcanvas-end canvas-quickview" id="quickView">
        <div class="mini-quick-image">
            <div class="wrap-quick wrapper-scroll-quickview">
                <div class="image">
                    <img class="aspect-ratio-1" loading="lazy" width="340" height="444"
                        src="assets/images/product/mental/product-1.jpg" alt="Image">
                </div>
                <div class="image">
                    <img class="aspect-ratio-1" loading="lazy" width="340" height="444"
                        src="assets/images/product/mental/single/detail-1.jpg" alt="Image">
                </div>
                <div class="image">
                    <img class="aspect-ratio-1" loading="lazy" width="340" height="444"
                        src="assets/images/product/mental/single/detail-1_2.jpg" alt="Image">
                </div>
                <div class="image">
                    <img class="aspect-ratio-1" loading="lazy" width="340" height="444"
                        src="assets/images/product/mental/single/detail-1_3.jpg" alt="Image">
                </div>
                <div class="image">
                    <img class="aspect-ratio-1" loading="lazy" width="340" height="444"
                        src="assets/images/product/mental/single/detail-1_5.jpg" alt="Image">
                </div>
                <div class="image">
                    <img class="aspect-ratio-1" loading="lazy" width="340" height="444"
                        src="assets/images/product/mental/single/detail-1_6.jpg" alt="Image">
                </div>
            </div>
        </div>
        <div class="wrap-canvas">
            <div class="canvas-header ps-md-0">
                <h5 class="title-pop">Quick View</h5>
                <span class="icon-close-popup" data-bs-dismiss="offcanvas">
                    <i class="icon icon-X2"></i>
                </span>
            </div>
            <div class="canvas-body ps-md-0">
                <div class="tf-product-quick_view tf-quick-prd_variant">
                    <div class="tf-product-info-heading">
                        <p class="product-infor-cate text-caption-01 mb-4">
                            Mental
                        </p>
                        <h3 class="product-infor-name mb-12 letter-space-0">
                            Sports Research® Organic Greens Superfood Powder.
                        </h3>
                        <div class="product-infor-meta mb-20">
                            <div class="meta_rate">
                                <div class="star-wrap normal d-flex align-items-center">
                                    <i class="icon icon-Star"></i>
                                    <i class="icon icon-Star"></i>
                                    <i class="icon icon-Star"></i>
                                    <i class="icon icon-Star"></i>
                                    <i class="icon icon-Star"></i>
                                </div>
                                <span class="text-caption-01 cl-text-2">
                                    (134 reviews)
                                </span>
                            </div>
                            <div class="br-line type-vertical"></div>
                            <div class="meta_sold">
                                <i class="icon icon-Lightning text-primary"></i>
                                <span class="text-caption-01 cl-text-2">18 sold in last 32 hours</span>
                            </div>
                        </div>
                        <div class="product-infor-price mb-12">
                            <h4 class="price-on-sale">$59.99</h4>
                            <div class="br-line type-vertical"></div>
                            <p class="cl-text-3 text-decoration-line-through">$98.99</p>
                            <span class="badge-sale text-white fw-semibold text-caption-02">
                                -25%
                            </span>
                        </div>
                        <p class="product-infor-desc cl-text-2 mb-12">
                            The garments labelled as Committed are designed with care and intention, created to bring a
                            sense of balance, comfort, and mindfulness — helping you feel good inside.
                        </p>
                        <div class="product-infor-reality lh-24">
                            <div class="ic d-flex">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <rect width="24" height="24" rx="4" fill="#101010" />
                                    <path
                                        d="M19.4569 11.7975C19.435 11.7481 18.9056 10.5738 17.7287 9.39687C16.1606 7.82875 14.18 7 12 7C9.81999 7 7.83937 7.82875 6.27124 9.39687C5.09437 10.5738 4.56249 11.75 4.54312 11.7975C4.51469 11.8614 4.5 11.9306 4.5 12.0006C4.5 12.0706 4.51469 12.1398 4.54312 12.2037C4.56499 12.2531 5.09437 13.4269 6.27124 14.6038C7.83937 16.1713 9.81999 17 12 17C14.18 17 16.1606 16.1713 17.7287 14.6038C18.9056 13.4269 19.435 12.2531 19.4569 12.2037C19.4853 12.1398 19.5 12.0706 19.5 12.0006C19.5 11.9306 19.4853 11.8614 19.4569 11.7975ZM12 14.5C11.5055 14.5 11.0222 14.3534 10.6111 14.0787C10.1999 13.804 9.87951 13.4135 9.69029 12.9567C9.50107 12.4999 9.45157 11.9972 9.54803 11.5123C9.64449 11.0273 9.88259 10.5819 10.2322 10.2322C10.5819 9.8826 11.0273 9.6445 11.5123 9.54804C11.9972 9.45157 12.4999 9.50108 12.9567 9.6903C13.4135 9.87952 13.804 10.2 14.0787 10.6111C14.3534 11.0222 14.5 11.5055 14.5 12C14.5 12.663 14.2366 13.2989 13.7678 13.7678C13.2989 14.2366 12.663 14.5 12 14.5Z"
                                        fill="white" />
                                </svg>
                            </div>
                            28 people are viewing this right now
                        </div>
                    </div>
                    <div class="br-line"></div>
                    <div class="tf-product-variant">
                        <div class="tf-product-total-quantity">
                            <p class="">
                                Quantity:
                            </p>
                            <div class="group-action">
                                <div class="wg-quantity">
                                    <button class="btn-quantity btn-decrease">
                                        <i class="icon icon-minus"></i>
                                    </button>
                                    <input class="quantity-product" type="text" name="number" value="1">
                                    <button class="btn-quantity btn-increase">
                                        <i class="icon icon-plus"></i>
                                    </button>
                                </div>
                                <a href="#shoppingCart" data-bs-toggle="offcanvas"
                                    class="btn-action-price tf-btn type-xl animate-btn w-100">
                                    Add to Cart
                                    <span class="d-none d-sm-block d-md-none d-lg-block">&nbsp;-&nbsp;</span>
                                    <span class="price-add d-none d-sm-block d-md-none d-lg-block">$59.99</span>
                                </a>
                            </div>
                            <a href="#" class="tf-btn type-xl btn-primary animate-btn w-100">
                                Buy It Now
                            </a>
                        </div>
                    </div>
                    <div class="box-action">
                        <a href="#" class="tf-btn-line-2 style-primary fw-semibold">
                            View Full Details
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /Quick View -->