from server

.env

@@ -5,9 +5,9 @@ APP_KEY=base64:l9GsGrhw5RLlAybs8em56Jr0ZfzSV25SmoZPB6LiVJQ==
 DB_CONNECTION=mysql
 DB_HOST=localhost
 DB_PORT=3306
-DB_DATABASE=tps
-DB_USERNAME=root
-DB_PASSWORD=bt110226
+DB_DATABASE=tps_new
+DB_USERNAME=shohrat
+DB_PASSWORD=Qazwsx12**
 REDIS_HOST=127.0.0.1
 REDIS_PASSWORD=null
 REDIS_PORT=6379

config/database.php

@@ -57,9 +57,9 @@ return [
             'engine' => 'InnoDB',
             'host' => 'localhost',
             'port' => 3306,
-            'database' => 'tps',
-            'username' => 'root',
-            'password' => 'bt110226',
+            'database' => 'tps_new',
+            'username' => 'shohrat',
+            'password' => 'Qazwsx12**',
             'charset' => 'utf8mb4',
             'collation' => 'utf8mb4_unicode_ci',
             'prefix' => '',

plugins/akami/tps/models/servicepage/columns.yaml

@@ -5,6 +5,12 @@ columns:
     header:
         label: header
         type: text
+        searchable: false
     img:
         label: img
         type: text
+        searchable: false
+    page:
+        label: page
+        type: text
+        searchable: false

plugins/akami/tps/models/servicepage/fields.yaml

@@ -20,3 +20,16 @@ fields:
                     label: Content
                     span: full
                     type: text
+    page:
+        label: Page
+        options:
+            1: Uslugi
+            2: 'Реклама в помещениях'
+            3: 'Выставочные стенды'
+            4: 'Организация мероприятий'
+            5: 'Реклама в СМИ'
+            6: Производство
+            7: Наружная
+        span: auto
+        default: '1'
+        type: balloon-selector

plugins/akami/tps/updates/builder_table_update_akami_tps_service_page.php

@@ -0,0 +1,23 @@
+<?php namespace Akami\Tps\Updates;
+
+use Schema;
+use October\Rain\Database\Updates\Migration;
+
+class BuilderTableUpdateAkamiTpsServicePage extends Migration
+{
+    public function up()
+    {
+        Schema::table('akami_tps_service_page', function($table)
+        {
+            $table->string('page')->nullable();
+        });
+    }
+    
+    public function down()
+    {
+        Schema::table('akami_tps_service_page', function($table)
+        {
+            $table->dropColumn('page');
+        });
+    }
+}

plugins/akami/tps/updates/builder_table_update_akami_tps_service_page_2.php

@@ -0,0 +1,23 @@
+<?php namespace Akami\Tps\Updates;
+
+use Schema;
+use October\Rain\Database\Updates\Migration;
+
+class BuilderTableUpdateAkamiTpsServicePage2 extends Migration
+{
+    public function up()
+    {
+        Schema::table('akami_tps_service_page', function($table)
+        {
+            $table->string('page', 191)->default('0')->change();
+        });
+    }
+    
+    public function down()
+    {
+        Schema::table('akami_tps_service_page', function($table)
+        {
+            $table->string('page', 191)->default(null)->change();
+        });
+    }
+}

plugins/akami/tps/updates/version.yaml

@@ -21,3 +21,9 @@
 1.0.8:
     - 'Updated table akami_tps_portfolio'
     - builder_table_update_akami_tps_portfolio.php
+1.0.9:
+    - 'Updated table akami_tps_service_page'
+    - builder_table_update_akami_tps_service_page.php
+1.0.10:
+    - 'Updated table akami_tps_service_page'
+    - builder_table_update_akami_tps_service_page_2.php

themes/tps/assets/css/components/1-main/mixin.scss

@@ -106,7 +106,7 @@
     }
 }
 
