<!-- Header -->
<header id="js-header" class="u-header u-header--static--lg u-header--show-hide--lg u-header--change-appearance--lg"
        data-header-fix-moment="500"
        data-header-fix-effect="slide">
  <div class="u-header__section u-header__section--light g-bg-white g-transition-0_3 g-py-10"
       data-header-fix-moment-exclude="g-py-10"
       data-header-fix-moment-classes="u-shadow-v18 g-py-0">
    <nav class="js-mega-menu navbar navbar-expand-lg">
      <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 -->

        <!-- Logo -->
        <a href="{{ root }}index.html" class="navbar-brand">
          <img src="{{ root }}assets/img/logo/logo-1.png" alt="Image Description">
        </a>
        <!-- End Logo -->

        <!-- Navigation -->
        <div class="collapse navbar-collapse align-items-center flex-sm-row g-pt-10 g-pt-5--lg" id="navBar">
          <ul class="navbar-nav text-uppercase g-font-weight-600 ml-auto">
            <!-- Mega Menu Item -->
            <li class="hs-has-mega-menu nav-item g-mx-20--lg"
                data-animation-in="fadeIn"
                data-animation-out="fadeOut"
                data-position="right">
              <a id="mega-menu-label-3" class="nav-link g-px-0" href="#" aria-haspopup="true" aria-expanded="false">Products-1
                <i class="hs-icon hs-icon-arrow-bottom g-font-size-11 g-ml-7"></i>
              </a>

              <!-- Mega Menu -->
              <div class="w-100 hs-mega-menu u-shadow-v11 g-text-transform-none g-font-weight-400 g-brd-top g-brd-primary g-brd-top-2 g-bg-white g-pa-30 g-mt-17 g-mt-7--lg--scrolling" aria-labelledby="mega-menu-label-3">
                <div class="row">
                  <div class="col-lg-3 g-mb-30 g-mb-0--lg">
                    <figure class="g-px-10">
                      <div class="g-pos-rel g-mb-20">
                        <img class="img-fluid" src="{{ root }}assets/img-temp/480x700/img1.jpg" alt="Image Description">

                        <!-- Ribbon -->
                        <figcaption>
                          <span class="u-ribbon-v1 g-width-40 g-height-40 g-color-white g-bg-primary g-font-size-11 text-center text-uppercase g-rounded-50x g-top-10 g-left-10 g-px-2 g-py-12">New</span>
                        </figcaption>
                        <!-- End Ribbon -->
                      </div>

                      <div class="media">
                        <!-- Product Info -->
                        <div class="d-flex flex-column">
                          <h4 class="h6 g-color-black mb-1">
                            <a class="u-link-v5 g-color-black g-color-primary--hover" href="#" tabindex="0">
                              Summer shorts
                            </a>
                          </h4>
                          <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13" href="#" tabindex="0">Man</a>
                          <span class="d-block g-color-black g-font-size-17">$52.00</span>
                        </div>
                        <!-- End Product Info -->

                        <!-- Products Icons -->
                        <ul class="list-inline media-body text-right">
                          <li class="list-inline-item align-middle mx-0">
                            <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Cart" tabindex="0">
                              <i class="icon-finance-100 u-line-icon-pro"></i>
                            </a>
                          </li>
                          <li class="list-inline-item align-middle mx-0">
                            <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist" tabindex="0">
                              <i class="icon-medical-022 u-line-icon-pro"></i>
                            </a>
                          </li>
                        </ul>
                        <!-- End Products Icons -->
                      </div>
                    </figure>
                  </div>

                  <div class="col-lg-3 g-mb-30 g-mb-0--lg">
                    <figure class="g-px-10">
                      <div class="g-pos-rel g-mb-20">
                        <img class="img-fluid" src="{{ root }}assets/img-temp/480x700/img2.jpg" alt="Image Description">
                      </div>

                      <div class="media">
                        <!-- Product Info -->
                        <div class="d-flex flex-column">
                          <h4 class="h6 g-color-black mb-1">
                            <a class="u-link-v5 g-color-black g-color-primary--hover" href="#" tabindex="0">
                              Stylish shirt
                            </a>
                          </h4>
                          <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13" href="#" tabindex="0">Woman</a>
                          <s class="d-block g-color-lightred g-font-weight-500 g-font-size-13">$101.00</s>
                          <span class="d-block g-color-black g-font-size-17">$99.00</span>
                        </div>
                        <!-- End Product Info -->

                        <!-- Products Icons -->
                        <ul class="list-inline media-body text-right">
                          <li class="list-inline-item align-middle mx-0">
                            <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Cart" tabindex="0">
                              <i class="icon-finance-100 u-line-icon-pro"></i>
                            </a>
                          </li>
                          <li class="list-inline-item align-middle mx-0">
                            <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist" tabindex="0">
                              <i class="icon-medical-022 u-line-icon-pro"></i>
                            </a>
                          </li>
                        </ul>
                        <!-- End Products Icons -->
                      </div>
                    </figure>
                  </div>

                  <div class="col-lg-3 g-mb-30 g-mb-0--lg">
                    <figure class="g-px-10">
                      <div class="g-pos-rel g-mb-20">
                        <img class="img-fluid" src="{{ root }}assets/img-temp/480x700/img3.jpg" alt="Image Description">

                        <!-- Ribbon -->
                        <figcaption>
                          <span class="u-ribbon-v1 g-width-40 g-height-40 g-color-white g-bg-lightred g-font-size-11 text-center text-uppercase g-rounded-50x g-top-10 g-left-10 g-px-2 g-py-12">Sold</span>
                        </figcaption>
                        <!-- End Ribbon -->
                      </div>

                      <div class="media">
                        <!-- Product Info -->
                        <div class="d-flex flex-column">
                          <h4 class="h6 g-color-black mb-1">
                            <a class="u-link-v5 g-color-black g-color-primary--hover" href="#" tabindex="0">
                              Classic jacket
                            </a>
                          </h4>
                          <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13" href="#" tabindex="0">Man</a>
                          <span class="d-block g-color-black g-font-size-17">$49.99</span>
                        </div>
                        <!-- End Product Info -->

                        <!-- Products Icons -->
                        <ul class="list-inline media-body text-right">
                          <li class="list-inline-item align-middle mx-0">
                            <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Cart" tabindex="0">
                              <i class="icon-finance-100 u-line-icon-pro"></i>
                            </a>
                          </li>
                          <li class="list-inline-item align-middle mx-0">
                            <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist" tabindex="0">
                              <i class="icon-medical-022 u-line-icon-pro"></i>
                            </a>
                          </li>
                        </ul>
                        <!-- End Products Icons -->
                      </div>
                    </figure>
                  </div>

                  <div class="col-lg-3 g-mb-30 g-mb-0--lg">
                    <figure class="g-px-10">
                      <div class="g-pos-rel g-mb-20">
                        <img class="img-fluid" src="{{ root }}assets/img-temp/480x700/img4.jpg" alt="Image Description">
                      </div>

                      <div class="media">
                        <!-- Product Info -->
                        <div class="d-flex flex-column">
                          <h4 class="h6 g-color-black mb-1">
                            <a class="u-link-v5 g-color-black g-color-primary--hover" href="#" tabindex="0">
                              Wool lined parka
                            </a>
                          </h4>
                          <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13" href="#" tabindex="0">Woman</a>
                          <span class="d-block g-color-black g-font-size-17">$82.37</span>
                        </div>
                        <!-- End Product Info -->

                        <!-- Products Icons -->
                        <ul class="list-inline media-body text-right">
                          <li class="list-inline-item align-middle mx-0">
                            <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Cart" tabindex="0">
                              <i class="icon-finance-100 u-line-icon-pro"></i>
                            </a>
                          </li>
                          <li class="list-inline-item align-middle mx-0">
                            <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist" tabindex="0">
                              <i class="icon-medical-022 u-line-icon-pro"></i>
                            </a>
                          </li>
                        </ul>
                        <!-- End Products Icons -->
                      </div>
                    </figure>
                  </div>
                </div>
              </div>
              <!-- End Mega Menu -->
            </li>
            <!-- End Mega Menu Item -->
            <!-- Mega Menu Item -->
            <li class="hs-has-mega-menu nav-item g-mx-20--lg"
                data-animation-in="fadeIn"
                data-animation-out="fadeOut"
                data-position="right">
              <a id="mega-menu-label-2" class="nav-link g-px-0" href="#" aria-haspopup="true" aria-expanded="false">Products-2
                <i class="hs-icon hs-icon-arrow-bottom g-font-size-11 g-ml-7"></i>
              </a>

              <!-- Mega Menu -->
              <div class="w-100 hs-mega-menu u-shadow-v11 g-text-transform-none g-font-weight-400 g-brd-top g-brd-primary g-brd-top-2 g-bg-white g-pa-30 g-mt-17 g-mt-7--lg--scrolling" aria-labelledby="mega-menu-label-2">
                <div class="row align-items-stretch">
                  <div class="col-lg-4 g-mb-30 g-mb-0--lg">
                    <article class="u-block-hover">
                      <img class="w-100 u-block-hover__main--zoom-v1 g-mb-minus-8" src="{{ root }}assets/img-temp/650x850/img1.jpg" alt="Image Description">

                      <div class="g-pos-abs g-bottom-30 g-left-30">
                        <span class="d-block g-color-black">Collections</span>
                        <h2 class="h1 mb-0 g-color-black">Women</h2>
                      </div>

                      <a class="u-link-v2" href="#"></a>
                    </article>
                  </div>

                  <div class="col-lg-4 g-mb-30 g-mb-0--lg">
                    <article class="u-block-hover">
                      <img class="w-100 u-block-hover__main--zoom-v1 g-mb-minus-8" src="{{ root }}assets/img-temp/650x850/img2.jpg" alt="Image Description">

                      <div class="g-pos-abs g-bottom-30 g-left-30">
                        <span class="d-block g-color-black">Collections</span>
                        <h2 class="h1 mb-0 g-color-black">Children</h2>
                      </div>

                      <a class="u-link-v2" href="#"></a>
                    </article>
                  </div>

                  <div class="col-lg-4 g-mb-30 g-mb-0--lg">
                    <article class="u-block-hover">
                      <img class="w-100 u-block-hover__main--zoom-v1 g-mb-minus-8" src="{{ root }}assets/img-temp/650x850/img3.jpg" alt="Image Description">

                      <div class="g-pos-abs g-bottom-30 g-left-30">
                        <span class="d-block g-color-black">Collections</span>
                        <h2 class="h1 mb-0 g-color-black">Men</h2>
                      </div>

                      <a class="u-link-v2" href="#"></a>
                    </article>
                  </div>
                </div>
              </div>
              <!-- End Mega Menu -->
            </li>
            <!-- End Mega Menu Item -->
            <!-- Mega Menu Item -->
            <li class="hs-has-mega-menu nav-item g-mx-20--lg"
                data-animation-in="fadeIn"
                data-animation-out="fadeOut"
                data-position="right">
              <a id="mega-menu-label-3" class="nav-link g-px-0" href="#" aria-haspopup="true" aria-expanded="false">Products-3
                <i class="hs-icon hs-icon-arrow-bottom g-font-size-11 g-ml-7"></i>
              </a>

              <!-- Mega Menu -->
              <div class="w-100 hs-mega-menu u-shadow-v11 g-text-transform-none g-font-weight-400 g-brd-top g-brd-primary g-brd-top-2 g-mt-17 g-mt-7--lg--scrolling" aria-labelledby="mega-menu-label-3">
                <div class="row align-items-center no-gutters">
                  <div class="col-md-7 col-lg-8 u-block-hover g-bg-size-cover g-min-height-500 g-flex-centered" data-bg-img-src="{{ root }}assets/img-temp/1200x800/img1.jpg" style="background-image: url({{ root }}assets/img-temp/1200x800/img1.jpg);">
                    <div class="g-flex-centered-item text-right g-pa-50">
                      <h2 class="g-color-white g-font-weight-700 g-font-size-50 text-uppercase g-line-height-1 mb-4">Summer
                        <br>
                        Collection
                      </h2>
                      <span class="u-link-v5 g-color-black g-color-primary--hover g-font-size-18">Shop Now</span>
                    </div>

                    <a class="u-link-v2" href="#"></a>
                  </div>

                  <div class="col-md-5 col-lg-4 u-block-hover g-bg-size-cover g-min-height-500 g-flex-centered" data-bg-img-src="{{ root }}assets/img/bg/secondary.png" style="background-image: url({{ root }}assets/img/bg/secondary.png);">
                    <div class="text-center">
                      <img class="img-fluid mb-3" src="{{ root }}assets/img-temp/500x320/img4.png" alt="Image Description">
                      <h3 class="h5 u-link-v5 g-color-primary--hover g-font-weight-400 mb-3">Sneaker Shoes for Man</h3>
                      <span class="g-color-primary g-font-weight-700 g-font-size-20">$45.00</span>
                    </div>

                    <a class="u-link-v2" href="#"></a>
                  </div>
                </div>
              </div>
              <!-- End Mega Menu -->
            </li>
            <!-- End Mega Menu Item -->
            <!-- Mega Menu Item -->
            <li class="hs-has-mega-menu nav-item g-mx-20--lg"
                data-animation-in="fadeIn"
                data-animation-out="fadeOut"
                data-position="right">
              <a id="mega-menu-label-3" class="nav-link g-px-0" href="#" aria-haspopup="true" aria-expanded="false">Products-4
                <i class="hs-icon hs-icon-arrow-bottom g-font-size-11 g-ml-7"></i>
              </a>

              <!-- Mega Menu -->
              <div class="w-100 hs-mega-menu u-shadow-v11 g-text-transform-none g-font-weight-400 g-brd-top g-brd-primary g-brd-top-2 g-bg-white g-pa-30 g-mt-17 g-mt-7--lg--scrolling" aria-labelledby="mega-menu-label-3">
                <div class="row">
                  <div class="col-lg-3 g-mb-30 g-mb-0--lg">
                    <h4 class="h5 text-uppercase g-font-weight-600">Clothes</h4>
                    <ul class="list-unstyled g-mb-25">
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">New in</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Coats &amp; Jackets</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Jeans</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Dresses</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Shorts</a>
                        <span class="u-label g-bg-primary g-ml-10">New</span>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Skirts</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">T-Shirts</a>
                      </li>
                    </ul>
                    <h4 class="h5 text-uppercase g-font-weight-600">Shoes</h4>
                    <ul class="list-unstyled">
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Boots</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">FLats</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Heels</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Sandals</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Sports</a>
                      </li>
                    </ul>
                  </div>

                  <div class="col-lg-3 g-mb-30 g-mb-0--lg">
                    <h4 class="h5 text-uppercase g-font-weight-600">Accessories</h4>
                    <ul class="list-unstyled g-mb-25">
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">All accessories</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Bags &amp; Purses</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Scarvs &amp; Hats</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Jewellery</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Fragrance &amp; Beauty</a>
                      </li>
                    </ul>
                    <h4 class="h5 text-uppercase g-font-weight-600">Lingerie</h4>
                    <ul class="list-unstyled g-mb-25">
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Linger</a>
                        <span class="u-label g-bg-primary g-ml-10">New</span>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Slippers</a>
                      </li>
                    </ul>
                    <h4 class="h5 text-uppercase g-font-weight-600">Nightwear</h4>
                    <ul class="list-unstyled">
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Nightwear</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Socks</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Tights</a>
                      </li>
                    </ul>
                  </div>

                  <div class="col-lg-3 g-mb-30 g-mb-0--lg">
                    <h4 class="h5 text-uppercase g-font-weight-600">Mixed</h4>
                    <ul class="list-unstyled g-mb-25">
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">New in</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Coats &amp; Jackets</a>
                        <span class="u-label g-bg-primary g-ml-10">New</span>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Jeans</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Dresses</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Shorts</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Skirts</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">T-shirts</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Boots</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Flats</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Heels</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Sandals</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Sports</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Socks</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Tights</a>
                      </li>
                    </ul>
                  </div>

                  <div class="col-lg-3 g-mb-30 g-mb-0--lg">
                    <h4 class="h5 text-uppercase g-font-weight-600">Accessories</h4>
                    <ul class="list-unstyled g-mb-25">
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">All accessories</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Bags &amp; Purses</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Scarvs &amp; Hats</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Jewellery</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Fragrance &amp; Beauty</a>
                      </li>
                    </ul>
                    <h4 class="h5 text-uppercase g-font-weight-600">Lingerie</h4>
                    <ul class="list-unstyled g-mb-25">
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Linger</a>
                        <span class="u-label g-bg-primary g-ml-10">New</span>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Slippers</a>
                      </li>
                    </ul>
                    <h4 class="h5 text-uppercase g-font-weight-600">Nightwear</h4>
                    <ul class="list-unstyled">
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Nightwear</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Socks</a>
                      </li>
                      <li class="g-mb-5">
                        <a class="g-color-main" href="#">Tights</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <!-- End Mega Menu -->
            </li>
            <!-- End Mega Menu Item -->
            <!-- Mega Menu Item -->
            <li class="hs-has-mega-menu nav-item g-mx-20--lg"
                data-animation-in="fadeIn"
                data-animation-out="fadeOut"
                data-position="right">
              <a id="mega-menu-label-3" class="nav-link g-px-0" href="#" aria-haspopup="true" aria-expanded="false">Products-5
                <i class="hs-icon hs-icon-arrow-bottom g-font-size-11 g-ml-7"></i>
              </a>

              <!-- Mega Menu -->
              <div class="w-100 hs-mega-menu u-shadow-v11 g-text-transform-none g-font-weight-400 g-brd-top g-brd-primary g-brd-top-2 g-bg-white g-pa-30 g-mt-17 g-mt-7--lg--scrolling" aria-labelledby="mega-menu-label-3">
                <div class="row">
                  <div class="col-md-6 col-lg-4 g-px-10">
                    <!-- Article -->
                    <article class="media g-brd-around g-brd-gray-light-v4 g-bg-white rounded g-pa-10 g-mb-20">
                      <!-- Article Image -->
                      <div class="g-max-width-100 g-mr-15">
                        <img class="d-flex w-100" src="{{ root }}assets/img-temp/150x150/img1.jpg" alt="Image Description">
                      </div>
                      <!-- End Article Image -->

                      <!-- Article Info -->
                      <div class="media-body align-self-center">
                        <h4 class="h5 g-mb-7">
                          <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Glasses</a>
                        </h4>
                        <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13 g-mb-10" href="#">Accessories</a>
                        <!-- End Article Info -->

                        <!-- Article Footer -->
                        <footer class="d-flex justify-content-between g-font-size-16">
                          <span class="g-color-black g-line-height-1">$22.00</span>
                          <ul class="list-inline g-color-gray-light-v2 g-font-size-14 g-line-height-1">
                            <li class="list-inline-item align-middle g-brd-right g-brd-gray-light-v3 g-pr-10 g-mr-6">
                              <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Cart">
                                <i class="icon-finance-100 u-line-icon-pro"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle">
                              <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
                                <i class="icon-medical-022 u-line-icon-pro"></i>
                              </a>
                            </li>
                          </ul>
                        </footer>
                        <!-- End Article Footer -->
                      </div>
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="col-md-6 col-lg-4 g-px-10">
                    <!-- Article -->
                    <article class="media g-brd-around g-brd-gray-light-v4 g-bg-white rounded g-pa-10 g-mb-20">
                      <!-- Article Image -->
                      <div class="g-max-width-100 g-mr-15">
                        <img class="d-flex w-100" src="{{ root }}assets/img-temp/150x150/img2.jpg" alt="Image Description">
                      </div>
                      <!-- End Article Image -->

                      <!-- Article Info -->
                      <div class="media-body align-self-center">
                        <h4 class="h5 g-mb-7">
                          <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Gloves</a>
                        </h4>
                        <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13 g-mb-10" href="#">Accessories</a>
                        <!-- End Article Info -->

                        <!-- Article Footer -->
                        <footer class="d-flex justify-content-between g-font-size-16">
                          <span class="g-color-black g-line-height-1">$55.00</span>
                          <ul class="list-inline g-color-gray-light-v2 g-font-size-14 g-line-height-1">
                            <li class="list-inline-item align-middle g-brd-right g-brd-gray-light-v3 g-pr-10 g-mr-6">
                              <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Cart">
                                <i class="icon-finance-100 u-line-icon-pro"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle">
                              <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
                                <i class="icon-medical-022 u-line-icon-pro"></i>
                              </a>
                            </li>
                          </ul>
                        </footer>
                        <!-- End Article Footer -->
                      </div>
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="col-md-6 col-lg-4 g-px-10">
                    <!-- Article -->
                    <article class="media g-brd-around g-brd-gray-light-v4 g-bg-white rounded g-pa-10 g-mb-20">
                      <!-- Article Image -->
                      <div class="g-max-width-100 g-mr-15">
                        <img class="d-flex w-100" src="{{ root }}assets/img-temp/150x150/img3.jpg" alt="Image Description">
                      </div>
                      <!-- End Article Image -->

                      <!-- Article Info -->
                      <div class="media-body align-self-center">
                        <h4 class="h5 g-mb-7">
                          <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Chukka Shoes</a>
                        </h4>
                        <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13 g-mb-10" href="#">Footwear</a>
                        <!-- End Article Info -->

                        <!-- Article Footer -->
                        <footer class="d-flex justify-content-between g-font-size-16">
                          <span class="g-color-black g-line-height-1">$55.00</span>
                          <ul class="list-inline g-color-gray-light-v2 g-font-size-14 g-line-height-1">
                            <li class="list-inline-item align-middle g-brd-right g-brd-gray-light-v3 g-pr-10 g-mr-6">
                              <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Cart">
                                <i class="icon-finance-100 u-line-icon-pro"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle">
                              <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
                                <i class="icon-medical-022 u-line-icon-pro"></i>
                              </a>
                            </li>
                          </ul>
                        </footer>
                        <!-- End Article Footer -->
                      </div>
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="col-md-6 col-lg-4 g-px-10">
                    <!-- Article -->
                    <article class="media g-brd-around g-brd-gray-light-v4 g-bg-white rounded g-pa-10 g-mb-20">
                      <!-- Article Image -->
                      <div class="g-max-width-100 g-mr-15">
                        <img class="d-flex w-100" src="{{ root }}assets/img-temp/150x150/img4.jpg" alt="Image Description">
                      </div>
                      <!-- End Article Image -->

                      <!-- Article Info -->
                      <div class="media-body align-self-center">
                        <h4 class="h5 g-mb-7">
                          <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Shoes</a>
                        </h4>
                        <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13 g-mb-10" href="#">Footwear</a>
                        <!-- End Article Info -->

                        <!-- Article Footer -->
                        <footer class="d-flex justify-content-between g-font-size-16">
                          <span class="g-color-black g-line-height-1">$55.00</span>
                          <ul class="list-inline g-color-gray-light-v2 g-font-size-14 g-line-height-1">
                            <li class="list-inline-item align-middle g-brd-right g-brd-gray-light-v3 g-pr-10 g-mr-6">
                              <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Cart">
                                <i class="icon-finance-100 u-line-icon-pro"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle">
                              <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
                                <i class="icon-medical-022 u-line-icon-pro"></i>
                              </a>
                            </li>
                          </ul>
                        </footer>
                        <!-- End Article Content -->
                      </div>
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="col-md-6 col-lg-4 g-px-10">
                    <!-- Article -->
                    <article class="media g-brd-around g-brd-gray-light-v4 g-bg-white rounded g-pa-10 g-mb-20">
                      <!-- Article Image -->
                      <div class="g-max-width-100 g-mr-15">
                        <img class="d-flex w-100" src="{{ root }}assets/img-temp/150x150/img5.jpg" alt="Image Description">
                      </div>
                      <!-- End Article Image -->

                      <!-- Article Info -->
                      <div class="media-body align-self-center">
                        <h4 class="h5 g-mb-7">
                          <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Sneaker</a>
                        </h4>
                        <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13 g-mb-10" href="#">Footwear</a>
                        <!-- End Article Info -->

                        <!-- Article Footer -->
                        <footer class="d-flex justify-content-between g-font-size-16">
                          <span class="g-color-black g-line-height-1">$55.00</span>
                          <ul class="list-inline g-color-gray-light-v2 g-font-size-14 g-line-height-1">
                            <li class="list-inline-item align-middle g-brd-right g-brd-gray-light-v3 g-pr-10 g-mr-6">
                              <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Cart">
                                <i class="icon-finance-100 u-line-icon-pro"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle">
                              <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
                                <i class="icon-medical-022 u-line-icon-pro"></i>
                              </a>
                            </li>
                          </ul>
                        </footer>
                        <!-- End Article Content -->
                      </div>
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="col-md-6 col-lg-4 g-px-10">
                    <!-- Article -->
                    <article class="media g-brd-around g-brd-gray-light-v4 g-bg-white rounded g-pa-10 g-mb-20">
                      <!-- Article Image -->
                      <div class="g-max-width-100 g-mr-15">
                        <img class="d-flex w-100" src="{{ root }}assets/img-temp/150x150/img6.jpg" alt="Image Description">
                      </div>
                      <!-- End Article Image -->

                      <!-- Article Info -->
                      <div class="media-body align-self-center">
                        <h4 class="h5 g-mb-7">
                          <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Sneaker</a>
                        </h4>
                        <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13 g-mb-10" href="#">Footwear</a>
                        <!-- End Article Info -->

                        <!-- Article Footer -->
                        <footer class="d-flex justify-content-between g-font-size-16">
                          <span class="g-color-black g-line-height-1">$55.00</span>
                          <ul class="list-inline g-color-gray-light-v2 g-font-size-14 g-line-height-1">
                            <li class="list-inline-item align-middle g-brd-right g-brd-gray-light-v3 g-pr-10 g-mr-6">
                              <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Cart">
                                <i class="icon-finance-100 u-line-icon-pro"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle">
                              <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
                                <i class="icon-medical-022 u-line-icon-pro"></i>
                              </a>
                            </li>
                          </ul>
                        </footer>
                        <!-- End Article Footer -->
                      </div>
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="col-md-6 col-lg-4 g-px-10">
                    <!-- Article -->
                    <article class="media g-brd-around g-brd-gray-light-v4 g-bg-white rounded g-pa-10 g-mb-20">
                      <!-- Article Image -->
                      <div class="g-max-width-100 g-mr-15">
                        <img class="d-flex w-100" src="{{ root }}assets/img-temp/150x150/img7.jpg" alt="Image Description">
                      </div>
                      <!-- End Article Image -->

                      <!-- Article Info -->
                      <div class="media-body align-self-center">
                        <h4 class="h5 g-mb-7">
                          <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Desk Clock</a>
                        </h4>
                        <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13 g-mb-10" href="#">Hi-Tech</a>
                        <!-- End Article Info -->

                        <!-- Article Footer -->
                        <footer class="d-flex justify-content-between g-font-size-16">
                          <span class="g-color-black g-line-height-1">$55.00</span>
                          <ul class="list-inline g-color-gray-light-v2 g-font-size-14 g-line-height-1">
                            <li class="list-inline-item align-middle g-brd-right g-brd-gray-light-v3 g-pr-10 g-mr-6">
                              <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Cart">
                                <i class="icon-finance-100 u-line-icon-pro"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle">
                              <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
                                <i class="icon-medical-022 u-line-icon-pro"></i>
                              </a>
                            </li>
                          </ul>
                        </footer>
                        <!-- End Article Footer -->
                      </div>
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="col-md-6 col-lg-4 g-px-10">
                    <!-- Article -->
                    <article class="media g-brd-around g-brd-gray-light-v4 g-bg-white rounded g-pa-10 g-mb-20">
                      <!-- Article Image -->
                      <div class="g-max-width-100 g-mr-15">
                        <img class="d-flex w-100" src="{{ root }}assets/img-temp/150x150/img8.jpg" alt="Image Description">
                      </div>
                      <!-- End Article Image -->

                      <!-- Article Info -->
                      <div class="media-body align-self-center">
                        <h4 class="h5 g-mb-7">
                          <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Alarm Clock</a>
                        </h4>
                        <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13 g-mb-10" href="#">Hi-Tech</a>
                        <!-- End Article Info -->

                        <!-- Article Footer -->
                        <footer class="d-flex justify-content-between g-font-size-16">
                          <span class="g-color-black g-line-height-1">$55.00</span>
                          <ul class="list-inline g-color-gray-light-v2 g-font-size-14 g-line-height-1">
                            <li class="list-inline-item align-middle g-brd-right g-brd-gray-light-v3 g-pr-10 g-mr-6">
                              <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Cart">
                                <i class="icon-finance-100 u-line-icon-pro"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle">
                              <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
                                <i class="icon-medical-022 u-line-icon-pro"></i>
                              </a>
                            </li>
                          </ul>
                        </footer>
                        <!-- End Article Footer -->
                      </div>
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="col-md-6 col-lg-4 g-px-10">
                    <!-- Article -->
                    <article class="media g-brd-around g-brd-gray-light-v4 g-bg-white rounded g-pa-10 g-mb-20">
                      <!-- Article Image -->
                      <div class="g-max-width-100 g-mr-15">
                        <img class="d-flex w-100" src="{{ root }}assets/img-temp/150x150/img9.jpg" alt="Image Description">
                      </div>
                      <!-- End Article Image -->

                      <!-- Article Info -->
                      <div class="media-body align-self-center">
                        <h4 class="h5 g-mb-7">
                          <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Desk Clock</a>
                        </h4>
                        <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13 g-mb-10" href="#">Hi-Tech</a>
                        <!-- End Article Info -->

                        <!-- Article Footer -->
                        <footer class="d-flex justify-content-between g-font-size-16">
                          <span class="g-color-black g-line-height-1">$55.00</span>
                          <ul class="list-inline g-color-gray-light-v2 g-font-size-14 g-line-height-1">
                            <li class="list-inline-item align-middle g-brd-right g-brd-gray-light-v3 g-pr-10 g-mr-6">
                              <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Cart">
                                <i class="icon-finance-100 u-line-icon-pro"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle">
                              <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
                                <i class="icon-medical-022 u-line-icon-pro"></i>
                              </a>
                            </li>
                          </ul>
                        </footer>
                        <!-- End Article Footer -->
                      </div>
                    </article>
                    <!-- End Article -->
                  </div>
                </div>
              </div>
              <!-- End Mega Menu -->
            </li>
            <!-- End Mega Menu Item -->
          </ul>
        </div>
        <!-- End Navigation -->
      </div>
    </nav>
  </div>
</header>
<!-- End Header -->
