ctt-babylon 0.7.11 → 0.8.1

package/lib/styles/styles/babylon/slider.scss

@@ -1,764 +1,719 @@
-@use './mixins.scss' as *;
-@use './variables.scss' as *;
 /*--------------------------------------------------------------
   5. Slider
 ----------------------------------------------------------------*/
 .cs_slider {
     position: relative;
-}
-.slick-arrow {
+  }
+  .slick-arrow {
     cursor: pointer;
-}
-
-.slick-slide > div {
+  }
+  .draggable {
+    // cursor: url(../img/drag.png) 16 9, ew-resize !important;
+  }
+  .slick-slide > div {
     display: flex;
     flex-direction: column;
-}
-.cs_remove_overflow {
+  }
+  .cs_remove_overflow {
     .slick-list {
-        overflow: visible;
+      overflow: visible;
     }
-
+  
     .slick-slide {
-        opacity: 0;
-        visibility: hidden;
-        transition: all 0.3s linear;
-
-        &.slick-active {
-            opacity: 1;
-            visibility: visible;
-        }
-    }
-}
-.cs_slider_gap_24 {
+      opacity: 0;
+      visibility: hidden;
+      transition: all 0.3s linear;
+  
+      &.slick-active {
+        opacity: 1;
+        visibility: visible;
+      }
+    }
+  }
+  .cs_slider_gap_24 {
     .slick-slide {
-        padding-left: 12px;
-        padding-right: 12px;
+      padding-left: 12px;
+      padding-right: 12px;
     }
     .slick-list {
-        margin-left: -12px;
-        margin-right: -12px;
+      margin-left: -12px;
+      margin-right: -12px;
     }
-}
-.cs_slider_gap_30 {
+  }
+  .cs_slider_gap_30 {
     .slick-slide {
-        padding-left: 15px;
-        padding-right: 15px;
+      padding-left: 15px;
+      padding-right: 15px;
     }
     .slick-list {
-        margin-left: -15px;
-        margin-right: -15px;
+      margin-left: -15px;
+      margin-right: -15px;
     }
-    @include full-tablet {
-        //1024
-        .slick-slide {
-            padding-left: 12px;
-            padding-right: 12px;
-        }
-        .slick-list {
-            margin-left: -12px;
-            margin-right: -12px;
-        }
+    @include full-tablet { //991
+      .slick-slide {
+        padding-left: 12px;
+        padding-right: 12px;
+      }
+      .slick-list {
+        margin-left: -12px;
+        margin-right: -12px;
+      }
     }
-}
-.cs_slider_gap_40 {
+  }
+  .cs_slider_gap_40 {
     .slick-slide {
-        padding-left: 20px;
-        padding-right: 20px;
+      padding-left: 20px;
+      padding-right: 20px;
     }
     .slick-list {
-        margin-left: -20px;
-        margin-right: -20px;
+      margin-left: -20px;
+      margin-right: -20px;
     }
-    @include full-tablet {
-        .slick-slide {
-            padding-left: 12px;
-            padding-right: 12px;
-        }
-        .slick-list {
-            margin-left: -12px;
-            margin-right: -12px;
-        }
+    @include full-tablet{
+      .slick-slide {
+        padding-left: 12px;
+        padding-right: 12px;
+      }
+      .slick-list {
+        margin-left: -12px;
+        margin-right: -12px;
+      }
     }
-}
-.cs_slider_gap_60 {
+  }
+  .cs_slider_gap_60 {
     .slick-slide {
-        padding-left: 30px;
-        padding-right: 30px;
+      padding-left: 30px;
+      padding-right: 30px;
     }
     .slick-list {
-        margin-left: -30px;
-        margin-right: -30px;
+      margin-left: -30px;
+      margin-right: -30px;
     }
-    @include full-tablet {
-        .slick-slide {
-            padding-left: 12px;
-            padding-right: 12px;
-        }
-        .slick-list {
-            margin-left: -12px;
-            margin-right: -12px;
-        }
+    @include full-tablet{
+      .slick-slide {
+        padding-left: 12px;
+        padding-right: 12px;
+      }
+      .slick-list {
+        margin-left: -12px;
+        margin-right: -12px;
+      }
     }
-}
-
-.cs_show_shadow_20 {
+  }
+  
+  .cs_show_shadow_20 {
     .slick-list {
-        padding-bottom: 20px;
-        margin-bottom: -20px;
+      padding-bottom: 20px;
+      margin-bottom: -20px;
     }
-}
-
+  }
+  
 .cs_slider_arrows.cs_style_1 {
     display: flex;
     gap: 12px;
     .cs_left_arrow,
     .cs_right_arrow {
-        height: 45px;
-        width: 70px;
-        border-radius: var(--btn_radius);
-        background: var(--cl_btn-arrow);
-        color: var(--cl_btn-arrow-icon);
-        flex: none;
-        transition: all 0.4s ease;
-        backdrop-filter: blur(10px);
-        position: absolute;
-        top: 30%;
-        z-index: 5;
-        cursor: pointer;
-        &:hover {
-            background: var(--cl_btn-arrow-hover);
-            color: var(--cl_btn-arrow-icon-hover);
-        }
+      height: 45px;
+      width: 70px;
+      border-radius: var(--btn_radius);
+      background:  var(--cl_btn-arrow); 
+      color: var(--cl_btn-arrow-icon);
+      flex: none;
+      transition: all 0.4s ease; 
+      backdrop-filter: blur(10px);
+      position: absolute;
+      top: 30%;
+      z-index: 5;
+      cursor: pointer;
+      &:hover {
+        background:  var(--cl_btn-arrow-hover); 
+        color: var(--cl_btn-arrow-icon-hover);
+      }
     }
     .cs_left_arrow {
-        left: 0px;
+      left: 0px;
     }
     .cs_right_arrow {
-        right: -2px;
+      right: -2px;
     }
 }
-
-.cs_slider_arrows.cs_style_2 {
+  
+  .cs_slider_arrows.cs_style_2 {
     .cs_left_arrow,
     .cs_right_arrow {
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        cursor: pointer;
-        transition: all 0.3s ease;
-        font-size: 20px;
-        color: var(--cl_btn-arrow);
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      cursor: pointer;
+      transition: all 0.3s ease;
+      font-size: 20px;
+      color: var(--cl_btn-arrow);
+      &:hover {
         &:hover {
-            &:hover {
-                color: var(--cl_btn-arrow-hover);
-            }
+          color:  var(--cl_btn-arrow-hover);
         }
+      }
     }
     .cs_right_arrow {
-        // right: calc((100vw - 1300px) / 2 / 2);
-        // margin-right: -28px;
-        right: 2svw;
-        @include full-tablet {
-            right: calc((100vw - 1140px) / 2 / 2);
-            margin-right: -22px;
-        }
-        @include small-desktop {
-            //1199
-            right: calc((100vw - 960px) / 2 / 2);
-            margin-right: -22px;
-        }
-        @media (max-width: 1050px) {
-            margin-right: 0px;
-        }
+      // right: calc((100vw - 1300px) / 2 / 2);
+      // margin-right: -28px;
+      right: 2svw;
+      @include full-tablet{
+        right: calc((100vw - 1140px) / 2 / 2);
+        margin-right: -22px;
+      }
+      @include small-desktop{ //1199
+        right: calc((100vw - 960px) / 2 / 2);
+        margin-right: -22px;
+      }
+      @media (max-width: 1050px) {
+        margin-right: 0px;
+      }
     }
     .cs_left_arrow {
-        // left: calc((100vw - 1300px) / 2 / 2);
-        // margin-left: -28px;
-        left: 2svw;
-        @include full-tablet {
-            left: calc((100vw - 1140px) / 2 / 2);
-            margin-left: -22px;
-        }
-        @include small-desktop {
-            //1199
-            left: calc((100vw - 960px) / 2 / 2);
-            margin-left: -22px;
-        }
-        @media (max-width: 1050px) {
-            margin-left: 0px;
-        }
-    }
-}
-
-.cs_slider_arrows.cs_style_3 {
+      // left: calc((100vw - 1300px) / 2 / 2);
+      // margin-left: -28px;
+      left: 2svw;
+      @include full-tablet{
+        left: calc((100vw - 1140px) / 2 / 2);
+        margin-left: -22px;
+      }
+      @include small-desktop{ //1199
+        left: calc((100vw - 960px) / 2 / 2);
+        margin-left: -22px;
+      }
+      @media (max-width: 1050px) {
+        margin-left: 0px;
+      }
+    }
+  }
+  
+  .cs_slider_arrows.cs_style_3 {
     .cs_left_arrow,
     .cs_right_arrow {
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        transition: all 0.3s ease;
-        @include small-desktop {
-            //1199
-            top: 35%;
-        }
-        &:hover {
-            color: var(--cl_btn-arrow-icon-hover);
-        }
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      transition: all 0.3s ease;
+      @include small-desktop{ //1199
+        top: 35%;
+      }
+      &:hover {
+        color:  var(--cl_btn-arrow-icon-hover);
+      }
     }
     .cs_left_arrow {
-        left: 6.6%;
-        @include small-desktop {
-            //1199
-            left: 30px;
-        }
+      left: 6.6%;
+      @include small-desktop{ //1199
+        left: 30px;
+      }
     }
     .cs_right_arrow {
-        right: 6.6%;
-        @include small-desktop {
-            //1199
-            right: 30px;
-        }
-    }
-}
-
-.cs_slider_arrows.cs_style_4 {
+      right: 6.6%;
+      @include small-desktop{ //1199
+        right: 30px;
+      }
+    }
+  }
+  
+  .cs_slider_arrows.cs_style_4 {
     display: flex;
     gap: 20px;
     .cs_left_arrow,
     .cs_right_arrow {
-        height: 45px;
-        width: 70px;
-        border-radius: var(--btn_radius);
-        background: var(--cl_btn-arrow);
-        color: var(--cl_btn-arrow-icon);
-        transition: all 0.4s ease;
-        font-size: 10px;
-        &:hover {
-            background-color: var(--cl_btn-arrow-hover);
-            color: var(--cl_btn-arrow-icon-hover);
-        }
-    }
-}
-
-.cs_pagination.cs_style_1 {
+      height: 45px;
+      width: 70px;
+      border-radius: var(--btn_radius);
+      background:  var(--cl_btn-arrow); 
+      color: var(--cl_btn-arrow-icon); 
+      transition: all 0.4s ease;
+      font-size: 10px;
+      &:hover {
+        background-color: var(--cl_btn-arrow-hover );
+        color: var(--cl_btn-arrow-icon-hover );
+      }
+    }
+  }
+  
+  .cs_pagination.cs_style_1 {
     display: flex;
     justify-content: center;
-
+  
     ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      margin-top: 65px;
+      display: flex !important;
+      gap: 15px;
+      @include full-tablet { //991
+        margin-top: 15px;
+        gap: 8px;
+      }
+    }
+  
+    li {
+      height: 10px;
+      width: 10px;
+      background-color: var(--cl_btn-dots);
+      border: none;
+      border-radius: 50%;
+      margin: 0;
+      cursor: pointer;
+      position: relative;
+      transition: all 0.3s ease;
+  
+      &.slick-active {
+        background-color: var(--cl_btn-dots-active);
+        border-color: var(--cl_btn-dots-active);
+      }
+    }
+  
+    button {
+      display: none;
+    }
+    &.cs_type_1 {
+      position: absolute;
+      z-index: 5;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: 15%;
+      ul {
+        margin: 0;
+      }
+      li {
+        border-color: #fff;
+        &.slick-active {
+          border-color: var(--cl_accent);
+        }
+      }
+    }
+    &.cs_type_2,
+    &.cs_type_3 {
+      ul {
         list-style: none;
         padding: 0;
         margin: 0;
         margin-top: 65px;
         display: flex !important;
         gap: 15px;
-        @include full-tablet {
-            //1024
-            margin-top: 15px;
-            gap: 8px;
-            justify-content: center;
-            padding: 20px;
+        @include full-tablet { //991
+          margin-top: 15px;
+          gap: 8px;
         }
-    }
-
-    li {
+      }
+      li {
         height: 10px;
         width: 10px;
         background-color: var(--cl_btn-dots);
         border: none;
-        border-radius: 50%;
-        margin: 0;
-        cursor: pointer;
-        position: relative;
-        transition: all 0.3s ease;
-
         &.slick-active {
-            background-color: var(--cl_btn-dots-active);
-            border-color: var(--cl_btn-dots-active);
-        }
-    }
-
-    button {
-        display: none;
-    }
-    &.cs_type_1 {
-        position: absolute;
-        z-index: 5;
-        left: 50%;
-        transform: translateX(-50%);
-        bottom: 15%;
-        ul {
-            margin: 0;
-        }
-        li {
-            border-color: #fff;
-            &.slick-active {
-                border-color: var(--cl_accent);
-            }
-        }
-    }
-    &.cs_type_2,
-    &.cs_type_3 {
-        ul {
-            list-style: none;
-            padding: 0;
-            margin: 0;
-            margin-top: 65px;
-            display: flex !important;
-            gap: 15px;
-            @include full-tablet {
-                //1024
-                margin-top: 15px;
-                gap: 8px;
-            }
-        }
-        li {
-            height: 10px;
-            width: 10px;
-            background-color: var(--cl_btn-dots);
-            border: none;
-            &.slick-active {
-                background-color: var(--cl_btn-dots-active);
-            }
+          background-color: var(--cl_btn-dots-active);
         }
+      }
     }
     &.cs_type_3 {
-        position: absolute;
-        right: -15px;
-        top: 50%;
-        transform: translateY(-50%);
-        width: calc((100% - 1296px) / 2);
-        @include full-tablet {
-            width: calc((100% - 1116px) / 2);
-        }
-        @include small-desktop {
-            //1199
-            width: calc((100% - 936px) / 2);
-        }
-        @include full-tablet {
-            //1024
-            width: 100%;
-            position: initial;
-            transform: initial;
-        }
-        ul {
-            margin: 0;
-            flex-direction: column;
-            @include full-tablet {
-                //1024
-                flex-direction: row;
-                margin-top: 20px;
-            }
+      position: absolute;
+      right: -15px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: calc((100% - 1296px) / 2);
+      @include full-tablet{
+        width: calc((100% - 1116px) / 2);
+      }
+      @include small-desktop{ //1199
+        width: calc((100% - 936px) / 2);
+      }
+      @include full-tablet { //991
+        width: 100%;
+        position: initial;
+        transform: initial;
+      }
+      ul {
+        margin: 0;
+        flex-direction: column;
+        @include full-tablet { //991
+          flex-direction: row;
+          margin-top: 20px;
         }
+      }
     }
     &.cs_type_3--left {
-        position: absolute;
-        left: -15px;
-        top: 50%;
-        transform: translateY(-50%);
-        width: calc((100% - 1296px) / 2);
-        @include full-tablet {
-            width: calc((100% - 1116px) / 2);
-        }
-        @include small-desktop {
-            //1199
-            width: calc((100% - 936px) / 2);
-        }
-        @include full-tablet {
-            //1024
-            width: 100%;
-            position: initial;
-            transform: initial;
-        }
-        ul {
-            margin: 0;
-            flex-direction: column;
-            @include full-tablet {
-                //1024
-                flex-direction: row;
-                margin-top: 20px;
-                justify-content: center;
-                padding: 20px !important;
-            }
+      position: absolute;
+      left: -15px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: calc((100% - 1296px) / 2);
+      @include full-tablet{
+        width: calc((100% - 1116px) / 2);
+      }
+      @include small-desktop{ //1199
+        width: calc((100% - 936px) / 2);
+      }
+      @include full-tablet { //991
+        width: 100%;
+        position: initial;
+        transform: initial;
+      }
+      ul {
+        margin: 0;
+        flex-direction: column;
+        @include full-tablet { //991
+          flex-direction: row;
+          margin-top: 20px;
         }
+      }
     }
     &.cs_type_4 {
-        position: absolute;
-        bottom: 423px;
-        width: 100%;
+      position: absolute;
+      bottom: 423px;
+      width: 100%;
     }
     &.cs_color_1 {
-        li {
-            border-color: #fff;
-            &.slick-active {
-                border-color: var(--cl_accent);
-            }
+      li {
+        border-color: #fff;
+        &.slick-active {
+          border-color: var(--cl_accent);
         }
+      }
     }
-}
-
-.cs_slider_number.cs_style_1,
-.cs_slider_number.cs_style_2 {
+  }
+  
+  .cs_slider_number.cs_style_1,
+  .cs_slider_number.cs_style_2 {
     span {
-        display: inline-block;
-        position: relative;
+      display: inline-block;
+      position: relative;
     }
     .cs_current_number {
-        color: var(--cl_accent);
+      color: var(--cl_accent);
     }
-
+  
     .cs_slider_number_seperator {
-        display: inline-block;
-        background-color: var(--cl_corp);
-        transform: rotate(25deg);
-        position: relative;
+      display: inline-block;
+      background-color: var(--cl_corp);
+      transform: rotate(25deg);
+      position: relative;
     }
-}
-.cs_slider_number.cs_style_1 {
+  }
+  .cs_slider_number.cs_style_1 {
     position: absolute;
     bottom: 6px;
     right: calc((100vw - 1300px) / 2 / 2);
     margin-right: -18px;
     .cs_current_number {
-        top: -10px;
-        font-size: 50px;
+      top: -10px;
+      font-size: 50px;
     }
     .cs_total_numbers {
-        top: 10px;
+      top: 10px;
     }
     .cs_slider_number_seperator {
-        height: 56px;
-        width: 1px;
-        top: 15px;
+      height: 56px;
+      width: 1px;
+      top: 15px;
     }
-    @include full-tablet {
-        right: calc((100vw - 1140px) / 2 / 2);
+    @include full-tablet{
+      right: calc((100vw - 1140px) / 2 / 2);
     }
-    @include small-desktop {
-        //1199
-        right: 40px;
-        margin-right: 0;
+    @include small-desktop{ //1199
+      right: 40px;
+      margin-right: 0;
     }
-}
-.cs_slider_number.cs_style_2 {
+  }
+  .cs_slider_number.cs_style_2 {
     font-size: 160px;
     line-height: 1em;
     padding-bottom: 80px;
     .cs_current_number {
-        top: -35px;
-        font-size: 215px;
+      top: -35px;
+      font-size: 215px;
     }
     .cs_total_numbers {
-        top: 35px;
+      top: 35px;
     }
     .cs_slider_number_seperator {
-        height: 240px;
-        width: 4px;
-        top: 70px;
+      height: 240px;
+      width: 4px;
+      top: 70px;
     }
-}
-.cs_hover_show_arrows {
+  }
+  .cs_hover_show_arrows {
     .cs_slider_arrows.cs_style_1 {
-        .cs_left_arrow,
-        .cs_right_arrow {
-            opacity: 0;
-        }
+      .cs_left_arrow,
+      .cs_right_arrow {
+        opacity: 0;
+      }
     }
     &:hover {
-        .cs_slider_arrows.cs_style_1 {
-            .cs_left_arrow,
-            .cs_right_arrow {
-                opacity: 1;
-            }
-        }
-    }
-}
-
-.cs_slider_navigation {
-    @include full-tablet {
-        //1024
-        position: absolute;
-        z-index: 8;
-        bottom: 70px;
-        display: flex;
-        gap: 15px;
-        left: 50%;
-        transform: translateX(-50%);
-    }
-    @include medium-tablet {
-        bottom: 50%;
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
-        padding: 0px 10px;
-    }
-    .cs_swiper_button_prev,
-    .cs_swiper_button_next,
-    .cs_swiper_button_prevV2,
-    .cs_swiper_button_nextV2 {
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        transition: all 0.3s ease;
-        z-index: 5;
-        color: var(--cl_btn-light);
-        font-size: 20px;
-        &:hover {
-            color: var(--cl_btn-light -hover);
-        }
-        &.swiper-button-disabled {
-            opacity: 0.5;
-            cursor: default;
-        }
-        @include full-tablet {
-            //1024
-            position: initial;
-            transform: initial;
-        }
+      .cs_slider_arrows.cs_style_1 {
+        .cs_left_arrow,
+        .cs_right_arrow {
+          opacity: 1;
+        }
+      }
+    }
+  }
+  
+  .cs_slider_navigation {
+  
+    @include full-tablet { //991
+      position: absolute;
+      z-index: 8;
+      bottom: 70px;
+      display: flex;
+      gap: 15px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    @include medium-tablet { //767 
+      bottom: 30px; 
     }
     .cs_swiper_button_prev,
-    .cs_swiper_button_prevV2 {
-        left: 6.6%;
-        @include small-desktop {
-            //1199
-            left: 3%;
-        }
-    }
-    .cs_swiper_button_next,
-    .cs_swiper_button_nextV2 {
-        right: 6.6%;
-        @include small-desktop {
-            //1199
-            right: 3%;
-        }
-    }
-}
-
-.swiper-slide {
+    .cs_swiper_button_next {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      transition: all 0.3s ease;
+      z-index: 5;
+      color: var(--cl_btn-light );
+      font-size: 20px;
+      &:hover {
+        color: var(--cl_btn-light -hover);
+      }
+      @include full-tablet { //991
+        position: initial;
+        transform: initial;
+      }
+    }
+    .cs_swiper_button_prev {
+      left: 6.6%;
+      @include small-desktop{ //1199
+        left: 3%;
+      }
+    }
+    .cs_swiper_button_next {
+      right: 6.6%;
+      @include small-desktop{ //1199
+        right: 3%;
+      }
+    }
+  }
+  
+  .swiper-slide {
     overflow: hidden;
     .cs_hero.cs_style_1 {
-        .cs_hero_text {
-            position: relative;
-            top: 10px;
-            opacity: 0;
-            transition: all 0.9s ease;
-            user-select: none;
-        }
+      .cs_hero_text {
+        position: relative;
+        top: 10px;
+        opacity: 0;
+        transition: all 0.9s ease;
+        user-select: none;
+      }
     }
     &.swiper-slide-active {
-        .cs_hero.cs_style_1 {
-            .cs_hero_text {
-                top: 0;
-                opacity: 1;
-                transition: all 0.9s ease 0.9s;
-                max-width: 90%;
-                margin-left: 5%;
-            }
+      .cs_hero.cs_style_1 {
+        .cs_hero_text {
+          top: 0;
+          opacity: 1;
+          transition: all 0.9s ease 0.9s;
+          max-width: 90%; 
+          margin-left: 5%;
         }
+      }
     }
-}
-.slick-vertical {
+  }
+  .slick-vertical {
     &.cs_gallery_slider_nav {
-        margin-top: -12px;
-        margin-bottom: -12px;
+      margin-top: -12px;
+      margin-bottom: -12px;
+      .slick-slide {
+        border: none;
+        padding: 12px 0;
+      }
+      @include full-tablet { //991
+        margin-top: -5px;
+        margin-bottom: -5px;
         .slick-slide {
-            border: none;
-            padding: 12px 0;
-        }
-        @include full-tablet {
-            //1024
-            margin-top: -5px;
-            margin-bottom: -5px;
-            .slick-slide {
-                border: none;
-                padding: 5px 0;
-            }
+          border: none;
+          padding: 5px 0;
         }
+      }
     }
-
-    .cs_gallery_slider_thumb_mini {
-        overflow: hidden;
-        cursor: pointer;
-        position: relative;
-        &::before {
-            content: '';
-            height: 100%;
-            width: 100%;
-            position: absolute;
-            left: 0;
-            top: 0;
-            border: 2px solid var(--cl_accent);
-            border-radius: inherit;
-            opacity: 0;
-            transition: all 0.4s ease;
-        }
+  
+    .cs_gallery_slider_thumb_mini { 
+      overflow: hidden;
+      cursor: pointer;
+      position: relative;
+      &::before {
+        content: '';
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        border: 2px solid var(--cl_accent);
+        border-radius: inherit;
+        opacity: 0;
+        transition: all 0.4s ease;
+      }
     }
     .slick-current {
-        .cs_gallery_slider_thumb_mini {
-            &::before {
-                opacity: 1;
-            }
+      .cs_gallery_slider_thumb_mini {
+        &::before {
+          opacity: 1;
         }
+      }
     }
-}
-.cs_left_arrow_gallery,
-.cs_right_arrow_gallery {
+  }
+  .cs_left_arrow_gallery,
+  .cs_right_arrow_gallery {
     position: absolute;
     height: 45px;
     width: 70px;
     border-radius: var(--btn_radius);
-    background: var(--cl_btn-arrow);
-    color: var(--cl_btn-arrow-icon);
+    background:  var(--cl_btn-arrow); 
+     color: var(--cl_btn-arrow-icon);
     top: 50%;
     margin-top: -25px;
     z-index: 2;
     transition: all 0.3s ease;
     cursor: pointer;
     &:hover {
-        background: var(--cl_btn-arrow-hover);
-        color: var(--cl_btn-arrow-icon-hover);
+      background:  var(--cl_btn-arrow-hover); 
+      color: var(--cl_btn-arrow-icon-hover);
     }
-}
-.cs_left_arrow_gallery {
+  }
+  .cs_left_arrow_gallery {
     left: 25px;
-}
-.cs_right_arrow_gallery {
+  }
+  .cs_right_arrow_gallery {
     right: 25px;
-}
-.cs_gallery_hover_show_nav {
+  }
+  .cs_gallery_hover_show_nav {
     .cs_left_arrow_gallery,
     .cs_right_arrow_gallery {
-        opacity: 0;
+      opacity: 0;
     }
     &:hover {
-        .cs_left_arrow_gallery,
-        .cs_right_arrow_gallery {
-            opacity: 1;
-        }
+      .cs_left_arrow_gallery,
+      .cs_right_arrow_gallery {
+        opacity: 1;
+      }
     }
-}
-.cs_gallery_slider_thumb_item_2 {
+  }
+  .cs_gallery_slider_thumb_item_2 {
     height: calc(100vh - 0px);
     padding: 100px 0 50px;
     max-height: 1100px;
-    @include full-tablet {
-        //1024
-        padding: 100px 0;
-        height: 100vh;
-        max-height: initial;
-    }
-
-    @include small-tablet {
-        //575
-        min-height: 500px;
-        .cs_hero_title {
-            br {
-                display: none;
-            }
-        }
-    }
-}
-.cs_gallery_slider_nav_2_wrap {
+    @include full-tablet { //991
+      padding: 100px 0;
+      height: 100vh;
+      max-height: initial;
+    }
+       
+    @include small-tablet { //575
+      min-height: 500px; 
+      .cs_hero_title {
+        br {
+          display: none;
+        }
+      }
+    }
+  }
+  .cs_gallery_slider_nav_2_wrap {
     width: 100%;
     position: absolute;
     bottom: 35px;
-    @include medium-tablet {
-        //767
-        bottom: 25px;
+   @include medium-tablet { //767
+      bottom: 25px;
     }
     .cs_price_per {
-        color: rgba(255, 255, 255, 0.7);
-        position: relative;
-        bottom: 4px;
+      color: rgba(255, 255, 255, 0.7);
+      position: relative;
+      bottom: 4px;
     }
     .cs_price {
-        margin-top: 5px;
+      margin-top: 5px;
     }
-}
-.cs_gallery_slider_nav_2 {
+  }
+  .cs_gallery_slider_nav_2 {
     width: 480px;
     margin-left: auto;
-    @include small-desktop {
-        //1199
-        width: 350px;
+    @include small-desktop{ //1199
+      width: 350px;
     }
-    @include full-tablet {
-        //1024
-        width: 250px;
+    @include full-tablet { //991
+      width: 250px;
     }
-    @include medium-tablet {
-        //767
-        margin-right: auto;
+   @include medium-tablet { //767
+      margin-right: auto;
     }
     .slick-slide {
-        padding-left: 5px;
-        padding-right: 5px;
-        &.slick-current {
-            .cs_gallery_slider_thumb_mini_2 {
-                &::before {
-                    border-width: 2px;
-                    border-color: var(--cl_accent);
-                }
-            }
+      padding-left: 5px;
+      padding-right: 5px;
+      &.slick-current {
+        .cs_gallery_slider_thumb_mini_2 {
+          &::before {
+            border-width: 2px;
+            border-color: var(--cl_accent);
+          }
         }
+      }
     }
     .slick-list {
-        margin-left: -5px;
-        margin-right: -5px;
+      margin-left: -5px;
+      margin-right: -5px;
     }
-}
-.cs_gallery_slider_thumb_mini_2 {
-    height: 120px;
+  }
+  .cs_gallery_slider_thumb_mini_2 {
+    height: 120px; 
     cursor: pointer;
     position: relative;
-    @include small-desktop {
-        //1199
-        height: 80px;
+    @include small-desktop{ //1199
+      height: 80px;
     }
-    @include full-tablet {
-        //1024
-        height: 60px;
+    @include full-tablet { //991
+      height: 60px;
     }
     &::before {
-        content: '';
-        height: 100%;
-        width: 100%;
-        position: absolute;
-        left: 0;
-        top: 0;
-        border: 1px solid rgba(255, 255, 255, 0.5);
-        border-radius: inherit;
-        transition: all 0.4s ease;
-    }
-}
-.cs_gallery_slider_nav_2_in {
+      content: '';
+      height: 100%;
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      border: 1px solid rgba(255, 255, 255, 0.5);
+      border-radius: inherit;
+      transition: all 0.4s ease;
+    }
+  }
+  .cs_gallery_slider_nav_2_in {
     display: flex;
     align-items: center;
-    @include medium-tablet {
-        //767
-        flex-direction: column;
-        text-align: center;
-        justify-content: center;
-        gap: 25px;
-    }
-}
-.cs_gallery_slider_thumb_2 {
+   @include medium-tablet { //767
+      flex-direction: column;
+      text-align: center;
+      justify-content: center;
+      gap: 25px;
+    }
+  }
+  .cs_gallery_slider_thumb_2 {
     position: relative;
     &:after {
-        background: linear-gradient(0, rgba(0, 0, 0, 0.6), transparent);
-        bottom: -2px;
-        content: '';
-        height: 30%;
-        position: absolute;
-        width: 100%;
-        @include medium-tablet {
-            //767
-            height: 50%;
-        }
-    }
-}
-.cs_left_arrow_gallery_2,
-.cs_right_arrow_gallery_2 {
+      background: linear-gradient(0, rgba(0, 0, 0, 0.6), transparent);
+      bottom: -2px;
+      content: '';
+      height: 30%;
+      position: absolute;
+      width: 100%;
+     @include medium-tablet { //767
+        height: 50%;
+      }
+    }
+  }
+  .cs_left_arrow_gallery_2,
+  .cs_right_arrow_gallery_2 {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -766,111 +721,101 @@
     z-index: 5;
     color: var(--cl_accent);
     &:hover {
-        color: #fff;
+      color: #fff;
     }
-}
-.cs_left_arrow_gallery_2 {
+  }
+  .cs_left_arrow_gallery_2 {
     left: 5%;
-}
-.cs_right_arrow_gallery_2 {
+  }
+  .cs_right_arrow_gallery_2 {
     right: 5%;
-}
-@include full-tablet {
-    // 1024
+  }
+  @include full-tablet { // 991
     .cs_mobile_hide {
-        display: none !important;
+      display: none !important;
     }
-}
-@include min-full-tablet {
-    // 992
+  }
+  @include min-full-tablet { // 992
     .cs_mobile_show {
-        display: none !important;
+      display: none !important;
     }
-}
-@include medium-tablet {
-    //767
+  }
+ @include medium-tablet { //767
     .cs_mobile_hide_md {
-        display: none !important;
+      display: none !important;
     }
-}
-@include min-medium-tablet {
-    //768
+  }
+  @include min-medium-tablet { //768
     .cs_mobile_show_md {
-        display: none !important;
+      display: none !important;
     }
-}
+  }
 /*--------------------------------------------------------------
   19. Custom Slider
 ----------------------------------------------------------------*/
-.cs_custom_slide_item {
+  .cs_custom_slide_item {
     width: 100%;
     height: 520px;
     border-radius: 5px;
     display: block;
     position: relative;
     overflow: hidden;
-    @media only screen and (min-width: 1025px) and (max-width: 1199px) {
-        height: 470px;
+    @media only screen and (min-width: 992px) and (max-width: 1199px) {
+      height: 470px;
     }
-    @media only screen and (min-width: 768px) and (max-width: 1024px) {
-        height: 350px;
+    @media only screen and (min-width: 768px) and (max-width: 991px) {
+      height: 350px;
     }
-    @include medium-tablet {
-        //767
-        height: 300px;
+   @include medium-tablet { //767
+      height: 300px;
     }
-}
-.cs_custom_slide_arrow_left,
-.cs_custom_slide_arrow_right {
+  }
+  .cs_custom_slide_arrow_left,
+  .cs_custom_slide_arrow_right {
     position: absolute;
     top: 50%;
     transform: translateY(-505);
     cursor: pointer;
     transition: all 0.3s ease;
     &:hover {
-        color: var(--cl_btn-arrow-hover);
+      color: var(--cl_btn-arrow-hover);
     }
-    @include full-tablet {
-        //1024
-        position: initial;
+    @include full-tablet { //991
+      position: initial;
     }
-}
-.cs_custom_slide_arrow_left {
+  }
+  .cs_custom_slide_arrow_left {
     left: calc((100vw - 1300px) / 2 / 2);
     margin-left: -28px;
-    @include full-tablet {
-        left: calc((100vw - 1140px) / 2 / 2);
+    @include full-tablet{
+      left: calc((100vw - 1140px) / 2 / 2);
     }
-    @include small-desktop {
-        //1199
-        left: calc((100vw - 860px) / 2 / 2);
+    @include small-desktop{ //1199
+      left: calc((100vw - 960px) / 2 / 2);
     }
-}
-.cs_custom_slide_arrow_right {
+  }
+  .cs_custom_slide_arrow_right {
     right: calc((100vw - 1300px) / 2 / 2);
     margin-right: -28px;
-    @include medium-desktop {
-        right: calc((100vw - 1100px) / 2 / 2);
+    @include full-tablet{
+      right: calc((100vw - 1140px) / 2 / 2);
     }
-    @include full-tablet {
-        right: calc((100vw - 1140px) / 2 / 2);
+    @include small-desktop{ //1199
+      right: calc((100vw - 960px) / 2 / 2);
     }
-    @include small-desktop {
-        //1199
-        right: calc((100vw - 860px) / 2 / 2);
-    }
-}
-.cs_custom_slide_arrows {
+  }
+  .cs_custom_slide_arrows {
     color: var(--cl_btn-arrow);
-    @include full-tablet {
-        //1024
-        display: flex;
-        justify-content: center;
-        gap: 15px;
-        padding-top: 60px;
-    }
-    @include medium-tablet {
-        //767
-        padding-top: 35px;
-    }
-}
+    @include full-tablet { //991
+      display: flex;
+      justify-content: center;
+      gap: 15px;
+      padding-top: 60px;
+    }
+   @include medium-tablet { //767
+      padding-top: 35px;
+    }
+  }
+  
+  
+