{# Settings #}
{% set root = "../../../" %}
{% set mainNavActive_1 = "features-shortcode-blocks-footer-contact-forms" %}
{% set sidebarNavActive_1 = "shortcode-blocks-footer-contact-forms" %}
{% set title = "Footer Contact Forms" %}

{% include "html/assets/include/nunjucks/partials/head.njk" %}
{% include "html/assets/include/nunjucks/partials/core-fonts.njk" %}
{% include "html/assets/include/nunjucks/partials/core-css.njk" %}
{% include "html/assets/include/nunjucks/partials/core-icons.njk" %}
{% include "html/assets/include/nunjucks/partials/css/css-dzsparallaxer.njk" %}
<link rel="stylesheet" href="{{ root }}assets/vendor/animate.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/jquery-ui/themes/base/jquery-ui.min.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/hamburgers/hamburgers.min.css">

{% include "html/assets/include/nunjucks/partials/css/css-showcode.njk" %}

{% include "html/assets/include/nunjucks/partials/css/css-unify.njk" %}
{% include "html/assets/include/nunjucks/partials/css/css-custom.njk" %}
</head>

<body class="u-body--header-side-push-left u-body--header-side-opened u-has-sidebar-navigation g-overflow-x-hidden">
  <main>
    {% include "html/assets/include/nunjucks/partials/blocks/headers/header-main.njk" %}

    {% include "html/assets/include/nunjucks/partials/blocks/sidebars/sidebar-shortcode-nav.njk" %}

    {% include "html/assets/include/nunjucks/partials/blocks/page-title/shortcode-page-title/shortcode-page-title-block.njk" %}

    <section>
      <!-- Contact Forms #01 -->
      <section class="g-pt-100 g-pb-50">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Contact Forms
              <span class="g-color-primary g-ml-5">#01</span>
            </h2>
          </div>

          <div id="shortcode1">
            <div class="shortcode-html">
              <!-- Contact Form -->
              <div class="text-center mx-auto g-width-70x--md">
                <header class="u-heading-v8-2 g-mb-60">
                  <h2 class="u-heading-v8__title text-uppercase g-font-weight-600 g-color-gray-dark-v2 g-mb-25">Contact us</h2>
                  <p class="mb-0">Cras luctus blandit sapien eget varius. Ut egestas justo faucibus laoreet fringilla. Pellentesque dictum, massa ut consequat euismod, tortor diam cursus nulla, a rhoncus justo mi ut diam.</p>
                </header>

                <form>
                  <div class="row">
                    <div class="col-md-6 form-group g-mb-30">
                      <input class="form-control g-color-gray-dark-v5 g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--focus g-rounded-20 g-py-13 g-px-15" type="text" placeholder="Your name">
                    </div>

                    <div class="col-md-6 form-group g-mb-30">
                      <input class="form-control g-color-gray-dark-v5 g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--focus g-rounded-20 g-py-13 g-px-15" type="tel" placeholder="Your phone">
                    </div>

                    <div class="col-md-12 form-group g-mb-30">
                      <input class="form-control g-color-gray-dark-v5 g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--focus g-rounded-20 g-py-13 g-px-15" type="text" placeholder="Subject">
                    </div>

                    <div class="col-md-12 form-group g-mb-30">
                      <textarea class="form-control g-color-gray-dark-v5 g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--focus g-resize-none g-rounded-20 g-py-13 g-px-15" rows="7" placeholder="Message"></textarea>
                    </div>
                  </div>

                  <div class="text-center">
                    <button class="btn u-btn-primary text-uppercase g-rounded-30 g-px-25 g-py-13" type="submit" role="button">Send Message</button>
                  </div>
                </form>
              </div>
              <!-- End Contact Form -->
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set contentTarget = "#shortcode1" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Contact Forms #01 -->

      <hr class="g-brd-gray-light-v4 my-0">

      <!-- Contact Forms #02 -->
      <section class="g-pt-100 g-overflow-hidden">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Contact Forms
              <span class="g-color-primary g-ml-5">#02</span>
            </h2>
          </div>
        </div>

        <div id="shortcode2">
          <div class="shortcode-html">
            <!-- Contact Form -->
            <div class="u-bg-overlay g-bg-img-hero g-bg-black-opacity-0_6--after g-color-white g-py-100" style="background-image: url({{ root }}assets/img-temp/1920x1080/img10.jpg);">
              <div class="container u-bg-overlay__inner text-center">
                <div class="mx-auto g-width-70x--md">
                  <header class="u-heading-v8-2 g-mb-60">
                    <h2 class="u-heading-v8__title text-uppercase g-font-weight-600 g-mb-25">Contact us</h2>
                    <p class="g-color-white-opacity-0_8 mb-0">Cras luctus blandit sapien eget varius. Ut egestas justo faucibus laoreet fringilla. Pellentesque dictum, massa ut consequat euismod, tortor diam cursus nulla, a rhoncus justo mi ut diam.</p>
                  </header>

                  <form>
                    <div class="row">
                      <div class="col-md-6 form-group g-mb-30">
                        <input class="form-control g-color-white g-color-white--focus g-bg-transparent g-bg-transparent--focus g-brd-white-opacity-0_3 g-brd-white--focus g-py-13 g-px-15" type="text" placeholder="Your name">
                      </div>

                      <div class="col-md-6 form-group g-mb-30">
                        <input class="form-control g-color-white g-color-white--focus g-bg-transparent g-bg-transparent--focus g-brd-white-opacity-0_3 g-brd-white--focus g-py-13 g-px-15" type="tel" placeholder="Your phone">
                      </div>

                      <div class="col-md-12 form-group g-mb-30">
                        <input class="form-control g-color-white g-color-white--focus g-bg-transparent g-bg-transparent--focus g-brd-white-opacity-0_3 g-brd-white--focus g-py-13 g-px-15" type="text" placeholder="Subject">
                      </div>

                      <div class="col-md-12 form-group g-mb-30">
                        <textarea class="form-control g-color-white g-color-white--focus g-bg-transparent g-bg-transparent--focus g-brd-white-opacity-0_3 g-brd-white--focus g-resize-none g-py-13 g-px-15" rows="7" placeholder="Message"></textarea>
                      </div>
                    </div>

                    <div class="text-center">
                      <button class="btn btn-block u-btn-primary text-uppercase g-px-25 g-py-13" type="submit" role="button">Send Message</button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>

        {% set SCExtendedClasses = "text-center" %}
        {% set contentTarget = "#shortcode2" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Contact Forms #02 -->

      <hr class="g-brd-gray-light-v4 my-0">

      <!-- Contact Forms #03 -->
      <section class="g-pt-100">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Contact Forms
              <span class="g-color-primary g-ml-5">#03</span>
            </h2>
          </div>

          <div id="shortcode3">
            <div class="shortcode-html">
              <div class="text-center mx-auto g-width-70x--md">
                <header class="u-heading-v8-2 g-mb-60">
                  <h2 class="u-heading-v8__title text-uppercase g-font-weight-600 g-color-gray-dark-v2 g-mb-25">Contact us</h2>
                  <p class="mb-0">Cras luctus blandit sapien eget varius. Ut egestas justo faucibus laoreet fringilla. Pellentesque dictum, massa ut consequat euismod, tortor diam cursus nulla, a rhoncus justo mi ut diam.</p>
                </header>

                <form>
                  <div class="row">
                    <div class="col-md-6 form-group g-mb-30">
                      <input class="form-control g-color-gray-dark-v5 g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--focus rounded-0 g-py-13 g-px-15" type="text" placeholder="Your name">
                    </div>

                    <div class="col-md-6 form-group g-mb-30">
                      <input class="form-control g-color-gray-dark-v5 g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--focus rounded-0 g-py-13 g-px-15" type="tel" placeholder="Your phone">
                    </div>

                    <div class="col-md-12 form-group g-mb-30">
                      <input class="form-control g-color-gray-dark-v5 g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--focus rounded-0 g-py-13 g-px-15" type="text" placeholder="Subject">
                    </div>

                    <div class="col-md-12 form-group g-mb-30">
                      <textarea class="form-control g-color-gray-dark-v5 g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--focus g-resize-none rounded-0 g-py-13 g-px-15" rows="7" placeholder="Message"></textarea>
                    </div>
                  </div>

                  <div class="text-center">
                    <button class="btn u-btn-primary text-uppercase rounded-0 g-px-25 g-py-13" type="submit" role="button">Send Message</button>
                  </div>
                </form>
              </div>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set contentTarget = "#shortcode3" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Contact Forms #03 -->

      <hr class="g-brd-gray-light-v4 my-0">

      <!-- Contact Forms #04 -->
      <section class="g-pt-100 g-overflow-hidden">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Contact Forms
              <span class="g-color-primary g-ml-5">#04</span>
            </h2>
          </div>
        </div>

        <div id="shortcode4">
          <div class="shortcode-html">
            <footer class="u-bg-overlay g-bg-img-hero g-bg-attachment-fixed g-bg-grid-v1--before g-bg-black-opacity-0_6--after g-color-white g-py-100" style="background-image: url({{ root }}assets/img-temp/1920x1080/img2.jpg);">
              <div class="container u-bg-overlay__inner">
                <header class="g-width-70x--md text-center mx-auto g-mb-60">
                  <div class="u-heading-v2-3--bottom g-brd-primary g-mb-15">
                    <h2 class="u-heading-v2__title text-uppercase g-font-weight-600 g-mb-0">Contact us</h2>
                  </div>
                  <p class="lead g-font-weight-400">Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has been the industry's standard dummy text.</p>
                </header>

                <div class="row">
                  <div class="col-md-6">
                    <address class="g-font-size-16 g-py-10">
                      <div class="d-flex g-mb-20">
                        <div class="u-icon-v3 u-icon-size--sm g-font-size-default g-bg-white-opacity-0_1 g-mr-10">
                          <i class="fa fa-map-marker"></i>
                        </div>
                        <div class="align-self-center">5B Streat, City 50987 New Town US</div>
                      </div>

                      <div class="d-flex g-mb-20">
                        <div class="u-icon-v3 u-icon-size--sm g-font-size-default g-bg-white-opacity-0_1 g-mr-10">
                          <i class="fa fa-phone"></i>
                        </div>
                        <div class="align-self-center">1(800) 220 084</div>
                      </div>

                      <div class="d-flex g-mb-20">
                        <div class="u-icon-v3 u-icon-size--sm g-font-size-default g-bg-white-opacity-0_1 g-mr-10">
                          <i class="fa fa-envelope"></i>
                        </div>
                        <div class="align-self-center">
                          <a class="g-color-white" href="mailto:info@example.com">info@htmlstream.com</a>
                        </div>
                      </div>

                      <div class="d-flex">
                        <div class="u-icon-v3 u-icon-size--sm g-font-size-default g-bg-white-opacity-0_1 g-mr-10">
                          <i class="fa fa-globe"></i>
                        </div>
                        <div class="align-self-center">
                          <a class="g-color-white" href="#!">www.htmlstream.com</a>
                        </div>
                      </div>
                    </address>
                  </div>

                  <div class="col-md-6">
                    <form>
                      <div class="form-group g-width-340 g-mb-20">
                        <label class="g-mb-10" for="inputGroup13_1">Name</label>
                        <input id="inputGroup13_1" class="form-control g-color-white g-bg-transparent g-bg-transparent--focus g-brd-white rounded-0 g-pa-10-16" type="text">
                      </div>

                      <div class="form-group g-width-340 g-mb-20">
                        <label class="g-mb-10" for="inputGroup13_2">Email
                          <span class="g-color-red">*</span>
                        </label>
                        <input id="inputGroup13_2" class="form-control g-color-white g-bg-transparent g-bg-transparent--focus g-brd-white rounded-0 g-pa-10-16" type="email">
                      </div>

                      <div class="form-group g-mb-20">
                        <label class="g-mb-10" for="inputGroup13_2">Message</label>
                        <textarea id="inputGroup13_3" class="form-control g-resize-none g-color-white g-bg-transparent g-bg-transparent--focus g-brd-white rounded-0 g-pa-10-16" rows="8"></textarea>
                      </div>

                      <button class="btn btn-md u-btn-outline-white rounded-0" type="submit">Send Message</button>
                    </form>
                  </div>
                </div>
              </div>
            </footer>
          </div>
        </div>

        {% set SCExtendedClasses = "text-center" %}
        {% set contentTarget = "#shortcode4" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Contact Forms #04 -->

      <hr class="g-brd-gray-light-v4 my-0">

      <!-- Contact Forms #05 -->
      <section class="g-pt-100">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Contact Forms
              <span class="g-color-primary g-ml-5">#05</span>
            </h2>
          </div>

          <div id="shortcode5">
            <div class="shortcode-html">
              <header class="u-heading-v8-2 text-center g-width-70x--md mx-auto g-mb-60">
                <h2 class="u-heading-v8__title text-uppercase g-font-weight-600 g-mb-25">Contact us</h2>
                <p class="lead mb-0">We do things differently company providing key digital services. Focused on helping our clients to build a successful business on web and mobile.</p>
              </header>

              <div class="row">
                <div class="col-md-7">
                  <form>
                    <div class="row">
                      <div class="col-md-6 form-group g-mb-30">
                        <input class="form-control g-color-gray-dark-v5 g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--focus rounded-0 g-py-13 g-px-15" type="text" placeholder="Your name">
                      </div>

                      <div class="col-md-6 form-group g-mb-30">
                        <input class="form-control g-color-gray-dark-v5 g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--focus rounded-0 g-py-13 g-px-15" type="tel" placeholder="Your phone">
                      </div>

                      <div class="col-md-12 form-group g-mb-30">
                        <input class="form-control g-color-gray-dark-v5 g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--focus rounded-0 g-py-13 g-px-15" type="text" placeholder="Subject">
                      </div>

                      <div class="col-md-12 form-group g-mb-30">
                        <textarea class="form-control g-color-gray-dark-v5 g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--focus g-resize-none rounded-0 g-py-13 g-px-15" rows="7" placeholder="Message"></textarea>
                      </div>
                    </div>

                    <button class="btn u-btn-primary rounded-0 g-py-12 g-px-20" type="submit" role="button">Send Message</button>
                  </form>
                </div>

                <div class="col-md-5">
                  <div class="lead g-mb-40">
                    <p>Want to get more information? Contact us by using the form or call directly for more info.</p>
                  </div>

                  <address class="text-uppercase mb-0">
                    <div class="d-flex g-mb-20">
                      <div class="u-icon-v3 u-icon-size--sm g-font-size-default g-bg-gray-dark-v2 g-color-white-opacity-0_8 rounded-circle g-mr-15">
                        <i class="icon-user"></i>
                      </div>
                      <div class="align-self-center g-font-weight-600 g-font-size-12">
                        Address:
                        <br>
                        <strong class="g-color-gray-dark-v2">Orange California, US </strong>
                      </div>
                    </div>

                    <div class="d-flex g-mb-20">
                      <div class="u-icon-v3 u-icon-size--sm g-font-size-default g-bg-gray-dark-v2 g-color-white-opacity-0_8 rounded-circle g-mr-15">
                        <i class="icon-speech"></i>
                      </div>
                      <div class="align-self-center g-font-weight-600 g-font-size-12">
                        Email:
                        <br>
                        <a class="g-color-gray-dark-v2 g-color-gray-dark-v2--hover" href="mailto:marketing@unify.com">
                          <strong>info@htmlstream.com</strong></a>
                      </div>
                    </div>

                    <div class="d-flex">
                      <div class="u-icon-v3 u-icon-size--sm g-font-size-default g-bg-gray-dark-v2 g-color-white-opacity-0_8 rounded-circle g-mr-15">
                        <i class="icon-screen-smartphone"></i>
                      </div>
                      <div class="align-self-center g-font-weight-600 g-font-size-12">
                        Phone number:
                        <br>
                        <strong class="g-color-gray-dark-v2">+1 555 2566 112</strong>
                      </div>
                    </div>
                  </address>
                </div>
              </div>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set contentTarget = "#shortcode5" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Contact Forms #05 -->

      <hr class="g-brd-gray-light-v4 my-0">

      <!-- Contact Forms #06 -->
      <section class="g-pt-100">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Contact Forms
              <span class="g-color-primary g-ml-5">#06</span>
            </h2>
          </div>
        </div>

        <div id="shortcode6">
          <div class="shortcode-html">
            <footer class="g-bg-black-opacity-0_9 g-color-white text-center g-py-100">
              <div class="container">
                <header class="u-heading-v8-2 text-center g-width-70x--md mx-auto g-mb-80">
                  <h2 class="u-heading-v8__title text-uppercase g-font-weight-600 g-mb-25">Contact us</h2>
                  <p class="lead mb-0">We do things differently company providing key digital services. Focused on helping our clients to build a successful business on web and mobile.</p>
                </header>

                <address class="row g-color-white-opacity-0_8">
                  <div class="col-sm-6 col-md-3 g-mb-60">
                    <i class="icon-line icon-map d-inline-block display-5 g-mb-25"></i>
                    <h4 class="small text-uppercase g-mb-5">Address</h4>
                    <strong>Orange California, US</strong>
                  </div>

                  <div class="col-sm-6 col-md-3 g-mb-60">
                    <i class="icon-call-in d-inline-block display-5 g-mb-25"></i>
                    <h4 class="small text-uppercase g-mb-5">Phone number</h4>
                    <strong>+1 555 2342 111</strong>
                  </div>

                  <div class="col-sm-6 col-md-3">
                    <i class="icon-envelope d-inline-block display-5 g-mb-25"></i>
                    <h4 class="small text-uppercase g-mb-5">Email</h4>
                    <a class="g-color-white-opacity-0_8" href="mailto:hello@unify-gym.com">
                      <strong>info@htmlstream.com</strong></a>
                  </div>

                  <div class="col-sm-6 col-md-3">
                    <i class="icon-earphones-alt d-inline-block display-5 g-mb-25"></i>
                    <h4 class="small text-uppercase g-mb-5">Toll free</h4>
                    <strong>100 302 2302</strong>
                  </div>
                </address>

                <form>
                  <div class="row">
                    <div class="col-md-7">
                      <div class="row">
                        <div class="col-md-6">
                          <div class="form-group g-mb-20">
                            <input id="inputGroup10_1" class="form-control g-bg-transparent g-bg-transparent--focus g-brd-white-opacity-0_5 g-brd-white--focus g-color-white g-rounded-50 g-px-20 g-py-12" type="text" placeholder="Name">
                          </div>

                          <div class="form-group g-mb-20">
                            <input id="inputGroup10_2" class="form-control g-bg-transparent g-bg-transparent--focus g-brd-white-opacity-0_5 g-brd-white--focus g-color-white g-rounded-50 g-px-20 g-py-12" type="tel" placeholder="Phone">
                          </div>
                        </div>

                        <div class="col-md-6">
                          <div class="form-group g-mb-20">
                            <input id="inputGroup1_3" class="form-control g-bg-transparent g-bg-transparent--focus g-brd-white-opacity-0_5 g-brd-white--focus g-color-white g-rounded-50 g-px-20 g-py-12" type="email" placeholder="Email">
                          </div>

                          <div class="form-group g-mb-20">
                            <input id="inputGroup1_4" class="form-control g-bg-transparent g-bg-transparent--focus g-brd-white-opacity-0_5 g-brd-white--focus g-color-white g-rounded-50 g-px-20 g-py-12" type="text" placeholder="Subject">
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="col-md-5">
                      <div class="form-group g-mb-20">
                        <textarea id="inputGroup11_5" class="form-control g-resize-none g-bg-transparent g-bg-transparent--focus g-brd-white-opacity-0_5 g-brd-white--focus g-color-white g-rounded-20 g-px-20 g-py-10" rows="5" placeholder="Message"></textarea>
                      </div>

                      <div class="text-right">
                        <button class="btn u-btn-white g-font-size-11 text-uppercase g-font-weight-700 g-rounded-50 g-px-35 g-py-15" type="submit" role="button">Submit</button>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </footer>
          </div>
        </div>

        {% set SCExtendedClasses = "text-center" %}
        {% set contentTarget = "#shortcode6" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Contact Forms #06 -->

      <hr class="g-brd-gray-light-v4 my-0">

      <!-- Contact Forms #07 -->
      <section class="g-pt-100">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Contact Forms
              <span class="g-color-primary g-ml-5">#07</span>
            </h2>
          </div>

          <div id="shortcode7">
            <div class="shortcode-html">
              <header class="u-heading-v8-2 text-center g-width-70x--md mx-auto g-mb-60">
                <h2 class="u-heading-v8__title text-uppercase g-font-weight-600 g-mb-25">Contact us</h2>
                <p class="lead mb-0">We do things differently company providing key digital services. Focused on helping our clients to build a successful business on web and mobile.</p>
              </header>

              <div class="row text-center">
                <div class="col-lg-6 g-mb-60 g-mb-0--lg">
                  <div class="row no-gutters">
                    <div class="col-sm g-brd-bottom--sm g-brd-gray-light-v4 g-py-30 g-px-15">
                      <span class="d-block display-5 g-color-primary g-mb-20">
                        <i class="icon-anchor"></i>
                      </span>
                      <em class="d-block text-uppercase g-font-style-normal g-mb-5">Address</em>
                      <strong>Orange California, US</strong>
                    </div>
                    <div class="col-sm g-brd-bottom--sm g-brd-left--sm g-brd-gray-light-v4 g-py-30 g-px-15">
                      <span class="d-block display-5 g-color-primary g-mb-20">
                        <i class="icon-call-in"></i>
                      </span>
                      <em class="d-block text-uppercase g-font-style-normal g-mb-5">Phone Number</em>
                      <strong>+1 555 2566 112</strong>
                    </div>
                  </div>
                  <div class="row no-gutters">
                    <div class="col-sm g-py-30 g-px-15">
                      <span class="d-block display-5 g-color-primary g-mb-20">
                        <i class="icon-envelope-open"></i>
                      </span>
                      <em class="d-block text-uppercase g-font-style-normal g-mb-5">Email</em>
                      <strong>info@htmlstream.com</strong>
                    </div>
                    <div class="col-sm g-brd-left--sm g-brd-gray-light-v4 g-py-30 g-px-15">
                      <span class="d-block display-5 g-color-primary g-mb-20">
                        <i class="icon-earphones-alt"></i>
                      </span>
                      <em class="d-block text-uppercase g-font-style-normal g-mb-5">Toll free</em>
                      <strong>100 302 2302</strong>
                    </div>
                  </div>
                </div>

                <div class="col-lg-6 align-self-center">
                  <form>
                    <div class="row">
                      <div class="col-lg-12 form-group g-mb-20">
                        <input class="form-control g-bg-gray-light-v5 g-brd-gray-light-v5 g-brd-primary--focus g-color-gray-dark-v5 rounded-0 g-py-15 g-px-15" type="text" placeholder="Your name">
                      </div>

                      <div class="col-lg-12 form-group g-mb-20">
                        <input class="form-control g-bg-gray-light-v5 g-brd-gray-light-v5 g-brd-primary--focus g-color-gray-dark-v5 rounded-0 g-py-15 g-px-15" type="tel" placeholder="Your phone">
                      </div>

                      <div class="col-lg-12 form-group g-mb-20">
                        <input class="form-control g-bg-gray-light-v5 g-brd-gray-light-v5 g-brd-primary--focus g-color-gray-dark-v5 rounded-0 g-py-15 g-px-15" type="text" placeholder="Subject">
                      </div>

                      <div class="col-lg-12 form-group g-mb-20">
                        <textarea class="form-control g-resize-none g-bg-gray-light-v5 g-brd-gray-light-v5 g-brd-primary--focus g-color-gray-dark-v5 rounded-0 g-py-15 g-px-15" rows="7" placeholder="Message"></textarea>
                      </div>
                    </div>

                    <button class="btn u-btn-primary text-uppercase g-font-size-12 g-font-weight-700 rounded-0 g-py-12 g-px-20" type="submit" role="button">
                      <i class="fa fa-arrow-right g-mr-5"></i>
                      Send Message
                    </button>
                  </form>
                </div>
              </div>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set contentTarget = "#shortcode7" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Contact Forms #07 -->

      <hr class="g-brd-gray-light-v4 my-0">

      <!-- Contact Forms #08 -->
      <section class="g-pt-100">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Contact Forms
              <span class="g-color-primary g-ml-5">#08</span>
            </h2>
          </div>
        </div>

        <div id="shortcode8">
          <div class="shortcode-html">
            <footer class="g-bg-black-opacity-0_9 g-color-white g-py-100">
              <div class="container">
                <div class="row">
                  <div class="col-lg-5">
                    <header class="text-uppercase g-mb-20">
                      <h4 class="h7 g-font-weight-700 g-color-black--light g-mb-15">Contact Us</h4>
                      <h2 class="h1 g-font-weight-300 mb-0">Answers to <strong>your questions</strong></h2>
                    </header>

                    <p class="g-mb-40 g-mb-0--lg">Integer ut sollicitudin justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                  </div>

                  <div class="col-lg-7 align-self-center">
                    <form>
                      <div class="row">
                        <div class="col-md-5">
                          <div class="form-group g-mb-20">
                            <input id="inputGroup10_3" class="form-control g-bg-transparent g-bg-transparent--focus g-brd-white-opacity-0_5 g-brd-white--focus g-color-white g-rounded-10 g-px-20 g-py-12" type="email" placeholder="Name">
                          </div>

                          <div class="form-group g-mb-20">
                            <input id="inputGroup10_4" class="form-control g-bg-transparent g-bg-transparent--focus g-brd-white-opacity-0_5 g-brd-white--focus g-color-white g-rounded-10 g-px-20 g-py-12" type="text" placeholder="Email *">
                          </div>
                        </div>

                        <div class="col-md-7">
                          <div class="form-group g-mb-20">
                            <textarea id="inputGroup10_5" class="form-control g-resize-none g-bg-transparent g-bg-transparent--focus g-brd-white-opacity-0_5 g-brd-white--focus g-color-white g-rounded-10 g-px-20 g-py-10" rows="5" placeholder="Message"></textarea>
                          </div>

                          <div class="text-right">
                            <button class="btn u-btn-white g-font-size-11 text-uppercase g-font-weight-700 g-rounded-10 g-py-10 g-px-20" type="submit" role="button">Submit</button>
                          </div>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </footer>

            <!-- Social Links -->
            <div class="row no-gutters text-center g-line-height-1">
              <div class="col">
                <a href="#!" class="d-block u-info-v2-1__item g-font-size-16 g-bg-facebook g-color-white g-color-white--hover g-pa-25">
                  <i class="fa fa-facebook"></i>
                </a>
              </div>
              <div class="col">
                <a href="#!" class="d-block u-info-v2-1__item g-font-size-16 g-bg-pinterest g-color-white g-color-white--hover g-pa-25">
                  <i class="fa fa-pinterest"></i>
                </a>
              </div>
              <div class="col">
                <a href="#!" class="d-block u-info-v2-1__item g-font-size-16 g-bg-dribbble g-color-white g-color-white--hover g-pa-25">
                  <i class="fa fa-dribbble"></i>
                </a>
              </div>
              <div class="col">
                <a href="#!" class="d-block u-info-v2-1__item g-font-size-16 g-bg-instagram g-color-white g-color-white--hover g-pa-25">
                  <i class="fa fa-instagram"></i>
                </a>
              </div>
              <div class="col">
                <a href="#!" class="d-block u-info-v2-1__item g-font-size-16 g-bg-twitter g-color-white g-color-white--hover g-pa-25">
                  <i class="fa fa-twitter"></i>
                </a>
              </div>
            </div>
            <!-- End Social Links -->
          </div>
        </div>

        {% set SCExtendedClasses = "text-center" %}
        {% set contentTarget = "#shortcode8" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Contact Forms #08 -->

      <hr class="g-brd-gray-light-v4 my-0">

      <!-- Contact Forms #09 -->
      <section class="g-pt-100">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Contact Forms
              <span class="g-color-primary g-ml-5">#09</span>
            </h2>
          </div>

          <div id="shortcode9">
            <div class="shortcode-html">
              <header class="u-heading-v8-2 text-center g-width-70x--md mx-auto g-mb-60">
                <h2 class="u-heading-v8__title text-uppercase g-font-weight-600 g-mb-25">Contact us</h2>
                <p class="lead mb-0">We do things differently company providing key digital services. Focused on helping our clients to build a successful business on web and mobile.</p>
              </header>

              <div class="row">
                <div class="col-md-8">
                  <form>
                    <div class="row">
                      <div class="col-md-6 form-group g-mb-30">
                        <input class="form-control g-color-gray-dark-v5 g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--focus rounded-0 g-py-13 g-px-15" type="text" placeholder="Your name">
                      </div>

                      <div class="col-md-6 form-group g-mb-30">
                        <input class="form-control g-color-gray-dark-v5 g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--focus rounded-0 g-py-13 g-px-15" type="tel" placeholder="Your phone">
                      </div>

                      <div class="col-md-12 form-group g-mb-30">
                        <input class="form-control g-color-gray-dark-v5 g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--focus rounded-0 g-py-13 g-px-15" type="text" placeholder="Subject">
                      </div>

                      <div class="col-md-12 form-group g-mb-30">
                        <textarea class="form-control g-color-gray-dark-v5 g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--focus g-resize-none rounded-0 g-py-13 g-px-15" rows="7" placeholder="Message"></textarea>
                      </div>
                    </div>

                    <button class="btn u-btn-primary rounded-0 g-py-12 g-px-20" type="submit" role="button">Send Message</button>
                  </form>
                </div>

                <div class="col-lg-4 text-center g-mb-40">
                  <div class="g-mb-20">
                    <span class="u-icon-v1 g-color-primary">
                      <i class="icon-directions"></i>
                    </span>
                    <em class="d-block g-color-black-light-v2 text-uppercase g-font-size-12 g-font-style-normal g-mb-5">Address</em>
                    <strong class="d-block">Orange California, US</strong>
                  </div>
                  <div class="g-mb-20">
                    <span class="u-icon-v1 g-color-primary">
                      <i class="icon-call-in"></i>
                    </span>
                    <em class="d-block g-color-black-light-v2 text-uppercase g-font-size-12 g-font-style-normal g-mb-5">Phone Number</em>
                    <strong class="d-block">+1 555 2566 112</strong>
                  </div>
                  <div>
                    <span class="u-icon-v1 g-color-primary">
                      <i class="icon-envelope-letter"></i>
                    </span>
                    <em class="d-block g-color-black-light-v2 text-uppercase g-font-size-12 g-font-style-normal g-mb-5">Email</em>
                    <strong class="d-block">
                      <a href="#!" class="g-color-main">info@htmlstream.com</a>
                    </strong>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set contentTarget = "#shortcode9" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Contact Forms #09 -->

      <hr class="g-brd-gray-light-v4 my-0">

      <!-- Contact Forms #10 -->
      <section class="g-pt-100">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Contact Forms
              <span class="g-color-primary g-ml-5">#10</span>
            </h2>
          </div>
        </div>

        <div id="shortcode10">
          <div class="shortcode-html">
            <!-- Contact Info -->
            <div class="row no-gutters g-color-white text-center g-mb-80">
              <div class="col-md-6 col-lg-3 g-bg-primary-dark-v3 g-py-60">
                <span class="u-icon-v1 u-icon-size--xl g-color-white g-mb-10">
                  <i class="icon-map"></i>
                </span>
                <em class="d-block g-font-size-12 text-uppercase g-font-style-normal g-color-white-opacity-0_8 g-mb-5">Address</em>
                <strong class="d-block g-font-size-16">Orange California, US</strong>
              </div>

              <div class="col-md-6 col-lg-3 g-bg-primary-dark-v2 g-py-60">
                <span class="u-icon-v1 u-icon-size--xl g-color-white g-mb-10">
                  <i class="icon-screen-smartphone"></i>
                </span>
                <em class="d-block g-font-size-12 text-uppercase g-font-style-normal g-color-white-opacity-0_8 g-mb-5">Phone Number</em>
                <strong class="d-block g-font-size-16">+1 555 2566 112</strong>
              </div>

              <div class="col-md-6 col-lg-3 g-bg-primary-dark-v3 g-py-60">
                <span class="u-icon-v1 u-icon-size--xl g-color-white g-mb-10">
                  <i class="icon-envelope-letter"></i>
                </span>
                <em class="d-block g-font-size-12 text-uppercase g-font-style-normal g-color-white-opacity-0_8 g-mb-5">Email</em>
                <strong class="d-block g-font-size-16">
                  <a href="#!" class="g-color-white g-color-white--hover">info@htmlstream.com</a>
                </strong>
              </div>

              <div class="col-md-6 col-lg-3 g-bg-primary-dark-v2 g-py-60">
                <span class="u-icon-v1 u-icon-size--xl g-color-white g-mb-10">
                  <i class="icon-call-in"></i>
                </span>
                <em class="d-block g-font-size-12 text-uppercase g-font-style-normal g-color-white-opacity-0_8 g-mb-5">Call Free</em>
                <strong class="d-block g-font-size-16">800 1258 987</strong>
              </div>
            </div>
            <!-- End Contact Info -->

            <!-- Contact Form -->
            <div class="container text-center">
              <header class="u-heading-v8-2 text-center g-width-70x--md mx-auto g-mb-60">
                <h2 class="u-heading-v8__title text-uppercase g-font-weight-600 g-mb-25">Contact us</h2>
                <p class="lead mb-0">We do things differently company providing key digital services. Focused on helping our clients to build a successful business on web and mobile.</p>
              </header>

              <!-- Contact Form -->
              <div class="row justify-content-center">
                <div class="col-md-8">
                  <form>
                    <div class="row">
                      <div class="col-md-6 form-group g-mb-30">
                        <input class="form-control g-color-gray-dark-v5 g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--focus rounded-0 g-py-13 g-px-15" type="text" placeholder="Your name">
                      </div>

                      <div class="col-md-6 form-group g-mb-30">
                        <input class="form-control g-color-gray-dark-v5 g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--focus rounded-0 g-py-13 g-px-15" type="tel" placeholder="Your phone">
                      </div>

                      <div class="col-md-12 form-group g-mb-30">
                        <input class="form-control g-color-gray-dark-v5 g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--focus rounded-0 g-py-13 g-px-15" type="text" placeholder="Subject">
                      </div>

                      <div class="col-md-12 form-group g-mb-30">
                        <textarea class="form-control g-color-gray-dark-v5 g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--focus g-resize-none rounded-0 g-py-13 g-px-15" rows="7" placeholder="Message"></textarea>
                      </div>
                    </div>

                    <button class="btn u-btn-primary rounded-0 g-py-12 g-px-20" type="submit" role="button">Send Message</button>
                  </form>
                </div>
              </div>
              <!-- Contact Form -->
            </div>
            <!-- End Contact Form -->
          </div>
        </div>

        {% set SCExtendedClasses = "text-center" %}
        {% set contentTarget = "#shortcode10" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Contact Forms #10 -->

      <hr class="g-brd-gray-light-v4 my-0">

      <!-- Contact Forms #11 -->
      <section class="g-pt-100">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Contact Forms
              <span class="g-color-primary g-ml-5">#11</span>
            </h2>
          </div>

          <div id="shortcode11">
            <div class="shortcode-html">
              <!-- Contact Form -->
              <header class="u-heading-v8-2 text-center g-width-70x--md mx-auto g-mb-60">
                <h2 class="u-heading-v8__title text-uppercase g-font-weight-600 g-mb-25">Contact us</h2>
                <p class="lead mb-0">We do things differently company providing key digital services. Focused on helping our clients to build a successful business on web and mobile.</p>
              </header>

              <div class="row">
                <div class="col-lg-4 text-uppercase">
                  <h3 class="h5 g-font-weight-600 g-color-gray-dark-v2 g-mb-20">Where to meet</h3>
                  <p class="g-font-size-12 g-mb-40">Curabitur sit amet fringilla mi. Etiam ac massa sit amet nulla eleifend rutrum vitae non sem.</p>

                  <h3 class="h5 g-font-weight-600 g-color-gray-dark-v2 g-mb-20">Say Hello!</h3>
                  <address class="g-font-size-12">
                    <p>Phone number <strong class="g-color-gray-dark-v2">+48 555 2566 112</strong></p>
                    <p> Email
                      <a class="g-color-gray-dark-v2" href="mailto:info@unify.com"><strong>info@unify.com</strong>
                      </a>
                    </p>
                  </address>
                </div>

                <div class="col-lg-8">
                  <form>
                    <div class="row">
                      <div class="col-lg-12 form-group g-mb-20">
                        <input class="form-control g-bg-gray-light-v5 g-brd-gray-light-v5 g-brd-primary--focus g-color-gray-dark-v5 rounded-0 g-py-15 g-px-15" type="text" placeholder="Your name">
                      </div>

                      <div class="col-lg-12 form-group g-mb-20">
                        <input class="form-control g-bg-gray-light-v5 g-brd-gray-light-v5 g-brd-primary--focus g-color-gray-dark-v5 rounded-0 g-py-15 g-px-15" type="tel" placeholder="Your email *">
                      </div>

                      <div class="col-lg-12 form-group g-mb-20">
                        <textarea class="form-control g-resize-none g-bg-gray-light-v5 g-brd-gray-light-v5 g-brd-primary--focus g-color-gray-dark-v5 rounded-0 g-py-15 g-px-15" rows="7" placeholder="Message"></textarea>
                      </div>
                    </div>

                    <button class="btn btn-block u-btn-primary text-uppercase g-font-size-12 g-font-weight-700 rounded-0 g-py-15 g-px-20" type="submit" role="button">Send Message</button>
                  </form>
                </div>
              </div>
              <!-- End Contact Form -->
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set contentTarget = "#shortcode11" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Contact Forms #11 -->

      <hr class="g-brd-gray-light-v4 my-0">

      <!-- Contact Forms #12 -->
      <section class="g-pt-100">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Contact Forms
              <span class="g-color-primary g-ml-5">#12</span>
            </h2>
          </div>

          <div id="shortcode12">
            <div class="shortcode-html">
              <header class="u-heading-v8-2 text-center g-width-70x--md mx-auto g-mb-60">
                <h2 class="u-heading-v8__title text-uppercase g-font-weight-600 g-mb-25">Contact us</h2>
                <p class="lead mb-0">We do things differently company providing key digital services. Focused on helping our clients to build a successful business on web and mobile.</p>
              </header>

              <div class="row">
                <div class="col-lg-9">
                  <form>
                    <div class="row">
                      <div class="col-lg-12 form-group g-mb-25">
                        <input class="form-control g-bg-gray-light-v5 g-color-gray-dark-v5 g-brd-gray-light-v5 g-brd-primary--focus rounded-0 g-py-15 g-px-15" type="text" placeholder="Your name">
                      </div>

                      <div class="col-lg-12 form-group g-mb-25">
                        <input class="form-control g-bg-gray-light-v5 g-color-gray-dark-v5 g-brd-gray-light-v5 g-brd-primary--focus rounded-0 g-py-15 g-px-15" type="tel" placeholder="Your email *">
                      </div>

                      <div class="col-lg-12 form-group g-mb-25">
                        <textarea class="form-control g-resize-none g-bg-gray-light-v5 g-color-gray-dark-v5 g-brd-gray-light-v5 g-brd-primary--focus rounded-0 g-py-15 g-px-15" rows="7" placeholder="Message"></textarea>
                      </div>
                    </div>

                    <button class="btn btn-block u-btn-outline-primary text-uppercase g-font-size-12 g-font-weight-700 g-brd-2 rounded-0 g-py-14 g-px-20" type="submit" role="button">Send Message</button>
                  </form>
                </div>

                <div class="col-lg-3 g-mb-40">
                  <div class="g-mb-25">
                    <span class="u-icon-v1 u-icon-size--xs g-color-primary">
                      <i class="icon-directions"></i>
                    </span>
                    <em class="d-block g-color-black-light-v2 text-uppercase g-font-size-12 g-font-style-normal g-mb-5">Address</em>
                    <strong class="d-block">Orange California, US</strong>
                  </div>
                  <div class="g-mb-25">
                    <span class="u-icon-v1 u-icon-size--xs g-color-primary">
                      <i class="icon-call-in"></i>
                    </span>
                    <em class="d-block g-color-black-light-v2 text-uppercase g-font-size-12 g-font-style-normal g-mb-5">Phone Number</em>
                    <strong class="d-block">+1 555 2566 112</strong>
                  </div>
                  <div>
                    <span class="u-icon-v1 u-icon-size--xs g-color-primary">
                      <i class="icon-envelope-letter"></i>
                    </span>
                    <em class="d-block g-color-black-light-v2 text-uppercase g-font-size-12 g-font-style-normal g-mb-5">Email</em>
                    <strong class="d-block">
                      <a href="#!" class="g-color-main">info@htmlstream.com</a>
                    </strong>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set contentTarget = "#shortcode12" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Contact Forms #12 -->

      <hr class="g-brd-gray-light-v4 my-0">

      <!-- Contact Forms #13 -->
      <section class="g-pt-100">
        <div class="text-center g-mb-60">
          <h2 class="h4">Contact Forms
            <span class="g-color-primary g-ml-5">#13</span>
          </h2>
        </div>

        <div id="shortcode13">
          <div class="shortcode-html">
            <!-- Contact -->
            <footer class="g-pos-rel">
              <!-- Content -->
              <div class="g-bg-size-cover g-bg-img-hero g-bg-cover g-bg-black-opacity-0_7--after g-pt-120 g-pb-70" style="background-image: url({{ root }}assets/img-temp/1920x1080/img51.jpg);">
                <div class="container u-bg-overlay__inner">
                  <div class="row align-items-center">
                    <div class="col-md-4 g-mb-50">
                      <h3 class="h4 g-color-white mb-4">Contact Info</h3>

                      <!-- Icon Block -->
                      <div class="media align-items-center mb-4">
                        <div class="d-flex">
                          <span class="u-icon-v1 u-icon-size--sm g-color-white mr-2">
                            <i class="icon-hotel-restaurant-235 u-line-icon-pro"></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <p class="g-color-white-opacity-0_6 mb-0">5B Streat, City 50987 New Town US</p>
                        </div>
                      </div>
                      <!-- End Icon Block -->

                      <!-- Icon Block -->
                      <div class="media align-items-center mb-4">
                        <div class="d-flex">
                          <span class="u-icon-v1 u-icon-size--sm g-color-white mr-2">
                            <i class="icon-communication-033 u-line-icon-pro"></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <p class="g-color-white-opacity-0_6 mb-0">+32 (0) 333 444 555</p>
                        </div>
                      </div>
                      <!-- End Icon Block -->

                      <!-- Icon Block -->
                      <div class="media align-items-center g-mb-60">
                        <div class="d-flex">
                          <span class="u-icon-v1 u-icon-size--sm g-color-white mr-2">
                            <i class="icon-communication-062 u-line-icon-pro"></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <p class="g-color-white-opacity-0_6 mb-0">htmlstream@support.com</p>
                        </div>
                      </div>
                      <!-- End Icon Block -->

                      <!-- Social Icons -->
                      <h3 class="h4 g-color-white">Social Networks</h3>

                      <ul class="list-inline mb-0">
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v1 u-icon-size--sm g-color-white g-bg-white-opacity-0_1 g-bg-primary--hover g-font-size-13 rounded-circle" href="https://www.facebook.com/htmlstream">
                            <i class="fa fa-facebook"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v1 u-icon-size--sm g-color-white g-bg-white-opacity-0_1 g-bg-primary--hover g-font-size-13 rounded-circle" href="https://twitter.com/htmlstream">
                            <i class="fa fa-twitter"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v1 u-icon-size--sm g-color-white g-bg-white-opacity-0_1 g-bg-primary--hover g-font-size-13 rounded-circle" href="https://github.com/htmlstream">
                            <i class="fa fa-github"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v1 u-icon-size--sm g-color-white g-bg-white-opacity-0_1 g-bg-primary--hover g-font-size-13 rounded-circle" href="https://dribbble.com/htmlstream">
                            <i class="fa fa-dribbble"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Social Icons -->
                    </div>

                    <div class="col-md-8 g-mb-50">
                      <div class="g-brd-around g-brd-white-opacity-0_6 g-px-45 g-py-60">
                        <div class="row">
                          <div class="col-md-4 g-mb-30">
                            <h2 class="h1 g-color-white">Contact Us</h2>
                          </div>

                          <div class="col-md-8 g-mb-30">
                            <!-- Contact Form -->
                            <form>
                              <div class="mb-3">
                                <input class="form-control g-brd-none g-brd-bottom g-brd-white g-brd-primary--focus g-color-white g-bg-transparent g-placeholder-gray-light-v5 rounded-0 g-py-13 g-px-0 mb-2" type="text" placeholder="Name">
                              </div>

                              <div class="mb-3">
                                <input class="form-control g-brd-none g-brd-bottom g-brd-white g-brd-primary--focus g-color-white g-bg-transparent g-placeholder-gray-light-v5 rounded-0 g-py-13 g-px-0 mb-2" type="email" placeholder="Email">
                              </div>

                              <div class="mb-4">
                                <textarea class="form-control g-brd-none g-brd-bottom g-brd-white g-brd-primary--focus g-color-white g-bg-transparent g-placeholder-gray-light-v5 g-resize-none rounded-0 g-py-13 g-px-0 mb-5" rows="5" placeholder="Message"></textarea>
                              </div>

                              <button class="btn u-btn-primary g-bg-secondary g-color-primary g-color-white--hover g-bg-primary--hover g-font-weight-600 g-font-size-12 g-rounded-30 g-py-15 g-px-35" type="submit" role="button">Send Message</button>
                            </form>
                            <!-- End Contact Form -->
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Content -->

              <!-- Go To Top -->
              <a class="js-go-to text-center g-color-main g-color-primary--hover g-left-50x g-ml-minus-100" href="#!"
                 data-type="absolute"
                 data-position='{
                     "bottom": 65
                   }'
                 data-offset-top="400"
                 data-compensation="#js-header"
                 data-show-effect="fadeInUp">
                <svg version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="208px" height="50px">
                  <path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M111.042,0h-0.085C81.962,0.042,50.96,42.999,6,42.999c-6,0-6,0-6,0v1h214v-1v-0.015C169.917,42.349,139.492,0.042,111.042,0z"/>
                </svg>
                <i class="g-font-size-20 g-pos-abs g-bottom-20 g-left-50x g-ml-2 fa fa-angle-double-up"></i>
              </a>
              <!-- End Go To Top -->

              <!-- Copyright -->
              <div class="container text-center g-py-30">
                <p class="g-font-size-13 mb-0">&copy; 2018 Htmlstream. All Rights Reserved.</p>
              </div>
              <!-- End Copyright -->
            </footer>
            <!-- End Contact -->
          </div>
        </div>

        {% set SCExtendedClasses = "text-center" %}
        {% set contentTarget = "#shortcode13" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Contact Forms #13 -->
    </section>

    {% include "html/assets/include/nunjucks/partials/blocks/cta/cta-main.njk" %}

    {% include "html/assets/include/nunjucks/partials/blocks/footers/footer-main.njk" %}
    {% include "html/assets/include/nunjucks/partials/blocks/footers/copyright-footer-main.njk" %}
    {% include "html/assets/include/nunjucks/partials/blocks/go-to-top/go-to-top-1.njk" %}
  </main>

  {% include "html/assets/include/nunjucks/partials/blocks/modals/modal-markup.njk" %}

  {% include "html/assets/include/nunjucks/partials/core-js.njk" %}

  <!-- JS Implementing Plugins -->
  <script src="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
  {% include "html/assets/include/nunjucks/partials/js/js-dzsparallaxer.njk" %}

  {% include "html/assets/include/nunjucks/partials/js/js-jquery-ui-core.njk" %}

  <!-- jQuery UI Helpers -->
  <script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/menu.js"></script>
  <script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/mouse.js"></script>

  <!-- jQuery UI Widgets -->
  <script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/autocomplete.js"></script>

  <!-- JS Unify -->
  <script src="{{ root }}assets/js/hs.core.js"></script>
  <script src="{{ root }}assets/js/components/hs.header.js"></script>
  <script src="{{ root }}assets/js/helpers/hs.hamburgers.js"></script>
  <script src="{{ root }}assets/js/components/hs.header-side.js"></script>
  <script src="{{ root }}assets/js/components/hs.autocomplete-local-search.js"></script>
  <script src="{{ root }}assets/style-switcher/vendor/cookiejs/jquery.cookie.js"></script>
  <script src="{{ root }}assets/js/helpers/hs.shortcode-filter.js"></script>
  <script src="{{ root }}assets/js/components/hs.go-to.js"></script>

  {% include "html/assets/include/nunjucks/partials/js/js-show-code.njk" %}

  <!-- JS Custom -->
  <script src="{{ root }}assets/js/custom.js"></script>

  <!-- JS Plugins Init. -->
  <script>
    $(document).on('ready', function () {
      // initialization of go to
      $.HSCore.components.HSGoTo.init('.js-go-to');
    });

    $(window).on('load', function () {
      // initialization of header
      $.HSCore.components.HSHeader.init($('#js-header'));
      $.HSCore.helpers.HSHamburgers.init('.hamburger');
      $.HSCore.components.HSHeaderSide.init($('#sideNav'));

      // initialization of autocomplet
      $.HSCore.components.HSLocalSearchAutocomplete.init('#u-sidebar-navigation__search-autocomplete');

      // initialization of HSMegaMenu plugin
      $('.js-mega-menu').HSMegaMenu({
        event: 'hover',
        pageContainer: $('.container'),
        breakpoint: 991
      });
    });
  </script>
</body>
</html>
