Header Style Topbar

<header class="site-header mo-left header style-3">
	<div class="top-bar">
		<div class="container-fluid">
			<div class="d-flex justify-content-center align-items-center">
				<div class="dz-topbar-center">
					<p class="help-text"><strong>Need Help :</strong>Providing Innovative and Sustainable Solutions, Call (123) 123456789</p>
				</div>
			</div>
		</div>
	</div>
	
	<!-- Main Header -->
	<div class="sticky-header main-bar-wraper navbar-expand-lg">
		<div class="main-bar clearfix ">
			<div class="container-fluid clearfix">
				<!-- Website Logo -->
				<div class="logo-header mostion logo-white">
					<a href="index.html"><img src="images/logo-white.png" alt=""></a>
				</div>
				<!-- Nav Toggle Button -->
				<button class="navbar-toggler collapsed navicon justify-content-end" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
					<span></span>
					<span></span>
					<span></span>
				</button>
				<!-- Extra Nav -->
				<div class="extra-nav">
					<div class="extra-cell">
						<div class="search-inhead">
							<div class="dz-quik-search On">
								<form action="#">
									<input name="search" value="" type="text" class="form-control" placeholder="Search">
									<span id="quik-search-remove"><i class="ti-close"></i></span>
								</form>
							</div>
							<a class="search-link" id="quik-search-btn" href="javascript:void(0);">
								<i class="fas fa-search"></i>
							</a>
						</div>
						<a href="javascript:void(0);" class="btn btn-secondary d-xl-inline-block d-none btn-border btn-border-secondary m-r10 m-b10">REQUEST A QUOTE</a>
					</div>
				</div>
				<!-- Extra Nav -->
				
				<div class="header-nav navbar-collapse collapse justify-content-start" id="navbarNavDropdown">
					<div class="logo-header logo-dark">
						<a href="index.html"><img src="images/logo.png" alt=""></a>
					</div>
					<ul class="nav navbar-nav navbar navbar-left">	
						<li class="sub-menu-down"><a href="javascript:void(0);"><span>Home</span></a>
							<ul class="sub-menu">
								<li><a href="index.html">Home 1</a></li>
								<li><a href="index-2.html">Home 2</a></li>
								<li><a href="index-3.html">Home 3</a></li>
								<li><a href="index-4.html">Home 4</a></li>
								<li><a href="index-5.html">Home 5</a></li>
							</ul>
						</li>
						<li class="has-mega-menu"><a href="javascript:void(0);">Pages</a>
							<ul class="mega-menu">
								<li><a href="javascript:void(0);">Pages</a>
									<ul>
										<li><a href="about-me.html">About Me</a></li>
										<li><a href="about-me-2.html">About Me 2</a></li>
										<li><a href="about-us.html">About Us</a></li>
										<li><a href="about-us-2.html">About Us 2</a></li>
										<li><a href="appointment.html">Appointment</a></li>
									</ul>
								</li>
								<li> <a href="javascript:void(0);">Pages</a>
									<ul>
										<li><a href="coming-soon.html">Coming Soon</a></li>
										<li><a href="company-history.html">Company History</a></li>
										<li><a href="company-history-2.html">Company History 2</a></li>
										<li><a href="contact-us.html">Contact Us</a></li>
										<li><a href="error-404.html">Error 404</a></li>
									</ul>
								</li>
								<li> <a href="javascript:void(0);">Pages</a>
									<ul>
										<li><a href="gallery-grid-2.html">Gallery Grid 2</a></li>
										<li><a href="gallery-grid-3.html">Gallery Grid 3</a></li>
										<li><a href="gallery-grid-4.html">Gallery Grid 4</a></li>
										<li><a href="gallery-masonry.html">Gallery Masonry</a></li>
										<li><a href="help-desk.html">Help Desk</a></li>
									</ul>
								</li>
								<li> <a href="javascript:void(0);">Pages</a>
									<ul>
										<li><a href="pricing.html">Pricing Table</a></li>
										<li><a href="privacy-policy.html">Privacy Policy</a></li>
										<li><a href="services.html">Services</a></li>
										<li><a href="team.html">Team</a></li>
										<li><a href="under-construct.html">Under Construct</a></li>
									</ul>
								</li>
							</ul>
						</li>
						<li class="sub-menu-down"><a href="javascript:void(0);"><span>Portfolio</span></a>
							<ul class="sub-menu">
								<li><a href="portfolio.html">Portfolio 1</a></li>
								<li><a href="portfolio-2.html">Portfolio 2</a></li>
								<li><a href="portfolio-3.html">Portfolio 3</a></li>
								<li><a href="portfolio-4.html">Portfolio 4</a></li>
								<li><a href="portfolio-collage.html">Portfolio Collage</a></li>
								<li><a href="portfolio-film-strip.html">Portfolio Film Strip</a></li>
								<li><a href="portfolio-split-slider.html">Portfolio Split Slider</a></li>
								<li><a href="portfolio-details.html">Portfolio Details</a></li>
								<li><a href="portfolio-details-2.html">Portfolio Details 2</a></li>
							</ul>
						</li>
						<li class="sub-menu-down"><a href="javascript:void(0);"><span>Shop</span></a>
							<ul class="sub-menu">
								<li><a href="shop-grid-3.html">Shop Grid 3</a></li>
								<li><a href="shop-grid-sidebar.html">Shop Grid Sidebar</a></li>
								<li><a href="product-details.html">Product Details</a></li>
								<li><a href="shop-wishlist.html">Wishlist</a></li>
								<li><a href="shop-checkout.html">Checkout</a></li>
								<li><a href="shop-cart.html">Cart</a></li>
								<li><a href="login.html">Login</a></li>
							</ul>
						</li>
						<li class="sub-menu-down"><a href="javascript:void(0);"><span>Blog</span></a>
							<ul class="sub-menu">
								<li><a href="blog-grid.html">Blog Grid</a></li>
								<li><a href="blog-large-right-sidebar.html">Blog Right Sidebar</a></li>
								<li><a href="blog-list-sidebar.html">Blog List Sidebar</a></li>
								<li><a href="blog-list-left-sidebar.html">Blog List Left Sidebar</a></li>
								<li><a href="blog-details-post-wide.html">Post Wide View</a></li>
								<li><a href="blog-details.html">Blog Details</a></li>
							</ul>
						</li>
						<li class="has-mega-menu header-tabs-wraper">
							<a href="javascript:void(0);">Features</a>
							<div class="mega-menu">
								<div class="header-style-bx">
									<div class="header-style-tabs">
										<ul>
											<li><a href="javascript:void(0);" id="dz-elements" class="header-tabs">Elements</a></li>
											<li><a href="javascript:void(0);" id="dz-feature" class="header-tabs active">Feature</a></li>
										</ul>
									</div>
									<div class="header-style-content text-center">
										<div id="elements" class="header-tabs-content">
											<ul class="menu-list">
												<li>
													<span class="title">Element</span>
													<ul>
														<li><a href="element-buttons.html"><i class="ti-mouse"></i> Buttons</a></li>											
														<li><a href="element-iconbox.html"><i class="ti-layout-grid2"></i> Icon box styles</a></li>
														<li><a href="element-team.html"><i class="ti-user"></i> Team</a></li>
														<li><a href="element-list-group.html"><i class="ti-list"></i> List group</a></li>
														<li><a href="element-about.html"><i class="ti-clipboard"></i> About</a></li>
													</ul>
												</li>
												<li> 
													<span class="title">Element</span>
													<ul>
														<li><a href="element-accordion.html"><i class="ti-layout-accordion-list"></i> Accordians</a></li>
														<li><a href="element-alert.html"><i class="ti-alert"></i> Alert box</a></li>
														<li><a href="element-typhography.html"><i class="ti-layout-grid2-thumb"></i> Typhography</a></li>
														<li><a href="element-blog.html"><i class="ti-check-box"></i> Blogs</a></li>
														<li><a href="element-progress.html"><i class="ti-notepad"></i> Progress Bar</a></li>
													</ul>
												</li>
												<li>
													<span class="title">Element</span>
													<ul>
														<li><a href="element-counter.html"><i class="ti-timer"></i> Counters</a></li>											
														<li><a href="element-pagination.html"><i class="ti-more"></i> Pagination</a></li>
														<li><a href="element-testimonials.html"><i class="ti-comments"></i> Testimonials</a></li>
														<li><a href="element-imagebox.html"><i class="ti-image"></i> Image box content</a></li>
														<li><a href="element-tab.html"><i class="ti-layout-tab-window"></i> Tabs</a></li>
													</ul>
												</li>
												<li>
													<span class="title">Element</span>
													<ul>
														<li><a href="element-dividers.html"><i class="ti-layout-list-post"></i> Dividers</a></li>
														<li><a href="element-modal.html"><i class="ti-layers"></i> Modal</a></li>
														<li><a href="element-popover.html"><i class="ti-comment"></i> Popover</a></li>
														<li><a href="element-table.html"><i class="ti-view-list"></i> Table</a></li>
														<li><a href="element-widget.html"><i class="ti-layout-grid2"></i> Widgets</a></li>
													</ul>
												</li>
											</ul>
										</div>
										<div id="feature" class="header-tabs-content show">
											<ul class="menu-list">
												<li> 
													<span class="title">Header</span>
													<ul>
														<li><a href="header-1.html">Header 1</a></li>
														<li><a href="header-2.html">Header 2</a></li>
														<li><a href="header-3.html">Header 3</a></li>
														<li><a href="header-4.html">Header 4</a></li>
														<li><a href="header-5.html">Header 5</a></li>
														<li><a href="header-6.html">Header 6</a></li>
													</ul>
												</li>
												<li>
													<span class="title">Banner</span>
													<ul>
														<li><a href="banner-1.html">Banner 1</a></li>
														<li><a href="banner-2.html">Banner 2</a></li>
														<li><a href="banner-3.html">Banner 3</a></li>
														<li><a href="banner-4.html">Banner 4</a></li>
														<li><a href="banner-5.html">Banner 5</a></li>
													</ul>
												</li>
												<li>
													<span class="title">Footer</span>
													<ul>
														<li><a href="footer-1.html">Footer 1</a></li>
														<li><a href="footer-2.html">Footer 2</a></li>
														<li><a href="footer-3.html">Footer 3</a></li>
														<li><a href="footer-4.html">Footer 4</a></li>
														<li><a href="footer-5.html">Footer 5</a></li>
													</ul>
												</li>
											</ul>
										</div>
									</div>
								</div>
							</div>
						</li>
					</ul>
					<div class="dz-social-icon">
						<ul>
							<li><a class="fab fa-facebook-f" href="https://www.facebook.com/"></a></li>
							<li><a class="fab fa-twitter" href="https://twitter.com/?lang=en"></a></li>
							<li><a class="fab fa-linkedin-in" href="https://www.linkedin.com/"></a></li>
							<li><a class="fab fa-instagram" href="https://www.instagram.com/?hl=en"></a></li>
						</ul>
					</div>	
				</div>
			</div>
		</div>
	</div>
	<!-- Main Header End -->
</header>