{% if whatsapp_phone|default %}
<div class="fixed z-[150] left-4 bottom-10 sm:left-8 sm:bottom-0">
<a id="whatsapp" href="{{ path('whatsapp_link', {'link': app.request.pathInfo}) }}"
target="_blank"
rel="nofollow"
class="bg-[#25d366] text-white rounded-full shadow-xl size-16 flex items-center justify-center">
<svg class="w-9 h-auto" viewBox="0 0 24 24">
<path fill="#fff"
d="M3.516 3.516c4.686-4.686 12.284-4.686 16.97 0 4.686 4.686 4.686 12.283 0 16.97a12.004 12.004 0 01-13.754 2.299l-5.814.735a.392.392 0 01-.438-.44l.748-5.788A12.002 12.002 0 013.517 3.517zm3.61 17.043l.3.158a9.846 9.846 0 0011.534-1.758c3.843-3.843 3.843-10.074 0-13.918-3.843-3.843-10.075-3.843-13.918 0a9.846 9.846 0 00-1.747 11.554l.16.303-.51 3.942a.196.196 0 00.219.22l3.961-.501zm6.534-7.003l-.933 1.164a9.843 9.843 0 01-3.497-3.495l1.166-.933a.792.792 0 00.23-.94L9.561 6.96a.793.793 0 00-.924-.445 1291.6 1291.6 0 00-2.023.524.797.797 0 00-.588.88 11.754 11.754 0 0010.005 10.005.797.797 0 00.88-.587l.525-2.023a.793.793 0 00-.445-.923L14.6 13.327a.792.792 0 00-.94.23z"></path>
</svg>
</a>
</div>
{% endif %}
<footer id="colophon" class="flex flex-col bg-gray-200">
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-[28%_10%_25%_37%] gap-y-8 xl:gap-y-12 sm:gap-x-8 xl:gap-x-0 max-w-screen-2xl mx-auto px-5 lg:px-20 py-8 xl:py-16 w-full [&_li]:m-0">
{% if is_active_sidebar( 'footer-1' ) %}
<section id="footer-1" class="col-start-1 col-end-2 xl:row-start-1 xl:row-end-2">
{{ dynamic_sidebar('footer-1') }}
</section>
{% endif %}
{% if is_active_sidebar( 'footer-2' ) %}
<section id="footer-2"
class="col-start-1 col-end-2 lg:col-start-1 lg:col-end-3 xl:col-start-2 xl:col-end-5 xl:row-start-1 xl:row-end-2">
{{ dynamic_sidebar('footer-2') }}
</section>
{% endif %}
{% if is_active_sidebar( 'footer-3' ) %}
<section id="footer-3" class="col-start-1 col-end-2 xl:row-start-2 xl:row-end-3">
{{ dynamic_sidebar('footer-3') }}
</section>
{% endif %}
{% if is_active_sidebar( 'footer-4' ) %}
<section id="footer-4"
class="col-start-1 col-end-2 sm:col-start-2 sm:col-end-3 sm:row-start-3 sm:row-end-4 xl:row-start-2 xl:row-end-3 text-sm uppercase">
{{ dynamic_sidebar('footer-4') }}
</section>
{% endif %}
{% if is_active_sidebar( 'footer-5' ) %}
<section id="footer-5"
class="col-start-1 col-end-2 xl:col-start-3 xl:col-end-4 xl:row-start-2 xl:row-end-3 text-sm uppercase">
{{ dynamic_sidebar('footer-5') }}
</section>
{% endif %}
{% if is_active_sidebar( 'footer-6' ) %}
<section id="footer-6"
class="col-start-1 col-end-2 sm:col-start-1 sm:col-end-4 sm:row-start-4 sm:row-end-5 xl:col-start-4 xl:col-end-5 xl:row-start-2 xl:row-end-3 text-sm uppercase">
{{ dynamic_sidebar('footer-6') }}
</section>
{% endif %}
</div>
<div class="uppercase text-xs bg-white">
<div class="max-w-screen-2xl mx-auto px-5 lg:px-20 py-4 w-full flex flex-col sm:flex-row flex-wrap justify-between items-start xl:items-center gap-4 xl:gap-0 [&_li]:!list-none [&_li]:!m-0">
{% if is_active_sidebar( 'footer-7' ) %}
<section id="footer-7">
{{ dynamic_sidebar('footer-7') }}
</section>
{% endif %}
<span>© {{ "now"|date('Y') }} {{ bloginfo.name }}</span>
</div>
</div>
</footer>