{% if page.hero_section.i_hero_bg %}
{% assign main_hero_bg = '' %}
  {% capture main_hero_bg %}{% picture open_graph_2000 pages/{{ page.hero_section.i_hero_bg}} %}{% endcapture %}
  {% endif %}
<section class="home_hero" style="background-image: url('{{ site.baseurl }}{{ main_hero_bg }}')">
  <div class="custom_container_fluid">
    <div class="accounting_common_container">
      {% if page.hero_section.t_feature %}
        <div class="hero_top_badge">
          {{ page.hero_section.t_feature }}
        </div>
      {% endif %}
      <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
        <div class="row m-0">
          <div class="hero_description">
            <h1>{{ page.hero_section.t_headline }}</h1>
            <p>{{ page.hero_section.t_subheadline }} {% if page.hero_section.p_chat_btn_url %}<a href="{{page.hero_section.p_chat_btn_url}}">{{page.hero_section.t_chat_btn}}</a>{% endif %}</p>
            {% if page.hero_section.p_search %}
            <div class="faq_search">
              <input type="text" id="faqSearchInput" placeholder="{{ page.hero_section.p_search }}..." />
              <button class="faq_search_btn" aria-label="Search">
                <?xml version="1.0" encoding="utf-8"?>
                <svg width="32px" height="32px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16.6725 16.6412L21 21M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </button>
            </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>
</section>