diff --git a/frontend/assets/ProductAsset.php b/frontend/assets/ProductAsset.php
new file mode 100644
index 0000000..e2077b4
--- /dev/null
+++ b/frontend/assets/ProductAsset.php
@@ -0,0 +1,24 @@
+<?php
+    
+    namespace frontend\assets;
+    
+    use yii\web\AssetBundle;
+    
+    /**
+     * Main frontend application asset bundle.
+     */
+    class ProductAsset extends AssetBundle
+    {
+        public $basePath = '@webroot';
+        public $baseUrl = '@web';
+        public $css = [
+            'css/product.css',
+        ];
+        public $js = [
+            'js/product.js',
+        ];
+        public $depends = [
+            'frontend\assets\AppAsset',
+        ];
+    }
+    
\ No newline at end of file
diff --git a/frontend/views/site/index.php b/frontend/views/site/index.php
index 93df53c..135c02e 100755
--- a/frontend/views/site/index.php
+++ b/frontend/views/site/index.php
@@ -1,31 +1,32 @@
 <?php
-    
-    /**
-     * @var $this    yii\web\View
-     * @var $slider  \common\models\Slider
-     * @var $objects \common\models\Objectkb
-     */
-    
-    use common\models\Settings;
-    use frontend\assets\MapAsset;
-    use frontend\assets\IndexAsset;
-    use frontend\assets\FaqAsset;
-    use yii\web\View;
-    use yii\helpers\Url;
-    
-    MapAsset::register($this);
-    IndexAsset::register($this);
-    FaqAsset::register($this);
-    $settings = Settings::getInstance();
-    $this->title = 'KB Energy';
-    $currentLang = \artbox\core\models\Language::getCurrent();
-
-    $coordinates = [];
-    $coordinates['lat'] = empty($settings->lat) ? 0 : $settings->lat;
-    $coordinates['lon'] = empty($settings->lon) ? 0 : $settings->lon;
 
+/**
+ * @var $this    yii\web\View
+ * @var $slider  \common\models\Slider
+ * @var $objects \common\models\Objectkb
+ */
+
+use artbox\core\models\Language;
+use common\models\Settings;
+use frontend\assets\MapAsset;
+use frontend\assets\IndexAsset;
+use frontend\assets\FaqAsset;
+use frontend\assets\ProductAsset;
+use yii\web\View;
+use yii\helpers\Url;
+
+MapAsset::register($this);
+IndexAsset::register($this);
+FaqAsset::register($this);
+ProductAsset::register($this);
+$settings = Settings::getInstance();
+$this->title = 'KB Energy';
+$currentLang = Language::getCurrent();
+
+$coordinates = [];
+$coordinates['lat'] = empty($settings->lat) ? 0 : $settings->lat;
+$coordinates['lon'] = empty($settings->lon) ? 0 : $settings->lon;
 ?>
-
 <div id="main-page" class="new-index">
     <section class="main-about" style="background-image: url('/img/new-index/section-1-bg.jpg')">
         <div class="container">
@@ -36,7 +37,10 @@
                             <?= \Yii::t('app', 'main-about__title') ?>
                         </div>
                         <div class="main-about__button">
-                            <a href="#" class="btn button1 icon_phone modaled init-button-consultation press-consultation" data-title="Отримати консультацію спеціаліста" data-toggle="modal" data-target="#feedback-modal">
+                            <a href="#"
+                               class="btn button1 icon_phone modaled init-button-consultation press-consultation"
+                               data-title="Отримати консультацію спеціаліста" data-toggle="modal"
+                               data-target="#feedback-modal">
                                 <?= \Yii::t('app', 'get_consult2') ?>
                             </a>
                         </div>
@@ -65,23 +69,23 @@
             </div>
         </div>
     </section>
