<!--::Begin Header-->
    <header class="z-index-fixed header-transparent header-absolute-top pt-lg-3">
        <nav class="navbar navbar-expand-lg navbar-light">
            <div class="container position-relative">
                <a class="navbar-brand" href="index.html">
                    <img src="assets/img/logo/logo.svg" alt="" class="img-fluid">
                </a>
    
                <div class="d-flex align-items-center navbar-no-collapse-items order-lg-last">
                    <button class="navbar-toggler order-last" type="button" data-bs-toggle="collapse"
                        data-bs-target="#mainNavbarTheme" aria-controls="mainNavbarTheme" aria-expanded="false"
                        aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon">
                            <i></i>
                        </span>
                    </button>
                    <div class="nav-item me-3 me-lg-0 fullscreen-toggler">
                        <a href="#seachOffcanvas" class="nav-link lh-1" data-bs-toggle="offcanvas">
                            <i class="bx bx-search-alt-2 fs-5 lh-1"></i>
                        </a>
                    </div>
    
    
                </div>
                <div class="collapse navbar-collapse" id="mainNavbarTheme">
                    <!--Navbar Nav goes here-->
                </div>
            </div>
        </nav>
    </header>
    <!--::/end Header-->
    <!--Main content-->
    
    
    <!--Begin::Fullscreen-Offcanvas - Search-->
    <div class="offcanvas offcanvas-top offcanvas-fullscreen h-100" id="seachOffcanvas">
        <div class="offcanvas-body">
            <!--fullscreen close-->
            <button
                class="btn position-absolute end-0 top-0 me-5 mt-3 z-index-2 btn-outline-secondary width-4x height-4x flex-center p-0 rounded-circle"
                data-bs-dismiss="offcanvas">
                <i class="bx bx-x fs-5"></i>
            </button>
            <div class="container py-5">
                <ul class="fullscreen-list list-unstyled mb-0 w-100">
                    <!--Item(animated)-->
                    <li class="fullscreen-item">
                        <div class="container mb-5 mb-lg-7">
                            <form>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="d-flex align-items-center">
                                            <span><i class="bx bx-search-alt-2 fs-4 text-muted"></i></span>
                                            <input class="form-control form-control-lg border-0 shadow-none fs-2"
                                                type="text" placeholder="Type and hit enter..." autofocus>
                                        </div>
                                    </div>
                                    <div class="col-1 d-none">
                                        <div class="d-grid">
                                            <button class="btn btn-lg btn-white rounded-0"
                                                type="button">Search</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </li>
                    <!--Item(animated)-->
                    <li class="fullscreen-item">
                        <div class="container">
                            <h6 class="mb-4">Popular Categories</h6>
                            <div class="row mb-5">
                                <div class="col-md-8 col-lg-6 mb-4">
                                    <!--Category badges-->
                                    <div class="d-flex flex-wrap align-items-center g-2">
                                        <span><a href="#!"
                                                class="badge badge-pill bg-primary text-white hover-shadow hover-lift me-2 mb-2 px-3 py-2">Jeans</a></span>
                                        <span><a href="#!"
                                                class="badge badge-pill bg-primary text-white hover-shadow hover-lift me-2 mb-2 px-3 py-2">Shoes</a></span>
                                        <span><a href="#!"
                                                class="badge badge-pill bg-primary text-white hover-shadow hover-lift me-2 mb-2 px-3 py-2">Watches</a></span>
                                        <span><a href="#!"
                                                class="badge badge-pill bg-primary text-white hover-shadow hover-lift me-2 mb-2 px-3 py-2">Men's</a></span>
                                        <span><a href="#!"
                                                class="badge badge-pill bg-primary text-white hover-shadow hover-lift me-2 mb-2 px-3 py-2">Sneakers</a></span>
                                        <span><a href="#!"
                                                class="badge badge-pill bg-primary text-white hover-shadow hover-lift me-2 mb-2 px-3 py-2">Casual</a></span>
                                        <span><a href="#!"
                                                class="badge badge-pill bg-primary text-white hover-shadow hover-lift me-2 mb-2 px-3 py-2">Shirts</a></span>
                                        <span><a href="#!"
                                                class="badge badge-pill bg-primary text-white hover-shadow hover-lift me-2 mb-2 px-3 py-2">T-shirts</a></span>
                                        <span><a href="#!"
                                                class="badge badge-pill bg-primary text-white hover-shadow hover-lift me-2 mb-2 px-3 py-2">Lowers</a></span>
                                    </div>
                                </div>
                            </div>
                            <h6 class="mb-5">Featured products</h6>
                            <div class="row">
                                <div class="col-md-8 col-lg-6">
                                    <!--Item-->
                                    <a href="#!"
                                        class="card-hover text-reset d-flex d-block overflow-hidden position-relative">
                                        <div class="me-4 overflow-hidden width-6x height-6x">
                                            <img src="assets/img/shop/products/01.jpg" alt=""
                                                class="img-zoom img-fluid">
                                        </div>
                                        <div class="">
                                            <h6>Denim Jacket</h6>
                                            <span>$69.00</span>
                                        </div>
                                    </a>
                                    <!--Divider-->
                                    <hr class="my-3">
                                    <!--Item-->
                                    <a href="#!"
                                        class="card-hover text-reset d-flex d-block overflow-hidden position-relative">
    
                                        <div class="me-4 overflow-hidden width-6x height-6x">
                                            <img src="assets/img/shop/products/02.jpg" alt=""
                                                class="img-zoom img-fluid">
                                        </div>
                                        <div class="">
                                            <h6>White shirt for mens</h6>
                                            <span>$24.00</span>
                                        </div>
                                    </a>
                                    <!--Divider-->
                                    <hr class="my-3">
                                    <!--Item-->
                                    <a href="#!"
                                        class="card-hover text-reset d-flex d-block overflow-hidden position-relative">
                                        <div class="me-4 overflow-hidden width-6x height-6x">
                                            <img src="assets/img/shop/products/03.jpg" alt=""
                                                class="img-zoom img-fluid">
                                        </div>
                                        <div class="">
                                            <h6>High Shoes for womens</h6>
                                            <span>$39.00</span>
                                        </div>
                                    </a>
                                    <!--Divider-->
                                    <hr class="my-3">
                                    <!--Item-->
                                    <div class="text-end">
                                        <a href="#!" class="link-hover-underline">Browse products
                                            <svg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width="24"
                                                height="24" viewBox='0 0 24 24'>
                                                <path d='M22 12l-4-4v3H3v2h15v3z'></path>
                                            </svg>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--/end::Fullscreen-Offcanvas - Search-->