/*--------------------------------------------------------------
## Basic Color
----------------------------------------------------------------*/
/*--------------------------------------------------------------
>> TABLE OF CONTENTS:
----------------------------------------------------------------
1. Typography
2. Preloader
3. Spacing
4. General
5. Slider
6. Isotope
7. Video Popup
8. Sidebar
9. Post Details
10. Portfolio Details
11. Service Details
12. Form
13. Commingsoon
14. Header
15. Footer
16. Accordian
17. Countdown
18. Counter
19. CTA
20. Contact
21. Menu Card
22. Expertise
23. Event
24. Gallery
25. Hero
26. Icon Box
27. Image Box
28. Info Card
29. Logo Carousel
30. Newsletter
31. Portfolio
32. Post
33. Pricing Table
34. Progressbar
35. Product
36. Shop Sidebar
37. Section Heading
38. Team
39. Testimonial
40. Text Box
41. Course
42. Video Block
--------------------------------------------------------------*/
/*--------------------------------------------------------------
1. Typography
----------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap");
body,
html {
  color: #6C7C8C;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6em;
  overflow-x: hidden;
  background-color: #F4F6F9;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
  color: #5050a2;
  padding: 0;
  margin: 0 0 20px 0;
  font-weight: 600;
  line-height: 1.2em;
  font-family: 'Poppins', sans-serif;
}

.cs-primary_font {
  letter-spacing: 0.02em;
}

.cs-primary_font,
.cs-btn {
  font-family: 'Poppins', sans-serif;
}

.cs-secondary_font {
  font-family: 'Inter', sans-serif;
}

h1 {
  font-size: 56px;
}

h2 {
  font-size: 42px;
}

h3 {
  font-size: 30px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

p {
  margin-bottom: 15px;
}

ul {
  margin: 0 0 25px 0;
  padding-left: 20px;
  list-style: square outside none;
}

ol {
  padding-left: 20px;
  margin-bottom: 25px;
}

dfn,
cite,
em,
i {
  font-style: italic;
}

blockquote {
  margin: 0 15px;
  font-style: italic;
  font-size: 20px;
  line-height: 1.6em;
  margin: 0;
}

address {
  margin: 0 0 15px;
}

img {
  border: 0;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

button {
  color: inherit;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

a:hover {
  text-decoration: none;
  color: #764e9f;
}

table {
  width: 100%;
  margin-bottom: 25px;
}

table th {
  font-weight: 600;
  color: #6C7C8C;
}

table td,
table th {
  border-top: 1px solid #eaeaea;
  padding: 11px 10px;
}

dl {
  margin-bottom: 25px;
}

dl dt {
  font-weight: 600;
}

b,
strong {
  font-weight: bold;
}

pre {
  color: #6C7C8C;
  border: 1px solid #eaeaea;
  font-size: 18px;
  padding: 25px;
  border-radius: 5px;
}

kbd {
  font-size: 100%;
  background-color: #6C7C8C;
  border-radius: 5px;
}

:root {
  scroll-behavior: initial;
}

@media screen and (max-width: 991px) {
  body,
  html {
    font-size: 16px;
    line-height: 1.6em;
  }
  h2 {
    font-size: 36px;
    margin-bottom: 10px;
  }
}

.cs-preloader {
  position: fixed;
  z-index: 99999;
  top: 0;
  width: 100%;
  height: 100vh;
}

.cs-preloader_bg {
  text-align: center;
  height: 100%;
  width: 100%;
}

.cs-preloader_in {
  width: 120px;
  height: 120px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 28px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}

.cs-preloader_in:after {
  content: "";
  border-width: 3px;
  border-style: solid;
  border-color: transparent;
  border-top-color: #fff;
  border-radius: 50%;
  position: absolute;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  left: 50%;
  top: 50%;
  -webkit-animation: spin 1s ease-in-out infinite;
          animation: spin 1s ease-in-out infinite;
  margin-left: -60px;
  margin-top: -60px;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
3. Spacing
----------------------------------------------------------------*/
@media screen and (min-width: 992px) {
  .cs-height_0 {
    height: 0px;
  }
  .cs-height_5 {
    height: 5px;
  }
  .cs-height_10 {
    height: 10px;
  }
  .cs-height_15 {
    height: 15px;
  }
  .cs-height_20 {
    height: 20px;
  }
  .cs-height_25 {
    height: 25px;
  }
  .cs-height_30 {
    height: 30px;
  }
  .cs-height_35 {
    height: 35px;
  }
  .cs-height_40 {
    height: 40px;
  }
  .cs-height_45 {
    height: 45px;
  }
  .cs-height_50 {
    height: 50px;
  }
  .cs-height_55 {
    height: 55px;
  }
  .cs-height_60 {
    height: 60px;
  }
  .cs-height_65 {
    height: 65px;
  }
  .cs-height_70 {
    height: 70px;
  }
  .cs-height_75 {
    height: 75px;
  }
  .cs-height_80 {
    height: 80px;
  }
  .cs-height_85 {
    height: 85px;
  }
  .cs-height_90 {
    height: 90px;
  }
  .cs-height_95 {
    height: 95px;
  }
  .cs-height_100 {
    height: 100px;
  }
  .cs-height_105 {
    height: 105px;
  }
  .cs-height_110 {
    height: 110px;
  }
  .cs-height_115 {
    height: 115px;
  }
  .cs-height_120 {
    height: 120px;
  }
  .cs-height_125 {
    height: 125px;
  }
  .cs-height_130 {
    height: 130px;
  }
  .cs-height_135 {
    height: 135px;
  }
  .cs-height_140 {
    height: 140px;
  }
  .cs-height_145 {
    height: 145px;
  }
  .cs-height_150 {
    height: 150px;
  }
  .cs-height_155 {
    height: 155px;
  }
  .cs-height_160 {
    height: 160px;
  }
  .cs-height_165 {
    height: 165px;
  }
  .cs-height_170 {
    height: 170px;
  }
  .cs-height_175 {
    height: 175px;
  }
  .cs-height_180 {
    height: 180px;
  }
  .cs-height_185 {
    height: 185px;
  }
  .cs-height_190 {
    height: 190px;
  }
  .cs-height_195 {
    height: 195px;
  }
  .cs-height_200 {
    height: 200px;
  }
  .cs-height_205 {
    height: 205px;
  }
  .cs-height_210 {
    height: 210px;
  }
}

@media screen and (max-width: 991px) {
  .cs-height_lg_0 {
    height: 0px;
  }
  .cs-height_lg_5 {
    height: 5px;
  }
  .cs-height_lg_10 {
    height: 10px;
  }
  .cs-height_lg_15 {
    height: 15px;
  }
  .cs-height_lg_20 {
    height: 20px;
  }
  .cs-height_lg_25 {
    height: 25px;
  }
  .cs-height_lg_30 {
    height: 30px;
  }
  .cs-height_lg_35 {
    height: 35px;
  }
  .cs-height_lg_40 {
    height: 40px;
  }
  .cs-height_lg_45 {
    height: 45px;
  }
  .cs-height_lg_50 {
    height: 50px;
  }
  .cs-height_lg_55 {
    height: 55px;
  }
  .cs-height_lg_60 {
    height: 60px;
  }
  .cs-height_lg_65 {
    height: 65px;
  }
  .cs-height_lg_70 {
    height: 70px;
  }
  .cs-height_lg_75 {
    height: 75px;
  }
  .cs-height_lg_80 {
    height: 80px;
  }
  .cs-height_lg_85 {
    height: 85px;
  }
  .cs-height_lg_90 {
    height: 90px;
  }
  .cs-height_lg_95 {
    height: 95px;
  }
  .cs-height_lg_100 {
    height: 100px;
  }
  .cs-height_lg_105 {
    height: 105px;
  }
  .cs-height_lg_110 {
    height: 110px;
  }
  .cs-height_lg_115 {
    height: 115px;
  }
  .cs-height_lg_120 {
    height: 120px;
  }
  .cs-height_lg_125 {
    height: 125px;
  }
  .cs-height_lg_130 {
    height: 130px;
  }
  .cs-height_lg_135 {
    height: 135px;
  }
  .cs-height_lg_140 {
    height: 140px;
  }
  .cs-height_lg_145 {
    height: 145px;
  }
  .cs-height_lg_150 {
    height: 150px;
  }
  .cs-height_lg_155 {
    height: 155px;
  }
  .cs-height_lg_160 {
    height: 160px;
  }
  .cs-height_lg_165 {
    height: 165px;
  }
  .cs-height_lg_170 {
    height: 170px;
  }
  .cs-height_lg_175 {
    height: 175px;
  }
  .cs-height_lg_180 {
    height: 180px;
  }
  .cs-height_lg_185 {
    height: 185px;
  }
  .cs-height_lg_190 {
    height: 190px;
  }
  .cs-height_lg_195 {
    height: 195px;
  }
  .cs-height_lg_200 {
    height: 200px;
  }
  .cs-height_lg_205 {
    height: 205px;
  }
  .cs-height_lg_210 {
    height: 210px;
  }
}

/*--------------------------------------------------------------
4. General
----------------------------------------------------------------*/
.cs-row_gap_20 {
  margin-left: -10px;
  margin-right: -10px;
}

.cs-row_gap_20 > div {
  padding-left: 10px;
  padding-right: 10px;
}

.cs-light {
  font-weight: 300;
}

.cs-normal {
  font-weight: 400;
}

.cs-medium {
  font-weight: 500;
}

.cs-semi_bold {
  font-weight: 600;
}

.cs-bold {
  font-weight: 700;
}

.cs-extra_bold {
  font-weight: 800;
}

.cs-black {
  font-weight: 900;
}

.cs-radius_3 {
  border-radius: 3px;
}

.cs-radius_5 {
  border-radius: 5px;
}

.cs-radius_7 {
  border-radius: 7px;
}

.cs-radius_10 {
  border-radius: 10px;
}

.cs-body_line_height {
  line-height: 1.5em;
}

.cs-heading_line_height {
  line-height: 1.2em;
}

.cs-font_14 {
  font-size: 14px;
}

.cs-font_16 {
  font-size: 16px;
}

.cs-font_18 {
  font-size: 18px;
}

.cs-font_20 {
  font-size: 20px;
}

.cs-font_22 {
  font-size: 22px;
}

.cs-font_24 {
  font-size: 24px;
}

.cs-font_30 {
  font-size: 30px;
}

.cs-font_36 {
  font-size: 36px;
}

.cs-font_42 {
  font-size: 42px;
}

.cs-font_50 {
  font-size: 50px;
}

.cs-font_60 {
  font-size: 60px;
}

.cs-font_64 {
  font-size: 64px;
}

.cs-mp0 {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cs-m0 {
  margin: 0;
}

hr {
  margin: 0;
  padding: 0;
  border: none;
  border-top: 1px solid #f2f1ff;
}

.cs-bg {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.cs-light_bg {
  background-color: #fff;
}

.cs-vertical_middle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 100%;
}

.cs-vertical_middle_in {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  width: 100%;
}

.cs-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.cs-white_color,
.cs-white_color_hover:hover {
  color: #fff;
}

.cs-primary_color {
  color: #5050a2;
}

.cs-accent_color,
.cs-accent_color_hover:hover {
  color: #764e9f;
}

.cs-gradient_color {
  background: linear-gradient(108.18deg, #ea4c89 -12.02%, #4d44c6 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cs-white_bg {
  background-color: #fff;
}

.cs-gray_bg {
  background-color: #F4F6F9;
}

.cs-accent_bg_1,
.cs-accent_bg_1_hover:hover {
  background-color: rgba(0, 82, 255, 0.01);
}

.cs-accent_bg_2,
.cs-accent_bg_2_hover:hover {
  background-color: rgba(0, 82, 255, 0.02);
}

.cs-accent_bg_3,
.cs-accent_bg_3_hover:hover {
  background-color: rgba(0, 82, 255, 0.03);
}

.cs-accent_bg_4,
.cs-accent_bg_4_hover:hover {
  background-color: rgba(0, 82, 255, 0.04);
}

.cs-accent_bg_5,
.cs-accent_bg_5_hover:hover {
  background-color: rgba(0, 82, 255, 0.05);
}

.cs-accent_bg_6,
.cs-accent_bg_6_hover:hover {
  background-color: rgba(0, 82, 255, 0.06);
}

.cs-accent_bg_7,
.cs-accent_bg_7_hover:hover {
  background-color: rgba(0, 82, 255, 0.07);
}

.cs-accent_bg_8,
.cs-accent_bg_8_hover:hover {
  background-color: rgba(0, 82, 255, 0.08);
}

.cs-accent_bg_9,
.cs-accent_bg_9_hover:hover {
  background-color: rgba(0, 82, 255, 0.09);
}

.cs-accent_bg_10,
.cs-accent_bg_10_hover:hover {
  background-color: rgba(0, 82, 255, 0.1);
}

.cs-accent_bg_15,
.cs-accent_bg_15_hover:hover {
  background-color: rgba(0, 82, 255, 0.15);
}

.cs-accent_bg_20,
.cs-accent_bg_20_hover:hover {
  background-color: rgba(0, 82, 255, 0.2);
}

.cs-accent_bg_25,
.cs-accent_bg_25_hover:hover {
  background-color: rgba(0, 82, 255, 0.25);
}

.cs-accent_bg_30,
.cs-accent_bg_30_hover:hover {
  background-color: rgba(0, 82, 255, 0.3);
}

.cs-accent_bg_35,
.cs-accent_bg_35_hover:hover {
  background-color: #5050a2;
}

.cs-accent_bg_40,
.cs-accent_bg_40_hover:hover {
  background-color: rgba(0, 82, 255, 0.4);
}

.cs-accent_bg_50,
.cs-accent_bg_50_hover:hover {
  background-color: rgba(0, 82, 255, 0.5);
}

.cs-accent_bg_60,
.cs-accent_bg_60_hover:hover {
  background-color: rgba(0, 82, 255, 0.6);
}

.cs-accent_bg_70,
.cs-accent_bg_70_hover:hover {
  background-color: rgba(0, 82, 255, 0.7);
}

.cs-accent_bg_80,
.cs-accent_bg_80_hover:hover {
  background-color: rgba(0, 82, 255, 0.8);
}

.cs-accent_bg_90,
.cs-accent_bg_90_hover:hover {
  background-color: rgba(0, 82, 255, 0.9);
}

.cs-accent_bg,
.cs-accent_bg_hover:hover {
  background-color: #0052FF;
}

.cs-primary_bg,
.cs-primary_bg_hover:hover {
  background-color: #06182C;
}

.cs-accent_seperator_1 {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(33%, currentColor), color-stop(0%, rgba(255, 255, 255, 0)));
  background-image: linear-gradient(to right, currentColor 33%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 31px 1px;
  background-repeat: repeat-x;
  height: 1px;
  margin-bottom: -24px;
}

.cs-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 11px 30px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  color: #06182C;
  position: relative;
  line-height: 1.6em;
  cursor: pointer;
  border-radius: 7px;
  font-weight: 500;
}

.cs-btn svg {
  width: 22px;
  height: 22px;
  margin-right: 8px;
}

.cs-btn > * {
  position: relative;
  z-index: 1;
}

.cs-btn.cs-color1 {
  color: #8b428d;
  background-color: #b069b2;
}

.cs-btn.cs-color1:hover {
  background-color: #8b428d;
  color: #fff;
}

.cs-btn_bordered {
  border-color: #5050a2;
}

.cs-btn_bordered:hover {
  border-color: #5050a2;
  color: #fff;
  background-color: #8b428d;
}

.cs-btn_filed::after {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  border-radius: inherit;
  background-color: rgba(6, 24, 44, 0.2);
  opacity: 0;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.cs-btn_filed:hover::after {
  opacity: 1;
}

.cs-accent_btn {
  color: #fff;
  background-color: #9d4c9d;
  border-color: #9d4c9d;
}

.cs-accent_btn:hover {
  color: #fff;
}

.cs-white_btn {
  background-color: #fff;
  border-color: #fff;
  color: #e8b4e8;
}

.cs-white_btn:hover {
  background-color: transparent;
  color: #fff;
}

.cs-white_btn:hover:after {
  background-color: #9d4c9d;
}

.cs-white_btn_2 {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
}

.cs-white_btn_2:hover {
  background-color: transparent;
  color: #fff;
}

.cs-white_btn_2:hover:after {
  background-color: rgba(255, 255, 255, 0.15);
}

.cs-primary_btn {
  color: #fff;
  background-color: #06182C;
  border-color: #06182C;
}

.cs-primary_btn:hover {
  color: #fff;
  background-color: #8a428c;
  border-color: #8a428c;
}

.cs-primary_btn:hover::after {
  opacity: 0;
}

.cs-seciton_heading.cs-style1 .cs-section_title {
  border-radius: 7px;
  display: inline-block;
  font-weight: 500;
  letter-spacing: 1px;
  margin-bottom: 6px;
  padding-left: 13px;
  position: relative;
  text-transform: uppercase;
}

.cs-seciton_heading.cs-style1 .cs-section_title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 5px;
  height: 15px;
  background: linear-gradient(108.18deg, #ea4c89 -2.02%, #4d44c6 100%);
}

.cs-btn_group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
          
}

.cs-btn_group > *:not(:last-child) {
  margin-right: 10px;
}

.cs-right_space_40 {
  padding-right: 40px;
}

.cs-right_space_150 {
  padding-right: 150px;
}

.cs-play_btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.cs-play_btn span {
  margin-left: 10px;
}

.cs-shape_wrap {
  position: relative;
  overflow: hidden;
}

.cs-shape_wrap .cs-shape {
  position: absolute;
  pointer-events: none;
}

.cs-shape_wrap .cs-shape_posiiton_1 {
  left: 0;
  bottom: 0;
  opacity: 0.2;
}

.cs-shape_wrap .cs-shape_posiiton_2 {
  right: 0;
  bottom: 0;
  opacity: 0.2;
}

.cs-shape_wrap > *:not(.cs-shape) {
  position: relative;
  z-index: 1;
}

.cs-logo_carousel {
  height: 100px;
  padding: 10px;
}

.cs-form_field_wrap {
  position: relative;
}

.cs-form_field_wrap label {
  background-color: #f4f6f9;
  display: inline-block;
  left: 10px;
  line-height: 1.4em;
  padding: 0 5px;
  pointer-events: none;
  position: absolute;
  top: -11px;
}

.cs-form_field {
  background-color: initial;
  border: 1px solid rgba(6, 24, 44, 0.1);
  border-radius: 7px;
  display: block;
  outline: none;
  padding: 10px 15px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  width: 100%;
}

.cs-form_field:focus {
  border-color: #0052FF;
}

.cs-info_title {
  font-size: 24px;
  margin-bottom: 0;
}

.cs-info_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.cs-info_box h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.cs-info_box p {
  margin: 0;
}

.cs-info_box_icon {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  font-size: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #8a428c;
  width: 24px;
  margin-right: 20px;
  padding-top: 1px;
}

.cs-right_full_width {
  width: calc(50vw - 12px);
  padding-right: 24px;
}

.cs-accordian {
  border-radius: 10px;
  overflow: hidden;
}

.cs-accordian_title {
  padding: 19px 40px 19px 75px;
}

.cs-accordian_title span {
  position: absolute;
  left: 30px;
  top: 19px;
}

.cs-accordian_head {
  position: relative;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.cs-accordian_toggle {
  position: absolute;
  height: 24px;
  width: 24px;
  background-color: #06182C;
  top: 20px;
  right: 20px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.cs-accordian_toggle::before, .cs-accordian_toggle::after {
  content: '';
  position: absolute;
  height: 2px;
  width: 60%;
  background-color: #fff;
  top: 50%;
  left: 50%;
  margin-top: -1px;
  left: 20%;
  -webkit-transition: inherit;
  transition: inherit;
}

.cs-accordian_toggle::after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.cs-accordian.active .cs-accordian_toggle::after {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.cs-accordian:not(.active):hover .cs-accordian_head {
  background-color: rgba(0, 82, 255, 0.15);
}

.cs-accordian:not(.active):hover .cs-accordian_toggle {
  background-color: #8a428c;
}

.cs-accordian-body {
  margin-top: -3px;
  padding: 0 30px 22px 80px;
}

.cs-footer_wrap {
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 82, 255, 0.1)), color-stop(95.61%, transparent));
  background: linear-gradient(0deg, rgba(0, 82, 255, 0.1) 0%, transparent 95.61%);
}

.cs-hide_dark {
  display: inline-block;
}

.cs-hide_white {
  display: none;
}

.cs-modal {
  position: fixed;
  top: 0;
  left: 0;
 background-color: rgba(0, 0, 0, 0.5); 
  width: 100vw;
  height: 100vh;
  z-index: 300;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
}

.cs-modal.active {
  opacity: 1;
  visibility: visible;
}

.cs-modal_container {
  width: 100%;
  max-width: 500px;
  margin: auto;
  position: relative;
}

.cs-wallet_secton {
  padding: 45px 75px;
}

.cs-modal_in {
  padding: 8% 20px 30px;
}

.cs-list.cs-style1 li:not(:last-child) {
  margin-bottom: 15px;
}

.cs-list.cs-style1 a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 65px;
  background-color: rgba(0, 82, 255, 0.1);
}