-    <?php if(!empty($tiles)) { ?>
-    <section class="second-about">
-        <div class="container">
-            <div class="row">
-                <?php foreach ($tiles as $tile) { ?>
-                <div class="col-xs-6 col-sm-6 col-md-3 second-about__col">
-                    <div class="second-about__item">
-                        <a href="<?=$tile->lang->link ?>">
-                            <img src="<?= $tile->image->getImg([]) ?>" alt="">
-                            <span><?= $tile->lang->title ?></span>
-                        </a>
-                    </div>
+    <?php if (!empty($tiles)) { ?>
+        <section class="second-about">
+            <div class="container">
+                <div class="row">
+                    <?php foreach ($tiles as $tile) { ?>
+                        <div class="col-xs-6 col-sm-6 col-md-3 second-about__col">
+                            <div class="second-about__item">
+                                <a href="<?= $tile->lang->link ?>">
+                                    <img src="<?= $tile->image->getImg([]) ?>" alt="">
+                                    <span><?= $tile->lang->title ?></span>
+                                </a>
+                            </div>
+                        </div>
+                    <?php } ?>
                 </div>
-                <?php } ?>
             </div>
-        </div>
-    </section>
+        </section>
     <?php } ?>
     <section class="index-solution">
         <div class="container">
@@ -90,7 +94,7 @@
                     <div class="index-solution__title index-titles"><?= \Yii::t('app', 'index-solution__title') ?></div>
                 </div>
             </div>
-            <?=$this->render('_objects',['objects'=>$forPrivate]) ?>
+            <?= $this->render('_objects', ['objects' => $forPrivate]) ?>
             <div class="row row-flex justify-content-center">
                 <div class="index-solution__more">
                     <a href="#" class="animation-hover"><?= \Yii::t('app', 'index-solution__more') ?></a>
@@ -112,7 +116,8 @@
                             <!--обрезать по высоте в 211px-->
                             <img src="/img/new-index/slider-items/slider-item-1.jpg" alt="">
                         </a>
-                        <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 2 МВт "Под ключ"</a>
+                        <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 2 МВт
+                            "Под ключ"</a>
                         <div class="index-solution-slider__item_price">1740000.00 $</div>
                     </div>
                 </div>
@@ -122,7 +127,8 @@
                             <!--обрезать по высоте в 211px-->
                             <img src="/img/new-index/slider-items/slider-item-2.jpg" alt="">
                         </a>
-                        <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 500 кВт"Под ключ"</a>
+                        <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 500
+                            кВт"Под ключ"</a>
                         <div class="index-solution-slider__item_price">480000.00 $</div>
                     </div>
                 </div>
@@ -132,7 +138,8 @@
                             <!--обрезать по высоте в 211px-->
                             <img src="/img/new-index/slider-items/slider-item-1.jpg" alt="">
                         </a>
-                        <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 2 МВт "Под ключ"</a>
+                        <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 2 МВт
+                            "Под ключ"</a>
                         <div class="index-solution-slider__item_price">1740000.00 $</div>
                     </div>
                 </div>
@@ -142,7 +149,8 @@
                             <!--обрезать по высоте в 211px-->
                             <img src="/img/new-index/slider-items/slider-item-2.jpg" alt="">
                         </a>
-                        <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 500 кВт"Под ключ"</a>
+                        <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 500
+                            кВт"Под ключ"</a>
                         <div class="index-solution-slider__item_price">480000.00 $</div>
                     </div>
                 </div>
@@ -152,7 +160,8 @@
                             <!--обрезать по высоте в 211px-->
                             <img src="/img/new-index/slider-items/slider-item-1.jpg" alt="">
                         </a>
-                        <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 2 МВт "Под ключ"</a>
+                        <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 2 МВт
+                            "Под ключ"</a>
                         <div class="index-solution-slider__item_price">1740000.00 $</div>
                     </div>
                 </div>
@@ -162,7 +171,8 @@
                             <!--обрезать по высоте в 211px-->
                             <img src="/img/new-index/slider-items/slider-item-2.jpg" alt="">
                         </a>
-                        <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 500 кВт"Под ключ"</a>
+                        <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 500
+                            кВт"Под ключ"</a>
                         <div class="index-solution-slider__item_price">480000.00 $</div>
                     </div>
                 </div>
@@ -176,7 +186,7 @@
                     <div class="index-solution__title index-titles"><?= \Yii::t('app', 'index-solution__title_company') ?></div>
                 </div>
             </div>
-            <?=$this->render('_objects',['objects'=>$forCompanies]) ?>
+            <?= $this->render('_objects', ['objects' => $forCompanies]) ?>
             <div class="row row-flex justify-content-center">
                 <div class="index-solution__more">
                     <a href="#" class="animation-hover"><?= \Yii::t('app', 'index-solution__more') ?></a>
@@ -198,7 +208,8 @@
                             <!--обрезать по высоте в 211px-->
                             <img src="/img/new-index/slider-items/slider-item-1.jpg" alt="">
                         </a>
-                        <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 2 МВт "Под ключ"</a>
+                        <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 2 МВт
+                            "Под ключ"</a>
                         <div class="index-solution-slider__item_price">1740000.00 $</div>
                     </div>
                 </div>
@@ -208,7 +219,8 @@
                             <!--обрезать по высоте в 211px-->
                             <img src="/img/new-index/slider-items/slider-item-2.jpg" alt="">
                         </a>
-                        <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 500 кВт"Под ключ"</a>
+                        <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 500
+                            кВт"Под ключ"</a>
                         <div class="index-solution-slider__item_price">480000.00 $</div>
                     </div>
                 </div>
@@ -218,7 +230,8 @@
                             <!--обрезать по высоте в 211px-->
                             <img src="/img/new-index/slider-items/slider-item-1.jpg" alt="">
                         </a>
-                        <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 2 МВт "Под ключ"</a>
+                        <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 2 МВт
+                            "Под ключ"</a>
                         <div class="index-solution-slider__item_price">1740000.00 $</div>
                     </div>
                 </div>
@@ -228,7 +241,8 @@
                             <!--обрезать по высоте в 211px-->
                             <img src="/img/new-index/slider-items/slider-item-2.jpg" alt="">
                         </a>
-                        <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 500 кВт"Под ключ"</a>
+                        <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 500
+                            кВт"Под ключ"</a>
                         <div class="index-solution-slider__item_price">480000.00 $</div>
                     </div>
                 </div>
@@ -238,7 +252,8 @@
                             <!--обрезать по высоте в 211px-->
                             <img src="/img/new-index/slider-items/slider-item-1.jpg" alt="">
                         </a>
-                        <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 2 МВт "Под ключ"</a>
+                        <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 2 МВт
+                            "Под ключ"</a>
                         <div class="index-solution-slider__item_price">1740000.00 $</div>
                     </div>
                 </div>
@@ -248,7 +263,8 @@
                             <!--обрезать по высоте в 211px-->
                             <img src="/img/new-index/slider-items/slider-item-2.jpg" alt="">
                         </a>
-                        <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 500 кВт"Под ключ"</a>
+                        <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 500
+                            кВт"Под ключ"</a>
                         <div class="index-solution-slider__item_price">480000.00 $</div>
                     </div>
                 </div>
@@ -274,14 +290,15 @@
                             <div class="income-calculator__left_title"><?= \Yii::t('app', 'income-calculator__left_title-1') ?></div>
                         </div>
                         <div class="col-xs-12">
-                            <div  class="calc-range calc-range-1"
+                            <div class="calc-range calc-range-1"
                                  data-min="0"
                                  data-max="50"
                                  data-from="2.5"
                             >
                                 <div class="price_filter first_price_li">
                                     <div class="price_slider">
-                                        <input type="text" id="price_interval" name="price_interval" value="" style="display: none"/>
+                                        <input type="text" id="price_interval" name="price_interval" value=""
+                                               style="display: none"/>
                                     </div>
                                 </div>
                             </div>
@@ -292,14 +309,15 @@
                             <div class="income-calculator__left_title"><?= \Yii::t('app', 'income-calculator__left_title-2') ?></div>
                         </div>
                         <div class="col-xs-12">
-                            <div  class="calc-range calc-range-2"
+                            <div class="calc-range calc-range-2"
                                  data-min="0"
                                  data-max="5000"
                                  data-from="1500"
                             >
                                 <div class="price_filter first_price_li">
                                     <div class="price_slider">
-                                        <input type="text" id="price_interval2" name="price_interval" value="" style="display: none"/>
+                                        <input type="text" id="price_interval2" name="price_interval" value=""
+                                               style="display: none"/>
                                     </div>
                                 </div>
                             </div>
@@ -327,7 +345,8 @@
             </div>
             <div class="row row-flex justify-content-center">
                 <div class="income-calculator__button">
-                    <a href="#" class="animation-hover" data-title="Отримати консультацію спеціаліста" data-toggle="modal" data-target="#feedback-modal">
+                    <a href="#" class="animation-hover" data-title="Отримати консультацію спеціаліста"
+                       data-toggle="modal" data-target="#feedback-modal">
                         <?= \Yii::t('app', 'get_consult2') ?>
                     </a>
                 </div>
@@ -346,22 +365,28 @@
                 <div class="col-md-12 partners-wr__col">
                     <ul class="owl-carousel customers">
                         <li class="item">
-                            <a href="#" target="_blank"><img src="/img/customer-1.png" alt="" class="img-responsive"></a>
+                            <a href="#" target="_blank"><img src="/img/customer-1.png" alt=""
+                                                             class="img-responsive"></a>
                         </li>
                         <li class="item">
-                            <a href="#" target="_blank"><img src="/img/customer-2.png" alt="" class="img-responsive"></a>
+                            <a href="#" target="_blank"><img src="/img/customer-2.png" alt=""
+                                                             class="img-responsive"></a>
                         </li>
                         <li class="item">
-                            <a href="#" target="_blank"><img src="/img/customer-3.png" alt="" class="img-responsive"></a>
+                            <a href="#" target="_blank"><img src="/img/customer-3.png" alt=""
+                                                             class="img-responsive"></a>
                         </li>
                         <li class="item">
-                            <a href="#" target="_blank"><img src="/img/customer-4.png" alt="" class="img-responsive"></a>
+                            <a href="#" target="_blank"><img src="/img/customer-4.png" alt=""
+                                                             class="img-responsive"></a>
                         </li>
                         <li class="item">
-                            <a href="#" target="_blank"><img src="/img/customer-5.png" alt="" class="img-responsive"></a>
+                            <a href="#" target="_blank"><img src="/img/customer-5.png" alt=""
+                                                             class="img-responsive"></a>
                         </li>
                         <li class="item">
-                            <a href="#" target="_blank"><img src="/img/customer-6.png" alt="" class="img-responsive"></a>
+                            <a href="#" target="_blank"><img src="/img/customer-6.png" alt=""
+                                                             class="img-responsive"></a>
                         </li>
                     </ul>
                     <!-- /.owl-carousel -->
@@ -372,125 +397,180 @@
     </section>
 
 
-        <section class="section-text">
-            <div class="container">
-                <div class="row">
-                    <div class="col-xs-12">
-                        <div class="home-text-wr">
-                            <?php if($currentLang->url == 'ru'){ ?>
-                                <p>Проектирование солнечных станций в Украине — это разработка технической документации, а также сметы вашего проекта.</p>
-
-                                <p>В проектирование входит ТЭО, обязательный анализ потребления энергии, электросхема, продумывание монтажа опорных компонентов, а также расчеты наиболее оптимального угла для выработки солнечной энергии и согласование с контролирующими органами.</p>
-
-                                <h2>Этапы проектирования солнечных электростанции</h2>
-
-                                <p>В перечень услуг проектирования солнечной электростанции входит:</p>
-                                <ul>
-                                    <li>Составление пояснительной записки в которой собраны данные про показатели электроснабжения, электропотребителей, расчет нагрузок, учет электроэнергии, контур заземления, защитные меры, и расчетная таблица электрической нагрузки на розетки.</li>
-
-                                    <li>Оценка влияния на окружающею среду — это оценка влияния СЭС на близлежащие водоемы, флору и фауну региона строительства объекта.</li>
-
-                                    <li>Генеральный план проекта солнечной электростанции — это чертеж-карта с инженерными отметками размещения объекта.</li>
-
-                                    <li>Архитектурно-строительные решения — это составление  реализуемого фундамента под КТП (комплектные трансформаторные подстанции), проведение видеонаблюдения и охраны территории, а также монтаж подходящих металлоконструкций крепления фотомодулей.</li>
-
-                                    <li>Описание методов изготовления и вида металла для металлоконструкций вашего проекта.</li>
-
-                                    <li>Электротехнические решения — готовый документ в котором описываются энергоэффективные решения для вашего проекта, в частности, возможность выработки солнечной энергии с помощью СЭС. </li>
-
-                                    <li>Создание 3D-модели будущей СЭС с помощью специального программного обеспечения.</li>
-
-                                    <li>Сметная документация — это завершающий этап проектирования солнечных электростанций с описанием целесообразности и реализуемости, в него также входит просчет объекта (как государственного) на основе денег из бюджета Украины для дальнейшего подключения по Зеленому тарифу.</li>
-                                </ul>
-                                <h2>Строительство солнечных электростанций</h2>
-
-                                <p>После проектирования СЭС осуществляется строительство солнечных электростанций. На этом этапе делают опорные установки и конструкции под специальным углом наклона, также на крышу монтируют кремниевые или поликристаллические солнечные батареи.</p>
-
-                                <h2>Почему это мы?</h2>
-
-                                <p>Наш большой опыт позволил воплотить в жизнь уже свыше 200 проектов, а также проектирование первой солнечной электростанции по Зеленому тарифу в Киевской области. Преимущества компании KB Energy:</p>
-                                <ul>
-                                    <li>Полное сопровождение клиентов по Зеленому тарифу;</li>
-
-                                    <li>Штат высококвалифированных команды;</li>
-
-                                    <li>Поставка оригинального оборудования;</li>
-
-                                    <li>Консультация по всем вопросам входящее в стоимость; </li>
-
-                                    <li>Предоставляем решения для частных и коммерческих проектов;</li>
-
-                                    <li>Партнерство с Укргазбанком;</li>
-
-                                    <li>Быстрая реализация вашего проекта.</li></ul>
-                            <?php } else if($currentLang->url == 'ua') {?>
-                                <p>Проектування сонячних станцій в Україні - це розробка технічної документації, а також кошторису вашого проекту.</p>
-
-                                <p>У проектування входить ТЕО, обов'язковий аналіз споживання енергії, схема живлення, продумування монтажу опорних компонентів, а також розрахунки найбільш оптимального кута для вироблення сонячної енергії і узгодження з контролюючими органами.</p>
-
-                                <h2>Етапи проектування сонячних електростанції</h2>
-
-                                <p>У перелік послуг проектування сонячної електростанції входить:</p>
-                                <ul>
-                                    <li>Складання пояснювальної записки в якій зібрані дані про показники електропостачання, електроспоживачів, розрахунок навантажень, облік електроенергії, контур заземлення, захисні заходи, і розрахункова таблиця електричного навантаження на розетки. </li>
-                                    <li>Оцінка впливу на навколишнє середовище - це оцінка впливу СЕС на довколишні водойми, флору і фауну регіону будівництва об'єкта. </li>
-                                    <li>Генеральний план проекту сонячної електростанції - це креслення-карта з інженерними відмітками розміщення об'єкта. </li>
-                                    <li>Архітектурно-будівельні рішення - це складання реалізованого фундаменту під КТП (комплектні трансформаторні підстанції), проведення відеоспостереження та охорони території, а також монтаж відповідних металоконструкцій кріплення фотомодулів. </li>
-                                    <li>Опис методів виготовлення і виду металу для металоконструкцій вашого проекту. </li>
-                                    <li>Електротехнічні рішення - готовий документ в якому описуються енергоефективні рішення для вашого проекту, зокрема, можливість вироблення сонячної енергії за допомогою СЕС. </li>
-                                    <li>Створення 3D-моделі майбутньої СЕС за допомогою спеціального програмного забезпечення. </li>
-                                    <li>Кошторисна документація - це завершальний етап проектування сонячних електростанцій з описом доцільності і можливості бути реалізованим, в нього також входить прорахунок об'єкта (як державного) на основі грошей з бюджету України для подальшого підключення по Зеленим тарифом. </li>
-                                </ul>
-                                <h2>Будівництво сонячних електростанцій</h2>
-
-                                <p>Після проектування СЕС здійснюється будівництво сонячних електростанцій. На цьому етапі роблять опорні установки і конструкції під спеціальним кутом нахилу, також на дах монтують кремнієві або полікристалічні сонячні батареї.</p>
-
-                                <h2>Чому це ми?</h2>
-
-                                <p>Наш великий досвід дозволив втілити в життя вже понад 200 проектів, а також проектування першої сонячної електростанції по Зеленим тарифом в Київській області. Переваги компанії KB Energy:</p>
-                                <ul>
-                                    <li>Повний супровід клієнтів по Зеленим тарифом; </li>
-                                    <li>Штат висококваліфірованних команди; </li>
-                                    <li>Поставка оригінального устаткування; </li>
-                                    <li>Консультація з усіх питань входить у вартість; </li>
-                                    <li>Надаємо рішення для приватних і комерційних проектів; </li>
-                                    <li>Партнерство з Укргазбанком; </li>
-                                    <li>Швидка реалізація вашого проекту. </li>
-                                </ul>
-                            <?php } ?>
-                        </div>
-                        <div class="more-text">
-                            <span class="more-text__span" data-more="<?=\Yii::t('app', 'more-text')?>" data-hide="<?=\Yii::t('app', 'hide-text')?>"><?=\Yii::t('app', 'more-text')?><i></i></span>
-                        </div>
+    <section class="section-text">
+        <div class="container">
+            <div class="row">
+                <div class="col-xs-12">
+                    <div class="home-text-wr">
+                        <?php if ($currentLang->url == 'ru') { ?>
+                            <p>Проектирование солнечных станций в Украине — это разработка технической документации, а
+                                также сметы вашего проекта.</p>
+
+                            <p>В проектирование входит ТЭО, обязательный анализ потребления энергии, электросхема,
+                                продумывание монтажа опорных компонентов, а также расчеты наиболее оптимального угла для
+                                выработки солнечной энергии и согласование с контролирующими органами.</p>
+
+                            <h2>Этапы проектирования солнечных электростанции</h2>
+
+                            <p>В перечень услуг проектирования солнечной электростанции входит:</p>
+                            <ul>
+                                <li>Составление пояснительной записки в которой собраны данные про показатели
+                                    электроснабжения, электропотребителей, расчет нагрузок, учет электроэнергии, контур
+                                    заземления, защитные меры, и расчетная таблица электрической нагрузки на розетки.
+                                </li>
+
+                                <li>Оценка влияния на окружающею среду — это оценка влияния СЭС на близлежащие водоемы,
+                                    флору и фауну региона строительства объекта.
+                                </li>
+
+                                <li>Генеральный план проекта солнечной электростанции — это чертеж-карта с инженерными
+                                    отметками размещения объекта.
+                                </li>
+
+                                <li>Архитектурно-строительные решения — это составление реализуемого фундамента под КТП
+                                    (комплектные трансформаторные подстанции), проведение видеонаблюдения и охраны
+                                    территории, а также монтаж подходящих металлоконструкций крепления фотомодулей.
+                                </li>
+
+                                <li>Описание методов изготовления и вида металла для металлоконструкций вашего
+                                    проекта.
+                                </li>
+
+                                <li>Электротехнические решения — готовый документ в котором описываются
+                                    энергоэффективные решения для вашего проекта, в частности, возможность выработки
+                                    солнечной энергии с помощью СЭС.
+                                </li>
+
+                                <li>Создание 3D-модели будущей СЭС с помощью специального программного обеспечения.</li>
+
+                                <li>Сметная документация — это завершающий этап проектирования солнечных электростанций
+                                    с описанием целесообразности и реализуемости, в него также входит просчет объекта
+                                    (как государственного) на основе денег из бюджета Украины для дальнейшего
+                                    подключения по Зеленому тарифу.
+                                </li>
+                            </ul>
+                            <h2>Строительство солнечных электростанций</h2>
+
+                            <p>После проектирования СЭС осуществляется строительство солнечных электростанций. На этом
+                                этапе делают опорные установки и конструкции под специальным углом наклона, также на
+                                крышу монтируют кремниевые или поликристаллические солнечные батареи.</p>
+
+                            <h2>Почему это мы?</h2>
+
+                            <p>Наш большой опыт позволил воплотить в жизнь уже свыше 200 проектов, а также
+                                проектирование первой солнечной электростанции по Зеленому тарифу в Киевской области.
+                                Преимущества компании KB Energy:</p>
+                            <ul>
+                                <li>Полное сопровождение клиентов по Зеленому тарифу;</li>
+
+                                <li>Штат высококвалифированных команды;</li>
+
+                                <li>Поставка оригинального оборудования;</li>
+
+                                <li>Консультация по всем вопросам входящее в стоимость;</li>
+
+                                <li>Предоставляем решения для частных и коммерческих проектов;</li>
+
+                                <li>Партнерство с Укргазбанком;</li>
+
+                                <li>Быстрая реализация вашего проекта.</li>
+                            </ul>
+                        <?php } else if ($currentLang->url == 'ua') { ?>
+                            <p>Проектування сонячних станцій в Україні - це розробка технічної документації, а також
+                                кошторису вашого проекту.</p>
+
+                            <p>У проектування входить ТЕО, обов'язковий аналіз споживання енергії, схема живлення,
+                                продумування монтажу опорних компонентів, а також розрахунки найбільш оптимального кута
+                                для вироблення сонячної енергії і узгодження з контролюючими органами.</p>
+
+                            <h2>Етапи проектування сонячних електростанції</h2>
+
+                            <p>У перелік послуг проектування сонячної електростанції входить:</p>
+                            <ul>
+                                <li>Складання пояснювальної записки в якій зібрані дані про показники електропостачання,
+                                    електроспоживачів, розрахунок навантажень, облік електроенергії, контур заземлення,
+                                    захисні заходи, і розрахункова таблиця електричного навантаження на розетки.
+                                </li>
+                                <li>Оцінка впливу на навколишнє середовище - це оцінка впливу СЕС на довколишні водойми,
+                                    флору і фауну регіону будівництва об'єкта.
+                                </li>
+                                <li>Генеральний план проекту сонячної електростанції - це креслення-карта з інженерними
+                                    відмітками розміщення об'єкта.
+                                </li>
+                                <li>Архітектурно-будівельні рішення - це складання реалізованого фундаменту під КТП
+                                    (комплектні трансформаторні підстанції), проведення відеоспостереження та охорони
+                                    території, а також монтаж відповідних металоконструкцій кріплення фотомодулів.
+                                </li>
+                                <li>Опис методів виготовлення і виду металу для металоконструкцій вашого проекту.</li>
+                                <li>Електротехнічні рішення - готовий документ в якому описуються енергоефективні
+                                    рішення для вашого проекту, зокрема, можливість вироблення сонячної енергії за
+                                    допомогою СЕС.
+                                </li>
+                                <li>Створення 3D-моделі майбутньої СЕС за допомогою спеціального програмного
+                                    забезпечення.
+                                </li>
+                                <li>Кошторисна документація - це завершальний етап проектування сонячних електростанцій
+                                    з описом доцільності і можливості бути реалізованим, в нього також входить
+                                    прорахунок об'єкта (як державного) на основі грошей з бюджету України для подальшого
+                                    підключення по Зеленим тарифом.
+                                </li>
+                            </ul>
+                            <h2>Будівництво сонячних електростанцій</h2>
+
+                            <p>Після проектування СЕС здійснюється будівництво сонячних електростанцій. На цьому етапі
+                                роблять опорні установки і конструкції під спеціальним кутом нахилу, також на дах
+                                монтують кремнієві або полікристалічні сонячні батареї.</p>
+
+                            <h2>Чому це ми?</h2>
+
+                            <p>Наш великий досвід дозволив втілити в життя вже понад 200 проектів, а також проектування
+                                першої сонячної електростанції по Зеленим тарифом в Київській області. Переваги компанії
+                                KB Energy:</p>
+                            <ul>
+                                <li>Повний супровід клієнтів по Зеленим тарифом;</li>
+                                <li>Штат висококваліфірованних команди;</li>
+                                <li>Поставка оригінального устаткування;</li>
+                                <li>Консультація з усіх питань входить у вартість;</li>
+                                <li>Надаємо рішення для приватних і комерційних проектів;</li>
+                                <li>Партнерство з Укргазбанком;</li>
+                                <li>Швидка реалізація вашого проекту.</li>
+                            </ul>
+                        <?php } ?>
+                    </div>
+                    <div class="more-text">
+                        <span class="more-text__span" data-more="<?= \Yii::t('app', 'more-text') ?>"
+                              data-hide="<?= \Yii::t('app', 'hide-text') ?>"><?= \Yii::t('app', 'more-text') ?><i></i></span>
                     </div>
                 </div>
             </div>
-        </section>
+        </div>
+    </section>
 
 
     <section class="media-about-section">
         <div class="container">
             <div class="row">
                 <div class="col-xs-12">
-                    <h2 class="media-about-section__title index-titles"><?=\Yii::t('app', 'index_medias1')?></h2>
+                    <h2 class="media-about-section__title index-titles"><?= \Yii::t('app', 'index_medias1') ?></h2>
                 </div>
             </div>
             <div class="about row">
                 <div class="col-md-8 col-sm-7 col-xs-12 smi_left">
                     <div class="video">
-                        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/4XJ_UHggzto" frameborder="0" allowfullscreen=""></iframe>
+                        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/4XJ_UHggzto"
+                                frameborder="0" allowfullscreen=""></iframe>
                     </div>
                 </div>
                 <div class="col-md-4 col-sm-5 col-xs-12 smi_right">
                     <div class="media-about-section__text">
-                        <?=\Yii::t('app', 'index_medias2')?>
+                        <?= \Yii::t('app', 'index_medias2') ?>
                     </div>
                     <div class="media-about-section__button">
                         <a
-                                href="<?= Url::toRoute(['object/index'])?>"
+                                href="<?= Url::toRoute(['object/index']) ?>"
                                 class="animation-hover"
                         >
-                            <?=\Yii::t('app', 'more_about_ours')?>
+                            <?= \Yii::t('app', 'more_about_ours') ?>
                         </a>
                     </div>
                 </div>
@@ -509,48 +589,75 @@
             <div class="row">
                 <div class="col-xs-12">
                     <div class="faq__items">
-                        <div class="faq__item" itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question">
+                        <div class="faq__item" itemscope="" itemprop="mainEntity"
+                             itemtype="https://schema.org/Question">
                             <div class="faq__item_close"></div>
                             <div class="faq__item_title" itemprop="name">Как это работает?</div>
-                            <div class="faq__item_text" itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
+                            <div class="faq__item_text" itemscope="" itemprop="acceptedAnswer"
+                                 itemtype="https://schema.org/Answer">
                                 <div itemprop="text">
-                                    <p>Сначала команда специалистов делает все необходимые замеры, разрабатывает проект и устанавливает солнечную электростанцию. После мы помогаем оформить «зеленый» тариф. Далее ваша станция генерирует электроэнергию и вы ежемесячно получаете средства за её продажу.</p>
+                                    <p>Сначала команда специалистов делает все необходимые замеры, разрабатывает проект
+                                        и устанавливает солнечную электростанцию. После мы помогаем оформить «зеленый»
+                                        тариф. Далее ваша станция генерирует электроэнергию и вы ежемесячно получаете
+                                        средства за её продажу.</p>
                                 </div>
                             </div>
                         </div>
-                        <div class="faq__item" itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question">
+                        <div class="faq__item" itemscope="" itemprop="mainEntity"
+                             itemtype="https://schema.org/Question">
                             <div class="faq__item_close"></div>
                             <div class="faq__item_title" itemprop="name">Сколько нужно вкладывать время?</div>
-                            <div class="faq__item_text" itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
+                            <div class="faq__item_text" itemscope="" itemprop="acceptedAnswer"
+                                 itemtype="https://schema.org/Answer">
                                 <div itemprop="text">
-                                    <p>Сначала команда специалистов делает все необходимые замеры, разрабатывает проект и устанавливает солнечную электростанцию. После мы помогаем оформить «зеленый» тариф. Далее ваша станция генерирует электроэнергию и вы ежемесячно получаете средства за её продажу.</p>
+                                    <p>Сначала команда специалистов делает все необходимые замеры, разрабатывает проект
+                                        и устанавливает солнечную электростанцию. После мы помогаем оформить «зеленый»
+                                        тариф. Далее ваша станция генерирует электроэнергию и вы ежемесячно получаете
+                                        средства за её продажу.</p>
                                 </div>
                             </div>
                         </div>
-                        <div class="faq__item" itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question">
+                        <div class="faq__item" itemscope="" itemprop="mainEntity"
+                             itemtype="https://schema.org/Question">
                             <div class="faq__item_close"></div>
-                            <div class="faq__item_title" itemprop="name">Как не упустить прибыль и зафиксировать ставку? </div>
-                            <div class="faq__item_text" itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
+                            <div class="faq__item_title" itemprop="name">Как не упустить прибыль и зафиксировать
+                                ставку?
+                            </div>
+                            <div class="faq__item_text" itemscope="" itemprop="acceptedAnswer"
+                                 itemtype="https://schema.org/Answer">
                                 <div itemprop="text">
-                                    <p>Сначала команда специалистов делает все необходимые замеры, разрабатывает проект и устанавливает солнечную электростанцию. После мы помогаем оформить «зеленый» тариф. Далее ваша станция генерирует электроэнергию и вы ежемесячно получаете средства за её продажу.</p>
+                                    <p>Сначала команда специалистов делает все необходимые замеры, разрабатывает проект
+                                        и устанавливает солнечную электростанцию. После мы помогаем оформить «зеленый»
+                                        тариф. Далее ваша станция генерирует электроэнергию и вы ежемесячно получаете
+                                        средства за её продажу.</p>
                                 </div>
                             </div>
                         </div>
-                        <div class="faq__item" itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question">
+                        <div class="faq__item" itemscope="" itemprop="mainEntity"
+                             itemtype="https://schema.org/Question">
                             <div class="faq__item_close"></div>
                             <div class="faq__item_title" itemprop="name">Кто платит?</div>
-                            <div class="faq__item_text" itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
+                            <div class="faq__item_text" itemscope="" itemprop="acceptedAnswer"
+                                 itemtype="https://schema.org/Answer">
                                 <div itemprop="text">
-                                    <p>Сначала команда специалистов делает все необходимые замеры, разрабатывает проект и устанавливает солнечную электростанцию. После мы помогаем оформить «зеленый» тариф. Далее ваша станция генерирует электроэнергию и вы ежемесячно получаете средства за её продажу.</p>
+                                    <p>Сначала команда специалистов делает все необходимые замеры, разрабатывает проект
+                                        и устанавливает солнечную электростанцию. После мы помогаем оформить «зеленый»
+                                        тариф. Далее ваша станция генерирует электроэнергию и вы ежемесячно получаете
+                                        средства за её продажу.</p>
                                 </div>
                             </div>
                         </div>
-                        <div class="faq__item" itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question">
+                        <div class="faq__item" itemscope="" itemprop="mainEntity"
+                             itemtype="https://schema.org/Question">
                             <div class="faq__item_close"></div>
                             <div class="faq__item_title" itemprop="name">Что делать, если СЭС выйдет из строя?</div>
-                            <div class="faq__item_text" itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
+                            <div class="faq__item_text" itemscope="" itemprop="acceptedAnswer"
+                                 itemtype="https://schema.org/Answer">
                                 <div itemprop="text">
-                                    <p>Сначала команда специалистов делает все необходимые замеры, разрабатывает проект и устанавливает солнечную электростанцию. После мы помогаем оформить «зеленый» тариф. Далее ваша станция генерирует электроэнергию и вы ежемесячно получаете средства за её продажу.</p>
+                                    <p>Сначала команда специалистов делает все необходимые замеры, разрабатывает проект
+                                        и устанавливает солнечную электростанцию. После мы помогаем оформить «зеленый»
+                                        тариф. Далее ваша станция генерирует электроэнергию и вы ежемесячно получаете
+                                        средства за её продажу.</p>
                                 </div>
                             </div>
                         </div>
@@ -561,27 +668,36 @@
     </section>
 
     <section class="index-map">
-        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2541.835332126824!2d30.647180415730542!3d50.42553957947196!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40d4c5184ae56b5f%3A0x90a021df035746cc!2z0YPQuy4g0KHQuNC80YTQtdGA0L7Qv9C-0LvRjNGB0LrQsNGPLCAxMywg0JrQuNC10LIsIDAyMDAw!5e0!3m2!1sru!2sua!4v1625051795776!5m2!1sru!2sua" width="100%" height="380" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
+        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2541.835332126824!2d30.647180415730542!3d50.42553957947196!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40d4c5184ae56b5f%3A0x90a021df035746cc!2z0YPQuy4g0KHQuNC80YTQtdGA0L7Qv9C-0LvRjNGB0LrQsNGPLCAxMywg0JrQuNC10LIsIDAyMDAw!5e0!3m2!1sru!2sua!4v1625051795776!5m2!1sru!2sua"
+                width="100%" height="380" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
     </section>
 </div>
-
+<a href="#" class="animation-hover" data-title="hhh" data-toggle="modal" data-target="#cardProduct">
+    Получить консультацию </a>
 <!-- Modal -->
 <div class="modal fade" id="cardProduct" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-lg">
         <div class="modal-content kb-modal-wrapper">
             <div class="card-content">
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                <div class="container">
-                    <div class="row">
+                <button type="button" class="btn-close close" data-dismiss="modal" data-bs-dismiss="modal"
+                        aria-label="Close">
+                </button>
+                <div class="container big-container">
+                    <div class="row row-flex">
                         <div class="col-md-4 modal-left">
                             <div class="product-image">
-                                <img src="./img/product.png" alt="Промышленная солнечная электростанция 2 МВт &#34;Под ключ&#34;">
+                                <img src="/img/new-index/slider-items/slider-item-1.jpg"
+                                     alt="Промышленная солнечная электростанция 2 МВт &#34;Под ключ&#34;">
                             </div>
                         </div>
                         <div class="col-md-8 modal-right">
                             <div class="product-code">Код товара 9000</div>
                             <div class="product-title">Промышленная солнечная электростанция 2 МВт "Под ключ"</div>
-                            <div class="product-body">Промышленная солнечная электростанция устанавливается в целях продажи электроэнергии по "зеленому" тарифу для промышленных станций. Стоимость продажи электроэнергии по "зеленому" тарифу прописана законом Украины "Про электроэнергию" и составляет 0.1637 €/кВт∙ч для промышленных станций, установленных на крыше.</div>
+                            <div class="product-body">Промышленная солнечная электростанция устанавливается в целях
+                                продажи электроэнергии по "зеленому" тарифу для промышленных станций. Стоимость продажи
+                                электроэнергии по "зеленому" тарифу прописана законом Украины "Про электроэнергию" и
+                                составляет 0.1637 €/кВт∙ч для промышленных станций, установленных на крыше.
+                            </div>
                             <form class="modal-form" method="POST" action="/action">
                                 <input type="hidden" name="product_code" value="9000">
                                 <div class="product-counter">
@@ -594,7 +710,9 @@
                                                 <a class="product-counter__decrement"></a>
                                             </div>
                                         </div>
-                                        <div class="product-counter__value" data-currency="$" data-price="1740000.00">1232</div>
+                                        <div class="product-counter__value" data-currency="$" data-price="1740000.00">
+                                            1232
+                                        </div>
                                     </label>
                                 </div>
                                 <div class="modal-form__inner">
diff --git a/frontend/web/css/product.css b/frontend/web/css/product.css
new file mode 100644
index 0000000..8231ccc
--- /dev/null
+++ b/frontend/web/css/product.css
@@ -0,0 +1,271 @@
+.modal-backdrop.show {
+    opacity: .8;
+}
+
+@media (min-width: 992px) {
+    #cardProduct .modal-dialog {
+        width: auto;
+        max-width: 800px;
+    }
+}
+
+.kb-modal-wrapper {
+    border: none;
+    border-radius: 0;
+    max-width: 730px;
+    margin: 0 auto;
+    padding: 1em 0;
+    box-shadow: 0px 4px 12px #3e3e3e;
+}
+
+.kb-modal-wrapper .btn-close {
+    width: 24px;
+    height: 24px;
+    opacity: 1;
+    transform: rotate(45deg);
+    font-size: 0;
+    position: absolute;
+    top: 23px;
+    right: 22px;
+}
+
+.kb-modal-wrapper .btn-close:before, .kb-modal-wrapper .btn-close:after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    background: #8e8f90;
+}
+
+.kb-modal-wrapper .btn-close:before {
+    width: 2px;
+    height: 24px;
+    margin-left: -1px;
+    margin-top: -12px;
+}
+
+.kb-modal-wrapper .btn-close:after {
+    width: 24px;
+    height: 2px;
+    margin-left: -12px;
+    margin-top: -1px;
+
+}
+
+.kb-modal-wrapper .card-content {
+    margin-top: 3.8em;
+}
+
+.kb-modal-wrapper .product-image {
+    margin: 5px 20px;
+}
+
+.kb-modal-wrapper .product-image img {
+    max-width: 250px;
+    display: block;
+    pointer-events: none;
+    margin: 0 auto 2em;
+}
+
+.kb-modal-wrapper .product-code {
+    color: #8e8f90;
+    font-size: 13px;
+}
+
+.kb-modal-wrapper .product-title {
+    font-size: 18px;
+    font-weight: bold;
+    line-height: 1.4em;
+    margin: 0.4em 0;
+}
+
+.kb-modal-wrapper .product-code,
+.kb-modal-wrapper .product-title {
+    max-width: 350px;
+}
+
+.kb-modal-wrapper .product-body {
+    font-size: 15px;
+    line-height: 1.4em;
+    padding: 2px 0px;
+}
+
+.btn.big-yellow {
+    width: 100%;
+    font-size: 13px;
+    font-weight: bold;
+    background-color: #ffd800;
+    text-transform: uppercase;
+    padding: 1em;
+    padding-top: calc(1em + 1px);
+    margin: 1em 0;
+    border-radius: 0;
+}
+
+.btn.big-yellow:hover,
+.btn.big-yellow:active {
+    background-color: #ffe764;
+    box-shadow: inset 0px 0px 0px 2px black, 0px 0px 20px rgba(0, 0, 0, 0.2) !important;
+    transition: 0.3s;
+}
+
+.btn.big-yellow:active {
+    box-shadow: inset 0px 0px 0px 2px black, 0px 0px 30px rgba(0, 0, 0, 0.2) !important;
+    transform: scale(.95);
+}
+
+.kb-modal-wrapper .modal-form {
+    padding-top: 5px;
+}
+
+.kb-modal-wrapper .modal-form .product-counter {
+    border-bottom: 1px solid #ebebeb;
+    padding-bottom: 1em;
+    margin-bottom: 1em;
+}
+
+.kb-modal-wrapper .modal-form label {
+    width: 100%;
+}
+
+.kb-modal-wrapper .modal-form__inner .kb-input {
+    padding-top: 6px;
+    padding-bottom: 20px;
+}
+
+.kb-modal-wrapper .kb-input .label-title {
+    font-size: 15px;
+    margin: 5px 0;
+}
+
+.kb-modal-wrapper .kb-input input {
+    width: 100%;
+    display: block;
+    border: 1px solid #c1c3c7;
+    padding: 0.5em;
+    box-shadow: inset 2px 2px 4px rgb(190 190 190 / 50%);
+}
+
+.kb-modal-wrapper .modal-right {
+    max-width: 450px;
+    margin: 0 0 0 30px;
+}
+
+.kb-modal-wrapper .modal-form__inner {
+    max-width: 255px;
+}
+
+.kb-modal-wrapper .modal-form__inner .submit-button-wr {
+    margin-top: -1px;
+    margin-bottom: 1px;
+}
+
+.kb-modal-wrapper::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    height: 2px;
+    background: rgb(30, 178, 105);
+    background: linear-gradient(270deg, rgba(30, 178, 105, 1) 0%, rgba(0, 150, 215, 1) 100%);
+}
+
+.product-counter__label {
+    color: #8e8f90;
+    font-size: 13px;
+}
+
+.product-counter__value {
+    font-size: 15px;
+    font-weight: bold;
+    color: #0096d6;
+    margin-left: 20px;
+}
+
+.product-counter,
+.product-counter > * {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    margin: 8px 0;
+}
+
+.big-container {
+    width: 100% !important;
+}
+
+@media (min-width: 1400px) {
+    .big-container {
+        max-width: 1320px !important;
+    }
+}
+
+.product-counter .kb-input input::-webkit-outer-spin-button,
+.product-counter .kb-input input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+.product-counter .kb-input input {
+    -moz-appearance: textfield;
+    text-align: center;
+    width: 42px;
+}
+
+.product-counter__actions {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    margin-left: 6px;
+}
+
+.product-counter__input {
+    display: flex;
+    margin: 0 12px;
+}
+
+.product-counter__actions > * {
+    display: block;
+    width: 18px;
+    height: 18px;
+    border: none;
+    background-color: #f6f6f6;
+    color: transparent;
+    background-position: center;
+    background-repeat: no-repeat;
+    cursor: pointer;
+}
+
+.product-counter__actions .product-counter__increment {
+    background-image: url("data:image/svg+xml,%3Csvg id='plus' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23f6f6f6;%7D.cls-2%7Bfill:%238e8f90;%7D%3C/style%3E%3C/defs%3E%3Crect class='cls-1' width='18' height='18'/%3E%3Crect class='cls-2' x='8' y='4' width='2' height='10'/%3E%3Crect class='cls-2' x='4' y='8' width='10' height='2'/%3E%3C/svg%3E");
+}
+
+.product-counter__actions .product-counter__decrement {
+    background-image: url("data:image/svg+xml,%3Csvg id='minus' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%238e8f90;%7D%3C/style%3E%3C/defs%3E%3Crect class='cls-1' x='4' y='8' width='10' height='2'/%3E%3C/svg%3E");
+}
+
+.product-counter__actions > *:active {
+    opacity: .5;
+    transition: .2s;
+}
+
+@media (max-width: 991px) {
+    .kb-modal-wrapper .modal-left,
+    .kb-modal-wrapper .modal-right {
+        width: 100%;
+    }
+
+    .kb-modal-wrapper .modal-right {
+        margin: 0em 0.5em;
+    }
+
+    .kb-modal-wrapper .modal-form__inner {
+        max-width: 100%;
+    }
+
+    .product-counter__input {
+        flex: 1;
+    }
+}
\ No newline at end of file
diff --git a/frontend/web/js/product.js b/frontend/web/js/product.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/frontend/web/js/product.js
--
libgit2 0.21.4