<header class="site-header site-header--menu-center site-header--absolute">
  <div class="container-fluid pr-lg--30 pl-lg--30">
    <nav class="navbar site-navbar offcanvas-active navbar-expand-lg  px-0">
      <!-- Brand Logo-->
      <div class="brand-logo">
      <a href="index.html">
        <img src="image/logo-main-black.png" alt="" class="light-version-logo ">
        <img src="image/logo-main-white.png" alt="" class="dark-version-logo"></a>
        </div>
      <div class="collapse navbar-collapse" id="mobile-menu2">
        <div class="navbar-nav-wrapper">
        
        <ul class="navbar-nav main-menu">
          <li class="nav-item dropdown">
            <a
              class="nav-link dropdown-toggle gr-toggle-arrow"
              id="navbarDropdown"
              href="#features"
              role="button"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
              >Demos <i class="icon icon-small-down"></i></a>
              <ul class="gr-menu-dropdown dropdown-menu" aria-labelledby="navbarDropdown">
                <li class="drop-menu-item">
                  <a href="saas-subscription.html">
                    SaaS Subscription
                  </a>
                </li>
                <li class="drop-menu-item">
                  <a href="consultation.html">
                    Consultation
                  </a>
                </li>
                <li class="drop-menu-item">
                  <a href="b2b.html">
                    B2B
                  </a>
                </li>
                <li class="drop-menu-item">
                  <a href="web-application.html">
                    Web Application
                  </a>
                </li>
                <li class="drop-menu-item">
                  <a href="agency.html">
                    Agency
                  </a>
                </li>
                <li class="drop-menu-item">
                  <a href="mobile-app.html">
                    Mobile App
                  </a>
                </li>
                <li class="drop-menu-item">
                  <a href="product.html">
                    Product
                  </a>
                </li>
                <li class="drop-menu-item">
                  <a href="ecommerce.html">
                    ECommerce
                  </a>
                </li>
                <li class="drop-menu-item">
                  <a href="co-working.html">
                    Coworking
                  </a>
                </li>
                <li class="drop-menu-item">
                  <a href="job-directory.html">
                    Job Site
                  </a>
                </li>
              </ul>
          </li>
          <li class="nav-item dropdown">
            <a
              class="nav-link dropdown-toggle gr-toggle-arrow"
              id="navbarDropdown2"
              href="#features"
              role="button"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
              >Pages <i class="icon icon-small-down"></i></a>
            <ul class="gr-menu-dropdown dropdown-menu" aria-labelledby="navbarDropdown2">
              <li class="drop-menu-item">
                <a href="about.html">
                  About us
                </a>
              </li>
              <li class="drop-menu-item dropdown">
                <a class="dropdown-toggle gr-toggle-arrow" id="navbarDropdown21"
                href="#"
                role="button"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false">
                Career 
                <i class="icon icon-small-down"></i>
                </a>
                <ul class="gr-menu-dropdown dropdown-menu dropdown-right" aria-labelledby="navbarDropdown21">
                  <li class="drop-menu-item">
                    <a href="job-opening.html">
                      Job opening 
                    </a>
                  </li>
                  <li class="drop-menu-item">
                    <a href="job-details.html">
                      Job Details
                    </a>
                  </li>
                </ul>
              </li>
              <li class="drop-menu-item dropdown">
                <a class="dropdown-toggle gr-toggle-arrow" id="navbarDropdown24"
                href="#"
                role="button"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false">
                  Pricing 
                  <i class="icon icon-small-down"></i>
                </a>
                <ul class="gr-menu-dropdown dropdown-menu dropdown-right" aria-labelledby="navbarDropdown24">
                  <li class="drop-menu-item">
                    <a href="pricing-1.html">
                      Pricing 01
                    </a>
                  </li>
                  <li class="drop-menu-item">
                    <a href="pricing-2.html">
                      Pricing 02
                    </a>
                  </li>
                  <li class="drop-menu-item">
                    <a href="pricing-3.html">
                      Pricing 03
                    </a>
                  </li>
                </ul>
              </li>
              <li class="drop-menu-item dropdown">
                <a class="dropdown-toggle gr-toggle-arrow" id="navbarDropdown25"
                href="#"
                role="button"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false">
                  Contact 
                  <i class="icon icon-small-down"></i>
                </a>
                <ul class="gr-menu-dropdown dropdown-menu dropdown-right" aria-labelledby="navbarDropdown25">
                  <li class="drop-menu-item">
                    <a href="contact.html">
                      Contact 01
                    </a>
                  </li>
                  <li class="drop-menu-item">
                    <a href="contact-2.html">
                      Contact 02
                    </a>
                  </li>
                  <li class="drop-menu-item">
                    <a href="contact-3.html">
                      Contact 03
                    </a>
                  </li>
                </ul>
              </li>
              <li class="drop-menu-item dropdown">
                <a class="dropdown-toggle gr-toggle-arrow" id="navbarDropdown26"
                href="#"
                role="button"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false">
                Account 
                <i class="icon icon-small-down"></i>
                </a>
                <ul class="gr-menu-dropdown dropdown-menu dropdown-right" aria-labelledby="navbarDropdown26">
                  <li class="drop-menu-item">
                    <a href="sign-in.html">
                      Sign In
                    </a>
                  </li>
                  <li class="drop-menu-item">
                    <a href="sign-up.html">
                      Sign Up
                    </a>
                  </li>
                  <li class="drop-menu-item">
                    <a href="forget-pass.html">
                      Reset Password
                    </a>
                  </li>
                </ul>
              </li>
              <li class="drop-menu-item dropdown">
                <a class="dropdown-toggle gr-toggle-arrow" id="navbarDropdown27"
                href="#"
                role="button"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false">
                  Utitlity
                  <i class="icon icon-small-down"></i>
                </a>
                <ul class="gr-menu-dropdown dropdown-menu dropdown-right" aria-labelledby="navbarDropdown27">
                  <li class="drop-menu-item">
                    <a href="terms.html">
                      Terms & Conditions
                    </a>
                  </li>
                </ul>
              </li>
              <li class="drop-menu-item dropdown">
                <a class="dropdown-toggle gr-toggle-arrow" id="navbarDropdown27"
                href="#"
                role="button"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false">
                  E-commerce
                  <i class="icon icon-small-down"></i>
                </a>
                <ul class="gr-menu-dropdown dropdown-menu dropdown-right" aria-labelledby="navbarDropdown27">
                  <li class="drop-menu-item">
                    <a href="product-details.html">Product Details</a>
                  </li>
                  <li class="drop-menu-item">
                    <a href="cart.html">Cart</a>
                  </li>
                  <li class="drop-menu-item">
                    <a href="checkout.html">Checkout</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          
          <li class="nav-item dropdown dropdown-mega">
            <a
              class="nav-link dropdown-toggle gr-toggle-arrow"
              id="navbarDropdown"
              href="#features"
              role="button"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
              >elements <i class="icon icon-small-down"></i></a>
            <div class="gr-megamenu-dropdown center dropdown-menu d-lg-flex" aria-labelledby="navbarDropdown">
              <div class="col-lg-5 pl-0 d-none d-lg-flex align-items-center">
                <div class="dropdown-image-block h-100 w-100 rounded-sm bg-image overflow-hidden mr-xl-12" style="background-image: url(image/elements/menu-image.png)">
                  
                  <div class="menu-image-button text-center pb-11 h-100 d-flex align-items-end justify-content-center">
                    <a href="#" class="btn btn-white py-4 px-8 gr-text-9">Build my landing</a>
                  </div>
                </div>
              </div>
              <ul class="col-lg-7 col-xl-6 row-lg list-unstyled py-lg-7">
                <li class="col-lg-4">
                  <div class="single-dropdown-block">
                      <a href="element-pages/elements-header.html" class="mega-drop-menu-item">Headers</a>
                      <a href="element-pages/elements-heros.html" class="mega-drop-menu-item">Hero Area</a>
                      <a href="element-pages/elements-content.html" class="mega-drop-menu-item">Contents</a>
                      <a href="element-pages/elements-feature.html" class="mega-drop-menu-item">Features</a>
                      <a href="element-pages/elements-pricing.html" class="mega-drop-menu-item">Pricing</a>
                      <a href="element-pages/elements-counter.html" class="mega-drop-menu-item">Stats</a>
                  </div>
                </li>
                <li class="col-lg-4">
                  <div class="single-dropdown-block">
                      <a href="element-pages/elements-cta.html" class="mega-drop-menu-item">CTA</a>
                      <a href="element-pages/elements-testimonial.html" class="mega-drop-menu-item">Testimonial</a>
                      <a href="element-pages/elements-team-area.html" class="mega-drop-menu-item">Team</a>
                      <a href="element-pages/elements-newsletter.html" class="mega-drop-menu-item">Newsletter</a>
                      <a href="element-pages/elements-brand-area.html" class="mega-drop-menu-item d-block">Clients</a>
                      <a href="element-pages/elements-video.html" class="mega-drop-menu-item d-block">Video</a>
                  </div>
                </li>
                <li class="col-lg-4">
                  <div class="single-dropdown-block">
                      <a href="element-pages/elements-blog-area.html" class="mega-drop-menu-item d-block">News</a>
                      <a href="element-pages/elements-faq.html" class="mega-drop-menu-item d-block">FAQ</a>
                      <a href="element-pages/elements-alert-area.html" class="mega-drop-menu-item d-block">Alert</a>
                      <a href="element-pages/elements-footers.html" class="mega-drop-menu-item d-block">Footer</a>
                  </div>
                </li>
              </ul>
            </div>
          </li>
          
          <li class="nav-item">
            <a
              class="nav-link"
              href=" https://grayic.com/html-support/"
              role="button"
              aria-expanded="false"
              >Support</a>
          </li>
        </ul>
      
      
        </div>
        <button class="d-block d-lg-none offcanvas-btn-close" type="button" data-toggle="collapse" data-target="#mobile-menu2" aria-controls="mobile-menu2" aria-expanded="true" aria-label="Toggle navigation">
          <i class="gr-cross-icon"></i>
        </button>
      </div>
      
      
      <div class="header-btn  ml-auto ml-lg-5 mr-6 mr-lg-0 d-none d-xs-block">
        <a class="btn btn-primary gr-text-9" href="#">
          Get started free
        </a>
      </div>
      
      
      
        <!-- Mobile Menu Hamburger-->
      <button class="navbar-toggler btn-close-off-canvas  hamburger-icon border-0" type="button" data-toggle="collapse" data-target="#mobile-menu2" aria-controls="mobile-menu2" aria-expanded="false" aria-label="Toggle navigation">
        <!-- <i class="icon icon-simple-remove icon-close"></i> -->
        <div class="hamburger hamburger--squeeze js-hamburger">
          <div class="hamburger-box">
            <div class="hamburger-inner"></div>
          </div>
        </div>
      </button>
      <!--/.Mobile Menu Hamburger Ends-->
      
    </nav>
  </div>
</header>