<div class="text-center pt-9" id="pricing-dynamic-deck" data-pricing-dynamic data-value-active="yearly">
  <div class="mb-13 d-inline-flex position-relative" id="pricing-dynamic-deck--head">
    <span class="period month gr-text-8 gr-text-color ">Monthly</span>
    <a href="javascript:" class="btn-toggle active mx-3 price-deck-trigger" data-pricing-trigger data-target="#pricing-dynamic-deck"><span class="round"></span></a>
    <span class="period year gr-text-8 gr-text-color">Yearly</span>
    <span class="badge gr-badge text-primary gr-text-12 gr-bg-blue-opacity-1 rounded-pill ml-5 text-uppercase">Save 25%</span>
  </div>
  <div class="row justify-content-center">
    <div class="col-lg-4 col-md-6 col-sm-8 mb-9">
      <!-- .pricing card -->
      <div class="pricing-card bg-white gr-hover-shadow-1 border text-left pt-9 pb-9 pr-9 pr-xl-13  pl-9 pl-xl-13 bg-white rounded-10">
        <div class="price-content">
          <span class="small-title gr-text-12 text-primary font-weight-bold text-uppercase">Starter</span>
          <div class="d-flex align-items-end mt-11 ">
            <span class="currency mr-2 gr-text-6 font-weight-bold line-spacing-none text-blackish-blue">$</span>
            <h2 class="price-value gr-text-2 font-weight-bold line-spacing-none mb-0 dynamic-value text-blackish-blue" data-active="19" data-monthly="49" data-yearly="19">
              <span class="d-none">.</span>
            </h2>
            <span class="per gr-text-9 text-blackish-blue">/month</span>
          </div>
          <span class="price-bottom-text dynamic-value gr-text-11 mt-5 text-blackish-blue gr-opacity-7 d-inline-flex" data-active="billed yearly" data-monthly="billed monthly" data-yearly="billed yearly"></span>
          <ul class="card-list list-style-check pl-0 mt-7 mt-lg-11">
            <li class="gr-text-9"><i class="icon icon-check-simple"></i>Commercial License</li>
            <li class="gr-text-9"><i class="icon icon-check-simple"></i>100+ HTML UI Elements</li>
            <li class="gr-text-9"><i class="icon icon-check-simple"></i>Unlimited Domain Support</li>
            <li class="disabled gr-text-9"><i class="icon icon-simple-remove"></i>6 months premium support</li>
            <li class="disabled gr-text-9"><i class="icon icon-simple-remove"></i>Lifetime updates</li>
          </ul>
        </div>
        <a href="" class="btn btn-primary with-icon gr-hover-y">Start Free Trial<i class="icon icon-tail-right font-weight-bold"></i></a>
        <span class="btn-bottom-text d-block gr-text-11 text-blackish-blue gr-opacity-7 mt-5">No credit card required</span>
      </div>
      <!-- /.pricing carde Ends-->
    </div>
    <div class="col-lg-4 col-md-6 col-sm-8 mb-9">
      <!-- .pricing card -->
      <div class="pricing-card bg-white gr-hover-shadow-1 border text-left pt-9 pb-9 pr-9 pr-xl-13  pl-9 pl-xl-13 bg-white rounded-10">
        <div class="price-content">
          <span class="small-title gr-text-12 text-primary font-weight-bold text-uppercase">Standard</span>
          <div class="d-flex align-items-end mt-11 ">
            <span class="currency mr-2 gr-text-6 font-weight-bold line-spacing-none text-blackish-blue">$</span>
            <h2 class="price-value gr-text-2 font-weight-bold line-spacing-none mb-0 dynamic-value text-blackish-blue" data-active="49" data-monthly="99" data-yearly="49">
              <span class="d-none">.</span>
            </h2>
            <span class="per gr-text-9 text-blackish-blue">/month</span>
          </div>
          <span class="price-bottom-text dynamic-value gr-text-11 mt-5 text-blackish-blue gr-opacity-7 d-inline-flex" data-active="billed yearly" data-monthly="billed monthly" data-yearly="billed yearly"></span>
          <ul class="card-list list-style-check pl-0 mt-7 mt-lg-11">
            <li class="gr-text-9"><i class="icon icon-check-simple"></i>Commercial License</li>
            <li class="gr-text-9"><i class="icon icon-check-simple"></i>100+ HTML UI Elements</li>
            <li class="gr-text-9"><i class="icon icon-check-simple"></i>Unlimited Domain Support</li>
            <li class="gr-text-9"><i class="icon icon-check-simple"></i>6 months premium support</li>
            <li class="disabled gr-text-9"><i class="icon icon-simple-remove"></i>Lifetime updates</li>
          </ul>
        </div>
        <a href="" class="btn btn-primary with-icon gr-hover-y">Start Free Trial<i class="icon icon-tail-right font-weight-bold"></i></a>
        <span class="btn-bottom-text d-block gr-text-11 text-blackish-blue gr-opacity-7 mt-5">No credit card required</span>
      </div>
      <!-- /.pricing carde Ends-->
    </div>
    <div class="col-lg-4 col-md-6 col-sm-8 mb-9">
      <!-- .pricing card -->
      <div class="pricing-card bg-white gr-hover-shadow-1 border text-left pt-9 pb-9 pr-9 pr-xl-13  pl-9 pl-xl-13 bg-white rounded-10">
        <div class="price-content">
          <span class="small-title gr-text-12 text-primary font-weight-bold text-uppercase">Premium</span>
          <div class="d-flex align-items-end mt-11">
            <span class="currency mr-2 gr-text-6 font-weight-bold line-spacing-none text-blackish-blue">$</span>
            <h2 class="price-value gr-text-2 font-weight-bold line-spacing-none mb-0 dynamic-value text-blackish-blue" data-active="99" data-monthly="129" data-yearly="99">
              <span class="d-none">.</span>
            </h2>
            <span class="per gr-text-9 text-blackish-blue">/month</span>
          </div>
          <span class="price-bottom-text dynamic-value gr-text-11 mt-5 text-blackish-blue gr-opacity-7 d-inline-flex" data-active="billed yearly" data-monthly="billed monthly" data-yearly="billed yearly"></span>
          <ul class="card-list list-style-check pl-0 mt-7 mt-lg-11">
            <li class="gr-text-9"><i class="icon icon-check-simple"></i>Commercial License</li>
            <li class="gr-text-9"><i class="icon icon-check-simple"></i>100+ HTML UI Elements</li>
            <li class="gr-text-9"><i class="icon icon-check-simple"></i>Unlimited Domain Support</li>
            <li class="gr-text-9"><i class="icon icon-check-simple"></i>6 months premium support</li>
            <li class="gr-text-9"><i class="icon icon-check-simple"></i>Lifetime updates</li>
          </ul>
        </div>
        <a href="" class="btn btn-primary with-icon gr-hover-y">Start Free Trial<i class="icon icon-tail-right font-weight-bold"></i></a>
        <span class="btn-bottom-text d-block gr-text-11 text-blackish-blue gr-opacity-7 mt-5">No credit card required</span>
      </div>
      <!-- /.pricing carde Ends-->
    </div>
  </div>
  </div>