from server

plugins/akami/tps/controllers/PortfolioCategory.php

@@ -0,0 +1,18 @@
+<?php namespace Akami\Tps\Controllers;
+
+use Backend\Classes\Controller;
+use BackendMenu;
+
+class PortfolioCategory extends Controller
+{
+    public $implement = [        'Backend\Behaviors\ListController',        'Backend\Behaviors\FormController'    ];
+    
+    public $listConfig = 'config_list.yaml';
+    public $formConfig = 'config_form.yaml';
+
+    public function __construct()
+    {
+        parent::__construct();
+        BackendMenu::setContext('Akami.Tps', 'main-menu-item', 'side-menu-item7');
+    }
+}

plugins/akami/tps/controllers/portfoliocategory/_list_toolbar.htm

@@ -0,0 +1,18 @@
+<div data-control="toolbar">
+        <a href="<?= Backend::url('akami/tps/portfoliocategory/create') ?>" class="btn btn-primary oc-icon-plus"><?= e(trans('backend::lang.form.create')) ?></a>
+            <button
+        class="btn btn-default oc-icon-trash-o"
+        disabled="disabled"
+        onclick="$(this).data('request-data', {
+            checked: $('.control-list').listWidget('getChecked')
+        })"
+        data-request="onDelete"
+        data-request-confirm="<?= e(trans('backend::lang.list.delete_selected_confirm')) ?>"
+        data-trigger-action="enable"
+        data-trigger=".control-list input[type=checkbox]"
+        data-trigger-condition="checked"
+        data-request-success="$(this).prop('disabled', true)"
+        data-stripe-load-indicator>
+        <?= e(trans('backend::lang.list.delete_selected')) ?>
+    </button>
+</div>

plugins/akami/tps/controllers/portfoliocategory/config_form.yaml

@@ -0,0 +1,10 @@
+name: PortfolioCategory
+form: $/akami/tps/models/portfoliocategory/fields.yaml
+modelClass: Akami\Tps\Models\PortfolioCategory
+defaultRedirect: akami/tps/portfoliocategory
+create:
+    redirect: 'akami/tps/portfoliocategory/update/:id'
+    redirectClose: akami/tps/portfoliocategory
+update:
+    redirect: akami/tps/portfoliocategory
+    redirectClose: akami/tps/portfoliocategory

plugins/akami/tps/controllers/portfoliocategory/config_list.yaml

@@ -0,0 +1,12 @@
+list: $/akami/tps/models/portfoliocategory/columns.yaml
+modelClass: Akami\Tps\Models\PortfolioCategory
+title: PortfolioCategory
+noRecordsMessage: 'backend::lang.list.no_records'
+showSetup: true
+showCheckboxes: true
+recordsPerPage: 20
+toolbar:
+    buttons: list_toolbar
+    search:
+        prompt: 'backend::lang.list.search_prompt'
+recordUrl: 'akami/tps/portfoliocategory/update/:id'

plugins/akami/tps/controllers/portfoliocategory/create.htm

@@ -0,0 +1,46 @@
+<?php Block::put('breadcrumb') ?>
+    <ul>
+        <li><a href="<?= Backend::url('akami/tps/portfoliocategory') ?>">PortfolioCategory</a></li>
+        <li><?= e($this->pageTitle) ?></li>
+    </ul>
+<?php Block::endPut() ?>
+
+<?php if (!$this->fatalError): ?>
+
+    <?= Form::open(['class' => 'layout']) ?>
+
+        <div class="layout-row">
+            <?= $this->formRender() ?>
+        </div>
+
+        <div class="form-buttons">
+            <div class="loading-indicator-container">
+                <button
+                    type="submit"
+                    data-request="onSave"
+                    data-hotkey="ctrl+s, cmd+s"
+                    data-load-indicator="<?= e(trans('backend::lang.form.saving')) ?>"
+                    class="btn btn-primary">
+                    <?= e(trans('backend::lang.form.create')) ?>
+                </button>
+                <button 
+                    type="button"
+                    data-request="onSave"
+                    data-request-data="close:1"
+                    data-hotkey="ctrl+enter, cmd+enter"
+                    data-load-indicator="<?= e(trans('backend::lang.form.saving')) ?>"
+                    class="btn btn-default">
+                    <?= e(trans('backend::lang.form.create_and_close')) ?>
+                </button>
+                <span class="btn-text">
+                    <?= e(trans('backend::lang.form.or')) ?> <a href="<?= Backend::url('akami/tps/portfoliocategory') ?>"><?= e(trans('backend::lang.form.cancel')) ?></a>
+                </span>
+            </div>
+        </div>
+
+    <?= Form::close() ?>
+
+<?php else: ?>
+    <p class="flash-message static error"><?= e(trans($this->fatalError)) ?></p>
+    <p><a href="<?= Backend::url('akami/tps/portfoliocategory') ?>" class="btn btn-default"><?= e(trans('backend::lang.form.return_to_list')) ?></a></p>
+<?php endif ?>

plugins/akami/tps/controllers/portfoliocategory/index.htm

@@ -0,0 +1 @@
+<?= $this->listRender() ?>

plugins/akami/tps/controllers/portfoliocategory/preview.htm

@@ -0,0 +1,22 @@
+<?php Block::put('breadcrumb') ?>
+    <ul>
+        <li><a href="<?= Backend::url('akami/tps/portfoliocategory') ?>">PortfolioCategory</a></li>
+        <li><?= e($this->pageTitle) ?></li>
+    </ul>
+<?php Block::endPut() ?>
+
+<?php if (!$this->fatalError): ?>
+
+    <div class="form-preview">
+        <?= $this->formRenderPreview() ?>
+    </div>
+
+<?php else: ?>
+    <p class="flash-message static error"><?= e($this->fatalError) ?></p>
+<?php endif ?>
+
+<p>
+    <a href="<?= Backend::url('akami/tps/portfoliocategory') ?>" class="btn btn-default oc-icon-chevron-left">
+        <?= e(trans('backend::lang.form.return_to_list')) ?>
+    </a>
+</p>

plugins/akami/tps/controllers/portfoliocategory/update.htm

@@ -0,0 +1,54 @@
+<?php Block::put('breadcrumb') ?>
+    <ul>
+        <li><a href="<?= Backend::url('akami/tps/portfoliocategory') ?>">PortfolioCategory</a></li>
+        <li><?= e($this->pageTitle) ?></li>
+    </ul>
+<?php Block::endPut() ?>
+
+<?php if (!$this->fatalError): ?>
+
+    <?= Form::open(['class' => 'layout']) ?>
+
+        <div class="layout-row">
+            <?= $this->formRender() ?>
+        </div>
+
+        <div class="form-buttons">
+            <div class="loading-indicator-container">
+                <button
+                    type="submit"
+                    data-request="onSave"
+                    data-request-data="redirect:0"
+                    data-hotkey="ctrl+s, cmd+s"
+                    data-load-indicator="<?= e(trans('backend::lang.form.saving')) ?>"
+                    class="btn btn-primary">
+                    <?= e(trans('backend::lang.form.save')) ?>
+                </button>
+                <button
+                    type="button"
+                    data-request="onSave"
+                    data-request-data="close:1"
+                    data-hotkey="ctrl+enter, cmd+enter"
+                    data-load-indicator="<?= e(trans('backend::lang.form.saving')) ?>"
+                    class="btn btn-default">
+                    <?= e(trans('backend::lang.form.save_and_close')) ?>
+                </button>
+                <button
+                    type="button"
+                    class="oc-icon-trash-o btn-icon danger pull-right"
+                    data-request="onDelete"
+                    data-load-indicator="<?= e(trans('backend::lang.form.deleting')) ?>"
+                    data-request-confirm="<?= e(trans('backend::lang.form.confirm_delete')) ?>">
+                </button>
+
+                <span class="btn-text">
+                    <?= e(trans('backend::lang.form.or')) ?> <a href="<?= Backend::url('akami/tps/portfoliocategory') ?>"><?= e(trans('backend::lang.form.cancel')) ?></a>
+                </span>
+            </div>
+        </div>
+    <?= Form::close() ?>
+
+<?php else: ?>
+    <p class="flash-message static error"><?= e(trans($this->fatalError)) ?></p>
+    <p><a href="<?= Backend::url('akami/tps/portfoliocategory') ?>" class="btn btn-default"><?= e(trans('backend::lang.form.return_to_list')) ?></a></p>
+<?php endif ?>

plugins/akami/tps/models/Portfolio.php

@@ -27,6 +27,20 @@ class Portfolio extends Model
     
     public $translatable = ['header', 'txt'];
     
+    
+    public $belongsTo = [
+        'category' => \Akami\Tps\Models\PortfolioCategory::class
+    ];
+    
+    
+    public function scopeGetBYCategory($query, $id)
+    {    
+        if($id){
+            return $query->where('category_id', $id);
+        }
+    }
+    
+    
     public $jsonable = ['img'];
 
     /**

plugins/akami/tps/models/PortfolioCategory.php

@@ -0,0 +1,33 @@
+<?php namespace Akami\Tps\Models;
+
+use Model;
+
+/**
+ * Model
+ */
+class PortfolioCategory extends Model
+{
+    use \October\Rain\Database\Traits\Validation;
+    
+    use \October\Rain\Database\Traits\SoftDelete;
+
+    protected $dates = ['deleted_at'];
+
+
+    /**
+     * @var string The database table used by the model.
+     */
+    public $table = 'akami_tps_categories';
+    
+   public $implement = [
+    '@RainLab.Translate.Behaviors.TranslatableModel',
+    ];
+    
+    public $translatable = ['name'];
+
+    /**
+     * @var array Validation rules
+     */
+    public $rules = [
+    ];
+}

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