.cs-list.cs-style1 a:hover {
  background-color: #8b428d;
}

.cs-close_modal {
  padding: 0;
  border: none;
  height: 32px;
  width: 32px;
  position: absolute;
  right: 15px;
  top: 15px;
  background-color: #8b428d;
}

.cs-close_modal:hover {
  background-color: #3e3589;
}

.cs-quantity {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 45px;
  border: 1px solid #eaeaea;
  border-radius: 5px;
  width: 158px;
  padding: 0 16px;
}

.cs-quantity .cs-quantity_btn {
  outline: none;
  border: none;
  padding: 0;
  font-size: 24px;
  background-color: transparent;
}

.cs-quantity .cs-quantity_btn:hover {
  color: #8b428d;
}

.cs-quantity .cs-quantity_number {
  width: 40px;
  text-align: center;
  border: none;
  background-color: transparent;
  outline: none;
}

.cs-mint_secton {
  padding: 50px;
}

ul.cs-list.cs-style2 li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

ul.cs-list.cs-style2 li:not(:last-child) {
  margin-bottom: 15px;
}

.cs-zoom_effect {
  position: relative;
  overflow: hidden;
  display: block;
}

.cs-zoom_effect > * {
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.cs-zoom_effect:hover > * {
  -webkit-transform: scale(1.08);
          transform: scale(1.08);
}

.page-link {
  min-width: 60px;
  text-align: center;
  padding: 12px 20px;
  background-color: transparent;
  color: #8b428d;
  border-color: #eaeaea;
  border-radius: 0 !important;
}

.page-link:hover {
  color: #8b428d;
  background-color: #8b428d;
  border-color: #8b428d;
}

.pagination {
  margin: -7px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.page-item {
  margin: 7px;
}

.page-item.active .page-link {
  pointer-events: none;
}

.cs-demo {
  display: block;
}

.cs-demo h3 {
  margin-top: 16px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.cs-demo:hover h3 {
  color: #8b428d;
}

.tm_feature_box {
  text-align: center;
  padding: 50px 15px;
}

.tm_feature_box_icon {
  height: 60px;
  width: 75px;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 82, 255, 0.3)), color-stop(95.61%, transparent));
  background: linear-gradient(90deg, rgba(0, 82, 255, 0.3) 0%, transparent 95.61%);
  color: #8b428d;
  margin: 0 auto 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.tm_feature_box_icon svg {
  height: 30px;
  width: 30px;
}

.cs-demo_img {
  background: linear-gradient(108.18deg, rgba(234, 76, 137, 0.2) -2.02%, rgba(77, 68, 198, 0.2) 100%);
  padding: 5px;
}

.cs-demo_img img {
  width: 100%;
}

/* Odometer */
.odometer.odometer-auto-theme,
.odometer.odometer-auto-theme .odometer-digit,
.odometer.odometer-theme-default,
.odometer.odometer-theme-default .odometer-digit {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer,
.odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer {
  display: inline-block;
  vertical-align: middle;
  visibility: hidden;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner,
.odometer.odometer-theme-default .odometer-digit .odometer-digit-inner {
  text-align: left;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon,
.odometer.odometer-theme-default .odometer-digit .odometer-ribbon {
  display: block;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner,
.odometer.odometer-theme-default .odometer-digit .odometer-ribbon-inner {
  display: block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-value,
.odometer.odometer-theme-default .odometer-digit .odometer-value {
  display: block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.odometer.odometer-auto-theme
.odometer-digit
.odometer-value.odometer-last-value,
.odometer.odometer-theme-default
.odometer-digit
.odometer-value.odometer-last-value {
  position: absolute;
}

.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner,
.odometer.odometer-theme-default.odometer-animating-up .odometer-ribbon-inner {
  -webkit-transition: -webkit-transform 2s;
  transition: -webkit-transform 2s;
  transition: transform 2s;
  transition: transform 2s, -webkit-transform 2s;
}

.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner,
.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating
.odometer-ribbon-inner,
.odometer.odometer-theme-default.odometer-animating-down .odometer-ribbon-inner,
.odometer.odometer-theme-default.odometer-animating-up.odometer-animating
.odometer-ribbon-inner {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}

.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating
.odometer-ribbon-inner,
.odometer.odometer-theme-default.odometer-animating-down.odometer-animating
.odometer-ribbon-inner {
  -webkit-transition: -webkit-transform 2s;
  transition: -webkit-transform 2s;
  transition: transform 2s;
  transition: transform 2s, -webkit-transform 2s;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.odometer.odometer-auto-theme,
.odometer.odometer-theme-default {
  line-height: inherit;
}

.odometer.odometer-auto-theme .odometer-value,
.odometer.odometer-theme-default .odometer-value {
  text-align: center;
}

#background-wrap {
  bottom: 0;
  left: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  right: 0;
  top: 0;
  opacity: 0.1;
}

/* KEYFRAMES */
@-webkit-keyframes animateBubble {
  0% {
    margin-top: 1000px;
  }
  100% {
    margin-top: -100%;
  }
}

@keyframes animateBubble {
  0% {
    margin-top: 1000px;
  }
  100% {
    margin-top: -100%;
  }
}

@-webkit-keyframes sideWays {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: 50px;
  }
}

@keyframes sideWays {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: 50px;
  }
}

/* ANIMATIONS */
.x1 {
  -webkit-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
          animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
  left: -5%;
  top: 5%;
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
}

.x2 {
  -webkit-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
          animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
  left: 5%;
  top: 80%;
  -webkit-transform: scale(0.4);
          transform: scale(0.4);
}

.x3 {
  -webkit-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
          animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
  left: 10%;
  top: 40%;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
}

.x4 {
  -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
          animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
  left: 20%;
  top: 0;
  -webkit-transform: scale(0.3);
          transform: scale(0.3);
}

.x5 {
  -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
          animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
  left: 30%;
  top: 50%;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
}

.x6 {
  -webkit-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
          animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
  left: 50%;
  top: 0;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}

.x7 {
  -webkit-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
          animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
  left: 65%;
  top: 70%;
  -webkit-transform: scale(0.4);
          transform: scale(0.4);
}

.x8 {
  -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
          animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
  left: 80%;
  top: 10%;
  -webkit-transform: scale(0.3);
          transform: scale(0.3);
}

.x9 {
  -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
          animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
  left: 90%;
  top: 50%;
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
}

.x10 {
  -webkit-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
          animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
  left: 80%;
  top: 80%;
  -webkit-transform: scale(0.3);
          transform: scale(0.3);
}

/* OBJECTS */
.bubble {
  border-radius: 50%;
  -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px white;
          box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px white;
  height: 200px;
  position: absolute;
  width: 200px;
}

.bubble:after {
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff', endColorstr='#00ffffff', GradientType=1);
  border-radius: 50%;
  -webkit-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
          box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
  content: '';
  height: 180px;
  left: 10px;
  position: absolute;
  width: 180px;
}

/*--------------------------------------------------------------
5. Slider
----------------------------------------------------------------*/
.cs-slider {
  position: relative;
}

.slick-slide > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.cs-remove_overflow .slick-list {
  overflow: visible;
}

.cs-remove_overflow .slick-slide {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

.cs-remove_overflow .slick-slide.slick-active {
  opacity: 1;
  visibility: visible;
}

.cs-slide_number {
  display: none;
}

.cs-pagination.cs-style1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 60px;
}

.cs-pagination.cs-style1 ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inherit !important;
}

.cs-pagination.cs-style1 li {
  height: 10px;
  width: 10px;
  background-color: currentColor;
  border-radius: 58px;
  margin: 0 5px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.cs-pagination.cs-style1 li.slick-active {
  width: 55px;
}

.cs-pagination.cs-style1 button {
  display: none;
}

.cs-slider_arrows.cs-style1 .slick-arrow {
  height: 50px;
  width: 50px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.cs-slider_arrows.cs-style1 .slick-arrow.cs-left_arrow {
  left: -25px;
}

.cs-slider_arrows.cs-style1 .slick-arrow.cs-right_arrow {
  right: -25px;
}

.cs-slider_arrows.cs-style1 .slick-arrow:hover:before {
  background-color: currentColor;
  opacity: 0.2;
}

.cs-slider_arrows.cs-style1.cs-type1 {
  position: initial;
  width: 120px;
  margin-left: auto;
  margin-top: 25px;
}

.cs-slider_arrows.cs-style1.cs-type2 {
  bottom: initial;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 20%;
  border-radius: 0 6px 6px 0;
}

.cs-slider_arrows.cs-style1.cs-type3 {
  border-radius: 0;
  right: initial;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: -22px;
}

.cs-slider_arrows.cs-style1.cs-type3 .cs-slider_arrows_in {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.cs-slider_arrows.cs-style1.cs-type3 .slick-arrow {
  width: 80px;
  height: 45px;
}

.cs-slider_arrows.cs-style1.cs-type3 .cs-left_arrow {
  margin-right: 3px;
}

.cs-slider_arrows.cs-style1.cs-type3 svg {
  width: 26px;
  height: 26px;
}

.cs-slider_arrows.cs-style1.cs-type4 {
  bottom: 19px;
  left: 50%;
  margin-left: 73px;
  right: initial;
}

.cs-slider_arrows.cs-style1.cs-type5 {
  position: initial;
  background-color: transparent;
}

.cs-slider_arrows.cs-style1.cs-type5 .slick-arrow {
  position: absolute;
  top: 100px;
  -webkit-box-shadow: 0px 30px 80px 0px rgba(30, 27, 55, 0.2);
          box-shadow: 0px 30px 80px 0px rgba(30, 27, 55, 0.2);
}

.cs-slider_arrows.cs-style1.cs-type5 .slick-arrow.cs-left_arrow {
  border: none;
  left: -90px;
  border-radius: 6px 0 0 6px;
}

.cs-slider_arrows.cs-style1.cs-type5 .slick-arrow.cs-right_arrow {
  right: -90px;
  border-radius: 0 6px 6px 0;
}

.cs-slider_arrows.cs-style1.cs-type6 {
  position: absolute;
  left: 50%;
  right: initial;
  bottom: 65px;
}

.cs-slider_arrows.cs-style1.cs-type6 .slick-arrow {
  height: 50px;
  width: 70px;
}

.cs-slider_arrows.cs-style2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.cs-slider_arrows.cs-style2 .slick-arrow {
  height: 50px;
  width: 50px;
}

.cs-slider_arrows.cs-style2 .cs-left_arrow {
  margin-right: 15px;
}

.cs-slider_arrows.cs-style2 .slick-arrow {
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.slick-dotted {
  cursor: url(../img/drag.png) 16 9, ew-resize !important;
}

.cs-gap-24 .slick-slide {
  padding-left: 12px;
  padding-right: 12px;
}

.cs-gap-24 .slick-list {
  margin-left: -12px;
  margin-right: -12px;
}

.cs-slider_controll {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 320px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.cs-slider_controll .cs-controll_seperator {
  height: 1px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  background-color: rgba(6, 24, 44, 0.5);
  margin: 0 20px;
}

.cs-slider_controll.cs-type1 {
  margin-left: -205px;
}

@media screen and (max-width: 1600px) {
  .cs-slider_arrows.cs-style3 .cs-left_arrow {
    left: -8%;
  }
  .cs-slider_arrows.cs-style3 .cs-right_arrow {
    right: -8%;
  }
}

@media screen and (max-width: 1400px) {
  .cs-slider_arrows.cs-style3 .cs-left_arrow {
    left: -30px;
  }
  .cs-slider_arrows.cs-style3 .cs-right_arrow {
    right: -30px;
  }
}

@media screen and (max-width: 1255px) {
  .cs-slider_arrows.cs-style3 .cs-left_arrow {
    left: 20px;
  }
  .cs-slider_arrows.cs-style3 .cs-right_arrow {
    right: 20px;
  }
}

@media screen and (max-width: 1199px) {
  .cs-gap-50 .slick-slide {
    padding-left: 15px;
    padding-right: 15px;
  }
  .cs-gap-50 .slick-list {
    margin-left: -15px;
    margin-right: -15px;
  }
}

@media screen and (min-width: 992px) {
  .cs-hidden_desktop {
    display: none !important;
  }
}

@media screen and (max-width: 991px) {
  .cs-hidden_mobile {
    display: none !important;
  }
  .cs-pagination.cs-style1 {
    margin-top: 30px;
  }
  .cs-pagination.cs-style1 li.slick-active {
    width: 30px;
  }
  .cs-slider_nav {
    position: initial;
    width: 100%;
    -webkit-transform: initial;
            transform: initial;
    padding-bottom: 80px;
  }
  .cs-slider_arrows.cs-style1.cs-type6 {
    position: relative;
    bottom: initial;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    margin-top: 40px;
  }
  .cs-slider_arrows.cs-style1.cs-type4 {
    margin-left: 0;
    right: initial;
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    bottom: 0;
    margin-top: 30px;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .cs-gap-40 .slick-slide,
  .cs-gap-50 .slick-slide {
    padding-left: 15px;
    padding-right: 15px;
  }
  .cs-gap-40 .slick-list,
  .cs-gap-50 .slick-list {
    margin-left: -15px;
    margin-right: -15px;
  }
}

@media screen and (min-width: 576px) {
  .cs-hide_desktop {
    display: none !important;
  }
}

@media screen and (max-width: 575px) {
  .cs-slider_arrows.cs-style1 .slick-arrow {
    height: 45px;
    width: 45px;
  }
  .cs-slider_arrows.cs-style1 {
    bottom: -20px;
    right: 30px;
  }
  .cs-slider_arrows.cs-style1.cs-type1 {
    width: 90px;
  }
  .cs-slider_arrows.cs-style2.cs-type1,
  .cs-slider_arrows.cs-style2.cs-type2 {
    padding: 8px;
  }
  .cs-slider_arrows.cs-style2 .slick-arrow {
    font-size: 18px;
    width: 50px;
    height: 40px;
  }
  .cs-slider_arrows.cs-style1.cs-type6 .slick-arrow {
    height: 45px;
    width: 50px;
  }
  .cs-slider_nav_1 .cs-slider_mini_thumb {
    height: 90px;
    border-radius: 7px;
  }
  .cs-slider_nav_1 .slick-slide {
    padding: 3px;
  }
  .cs-slider_nav_1 {
    margin-left: -3px;
    margin-right: -3px;
    margin-top: 10px;
  }
  .cs-hide_mobile {
    display: none;
  }
}

@media screen and (max-width: 370px) {
  .cs-slider_nav .cs-slider_mini_thumb,
  .cs-slider_nav_1 .cs-slider_mini_thumb {
    height: 60px;
  }
}

/*--------------------------------------------------------------
7. Video Popup
----------------------------------------------------------------*/
.cs-pd_video .cs-video_open,
.cs-sample_img .cs-video_open {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: #fff;
  font-size: 68px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  line-height: 48px;
}

.cs-pd_video .cs-video_open:hover,
.cs-sample_img .cs-video_open:hover {
  color: rgba(255, 255, 255, 0.7);
}

.cs-video_popup {
  position: fixed;
  z-index: 1000;
  top: 0;
  width: 100%;
  height: 100%;
  left: -100%;
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}

.cs-video_popup.active {
  left: 0;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  left: 0;
}

.cs-video_popup_overlay {
  position: absolute;
  left: 0;
  right: 0;
  background: #000;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  opacity: 0;
}

.cs-video_popup.active .cs-video_popup_overlay {
  opacity: 0.8;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.cs-video_popup_content {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 0;
  text-align: center;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
  opacity: 0;
  visibility: hidden;
  padding: 15px;
}

.cs-video_popup.active .cs-video_popup_content {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.cs-video_popup_content:after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.cs-video_popup_container {
  display: inline-block;
  position: relative;
  text-align: left;
  background: #fff;
  max-width: 1380px;
  width: 100%;
  vertical-align: middle;
}

.cs-video_popup_container .embed-responsive {
  width: 100%;
}

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
}

.embed-responsive-16by9::before {
  display: block;
  content: "";
  padding-top: 56.25%;
}

.embed-responsive iframe,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.cs-video_popup_close {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: #5050a2;
  cursor: pointer;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.cs-video_popup iframe {
  width: 100%;
  height: 100%;
  position: absolute;
}

.cs-video_popup_close:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1px;
  background: #fff;
  margin-left: -10px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.cs-video_popup_close:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1px;
  background: #fff;
  margin-left: -10px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.cs-video_popup_close:hover:before,
.cs-video_popup_close:hover:after {
  background: #000;
}

.cs-video_popup_layer {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
}

.cs-video_popup_align {
  overflow: hidden;
}

/*End Video Popup*/
/*--------------------------------------------------------------
14. Header
----------------------------------------------------------------*/
.cs-site_header {
  position: relative;
  z-index: 101;
}

.cs-site_header .cs-btn.cs-style6 {
  font-size: 16px;
}

.cs-site-branding {
  display: inline-block;
  max-width: 180px;
}

.cs-site_header.cs-style1 {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.cs-site_header.cs-style1 .cs-main_header_in,
.cs-site_header.cs-style1 .cs-top_header_in {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 80px;
  position: relative;
}

.cs-site_header.cs-style1 .cs-main_header_right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}

.cs-toolbox_icon_btn {
  cursor: pointer;
}

.cs-site_header.cs-style1.cs-sticky-active {
  background-color: #fff;
  -webkit-box-shadow: 0 10px 10px -10px rgba(33, 43, 53, 0.1);
          box-shadow: 0 10px 10px -10px rgba(33, 43, 53, 0.1);
}

.cs-site_header.cs-style1 .cs-toolbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.cs-site_header.cs-style1 .cs-toolbox > *:not(:first-child) {
  margin-left: 15px;
}

.cs-site_header.cs-style1 .cs-nav + .cs-toolbox {
  margin-left: 40px;
}

.cs-site_header.cs-style1 .cs-icon_btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 22px;
  width: 50px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 50px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
}

.cs-site_header.cs-style1 .cs-icon_btn svg {
  height: 22px;
  width: 22px;
}

.cs-site_header.cs-style1 .cs-icon_btn:hover {
  background-color: rgba(0, 82, 255, 0.1);
  color: #8b428d;
}

.cs-site_header.cs-style1 .cs-action_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.cs-site_header.cs-style1 .cs-action_box .cs-action_value {
  margin-left: 15px;
}

.cs-site_header.cs-style1 .cs-action_box > *:not(:last-child) {
  margin-right: 35px;
}

.cs-site_header.cs-style1 .cs-btn {
  padding: 8px 15px;
}

.cs-toolbox > *:not(:first-child) {
  margin-left: 15px;
}

.cs-toolbox_btn {
  border-radius: 5px;
  color: #fefefe;
  font-size: 16px;
  display: inline-block;
  padding: 11px 30px;
  min-width: 135px;
  text-align: center;
  font-weight: 500;
  line-height: 1.5em;
  -webkit-box-shadow: 0px 10px 40px 0px rgba(59, 20, 0, 0.1);
          box-shadow: 0px 10px 40px 0px rgba(59, 20, 0, 0.1);
  position: relative;
}

.cs-toolbox_btn span {
  position: relative;
  z-index: 1;
}

.cs-site_header_full_width .container {
  max-width: 100%;
  padding: 0 50px;
}

.cs-site_header_style1 {
  border-bottom: 1px solid #8b428d;
}

.cs-site_header_style1 .cs-main_header_right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.cs-site_header_style1 .cs-nav + .cs-header_toolbox.cs-center {
  margin-left: 35px;
}

.cs-site_header_style1 .cs-nav .cs-nav_list > li.current-menu-item > a:before {
  bottom: -4px;
  background-color: #fff;
}

@media screen and (max-width: 1199px) {
  .cs-main_header .container {
    max-width: 100%;
  }
  .cs-site_header.cs-style1 .cs-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.cs-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-site_header.cs-sticky-header {
  position: fixed;
  z-index: 200;
  width: 100%;
  top: 0;
  left: 0;
}

.cs-site_branding {
  display: inline-block;
}

.cs-site_branding img {
  height: 45px;
}

@media screen and (min-width: 1200px) {
  .cs-main_header {
    position: relative;
  }
  .cs-main_header .container-fluid {
    padding-right: 40px;
    padding-left: 40px;
  }
  .cs-main_header_center,
  .cs-top_header_center {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .cs-site_header.cs-style1 .cs-main_header_center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 100%;
  }
  .cs-site_header.cs-style1 .cs-main_header_left {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .cs-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 100%;
  }
  .cs-nav .cs-nav_list {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    height: inherit;
  }
  .cs-nav .cs-nav_list > li {
    margin-right: 40px;
    height: inherit;
  }
  .cs-nav .cs-nav_list > li:last-child {
    margin-right: 0;
  }
  .cs-nav .cs-nav_list > li > a {
    padding: 10px 0;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    position: relative;
    height: inherit;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .cs-nav .cs-nav_list > li > ul {
    left: 0;
    top: calc(100% + 15px);
  }
  .cs-nav .cs-nav_list > li:hover > ul {
    top: 100%;
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }
  .cs-nav .cs-nav_list li:not(.cs-mega-menu) {
    position: relative;
  }
  .cs-nav .cs-nav_list ul {
    width: 260px;
    background-color: #fff;
    position: absolute;
    background-color: #fff;
    -webkit-box-shadow: 0px 1px 2px 0px rgba(2, 0, 181, 0.1);
            box-shadow: 0px 1px 2px 0px rgba(2, 0, 181, 0.1);
    border-top: 3px solid #8b428d;
    padding: 10px 0;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    display: block !important;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
  }
  .cs-nav .cs-nav_list ul li:hover ul {
    top: 0px;
  }
  .cs-nav .cs-nav_list ul li:hover > ul {
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }
  .cs-nav .cs-nav_list ul a {
    font-size: 90%;
    display: block;
    line-height: 1.5em;
    padding: 12px 20px;
  }
  .cs-nav .cs-nav_list ul ul {
    top: 15px;
    left: 100%;
  }
  .cs-munu_toggle,
  .cs-munu_dropdown_toggle {
    display: none;
  }
  .cs-nav .cs-nav_list .cs-mega-wrapper {
    width: 1170px !important;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    position: absolute;
    padding: 0;
  }
  .cs-nav .cs-nav_list .cs-mega-wrapper > li {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    padding: 10px 0;
  }
  .cs-nav .cs-nav_list .cs-mega-wrapper > li:not(:last-child) {
    border-right: 1px solid #eaeaea;
  }
  .cs-nav .cs-nav_list .cs-mega-wrapper > li > a {
    color: #06182C;
    font-weight: 600;
  }
  .cs-nav .cs-nav_list .cs-mega-wrapper > li > a:hover {
    background-color: transparent;
  }
  .cs-nav .cs-nav_list .cs-mega-wrapper > li ul {
    position: initial;
    border: none;
    padding: 0;
    width: 100%;
    -webkit-box-shadow: none;
            box-shadow: none;
    background-color: transparent;
  }
  .cs-nav .cs-nav_list .cs-mega-menu:hover .cs-mega-wrapper li ul {
    opacity: 1;
    visibility: visible;
  }
  .cs-nav
.cs-nav_list
> li
ul:not(.cs-mega-wrapper)
.menu-item-has-children
> a {
    position: relative;
  }
  .cs-nav
.cs-nav_list
> li.menu-item-has-children
ul:not(.cs-mega-wrapper)
li.menu-item-has-children
> a:after {
    content: '\f054';
    font-family: 'Font Awesome 5 Free';
    font-weight: 800;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    font-size: 12px;
    right: 16px;
  }
}

@media screen and (max-width: 1360px) {
  .cs-site-branding {
    max-width: 190px;
  }
  .cs-site_header_full_width .container {
    max-width: 100%;
    padding: 0 15px;
  }
}

@media screen and (max-width: 1199px) {
  .cs-munu_dropdown_toggle {
    position: absolute;
    height: 30px;
    width: 30px;
    right: 20px;
    top: 5px;
  }
  .cs-munu_dropdown_toggle:before, .cs-munu_dropdown_toggle:after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    height: 2px;
    width: 10px;
    background-color: #6C7C8C;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  .cs-munu_dropdown_toggle:before {
    -webkit-transform: translate(-50%, -50%) rotate(90deg);
            transform: translate(-50%, -50%) rotate(90deg);
  }
  .cs-munu_dropdown_toggle.active:before {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  .cs-nav .cs-nav_list {
    position: absolute;
    width: 100vw;
    left: -15px;
    background-color: #fff;
    padding: 10px 0;
    display: none;
    top: 100%;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    overflow: auto;
    max-height: calc(100vh - 80px);
    line-height: 1.6em;
  }
  .cs-nav .cs-nav_list ul {
    padding-left: 15px;
    display: none;
  }
  .cs-nav .cs-nav_list a {
    display: block;
    padding: 8px 20px;
  }
  .cs-nav .menu-item-has-children {
    position: relative;
  }
  /*Mobile Menu Button*/
  .cs-munu_toggle {
    display: inline-block;
    width: 32px;
    height: 27px;
    cursor: pointer;
    position: absolute;
    top: 27px;
    right: 30px;
  }
  .cs-munu_toggle span,
  .cs-munu_toggle span:before,
  .cs-munu_toggle span:after {
    width: 100%;
    height: 3px;
    background-color: currentColor;
    display: block;
  }
  .cs-munu_toggle span {
    margin: 0 auto;
    position: relative;
    top: 12px;
    -webkit-transition-duration: 0s;
            transition-duration: 0s;
    -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
  }
  .cs-munu_toggle span:before {
    content: '';
    position: absolute;
    margin-top: -9px;
    -webkit-transition-property: margin, -webkit-transform;
    transition-property: margin, -webkit-transform;
    transition-property: margin, transform;
    transition-property: margin, transform, -webkit-transform;
    -webkit-transition-duration: 0.2s;
            transition-duration: 0.2s;
    -webkit-transition-delay: 0.2s, 0s;
            transition-delay: 0.2s, 0s;
  }
  .cs-munu_toggle span:after {
    content: '';
    position: absolute;
    margin-top: 9px;
    -webkit-transition-property: margin, -webkit-transform;
    transition-property: margin, -webkit-transform;
    transition-property: margin, transform;
    transition-property: margin, transform, -webkit-transform;
    -webkit-transition-duration: 0.2s;
            transition-duration: 0.2s;
    -webkit-transition-delay: 0.2s, 0s;
            transition-delay: 0.2s, 0s;
  }
  .cs-site_header.cs-style1 .cs-munu_toggle {
    top: 50%;
    right: 0px;
    margin-top: -13px;
  }
  .cs-toggle_active span {
    background-color: rgba(0, 0, 0, 0);
    -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
  }
  .cs-toggle_active span:before {
    margin-top: 0;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transition-delay: 0s, 0.2s;
            transition-delay: 0s, 0.2s;
  }
  .cs-toggle_active span:after {
    margin-top: 0;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transition-delay: 0s, 0.2s;
            transition-delay: 0s, 0.2s;
  }
  .cs-header_toolbox {
    margin-right: 50px;
  }
  .cs-toolbox_btn {
    padding: 8px 20px;
    min-width: 100px;
  }
  .cs-nav .cs-nav_list a {
    position: relative;
  }
  .cs-site_header.cs-style1 .cs-main_header_in {
    height: 80px;
  }
  .cs-site_header.cs-style1 .cs-nav + .cs-toolbox {
    margin-left: 0;
  }
  .cs-site_header.cs-style1 .cs-toolbox {
    margin-left: 0;
    margin-right: 50px;
  }
  .cs-hamburger span {
    height: 3px;
  }
  .cs-site_header.cs-style1 .cs-top_header .cs-toolbox {
    margin-right: 0;
  }
  .cs-site_header .current-menu-item > a:before {
    display: none;
  }
  .cs-site_header.cs-style1.cs-type4 .cs-main_header_in {
    padding: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
    border-radius: 0px;
    margin-top: 0;
    background-color: transparent;
  }
  .cs-site_header.cs-style1 .cs-main_header_center .cs-site_branding {
    position: absolute;
    left: 0px;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}

@media screen and (max-width: 991px) {
  .cs-site_header .container {
    max-width: 100%;
  }
  .cs-site_header.cs-style1 .cs-action_box > *:not(:last-child) {
    margin-right: 25px;
  }
  .cs-site_header.cs-style1 .cs-btn {
    padding: 8px;
  }
  .cs-site_header.cs-style1 .cs-icon_btn {
    height: 40px;
    width: 40px;
  }
}

@media screen and (max-width: 575px) {
  .cs-site-branding {
    max-width: 150px;
  }
  .cs-header_toolbox {
    margin-right: 44px;
  }
  .cs-toolbox > a:not(:first-child) {
    margin-left: 10px;
  }
  .cs-toolbox_btn,
  .cs-hamburger_text,
  .cs-site_header .cs-btn.cs-style6 {
    display: none;
  }
  .cs-hamburger_wrap .cs-hamburger {
    margin-right: 0;
  }
  .cs-site_branding img {
    height: 32px;
  }
  .cs-site_header.cs-style1 .cs-btn span {
    display: none;
  }
  .cs-site_header.cs-style1 .cs-btn svg {
    margin-right: 0;
    width: 20px;
    height: 20px;
  }
  .cs-site_header.cs-style1 .cs-toolbox > *:not(:first-child) {
    margin-left: 10px;
  }
  .cs-site_header.cs-style1 .cs-toolbox {
    margin-left: 0;
    margin-right: 45px;
  }
}

@media screen and (max-width: 450px) {
  .cs-toolbox > a:not(:first-child) {
    margin-left: 0;
  }
}

.cs-social_btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: -15px;
}

.cs-social_btns a {
  border-radius: 7px;
  height: 48px;
  width: 48px;
  margin: 15px;
}

.cs-social_btns svg {
  width: 24px;
  height: 24px;
}

.cs-footer_menu {
  list-style: none;
  padding: 0;
  margin: 0;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.cs-footer_menu a {
  margin: 0px 15px;
  display: inline-block;
}

@media screen and (max-width: 991px) {
  .cs-social_btns {
    margin: -5px;
  }
  .cs-social_btns a {
    height: 40px;
    width: 40px;
    margin: 5px;
  }
  .cs-footer_menu a {
    margin: 0px 8px;
  }
}

.cs-hero.cs-style1 {
  position: relative;
  padding: 70px 0;
  min-height: 850px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.cs-hero.cs-style1 .cs-hero_img {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 12%;
  z-index: 2;
}

.cs-hero.cs-style1 .cs-hero_text {
  position: relative;
  z-index: 3;
}

.cs-hero.cs-style1 .cs-hero_img_sm {
  position: absolute;
  top: 23%;
  right: 0;
  z-index: 1;
  -webkit-animation: rotate360 30s linear infinite;
          animation: rotate360 30s linear infinite;
}

.cs-hero.cs-style1 .cs-hero_title {
  color: #fff;
  margin-bottom: 30px;
}

.cs-hero.cs-style1 .cs-hero_secondary_title {
  color: #fff;
  margin-bottom: 20px;
}

.cs-hero.cs-style1 .cs-hero_subtitle {
  color: #fff;
  margin-top: 25px;
  margin-bottom: 0;
}

.cs-hero.cs-style1 .cs-dark_overlay {
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  height: 100%;
  width: 100%;
  opacity: 0.5;
}

.cs-hero.cs-style1.cs-type1 {
  overflow: hidden;
}

.cs-hero.cs-style1.cs-type1 .cs-dark_overlay {
  opacity: 0;
}

.cs-hero.cs-style1.cs-type1 .cs-hero_img_sm {
  top: 37%;
  right: initial;
  left: -10%;
}

.cs-hero.cs-style1.cs-type2 {
  padding: 80px 0;
  min-height: initial;
  background-attachment: fixed;
}

.cs-hero.cs-style1.cs-type2 .cs-hero_img {
  position: relative;
  right: initial;
  top: initial;
  -webkit-transform: initial;
          transform: initial;
  display: inline-block;
  margin-bottom: 80px;
}

.cs-hero.cs-style1.cs-type2 .cs-hero_img_sm {
  right: initial;
  left: 29%;
  top: initial;
  bottom: -12%;
}

.cs-hero.cs-style1.cs-type2 .cs-btn_group {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 40px;
}

.cs-hero.cs-style1.cs-type2 .cs-hero_secondary_title {
  margin-bottom: 20px;
}

.cs-hero.cs-style1.cs-type2 .cs-hero_subtitle {
  margin-top: 20px;
}

.cs-hero.cs-style1.cs-type3 {
  min-height: 700px;
  background-position: bottom center;
  background-attachment: fixed;
}

.cs-hero.cs-style1.cs-type3 .cs-dark_overlay {
  opacity: 0.65;
}

@-webkit-keyframes rotate360 {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotate360 {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@media screen and (max-width: 1399px) {
  .cs-hero.cs-style1 .cs-hero_img {
    right: 4%;
  }
}

@media screen and (max-width: 1199px) {
  .cs-hero.cs-style1 .cs-hero_img {
    right: 2%;
    max-width: 420px;
  }
  .cs-hero.cs-style1 .cs-hero_img_sm {
    max-width: 120px;
  }
}

@media screen and (max-width: 991px) {
  .cs-hero.cs-style1 .cs-hero_img {
    margin-top: 30px;
    position: relative;
    display: inline-block;
    right: initial;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .cs-hero.cs-style1 .cs-hero_text {
    text-align: center;
  }
  .cs-hero.cs-style1 .cs-btn_group {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .cs-hero.cs-style1.cs-type2 .cs-hero_img {
    left: initial;
    margin-top: 0;
  }
  .cs-hero.cs-style1.cs-type3 {
    min-height: initial;
    padding: 80px 0;
  }
  .cs-hero.cs-style1.cs-type1 .cs-hero_img_sm {
    left: 0;
  }
}

.cs-iconbox.cs-style1 {
  padding: 40px;
  border-radius: 10px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.cs-iconbox.cs-style1:hover {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
}

.cs-iconbox.cs-style1 .cs-iconbox_icon {
  padding: 4px 10px;
  display: inline-block;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 82, 255, 0.3)), color-stop(95.61%, transparent));
  background: linear-gradient(90deg, rgba(0, 82, 255, 0.3) 0%, transparent 95.61%);
}

.cs-iconbox.cs-style1.cs-type1 .cs-iconbox_icon {
  color: #8b428d;
  padding: 0;
  background: transparent;
}

.cs-iconbox.cs-style1.cs-type1 .cs-iconbox_icon svg,
.cs-iconbox.cs-style1.cs-type1 .cs-iconbox_icon path {
  fill: currentColor;
}

@media screen and (max-width: 575px) {
  .cs-iconbox.cs-style1 {
    padding: 30px;
  }
}

.cs-card.cs-style1 {
  position: relative;
  background: -webkit-gradient(linear, left top, right top, color-stop(47.8%, #ffffff), color-stop(75.6%, rgba(255, 255, 255, 0.22)));
  background: linear-gradient(90deg, #ffffff 47.8%, rgba(255, 255, 255, 0.22) 75.6%);
  overflow: hidden;
}

.cs-card.cs-style1::before, .cs-card.cs-style1::after {
  content: '';
  position: absolute;
  height: 200px;
  width: 200px;
  background-color: #F4F6F9;
  right: -125px;
  border: 1px solid #eaeaea;
}

.cs-card.cs-style1::before {
  top: -142px;
  -webkit-transform: rotate(55deg);
          transform: rotate(55deg);
}

.cs-card.cs-style1::after {
  bottom: -142px;
  right: -125px;
  -webkit-transform: rotate(35deg);
          transform: rotate(35deg);
}

.cs-card.cs-style1 .cs-card_in {
  height: 192px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 20px 70px 20px 25px;
  border: 1px solid #eaeaea;
}

.cs-card.cs-style1 .cs-card_arrow {
  font-size: 32px;
  position: absolute;
  right: 35px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.cs-card.cs-style1 .cs-card_title {
  max-width: 200px;
}

.cs-card.cs-style2 .cs-card_number {
  height: 48px;
  width: 48px;
  border-radius: 50%;
  position: relative;
}

.cs-card.cs-style2 .cs-card_tick {
  position: absolute;
  right: -4px;
  top: 3px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.cs-card.cs-style2 .cs-card_in {
  padding: 25px;
  border-radius: 0 10px 10px;
}

.cs-card.cs-style3 {
  border-radius: 10px;
  padding: 35px 30px 30px;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.cs-card.cs-style3 .cs-card_number {
  -webkit-text-stroke: 2px #8b428d;
  color: transparent;
  height: 50px;
  width: 50px;
  border: 2px dashed #8b428d;
  margin: auto;
  border-radius: 50%;
  margin-bottom: 25px;
}

.cs-card.cs-style3:hover {
  -webkit-transform: scale(1.04);
          transform: scale(1.04);
}

@media screen and (max-width: 991px) {
  .cs-card.cs-style1 .cs-card_title {
    max-width: 180px;
  }
  .cs-card.cs-style1 .cs-card_in {
    height: 140px;
  }
  .cs-card.cs-style1:before, .cs-card.cs-style1::after {
    display: none;
  }
}

.cs-blog_btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.cs-blog_btn svg {
  margin-left: 10px;
}

.cs-posted_by {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.cs-posted_by svg {
  margin-right: 8px;
}

.cs-blog_details h1 {
  font-size: 36px;
  margin-bottom: 20px;
}

.cs-blog_details h2 {
  font-size: 22px;
  margin-bottom: 15px;
}

.cs-blog_details p {
  margin-bottom: 20px;
}

.cs-blog_details blockquote {
  font-size: 22px;
  line-height: 1.5em;
  font-weight: 600;
  margin-bottom: 30px;
  color: #fff;
}

.cs-blog_details img {
  margin-bottom: 30px;
}

.cs-blog_details ol {
  margin-bottom: 20px;
}

.cs-blog_details ol li:not(:last-child) {
  margin-bottom: 10px;
}

.cs-team.cs-style1 {
  border-radius: 10px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.cs-team.cs-style1:hover {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
}

.cs-team.cs-style1 .cs-member_thumb {
  position: relative;
  padding: 0 15px;
}

.cs-team.cs-style1 .cs-member_thumb img {
  display: inline-block;
  position: relative;
  z-index: 1;
  height: 175px;
}

.cs-team.cs-style1 .cs-member_social svg {
  height: 18px;
  width: 18px;
}

.cs-team.cs-style1 .cs-member_social a:hover {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.cs-team.cs-style1 .cs-member_social {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: -10px;
}

.cs-team.cs-style1 .cs-member_social > * {
  margin: 10px;
}

.cs-team.cs-style1.cs-type1 .cs-member_thumb {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  padding: 30px;
  margin-left: auto;
  margin-right: auto;
}

.cs-team.cs-style1.cs-type1 .cs-member_thumb img {
  max-height: 100%;
}

.slick-slide .cs-team.cs-style1:hover {
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}

.cs-image_box.cs-style1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  height: 300px;
  border: 1px solid rgba(0, 82, 255, 0.1);
  padding: 20px 15px 5px;
  position: relative;
  margin-top: 5px;
}

.cs-image_box.cs-style1::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  left: -5px;
  top: -5px;
  background-color: rgba(0, 82, 255, 0.1);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.cs-image_box.cs-style1 img {
  max-height: 100%;
}

.cs-image_box.cs-style1:hover {
  border-color: rgba(0, 82, 255, 0.2);
}

.cs-image_box.cs-style1:hover::before {
  background-color: rgba(0, 82, 255, 0.2);
  left: 0;
  top: 0;
}

.cs-image_box.cs-style2 {
  display: block;
  background: linear-gradient(108.18deg, #EA4C89 -2.02%, #4D44C6 100%);
  padding: 1px;
  border-radius: 10px;
}

.cs-image_box.cs-style2 img {
  max-height: 100%;
}

.cs-image_box.cs-style2 .cs-image_box_in {
  border-radius: inherit;
  padding: 10px;
}

.cs-image_box.cs-style2 .cs-image_box_img {
  background: #8b428d;
  border-radius: inherit;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 290px;
}

@media screen and (max-width: 575px) {
  .cs-image_box.cs-style1 {
    height: 200px;
    padding: 20px 10px 5px;
  }
  .cs-image_box.cs-style2 .cs-image_box_img {
    height: 190px;
  }
}

.cs-cta.cs-style1 {
  padding: 75px 30px 80px;
  border-radius: 16px;
}

.cs-cta.cs-style1 .cs-cta_btns {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: -7px;
}

.cs-cta.cs-style1 .cs-cta_btns > * {
  margin: 7px;
}

@media screen and (max-width: 767px) {
  .cs-cta.cs-style1 br {
    display: none;
  }
}

.cs-dark {
  background-color: #06182c;
  color: rgba(255, 255, 255, 0.6);
}

.cs-dark .cs-btn_bordered {
  border-color: #fff;
}

.cs-dark .cs-btn_bordered:hover {
  border-color: #fff;
  color: #8b428d;
  background-color: #fff;
}

.cs-dark .cs-form_field_wrap label {
  background-color: #8b428d;
}

.cs-dark .cs-btn,
.cs-dark .cs-quantity .cs-quantity_number {
  color: #fff;
}

.cs-dark h1,
.cs-dark h2,
.cs-dark h3,
.cs-dark h4,
.cs-dark h5,
.cs-dark h6,
.cs-dark .cs-primary_color {
  color: #fff;
}

.cs-dark .cs-white_bg,
.cs-dark .cs-nav .cs-nav_list ul {
  background-color: #283645;
}

.cs-dark .cs-primary_btn {
  background-color: #0c2e4e;
  border-color: #0c2e4e;
}

.cs-dark .cs-primary_btn:hover {
  background-color: #8b428d;
  border-color: #8b428d;
}

.cs-dark .cs-card.cs-style1 {
  background: -webkit-gradient(linear, left top, right top, color-stop(-5.28%, rgba(217, 217, 217, 0.1)), color-stop(75.6%, rgba(217, 217, 217, 0)));
  background: linear-gradient(90deg, rgba(217, 217, 217, 0.1) -5.28%, rgba(217, 217, 217, 0) 75.6%);
}

.cs-dark .cs-card.cs-style1 .cs-card_in {
  border-color: #394552;
}

.cs-dark .cs-card.cs-style1::before,
.cs-dark .cs-card.cs-style1::after {
  background-color: #06182c;
  border-color: #394552;
}

.cs-dark .cs-accent_color,
.cs-dark .cs-accent_color_hover:hover {
  color: #0052FF;
}

.cs-dark .cs-accent_bg,
.cs-dark .cs-accent_bg_hover:hover {
  background-color: #0052FF;
}

.cs-dark .cs-site_header.cs-style1.cs-sticky-active {
  background-color: #0a2540;
}

.cs-dark .cs-hide_dark {
  display: none;
}

.cs-dark .cs-hide_white {
  display: inline-block;
}

.cs-dark .cs-white_btn {
  color: #06182c;
}

.cs-dark .cs-white_btn:hover {
  color: #fff;
}

.cs-dark .page-link {
  color: #fff;
  border-color: #0c2e4e;
}

.cs-dark .page-link:hover {
  color: #0052FF;
  background-color: rgba(0, 82, 255, 0.1);
  border-color: rgba(0, 82, 255, 0.1);
}

.cs-dark .cs-cta.cs-style1 {
  background: linear-gradient(108.18deg, rgba(234, 76, 137, 0.2) -2.02%, rgba(77, 68, 198, 0.2) 100%);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.cs-dark .cs-light_bg {
  background: linear-gradient(108.18deg, rgba(234, 76, 137, 0.1) -2.02%, rgba(77, 68, 198, 0.1));
}

.cs-dark .cs-form_field {
  border-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.cs-dark .cs-form_field:focus {
  border-color: #0052FF;
}

.cs-dark .cs-iconbox.cs-style1.cs-type1 .cs-iconbox_icon {
  color: #fff;
}

@media screen and (max-width: 1199px) {
  .cs-dark .cs-nav .cs-nav_list {
    background-color: #283645;
    border-color: rgba(255, 255, 255, 0.1);
  }
}



/* Custom arrows */
.swiper-button-next, .swiper-button-prev {
  color: #e60073;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(5px);
  padding: 20px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.swiper-button-next:hover, .swiper-button-prev:hover {
  background: rgba(255,255,255,0.3);
}

/* Slide-ში ბადე */
.swiper-slide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

/* ბოქსი */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 სვეტი */
  gap: 20px;
  padding: 20px;
}

.product-card {
  background: #202a3a;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  transition: transform 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
}

.swiper {
  position: relative;
  padding: 40px 0; /* ზედა და ქვედა დაშორება */
}

.swiper-button-next,
.swiper-button-prev {
  color: white;
  background: rgba(0, 0, 0, 0.5);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 18px;
}

.swiper-button-next {
  right: 10px;
}

.swiper-button-prev {
  left: 10px;
}

/* axali*/

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    gap: 10px;
}

.pagination button {
    background: linear-gradient(90deg, #ec008c, #6739ff);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    font-family: inherit;
    transition: all 0.3s ease;
}

.pagination button:hover:not(:disabled) {
    transform: scale(1.05);
}

.pagination button:disabled {
    opacity: 0.5;
    cursor: default;
}

#pageIndicators span {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 4px;
    border-radius: 50%;
    background-color: #888;
    cursor: pointer;
    transition: all 0.3s ease;
}

#pageIndicators span.active {
    background: linear-gradient(90deg, #ec008c, #6739ff);
    width: 10px;
    height: 10px;
}


.products-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.products-pagination button {
    background: linear-gradient(90deg, #ec008c, #6739ff);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    font-size: 14px;
}

.products-pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.products-pagination button:hover:not(:disabled) {
    transform: scale(1.05);
}

.products-pagination #pageIndicators {
    display: flex;
    align-items: center;
    gap: 6px;
}

.products-pagination #pageIndicators span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #888;
    transition: all 0.3s ease;
    cursor: pointer;
}

.products-pagination #pageIndicators span.active {
    background: linear-gradient(90deg, #ec008c, #6739ff);
    width: 10px;
    height: 10px;
}


/*ღილაკები პარტნიორის*/

.product-img-wrapper {
    position: relative;
    overflow: hidden;
}

.product-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.product-img-wrapper:hover .product-overlay {
    opacity: 1;
}

.product-overlay button {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.product-overlay button:hover {
    background-color: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

.product-overlay button i {
    font-size: 18px;
    color: #8a428c;
}



.custom-product-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.custom-product-modal.active {
  opacity: 1;
}

.custom-product-modal-content {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  position: relative;
}

.custom-product-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
}

.custom-product-modal-body img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 10px;
}

.custom-product-modal-body h3 {
  margin: 10px 0;
}

.custom-product-modal-actions {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
}

.custom-product-modal-actions button {
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.custom-product-modal-actions .primary-action {
  background-color: #8a428c;
  color: #fff;
}

.custom-product-modal-actions .secondary-action {
  background-color: #6c757d;
  color: #fff;
}

/* მოდელის დიზიანი*/


.custom-product-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.custom-product-modal.active {
  opacity: 1;
}

.custom-product-modal-content {
  background: #fff;
  border-radius: 8px;
  padding: 20px 20px 15px 20px;
  max-width: 500px;
  width: 95%;
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: left;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.custom-product-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 22px;
  background: none;
  border: none;
  cursor: pointer;
  color: #8a428c;
}

.custom-product-modal-body {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-top: 10px;
}

.custom-product-modal-body img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
}

.custom-product-modal-body .modal-text {
  flex: 1;
}

.custom-product-modal-body .modal-text h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: #8a428c;
}

.custom-product-modal-body .modal-text p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.custom-product-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.custom-product-modal-actions button {
  padding: 10px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.custom-product-modal-actions .primary-action {
  background-color: #007bff;
  color: #fff;
}

.custom-product-modal-actions .secondary-action {
  background-color: #6c757d;
  color: #fff;
}


.custom-product-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.custom-product-modal.active {
  opacity: 1;
}

.custom-product-modal-content {
  background-color: rgba(255, 255, 255, 0.1); /* ცოტა გამჭვირვალე */
  backdrop-filter: blur(8px); /* პატარა blur */
  padding: 25px 30px;
  border-radius: 14px;
  position: relative;
  max-width: 600px;
  width: 90%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.custom-product-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #333;
}

.custom-product-modal-body.new-layout {
  display: flex;
  align-items: center;
  gap: 20px;
}

.modal-left img {
  width: 120px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.modal-right {
  flex: 1;
}

.modal-right h3 {
  margin: 0 0 12px;
  font-size: 20px;
  color: #8a428c;
}

.modal-right p {
  margin-bottom: 18px;
  font-size: 15px;
  color: #8a428c;
}

.custom-product-modal-actions {
  display: flex;
  gap: 10px;
}

.custom-product-modal-actions .primary-action {
  background: linear-gradient(90deg, #8a428c 0%, #7928ca 100%); /* შენი საიტის ფერები */
  color: #8a428c;
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}

.custom-product-modal-actions .primary-action:hover {
  transform: translateY(-2px);
}

.custom-product-modal-actions .secondary-action {
  background-color: #8a428c;
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.custom-product-modal-actions .secondary-action:hover {
  background-color: #8a428c;
}


.cs-seciton_heading.cs-style1 {
    margin-top: 50px; /* ახალი ადგილი ზემოდან */
    margin-bottom: 30px;
}


/* სტილიები ახალი*/

/* Modal content tuning */
.custom-product-modal-content {
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 500px;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.3); /* Transparent bg */
  border-radius: 10px;
}

.custom-product-modal-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.custom-product-modal-body img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.custom-product-modal-body h3 {
  font-size: 22px;
  margin: 0 0 10px 0;
}

.custom-product-modal-body p {
  font-size: 16px;
  color: #ccc;
  margin: 0 0 20px 0;
}

.custom-product-modal-actions {
  display: flex;
  gap: 15px;
  justify-content: flex-start;
  margin-top: 20px;
  width: 100%;
}

.primary-action {
  background: linear-gradient(90deg, #ff0080 0%, #7928ca 100%);
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
}

.secondary-action {
  background: #555;
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 6px;
  cursor: pointer;
}

.custom-product-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 22px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}


/* Products grid */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

/* Product card */
.cs-card.cs-style2.cs-light_bg {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cs-card.cs-style2.cs-light_bg:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Product image wrapper */
.product-img-wrapper {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  overflow: hidden;
}

/* Product image */
.product-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/*footer*/

.cs-footer-dark {
  background-color: #08182d;
  padding: 60px 0 20px;
  color: #fff;
  font-family: Arial, sans-serif;
}

.cs-footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
}

.cs-footer-col {
  flex: 1 1 200px;
  min-width: 220px;
}

.cs-footer-col h4 {
  color: #8a428c;
  margin-bottom: 15px;
  font-size: 18px;
}

.cs-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cs-footer-col ul li {
  margin-bottom: 10px;
}

.cs-footer-col ul li a {
  color: #ccc;
  text-decoration: none;
}

.cs-footer-col ul li a:hover {
  color: #88418b;
}

/* Telegram Subscribe Button */
.cs-telegram-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 12px 20px;
  background: linear-gradient(90deg, #8a428c, #7928ca);
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  transition: background 0.3s ease;
}

.cs-telegram-btn:hover {
  background: linear-gradient(90deg, #7928ca, #8a428c);
}

.cs-footer-bottom {
  border-top: 1px solid #333;
  margin-top: 40px;
  padding-top: 20px;
  text-align: center;
}

.cs-social-icons {
  margin-bottom: 10px;
}

.cs-social-icons a {
  display: inline-block;
  margin: 0 10px;
}
.cs-telegram-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 12px 20px;
  background: linear-gradient(90deg, #8a428c, #7928ca);
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  transition: background 0.3s ease;
}

.cs-telegram-btn:hover {
  background: linear-gradient(90deg, #7928ca, #8a428c);


}


#hero-video {
  position: relative;
  overflow: hidden;
  height: 400px; /* აქ აწერთ რამდენი სიმაღლე გინდათ გამოჩნდეს ვიდეოს ნაწილი */
}

#hero-video video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover; /* ძალიან მნიშვნელოვანია რომ ვიდეო შეივსოს */
  z-index: 1;
}


/*შეფასების სტილი*/

.cs-card.cs-style1.cs-light_bg {
  background-color: #0e1a2b; /* ან მუქი #101820 */
  color: #ffffff;
}


/*მობილური ვერსია */


@media (max-width: 768px) {
  .cs-modal_container {
    background: #2f0431a6!important;
    border-radius: 20px !important;
    padding: 24px 16px !important;
    max-width: 90% !important;
  
    margin: 30px auto;
  }

  .cs-wallet_secton h2 {
    font-size: 18px !important;
    font-weight: 600;
    color: #fff;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
  }

  .cs-wallet_secton ul {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0;
  }

  .cs-wallet_secton ul li a {
    background: linear-gradient(90deg, #a84adf, #6a3ce9) !important;
    color: #fff !important;
    padding: 14px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    text-decoration: none;
    transition: background 0.3s ease;
  }

  .cs-wallet_secton ul li a:hover {
    background: linear-gradient(90deg, #6a3ce9, #a84adf) !important;
  }

  .cs-close_modal {
    top: 12px !important;
    right: 14px !important;
    background-color: #a84adf !important;
    color: white !important;
    border-radius: 50% !important;
    width: 28px;
    height: 28px;
    font-size: 18px !important;
    line-height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .cs-wallet_secton p {
    margin-top: 18px;
    font-size: 13px;
    color: #ccc;
    text-align: center;
  }
}

/*youtube*/

@media (max-width: 768px) {
  .cs-btn_group {
    gap: 10px;
    justify-content: center; /* ცენტრირებულია */
  }

  .cs-btn_group .cs-btn {
    width: 100%; /* ყველა ღილაკი იქნება ერთი სიგანის */
    max-width: 200px; /* მაქსიმუმს არ გაცდება */
    text-align: center;
  }
}



.cs-card-horizontal {
  display: flex;
  align-items: center;
  background-color: #0f1a2e;
  border-radius: 12px;
  padding: 16px 20px;
  position: relative;
  gap: 16px;
  transition: background 0.3s;
}

.cs-card-horizontal:hover {
  background-color: #131f35;
}

.cs-product-icon-horizontal {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 8px;
  background-color: #ff008055;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ff0080;
  font-size: 20px;
}

.cs-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.product-overlay-horizontal {
  display: flex;
  gap: 8px;
}

.product-overlay-horizontal button {
  background: none;
  border: none;
  color: #aaa;
  font-size: 16px;
  cursor: pointer;
  transition: color 0.2s;
}

.product-overlay-horizontal button:hover {
  color: #ff0080;
}

.modal-product-icon {
  width: 120px;
  height: 120px;
  background-color: #ff008055;
  color: #ff0080;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}

#productsGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 ბარათი ერთ ხაზზე */
  gap: 20px;
}

@media (max-width: 1024px) {
  #productsGrid {
    grid-template-columns: repeat(2, 1fr); /* ტაბლეტისთვის 2 */
  }
}

@media (max-width: 768px) {
  #productsGrid {
    grid-template-columns: 1fr; /* მობილურზე 1 */
  }
}


/* ==== Desktop Version ==== */
.services-desktop {
  display: block;
  padding: 60px 0;
}

.cs-iconbox {
  background-color: #121e33;
  padding: 30px;
  border-radius: 12px;
  height: 100%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: background 0.3s ease;
}

.cs-iconbox:hover {
  background-color: #172a4d;
}

.cs-iconbox_icon {
  font-size: 32px;
  font-weight: bold;
  color: #ff0080;
  margin-bottom: 12px;
}

.cs-iconbox_title {
  font-size: 20px;
  color: #ffffff;
  margin-bottom: 10px;
}

.cs-iconbox_subtitle {
  font-size: 16px;
  color: #ccc;
  line-height: 1.6;
}

/* ==== Mobile Version ==== */
.services-mobile-slider {
  display: none;
  padding: 40px 0;
}

.mobile-scroll-wrapper {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 0 20px;
  scroll-snap-type: x mandatory;
}

.mobile-card {
  min-width: 280px;
  flex: 0 0 auto;
  background-color: #121e33;
  padding: 24px;
  border-radius: 12px;
  scroll-snap-align: start;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

.mobile-card h4 {
  font-size: 24px;
  color: #a84adf;
  margin-bottom: 10px;
}

.mobile-card h3 {
  font-size: 18px;
  color: #ffffff;
  margin-bottom: 10px;
}

.mobile-card p {
  font-size: 14px;
  color: #ccc;
  line-height: 1.5;
}

/* ==== Responsive Visibility ==== */
@media (max-width: 991px) {
  .services-desktop {
    display: none;
  }
  .services-mobile-slider {
    display: block;
  }
}


/*mobile optimazed*/

@media (max-width: 768px) {
  h1, .cs-font_64       { font-size: 26px; }
  h2, .cs-font_36       { font-size: 22px; }
  h3, .cs-font_30       { font-size: 18px; }
  p,  .cs-font_16,
      .cs-font_14,
      .cs-font_12_sm    { font-size: 14px; line-height: 1.6; }
}

@media (max-width: 768px) {
  .cs-btn, .btn, .cs-btn_filed {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    margin-bottom: 10px;
    border-radius: 8px;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .cs-footer-content {
    flex-direction: column;
    gap: 30px;
    padding: 20px 0;
    text-align: center;
  }

  .cs-footer-col ul {
    padding-left: 0;
  }

  .cs-accordian {
    margin-bottom: 16px;
    border-radius: 12px;
    padding: 16px;
  }

  .cs-accordian_title {
    font-size: 16px;
  }

  .cs-accordian-body {
    font-size: 14px;
    line-height: 1.5;
  }
}

@media (max-width: 768px) {
  .container,
  .cs-container,
  .row,
  .cs-footer-content,
  .cs-section,
  .cs-card,
  .cs-iconbox {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
    width: 100% !important;
    margin: 0 auto !important;
  }

  /* ყველა ელემენტი იყოს 100% და არაფერი გადაცდეს */
  * {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  html, body {
    overflow-x: hidden !important;
  }
}
@media (max-width: 768px) {
  .cs-footer-content {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 0 16px;
  }

  .cs-footer-col {
    width: 100%;
    text-align: left;
  }

  .cs-footer-bottom {
    margin-top: 32px;
    text-align: center;
  }
}
@media (max-width: 768px) {
  .cs-footer-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 0 16px;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .cs-footer-col {
    min-width: 0;
  }

  .cs-footer-col ul,
  .cs-footer-col div {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  .cs-tag {
    white-space: nowrap;
    font-size: 13px;
    padding: 6px 10px;
    margin: 4px 6px 0 0;
    border-radius: 16px;
    background-color: #3a3147;
    color: #fff;
    display: inline-block;
  }

  .cs-tag-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    overflow: hidden;
  }
}


/*ღილაკები ვიდეოს */

@media (max-width: 768px) { 
  .cs-hero_text {
    margin-top: 40px !important;
    padding: 60px 0 40px 0 !important;
    text-align: center !important;
  }

  .cs-hero_text .cs-btn {
    display: block !important;
    width: 85% !important;
    margin: 6px auto !important; /* 👈 აქ შევამცირეთ */
    font-size: 14px !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    text-align: center !important;
  }
}


/*პარტნერ*/

.partner-card {
  display: flex;
  align-items: center;
  background-color: rgba(0,0,0,0.3);
  border-radius: 16px;
  padding: 20px;
  gap: 20px;
  box-shadow: 0 0 12px rgba(0,0,0,0.2);
  backdrop-filter: blur(4px);
  margin-top: 30px;
}

.partner-logo img {
  width: 100px;
  height: auto;
  object-fit: contain;
  max-height: 120px;
  border-radius: 12px;
}

@media (max-width: 768px) {
  .partner-card {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .partner-logo {
    margin-bottom: 16px !important;
  }

  .partner-logo img {
    width: 100px !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 12px !important;
  }

  .partner-info p {
    margin-bottom: 16px !important;
  }

  .partner-btn {
    width: 100% !important;
    max-width: 240px;
    margin: 0 auto;
    text-align: center;
  }
}


.partner-info h4 {
  font-size: 18px;
  margin: 0 0 10px;
  color: #fff;
}

.partner-btn {
  background: linear-gradient(90deg, #a84adf, #7928ca);
  color: #fff;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  display: inline-block;
  transition: background 0.3s ease;
}

.partner-btn:hover {
  background: linear-gradient(90deg, #7928ca, #a84adf);
}

/*ღილაკის*/
@media (max-width: 768px) {
  .cs-toolbox .cs-modal_btn {
    align-self: flex-end !important;          /* არ იყოს stretch */
    transform: translateY(2px) !important;     /* ქვემოთ ოდნავ ჩამოწევა */
    background-color: #9146ff !important;      /* ღილაკის ფერი */
    color: white !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 12px !important;
    height: 40px !important;
    border-radius: 6px !important;
    line-height: 1 !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }

  .cs-toolbox .cs-modal_btn i {
    font-size: 16px !important;
    margin: 0 !important;
  }

  .cs-toolbox .cs-modal_btn span {
    display: inline-block !important;
    line-height: 1 !important;
  }
}


/* Default: დამალე მობილური ბლოგი დესკტოპზე */
.blog-mobile {
  display: none;
}

/* მობილური ვერსიის გამოჩენა მცირე ეკრანებზე */
@media (max-width: 767px) {
  .blog-desktop {
    display: none;
  }
  .blog-mobile {
    display: block;
  }
}

/* ------------------------------
   მობილური ბლოგის სტილი
------------------------------ */


/* გარსშემოვავლებთ სათაურს ერთობლივად */
.cs-page_heading {
  border-left: 4px solid #b144c5;
  padding-left: 12px;
  margin-bottom: 30px;
}

/* "НАШ БЛОГ" პატარა და იისფერი */
.cs-page_heading h3.cs-section_heading {
  font-size: 14px;
  color: #a57cd5;
  font-weight: 600;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* "ПОСЛЕДНИЕ НОВОСТИ" დიდი სათაური */
.cs-page_heading h1 {
  font-size: 24px;
  color: #fff;
  font-weight: 700;
  margin: 0;
}

/* 📱 მობილურისთვის */
@media (max-width: 767px) {
  .cs-page_heading {
    padding-left: 10px;
    margin-bottom: 20px;
  }

  .cs-page_heading h3.cs-section_heading {
    font-size: 13px;
  }

  .cs-page_heading h1 {
    font-size: 20px;
  }
}


@media (max-width: 767px) {
  .blog-mobile {
    margin-top: 40px; /* ან padding-top: 40px – რაც გირჩევნია */
  }
}


@media (max-width: 767px) {
  .blog-mobile {
    padding: 48px 20px 32px;
    background-color: #0a162c;
  }

  .blog-mobile h3.cs-section_heading {
    font-size: 14px;
    color: #a57cd5;
    text-transform: uppercase;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
  }

  .blog-title {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 24px;
  }

  .blog-scroll {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .blog-card {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.2s ease;
  }

  .blog-card:hover {
    transform: translateY(-4px);
  }

  .blog-card img {
    width: 100%;
    border-radius: 10px;
  }

  .blog-card h3 {
    font-size: 16px;
    color: #111;
    font-weight: 600;
    margin: 0;
  }

  .blog-card p {
    font-size: 14px;
    color: #555;
    margin: 0;
    line-height: 1.5;
  }

  .blog-card a {
    font-size: 14px;
    color: #0057ff;
    font-weight: 600;
    text-decoration: none;
    margin-top: auto;
    display: inline-block;
  }

  .blog-card a:hover {
    text-decoration: underline;
  }
}


    /* Main Post Content Area */
    .cs-main-post {
      padding-right: 40px; /* Increased space between article and sidebar */
    }
    .cs-post_details_header {
      border-bottom: 1px solid #3a3a5a;
      padding-bottom: 20px;
      margin-bottom: 35px;
    }
    .cs-post_details_title {
        font-size: 38px; /* Slightly smaller main title */
    }
    .cs-post_details_meta {
      display: flex; gap: 25px; color: #9a9a9e;
      font-size: 14px; margin-top: 20px;
    }
    .cs-post_details_meta i { margin-right: 8px; color: #a57cd5; }
    .cs-post_details_thumb {
      margin-bottom: 35px; border-radius: 15px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    }
    .cs-post_details_body p {
      line-height: 1.8; font-size: 18px;
      color: #d1d1d1; margin-bottom: 20px;
    }
    .cs-post_details_body h2 {
      margin-top: 50px; margin-bottom: 15px;
      color: #ffffff; font-size: 26px; /* Reduced subtitle size */
      font-weight: 600;
    }
    .cs-post_details_body blockquote {
      border-left: 3px solid #a57cd5; padding-left: 25px;
      margin: 45px 0; font-style: italic;
      color: #c5c5d2; font-size: 19px;
    }
    .cs-btn-container {
      text-align: center;
      margin-top: 25px;
      margin-bottom: 45px; /* Added space after buttons */
    }

    /* Sidebar Styles (Unchanged but required) */
    .cs-sidebar_widget {
      background-color: rgba(32, 46, 26, 0.7); border: 1px solid #2c2c4a;
      padding: 25px; border-radius: 12px; margin-bottom: 30px;
    }
    .cs-sidebar_widget_title {
      color: #a57cd5; font-size: 20px; font-weight: bold;
      margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #3a3a5a;
    }
    .cs-sidebar_post_list li {
      list-style: none; margin-bottom: 15px; padding-bottom: 15px;
      border-bottom: 1px solid #2c2c4a;
    }
    .cs-sidebar_post_list li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
    .cs-sidebar_post_list a { color: #e0e0e0; text-decoration: none; font-weight: 500; transition: color 0.3s ease; }
    .cs-sidebar_post_list a:hover { color: #ff0080; }
    .cs-sidebar_post_list span { display: block; font-size: 13px; color: #888; margin-top: 4px; }
    .cs-tag_cloud a {
      background: #a57cd5; color: #fff; padding: 6px 14px; border-radius: 20px;
      font-size: 13px; text-decoration: none; margin-right: 8px; margin-bottom: 8px;
      display: inline-block; transition: background-color 0.3s ease;
    }
    .cs-tag_cloud a:hover { background-color: #ff0080; }
    
    @media (max-width: 991px) {
      .cs-main-post { padding-right: 0; }
      .cs-sidebar { margin-top: 50px; }
    }
 
   
  .cs-main_header_in {
      /* ვცვლით ჰედერის სტრუქტურას 2 ნაწილად: ლოგო | მენიუ+ღილაკები */
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .cs-main_header_center {
       /* ეს კლასი აღარ გვჭირდება ცალკე, ამიტომ ვაუქმებთ მის ზეგავლენას */
      width: auto;
      position: static;
      left: auto;
      transform: none;
    }
    .cs-main_header_right {
      /* ვაერთიანებთ მენიუს და ღილაკებს ერთ ჯგუფში */
      display: flex;
      align-items: center;
    }
    .cs-nav {
      /* ვამატებთ მცირე დაშორებას მენიუსა და მარჯვენა ღილაკებს შორის */
      margin-right: 20px;
    }
 
     @media (max-width: 991px) {
      .cs-post_details {
        display: block !important;
      }
    }
      @media (min-width: 992px) {
      .cs-desktop-view { display: block !important; }
      .cs-mobile-view { display: none !important; }
    }
    /* On tablet and mobile screens (991px and narrower) */
    @media (max-width: 991px) {
      .cs-desktop-view { display: none !important; }
      .cs-mobile-view { display: block !important; }
      .cs-main-post { padding-right: 0; }
      .cs-sidebar { margin-top: 50px; }
    }
.blog-slider .cs-blog { margin: 0 12px; }
.slick-prev:before, .slick-next:before { color: #fff; font-size: 22px; }

    
.slick-prev, .slick-next {
  background: none !important;
  border: none !important;
  font-size: 0; /* დამალავს "Previous / Next" ტექსტს */
}

.slick-prev:before, .slick-next:before {
  color: #fff;   /* ისრები იქნება თეთრი */
  font-size: 24px;
}
/* Dots – სწორად და ცენტრში */
.blog-slider .slick-dots{
  position: static;            /* არ აიწიოს მარცხნივ */
  margin: 16px 0 0;
  padding: 0;
  text-align: center;
  list-style: none;            /* გლობალურ bullets ვთიშავთ */
}
.blog-slider .slick-dots li{
  display: inline-block;
  margin: 0 6px;
  list-style: none;            /* უსაფრთხოდ */
}
.blog-slider .slick-dots li button{
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ffffff33;       /* მსუბუქი წერტილი */
  font-size: 0;                /* “1,2,3…” დამალვა */
  line-height: 0;
  cursor: pointer;
}
.blog-slider .slick-dots li.slick-active button{
  background: #fff;            /* აქტიური დოტი */
}

/* Arrows – ნორმალურად, ტექსტის გარეშე */
.blog-slider .slick-prev,
.blog-slider .slick-next{
  width: 36px;
  height: 36px;
  z-index: 2;
}
.blog-slider .slick-prev:before,
.blog-slider .slick-next:before{
  font-size: 26px;             /* slick-ის default ისრები */
  color: #fff;
}
/* თუ თავისით "Previous/Next" ტექსტს გიწერს, ასე დაფარე */
.blog-slider .slick-prev,
.blog-slider .slick-next{
  background: transparent !important;
  border: none !important;
  font-size: 0;                /* ტექსტის დამალვა */
}

/* სლაიდერ ბარათებს შორის დაშორება */
.blog-slider .slick-slide {
  padding: 0 18px;   /* ჰორიზონტალური ჰაერი */
  box-sizing: border-box;
}

/* ბარათი */
.blog-slider .cs-blog {
  background: transparent;   /* ფონი გამჭვირვალე */
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform .25s ease;
}
.blog-slider .cs-blog:hover {
  transform: translateY(-5px);
}

/* სურათი */
.blog-slider .cs-blog_thumb {
  margin-bottom: 16px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0);
}
.blog-slider .cs-blog_thumb img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .4s ease;
}
.blog-slider .cs-blog_thumb:hover img {
  transform: scale(1.05);
}

/* სათაური */
.blog-slider .cs-blog_title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.4;
  color: #fff;
}

/* ქვე ტექსტი */
.blog-slider .cs-blgo_subtitle {
  font-size: 15px;
  color: #bbb;
  margin-bottom: 12px;
  line-height: 1.5;
}

/* ღილაკი */
.blog-slider .cs-blog_btn {
  font-size: 14px;
  font-weight: 600;
  color: #ff0080;
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
}
.blog-slider .cs-blog_btn::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: #ff0080;
  transform: scaleX(0);
  transition: transform .3s ease;
}
.blog-slider .cs-blog_btn:hover::after {
  transform: scaleX(1);
}

.blog-mobile {
  padding: 20px 10px;
  background: #0f0f17;
}

.blog-mobile h3,
.blog-mobile h2 {
  text-align: center;
  margin-bottom: 10px;
}

.mobile-blog-slider .blog-card {
  background: #1b1b2a;
  border-radius: 14px;
  padding: 16px;
  margin: 0 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: transform 0.3s ease;
}

.mobile-blog-slider .blog-card:hover {
  transform: translateY(-5px);
}

.blog-card .thumb img {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 12px;
}

.blog-card .body h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: #fff;
}

.blog-card .body p {
  font-size: 14px;
  color: #aaa;
  margin-bottom: 12px;
  line-height: 1.4;
}

.blog-card .btn {
  display: inline-block;
  padding: 8px 14px;
  font-size: 14px;
  border-radius: 20px;
  background: linear-gradient(45deg, #ff0080, #a57cd5);
  color: #fff;
  text-decoration: none;
  transition: background 0.3s ease;
}

.blog-card .btn:hover {
  background: linear-gradient(45deg, #a57cd5, #ff0080);
}

/* default: დესკტოპზე დამალე მობილური სლაიდერი */
.mobile-2up-slider{ display:none; }

@media (max-width: 768px){
  /* თუ გაქვს blog-desktop ან სხვა mobile ბლოგი – დამალე */
  .blog-desktop, .blog-mobile { display:none !important; }

  .mobile-2up-slider{
    display:block;
    padding:16px 0 24px;
    background:#f6f8fc;
  }
  .mobile-2up-slider .eyebrow{
    text-align:center; color:#6b48c8; font-weight:700; font-size:12px;
    letter-spacing:.08em; text-transform:uppercase; margin:0 0 6px;
  }
  .mobile-2up-slider .title{
    text-align:center; color:#dde3ef; font-size:22px; margin:0 0 14px;
  }

  /* ჰორიზონტალური_scroll + snap */
  .mobile-2up-slider .snap-container{
    display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory; gap:14px; padding:0 14px;
  }
  .mobile-2up-slider .snap-container::-webkit-scrollbar{ display:none; }

  /* ერთი „გვერდი“ = ეკრანის სიგანე */
  .mobile-2up-slider .snap-slide{
    scroll-snap-align:center;
    flex:0 0 calc(100% - 28px);           /* სრული viewport - ჰორიზ. padding */
    display:grid; grid-template-columns:1fr; row-gap:14px;
  }

  /* ბარათები */
  .mobile-2up-slider .card{
    background:#fff; border:1px solid #e6ebf3; border-radius:14px;
    padding:12px; box-shadow:0 8px 20px rgba(16,24,40,.06);
  }
  .mobile-2up-slider .card.more{
    display:flex; align-items:center; justify-content:center; min-height:110px;
  }
  .mobile-2up-slider .thumb img{
    width:100%; height:auto; border-radius:10px; display:block;
  }
  .mobile-2up-slider h3{
    font-size:16px; line-height:1.25; margin:10px 0 6px; color:#0f172a;
  }
  .mobile-2up-slider p{
    font-size:14px; color:#5b647a; margin:0 0 10px;
  }
  .mobile-2up-slider .cs-blog_btn{
    display:inline-block; padding:8px 14px; border-radius:999px; font-size:14px;
    color:#fff; text-decoration:none; font-weight:600;
    background:linear-gradient(45deg, #a57cd5, #ff0080);
    box-shadow:0 8px 18px rgba(0,179,255,.25);
  }

  /* პატარა ინდიკატორები (სტატიკური, 5 გვერდი) */
  .mobile-2up-slider .snap-dots{
    display:flex; justify-content:center; gap:6px; margin-top:14px;
  }
  .mobile-2up-slider .snap-dots span{
    width:8px; height:8px; background:#cbd5e1; border-radius:50%;
  }
}
/* მობილური ბლოგების სლაიდერის სტილი */
.blog-slider {
  background: #0a0f1c65; /* dark background */
  padding: 20px 10px;
}

.blog-slider .cs-blog {
  background: linear-gradient(145deg, #131b2e, #0e1425);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.5);
  transition: transform .3s ease, box-shadow .3s ease;
}

.blog-slider .cs-blog:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(255,0,128,0.35);
}

.blog-slider .cs-blog_thumb img {
  border-radius: 12px;
  margin-bottom: 12px;
}

.blog-slider .cs-blog_title a {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  transition: color .3s;
}

.blog-slider .cs-blog_title a:hover {
  color: #ff4db8; /* pink hover */
}

.blog-slider .cs-blgo_subtitle {
  font-size: 14px;
  color: #cbd5e1; /* soft gray */
  margin: 6px 0 10px;
}

/* ღილაკი */
.blog-slider .cs-blog_btn {
  display: inline-block;
  background: linear-gradient(90deg, #ff0080, #7928ca);
  color: #fff;
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity .3s;
}

.blog-slider .cs-blog_btn:hover {
  opacity: 0.85;
}
@media (max-width: 768px){
  .mobile-2up-slider{
    display:block;
    padding:16px 0 24px;
    background:#0a0f1c2b; /* ← შენი მთლიანი საიტის dark color */
  }

  .mobile-2up-slider .card{
    background:#162032; /* ← მუქი ბარათის ფერი */
    border:1px solid #1f2937; 
    border-radius:14px;
    padding:12px;
    box-shadow:0 4px 12px rgba(0,0,0,0.4);
  }

  .mobile-2up-slider h3{
    color:#fff; /* სათაური თეთრი */
  }
  .mobile-2up-slider p{
    color:#cbd5e1; /* ტექსტი ღია ნაცრისფერი */
  }
}

/*ჩვენს შესახებ გვერდის ცსს*/

/* --- ზოგადი სტილები ელემენტებისთვის --- */

/* მენიუს "Уроки" ლინკში SVG ხატულა */
.bi.bi-play-circle {
  margin-right: 6px;
  vertical-align: middle;
}

/* Telegram-ის ხატულა "Контакты" ღილაკში */
.fa-telegram {
  margin-right: 8px;
}

/* სექცია "ჩვენ შესახებ" (About) */
#about {
  background: url('assets/img/about_bg.png') no-repeat center center/cover;
  padding: 80px 0;
}

/* სექცია "ჩვენ შესახებ" კონტენტის ბლოკი */
.cs-about_content {
  background: rgba(10, 20, 40, 0.7);
  backdrop-filter: blur(10px);
  padding: 40px;
  border-radius: 15px;
  color: #e0e0e0;
}

/* h1 სათაური "ჩვენ შესახებ" სექციაში */
#about .cs-section_subtitle {
  text-align: center;
  color: white;
  margin-bottom: 30px;
}

/* h2 სათაურები "ჩვენ შესახებ" სექციაში */
#about h2 {
  color: #a57cd5;
  font-size: 22px;
}

/* სიის ელემენტები "ჩვენ შესახებ" სექციაში */
#about ul li {
  margin-bottom: 10px;
}

/* ბმულები "ჩვენ შესახებ" და FAQ სექციებში */
#about a, #faq a {
  color: #ffe1f0;
  font-weight: bold;
}

/* სექცია "პარტნიორები" (Partners) */
#partners {
  position: relative;
  padding: 80px 0;
  color: #ffffff;
  overflow: hidden;
}

/* კონტეინერი "პარტნიორების" სექციაში */
#partners .container {
  position: relative;
  z-index: 2;
}

/* პარაგრაფები "პარტნიორების" სექციაში */
#partners p {
  max-width: 700px;
  font-size: 16px;
  line-height: 1.6;
  color: #cccccc;
}

/* მოწოდების (CTA) ბლოკის ღილაკების ხატულები */
.cs-cta_btns svg {
  margin-right: 8px;
}


/* --- ქვედა კოლონტიტული (Footer) --- */

footer .cs-footer-col img {
  max-height: 60px;
}

footer .cs-footer-col p:first-of-type {
  color: #ccc;
  margin-top: 10px;
}

footer .cs-footer-col div:first-of-type {
  margin-top: 15px;
  color: #88418b;
}

/* თეგების კონტეინერი ფუთერში */
footer .cs-footer-col div[style*="flex-wrap"] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* თეგები ფუთერში */
footer .cs-footer-col span {
  background: #a57cd5;
  color: #ccc;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 13px;
}

/* ფუთერის ქვედა ნაწილი */
.cs-footer-bottom {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #333;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cs-footer-bottom .cs-social-icons {
  margin-bottom: 10px;
  display: flex;
  gap: 15px;
}

.cs-footer-bottom p {
  color: #ccc;
}


/* --- მოდალური ფანჯარა (Modal) --- */

.cs-modal [data-modal="connect_wallet"] svg {
  vertical-align: middle;
  margin-right: 8px;
}

.cs-modal ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cs-modal li {
  margin-bottom: 15px;
}

.cs-modal li a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  text-decoration: none;
  background: #9146ff;
  padding: 12px 15px;
  border-radius: 8px;
}

.lang-switcher{display:flex;gap:.5rem;align-items:center;margin-right:.75rem}
  .lang-btn{padding:.35rem .6rem;border:1px solid #3b3b3b;background:transparent;border-radius:.5rem;cursor:pointer;font-weight:600}
  .lang-btn.active{outline:2px solid currentColor}
  



/*აბოუთ*/

/* ========= about-extracted.css ========= */

/* --- Language Switcher (იყო <style> ბლოკში) --- */
.lang-switcher{display:flex;gap:.5rem;align-items:center;margin-right:.75rem}
.lang-btn{padding:.35rem .6rem;border:1px solid #3b3b3b;background:transparent;border-radius:.5rem;cursor:pointer;font-weight:600}
.lang-btn.active{outline:2px solid currentColor}

/* --- About სექცია (იყო inline style-ებით) --- */
#about{
  background: url('assets/img/about_bg.png') no-repeat center center/cover;
  padding: 80px 0;
}
#about .cs-about_content{
  background: rgba(10, 20, 40, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 40px;
  border-radius: 15px;
  color: #e0e0e0;
}
#about .cs-section_subtitle{
  text-align: center;
  color: #ffffff;
  margin-bottom: 30px;
}
#about h2{
  color: #a57cd5;
  font-size: 22px;
}
#about ul li{
  margin-bottom: 10px;
}
#about a{
  color: #fffdfe;
  font-weight: bold;
}

/* --- Partners სექცია (იყო inline + structure-სთვის საჭირო კლასები) --- */
#partners{
  position: relative;
  padding: 80px 0;
  color: #ffffff;
  overflow: hidden;
}
/* ვიდეო ფონისთვის wrapper */
#partners .video-background{
  position:absolute; inset:0; z-index:0;
}
#partners .video-background video{
  width:100%; height:100%; object-fit:cover;
}
#partners .video-background .video-overlay{
  position:absolute; inset:0; background:rgba(0,0,0,.45);
}

/* კონტენტი ზემოდან */
#partners .container{
  position: relative; z-index: 2;
}

/* პარტნიორების badge-ები */
.partner-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#0f1e33; color:#fff; border:1px solid rgba(255,255,255,.15);
  padding:.5rem .9rem; border-radius:999px; text-decoration:none;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
  font-weight:600; font-size:14px;
}
.partner-badge:hover{ transform:translateY(-2px); background:#142640; border-color:rgba(255,255,255,.25); }

/* Partner card */
.partner-card{
  display:flex; gap:24px; align-items:flex-start;
  background:rgba(10,20,40,.7); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:24px; margin-top:32px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.partner-card .partner-logo img{max-height:64px; width:auto; display:block}
.partner-card .partner-info h4{margin:0 0 8px 0}
.partner-card p{
  max-width:700px; font-size:16px; line-height:1.6; color:#cccccc; margin:0;
}
/* თუ ერთ დღეს საიტს დაუბრუნებ ამ ღილაკს */
.partner-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#a57cd5; color:#0a1428; font-weight:700;
  text-decoration:none; padding:.6rem 1rem; border-radius:10px; margin-top:16px;
}

/* --- CTA სექციის შიდატექსტები (ინლაინის ჩანაცვლება) --- */
.cs-cta_title.cs-white_color{ color:#fff; }
.cs-cta_subtitle.cs-white_color{ color:#fff; }

/* --- FAQ სექცია (ინლაინ ბმულებისფერი) --- */
#faq a{
  color:#ff0080; font-weight:bold; text-decoration:none;
}
#faq a:hover{ text-decoration:underline; }

/* --- Footer columns (ინლაინების მოცილება) --- */
.cs-footer-dark .cs-footer-col p.footer-about{
  color:#ccc; margin-top:10px;
}
.cs-footer-dark .footer-contacts{
  margin-top:15px; color:#88418b;
}

/* Footer Tags */
.footer-tags{
  display:flex; flex-wrap:wrap; gap:6px;
}
.footer-tags .tag{
  background:#a57cd5; color:#ccc; padding:5px 10px;
  border-radius:20px; font-size:13px; line-height:1;
}

/* Bottom footer wrapper (ინლაინის ჩანაცვლება) */
.cs-footer-bottom{
  margin-top:20px; padding-top:15px; border-top:1px solid #333;
  display:flex; flex-direction:column; align-items:center;
}
.cs-footer-bottom .cs-social-icons{
  margin-bottom:10px; display:flex; gap:15px;
}
.cs-footer-bottom p{ color:#ccc; }

/* --- Contacts Modal list items (ინლაინების ჩანაცვლება) --- */
.cs-modal[data-modal="connect_wallet"] .cs-list{
  list-style:none; padding:0; margin:0;
}
.cs-modal[data-modal="connect_wallet"] .contact-link{
  display:flex; align-items:center; gap:10px; color:white; text-decoration:none;
  background:#0b2e4c; padding:12px 15px; border-radius:8px;
}

/* --- Utility replacements for removed inline styles --- */
.d-flex{ display:flex; }
.flex-wrap{ flex-wrap:wrap; }
.gap-3{ gap:1rem; }
/* You had text-center classes already; ensure it centers */
.text-center{ text-align:center; }

/* Optional: icon spacing used in some places */
.mr-8{ margin-right:8px; }

/* --- Safety: make videos/buttons not overlap mobile bottom menu --- */
.mobile-bottom-menu{ z-index: 1000; }


/* საბაზისო სტილი */
.lang-btn {
  padding: 6px 14px;
  border: 1px solid #555;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-weight: 600;
  transition: all .2s ease;
}

/* hover */
.lang-btn:hover {
  background: rgba(255,255,255,0.1);
}

/* აქტიური ენა */
.lang-btn.active {
  background: #6c63ff;   /* იასამნისფერი (შეიცვალე თუ გინდა სხვა ფერი) */
  border-color: #6c63ff;
  color: #fff;
  box-shadow: 0 0 8px rgba(108,99,255,0.6);
}



/* ჰედერის შიგნით არსებული ლანგ-სვიჩერი მობილურზე დამალვა */
@media (max-width: 991.98px){
  .cs-toolbox .lang-switcher{ display: none !important; }
}

/* ფლოუტინგ FAB — მხოლოდ მობილურზე ჩანდეს */
.lang-fab{
  position: fixed;
  top: 10px;
  right: 12px;
  z-index: 1100;
  display: none;              /* default: დამალული (დესკტოპი) */
  gap: 8px;
}
@media (max-width: 991.98px){
  .lang-fab{ display: flex; } /* მობილურზე ვაჩვენებთ */
}

/* ღილაკების ვიზუალი */
.lang-fab .lang-btn{
  padding: 6px 12px;
  border: 1px solid #3b3b3b;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.lang-fab .lang-btn:hover{ transform: translateY(-1px); }

/* არჩეული ენა */
.lang-fab .lang-btn.active{
  background: #7A5AF8;        /* ბრენდის იისფერი */
  border-color: #7A5AF8;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(122,90,248,.35);
}

/* თუ გვერდი ღია თემაზე გადავა */
.cs-white .lang-fab .lang-btn{ color:#0b2e4c; border-color:#cfd6dd; background: rgba(0,0,0,0.05); }
.cs-white .lang-fab .lang-btn.active{ color:#fff; }

/* პატარა კორექცია ძალიან ვიწრო ეკრანებზე */
@media (max-width: 360px){
  .lang-fab{ top: 8px; right: 8px; }
  .lang-fab .lang-btn{ padding: 6px 10px; border-radius: 8px; }
}
/* --- Mobile floating RU/EN — prettier & aligned --- */
.lang-fab{
  position: fixed;
  top: 12px;
  right: calc(56px + 12px); /* 56px — ჰამბურგერის ადგილი, +12px ჰაერი */
  z-index: 1200;
  display: none;
  gap: 8px;
  align-items: center;
}

@media (max-width: 991.98px){
  .lang-fab{ display: flex; }
}

/* buttons */
.lang-fab .lang-btn{
  appearance: none;
  -webkit-appearance: none;
  text-decoration: none;              /* EN-ზე ხაზის მოცილება */
  height: 34px;
  line-height: 34px;
  padding: 0 12px;
  border-radius: 9999px;              /* პილ-ფორმა */
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: saturate(140%) blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.lang-fab .lang-btn:hover{ transform: translateY(-1px); }
.lang-fab .lang-btn:focus{ outline: none; box-shadow: 0 0 0 3px rgba(122,90,248,.35); }

/* active state */
.lang-fab .lang-btn.active{
  background: #7A5AF8;
  border-color: #7A5AF8;
  color: #fff;
}

/* ლაით თემაზე ფერები */
.cs-white .lang-fab .lang-btn{
  color:#0b2e4c;
  border-color: rgba(0,0,0,.12);
  background: rgba(0,0,0,.06);
}
.cs-white .lang-fab .lang-btn.active{ color:#fff; }

/* ultra-narrow phones */
@media (max-width: 360px){
  .lang-fab{ top: 10px; right: calc(48px + 8px); }
  .lang-fab .lang-btn{ height: 32px; line-height: 32px; padding: 0 10px; }
}
/* --- Mobile floating RU/EN — prettier & aligned --- */
.lang-fab{
  position: fixed;
  top: 22px;
  right: calc(56px + 12px); /* 56px — ჰამბურგერის ადგილი, +12px ჰაერი */
  z-index: 1200;
  display: none;
  gap: 8px;
  align-items: center;
}

@media (max-width: 991.98px){
  .lang-fab{ display: flex; }
}

/* buttons */
.lang-fab .lang-btn{
  appearance: none;
  -webkit-appearance: none;
  text-decoration: none;              /* EN-ზე ხაზის მოცილება */
  height: 34px;
  line-height: 34px;
  padding: 0 12px;
  border-radius: 9999px;              /* პილ-ფორმა */
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: saturate(140%) blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.lang-fab .lang-btn:hover{ transform: translateY(-1px); }
.lang-fab .lang-btn:focus{ outline: none; box-shadow: 0 0 0 3px rgba(122,90,248,.35); }

/* active state */
.lang-fab .lang-btn.active{
  background: #7A5AF8;
  border-color: #7A5AF8;
  color: #fff;
}

/* ლაით თემაზე ფერები */
.cs-white .lang-fab .lang-btn{
  color:#0b2e4c;
  border-color: rgba(0,0,0,.12);
  background: rgba(0,0,0,.06);
}
.cs-white .lang-fab .lang-btn.active{ color:#fff; }

/* ultra-narrow phones */
@media (max-width: 360px){
  .lang-fab{ top: 10px; right: calc(48px + 8px); }
  .lang-fab .lang-btn{ height: 32px; line-height: 32px; padding: 0 10px; }
}


/* --- About Section --- */
#about {
  background: url('assets/img/about_bg.png') no-repeat center center/cover;
  padding: 80px 0;
}

.cs-about_content {
  background: rgba(10, 20, 40, 0.7);
  backdrop-filter: blur(10px);
  padding: 40px;
  border-radius: 15px;
  color: #e0e0e0;
}

/* Section Subtitle */
.cs-about_content h1 {
  text-align: center;
  color: white;
  margin-bottom: 30px;
}

/* Section Headings */
.cs-about_content h2 {
  color: #a57cd5;
  font-size: 22px;
}

/* List Items */
.cs-about_content ul li {
  margin-bottom: 10px;
}

/* Links inside text */
.cs-about_content a {
  color: #ff0080;
  font-weight: bold;
}

/*404 გვერდი*/


/*შესახებ ცსს*/
#about {
  background: url('../img/about_bg.png') no-repeat center center/cover;
  padding: 80px 0;
}

.cs-about_content {
  background: rgba(10, 20, 40, 0.7);
  backdrop-filter: blur(10px);
  padding: 40px;
  border-radius: 15px;
  color: #e0e0e0;
}

.cs-about_content h1 {
  text-align: center;
  color: #fff;
  margin-bottom: 30px;
}

.about-title {
  color: #a57cd5;
  font-size: 22px;
  margin-bottom: 15px;
}

.about-list li {
  margin-bottom: 10px;
}

.about-link {
  color: #ff0080;
  font-weight: bold;
  text-decoration: none;
}

.about-link:hover {
  text-decoration: underline;
}



/* საერთო ფონი */
body {
  margin: 0;
  font-family: system-ui, Arial, sans-serif;
  background: #0b1220; /* მუქი ფონი */
  color: #e6e6e6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* მთავარი wrapper */
.cs-404 {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 16px;
}

/* ბარათი */
.cs-404 .card {
  background: rgba(10, 20, 40, 0.7);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 40px;
  max-width: 700px;
  width: 100%;
  text-align: center;
  border: 1px solid #1e2746;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

/* სათაურები */
.cs-404 h1 {
  font-size: 90px;
  margin: 0 0 10px;
  color: #ff0080;
  text-shadow: 0 0 12px rgba(255,0,128,0.6);
}
.cs-404 h2 {
  font-size: 26px;
  margin: 0 0 20px;
}

/* ტექსტი */
.cs-404 p {
  margin: 0 0 20px;
  color: rgba(230,230,230,0.9);
}

/* ღილაკები */
.cs-404 .btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}
.cs-404 a,
.cs-404 button {
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid #2a3560;
  background: #111a35;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
.cs-404 a:hover,
.cs-404 button:hover {
  background: #ff0080;
  border-color: #ff0080;
  box-shadow: 0 6px 16px rgba(255,0,128,0.5);
  transform: translateY(-2px);
}

/* ენების გადამრთველი */
.lang-switcher {
  margin-bottom: 8px;
}
.lang-btn {
  padding: 6px 14px;
  border: 1px solid #555;
  background: transparent;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  margin: 0 4px;
  font-weight: 600;
  transition: all 0.3s ease;
}
.lang-btn.active {
  background: #6C63FF; /* იასამნისფერი, როგორც გინდოდა */
  border-color: #6C63FF;
  color: #fff;
  box-shadow: 0 0 12px rgba(108,99,255,0.6);
}

/* მობილური ვერსია */
@media (max-width: 768px) {
  .cs-404 .card {
    padding: 24px;
  }
  .cs-404 h1 {
    font-size: 64px;
  }
  .cs-404 h2 {
    font-size: 20px;
  }
  .cs-404 a, .cs-404 button {
    width: 100%;
    max-width: 260px;
  }
}


/*მოდული კატალოგი*/

/* ============ MOBILE UNIFIED MODALS ============ */
@media (max-width: 991px){

  /* Overlay ცენტრში, მხოლოდ როცა active */
  .cs-modal{
    display:none;               /* ვთიშავთ flow-ს დამალულზე */
    align-items:center;
    justify-content:center;
    padding:16px;
    background: rgba(6,10,20,.55); /* უფრო რბილი overlay */
  }
  .cs-modal.active{
    display:flex;               /* გახსნისას ვაჩვენებთ */
    opacity:1;                  /* შენარჩუნდეს არსებული ლოგიკა */
    visibility:visible;
  }

  /* შიდა “ბარათი” — პატარა, მუქი, რბილი კუთხეებით */
  .cs-modal_container{
    width:92vw;
    max-width:420px;
    background:#121829 !important;   /* ვაბათილებთ .cs-white_bg-ს */
    color:#fff;
    border-radius:14px;
    box-shadow:0 12px 28px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
    padding:16px 16px 18px;
    position:relative;
    transform: translateY(14px) scale(.98);
    opacity:0;
    transition: transform .25s ease, opacity .25s ease;
    margin:auto;                        /* ცენტრში დარჩეს */
  }
  .cs-modal.active .cs-modal_container{
    transform: translateY(0) scale(1);
    opacity:1;
  }

  /* Close button — ერთიანი */
  .cs-close_modal{
    position:absolute; top:10px; right:10px;
    width:32px; height:32px; border:0;
    border-radius:10px; background:#8348ff;
    display:grid; place-items:center; cursor:pointer;
  }

  /* სათაურები */
  .catalog-modal__title,
  .ytdrv-title,
  .cs-wallet_secton h2{
    font-size:18px; font-weight:700; margin:0 36px 8px 4px; color:#fff;
  }
  .text-dim{ color:#b9b9c9; }

  /* გამწკრივებული ელემენტები ერთნაირად */
  .catalog-modal__list,
  .cs-wallet_secton .cs-list,
  .ytdrv-list{
    list-style:none; margin:10px 0 0; padding:0;
  }
  .catalog-modal__item,
  .cs-wallet_secton .cs-list li,
  .ytdrv-list li{
    background:#1a2136;
    border:1px solid rgba(255,255,255,.06);
    border-radius:10px;
    padding:12px 12px;
    margin-bottom:10px;
    display:flex; align-items:center; gap:10px;
    font-size:14px; line-height:1.3; color:#fff;
  }

  /* ღილაკები */
  .btn, .contact-link, .ytdrv-list a{
    display:inline-flex; align-items:center; justify-content:center;
    padding:10px 12px; border-radius:10px;
    background:#8f5bff; color:#fff; text-decoration:none; font-weight:600;
    transition: transform .12s ease;
  }
  .btn:hover, .contact-link:hover, .ytdrv-list a:hover{
    transform: translateY(-1px);
  }

  /* მოდალის body-padding */
  .cs-modal_in{ padding:16px; }
  .cs-wallet_secton{ padding:0 4px 2px; }

  /* ProductModal-იც იმავე видом */
  #productModal.modal{
    display:none;
    align-items:center; justify-content:center;
    padding:16px; background: rgba(6,10,20,.55);
  }
  #productModal.modal.is-open{ display:flex; }
  #productModal .modal-content{
    width:92vw; max-width:420px;
    background:#121829; color:#fff;
    border-radius:14px; padding:16px 16px 18px; position:relative;
    box-shadow:0 12px 28px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
  }
  #modalClose{
    position:absolute; top:10px; right:10px;
    width:32px; height:32px; border:0; border-radius:10px;
    background:#8348ff; color:#fff; font-size:22px; line-height:1; cursor:pointer;
  }
}


/* ====== POLISH / REFINEMENTS (mobile + small desktop) ====== */
:root{
  --cs-bg: #0e1424;
  --cs-card: rgba(20,26,44,.86);
  --cs-stroke: rgba(255,255,255,.08);
  --cs-soft: rgba(255,255,255,.06);
  --cs-text: #eef0ff;
  --cs-dim: #b9bed3;
  --cs-accent: #8f5bff;
  --cs-accent-2: #b88cff;
}

/* საერთო ტექსტის ფერები */
.cs-modal_container, 
#productModal .modal-content{
  color: var(--cs-text);
}

/* უფრო ელეგანტური ბარათი + მინფაი */
.cs-modal_container,
#productModal .modal-content{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)) ,
    var(--cs-card) !important;
  border: 1px solid var(--cs-stroke);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 24px 60px rgba(0,0,0,.45),
    0 1px 0 rgba(255,255,255,.05) inset;
}

/* შიდა მაქსიმალური სიმაღლე + დახვეწილი scroll */
.cs-modal_container,
#productModal .modal-content{
  max-height: min(88vh, 640px);
  overflow: hidden;           /* outer clip */
}
.cs-modal_in{ width:100%; }
.cs-modal_container > *:not(.cs-close_modal){
  overflow: auto;             /* content scrolls */
}
.cs-modal_container *::-webkit-scrollbar{ width:8px; height:8px; }
.cs-modal_container *::-webkit-scrollbar-thumb{
  background: var(--cs-soft); border-radius:10px;
}

/* დახვეწილი close */
.cs-close_modal,
#modalClose{
  background: linear-gradient(180deg, var(--cs-accent), var(--cs-accent-2));
  box-shadow: 0 6px 14px rgba(143,91,255,.35);
  border: 1px solid rgba(255,255,255,.18);
}

/* სათაურები — მცირე ხაზით */
.catalog-modal__title,
.ytdrv-title,
.cs-wallet_secton h2{
  position: relative;
  padding-left: 6px;
}
.catalog-modal__title::before,
.ytdrv-title::before,
.cs-wallet_secton h2::before{
  content:"";
  position:absolute; left:0; bottom:-6px;
  width:48px; height:2px;
  background: linear-gradient(90deg, var(--cs-accent), transparent);
  border-radius:2px;
}
.text-dim{ color: var(--cs-dim); }

/* სიები — უფრო კომპაქტური, ოდნავ ამოწეული */
.catalog-modal__list,
.cs-wallet_secton .cs-list,
.ytdrv-list{ margin-top:14px; }

.catalog-modal__item,
.cs-wallet_secton .cs-list li,
.ytdrv-list li{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--cs-soft);
  box-shadow: 0 4px 10px rgba(0,0,0,.20);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.catalog-modal__item:hover,
.cs-wallet_secton .cs-list li:hover,
.ytdrv-list li:hover{
  transform: translateY(-1px);
  border-color: var(--cs-stroke);
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}

/* ქიმ. ჩამონათვალში — მარცხენა აიქონი და ტექსტი უფრო სწორი ბალანსით */
.catalog-modal__item i{
  width:22px; text-align:center; opacity:.9;
}
.catalog-modal__item .text-dim{ margin-left:auto; }

/* ღილაკები / ბეჯები — პილ-ფორმა და subtle glow */
.btn, .contact-link, .ytdrv-list a{
  min-height:36px;
  padding:10px 14px;
  border-radius:999px;
  background: linear-gradient(180deg, var(--cs-accent), var(--cs-accent-2));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 8px 18px rgba(143,91,255,.35);
}
.btn.btn-accent{ background: linear-gradient(180deg, #7e74ff, #9f8bff); }
.btn:active, .contact-link:active, .ytdrv-list a:active{
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(143,91,255,.25);
}

/* Tabs — პილები */
.ytdrv-tabs{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--cs-soft);
  padding: 6px; border-radius: 12px;
}
.ytdrv-tab{
  border: 0; background: transparent;
  color: var(--cs-dim); font-weight: 700;
  padding: 8px 12px; border-radius: 999px;
}
.ytdrv-tab.is-active{
  background: linear-gradient(180deg, var(--cs-accent), var(--cs-accent-2));
  color:#fff;
  box-shadow: 0 8px 18px rgba(143,91,255,.35);
}

/* კონტაქტების ბლოკები — ბადე, რომ ღილაკი ცენტრში იყოს */
.cs-wallet_secton .cs-list li{
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr;
}
.cs-wallet_secton .contact-link{ width:100%; }

/* კარტალოგის CTA */
.catalog-modal__cta{ margin-top:14px; display:flex; }
.catalog-modal__cta .btn{ width:100%; }

/* პატარა დეტალები */
.cs-modal_container .mr-8{ margin-right:8px; }
.cs-modal_container .mb-10{ margin-bottom:10px; }
.cs-modal_container .mb-15{ margin-bottom:15px; }

/* უსაფრთხო არეები (iOS) */
@supports(padding:max(0px)) {
  .cs-modal{ padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
}

/* ოდნავ დავაპატარავოთ დიდ მობილურებზე კიდე */
@media (min-width: 480px) and (max-width: 991px){
  .cs-modal_container, #productModal .modal-content{ width: 420px; }
}

/* ========= MATCH "CONTACTS" LOOK FOR CATALOG + YT/DRIVE ========= */

/* 1) იგივე ბარათის კონტეინერი */
.catalog-modal,
.ytdrv-modal{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
    rgba(20,26,44,.86) !important;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.05) inset;
  padding: 16px 16px 18px !important;
  color: #eef0ff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* 2) Close — იგივე მრგვალი ბეჯი */
.catalog-modal__close,
.ytdrv-modal__close{
  position:absolute; top:10px; right:10px;
  width:32px; height:32px; border:0;
  border-radius:10px;
  background: linear-gradient(180deg, #8f5bff, #b88cff);
  box-shadow: 0 6px 14px rgba(143,91,255,.35);
  border: 1px solid rgba(255,255,255,.18);
  display:grid; place-items:center; cursor:pointer;
}

/* 3) სათაურის სტრიპი იმავე სტილში */
.catalog-modal__title,
.ytdrv-title{
  font-size:18px; font-weight:700; margin:0 36px 12px 4px; color:#fff;
  position:relative; padding-left:6px;
}
.catalog-modal__title::before,
.ytdrv-title::before{
  content:""; position:absolute; left:0; bottom:-8px;
  width:48px; height:2px; border-radius:2px;
  background: linear-gradient(90deg, #8f5bff, transparent);
}

/* 4) შიდა სქროლის ლიმიტი + რბილი scrollbar */
.catalog-modal,
.ytdrv-modal{ max-height:min(88vh, 640px); overflow:hidden; }
.catalog-modal > *, .ytdrv-modal > *{ overflow:auto; }
.catalog-modal *::-webkit-scrollbar,
.ytdrv-modal *::-webkit-scrollbar{ width:8px; height:8px; }
.catalog-modal *::-webkit-scrollbar-thumb,
.ytdrv-modal *::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.08); border-radius:10px; }

/* 5) ბლოკების (ბარათების) იდენტური ვიზუალი */
.catalog-modal__list,
.ytdrv-list{ list-style:none; margin:14px 0 0; padding:0; }

.catalog-modal__item,
.ytdrv-list li{
  background: #1a2136;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.catalog-modal__item:hover,
.ytdrv-list li:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 12px 24px rgba(0,0,0,.28);
}

/* 6) Catalog — აიქონი + ტექსტები კონტაქტების ბარათის ზომებში */
.catalog-modal__item i{
  width:22px; min-width:22px; text-align:center; opacity:.9; margin-right:8px;
}
.catalog-modal__item{ display:flex; align-items:center; gap:8px; font-size:14px; line-height:1.3; color:#fff; }
.catalog-modal__item .text-dim{ color:#b9bed3; margin-left:auto; }

/* 7) YouTube/Drive — „CONTACTS“ სტილის ღილაკები */
.ytdrv-list li{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ytdrv-list li span{ color:#eef0ff; font-weight:600; }
.ytdrv-list li a{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; min-height:36px;
  border-radius:999px;
  background: linear-gradient(180deg, #8f5bff, #b88cff);
  color:#fff; text-decoration:none; font-weight:700;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 8px 18px rgba(143,91,255,.35);
  white-space:nowrap;
}

/* 8) Tabs — პილ-სტილი ზუსტად იგივე */
.ytdrv-tabs{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  padding: 6px; border-radius: 12px; margin: 8px 0 12px;
  display:flex; gap:8px;
}
.ytdrv-tab{
  flex:1; border:0; background:transparent; color:#b9bed3;
  font-weight:700; padding:8px 12px; border-radius:999px;
}
.ytdrv-tab.is-active{
  background: linear-gradient(180deg, #8f5bff, #b88cff);
  color:#fff; box-shadow:0 8px 18px rgba(143,91,255,.35);
}

/* 9) იგივე ქვედა ტექსტის ტონალობა */
.catalog-modal .text-dim,
.ytdrv-modal .text-dim{ color:#b9bed3; }

/* უსაფრთხო არეები iOS-ზე */
@supports(padding:max(0px)){
  .cs-modal_in{ padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
}

/* === Catalog Modal Refinement with Inner Scroll === */
.catalog-modal {
  display: flex;
  flex-direction: column;
  max-height: 85vh;             /* ეკრანის 85%-ს არ გასცდეს */
}

/* Title stays fixed at top */
.catalog-modal__title {
  flex-shrink: 0;
  margin-bottom: 12px;
}

/* Scroll zone only for list */
.catalog-modal__list {
  flex: 1;                      /* იკავებს შუა სივრცეს */
  overflow-y: auto;
  margin: 0;
  padding-right: 6px;
}

/* CTA zone stays pinned at bottom */
.catalog-modal__cta {
  flex-shrink: 0;
  margin-top: 12px;
}

/* Scrollbar look — minimal & elegant */
.catalog-modal__list::-webkit-scrollbar {
  width: 6px;
}
.catalog-modal__list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8f5bff, #b88cff);
  border-radius: 6px;
}
.catalog-modal__list::-webkit-scrollbar-track {
  background: rgba(255,255,255,.05);
  border-radius: 6px;
}

/* remove the little underline bar under modal titles */
.catalog-modal__title::before,
.ytdrv-title::before,
.cs-wallet_secton h2::before{ content:none !important; }

/* tighter, even spacing */
.catalog-modal__title,
.ytdrv-title,
.cs-wallet_secton h2{
  margin: 0 40px 8px 0 !important;
  padding-left: 0 !important;
  display: flex; align-items: center; gap: 8px;
}

/* Show the mobile blog only on small screens, hide desktop variants */
.blog-mobile{ display:none; } /* default */

@media (max-width: 991px){
  .blog-mobile{ display:block !important; }

  /* optionally hide your other blog blocks on mobile */
  .blog-desktop,
  .mobile-2up-slider,
  .blog-slider{ display:none !important; }
}

/* simple mobile card styles (if you want them) */
.blog-mobile .blog-list{
  display:grid; gap:12px; padding:0 16px 24px;
}
.blog-mobile .blog-card{
  background: rgba(20,26,44,.86);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.blog-mobile .blog-card img{ width:100%; display:block; }
.blog-mobile .blog-body{ padding:12px 14px 14px; }
.blog-mobile .blog-body h3{ margin:0 0 6px; font-size:16px; line-height:1.3; }
.blog-mobile .blog-body p{ margin:0 0 10px; color:#b9bed3; font-size:14px; }
.blog-mobile .cs-blog_btn{
  display:inline-block; padding:8px 12px; border-radius:999px;
  background: linear-gradient(180deg, #8f5bff, #b88cff);
  color:#fff; text-decoration:none; font-weight:700;
}


/*review css*/

.mobile-bottom-menu {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 0;
  z-index: 1000;
  border-top: 1px solid #eee;
}

.mobile-bottom-menu a {
  text-decoration: none;
  color: #666;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mobile-bottom-menu a.active {
  color: #8d4ce4;
}

.mobile-bottom-menu i {
  font-size: 20px;
  margin-bottom: 4px;
}

@media (min-width: 768px) {
  .mobile-bottom-menu {
    display: none;
  }
}

/* Modal responsiveness override */
@media (max-width: 768px) {
  .cs-modal_container {
    width: 90% !important;
    padding: 20px !important;
    font-size: 14px !important;
  }
  .cs-wallet_secton h2 {
    font-size: 18px;
  }
  .cs-wallet_secton ul li a {
    font-size: 14px;
  }
}

/* 404 Page Styles */
.cs-404 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 120px); /* header-ის გასათვალისწინებლად */
  padding: 40px 20px;
  background: #0d0d0d; /* dark bg */
  color: #fff;
  text-align: center;
}

.cs-404 .card {
  background: #1a1a1a;
  padding: 40px 30px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
  max-width: 500px;
  width: 100%;
}

.cs-404 h1 {
  font-size: 96px;
  margin: 0 0 10px;
  font-weight: 700;
  color: #ff4d4d;
}

.cs-404 h2 {
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: 600;
}

.cs-404 p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 30px;
  color: #ccc;
}

.cs-404 .btns {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.cs-404 .btns a,
.cs-404 .btns button {
  background: #ff4d4d;
  color: #fff;
  border: none;
  padding: 10px 22px;
  font-size: 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
  text-decoration: none;
}

.cs-404 .btns a:hover,
.cs-404 .btns button:hover {
  background: #e63939;
}

/* Language Switcher */
.cs-404 .lang-switcher {
  display: flex;
  justify-content: center;
  margin-bottom: 25px;
  gap: 10px;
}

.cs-404 .lang-btn {
  background: transparent;
  border: 1px solid #666;
  color: #ccc;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 13px;
}

.cs-404 .lang-btn.active,
.cs-404 .lang-btn:hover {
  background: #ff4d4d;
  border-color: #ff4d4d;
  color: #fff;
}

/* Responsive */
@media (max-width: 480px) {
  .cs-404 h1 {
    font-size: 72px;
  }
  .cs-404 h2 {
    font-size: 20px;
  }
  .cs-404 p {
    font-size: 14px;
  }
}




/* Telegram CTA Section */
.tg-cta {
  text-align: center;
  padding: 80px 20px;
  background-color: #06182C; /* same dark theme background */
  border-radius: 10px;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.tg-cta h3.cs-section_title {
  position: relative;
  display: inline-block;
  margin-bottom: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  padding-left: 13px;
  text-transform: uppercase;
}

.tg-cta h3.cs-section_title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 5px;
  height: 15px;
  background: linear-gradient(108.18deg, #ea4c89 -2.02%, #4d44c6 100%);
  border-radius: 2px;
}

.tg-cta h2.cs-section_subtitle {
  color: #fff;
  font-weight: 600;
  margin-bottom: 30px;
}

.tg-cta_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(108.18deg, #ea4c89 -2.02%, #4d44c6 100%);
  color: #fff;
  padding: 14px 32px;
  border-radius: 7px;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  text-decoration: none;
}

.tg-cta_btn i {
  font-size: 20px;
}

.tg-cta_btn:hover {
  transform: translate

}
/* Telegram CTA — left aligned */
.tg-cta{ text-align:left; margin-left:0; }
.tg-cta .cs-section_title,
.tg-cta .cs-section_subtitle{ text-align:left; }

.tg-cta_btn{
  margin-left:0;            /* no auto-centering */
  display:inline-flex;      /* stays compact */
}

/* optional: make the button 100% width on mobile */
@media (max-width: 576px){
  .tg-cta_btn{ width:100%; justify-content:center; }
}

/* Telegram CTA Box with Image */
.tg-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60px 50px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.tg-cta_content {
  flex: 1;
  max-width: 55%;
}

.tg-cta_content h3.cs-section_title {
  position: relative;
  display: inline-block;
  margin-bottom: 10px;
  font-weight: 500;
  letter-spacing: 1px;
  padding-left: 13px;
  text-transform: uppercase;
}

.tg-cta_content h3.cs-section_title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 5px;
  height: 15px;
  background: linear-gradient(108.18deg, #ea4c89 -2.02%, #4d44c6 100%);
  border-radius: 2px;
}

.tg-cta_content h2.cs-section_subtitle {
  color: #06182C;
  font-weight: 600;
  margin-bottom: 25px;
}

.tg-cta_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(108.18deg, #ea4c89 -2.02%, #4d44c6 100%);
  color: #fff;
  padding: 14px 32px;
  border-radius: 7px;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  text-decoration: none;
}

.tg-cta_btn i {
  font-size: 20px;
}

.tg-cta_btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(77, 68, 198, 0.3);
}

/* Right image */
.tg-cta_image {
  flex: 0 0 40%;
  text-align: right;
}

.tg-cta_image img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Responsive */
@media (max-width: 991px) {
  .tg-cta {
    flex-direction: column;
    text-align: center;
    padding: 40px 20px;
  }

  .tg-cta_content {
    max-width: 100%;
  }

  .tg-cta_image {
    margin-top: 25px;
    text-align: center;
  }

  .tg-cta_image img {
    max-width: 80%;
  }
}
/* Telegram CTA – make texts white */
.tg-cta .cs-section_title,
.tg-cta .cs-section_subtitle {
  color: #fff !important;
}

/* Kill gradient text ONLY inside the CTA */
.tg-cta .cs-gradient_color{
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
}

/* If გინდა ბოქსი იყოს მუქი */
.tg-cta{
  background-color: #06182C;  /* dark box */
}

/* Fix the truncated hover rule you pasted */
.tg-cta_btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(77, 68, 198, 0.3);
}


/* Desktop view stays centered (optional, if you like it centered) */


/* Mobile: align left */
@media (max-width: 768px) {
  .tg-cta_content {
    text-align: left;
  }

  .tg-cta_content h3,
  .tg-cta_content h2,
  .tg-cta_content p,
  .tg-cta_btn {
    text-align: left;
    margin-left: 0;
  }

  .tg-cta_btn {
    display: inline-flex;
    justify-content: flex-start;
  }
}

/* Telegram CTA button – gradient + hover */
.tg-cta_btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(90deg, #f24b94, #6a6cff);
  color: #fff;
  font-weight: 600;
  transition: background 0.4s ease, transform 0.3s ease;
  text-decoration: none;
}

/* icon color fix */
.tg-cta_btn i {
  color: #fff;
  transition: color 0.4s ease;
}

/* hover effect */
.tg-cta_btn:hover {
  background: linear-gradient(90deg, #6a6cff, #f24b94); /* ფერები გადააბრუნე */
  transform: translateY(-2px); /* მსუბუქი ამოწევა */
  color: #fff;
}

.tg-cta_btn:hover i {
  color: #fff; /* რჩება თეთრი */
}

/* active click */
.tg-cta_btn:active {
  transform: scale(0.97);
}

/* პაგინაცია */

#pageIndicators {
  display: none;
}


/* ბლოგის სლაიდერი*/

/* ეს CSS გამოაჩენს Slick Slider-ის დამალულ ისრებს 
  და მოაწესრიგებს "მიყრილ" პოსტებს
*/

/* ეს კლასი ემატება JavaScript-ით */
/* === BLOG PAGINATION BUTTONS === */
.pagination-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

/* ტექსტის ინდიკატორი (1 / 2) */
.pagination-wrapper #pageInfo {
  font-size: 16px;
  color: #fff;
  opacity: 0.9;
  min-width: 60px;
  text-align: center;
}

/* საერთო ღილაკების სტილი */
.pagination-wrapper .cs-btn_filed {
  border: none;
  border-radius: 10px;
  font-weight: 600;
  padding: 12px 24px;
  color: #fff;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 6px 14px rgba(77, 68, 198, 0.35);
}

/* მარცხენა — Предыдущая */
#prevPage {
    background: linear-gradient(108.18deg, #ea4c89 -2.02%, #4d44c6 100%);

}

/* მარჯვენა — Следующая */
#nextPage {
  background: linear-gradient(108deg, #ea4c89 -2%, #4d44c6 100%);
}

/* Hover მდგომარეობა */
#prevPage:hover,
#nextPage:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(77, 68, 198, 0.45);
}

/* Active (დაჭერისას) */
#prevPage:active,
#nextPage:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(77, 68, 198, 0.3);
}

/* Disabled — როცა ღილაკი გამორთულია */
#prevPage:disabled,
#nextPage:disabled {
  background: linear-gradient(108deg, #1c2038 0%, #222845 100%);
  color: rgba(255, 255, 255, 0.6);
  cursor: not-allowed;
  opacity: 0.9;
  box-shadow: none;
}

/* მობილურზე */
@media (max-width: 576px) {
  .pagination-wrapper .cs-btn_filed {
    padding: 10px 18px;
    font-size: 14px;
  }
}
/* [... აქ არის თქვენი 4000+ ხაზი CSS კოდი, რომელიც არ შემიცვლია ...]
*/

/* [... (აქ მთავრდება თქვენი ძველი style.css ფაილი) ...]
*/

/* ↓↓↓ დამატებულია ეს ბლოკი (ზუსტად თქვენი კოდი) ფაილის ბოლოში ↓↓↓
*/

/* === BLOG PAGINATION BUTTONS === */
.pagination-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

/* ტექსტის ინდიკატორი (1 / 2) */
.pagination-wrapper #pageInfo,
.pagination-wrapper .pager-info {
  font-size: 16px;
  color: #fff;
  opacity: 0.9;
  min-width: 60px;
  text-align: center;
}

/* საერთო ღილაკების სტილი */
.pagination-wrapper .cs-btn_filed {
  border: none;
  border-radius: 10px;
  font-weight: 600;
  padding: 12px 24px;
  color: #fff;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 6px 14px rgba(77, 68, 198, 0.35);
}

/* მარცხენა — Предыдущая */
#nextPage {
  background: linear-gradient(108deg, #ea4c89 -2%, #4d44c6 100%) !important;
}

/* მარჯვენა — Следующая */


/* Hover მდგომარეობა */
#prevPage:not(:disabled):hover,
#nextPage:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(77, 68, 198, 0.45);
}

/* Active (დაჭერისას) */
#prevPage:not(:disabled):active,
#nextPage:not(:disabled):active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(77, 68, 198, 0.3);
}

/* Disabled — როცა ღილაკი გამორთულია */
#prevPage:disabled,
#nextPage:disabled {
  background: linear-gradient(108deg, #1c2038 0%, #222845 100%);
  color: rgba(255, 255, 255, 0.6);
  cursor: not-allowed;
  opacity: 0.9;
  box-shadow: none;
}

/* მობილურზე */
@media (max-width: 576px) {
  .pagination-wrapper .cs-btn_filed {
    padding: 10px 18px;
    font-size: 14px;
  }
}

/* ==== MOBILE BLOG PAGINATION & BUTTONS (Left-aligned & Styled) ==== */
@media (max-width: 991px) { /* <-- აქ იყო შეცდომა, 768-ის მაგივრად 991 */

  /* მობილური ბლოგის სათაურები (მარცხნივ) */
  .blog-mobile-header {
    text-align: left; /* გასწორება მარცხნივ */
    margin-bottom: 16px;
  }
  .blog-mobile-header h3,
  .blog-mobile-header h2 {
    text-align: left; /* იძულებითი გასწორება */
  }

  /* "Читать полностью" ღილაკი (გრადიენტი) */
  #mBlogCard .cs-blog_btn {
    display: inline-flex;
    text-decoration: none;
    background: linear-gradient(90deg, #f24b94, #6a6cff);
    color: #fff;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    margin-bottom: 16px;
    border: none;
    transition: background 0.3s ease;
  }
  #mBlogCard .cs-blog_btn:hover {
    background: linear-gradient(90deg, #6a6cff, #f24b94);
  }

  /* Pagination კონტეინერი (მარცხნივ, ფონის გარეშე) */
  .mobile-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin: 16px 0;
  }

  /* ისრები (← →) - მუქი ღილაკები, როგორც სურათზე */
  .mobile-pagination .mobile-arrow {
    border: none;
    background: #2a2a38; /* მუქი ფერი */
    color: #fff;
    font-size: 14px; /* ტექსტისთვის ზომა */
    font-weight: 600;
    padding: 10px 14px; /* პადინგი ტექსტისთვის */
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .mobile-pagination .mobile-arrow:hover {
    background: #3a3a4c;
  }

  /* გვერდის ნომერი (6 / 14) - მუქი ბლოკი */
  .mobile-pagination #mPageInfo {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: #2a2a38; /* მუქი ფერი */
    padding: 10px 14px; /* პადინგი */
    border-radius: 8px;
    min-width: 0;
    text-align: center;
  }

  /* "ყველა სიახლის" კონტეინერი (მარცხნივ) */
  .ta-center {
    text-align: left;
  }
  
  /* "ყველა სიახლის ნახვა" ღილაკი (იგივე გრადიენტი) */
  .mobile-all.cs-btn_filed {
    display: inline-flex;
    width: auto;
    text-decoration: none;
    background: linear-gradient(90deg, #f24b94, #6a6cff); /* იგივე გრადიენტი */
    border: none;
    color: #fff;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    margin-top: 10px;
    transition: background 0.3s ease;
  }
  .mobile-all.cs-btn_filed:hover {
    background: linear-gradient(90deg, #6a6cff, #f24b94); /* Hover ეფექტი */
  }
  
  /* ძველი, არასაჭირო სტილის გაუქმება */
  .blog-mobile .cs-pager {
    display: none;
  }
}

/* ==== MOBILE BLOG: NO-BG, Header Style, Button Colors ==== */
@media (max-width: 991px) {

  /* 0. ფონის ("ბექის") წაშლა */
  .blog-mobile {
    background: transparent !important;
    padding: 20px 0 !important; /* სექციის შიდა დაშორება */
  }
  .blog-mobile #mBlogCard .blog-card,
  .blog-mobile .blog-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important; /* ბარათის შიდა დაშორების მოცილება */
  }

  /* 1. სათაურის ბლოკის მარცხნივ გასწორება */
  .blog-mobile .blog-mobile-header,
  .blog-mobile .cs-seciton_heading.cs-style1,
  .blog-mobile .blog-mobile-header h3,
  .blog-mobile .blog-mobile-header h2 {
    text-align: left !important;
    margin-bottom: 20px; 
  }
  
  /* 2. "НАШ БЛОГ" (h3) - "WE OFFER:" სტილზე */
  .blog-mobile .blog-mobile-header h3 {
    display: inline-block; 
    font-size: 14px;
    color: #a57cd5;
    text-transform: uppercase;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
    font-weight: 500;
    padding-left: 13px; 
    position: relative;
    text-align: left !important;
  }

  /* 3. ვერტიკალური ხაზი "НАШ БЛОГ"-ის წინ */
  .blog-mobile .blog-mobile-header h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%; 
    transform: translateY(-50%);
    width: 5px;
    height: 15px; 
    background: linear-gradient(108.18deg, #ea4c89 -2.02%, #4d44c6 100%);
    border-radius: 2px;
  }
  
  /* 4. "Последние новости" (h2) */
  .blog-mobile .blog-mobile-header h2 {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    text-align: left !important;
  }

  /* 5. "Читать" ღილაკი (მუქი) */
  #mBlogCard .cs-blog_btn {
    display: inline-flex;
    text-decoration: none;
    background: #2a2a38; 
    color: #fff;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    margin-top: 10px; 
    margin-bottom: 16px;
    border: none;
    transition: background 0.3s ease;
  }
  #mBlogCard .cs-blog_btn:hover {
    background: #3a3a4c; 
  }

  /* 6. Pagination კონტეინერი (მარცხნივ) */
  .mobile-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin: 16px 0;
  }

  /* 7. Pagination-ის ღილაკები (ფერადი) */
  .mobile-pagination .mobile-arrow {
    border: none;
    background: linear-gradient(90deg, #f24b94, #6a6cff); 
    color: #fff;
    font-size: 14px; 
    font-weight: 600;
    padding: 10px 14px; 
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease;
  }
  .mobile-pagination .mobile-arrow:hover {
    background: linear-gradient(90deg, #6a6cff, #f24b94); 
  }

  /* 8. გვერდის ნომერი (ფერადი) */
  .mobile-pagination #mPageInfo {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(90deg, #f24b94, #6a6cff); 
    padding: 10px 14px; 
    border-radius: 8px;
    min-width: 0;
    text-align: center;
  }

  /* 9. "ყველა სიახლის" კონტეინერი (მარცხნივ) */
  .ta-center {
    text-align: left;
  }
  
  /* 10. "ყველა სიახლის" ღილაკი (მუქი) */
  .mobile-all.cs-btn_filed {
    display: inline-flex;
    width: auto;
    text-decoration: none;
    background: #2a2a38; 
    border: none;
    color: #fff;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    margin-top: 10px;
    transition: background 0.3s ease;
  }
  .mobile-all.cs-btn_filed:hover {
    background: #3a3a4c; 
  }
  
  .blog-mobile .cs-pager {
    display: none;
  }
}

.mobile-blog-stack {
  display: grid;
  gap: 24px; /* დაშორება 2 პოსტს შორის */
}

/* ==== მობილურის ბლოგი: ღილაკების ცენტრირება და დაშორება ==== */
@media (max-width: 991px) {

  /* 1. დაშორება ფოტოსა და ტექსტს შორის */
  .blog-mobile-card .blog-mobile-body {
    margin-top: 20px; /* ან რამდენიც გინდა */
  }

  /* 2. პაგინაციის (← 6/14 →) ბლოკის ცენტრირება */
  .mobile-pagination {
    justify-content: center; /* flex-start-ის მაგივრად */
  }

  /* 3. "Смотреть все новости" ღილაკის კონტეინერის ცენტრირება */
  .ta-center {
    text-align: center; /* left-ის მაგივრად */
  }
}
/* 1. დაშორება ფოტოსა და ტექსტს შორის + ცენტრირება */
  .blog-mobile-card .blog-mobile-body {
    margin-top: 20px; 
    text-align: center; /* <-- დაამატე ეს ხაზი */
  }

  .ytdrv-panel {
  max-height: 450px; /* დაარეგულირე შენი UI-ს მიხედვით */
  overflow-y: auto;
  padding-right: 6px; /* რომ scrollbar არ ჭამოს ტექსტი */
}


/* ===== MOBILE FIX – TITLES LEFT + WHITE TEXT ===== */
@media (max-width: 768px) {

  /* ზედა სათაურები: НАШ БЛОГ / Последние новости */
  .blog-mobile h3.cs-section_heading,
  .blog-mobile .blog-title {
    text-align: left !important;
    color: #ffffff !important;
    margin-left: 16px !important;
    margin-right: 0 !important;
  }

  /* ბლოგ–ბარათის სათაურები + ლინკები */
  .blog-mobile .blog-card h3,
  .blog-mobile .blog-card h3 a {
    text-align: left !important;
    color: #ffffff !important;
    text-decoration: none;
  }

  /* ბარათის ტექსტი */
  .blog-mobile .blog-card p {
    text-align: left !important;
    color: #dfe6f0 !important; /* ოდნავ ღია თეთრი ტექსტი */
  }

  /* "Читать полностью →" ღილაკი */
  .blog-mobile .blog-card .cs-blog_btn {
    display: inline-block;
    text-align: left !important;
    color: #ffffff !important;
  }
}
/* ===== BLOG MOBILE — SECTION LABEL STYLE ===== */
.section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #a9a3eb !important; /* თეთრთან ახლო იისფერი (როგორც WE OFFER) */
  margin: 16px !important;
}

/* ვერტიკალური იისფერი ბარი */
.section-label::before {
  content: "";
  width: 4px;
  height: 16px;
  background: linear-gradient(180deg, #ea4c89, #4d44c6);
  border-radius: 2px;
}

/* დიდი სათაური */
.blog-title {
  color: #ffffff !important;
  font-size: 22px;
  font-weight: 700;
  padding: 0 16px 8px;
  margin-top: -6px;
  text-align: left;
}