ctt-babylon 0.6.19 → 0.7.0

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

@@ -1,719 +1,764 @@
+@use './mixins.scss' as *;
+@use './variables.scss' as *;
 /*--------------------------------------------------------------
   5. Slider
 ----------------------------------------------------------------*/
 .cs_slider {
     position: relative;
-  }
-  .slick-arrow {
+}
+.slick-arrow {
     cursor: pointer;
-  }
-  .draggable {
-    // cursor: url(../img/drag.png) 16 9, ew-resize !important;
-  }
-  .slick-slide > div {
+}
+
+.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 { //991
-      .slick-slide {
-        padding-left: 12px;
-        padding-right: 12px;
-      }
-      .slick-list {
-        margin-left: -12px;
-        margin-right: -12px;
-      }
+    @include full-tablet {
+        //1024
+        .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);
-      &:hover {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        cursor: pointer;
+        transition: all 0.3s ease;
+        font-size: 20px;
+        color: var(--cl_btn-arrow);
         &:hover {
-          color:  var(--cl_btn-arrow-hover);
+            &: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 { //991
-          margin-top: 15px;
-          gap: 8px;
+        @include full-tablet {
+            //1024
+            margin-top: 15px;
+            gap: 8px;
+            justify-content: center;
+            padding: 20px;
         }
-      }
-      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);
+            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 {
-      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;
+        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);
+            }
+        }
+    }
+    &.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;
+            }
         }
-      }
     }
     &.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 { //991
-        width: 100%;
-        position: initial;
-        transform: initial;
-      }
-      ul {
-        margin: 0;
-        flex-direction: column;
-        @include full-tablet { //991
-          flex-direction: row;
-          margin-top: 20px;
+        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;
+            }
         }
-      }
     }
     &.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;
-      }
-    }
-    &:hover {
-      .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; 
+            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 {
-      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 {
+    .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_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 {
     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;
-      .slick-slide {
-        border: none;
-        padding: 12px 0;
-      }
-      @include full-tablet { //991
-        margin-top: -5px;
-        margin-bottom: -5px;
+        margin-top: -12px;
+        margin-bottom: -12px;
         .slick-slide {
-          border: none;
-          padding: 5px 0;
+            border: none;
+            padding: 12px 0;
+        }
+        @include full-tablet {
+            //1024
+            margin-top: -5px;
+            margin-bottom: -5px;
+            .slick-slide {
+                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 { //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 {
+    @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 {
     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 { //991
-      width: 250px;
+    @include full-tablet {
+        //1024
+        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 { //991
-      height: 60px;
+    @include full-tablet {
+        //1024
+        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%);
@@ -721,101 +766,111 @@
     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 { // 991
+}
+@include full-tablet {
+    // 1024
     .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: 992px) and (max-width: 1199px) {
-      height: 470px;
+    @media only screen and (min-width: 1025px) and (max-width: 1199px) {
+        height: 470px;
     }
-    @media only screen and (min-width: 768px) and (max-width: 991px) {
-      height: 350px;
+    @media only screen and (min-width: 768px) and (max-width: 1024px) {
+        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 { //991
-      position: initial;
+    @include full-tablet {
+        //1024
+        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 - 960px) / 2 / 2);
+    @include small-desktop {
+        //1199
+        left: calc((100vw - 860px) / 2 / 2);
     }
-  }
-  .cs_custom_slide_arrow_right {
+}
+.cs_custom_slide_arrow_right {
     right: calc((100vw - 1300px) / 2 / 2);
     margin-right: -28px;
-    @include full-tablet{
-      right: calc((100vw - 1140px) / 2 / 2);
+    @include medium-desktop {
+        right: calc((100vw - 1100px) / 2 / 2);
     }
-    @include small-desktop{ //1199
-      right: calc((100vw - 960px) / 2 / 2);
+    @include full-tablet {
+        right: calc((100vw - 1140px) / 2 / 2);
     }
-  }
-  .cs_custom_slide_arrows {
+    @include small-desktop {
+        //1199
+        right: calc((100vw - 860px) / 2 / 2);
+    }
+}
+.cs_custom_slide_arrows {
     color: var(--cl_btn-arrow);
-    @include full-tablet { //991
-      display: flex;
-      justify-content: center;
-      gap: 15px;
-      padding-top: 60px;
-    }
-   @include medium-tablet { //767
-      padding-top: 35px;
-    }
-  }
-  
-  
-  
+    @include full-tablet {
+        //1024
+        display: flex;
+        justify-content: center;
+        gap: 15px;
+        padding-top: 60px;
+    }
+    @include medium-tablet {
+        //767
+        padding-top: 35px;
+    }
+}