@@ -8,3 +8,8 @@ columns:
     txt:
         label: txt
         type: text
+    category_id:
+        label: Category
+        type: text
+        select: name
+        relation: category

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

@@ -17,6 +17,17 @@ fields:
             fields:
                 content:
                     label: IMG
-                    mode: file
+                    mode: image
-                    span: full
+                    imageWidth: '250'
+                    span: left
                     type: mediafinder
+                name:
+                    label: Name
+                    span: right
+                    type: text
+    category:
+        label: Category
+        span: auto
+        nameFrom: name
+        descriptionFrom: description
+        type: relation

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

@@ -0,0 +1,7 @@
+columns:
+    name:
+        label: name
+        type: text
+    note:
+        label: note
+        type: text

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

@@ -0,0 +1,9 @@
+fields:
+    name:
+        label: Name
+        span: auto
+        type: text
+    note:
+        label: Note
+        span: auto
+        type: textarea

plugins/akami/tps/plugin.yaml

@@ -34,3 +34,7 @@ navigation:
                 label: Portfolio
                 url: akami/tps/portfolio
                 icon: icon-star
+            side-menu-item7:
+                label: 'Portfolio Categories'
+                url: akami/tps/portfoliocategory
+                icon: icon-sliders

plugins/akami/tps/updates/builder_table_create_akami_tps_categories.php

@@ -0,0 +1,26 @@
+<?php namespace Akami\Tps\Updates;
+
+use Schema;
+use October\Rain\Database\Updates\Migration;
+
+class BuilderTableCreateAkamiTpsCategories extends Migration
+{
+    public function up()
+    {
+        Schema::create('akami_tps_categories', function($table)
+        {
+            $table->engine = 'InnoDB';
+            $table->increments('id')->unsigned();
+            $table->timestamp('created_at')->nullable();
+            $table->timestamp('updated_at')->nullable();
+            $table->timestamp('deleted_at')->nullable();
+            $table->string('name')->nullable();
+            $table->text('note')->nullable();
+        });
+    }
+    
+    public function down()
+    {
+        Schema::dropIfExists('akami_tps_categories');
+    }
+}

plugins/akami/tps/updates/builder_table_update_akami_tps_portfolio_2.php

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

plugins/akami/tps/updates/version.yaml

@@ -27,3 +27,9 @@
 1.0.10:
     - 'Updated table akami_tps_service_page'
     - builder_table_update_akami_tps_service_page_2.php
+1.0.11:
+    - 'Created table akami_tps_categories'
+    - builder_table_create_akami_tps_categories.php
+1.0.12:
+    - 'Updated table akami_tps_portfolio'
+    - builder_table_update_akami_tps_portfolio_2.php

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

@@ -895,6 +895,16 @@
             }
         }
     }
+
+    .slick {
+        &-dots {
+            li {
+                &:nth-of-type(n+12) {
+                    display: none;
+                }
+            }
+        }
+    }
 }
 
 // Client end =========================

themes/tps/assets/css/main.css

@@ -1802,6 +1802,9 @@ svg.active .svg-elem-21 {
   -webkit-transform: scale(1.05);
           transform: scale(1.05);
 }