-@mixin xlg-xxlg {
+@mixin xlg-xxxlg {
     @media (max-width: 1400px) {
         @content;
     }

themes/tps/assets/css/components/2-layout/crumb.scss

@@ -13,8 +13,8 @@
 
     &_txt {
         font-weight: 400;
-        font-size: 16px;
-        line-height: 36px;
+        font-size: 18px;
+        line-height: 30px;
         color: #FFFFFF;
     }
 }

themes/tps/assets/css/components/2-layout/header.scss

@@ -22,6 +22,11 @@
         align-items: center;
         position: relative;
 
+        svg {
+            @include ImgCon;
+            position: relative;
+        }
+
         &_bg {
             width: 70px;
             height: 70px;
@@ -77,20 +82,87 @@
 
             li {
                 margin-right: 60px;
+                position: relative;
 
                 &:last-child {
                     margin-right: 0;
                 }
 
-                a {
+                a,
+                span {
                     display: block;
                     font-weight: 500;
                     font-size: 16px;
                     line-height: 20px;
                     color: #FFFFFF;
+                    cursor: pointer;
+
+                    &.service_nav-link {
+                        position: relative;
+
+                        &::after {
+                            content: "";
+                            position: absolute;
+                            top: 50%;
+                            right: -20px;
+                            transform: translateY(-50%);
+                            -moz-ransform: translateY(-50%);
+                            -o-transform: translateY(-50%);
+                            -ms-transform: translateY(-50%);
+                            -webkit-transform: translateY(-50%);
+                            width: 8px;
+                            height: 4px;
+                            -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
+                            clip-path: polygon(0 0, 50% 100%, 100% 0);
+                            background: #fff;
+                        }
+                    }
+
+                    // &:hover~.service_nav {
+                    //     display: block;
+                    //     max-height: unset;
+                    // }
                 }
             }
         }
+
+        .service_nav {
+            display: none;
+            @include transition;
+            max-height: 0;
+            overflow: hidden;
+            background: #fff;
+
+            position: absolute;
+            top: calc(100% + 20px);
+            left: 50%;
+            @include transformX;
+            white-space: nowrap;
+            z-index: 3;
+            min-width: 400px;
+            text-align: center;
+
+            &.active {
+                display: block;
+                max-height: unset;
+            }
+
+            a {
+                display: block;
+                font-weight: 500;
+                font-size: 16px;
+                line-height: 20px;
+                color: #000;
+                @include transition;
+                padding: 20px 0;
+
+                &:hover {
+                    background: $main-color;
+                    color: #fff;
+                }
+
+            }
+        }
     }
 
     .lang {
@@ -193,6 +265,7 @@
         transform: rotate(360deg);
     }
 }
+
 @-webkit-keyframes logo-bg {
     0% {
         transform: rotate(0deg);
@@ -216,6 +289,7 @@
         opacity: 1;
     }
 }
+
 @-webkit-keyframes inner-txt {
     0% {
         opacity: 0;
@@ -241,6 +315,7 @@
         opacity: 1;
     }
 }
+
 @-webkit-keyframes group-txt {
     0% {
         transform: translateX(-150%);
@@ -267,3 +342,215 @@
     animation: group-txt 1s linear;
     -webkit-animation: group-txt 1s linear;
 }
+
+// =============================================================
+
+svg .svg-elem-1 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 0s;
+    transition: fill 0.7s ease-in 0s;
+}
+
+svg.active .svg-elem-1 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-2 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 0.07s;
+    transition: fill 0.7s ease-in 0.07s;
+}
+
+svg.active .svg-elem-2 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-3 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 0.14s;
+    transition: fill 0.7s ease-in 0.14s;
+}
+
+svg.active .svg-elem-3 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-4 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 0.21000000000000002s;
+    transition: fill 0.7s ease-in 0.21000000000000002s;
+}
+
+svg.active .svg-elem-4 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-5 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 0.28s;
+    transition: fill 0.7s ease-in 0.28s;
+}
+
+svg.active .svg-elem-5 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-6 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 0.35000000000000003s;
+    transition: fill 0.7s ease-in 0.35000000000000003s;
+}
+
+svg.active .svg-elem-6 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-7 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 0.42000000000000004s;
+    transition: fill 0.7s ease-in 0.42000000000000004s;
+}
+
+svg.active .svg-elem-7 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-8 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 0.49000000000000005s;
+    transition: fill 0.7s ease-in 0.49000000000000005s;
+}
+
+svg.active .svg-elem-8 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-9 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 0.56s;
+    transition: fill 0.7s ease-in 0.56s;
+}
+
+svg.active .svg-elem-9 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-10 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 0.6300000000000001s;
+    transition: fill 0.7s ease-in 0.6300000000000001s;
+}
+
+svg.active .svg-elem-10 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-11 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 0.7000000000000001s;
+    transition: fill 0.7s ease-in 0.7000000000000001s;
+}
+
+svg.active .svg-elem-11 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-12 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 0.77s;
+    transition: fill 0.7s ease-in 0.77s;
+}
+
+svg.active .svg-elem-12 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-13 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 0.8400000000000001s;
+    transition: fill 0.7s ease-in 0.8400000000000001s;
+}
+
+svg.active .svg-elem-13 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-14 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 0.9100000000000001s;
+    transition: fill 0.7s ease-in 0.9100000000000001s;
+}
+
+svg.active .svg-elem-14 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-15 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 0.9800000000000001s;
+    transition: fill 0.7s ease-in 0.9800000000000001s;
+}
+
+svg.active .svg-elem-15 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-16 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 1.05s;
+    transition: fill 0.7s ease-in 1.05s;
+}
+
+svg.active .svg-elem-16 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-17 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 1.12s;
+    transition: fill 0.7s ease-in 1.12s;
+}
+
+svg.active .svg-elem-17 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-18 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 1.1900000000000002s;
+    transition: fill 0.7s ease-in 1.1900000000000002s;
+}
+
+svg.active .svg-elem-18 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-19 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 1.2600000000000002s;
+    transition: fill 0.7s ease-in 1.2600000000000002s;
+}
+
+svg.active .svg-elem-19 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-20 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 1.33s;
+    transition: fill 0.7s ease-in 1.33s;
+}
+
+svg.active .svg-elem-20 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-21 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 1.4000000000000001s;
+    transition: fill 0.7s ease-in 1.4000000000000001s;
+}
+
+svg.active .svg-elem-21 {
+    fill: rgb(255, 255, 255);
+}

