<!--==============================
Hero Area
==============================-->
<section class=" ">
<div class="hero-layout3 vs-carousel" data-fade="true" data-arrows="true" data-prev-arrow="far fa-arrow-up"
data-next-arrow="far fa-arrow-down">
{% for header in headers %}
{% if header.lang == 'fr_fr' and '/fr/' in app.request.uri %}
<div>
<div class="hero-inner">
<div class="hero-bg" data-bg-src="{{ asset('content/media/' ~ header.thumb) }}"></div>
<div class="container">
<div class="hero-content">
<span class="hero-subtitle animated">{{header.title}}</span>
{# <h1 class="hero-title animated">Business Solution </h1>#}
<div class="hero-btns animated">
<a href="#" class="vs-btn style2">{{ header.buttonText }}</a>
</div>
</div>
</div>
</div>
</div>
{% elseif header.lang == 'en_en' and '/en/' in app.request.uri %}
<div>
<div class="hero-inner">
<div class="hero-bg" data-bg-src="{{ asset('content/media/' ~ header.thumb) }}"></div>
<div class="container">
<div class="hero-content">
<span class="hero-subtitle animated">{{header.title}}</span>
{# <h1 class="hero-title animated">Business Solution </h1>#}
<div class="hero-btns animated">
<a href="#" class="vs-btn style2">{{ header.buttonText }}</a>
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</section>
<!--==============================
Info Section
==============================-->
<div class="container">
<div class="info-ruler wow fadeInUp" data-wow-delay="0.3s">
<ul>
<li><img src="{{ asset('assets/img/icon/message.png') }}" alt="icon"><a href="mailto:info@example.com">info@example.com</a>
</li>
<li><img src="{{ asset('assets/img/icon/phone-1-4.png') }}" alt="icon"><a href="tel:+89012562156">+89(0) 1256 2156</a></li>
</ul>
</div>
</div>