+.client .slick-dots li:nth-of-type(n+12) {
+  display: none;
+}
 
 .title-animate {
   animation: typing 3.5s steps(40, end);
@@ -2658,7 +2661,6 @@ svg.active .svg-elem-21 {
   .about_video-box {
     height: 470px;
   }
-
   .gallery {
     padding: 80px 0;
   }
@@ -2668,7 +2670,6 @@ svg.active .svg-elem-21 {
   .gallery .gal_slider-item {
     height: 300px !important;
   }
-
   .service.page .service_box {
     width: calc(100% + 60px);
   }
@@ -2689,7 +2690,6 @@ svg.active .svg-elem-21 {
   .hero .page_box-link {
     font-size: 16px;
   }
-
   .about_box {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
@@ -2724,14 +2724,12 @@ svg.active .svg-elem-21 {
     width: 13px;
     height: 17px;
   }
-
   .service_item-title {
     font-size: 14px;
   }
   .service_item-txt {
     font-size: 13px;
   }
-
   .contact {
     padding: 70px 0;
   }
@@ -2739,7 +2737,6 @@ svg.active .svg-elem-21 {
     font-size: 30px;
     margin-bottom: 30px;
   }
-
   .client_title {
     font-size: 30px;
     margin-bottom: 30px;
@@ -2757,7 +2754,6 @@ svg.active .svg-elem-21 {
   .client_item {
     height: 145px !important;
   }
-
   .footer .logo {
     width: 160px;
     height: 55px;
@@ -2767,7 +2763,6 @@ svg.active .svg-elem-21 {
   .auto_container {
     padding: 0 35px;
   }
-
   .header .burger {
     display: -webkit-box;
     display: -ms-flexbox;
@@ -2902,7 +2897,10 @@ svg.active .svg-elem-21 {
   .header .nav .service_nav {
     top: -100px;
   }
+<<<<<<< HEAD
 
+=======
+>>>>>>> 4d144c51944115d184406427a566d71cd39df45d
   .hero_item-title {
     font-size: 22px;
   }
@@ -2944,7 +2942,6 @@ svg.active .svg-elem-21 {
     object-fit: contain;
     -o-object-fit: contain;
   }
-
   .about {
     padding: 35px 0 120px;
   }
@@ -2954,14 +2951,20 @@ svg.active .svg-elem-21 {
   .about_video-box {
     height: 385px;
   }
+<<<<<<< HEAD
 
+=======
+>>>>>>> 4d144c51944115d184406427a566d71cd39df45d
   .about.page .about_box-item-title {
     font-size: 18px;
   }
   .about.page .about_box-item-txt {
     font-size: 14px;
   }
+<<<<<<< HEAD
 
+=======
+>>>>>>> 4d144c51944115d184406427a566d71cd39df45d
   .contact_box {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
@@ -2986,7 +2989,6 @@ svg.active .svg-elem-21 {
     width: 100%;
     margin-left: 0;
   }
-
   .service .inner {
     height: 600px;
   }
@@ -3005,14 +3007,16 @@ svg.active .svg-elem-21 {
   .gallery_box-item {
     width: calc(50% - 2px);
   }
-
   .service.page .service_box {
     width: calc(100% + 70px);
   }
   .service.page .service_box .slick-list {
     padding: 0 170px 0 0 !important;
   }
+<<<<<<< HEAD
 
+=======
+>>>>>>> 4d144c51944115d184406427a566d71cd39df45d
   .about.page .about_box-item {
     width: calc(50% - 82px);
   }
@@ -3038,7 +3042,6 @@ svg.active .svg-elem-21 {
   .header .logo_group-txt {
     width: 95px;
   }
-
   .crumb {
     padding: 180px 0 40px;
   }
@@ -3049,7 +3052,6 @@ svg.active .svg-elem-21 {
     line-height: 30px;
     font-size: 14px;
   }
-
   .hero_item {
     height: 800px !important;
   }
@@ -3077,7 +3079,6 @@ svg.active .svg-elem-21 {
     width: 17px;
     right: -24px;
   }
-
   .about {
     padding-top: 0;
   }
@@ -3104,7 +3105,6 @@ svg.active .svg-elem-21 {
     width: 13px;
     height: 13px;
   }
-
   .contact {
     padding: 50px 0;
   }
@@ -3122,7 +3122,6 @@ svg.active .svg-elem-21 {
     padding: 12px 30px;
     line-height: 30px;
   }
-
   .client_title {
     font-size: 26px;
     margin-bottom: 25px;
@@ -3137,7 +3136,6 @@ svg.active .svg-elem-21 {
     width: 12px;
     height: 12px;
   }
-
   .footer_box {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
@@ -3152,7 +3150,6 @@ svg.active .svg-elem-21 {
     line-height: 30px;
     text-align: center;
   }
-
   .gallery_box-item {
     width: calc(50% - 2px);
     height: 245px;
@@ -3167,14 +3164,16 @@ svg.active .svg-elem-21 {
   .gallery .gal_slider-item {
     height: 245px !important;
   }
-
   .service.page .service_box-item {
     min-width: 390px;
   }
   .service.page .service_box-item-photo {
     height: 280px;
   }
+<<<<<<< HEAD
 
+=======
+>>>>>>> 4d144c51944115d184406427a566d71cd39df45d
   .main_title {
     font-size: 20px;
   }
@@ -3204,7 +3203,6 @@ svg.active .svg-elem-21 {
   .gallery_box-item {
     width: calc(100% - 2px);
   }
-
   .service.page .service_box {
     width: 100%;
   }
@@ -3225,11 +3223,17 @@ svg.active .svg-elem-21 {
   .service.page .service_list li p {
     line-height: 28px;
   }
+<<<<<<< HEAD
 
   .about.page .about_box-item {
     width: calc(100% - 82px);
   }
 
+=======
+  .about.page .about_box-item {
+    width: calc(100% - 82px);
+  }
+>>>>>>> 4d144c51944115d184406427a566d71cd39df45d
   .modal_inner {
     height: unset;
   }
@@ -3238,11 +3242,9 @@ svg.active .svg-elem-21 {
   .auto_container {
     padding: 0 20px;
   }
-
   .header {
     top: 30px;
   }
-
   .crumb {
     padding: 180px 0 40px;
   }
@@ -3253,18 +3255,15 @@ svg.active .svg-elem-21 {
     line-height: 30px;
     font-size: 14px;
   }
-
   .hero_item {
     height: 700px !important;
   }
-
   .about {
     margin-top: -20px;
   }
   .about_video-box {
     height: 230px;
   }
-
   .service.page .service_box {
     width: calc(100% + 0px);
   }

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

@@ -0,0 +1,119 @@
+@mixin transition {
+    transition: all 0.2s ease-in-out 0s;
+    -moz-transition: all 0.2s ease-in-out 0s;
+}
+
+@mixin transformY {
+    transform: translateY(-50%);
+    -moz-ransform: translateY(-50%);
+    -o-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    -webkit-transform: translateY(-50%);
+}
+
+@mixin transformX {
+    transform: translateX(-50%);
+    -moz-ransform: translateX(-50%);
+    -o-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    -webkit-transform: translateX(-50%);
+}
+
+@mixin transform {
+    transform: translate(-50%, -50%);
+    -moz-ransform: translate(-50%, -50%);
+    -o-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    -webkit-transform: translate(-50%, -50%);
+}
+
+@mixin transformReset {
+    transform: translate(0, 0);
+    -moz-ransform: translate(0, 0);
+    -o-transform: translate(0, 0);
+    -ms-transform: translate(0, 0);
+    -webkit-transform: translate(0, 0);
+}
+
+@mixin rotate {
+    transform: rotate(90deg);
+    -webkit-transform: rotate(90deg);
+    -o-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+}
+
+@mixin ImgCon {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    -o-object-fit: contain;
+}
+
+@mixin ImgCov {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    -o-object-fit: cover;
+}
+
+// @mixin height {
+//     @media (max-height: 390px) {
+//         @content;
+//     }
+// }
+
+@mixin sm-lg {
+    @media (max-width: 380px) {
+        @content;
+    }
+}
+
+@mixin md-xsm {
+    @media (max-width: 400px) {
+        @content;
+    }
+}
+
+
+@mixin md-sm {
+    @media (max-width: 650px) {
+        @content;
+    }
+}
+
+@mixin lg-lg {
+    @media (max-width: 750px) {
+        @content;
+    }
+}
+
+@mixin lg-xlg {
+    @media (max-width: 1000px) {
+        @content;
+    }
+}
+
+@mixin lg-xxlg {
+    @media (max-width: 1100px) {
+        @content;
+    }
+}
+
+@mixin xlg-xxlg {
+    @media (max-width: 1200px) {
+        @content;
+    }
+}
+
+@mixin xlg-xxxlg {
+    @media (max-width: 1400px) {
+        @content;
+    }
+}
+
+@mixin forSlider-1 {
+    @media (max-width: 1530px) {
+        @content;
+    }
+}

themes/tps/assets/new/css/components/1-main/nulifier.scss

@@ -0,0 +1,135 @@
+*,
+*::before,
+*::after {
+    margin: 0px;
+    padding: 0px;
+    border: none;
+    outline: none;
+
+    scroll-behavior: smooth;
+}
+
+button {
+    outline: none;
+}
+
+button:focus {
+    outline: none;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+/*** 
+====================================================================
+    Global Settings
+====================================================================
+***/
+
+body {
+    font-family: 'Montserrat', sans-serif;
+    font-size: 14px;
+    color: #000;
+    line-height: 1.7em;
+    font-weight: 400;
+    background: #fff;
+    position: relative;
+
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-font-smoothing: antialiased;
+}
+
+body.active {
+    overflow: hidden;
+}
+
+a {
+    text-decoration: none;
+    color: #000;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    position: relative;
+    font-weight: normal;
+    margin: 0px;
+    background: none;
+    line-height: 1.6em;
+}
+
+/* Typography */
+h1 {
+    font-size: 4em;
+}
+
+h2 {
+    font-size: 40px;
+}
+
+h3 {
+    font-size: 34px;
+}
+
+h4 {
+    font-size: 22px;
+}
+
+h5 {
+    font-size: 20px;
+}
+
+h6 {
+    font-size: 18px;
+}
+
+p {
+    position: relative;
+    line-height: 1.8em;
+}
+
+.auto_container {
+    position: relative;
+    max-width: 1500px;
+    padding: 0px 60px;
+    margin: 0 auto;
+}
+
+ul,
+li {
+    list-style: none;
+    padding: 0px;
+    margin: 0px;
+}
+
+/* width */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+    background: #fff;
+    border: 1px solid #DFDFDF;
+    border-radius: 10px;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+    background: #DFDFDF;
+    border-radius: 10px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+    background: #DFDFDF;
+}

themes/tps/assets/new/css/components/1-main/variables.scss

@@ -0,0 +1,6 @@
+$gray: rgba(241, 241, 241, 1);
+$black: #3B3B3B;
+$blue: #6ec9c7;
+$white: #ffffff;
+
+$main-color: #2B72B6;

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

@@ -0,0 +1,19 @@
+// Crumb =================
+.crumb {
+        // padding: 220px 0 50px;
+    // background: url("../images/mini_banner.png") no-repeat center;
+    // background-size: cover;
+    padding: 50px 0 0;
+
+    &_title {
+        font-weight: 700;
+        font-size: 28px;
+        line-height: 46px;
+    }
+
+    &_txt {
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 30px;
+    }
+}

themes/tps/assets/new/css/components/2-layout/footer.scss

@@ -0,0 +1,27 @@
+// Footer ================
+.footer {
+    padding: 30px 0;
+    background: #000;
+
+    &_box {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .logo {
+        width: 200px;
+        height: 70px;
+
+        img {
+            @include ImgCon;
+        }
+    }
+
+    .copyright {
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 32px;
+        color: #fff;
+    }
+}

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

@@ -0,0 +1,607 @@
+// Header =============================
+
+.header {
+    padding: 20px 0;
+    z-index: 50;
+    background: #000;
+    position: relative;
+
+    &_row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .logo {
+        display: flex;
+        align-items: center;
+        position: relative;
+
+        svg {
+            @include ImgCon;
+            position: relative;
+        }
+
+        &_bg {
+            width: 70px;
+            height: 70px;
+            display: block;
+
+            svg,
+            img {
+                @include ImgCon;
+            }
+        }
+
+        &_group {
+            position: relative;
+            margin-right: 10px;
+
+            &-txt {
+                width: 120px;
+                height: 30px;
+                overflow: hidden;
+
+                svg {
+                    @include ImgCon;
+                    position: relative;
+                }
+            }
+
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+
+        &_inner {
+            &-text {
+                font-size: 18px;
+                font-weight: 900;
+                line-height: 1;
+                color: #6A6A6A;
+
+                position: absolute;
+                top: 53%;
+                left: 50%;
+                @include transform;
+            }
+        }
+    }
+
+    .nav {
+        position: relative;
+
+        ul {
+            display: flex;
+            align-items: center;
+
+            li {
+                margin-right: 60px;
+                position: relative;
+
+                &:last-child {
+                    margin-right: 0;
+                }
+
+                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;
+                    // }
+                }
+            }
+        }
+
+        &_contact {
+            padding: 20px;
+            box-shadow: inset 0 0 0 2px #fff;
+            transition: color 0.25s 0.0833333333s;
+            position: relative;
+
+            &:focus {
+                outline: 2px dotted #ccc;
+            }
+
+            &:hover {
+                color: #ccc;
+
+
+                &::before,
+                &::after {
+                    border-color: #ccc;
+                    transition: border-color 0s, width 0.25s, height 0.25s;
+                    width: 100%;
+                    height: 100%;
+                }
+
+                &::before {
+                    transition-delay: 0s, 0s, 0.25s;
+                }
+
+                &::after {
+                    transition-delay: 0s, 0.25s, 0s;
+                }
+            }
+
+            &::before,
+            &::after {
+                border: 0 solid transparent;
+                box-sizing: border-box;
+                content: "";
+                pointer-events: none;
+                position: absolute;
+                width: 0;
+                height: 0;
+                bottom: 0;
+                right: 0;
+            }
+
+            &::before {
+                border-bottom-width: 4px;
+                border-left-width: 4px;
+            }
+
+            &::after {
+                border-top-width: 4px;
+                border-right-width: 4px;
+            }
+        }
+
+        .service_nav {
+            background: rgba(0, 0, 0, .7);
+
+            position: absolute;
+            top: calc(100% + 60px);
+            left: 50%;
+            @include transformX;
+            white-space: nowrap;
+            z-index: 3;
+            min-width: 400px;
+            text-align: center;
+
+            opacity: 0;
+            pointer-events: none;
+            transition: .4s linear;
+
+            &.active {
+                top: calc(100% + 20px);
+                opacity: 1;
+                pointer-events: unset;
+            }
+
+            a {
+                display: block;
+                font-weight: 500;
+                font-size: 16px;
+                line-height: 20px;
+                color: #fff;
+                @include transition;
+                padding: 20px 0;
+
+                &:hover {
+                    background: $main-color;
+                    color: #fff;
+                }
+
+            }
+        }
+    }
+
+    .lang {
+        position: relative;
+
+        &_current {
+            display: flex;
+            align-items: center;
+            position: relative;
+            margin-right: 20px;
+            cursor: pointer;
+
+            h6 {
+                position: relative;
+                display: block;
+
+                font-weight: 500;
+                font-size: 14px;
+                line-height: 20px;
+                color: #FFFFFF;
+
+                &::after {
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    right: -20px;
+                    @include transformY;
+
+                    width: 8px;
+                    height: 4px;
+                    clip-path: polygon(0 0, 50% 100%, 100% 0);
+                    background: #fff;
+                }
+            }
+        }
+
+        &_icon {
+            width: 20px;
+            height: 20px;
+            margin-right: 10px;
+
+            img {
+                @include ImgCon;
+            }
+        }
+
+        &_drop {
+            position: absolute;
+            top: calc(100% + 50px);
+            left: 50%;
+            @include transformX;
+            background: rgba(0, 0, 0, .7);
+            color: #fff;
+            width: 120px;
+
+            opacity: 0;
+            pointer-events: none;
+            transition: .3s linear;
+
+            &.active {
+                opacity: 1;
+                pointer-events: unset;
+                top: calc(100% + 20px);
+            }
+
+            &-link {
+                color: #fff !important;
+                display: block;
+                text-align: center;
+                text-transform: uppercase;
+
+                font-size: 15px;
+                font-weight: 500;
+                line-height: 1.4;
+                padding: 7px;
+                @include transition;
+
+                &:hover {
+                    background: $main-color !important;
+                    color: #fff !important;
+                }
+
+            }
+        }
+    }
+
+    .burger {
+        display: none;
+    }
+}
+
+// Header end =========================
+
+@keyframes logo-bg {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@-webkit-keyframes logo-bg {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes inner-txt {
+    0% {
+        opacity: 0;
+    }
+
+    85% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes inner-txt {
+    0% {
+        opacity: 0;
+    }
+
+    85% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes group-txt {
+    0% {
+        transform: translateX(-150%);
+        opacity: 0;
+    }
+
+    100% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes group-txt {
+    0% {
+        transform: translateX(-150%);
+        opacity: 0;
+    }
+
+    100% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+.logo-bg-animate {
+    animation: logo-bg .8s linear;
+    -webkit-animation: logo-bg .8s linear;
+}
+
+.inner-txt-animte {
+    animation: inner-txt 1s linear;
+    -webkit-animation: inner-txt 1s linear;
+}
+
+.group-txt-animte {
+    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/new/css/components/2-layout/modal.scss

@@ -0,0 +1,69 @@
+// Modal ===========================
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, .5);
+    backdrop-filter: blur(5px);
+    z-index: 50;
+
+    display: none;
+
+    &.active {
+        display: block;
+
+        .modal_inner {
+            top: 50%;
+            opacity: 1;
+        }
+    } 
+
+    &_inner {
+        position: absolute;
+        top: 60%;
+        left: 50%;
+        @include transform;
+        max-width: 900px;
+        width: calc(100% - 120px);
+        max-height: 450px;
+        height: calc(100% - 150px);
+        padding: 70px 50px;
+        background: rgba(0, 0, 0, .5);
+        backdrop-filter: 5px;
+        @include transition;
+        opacity: 0.3;
+        display: block;
+    }
+
+    &_close {
+        position: absolute;
+        top: 30px;
+        right: 30px;
+        cursor: pointer;
+        width: 20px;
+        height: 20px;
+
+        &:hover {
+            svg path {
+                fill: red
+            }
+        }
+
+        svg {
+            @include ImgCon;
+            @include transition;
+            pointer-events: none;
+        }
+    }
+
+    &_video {
+        width: 100%;
+        height: 100%;
+
+        video {
+            @include ImgCon;
+        }
+    }
+}

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

@@ -0,0 +1,912 @@
+// 1400 ========================
+@include xlg-xxxlg {
+
+    // About ================
+    .about {
+        &_video {
+            &-box {
+                height: 470px;
+            }
+        }
+    }
+
+    // Gallery ==============
+    .gallery {
+        padding: 80px 0;
+
+        &_box {
+            &-item {
+                height: 300px;
+            }
+        }
+
+        .gal {
+            &_slider {
+                &-item {
+                    height: 300px !important;
+                }
+            }
+        }
+    }
+
+    // Service Page ===============
+    .service.page {
+        .service {
+            &_box {
+                width: calc(100% + 60px);
+
+                .slick-list {
+                    padding: 0 60px 0 0 !important;
+                }
+            }
+
+        }
+    }
+
+}
+
+// 1200 ========================
+@include xlg-xxlg {
+
+    // Hero ==============
+    .hero {
+        &_item {
+            &-title {
+                font-size: 30px;
+            }
+
+            &-txt {
+                margin: 20px 0;
+            }
+
+            &-link {
+                font-size: 14px;
+            }
+        }
+
+        .page {
+            &_box {
+                &-link {
+                    font-size: 16px;
+                }
+            }
+        }
+    }
+
+    // About ================
+    .about {
+
+        &_video {
+            &-box {
+                height: 430px;
+
+                .video_play {
+                    width: 65px;
+                    height: 65px;
+
+                    &::before {
+                        width: 13px;
+                        height: 17px;
+                    }
+                }
+            }
+        }
+    }
+
+    // Service ===============
+    .service {
+        &_item {
+            &-title {
+                font-size: 14px;
+            }
+
+            &-txt {
+                font-size: 13px;
+            }
+        }
+    }
+
+    // Contact ===========
+    .contact {
+        padding: 70px 0;
+
+        &_title {
+            font-size: 30px;
+            margin-bottom: 30px;
+        }
+    }
+
+    // Client ================
+    .client {
+        &_title {
+            font-size: 30px;
+            margin-bottom: 30px;
+        }
+
+        &_box {
+            .slick-next {
+                width: 30px;
+                height: 30px;
+                right: -35px;
+            }
+
+            .slick-prev {
+                width: 30px;
+                height: 30px;
+                left: -35px;
+            }
+        }
+
+        // &_item {
+        //     height: 145px !important;
+        // }
+    }
+
+    // Footer =============
+    .footer {
+        .logo {
+            width: 160px;
+            height: 55px;
+        }
+    }
+
+}
+
+// 1100 =======================
+@include lg-xxlg {
+
+    .auto_container {
+        padding: 0 35px;
+    }
+
+    // Header ==================
+    .header {
+
+        .burger {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            cursor: pointer;
+            width: 30px;
+            height: 25px;
+            position: relative;
+
+            &.active {
+                span {
+                    background: transparent;
+
+                    &::before {
+                        transform: rotate(45deg);
+                        width: 25px;
+                        height: 1.5px;
+                        top: 0;
+                    }
+
+                    &::after {
+                        width: 25px;
+                        height: 1.5px;
+                        transform: rotate(-45deg);
+                        bottom: 0;
+                    }
+                }
+            }
+
+            span {
+                position: relative;
+                display: block;
+                width: 20px;
+                height: 1.5px;
+                background: #fff;
+
+                @include transition;
+
+                &::before {
+                    content: '';
+                    position: absolute;
+                    top: -7px;
+                    right: 0;
+                    width: 30px;
+                    height: 1.5px;
+                    background: #fff;
+
+                    @include transition;
+                }
+
+                &::after {
+                    content: '';
+                    position: absolute;
+                    bottom: -7px;
+                    right: 0;
+                    width: 10px;
+                    height: 1.5px;
+                    background: #fff;
+
+                    @include transition;
+                }
+            }
+        }
+
+        .lang {
+            &_drop {
+                background: transparent;
+                color: #fff;
+                display: flex;
+                justify-content: center;
+
+                &.active {
+                    top: calc(100% + 7px);
+                }
+
+                &-link {
+                    color: #fff !important;
+                    padding: 7px 15px;
+                    position: relative;
+                    font-size: 16px !important;
+
+                    &:first-child {
+                        &::before {
+                            content: none;
+                        }
+
+                        &::after {
+                            content: '';
+                            position: absolute;
+                            top: 0;
+                            right: 0;
+                            background: #fff;
+                            height: 100%;
+                            width: 1px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .nav {
+            &_bg {
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background: rgba(0, 0, 0, .7);
+                backdrop-filter: blur(8px);
+
+                opacity: 0;
+                pointer-events: none;
+                transform: scale(0);
+
+                transition: all .3s linear;
+                -ms-transition: all .3s linear;
+                -moz-transition: all .3s linear;
+                -webkit-transition: all .3s linear;
+
+                &.active {
+                    opacity: 1;
+                    pointer-events: unset;
+                    transform: scale(1);
+                }
+            }
+
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 100%;
+            height: 100%;
+
+            ul {
+                flex-direction: column;
+                justify-content: center;
+                height: 100%;
+
+                align-items: unset;
+                width: calc(100% - 90px);
+                max-width: 450px;
+                margin: 0 auto;
+
+                li {
+                    margin-right: 0;
+                    margin-bottom: 30px;
+
+                    &:last-child {
+                        margin-bottom: 0;
+                        margin-top: 30px;
+                    }
+
+                    a {
+                        font-size: 18px;
+                        padding-left: 20px;
+                        position: relative;
+
+                        &::before {
+                            content: '';
+                            position: absolute;
+                            top: 0;
+                            left: 0;
+                            width: 1px;
+                            height: 100%;
+                            background: #fff;
+                        }
+                    }
+                }
+            }
+
+            .service_nav {
+                text-align: left;
+                position: relative;
+                top: unset;
+                left: unset;
+                transform: translate(0, 0);
+                opacity: 1;
+                pointer-events: unset;
+                background-color: unset;
+                min-width: none;
+
+                &-link {
+                    display: none;
+                }
+
+                &.active {
+                    top: unset;
+                }
+
+                a {
+                    font-size: 18px;
+                    padding: 0;
+                    padding-left: 20px;
+                    margin-bottom: 30px;
+
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                }
+            }
+
+            &_contact {
+                text-align: center;
+            }
+        }
+
+    }
+
+    // Hero =====================
+    .hero {
+        &_item {
+            &-title {
+                font-size: 22px;
+            }
+
+            &-txt {
+                font-size: 15px;
+            }
+
+            &-link {
+                font-size: unset;
+
+                a {
+                    font-size: 14px;
+                    padding: 10px 25px;
+                }
+            }
+        }
+
+        .swiper {
+            &-pagination {
+                &-bullet {
+                    width: 10px;
+                    height: 10px;
+
+                    &-active {
+                        &::after {
+                            width: 5px;
+                            height: 5px;
+                        }
+                    }
+                }
+            }
+
+            &-button {
+                &-prev {
+                    span {
+                        width: 13px;
+                        height: 20px;
+
+                        svg {
+                            @include ImgCon;
+                        }
+                    }
+                }
+
+                &-next {
+                    span {
+                        width: 13px;
+                        height: 20px;
+
+                        svg {
+                            @include ImgCon;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    // About ================
+    .about {
+        &_video {
+            &-box {
+                height: 385px;
+            }
+        }
+    }
+
+    // About Page ====================
+    .about.page {
+        .about {
+            &_box {
+                &-item {
+                    &-title {
+                        font-size: 18px;
+                    }
+
+                    &-txt {
+                        font-size: 14px;
+                    }
+                }
+            }
+        }
+    }
+
+    // Contact ===============
+    .contact {
+        &_box {
+            flex-direction: column;
+        }
+
+        &_form {
+            width: 100%;
+            margin-right: 0;
+            margin-bottom: 60px;
+        }
+
+        &_input {
+            input {
+                font-size: 14px;
+            }
+
+            textarea {
+                font-size: 14px;
+            }
+        }
+
+        &_btn {
+            padding: 14px 30px;
+        }
+
+        &_info {
+            width: 100%;
+            margin-left: 0;
+        }
+    }
+
+}
+
+// 1000 ======================
+@include lg-xlg {
+
+    // Gallery =================
+    .gallery {
+        &_box {
+            flex-wrap: wrap;
+
+            &-item {
+                width: calc(50% - 2px);
+            }
+        }
+    }
+
+    // Service Page =================
+    .service.page {
+        .service {
+            &_box {
+                width: calc(100% + 70px);
+
+                .slick-list {
+                    padding: 0 170px 0 0 !important;
+                }
+            }
+        }
+    }
+
+    // About Page ====================
+    .about.page {
+        .about {
+            &_box {
+                &-item {
+                    width: calc(50% - 82px);
+                }
+            }
+        }
+    }
+}
+
+// 750 ========================
+@include lg-lg {
+
+    // Header =================
+    .header {
+        .logo {
+            &_bg {
+                width: 55px;
+                height: 55px;
+            }
+
+            &_inner {
+                &-text {
+                    width: 30px;
+                    height: 30px;
+                    top: 50%;
+                    font-size: unset;
+                    display: block;
+
+                    svg {
+                        @include ImgCon;
+                    }
+                }
+            }
+
+            &_group {
+                &-txt {
+                    width: 95px;
+
+                }
+            }
+        }
+    }
+
+    // Crumb =================
+    .crumb {
+        // padding: 180px 0 40px;
+        // padding: ;
+
+        &_title {
+            font-size: 24px;
+        }
+
+        &_txt {
+            line-height: 30px;
+            font-size: 14px;
+        }
+    }
+
+    // Hero ====================
+    .hero {
+        &_item {
+            height: 800px !important;
+
+            &-title {
+                font-size: 18px;
+            }
+        }
+
+        &_pag {
+            display: none;
+        }
+
+        .page {
+            &_box {
+                top: -50px;
+
+                &-group {
+                    padding: 20px 50px 20px 0;
+
+                    &::before {
+                        width: 1500px;
+                        left: -1499px;
+                    }
+                }
+
+                &-link {
+                    font-size: 14px;
+
+                    &::after {
+                        top: 5px;
+                        width: 17px;
+                        right: -24px;
+                    }
+                }
+            }
+        }
+    }
+
+    // Service ================
+    .service {
+        height: calc(100vh - 95px);
+    }
+
+    // Service end ============
+
+    // About ==================
+    .about {
+        padding-top: 0;
+
+        &_video {
+            &-box {
+                height: unset;
+
+                .video_play {
+                    width: 54px;
+                    height: 54px;
+
+                    &::before {
+                        width: 13px;
+                        height: 13px;
+                    }
+                }
+            }
+        }
+
+    }
+
+    // Contact =================
+    .contact {
+        padding: 50px 0;
+
+        &_title {
+            font-size: 26px;
+            margin-bottom: 25px;
+        }
+
+        &_input {
+            input {
+                padding: 10px 20px;
+            }
+
+            textarea {
+                padding: 10px 20px;
+            }
+        }
+
+        &_btn {
+            padding: 12px 30px;
+            line-height: 30px;
+        }
+    }
+
+    // Clients ===================
+    .client {
+        &_title {
+            font-size: 22px;
+            margin-bottom: 25px;
+        }
+
+        &_box {
+            .slick {
+
+                &-next,
+                &-prev {
+                    display: none !important;
+                }
+
+                &-dots {
+                    li {
+                        &:nth-child(n+7) {
+                            display: none;
+                        }
+
+                        button {
+                            width: 12px;
+                            height: 12px;
+                        }
+                    }
+                }
+            }
+        }
+
+        &_item {
+            height: 60px !important;
+            padding: 15px;
+        }
+    }
+
+    // Footer =================
+    .footer {
+        &_box {
+            flex-direction: column;
+        }
+
+        .logo {
+            margin-bottom: 30px;
+        }
+
+        .copyright {
+            font-size: 14px;
+            line-height: 30px;
+            text-align: center;
+        }
+    }
+
+    // Gallery =================
+    .gallery {
+        &_box {
+            &-item {
+                width: calc(50% - 2px);
+                height: 245px;
+
+                &-title {
+                    font-size: 13px;
+                    line-height: 27px;
+                }
+
+                &-txt {
+                    font-size: 12px;
+                }
+            }
+        }
+
+        .gal {
+            &_slider {
+                &-item {
+                    height: 245px !important;
+                }
+            }
+        }
+    }
+
+    // Service Page ================
+    .service.page {
+        .service {
+            &_box {
+                &-item {
+                    min-width: 390px;
+
+                    &-photo {
+                        height: 280px;
+                    }
+                }
+            }
+        }
+    }
+
+    .main_title {
+        font-size: 20px;
+    }
+}
+
+// 650 =======================
+@include md-sm {
+    .auto_container {
+        padding: 0 20px;
+    }
+
+
+    // Gallery ==============
+    .gallery {
+        padding: 60px 0;
+
+        &_filter {
+            &-row {
+                flex-direction: column;
+                align-items: flex-start;
+
+                .category {
+                    margin-bottom: 30px;
+
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                }
+            }
+        }
+
+        &_box {
+            margin-top: 30px;
+
+            &-item {
+                width: calc(100% - 2px);
+            }
+        }
+    }
+
+    // Service Page ================
+    .service.page {
+        .service {
+            &_box {
+                width: 100%;
+
+                .slick-list {
+                    padding: 0 !important;
+                }
+
+                &-item {
+                    min-width: 280px;
+                    margin-right: 15px;
+
+                    &-photo {
+                        height: 240px;
+                    }
+
+                    &-title {
+                        font-size: 20px;
+                        line-height: 27px;
+                    }
+                }
+            }
+
+            &_list {
+                li {
+                    p {
+                        line-height: 28px;
+                    }
+                }
+            }
+        }
+    }
+
+    // About Page ====================
+    .about.page {
+        .about {
+            &_box {
+                &-item {
+                    width: calc(100% - 42px);
+                    margin: 20px 0;
+                }
+            }
+        }
+    }
+
+    // Modal =========================
+    .modal {
+        &_inner {
+            height: unset;
+        }
+    }
+
+}
+
+// 400 ===========================
+@include md-xsm {
+    .auto_container {
+        padding: 0 20px;
+    }
+
+    // Crumb =================
+    .crumb {
+        // padding: 180px 0 40px;
+
+        // &_title {
+        //     font-size: 26px;
+        // }
+
+        &_txt {
+            line-height: 30px;
+            font-size: 14px;
+        }
+    }
+
+    // Hero ==================
+    .hero {
+        &_item {
+            height: 700px !important;
+        }
+    }
+
+    // Service Page =================
+    .service.page {
+        .service {
+            &_box {
+                width: calc(100% + 0px);
+
+                &-item {
+                    min-width: unset !important;
+                    margin-right: 5px;
+                }
+
+                .slick-list {
+                    padding: 0 !important;
+                }
+            }
+        }
+    }
+}

themes/tps/assets/new/css/components/2-layout/select.scss

@@ -0,0 +1,101 @@
+.custom-select select {
+  display: none;
+}
+
+.custom-select {
+  position: relative;
+}
+
+.select-selected {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.4;
+
+  padding: 12px 40px 12px 20px;
+  cursor: pointer;
+
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid #ced4da;
+
+  &.select-arrow-active {
+    border-bottom: none;
+    border: 4px 4px 0 0;
+
+    &:after {
+      transform: translateY(-50%) rotate(225deg);
+    }
+  }
+
+  &::after {
+    position: absolute;
+    content: "";
+    top: 50%;
+    transform: translateY(-50%) rotate(45deg);
+    right: 20px;
+    width: 8px;
+    height: 8px;
+    z-index: 4;
+    border-bottom: 1.5px solid #868686;
+    border-right: 1.5px solid #868686;
+    @include transition;
+  }
+}
+
+.select-items {
+  position: absolute;
+  top: calc(100% + 10px);
+  left: 0;
+  right: 0;
+  z-index: 99;
+  cursor: pointer;
+  animation-name: select;
+  animation-duration: 0.3s;
+  background: #fff;
+
+  div {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 1.4;
+
+    color: black;
+    padding: 10px;
+    cursor: pointer;
+    @include transition;
+    background-color: rgba(200,200,200,.5);;
+    border: 1px solid #EDEDED;
+    border-radius: 4px;
+    margin-bottom: 2px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &:hover {
+      border: 1px solid #EDEDED;
+    }
+  }
+
+  &::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #ededed;
+    border-radius: 10px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #aeaeae;
+    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
+  }
+}
+
+.select-hide {
+  display: none;
+}
+
+.select-items div:hover,
+.same-as-selected {
+  background-color: rgba(250,250,250,.5);
+}

themes/tps/assets/new/css/components/2-layout/slick-theme.scss

@@ -0,0 +1,485 @@
+@charset "UTF-8";
+
+// Default Variables
+
+// Slick icon entity codes outputs the following
+// "\2190" outputs ascii character "←"
+// "\2192" outputs ascii character "→"
+// "\2022" outputs ascii character "•"
+
+$slick-font-path: "./fonts/" !default;
+$slick-font-family: "slick" !default;
+$slick-loader-path: "./" !default;
+$slick-arrow-color: #fff !default;
+$slick-dot-color: #000 !default;
+$slick-dot-color-active: $slick-dot-color !default;
+$slick-prev-character: "\2190" !default;
+$slick-next-character: "\2192" !default;
+$slick-dot-character: "\2022" !default;
+$slick-dot-size: 6px !default;
+$slick-opacity-default: 0.75 !default;
+$slick-opacity-on-hover: 1 !default;
+$slick-opacity-not-active: 0.25 !default;
+
+@function slick-image-url($url) {
+  @if function-exists(image-url) {
+    @return image-url($url);
+  }
+
+  @else {
+    @return url($slick-loader-path + $url);
+  }
+}
+
+// @function slick-font-url($url) {
+//   @if function-exists(font-url) {
+//     @return font-url($url);
+//   }
+
+//   @else {
+//     @return url($slick-font-path + $url);
+//   }
+// }
+
+/* Slider */
+
+
+/* Icons */
+// @if $slick-font-family=="slick" {
+//   @font-face {
+//     font-family: "slick";
+//     src: slick-font-url("slick.eot");
+//     src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"),
+//       slick-font-url("slick.woff") format("woff"),
+//       slick-font-url("slick.ttf") format("truetype"),
+//       slick-font-url("slick.svg#slick") format("svg");
+//     font-weight: normal;
+//     font-style: normal;
+//   }
+// }
+
+/* Arrows */
+
+.slick-prev,
+.slick-next {
+  position: absolute;
+  display: block;
+  height: 20px;
+  width: 20px;
+  line-height: 0px;
+  font-size: 0px;
+  cursor: pointer;
+  background: transparent;
+  color: transparent;
+  top: 50%;
+  -webkit-transform: translate(0, -50%);
+  -ms-transform: translate(0, -50%);
+  transform: translate(0, -50%);
+  padding: 0;
+  border: none;
+  outline: none;
+
+  &:hover,
+  &:focus {
+    outline: none;
+    background: transparent;
+    color: transparent;
+
+    &:before {
+      opacity: $slick-opacity-on-hover;
+    }
+  }
+
+  &.slick-disabled:before {
+    opacity: $slick-opacity-not-active;
+  }
+
+  &:before {
+    font-family: $slick-font-family;
+    font-size: 20px;
+    line-height: 1;
+    color: $slick-arrow-color;
+    opacity: $slick-opacity-default;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+.slick-prev {
+  left: -25px;
+
+  [dir="rtl"] & {
+    left: auto;
+    right: -25px;
+  }
+
+  &:before {
+    content: '';
+
+    [dir="rtl"] & {
+      // content: $slick-next-character;
+    }
+  }
+}
+
+// ====
+
+.client_box {
+  .slick-prev {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    -moz-transform: translateY(-50%);
+    -o-transform: translateY(-50%);
+    -webkit-transform: translateY(-50%);
+    left: -50px;
+    width: 40px;
+    height: 40px;
+    background: url("../images/svg/slider-arrow.svg") no-repeat center;
+    background-size: contain;
+    z-index: 4;
+  }
+
+  .slick-next {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%) rotate(180deg);
+    -ms-transform: translateY(-50%) rotate(180deg);
+    -moz-transform: translateY(-50%) rotate(180deg);
+    -o-transform: translateY(-50%) rotate(180deg);
+    -webkit-transform: translateY(-50%) rotate(180deg);
+    right: -50px;
+    width: 40px;
+    height: 40px;
+    background: url("../images/svg/slider-arrow.svg") no-repeat center;
+    background-size: contain;
+    z-index: 4;
+  }
+
+  .slick-dots {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    bottom: -50px;
+
+    li {
+      display: block;
+
+      button {
+        display: block;
+        width: 14px;
+        height: 14px;
+        border: 2px solid #D6D6D6;
+        opacity: 1;
+        background: transparent;
+        border-radius: 50%;
+      }
+
+
+      &.slick-active {
+        width: 14px;
+        height: 14px;
+      }
+
+      &.slick-active button {
+        border: 1px solid $main-color;
+        background-size: contain;
+        width: 14px;
+        height: 14px;
+        opacity: 1;
+        position: relative;
+        background: transparent;
+
+        &::after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          @include transform;
+          width: 50%;
+          height: 50%;
+          background: $main-color;
+          border-radius: 50%;
+        }
+      }
+    }
+  }
+}
+
+.hero_slider {
+  .slick-track {
+    display: flex;
+    align-items: center;
+  }
+
+  .slick-prev {
+    // position: absolute;
+    // top: 50%;
+    transform: translateY(0) rotate(180deg);
+    -ms-transform: translateY(0) rotate(180deg);
+    -moz-transform: translateY(0) rotate(180deg);
+    -o-transform: translateY(0) rotate(180deg);
+    -webkit-transform: translateY(0) rotate(180deg);
+    // left: 100px;
+    width: 36px;
+    height: 24px;
+    background: url("../images/svg/hero-slider-arrow.svg") no-repeat center;
+    background-size: contain;
+    z-index: 4;
+  }
+
+  .slick-next {
+    // position: absolute;
+    // top: 50%;
+    transform: translateY(0%);
+    -ms-transform: translateY(0%);
+    -moz-transform: translateY(0%);
+    -o-transform: translateY(0%);
+    -webkit-transform: translateY(0%);
+    // right: 100px;
+    width: 36px;
+    height: 24px;
+    background: url("../images/svg/hero-slider-arrow.svg") no-repeat center;
+    background-size: contain;
+    z-index: 4;
+  }
+
+  .slick-dots {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0 60px;
+    max-width: 1500px;
+    bottom: unset;
+    position: relative;
+    top: -50px;
+    margin: 0 auto;
+    padding-right: 30px;
+    z-index: 10;
+
+    li {
+      display: block;
+
+      button {
+        display: block;
+        width: 15px;
+        height: 15px;
+        border: 2.5px solid #fff;
+        opacity: .8;
+        border-radius: 50%;
+      }
+
+
+      &.slick-active {
+        width: 15px;
+        height: 15px;
+      }
+
+      &.slick-active button {
+        background: transparent;
+        background-size: contain;
+        width: 15px;
+        height: 15px;
+        border-radius: 50%;
+
+        &::after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          @include transform;
+          width: 6px;
+          height: 6px;
+          background: #fff;
+          border-radius: 50%;
+        }
+      }
+    }
+  }
+}
+
+.banner_box {
+  .slick-prev {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    -moz-transform: translateY(-50%);
+    -o-transform: translateY(-50%);
+    -webkit-transform: translateY(-50%);
+    left: -200px;
+    width: 36px;
+    height: 24px;
+    background: url("../images/svg/arrow_left.svg") no-repeat center;
+    background-size: contain;
+    z-index: 4;
+  }
+
+  .slick-next {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    -moz-transform: translateY(-50%);
+    -o-transform: translateY(-50%);
+    -webkit-transform: translateY(-50%);
+    right: -200px;
+    width: 36px;
+    height: 24px;
+    background: url("../images/svg/arrow_right.svg") no-repeat center;
+    background-size: contain;
+    z-index: 4;
+  }
+}
+
+.news {
+
+  .slick-track {
+    display: flex;
+    align-items: center;
+  }
+
+
+  .slick-prev {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    -moz-transform: translateY(-50%);
+    -o-transform: translateY(-50%);
+    -webkit-transform: translateY(-50%);
+    left: 200px;
+    width: 36px;
+    height: 24px;
+    background: url("../images/svg/arrow_left-gold.svg") no-repeat center;
+    background-size: contain;
+    z-index: 4;
+  }
+
+  .slick-next {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    -moz-transform: translateY(-50%);
+    -o-transform: translateY(-50%);
+    -webkit-transform: translateY(-50%);
+    right: 200px;
+    width: 36px;
+    height: 24px;
+    background: url("../images/svg/arrow_right-gold.svg") no-repeat center;
+    background-size: contain;
+    z-index: 4;
+  }
+
+  .slick-dots {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    bottom: -50px;
+
+    li {
+      display: block;
+
+      button {
+        display: block;
+        width: 12px;
+        height: 12px;
+        border: 2px solid #fff;
+        opacity: .3;
+        border-radius: 50%;
+      }
+
+
+      &.slick-active {
+        width: 30px;
+        height: 30px;
+      }
+
+      &.slick-active button {
+        background: url("../images/svg/dot.svg") no-repeat center !important;
+        background-size: contain;
+        width: 30px;
+        height: 30px;
+        border: none;
+      }
+    }
+  }
+
+}
+
+
+
+.slick-next {
+  right: -25px;
+
+  [dir="rtl"] & {
+    left: -25px;
+    right: auto;
+  }
+
+  &:before {
+    content: '';
+
+    [dir="rtl"] & {
+      content: $slick-prev-character;
+    }
+  }
+}
+
+/* Dots */
+
+// .slick-dotted.slick-slider {
+//   margin-bottom: 30px;
+// }
+
+.slick-dots {
+  position: absolute;
+  bottom: 32px;
+  list-style: none;
+  display: flex;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+
+  li {
+    position: relative;
+    // height: 14px;
+    // width: 14px;
+    cursor: pointer;
+    margin: 0 8px;
+
+    button {
+      border: 0;
+      display: block;
+      height: 14px;
+      width: 14px;
+      outline: none;
+      color: transparent;
+      border-radius: 50%;
+      background: rgba($color: $black, $alpha: 0.5);
+      cursor: pointer;
+      // margin: 0 8px;
+      @include transition;
+
+      &:focus {
+        outline: none;
+        background: $blue;
+      }
+    }
+
+    &.slick-active button {
+      background: $blue;
+      width: 28px;
+      border-radius: 10px;
+    }
+
+    // &.slick-active {
+    //   width: 28px;
+    // }
+  }
+}

themes/tps/assets/new/css/components/2-layout/slick.scss

@@ -0,0 +1,107 @@
+/* Slider */
+
+.slick-slider {
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -ms-touch-action: pan-y;
+    touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.slick-list {
+    position: relative;
+    overflow: hidden;
+    display: block;
+    margin: 0;
+    padding: 0;
+
+    &:focus {
+        outline: none;
+    }
+
+    &.dragging {
+        cursor: pointer;
+        cursor: hand;
+    }
+}
+
+.slick-slider .slick-track,
+.slick-slider .slick-list {
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    -o-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+}
+
+.slick-track {
+    position: relative;
+    left: 0;
+    top: 0;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+
+    &:before,
+    &:after {
+        content: "";
+        display: table;
+    }
+
+    &:after {
+        clear: both;
+    }
+
+    .slick-loading & {
+        visibility: hidden;
+    }
+}
+
+.slick-slide {
+    float: left;
+    height: 100%;
+    min-height: 1px;
+
+    [dir="rtl"] & {
+        float: right;
+    }
+
+    img {
+        display: block;
+    }
+
+    &.slick-loading img {
+        display: none;
+    }
+
+    display: none;
+
+    &.dragging img {
+        pointer-events: none;
+    }
+
+    .slick-initialized & {
+        display: block;
+    }
+
+    .slick-loading & {
+        visibility: hidden;
+    }
+
+    .slick-vertical & {
+        display: block;
+        height: auto;
+        border: 1px solid transparent;
+    }
+}
+
+.slick-arrow.slick-hidden {
+    display: none;
+}

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

@@ -0,0 +1,98 @@
+// About ================
+.about.page {
+    padding: 50px 0 0;
+
+    .about {
+        &_txt {
+            font-weight: 400;
+            font-size: 18px;
+            line-height: 30px;
+            color: #000000;
+
+            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;
+
+            &::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;
+            }
+
+            &-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;
+
+                color: #fff;
+
+                &-title {
+                    font-size: 22px;
+                    font-weight: 400;
+                    line-height: 1.4;
+                }
+
+                &-txt {
+                    margin-top: 20px;
+                    font-size: 16px;
+                    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/new/css/components/3-page/home.scss

@@ -0,0 +1,565 @@
+// Services =============================
+.service {
+    overflow: hidden;
+    height: calc(100vh - 110px);
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+
+    &_wrap {
+        position: relative;
+        height: 100%;
+    }
+
+    .inner {
+        // height: 860px;
+        height: 100%;
+        position: relative;
+    }
+
+    &_bg {
+        position: relative;
+        height: 100%;
+
+        &-image {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            // height: 860px;
+            height: 100%;
+
+            opacity: 0;
+            @include transition;
+            transition: opacity .5s linear;
+
+            background: url("../images/service-banner.png") no-repeat center;
+            background-size: cover;
+
+            &::after {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background: rgba(0, 0, 0, .5);
+            }
+
+            &.main {
+                opacity: 1;
+                z-index: -1;
+            }
+
+            img {
+                @include ImgCov;
+            }
+        }
+    }
+
+    &_info {
+        display: flex;
+        z-index: 4;
+
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        // overflow: auto;
+        overflow-x: auto;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+
+    &_item {
+        width: calc(16.66% - 1px);
+        min-width: 250px;
+        border-right: 1px solid rgba(250, 250, 250, .2);
+        color: #fff;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        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;
+        }
+
+        &:hover {
+            .service_item-title {
+                transform: translateY(0px);
+            }
+
+            .service_item-txt {
+                opacity: 1;
+            }
+        }
+
+        &-title {
+            padding: 30px 10px;
+            font-weight: 700;
+            font-size: 16px;
+            line-height: 20px;
+            position: relative;
+            transform: translateY(100px);
+            min-height: 40px;
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            background: rgba(0, 0, 0, .6);
+            width: calc(100% - 20px);
+
+            transition: .4s linear;
+            -webkit-transition: .4s linear;
+            -ms-transition: .4s linear;
+        }
+
+        &-txt {
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 24px;
+            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;
+            -ms-transition: .4s linear;
+        }
+    }
+}
+
+// Services end =========================
+
+// Contact =============================
+.contact {
+    padding: 100px 0;
+
+    &_title {
+        font-weight: 600;
+        font-size: 34px;
+        line-height: 46px;
+        margin-bottom: 50px;
+
+        overflow: hidden;
+        white-space: nowrap;
+        letter-spacing: .5px;
+        position: relative;
+    }
+
+    &_box {
+        display: flex;
+    }
+
+    &_form {
+        width: calc(50% - 25px);
+        margin-right: 25px;
+
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    &_input {
+        width: 100%;
+        margin-bottom: 20px;
+
+        input {
+            border: 1px solid #737373;
+            padding: 12px 20px;
+            width: calc(100% - 40px);
+
+            font-weight: 500;
+            font-size: 16px;
+            line-height: 36px;
+            font-family: 'Montserrat', sans-serif;
+
+            &::placeholder {
+                color: #737373;
+            }
+        }
+
+        textarea {
+            border: 1px solid #737373;
+            padding: 12px 20px;
+            width: calc(100% - 40px);
+
+            font-weight: 500;
+            font-size: 16px;
+            line-height: 36px;
+            font-family: 'Montserrat', sans-serif;
+            resize: none;
+            height: 180px;
+
+            &::placeholder {
+                color: #737373;
+            }
+        }
+    }
+
+    &_btn {
+        display: flex;
+        align-items: center;
+        border: 1px solid $main-color;
+        padding: 18px 30px;
+        background: transparent;
+        cursor: pointer;
+
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 36px;
+        color: $main-color;
+        font-family: 'Montserrat', sans-serif;
+        @include transition;
+
+        &:hover {
+            background: $main-color;
+            color: #fff;
+
+            .btn_icon {
+                // display: none;
+                opacity: 0;
+                width: 0;
+                height: 0;
+                overflow: hidden;
+                margin-right: 0;
+            }
+
+            .send_icon {
+                display: block;
+                width: 18px;
+                height: 24px;
+                opacity: 1;
+
+            }
+        }
+
+        span {
+            width: 18px;
+            height: 24px;
+
+            img {
+                @include ImgCon;
+            }
+        }
+
+        .btn_icon {
+            margin-right: 10px;
+            @include transition;
+        }
+
+        .send_icon {
+            margin-left: 15px;
+            @include transition;
+
+            width: 0;
+            height: 0;
+            overflow: hidden;
+        }
+    }
+
+    &_info {
+        width: calc(50% - 25px);
+        margin-left: 25px;
+    }
+
+    &_map {
+        width: 100%;
+        height: 240px;
+        margin-bottom: 30px;
+
+        iframe {
+            @include ImgCov;
+        }
+    }
+
+    &_row {
+        display: flex;
+        margin-bottom: 30px;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+
+        &-group {
+            margin-top: 7px;
+        }
+
+        &-icon {
+            width: 40px;
+            height: 40px;
+            margin-right: 20px;
+        }
+    }
+}
+
+// Contact end =========================
+
+
+// About =============================
+.about {
+    padding: 50px 0;
+
+    &_box {
+        display: flex;
+    }
+
+
+    &_video {
+        width: 100%;
+
+        &-box {
+            position: relative;
+            width: 100%;
+            height: 600px;
+
+            // &::after {
+            //     content: '';
+            //     position: absolute;
+            //     top: 50%;
+            //     left: 50%;
+            //     @include transform;
+            //     background: #E5E5E5;
+            //     width: calc(100% - 90px);
+            //     height: calc(100% - 100px);
+            //     z-index: -1;
+            // }
+
+            // .square {
+            //     position: absolute;
+            //     top: 50%;
+            //     left: 50%;
+            //     @include transform;
+            //     width: calc(100% - 30px);
+            //     height: calc(100% - 30px);
+            //     clip-path: polygon(0 0, 77% 0, 100% 37%, 100% 100%, 22% 100%, 0 63%);
+            //     border: 1px solid red;
+            //     z-index: 2;
+            //     // overflow: hidden
+            // }
+
+            img,
+            video {
+                @include ImgCon;
+                display: block;
+                // clip-path: polygon(0 0, 78% 0, 100% 36%, 100% 100%, 22% 100%, 0 63%);
+                // overflow: hidden;
+            }
+
+            .video_play {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                @include transform;
+                width: 85px;
+                height: 85px;
+                background: #ffff;
+                border-radius: 50%;
+                display: block;
+                z-index: 5;
+                cursor: pointer;
+
+                &::before {
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    left: 54%;
+                    @include transform;
+                    clip-path: polygon(0 0, 0% 100%, 100% 50%);
+                    background: $main-color;
+                    width: 24px;
+                    height: 27px;
+                }
+            }
+        }
+    }
+
+    &_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 {
+    0% {
+        left: -20px;
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+        left: 0;
+    }
+}
+
+@-webkit-keyframes open-arrow {
+    0% {
+        left: -20px;
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+        left: 0;
+    }
+}
+
+
+@keyframes typing {
+    from {
+        width: 0
+    }
+
+    to {
+        width: 100%
+    }
+}
+
+@-webkit-keyframes typing {
+    from {
+        width: 0
+    }
+
+    to {
+        width: 100%
+    }
+}
+
+
+// About end =========================
+
+
+// Client =============================
+.client {
+    padding: 50px 0 100px;
+    background: #F5F5F5;
+
+    &_title {
+        font-weight: 600;
+        font-size: 34px;
+        line-height: 46px;
+        margin-bottom: 50px;
+
+        overflow: hidden;
+        white-space: nowrap;
+        letter-spacing: .5px;
+        position: relative;
+    }
+
+    &_item {
+        width: 100%;
+        height: 100px !important;
+        margin: 0 5px;
+        position: relative;
+
+        display: flex !important;
+        align-items: center;
+        justify-content: center;
+
+        overflow: hidden;
+
+        border: 1px solid #D9D9D9;
+        padding: 30px;
+
+        img {
+            @include ImgCon;
+            transition: all .5s linear;
+
+            &:hover {
+                transform: scale(1.05);
+            }
+        }
+    }
+
+    .slick {
+        &-dots {
+            li {
+                &:nth-of-type(n+12) {
+                    display: none;
+                }
+            }
+        }
+    }
+}
+
+// Client end =========================
+
+.title-animate {
+    animation: typing 3.5s steps(40, end);
+    -webkit-animation: typing 3.5s steps(40, end);
+}

themes/tps/assets/new/css/components/3-page/portfolio.scss

@@ -0,0 +1,152 @@
+// Portfolio =====================
+.gallery {
+    padding: 100px 0;
+
+    &_filter {
+        &-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .category {
+                display: flex;
+                align-items: center;
+
+                &_icon {
+                    width: 18px;
+                    height: 18px;
+                    margin-right: 10px;
+
+                    svg {
+                        @include ImgCon;
+                    }
+                }
+
+                .select {
+                    &-selected {
+                        border: none;
+                        padding: 0 20px 0 0;
+
+                        font-weight: 400;
+                        font-size: 16px;
+                        line-height: 20px;
+
+                        &.select-arrow-active {
+                            &::after {
+                                transform: translateY(-50%) rotate(180deg);
+                            }
+                        }
+
+                        &::after {
+                            border: none;
+                            clip-path: polygon(0 0, 50% 100%, 100% 0);
+                            width: 12px;
+                            height: 6px;
+                            right: 0;
+                            background: $main-color;
+                            transform: translateY(-50%) rotate(0);
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    &_box {
+        display: flex;
+        flex-wrap: wrap;
+        margin: 50px -1px;
+
+        &-item {
+            width: calc(33.33% - 2px);
+            height: 370px;
+            margin: 1px;
+            position: relative;
+            cursor: pointer;
+
+            &::after {
+                content: '';
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
+                pointer-events: none;
+            }
+
+            &-info {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                padding: 30px;
+                width: calc(100% - 60px);
+                color: #fff;
+                z-index: 1;
+                pointer-events: none;
+            }
+
+            &-title {
+                font-weight: 700;
+                font-size: 16px;
+                line-height: 36px;
+            }
+
+            &-txt {
+                font-weight: 400;
+                font-size: 14px;
+                line-height: 17px;
+            }
+        }
+    }
+
+    .gal {
+        &_slider {
+            &-item {
+                width: 100%;
+                height: 370px !important;
+
+                img {
+                    @include ImgCov;
+                }
+            }
+        }
+    }
+
+    .pagination {
+        display: flex;
+        align-items: center;
+
+        .pag_arrow {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            width: 50px;
+            height: 50px;
+
+            border: 1px solid $main-color;
+
+            svg {
+                width: 30%;
+                height: 30%;
+                object-fit: contain;
+                -o-object-fit: contain;
+            }
+        }
+
+        .pag_txt {
+            margin: 0 15px;
+
+            font-weight: 400;
+            font-size: 16px;
+            line-height: 36px;
+
+            span {
+                color: $main-color;
+                font-weight: 700;
+            }
+        }
+    }
+
+}

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

@@ -0,0 +1,149 @@
+// Service =================
+.service.page {
+    padding: 50px 0 100px;
+    height: unset;
+
+    .service {
+        &_info {
+            position: relative;
+            top: unset;
+            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;
+                    position: relative;
+                    padding-left: 15px;
+
+                    &::before {
+                        content: '';
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        width: 5px;
+                        height: 100%;
+                        background: $main-color;
+                    }
+                }
+            }
+        }
+
+        &_block {
+            overflow-x: auto;
+            -ms-overflow-style: none;
+            scrollbar-width: none;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
+
+        &_txt {
+            font-weight: 400;
+            font-size: 18px;
+            line-height: 30px;
+            margin-bottom: 30px;
+
+            b {
+                font-weight: 600;
+            }
+        }
+
+        &_box {
+            display: flex;
+            // width: calc(100% + 420px);
+
+            // .slick-list {
+            //     padding: 0 420px 0 0 !important;
+            // }
+
+            // .slick-initialized .slick-slide {
+            //     display: block;
+            //     padding: 20px;
+            // }
+
+            &-item {
+                width: calc(470px - 30px);
+                margin-right: 30px;
+
+                &-photo {
+                    width: 100%;
+                    height: 300px;
+
+                    img {
+                        @include ImgCov;
+                    }
+                }
+
+                &-title {
+                    font-weight: 700;
+                    font-size: 27px;
+                    line-height: 36px;
+
+                    margin: 30px 0 20px;
+                }
+            }
+        }
+
+        &_list {
+            margin-bottom: 30px;
+            position: relative;
+
+            li {
+                margin-bottom: 15px;
+                padding-left: 35px;
+                position: relative;
+
+                &::before {
+                    content: '';
+                    position: absolute;
+                    top: 5px;
+                    left: 0px;
+                    background: url("../images/svg/circle.svg") no-repeat center;
+                    background-size: contain;
+                    width: 20px;
+                    height: 20px;
+                }
+
+                &::after {
+                    content: '';
+                    position: absolute;
+                    top: 27px;
+                    left: 9px;
+                    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: 16px;
+                    line-height: 30px;
+                }
+            }
+        }
+    }
+}

themes/tps/assets/new/css/main.scss

@@ -0,0 +1,24 @@
+
+
+// 1-main components
+@import "./components/1-main/nulifier.scss";
+@import "./components/1-main/variables.scss";
+@import "./components/1-main/mixin.scss";
+
+// 2-layout components
+@import "./components/2-layout/header.scss";
+@import "./components/2-layout/slider.scss";
+@import "./components/2-layout/crumb.scss";
+@import "./components/2-layout/select.scss";
+@import "./components/2-layout/modal.scss";
+@import "./components/2-layout/footer.scss";
+
+// 3-page components
+@import "./components/3-page/home.scss";
+@import "./components/3-page/about.scss";
+@import "./components/3-page/portfolio.scss";
+@import "./components/3-page/service.scss";
+
+@import "./components/2-layout/slick.scss";
+@import "./components/2-layout/slick-theme.scss";
+@import "./components/2-layout/responsive.scss";