{% set bodyClass = 'main-np' %}
{% extends 'layout.twig' %}
{% block content %}


    <section class="hero">
        <div class="cont">
            <div class="hero_block">
                <h1 class="hero_title">{{title}}</h1>
                <a href="#about" class="home_link main_link scroll_link">{{ function('pll_e', 'Узнать больше') }}</a>
            </div>
        </div>
        <img class="hero_image" src="{{ theme.link }}/static/img/hero_image_desctop.png" alt="hero image">
        <img class="hero_image_mobile" src="{{ theme.link }}/static/img/hero_image_mobile.png" alt="hero image">
        <img src="{{ theme.link }}/static/img/home-line2.svg" alt="" class="home_line2">
    </section>
    <section class="about">
        <div class="cont">
            <div class="section_top">
                <img src="{{ theme.link }}/static/img/about_top_image.png" alt="E-protein" class="about_top_image">
                <img src="{{ theme.link }}/static/img/about_top_image2.png" alt="E-protein" class="about_top_image2">
                <div class="block_title">{{text}}</div>
            </div>
            <h2 class="section_title2" id="about">{{ adv_title }}</h2>
            <p class="description">Due to the unique structure of the entoprotein, it is unlikely to cause allergies. Additionally, since animals have not encountered this type of protein during evolution, it does not trigger allergic reactions in pets.</p>
            <div class="advantage_row">
                {% for item in adv %}
                <div class="advantage_item">
                    <img src="{{ item.img }}" alt="" class="advantage_image">
                    <div class="advantage_title">{{item.title}}</div>
                    <p class="description">{{item.text}}</p>
                </div>
                {% endfor %}
                <div class="for_border">
                    <div class="advantage_item">
                        <p class="description">{{ adv_sum }}</p>
                    </div>
                </div>
            </div>
            <div class="advantage_row2">
            {% for item in adv_2 %}
                <div class="advantage_item">
                    <div class="advantage_title">{{item.title}}</div>
                    {% if item.img %}
                    <img src="{{item.img}}" alt="" class="advantage_image2">
                    {% endif %}
                    <p class="description">{{item.text}}</p>
                </div>
                 {% endfor %}
 
            </div>
            <h2 class="section_title">{{about_title}}</h2>
            <div class="description">{{about_text}}</div>
            <div class="protein">
            {% for item in about_points %}
                <p class="description">{{item.text}}</p>
            {% endfor %}
               
            <img src="{{ about_img.url }}" alt="{{ about_img.alt }}">
            </div>
            <h3 class="block_title">{{ diag_title }}</h3>
            <div class="diagram">
                <div class="diagram_texts">
                            {% for item in diag_points %}
                <p class="description">{{item.text}}</p>
            {% endfor %}
                    
                </div>
                <img src="{{ diag_img.url }}" alt="{{ diag_img.alt }}">
            </div>
            <h2 class="section_title2">{{e_title}}</h2>
            <div class="etaps_row">

                <div class="etaps_col">
                    {% for item in e_points %}
                    <div class="etap_item">
                        <img src="{{item.img}}"">
                        <p class="description">
                            {{item.text}}
                        </p>
                    </div>
                    {% endfor %}
                </div>

                <img class="etaps_anim" src="{{ theme.link }}/static/img/etaps_right.svg" alt="4">
            </div>
            <div class="w-100 d-flex justify-content-center mobile_none2">
                <a href="#" class="main_link main_link_black">К продукции</a>
            </div>
        </div>
    </section>
    <section class="faq_section">
        <div class="cont">
            <div class="section_title2">FAQ</div>
            <div class="faq_block">
            {% for item in faq %}
                <div class="faq_item">
                    <div class="faq_top">
                        <div class="faq_title">{{item.q}}</div>
                        <span class="faq_arr_down">
                            <img src="{{ theme.link }}/static/img/icons/arrdown.svg" alt="">
                        </span>
                    </div>
                    <p class="faq_body">{{item.answ}}</p>
             </div>
             {% endfor %}
            </div>
        </div>
    </section>



{% endblock %}