<nav class="navbar navbar-expand py-0 py-lg-2">			
    <div class="container-fluid">	
        <div class="row w-100">		
            <a href="index.php" class="navbar-brand text-start me-auto d-none d-lg-block col-3">
                <img src="assets/images/Logo/ORV-HeadQuarters.svg" alt="">
            </a>
            <div class="fixed-bottom-menu d-flex col-lg-9 justify-content-between flex-wrap start-0 bottom-0 align-items-center" id="fixed-bottom-menu">
                <div class="fixed-bottom-item position-relative col-7 dropdown mb-4 mb-lg-0 me-xxl-auto ms-xxl-5 mx-auto" id="fixed-bottom-item">
                                     
                    <input type="search" name="Search" class="form-control rounded-3 d-flex justify-content-between dropdown-toggle text-md lh-1 text-uppercase" placeholder="Search"  id="searchDropdown" type="button" data-bs-toggle="dropdown" aria-expanded="true" data-bs-offset="10,20" data-bs-auto-close="outside">
                                       
                    <div class="dropdown-menu navbar-dropdown-menu rounded-3 bg-black-pearl text-white border-stone border-opacity-25 translate-middle-x pb-0 p-0 m-0"> 	
                        <div class="pt-lg-4">
                            <div class="row g-0 mb-4 mb-lg-0 pb-5 pb-lg-0">
                                <div class="col-3 border-end border-2 border-white border-opacity-15 mb-4 d-none d-lg-block">
                                    <div class="px-4">
                                        <h4 class="headline-4 lh-1 text-700 mb-3 pb-3">Matching categories</h4>
                                        
                                        <a href="#" class="d-block category-link text-xxs text-600 lh-1 text-uppercase text-decoration-none text-white mb-4">
                                            Tires
                                            <div class="align-text-top text-xxxs lh-1 text-primary d-inline-block">210</div>
                                        </a>
                                        <a href="#" class="d-block category-link text-xxs text-600 lh-1 text-uppercase text-decoration-none text-white mb-4">
                                            wheels
                                            <div class="align-text-top text-xxxs lh-1 text-primary d-inline-block">120</div>
                                        </a>
                                        <a href="#" class="d-block category-link text-xxs text-600 lh-1 text-uppercase text-decoration-none text-white mb-4">
                                            tire chains
                                            <div class="align-text-top text-xxxs lh-1 text-primary d-inline-block">21</div>
                                        </a>
                                        <a href="#" class="d-block category-link text-xxs text-600 lh-1 text-uppercase text-decoration-none text-white mb-4">
                                            tire balances
                                            <div class="align-text-top text-xxxs lh-1 text-primary d-inline-block">3</div>
                                        </a>
                                        <a href="#" class="d-block category-link text-xxs text-600 lh-1 text-uppercase text-decoration-none text-white mb-4">
                                            lug nuts
                                            <div class="align-text-top text-xxxs lh-1 text-primary d-inline-block">5</div>
                                        </a>
                                        <a href="#" class="d-block category-link text-xxs text-600 lh-1 text-uppercase text-decoration-none text-white mb-4">
                                            wheel support
                                            <div class="align-text-top text-xxxs lh-1 text-primary d-inline-block">10</div>
                                        </a>
                                        <a href="#" class="d-block category-link text-xxs text-600 lh-1 text-uppercase text-decoration-none text-white mb-4">
                                            wheel spacers
                                            <div class="align-text-top text-xxxs lh-1 text-primary d-inline-block">4</div>
                                        </a>
                                        <a href="#" class="d-block category-link text-xxs text-600 lh-1 text-uppercase text-decoration-none text-white mb-4">
                                            wheel cover
                                            <div class="align-text-top text-xxxs lh-1 text-primary d-inline-block">1</div>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-12 col-lg-9 mb-4">
                                    <div class="ps-lg-2 pe-lg-3 px-xl-4 mx-lg-1 d-flex w-100 h-100 flex-column">
                                        <h4 class="headline-4 lh-1 text-700 mb-auto pb-3 px-2 d-none d-lg-block">Matching products</h4>
                                        <div class="swiper dropdownSwiper w-100 ps-4 ps-lg-0">
                                            <div class="swiper-wrapper">									
                                                <div class="pt-5 mt-5 swiper-slide">								
                                                    <div class="card dropdown-card rounded-3 border-0 position-relative card-bg-dark pt-5 mt-5 mt-lg-0">
                                                        <div class="card-img-wrapper position-absolute top-0 start-50 translate-middle w-100">
                                                            <img src="assets/images/Products/Helm_1.png" class="position-absolute top-0 bottom-0 start-0 end-0 m-auto object-fit-contain card-img mx-75" height="165" alt="">
                                                        </div>															
                                                        <div class="card-body pt-5 pb-4 px-4 mt-4 mt-lg-5">
                                                            <h5 class="card-title headline-5 headline-lg-5 text-600 lh-1 mb-4 mb-lg-2 mt-5 mt-lg-0 pt-5 pt-lg-0">Can-Am X1 Helment</h5>						
                                                            <div class="d-flex justify-content-between align-items-center pb-3 pb-lg-0">
                                                                <p class="text-bebas text-lg lh-1 mb-0 text-primary">$500.00</p>
                                                                <p class="mb-0 text-end">
                                                                    <a href="single-product.php" class="text-white text-decoration-none"><i class="icon-eye text-xxxs"></i></a>
                                                                    <i class="icon-heart like-symbol text-xxxs ms-2" role="button"></i>
                                                                </p>										
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="pt-5 mt-5 swiper-slide">
                                                    <div class="card dropdown-card rounded-3 border-0 position-relative card-bg-dark pt-5 mt-5 mt-lg-0">
                                                        <div class="card-img-wrapper position-absolute top-0 start-50 translate-middle w-100">
                                                            <img src="assets/images/Products/air_filter.png" class="position-absolute top-0 bottom-0 start-0 end-0 m-auto object-fit-contain card-img mx-75" height="165" alt="">
                                                        </div>															
                                                        <div class="card-body pt-5 pb-4 px-4 mt-4 mt-lg-5">
                                                            <h5 class="card-title headline-5 headline-lg-5 text-600 lh-1 mb-4 mb-lg-2 mt-5 mt-lg-0 pt-5 pt-lg-0">Can-Am X1 Helment</h5>								
                                                            <div class="d-flex justify-content-between align-items-center pb-3 pb-lg-0">
                                                                <p class="text-bebas text-lg lh-1 mb-0 text-primary">$500.00</p>
                                                                <p class="mb-0 text-end">
                                                                    <a href="single-product.php" class="text-white text-decoration-none"><i class="icon-eye text-xxxs"></i></a>
                                                                    <i class="icon-heart like-symbol text-xxxs ms-2" role="button"></i>
                                                                </p>										
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="pt-5 mt-5 swiper-slide">
                                                    <div class="card dropdown-card rounded-3 border-0 position-relative card-bg-dark pt-5 mt-5 mt-lg-0">
                                                        <div class="card-img-wrapper position-absolute top-0 start-50 translate-middle w-100">
                                                            <img src="assets/images/Products/Tire_2.png" class="position-absolute top-0 bottom-0 start-0 end-0 m-auto object-fit-contain card-img mx-75" height="165" alt="">
                                                        </div>															
                                                        <div class="card-body pt-5 pb-4 px-4 mt-4 mt-lg-5">
                                                            <h5 class="card-title headline-5 headline-lg-5 text-600 lh-1 mb-4 mb-lg-2 mt-5 mt-lg-0 pt-5 pt-lg-0">Can-Am X1 Helment</h5>						
                                                            <div class="d-flex justify-content-between align-items-center pb-3 pb-lg-0">
                                                                <p class="text-bebas text-lg lh-1 mb-0 text-primary">$500.00</p>
                                                                <p class="mb-0 text-end">
                                                                    <a href="single-product.php" class="text-white text-decoration-none"><i class="icon-eye text-xxxs"></i></a>
                                                                    <i class="icon-heart like-symbol text-xxxs ms-2" role="button"></i>
                                                                </p>										
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>			 						
                                </div>
                                <div class="col-12 pb-5 pb-lg-0">
                                    <div class="rounded-3 border-top border-white border-opacity-05 p-0 p-lg-4 bg-gradient-dark">
                                        <div class="mb-3 buttonActive-wrapper active pt-3 pt-lg-0 px-4 px-lg-0">
                                            <a href="#" class="d-none d-lg-inline-block position-relative d-inline-block text-white buttonActive">
                                        
                                                <i class="bi bi-check2-circle pe-2 text-md text-primary boxSize-sm d-inline-block"></i>
                                            </a>
                                            <h5 class="headline-5 headline-lg-5 lh-1 text-700 mb-0 d-inline-block">Results based on</h5>		
                                        </div>
                                        <div class="d-lg-flex justify-content-between align-items-center switchVehicle-wrapper">
                                            <div class="d-flex px-4 px-lg-0 d-lg-inline-block switchVehicle mb-4 mb-lg-0 w-100">
                                                <div class="switchVehicleItem border border-2 border-primary rounded-3 p-3 py-sm-4 py-lg-3 px-sm-4 order-2 d-inline-flex justify-content-center d-lg-inline-block align-items-center card-bg-dark">
                                                    <img src="assets/images/buggy.png" class="switchVehicleItem-img d-none d-sm-inline-block me-2" height="50" alt="">
                                                    <p class="switchVehicleItem-title text-xs lh-1 text-700 text-uppercase d-inline-block  ps-sm-2 pe-sm-2 mb-0">MY ATV XXXC 2013</p>	
                                                </div>
                                                <button class="text-white d-inline-flex order-1 d-lg-inline-block me-3 me-sm-4 me-lg-0 flex-sm-shrink-0 switchVehicleButton rounded-3 justify-content-center align-items-center boxSize-xxl h-auto p-1" type="button" data-bs-toggle="modal" data-bs-target="#swichMachineModal">
                                                    <img src="assets/images/Icon/refresh-icon-white.svg" alt="">
                                                </button>
                                            </div>
                                            <div class="d-none d-lg-inline-block text-end w-100 bottom-0 start-0 p-3 p-sm-4 p-lg-0">
                                                <button class="d-lg-inline-flex btn btn-link btn-text-sm btn-center text-white btn-md-100 text-decoration-underline">
                                                    <span>ADVANDEC SEARCH</span>
                                                </button>
                                                <button class="btn btn-primary btn-center flex-fill btn-md-text-xs btn-see-results">
                                                    See all results
                                                </button>						 								
                                            </div>
                                        </div>
                                    </div>		 							
                                </div>		 						
                            </div>
                        </div>                        
                    </div> 
                    <button class="btn btn-search btn-center btn-link position-absolute top-0 end-0 z-index_3">
                        <img src="assets/images/Icon/search-icon.svg" class="z-index_-1" alt="">
                    </button>     
                </div>
                <div class="bg-black-opacity-80 rounded-top-5 d-none p-4 sticky-bottom w-100 bottom-0 start-0 bg-blur border-top border-1 border-white border-opacity-10">
                        <button type="button" class="closeDropdown d-flex d-lg-none btn btn-center btn-gray me-3 opacity-100 rounded-1 bg-img-none boxSize-xxl h-auto  p-1" aria-label="Close">
                            <i class="fal fa-times"></i>
                        </button>
                        <button class="btn btn-primary btn-center flex-fill btn-md-text-xs btn-see-results">
                            See all results
                        </button>	
                        <button class="d-flex d-lg-none btn btn-primary btn-center ms-3  bg-primary-gradient boxSize-xxl h-auto p-1">
                            <img src="assets/images/Icon/filter-white.svg" alt="">
                        </button>
                    </div>
                <div class="fixed-bottom-item navbar-nav justify-content-between col-4 col-xxl-3 align-items-center">
                    <a class="nav-link active" aria-current="page" href="index.php">
                        <img src="assets/images/Icon/home-icon.svg" class="" alt="">
                    </a>
                    <a class="nav-link" href="my-garage.php">
                        <img src="assets/images/Icon/quad-icon.svg" class="" alt="">
                    </a>
                    <a class="nav-link" data-bs-toggle="offcanvas" href="#offcanvasChat" role="button" aria-controls="offcanvasChat">
                        <img src="assets/images/Icon/message-icon.svg" class="" alt="">
                    </a>
                    <a class="nav-link position-relative" data-bs-toggle="offcanvas" href="#offcanvasCart" role="button" aria-controls="offcanvasCart">
                        <img src="assets/images/Icon/shopping-cart.svg" class="" alt="">
                        <div class="position-absolute badge d-block rounded-circle bg-primary p-0 boxSize-2xs"></div>
                    </a> 
                    <a class="nav-link" data-bs-toggle="offcanvas" href="#offcanvasRight" role="button" aria-controls="offcanvasRight">
                        <img src="assets/images/Icon/user-icon.svg" class="" alt="">
                    </a>
                </div>
            </div>
        </div>
    </div>
</nav>