css js

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

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

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

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

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

@@ -22,6 +22,11 @@
         align-items: center;
         position: relative;
 
+        svg {
+            @include ImgCon;
+            position: relative;
+        }
+
         &_bg {
             width: 70px;
             height: 70px;
@@ -77,18 +82,85 @@
 
             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;
+                    // }
+                }
+            }
+        }
+
+        .service_nav {
+            display: none;
+            @include transition;
+            max-height: 0;
+            overflow: hidden;
+            background: rgba(0, 0, 0, .7);
+
+            position: absolute;
+            top: calc(100% + 20px);
+            left: 50%;
+            @include transformX;
+            white-space: nowrap;
+            z-index: 3;
+            min-width: 400px;
+            text-align: center;
+
+            &.active {
+                display: block;
+                max-height: unset;
+            }
+
             a {
                 display: block;
                 font-weight: 500;
                 font-size: 16px;
                 line-height: 20px;
-                    color: #FFFFFF;
+                color: #fff;
+                @include transition;
+                padding: 20px 0;
+
+                &:hover {
+                    background: $main-color;
+                    color: #fff;
                 }
+
             }
         }
     }
@@ -142,8 +214,8 @@
             top: calc(100% + 50px);
             left: 50%;
             @include transformX;
-            background: #fff;
+            background: rgba(0, 0, 0, .7);
-            color: #000;
+            color: #fff;
             width: 120px;
 
             opacity: 0;
@@ -157,7 +229,7 @@
             }
 
             &-link {
-                color: #000 !important;
+                color: #fff !important;
                 display: block;
                 text-align: center;
                 text-transform: uppercase;
@@ -193,6 +265,7 @@
         transform: rotate(360deg);
     }
 }
+
 @-webkit-keyframes logo-bg {
     0% {
         transform: rotate(0deg);
@@ -216,6 +289,7 @@
         opacity: 1;
     }
 }
+
 @-webkit-keyframes inner-txt {
     0% {
         opacity: 0;
@@ -241,6 +315,7 @@
         opacity: 1;
     }
 }
+
 @-webkit-keyframes group-txt {
     0% {
         transform: translateX(-150%);
@@ -267,3 +342,215 @@
     animation: group-txt 1s linear;
     -webkit-animation: group-txt 1s linear;
 }
+
+// =============================================================
+
+svg .svg-elem-1 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 0s;
+    transition: fill 0.7s ease-in 0s;
+}
+
+svg.active .svg-elem-1 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-2 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 0.07s;
+    transition: fill 0.7s ease-in 0.07s;
+}
+
+svg.active .svg-elem-2 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-3 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 0.14s;
+    transition: fill 0.7s ease-in 0.14s;
+}
+
+svg.active .svg-elem-3 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-4 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 0.21000000000000002s;
+    transition: fill 0.7s ease-in 0.21000000000000002s;
+}
+
+svg.active .svg-elem-4 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-5 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 0.28s;
+    transition: fill 0.7s ease-in 0.28s;
+}
+
+svg.active .svg-elem-5 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-6 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 0.35000000000000003s;
+    transition: fill 0.7s ease-in 0.35000000000000003s;
+}
+
+svg.active .svg-elem-6 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-7 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 0.42000000000000004s;
+    transition: fill 0.7s ease-in 0.42000000000000004s;
+}
+
+svg.active .svg-elem-7 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-8 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 0.49000000000000005s;
+    transition: fill 0.7s ease-in 0.49000000000000005s;
+}
+
+svg.active .svg-elem-8 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-9 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 0.56s;
+    transition: fill 0.7s ease-in 0.56s;
+}
+
+svg.active .svg-elem-9 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-10 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 0.6300000000000001s;
+    transition: fill 0.7s ease-in 0.6300000000000001s;
+}
+
+svg.active .svg-elem-10 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-11 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 0.7000000000000001s;
+    transition: fill 0.7s ease-in 0.7000000000000001s;
+}
+
+svg.active .svg-elem-11 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-12 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 0.77s;
+    transition: fill 0.7s ease-in 0.77s;
+}
+
+svg.active .svg-elem-12 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-13 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 0.8400000000000001s;
+    transition: fill 0.7s ease-in 0.8400000000000001s;
+}
+
+svg.active .svg-elem-13 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-14 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 0.9100000000000001s;
+    transition: fill 0.7s ease-in 0.9100000000000001s;
+}
+
+svg.active .svg-elem-14 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-15 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 0.9800000000000001s;
+    transition: fill 0.7s ease-in 0.9800000000000001s;
+}
+
+svg.active .svg-elem-15 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-16 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 1.05s;
+    transition: fill 0.7s ease-in 1.05s;
+}
+
+svg.active .svg-elem-16 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-17 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 1.12s;
+    transition: fill 0.7s ease-in 1.12s;
+}
+
+svg.active .svg-elem-17 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-18 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 1.1900000000000002s;
+    transition: fill 0.7s ease-in 1.1900000000000002s;
+}
+
+svg.active .svg-elem-18 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-19 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 1.2600000000000002s;
+    transition: fill 0.7s ease-in 1.2600000000000002s;
+}
+
+svg.active .svg-elem-19 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-20 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 1.33s;
+    transition: fill 0.7s ease-in 1.33s;
+}
+
+svg.active .svg-elem-20 {
+    fill: rgb(255, 255, 255);
+}
+
+svg .svg-elem-21 {
+    fill: transparent;
+    -webkit-transition: fill 0.7s ease-in 1.4000000000000001s;
+    transition: fill 0.7s ease-in 1.4000000000000001s;
+}
+
+svg.active .svg-elem-21 {
+    fill: rgb(255, 255, 255);
+}

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

