{% extends 'frontNEW.html.twig' %}
{% block title %} {{ 'box_statistic'|trans }} {% endblock %}
{% block stytesheets %}
    {{ parent() }}
{% endblock %}

{% block css %}
    <style>
        .section-title .bloc_01::before {
            position: unset !important;
        }
        .section-title .separator::before {
            width: 100% !important;
        }
    </style>
{% endblock %}
{% block body %}
        <div class="page-title-area item-bg7 jarallax" data-jarallax='{"speed": 0.3}'>
            <div class="container">
                <div class="page-title-content text-center">
                    <h2>{{ 'box_statistic'|trans }}</h2>
                </div>
            </div>
        </div>
    <!-- offices section start -->
    <section class="team-area ptb-100 pb-70">
        <div class="container">
            <div class="section-title" style="max-width: 710px;">
                <h2 class="bloc_01" style="text-transform: uppercase;">{{ 'statistic_title_1'|trans }}</h2>
            </div>
            <div class="row">
                <div class="col-lg-3 col-sm-3 col-md-3">
                    <h5 style="{% if app.request.locale == 'en' %}height: 160px;{% else %}height: 130px;{% endif %}">{{ 'stat_01'|trans }}</h5>
                    <br>
                    <p style="text-align: center;">
                        <img src="{{ asset('assetsfront/img/statistic/stat_01.jpg') }}" style="max-width: 75%;height: 190px;">
                    </p>
                    <br>
                    <p>
                        <i>
                            {{ 'info_stat_01'|trans }}
                        </i>
                    </p>
                </div>
                <div class="col-lg-3 col-sm-3 col-md-3">
                    <h5 style="{% if app.request.locale == 'en' %}height: 160px;{% else %}height: 130px;{% endif %}">{{ 'stat_02'|trans }}</h5>
                    <br>
                    <p style="text-align: center;">
                        <img src="{{ asset('assetsfront/img/statistic/stat_02.jpg') }}" style="max-width: 75%;height: 190px;">
                    </p>
                    <br>
                    <p>
                        <i>
                            {{ 'info_stat_02'|trans }}
                        </i>
                    </p>
                </div>
                <div class="col-lg-3 col-sm-3 col-md-3">
                    <h5 style="{% if app.request.locale == 'en' %}height: 160px;{% else %}height: 130px;{% endif %}">{{ 'stat_03'|trans }}</h5>
                    <br>
                    <p style="text-align: center;">
                        <img src="{{ asset('assetsfront/img/statistic/stat_03.jpg') }}" style="max-width: 75%;height: 190px;">
                    </p>
                    <br>
                    <p>
                        <i>
                            {{ 'info_stat_03'|trans }}
                        </i>
                    </p>
                </div>
                <div class="col-lg-3 col-sm-3 col-md-3">
                    <h5 style="{% if app.request.locale == 'en' %}height: 160px;{% else %}height: 130px;{% endif %}">{{ 'stat_04'|trans }}</h5>
                    <br>
                    <p style="text-align: center;">
                        <img src="{{ asset('assetsfront/img/statistic/stat_04.jpg') }}" style="max-width: 75%;height: 190px;">
                    </p>
                    <br>
                    <p>
                        <i>
                            {{ 'info_stat_04'|trans }}
                        </i>
                    </p>
                </div>
            </div>
            <br>
            <div class="section-title" style="max-width: 100%;">
                <h2 class="separator"></h2>
            </div>

            <div class="section-title" style="max-width: 880px;">
                <h2 class="bloc_01" style="text-transform: uppercase;">{{ 'statistic_title_2'|trans }}</h2>
            </div>

            <div class="row">
                <div class="col-lg-4 col-sm-4 col-md-4">
                    <h5 style="height: 70px;">{{ 'stat_05'|trans }}</h5>
                    <br>
                    <p style="text-align: center;">
                        <img src="{{ asset('assetsfront/img/statistic/stat_05.jpg') }}" style="max-width: 75%;height: 190px;">
                    </p>
                </div>
                <div class="col-lg-4 col-sm-4 col-md-4">
                    <h5 style="height: 70px;">{{ 'stat_06'|trans }}</h5>
                    <br>
                    <p style="text-align: center;">
                        <img {% if app.request.locale == 'en' %}src="{{ asset('assetsfront/img/statistic/stat_09.jpg') }}" style="max-width: 100%;height: 135px;" {% else %}src="{{ asset('assetsfront/img/statistic/stat_06.jpg') }}" style="max-width: 75%;height: 190px;"{% endif %}>
                    </p>
                    <br>
                    <h5 style="height: 40px; ">{{ 'stat_07'|trans }}</h5>
                    <p style="text-align: center;">
                        <img {% if app.request.locale == 'en' %}src="{{ asset('assetsfront/img/statistic/stat_10.jpg') }}" style="max-width: 100%;height: 135px;" {% else %}src="{{ asset('assetsfront/img/statistic/stat_07.jpg') }}" style="max-width: 75%;height: 190px;"{% endif %}>
                    </p>
                </div>
                <div class="col-lg-4 col-sm-4 col-md-4">
                    <h5 style="height: 70px;">{{ 'stat_08'|trans }}</h5>
                    <br>
                    <p style="text-align: center;">
                        <img src="{{ asset('assetsfront/img/statistic/stat_08.jpg') }}" style="max-width: 75%;height: 430px;">
                    </p>
                    <br>
                    <p style="{% if app.request.locale == 'ar' %}float: left;{% else %}float: right;{% endif %}">
                        <i>
                            RNE 2013
                        </i>
                    </p>
                </div>
            </div>

        </div>
    </section>
    <!-- offices section end -->
{% endblock %}
{% block javascripts %}
    {{ parent() }}

{% endblock %}