<header id="header" class="main-header header-sticky header-sticky-smart header-style-10 text-uppercase bg-white">
<div class="header-wrapper sticky-area">
<div class="container-fluid">
<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-xl-block" href="../index.html">
<img src="../images/logo.png" alt="TheDir">
</a>
<div class="form-search form-search-style-04 d-flex mr-auto">
<form>
<div class="d-flex align-items-center">
<div class="form-search-items d-flex">
<div class="form-search-item d-flex align-items-center what border-right">
<label for="key-word">What</label>
<div class="input-group dropdown show bg-transparent">
<input type="text" autocomplete="off" id="key-word" name="key-word"
class="form-control bg-transparent border-0"
placeholder="Ex: food, service, barber, hotel" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<a href="#" class="input-group-append text-decoration-none">
<i class="fal fa-chevron-down"></i>
</a>
<ul class="dropdown-menu form-search-ajax" aria-labelledby="key-word">
<li class="dropdown-item item">
<a href="#" class="link-hover-dark-white">
<svg class="icon icon-pizza">
<use xlink:href="#icon-pizza"></use>
</svg>
<span class="font-size-md">Foods & Restaurants</span>
</a>
</li>
<li class="dropdown-item item">
<a href="#" class="link-hover-dark-white">
<svg class="icon icon-bed">
<use xlink:href="#icon-bed"></use>
</svg>
<span class="font-size-md">Hotels & Resorts</span>
</a>
</li>
<li class="dropdown-item item">
<a href="#" class="link-hover-dark-white">
<svg class="icon icon-pharmaceutical">
<use xlink:href="#icon-pharmaceutical"></use>
</svg>
<span class="font-size-md">Healths & Medicals</span>
</a>
</li>
<li class="dropdown-item item">
<a href="#" class="link-hover-dark-white">
<svg class="icon icon-cog">
<use xlink:href="#icon-cog"></use>
</svg>
<span class="font-size-md">Services</span>
</a>
</li>
<li class="dropdown-item item">
<a href="#" class="link-hover-dark-white">
<svg class="icon icon-car">
<use xlink:href="#icon-car"></use>
</svg>
<span class="font-size-md">Automotive</span>
</a>
</li>
</ul>
</div>
</div>
<div class="form-search-item d-flex align-items-center where">
<label for="region">Where</label>
<div class="input-group dropdown show bg-transparent">
<input type="text" autocomplete="off" id="region" name="region"
class="form-control bg-transparent border-0"
placeholder="San Francisco" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<a href="#" class="input-group-append text-decoration-none">
<i class="fal fa-chevron-down"></i>
</a>
<ul class="dropdown-menu form-search-ajax" aria-labelledby="region">
<li class="dropdown-item item">
<a href="#" class="link-hover-dark-white">
Austin
</a>
</li>
<li class="dropdown-item item">
<a href="#" class="link-hover-dark-white">
Boston
</a>
</li>
<li class="dropdown-item item">
<a href="#" class="link-hover-dark-white">
Chicago
</a>
</li>
<li class="dropdown-item item">
<a href="#" class="link-hover-dark-white">
Denver
</a>
</li>
<li class="dropdown-item item">
<a href="#" class="link-hover-dark-white">
Los Angeles
</a>
</li>
<li class="dropdown-item item">
<a href="#" class="link-hover-dark-white">
New York
</a>
</li>
<li class="dropdown-item item">
<a href="#" class="link-hover-dark-white">
San Francisco
</a>
</li>
<li class="dropdown-item item">
<a href="#" class="link-hover-dark-white">
Seattle
</a>
</li>
<li class="dropdown-item item">
<a href="#" class="link-hover-dark-white">
Washington
</a>
</li>
</ul>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary"><i
class="fal fa-search"></i>
</button>
</div>
</form>
</div>
<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/social-icons.html">Socical
icon</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/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 button-search">
<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="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">
<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>