@@ -25,9 +25,10 @@
         top: 60%;
         left: 50%;
         @include transform;
-        max-width: 600px;
+        max-width: 900px;
         width: calc(100% - 120px);
-        max-height: calc(100% - 150px);
+        max-height: 450px;
+        height: calc(100% - 150px);
         padding: 70px 50px;
         background: rgba(0, 0, 0, .5);
         backdrop-filter: 5px;
@@ -59,6 +60,7 @@
 
     &_video {
         width: 100%;
+        height: 100%;
 
         video {
             @include ImgCon;

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

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

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

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

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

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

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

@@ -54,6 +54,7 @@
 
     &_box {
         display: flex;
+        flex-wrap: wrap;
         margin: 50px -1px;
 
         &-item {

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

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

themes/tps/assets/js/main.js

@@ -10,6 +10,9 @@ let lang_current = document.querySelector(".lang_current");
 let burger = document.querySelector(".burger");
 let nav_bg = document.querySelector(".nav_bg");
 
+let service_nav_link = document.querySelector(".service_nav-link");
+let service_nav = document.querySelector(".service_nav");
+
 
 function sleep(time) {
     return new Promise((resolve) => setTimeout(resolve, time));
@@ -40,11 +43,11 @@ window.onclick = function (e) {
     //     drop_lang.classList.remove('active')
     // }
 
-    if (nav_bg.classList.contains('active') && !e.target.closest('.burger') && !e.target.closest('.lang_current')) {
+    if (nav_bg.classList.contains('active') && !e.target.closest('.burger') && !e.target.closest('.lang_current') && !e.target.closest('.service_nav-link')) {
         nav_bg.classList.remove('active')
     }
 
-    if (burger.classList.contains('active') && !e.target.closest('.burger') && !e.target.closest('.lang_current')) {
+    if (burger.classList.contains('active') && !e.target.closest('.burger') && !e.target.closest('.lang_current') && !e.target.closest('.service_nav-link')) {
         burger.classList.remove('active')
     }
 
@@ -52,6 +55,10 @@ window.onclick = function (e) {
         lang_drop.classList.remove('active')
     }
 
+    if (service_nav.classList.contains('active') && !e.target.closest('.service_nav-link')) {
+        service_nav.classList.remove('active')
+    }
+
 }
 
 
@@ -74,3 +81,11 @@ if (burger != undefined) {
         });
     });
 }
+
+if (service_nav_link != undefined) {
+    service_nav_link.addEventListener('click', function () {
+        sleep(2).then(() => {
+            service_nav.classList.toggle('active');
+        });
+    });
+}

themes/tps/assets/js/slider.js

@@ -113,7 +113,7 @@ $(".service_box").slick({
 
     responsive: [
         {
-            breakpoint: 1450,
+            breakpoint: 1290,
             settings: {
                 slidesToShow: 2,
                 slidesToScroll: 1,
@@ -122,7 +122,7 @@ $(".service_box").slick({
         {
             breakpoint: 1000,
             settings: {
-                slidesToShow: 1,
+                slidesToShow: 2,
                 slidesToScroll: 1,
             }
         },