<header id="header" class="main-header header-sticky header-sticky-smart header-style-04 header-light text-uppercase">
<div class="header-wrapper sticky-area">
<div class="container">
<div class="topbar d-flex">
<div class="topbar-item topbar-item-left d-flex align-items-center">
<div class="item">
<svg class="icon icon-call">
<use xlink:href="#icon-call"></use>
</svg>
<span>Call us: +433-5216-4866 </span>
</div>
<span class="separate">|</span>
<div class="item">
<i class="fal fa-envelope"></i>
<span>support@thedir.co </span>
</div>
</div>
<div class="topbar-item ml-auto d-flex align-items-center">
<div class="item">
<div class="social-icon text-white">
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a target="_blank" title="Twitter" href="#">
<i class="fab fa-twitter">
</i>
<span>Twitter</span>
</a>
</li>
<li class="list-inline-item">
<a target="_blank" title="Facebook" href="#">
<i class="fab fa-facebook-f">
</i>
<span>Facebook</span>
</a>
</li>
<li class="list-inline-item">
<a target="_blank" title="Google plus" href="#">
<svg class="icon icon-google-plus-symbol">
<use xlink:href="#icon-google-plus-symbol"></use>
</svg>
<span>Google plus</span>
</a>
</li>
<li class="list-inline-item">
<a target="_blank" title="Instagram" href="#">
<svg class="icon icon-instagram">
<use xlink:href="#icon-instagram"></use>
</svg>
<span>Instagram</span>
</a>
</li>
<li class="list-inline-item">
<a target="_blank" title="Rss" href="#">
<i class="fas fa-rss"></i>
<span>Rss</span>
</a>
</li>
</ul>
</div>
</div>
<span class="separate">|</span>
<div class="item language">
<div class="dropdown show">
<a class="dropdown-toggle d-flex align-items-center" href="#"
role="button"
id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
ENG
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">FRA</a>
<a class="dropdown-item" href="#">CHI</a>
<a class="dropdown-item" href="#">KOR</a>
</div>
</div>
</div>
</div>
</div>
<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/white-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 mr-auto" href="index.html">
<img src="images/white-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 ml-35px">
<div class="header-customize-item">
<a href="#login-popup" class="link text-uppercase" 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-sm btn-white btn-icon-right text-capitalize">Register
restaurant </a>
</div>
</div>
</div>
</nav>
</div>
</div>
</header><link rel="stylesheet" href="vendors/animate.css"><script src="vendors/hc-sticky/hc-sticky.js"></script>