{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "pages" %}
{% set mainNavActive_2 = "pages-faq" %}
{% set mainNavActive_3 = "page-faq-1" %}
{% set title = "FAQ Page 1 | " %}

{% 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" %}
    <link rel="stylesheet" href="{{ root }}assets/vendor/icon-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/icon-line-pro/style.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/icon-hs/style.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/animate.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-unify.njk" %}
    {% include "html/assets/include/nunjucks/partials/css/css-custom.njk" %}
  </head>

  <body>
    <main>
      {% include "html/assets/include/nunjucks/partials/blocks/headers/header-main.njk" %}

      <!-- Promo Block -->
      <section class="u-bg-overlay g-bg-cover g-bg-size-cover g-bg-bluegray-opacity-0_3--after" style="background: url({{ root }}assets/img-temp/1920x800/img8.jpg)"></div>
        <div class="container text-center g-bg-cover__inner g-py-150">
          <div class="row justify-content-center">
            <div class="col-lg-6">
              <div class="mb-5">
                <h1 class="g-color-white g-font-size-60 mb-4">Have a question?</h1>
                <h2 class="g-color-white g-font-weight-300 g-font-size-20 mb-0">Finding your questions is easy now.</h2>
              </div>

              <!-- Promo Blocks - Input -->
              <div class="form-group mb-0">
                <div class="input-group">
                  <input id="inputGroup1_1" class="form-control u-form-control g-brd-white g-font-size-default g-placeholder-gray g-rounded-left-30 g-px-25 g-py-15" type="text" placeholder="Ask a question">
                  <div class="input-group-btn">
                    <button class="btn btn-primary g-font-size-18 g-rounded-right-30 g-px-25 g-py-15" type="submit">
                      <i class="g-font-size-default fa fa-search"></i>
                    </button>
                  </div>
                </div>
              </div>
              <!-- End Promo Blocks - Input -->
            </div>
          </div>
        </div>
      </section>
      <!-- End Promo Block -->

      <!-- Icons Block -->
      <section class="container g-pt-100 g-pb-70">
        <div class="row">
          <div class="col-md-4 g-mb-30">
            <!-- Icon Blocks -->
            <div class="g-bg-purple text-center rounded g-pos-rel g-z-index-1 g-px-20 g-py-30">
              <span class="u-icon-v1 u-icon-size--xl g-color-white g-mb-10">
                <i class="icon-communication-009 u-line-icon-pro"></i>
              </span>
              <h3 class="h4 g-color-white mb-2">Contact us</h3>
              <span class="d-block h5 g-color-white-opacity-0_7 mb-4">+ (01) 222 333 444</span>
              <a class="btn btn-md u-btn-white g-color-white g-bg-white-opacity-0_2 g-brd-white--hover g-color-purple--hover g-bg-white--hover g-rounded-25" href="#">Give a Call</a>
            </div>
            <!-- End Icon Blocks -->
          </div>

          <div class="col-md-4 g-mb-30">
            <!-- Icon Blocks -->
            <div class="g-bg-teal text-center rounded g-pos-rel g-z-index-1 g-px-20 g-py-30">
              <span class="u-icon-v1 u-icon-size--xl g-color-white g-mb-10">
                <i class="icon-communication-062 u-line-icon-pro"></i>
              </span>
              <h3 class="h4 g-color-white mb-2">Email us</h3>
              <span class="d-block h5 g-color-white-opacity-0_7 mb-4">unify@support.com</span>
              <a class="btn btn-md u-btn-white g-color-white g-bg-white-opacity-0_2 g-brd-white--hover g-color-teal--hover g-bg-white--hover g-rounded-25" href="#">Say Hi..</a>
            </div>
            <!-- End Icon Blocks -->
          </div>

          <div class="col-md-4 g-mb-30">
            <!-- Icon Blocks -->
            <div class="g-bg-blue text-center rounded g-pos-rel g-z-index-1 g-px-20 g-py-30">
              <span class="u-icon-v1 u-icon-size--xl g-color-white g-mb-10">
                <i class="icon-communication-058 u-line-icon-pro"></i>
              </span>
              <h3 class="h4 g-color-white mb-2">Support</h3>
              <span class="d-block h5 g-color-white-opacity-0_7 mb-4">Technical Support</span>
              <a class="btn btn-md u-btn-white g-color-white g-bg-white-opacity-0_2 g-brd-white--hover g-color-blue--hover g-bg-white--hover g-rounded-25" href="#">Ask from Us</a>
            </div>
            <!-- End Icon Blocks -->
          </div>
        </div>
      </section>
      <!-- End Icons Block -->

      <!-- Icon Blocks -->
      <section class="g-brd-y g-brd-gray-light-v4 g-pos-rel g-overflow-hidden">
        <div class="container g-pt-100 g-pb-50">
          <div class="row justify-content-between">
            <div class="col-lg-5 g-mb-50">
              <!-- Heading -->
              <div class="text-center text-lg-left g-mb-60">
                <div class="d-inline-block g-width-35 g-height-1 g-bg-primary mb-3"></div>
                <h2 class="g-color-black g-font-weight-600 mb-5">Read one of our<br>frequently asked questions</h2>
                <a class="btn btn-md u-btn-primary g-font-weight-600 g-font-size-12 g-rounded-25 text-uppercase g-px-30 g-py-13" href="#">Read More</a>
              </div>
              <!-- End Heading -->
            </div>

            <div class="col-lg-6">
              <!-- Icon Blocks -->
              <div class="row">
                <div class="col-sm-6 text-center text-lg-left g-mb-50">
                  <!-- Icon Blocks -->
                  <span class="d-inline-block g-color-primary g-font-size-30 g-rounded-5 mb-2">
                  <i class="icon-education-087 u-line-icon-pro"></i>
                </span>
                  <h3 class="h5 g-font-weight-600 mb-2">Trustworthy</h3>
                  <p class="g-color-gray-dark-v4 mb-0">We strive to embrace and drive change in our industry.</p>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-sm-6 text-center text-lg-left g-mb-50">
                  <!-- Icon Blocks -->
                  <span class="d-inline-block g-color-primary g-font-size-30 g-rounded-5 mb-2">
                  <i class="icon-education-035 u-line-icon-pro"></i>
                </span>
                  <h3 class="h5 g-font-weight-600 mb-2">Helpful</h3>
                  <p class="g-color-gray-dark-v4 mb-0">We strive to embrace and drive change in our industry.</p>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-sm-6 text-center text-lg-left g-mb-50">
                  <!-- Icon Blocks -->
                  <span class="d-inline-block g-color-primary g-font-size-30 g-rounded-5 mb-2">
                  <i class="icon-education-141 u-line-icon-pro"></i>
                </span>
                  <h3 class="h5 g-font-weight-600 mb-2">Fast and Easy</h3>
                  <p class="g-color-gray-dark-v4 mb-0">We strive to embrace and drive change in our industry.</p>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-sm-6 text-center text-lg-left g-mb-50">
                  <!-- Icon Blocks -->
                  <span class="d-inline-block g-color-primary g-font-size-30 g-rounded-5 mb-2">
                  <i class="icon-finance-256 u-line-icon-pro"></i>
                </span>
                  <h3 class="h5 g-font-weight-600 mb-2">Great Prices</h3>
                  <p class="g-color-gray-dark-v4 mb-0">We strive to embrace and drive change in our industry.</p>
                  <!-- End Icon Blocks -->
                </div>
              </div>
              <!-- End Icon Blocks -->
            </div>
          </div>

          <img class="g-width-600 g-pos-abs g-bottom-minus-25x g-z-index-minus-1" src="{{ root }}assets/img/maps/map3.png" alt="Image Description">
        </div>
      </section>
      <!-- End Icon Blocks -->

      <div class="container">
        <section class="text-center g-py-100">
          <span class="g-color-primary g-font-weight-700 g-font-size-90 g-line-height-1_2">100<span class="g-font-size-60">k</span></span>
          <h4 class="h1 g-color-black g-font-weight-600">Questions answered</h4>
        </section>
        <img class="img-fluid w-100" src="{{ root }}assets/img-temp/893x372/img1.jpg" alt="Image Description">
      </div>

      <!-- Accordion -->
      <section class="g-bg-gray-gradient-opacity-v1">
        <div class="container g-py-100">
          <div class="row justify-content-center">
            <div class="col-lg-10">
              <!-- Heading -->
              <div class="text-center g-mb-60">
                <div class="d-inline-block g-width-35 g-height-1 g-bg-primary mb-2"></div>
                <h2 class="g-color-black g-font-weight-600 mb-2">Frequently Asked Questions</h2>
                <p class="lead g-width-60x--md mx-auto">We aim high at being focused on building relationships with our clients and community.</p>
              </div>
              <!-- End Heading -->

              <div id="accordion" class="u-accordion u-accordion-color-primary" role="tablist" aria-multiselectable="true">
                <!-- Card -->
                <div class="card g-brd-none rounded g-mb-20">
                  <div id="accordion-heading-01" class="g-pa-0" role="tab">
                    <h5 class="mb-0">
                      <a class="collapsed d-flex justify-content-between u-shadow-v19 g-color-main g-text-underline--none--hover rounded g-px-30 g-py-20" href="#accordion-body-01" data-toggle="collapse" data-parent="#accordion" aria-expanded="false" aria-controls="accordion-body-01">
                        Guarantee?
                        <span class="u-accordion__control-icon g-color-primary">
                          <i class="fa fa-angle-down"></i>
                          <i class="fa fa-angle-up"></i>
                        </span>
                      </a>
                    </h5>
                  </div>
                  <div id="accordion-body-01" class="collapse" role="tabpanel" aria-labelledby="accordion-heading-01"
                       data-parent="#accordion">
                    <div class="u-accordion__body g-color-gray-dark-v4 g-pa-30">
                      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                    </div>
                  </div>
                </div>
                <!-- End Card -->

                <!-- Card -->
                <div class="card g-brd-none rounded g-mb-20">
                  <div id="accordion-heading-02" class="g-pa-0" role="tab">
                    <h5 class="mb-0">
                      <a class="collapsed d-flex justify-content-between u-shadow-v19 g-color-main g-text-underline--none--hover rounded g-px-30 g-py-20" href="#accordion-body-02" data-toggle="collapse" data-parent="#accordion" aria-expanded="false" aria-controls="accordion-body-02">
                        Do you have any built-in caching?
                        <span class="u-accordion__control-icon g-color-primary">
                          <i class="fa fa-angle-down"></i>
                          <i class="fa fa-angle-up"></i>
                        </span>
                      </a>
                    </h5>
                  </div>
                  <div id="accordion-body-02" class="collapse" role="tabpanel" aria-labelledby="accordion-heading-02"
                       data-parent="#accordion">
                    <div class="u-accordion__body g-color-gray-dark-v4 g-pa-30">
                      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                    </div>
                  </div>
                </div>
                <!-- End Card -->

                <!-- Card -->
                <div class="card g-brd-none rounded g-mb-20">
                  <div id="accordion-heading-03" class="g-pa-0" role="tab">
                    <h5 class="mb-0">
                      <a class="collapsed d-flex justify-content-between u-shadow-v19 g-color-main g-text-underline--none--hover rounded g-px-30 g-py-20" href="#accordion-body-03" data-toggle="collapse" data-parent="#accordion" aria-expanded="false" aria-controls="accordion-body-03">
                        Can I add/upgrade my plan at any time?
                        <span class="u-accordion__control-icon g-color-primary">
                          <i class="fa fa-angle-down"></i>
                          <i class="fa fa-angle-up"></i>
                        </span>
                      </a>
                    </h5>
                  </div>
                  <div id="accordion-body-03" class="collapse" role="tabpanel" aria-labelledby="accordion-heading-03"
                       data-parent="#accordion">
                    <div class="u-accordion__body g-color-gray-dark-v4 g-pa-30">
                      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                    </div>
                  </div>
                </div>
                <!-- End Card -->

                <!-- Card -->
                <div class="card g-brd-none rounded g-mb-20">
                  <div id="accordion-heading-04" class="g-pa-0" role="tab">
                    <h5 class="mb-0">
                      <a class="collapsed d-flex justify-content-between u-shadow-v19 g-color-main g-text-underline--none--hover rounded g-px-30 g-py-20" href="#accordion-body-04" data-toggle="collapse" data-parent="#accordion" aria-expanded="false" aria-controls="accordion-body-04">
                        What access comes with my hosting plan?
                        <span class="u-accordion__control-icon g-color-primary">
                          <i class="fa fa-angle-down"></i>
                          <i class="fa fa-angle-up"></i>
                        </span>
                      </a>
                    </h5>
                  </div>
                  <div id="accordion-body-04" class="collapse" role="tabpanel" aria-labelledby="accordion-heading-04"
                       data-parent="#accordion">
                    <div class="u-accordion__body g-color-gray-dark-v4 g-pa-30">
                      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                    </div>
                  </div>
                </div>
                <!-- End Card -->
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- End Accordion -->

      {% 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/helpers/outer-spaces-helper.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>

    <!-- 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.tabs.js"></script>
    <script src="{{ root }}assets/js/components/hs.go-to.js"></script>

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

    <!-- JS Plugins Init. -->
    <script>
      $(document).on('ready', function () {
        // initialization of tabs
        $.HSCore.components.HSTabs.init('[role="tablist"]');

        // 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');

        // initialization of HSMegaMenu component
        $('.js-mega-menu').HSMegaMenu({
          event: 'hover',
          pageContainer: $('.container'),
          breakpoint: 991
        });
      });

      $(window).on('resize', function () {
        setTimeout(function () {
          $.HSCore.components.HSTabs.init('[role="tablist"]');
        }, 200);
      });
    </script>

    {% set SSCookiePrefix = "unify" %}
    {% set SSDefaultCustomColor = "#72c02c" %}
    {% set SSDefaultOuterSpaces = "0px" %}
    {% set SSDefaultContentFont = "Open Sans, Helvetica, Arial, sans-serif" %}
    {% set SSDefaultHeadingFont = "Open Sans, Helvetica, Arial, sans-serif" %}
    {% include "html/assets/include/nunjucks/partials/blocks/style-switcher.njk" %}
  </body>
</html>
