﻿<!DOCTYPE html>
<html lang="zxx">

<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Carce- Mobile app eCommerce Template</title>
    <meta name="Googlebot" content="noindex">
    <meta name="description" content="Carce is an exclusive ecommerce mobile app template with 2 distinct layouts. This superb mobile app template for ecommerce embodies a professional-looking mobile website design while providing tons of features.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- ::::::::::::::Favicon icon::::::::::::::-->
    <link rel="shortcut icon" href="assets/images/favicon.ico" type="image/png">

    <!-- ::::::::::::::All Google Fonts::::::::::::::-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
    <link href="../../css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

    <!-- ::::::::::::::All CSS Files here :::::::::::::: -->
    <!-- Vendor CSS -->
    <link rel="stylesheet" href="assets/css/vendor/icomoon.css">

    <!-- Plugin CSS -->
    <link rel="stylesheet" href="assets/css/plugins/swiper-bundle.min.css">
    <link rel="stylesheet" href="assets/css/plugins/ion.rangeSlider.min.css">

    <!-- Style CSS -->
    <link rel="stylesheet" href="assets/css/style.css">

    <!-- Use the minified version files listed below for better performance and remove the files listed above -->
    <!-- <link rel="stylesheet" href="assets/css/vendor/vendor.min.css">
<link rel="stylesheet" href="assets/css/plugins/plugins.min.css">
<link rel="stylesheet" href="assets/css/style.min.css"> -->

</head>

