ctt-babylon 0.8.1 → 0.8.3

package/lib/styles/styles/babylon/common.scss

@@ -1,1407 +1,1531 @@
+@use "./mixins.scss" as *;
+
 /*--------------------------------------------------------------
   4. General
 ----------------------------------------------------------------*/
 @for $i from 1 through 70 {
     .cs_mb_#{$i} {
-      margin-bottom: $i + px;
+        margin-bottom: $i + px;
     }
-  }
-  .cs_mb_75 {
+}
+.cs_mb_75 {
     margin-bottom: 75px;
-  }
-  .cs_mb_80 {
+}
+.cs_mb_80 {
     margin-bottom: 80px;
-  }
-  
-  @media screen and (max-width: 991px) {
+}
+
+@media screen and (max-width: 1024px) {
     @for $i from 1 through 70 {
-      .cs_mb_lg_#{$i} {
-        margin-bottom: $i + px;
-      }
+        .cs_mb_lg_#{$i} {
+            margin-bottom: $i + px;
+        }
     }
     .cs_mb_lg_75 {
-      margin-bottom: 75px;
+        margin-bottom: 75px;
     }
     .cs_mb_lg_80 {
-      margin-bottom: 80px;
+        margin-bottom: 80px;
     }
-  }
-  
-  @for $i from 1 through 10 {
+}
+
+@for $i from 1 through 10 {
     .cs_zindex_#{$i} {
-      z-index: $i;
-    }
-  }
-  
- 
- 
-  
-  .cs_mp_0 {
+        z-index: $i;
+    }
+}
+
+.cs_mp_0 {
     list-style: none;
     margin: 0;
     padding: 0;
-  }
-  
-  .cs_gap_y_20 {
+}
+
+.cs_gap_y_20 {
     gap: 20px 0;
-  }
-  
-  .cs_gap_y_24 {
+}
+
+.cs_gap_y_24 {
     gap: 24px 0;
-  }
-  
-  .cs_gap_y_30 {
+}
+
+.cs_gap_y_30 {
     gap: 30px 0;
-  }
-  
-  .cs_gap_y_35 {
+}
+
+.cs_gap_y_35 {
     gap: 35px 0;
-  }
-  
-  .cs_gap_y_40 {
-    gap: 40px 0;
-  }
-  .cs_gap_y_45 {
+}
+
+.cs_gap_y_40 {
+    gap: 20px 0;
+    @include min-small-desktop {
+        gap: 40px 0;
+    }
+}
+.cs_gap_y_45 {
     gap: 45px 0;
-  }
-  .cs_gap_y_50 {
+}
+.cs_gap_y_50 {
     gap: 50px 0;
-  }
-  .cs_gap_y_60 {
+}
+.cs_gap_y_60 {
     gap: 60px 0;
-    @include full-tablet { //991
-      gap: 45px 0;
+    @include full-tablet {
+        //1024
+        gap: 45px 0;
     }
-  }
-  .cs_gap_y_65 {
+}
+.cs_gap_y_65 {
     gap: 65px 0;
-    @include full-tablet { //991
-      gap: 45px 0;
+    @include full-tablet {
+        //1024
+        gap: 45px 0;
     }
-  }
-  .cs_gap_y_75 {
+}
+.cs_gap_y_75 {
     gap: 75px 0;
-    @include full-tablet { //991
-      gap: 45px 0;
+    @include full-tablet {
+        //1024
+        gap: 45px 0;
     }
-  }
-  .cs_gap_y_80 {
+}
+.cs_gap_y_80 {
     gap: 80px 0;
-    @include full-tablet { //991
-      gap: 45px 0;
+    @include full-tablet {
+        //1024
+        gap: 45px 0;
     }
-  }
-  .cs_gap_y_90 {
+}
+.cs_gap_y_90 {
     gap: 90px 0;
-    @include full-tablet { //991
-      gap: 45px 0;
+    @include full-tablet {
+        //1024
+        gap: 45px 0;
     }
-  }
-  
-  .cs_row_gap_50 {
+}
+
+.cs_row_gap_50 {
     margin-left: -25px;
     margin-right: -25px;
     > * {
-      padding-left: 25px;
-      padding-right: 25px;
-    }
-    @include full-tablet{
-      margin-left: -12px;
-      margin-right: -12px;
-      > * {
-        padding-left: 12px;
-        padding-right: 12px;
-      }
-    }
-  }
-  
-  .cs_row_gap_60 {
+        padding-left: 25px;
+        padding-right: 25px;
+    }
+    @include full-tablet {
+        margin-left: -12px;
+        margin-right: -12px;
+        > * {
+            padding-left: 12px;
+            padding-right: 12px;
+        }
+    }
+}
+
+.cs_row_gap_60 {
     margin-left: -30px;
     margin-right: -30px;
     > * {
-      padding-left: 30px;
-      padding-right: 30px;
-    }
-    @include full-tablet{
-      margin-left: -12px;
-      margin-right: -12px;
-      > * {
-        padding-left: 12px;
-        padding-right: 12px;
-      }
-    }
-  }
-  
-  .cs_row_gap_70 {
+        padding-left: 30px;
+        padding-right: 30px;
+    }
+    @include full-tablet {
+        margin-left: -12px;
+        margin-right: -12px;
+        > * {
+            padding-left: 12px;
+            padding-right: 12px;
+        }
+    }
+}
+
+.cs_row_gap_70 {
     margin-left: -35px;
     margin-right: -35px;
     > * {
-      padding-left: 35px;
-      padding-right: 35px;
-    }
-    @include full-tablet{
-      margin-left: -12px;
-      margin-right: -12px;
-      > * {
-        padding-left: 12px;
-        padding-right: 12px;
-      }
-    }
-  }
-  
-  .cs_row_gap_80 {
+        padding-left: 35px;
+        padding-right: 35px;
+    }
+    @include full-tablet {
+        margin-left: -12px;
+        margin-right: -12px;
+        > * {
+            padding-left: 12px;
+            padding-right: 12px;
+        }
+    }
+}
+
+.cs_row_gap_80 {
     margin-left: -80px;
     margin-right: -80px;
     > * {
-      padding-left: 80px;
-      padding-right: 80px;
-    }
-    @include full-tablet{
-      margin-left: -40px;
-      margin-right: -40px;
-      > * {
-        padding-left: 40px;
-        padding-right: 40px;
-      }
-    }
-    @include small-desktop{ //1199
-      margin-left: -12px;
-      margin-right: -12px;
-      > * {
-        padding-left: 12px;
-        padding-right: 12px;
-      }
-    }
-  }
-  
-  .cs_row_gap_90 {
+        padding-left: 80px;
+        padding-right: 80px;
+    }
+    @include full-tablet {
+        margin-left: -40px;
+        margin-right: -40px;
+        > * {
+            padding-left: 40px;
+            padding-right: 40px;
+        }
+    }
+    @include small-desktop {
+        //1199
+        margin-left: -12px;
+        margin-right: -12px;
+        > * {
+            padding-left: 12px;
+            padding-right: 12px;
+        }
+    }
+}
+
+.cs_row_gap_90 {
     margin-left: -45px;
     margin-right: -45px;
     > * {
-      padding-left: 45px;
-      padding-right: 45px;
+        padding-left: 45px;
+        padding-right: 45px;
+    }
+    @include full-desktop {
+        //1680
+        margin-left: -30px;
+        margin-right: -30px;
+        > * {
+            padding-left: 30px;
+            padding-right: 30px;
+        }
     }
-    @include full-desktop{ //1680
-      margin-left: -30px;
-      margin-right: -30px;
-      > * {
-        padding-left: 30px;
-        padding-right: 30px;
-      }
+    @include full-tablet {
+        margin-left: -15px;
+        margin-right: -15px;
+        > * {
+            padding-left: 15px;
+            padding-right: 15px;
+        }
     }
-    @include full-tablet{
-      margin-left: -15px;
-      margin-right: -15px;
-      > * {
-        padding-left: 15px;
-        padding-right: 15px;
-      }
-    }
-    @include small-desktop{ //1199
-      margin-left: -12px;
-      margin-right: -12px;
-      > * {
-        padding-left: 12px;
-        padding-right: 12px;
-      }
-    }
-  }
-  .cs_row_gap_100 {
+    @include small-desktop {
+        //1199
+        margin-left: -12px;
+        margin-right: -12px;
+        > * {
+            padding-left: 12px;
+            padding-right: 12px;
+        }
+    }
+}
+.cs_row_gap_100 {
     margin-left: -50px;
     margin-right: -50px;
     > * {
-      padding-left: 50px;
-      padding-right: 50px;
+        padding-left: 50px;
+        padding-right: 50px;
     }
-    @include full-tablet{
-      margin-left: -30px;
-      margin-right: -30px;
-      > * {
-        padding-left: 30px;
-        padding-right: 30px;
-      }
-    }
-    @include small-desktop{ //1199
-      margin-left: -12px;
-      margin-right: -12px;
-      > * {
-        padding-left: 12px;
-        padding-right: 12px;
-      }
-    }
-  }
-  
-  .container-fluid {
+    @include full-tablet {
+        margin-left: -30px;
+        margin-right: -30px;
+        > * {
+            padding-left: 30px;
+            padding-right: 30px;
+        }
+    }
+    @include small-desktop {
+        //1199
+        margin-left: -12px;
+        margin-right: -12px;
+        > * {
+            padding-left: 12px;
+            padding-right: 12px;
+        }
+    }
+}
+
+.container-fluid {
     max-width: 1920px;
     margin-left: auto;
     margin-right: auto;
     padding: 0;
     max-width: 100%;
     overflow: hidden;
-  }
-  
-  .cs_plr_100 {
+}
+
+.cs_plr_100 {
     padding-right: 100px;
     padding-left: 100px;
-    @include full-desktop{ //1680
-      padding-right: 60px;
-      padding-left: 60px;
+    @include full-desktop {
+        //1680
+        padding-right: 60px;
+        padding-left: 60px;
     }
-    @include full-tablet{
-      padding-right: 30px;
-      padding-left: 30px;
+    @include full-tablet {
+        padding-right: 30px;
+        padding-left: 30px;
     }
-    @include small-desktop{ //1199
-      padding-right: 15px;
-      padding-left: 15px;
+    @include small-desktop {
+        //1199
+        padding-right: 15px;
+        padding-left: 15px;
     }
-  }
-  
-  .cs_plr_70 {
+}
+
+.cs_plr_70 {
     padding-right: 70px;
     padding-left: 70px;
-    @include full-tablet { //991
-      padding-left: 0;
-      padding-right: 0;
+    @include full-tablet {
+        //1024
+        padding-left: 0;
+        padding-right: 0;
     }
-  }
-  
-  hr {
+}
+
+hr {
     opacity: 1;
     margin: 0;
     padding: 0;
     border: none;
     border-top: 1px solid var(--ternary);
-  }
-  
-  .cs_bg_filed {
+}
+
+.cs_bg_filed {
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
-  }
-  
-  .cs_bg_fixed {
+}
+
+.cs_bg_fixed {
     background-attachment: fixed;
-  }
-  
-  .cs_vertical_middle {
+}
+
+.cs_vertical_middle {
     display: flex;
     align-items: center;
     min-height: 100%;
-  }
-  
-  .cs_vertical_middle_in {
+}
+
+.cs_vertical_middle_in {
     flex: none;
     width: 100%;
-  }
-  .cs_center {
+}
+.cs_center {
     display: flex;
     align-items: center;
     justify-content: center;
-  }
-   
-   
-  
-  .cs_pr_110 {
+}
+
+.cs_pr_110 {
     padding-right: 110px;
-    @include full-tablet{
-      padding-right: 55px;
+    @include full-tablet {
+        padding-right: 55px;
     }
-    @include full-tablet { //991
-      padding-right: 0px;
+    @include full-tablet {
+        //1024
+        padding-right: 0px;
     }
-  }
-  
-  .cs_pl_110 {
+}
+
+.cs_pl_110 {
     padding-left: 110px;
-    @include full-tablet{
-      padding-left: 55px;
+    @include full-tablet {
+        padding-left: 55px;
     }
-    @include full-tablet { //991
-      padding-left: 0px;
+    @include full-tablet {
+        //1024
+        padding-left: 0px;
     }
-  }
-  
-  .cs_pr_100 {
+}
+
+.cs_pr_100 {
     padding-right: 100px;
-    @include full-tablet{
-      padding-right: 55px;
+    @include full-tablet {
+        padding-right: 55px;
     }
-    @include full-tablet { //991
-      padding-right: 0px;
+    @include full-tablet {
+        //1024
+        padding-right: 0px;
     }
-  }
-  
-  .cs_pl_100 {
+}
+
+.cs_pl_100 {
     padding-left: 100px;
-    @include full-tablet{
-      padding-left: 55px;
+    @include full-tablet {
+        padding-left: 55px;
     }
-    @include full-tablet { //991
-      padding-left: 0px;
+    @include full-tablet {
+        //1024
+        padding-left: 0px;
     }
-  }
-  .cs_pl_20 {
+}
+.cs_pl_20 {
     padding-left: 20px;
-    @include full-tablet { //991
-      padding-left: 0;
+    @include full-tablet {
+        //1024
+        padding-left: 0;
     }
-  }
-  .cs_pr_20 {
+}
+.cs_pr_20 {
     padding-right: 20px;
-    @include full-tablet { //991
-      padding-right: 0;
+    @include full-tablet {
+        //1024
+        padding-right: 0;
     }
-  }
-  .cs_pl_60 {
+}
+.cs_pl_60 {
     padding-left: 60px;
-    @include full-tablet { //991
-      padding-left: 0;
+    @include full-tablet {
+        //1024
+        padding-left: 0;
     }
-  }
-  .cs_pr_60 {
+}
+.cs_pr_60 {
     padding-right: 60px;
-  }
-  
-  .cs_plr_movil { 
-    @include full-tablet { //991
-      padding-left: 30px;
-      padding-right: 30px;
-    }
-  }
-  
-    
-  
-  @keyframes pulse-border {
+}
+
+.cs_plr_movil {
+    @include full-tablet {
+        //1024
+        padding-left: 30px;
+        padding-right: 30px;
+    }
+}
+
+@keyframes pulse-border {
     0% {
-      transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
-      opacity: 1;
+        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
+        opacity: 1;
     }
     100% {
-      transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
-      opacity: 0;
+        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
+        opacity: 0;
     }
-  }
-  
-  .cs_video_block.cs_style_1 {
+}
+
+.cs_video_block.cs_style_1 {
     height: 670px;
-    @include full-tablet { //991
-      height: 550px;
+    @include full-tablet {
+        //1024
+        height: 550px;
     }
-    @include full-tablet { //991
-      height: 420px;
-      .cs_play_btn {
-        transform: translate(-50%, -50%) scale(0.7);
-      }
+    @include full-tablet {
+        //1024
+        height: 420px;
+        .cs_play_btn {
+            transform: translate(-50%, -50%) scale(0.7);
+        }
     }
     .cs_video_block_bg {
-      border-radius: inherit;
+        border-radius: inherit;
     }
-   
-  
+
     &.cs_color_1 {
-      .cs_video_block_title {
-        background: linear-gradient(
-          180deg,
-          #fff 0%,
-          rgba(126, 124, 124, 0.3) 100%
-        );
-        background-clip: text;
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-      }
-    }
-  
+        .cs_video_block_title {
+            background: linear-gradient(
+                180deg,
+                #fff 0%,
+                rgba(126, 124, 124, 0.3) 100%
+            );
+            background-clip: text;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+    }
+
     &.cs_type_1 {
-      height: 750px;
-      @include full-tablet{
-        height: 600px;
-        .cs_play_btn_2 {
-          transform: scale(0.9);
+        height: 750px;
+        @include full-tablet {
+            height: 600px;
+            .cs_play_btn_2 {
+                transform: scale(0.9);
+            }
         }
-      }
-      @include full-tablet { //991
-        height: 450px;
-        .cs_play_btn_2 {
-          transform: scale(0.8);
+        @include full-tablet {
+            //1024
+            height: 450px;
+            .cs_play_btn_2 {
+                transform: scale(0.8);
+            }
         }
-      }
     }
     &.cs_type_2 {
-      height: 800px;
-      border-radius: 25em 25em 0 0;
-      overflow: hidden;
-      @include full-tablet{
-        height: 600px;
-        .cs_play_btn_2 {
-          transform: scale(0.9);
+        height: 800px;
+        border-radius: 25em 25em 0 0;
+        overflow: hidden;
+        @include full-tablet {
+            height: 600px;
+            .cs_play_btn_2 {
+                transform: scale(0.9);
+            }
         }
-      }
-      @include full-tablet { //991
-        .cs_play_btn_2 {
-          transform: scale(0.8);
+        @include full-tablet {
+            //1024
+            .cs_play_btn_2 {
+                transform: scale(0.8);
+            }
+        }
+        .cs_video_block_border {
+            position: absolute;
+            left: 30px;
+            right: 30px;
+            bottom: 30px;
+            top: 30px;
+            z-index: 2;
+            border-radius: inherit;
+            border: 1px solid var(--cl_accent);
         }
-      }
-      .cs_video_block_border {
-        position: absolute;
-        left: 30px;
-        right: 30px;
-        bottom: 30px;
-        top: 30px;
-        z-index: 2;
-        border-radius: inherit;
-        border: 1px solid var(--cl_accent);
-      }
     }
     &.cs_type_3 {
-      height: 800px;
-      @include full-tablet { //991
-        height: 500px;
-        .cs_play_btn_2 {
-          transform: scale(0.8);
+        height: 800px;
+        @include full-tablet {
+            //1024
+            height: 500px;
+            .cs_play_btn_2 {
+                transform: scale(0.8);
+            }
         }
-      }
     }
     &.cs_type_4 {
-      height: 550px;
-      .cs_play_btn_2 {
-        scale: 0.7;
-      }
+        height: 550px;
+        .cs_play_btn_2 {
+            scale: 0.7;
+        }
     }
     &.cs_type_5 {
-      height: 650px;
-      @include small-desktop{ //1199
-        height: 550px;
-      }
-      @include full-tablet { //991
-        height: 450px;
-      }
-      .cs_play_btn_2 {
-        scale: 0.7;
-      }
+        height: 650px;
+        @include small-desktop {
+            //1199
+            height: 550px;
+        }
+        @include full-tablet {
+            //1024
+            height: 450px;
+        }
+        .cs_play_btn_2 {
+            scale: 0.7;
+        }
     }
     &.cs_type_6 {
-      height: 425px;
-      .cs_play_btn_2 {
-        scale: 0.7;
-      }
+        height: 425px;
+        .cs_play_btn_2 {
+            scale: 0.7;
+        }
     }
-  }
-  .cs_rating {
+}
+.cs_rating {
     width: 92px;
     height: 14px;
     position: relative;
     font-size: 14px;
     display: inline-flex;
     i {
-      margin-right: 3px;
+        margin-right: 3px;
     }
     .cs_rating_percentage {
-      position: absolute;
-      height: 100%;
-      width: 100%;
-      left: 0;
-      top: 0;
-      display: flex;
-      overflow: hidden;
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        left: 0;
+        top: 0;
+        display: flex;
+        overflow: hidden;
     }
     .cs_rating_percentage {
-      width: 50%;
+        width: 50%;
     }
-  }
+}
 
-  
-  
-  .cs_grid_style_1,
-  .cs_grid_style_3 {
+.cs_grid_style_1,
+.cs_grid_style_3 {
     display: grid;
     grid-gap: 0px;
     grid-auto-rows: 1fr;
     grid-template-columns: repeat(4, 1fr);
     grid-auto-flow: dense;
-  }
-  
-  .cs_grid_style_1 {
-   @include medium-tablet { //767
-      grid-template-columns: repeat(2, 1fr);
+    @include medium-tablet {
+        grid-gap: 2px;
+    }
+}
+
+.cs_grid_style_1 {
+    @include medium-tablet {
+        //767
+        grid-template-columns: repeat(2, 1fr);
     }
-    @include small-tablet { //575
-      grid-template-columns: repeat(1, 1fr);
+    @include small-tablet {
+        //575
+        grid-template-columns: repeat(1, 1fr);
     }
     .cs_grid_item {
-      &:first-child {
-        grid-column: span 2;
-        grid-row: span 2;
-        .cs_gallery_item.cs_style_1 {
-          height: 100%;
-        }
-        @include small-tablet { //575
-          grid-column: initial;
-          grid-row: initial;
-        }
-      }
-      &:nth-child(2) {
-        grid-row: span 2;
-        @include small-tablet { //575
-          grid-row: initial;
+        &:first-child {
+            grid-column: span 2;
+            grid-row: span 2;
+            .cs_gallery_item.cs_style_1 {
+                height: 100%;
+            }
+            @include small-tablet {
+                //575
+                grid-column: initial;
+                grid-row: initial;
+            }
         }
-        .cs_gallery_item.cs_style_1 {
-          height: 100%;
+        &:nth-child(2) {
+            grid-row: span 2;
+            @include small-tablet {
+                //575
+                grid-row: initial;
+            }
+            .cs_gallery_item.cs_style_1 {
+                height: 100%;
+            }
         }
-      }
     }
-  }
-  .cs_grid_style_2 {
+}
+.cs_grid_style_2 {
     display: grid;
     grid-gap: 24px;
     grid-auto-rows: 1fr;
     grid-template-columns: repeat(3, 1fr);
     grid-auto-flow: dense;
-    @include full-tablet { //991
-      grid-template-columns: repeat(2, 1fr);
-    }
-    @include small-tablet { //575
-      grid-template-columns: repeat(1, 1fr);
-      grid-gap: 24px 0;
-    }
-    @include min-small-tablet{ //576
-      .cs_grid_item {
-        &:nth-child(4) {
-          grid-column: span 2;
+    @include full-tablet {
+        //1024
+        grid-template-columns: repeat(2, 1fr);
+    }
+    @include small-tablet {
+        //575
+        grid-template-columns: repeat(1, 1fr);
+        grid-gap: 24px 0;
+    }
+    @include min-small-tablet {
+        //576
+        .cs_grid_item {
+            &:nth-child(4) {
+                grid-column: span 2;
+            }
         }
-      }
     }
-  }
-  .cs_grid_style_3 {
-   @include medium-tablet { //767
-      grid-template-columns: repeat(2, 1fr);
+}
+.cs_grid_style_3 {
+    @include medium-tablet {
+        //767
+        grid-template-columns: repeat(2, 1fr);
     }
-    @include small-tablet { //575
-      grid-template-columns: repeat(1, 1fr);
+    @include small-tablet {
+        //575
+        grid-template-columns: repeat(1, 1fr);
     }
     .cs_grid_item {
-      &:first-child {
-        grid-row: span 2;
-        @include small-tablet { //575
-          grid-row: initial;
-        }
-        .cs_gallery_item.cs_style_1 {
-          height: 100%;
-        }
-      }
-  
-      &:nth-child(3) {
-        grid-column: span 2;
-        grid-row: span 2;
-        .cs_gallery_item.cs_style_1 {
-          height: 100%;
-        }
-        @include small-tablet { //575
-          grid-column: initial;
-          grid-row: initial;
-        }
-      }
-    }
-  }
-  
-  .cs_grid_style_4 {
+        &:first-child {
+            grid-row: span 2;
+            @include small-tablet {
+                //575
+                grid-row: initial;
+            }
+            .cs_gallery_item.cs_style_1 {
+                height: 100%;
+            }
+        }
+
+        &:nth-child(3) {
+            grid-column: span 2;
+            grid-row: span 2;
+            .cs_gallery_item.cs_style_1 {
+                height: 100%;
+            }
+            @include small-tablet {
+                //575
+                grid-column: initial;
+                grid-row: initial;
+            }
+        }
+    }
+}
+
+.cs_grid_style_4 {
     display: grid;
     grid-gap: 24px;
     grid-auto-rows: 1fr;
     grid-template-columns: repeat(3, 1fr);
     grid-auto-flow: dense;
-    @include small-desktop{ //1199
-      grid-template-columns: repeat(2, 1fr);
+    @include small-desktop {
+        //1199
+        grid-template-columns: repeat(2, 1fr);
     }
-   @include medium-tablet { //767
-      grid-template-columns: repeat(1, 1fr);
+    @include medium-tablet {
+        //767
+        grid-template-columns: repeat(1, 1fr);
     }
     .cs_grid_item {
-    @include min-medium-tablet { //768
-        &:first-child {
-          grid-column: span 2;
+        @include min-medium-tablet {
+            //768
+            &:first-child {
+                grid-column: span 2;
+            }
         }
-      }
     }
-  }
-  
-  .cs_gallery_item.cs_style_1 {
+}
+
+.cs_gallery_item.cs_style_1 {
     padding-top: 100%;
     .cs_gallery_item_hover {
-      position: absolute;
-      left: 50px;
-      right: 50px;
-      top: 50px;
-      bottom: 50px;
-      z-index: 1;
-      background: rgba(27, 27, 27, 0.3);
-      backdrop-filter: blur(2px);
-      padding: 15px;
-      transform: scale(0.5);
-      opacity: 0;
-      transition: all 0.5s ease;
-      text-align: center;
+        position: absolute;
+        left: 50px;
+        right: 50px;
+        top: 50px;
+        bottom: 50px;
+        z-index: 1;
+        background: rgba(27, 27, 27, 0.3);
+        backdrop-filter: blur(2px);
+        padding: 15px;
+        transform: scale(0.5);
+        opacity: 0;
+        transition: all 0.5s ease;
+        text-align: center;
     }
     &:hover {
-      .cs_gallery_item_hover {
-        opacity: 1;
-        transform: scale(1);
-      }
+        .cs_gallery_item_hover {
+            opacity: 1;
+            transform: scale(1);
+        }
     }
-  }
-  
-  .cs_gallery_item.cs_style_3 {
+}
+
+.cs_gallery_item.cs_style_3 {
     height: 465px;
-    @include full-tablet{
-      height: 400px;
+    @include full-tablet {
+        height: 400px;
     }
-    @include small-desktop{ //1199
-      height: 335px;
+    @include small-desktop {
+        //1199
+        height: 335px;
     }
-    @include full-tablet { //991
-      height: 380px;
+    @include full-tablet {
+        //1024
+        height: 380px;
     }
-   @include medium-tablet { //767
-      height: 275px;
+    @include medium-tablet {
+        //767
+        height: 275px;
     }
-    @include small-tablet { //575
-      height: 400px;
+    @include small-tablet {
+        //575
+        height: 400px;
     }
     .cs_gallery_item_hover {
-      position: absolute;
-      left: 24px;
-      top: 24px;
-      right: 24px;
-      bottom: 24px;
-      backdrop-filter: blur(10px);
-      background-color: rgb(var(--cl_background_white) / 95%);
-      display: flex;
-      justify-content: center;
-      text-align: center;
-      align-items: flex-end;
-      padding: 40px 20px;
-      opacity: 0;
-      transition: all 0.4s ease;
-    }
-    .cs_hover_icon {
-      position: absolute;
-      top: 48%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      display: flex;
-      svg {
+        position: absolute;
+        left: 24px;
+        top: 24px;
+        right: 24px;
+        bottom: 24px;
+        backdrop-filter: blur(10px);
+        background-color: rgb(var(--cl_background_white) / 95%);
+        display: flex;
+        justify-content: center;
+        text-align: center;
+        align-items: flex-end;
+        padding: 40px 20px;
         opacity: 0;
-        transform: scale(4);
         transition: all 0.4s ease;
-      }
     }
-    &:hover {
-      .cs_gallery_item_hover {
-        opacity: 1;
-      }
-      .cs_hover_icon {
+    .cs_hover_icon {
+        position: absolute;
+        top: 48%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        display: flex;
         svg {
-          opacity: 1;
-          transform: scale(1);
+            opacity: 0;
+            transform: scale(4);
+            transition: all 0.4s ease;
+        }
+    }
+    &:hover {
+        .cs_gallery_item_hover {
+            opacity: 1;
+        }
+        .cs_hover_icon {
+            svg {
+                opacity: 1;
+                transform: scale(1);
+            }
         }
-      }
     }
     &.cs_type_1 {
-      height: 615px;
-      @include full-tablet{
-        height: 460px;
-      }
-      @include small-desktop{ //1199
-        height: 410px;
-      }
-      @include full-tablet { //991
-        height: 480px;
-      }
-     @include medium-tablet { //767
-        height: 380px;
-      }
-      @include small-tablet { //575
-        height: 400px;
-      }
+        height: 615px;
+        @include full-tablet {
+            height: 460px;
+        }
+        @include small-desktop {
+            //1199
+            height: 410px;
+        }
+        @include full-tablet {
+            //1024
+            height: 480px;
+        }
+        @include medium-tablet {
+            //767
+            height: 380px;
+        }
+        @include small-tablet {
+            //575
+            height: 400px;
+        }
     }
-  }
-  
-  .cs_gallery_3_wrap {
+}
+
+.cs_gallery_3_wrap {
     position: relative;
     &::before {
-      content: '';
-      position: absolute;
-      height: 600px;
-      width: 100%;
-      left: 0;
-      top: 0;
-      background-color: var(--cl_corp);
+        content: '';
+        position: absolute;
+        height: 600px;
+        width: 100%;
+        left: 0;
+        top: 0;
+        background-color: var(--cl_corp);
     }
     .container {
-      position: relative;
+        position: relative;
     }
-  }
-  
-  .cs_custom_pointer_wrap {
+}
+
+.cs_custom_pointer_wrap {
     position: relative;
     .cs_mouse_point {
-      position: absolute;
-      z-index: 10;
+        position: absolute;
+        z-index: 10;
     }
-  
+
     .cs_mouse_point.cs_style_1 {
-      height: 115px;
-      width: 115px;
-      border-radius: 50%;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -58%) scale(0);
-      display: none;
-      background-color: rgba(27, 27, 27, 0.6);
-      backdrop-filter: blur(10px);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 15px;
-      font-weight: 500;
-      color: #fff;
-      opacity: 0;
-      transition: transform ease 0.3s, opacity ease 0.3s;
+        height: 115px;
+        width: 115px;
+        border-radius: 50%;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -58%) scale(0);
+        display: none;
+        background-color: rgba(27, 27, 27, 0.6);
+        backdrop-filter: blur(10px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 15px;
+        font-weight: 500;
+        color: #fff;
+        opacity: 0;
+        transition:
+            transform ease 0.3s,
+            opacity ease 0.3s;
     }
     .cs_mouse_point.cs_style_2 {
-      background-color: rgba(255, 255, 255, 0.9);
-      backdrop-filter: blur(10px);
-      color: var(--cl_icon);
-      font-family: var(--primary-font);
-      font-size: 38px;
-      white-space: nowrap;
-      margin: 15px 0 0 15px;
-      padding: 8px 30px 8px 20px;
-      line-height: 1.4em;
-      opacity: 0;
-      transform: scale(0);
-      transition: transform ease 0.3s, opacity ease 0.3s;
+        background-color: rgba(255, 255, 255, 0.9);
+        backdrop-filter: blur(10px);
+        color: var(--cl_icon);
+        font-family: var(--primary-font);
+        font-size: 38px;
+        white-space: nowrap;
+        margin: 15px 0 0 15px;
+        padding: 8px 30px 8px 20px;
+        line-height: 1.4em;
+        opacity: 0;
+        transform: scale(0);
+        transition:
+            transform ease 0.3s,
+            opacity ease 0.3s;
     }
     .cs_mouse_point.cs_style_3 {
-      width: 330px;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%) scale(0);
-      opacity: 0;
-      transition: transform ease 0.4s, opacity ease 0.4s;
-      pointer-events: none;
-    }
+        width: 330px;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%) scale(0);
+        opacity: 0;
+        transition:
+            transform ease 0.4s,
+            opacity ease 0.4s;
+        pointer-events: none;
+    }
     &:hover {
-      .cs_mouse_point.cs_style_1 {
-        opacity: 1;
-        transform: translate(-50%, -58%) scale(1);
-        @include full-tablet { //991
-          transform: translate(-50%, -58%) scale(0.6);
+        .cs_mouse_point.cs_style_1 {
+            opacity: 1;
+            transform: translate(-50%, -58%) scale(1);
+            @include full-tablet {
+                //1024
+                transform: translate(-50%, -58%) scale(0.6);
+            }
+        }
+        .cs_mouse_point.cs_style_3 {
+            opacity: 1;
+            transform: translate(-50%, -50%) scale(1);
+        }
+        .cs_mouse_point.cs_style_2 {
+            opacity: 1;
+            transform: scale(1);
         }
-      }
-      .cs_mouse_point.cs_style_3 {
-        opacity: 1;
-        transform: translate(-50%, -50%) scale(1);
-      }
-      .cs_mouse_point.cs_style_2 {
-        opacity: 1;
-        transform: scale(1);
-      }
     }
-  }
-  .cs_review_box.cs_style_1 {
+}
+.cs_review_box.cs_style_1 {
     display: flex;
     align-items: center;
     box-shadow: 0px 10px 25px 8px rgba(27, 27, 27, 0.04);
     gap: 20px;
     padding-right: 20px;
-  
+
     .cs_review_box_left {
-      padding: 15px 20px;
-      border-right: 1px solid var(--border);
-    }
-  }
-  .cs_hover_layer,
-  .cs_hover_layer_1,
-  .cs_hover_layer_2,
-  .cs_hover_layer_4 {
+        padding: 15px 20px;
+        border-right: 1px solid var(--border);
+    }
+}
+.cs_hover_layer,
+.cs_hover_layer_1,
+.cs_hover_layer_2,
+.cs_hover_layer_4 {
     position: relative;
     transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
     transform: perspective(600px) translate3d(0, 0, 0);
-  }
-  .cs_section_heading_wrap_1 {
+}
+.cs_section_heading_wrap_1 {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 0 40px;
-    @include full-tablet{
-      gap: 0 40px;
+    @include full-tablet {
+        gap: 0 40px;
     }
     @include full-tablet {
-      gap: 10px 40px;
-      flex-wrap: wrap;
-      justify-content: center;
-      margin-bottom: 40px;
-      flex-direction: column;
+        gap: 10px 40px;
+        flex-wrap: wrap;
+        justify-content: center;
+        margin-bottom: 40px;
+        flex-direction: column;
     }
-    .cs_section_heading.cs_style_1{
-      width: 100%;
+    .cs_section_heading.cs_style_1 {
+        width: 100%;
     }
     .cs_section_heading_icon {
-      animation: rotate-anim 40s infinite;
-      @include full-tablet { //991
-        display: none;
-      }
+        animation: rotate-anim 40s infinite;
+        @include full-tablet {
+            //1024
+            display: none;
+        }
     }
-  }
-  .cs_section_heading.cs_style_1 {
-    @include small-tablet { //575
-      br {
-        display: none;
-      }
+}
+.cs_section_heading.cs_style_1 {
+    @include small-tablet {
+        //575
+        br {
+            display: none;
+        }
     }
     &.cs_type_1 {
-      .cs_section_subtitle {
-        display: inline-flex;
-        position: relative;
-        align-items: center;
-        gap: 12px;
-        &::after {
-          content: '';
-          display: block;
-          height: 1px;
-          width: 50px;
-          background-color: var(--cl_accent);
+        .cs_section_subtitle {
+            display: inline-flex;
+            position: relative;
+            align-items: center;
+            gap: 12px;
+            &::after {
+                content: '';
+                display: block;
+                height: 1px;
+                width: 50px;
+                background-color: var(--cl_accent);
+            }
         }
-      }
     }
-  }
-  .cs_accordians.cs_style_1 {
+}
+.cs_accordians.cs_style_1 {
     .cs_accordian_toggle {
-      height: 14px;
-      width: 14px;
-      display: inline-block;
-      position: absolute;
-      top: 28px;
-      left: 0;
-      &::before,
-      &::after {
-        content: '';
-        height: 2px;
-        width: 100%;
-        background-color: var(--cl_title);
+        height: 14px;
+        width: 14px;
+        display: inline-block;
         position: absolute;
+        top: 28px;
         left: 0;
-        top: 50%;
-        margin-top: -1px;
-        border-radius: 3px;
-      }
-      &::after {
-        transform: rotate(90deg);
-        transition: all 0.3s ease;
-      }
+        &::before,
+        &::after {
+            content: '';
+            height: 2px;
+            width: 100%;
+            background-color: var(--cl_title);
+            position: absolute;
+            left: 0;
+            top: 50%;
+            margin-top: -1px;
+            border-radius: 3px;
+        }
+        &::after {
+            transform: rotate(90deg);
+            transition: all 0.3s ease;
+        }
     }
     .cs_accordian_head {
-      position: relative;
-      padding: 18px 0 18px 26px;
-      cursor: pointer;
-      transition: all 0.3s ease;
+        position: relative;
+        padding: 18px 0 18px 26px;
+        cursor: pointer;
+        transition: all 0.3s ease;
     }
     .cs_accordian_body {
-      padding-bottom: 18px;
-      p {
-        margin: 0;
-      }
+        max-height: 0;
+        overflow: hidden;
+        transition:
+            max-height 0.4s ease-out,
+            padding 0.4s ease-out;
+        padding-top: 0;
+        padding-bottom: 0;
+
+        p {
+            margin: 0;
+        }
     }
     .cs_accordian {
-      &:not(:last-child) {
-        border-bottom: 1px solid var(--cl_accent);
-      }
-      &.active {
-        .cs_accordian_head {
-          padding-bottom: 5px;
-        }
-        .cs_accordian_toggle {
-          &::after {
-            transform: rotate(0deg);
-          }
-        }
-      }
-    }
-  }
-  .cs_shape_wrap {
+        &:not(:last-child) {
+            border-bottom: 1px solid var(--cl_accent);
+        }
+        &.active {
+            .cs_accordian_head {
+                padding-bottom: 18px;
+            }
+            .cs_accordian_body {
+                max-height: 500px;
+                overflow: visible;
+                transition:
+                    max-height 0.5s ease-in,
+                    padding 0.5s ease-in;
+                padding-bottom: 18px;
+            }
+            .cs_accordian_toggle {
+                &::after {
+                    transform: rotate(0deg);
+                }
+            }
+        }
+    }
+}
+.cs_shape_wrap {
     .cs_shape_1 {
-      position: absolute;
-      top: 58%;
-      left: 50%;
-      transform: translate(-50%, -50%);
+        position: absolute;
+        top: 58%;
+        left: 50%;
+        transform: translate(-50%, -50%);
     }
     > * {
-      &:not(.cs_shape_1) {
-        position: relative;
-        z-index: 3;
-      }
+        &:not(.cs_shape_1) {
+            position: relative;
+            z-index: 3;
+        }
     }
-  }
-  
-  .cs_google_map.cs_style_1 {
+}
+
+.cs_google_map.cs_style_1 {
     height: 600px;
-    @include full-tablet { //991
-      height: 400px;
+    @include full-tablet {
+        //1024
+        height: 400px;
     }
-  
+
     iframe {
-      border: none;
-      filter: grayscale(100%);
-      height: 100%;
-      width: 100%;
+        border: none;
+        filter: grayscale(100%);
+        height: 100%;
+        width: 100%;
     }
     &.cs_type_1 {
-      height: 850px;
-      @include full-tablet { //991
-        height: 550px;
-      }
-      @include small-tablet { //575
-        height: 450px;
-      }
+        height: 850px;
+        @include full-tablet {
+            //1024
+            height: 550px;
+        }
+        @include small-tablet {
+            //575
+            height: 450px;
+        }
     }
-  }
-  .cs_page_heading {
+}
+.cs_page_heading {
     height: 600px;
     padding: 150px 0 50px;
-    @include full-tablet{
-      height: 500px;
+    @include full-tablet {
+        height: 500px;
     }
-    @include full-tablet { //991
-      height: 400px;
-      padding: 120px 0 50px;
+    @include full-tablet {
+        //1024
+        height: 400px;
+        padding: 120px 0 50px;
     }
     &.cs_size_1 {
-      height: 300px;
+        height: 300px;
     }
     &.cs_size_2 {
-      height: 500px;
+        height: 500px;
     }
-  }
-  .cs_page_heading_2 {
+}
+.cs_page_heading_2 {
     height: 650px;
     padding: 160px 0 50px;
     position: relative;
     display: flex;
     align-items: flex-end;
     .container {
-      position: relative;
-      z-index: 1;
+        position: relative;
+        z-index: 1;
     }
     &:after {
-      background-image: linear-gradient(0, rgba(0, 0, 0, 0.7), transparent);
-      bottom: -2px;
-      content: '';
-      height: 50%;
-      position: absolute;
-      width: 100%;
+        background-image: linear-gradient(0, rgba(0, 0, 0, 0.7), transparent);
+        bottom: -2px;
+        content: '';
+        height: 50%;
+        position: absolute;
+        width: 100%;
     }
     .cs_page_heading_in {
-      display: flex;
-      align-items: flex-end;
-      gap: 10px 30px;
-      justify-content: space-between;
-     @include medium-tablet { //767
-        flex-direction: column-reverse;
-        align-items: center;
-        gap: 10px;
-        text-align: center;
-      }
-      p {
-        color: rgba(255, 255, 255, 0.7);
-        margin-bottom: 5px;
-      }
+        display: flex;
+        align-items: flex-end;
+        gap: 10px 30px;
+        justify-content: space-between;
+        @include medium-tablet {
+            //767
+            flex-direction: column-reverse;
+            align-items: center;
+            gap: 10px;
+            text-align: center;
+        }
+        p {
+            color: rgba(255, 255, 255, 0.7);
+            margin-bottom: 5px;
+        }
     }
     .breadcrumb {
-      margin-bottom: 0;
-      margin-top: 8px;
-      color: rgba(255, 255, 255, 0.7);
-      font-size: inherit;
+        margin-bottom: 0;
+        margin-top: 8px;
+        color: rgba(255, 255, 255, 0.7);
+        font-size: inherit;
     }
     .breadcrumb-item {
-      &.active {
-        color: rgba(255, 255, 255, 0.7);
-      }
-      &::before {
-        color: rgba(255, 255, 255, 0.7);
-      }
+        &.active {
+            color: rgba(255, 255, 255, 0.7);
+        }
+        &::before {
+            color: rgba(255, 255, 255, 0.7);
+        }
     }
-  }
-  
-  .cs_sticky_1 {
+}
+
+.cs_sticky_1 {
     position: sticky;
     top: 0;
-  }
-  //////////////////////////
-  .cs_moving_text_wrap {
+}
+//////////////////////////
+.cs_moving_text_wrap {
     overflow-x: hidden;
-  
+
     &:hover {
-      .cs_moving_text {
-        animation-play-state: paused;
-      }
+        .cs_moving_text {
+            animation-play-state: paused;
+        }
     }
-  }
-  .cs_moving_text_in {
+}
+.cs_moving_text_in {
     display: flex;
     flex-wrap: nowrap;
     white-space: nowrap;
     min-width: 100%;
-  }
-  .cs_moving_text {
+}
+.cs_moving_text {
     display: flex;
     flex-shrink: 0;
     align-items: center;
     padding: 15px 5px;
     animation: slide-left 10s linear infinite;
     > * {
-      margin: 0 20px;
+        margin: 0 20px;
     }
-  }
-  .cs_moving_text_wrap {
+}
+.cs_moving_text_wrap {
     &.cs_style_1 {
-      .cs_moving_text {
-        animation-duration: 20s;
-      }
-      &:hover {
         .cs_moving_text {
-          animation-play-state: paused;
+            animation-duration: 20s;
+        }
+        &:hover {
+            .cs_moving_text {
+                animation-play-state: paused;
+            }
         }
-      }
-      &.cs_type_1 {
-        transform: rotate(-3deg);
-        margin-left: -10px;
-        width: calc(100% + 20px);
-      }
-      img {
-        @include full-tablet{
-          max-height: 85px;
+        &.cs_type_1 {
+            transform: rotate(-3deg);
+            margin-left: -10px;
+            width: calc(100% + 20px);
         }
-        @include full-tablet { //991
-          max-height: 62px;
+        img {
+            @include full-tablet {
+                max-height: 85px;
+            }
+            @include full-tablet {
+                //1024
+                max-height: 62px;
+            }
         }
-      }
     }
-  }
-  @keyframes slide-left {
+}
+@keyframes slide-left {
     from {
-      transform: translateX(0);
+        transform: translateX(0);
     }
     to {
-      transform: translateX(-100%);
+        transform: translateX(-100%);
     }
-  }
-  .cs_half_bg {
+}
+.cs_half_bg {
     .cs_half_bg_right {
-      position: absolute;
-      height: 100%;
-      left: 0;
-      top: 0;
-      width: 50%;
-      @include full-tablet { //991
-        width: 100%;
-      }
+        position: absolute;
+        height: 100%;
+        left: 0;
+        top: 0;
+        width: 50%;
+        @include full-tablet {
+            //1024
+            width: 100%;
+        }
     }
-   
+
     .cs_half_bg_left {
-      position: absolute;
-      height: 100%;
-      right: 0;
-      top: 0;
-      width: 50%;
-      @include full-tablet { //991
-        width: 100%;
-      }
+        position: absolute;
+        height: 100%;
+        right: 0;
+        top: 0;
+        width: 50%;
+        @include full-tablet {
+            //1024
+            width: 100%;
+        }
     }
-   
-  }
-  .cs_full_width_right {
+}
+.cs_full_width_right {
     width: 100vw;
     .cs_iconbox.cs_style_3 {
-      width: 416px;
-      @include full-tablet { //991
-        width: 350px;
-      }
-      @include mobile {  
-        width: 330px;
-      }
+        width: 416px;
+        @include full-tablet {
+            //1024
+            width: 350px;
+        }
+        @include mobile {
+            width: 330px;
+        }
     }
-  }
-  .cs_width_left_50_vw {
+}
+.cs_width_left_50_vw {
     height: 100%;
     width: calc(50vw - 1.8%);
-    @include full-tablet { //991
-      margin-left: 0;
-      width: 100%;
+    @include full-tablet {
+        //1024
+        margin-left: 0;
+        width: 100%;
     }
-  }
-  .cs_width_right_50_vw {
+}
+.cs_width_right_50_vw {
     width: calc(50vw - 1.8%);
-    @include full-tablet { //991
-      width: 100%;
+    @include full-tablet {
+        //1024
+        width: 100%;
     }
-  }
-  .cs_width_right_50_vw-110 {
+}
+.cs_width_right_50_vw-110 {
     width: calc(50vw - 110px);
-    @include full-tablet{
-      width: calc(50vw - 55px);
+    @include full-tablet {
+        width: calc(50vw - 55px);
     }
-    @include full-tablet { //991
-      width: 100%;
+    @include full-tablet {
+        //1024
+        width: 100%;
     }
-  }
-  .faq_thumb_1 {
+}
+.faq_thumb_1 {
     height: 700px;
-    @include full-tablet { //991
-      height: 500px;
+    @include full-tablet {
+        //1024
+        height: 500px;
     }
-  }
-  .cs_tab {
+}
+.cs_tab {
     display: none;
     &.active {
-      display: block;
+        display: block;
     }
-  }
-  .cs_tabs.cs_style_1 {
+}
+.cs_tabs.cs_style_1 {
     .cs_tabs_heading {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      flex-wrap: wrap;
-      gap: 20px 30px;
-    }
-  }
-  .cs_tab_links.cs_style_1 {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: 20px 30px;
+    }
+}
+.cs_tab_links.cs_style_1 {
     display: inline-flex;
     flex-wrap: wrap;
     background-color: #313131;
     border-radius: 20px;
     li {
-      border-radius: inherit;
-      &.active {
-        a {
-          background-color: var(--cl_accent);
-          color: #fff;
+        border-radius: inherit;
+        &.active {
+            a {
+                background-color: var(--cl_accent);
+                color: #fff;
+            }
         }
-      }
     }
     a {
-      display: inline-block;
-      padding: 11px 40px;
-      border-radius: inherit;
-      @include full-tablet { //991
-        padding: 11px 30px;
-      }
-      @include small-tablet { //575
-        padding: 11px 17px;
-      }
-    }
-  }
-  .cs_tabs.cs_style_2 {
+        display: inline-block;
+        padding: 11px 40px;
+        border-radius: inherit;
+        @include full-tablet {
+            //1024
+            padding: 11px 30px;
+        }
+        @include small-tablet {
+            //575
+            padding: 11px 17px;
+        }
+    }
+}
+.cs_tabs.cs_style_2 {
     display: flex;
     gap: 24px;
-  }
-  .cs_tab_links.cs_style_2 {
+}
+.cs_tab_links.cs_style_2 {
     flex: none;
     width: 306px;
     display: flex;
     flex-direction: column;
     gap: 24px;
     li {
-      height: 171px;
-      width: 100%;
-      a {
-        display: block;
-        height: 100%;
-        width: 100%; 
-        cursor: pointer;
-      }
-      img {
-        height: 100%;
+        height: 171px;
         width: 100%;
-        object-fit: cover;
-        border-radius: inherit;
-      }
-      &.active {
         a {
-          box-shadow: 0 0 0px 2px var(--cl_accent);
+            display: block;
+            height: 100%;
+            width: 100%;
+            cursor: pointer;
+        }
+        img {
+            height: 100%;
+            width: 100%;
+            object-fit: cover;
+            border-radius: inherit;
+        }
+        &.active {
+            a {
+                box-shadow: 0 0 0px 2px var(--cl_accent);
+            }
         }
-      }
     }
-  }
-  @keyframes rotate-anim {
+}
+@keyframes rotate-anim {
     100% {
-      transform: rotate(360deg);
+        transform: rotate(360deg);
     }
-  }
-  .cs_contact_info_boxes {
+}
+.cs_contact_info_boxes {
     display: flex;
     align-items: center;
     justify-content: space-around;
     gap: 25px 40px;
     flex-wrap: wrap;
     .cs_iconbox.cs_style_4 {
-      max-width: 320px;
+        max-width: 320px;
     }
-    @include small-desktop{ //1199
-      gap: 25px 20px;
+    @include small-desktop {
+        //1199
+        gap: 25px 20px;
     }
-   @include medium-tablet { //767
-      flex-direction: column;
-      align-items: flex-start;
+    @include medium-tablet {
+        //767
+        flex-direction: column;
+        align-items: flex-start;
     }
-  }
-  .cs_author_card {
+}
+.cs_author_card {
     .cs_author_img {
-      width: 250px;
-      height: 250px;
-      margin-left: auto;
-      margin-right: auto;
-      position: relative;
-      padding: 15px;
-      border-radius: 50%;
-      svg {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-      }
-      img {
-        height: 100%;
-        width: 100%;
-        object-fit: cover;
-        border-radius: inherit;
-      }
+        width: 250px;
+        height: 250px;
+        margin-left: auto;
+        margin-right: auto;
+        position: relative;
+        padding: 15px;
+        border-radius: 50%;
+        svg {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+        img {
+            height: 100%;
+            width: 100%;
+            object-fit: cover;
+            border-radius: inherit;
+        }
     }
     .cs_author_meta {
-      img {
-        max-height: 100px;
-      }
+        img {
+            max-height: 100px;
+        }
     }
     .cs_author_name {
-      span {
-        display: inline-block;
-        position: relative;
-        padding: 0 15px;
-        &::before,
-        &::after {
-          content: '';
-          position: absolute;
-          height: 1px;
-          width: 30px;
-          background-color: var(--border);
-          top: 50%;
-        }
-        &::before {
-          left: 100%;
+        span {
+            display: inline-block;
+            position: relative;
+            padding: 0 15px;
+            &::before,
+            &::after {
+                content: '';
+                position: absolute;
+                height: 1px;
+                width: 30px;
+                background-color: var(--border);
+                top: 50%;
+            }
+            &::before {
+                left: 100%;
+            }
+            &::after {
+                right: 100%;
+            }
         }
-        &::after {
-          right: 100%;
-        }
-      }
     }
-  }
-  .cs_booking_card {
+}
+.cs_booking_card {
     border: 1px solid var(--ternary);
     padding: 20px 30px;
     .cs_booking_time {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      gap: 5px 20px;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 5px 20px;
     }
-  }
-  .cs_booking_info_list {
+}
+.cs_booking_info_list {
     li {
-      display: flex;
-      justify-content: space-between;
-      padding: 6px 0;
-      &:not(:last-child) {
-        border-bottom: 1px solid var(--ternary);
-      }
-    }
-  }
-  .lg-thumb.lg-group {
+        display: flex;
+        justify-content: space-between;
+        padding: 6px 0;
+        &:not(:last-child) {
+            border-bottom: 1px solid var(--ternary);
+        }
+    }
+}
+.lg-thumb.lg-group {
     margin-left: auto;
     margin-right: auto;
-  }
-  .lg-outer .lg-thumb-item.active,
-  .lg-outer .lg-thumb-item:hover {
+}
+.lg-outer .lg-thumb-item.active,
+.lg-outer .lg-thumb-item:hover {
     border-color: var(--cl_accent);
-  }
-  .lg-img-wrap {
+}
+.lg-img-wrap {
     padding: 50px 70px !important;
-  }
-  .lg-sub-html {
+}
+.lg-sub-html {
     color: var(--cl_corp);
     display: none;
-  }
-  .lg-actions .lg-prev {
-    left: 15px;
-  }
-  .lg-actions .lg-next {
-    right: 15px;
-  }
-  .cs_debit_card_box {
+}
+.lg-outer .lg-thumb-outer {
+    background-color: #bebebe;
+}
+.lg-outer .lg-toogle-thumb {
+    background-color: #bebebe;
+    color: black;
+}
+.lg-actions {
+    .lg-prev {
+        left: 15px;
+        color: var(--cl_btn-arrow);
+        &:after {
+            content: none;
+        }
+        &:hover {
+            color: var(--cl_btn-arrow-hover);
+        }
+    }
+    .lg-next {
+        right: 15px;
+        color: var(--cl_btn-arrow);
+        &:after {
+            content: none;
+        }
+        &:hover {
+            color: var(--cl_btn-arrow-hover);
+        }
+    }
+}
+.lg-toolbar {
+    #lg-zoom-in,
+    #lg-zoom-out {
+        display: none;
+    }
+    .lg-close:after {
+        content: none;
+    }
+}
+.cs_debit_card_box {
     display: none;
-  }
-  .cs_expent_section {
+}
+.cs_expent_section {
     display: flex;
-    @include full-tablet { //991
-      flex-direction: column;
+    @include full-tablet {
+        //1024
+        flex-direction: column;
     }
     .cs_hover_active {
-      flex: 1;
-      transition: all 0.4s ease;
-      @include full-tablet { //991
-        &.active {
-          flex: 1.1;
+        flex: 1;
+        transition: all 0.4s ease;
+        @include full-tablet {
+            //1024
+            &.active {
+                flex: 1.1;
+            }
         }
-      }
     }
-  }
-  .cs_sticky_top_100 {
+}
+.cs_sticky_top_100 {
     position: sticky;
     top: 100px;
-  }
-  @include full-tablet { //991
+}
+/* @include full-tablet { */
+@media (max-width: 991px) {
+    //Necesario porque el componente se controla con el sistema de grid de bootstrap el cual tiene sus propios puntos de corte
+    //1024
     .cs_mobile_reverse {
-      flex-direction: column-reverse;
+        flex-direction: column-reverse;
     }
     .cs_mobile_reverse_sp {
-      display: flex;
-      flex-direction: column-reverse;
+        display: flex;
+        flex-direction: column-reverse;
     }
     .cs_form_heading_1 {
-      br {
-        display: none;
-      }
+        br {
+            display: none;
+        }
     }
     .cs_row_gap_lg_10 {
-      margin-left: -5px;
-      margin-right: -5px;
-      > * {
-        padding-left: 5px;
-        padding-right: 5px;
-      }
+        margin-left: -5px;
+        margin-right: -5px;
+        > * {
+            padding-left: 5px;
+            padding-right: 5px;
+        }
     }
     .cs_gap_y_lg_80 {
-      gap: 80px 0;
+        gap: 80px 0;
     }
-  }
+}
 
-  img {
+img {
     border: 0;
     max-width: 100%;
     height: auto;
-  }
-  
-  .info--icon {
+}
+
+.info--icon {
     border-radius: 100%;
     display: flex;
     flex-direction: row;
@@ -1409,56 +1533,65 @@
     align-items: center;
     flex-wrap: wrap;
     .icon--svg {
-      background-color: var(--cl_icon);
-      width: 25px;
-      height: 25px;
-      -webkit-mask-size: 20px;
-      mask-size: 20px;
+        background-color: var(--cl_icon);
+        width: 25px;
+        height: 25px;
+        mask-size: contain;
     }
     &.icon--light {
-      .icon--svg {
-        background-color: var(--cl_icon-light);
-      }
-    }
-    &.icon--rounded { 
-      border-radius: 100%;
-      .icon--svg {
-        width: 45px;
-        height: 45px;
-        mask-size: 25px;
-      }
+        .icon--svg {
+            background-color: var(--cl_icon-light);
+        }
+    }
+    &.icon--rounded {
+        border-radius: 100%;
+        .icon--svg {
+            width: 45px;
+            height: 45px;
+            mask-size: contain;
+        }
     }
     &.icon--big {
-      .icon--svg {
-        width: 90px;
-        height: 90px;
-        -webkit-mask-size: 90px;
-        mask-size: 90px;
-      }
-      @include full-tablet {
         .icon--svg {
-          width: 50px;
-          height: 50px;
-          -webkit-mask-size: 50px;
-          mask-size: 50px;
+            width: 90px;
+            height: 90px;
+            mask-size: contain;
+        }
+        @include full-tablet {
+            .icon--svg {
+                width: 50px;
+                height: 50px;
+                mask-size: contain;
+            }
         }
-      }
     }
     &.icon--medium {
-      .icon--svg {
-        width: 50px;
-        height: 50px;
-        -webkit-mask-size: 50px;
-        mask-size: 50px;
-      }
-      @include full-tablet {
         .icon--svg {
-          width: 45px;
-          height: 45px;
-          -webkit-mask-size: 45px;
-          mask-size: 45px;
+            width: 50px;
+            height: 50px;
+            mask-size: contain;
+        }
+        @include full-tablet {
+            .icon--svg {
+                width: 45px;
+                height: 45px;
+                mask-size: contain;
+            }
+        }
+    }
+    &.icon--40 {
+        .icon--svg {
+            width: 40px;
+            height: 40px;
+            mask-size: contain;
+        }
+        @include full-tablet {
+            .icon--svg {
+                width: 35px;
+                height: 35px;
+                mask-size: contain;
+            }
         }
-      }
     }
 }
 .cs_hamburger_header .cs_menu_dropdown_toggle {
@@ -1469,157 +1602,229 @@
     -ms-flex-order: 2;
     padding-left: 10px;
     order: 2;
-    @include small-desktop{ //1199
-      position: initial;
-      height: initial;
-      width: initial;
-      padding: 0;
+    @include small-desktop {
+        //1199
+        position: initial;
+        height: initial;
+        width: initial;
+        padding: 0;
     }
     &::before {
-      content: '';
-      position: absolute;
-      height: 100%;
-      width: 100%;
-      left: 0;
-      top: 0;
-      height: 50px;
+        content: '';
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        left: 0;
+        top: 0;
+        height: 50px;
     }
     span {
-      width: 0px;
-      height: 0px;
-      display: block;
-      border-left: 6px solid transparent;
-      border-right: 6px solid transparent;
-      border-top: 6px solid var(--cl_menu-text);
-      &::before,
-      &::after {
-        display: none;
-      }
+        width: 0px;
+        height: 0px;
+        display: block;
+        border-left: 6px solid transparent;
+        border-right: 6px solid transparent;
+        border-top: 6px solid var(--cl_menu-text);
+        &::before,
+        &::after {
+            display: none;
+        }
     }
 }
-.column-reverse{
-  @include full-tablet {
-   flex-direction: column-reverse;
-
-  }
+.column-reverse {
+    @include full-tablet {
+        flex-direction: column-reverse;
+    }
 }
 
-#btn-book{
-  display: none;
-  @include small-desktop {
-    display: block;
-  }
+#btn-book {
+    display: none;
+    @include small-desktop {
+        display: block;
+    }
+}
+#btn-lang {
+    padding: 13px 15px;
 }
-
 //header sticky
-.header_sticky{
-  //header-book-show
-  &.header_sticky-menu-show{ 
-    #btn-book{
-      display: block;
+.header_sticky {
+    &.header_sticky-menu-show {
+        #btn-book {
+            display: block;
+        }
+        .babylon__engine {
+            display: none;
+        }
     }
-    .babylon__engine{
-        display: none;
+    //header-book-show
+    &.header_sticky-book-show {
+        @include min-small-desktop {
+            .babylon__engine {
+                position: fixed;
+                top: 0;
+                display: block;
+                z-index: 101;
+                width: 900px;
+                left: 50%;
+                transform: translateX(-50%);
+            }
+            .cs_hamburger_btn {
+                display: block !important;
+            }
+        }
     }
-  } 
-  //header-book-show
-  &.header_sticky-book-show{ 
-    lib-babylon-header-book-show{
-      
+    //header-clear
+    &.header_sticky-clear {
+        #btn-book {
+            display: block;
+        }
+        .babylon__engine {
+            display: none;
+        }
     }
-    @include min-small-desktop {
-      .babylon__engine{
-        position: fixed;
-        top: 0;
-        display: block;
-        z-index: 101;
-        width: 900px;
-        left: 50%;
-        transform: translateX(-50%);
-      }
-      .cs_hamburger_btn{
-        display: block!important;
-      }
-    }
-  }
-  //header-clear
-  &.header_sticky-clear{ 
-    #btn-book{
-      display: block;
-    }
-    .babylon__engine{
-        display: none;
+}
+
+.float-buttons {
+    position: fixed;
+    bottom: 70px;
+    left: 15px;
+    z-index: 100;
+    .float-buttons--inner {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+    .btn-float {
+        background-color: var(--cl_btn-box);
+        font-size: 17px;
+        color: white;
+        border-radius: 50%;
+        padding: 6px 10px;
+        text-transform: uppercase;
+        font-weight: 400;
+        letter-spacing: 0.1em;
+        text-align: center;
+        min-width: 40px;
+        min-height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .text {
+            width: 0;
+            opacity: 0;
+            position: absolute;
+            left: 20px;
+            margin: 0;
+            background: var(--cl_btn-call-hover);
+            color: white;
+            border-radius: 0 30px 30px 0;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            z-index: -1;
+            padding-left: 20px;
+            letter-spacing: 0;
+            font-size: 13px;
+            transition: opacity 0.5s ease;
+        }
+        &:hover {
+            background-color: var(--cl_btn-call-hover);
+            .text {
+                width: 120px;
+                transition: opacity 0.5s ease;
+                opacity: 1;
+            }
+        }
+    }
+    @include min-full-tablet {
+        bottom: 30px;
+        left: 30px;
     }
-  } 
 }
 
-.float-buttons{
-  position: fixed;
-  bottom: 70px;
-  left: 15px;
-  z-index: 100;
-  .float-buttons--inner{
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-  }
-  .btn-float{
-    background-color: var(--cl_btn-box);
-    font-size: 17px;
-    color: white;
-    border-radius: 50%;
-    padding: 6px 10px;
-    text-transform: uppercase;
-    font-weight: 400;
-    letter-spacing: 0.1em; 
-    text-align: center;
-    min-width: 40px;
-    min-height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    .text{
-      width: 0;
-      opacity: 0;
-      position: absolute;
-      left: 20px;
-      margin: 0;
-      background: var(--cl_btn-call-hover);
-      color: white;
-      border-radius: 0 30px 30px 0;
-      height: 40px;
-      display: flex;
-      align-items: center;
-      z-index: -1;
-      padding-left: 20px;
-      letter-spacing: 0;
-      font-size: 13px;
-        transition: opacity 0.5s ease;
-    }
-    &:hover{
-      background-color: var(--cl_btn-call-hover);
-      .text{
-        width: 120px;
-        transition: opacity 0.5s ease;
-        opacity: 1; 
-      }
-    }
-  }
-  @include min-full-tablet {
-    bottom: 30px;
-    left: 30px;
-  }
+// lines
+.cs-line__small {
+    position: relative;
+    &::before,
+    &::after {
+        content: '';
+        display: block;
+        position: absolute;
+        width: 74px;
+        height: 1px;
+        background-color: #699378;
+        left: calc(50% - 37px);
+    }
+    &::before {
+        top: -10px;
+    }
+    &::after {
+        bottom: -10px;
+    }
 }
 
- 
 @media (min-width: 1680px) {
-  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
-      max-width: 1400px;
-  }
+    .container,
+    .container-lg,
+    .container-md,
+    .container-sm,
+    .container-xl,
+    .container-xxl {
+        max-width: 1400px;
+    }
 }
 
 // @media (min-width: 1800px) {
 //   .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
 //       max-width: 1600px;
 //   }
-// }
+// }
+
+//formulario
+input,
+optgroup,
+select,
+textarea {
+    font-family: var(--font-text);
+}
+
+.pointers-none {
+    pointer-events: none;
+}
+.no_scroll {
+    overflow: hidden;
+}
+.cdk-global-scrollblock {
+    overflow: hidden;
+}
+
+.alert {
+    align-items: center !important;
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate3d(-50%, -50%, 0);
+}
+
+.breadcrumbs-wrapper {
+    position: relative;
+    margin-top: 40px;
+    top: 20px;
+    @include full-tablet {
+        display: none;
+    }
+}
+
+body {
+    &.header_sticky {
+        padding-top: 40px;
+        @include min-medium-tablet {
+            padding-top: 70px;
+        }
+        @include min-full-tablet {
+            padding-top: 170px;
+        }
+        @include min-small-desktop {
+            padding-top: 180px;
+        }
+    }
+}