{% embed "overall_header.html" %}
	{% block header_content %}
		<h1 class="text-slate-50 md:text-2xl text-xl">{{ lang('ABOUTUS') }}</h1>
	{% endblock %}
{% endembed %}

<div class="card aboutus my-4">
	<div class="flex items-center justify-between card-title">
		<h2 class="about-title">{{ lang('ABOUTUS') }}</h2>
		{% if zeina.collapse_panel %}
		<div class="collapse-panel zn-collapse-toggle open leading-[0] py-0.5 px-1 hover:cursor-pointer" data-zn-collapse="#zn-about-collapse">
			<div class="zn-collapse-open:[transform:rotate(180deg)] transition-all duration-300"><i class="iconify" data-mode="style" data-icon="ri:arrow-down-s-line" data-width="18" data-height="18" aria-hidden="true"></i></div>
		</div>
		{% endif %}
	</div>
	<div id="zn-about-collapse" class="zn-collapse w-full overflow-hidden" aria-labelledby="zn-about-collapse">
		<div class="p-4 text-sm">
      <div class="content">
  		{{ ABOUTUS_OUTPUT }}
  		</div>
  		{% if TERMS_OF_USE or PRIVACY %}
  			{% if TERMS_OF_USE and PRIVACY %}
  				<h2 class="mt-5 mb-2 pb-2 border-b">{{ lang('TERMS_USE') }} {{ lang('ABOUTUS_AND') }} {{ lang('PRIVACY') }}</h2>
  				<p>{{ lang('DESCRIPTION_PRIVACY_TERMS_OF_USE') }} <a href="{{ U_TERMS_USE }}">{{ lang('TERMS_USE') }}</a> {{ lang('ABOUTUS_AND') }} <a href="{{ U_PRIVACY }}">{{ lang('PRIVACY') }}</a></p>
  			{% elseif PRIVACY %}
  				<h2 class="mt-5 mb-2 pb-2 border-b">{{ lang('PRIVACY') }}</h2>
  				<p>{{ lang('DESCRIPTION_PRIVACY') }} <a href="{{ U_PRIVACY }}">{{ lang('PRIVACY') }}</a></p>
  			{% elseif TERMS_OF_USE %}
  				<h2 class="mt-5 mb-2 pb-2 border-b">{{ lang('TERMS_USE') }}</h2>
  				<p>{{ lang('DESCRIPTION_TERMS_OF_USE') }} <a href="{{ U_TERMS_USE }}">{{ lang('TERMS_USE') }}</a></p>
  			{% endif %}
  		{% endif %}
    </div>
  </div>
</div>

{% include 'overall_footer.html' %}