{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "shortcodes" %}
{% set sidebarNavActive_1 = "shortcode-blocks-pricing-plans" %}
{% set title = "Pricing Plans" %}

{% 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>
      <!-- Pricing Plan #01 -->
      <section class="g-py-60 g-mb-40">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Pricing Plan
              <span class="g-color-primary g-ml-5">#01</span>
            </h2>
          </div>

          <div id="shortcode1">
            <div class="shortcode-html">
              <div class="row no-gutters align-items-center">
                <div class="col-md-4 g-mb-30">
                  <!-- Article -->
                  <article class="text-center g-brd-around g-color-gray g-brd-gray-light-v5 g-pa-10">
                    <div class="g-bg-gray-light-v5 g-pa-30">
                      <!-- Article Title -->
                      <h4 class="text-uppercase g-color-gray-dark-v3 g-font-weight-500 g-mb-10">Starter</h4>
                      <!-- End Article Title -->
                      <em class="g-font-style-normal">Ed feugiat porttitor nunc, non</em>

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

                      <div class="g-color-primary g-my-20">
                        <strong class="d-block g-font-size-30 g-line-height-1_2">$24.00</strong> per month
                      </div>

                      <hr class="g-brd-gray-light-v4 g-mt-10 mb-0">

                      <ul class="list-unstyled g-mb-25">
                        <li class="g-brd-bottom g-brd-gray-light-v4 g-py-12">Vivamus a fringilla lorem, vel faucibus ante. Nunc ullamcorper justo..</li>
                        <li class="g-brd-bottom g-brd-gray-light-v4 g-py-12"><b>10%</b> In hac habitasse platea
                        </li>
                        <li class="g-brd-bottom g-brd-gray-light-v4 g-py-12"><b>10gb</b> Praesent egestas ac arcu
                        </li>
                        <li class="g-brd-bottom g-brd-gray-light-v4 g-py-12">
                          <b>25</b> emails Sed eget aliquet nisl
                        </li>
                        <li class="g-brd-bottom g-brd-gray-light-v4 g-py-12">
                          <b>No</b> Proin laoreet accumsan nisl non
                        </li>
                      </ul>
                      <a class="btn btn-md rounded-0 u-btn-primary" href="#">Order Now</a>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-4 g-mb-30">
                  <!-- Article -->
                  <article class="text-center g-brd-around g-color-gray g-brd-gray-light-v5 g-pa-10">
                    <div class="g-bg-gray-light-v5 g-px-30 g-py-60">
                      <!-- Article Title -->
                      <h4 class="text-uppercase g-color-gray-dark-v3 g-font-weight-500 g-mb-10">Advanced</h4>
                      <!-- End Article Title -->
                      <em class="g-font-style-normal">Ed feugiat porttitor nunc, non</em>

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

                      <div class="g-color-primary g-my-20">
                        <strong class="d-block g-font-size-30 g-line-height-1_2">$50.00</strong> per month
                      </div>

                      <hr class="g-brd-gray-light-v4 g-mt-10 mb-0">

                      <ul class="list-unstyled g-mb-25">
                        <li class="g-brd-bottom g-brd-gray-light-v4 g-py-12">Vivamus a fringilla lorem, vel faucibus ante. Nunc ullamcorper justo..</li>
                        <li class="g-brd-bottom g-brd-gray-light-v4 g-py-12"><b>20%</b> In hac habitasse platea
                        </li>
                        <li class="g-brd-bottom g-brd-gray-light-v4 g-py-12"><b>20gb</b> Praesent egestas ac arcu
                        </li>
                        <li class="g-brd-bottom g-brd-gray-light-v4 g-py-12">
                          <b>50</b> emails Sed eget aliquet nisl
                        </li>
                        <li class="g-brd-bottom g-brd-gray-light-v4 g-py-12">
                          <b>Yes</b> Proin laoreet accumsan nisl non
                        </li>
                      </ul>
                      <a class="btn btn-md rounded-0 u-btn-primary" href="#">Order Now</a>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-4 g-mb-30">
                  <!-- Article -->
                  <article class="text-center g-brd-around g-color-gray g-brd-gray-light-v5 g-pa-10">
                    <div class="g-bg-gray-light-v5 g-pa-30">
                      <!-- Article Title -->
                      <h4 class="text-uppercase g-color-gray-dark-v3 g-font-weight-500 g-mb-10">Professional</h4>
                      <!-- End Article Title -->
                      <em class="g-font-style-normal">Ed feugiat porttitor nunc, non</em>

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

                      <div class="g-color-primary g-my-20">
                        <strong class="d-block g-font-size-30 g-line-height-1_2">$75.00</strong> per month
                      </div>

                      <hr class="g-brd-gray-light-v4 g-mt-10 mb-0">

                      <ul class="list-unstyled g-mb-25">
                        <li class="g-brd-bottom g-brd-gray-light-v4 g-py-12">Vivamus a fringilla lorem, vel faucibus ante. Nunc ullamcorper justo..</li>
                        <li class="g-brd-bottom g-brd-gray-light-v4 g-py-12"><b>30%</b> In hac habitasse platea
                        </li>
                        <li class="g-brd-bottom g-brd-gray-light-v4 g-py-12"><b>40gb</b> Praesent egestas ac arcu
                        </li>
                        <li class="g-brd-bottom g-brd-gray-light-v4 g-py-12">
                          <b>100</b> emails Sed eget aliquet nisl
                        </li>
                        <li class="g-brd-bottom g-brd-gray-light-v4 g-py-12">
                          <b>Yes</b> Proin laoreet accumsan nisl non
                        </li>
                      </ul>
                      <a class="btn btn-md rounded-0 u-btn-primary" href="#">Order Now</a>
                    </div>
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

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

      <!-- Pricing Plan #02 -->
      <section class="g-bg-secondary g-py-60 g-mb-40">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Pricing Plan
              <span class="g-color-primary g-ml-5">#02</span>
            </h2>
          </div>

          <div id="shortcode2">
            <div class="shortcode-html">
              <div class="row align-items-end">
                <div class="col-lg-3 col-sm-6 g-mb-40">
                  <!-- Article -->
                  <article class="text-center u-zigzag-top-white g-color-black">
                    <!-- Article Header -->
                    <header class="g-brd-bottom g-brd-3 g-brd-black g-px-20 g-py-15">
                      <h3 class="h5 text-uppercase g-font-weight-700 g-mb-5">Starter</h3>
                    </header>
                    <!-- End Article Header -->

                    <!-- Article After Header -->
                    <div class="g-brd-bottom--dotted g-brd-gray-dark-v5 g-px-20 g-py-40">
                      Donec dapibus, neque consectetur, tellus
                    </div>
                    <!-- End Article After Header -->

                    <!-- Article Content -->
                    <div class="g-brd-bottom--dotted g-brd-gray-dark-v5 g-pa-20">
                      <ul class="list-unstyled mb-0">
                        <li class="g-color-gray-dark-v5 g-mb-20">
                          <strong class="d-block g-font-size-20 g-text-strike">$159</strong> before March 6
                        </li>
                        <li class="g-mb-20">
                          <strong class="d-block g-font-size-35">$239</strong> before April 1
                        </li>
                        <li class="g-color-gray-dark-v5">
                          <strong class="d-block g-font-size-20">$499</strong> before April 22
                        </li>
                      </ul>
                    </div>
                    <!-- End Article Content -->

                    <!-- CTA -->
                    <div class="g-pa-20">
                      <a class="btn text-uppercase w-100 u-btn-outline-primary g-brd-2 g-rounded-50 g-font-weight-700 g-pa-15-30" href="#">Buy</a>
                    </div>
                    <!-- End CTA -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-40">
                  <!-- Article -->
                  <article class="text-center u-zigzag-top-primary g-color-white">
                    <!-- Article Header -->
                    <header class="g-brd-bottom g-brd-3 g-brd-primary g-px-20 g-py-25">
                      <h3 class="h5 text-uppercase g-font-weight-700 g-mb-5">Professional</h3>
                    </header>
                    <!-- End Article Header -->

                    <!-- Article After Header -->
                    <div class="g-bg-white g-color-black g-brd-bottom--dotted g-brd-gray-dark-v5 g-px-20 g-py-40">
                      Donec dapibus, neque consectetur, tellus
                    </div>
                    <!-- End Article After Header -->

                    <!-- Article Content -->
                    <div class="g-bg-white g-color-black g-brd-bottom--dotted g-brd-gray-dark-v5 g-pa-20">
                      <ul class="list-unstyled mb-0">
                        <li class="g-color-gray-dark-v5 g-mb-20">
                          <strong class="d-block g-font-size-20 g-text-strike">$179</strong> before March 6
                        </li>
                        <li class="g-mb-20">
                          <strong class="d-block g-font-size-35">$259</strong> before April 1
                        </li>
                        <li class="g-color-gray-dark-v5">
                          <strong class="d-block g-font-size-20">$529</strong> before April 22
                        </li>
                      </ul>
                    </div>
                    <!-- End Article Content -->

                    <!-- CTA -->
                    <div class="g-bg-white g-color-black g-pa-20">
                      <a class="btn text-uppercase w-100 u-btn-outline-primary g-brd-2 g-rounded-50 g-font-weight-700 g-pa-15-30" href="#">Buy</a>
                    </div>
                    <!-- End CTA -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-40">
                  <!-- Article -->
                  <article class="text-center u-zigzag-top-white g-color-black">
                    <!-- Article Header -->
                    <header class="g-brd-bottom g-brd-3 g-brd-black g-px-20 g-py-15">
                      <h3 class="h5 text-uppercase g-font-weight-700 g-mb-5">Business</h3>
                    </header>
                    <!-- End Article Header -->

                    <!-- Article After Header -->
                    <div class="g-brd-bottom--dotted g-brd-gray-dark-v5 g-px-20 g-py-40">
                      Donec dapibus, neque consectetur, tellus
                    </div>
                    <!-- End Article After Header -->

                    <!-- Article Content -->
                    <div class="g-brd-bottom--dotted g-brd-gray-dark-v5 g-pa-20">
                      <ul class="list-unstyled mb-0">
                        <li class="g-color-gray-dark-v5 g-mb-20">
                          <strong class="d-block g-font-size-20 g-text-strike">$219</strong> before March 6
                        </li>
                        <li class="g-mb-20">
                          <strong class="d-block g-font-size-35">$299</strong> before April 1
                        </li>
                        <li class="g-color-gray-dark-v5">
                          <strong class="d-block g-font-size-20">$589</strong> before April 22
                        </li>
                      </ul>
                    </div>
                    <!-- End Article Content -->

                    <!-- CTA -->
                    <div class="g-pa-20">
                      <a class="btn text-uppercase w-100 u-btn-outline-primary g-brd-2 g-rounded-50 g-font-weight-700 g-pa-15-30" href="#">Buy</a>
                    </div>
                    <!-- End CTA -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-40">
                  <!-- Article -->
                  <article class="text-center u-zigzag-top-white g-color-black">
                    <!-- Article Header -->
                    <header class="g-brd-bottom g-brd-3 g-brd-black g-px-20 g-py-15">
                      <h3 class="h5 text-uppercase g-font-weight-700 g-mb-5">Enterprise</h3>
                    </header>
                    <!-- End Article Header -->

                    <!-- Article After Header -->
                    <div class="g-brd-bottom--dotted g-brd-gray-dark-v5 g-px-20 g-py-40">
                      Donec dapibus, neque consectetur, tellus
                    </div>
                    <!-- End Article After Header -->

                    <!-- Article Content -->
                    <div class="g-brd-bottom--dotted g-brd-gray-dark-v5 g-pa-20">
                      <ul class="list-unstyled mb-0">
                        <li class="g-color-gray-dark-v5 g-mb-20">
                          <strong class="d-block g-font-size-20 g-text-strike">$309</strong> before March 6
                        </li>
                        <li class="g-mb-20">
                          <strong class="d-block g-font-size-35">$399</strong> before April 1
                        </li>
                        <li class="g-color-gray-dark-v5">
                          <strong class="d-block g-font-size-20">$639</strong> before April 22
                        </li>
                      </ul>
                    </div>
                    <!-- End Article Content -->

                    <!-- CTA -->
                    <div class="g-pa-20">
                      <a class="btn text-uppercase w-100 u-btn-outline-primary g-brd-2 g-rounded-50 g-font-weight-700 g-pa-15-30" href="#">Buy</a>
                    </div>
                    <!-- End CTA -->
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode2" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Pricing Plan #02 -->

      <!-- Pricing Plan #03 -->
      <section class="g-py-60 g-mb-40">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Pricing Plan
              <span class="g-color-primary g-ml-5">#03</span>
            </h2>
          </div>

          <div id="shortcode3">
            <div class="shortcode-html">
              <div class="row no-gutters align-items-center">
                <div class="col-lg col-md-4 col-sm-6 g-mb-30">
                  <!-- Article -->
                  <article class="h-100 g-pos-rel g-bg-gray-light-v5 g-bg-primary-opacity-0_8--hover g-brd-right--sm g-brd-gray-light-v4 g-brd-transparent--hover g-color-black g-transform-scale-1_05--hover g-transition-0_3 g-pt-40 g-px-20 g-pb-105">
                    <!-- Article Title -->
                    <h4 class="g-font-size-20 g-font-weight-700 g-mb-25">Online</h4>
                    <!-- End Article Title -->
                    <strong class="d-block g-font-size-32 g-line-height-0_7 g-mb-25">
                      <span class="g-valign-top g-font-size-default">$</span>
                      4.90
                      <span class="g-font-size-default g-font-weight-400">/ month</span>
                    </strong>
                    <p class="g-mb-20">Facilisis at tortor vel, blandit tristique enim</p>
                    <ul class="list-unstyled mb-0">
                      <li class="g-mb-5">
                        <i class="fa fa-check-circle g-mr-5"></i>
                        Support forum
                      </li>
                      <li class="g-mb-5">
                        <i class="fa fa-check-circle g-mr-5"></i>
                        Unlimited traffic
                      </li>
                      <li class="g-mb-5">
                        <i class="fa fa-check-circle g-mr-5"></i>
                        1GB of storage space
                      </li>
                    </ul>

                    <footer class="g-pos-abs g-bottom-10 g-left-0 g-right-0 g-pa-20">
                      <a class="btn u-btn-outline-black g-brd-1 g-rounded-50 g-font-weight-600 g-pa-15-20" href="#">Order Now</a>
                    </footer>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg col-md-4 col-sm-6 g-mb-30">
                  <!-- Article -->
                  <article class="h-100 g-pos-rel g-bg-gray-light-v5 g-bg-primary-opacity-0_8--hover g-brd-right--md g-brd-gray-light-v4 g-brd-transparent--hover g-color-black g-transform-scale-1_05--hover g-transition-0_3 g-pt-40 g-px-20 g-pb-105">
                    <!-- Article Title -->
                    <h4 class="g-font-size-20 g-font-weight-700 g-mb-25">Econom</h4>
                    <!-- End Article Title -->
                    <strong class="d-block g-font-size-32 g-line-height-0_7 g-mb-25">
                      <span class="g-valign-top g-font-size-default">$</span>
                      9.90
                      <span class="g-font-size-default g-font-weight-400">/ month</span>
                    </strong>
                    <p class="g-mb-20">Facilisis at tortor vel, blandit tristique enim</p>
                    <ul class="list-unstyled mb-0">
                      <li class="g-mb-5">
                        <i class="fa fa-check-circle g-mr-5"></i>
                        Support forum
                      </li>
                      <li class="g-mb-5">
                        <i class="fa fa-check-circle g-mr-5"></i>
                        Unlimited traffic
                      </li>
                      <li class="g-mb-5">
                        <i class="fa fa-check-circle g-mr-5"></i>
                        4GB of storage space
                      </li>
                    </ul>

                    <footer class="g-pos-abs g-bottom-10 g-left-0 g-right-0 g-pa-20">
                      <a class="btn u-btn-outline-black g-brd-1 g-rounded-50 g-font-weight-600 g-pa-15-20" href="#">Order Now</a>
                    </footer>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg col-md-4 col-sm-6 g-mb-30">
                  <!-- Article -->
                  <article class="h-100 g-pos-rel g-bg-gray-light-v5 g-bg-primary-opacity-0_8--hover g-brd-right--sm g-brd-gray-light-v4 g-brd-right-0--md g-brd-right-1--lg g-brd-transparent--hover g-color-black g-transform-scale-1_05--hover g-transition-0_3 g-pt-40 g-px-20 g-pb-105">
                    <!-- Article Title -->
                    <h4 class="g-font-size-20 g-font-weight-700 g-mb-25">Standart</h4>
                    <!-- End Article Title -->
                    <strong class="d-block g-font-size-32 g-line-height-0_7 g-mb-25">
                      <span class="g-valign-top g-font-size-default">$</span>
                      14.90
                      <span class="g-font-size-default g-font-weight-400">/ month</span>
                    </strong>
                    <p class="g-mb-20">Facilisis at tortor vel, blandit tristique enim</p>
                    <ul class="list-unstyled mb-0">
                      <li class="g-mb-5">
                        <i class="fa fa-check-circle g-mr-5"></i>
                        Support forum
                      </li>
                      <li class="g-mb-5">
                        <i class="fa fa-check-circle g-mr-5"></i>
                        Unlimited traffic
                      </li>
                      <li class="g-mb-5">
                        <i class="fa fa-check-circle g-mr-5"></i>
                        12GB of storage space
                      </li>
                    </ul>

                    <footer class="g-pos-abs g-bottom-10 g-left-0 g-right-0 g-pa-20">
                      <a class="btn u-btn-outline-black g-brd-1 g-rounded-50 g-font-weight-600 g-pa-15-20" href="#">Order Now</a>
                    </footer>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg col-md-4 col-sm-6 g-mb-30">
                  <!-- Article -->
                  <article class="h-100 g-pos-rel g-bg-gray-light-v5 g-bg-primary-opacity-0_8--hover g-brd-right--md g-brd-gray-light-v4 g-brd-transparent--hover g-color-black g-transform-scale-1_05--hover g-transition-0_3 g-pt-40 g-px-20 g-pb-105">
                    <!-- Article Title -->
                    <h4 class="g-font-size-20 g-font-weight-700 g-mb-25">Standart+</h4>
                    <!-- End Article Title -->
                    <strong class="d-block g-font-size-32 g-line-height-0_7 g-mb-25">
                      <span class="g-valign-top g-font-size-default">$</span>
                      19.90
                      <span class="g-font-size-default g-font-weight-400">/ month</span>
                    </strong>
                    <p class="g-mb-20">Facilisis at tortor vel, blandit tristique enim</p>
                    <ul class="list-unstyled mb-0">
                      <li class="g-mb-5">
                        <i class="fa fa-check-circle g-mr-5"></i>
                        Support forum
                      </li>
                      <li class="g-mb-5">
                        <i class="fa fa-check-circle g-mr-5"></i>
                        Unlimited traffic
                      </li>
                      <li class="g-mb-5">
                        <i class="fa fa-check-circle g-mr-5"></i>
                        32GB of storage space
                      </li>
                    </ul>

                    <footer class="g-pos-abs g-bottom-10 g-left-0 g-right-0 g-pa-20">
                      <a class="btn u-btn-outline-black g-brd-1 g-rounded-50 g-font-weight-600 g-pa-15-20" href="#">Order Now</a>
                    </footer>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg col-md-4 col-sm-6 g-mb-30">
                  <!-- Article -->
                  <article class="h-100 g-pos-rel g-bg-gray-light-v5 g-bg-primary-opacity-0_8--hover g-brd-transparent--hover g-color-black g-transform-scale-1_05--hover g-transition-0_3 g-pt-40 g-px-20 g-pb-105">
                    <!-- Article Title -->
                    <h4 class="g-font-size-20 g-font-weight-700 g-mb-25">Premium</h4>
                    <!-- End Article Title -->
                    <strong class="d-block g-font-size-32 g-line-height-0_7 g-mb-25">
                      <span class="g-valign-top g-font-size-default">$</span>
                      24.90
                      <span class="g-font-size-default g-font-weight-400">/ month</span>
                    </strong>
                    <p class="g-mb-20">Facilisis at tortor vel, blandit tristique enim</p>
                    <ul class="list-unstyled mb-0">
                      <li class="g-mb-5">
                        <i class="fa fa-check-circle g-mr-5"></i>
                        Support forum
                      </li>
                      <li class="g-mb-5">
                        <i class="fa fa-check-circle g-mr-5"></i>
                        Unlimited traffic
                      </li>
                      <li class="g-mb-5">
                        <i class="fa fa-check-circle g-mr-5"></i>
                        40GB of storage space
                      </li>
                    </ul>

                    <footer class="g-pos-abs g-bottom-10 g-left-0 g-right-0 g-pa-20">
                      <a class="btn u-btn-outline-black g-brd-1 g-rounded-50 g-font-weight-600 g-pa-15-20" href="#">Order Now</a>
                    </footer>
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

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

      <!-- Pricing Plan #04 -->
      <section class="g-bg-secondary g-py-60 g-mb-40">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Pricing Plan
              <span class="g-color-primary g-ml-5">#04</span>
            </h2>
          </div>

          <div id="shortcode4">
            <div class="shortcode-html">
              <div class="row no-gutters align-items-center justify-content-center">
                <div class="col-md-6 col-lg-4 g-mb-30 g-z-index-2">
                  <!-- Article -->
                  <article class="text-center g-bg-white u-shadow-v24 g-color-gray-dark-v5 g-px-50 g-py-80">
                    <!-- Article Header -->
                    <header class="text-uppercase g-font-size-12 g-mb-35">
                      <strong class="d-block g-color-primary g-font-size-30 g-line-height-1 g-font-weight-600 g-mb-2">$230</strong> Per Course
                    </header>
                    <!-- End Article Header -->

                    <!-- Article Title -->
                    <h4 class="h5 text-uppercase font-weight-bold g-color-black g-mb-15">Starter</h4>
                    <!-- End Article Title -->

                    <hr class="g-brd-10 g-brd-primary g-width-50 g-mb-35">

                    <p class="g-mb-30">Fusce dolor libero, efficitur et lobortis at, faucibus nec nunc. Proin fermentum turpis eget. Praesent malesuada facilisis maximus.</p>
                    <a href="#" class="btn text-uppercase rounded-0 u-btn-primary g-font-size-default g-font-weight-700 g-pa-17-23">Order Now</a>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="text-center g-bg-white u-shadow-v24 g-color-gray-dark-v5 g-pa-50">
                    <!-- Article Header -->
                    <header class="text-uppercase g-font-size-12 g-mb-35">
                      <strong class="d-block g-color-primary g-font-size-30 g-line-height-1 g-font-weight-600 g-mb-2">$1500</strong> Per Course
                    </header>
                    <!-- End Article Header -->

                    <!-- Article Title -->
                    <h4 class="h5 text-uppercase font-weight-bold g-color-black g-mb-15">Advanced</h4>
                    <!-- End Article Title -->

                    <hr class="g-brd-10 g-brd-primary g-width-50 g-mb-35">

                    <p class="g-mb-30">Fusce dolor libero, efficitur et lobortis at, faucibus nec nunc. Proin fermentum turpis eget. Praesent malesuada facilisis maximus.</p>
                    <a href="#" class="btn text-uppercase rounded-0 u-btn-primary g-font-size-default g-font-weight-700 g-pa-17-23">Order Now</a>
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode4" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Pricing Plan #04 -->

      <!-- Pricing Plan #05 -->
      <section class="g-py-60 g-mb-40">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Pricing Plan
              <span class="g-color-primary g-ml-5">#05</span>
            </h2>
          </div>

          <div id="shortcode5">
            <div class="shortcode-html">
              <div class="row align-items-end">
                <div class="col-md-4 g-mb-30">
                  <!-- Article -->
                  <article class="text-center g-rounded-5 g-brd-around g-brd-gray-light-v5 g-overflow-hidden u-shadow-v1-5--hover g-transition-0_3">
                    <!-- Article Header -->
                    <header class="g-bg-gray-light-v5 g-color-black g-pa-40">
                      <!-- Article Title -->
                      <h3 class="g-font-weight-300 g-mb-5">Starter</h3>
                      <!-- End Article Title -->

                      <div class="g-font-size-36 g-font-weight-600 g-line-height-1_2">
                        $9.99
                        <em class="d-block g-font-style-normal g-font-size-default g-font-weight-300 g-mt-15">per month</em>
                      </div>
                    </header>
                    <!-- End Article Header -->

                    <!-- Article Content -->
                    <div class="g-color-gray-dark-v4 g-px-35 g-pt-40 g-pb-20">
                      <ul class="list-unstyled mb-0">
                        <li class="g-mb-20">Etiam mollis iaculis</li>
                        <li class="g-mb-20">Fusce fringilla ipsum</li>
                        <li class="g-mb-20">Sed eget justo est</li>
                        <li class="g-mb-20">Sed pellentesque velit ante</li>
                        <li class="g-mb-20">Fusce fringilla ipsum nec</li>
                        <li class="g-mb-20">Nullam vel turpis</li>
                      </ul>
                    </div>

                    <a class="btn w-100 u-btn-primary rounded-0 g-font-weight-600 g-pa-15-30" href="#">Order Now</a>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-4 g-mb-30">
                  <!-- Article -->
                  <article class="text-center g-rounded-5 g-brd-around g-brd-gray-light-v5 g-overflow-hidden u-shadow-v1-5--hover g-transition-0_3">
                    <!-- Article Header -->
                    <header class="g-bg-gray-light-v5 g-color-black g-px-40 g-py-60">
                      <!-- Article Title -->
                      <h3 class="g-font-weight-300 g-mb-5">Professional</h3>
                      <!-- End Article Title -->

                      <div class="g-font-size-36 g-font-weight-600 g-line-height-1_2">
                        $19.99
                        <em class="d-block g-font-style-normal g-font-size-default g-font-weight-300 g-mt-15">per month</em>
                      </div>
                    </header>
                    <!-- End Article Header -->

                    <!-- Article Content -->
                    <div class="g-color-gray-dark-v4 g-px-35 g-pt-40 g-pb-20">
                      <ul class="list-unstyled mb-0">
                        <li class="g-mb-20">Etiam mollis iaculis</li>
                        <li class="g-mb-20">Fusce fringilla ipsum</li>
                        <li class="g-mb-20">Sed eget justo est</li>
                        <li class="g-mb-20">Sed pellentesque velit ante</li>
                        <li class="g-mb-20">Fusce fringilla ipsum nec</li>
                        <li class="g-mb-20">Nullam vel turpis</li>
                      </ul>
                    </div>

                    <a class="btn w-100 u-btn-primary rounded-0 g-font-weight-600 g-pa-15-30" href="#">Order Now</a>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-4 g-mb-30">
                  <!-- Article -->
                  <article class="text-center g-rounded-5 g-brd-around g-brd-gray-light-v5 g-overflow-hidden u-shadow-v1-5--hover g-transition-0_3">
                    <!-- Article Header -->
                    <header class="g-bg-gray-light-v5 g-color-black g-pa-40">
                      <!-- Article Title -->
                      <h3 class="g-font-weight-300 g-mb-5">Business</h3>
                      <!-- End Article Title -->

                      <div class="g-font-size-36 g-font-weight-600 g-line-height-1_2">
                        $39.99
                        <em class="d-block g-font-style-normal g-font-size-default g-font-weight-300 g-mt-15">per month</em>
                      </div>
                    </header>
                    <!-- End Article Header -->

                    <!-- Article Content -->
                    <div class="g-color-gray-dark-v4 g-px-35 g-pt-40 g-pb-20">
                      <ul class="list-unstyled mb-0">
                        <li class="g-mb-20">Etiam mollis iaculis</li>
                        <li class="g-mb-20">Fusce fringilla ipsum</li>
                        <li class="g-mb-20">Sed eget justo est</li>
                        <li class="g-mb-20">Sed pellentesque velit ante</li>
                        <li class="g-mb-20">Fusce fringilla ipsum nec</li>
                        <li class="g-mb-20">Nullam vel turpis</li>
                      </ul>
                    </div>

                    <a class="btn w-100 u-btn-primary rounded-0 g-font-weight-600 g-pa-15-30" href="#">Order Now</a>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

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

      <!-- Pricing Plan #06 -->
      <section class="g-bg-secondary g-py-60 g-mb-40">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Pricing Plan
              <span class="g-color-primary g-ml-5">#06</span>
            </h2>
          </div>

          <div id="shortcode6">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-4 g-mb-30">
                  <!-- Article -->
                  <article class="text-center g-bg-white g-rounded-15 g-overflow-hidden g-transform-scale-1_05--hover g-transition-0_3">
                    <!-- Article Header -->
                    <header class="g-bg-primary g-pos-rel g-px-20 g-py-50">
                      <svg class="g-pos-abs g-bottom-0 g-left-0 g-right-0" version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="70px" viewBox="0 0 300 70">
                        <path d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729 c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" opacity="0.6" fill="#ffffff"/>
                        <path d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729 c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" opacity="0.6" fill="#ffffff"/>
                        <path d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716 H42.401L43.415,98.342z" opacity="0.7" fill="#ffffff"/>
                        <path d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428 c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" fill="#ffffff"/>
                      </svg>
                      <strong class="d-block g-color-white g-font-size-50 g-line-height-0_7 g-mb-20">
                        <span class="g-valign-top g-font-size-default">$</span>
                        19
                        <span class="g-font-size-default">/ month</span>
                      </strong>
                      <h3 class="h6 text-uppercase g-color-white-opacity-0_7 g-letter-spacing-3 g-mb-20">Starter</h3>
                    </header>
                    <!-- End Article Header -->

                    <!-- Article Content -->
                    <div class="g-px-20 g-py-40">
                      <ul class="list-unstyled g-mb-40">
                        <li class="g-mb-20">1GB of space</li>
                        <li class="g-mb-20">Unlimited traffic</li>
                        <li class="g-mb-20">Online Support</li>
                        <li class="g-mb-20">24 hour Support</li>
                      </ul>
                      <a class="btn text-uppercase u-btn-primary g-rounded-50 g-font-size-12 g-font-weight-700 g-pa-15-30 g-mb-10" href="#">Order Now</a>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-4 g-mb-30">
                  <!-- Article -->
                  <article class="text-center g-bg-white g-rounded-15 g-overflow-hidden g-transform-scale-1_05--hover g-transition-0_3">
                    <!-- Article Header -->
                    <header class="g-bg-primary g-pos-rel g-px-20 g-py-50">
                      <svg class="g-pos-abs g-bottom-0 g-left-0 g-right-0" version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="70px" viewBox="0 0 300 70">
                        <path d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729 c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" opacity="0.6" fill="#ffffff"/>
                        <path d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729 c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" opacity="0.6" fill="#ffffff"/>
                        <path d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716 H42.401L43.415,98.342z" opacity="0.7" fill="#ffffff"/>
                        <path d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428 c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" fill="#ffffff"/>
                      </svg>
                      <strong class="d-block g-color-white g-font-size-50 g-line-height-0_7 g-mb-20">
                        <span class="g-valign-top g-font-size-default">$</span>
                        49
                        <span class="g-font-size-default">/ month</span>
                      </strong>
                      <h3 class="h6 text-uppercase g-color-white-opacity-0_7 g-letter-spacing-3 g-mb-20">Professional</h3>
                    </header>
                    <!-- End Article Header -->

                    <!-- Article Content -->
                    <div class="g-px-20 g-py-40">
                      <ul class="list-unstyled g-mb-40">
                        <li class="g-mb-20">200GB of space</li>
                        <li class="g-mb-20">Unlimited traffic</li>
                        <li class="g-mb-20">Online Support</li>
                        <li class="g-mb-20">24 hour Support</li>
                      </ul>
                      <a class="btn text-uppercase u-btn-primary g-rounded-50 g-font-size-12 g-font-weight-700 g-pa-15-30 g-mb-10" href="#">Order Now</a>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-4 g-mb-30">
                  <!-- Article -->
                  <article class="text-center g-bg-white g-rounded-15 g-overflow-hidden g-transform-scale-1_05--hover g-transition-0_3">
                    <!-- Article Header -->
                    <header class="g-bg-primary g-pos-rel g-px-20 g-py-50">
                      <svg class="g-pos-abs g-bottom-0 g-left-0 g-right-0" version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="70px" viewBox="0 0 300 70">
                        <path d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729 c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" opacity="0.6" fill="#ffffff"/>
                        <path d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729 c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" opacity="0.6" fill="#ffffff"/>
                        <path d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716 H42.401L43.415,98.342z" opacity="0.7" fill="#ffffff"/>
                        <path d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428 c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" fill="#ffffff"/>
                      </svg>
                      <strong class="d-block g-color-white g-font-size-50 g-line-height-0_7 g-mb-20">
                        <span class="g-valign-top g-font-size-default">$</span>
                        99
                        <span class="g-font-size-default">/ month</span>
                      </strong>
                      <h3 class="h6 text-uppercase g-color-white-opacity-0_7 g-letter-spacing-3 g-mb-20">Business</h3>
                    </header>
                    <!-- End Article Header -->

                    <!-- Article Content -->
                    <div class="g-px-20 g-py-40">
                      <ul class="list-unstyled g-mb-40">
                        <li class="g-mb-20">1TB of space</li>
                        <li class="g-mb-20">Unlimited traffic</li>
                        <li class="g-mb-20">Online Support</li>
                        <li class="g-mb-20">24 hour Support</li>
                      </ul>
                      <a class="btn text-uppercase u-btn-primary g-rounded-50 g-font-size-12 g-font-weight-700 g-pa-15-30 g-mb-10" href="#">Order Now</a>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode6" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Pricing Plan #06 -->

      <!-- Pricing Plan #07 -->
      <section class="g-py-60 g-mb-40">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Pricing Plan
              <span class="g-color-primary g-ml-5">#07</span>
            </h2>
          </div>

          <div id="shortcode7">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-4 g-mb-30">
                  <!-- Article -->
                  <article class="text-center u-block-hover u-block-hover__additional--jump g-brd-around g-bg-gray-light-v5 g-brd-gray-light-v4 g-color-gray-dark-v5">
                    <!-- Article Header -->
                    <header class="g-bg-primary g-color-white-opacity-0_7 g-pa-20">
                      <h3 class="g-color-white g-mb-5">Starter</h3>
                      <em class="g-font-style-normal">Fringilla porttitor</em>
                    </header>
                    <!-- End Article Header -->

                    <!-- Article Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/900x600/img3.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="g-pa-40">
                      <div class="g-mb-10">
                        From <strong class="d-block g-color-primary g-font-size-24 g-mt-5">$350.00</strong>
                      </div>

                      <p class="g-mb-30">Sed feugiat porttitor nunc, non dignissim ipsum vestibulum in.</p>
                      <a class="btn text-uppercase u-btn-primary g-rounded-50 g-font-size-12 g-font-weight-700 g-pa-15-30" href="#">Order Now</a>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-4 g-mb-30">
                  <!-- Article -->
                  <article class="text-center u-block-hover u-block-hover__additional--jump g-brd-around g-bg-gray-light-v5 g-brd-gray-light-v4 g-color-gray-dark-v5">
                    <!-- Article Header -->
                    <header class="g-bg-primary g-color-white-opacity-0_7 g-pa-20">
                      <h3 class="g-color-white g-mb-5">Advanced</h3>
                      <em class="g-font-style-normal">Fringilla porttitor</em>
                    </header>
                    <!-- End Article Header -->

                    <!-- Article Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/900x600/img2.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="g-pa-40">
                      <div class="g-mb-10">
                        From <strong class="d-block g-color-primary g-font-size-24 g-mt-5">$600.00</strong>
                      </div>

                      <p class="g-mb-30">Sed feugiat porttitor nunc, non dignissim ipsum vestibulum in.</p>
                      <a class="btn text-uppercase u-btn-primary g-rounded-50 g-font-size-12 g-font-weight-700 g-pa-15-30" href="#">Order Now</a>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-4 g-mb-30">
                  <!-- Article -->
                  <article class="text-center u-block-hover u-block-hover__additional--jump g-brd-around g-bg-gray-light-v5 g-brd-gray-light-v4 g-color-gray-dark-v5">
                    <!-- Article Header -->
                    <header class="g-bg-primary g-color-white-opacity-0_7 g-pa-20">
                      <h3 class="g-color-white g-mb-5">Professional</h3>
                      <em class="g-font-style-normal">Fringilla porttitor</em>
                    </header>
                    <!-- End Article Header -->

                    <!-- Article Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/900x600/img7.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="g-pa-40">
                      <div class="g-mb-10">
                        From <strong class="d-block g-color-primary g-font-size-24 g-mt-5">$200.00</strong>
                      </div>

                      <p class="g-mb-30">Sed feugiat porttitor nunc, non dignissim ipsum vestibulum in.</p>
                      <a class="btn text-uppercase u-btn-primary g-rounded-50 g-font-size-12 g-font-weight-700 g-pa-15-30" href="#">Order Now</a>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

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

      <!-- Pricing Plan #08 -->
      <section class="g-bg-secondary g-py-60 g-mb-40">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Pricing Plan
              <span class="g-color-primary g-ml-5">#08</span>
            </h2>
          </div>

          <div id="shortcode8">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-4 g-mb-30">
                  <!-- Article -->
                  <article class="text-center g-bg-white g-color-gray-dark-v5 g-brd-bottom g-brd-3 g-brd-white g-brd-primary--hover g-transition-0_3">
                    <!-- Article Header -->
                    <header class="g-bg-primary g-color-white g-pa-40">
                      <!-- Article Title -->
                      <h4 class="h6 text-uppercase g-font-weight-600 g-mb-15">Starter</h4>
                      <!-- End Article Title -->

                      <div class="g-font-size-36 g-line-height-1_2">
                        $9.99 <em class="d-block g-font-style-normal g-font-size-default g-mt-5">per month</em>
                      </div>
                    </header>
                    <!-- End Article Header -->

                    <!-- Article Content -->
                    <div class="g-px-35 g-py-40">
                      <ul class="text-uppercase list-unstyled g-mb-30">
                        <li class="g-mb-20">Etiam mollis iaculis</li>
                        <li class="g-mb-20">Fusce fringilla ipsum</li>
                        <li class="g-mb-20">Sed eget justo est</li>
                        <li class="g-mb-20">Sed pellentesque velit ante</li>
                        <li class="g-mb-20">Fusce fringilla ipsum nec</li>
                        <li class="g-mb-20">Nullam vel turpis</li>
                      </ul>

                      <a class="btn text-uppercase u-btn-primary g-rounded-50 g-font-size-12 g-font-weight-700 g-pa-15-30" href="#">Order Now</a>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-4 g-mb-30">
                  <!-- Article -->
                  <article class="text-center g-bg-white g-color-gray-dark-v5 g-brd-bottom g-brd-3 g-brd-white g-brd-primary--hover g-transition-0_3">
                    <!-- Article Header -->
                    <header class="g-bg-primary g-color-white g-pa-40">
                      <!-- Article Title -->
                      <h4 class="h6 text-uppercase g-font-weight-600 g-mb-15">Professional</h4>
                      <!-- End Article Title -->

                      <div class="g-font-size-36 g-line-height-1_2">
                        $19.99 <em class="d-block g-font-style-normal g-font-size-default g-mt-5">per month</em>
                      </div>
                    </header>
                    <!-- End Article Header -->

                    <!-- Article Content -->
                    <div class="g-px-35 g-py-40">
                      <ul class="text-uppercase list-unstyled g-mb-30">
                        <li class="g-mb-20">Etiam mollis iaculis</li>
                        <li class="g-mb-20">Fusce fringilla ipsum</li>
                        <li class="g-mb-20">Sed eget justo est</li>
                        <li class="g-mb-20">Sed pellentesque velit ante</li>
                        <li class="g-mb-20">Fusce fringilla ipsum nec</li>
                        <li class="g-mb-20">Nullam vel turpis</li>
                      </ul>

                      <a class="btn text-uppercase u-btn-primary g-rounded-50 g-font-size-12 g-font-weight-700 g-pa-15-30" href="#">Order Now</a>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-4 g-mb-30">
                  <!-- Article -->
                  <article class="text-center g-bg-white g-color-gray-dark-v5 g-brd-bottom g-brd-3 g-brd-white g-brd-primary--hover g-transition-0_3">
                    <!-- Article Header -->
                    <header class="g-bg-primary g-color-white g-pa-40">
                      <!-- Article Title -->
                      <h4 class="h6 text-uppercase g-font-weight-600 g-mb-15">Business</h4>
                      <!-- End Article Title -->

                      <div class="g-font-size-36 g-line-height-1_2">
                        $39.99 <em class="d-block g-font-style-normal g-font-size-default g-mt-5">per month</em>
                      </div>
                    </header>
                    <!-- End Article Header -->

                    <!-- Article Content -->
                    <div class="g-px-35 g-py-40">
                      <ul class="text-uppercase list-unstyled g-mb-30">
                        <li class="g-mb-20">Etiam mollis iaculis</li>
                        <li class="g-mb-20">Fusce fringilla ipsum</li>
                        <li class="g-mb-20">Sed eget justo est</li>
                        <li class="g-mb-20">Sed pellentesque velit ante</li>
                        <li class="g-mb-20">Fusce fringilla ipsum nec</li>
                        <li class="g-mb-20">Nullam vel turpis</li>
                      </ul>

                      <a class="btn text-uppercase u-btn-primary g-rounded-50 g-font-size-12 g-font-weight-700 g-pa-15-30" href="#">Order Now</a>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode8" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Pricing Plan #08 -->

      <!-- Pricing Plan #09 -->
      <section class="g-py-60 g-mb-40">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Pricing Plan
              <span class="g-color-primary g-ml-5">#09</span>
            </h2>
          </div>

          <div id="shortcode9">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-4 g-mb-30">
                  <!-- Article -->
                  <article class="h-100 g-pos-rel g-bg-gray-light-v5 g-transform-scale-1_05--hover g-transition-0_3 g-pt-30 g-px-30 g-pb-100">
                    <!-- Article Title -->
                    <h4 class="g-color-black g-font-size-16 g-font-weight-700">Starter</h4>
                    <!-- End Article Title -->

                    <hr class="g-brd-2 g-mt-15 g-mb-7">

                    <strong class="d-block g-color-black g-font-size-32 g-font-weight-700 g-mb-35">
                      <span class="d-inline-block g-font-size-16 g-valign-super">$</span>
                      9.90 </strong>
                    <p class="g-mb-15">Facilisis at tortor vel, blandit tristique enim neque consectetur</p>

                    <hr class="g-brd-2 g-mt-7 g-mb-30">

                    <ul class="list-unstyled g-mb-20">
                      <li class="g-mb-10">
                        <i class="fa fa-check-circle g-color-primary g-mr-5"></i>
                        Support forum
                      </li>
                      <li class="g-mb-10">
                        <i class="fa fa-check-circle g-color-primary g-mr-5"></i>
                        Unlimited traffic
                      </li>
                      <li class="g-mb-10">
                        <i class="fa fa-check-circle g-color-primary g-mr-5"></i>
                        4GB of storage space
                      </li>
                    </ul>

                    <footer class="g-pos-abs g-bottom-0 g-left-0 g-right-0 g-pa-30">
                      <a class="btn w-100 u-btn-outline-primary g-brd-2 g-rounded-50 g-font-weight-700 g-pa-15-30" href="#">Order Now</a>
                    </footer>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-4 g-mb-30">
                  <!-- Article -->
                  <article class="h-100 g-pos-rel g-bg-gray-light-v5 g-transform-scale-1_05--hover g-transition-0_3 g-pt-30 g-px-30 g-pb-100">
                    <!-- Article Title -->
                    <h4 class="g-color-black g-font-size-16 g-font-weight-700">Professional</h4>
                    <!-- End Article Title -->

                    <hr class="g-brd-2 g-mt-15 g-mb-7">

                    <strong class="d-block g-color-black g-font-size-32 g-font-weight-700 g-mb-35">
                      <span class="d-inline-block g-font-size-16 g-valign-super">$</span>
                      19.90 </strong>
                    <p class="g-mb-15">Facilisis at tortor vel, blandit tristique enim neque consectetur</p>

                    <hr class="g-brd-2 g-mt-7 g-mb-30">

                    <ul class="list-unstyled g-mb-20">
                      <li class="g-mb-10">
                        <i class="fa fa-check-circle g-color-primary g-mr-5"></i>
                        Support forum
                      </li>
                      <li class="g-mb-10">
                        <i class="fa fa-check-circle g-color-primary g-mr-5"></i>
                        Unlimited traffic
                      </li>
                      <li class="g-mb-10">
                        <i class="fa fa-check-circle g-color-primary g-mr-5"></i>
                        24GB of storage space
                      </li>
                    </ul>

                    <footer class="g-pos-abs g-bottom-0 g-left-0 g-right-0 g-pa-30">
                      <a class="btn w-100 u-btn-outline-primary g-brd-2 g-rounded-50 g-font-weight-700 g-pa-15-30" href="#">Order Now</a>
                    </footer>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-4 g-mb-30">
                  <!-- Article -->
                  <article class="h-100 g-pos-rel g-bg-gray-light-v5 g-transform-scale-1_05--hover g-transition-0_3 g-pt-30 g-px-30 g-pb-100">
                    <!-- Article Title -->
                    <h4 class="g-color-black g-font-size-16 g-font-weight-700">Business</h4>
                    <!-- End Article Title -->

                    <hr class="g-brd-2 g-mt-15 g-mb-7">

                    <strong class="d-block g-color-black g-font-size-32 g-font-weight-700 g-mb-35">
                      <span class="d-inline-block g-font-size-16 g-valign-super">$</span>
                      29.90 </strong>
                    <p class="g-mb-15">Facilisis at tortor vel, blandit tristique enim neque consectetur</p>

                    <hr class="g-brd-2 g-mt-7 g-mb-30">

                    <ul class="list-unstyled g-mb-20">
                      <li class="g-mb-10">
                        <i class="fa fa-check-circle g-color-primary g-mr-5"></i>
                        Support forum
                      </li>
                      <li class="g-mb-10">
                        <i class="fa fa-check-circle g-color-primary g-mr-5"></i>
                        Unlimited traffic
                      </li>
                      <li class="g-mb-10">
                        <i class="fa fa-check-circle g-color-primary g-mr-5"></i>
                        100GB of storage space
                      </li>
                    </ul>

                    <footer class="g-pos-abs g-bottom-0 g-left-0 g-right-0 g-pa-30">
                      <a class="btn w-100 u-btn-outline-primary g-brd-2 g-rounded-50 g-font-weight-700 g-pa-15-30" href="#">Order Now</a>
                    </footer>
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

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

      <!-- Pricing Plan #10 -->
      <section class="g-bg-secondary g-py-60 g-mb-40">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Pricing Plan
              <span class="g-color-primary g-ml-5">#10</span>
            </h2>
          </div>

          <div id="shortcode10">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Article -->
                  <article class="text-center u-block-hover u-block-hover__additional--jump g-bg-white g-color-gray-dark-v3">
                    <!-- Article Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/400x270/img7.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="g-py-40 g-px-30">
                      <h4 class="text-uppercase g-font-weight-700 g-color-black g-font-size-16 g-mb-15">Starter</h4>
                      <em class="d-block g-color-gray-dark-v5 g-font-style-normal g-mb-25">Ullamcorper ultricies nisi</em>
                      <strong class="d-block g-g-font-weight-600 g-color-black g-font-size-30 g-mb-30">$9.99</strong>
                      <ul class="list-unstyled text-uppercase g-mb-30">
                        <li class="g-mb-9">Curabitur sit amet</li>
                        <li class="g-mb-9">Etiam ac massa sit</li>
                        <li class="g-mb-9">Fusce accumsan faucibus</li>
                        <li class="g-mb-9">Duis tristique bibendum</li>
                        <li class="g-mb-9">Duis vehicula</li>
                        <li class="g-mb-9">Donec fringilla</li>
                      </ul>

                      <a class="btn btn-md u-btn-primary" href="#">Order Now</a>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Article -->
                  <article class="text-center u-block-hover u-block-hover__additional--jump g-bg-white g-color-gray-dark-v3">
                    <!-- Article Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/400x270/img5.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="g-py-40 g-px-30">
                      <h4 class="text-uppercase g-font-weight-700 g-color-black g-font-size-16 g-mb-15">Professional</h4>
                      <em class="d-block g-color-gray-dark-v5 g-font-style-normal g-mb-25">Ullamcorper ultricies nisi</em>
                      <strong class="d-block g-g-font-weight-600 g-color-black g-font-size-30 g-mb-30">$19.99</strong>
                      <ul class="list-unstyled text-uppercase g-mb-30">
                        <li class="g-mb-9">Curabitur sit amet</li>
                        <li class="g-mb-9">Etiam ac massa sit</li>
                        <li class="g-mb-9">Fusce accumsan faucibus</li>
                        <li class="g-mb-9">Duis tristique bibendum</li>
                        <li class="g-mb-9">Duis vehicula</li>
                        <li class="g-mb-9">Donec fringilla</li>
                      </ul>
                      <a class="btn btn-md u-btn-primary" href="#">Order Now</a>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Article -->
                  <article class="text-center u-block-hover u-block-hover__additional--jump g-bg-white g-color-gray-dark-v3">
                    <!-- Article Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/400x270/img6.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="g-py-40 g-px-30">
                      <h4 class="text-uppercase g-font-weight-700 g-color-black g-font-size-16 g-mb-15">Business</h4>
                      <em class="d-block g-color-gray-dark-v5 g-font-style-normal g-mb-25">Ullamcorper ultricies nisi</em>
                      <strong class="d-block g-g-font-weight-600 g-color-black g-font-size-30 g-mb-30">$29.99</strong>
                      <ul class="list-unstyled text-uppercase g-mb-30">
                        <li class="g-mb-9">Curabitur sit amet</li>
                        <li class="g-mb-9">Etiam ac massa sit</li>
                        <li class="g-mb-9">Fusce accumsan faucibus</li>
                        <li class="g-mb-9">Duis tristique bibendum</li>
                        <li class="g-mb-9">Duis vehicula</li>
                        <li class="g-mb-9">Donec fringilla</li>
                      </ul>
                      <a class="btn btn-md u-btn-primary" href="#">Order Now</a>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Article -->
                  <article class="text-center u-block-hover u-block-hover__additional--jump g-bg-white g-color-gray-dark-v3">
                    <!-- Article Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/400x270/img3.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="g-py-40 g-px-30">
                      <h4 class="text-uppercase g-font-weight-700 g-color-black g-font-size-16 g-mb-15">Enterprise</h4>
                      <em class="d-block g-color-gray-dark-v5 g-font-style-normal g-mb-25">Ullamcorper ultricies nisi</em>
                      <strong class="d-block g-g-font-weight-600 g-color-black g-font-size-30 g-mb-30">$39.99</strong>
                      <ul class="list-unstyled text-uppercase g-mb-30">
                        <li class="g-mb-9">Curabitur sit amet</li>
                        <li class="g-mb-9">Etiam ac massa sit</li>
                        <li class="g-mb-9">Fusce accumsan faucibus</li>
                        <li class="g-mb-9">Duis tristique bibendum</li>
                        <li class="g-mb-9">Duis vehicula</li>
                        <li class="g-mb-9">Donec fringilla</li>
                      </ul>
                      <a class="btn btn-md u-btn-primary" href="#">Order Now</a>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode10" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Pricing Plan #10 -->

      <!-- Pricing Plan #11 -->
      <section class="g-py-60 g-mb-40">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Pricing Plan
              <span class="g-color-primary g-ml-5">#11</span>
            </h2>
          </div>

          <div id="shortcode11">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-4 g-mb-30">
                  <!-- Article -->
                  <article class="text-center text-uppercase g-bg-gray-dark-v1 g-color-white-opacity-0_5">
                    <!-- Article Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/400x270/img7.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <header class="g-letter-spacing-3 g-pos-rel g-px-40 g-pb-15">
                      <span class="u-icon-v3 u-icon-size--xl g-rounded-50x g-font-size-26 g-bg-gray-dark-v1 g-color-white g-pull-50x-up">
                        <i class="et-icon-camera"></i>
                      </span>
                      <h4 class="h5 g-color-white g-mt-minus-25 g-mb-10">Starter</h4>
                      <p>Fusce dolor libero, efficitur et lobortis at, faucibus nec nunc.</p>
                    </header>

                    <strong class="d-block g-color-white g-font-size-26 g-letter-spacing-5 g-mb-20">$100.00</strong>
                    <ul class="list-unstyled mb-0 g-letter-spacing-0_5">
                      <li class="g-py-7 g-px-30"><b>10%</b> In hac habitasse platea</li>
                      <li class="g-py-7 g-px-30"><b>10gb</b> Praesent egestas ac arcu</li>
                      <li class="g-py-7 g-px-30"><b>20</b> emails Sed eget aliquet nisl</li>
                      <li class="g-py-7 g-px-30"><b>no</b> Proin laoreet accumsan nisl</li>
                    </ul>

                    <footer class="g-pa-40">
                      <a class="btn btn-md rounded-0 u-btn-outline-white g-brd-2 g-font-size-12 g-font-weight-600 g-letter-spacing-1" href="#">Order Now</a>
                    </footer>
                    <!-- End of Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-4 g-mb-30">
                  <!-- Article -->
                  <article class="text-center text-uppercase g-bg-gray-dark-v1 g-color-white-opacity-0_5">
                    <!-- Article Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/400x270/img5.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <header class="g-letter-spacing-3 g-pos-rel g-px-40 g-pb-15">
                      <span class="u-icon-v3 u-icon-size--xl g-rounded-50x g-font-size-26 g-bg-gray-dark-v1 g-color-white g-pull-50x-up">
                        <i class="et-icon-video"></i>
                      </span>
                      <h4 class="h5 g-color-white g-mt-minus-25 g-mb-10">Advanced</h4>
                      <p>Fusce dolor libero, efficitur et lobortis at, faucibus nec nunc.</p>
                    </header>

                    <strong class="d-block g-color-white g-font-size-26 g-letter-spacing-5 g-mb-20">$150.00</strong>
                    <ul class="list-unstyled mb-0 g-letter-spacing-0_5">
                      <li class="g-py-7 g-px-30"><b>10%</b> In hac habitasse platea</li>
                      <li class="g-py-7 g-px-30"><b>10gb</b> Praesent egestas ac arcu</li>
                      <li class="g-py-7 g-px-30"><b>20</b> emails Sed eget aliquet nisl</li>
                      <li class="g-py-7 g-px-30"><b>no</b> Proin laoreet accumsan nisl</li>
                    </ul>

                    <footer class="g-pa-40">
                      <a class="btn btn-md rounded-0 u-btn-outline-white g-brd-2 g-font-size-12 g-font-weight-600 g-letter-spacing-1" href="#">Order Now</a>
                    </footer>
                    <!-- End of Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-4 g-mb-30">
                  <!-- Article -->
                  <article class="text-center text-uppercase g-bg-gray-dark-v1 g-color-white-opacity-0_5">
                    <!-- Article Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/400x270/img6.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <header class="g-letter-spacing-3 g-pos-rel g-px-40 g-pb-15">
                      <span class="u-icon-v3 u-icon-size--xl g-rounded-50x g-font-size-26 g-bg-gray-dark-v1 g-color-white g-pull-50x-up">
                        <i class="et-icon-pictures"></i>
                      </span>
                      <h4 class="h5 g-color-white g-mt-minus-25 g-mb-10">Professional</h4>
                      <p>Fusce dolor libero, efficitur et lobortis at, faucibus nec nunc.</p>
                    </header>

                    <strong class="d-block g-color-white g-font-size-26 g-letter-spacing-5 g-mb-20">$200.00</strong>
                    <ul class="list-unstyled mb-0 g-letter-spacing-0_5">
                      <li class="g-py-7 g-px-30"><b>10%</b> In hac habitasse platea</li>
                      <li class="g-py-7 g-px-30"><b>10gb</b> Praesent egestas ac arcu</li>
                      <li class="g-py-7 g-px-30"><b>20</b> emails Sed eget aliquet nisl</li>
                      <li class="g-py-7 g-px-30"><b>no</b> Proin laoreet accumsan nisl</li>
                    </ul>

                    <footer class="g-pa-40">
                      <a class="btn btn-md rounded-0 u-btn-outline-white g-brd-2 g-font-size-12 g-font-weight-600 g-letter-spacing-1" href="#">Order Now</a>
                    </footer>
                    <!-- End of Article Content -->
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

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

      <!-- Pricing Plan #12 -->
      <section class="g-bg-secondary g-py-60 g-mb-40">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Pricing Plan
              <span class="g-color-primary g-ml-5">#12</span>
            </h2>
          </div>

          <div id="shortcode12">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-6 g-mb-30">
                  <!-- Article -->
                  <article class="w-100 d-sm-table g-bg-white g-transform-scale-1_05--hover g-transition-0_3">
                    <!-- Article Info -->
                    <div class="d-sm-table-cell text-center text-sm-left g-valign-middle g-brd-right--dashed--sm g-brd-gray-light-v4 g-pa-30">
                      <strong class="g-font-size-36 g-color-primary">$19.99</strong>
                      <em class="d-block g-font-style-normal g-font-weight-300 g-mt-minus-5 g-mb-20">per month</em>
                      <a href="#" class="btn u-btn-outline-primary">Purchase</a>
                    </div>
                    <!-- End Article Info -->

                    <!-- Article Content -->
                    <div class="d-sm-table-cell text-center text-sm-left g-valign-middle g-pa-30">
                      <h4 class="text-uppercase g-color-black g-font-size-default g-font-weight-700">Basic Pass</h4>
                      <p class="mb-0">Sed arcu erat, facilisis at tortor vel, blandit tristique enim. Donec dapibus neque consectetur tellus pretium, eget lacinia velit ullamcorper.</p>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-6 g-mb-30">
                  <!-- Article -->
                  <article class="w-100 d-sm-table g-bg-white g-transform-scale-1_05--hover g-transition-0_3">
                    <!-- Article Info -->
                    <div class="d-sm-table-cell text-center text-sm-left g-valign-middle g-brd-right--dashed--sm g-brd-gray-light-v4 g-pa-30">
                      <strong class="g-font-size-36 g-color-primary">$49.99</strong>
                      <em class="d-block g-font-style-normal g-font-weight-300 g-mt-minus-5 g-mb-20">per month</em>
                      <a href="#" class="btn u-btn-outline-primary">Purchase</a>
                    </div>
                    <!-- End Article Info -->

                    <!-- Article Content -->
                    <div class="d-sm-table-cell text-center text-sm-left g-valign-middle g-pa-30">
                      <h4 class="text-uppercase g-color-black g-font-size-default g-font-weight-700">Advanced Pass</h4>
                      <p class="mb-0">Sed arcu erat, facilisis at tortor vel, blandit tristique enim. Donec dapibus neque consectetur tellus pretium, eget lacinia velit ullamcorper.</p>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

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

      <!-- Pricing Plan #13 -->
      <section class="g-py-60 g-mb-40">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Pricing Plan
              <span class="g-color-primary g-ml-5">#13</span>
            </h2>
          </div>

          <div id="shortcode13">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-4 g-mb-30">
                  <!-- Article -->
                  <article class="text-center g-bg-gray-light-v5 g-rounded-10 g-overflow-hidden g-px-30 g-py-40">
                    <h3 class="h5 text-uppercase g-font-weight-700 g-letter-spacing-3 g-mb-30">Starter</h3>

                    <div class="m-auto g-flex-middle g-width-100 g-height-100 g-rounded-50x g-brd-around g-brd-2 g-brd-primary g-color-primary g-mb-30">
                      <span class="g-font-size-22 g-font-weight-600 g-flex-middle-item">$9.90</span>
                    </div>

                    <ul class="list-unstyled g-mb-40">
                      <li class="g-mb-15">1GB of space</li>
                      <li class="g-mb-15">Unlimited traffic</li>
                      <li class="g-mb-15">Online Support</li>
                      <li class="g-mb-15">24 hour Support</li>
                    </ul>
                    <a class="btn text-uppercase u-btn-primary g-rounded-50 g-font-size-12 g-font-weight-700 g-pa-15-30" href="#">Order Now</a>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-4 g-mb-30">
                  <!-- Article -->
                  <article class="text-center g-bg-gray-light-v5 g-rounded-10 g-overflow-hidden g-px-30 g-py-40">
                    <h3 class="h5 text-uppercase g-font-weight-700 g-letter-spacing-3 g-mb-30">Professional</h3>

                    <div class="m-auto g-flex-middle g-width-100 g-height-100 g-rounded-50x g-brd-around g-brd-2 g-brd-primary g-color-primary g-mb-30">
                      <span class="g-font-size-22 g-font-weight-600 g-flex-middle-item">$19.90</span>
                    </div>

                    <ul class="list-unstyled g-mb-40">
                      <li class="g-mb-15">10GB of space</li>
                      <li class="g-mb-15">Unlimited traffic</li>
                      <li class="g-mb-15">Online Support</li>
                      <li class="g-mb-15">24 hour Support</li>
                    </ul>
                    <a class="btn text-uppercase u-btn-primary g-rounded-50 g-font-size-12 g-font-weight-700 g-pa-15-30" href="#">Order Now</a>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-4 g-mb-30">
                  <!-- Article -->
                  <article class="text-center g-bg-gray-light-v5 g-rounded-10 g-overflow-hidden g-px-30 g-py-40">
                    <h3 class="h5 text-uppercase g-font-weight-700 g-letter-spacing-3 g-mb-30">Business</h3>

                    <div class="m-auto g-flex-middle g-width-100 g-height-100 g-rounded-50x g-brd-around g-brd-2 g-brd-primary g-color-primary g-mb-30">
                      <span class="g-font-size-22 g-font-weight-600 g-flex-middle-item">$29.90</span>
                    </div>

                    <ul class="list-unstyled g-mb-40">
                      <li class="g-mb-15">30GB of space</li>
                      <li class="g-mb-15">Unlimited traffic</li>
                      <li class="g-mb-15">Online Support</li>
                      <li class="g-mb-15">24 hour Support</li>
                    </ul>
                    <a class="btn text-uppercase u-btn-primary g-rounded-50 g-font-size-12 g-font-weight-700 g-pa-15-30" href="#">Order Now</a>
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode13" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Pricing Plan #13 -->

      <!-- Pricing Plan #14 -->
      <section class="g-bg-secondary g-py-60">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Pricing Plan
              <span class="g-color-primary g-ml-5">#14</span>
            </h2>
          </div>

          <div id="shortcode14">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-3 col-md-6 g-mb-30">
                  <!-- Article -->
                  <article class="text-center g-rounded-10 g-bg-white g-brd-around g-brd-gray-light-v4 g-color-gray-dark-v2">
                    <!-- Article Header -->
                    <header class="g-px-15 g-py-20">
                      <h4 class="h5 text-uppercase g-font-weight-600 mb-0">
                        <span class="g-color-primary">Basic</span>
                        Plan
                      </h4>
                    </header>
                    <!-- End Article Header -->

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

                    <ul class="list-unstyled g-min-height-230--md g-pa-30 mb-0">
                      <li class="g-mb-5">Business Support</li>
                      <li class="g-mb-5">24 hour Support</li>
                      <li class="g-mb-5">Personal Consultant</li>
                      <li class="g-mb-5">Online Support</li>
                    </ul>

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

                    <em class="d-block g-font-style-normal g-pa-20">From
                      <span class="g-color-primary">$100</span>
                      per month</em>

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

                    <!-- Article Footer -->
                    <footer class="g-pa-20">
                      <a class="btn btn-md u-btn-primary" href="#">Start Now</a>
                    </footer>
                    <!-- End Article Footer -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-3 col-md-6 g-mb-30">
                  <!-- Article -->
                  <article class="text-center g-rounded-10 g-bg-white g-brd-around g-brd-gray-light-v4 g-color-gray-dark-v2">
                    <!-- Article Header -->
                    <header class="g-px-15 g-py-20">
                      <h4 class="h5 text-uppercase g-font-weight-600 mb-0">
                        <span class="g-color-primary">Bronse</span>
                        Plan
                      </h4>
                    </header>
                    <!-- End Article Header -->

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

                    <ul class="list-unstyled g-min-height-230--md g-pa-30 mb-0">
                      <li class="g-mb-5">Business Support</li>
                      <li class="g-mb-5">24 hour Support</li>
                      <li class="g-mb-5">Personal Consultant</li>
                      <li class="g-mb-5">Online Support</li>
                      <li class="g-mb-5">Basic Features</li>
                    </ul>

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

                    <em class="d-block g-font-style-normal g-pa-20">From
                      <span class="g-color-primary">$200</span>
                      per month</em>

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

                    <!-- Article Footer -->
                    <footer class="g-pa-20">
                      <a class="btn btn-md u-btn-primary" href="#">Start Now</a>
                    </footer>
                    <!-- End Article Footer -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-3 col-md-6 g-mb-30">
                  <!-- Article -->
                  <article class="text-center g-rounded-10 g-bg-white g-brd-around g-brd-gray-light-v4 g-color-gray-dark-v2">
                    <!-- Article Header -->
                    <header class="g-px-15 g-py-20">
                      <h4 class="h5 text-uppercase g-font-weight-600 mb-0">
                        <span class="g-color-primary">Silver</span>
                        Plan
                      </h4>
                    </header>
                    <!-- End Article Header -->

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

                    <ul class="list-unstyled g-min-height-230--md g-pa-30 mb-0">
                      <li class="g-mb-5">Business Support</li>
                      <li class="g-mb-5">24 hour Support</li>
                      <li class="g-mb-5">Personal Consultant</li>
                      <li class="g-mb-5">Online Support</li>
                      <li class="g-mb-5">Premium Features</li>
                    </ul>

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

                    <em class="d-block g-font-style-normal g-pa-20">From
                      <span class="g-color-primary">$300</span>
                      per month</em>

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

                    <!-- Article Footer -->
                    <footer class="g-pa-20">
                      <a class="btn btn-md u-btn-primary" href="#">Start Now</a>
                    </footer>
                    <!-- End Article Footer -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-3 col-md-6 g-mb-30">
                  <!-- Article -->
                  <article class="text-center g-rounded-10 g-bg-white g-brd-around g-brd-gray-light-v4 g-color-gray-dark-v2">
                    <!-- Article Header -->
                    <header class="g-px-15 g-py-20">
                      <h4 class="h5 text-uppercase g-font-weight-600 mb-0">
                        <span class="g-color-primary">Gold</span>
                        Plan
                      </h4>
                    </header>
                    <!-- End Article Header -->

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

                    <ul class="list-unstyled g-min-height-230--md g-pa-30 mb-0">
                      <li class="g-mb-5">Business Support</li>
                      <li class="g-mb-5">24 hour Support</li>
                      <li class="g-mb-5">Personal Consultant</li>
                      <li class="g-mb-5">Online Support</li>
                      <li class="g-mb-5">Premium Features</li>
                      <li class="g-mb-5">Free Education</li>
                    </ul>

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

                    <em class="d-block g-font-style-normal g-pa-20">From
                      <span class="g-color-primary">$400</span>
                      per month</em>

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

                    <!-- Article Footer -->
                    <footer class="g-pa-20">
                      <a class="btn btn-md u-btn-primary" href="#">Start Now</a>
                    </footer>
                    <!-- End Article Footer -->
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode14" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Pricing Plan #14 -->

      <!-- Pricing Plan #15 -->
      <section class="container g-py-60">
        <div class="">
          <div class="text-center g-mb-80">
            <h2 class="h4">Pricing Plan
              <span class="g-color-primary g-ml-5">#15</span>
            </h2>
          </div>

          <div id="shortcode15">
            <div class="shortcode-html">
              <div class="row justify-content-center no-gutters">
                <div class="col-sm-6 col-md-4 col-lg-3 g-hidden-sm-down g-mr-minus-30 g-mb-50">
                  <!-- Pricing -->
                  <div class="u-shadow-v28 g-bg-white rounded g-px-30 g-pt-40 g-pb-40">
                    <ul class="list-unstyled g-color-gray-dark-v4 mb-0">
                      <li class="g-brd-bottom g-brd-gray-light-v4 g-color-black g-font-weight-600 g-py-15">
                        License type
                      </li>
                      <li class="g-brd-bottom g-brd-gray-light-v4 g-color-black g-font-weight-600 g-py-15">
                        Price
                      </li>
                      <li class="g-brd-bottom g-brd-gray-light-v4 g-py-15">
                        400+ pages
                      </li>
                      <li class="g-brd-bottom g-brd-gray-light-v4 g-py-15">
                        1610+ elements
                      </li>
                      <li class="g-brd-bottom g-brd-gray-light-v4 g-py-15">
                        24/7 support
                      </li>
                      <li class="g-py-15">
                        Unlimited domain or user
                      </li>
                    </ul>
                  </div>
                  <!-- End Pricing -->
                </div>

                <div class="col-sm-6 col-md-4 col-lg-3 g-mb-50">
                  <!-- Pricing -->
                  <div class="u-shadow-v29 g-bg-primary text-left text-md-center rounded g-pos-rel g-z-index-1 g-mt-minus-30 g-px-30 g-py-60">
                    <h2 class="h5 g-color-white-opacity-0_9 g-font-weight-400 mb-2">Multiple
                      <span class="g-hidden-md-up">License</span>
                    </h2>
                    <div class="d-block g-mb-23">
                      <span class="align-top g-color-white">$</span>
                      <span class="g-color-white g-font-weight-700 g-font-size-40">125.</span>
                      <span class="g-color-white">00</span>
                    </div>

                    <ul class="list-unstyled g-color-main mb-0">
                      <li class="d-flex d-md-block justify-content-between justify-content-start g-brd-bottom g-brd-white-opacity-0_1 g-py-15">
                        <span class="g-hidden-md-up mr-3">24/7 support</span>
                        <svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                          <path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#fff"/>
                        </svg>
                      </li>
                      <li class="d-flex d-md-block justify-content-between justify-content-start g-brd-bottom g-brd-white-opacity-0_1 g-py-15">
                        <span class="g-hidden-md-up mr-3">1610+ elements</span>
                        <svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                          <path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#fff"/>
                        </svg>
                      </li>
                      <li class="d-flex d-md-block justify-content-between justify-content-start g-brd-bottom g-brd-white-opacity-0_1 g-py-15">
                        <span class="g-hidden-md-up mr-3">400+ pages</span>
                        <svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                          <path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#fff"/>
                        </svg>
                      </li>
                      <li class="d-flex d-md-block justify-content-between justify-content-start g-py-15">
                        <span class="g-hidden-md-up mr-3">Unlimited domain or user</span>
                        <svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                          <path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#fff"/>
                        </svg>
                      </li>
                    </ul>
                  </div>
                  <!-- End Pricing -->
                </div>

                <div class="col-sm-6 col-md-4 col-lg-3 g-ml-minus-30--md g-mb-50">
                  <!-- Pricing -->
                  <div class="u-shadow-v28 g-bg-white text-left text-md-center rounded g-px-30 g-py-40">
                    <h2 class="h5 g-color-gray-dark-v4 g-font-weight-400 mb-2">Single
                      <span class="g-hidden-md-up">License</span>
                    </h2>
                    <div class="d-block mb-3">
                      <span class="align-top g-color-black">$</span>
                      <span class="g-color-black g-font-weight-700 g-font-size-40">25.</span>
                      <span class="g-color-black">00</span>
                    </div>

                    <ul class="list-unstyled mb-0">
                      <li class="d-flex d-md-block justify-content-between justify-content-start g-brd-bottom g-brd-gray-light-v4 g-py-15">
                        <span class="g-hidden-md-up g-color-gray-dark-v4 mr-3">24/7 support</span>
                        <svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                          <path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#72c02c"/>
                        </svg>
                      </li>
                      <li class="d-flex d-md-block justify-content-between justify-content-start g-brd-bottom g-brd-gray-light-v4 g-py-15">
                        <span class="g-hidden-md-up g-color-gray-dark-v4 mr-3">1610+ elements</span>
                        <svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                          <path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#72c02c"/>
                        </svg>
                      </li>
                      <li class="d-flex d-md-block justify-content-between justify-content-start g-brd-bottom g-brd-gray-light-v4 g-py-15">
                        <span class="g-hidden-md-up g-color-gray-dark-v4 mr-3">400+ pages</span>
                        <svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                          <path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#72c02c"/>
                        </svg>
                      </li>
                      <li class="d-flex d-md-block justify-content-between justify-content-start g-py-15">
                        <span class="g-hidden-md-up g-color-gray-dark-v4 mr-3">Unlimited domain or user</span>
                        <svg width="14" height="14" id="close" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
                          <path d="M4 8 L8 4 L16 12 L24 4 L28 8 L20 16 L28 24 L24 28 L16 20 L8 28 L4 24 L12 16 z" fill="#bbb"/>
                        </svg>
                      </li>
                    </ul>
                  </div>
                  <!-- End Pricing -->
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode15" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Pricing Plan #15 -->
    </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>
