<header id="header" class="main-header header-sticky header-sticky-smart header-style-01 header-float text-uppercase">
<div class="header-wrapper sticky-area">
<div class="container container-1720">
<nav class="navbar navbar-expand-xl">
<div class="header-mobile d-flex d-xl-none flex-fill justify-content-between align-items-center">
<div class="navbar-toggler toggle-icon" data-toggle="collapse"
data-target="#navbar-main-menu">
<span></span>
</div>
<a class="navbar-brand navbar-brand-mobile" href="index.html">
<img src="images/logo.png" alt="TheDir">
</a>
<a class="mobile-button-search" href="#search-popup"
data-gtf-mfp="true"
data-mfp-options='{"type":"inline","mainClass":"mfp-move-from-top mfp-align-top search-popup-bg","closeOnBgClick":false,"showCloseBtn":false}'><i
class="far fa-search"></i></a>
</div>
<div class="collapse navbar-collapse" id="navbar-main-menu">
<a class="navbar-brand d-none d-lg-block mr-auto" href="index.html">
<img src="images/logo.png" alt="TheDir">
</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="caret"><i
class="fas fa-angle-down"></i></span></a>
<ul class="sub-menu x-animated x-fadeInUp">
<li class="nav-item"><a class="nav-link" href="index.html">main</a>
</li>
<li class="nav-item"><a class="nav-link" href="demo/automotive-service/home-automotive-services.html">
automotive service</a></li>
<li class="nav-item"><a class="nav-link" href="demo/food-and-restaurant/home-food-and-restaurant.html">
food and restaurant</a></li>
<li class="nav-item"><a class="nav-link" href="demo/health-and-medical/home-health-and-medical.html">
health and medical</a></li>
<li class="nav-item"><a class="nav-link" href="demo/hotel/home-hotels.html">hotel</a>
</li>
<li class="nav-item"><a class="nav-link" href="demo/job/home-jobs.html">jobs</a>
</li>
<li class="nav-item"><a class="nav-link" href="demo/service-finder/home-services-finder.html">
service finder</a></li>
<li class="nav-item"><a class="nav-link" href="demo/shopping/home-shopping.html">
shopping</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Element<span class="caret"><i
class="fas fa-angle-down"></i></span></a>
<div class="sub-menu x-menu-mega x-animated x-fadeInUp width-800">
<div class="container">
<div class="row w-100">
<div class="col-lg-4">
<h5>Group 01</h5>
<ul class="mega-menu-col">
<li class="nav-item"><a class="nav-link"
href="elements/button.html">Buttons</a>
</li>
<li class="nav-item"><a class="nav-link"
href="elements/category.html">Categories</a>
</li>
<li class="nav-item"><a class="nav-link"
href="elements/client-logo.html">Client
logo</a></li>
<li class="nav-item"><a class="nav-link"
href="elements/counter.html">Counter</a>
</li>
<li class="nav-item"><a class="nav-link"
href="elements/cta.html">CTA</a>
</li>
</ul>
</div>
<div class="col-lg-4">
<h5>Group 02</h5>
<ul class="mega-menu-col">
<li class="nav-item"><a class="nav-link"
href="elements/heading.html">Heading</a>
</li>
<li class="nav-item"><a class="nav-link"
href="elements/icon-box.html">Icon
box</a></li>
<li class="nav-item"><a class="nav-link"
href="elements/image-box.html">Image
box</a></li>
<li class="nav-item"><a class="nav-link"
href="elements/listing.html">Listing</a>
</li>
<li class="nav-item"><a class="nav-link"
href="elements/post.html">Post</a>
</li>
</ul>
</div>
<div class="col-lg-4">
<h5>Group 03</h5>
<ul class="mega-menu-col">
<li class="nav-item"><a class="nav-link"
href="elements/social-icons.html">Socical
icon</a></li>
<li class="nav-item"><a class="nav-link"
href="elements/store.html">Store</a>
</li>
<li class="nav-item"><a class="nav-link"
href="elements/tab.html">Tab</a>
</li>
<li class="nav-item"><a class="nav-link"
href="elements/table-listing.html">Table
listing</a></li>
<li class="nav-item"><a class="nav-link"
href="elements/testimonial.html">Testimonial</a>
</li>
<li class="nav-item"><a class="nav-link"
href="elements/widget.html">Widget</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pages
<span class="caret"><i
class="fas fa-angle-down"></i></span>
</a>
<ul class="sub-menu x-animated x-fadeInUp">
<li class="nav-item">
<a class="nav-link" href="#">Shop <span class="caret"><i
class="fas fa-angle-down"></i></span></a>
<ul class="sub-menu x-animated x-fadeInUp">
<li class="nav-item"><a class="nav-link" href="shop-listing.html">Shop
listing</a></li>
<li class="nav-item"><a class="nav-link" href="shop-checkout.html">Shop
checkout</a></li>
<li class="nav-item"><a class="nav-link" href="shop-my-account.html">Shop
my account</a></li>
<li class="nav-item"><a class="nav-link" href="shop-shopping-cart.html">Shop
shopping cart</a></li>
<li class="nav-item"><a class="nav-link"
href="shop-single-product.html">Shop single
product</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Panel <span class="caret"><i
class="fas fa-angle-down"></i></span></a>
<ul class="sub-menu x-animated x-fadeInUp">
<li class="nav-item"><a class="nav-link"
href="panel-dashboard.html">
dashboard</a></li>
<li class="nav-item"><a class="nav-link"
href="panel-ad-campaigns-active.html">
ad campaigns active</a></li>
<li class="nav-item"><a class="nav-link"
href="panel-ad-campaigns-start-new.html">
ad campaign start new</a></li>
<li class="nav-item"><a class="nav-link"
href="panel-invoice-details.html">
invoice details</a></li>
<li class="nav-item"><a class="nav-link"
href="panel-invoice-listing.html">
invoice listing</a></li>
<li class="nav-item"><a class="nav-link"
href="panel-my-favourite.html"> my
favourite</a></li>
<li class="nav-item"><a class="nav-link"
href="panel-my-listing.html"> my
listing</a></li>
<li class="nav-item"><a class="nav-link"
href="panel-my-profile.html"> my
profile</a></li>
<li class="nav-item"><a class="nav-link"
href="panel-package.html">
package</a></li>
<li class="nav-item"><a class="nav-link"
href="panel-review-received.html">
review received</a></li>
<li class="nav-item"><a class="nav-link"
href="panel-review-submitted.html">
review submitted</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Other pages <span class="caret"><i
class="fas fa-angle-down"></i></span></a>
<div class="sub-menu x-menu-mega x-animated x-fadeInUp">
<div class="container">
<div class="row w-100">
<div class="col-lg-6">
<ul class="mega-menu-col">
<li class="nav-item"><a class="nav-link"
href="page-404.html">
404</a></li>
<li class="nav-item"><a class="nav-link"
href="page-about.html">
about</a></li>
<li class="nav-item"><a class="nav-link"
href="page-coming-soon.html">
comming soon</a></li>
<li class="nav-item"><a class="nav-link"
href="page-contact.html">
contact</a></li>
<li class="nav-item"><a class="nav-link"
href="page-faqs.html">
faqs</a></li>
<li class="nav-item"><a class="nav-link"
href="page-how-it-work.html">
how it work</a></li>
<li class="nav-item"><a class="nav-link"
href="page-pricing-plan.html">
pricing plan</a></li>
</ul>
</div>
<div class="col-lg-6">
<ul class="mega-menu-col">
<li class="nav-item"><a class="nav-link"
href="page-privacy-policy.html">
privacy
policy</a></li>
<li class="nav-item"><a class="nav-link"
href="page-submit-listing.html">submit
listing</a></li>
<li class="nav-item"><a class="nav-link"
href="page-terms-and-condition.html">Term
and condition</a></li>
<li class="nav-item"><a class="nav-link"
href="page-typography.html">
typography</a></li>
<li class="nav-item"><a class="nav-link"
href="page-common-elements.html">
Common elements</a></li>
<li class="nav-item"><a class="nav-link"
href="page-under-construction.html">
under
construction</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Explore<span class="caret"><i
class="fas fa-angle-down"></i></span></a>
<ul class="sub-menu x-animated x-fadeInUp">
<li class="nav-item">
<a class="nav-link" href="#"> layout
<span class="caret"><i class="fas fa-angle-down"></i></span>
</a>
<ul class="sub-menu x-animated x-fadeInUp">
<li class="nav-item"><a class="nav-link"
href="explore-full-map-grid.html"> full
map grid</a></li>
<li class="nav-item"><a class="nav-link"
href="explore-full-map-list.html"> full
map list</a></li>
<li class="nav-item"><a class="nav-link"
href="explore-half-map-grid.html"> half
map grid</a></li>
<li class="nav-item"><a class="nav-link"
href="explore-half-map-list.html"> half
map list</a></li>
<li class="nav-item"><a class="nav-link"
href="explore-sidebar-grid.html"> sidebar
grid</a></li>
<li class="nav-item"><a class="nav-link"
href="explore-sidebar-list.html"> sidebar
list</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Listing details
<span class="caret"><i class="fas fa-angle-down"></i></span>
</a>
<ul class="sub-menu x-animated x-fadeInUp">
<li class="nav-item"><a class="nav-link"
href="listing-details-full-gallery.html">
full gallery</a></li>
<li class="nav-item"><a class="nav-link"
href="listing-details-full-image.html">
full image</a></li>
<li class="nav-item"><a class="nav-link"
href="listing-details-full-map.html">
full map</a></li>
<li class="nav-item"><a class="nav-link"
href="listing-details-gallery.html">gallery</a>
</li>
<li class="nav-item"><a class="nav-link"
href="listing-details-image.html"> image</a>
</li>
<li class="nav-item"><a class="nav-link"
href="listing-details-no-image.html"> no
image</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog <span class="caret"><i
class="fas fa-angle-down"></i></span></a>
<ul class="sub-menu x-animated x-fadeInUp">
<li class="nav-item">
<a class="nav-link" href="#">Blog layout<span class="caret"><i
class="fas fa-angle-down"></i></span></a>
<ul class="sub-menu x-animated x-fadeInUp">
<li class="nav-item"><a class="nav-link" href="blog-listing-grid.html">
grid</a></li>
<li class="nav-item"><a class="nav-link"
href="blog-listing-large-image.html">
large image</a></li>
<li class="nav-item"><a class="nav-link"
href="blog-listing-with-sidebar.html">
with sidebar</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Post
<span class="caret"><i class="fas fa-angle-down"></i></span>
</a>
<ul class="sub-menu x-animated x-fadeInUp">
<li class="nav-item"><a class="nav-link" href="blog-single-audio.html">
audio</a></li>
<li class="nav-item"><a class="nav-link"
href="blog-single-gallery.html">
gallery</a></li>
<li class="nav-item"><a class="nav-link" href="blog-single-image.html">
image</a></li>
<li class="nav-item"><a class="nav-link" href="blog-single-video.html">video</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Docs <span class="caret"><i
class="fas fa-angle-down"></i></span></a>
<ul class="sub-menu x-animated x-fadeInUp">
<li class="nav-item">
<a class="nav-link" href="document/introduction.html">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="starter/introduction.html">Get started
</a>
</li>
</ul>
</li>
</ul>
<div class="header-customize justify-content-end align-items-center d-none d-xl-flex">
<div class="header-customize-item">
<a href="#login-popup" class="link" data-gtf-mfp="true"
data-mfp-options='{"type":"inline"}'>
<svg class="icon icon-user-circle-o">
<use xlink:href="#icon-user-circle-o"></use>
</svg>
Log in</a>
</div>
<div class="header-customize-item">
<!-- .header-customize-cart start -->
<div class="header-customize-cart">
<a class="mini-cart-icon d-flex align-items-end link" href="#"
title="Shopping Cart">
<svg class="icon icon-bag-1">
<use xlink:href="#icon-bag-1"></use>
</svg>
<span>(2)</span> </a>
<div class="shopping-cart-popup animated fadeIn">
<ul class="list-group list-group-flush">
<li class="list-group-item bg-transparent px-0 pb-4 d-flex align-items-start">
<a href="shop-single-product.html" class="media align-items-start text-dark text-decoration-none">
<div class="image mr-3">
<img src="images/shop/cart-1.jpg"
title="Product 01">
</div>
<div class="media-body lh-14">
<span class="d-block font-size-md text-capitalize font-weight-normal">Black Printed T-shirt</span>
<span class="font-weight-normal">$39.00</span>
</div>
</a>
<a href="#" class="close ml-auto link-hover-darker-light-dark"><i class="fal fa-times"></i></a>
</li>
<li class="list-group-item bg-transparent px-0 pt-3 pb-4 d-flex align-items-start">
<a href="shop-single-product.html" class="media align-items-start text-dark text-decoration-none">
<div class="image mr-3">
<img src="images/shop/cart-2.jpg" title="Product 02">
</div>
<div class="media-body lh-14">
<span class="d-block font-size-md text-capitalize font-weight-normal">White Retro Sneaker</span>
<span class="font-weight-normal">$29.00</span>
</div>
</a>
<a href="#" class="close ml-auto link-hover-darker-light-dark"><i class="fal fa-times"></i></a>
</li>
<li class="list-group-item bg-transparent px-0 d-flex align-items-center py-5">
<span class="text-uppercase font-size-md text-dark">Sub total</span>
<span class="ml-auto text-primary h5 mb-0">$55.00</span>
</li>
</ul>
<div class="mt-6 row mx-n2">
<div class="col-6 px-2">
<a href="shop-shopping-cart.html" class="btn btn-primary btn-icon-right btn-block font-size-base py-2">View
cart <i class="fal fa-chevron-right"></i></a>
</div>
<div class="col-6 px-2">
<a href="shop-checkout.html" class="btn btn-gray btn-icon-right btn-block text-white font-size-base py-2">Checkout
<i class="fal fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="header-customize-item button">
<a href="page-submit-listing.html" class="btn btn-primary btn-icon-right">Add Listing
<i
class="far fa-angle-right"></i></a>
</div>
</div>
</div>
</nav>
</div>
</div>
</header><link rel="stylesheet" href="vendors/animate.css"><script src="vendors/hc-sticky/hc-sticky.js"></script>