themes/tps/assets/css/components/2-layout/responsive.scss

@@ -1,5 +1,5 @@
 // 1400 ========================
-@include xlg-xxlg {
+@include xlg-xxxlg {
 
     // About ================
     .about {
@@ -316,6 +316,10 @@
                     }
                 }
             }
+
+            .service_nav {
+                top: -100px;
+            }
         }
 
     }
@@ -393,6 +397,25 @@
                 height: 385px;
             }
         }
+
+
+    }
+
+    // About Page ====================
+    .about.page {
+        .about {
+            &_box {
+                &-item {
+                    &-title {
+                        font-size: 18px;
+                    }
+
+                    &-txt {
+                        font-size: 14px;
+                    }
+                }
+            }
+        }
     }
 
     // Contact ===============
@@ -438,6 +461,12 @@
                 height: 600px;
             }
         }
+
+        &_item {
+            &-info {
+                top: 35%;
+            }
+        }
     }
 }
 
@@ -467,6 +496,17 @@
             }
         }
     }
+
+    // About Page ====================
+    .about.page {
+        .about {
+            &_box {
+                &-item {
+                    width: calc(50% - 82px);
+                }
+            }
+        }
+    }
 }
 
 // 750 ========================
@@ -711,9 +751,13 @@
             }
         }
     }
+
+    .main_title {
+        font-size: 20px;
+    }
 }
 
-// 600 =======================
+// 650 =======================
 @include md-sm {
 
     // Gallery ==============
@@ -778,6 +822,17 @@
             }
         }
     }
+
+    // About Page ====================
+    .about.page {
+        .about {
+            &_box {
+                &-item {
+                    width: calc(100% - 82px);
+                }
+            }
+        }
+    }
 }
 
 // 400 ===========================

themes/tps/assets/css/components/3-page/about.scss

