{% assign hero_data = page.hero %}

<section class="hero_main_wrapper">
<div class="hero_grid_animation"></div>


  <div class="custom_container_fluid">
    <div class="common_container">

      <div class="hero_content_area">
        <h1 class="hero_title anim_title">{{ hero_data.t_headline }}</h1>
        <p class="hero_subtitle fade_up_item">{{ hero_data.t_subheadline }}</p>

        <div class="hero_btn_group fade_up_item">
          {% for btn in hero_data.hero_btns %}
            <a href="{{ btn.p_btn_url }}" class="btn_hero {% if forloop.first %}btn_dark{% else %}btn_light{% endif %}">
              {{ btn.t_btn_text }}
            </a>
          {% endfor %}
        </div>
      </div>

      <div class="hero_media_showcase">
        <div class="glass_outer_div lg-demo-target">
<div class="hard_white_div">
  {% if page.hero.video_section %}
    <video autoplay muted loop playsinline preload="auto" poster="{{ site.url }}/assets/videos/{{ page.hero.video_section.i_thumbnail }}">
      <source src="{{ site.url }}/assets/videos/{{ page.hero.video_section.i_main_video }}" type="video/mp4"/>
    </video>
  {% endif %}
</div>
        </div>

        <div class="float_element float_left parallax_layer" data-speed="0.04">
          {% if hero_data.video_section.i_left_bottom and hero_data.video_section.i_left_bottom != empty %}
            {% capture left_img %}pages/{{ hero_data.video_section.i_left_bottom }}{% endcapture %}
            {% picture preset_float {{ left_img }} alt="Food Cost Analytics" %}
          {% endif %}
        </div>

        <div class="float_element float_right parallax_layer" data-speed="-0.03">
          {% if hero_data.video_section.i_top_right and hero_data.video_section.i_top_right != empty %}
            {% capture right_img %}pages/{{ hero_data.video_section.i_top_right }}{% endcapture %}
            {% picture preset_float {{ right_img }} alt="AI Recommendations" %}
          {% endif %}
        </div>
      </div>

    </div>
  </div>
</section>