<body>

    <main class="main-wrapper">

        <!-- ...:::Start User Event Section:::... -->
        <div class="header-section">
            <div class="container">
                <!-- Start User Event Area -->
                <div class="header-area">
                    <div class="header-top-area header-top-area--style-1">
                        <ul class="event-list">
                            <li class="list-item"><a href="#mobile-menu-offcanvas" area-label="mobile menu offcanvas svg icon" class="btn btn--size-33-33 btn--center btn--round btn--color-radical-red btn--bg-white btn--box-shadow main-menu offcanvas-toggle offside-menu">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16">
                                        <g id="Group_1" data-name="Group 1" transform="translate(-28 -63)">
                                            <path id="Rectangle_3" data-name="Rectangle 3" d="M0,0H5A2,2,0,0,1,7,2V5A2,2,0,0,1,5,7H2A2,2,0,0,1,0,5V0A0,0,0,0,1,0,0Z" transform="translate(28 63)" fill="#ff375f"></path>
                                            <path id="Rectangle_6" data-name="Rectangle 6" d="M2,0H5A2,2,0,0,1,7,2V5A2,2,0,0,1,5,7H0A0,0,0,0,1,0,7V2A2,2,0,0,1,2,0Z" transform="translate(28 72)" fill="#ff375f"></path>
                                            <path id="Rectangle_4" data-name="Rectangle 4" d="M2,0H7A0,0,0,0,1,7,0V5A2,2,0,0,1,5,7H2A2,2,0,0,1,0,5V2A2,2,0,0,1,2,0Z" transform="translate(37 63)" fill="#ff375f"></path>
                                            <path id="Rectangle_5" data-name="Rectangle 5" d="M2,0H5A2,2,0,0,1,7,2V7A0,0,0,0,1,7,7H2A2,2,0,0,1,0,5V2A2,2,0,0,1,2,0Z" transform="translate(37 72)" fill="#ff375f"></path>
                                        </g>
                                    </svg>
                                </a></li>
                            <li class="list-item">
                                <h2 class="title text-center">Home</h2>
                            </li>
                            <li class="list-item">
                                <ul class="list-child">
                                    <li class="list-item">
                                        <span class="notch-bg notch-bg--sunset-orange"></span>
                                        <a href="cart.html" area-label="Cart" class="btn btn--size-33-33 btn--center btn--round btn--color-radical-red btn--bg-white btn--box-shadow"><i class="icon icon-carce-cart"></i></a>
                                    </li>
                                    <li class="list-item">
                                        <span class="notch-bg notch-bg--emerald"></span>
                                        <a href="#profile-menu-offcanvas" area-label="User" class="btn btn--size-33-33 btn--center btn--round offcanvas-toggle offside-menu">
                                            <img class="img-fluid" height="33" width="33" src="assets/images/header-top-user-img.jpg" alt="user image"></a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- End User Event Area -->
            </div>
        </div>
        <!-- ...:::End User Event Section:::... -->

        <!--  Start Offcanvas Mobile Menu Section -->
        <div id="mobile-menu-offcanvas" class="offcanvas offcanvas-leftside offcanvas-mobile-menu-section">
            <!-- Start Offcanvas Header -->
            <div class="offcanvas-header flex-end">

                <div class="logo">
                    <a href="index.html"><img class="img-fluid" width="147" height="26" src="assets/images/logo.png" alt="image"></a>
                </div>

                <button class="offcanvas-close" aria-label="offcanvas svg icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="5.973" height="10.449" viewbox="0 0 5.973 10.449">
                        <path id="Icon_ionic-ios-arrow-back" data-name="Icon ionic-ios-arrow-back" d="M13.051,11.417,17,7.466a.747.747,0,0,0-1.058-1.054l-4.479,4.476a.745.745,0,0,0-.022,1.03l4.5,4.507A.747.747,0,1,0,17,15.37Z" transform="translate(-11.251 -6.194)"></path>
                    </svg>
                </button>
            </div>
            <!-- End Offcanvas Header -->

            <!-- Start Offcanvas Mobile Menu Wrapper -->
            <div class="offcanvas-mobile-menu-wrapper">
                <!-- Start Mobile Menu  -->
                <div class="mobile-menu-bottom">
                    <!-- Start Mobile Menu Nav -->
                    <div class="offcanvas-menu">
                        <ul>
                            <li>
                                <a href="index.html"><span>Home</span></a>
                            </li>
                            <li>
                                <a href="#"><span>Shop</span></a>
                                <ul class="mobile-sub-menu">
                                    <li><a href="shop.html">Shop</a></li>
                                    <li><a href="single-product.html">Product</a></li>
                                    <li><a href="shop-category.html">Shop Category</a></li>
                                </ul>

                            </li>
                            <li>
                                <a href="#"><span>Pages</span></a>
                                <ul class="mobile-sub-menu">
                                    <li><a href="chat.html">Chat</a></li>
                                    <li><a href="cart.html">Cart</a></li>
                                    <li><a href="wishlist.html">Wishlist</a></li>
                                    <li><a href="order.html">Order</a></li>
                                    <li><a href="login.html">Login</a></li>
                                    <li><a href="register.html">Register</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div> <!-- End Mobile Menu Nav -->
                </div> <!-- End Mobile Menu -->

                <!-- Start Mobile contact Info -->
                <div class="mobile-contact-info">
                    <address class="address">
                        <span>Address: 4710-4890 Breckinridge St, Fayettevill</span>
                        <span>Call Us: (+800) 345 678, (+800) 123 456</span>
                        <span>Email: yourmail@mail.com</span>
                    </address>
                </div>
                <!-- End Mobile contact Info -->

            </div> <!-- End Offcanvas Mobile Menu Wrapper -->
        </div> <!-- ...:::: End Offcanvas Mobile Menu Section:::... -->

        <!--  Start Offcanvas Profile Menu Section -->
        <div id="profile-menu-offcanvas" class="offcanvas offcanvas-rightside">
            <!-- Start Offcanvas Header -->
            <div class="offcanvas-header flex-start offcanvas-modify">
                <button class="offcanvas-close" aria-label="offcanvas svg icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="5.973" height="10.449" viewbox="0 0 5.973 10.449">
                        <path id="Icon_ionic-ios-arrow-back" data-name="Icon ionic-ios-arrow-back" d="M13.051,11.417,17,7.466a.747.747,0,0,0-1.058-1.054l-4.479,4.476a.745.745,0,0,0-.022,1.03l4.5,4.507A.747.747,0,1,0,17,15.37Z" transform="translate(-11.251 -6.194)"></path>
                    </svg>
                </button>
                <span>Home</span>

            </div> <!-- End Offcanvas Header -->
            <!-- Start Offcanvas Mobile Menu Wrapper -->
            <div class="offcanvas-profile-menu-wrapper">
                <!-- ...:::Start Profile Card Section:::... -->
                <div class="profile-card-section section-gap-top-25">
                    <div class="profile-card-wrapper">
                        <div class="image">
                            <img class="img-fluid" width="96" height="96" src="assets/images/user/user-profile.png" alt="image">
                        </div>
                        <div class="content">
                            <h2 class="name">Kajavasta Moon</h2>
                            <span class="email">moon@example.com</span>
                            <span class="id-num">ID NO: EXMPL 4566</span>
                        </div>
                        <div class="profile-shape profile-shape-1"><img class="img-fluid" width="61" height="50" src="assets/images/profile-shape-1.svg" alt="image"></div>
                        <div class="profile-shape profile-shape-2"><img class="img-fluid" width="48" height="59" src="assets/images/profile-shape-2.svg" alt="image"></div>
                    </div>
                </div>
                <!-- ...:::End Profile Card Section:::... -->

                <!-- ...:::Start Profile Details Section:::... -->
                <div class="profile-details-section section-gap-top-30">
                    <div class="profile-details-wrapper">
                        <div class="profile-details-top">
                            <div class="left">
                                <span class="text">Total Buy</span>
                                <span class="price">$2000.00</span>
                            </div>
                            <div class="right">
                                <button aria-label="Wishlist" class="btn btn--size-58-58 btn--font-size-22 btn--center btn--round btn--color-radical-red btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></button>
                            </div>
                        </div>
                        <div class="profile-details-bottom">
                            <ul class="profile-user-list">
                                <li class="profile-list-item">
                                    <ul class="profile-single-list">
                                        <li class="list-item">
                                            <span class="title">Setting</span>
                                        </li>
                                        <li class="list-item">
                                            <a href="profile-settings.html" class="profile-link"><span class="icon"><i class="icon icon-carce-user"></i></span>Account Setting</a>
                                        </li>
                                        <li class="list-item">
                                            <a href="checkout.html" class="profile-link"><span class="icon"><i class="icon icon-carce-briefcase"></i></span>Billing & Payment</a>
                                        </li>
                                        <li class="list-item">
                                            <a href="notification.html" class="profile-link"><span class="icon"><i class="icon icon-carce-bell"></i></span>Notification</a>
                                        </li>
                                    </ul>
                                </li>

                                <li class="profile-list-item">
                                    <ul class="profile-single-list">
                                        <li class="list-item">
                                            <a href="login.html" class="profile-link"><span class="icon"><i class="icon icon-carce-login"></i></span>Log Out</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- ...:::End Profile Details Section:::... -->
            </div> <!-- End Offcanvas Mobile Menu Wrapper -->
        </div> <!-- ...:::: End Offcanvas Profile Menu Section:::... -->

        <div class="offcanvas-overlay"></div>

        <!-- ...:::Start Search & Filter Section:::... -->
        <div class="search-n-filter-section section-gap-top-25">
            <div class="container">
                <!-- Start Search & Filter Area -->
                <div class="search-n-filter-area home-one">
                    <div class="search-box">

                        <div class="searchable select">
                            <input type="text" placeholder="Search..." onkeyup="filterFunction(this,event)">
                            <ul>
                                <li>mexico city</li>
                                <li>Bulgaria</li>
                                <li>san francisco</li>
                                <li>Egypt</li>
                                <li>texas</li>
                            </ul>
                            <button class="btn search__btn" aria-label="Search Icon" type="submit">
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12.003" viewbox="0 0 12 12.003">
                                    <path id="Icon_ionic-ios-search" data-name="Icon ionic-ios-search" d="M13.859,13.131,10.522,9.762a4.756,4.756,0,1,0-.722.731l3.316,3.347a.514.514,0,0,0,.725.019A.517.517,0,0,0,13.859,13.131Zm-7.075-2.6a3.756,3.756,0,1,1,2.656-1.1A3.732,3.732,0,0,1,6.784,10.534Z" transform="translate(-2 -1.997)" fill="#171717"></path>
                                </svg>
                            </button>

                            <button class="btn submit__btn" aria-label="Search Icon" type="submit">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12" viewbox="0 0 18 12">
                                    <path id="Icon_ionic-ios-arrow-round-forward" data-name="Icon ionic-ios-arrow-round-forward" d="M19.354,11.481a.816.816,0,0,0-.006,1.15l3.8,3.806H8.682a.812.812,0,0,0,0,1.625H23.143l-3.8,3.806a.822.822,0,0,0,.006,1.15.81.81,0,0,0,1.144-.006l5.152-5.187h0a.912.912,0,0,0,.169-.256.775.775,0,0,0,.063-.312.814.814,0,0,0-.231-.569L20.492,11.5A.8.8,0,0,0,19.354,11.481Z" transform="translate(-7.875 -11.252)" fill="#aaa"></path>
                                </svg>
                            </button>

                            <button class="btn close__btn">
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewbox="0 0 12 12">
                                    <path id="Icon_metro-cancel" data-name="Icon metro-cancel" d="M6.857.643a6,6,0,1,0,6,6,6,6,0,0,0-6-6Zm0,10.875a4.875,4.875,0,1,1,4.875-4.875A4.875,4.875,0,0,1,6.857,11.518ZM8.732,3.643,6.857,5.518,4.982,3.643,3.857,4.768,5.732,6.643,3.857,8.518,4.982,9.643,6.857,7.768,8.732,9.643,9.857,8.518,7.982,6.643,9.857,4.768Z" transform="translate(-0.857 -0.643)" fill="#aaa"></path>
                                </svg>
                            </button>

                        </div>

                        <button id="filter-trigger" aria-label="Filter Icon" class="filter_btn btn--radius btn--radical-red btn--color-white btn--box-shadow btn--size-40-40 btn--center btn--font-size-22"><i class="icon icon-carce-filter"></i></button>
                    </div>
                </div>
                <!-- End Search & Filter Area -->

                <div class="shop-filter" id="shop-filter-menu">
                    <div class="container">
                        <div class="row">
                            <div class="col-12">
                                <div class="shop-filter-block mt-0">
                                    <h4 class="shop-filter-block__title">Price</h4>
                                    <div class="shop-filter-block__content">
                                        <div class="widget-price-range">
                                            <input type="text" id="price-range-slider">
                                        </div>
                                    </div>
                                </div>
                                <ul class="product-variable-lists">
                                    <li class="list-item">
                                        <div class="left">Size</div>
                                        <div class="right">
                                            <ul class="size-chart inner-child-item">
                                                <li>
                                                    <label for="samll">
                                                        <input type="radio" name="size" id="samll" checked="">
                                                        <span class="size-text">S</span>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label for="medium">
                                                        <input type="radio" name="size" id="medium">
                                                        <span class="size-text">M</span>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label for="large">
                                                        <input type="radio" name="size" id="large">
                                                        <span class="size-text">L</span>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label for="xlarge">
                                                        <input type="radio" name="size" id="xlarge">
                                                        <span class="size-text">XL</span>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label for="xxlarge">
                                                        <input type="radio" name="size" id="xxlarge">
                                                        <span class="size-text">XXL</span>
                                                    </label>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                    <li class="list-item">
                                        <div class="left">Color</div>
                                        <div class="right">
                                            <ul class="color-chart inner-child-item">
                                                <li>
                                                    <label for="blue">
                                                        <input type="radio" name="color" id="blue">
                                                        <span class="color-box color-box--blue"></span>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label for="orange">
                                                        <input type="radio" name="color" id="orange" checked="">
                                                        <span class="color-box color-box--orange"></span>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label for="violet">
                                                        <input type="radio" name="color" id="violet">
                                                        <span class="color-box color-box--violet"></span>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label for="pink">
                                                        <input type="radio" name="color" id="pink">
                                                        <span class="color-box color-box--pink"></span>
                                                    </label>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>

                                </ul>
                                <div class="shop-filter-block">
                                    <h4 class="shop-filter-block__title">Brand</h4>
                                    <div class="shop-filter-block__content">
                                        <ul class="shop-filter-block__brand">
                                            <li><button>HasThemes</button></li>
                                            <li><button class="active">HasTech</button></li>
                                            <li><button>Bootxperts</button></li>
                                            <li><button>Codecarnival</button></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="shop-filter-block">
                                    <button class="apply-btn">APPLY</button>
                                    <button class="cancel-btn">CANCEL</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ...:::End Search & Filter Section:::... -->

        <!-- ...:::Start Hero Slider Section:::... -->
        <div class="hero-section section-gap-top-25">
            <div class="container">
                <!-- Start Hero Area -->
                <div class="hero-area hero-area--style-1 hero-slider-active">
                    <!-- Slider main container -->
                    <div class="swiper">
                        <!-- Additional required wrapper -->
                        <div class="swiper-wrapper">
                            <!-- Slides -->
                            <div class="swiper-slide">
                                <div class="hero-singel-slide ">
                                    <div class="hero-bg">
                                        <img width="388" height="160" class="img-full" src="assets/images/hero/bg/hero-bg-1.jpg" alt="image">
                                    </div>
                                    <div class="inner-wrapper">
                                        <div class="content">
                                            <p class="title-tag">Summer</p>
                                            <h1 class="title">Fashion</h1>
                                            <h2 class="sub-title">SALE</h2>
                                            <h3 class="sub-title">UP to <span>70% </span> off</h3>
                                        </div>
                                        <div class="product-img">
                                            <img width="149" height="127" class="img-fluid" class="img-fluid" src="assets/images/hero/product/product-1.png" alt="image">
                                            <div class="shape shape-1"><img width="83" height="83" class="img-fluid" src="assets/images/hero/shape/shape-dotted.png" alt="image"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="hero-singel-slide">
                                    <div class="hero-bg">
                                        <img width="388" height="160" class="img-full" src="assets/images/hero/bg/hero-bg-1.jpg" alt="image">
                                    </div>
                                    <div class="inner-wrapper">
                                        <div class="content">
                                            <p class="title-tag">Summer</p>
                                            <h1 class="title">Fashion</h1>
                                            <h2 class="sub-title">SALE</h2>
                                            <h3 class="sub-title">UP to <span>70% </span> off</h3>
                                        </div>
                                        <div class="product-img">
                                            <img width="127" height="98" class="img-fluid" class="img-fluid" src="assets/images/hero/product/product-2.png" alt="image">
                                            <div class="shape shape-1"><img width="83" height="83" class="img-fluid" src="assets/images/hero/shape/shape-dotted.png" alt="image"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="hero-singel-slide">
                                    <div class="hero-bg">
                                        <img width="388" height="160" class="img-full" src="assets/images/hero/bg/hero-bg-1.jpg" alt="image">
                                    </div>
                                    <div class="inner-wrapper">
                                        <div class="content">
                                            <p class="title-tag">Summer</p>
                                            <h1 class="title">Fashion</h1>
                                            <h2 class="sub-title">SALE</h2>
                                            <h3 class="sub-title">UP to <span>70% </span> off</h3>
                                        </div>
                                        <div class="product-img">
                                            <img width="126" height="98" class="img-fluid" class="img-fluid" src="assets/images/hero/product/product-3.png" alt="image">
                                            <div class="shape shape-1"><img width="83" height="83" class="img-fluid" src="assets/images/hero/shape/shape-dotted.png" alt="image"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- If we need pagination -->
                    <div class="swiper-pagination"></div>
                </div>
                <!-- End Hero Area -->
            </div>
        </div>
        <!-- ...:::End Hero Slider Section:::... -->

        <!-- ...:::Start Catagories - 1 Section:::... -->
        <div class="catagories-section section-gap-top-50">
            <div class="container">
                <div class="catagories-area">
                    <div class="catagories-nav-1">
                        <!-- Slider main container -->
                        <div class="swiper">
                            <!-- Additional required wrapper -->
                            <div class="swiper-wrapper">
                                <!-- Slides -->
                                <div class="swiper-slide">
                                    <a href="shop.html" class="btn"><span class="icon"><img width="33" height="33" src="assets/images/catagories/sneakers.png" alt="image"></span> Sneakers</a>
                                </div>
                                <div class="swiper-slide">
                                    <a href="shop.html" class="btn"><span class="icon"><img width="33" height="33" src="assets/images/catagories/watch.png" alt="image"></span>Watch</a>
                                </div>
                                <div class="swiper-slide">
                                    <a href="shop.html" class="btn"><span class="icon"><img width="33" height="33" src="assets/images/catagories/headphones.png" alt="image"></span>Gadget</a>
                                </div>
                                <div class="swiper-slide">
                                    <a href="shop.html" class="btn"><span class="icon"><img width="33" height="33" src="assets/images/catagories/bagpack.png" alt="image"></span>Bagpack</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="title-content">
                    <h2 class="title">Popular</h2>
                    <a href="shop.html" class="view-all">View All</a>
                </div>
                <div class="catagories-wrapper">
                    <div class="catagories-wrapper-content">
                        <!-- Start Product Single Item -->
                        <div class="single-product-item product-item--style-1 product-item--bg-lime-green">
                            <a href="single-product.html" class="image">
                                <img width="127" height="98" class="img-fluid" src="assets/images/product/normal/product-img-1.png" alt="image">
                            </a>
                            <div class="content">
                                <div class="content--left">
                                    <ul class="review-star">
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                    </ul>
                                    <a href="single-product.html" class="title">Dmin Shoes</a>
                                    <span class="price">$500.00</span>
                                </div>
                                <div class="content--right">
                                    <a href="wishlist.html" aria-label="Wishlist" class="btn btn--size-33-33 btn--center btn--round btn--color-pink-swan btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- ENd Product Single Item -->
                        <!-- Start Product Single Item -->
                        <div class="single-product-item product-item--style-1 product-item--bg-maya-blue">
                            <a href="single-product.html" class="image">
                                <img width="126" height="98" class="img-fluid" src="assets/images/product/normal/product-img-2.png" alt="image">
                            </a>
                            <div class="content">
                                <div class="content--left">
                                    <ul class="review-star">
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                    </ul>
                                    <a href="single-product.html" class="title">Cat sports</a>
                                    <span class="price">$4000.00</span>
                                </div>
                                <div class="content--right">
                                    <a href="wishlist.html" aria-label="Wishlist" class="btn btn--size-33-33 btn--center btn--round btn--color-pink-swan btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- ENd Product Single Item -->
                        <!-- Start Product Single Item -->
                        <div class="single-product-item product-item--style-1 product-item--bg-gold">
                            <a href="single-product.html" class="image">
                                <img width="127" height="98" class="img-fluid" src="assets/images/product/normal/product-img-3.png" alt="image">
                            </a>
                            <div class="content">
                                <div class="content--left">
                                    <ul class="review-star">
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                    </ul>
                                    <a href="single-product.html" class="title">Casual Style</a>
                                    <span class="price">$550.00</span>
                                </div>
                                <div class="content--right">
                                    <a href="wishlist.html" aria-label="Wishlist" class="btn btn--size-33-33 btn--center btn--round btn--color-radical-red btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- ENd Product Single Item -->
                        <!-- Start Product Single Item -->
                        <div class="single-product-item product-item--style-1 product-item--bg-lime-green">
                            <a href="single-product.html" class="image">
                                <img width="127" height="98" class="img-fluid" src="assets/images/product/normal/product-img-1.png" alt="image">
                            </a>
                            <div class="content">
                                <div class="content--left">
                                    <ul class="review-star">
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                    </ul>
                                    <a href="single-product.html" class="title">Dmin Shoes</a>
                                    <span class="price">$500.00</span>
                                </div>
                                <div class="content--right">
                                    <a href="wishlist.html" aria-label="Wishlist" class="btn btn--size-33-33 btn--center btn--round btn--color-pink-swan btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- ENd Product Single Item -->
                        <!-- Start Product Single Item -->
                        <div class="single-product-item product-item--style-1 product-item--bg-red-orange">
                            <a href="single-product.html" class="image">
                                <img width="134" height="112" class="img-fluid" src="assets/images/product/normal/product-img-4.png" alt="image">
                            </a>
                            <div class="content">
                                <div class="content--left">
                                    <ul class="review-star">
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                    </ul>
                                    <a href="single-product.html" class="title">Red Shoes</a>
                                    <span class="price">$700.00</span>
                                </div>
                                <div class="content--right">
                                    <a href="wishlist.html" aria-label="Wishlist" class="btn btn--size-33-33 btn--center btn--round btn--color-radical-red btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- ENd Product Single Item -->
                        <!-- Start Product Single Item -->
                        <div class="single-product-item product-item--style-1 product-item--bg-lime-green">
                            <a href="single-product.html" class="image">
                                <img width="127" height="98" class="img-fluid" src="assets/images/product/normal/product-img-1.png" alt="image">
                            </a>
                            <div class="content">
                                <div class="content--left">
                                    <ul class="review-star">
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                    </ul>
                                    <a href="single-product.html" class="title">Dmin Shoes</a>
                                    <span class="price">$500.00</span>
                                </div>
                                <div class="content--right">
                                    <a href="wishlist.html" aria-label="Wishlist" class="btn btn--size-33-33 btn--center btn--round btn--color-pink-swan btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- ENd Product Single Item -->
                        <!-- Start Product Single Item -->
                        <div class="single-product-item product-item--style-1 product-item--bg-gold">
                            <a href="single-product.html" class="image">
                                <img width="146" height="111" class="img-fluid" src="assets/images/product/normal/product-img-3.png" alt="image">
                            </a>
                            <div class="content">
                                <div class="content--left">
                                    <ul class="review-star">
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                    </ul>
                                    <a href="single-product.html" class="title">Casual Style</a>
                                    <span class="price">$550.00</span>
                                </div>
                                <div class="content--right">
                                    <a href="wishlist.html" aria-label="Wishlist" class="btn btn--size-33-33 btn--center btn--round btn--color-radical-red btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- ENd Product Single Item -->
                        <!-- Start Product Single Item -->
                        <div class="single-product-item product-item--style-1 product-item--bg-red-orange">
                            <a href="single-product.html" class="image">
                                <img width="134" height="112" class="img-fluid" src="assets/images/product/normal/product-img-4.png" alt="image">
                            </a>
                            <div class="content">
                                <div class="content--left">
                                    <ul class="review-star">
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                    </ul>
                                    <a href="single-product.html" class="title">Red Shoes</a>
                                    <span class="price">$700.00</span>
                                </div>
                                <div class="content--right">
                                    <a href="wishlist.html" aria-label="Wishlist" class="btn btn--size-33-33 btn--center btn--round btn--color-pink-swan btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- ENd Product Single Item -->
                        <!-- Start Product Single Item -->
                        <div class="single-product-item product-item--style-1 product-item--bg-maya-blue">
                            <a href="single-product.html" class="image">
                                <img width="126" height="98" class="img-fluid" src="assets/images/product/normal/product-img-2.png" alt="image">
                            </a>
                            <div class="content">
                                <div class="content--left">
                                    <ul class="review-star">
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                    </ul>
                                    <a href="single-product.html" class="title">Cat sports</a>
                                    <span class="price">$4000.00</span>
                                </div>
                                <div class="content--right">
                                    <a href="wishlist.html" aria-label="Wishlist" class="btn btn--size-33-33 btn--center btn--round btn--color-radical-red btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- ENd Product Single Item -->
                        <!-- Start Product Single Item -->
                        <div class="single-product-item product-item--style-1 product-item--bg-red-orange">
                            <a href="single-product.html" class="image">
                                <img width="134" height="112" class="img-fluid" src="assets/images/product/normal/product-img-4.png" alt="image">
                            </a>
                            <div class="content">
                                <div class="content--left">
                                    <ul class="review-star">
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                    </ul>
                                    <a href="single-product.html" class="title">Red Shoes</a>
                                    <span class="price">$700.00</span>
                                </div>
                                <div class="content--right">
                                    <a href="wishlist.html" aria-label="Wishlist" class="btn btn--size-33-33 btn--center btn--round btn--color-pink-swan btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- ENd Product Single Item -->
                    </div>
                </div>

                <div class="title-content">
                    <h2 class="title">Best Seller</h2>
                    <a href="shop.html" class="view-all">View All</a>
                </div>
                <div class="catagories-wrapper">
                    <div class="catagories-wrapper-content">
                        <!-- Start Product Single Item -->
                        <div class="single-product-item product-item--style-1 product-item--bg-lime-green">
                            <a href="single-product.html" class="image">
                                <img width="127" height="98" class="img-fluid" src="assets/images/product/normal/product-img-1.png" alt="image">
                            </a>
                            <div class="content">
                                <div class="content--left">
                                    <ul class="review-star">
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                    </ul>
                                    <a href="single-product.html" class="title">Dmin Shoes</a>
                                    <span class="price">$500.00</span>
                                </div>
                                <div class="content--right">
                                    <a href="wishlist.html" aria-label="Wishlist" class="btn btn--size-33-33 btn--center btn--round btn--color-pink-swan btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- ENd Product Single Item -->
                        <!-- Start Product Single Item -->
                        <div class="single-product-item product-item--style-1 product-item--bg-maya-blue">
                            <a href="single-product.html" class="image">
                                <img width="126" height="98" class="img-fluid" src="assets/images/product/normal/product-img-2.png" alt="image">
                            </a>
                            <div class="content">
                                <div class="content--left">
                                    <ul class="review-star">
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                    </ul>
                                    <a href="single-product.html" class="title">Cat sports</a>
                                    <span class="price">$4000.00</span>
                                </div>
                                <div class="content--right">
                                    <a href="wishlist.html" aria-label="Wishlist" class="btn btn--size-33-33 btn--center btn--round btn--color-pink-swan btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- ENd Product Single Item -->
                        <!-- Start Product Single Item -->
                        <div class="single-product-item product-item--style-1 product-item--bg-gold">
                            <a href="single-product.html" class="image">
                                <img width="146" height="111" class="img-fluid" src="assets/images/product/normal/product-img-3.png" alt="image">
                            </a>
                            <div class="content">
                                <div class="content--left">
                                    <ul class="review-star">
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                    </ul>
                                    <a href="single-product.html" class="title">Casual Style</a>
                                    <span class="price">$550.00</span>
                                </div>
                                <div class="content--right">
                                    <a href="wishlist.html" aria-label="Wishlist" class="btn btn--size-33-33 btn--center btn--round btn--color-radical-red btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- ENd Product Single Item -->
                        <!-- Start Product Single Item -->
                        <div class="single-product-item product-item--style-1 product-item--bg-lime-green">
                            <a href="single-product.html" class="image">
                                <img width="127" height="98" class="img-fluid" src="assets/images/product/normal/product-img-1.png" alt="image">
                            </a>
                            <div class="content">
                                <div class="content--left">
                                    <ul class="review-star">
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                    </ul>
                                    <a href="single-product.html" class="title">Dmin Shoes</a>
                                    <span class="price">$500.00</span>
                                </div>
                                <div class="content--right">
                                    <a href="wishlist.html" aria-label="Wishlist" class="btn btn--size-33-33 btn--center btn--round btn--color-pink-swan btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- ENd Product Single Item -->
                        <!-- Start Product Single Item -->
                        <div class="single-product-item product-item--style-1 product-item--bg-red-orange">
                            <a href="single-product.html" class="image">
                                <img width="134" height="112" class="img-fluid" src="assets/images/product/normal/product-img-4.png" alt="image">
                            </a>
                            <div class="content">
                                <div class="content--left">
                                    <ul class="review-star">
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                    </ul>
                                    <a href="single-product.html" class="title">Red Shoes</a>
                                    <span class="price">$700.00</span>
                                </div>
                                <div class="content--right">
                                    <a href="wishlist.html" aria-label="Wishlist" class="btn btn--size-33-33 btn--center btn--round btn--color-radical-red btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- ENd Product Single Item -->
                        <!-- Start Product Single Item -->
                        <div class="single-product-item product-item--style-1 product-item--bg-lime-green">
                            <a href="single-product.html" class="image">
                                <img width="127" height="98" class="img-fluid" src="assets/images/product/normal/product-img-1.png" alt="image">
                            </a>
                            <div class="content">
                                <div class="content--left">
                                    <ul class="review-star">
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                    </ul>
                                    <a href="single-product.html" class="title">Dmin Shoes</a>
                                    <span class="price">$500.00</span>
                                </div>
                                <div class="content--right">
                                    <a href="wishlist.html" aria-label="Wishlist" class="btn btn--size-33-33 btn--center btn--round btn--color-pink-swan btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- ENd Product Single Item -->
                        <!-- Start Product Single Item -->
                        <div class="single-product-item product-item--style-1 product-item--bg-gold">
                            <a href="single-product.html" class="image">
                                <img width="146" height="111" class="img-fluid" src="assets/images/product/normal/product-img-3.png" alt="image">
                            </a>
                            <div class="content">
                                <div class="content--left">
                                    <ul class="review-star">
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                    </ul>
                                    <a href="single-product.html" class="title">Casual Style</a>
                                    <span class="price">$550.00</span>
                                </div>
                                <div class="content--right">
                                    <a href="wishlist.html" aria-label="Wishlist" class="btn btn--size-33-33 btn--center btn--round btn--color-radical-red btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- ENd Product Single Item -->
                        <!-- Start Product Single Item -->
                        <div class="single-product-item product-item--style-1 product-item--bg-red-orange">
                            <a href="single-product.html" class="image">
                                <img width="134" height="112" class="img-fluid" src="assets/images/product/normal/product-img-4.png" alt="image">
                            </a>
                            <div class="content">
                                <div class="content--left">
                                    <ul class="review-star">
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                    </ul>
                                    <a href="single-product.html" class="title">Red Shoes</a>
                                    <span class="price">$700.00</span>
                                </div>
                                <div class="content--right">
                                    <a href="wishlist.html" aria-label="Wishlist" class="btn btn--size-33-33 btn--center btn--round btn--color-pink-swan btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- ENd Product Single Item -->
                        <!-- Start Product Single Item -->
                        <div class="single-product-item product-item--style-1 product-item--bg-maya-blue">
                            <a href="single-product.html" class="image">
                                <img width="126" height="98" class="img-fluid" src="assets/images/product/normal/product-img-2.png" alt="image">
                            </a>
                            <div class="content">
                                <div class="content--left">
                                    <ul class="review-star">
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                    </ul>
                                    <a href="single-product.html" class="title">Cat sports</a>
                                    <span class="price">$4000.00</span>
                                </div>
                                <div class="content--right">
                                    <a href="wishlist.html" aria-label="Wishlist" class="btn btn--size-33-33 btn--center btn--round btn--color-radical-red btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- ENd Product Single Item -->
                        <!-- Start Product Single Item -->
                        <div class="single-product-item product-item--style-1 product-item--bg-red-orange">
                            <a href="single-product.html" class="image">
                                <img width="134" height="112" class="img-fluid" src="assets/images/product/normal/product-img-4.png" alt="image">
                            </a>
                            <div class="content">
                                <div class="content--left">
                                    <ul class="review-star">
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                    </ul>
                                    <a href="single-product.html" class="title">Red Shoes</a>
                                    <span class="price">$700.00</span>
                                </div>
                                <div class="content--right">
                                    <a href="wishlist.html" aria-label="Wishlist" class="btn btn--size-33-33 btn--center btn--round btn--color-pink-swan btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- ENd Product Single Item -->
                    </div>
                </div>

                <div class="title-content">
                    <h2 class="title">New Arrival</h2>
                    <a href="shop.html" class="view-all">View All</a>
                </div>
                <div class="catagories-wrapper">
                    <div class="catagories-wrapper-content">
                        <!-- Start Product Single Item -->
                        <div class="single-product-item product-item--style-1 product-item--bg-lime-green">
                            <a href="single-product.html" class="image">
                                <img width="127" height="98" class="img-fluid" src="assets/images/product/normal/product-img-1.png" alt="image">
                            </a>
                            <div class="content">
                                <div class="content--left">
                                    <ul class="review-star">
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                    </ul>
                                    <a href="single-product.html" class="title">Dmin Shoes</a>
                                    <span class="price">$500.00</span>
                                </div>
                                <div class="content--right">
                                    <a href="wishlist.html" aria-label="Wishlist" class="btn btn--size-33-33 btn--center btn--round btn--color-pink-swan btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- ENd Product Single Item -->
                        <!-- Start Product Single Item -->
                        <div class="single-product-item product-item--style-1 product-item--bg-maya-blue">
                            <a href="single-product.html" class="image">
                                <img width="126" height="98" class="img-fluid" src="assets/images/product/normal/product-img-2.png" alt="image">
                            </a>
                            <div class="content">
                                <div class="content--left">
                                    <ul class="review-star">
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                    </ul>
                                    <a href="single-product.html" class="title">Cat sports</a>
                                    <span class="price">$4000.00</span>
                                </div>
                                <div class="content--right">
                                    <a href="wishlist.html" aria-label="Wishlist" class="btn btn--size-33-33 btn--center btn--round btn--color-pink-swan btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- ENd Product Single Item -->
                        <!-- Start Product Single Item -->
                        <div class="single-product-item product-item--style-1 product-item--bg-gold">
                            <a href="single-product.html" class="image">
                                <img width="146" height="111" class="img-fluid" src="assets/images/product/normal/product-img-3.png" alt="image">
                            </a>
                            <div class="content">
                                <div class="content--left">
                                    <ul class="review-star">
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                    </ul>
                                    <a href="single-product.html" class="title">Casual Style</a>
                                    <span class="price">$550.00</span>
                                </div>
                                <div class="content--right">
                                    <a href="wishlist.html" aria-label="Wishlist" class="btn btn--size-33-33 btn--center btn--round btn--color-radical-red btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- ENd Product Single Item -->
                        <!-- Start Product Single Item -->
                        <div class="single-product-item product-item--style-1 product-item--bg-lime-green">
                            <a href="single-product.html" class="image">
                                <img width="127" height="98" class="img-fluid" src="assets/images/product/normal/product-img-1.png" alt="image">
                            </a>
                            <div class="content">
                                <div class="content--left">
                                    <ul class="review-star">
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                    </ul>
                                    <a href="single-product.html" class="title">Dmin Shoes</a>
                                    <span class="price">$500.00</span>
                                </div>
                                <div class="content--right">
                                    <a href="wishlist.html" aria-label="Wishlist" class="btn btn--size-33-33 btn--center btn--round btn--color-pink-swan btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- ENd Product Single Item -->
                        <!-- Start Product Single Item -->
                        <div class="single-product-item product-item--style-1 product-item--bg-red-orange">
                            <a href="single-product.html" class="image">
                                <img width="127" height="98" class="img-fluid" src="assets/images/product/normal/product-img-4.png" alt="image">
                            </a>
                            <div class="content">
                                <div class="content--left">
                                    <ul class="review-star">
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                    </ul>
                                    <a href="single-product.html" class="title">Red Shoes</a>
                                    <span class="price">$700.00</span>
                                </div>
                                <div class="content--right">
                                    <a href="wishlist.html" aria-label="Wishlist" class="btn btn--size-33-33 btn--center btn--round btn--color-radical-red btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- ENd Product Single Item -->
                        <!-- Start Product Single Item -->
                        <div class="single-product-item product-item--style-1 product-item--bg-lime-green">
                            <a href="single-product.html" class="image">
                                <img width="127" height="98" class="img-fluid" src="assets/images/product/normal/product-img-1.png" alt="image">
                            </a>
                            <div class="content">
                                <div class="content--left">
                                    <ul class="review-star">
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                    </ul>
                                    <a href="single-product.html" class="title">Dmin Shoes</a>
                                    <span class="price">$500.00</span>
                                </div>
                                <div class="content--right">
                                    <a href="wishlist.html" aria-label="Wishlist" class="btn btn--size-33-33 btn--center btn--round btn--color-pink-swan btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- ENd Product Single Item -->
                        <!-- Start Product Single Item -->
                        <div class="single-product-item product-item--style-1 product-item--bg-gold">
                            <a href="single-product.html" class="image">
                                <img width="127" height="98" class="img-fluid" src="assets/images/product/normal/product-img-3.png" alt="image">
                            </a>
                            <div class="content">
                                <div class="content--left">
                                    <ul class="review-star">
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                    </ul>
                                    <a href="single-product.html" class="title">Casual Style</a>
                                    <span class="price">$550.00</span>
                                </div>
                                <div class="content--right">
                                    <a href="wishlist.html" aria-label="Wishlist" class="btn btn--size-33-33 btn--center btn--round btn--color-radical-red btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- ENd Product Single Item -->
                        <!-- Start Product Single Item -->
                        <div class="single-product-item product-item--style-1 product-item--bg-red-orange">
                            <a href="single-product.html" class="image">
                                <img width="127" height="98" class="img-fluid" src="assets/images/product/normal/product-img-4.png" alt="image">
                            </a>
                            <div class="content">
                                <div class="content--left">
                                    <ul class="review-star">
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                    </ul>
                                    <a href="single-product.html" class="title">Red Shoes</a>
                                    <span class="price">$700.00</span>
                                </div>
                                <div class="content--right">
                                    <a href="wishlist.html" aria-label="Wishlist" class="btn btn--size-33-33 btn--center btn--round btn--color-pink-swan btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- ENd Product Single Item -->
                        <!-- Start Product Single Item -->
                        <div class="single-product-item product-item--style-1 product-item--bg-maya-blue">
                            <a href="single-product.html" class="image">
                                <img width="127" height="98" class="img-fluid" src="assets/images/product/normal/product-img-2.png" alt="image">
                            </a>
                            <div class="content">
                                <div class="content--left">
                                    <ul class="review-star">
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                    </ul>
                                    <a href="single-product.html" class="title">Cat sports</a>
                                    <span class="price">$4000.00</span>
                                </div>
                                <div class="content--right">
                                    <a href="wishlist.html" aria-label="Wishlist" class="btn btn--size-33-33 btn--center btn--round btn--color-radical-red btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- ENd Product Single Item -->
                        <!-- Start Product Single Item -->
                        <div class="single-product-item product-item--style-1 product-item--bg-red-orange">
                            <a href="single-product.html" class="image">
                                <img width="127" height="98" class="img-fluid" src="assets/images/product/normal/product-img-4.png" alt="image">
                            </a>
                            <div class="content">
                                <div class="content--left">
                                    <ul class="review-star">
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                        <li class="items fill"><i class="icon icon-carce-star-full"></i></li>
                                    </ul>
                                    <a href="single-product.html" class="title">Red Shoes</a>
                                    <span class="price">$700.00</span>
                                </div>
                                <div class="content--right">
                                    <a href="wishlist.html" aria-label="Wishlist" class="btn btn--size-33-33 btn--center btn--round btn--color-pink-swan btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></a>
                                </div>
                            </div>
                        </div>
                        <!-- ENd Product Single Item -->
                    </div>
                </div>

            </div>
        </div>
        <!-- ...:::Start Catagories - 1 Section:::... -->

        <!-- ...:::Start User Event Section:::... -->
        <div class="user-event-section">
            <!-- Start User Event Area -->
            <div class="col pos-relative">

                <div class="user-event-area">
                    <div class="user-event user-event--left">
                        <a area-label="event link icon" href="index.html" class="event-btn-link"><i class="icon icon-carce-home"></i></a>
                        <a area-label="wishlist icon" href="wishlist.html" class="event-btn-link"><i class="icon icon-carce-heart"></i></a>
                    </div>
                    <div class="user-event user-event--center">
                        <a area-label="cart icon" href="cart.html" class="event-btn-link"><i class="icon icon-carce-cart"></i></a>
                    </div>
                    <div class="user-event user-event--right">
                        <a area-label="order icon" href="order.html" class="event-btn-link"><i class="icon icon-carce-compare"></i></a>
                        <a area-label="chat icon" href="chat.html" class="event-btn-link"><i class="icon icon-carce-bubbles2"></i></a>
                    </div>
                </div>
            </div>
            <!-- End User Event Area -->
        </div>
        <!-- ...:::End User Event Section:::... -->

        <footer class="footer-section"></footer>
    </main>

    <!-- ::::::::::::::All JS Files here :::::::::::::: -->
    <!-- Global Vendor -->
    <script src="assets/js/vendor/modernizr-3.11.2.min.js"></script>
    <script src="assets/js/vendor/jquery-3.6.0.min.js"></script>
    <script src="assets/js/vendor/jquery-migrate-3.3.2.min.js"></script>

    <!--Plugins JS-->
    <script src="assets/js/plugins/swiper-bundle.min.js"></script>
    <script src="assets/js/plugins/ion.rangeSlider.min.js"></script>

    <!-- Minify Version -->
    <!-- <script src="assets/js/vendor.min.js"></script>
    <script src="assets/js/plugins.min.js"></script> -->

    <!--Main JS (Common Activation Codes)-->
    <script src="assets/js/main.js"></script>
    <!-- <script src="assets/js/main.min.js"></script> -->

    <script>
        function filterFunction(that, event) {
            let container, input, filter, li, input_val;
            container = $(that).closest(".searchable");
            input_val = container.find("input").val().toUpperCase();
            if (["ArrowDown", "ArrowUp", "Enter"].indexOf(event.key) != -1) {
                keyControl(event, container);
            } else {
                li = container.find("ul li");
                li.each(function(i, obj) {
                    if ($(this).text().toUpperCase().indexOf(input_val) > -1) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
                container.find("ul li").removeClass("selected");
                setTimeout(function() {
                    container.find("ul li:visible").first().addClass("selected");
                }, 100);
            }
        }

        function keyControl(e, container) {
            if (e.key == "ArrowDown") {
                if (container.find("ul li").hasClass("selected")) {
                    if (
                        container
                        .find("ul li:visible")
                        .index(container.find("ul li.selected")) +
                        1 <
                        container.find("ul li:visible").length
                    ) {
                        container
                            .find("ul li.selected")
                            .removeClass("selected")
                            .nextAll()
                            .not('[style*="display: none"]')
                            .first()
                            .addClass("selected");
                    }
                } else {
                    container.find("ul li:first-child").addClass("selected");
                }
            } else if (e.key == "ArrowUp") {
                if (
                    container.find("ul li:visible").index(container.find("ul li.selected")) >
                    0
                ) {
                    container
                        .find("ul li.selected")
                        .removeClass("selected")
                        .prevAll()
                        .not('[style*="display: none"]')
                        .first()
                        .addClass("selected");
                }
            } else if (e.key == "Enter") {
                container.find("input").val(container.find("ul li.selected").text()).blur();
                onSelect(container.find("ul li.selected").text());
            }
        }

        function onSelect(val) {}
        $(".searchable input").focus(function() {
            $(this).closest(".searchable").find("ul").show();
            $(this).closest(".searchable").find("ul li").show();
            $('.submit__btn').css({
                "display": "block"
            })
            $('.close__btn').css({
                "display": "block"
            })
            $('.search__btn').css({
                'display': "none"
            })
        });
        $(".searchable input").blur(function() {
            let that = this;
            setTimeout(function() {
                $(that).closest(".searchable").find("ul").hide();
                $('.search__btn').css({
                    'display': "block"
                })
                $('.submit__btn').css({
                    "display": "none"
                })
                $('.close__btn').css({
                    "display": "none"
                })
            }, 300);
        });
        $('.search__btn').on("click", function() {
            $(this).closest(".searchable").find("input").val($(this).text()).blur();
            onSelect($(this).text());
        });
        $(document).on("click", ".searchable ul li", function() {
            $(this).closest(".searchable").find("input").val($(this).text()).blur();
            onSelect($(this).text());
        });
        $(".searchable ul li").hover(function() {
            $(this).closest(".searchable").find("ul li.selected").removeClass("selected");
            $(this).addClass("selected");
        });
        $('.close__btn').on('click', function() {
            $('.searchable').find("input").val($(this).text()).blur()
            $(this).css({
                "display": "none"
            })
        })
    </script>

</body>

</html>