@@ -1,64 +1,98 @@
 // About ================
 .about.page {
-    padding: 50px 0 100px;
+    padding: 50px 0 0;
 
     .about {
         &_txt {
             font-weight: 400;
-            font-size: 16px;
-            line-height: 36px;
+            font-size: 18px;
+            line-height: 30px;
             color: #000000;
 
             margin-bottom: 30px;
         }
 
-        &_list {
-            margin-bottom: 30px;
+        &_box {
+            background: linear-gradient(0deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("../images/blur-bg.jpg") no-repeat center;
+            background-size: cover;
+            margin-bottom: 50px;
             position: relative;
+            padding: 80px 0;
 
-            li {
-                margin-bottom: 15px;
-                padding-left: 70px;
+            &::after {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                backdrop-filter: blur(15px);
+                z-index: 1;
+            }
+
+            &-inner {
+                display: flex;
+                flex-wrap: wrap;
+                z-index: 5;
                 position: relative;
+            }
 
-                &::before {
-                    content: '';
-                    position: absolute;
-                    top: 15px;
-                    left: 25px;
-                    background: url("../images/svg/circle.svg") no-repeat center;
-                    background-size: contain;
-                    width: 20px;
-                    height: 20px;
-                }
+            &-item {
+                width: calc(33.33% - 82px);
+                margin: 20px;
+                text-align: center;
+                padding: 30px 20px;
+                border: .5px solid hsla(0, 0%, 100%, .3);
+                ;
+                border-radius: 12px;
 
-                &::after {
-                    content: '';
-                    position: absolute;
-                    top: 27px;
-                    left: 34px;
-                    height: calc(100% + 10px);
-                    width: 1px;
-                    border-left: 2px dashed #C4DAF0;
-                    border-right: none;
-                    border-top: none;
-                    border-bottom: none;
+                color: #fff;
 
-                    z-index: -1;
-                }
-
-                &:last-child {
-                    &::after {
-                        display: none;
-                    }
-                }
-
-                p {
+                &-title {
+                    font-size: 22px;
                     font-weight: 400;
+                    line-height: 1.4;
+                }
+
+                &-txt {
+                    margin-top: 20px;
                     font-size: 16px;
-                    line-height: 50px;
+                    font-weight: 400;
+                    line-height: 1.4;
                 }
             }
         }
     }
 }
+
+.main_title {
+    padding-left: 25px;
+    position: relative;
+    font-size: 28px;
+    font-weight: 500;
+    line-height: 1.4;
+    margin: 45px 0 30px;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 3px;
+        height: 100%;
+        max-height: 35px;
+        background: $main-color;
+    }
+}
+
+.p0 {
+    padding: 0 !important;
+}
+
+.pt0 {
+    padding-top: 0 !important;
+}
+
+.pb0 {
+    padding-bottom: 0 !important;
+}

themes/tps/assets/css/components/3-page/home.scss

@@ -65,8 +65,8 @@
 
         &-txt {
             font-weight: 400;
-            font-size: 16px;
-            line-height: 36px;
+            font-size: 18px;
+            line-height: 30px;
             color: #FFFFFF;
             margin: 30px 0;
             position: relative;
@@ -282,7 +282,6 @@
 
     &_box {
         display: flex;
-
     }
 
     &_info {
@@ -308,8 +307,8 @@
 
         &-txt {
             font-weight: 400;
-            font-size: 16px;
-            line-height: 36px;
+            font-size: 18px;
+            line-height: 30px;
             color: #000000;
             margin-bottom: 30px;
 
@@ -424,6 +423,59 @@
             }
         }
     }
+
+    &_list {
+        margin-bottom: 50px;
+        position: relative;
+
+        li {
+            margin-bottom: 15px;
+            padding-left: 70px;
+            position: relative;
+
+            &::before {
+                content: '';
+                position: absolute;
+                top: 7px;
+                left: 25px;
+                background: url("../images/svg/circle.svg") no-repeat center;
+                background-size: contain;
+                width: 20px;
+                height: 20px;
+            }
+
+            &::after {
+                content: '';
+                position: absolute;
+                top: 27px;
+                left: 34px;
+                height: calc(100% + 10px);
+                width: 1px;
+                border-left: 2px dashed #C4DAF0;
+                border-right: none;
+                border-top: none;
+                border-bottom: none;
+
+                z-index: -1;
+            }
+
+            &:last-child {
+                &::after {
+                    display: none;
+                }
+            }
+
+            p {
+                font-weight: 400;
+                font-size: 18px;
+                line-height: 35px;
+
+                span {
+                    font-weight: 700;
+                }
+            }
+        }
+    }
 }
 
 @keyframes open-arrow {
@@ -550,6 +602,19 @@
         flex-direction: column;
 
         text-align: center;
+        position: relative;
+
+        &-info {
+            position: absolute;
+            top: 50%;
+            left: 0;
+            @include transformY;
+            width: 100%;
+
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
 
         &:last-child {
             border-right: none;
@@ -579,6 +644,7 @@
             justify-content: center;
 
             background: rgba(0, 0, 0, .6);
+            width: calc(100% - 20px);
 
             transition: .4s linear;
             -webkit-transition: .4s linear;
@@ -592,6 +658,11 @@
             width: calc(100% - 40px);
             margin: 20px auto 0;
             opacity: 0;
+            width: 100%;
+
+            position: absolute;
+            bottom: -110px;
+            left: 0;
 
             transition: .4s linear;
             -webkit-transition: .4s linear;
@@ -636,7 +707,7 @@
         margin-bottom: 20px;
 
         input {
-            border: 1px solid #D6D6D6;
+            border: 1px solid #737373;
             padding: 12px 20px;
             width: calc(100% - 40px);
 
@@ -646,12 +717,12 @@
             font-family: 'Montserrat', sans-serif;
 
             &::placeholder {
-                color: #D6D6D6;
+                color: #737373;
             }
         }
 
         textarea {
-            border: 1px solid #D6D6D6;
+            border: 1px solid #737373;
             padding: 12px 20px;
             width: calc(100% - 40px);
 
@@ -663,7 +734,7 @@
             height: 180px;
 
             &::placeholder {
-                color: #D6D6D6;
+                color: #737373;
             }
         }
     }

themes/tps/assets/css/components/3-page/service.scss

@@ -9,6 +9,22 @@
             left: unset;
             bottom: unset;
             right: unset;
+            display: block;
+
+            p {
+                font-weight: 400;
+                font-size: 18px;
+                line-height: 30px;
+                margin-bottom: 30px;
+
+                b {
+                    font-weight: 600;
+                }
+
+                strong {
+                    font-weight: 600;
+                }
+            }
         }
 
         &_block {
@@ -19,23 +35,26 @@
             &::-webkit-scrollbar {
                 display: none;
             }
-
         }
 
         &_txt {
             font-weight: 400;
-            font-size: 16px;
-            line-height: 36px;
+            font-size: 18px;
+            line-height: 30px;
             margin-bottom: 30px;
+
+            b {
+                font-weight: 600;
+            }
         }
 
         &_box {
             display: flex;
-            width: calc(100% + 420px);
+            // width: calc(100% + 420px);
 
-            .slick-list {
-                padding: 0 420px 0 0 !important;
-            }
+            // .slick-list {
+            //     padding: 0 420px 0 0 !important;
+            // }
 
             // .slick-initialized .slick-slide {
             //     display: block;
@@ -48,7 +67,7 @@
 
                 &-photo {
                     width: 100%;
-                    height: 380px;
+                    height: 300px;
 
                     img {
                         @include ImgCov;
@@ -57,7 +76,7 @@
 
                 &-title {
                     font-weight: 700;
-                    font-size: 24px;
+                    font-size: 27px;
                     line-height: 36px;
 
                     margin: 30px 0 20px;
@@ -77,7 +96,7 @@
                 &::before {
                     content: '';
                     position: absolute;
-                    top: 7px;
+                    top: 5px;
                     left: 0px;
                     background: url("../images/svg/circle.svg") no-repeat center;
                     background-size: contain;
@@ -108,8 +127,8 @@
 
                 p {
                     font-weight: 400;
-                    font-size: 14px;
-                    line-height: 32px;
+                    font-size: 16px;
+                    line-height: 30px;
                 }
             }
         }

themes/tps/assets/css/main.css

@@ -163,6 +163,13 @@ li {
           align-items: center;
   position: relative;
 }
+.header .logo svg {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  -o-object-fit: contain;
+  position: relative;
+}
 .header .logo_bg {
   width: 70px;
   height: 70px;
@@ -221,16 +228,80 @@ li {
 }
 .header .nav ul li {
   margin-right: 60px;
+  position: relative;
 }
 .header .nav ul li:last-child {
   margin-right: 0;
 }
-.header .nav ul li a {
+.header .nav ul li a,
+.header .nav ul li span {
   display: block;
   font-weight: 500;
   font-size: 16px;
   line-height: 20px;
   color: #FFFFFF;
+  cursor: pointer;
+}
+.header .nav ul li a.service_nav-link,
+.header .nav ul li span.service_nav-link {
+  position: relative;
+}
+.header .nav ul li a.service_nav-link::after,
+.header .nav ul li span.service_nav-link::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: -20px;
+  transform: translateY(-50%);
+  -moz-ransform: translateY(-50%);
+  -o-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  -webkit-transform: translateY(-50%);
+  width: 8px;
+  height: 4px;
+  -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
+  clip-path: polygon(0 0, 50% 100%, 100% 0);
+  background: #fff;
+}
+.header .nav .service_nav {
+  display: none;
+  -webkit-transition: all 0.2s ease-in-out 0s;
+  transition: all 0.2s ease-in-out 0s;
+  -moz-transition: all 0.2s ease-in-out 0s;
+  max-height: 0;
+  overflow: hidden;
+  background: #fff;
+  position: absolute;
+  top: calc(100% + 20px);
+  left: 50%;
+  transform: translateX(-50%);
+  -moz-ransform: translateX(-50%);
+  -o-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -webkit-transform: translateX(-50%);
+  white-space: nowrap;
+  z-index: 3;
+  min-width: 400px;
+  text-align: center;
+}
+.header .nav .service_nav.active {
+  display: block;
+  max-height: unset;
+}
+.header .nav .service_nav a {
+  display: block;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 20px;
+  color: #000;
+  -webkit-transition: all 0.2s ease-in-out 0s;
+  transition: all 0.2s ease-in-out 0s;
+  -moz-transition: all 0.2s ease-in-out 0s;
+  padding: 20px 0;
+}
+.header .nav .service_nav a:hover {
+  background: #2B72B6;
+  color: #fff;
 }
 .header .lang {
   position: relative;
@@ -405,6 +476,216 @@ li {
   -webkit-animation: group-txt 1s linear;
 }
 
+svg .svg-elem-1 {
+  fill: transparent;
+  -webkit-transition: fill 0.7s ease-in 0s;
+  transition: fill 0.7s ease-in 0s;
+}
+
+svg.active .svg-elem-1 {
+  fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-2 {
+  fill: transparent;
+  -webkit-transition: fill 0.7s ease-in 0.07s;
+  transition: fill 0.7s ease-in 0.07s;
+}
+
+svg.active .svg-elem-2 {
+  fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-3 {
+  fill: transparent;
+  -webkit-transition: fill 0.7s ease-in 0.14s;
+  transition: fill 0.7s ease-in 0.14s;
+}
+
+svg.active .svg-elem-3 {
+  fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-4 {
+  fill: transparent;
+  -webkit-transition: fill 0.7s ease-in 0.21s;
+  transition: fill 0.7s ease-in 0.21s;
+}
+
+svg.active .svg-elem-4 {
+  fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-5 {
+  fill: transparent;
+  -webkit-transition: fill 0.7s ease-in 0.28s;
+  transition: fill 0.7s ease-in 0.28s;
+}
+
+svg.active .svg-elem-5 {
+  fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-6 {
+  fill: transparent;
+  -webkit-transition: fill 0.7s ease-in 0.35s;
+  transition: fill 0.7s ease-in 0.35s;
+}
+
+svg.active .svg-elem-6 {
+  fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-7 {
+  fill: transparent;
+  -webkit-transition: fill 0.7s ease-in 0.42s;
+  transition: fill 0.7s ease-in 0.42s;
+}
+
+svg.active .svg-elem-7 {
+  fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-8 {
+  fill: transparent;
+  -webkit-transition: fill 0.7s ease-in 0.49s;
+  transition: fill 0.7s ease-in 0.49s;
+}
+
+svg.active .svg-elem-8 {
+  fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-9 {
+  fill: transparent;
+  -webkit-transition: fill 0.7s ease-in 0.56s;
+  transition: fill 0.7s ease-in 0.56s;
+}
+
+svg.active .svg-elem-9 {
+  fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-10 {
+  fill: transparent;
+  -webkit-transition: fill 0.7s ease-in 0.63s;
+  transition: fill 0.7s ease-in 0.63s;
+}
+
+svg.active .svg-elem-10 {
+  fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-11 {
+  fill: transparent;
+  -webkit-transition: fill 0.7s ease-in 0.7s;
+  transition: fill 0.7s ease-in 0.7s;
+}
+
+svg.active .svg-elem-11 {
+  fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-12 {
+  fill: transparent;
+  -webkit-transition: fill 0.7s ease-in 0.77s;
+  transition: fill 0.7s ease-in 0.77s;
+}
+
+svg.active .svg-elem-12 {
+  fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-13 {
+  fill: transparent;
+  -webkit-transition: fill 0.7s ease-in 0.84s;
+  transition: fill 0.7s ease-in 0.84s;
+}
+
+svg.active .svg-elem-13 {
+  fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-14 {
+  fill: transparent;
+  -webkit-transition: fill 0.7s ease-in 0.91s;
+  transition: fill 0.7s ease-in 0.91s;
+}
+
+svg.active .svg-elem-14 {
+  fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-15 {
+  fill: transparent;
+  -webkit-transition: fill 0.7s ease-in 0.98s;
+  transition: fill 0.7s ease-in 0.98s;
+}
+
+svg.active .svg-elem-15 {
+  fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-16 {
+  fill: transparent;
+  -webkit-transition: fill 0.7s ease-in 1.05s;
+  transition: fill 0.7s ease-in 1.05s;
+}
+
+svg.active .svg-elem-16 {
+  fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-17 {
+  fill: transparent;
+  -webkit-transition: fill 0.7s ease-in 1.12s;
+  transition: fill 0.7s ease-in 1.12s;
+}
+
+svg.active .svg-elem-17 {
+  fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-18 {
+  fill: transparent;
+  -webkit-transition: fill 0.7s ease-in 1.19s;
+  transition: fill 0.7s ease-in 1.19s;
+}
+
+svg.active .svg-elem-18 {
+  fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-19 {
+  fill: transparent;
+  -webkit-transition: fill 0.7s ease-in 1.26s;
+  transition: fill 0.7s ease-in 1.26s;
+}
+
+svg.active .svg-elem-19 {
+  fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-20 {
+  fill: transparent;
+  -webkit-transition: fill 0.7s ease-in 1.33s;
+  transition: fill 0.7s ease-in 1.33s;
+}
+
+svg.active .svg-elem-20 {
+  fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-21 {
+  fill: transparent;
+  -webkit-transition: fill 0.7s ease-in 1.4s;
+  transition: fill 0.7s ease-in 1.4s;
+}
+
+svg.active .svg-elem-21 {
+  fill: rgb(255, 255, 255);
+}
+
 .crumb {
   padding: 220px 0 50px;
   background: url("../images/mini_banner.png") no-repeat center;
@@ -418,8 +699,8 @@ li {
 }
 .crumb_txt {
   font-weight: 400;
-  font-size: 16px;
-  line-height: 36px;
+  font-size: 18px;
+  line-height: 30px;
   color: #FFFFFF;
 }
 
@@ -690,8 +971,8 @@ li {
 }
 .hero_item-txt {
   font-weight: 400;
-  font-size: 16px;
-  line-height: 36px;
+  font-size: 18px;
+  line-height: 30px;
   color: #FFFFFF;
   margin: 30px 0;
   position: relative;
@@ -748,7 +1029,7 @@ li {
   font-size: 0;
   width: 15px;
   height: 15px;
-  border: 1px solid #ffff;
+  border: 1px solid white;
   border-radius: 50%;
   display: block;
   margin: 0 5px;
@@ -930,8 +1211,8 @@ li {
 }
 .about_info-txt {
   font-weight: 400;
-  font-size: 16px;
-  line-height: 36px;
+  font-size: 18px;
+  line-height: 30px;
   color: #000000;
   margin-bottom: 30px;
 }
@@ -979,7 +1260,7 @@ li {
           animation: open-arrow 0.3s linear;
 }
 .about_video {
-  width: calc(50%);
+  width: 50%;
   margin-left: 25px;
 }
 .about_video-box {
@@ -1038,7 +1319,7 @@ li {
   -webkit-transform: translate(-50%, -50%);
   width: 85px;
   height: 85px;
-  background: #ffff;
+  background: white;
   border-radius: 50%;
   display: block;
   z-index: 5;
@@ -1060,6 +1341,49 @@ li {
   width: 24px;
   height: 27px;
 }
+.about_list {
+  margin-bottom: 50px;
+  position: relative;
+}
+.about_list li {
+  margin-bottom: 15px;
+  padding-left: 70px;
+  position: relative;
+}
+.about_list li::before {
+  content: "";
+  position: absolute;
+  top: 7px;
+  left: 25px;
+  background: url("../images/svg/circle.svg") no-repeat center;
+  background-size: contain;
+  width: 20px;
+  height: 20px;
+}
+.about_list li::after {
+  content: "";
+  position: absolute;
+  top: 27px;
+  left: 34px;
+  height: calc(100% + 10px);
+  width: 1px;
+  border-left: 2px dashed #C4DAF0;
+  border-right: none;
+  border-top: none;
+  border-bottom: none;
+  z-index: -1;
+}
+.about_list li:last-child::after {
+  display: none;
+}
+.about_list li p {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 35px;
+}
+.about_list li p span {
+  font-weight: 700;
+}
 
 @keyframes open-arrow {
   0% {
@@ -1174,6 +1498,28 @@ li {
       -ms-flex-direction: column;
           flex-direction: column;
   text-align: center;
+  position: relative;
+}
+.service_item-info {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  -moz-ransform: translateY(-50%);
+  -o-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  -webkit-transform: translateY(-50%);
+  width: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .service_item:last-child {
   border-right: none;
@@ -1204,6 +1550,7 @@ li {
       -ms-flex-pack: center;
           justify-content: center;
   background: rgba(0, 0, 0, 0.6);
+  width: calc(100% - 20px);
   transition: 0.4s linear;
   -webkit-transition: 0.4s linear;
   -ms-transition: 0.4s linear;
@@ -1215,6 +1562,10 @@ li {
   width: calc(100% - 40px);
   margin: 20px auto 0;
   opacity: 0;
+  width: 100%;
+  position: absolute;
+  bottom: -110px;
+  left: 0;
   transition: 0.4s linear;
   -webkit-transition: 0.4s linear;
   -ms-transition: 0.4s linear;
@@ -1257,7 +1608,7 @@ li {
   margin-bottom: 20px;
 }
 .contact_input input {
-  border: 1px solid #D6D6D6;
+  border: 1px solid #737373;
   padding: 12px 20px;
   width: calc(100% - 40px);
   font-weight: 500;
@@ -1266,22 +1617,22 @@ li {
   font-family: "Montserrat", sans-serif;
 }
 .contact_input input::-webkit-input-placeholder {
-  color: #D6D6D6;
+  color: #737373;
 }
 .contact_input input::-moz-placeholder {
-  color: #D6D6D6;
+  color: #737373;
 }
 .contact_input input:-ms-input-placeholder {
-  color: #D6D6D6;
+  color: #737373;
 }
 .contact_input input::-ms-input-placeholder {
-  color: #D6D6D6;
+  color: #737373;
 }
 .contact_input input::placeholder {
-  color: #D6D6D6;
+  color: #737373;
 }
 .contact_input textarea {
-  border: 1px solid #D6D6D6;
+  border: 1px solid #737373;
   padding: 12px 20px;
   width: calc(100% - 40px);
   font-weight: 500;
@@ -1292,19 +1643,19 @@ li {
   height: 180px;
 }
 .contact_input textarea::-webkit-input-placeholder {
-  color: #D6D6D6;
+  color: #737373;
 }
 .contact_input textarea::-moz-placeholder {
-  color: #D6D6D6;
+  color: #737373;
 }
 .contact_input textarea:-ms-input-placeholder {
-  color: #D6D6D6;
+  color: #737373;
 }
 .contact_input textarea::-ms-input-placeholder {
-  color: #D6D6D6;
+  color: #737373;
 }
 .contact_input textarea::placeholder {
-  color: #D6D6D6;
+  color: #737373;
 }
 .contact_btn {
   display: -webkit-box;
@@ -1456,54 +1807,93 @@ li {
 }
 
 .about.page {
-  padding: 50px 0 100px;
+  padding: 50px 0 0;
 }
 .about.page .about_txt {
   font-weight: 400;
-  font-size: 16px;
-  line-height: 36px;
+  font-size: 18px;
+  line-height: 30px;
   color: #000000;
   margin-bottom: 30px;
 }
-.about.page .about_list {
-  margin-bottom: 30px;
+.about.page .about_box {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.7)), to(rgba(0, 0, 0, 0.7))), url("../images/blur-bg.jpg") no-repeat center;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../images/blur-bg.jpg") no-repeat center;
+  background-size: cover;
+  margin-bottom: 50px;
   position: relative;
+  padding: 80px 0;
 }
-.about.page .about_list li {
-  margin-bottom: 15px;
-  padding-left: 70px;
-  position: relative;
-}
-.about.page .about_list li::before {
+.about.page .about_box::after {
   content: "";
   position: absolute;
-  top: 15px;
-  left: 25px;
-  background: url("../images/svg/circle.svg") no-repeat center;
-  background-size: contain;
-  width: 20px;
-  height: 20px;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  -webkit-backdrop-filter: blur(15px);
+          backdrop-filter: blur(15px);
+  z-index: 1;
 }
-.about.page .about_list li::after {
-  content: "";
-  position: absolute;
-  top: 27px;
-  left: 34px;
-  height: calc(100% + 10px);
-  width: 1px;
-  border-left: 2px dashed #C4DAF0;
-  border-right: none;
-  border-top: none;
-  border-bottom: none;
-  z-index: -1;
+.about.page .about_box-inner {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  z-index: 5;
+  position: relative;
 }
-.about.page .about_list li:last-child::after {
-  display: none;
+.about.page .about_box-item {
+  width: calc(33.33% - 82px);
+  margin: 20px;
+  text-align: center;
+  padding: 30px 20px;
+  border: 0.5px solid hsla(0deg, 0%, 100%, 0.3);
+  border-radius: 12px;
+  color: #fff;
 }
-.about.page .about_list li p {
+.about.page .about_box-item-title {
+  font-size: 22px;
   font-weight: 400;
+  line-height: 1.4;
+}
+.about.page .about_box-item-txt {
+  margin-top: 20px;
   font-size: 16px;
-  line-height: 50px;
+  font-weight: 400;
+  line-height: 1.4;
+}
+
+.main_title {
+  padding-left: 25px;
+  position: relative;
+  font-size: 28px;
+  font-weight: 500;
+  line-height: 1.4;
+  margin: 45px 0 30px;
+}
+.main_title::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 3px;
+  height: 100%;
+  max-height: 35px;
+  background: #2B72B6;
+}
+
+.p0 {
+  padding: 0 !important;
+}
+
+.pt0 {
+  padding-top: 0 !important;
+}
+
+.pb0 {
+  padding-bottom: 0 !important;
 }
 
 .gallery {
@@ -1663,6 +2053,19 @@ li {
   left: unset;
   bottom: unset;
   right: unset;
+  display: block;
+}
+.service.page .service_info p {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 30px;
+  margin-bottom: 30px;
+}
+.service.page .service_info p b {
+  font-weight: 600;
+}
+.service.page .service_info p strong {
+  font-weight: 600;
 }
 .service.page .service_block {
   overflow-x: auto;
@@ -1674,26 +2077,25 @@ li {
 }
 .service.page .service_txt {
   font-weight: 400;
-  font-size: 16px;
-  line-height: 36px;
+  font-size: 18px;
+  line-height: 30px;
   margin-bottom: 30px;
 }
+.service.page .service_txt b {
+  font-weight: 600;
+}
 .service.page .service_box {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  width: calc(100% + 420px);
-}
-.service.page .service_box .slick-list {
-  padding: 0 420px 0 0 !important;
 }
 .service.page .service_box-item {
-  width: calc(470px - 30px);
+  width: 440px;
   margin-right: 30px;
 }
 .service.page .service_box-item-photo {
   width: 100%;
-  height: 380px;
+  height: 300px;
 }
 .service.page .service_box-item-photo img {
   width: 100%;
@@ -1703,7 +2105,7 @@ li {
 }
 .service.page .service_box-item-title {
   font-weight: 700;
-  font-size: 24px;
+  font-size: 27px;
   line-height: 36px;
   margin: 30px 0 20px;
 }
@@ -1719,7 +2121,7 @@ li {
 .service.page .service_list li::before {
   content: "";
   position: absolute;
-  top: 7px;
+  top: 5px;
   left: 0px;
   background: url("../images/svg/circle.svg") no-repeat center;
   background-size: contain;
@@ -1744,8 +2146,8 @@ li {
 }
 .service.page .service_list li p {
   font-weight: 400;
-  font-size: 14px;
-  line-height: 32px;
+  font-size: 16px;
+  line-height: 30px;
 }
 
 /* Slider */
@@ -2259,7 +2661,7 @@ li {
     padding: 0 60px 0 0 !important;
   }
 }
-@media (max-width: 1400px) {
+@media (max-width: 1200px) {
   .hero_item-title {
     font-size: 30px;
   }
@@ -2482,6 +2884,9 @@ li {
   .header .nav ul li a {
     font-size: 20px;
   }
+  .header .nav .service_nav {
+    top: -100px;
+  }
 
   .hero_item-title {
     font-size: 22px;
@@ -2535,6 +2940,13 @@ li {
     height: 385px;
   }
 
+  .about.page .about_box-item-title {
+    font-size: 18px;
+  }
+  .about.page .about_box-item-txt {
+    font-size: 14px;
+  }
+
   .contact_box {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
@@ -2566,6 +2978,9 @@ li {
   .service_box-image {
     height: 600px;
   }
+  .service_item-info {
+    top: 35%;
+  }
 }
 @media (max-width: 1000px) {
   .gallery_box {
@@ -2582,6 +2997,10 @@ li {
   .service.page .service_box .slick-list {
     padding: 0 170px 0 0 !important;
   }
+
+  .about.page .about_box-item {
+    width: calc(50% - 82px);
+  }
 }
 @media (max-width: 750px) {
   .header .logo_bg {
@@ -2740,6 +3159,10 @@ li {
   .service.page .service_box-item-photo {
     height: 280px;
   }
+
+  .main_title {
+    font-size: 20px;
+  }
 }
 @media (max-width: 650px) {
   .gallery {
@@ -2787,6 +3210,10 @@ li {
   .service.page .service_list li p {
     line-height: 28px;
   }
+
+  .about.page .about_box-item {
+    width: calc(100% - 82px);
+  }
 }
 @media (max-width: 400px) {
   .auto_container {