{% if page.hero_section.i_hero_bg %}
  {% capture i_bg_image %}{% picture pagebg-url pages/{{ page.hero_section.i_hero_bg }} %}{% endcapture %}
  {% assign i_bg_src = i_bg_image | split: 'src="' | last | split: '"' | first %}
{% endif %}

<section class="home_hero features_hero {{page.hero_section.p_hero_class}}" {% if i_bg_src != blank %}style="background-image: url('{{ i_bg_src }}'); background-size: cover; background-position: center; background-repeat: no-repeat;"{% endif %}>
  <div class="custom_container_fluid">
    <div class="common_container">
      {% if page.hero_section.t_feature %}
        <div class="hero_top_badge">{{ page.hero_section.t_feature }}</div>
      {% endif %}

      <div class="col-12">
        <div class="row m-0">
          <div class="hero_description">
            {% if page.hero_section.i_star_1 %}
              {% picture article_top pages/{{page.hero_section.i_star_1}} alt="star" class="img-fluid shine_star_left_top" %}
            {% endif %}
            {% if page.hero_section.i_star_2 %}
              {% picture article_top pages/{{page.hero_section.i_star_2}} alt="star" class="img-fluid shine_star_right_top" %}
            {% endif %}

            <h1>{{ page.hero_section.t_headline }}</h1>

            {% if page.hero_section.i_star_3 %}
              {% picture article_top pages/{{page.hero_section.i_star_3}} alt="star" class="img-fluid shine_star_left_bottom" %}
            {% endif %}
            {% if page.hero_section.i_star_4 %}
              {% picture article_top pages/{{page.hero_section.i_star_4}} alt="star" class="img-fluid shine_star_right_bottom" %}
            {% endif %}
            <h2 class="d-none">&nbsp;</h2>
            <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">
                <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>