{% if page.hero.i_bg_image %}
{% assign main_hero_bg = '' %}
  {% capture main_hero_bg %}{% picture open_graph_2000 pages/{{ page.hero.i_bg_image}} %}{% endcapture %}
  {% endif %}

<section class="pricing_hero_section"  style="background-image: url('{{ site.baseurl }}{{ main_hero_bg }}')">
  <div class="custom_container_fluid">
    <div class="accounting_common_container">
      <div class="pricing_hero_heading">
        <h1>{{page.hero.t_headline}}</h1>
        <p>{{page.hero.t_subheadline}}</p>
      </div>
      <div class="col-lg-12">
        <div class="row m-0">
          {% for items in page.hero.pricing_options %}
          <div class="col-md-4 {{items.p_card_class}}">
            <div class="pricing_content_common">
              {% if items.t_popular %}
                <div class="popular_badge">{{items.t_popular}}</div>
              {% endif %}
              <div class="pricing_description">
                <h2>{{items.t_headline}}</h2>
                <h3 >{{items.t_price}}</h3>
                <p>{{items.t_subheadline}}</p>
                <div class="pricing_btn_wrapper">
                   <a href="{{items.p_contact_url}}" class="common_pricing_btn">{{items.t_contact_btn}}</a>
                </div>
              </div>
              <div class="pricing_features">
                <ul>
                  {% for feature in items.pricing_features %}
                   <li>
                    <span>
                      {% if feature.i_icon %}
                        {% assign image_alt =  feature.i_icon | remove: '.webp' | remove: '.png' | replace: '-',' ' | replace: '_',' ' %}
                        {% picture logo_100 pages/{{ feature.i_icon }} alt="{{ image_alt }}"%}
                      {% endif %}
                    </span>
                    <p>{{ feature.t_headline }}</p>
                  </li>
                  {% endfor %}
                </ul>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>