<!-- Header -->
<header id="js-header" class="u-header u-header--static u-header--show-hide u-header--change-appearance"
        data-header-fix-moment="500"
        data-header-fix-effect="slide">
  <div class="text-center text-lg-left u-header__section u-header__section--light g-bg-white g-brd-bottom g-brd-gray-light-v4 g-py-20">
    <div class="container">
      <div class="row flex-lg-row align-items-center justify-content-lg-start">
        <div class="col-lg-2">
          <!-- Logo -->
          <a href="{{ root }}index.html" class="navbar-brand">
            <img src="{{ root }}assets/img/logo/logo-1.png" alt="Image Description">
          </a>
          <!-- End Logo -->
        </div>

        <div class="col-lg-10">
          <div class="row">
            <div class="col-md g-brd-right g-brd-gray-light-v4">
              <div class="g-pa-10">
                <span class="icon icon-screen-smartphone g-valign-middle g-font-size-18 g-color-primary g-mr-5"></span>
                <span class="text-uppercase g-font-size-13">Call Us</span>
                <strong class="d-block g-pl-25">+469 548 521</strong>
              </div>
            </div>

            <div class="col-md g-brd-right g-brd-gray-light-v4">
              <div class="g-pa-10">
                <span class="icon icon-clock g-valign-middle g-font-size-18 g-color-primary g-mr-5"></span>
                <span class="text-uppercase g-font-size-13">Opening time</span>
                <strong class="d-block g-pl-25">Mon-Sat: 08.00 - 18.00</strong>
              </div>
            </div>

            <div class="col-md g-brd-right g-brd-gray-light-v4">
              <div class="g-pa-10">
                <span class="icon icon-envelope g-valign-middle g-font-size-18 g-color-primary g-mr-5"></span>
                <span class="text-uppercase g-font-size-13">Email us</span>
                <strong class="d-block g-pl-25">market@info.com</strong>
              </div>
            </div>

            <div class="col-md">
              <ul class="list-inline mb-0 g-pa-10">
                <li class="list-inline-item g-valign-middle g-mx-3">
                  <a class="d-block u-icon-v3 u-icon-size--sm g-rounded-50x g-bg-gray-light-v4 g-color-gray-light-v1 g-bg-primary--hover g-color-white--hover g-text-underline--none--hover" href="#!">
                    <i class="fa fa-facebook g-font-size-default"></i>
                  </a>
                </li>
                <li class="list-inline-item g-valign-middle g-mx-3">
                  <a class="d-block u-icon-v3 u-icon-size--sm g-rounded-50x g-bg-gray-light-v4 g-color-gray-light-v1 g-bg-primary--hover g-color-white--hover g-text-underline--none--hover" href="#!">
                    <i class="fa fa-twitter g-font-size-default"></i>
                  </a>
                </li>
                <li class="list-inline-item g-valign-middle g-mx-3">
                  <a class="d-block u-icon-v3 u-icon-size--sm g-rounded-50x g-bg-gray-light-v4 g-color-gray-light-v1 g-bg-primary--hover g-color-white--hover g-text-underline--none--hover" href="#!">
                    <i class="fa fa-instagram g-font-size-default"></i>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="u-header__section u-header__section--dark g-bg-gray-dark-v1 g-py-15"
       data-header-fix-moment-classes="u-shadow-v18">
    <nav class="navbar navbar-expand-lg py-0">
      <div class="container">
        <!-- Responsive Toggle Button -->
        <button class="navbar-toggler navbar-toggler-right btn g-line-height-1 g-brd-none g-pa-0 g-pos-abs g-top-3 g-right-0" type="button" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navBar"
                data-toggle="collapse"
                data-target="#navBar">
          <span class="hamburger hamburger--slider">
            <span class="hamburger-box">
              <span class="hamburger-inner"></span>
            </span>
          </span>
        </button>
        <!-- End Responsive Toggle Button -->

        <!-- Navigation -->
        <div class="collapse navbar-collapse align-items-center flex-sm-row g-pt-10 g-pt-0--lg g-mr-40--sm" id="navBar">
          <ul class="navbar-nav text-uppercase g-font-weight-700 mr-auto">
            <li class="nav-item g-pr-40--lg{% if mainNavActive_1 == 'home' %} active{% endif %}">
              <a href="#!" class="nav-link g-color-primary--hover g-py-10 g-px-0--lg">Home
                {% if mainNavActive_1 == 'home' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
            </li>
            <li class="nav-item g-pr-40--lg{% if mainNavActive_1 == 'pages' %} active{% endif %}">
              <a href="#!" class="nav-link g-color-primary--hover g-py-10 g-px-0--lg">Pages
                {% if mainNavActive_1 == 'pages' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
            </li>
            <li class="nav-item g-pr-40--lg{% if mainNavActive_1 == 'blog' %} active{% endif %}">
              <a href="#!" class="nav-link g-color-primary--hover g-py-10 g-px-0--lg">Blog
                {% if mainNavActive_1 == 'blog' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
            </li>
            <li class="nav-item g-pr-40--lg{% if mainNavActive_1 == 'portfolio' %} active{% endif %}">
              <a href="#!" class="nav-link g-color-primary--hover g-py-10 g-px-0--lg">Portfolio
                {% if mainNavActive_1 == 'portfolio' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
            </li>
            <li class="nav-item g-pr-40--lg{% if mainNavActive_1 == 'features' %} active{% endif %}">
              <a href="#!" class="nav-link g-color-primary--hover g-py-10 g-px-0--lg">Features
                {% if mainNavActive_1 == 'features' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
            </li>
            <li class="nav-item g-pr-40--lg{% if mainNavActive_1 == 'shortcodes' %} active{% endif %}">
              <a href="#!" class="nav-link g-color-primary--hover g-py-10 g-px-0--lg">Shortcodes
                {% if mainNavActive_1 == 'shortcodes' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
            </li>
            <li class="nav-item g-pr-40--lg{% if mainNavActive_1 == 'demos' %} active{% endif %}">
              <a href="#!" class="nav-link g-color-primary--hover g-py-10 g-px-0--lg">Demos
                {% if mainNavActive_1 == 'demos' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
            </li>
          </ul>
        </div>
        <!-- End Navigation -->

        <!-- Search -->
        <div class="text-uppercase g-valign-middle">
          <a href="#!" class="btn btn-md u-btn-primary g-font-size-13 g-font-weight-700">Get a Quote</a>
        </div>
        <!-- End Search -->
      </div>
    </nav>
  </div>
</header>
<!-- End Header -->
