/*-----------------------------------------------------------------------------------

    Template Name: pixora - Creative agency & portfolio HTML Template
    Author: codemaxtheme
    Support: abidtpi141@gmail.com
    Description: pixora - Creative agency & portfolio HTML Template
    Version: 1.0

-----------------------------------------------------------------------------------

/************ TABLE OF CONTENTS ***************

	-----------------
    01. THEME CSS
	-----------------
		1.1 Common Classes
		1.2 Default Spacing
		1.3 Theme

	-----------------
    02. COMPONENTS css
	-----------------
		2.1 animetion
		2.2 background
		2.3 backtotop
		2.4 buttons
		2.5 Carousel
		2.6 cursor
		2.7 instagram
		2.8 nice select
		2.9 offcanvas
		2.10 preloader
		2.11 search
		2.12 Section Title
		2.13 theme setting

	-----------------
    03. HEADER CSS
	-----------------
		3.1 Header Style 1

    ---------------------------------
	04. MENU CSS
	---------------------------------
		4.1 mobilemenu css
		4.2 menu css
		4.3 Mobile css

	---------------------------------
	05. FOOTER CSS
	---------------------------------
		5.1 Footer Style 1

	---------------------------------
	06. PAGES CSS
	---------------------------------
		6.1 about css
		6.2 brands css
		6.3 chose css
		6.4 contact css
		6.5 counter css
		6.6 error css
		6.7 faq css
		6.8 gallery css
		6.9 hero
		6.10 portfolio css
		6.11 pricing css
		6.12 project css
		6.13 service css
		6.14 skill css
		6.15 hero-stars
		6.16 team css
		6.17 testimonial css
		6.18 text css
		6.19 video css
**********************************************/
/*----------------------------------------*/
/*  1.1 Theme Default
/*----------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Manrope:wght@200..800&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&family=Marcellus&family=Antonio:wght@100..700&family=Pinyon+Script&display=swap");
.cm-pulse-border::after, .cm-pulse-border::before, .cmt-offcanvas__tel a, .cmt-offcanvas__mail a, .cmt-offcanvas__text p, .cm-offcanvas-right, .cm-offcanvas-close, .cm-offcanvas-close-btn .text, .cm-offcanvas-close-btn .text span, .cm-offcanvas-menu {
  -webkit-transition: all 0.3s 0s ease-out;
  -moz-transition: all 0.3s 0s ease-out;
  -ms-transition: all 0.3s 0s ease-out;
  -o-transition: all 0.3s 0s ease-out;
  transition: all 0.3s 0s ease-out;
}

.back-to-top-wrapper, a,
button,
p,
input,
select,
textarea,
li,
.transition-3 {
  -webkit-transition: all 0.3s 0s ease-out;
  -moz-transition: all 0.3s 0s ease-out;
  -ms-transition: all 0.3s 0s ease-out;
  -o-transition: all 0.3s 0s ease-out;
  transition: all 0.3s 0s ease-out;
}

.back-to-top-btn {
  -webkit-transition: transform 0.3s 0s ease-out;
  -moz-transition: transform 0.3s 0s ease-out;
  -ms-transition: transform 0.3s 0s ease-out;
  -o-transition: transform 0.3s 0s ease-out;
  transition: transform 0.3s 0s ease-out;
}

.cm-all-font-roboto *:not(i) {
  font-family: var(--cm-ff-roboto);
}

/* transform */
@font-face {
  font-family: "dirtyline";
  src: url("../fonts/dirtyline-36daysoftype-2022.otf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.cm-font-antonio {
  font-family: var(--cm-ff-antonio);
}

:root {
  /**
  @font family declaration
  */
  --cm-ff-body: 'Roboto Condensed', sans-serif;
  --cm-ff-heading: 'Titillium Web', sans-serif;
  --cm-ff-common: 'Titillium Web', sans-serif;
  --cm-ff-p: 'Roboto Condensed', sans-serif;
  --cm-ff-manrope: 'Manrope', sans-serif;
  --cm-ff-kanit: 'Kanit', sans-serif;
  --cm-ff-antonio: 'Antonio', sans-serif;
  --cm-ff-marcellus: 'Marcellus', serif;
  --cm-ff-dirtyline: 'dirtyline', sans-serif;
  --cm-ff-pinyon: 'Pinyon Script', cursive;
  --cm-ff-fontawesome: "Font Awesome 6 Pro";
  /**
  @color declaration
  */
  --cm-common-black: #1e1e1e;
  --cm-common-black-2: #121212;
  --cm-common-black-3: #3f4144;
  --cm-common-white: #ffffff;
  --cm-common-apple : #8751ff;
  --cm-grey-1: #525252;
  --cm-grey-2: #d2cfcf;
  --cm-grey-3: #999999;
  --cm-grey-4: #555;
  --cm-grey-5: #F5F5F5;
  --cm-text-body: #32343b;
  --cm-text-2: #3c3e46;
  --cm-theme-primary: #ffc07c;
  --cm-theme-secondary: #C8F31D;
}

@media (min-width: 1400px) {
  .container-1830 {
    max-width: 1830px;
  }
  .container-1750 {
    max-width: 1750px;
  }
  .container-1530 {
    max-width: 1530px;
  }
  .custom-column-1 {
    width: 63%;
  }
  .custom-column-2 {
    width: 37%;
  }
  .custom-column-3 {
    width: 40.4%;
  }
  .custom-column-4 {
    width: 59.6%;
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*---------------------------------
	typography css start 
---------------------------------*/
body {
  font-family: var(--cm-ff-body);
  font-size: 16px;
  font-weight: normal;
  color: var(--cm-common-white);
  background: var(--cm-common-white);
  line-height: 24px;
}

.cm-light-theme {
  color: #3f4144;
  background: #eef3f3;
}

a {
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--cm-ff-heading);
  color: var(--cm-common-white);
  margin-top: 0px;
  font-weight: 700;
  line-height: 1.2;
}

h1 {
  font-size: 80px;
}

h2 {
  font-size: 60px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 16px;
}

ul {
  margin: 0px;
  padding: 0px;
}

p {
  margin-bottom: 15px;
  font-weight: 400;
  line-height: 1.56;
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

a:focus,
.button:focus {
  text-decoration: none;
  outline: none;
}

a:focus {
  text-decoration: none;
  color: inherit;
}

a:hover {
  color: inherit;
  text-decoration: none;
}

a,
button {
  color: inherit;
  outline: none;
  border: none;
  background: transparent;
}

button:hover {
  cursor: pointer;
}

button:focus {
  outline: 0;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(159, 43, 43, 0.01);
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 40px;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=password],
input[type=url],
textarea {
  outline: none;
  background-color: #fff;
  height: 56px;
  width: 100%;
  line-height: 56px;
  font-size: 14px;
  color: var(--cm-common-black);
  padding-left: 26px;
  padding-right: 26px;
  border: 1px solid #E0E2E3;
}
input[type=text]::-webkit-input-placeholder,
input[type=email]::-webkit-input-placeholder,
input[type=tel]::-webkit-input-placeholder,
input[type=number]::-webkit-input-placeholder,
input[type=password]::-webkit-input-placeholder,
input[type=url]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #95999D;
}
input[type=text]::-moz-placeholder,
input[type=email]::-moz-placeholder,
input[type=tel]::-moz-placeholder,
input[type=number]::-moz-placeholder,
input[type=password]::-moz-placeholder,
input[type=url]::-moz-placeholder,
textarea::-moz-placeholder { /* Firefox 19+ */
  color: #95999D;
}
input[type=text]:-moz-placeholder,
input[type=email]:-moz-placeholder,
input[type=tel]:-moz-placeholder,
input[type=number]:-moz-placeholder,
input[type=password]:-moz-placeholder,
input[type=url]:-moz-placeholder,
textarea:-moz-placeholder { /* Firefox 4-18 */
  color: #95999D;
}
input[type=text]:-ms-input-placeholder,
input[type=email]:-ms-input-placeholder,
input[type=tel]:-ms-input-placeholder,
input[type=number]:-ms-input-placeholder,
input[type=password]:-ms-input-placeholder,
input[type=url]:-ms-input-placeholder,
textarea:-ms-input-placeholder { /* IE 10+  Edge*/
  color: #95999D;
}
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=tel]::placeholder,
input[type=number]::placeholder,
input[type=password]::placeholder,
input[type=url]::placeholder,
textarea::placeholder { /* MODERN BROWSER */
  color: #95999D;
}

textarea {
  line-height: 1.4;
  padding-top: 18px;
  padding-bottom: 17px;
}

input[type=color] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  height: 100%;
  width: 100%;
  padding: 0;
  border-radius: 50%;
}

*::-moz-selection {
  background: var(--cm-common-black);
  color: var(--cm-common-white);
  text-shadow: none;
}

::-moz-selection {
  background: var(--cm-common-black);
  color: var(--cm-common-white);
  text-shadow: none;
}

::selection {
  background: var(--cm-common-black);
  color: var(--cm-common-white);
  text-shadow: none;
}

*::-moz-placeholder {
  color: var(--cm-grey-1);
  font-size: 14px;
  opacity: 1;
}

*::placeholder {
  color: var(--cm-grey-1);
  font-size: 14px;
  opacity: 1;
}

.cm-bg-cover {
  background-size: cover;
}

/*---------------------------------
    1.1 Common Classes
---------------------------------*/
.w-img {
  width: 100%;
}

.m-img img {
  max-width: 100%;
}

.lineheight-1 {
  line-height: 1;
}

.fix {
  overflow: hidden;
}

.clear {
  clear: both;
}

.f-right {
  float: right;
}

.z-index-1 {
  z-index: 1;
}

.z-index-11 {
  z-index: 11;
}

.text-right {
  text-align: right;
}

.overflow-y-visible {
  overflow-x: hidden;
  overflow-y: visible;
}

.p-relative {
  position: relative;
}

.p-absolute {
  position: absolute;
}

.mainus {
  margin-top: -2px;
}

.para {
  color: var(--cm-grey-2);
  font-size: 18px;
  letter-spacing: 0.5px;
  font-weight: 300;
}

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

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

.demo {
  -webkit-transition: color 0.3s 0s linear;
  -moz-transition: color 0.3s 0s linear;
  -ms-transition: color 0.3s 0s linear;
  -o-transition: color 0.3s 0s linear;
  transition: color 0.3s 0s linear;
  -webkit-transition: color 0.3s linear, transform 0.2s ease;
  -moz-transition: color 0.3s linear, transform 0.2s ease;
  -ms-transition: color 0.3s linear, transform 0.2s ease;
  -o-transition: color 0.3s linear, transform 0.2s ease;
  transition: color 0.3s linear, transform 0.2s ease;
}
[dir=rtl] .demo {
  margin-left: 0;
  margin-right: 15px;
}
div.demo img {
  margin-left: 10px;
}

[cm-theme=cm-theme-dark] .demo {
  color: yellow;
}

/* dropcap */
.cm-dropcap::first-letter {
  font-size: 90px;
  font-weight: 500;
  float: left;
  text-align: center;
  color: var(--cm-common-black);
  margin-right: 5px;
  line-height: inherit;
  text-transform: capitalize;
}

.class {
  stroke-dasharray: 189px, 191px;
  stroke-dashoffset: 0px;
}

/* gutter for x axis */
.cm-gx-10 {
  --bs-gutter-x: 10px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-gx-10 {
    --bs-gutter-x: 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-gx-10 {
    --bs-gutter-x: 10px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-gx-10 {
    --bs-gutter-x: 10px;
  }
}
@media (max-width: 575px) {
  .cm-gx-10 {
    --bs-gutter-x: 10px;
  }
}
.cm-gx-10 [class*=col-] {
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

/* gutter for x axis */
.cm-gx-20 {
  --bs-gutter-x: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-gx-20 {
    --bs-gutter-x: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-gx-20 {
    --bs-gutter-x: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-gx-20 {
    --bs-gutter-x: 15px;
  }
}
@media (max-width: 575px) {
  .cm-gx-20 {
    --bs-gutter-x: 10px;
  }
}
.cm-gx-20 [class*=col-] {
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

/* gutter for x axis */
.cm-gx-30 {
  --bs-gutter-x: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-gx-30 {
    --bs-gutter-x: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-gx-30 {
    --bs-gutter-x: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-gx-30 {
    --bs-gutter-x: 15px;
  }
}
@media (max-width: 575px) {
  .cm-gx-30 {
    --bs-gutter-x: 10px;
  }
}
.cm-gx-30 [class*=col-] {
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

/* gutter for x axis */
.cm-gx-40 {
  --bs-gutter-x: 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-gx-40 {
    --bs-gutter-x: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-gx-40 {
    --bs-gutter-x: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-gx-40 {
    --bs-gutter-x: 30px;
  }
}
@media (max-width: 575px) {
  .cm-gx-40 {
    --bs-gutter-x: 15px;
  }
}
.cm-gx-40 [class*=col-] {
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

/* gutter for x axis */
.cm-gx-50 {
  --bs-gutter-x: 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-gx-50 {
    --bs-gutter-x: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-gx-50 {
    --bs-gutter-x: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-gx-50 {
    --bs-gutter-x: 20px;
  }
}
@media (max-width: 575px) {
  .cm-gx-50 {
    --bs-gutter-x: 15px;
  }
}
.cm-gx-50 [class*=col-] {
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

/* gutter for x axis */
.cm-gx-100 {
  --bs-gutter-x: 100px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-gx-100 {
    --bs-gutter-x: 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-gx-100 {
    --bs-gutter-x: 60px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-gx-100 {
    --bs-gutter-x: 40px;
  }
}
@media (max-width: 575px) {
  .cm-gx-100 {
    --bs-gutter-x: 15px;
  }
}
.cm-gx-100 [class*=col-] {
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

/*---------------------------------
    1.2 Default Spacing
---------------------------------*/
.cm-section-spacing {
  padding: 0 85px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-section-spacing {
    padding: 0;
  }
}

.cm-section-spacing-2 {
  padding: 0 100px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-section-spacing-2 {
    padding: 0 15px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pt-170 {
    padding-top: 115px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pt-165 {
    padding-top: 110px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pt-160 {
    padding-top: 100px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pt-155 {
    padding-top: 100px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pt-150 {
    padding-top: 100px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pt-145 {
    padding-top: 100px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pt-140 {
    padding-top: 100px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pt-135 {
    padding-top: 95px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pt-130 {
    padding-top: 90px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pt-125 {
    padding-top: 85px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pt-120 {
    padding-top: 80px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pt-115 {
    padding-top: 75px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pt-110 {
    padding-top: 70px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pt-105 {
    padding-top: 65px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pt-100 {
    padding-top: 60px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pb-170 {
    padding-bottom: 100px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pb-165 {
    padding-bottom: 100px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pb-160 {
    padding-bottom: 100px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pb-155 {
    padding-bottom: 100px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pb-150 {
    padding-bottom: 100px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pb-145 {
    padding-bottom: 100px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pb-140 {
    padding-bottom: 100px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pb-135 {
    padding-bottom: 95px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pb-130 {
    padding-bottom: 90px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pb-125 {
    padding-bottom: 85px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pb-120 {
    padding-bottom: 80px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pb-115 {
    padding-bottom: 75px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pb-110 {
    padding-bottom: 70px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pb-105 {
    padding-bottom: 65px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pb-100 {
    padding-bottom: 60px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pb-95 {
    padding-bottom: 55px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pb-90 {
    padding-bottom: 50px;
  }
}

/*----------------------------------------*/
/*  2.3 backtotop
/*----------------------------------------*/
.back-to-top-wrapper {
  position: fixed;
  right: 20px;
  bottom: 0;
  height: 44px;
  width: 44px;
  cursor: pointer;
  display: block;
  border-radius: 50%;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
}
@media (max-width: 575px) {
  .back-to-top-wrapper {
    right: 20px;
    bottom: 20px;
  }
}
.back-to-top-wrapper.back-to-top-btn-show {
  visibility: visible;
  opacity: 1;
  bottom: 50px;
}

.back-to-top-btn {
  display: inline-block;
  width: 44px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  background: var(--cm-common-black-2);
  box-shadow: 0px 8px 16px rgba(3, 4, 28, 0.3);
  color: var(--cm-common-white);
  border-radius: 50%;
}
.back-to-top-btn svg {
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);
}
.back-to-top-btn:hover {
  -webkit-transform: translateY(-4px);
  -moz-transform: translateY(-4px);
  -ms-transform: translateY(-4px);
  -o-transform: translateY(-4px);
  transform: translateY(-4px);
}

/*----------------------------------------*/
/*  2.13 theme setting
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.4 buttons 
/*----------------------------------------*/
.cm-btn {
  font-family: var(--cm-ff-common);
  color: var(--cm-common-black);
  position: relative;
  display: inline-block !important;
  font-weight: 700;
  font-size: 16px;
  padding: 18px 44px;
  background-color: var(--cm-theme-primary);
  transition: all 0.5s ease-in-out;
  position: relative;
  z-index: 1;
}
.cm-btn::after {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 0%;
  height: 100%;
  content: "";
  background: var(--cm-common-black);
  transition: all 500ms ease-in-out;
  z-index: -1;
}
.cm-btn:hover {
  color: var(--tp-common-black);
}
.cm-btn:hover::after {
  left: 0%;
  right: auto;
  width: 100%;
}
.cm-btn-black {
  background: var(--cm-common-black);
  color: var(--tp-common-white);
}
.cm-btn-black::after {
  background-color: var(--cm-theme-primary);
}
.cm-btn-black:hover {
  color: var(--tp-common-white);
}
.cm-btn-black-2 {
  background: var(--cm-common-black-2);
  font-family: var(--cm-ff-kanit);
  font-size: 16px;
  font-weight: 500;
  display: inline-block;
  text-transform: uppercase;
  line-height: 1;
  padding: 19px 30px 19px 30px;
  border-radius: 30px;
  border: 1px solid var(--cm-common-black-2);
  -webkit-transition: all 0.3s 0s ease-out;
  -moz-transition: all 0.3s 0s ease-out;
  -ms-transition: all 0.3s 0s ease-out;
  -o-transition: all 0.3s 0s ease-out;
  transition: all 0.3s 0s ease-out;
}
.cm-btn-black-2:hover {
  background: transparent;
  color: var(--cm-common-black-2);
}
.cm-btn-trans-border {
  border: 1px solid var(--cm-common-white);
  border-radius: 128px;
  padding: 12px 32px 10px;
  text-transform: uppercase;
  display: inline-block;
  font-weight: 500;
  letter-spacing: 1.2px;
  -webkit-transition: all 0.3s 0s ease-out;
  -moz-transition: all 0.3s 0s ease-out;
  -ms-transition: all 0.3s 0s ease-out;
  -o-transition: all 0.3s 0s ease-out;
  transition: all 0.3s 0s ease-out;
}
.cm-btn-trans-border:hover {
  color: var(--cm-common-black-2);
  background: var(--cm-common-white);
}
.cm-btn-trans-border-black {
  border-color: var(--cm-common-black-2);
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-kanit);
  letter-spacing: 0.1px;
}
.cm-btn-trans-border-black:hover {
  background: var(--cm-common-black-2);
  color: var(--cm-common-white);
}
.cm-btn-big {
  width: 170px;
  height: 170px;
  background: var(--cm-common-black-2);
  display: inline-block;
  font-size: 70px;
  text-align: center;
  color: var(--cm-theme-secondary);
  line-height: 150px;
  border-radius: 50%;
  border: 15px solid var(--cm-common-black);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-btn-big {
    font-size: 35px;
    width: 140px;
    height: 140px;
    line-height: 130px;
    border: 5px solid var(--cm-common-black);
  }
}
.cm-btn-icon {
  height: 64px;
  line-height: 64px;
  border-radius: 100px;
  padding: 0 37px;
  padding-right: 27px;
  font-weight: 400;
  font-size: 21px;
  text-align: center;
  text-transform: capitalize;
  display: inline-block;
  overflow: hidden;
  letter-spacing: -0.01em;
  color: var(--cm-common-black-2);
  background-color: transparent;
  font-family: var(--cm-ff-kanit);
  transition: 0.4s;
  position: relative;
  z-index: 1;
}
.cm-btn-icon span.text {
  position: relative;
  background-image: linear-gradient(#121212, #121212), linear-gradient(#121212, #121212);
  background-size: 0 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.cm-btn-icon span.text::after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--cm-common-white);
  z-index: -1;
  -webkit-transition: all 0.3s 0s ease-out;
  -moz-transition: all 0.3s 0s ease-out;
  -ms-transition: all 0.3s 0s ease-out;
  -o-transition: all 0.3s 0s ease-out;
  transition: all 0.3s 0s ease-out;
}
.cm-btn-icon span.icon {
  margin-left: 50px;
}
.cm-btn-icon::after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--cm-theme-secondary);
  z-index: -1;
  -webkit-transition: all 0.3s 0s ease-out;
  -moz-transition: all 0.3s 0s ease-out;
  -ms-transition: all 0.3s 0s ease-out;
  -o-transition: all 0.3s 0s ease-out;
  transition: all 0.3s 0s ease-out;
  border-radius: 100px;
}
.cm-btn-icon:hover {
  background-color: transparent;
  color: var(--cm-common-black-2);
}
.cm-btn-icon:hover span.text {
  background-image: linear-gradient(#121212, #121212), linear-gradient(#121212, #121212);
  background-size: 0 1px, 100% 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
}
.cm-btn-icon:hover::after {
  width: 64px;
}
.cm-btn-round-squre {
  border: 1px solid var(--cm-common-apple);
  border-radius: 6px;
  padding: 12px 32px 10px;
  text-transform: uppercase;
  display: inline-block;
  font-weight: 600;
  font-size: 15px;
  background: var(--cm-common-apple);
  color: var(--cm-common-white);
  font-family: var(--cm-ff-manrope);
  letter-spacing: 1.2px;
  -webkit-transition: all 0.3s 0s ease-out;
  -moz-transition: all 0.3s 0s ease-out;
  -ms-transition: all 0.3s 0s ease-out;
  -o-transition: all 0.3s 0s ease-out;
  transition: all 0.3s 0s ease-out;
}
.cm-btn-round-squre:hover {
  background: var(--cm-common-black-2);
  color: var(--cm-common-white);
  border-color: var(--cm-common-black-2);
}
.cm-btn-round-squre.cm-black:hover {
  background: var(--cm-common-black-2);
  border-color: var(--cm-common-black-2);
  color: var(--cm-common-white);
}
.cm-btn-switch-text > span {
  display: inline-flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  font-family: var(--cm-ff-kanit);
  font-weight: 500;
}
.cm-btn-switch-text .btn-double-text {
  transition: opacity 0.65s, transform 0.85s;
  transition-timing-function: cubic-bezier(0.15, 0.85, 0.31, 1);
  position: relative;
}
.cm-btn-switch-text .btn-double-text::before {
  content: attr(data-text);
  display: inline-block;
  position: absolute;
  white-space: nowrap;
  top: 50%;
  opacity: 0;
  left: 50%;
  transform: translate(-50%, 100%);
  transition: opacity 0.5s, transform 0.8s;
  transition-timing-function: cubic-bezier(0.15, 0.85, 0.31, 1);
}
.cm-btn-switch-text:hover .btn-double-text {
  transform: translateY(-200%);
}
.cm-btn-switch-text:hover .btn-double-text::before {
  transform: translate(-50%, 150%);
  opacity: 1;
}
.cm-btn-brand {
  padding: 10px 30px;
  background: var(--cm-common-black-3);
  border-radius: 50px;
  color: var(--cm-common-white);
}
.cm-btn-brand-large {
  padding: 20px 60px;
  background: none;
  border: 3px solid var(--cm-common-black-3);
  color: var(--cm-common-black-3);
  font-size: 24px;
}
.cm-btn-brand-black {
  background: var(--cm-common-black-3);
  color: var(--cm-common-white);
}

/*----------------------------------------*/
/*  2.1 animetion
/*----------------------------------------*/
@keyframes bar-anim {
  0%, 100% {
    -webkit-clip-path: inset(-2px 0);
    clip-path: inset(-2px 0);
  }
  42% {
    -webkit-clip-path: inset(-2px 0 -2px 100%);
    clip-path: inset(-2px 0 -2px 100%);
  }
  43% {
    -webkit-clip-path: inset(-2px 100% -2px 0);
    clip-path: inset(-2px 100% -2px 0);
  }
}
@-webkit-keyframes cmrotate {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes cmrotate {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-ms-keyframes cmrotate {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes cmrotate {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.cm-rotate {
  -moz-animation: cmrotate 10s cubic-bezier(1, 0.99, 0.03, 0.01) infinite;
  -webkit-animation: cmrotate 10s cubic-bezier(1, 0.99, 0.03, 0.01) infinite;
  animation: cmrotate 10s cubic-bezier(1, 0.99, 0.03, 0.01) infinite;
}

@-webkit-keyframes sliderTitle3 {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}
@-moz-keyframes sliderTitle3 {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}
@-ms-keyframes sliderTitle3 {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}
@keyframes sliderTitle3 {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}
@-webkit-keyframes rotate-infinite {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@-moz-keyframes rotate-infinite {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@-ms-keyframes rotate-infinite {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes rotate-infinite {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@-webkit-keyframes borderanimate2 {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  60% {
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.9);
    opacity: 0;
  }
}
@-moz-keyframes borderanimate2 {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  60% {
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.9);
    opacity: 0;
  }
}
@-ms-keyframes borderanimate2 {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  60% {
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.9);
    opacity: 0;
  }
}
@keyframes borderanimate2 {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  60% {
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.9);
    opacity: 0;
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    -moz-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
@keyframes headerSlideDown {
  0% {
    margin-top: -150px;
  }
  100% {
    margin-top: 0;
  }
}
@-webkit-keyframes loading {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes loading {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/*----------------------------------------*/
/* 2.10 preloader
/*----------------------------------------*/


.loader-wrap {
  position: fixed;
  z-index: 10;
  height: 100vh;
  width: 100%;
  left: 0;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: transparent;
  z-index: 99999999999999;
}

.loader-wrap svg {
  position: absolute;
  top: 0;
  width: 100%;
  height: 110vh;
  fill: #121212;
}

.loader-wrap .loader-wrap-heading .load-text {
  font-size: 80px;
  font-weight: 500;
  letter-spacing: 15px;
  text-transform: uppercase;
  z-index: 20;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .loader-wrap .loader-wrap-heading .load-text {
    font-size: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .loader-wrap .loader-wrap-heading .load-text {
    font-size: 20px;
  }
}

.load-text span {
  -webkit-animation: loading 1s infinite alternate;
  animation: loading 1s infinite alternate;
}

.load-text span:nth-child(1) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.load-text span:nth-child(2) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.load-text span:nth-child(3) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.load-text span:nth-child(4) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.load-text span:nth-child(5) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.load-text span:nth-child(6) {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.load-text span:nth-child(7) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

@-webkit-keyframes loading {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes loading {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.containers {
  position: inherit;
}

/*----------------------------------------*/
/*  2.2 background
/*----------------------------------------*/
.section-bg {
  background-color: var(--cm-text-body);
}

.section-bg-2 {
  background-color: var(--cm-text-2);
}

.cm-grey-bg {
  background-color: #F5F5F5;
}

.cm-white-bg {
  background-color: var(--cm-common-white);
}

.cm-secondary-bg {
  background-color: var(--cm-theme-secondary);
}

.cm-brand-black-bg {
  background: var(--cm-common-black);
}

/*----------------------------------------*/
/*  2.5 Carousel
/*----------------------------------------*/
/* cm range slider css */
.cm-range-slider .inside-slider {
  text-align: center;
}

/*----------------------------------------*/
/*  2.8 nice select
/*----------------------------------------*/
.nice-select {
  -webkit-tap-highlight-color: transparent;
  background-color: #fff;
  border: solid 1px #e6e6e6;
  box-sizing: border-box;
  clear: both;
  cursor: pointer;
  display: block;
  float: left;
  font-family: inherit;
  font-size: 14px;
  font-weight: normal;
  height: 42px;
  line-height: 58px;
  outline: none;
  padding-left: 30px;
  padding-right: 30px;
  position: relative;
  text-align: left !important;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap;
  width: auto;
  width: 100%;
  height: 60px;
  color: var(--cm-heading-4);
}
.nice-select:hover {
  border-color: #dbdbdb;
}
.nice-select .current {
  font-size: 16px;
}
.nice-select:active, .nice-select.open, .nice-select:focus {
  border-color: var(--cm-theme-09);
}
.nice-select::after {
  position: absolute;
  content: "\f107";
  top: 50%;
  right: 20px;
  font-size: 18px;
  font-family: var(--cm-ff-fontawesome);
  color: var(--cm-heading-4);
  font-weight: 500;
  pointer-events: none;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  margin-top: 0;
  transform-origin: center;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.nice-select.open::after {
  -webkit-transform: translateY(-50%) rotate(-180deg);
  -moz-transform: translateY(-50%) rotate(-180deg);
  -ms-transform: translateY(-50%) rotate(-180deg);
  -o-transform: translateY(-50%) rotate(-180deg);
  transform: translateY(-50%) rotate(-180deg);
}
.nice-select.open .list {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: scale(1) translateY(0);
  -ms-transform: scale(1) translateY(0);
  transform: scale(1) translateY(0);
}
.nice-select.disabled {
  border-color: #ededed;
  color: #999;
  pointer-events: none;
}
.nice-select.disabled::after {
  border-color: #cccccc;
}
.nice-select.wide {
  width: 100%;
}
.nice-select.wide .list {
  left: 0 !important;
  right: 0 !important;
}
.nice-select.right {
  float: right;
}
.nice-select.right .list {
  left: auto;
  right: 0;
}
.nice-select.small {
  font-size: 12px;
  height: 36px;
  line-height: 34px;
}
.nice-select.small::after {
  height: 4px;
  width: 4px;
}
.nice-select.small .option {
  line-height: 34px;
  min-height: 34px;
}
.nice-select .list {
  background-color: #fff;
  box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
  box-sizing: border-box;
  margin-top: 4px;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 0;
  -webkit-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform: scale(0.75) translateY(-21px);
  -ms-transform: scale(0.75) translateY(-21px);
  transform: scale(0.75) translateY(-21px);
  -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
  transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
  z-index: 9;
  width: 100%;
}
.nice-select .option {
  cursor: pointer;
  font-weight: 400;
  line-height: 40px;
  list-style: none;
  min-height: 40px;
  outline: none;
  padding-left: 18px;
  padding-right: 29px;
  text-align: left;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.nice-select .option.selected {
  font-weight: bold;
}
.nice-select .option.disabled {
  background-color: transparent;
  color: #999;
  cursor: default;
}

.no-csspointerevents .nice-select .list {
  display: none;
}

.no-csspointerevents .nice-select.open .list {
  display: block;
}

/*----------------------------------------*/
/*  2.9 offcanvas
/*----------------------------------------*/
.body-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 995;
  width: 100%;
  height: 100%;
  background: rgba(24, 24, 24, 0.8);
  visibility: hidden;
  opacity: 0;
  transition: 0.45s ease-in-out;
}
.body-overlay.apply {
  opacity: 1;
  visibility: visible;
}
.body-overlay:hover {
  cursor: url(../img/icon/cross-out.png), pointer;
}

.cmoffcanvas {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: fixed;
  top: 0;
  right: -100%;
  width: 480px;
  z-index: 9999;
  bottom: 0;
  box-shadow: 0 16px -32px 0 rgba(0, 0, 0, 0.8);
  background-color: var(--cm-common-white);
  padding: 50px;
  scrollbar-width: none;
  opacity: 0;
  visibility: hidden;
  transition: 0.45s ease-in-out;
  overflow-y: scroll;
}
.cmoffcanvas .homemenu {
  margin-bottom: 30px;
}
.cmoffcanvas .homemenu-title {
  color: var(--cm-common-white);
}
.cmoffcanvas .cm-main-menu-mobile {
  margin-bottom: 30px;
}
.cmoffcanvas.opened {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 575px) {
  .cmoffcanvas {
    width: 100%;
    padding: 40px 35px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cmoffcanvas {
    width: 400px;
    padding: 40px;
  }
}
.cmoffcanvas.opened {
  right: 0;
  -webkit-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -moz-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-duration: 0.6s;
}
.cmoffcanvas-btn {
  padding: 22px 40px;
  background: var(--cm-common-black);
  display: inline-block;
  font-size: 15px;
  letter-spacing: 0px;
  line-height: 20px;
  color: var(--cm-common-white);
  font-weight: 700;
  position: relative;
  transition: all 0.3s linear;
  overflow: hidden;
  z-index: 1;
  line-height: 1;
  width: 100%;
  text-align: center;
  border: 1px solid transparent;
}
.cmoffcanvas-btn:hover {
  background: transparent;
  border: 1px solid var(--cm-common-black);
  color: var(--cm-common-black);
}
.cmoffcanvas__contact-title h5 {
  font-size: 20px;
  color: var(--cm-common-black);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 30px;
  display: inline-block;
  font-family: var(--cm-ff-kanit);
}
.cmoffcanvas__contact-info {
  margin-bottom: 30px;
}
.cmoffcanvas__contact-info ul li {
  font-size: 16px;
  color: var(--cm-common-black);
  margin-bottom: 15px;
  list-style-type: none;
  font-family: var(--cm-ff-kanit);
}
.cmoffcanvas__contact-info ul li i {
  width: 16px;
}
.cmoffcanvas__contact-info ul li:last-child {
  margin-bottom: 0;
}
.cmoffcanvas__contact-info ul li a {
  margin-left: 10px;
  transition: 0.3s;
  background-image: linear-gradient(#1e1e1e, #1e1e1e), linear-gradient(#1e1e1e, #1e1e1e);
  background-size: 0 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.cmoffcanvas__contact-info ul li a:hover {
  background-image: linear-gradient(#1e1e1e, #1e1e1e), linear-gradient(#1e1e1e, #1e1e1e);
  background-size: 0 1px, 100% 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
}
.cmoffcanvas__logo {
  margin-bottom: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cmoffcanvas__logo {
    padding-top: 0;
  }
}
@media (max-width: 575px) {
  .cmoffcanvas__logo {
    padding-top: 0;
  }
}
@media (max-width: 575px) {
  .cmoffcanvas__logo img {
    width: 150px;
  }
}
.cmoffcanvas__close-btn button {
  position: absolute;
  right: 30px;
  top: 37px;
  transition: 0.4s;
  height: 40px;
  width: 40px;
  line-height: 43px;
  border: 1px solid var(--cm-common-black);
  color: var(--cm-common-black);
}
.cmoffcanvas__close-btn button:hover {
  background: var(--cm-common-black);
  color: var(--cm-common-white);
}
.cmoffcanvas__close-btn button i {
  font-weight: 300;
  font-size: 20px;
}

/*----------------------------------------*/
/*  2.12 Section Title
/*----------------------------------------*/
.cm-section-title {
  line-height: 1.15;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-section-title br {
    display: none;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-section-title {
    font-size: 43px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-section-title {
    font-size: 40px;
  }
}
@media (max-width: 575px) {
  .cm-section-title {
    font-size: 30px;
  }
}
.cm-section-subtitle {
  padding-left: 100px;
  position: relative;
  color: var(--cm-theme-primary);
  display: inline-block;
  letter-spacing: 0.5px;
}
@media (max-width: 575px) {
  .cm-section-subtitle {
    padding-left: 0;
  }
  .cm-section-subtitle::before {
    display: none;
  }
}
.cm-section-subtitle::before {
  position: absolute;
  content: "";
  width: 90px;
  height: 2px;
  background: var(--cm-theme-primary);
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}
.cm-section-port-title {
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-manrope);
  font-size: 120px;
  font-weight: 800;
  line-height: 0.9em;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cm-section-port-title {
    font-size: 110px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-section-port-title {
    font-size: 92px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-section-port-title {
    font-size: 75px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-section-port-title {
    font-size: 60px;
  }
}
@media (max-width: 575px) {
  .cm-section-port-title {
    font-size: 50px;
  }
}
.cm-section-port-subtitle {
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-kanit);
  font-size: 21px;
  font-weight: 500;
  text-transform: uppercase;
  background-image: -webkit-linear-gradient(89.64deg, #F87171 0.32%, #FACC15 32.07%, #C8F31D 60.55%, #38BDF8 99.28%);
  background-image: -moz-linear-gradient(89.64deg, #F87171 0.32%, #FACC15 32.07%, #C8F31D 60.55%, #38BDF8 99.28%);
  background-image: -ms-linear-gradient(89.64deg, #F87171 0.32%, #FACC15 32.07%, #C8F31D 60.55%, #38BDF8 99.28%);
  background-image: -o-linear-gradient(89.64deg, #F87171 0.32%, #FACC15 32.07%, #C8F31D 60.55%, #38BDF8 99.28%);
  background-image: linear-gradient(89.64deg, #F87171 0.32%, #FACC15 32.07%, #C8F31D 60.55%, #38BDF8 99.28%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -moz-animation: sliderTitle3 2s ease-in-out 1s forwards infinite alternate;
  -webkit-animation: sliderTitle3 2s ease-in-out 1s forwards infinite alternate;
  animation: sliderTitle3 2s ease-in-out 1s forwards infinite alternate;
  background-size: 150% 150%;
  display: block;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-section-port-subtitle.text-center {
    text-align: left !important;
  }
}
.cm-section-port-content {
  font-size: 21px;
  font-weight: 400;
  line-height: 1.42em;
  color: var(--cm-grey-3);
  font-family: var(--cm-ff-kanit);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-section-port-content br {
    display: none;
  }
}
.cm-section-crtv-subtitle {
  font-size: 20px;
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-marcellus);
  font-weight: 500;
  display: inline-block;
}
.cm-section-crtv-title {
  font-size: 72px;
  font-family: var(--cm-ff-marcellus);
  color: var(--cm-common-black-2);
  line-height: 1;
  text-transform: capitalize;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-section-crtv-title {
    font-size: 50px;
  }
}
.cm-section-ai-title {
  font-size: 160px;
  font-family: var(--cm-ff-antonio);
  color: var(--cm-common-black-2);
  letter-spacing: -3.2px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-section-ai-title {
    font-size: 140px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-section-ai-title {
    font-size: 100px;
  }
}
@media (max-width: 575px) {
  .cm-section-ai-title {
    font-size: 65px;
  }
}
.cm-section-brand-subtitle {
  font-size: 60px;
  font-family: var(--cm-ff-pinyon);
  margin-bottom: 30px;
  display: inline-block;
}
.cm-section-brand-title {
  font-family: var(--cm-ff-dirtyline);
  color: var(--cm-common-black-3);
  font-weight: normal;
  text-transform: lowercase;
  font-size: 200px;
  line-height: 0.8;
}
@media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-section-brand-title {
    font-size: 150px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-section-brand-title {
    font-size: 100px;
  }
}
@media (max-width: 575px) {
  .cm-section-brand-title {
    font-size: 70px;
  }
}
.cm-section-brand-para {
  font-family: var(--cm-ff-kanit);
  font-size: 41px;
  line-height: 1.3;
  font-weight: 300;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-section-brand-para {
    font-size: 27px;
  }
}
.cm-section-title-4 {
  font-weight: 700;
  font-size: 57px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-manrope);
}
@media (max-width: 575px) {
  .cm-section-title-4 {
    font-size: 40px;
  }
}

.cm-text-invert {
  line-height: 0.94;
}

.cm-text-invert > div {
  background-size: 200% 100%;
  background-position-x: 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(to right, rgb(63, 65, 68) 50%, rgba(0, 0, 0, 0.1) 50%);
}

.cm-text-invert-2 {
  line-height: 0.94;
}

.cm-text-invert-2 > div {
  background-size: 200% 100%;
  background-position-x: 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(to right, rgb(255, 255, 255) 50%, rgb(108, 106, 106) 50%);
}

.cm-text-invert-3 {
  line-height: 0.94;
}

.cm-text-invert-3 > div {
  background-size: 200% 100%;
  background-position-x: 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(to right, rgb(18, 18, 18) 50%, rgba(0, 0, 0, 0.1) 50%);
}

/*----------------------------------------*/
/*  2.11 search
/*----------------------------------------*/
.cm-search-form-toggle {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--cm-common-white);
  z-index: 100;
  padding-top: 70px;
  padding-bottom: 100px;
  opacity: 0;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-transform: translateY(calc(-100% - 80px));
  -ms-transform: translateY(calc(-100% - 80px));
  transform: translateY(calc(-100% - 80px));
  -webkit-transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
  z-index: 9999;
}
.cm-search-form-toggle.active {
  opacity: 1;
  -webkit-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.cm-search-form-toggle.active .cm-search-form-input {
  transform: translateY(0px);
  opacity: 1;
  transition-delay: 0.3s;
}
.cm-search-form-toggle.active .cm-search-form-input:after {
  width: 100%;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}
.cm-search-form-icon {
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 22px;
  color: var(--cm-common-black);
}
.cm-search-form-icon:hover {
  color: var(--cm-theme-primary);
}
.cm-search-form-input {
  position: relative;
  height: 80px;
  transform: translateY(-40px);
  transition: all 0.3s ease-in-out;
  transition-delay: 0.5s;
  opacity: 0;
}
.cm-search-form-input input {
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: 0;
  outline: 0;
  font-size: 20px;
  color: var(--cm-common-black);
  border-bottom: 1px solid transparent;
  padding: 0;
  padding-right: 30px;
}
.cm-search-form-input input::placeholder {
  font-size: 20px;
  color: var(--cm-gray-1);
}
.cm-search-form-input input ~ .cm-search-focus-border {
  position: absolute;
  bottom: 0;
  left: auto;
  right: 0;
  width: 0;
  height: 1px;
  background-color: var(--cm-common-black);
  transition: all 0.5s;
}
.cm-search-form-input input:focus ~ .cm-search-focus-border {
  width: 100%;
  left: 0;
  right: auto;
  transition: all 0.5s;
}
.cm-search-form-input:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 0%;
  height: 1px;
  background-color: rgba(255, 192, 124, 0.6);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.cm-search-close {
  color: var(--cm-common-black);
  font-size: 40px;
  transition: all 0.3s ease;
}
.cm-search-close:hover {
  color: var(--cm-theme-primary);
  transform: rotate(180deg);
}
.cm-search-body-overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 192, 124, 0.1);
  backdrop-filter: blur(15px);
  z-index: 99;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
  -webkit-transform: translateY(calc(-100% - 80px));
  -ms-transform: translateY(calc(-100% - 80px));
  transform: translateY(calc(-100% - 80px));
  -webkit-transition: all 0.5s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.cm-search-body-overlay.active {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

/*----------------------------------------*/
/*  2.7 instagram
/*----------------------------------------*/
.cm-instagram-wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: 10px;
}
.cm-instagram-link a {
  position: relative;
  display: block;
}
.cm-instagram-link a i {
  position: absolute;
  color: var(--cm-heading-4);
  font-size: 50px;
  text-align: center;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: all 0.4s ease;
}
.cm-instagram-link a::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: var(--cm-theme-primary);
  opacity: 0.902;
  transform: scale(0);
  transition: all 0.4s ease;
}
.cm-instagram-link a:hover i {
  opacity: 1;
  font-size: 20px;
  line-height: 0;
}
.cm-instagram-link a:hover::before {
  transform: scale(1);
}
.cm-instagram-link img {
  width: 100%;
}
.cm-instagram-link-2 {
  width: 100%;
}
.cm-instagram-link-2 img {
  width: 100%;
}
.cm-instagram-title {
  font-size: 20px;
  color: var(--cm-common-black);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 25px;
  display: block;
}
.cm-instagram-mrg-icon a {
  font-size: 24px;
  color: var(--cm-heading-6);
  width: 80px;
  height: 80px;
  border-radius: 40px;
  background-color: var(--cm-common-white);
  display: inline-block;
  line-height: 90px;
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  transform: scale(0);
  transition: all 0.4s linear;
}
.cm-instagram-mrg-icon a:hover {
  color: var(--cm-theme-13);
}
.cm-instagram-mrg-thumb img {
  transition: all 0.4s linear;
}
.cm-instagram-mrg-thumb:hover .cm-instagram-mrg-bg {
  left: 0;
  right: 0;
  opacity: 0;
  transition: all 0.4s linear;
}
.cm-instagram-mrg-thumb:hover img {
  transform: scale(1.2) rotate(-2deg);
}
.cm-instagram-mrg-thumb:hover .cm-instagram-mrg-icon a {
  transform: scale(1);
}
.cm-instagram-mrg-bg {
  background: hsla(0, 0%, 100%, 0.3);
  opacity: 0.651;
  bottom: 0;
  left: 50%;
  position: absolute;
  right: 51%;
  top: 0;
  opacity: 1;
  pointer-events: none;
  transition: all 0.4s linear;
  z-index: 1;
}
.cm-instagram-mrg-pd {
  height: 180px;
  width: 100%;
  background-color: #f8e7d6;
  display: block;
  position: relative;
  z-index: 1;
  margin-bottom: -180px;
}
.cm-instagram-ai-icon {
  top: 50%;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 2;
  transform: translateY(-50%);
}
.cm-instagram-ai-icon span {
  color: var(--cm-common-white);
  font-size: 26px;
  position: relative;
  opacity: 0;
  visibility: hidden;
  transform: scale(0);
  -webkit-transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.cm-instagram-ai-icon span::before {
  position: absolute;
  content: "";
  width: 60px;
  height: 60px;
  border: 1px solid var(--cm-common-white);
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
}
.cm-instagram-ai-thumb {
  overflow: hidden;
  position: relative;
}
.cm-instagram-ai-thumb a {
  display: block;
  position: relative;
}
.cm-instagram-ai-thumb a::after {
  background: linear-gradient(180deg, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 0.8) 100%);
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.cm-instagram-ai-thumb img {
  -webkit-transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.cm-instagram-ai-thumb:hover a::after {
  opacity: 1;
}
.cm-instagram-ai-thumb:hover span {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.cm-instagram-ai-thumb:hover img {
  transform: scale(1.1);
}

/*----------------------------------------*/
/*  2.6 cursor
/*----------------------------------------*/
body.cm-magic-cursor #magic-cursor {
  display: block;
}

#magic-cursor {
  position: absolute;
  display: none;
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
}

#ball {
  position: fixed;
  display: flex;
  align-items: center;
  pointer-events: none;
  background-color: var(--cm-common-black-2);
  border-radius: 50%;
  justify-content: center;
  mix-blend-mode: difference;
  color: transparent;
}

/* Ball view 
============= */
#ball .ball-view {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  padding: 0 5px;
  line-height: 1.3;
  text-align: center;
  transform: scale(0);
  font-family: var(--cm-ff-kanit);
  font-weight: 400;
  font-size: 13px;
  color: var(--cm-common-black-2);
}

/* Ball drag 
============= */
#ball .ball-drag {
  position: absolute;
  display: block;
  width: 100%;
  padding: 0 5px;
  font-size: 14px;
  font-weight: 500;
  color: #000;
  line-height: 1.2;
  text-align: center;
  transition: all 0.3s;
}

#ball .ball-drag::before,
#ball .ball-drag::after {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  font-size: 19px;
  color: #FFF;
  height: 10px;
  line-height: 10px;
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

#ball .ball-drag::before {
  content: "\f104"; /* Font Awesome */
  left: 0;
  transform: translate3d(-30px, 0, 0);
  transition: all 0.25s;
}

#ball .ball-drag::after {
  content: "\f105"; /* Font Awesome */
  right: 0;
  transform: translate3d(30px, 0, 0);
  transition: all 0.25s;
}

#ball.with-blur {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* Ball close 
============== */
#ball.ball-close-enabled {
  opacity: 1 !important;
}

#ball .ball-close {
  position: absolute;
  padding: 0 5px;
  font-size: 16px;
  font-weight: 600;
  color: var(--cm-common-white);
  line-height: 1;
  text-align: center;
  font-family: var(--cm-ff-kanit);
  font-weight: 400;
}

.cm-magnetic-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* HEADER CSS */
/*----------------------------------------*/
/*  3.1 Header Style 1
/*----------------------------------------*/
.cm-header-bar button:hover span {
  animation: bar-anim 0.8s cubic-bezier(0.44, 1.1, 0.53, 0.99) 1 forwards;
  -webkit-animation: bar-anim 0.8s cubic-bezier(0.44, 1.1, 0.53, 0.99) 1 forwards;
  background-color: var(--cm-theme-primary);
}
.cm-header-bar button:hover span:nth-child(2) {
  animation-delay: 0.1s;
}
.cm-header-bar button:hover span:nth-child(3) {
  animation-delay: 0.2s;
}
.cm-header-bar button span {
  height: 2px;
  width: 28px;
  background-color: var(--cm-common-white);
  display: block;
  margin: 5px 0;
}
.cm-header-bar button span:nth-child(3) {
  width: 14px;
}
.cm-header-crtv-bar button span {
  background: var(--cm-common-black-2);
}
.cm-header-crtv-bar button:hover span {
  background-color: var(--cm-common-black-2);
}
.cm-header-contact a {
  font-family: var(--cm-ff-common);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.67;
  color: var(--cm-common-black);
}
.cm-header-dvdr {
  position: relative;
  padding-left: 43px;
  line-height: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-header-dvdr {
    padding-left: 23px;
  }
}
.cm-header-dvdr::before {
  position: absolute;
  content: "";
  height: 23px;
  width: 1px;
  background-color: var(--cm-grey-2);
  left: 23px;
  top: 2px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-header-dvdr::before {
    display: none;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-header-mob-spacing {
    padding: 21px 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-header-mob-right {
    justify-content: flex-end !important;
  }
}
.cm-header-search i {
  color: var(--cm-common-white);
  font-size: 23px;
  font-weight: 300;
  transition: all 0.3s ease;
}
.cm-header-search i:hover {
  color: var(--cm-theme-primary);
}
.cm-header-bg {
  background-color: rgba(25, 25, 26, 0.85);
}
.cm-header-brand-spacing {
  padding: 25px 0px;
}
.cm-header-brand-bar button span {
  background-color: var(--cm-common-black-3);
}
.cm-header-brand-bar button:hover span {
  background-color: var(--cm-common-black-3);
}
.cm-header-slicer-white .cm-main-menu-crtv nav ul li a {
  color: var(--cm-common-white);
}
.cm-header-slicer-white .cm-main-homemenu .homemenu-title a {
  color: var(--cm-common-black-2);
}
.cm-header-slicer-white .cm-main-menu-crtv nav ul li:hover > a {
  color: var(--cm-common-white);
  opacity: 0.7;
}
.cm-header-slicer-white .cm-main-menu-crtv nav ul li a:hover {
  color: var(--cm-common-white);
  opacity: 0.7;
}
.cm-header-slicer-white .cm-header-crtv-bar button span {
  background: var(--cm-common-white);
}

.cm-transparent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 3;
}

.header-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  opacity: 1;
  width: 100%;
  z-index: 999;
  visibility: visible;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0px 1px 3px 0px rgba(23, 23, 24, 0.12), 0px -1px 0px 0px rgba(36, 62, 21, 0.14);
  -webkit-animation: 0.95s ease 0s normal forwards 1 running headerSlideDown;
  animation: 0.95s ease 0s normal forwards 1 running headerSlideDown;
  backdrop-filter: blur(12px);
}
.header-sticky.cm-header-brand-spacing {
  padding: 15px 0px;
}

.header-sticky .cm-main-menu nav ul li > a {
  padding: 25px 0;
}

.header-sticky.sticky-black {
  background: rgba(18, 19, 20, 0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0px 2px 6px 0px rgba(39, 16, 6, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/*----------------------------------------*/
/*  4.2 menu css
/*----------------------------------------*/
.cm-main-menu nav ul {
  margin-left: 150px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-main-menu nav ul {
    margin-left: 40px;
  }
}
.cm-main-menu nav ul li {
  display: inline-block;
  margin-right: 35px;
  position: relative;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-main-menu nav ul li {
    margin-right: 28px;
  }
}
.cm-main-menu nav ul li:hover > a {
  color: var(--cm-theme-primary);
}
.cm-main-menu nav ul li a {
  padding: 38px 0;
  display: inline-block;
  color: var(--cm-common-white);
  font-size: 16px;
  font-weight: 500;
  font-family: var(--cm-ff-common);
  text-transform: capitalize;
}
.cm-main-menu nav ul li a:hover {
  color: var(--cm-theme-primary);
}
.cm-main-menu nav ul li a i {
  font-weight: 700;
  margin-left: 4px;
}
.cm-main-menu-port nav ul {
  margin-left: 0;
  margin-right: 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-main-menu-port nav ul {
    margin-right: 25px;
  }
}
.cm-main-menu-port nav ul li:hover > a {
  color: var(--cm-theme-secondary);
}
.cm-main-menu-port nav ul li a {
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-main-menu-port nav ul li a {
    font-size: 17px;
  }
}
.cm-main-menu-port nav ul li a:hover {
  color: var(--cm-theme-secondary);
}
.cm-main-menu-port nav ul li a i {
  font-size: 18px;
}
.cm-main-menu-crtv nav ul {
  margin-left: 0;
  margin-right: 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-main-menu-crtv nav ul {
    margin-right: 25px;
  }
}
.cm-main-menu-crtv nav ul li:hover > a {
  color: var(--cm-common-black-2);
}
.cm-main-menu-crtv nav ul li a {
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  font-family: var(--cm-ff-kanit);
  color: var(--cm-common-black-2);
}
.cm-main-menu-crtv nav ul li a:hover {
  color: var(--cm-common-black-2);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-main-menu-crtv nav ul li a {
    font-size: 17px;
  }
}
.cm-main-menu-crtv nav ul li a i {
  font-size: 18px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cm-main-menu-crtv {
    margin-left: 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-main-menu-crtv {
    margin-left: 110px !important;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cm-main-menu-ai {
    margin-left: 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-main-menu-ai {
    margin-left: 40px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) {
  .cm-main-menu-ai nav ul {
    margin-left: 0;
  }
}
.cm-main-menu-ai nav ul li:hover > a {
  color: var(--cm-common-apple);
}
.cm-main-menu-ai nav ul li a {
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  font-family: var(--cm-ff-manrope);
  color: var(--cm-common-black-2);
  letter-spacing: 1px;
}
.cm-main-menu-ai nav ul li a:hover {
  color: var(--cm-common-apple);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-main-menu-ai nav ul li a {
    font-size: 17px;
  }
}
.cm-main-menu-ai nav ul li a i {
  font-size: 18px;
}

.cmt-offcanvas {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  bottom: 0;
  box-shadow: 0 16px -32px 0 rgba(0, 0, 0, 0.8);
  background-color: var(--cm-common-black-3);
  z-index: 999999;
  scrollbar-width: none;
  opacity: 0;
  visibility: hidden;
  transition: 0.45s ease-in-out;
  overflow-y: scroll;
}
.cmt-offcanvas ul li {
  width: 50%;
  float: left;
  list-style-type: none;
}
.cmt-offcanvas.opened {
  opacity: 1;
  visibility: visible;
  right: 0;
  -webkit-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -moz-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-duration: 0.6s;
}
.cmt-offcanvas__right-wrap {
  padding: 100px;
  padding-right: 60px;
  height: 100%;
}
.cmt-offcanvas__right-info {
  text-align: right;
  padding-top: 60px;
}
.cmt-offcanvas__tel a, .cmt-offcanvas__mail a, .cmt-offcanvas__text p {
  font-weight: 300;
  font-size: 22px;
  line-height: 34px;
  letter-spacing: 0.04em;
  color: var(--cm-common-black-3);
  font-family: var(--cm-ff-kanit);
  -webkit-transform: translateY(60px);
  -moz-transform: translateY(60px);
  -ms-transform: translateY(60px);
  -o-transform: translateY(60px);
  transform: translateY(60px);
  opacity: 0;
  visibility: hidden;
}
.cmt-offcanvas__tel a {
  transition-delay: 0.6s;
}
.cmt-offcanvas__mail a {
  transition-delay: 0.8s;
}
.cmt-offcanvas__text p {
  transition-delay: 1s;
}
.cmt-offcanvas__social-link ul {
  display: flex;
  justify-content: end;
}
.cmt-offcanvas__social-link ul li {
  list-style: none;
  display: inline-block;
  padding-left: 5px;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 1.4s ease-in-out;
  -moz-transition: all 1.4s ease-in-out;
  -ms-transition: all 1.4s ease-in-out;
  -o-transition: all 1.4s ease-in-out;
  transition: all 1.4s ease-in-out;
  -webkit-transform: translateY(60px);
  -moz-transform: translateY(60px);
  -ms-transform: translateY(60px);
  -o-transform: translateY(60px);
  transform: translateY(60px);
}
.cmt-offcanvas__social-link ul li:nth-child(2) {
  -webkit-transition: all 1.6s ease-in-out;
  -moz-transition: all 1.6s ease-in-out;
  -ms-transition: all 1.6s ease-in-out;
  -o-transition: all 1.6s ease-in-out;
  transition: all 1.6s ease-in-out;
}
.cmt-offcanvas__social-link ul li:nth-child(3) {
  -webkit-transition: all 1.8s ease-in-out;
  -moz-transition: all 1.8s ease-in-out;
  -ms-transition: all 1.8s ease-in-out;
  -o-transition: all 1.8s ease-in-out;
  transition: all 1.8s ease-in-out;
}
.cmt-offcanvas__social-link ul li:nth-child(3) {
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  -ms-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
}
.cmt-offcanvas__social-link ul li:nth-child(4) {
  -webkit-transition: all 2.2s ease-in-out;
  -moz-transition: all 2.2s ease-in-out;
  -ms-transition: all 2.2s ease-in-out;
  -o-transition: all 2.2s ease-in-out;
  transition: all 2.2s ease-in-out;
}
.cmt-offcanvas__social-link ul li:nth-child(5) {
  -webkit-transition: all 2.4s ease-in-out;
  -moz-transition: all 2.4s ease-in-out;
  -ms-transition: all 2.4s ease-in-out;
  -o-transition: all 2.4s ease-in-out;
  transition: all 2.4s ease-in-out;
}
.cmt-offcanvas__social-link ul li a img {
  width: 40px;
}
.cmt-offcanvas__close-btn button {
  position: absolute;
  left: 30px;
  top: 30px;
  transition: 1s;
  -webkit-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -moz-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-duration: 0.3s;
  height: 40px;
  width: 40px;
  line-height: 45px;
  background-color: var(--cm-common-white);
  color: var(--cm-common-black);
}
.cmt-offcanvas__close-btn button:hover i {
  transform: rotate(360deg);
}
.cmt-offcanvas__close-btn button i {
  font-weight: 300;
  font-size: 20px;
  transition: 0.9s;
}

.cm-offcanvas-area.opened .animated-text > nav > ul > li a::after {
  visibility: visible;
  opacity: 1;
  bottom: 35px;
}
.cm-offcanvas-area.opened .animated-text > nav > ul > li a::before {
  width: 100%;
}
.cm-offcanvas-area.opened .animated-text > nav > ul > li a .cm-text-hover-effect-word .single-char span {
  -webkit-transform: translateZ(0.1px);
  -moz-transform: translateZ(0.1px);
  -ms-transform: translateZ(0.1px);
  -o-transform: translateZ(0.1px);
  transform: translateZ(0.1px);
}
.cm-offcanvas-area.opened .cm-offcanvas-left, .cm-offcanvas-area.opened .cm-offcanvas-right {
  visibility: visible;
  opacity: 1;
}
.cm-offcanvas-area.opened .cm-offcanvas-wrapper {
  visibility: visible;
  opacity: 1;
}
.cm-offcanvas-area.opened .cm-offcanvas-bg.is-left, .cm-offcanvas-area.opened .cm-offcanvas-bg.is-right {
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
  transition-delay: 0s;
}
.cm-offcanvas-area.opened .cm-offcanvas-menu {
  transition-delay: 0s;
}
.cm-offcanvas-area.opened .cm-offcanvas-close {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  transition-delay: 0.9s;
}
.cm-offcanvas-area.opened .cmt-offcanvas__right-info, .cm-offcanvas-area.opened .cmt-offcanvas__logo {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.cm-offcanvas-area.opened .cm-main-menu-content ul li {
  visibility: visible;
  opacity: 1;
}
.cm-offcanvas-area.opened .cm-main-menu-content ul li a {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.cm-offcanvas-area.opened .cmt-offcanvas__right-info a {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.cm-offcanvas-area.opened .cmt-offcanvas__right-info p {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.cm-offcanvas-area.opened .cmt-offcanvas__social-link ul li {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.cm-offcanvas-area.opened .cmt-offcanvas__right-info {
  transition-delay: 0.9s;
}
.cm-offcanvas-area.opened .cmt-offcanvas__logo {
  transition-delay: 0.3s;
}
.cm-offcanvas-area.opened .cmt-offcanvas__logo img {
  flex: 0 0 auto;
}
.cm-offcanvas-bg {
  position: fixed;
  top: 0;
  height: 100%;
  width: 50%;
  -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 1111;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-offcanvas-bg {
    width: 100%;
  }
}
.cm-offcanvas-bg.is-left {
  left: 0;
  -webkit-transform: scale(1, 0);
  -moz-transform: scale(1, 0);
  -ms-transform: scale(1, 0);
  -o-transform: scale(1, 0);
  transform: scale(1, 0);
  transform-origin: top center;
  background-color: #F5F5F5;
  transition-delay: 1s;
}
.cm-offcanvas-bg.is-right {
  right: 0;
  transform-origin: bottom center;
  -webkit-transform: scale(1, 0);
  -moz-transform: scale(1, 0);
  -ms-transform: scale(1, 0);
  -o-transform: scale(1, 0);
  transform: scale(1, 0);
  background-color: var(--cm-common-white);
  transition-delay: 1s;
}
.cm-offcanvas-wrapper-2 .cm-offcanvas-left {
  overflow-y: scroll;
}
.cm-offcanvas-wrapper-2 .cmt-offcanvas__logo {
  padding-left: 130px;
  padding-top: 35px;
  -webkit-transform: translateY(30px);
  -moz-transform: translateY(30px);
  -ms-transform: translateY(30px);
  -o-transform: translateY(30px);
  transform: translateY(30px);
  visibility: hidden;
  opacity: 0;
  transition-delay: 0s;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-offcanvas-wrapper-2 .cmt-offcanvas__logo {
    padding-left: 75px;
  }
}
@media (max-width: 575px) {
  .cm-offcanvas-wrapper-2 .cmt-offcanvas__logo {
    padding-left: 30px;
  }
}
.cm-offcanvas-wrapper-2 > div {
  position: fixed;
  top: 0;
  width: 50%;
  height: 100vh;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  z-index: 9999;
  padding-bottom: 50px;
}
.cm-offcanvas-wrapper-2 > div::-webkit-scrollbar {
  display: none;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-offcanvas-wrapper-2 > div {
    width: 100%;
  }
}
.cm-offcanvas-left {
  visibility: hidden;
  opacity: 0;
  left: 0;
  transition-delay: 0.8s;
}
.cm-offcanvas-left .cmt-offcanvas__logo {
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: all 1.5s ease-in-out !important;
  -webkit-transform: translateY(-200px);
  -moz-transform: translateY(-200px);
  -ms-transform: translateY(-200px);
  -o-transform: translateY(-200px);
  transform: translateY(-200px);
}
.cm-offcanvas-left .cm-main-menu-content ul > li {
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: all 1.5s ease-in-out !important;
}
.cm-offcanvas-left .cm-main-menu-content ul > li > a {
  -webkit-transform: translateY(-200px);
  -moz-transform: translateY(-200px);
  -ms-transform: translateY(-200px);
  -o-transform: translateY(-200px);
  transform: translateY(-200px);
  opacity: 0;
  visibility: hidden;
  transition: all 1.5s ease-in-out !important;
}
.cm-offcanvas-left .cm-main-menu-content ul > li:nth-child(2) > a {
  transition-delay: 1.7s;
}
.cm-offcanvas-left .cm-main-menu-content ul > li:nth-child(3) > a {
  transition-delay: 1.8s;
}
.cm-offcanvas-left .cm-main-menu-content ul > li:nth-child(3) > a {
  transition-delay: 1.9s;
}
.cm-offcanvas-left .cm-main-menu-content ul > li:nth-child(4) > a {
  transition-delay: 2s;
}
.cm-offcanvas-left .cm-main-menu-content ul > li:nth-child(5) > a {
  transition-delay: 2.1s;
}
.cm-offcanvas-right {
  visibility: hidden;
  opacity: 0;
  right: 0;
  transition-delay: 1.2s;
}
.cm-offcanvas-right-inner {
  padding: 100px;
  padding-right: 100px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-offcanvas-right-inner {
    padding: 50px;
  }
}
.cm-offcanvas-close {
  padding-top: 30px;
  padding-right: 90px;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: translateY(20px);
  -moz-transform: translateY(20px);
  -ms-transform: translateY(20px);
  -o-transform: translateY(20px);
  transform: translateY(20px);
  transition-delay: 0.9s;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-offcanvas-close {
    padding-right: 40px;
  }
}
@media (max-width: 575px) {
  .cm-offcanvas-close {
    padding-right: 20px;
  }
}
.cm-offcanvas-close-btn {
  color: var(--cm-common-black);
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
}
.cm-offcanvas-close-btn .text {
  width: 60px;
  height: 20px;
  overflow: hidden;
  color: var(--cm-common-black);
  font-family: var(--cm-ff-kanit);
  display: inline-block;
  transform: translateY(4px);
}
.cm-offcanvas-close-btn .text span {
  display: inline-block;
  -webkit-transform: translateX(140%);
  -moz-transform: translateX(140%);
  -ms-transform: translateX(140%);
  -o-transform: translateX(140%);
  transform: translateX(140%);
}
.cm-offcanvas-close-btn:hover {
  color: var(--cm-common-black);
}
.cm-offcanvas-close-btn:hover .text span {
  transform: translateX(0%);
}
.cm-offcanvas-close-btn:hover span {
  color: var(--cm-common-black);
}
.cm-offcanvas-close-btn:hover span svg {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.cm-offcanvas-shape-1 {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
  filter: invert(100%) sepia(32%) saturate(304%) hue-rotate(200deg) brightness(105%) contrast(100%);
}
.cm-offcanvas-menu {
  transition-delay: 0.5s;
}
.cm-offcanvas-menu.cm-main-menu-mobile {
  padding: 130px;
  padding-top: 75px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-offcanvas-menu.cm-main-menu-mobile {
    padding: 50px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-offcanvas-menu.cm-main-menu-mobile {
    padding: 20px;
  }
}

.cmrf-main-menu-mobile {
  padding-top: 50px;
  padding-left: 90px;
  padding-right: 130px;
  overflow-y: scroll;
  scrollbar-width: none;
  height: 100%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cmrf-main-menu-mobile {
    padding: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cmrf-main-menu-mobile {
    padding: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cmrf-main-menu-mobile {
    padding: 60px;
  }
}
@media (max-width: 575px) {
  .cmrf-main-menu-mobile {
    padding: 30px;
  }
}
.cmrf-main-menu-mobile::-webkit-scrollbar {
  display: none;
}
.cmrf-main-menu-mobile .cm-submenu {
  display: none;
}
.cmrf-main-menu-mobile > nav > ul {
  position: static;
  display: block;
  box-shadow: none;
}
.cmrf-main-menu-mobile > nav > ul > li {
  list-style: none;
  position: relative;
  width: 100%;
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.cmrf-main-menu-mobile > nav > ul > li:last-child {
  border-bottom: none;
}
.cmrf-main-menu-mobile > nav > ul > li:first-child a {
  border-top: none;
}
.cmrf-main-menu-mobile > nav > ul > li:first-child a::before {
  display: none;
}
.cmrf-main-menu-mobile > nav > ul > li.dropdown-opened ul.submenu {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.cmrf-main-menu-mobile > nav > ul > li.has-dropdown > a .dropdown-toggle-btn {
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-size: 20px;
}
.cmrf-main-menu-mobile > nav > ul > li.has-dropdown > a .dropdown-toggle-btn i {
  transition: 0.4s;
  font-size: 20px;
  color: rgba(47, 46, 43, 0.3);
}
.cmrf-main-menu-mobile > nav > ul > li.has-dropdown > a .dropdown-toggle-btn:hover {
  color: rgba(47, 46, 43, 0.3);
}
.cmrf-main-menu-mobile > nav > ul > li.has-dropdown > a.expanded {
  color: rgba(47, 46, 43, 0.3);
}
.cmrf-main-menu-mobile > nav > ul > li.has-dropdown > a.expanded .dropdown-toggle-btn.dropdown-opened {
  color: rgba(47, 46, 43, 0.3);
}
.cmrf-main-menu-mobile > nav > ul > li.has-dropdown:hover > a::after {
  color: rgba(47, 46, 43, 0.3);
}
.cmrf-main-menu-mobile > nav > ul > li:last-child a span {
  border-bottom: 0;
}
.cmrf-main-menu-mobile > nav > ul > li > a {
  display: block;
  font-size: 80px;
  line-height: 1;
  position: relative;
  padding: 17px 0;
  padding-right: 20px;
  color: rgba(47, 46, 43, 0.3);
  font-family: var(--cm-ff-dirtyline);
  position: relative;
  padding-left: 35px;
  text-transform: lowercase;
  font-weight: normal;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .cmrf-main-menu-mobile > nav > ul > li > a {
    font-size: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cmrf-main-menu-mobile > nav > ul > li > a {
    font-size: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cmrf-main-menu-mobile > nav > ul > li > a {
    padding-left: 0;
  }
}
.cmrf-main-menu-mobile > nav > ul > li > a .menu-text {
  font-size: 16px;
  line-height: 11px;
  border-bottom: 1px solid #EAEBED;
  width: 82%;
  display: inline-block;
  padding: 19px 0 17px;
}
.cmrf-main-menu-mobile > nav > ul > li > ul {
  padding: 0;
}
.cmrf-main-menu-mobile > nav > ul > li > ul > li {
  padding: 0;
}
.cmrf-main-menu-mobile > nav > ul > li > ul > li > a {
  margin-left: auto;
  width: 93%;
  padding: 10px 5%;
  text-shadow: none !important;
  visibility: visible;
  padding-left: 0;
  padding-right: 20px;
  font-weight: 500;
  font-size: 32px;
  line-height: 1;
  color: rgba(47, 46, 43, 0.3);
  font-family: var(--cm-ff-dirtyline);
}
@media (max-width: 575px) {
  .cmrf-main-menu-mobile > nav > ul > li > ul > li > a {
    font-size: 22px;
  }
}
.cmrf-main-menu-mobile > nav > ul > li > ul > li li a {
  width: 88%;
  padding: 10px 7%;
  padding-left: 0;
  padding-right: 20px;
}
.cmrf-main-menu-mobile > nav > ul > li > ul > li li li a {
  width: 83%;
  padding: 10px 9%;
  padding-left: 0;
  padding-right: 20px;
}
.cmrf-main-menu-mobile > nav > ul > li > ul > li li li li a {
  width: 68%;
  padding: 10px 11%;
  padding-left: 0;
  padding-right: 20px;
}
.cmrf-main-menu-mobile > nav > ul > li:hover > a {
  color: rgba(47, 46, 43, 0.3);
}
.cmrf-main-menu-mobile > nav > ul > li:hover > a::after {
  color: rgba(47, 46, 43, 0.3);
}
.cmrf-main-menu-mobile > nav > ul > li:hover > a .dropdown-toggle-btn i {
  color: var(--cm-common-white);
}
.cmrf-main-menu-mobile > nav > ul > li:hover .mega-menu {
  visibility: visible;
  opacity: 1;
  top: 0;
}
.cmrf-main-menu-mobile > nav > ul > li.active > a {
  color: var(--cm-common-black-3);
}
.cmrf-main-menu-mobile > nav > ul > li.active > a::after {
  color: var(--cm-common-black-3);
}
.cmrf-main-menu-mobile > nav > ul > li.active > a .cm-text-hover-effect-word span {
  -webkit-transform: translate3d(0, -100%, 0.1px) !important;
  -moz-transform: translate3d(0, -100%, 0.1px) !important;
  -ms-transform: translate3d(0, -100%, 0.1px) !important;
  -o-transform: translate3d(0, -100%, 0.1px) !important;
  transform: translate3d(0, -100%, 0.1px) !important;
}
.cmrf-main-menu-mobile > nav > ul > li.active .mega-menu {
  visibility: visible;
  opacity: 1;
  top: 0;
}
.cmrf-main-menu-mobile > nav > ul > li .mega-menu, .cmrf-main-menu-mobile > nav > ul > li .submenu {
  position: static;
  min-width: 100%;
  padding: 35px 0;
  padding-left: 75px;
  box-shadow: none;
  visibility: visible;
  opacity: 1;
  display: none;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) {
  .cmrf-main-menu-mobile > nav > ul > li .mega-menu, .cmrf-main-menu-mobile > nav > ul > li .submenu {
    padding-left: 0;
  }
}
.cmrf-main-menu-mobile > nav > ul > li .mega-menu li, .cmrf-main-menu-mobile > nav > ul > li .submenu li {
  float: none;
  display: block;
  width: 100%;
  padding: 0;
  color: rgba(47, 46, 43, 0.3);
}
.cmrf-main-menu-mobile > nav > ul > li .mega-menu li a, .cmrf-main-menu-mobile > nav > ul > li .submenu li a {
  padding: 10px 0;
  display: inline-block;
  transition: 0.3s;
  font-family: var(--cm-ff-dirtyline);
  text-transform: lowercase;
  font-weight: normal;
  transition: all 0.4s ease !important;
}
.cmrf-main-menu-mobile > nav > ul > li .mega-menu li a:hover, .cmrf-main-menu-mobile > nav > ul > li .submenu li a:hover {
  color: var(--cm-common-black-3);
  padding-left: 15px;
}
.cmrf-main-menu-mobile > nav > ul > li .mega-menu li:hover a .dropdown-toggle-btn, .cmrf-main-menu-mobile > nav > ul > li .submenu li:hover a .dropdown-toggle-btn {
  color: var(--cm-common-white);
}
.cmrf-main-menu-mobile .cmrf-main-menu-mobile ul li:not(:last-child) .home-menu-title a {
  border-bottom: none;
}

/*----------------------------------------*/
/* 4.3 Mobile css
/*----------------------------------------*/
.cm-main-menu-mobile .cm-submenu {
  display: none;
}
.cm-main-menu-mobile .header-icon {
  display: none;
}
.cm-main-menu-mobile ul {
  position: static;
  display: block;
  box-shadow: none;
}
.cm-main-menu-mobile ul li {
  list-style: none;
  position: relative;
  width: 100%;
  padding: 0;
}
.cm-main-menu-mobile ul li:not(:last-child) a {
  border-bottom: 1px solid rgba(6, 7, 40, 0.1);
}
.cm-main-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn {
  position: absolute;
  right: 0;
  top: 21%;
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);
  font-size: 18px;
  color: #7F8387;
  font-family: "Font Awesome 5 Pro";
  transition: all 0.3s ease-in-out;
  z-index: 1;
  width: 25px;
  height: 25px;
  line-height: 22px;
  text-align: center;
  border: 1px solid rgba(66, 63, 63, 0.12);
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.cm-main-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn i {
  transition: all 0.3s ease-in-out;
}
.cm-main-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn.dropdown-opened i {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.cm-main-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn:hover {
  background-color: var(--cm-common-black);
  border-color: var(--cm-common-black);
  color: var(--cm-common-white);
}
.cm-main-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn:hover i {
  color: var(--cm-common-white);
}
.cm-main-menu-mobile ul li.has-dropdown > a.expanded {
  color: var(--cm-common-black);
}
.cm-main-menu-mobile ul li.has-dropdown > a.expanded .dropdown-toggle-btn.dropdown-opened {
  background: var(--cm-common-black);
  border-color: var(--cm-common-black);
  color: var(--cm-common-white);
}
.cm-main-menu-mobile ul li.has-dropdown > a.expanded .dropdown-toggle-btn.dropdown-opened i {
  color: var(--cm-common-white);
}
.cm-main-menu-mobile ul li.has-dropdown:hover > a::after {
  color: var(--cm-theme-green);
}
.cm-main-menu-mobile ul li:hover {
  color: var(--cm-blue-2);
}
.cm-main-menu-mobile ul li:last-child a span {
  border-bottom: 0;
}
.cm-main-menu-mobile ul li > a {
  display: block;
  font-size: 16px;
  color: var(--cm-common-black);
  position: relative;
  padding: 10px 0;
  padding-right: 20px;
  font-family: var(--cm-ff-heading);
  text-transform: capitalize;
}
.cm-main-menu-mobile ul li > a svg {
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);
}
.cm-main-menu-mobile ul li > a > i {
  display: none;
}
.cm-main-menu-mobile ul li > a .menu-text {
  font-size: 16px;
  line-height: 11px;
  border-bottom: 1px solid #EAEBED;
  width: 82%;
  display: inline-block;
  padding: 19px 0 17px;
}
.cm-main-menu-mobile ul li img {
  width: 100%;
}
.cm-main-menu-mobile ul li ul {
  padding: 0;
}
.cm-main-menu-mobile ul li ul li {
  padding: 0;
}
.cm-main-menu-mobile ul li ul li a {
  margin-left: auto;
  width: 93%;
  padding: 10px 5%;
  text-shadow: none !important;
  visibility: visible;
  padding-left: 0;
  padding-right: 20px;
}
.cm-main-menu-mobile ul li ul li li a {
  width: 88%;
  padding: 10px 7%;
  padding-left: 0;
  padding-right: 20px;
}
.cm-main-menu-mobile ul li ul li li li a {
  width: 83%;
  padding: 10px 9%;
  padding-left: 0;
  padding-right: 20px;
}
.cm-main-menu-mobile ul li ul li li li li a {
  width: 68%;
  padding: 10px 11%;
  padding-left: 0;
  padding-right: 20px;
}
.cm-main-menu-mobile ul li:hover > a::after {
  color: var(--cm-common-black);
}
.cm-main-menu-mobile ul li:hover > a .dropdown-toggle-btn {
  background: var(--cm-common-black);
}
.cm-main-menu-mobile ul li:hover > a .dropdown-toggle-btn i {
  color: var(--cm-common-white);
}
.cm-main-menu-mobile ul li:hover .mega-menu {
  visibility: visible;
  opacity: 1;
  top: 0;
}
.cm-main-menu-mobile ul li .mega-menu, .cm-main-menu-mobile ul li .submenu {
  position: static;
  min-width: 100%;
  padding: 0;
  box-shadow: none;
  visibility: visible;
  opacity: 1;
  display: none;
}
.cm-main-menu-mobile ul li .mega-menu.cm-main-homemenu, .cm-main-menu-mobile ul li .submenu.cm-main-homemenu {
  width: 100%;
  padding: 0 !important;
}
.cm-main-menu-mobile ul li .mega-menu .homemenu-title a, .cm-main-menu-mobile ul li .submenu .homemenu-title a {
  font-weight: 400;
}
.cm-main-menu-mobile ul li .mega-menu li, .cm-main-menu-mobile ul li .submenu li {
  float: none;
  display: block;
  width: 100%;
  padding: 0;
}
.cm-main-menu-mobile ul li .mega-menu li:hover a .dropdown-toggle-btn, .cm-main-menu-mobile ul li .submenu li:hover a .dropdown-toggle-btn {
  color: var(--cm-theme-primary);
}
.cm-main-menu-mobile .cm-main-menu-content ul li:not(:last-child) .home-menu-title a {
  border-bottom: none;
}
.cm-main-menu-mobile * ul, .cm-main-menu-mobile * li {
  transition: none !important;
}
.cm-main-menu-mobile ul li .cm-submenu .homemenu {
  padding: 0px 10px;
  position: relative;
  margin-bottom: 20px;
}
.cm-main-menu-mobile ul li .cm-submenu .homemenu-thumb {
  position: relative;
}
.cm-main-menu-mobile ul li .cm-submenu .homemenu-thumb::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  background: rgba(38, 34, 33, 0.7);
  transition: all 0.3s 0s ease-out;
}
.cm-main-menu-mobile ul li .cm-submenu .homemenu-thumb:hover .homemenu-btn {
  opacity: 1;
  visibility: visible;
}
.cm-main-menu-mobile ul li .cm-submenu .homemenu-thumb:hover .homemenu-btn .menu-btn.show-1 {
  transform: translateY(0);
}
.cm-main-menu-mobile ul li .cm-submenu .homemenu-thumb:hover .homemenu-btn .menu-btn.show-2 {
  transform: translateY(0);
}
.cm-main-menu-mobile ul li .cm-submenu .homemenu-thumb:hover::before {
  opacity: 1;
}
.cm-main-menu-mobile ul li .cm-submenu .homemenu-title {
  font-size: 16px;
  font-weight: 600;
}
@media (max-width: 575px) {
  .cm-main-menu-mobile ul li .cm-submenu .homemenu-title {
    font-size: 14px;
  }
}
.cm-main-menu-mobile ul li .cm-submenu .homemenu-title a {
  border: none;
  color: var(--cm-common-black);
}
.cm-main-menu-mobile ul li .cm-submenu .homemenu-title a:hover {
  color: var(--cm-grey-1);
}
.cm-main-menu-mobile ul li .cm-submenu .homemenu-btn {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  opacity: 0;
  text-align: center;
  transform: translateY(-50%);
  visibility: hidden;
  transition: all 0.3s 0s ease-out;
}
.cm-main-menu-mobile ul li .cm-submenu .homemenu-btn .menu-btn {
  font-size: 14px;
  text-transform: uppercase;
  padding: 10px 15px;
  display: inline-block;
  width: 115px;
  background-size: 200% auto;
  overflow: hidden;
  border: none;
}

/*----------------------------------------*/
/*  4.1 mobilemenu css
/*----------------------------------------*/
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-main-menu {
    margin-left: 40px;
  }
}
.cm-main-menu nav ul li .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  padding: 15px 25px 17px 25px;
  background-color: var(--cm-common-white);
  transition: 0.4s;
  display: block;
  z-index: 6;
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.2s;
  transform-origin: top center;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  transform: perspective(300px) rotateX(-18deg);
  margin-left: 0;
}
.cm-main-menu nav ul li .submenu li {
  display: block;
  margin: 0;
}
.cm-main-menu nav ul li .submenu li a {
  padding: 6px 0px;
  display: block;
  transition: all 0.5s ease;
  text-transform: capitalize;
  text-align: left;
  position: relative;
  font-size: 15px;
  color: var(--cm-common-black);
  font-family: var(--cm-ff-common);
}
.cm-main-menu nav ul li .submenu li:hover > a {
  color: var(--cm-theme-primary);
}
.cm-main-menu nav ul li .submenu li .submenu {
  right: -144%;
  left: inherit;
  top: 0;
}
.cm-main-menu nav ul li:hover > .submenu {
  transform: perspective(300px) rotateX(0deg);
  visibility: visible;
  opacity: 1;
  transition-duration: 0.2s;
}
.cm-main-menu-port nav ul li .submenu li a {
  font-weight: 500;
  font-size: 18px;
}
.cm-main-menu-port nav ul li .submenu li:hover > a {
  color: var(--cm-grey-1);
}
.cm-main-menu-port nav ul li .submenu .homemenu-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--cm-common-black);
  font-family: var(--cm-ff-common);
}
.cm-main-menu-port nav ul li .submenu .homemenu-title a {
  font-size: 18px;
  font-weight: 500;
  color: var(--cm-common-black);
  font-family: var(--cm-ff-common);
}
.cm-main-menu-port nav ul li .submenu .homemenu-title a:hover {
  color: var(--cm-grey-1);
}
.cm-main-menu-crtv nav ul li .submenu li a {
  font-weight: 400;
  font-family: var(--cm-ff-kanit);
  font-size: 18px;
  text-transform: capitalize;
}
.cm-main-menu-crtv nav ul li .submenu li:hover > a {
  color: var(--cm-grey-1);
}
.cm-main-menu-ai nav ul li .submenu li a {
  font-size: 14px;
  font-weight: 600;
  font-family: var(--cm-ff-manrope);
  letter-spacing: 1px;
}
.cm-main-menu-ai nav ul li .submenu li:hover > a {
  color: var(--cm-common-apple) !important;
}
.cm-main-menu-ai nav ul li .submenu .homemenu-title {
  font-weight: 400;
  font-family: var(--cm-ff-manrope);
}
.cm-main-homemenu {
  width: 100%;
  padding: 55px 70px 0px 70px !important;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto !important;
}
.cm-main-homemenu .homemenu {
  position: relative;
  padding: 0px 10px;
  margin-bottom: 40px;
}
.cm-main-homemenu .homemenu-thumb {
  width: 100%;
  height: 250px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-main-homemenu .homemenu-thumb {
    height: 200px;
  }
}
.cm-main-homemenu .homemenu-thumb a {
  position: relative;
  padding: 10px;
  display: block;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-main-homemenu .homemenu-thumb a {
    padding: 0;
  }
}
.cm-main-homemenu .homemenu-thumb a:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(1, 15, 28, 0.3);
  visibility: hidden;
  opacity: 0;
  transition: 0.3s;
  z-index: 3;
}
.cm-main-homemenu .homemenu-thumb img {
  transition: all 0.7s ease;
  width: 100%;
  margin-top: -30px;
}
.cm-main-homemenu .homemenu-thumb:hover img {
  transform: scale(1.1);
}
.cm-main-homemenu .homemenu-thumb:hover a:before {
  opacity: 1;
  visibility: visible;
}
.cm-main-homemenu .homemenu-thumb .comeing-soon {
  position: relative;
}
.cm-main-homemenu .homemenu-thumb .comeing-soon::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(7px);
  content: "";
  z-index: 5;
}
.cm-main-homemenu .homemenu-btn {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  text-align: center;
  transform: translateY(-20%);
  transition: all 0.3s 0s ease-out;
  opacity: 0;
}
.cm-main-homemenu .homemenu-btn .menu-btn {
  position: relative;
  font-size: 14px;
  text-transform: uppercase;
  padding: 10px 20px;
  width: 128px;
  overflow: hidden;
  color: var(--cm-common-black);
}
.cm-main-homemenu .homemenu-btn .menu-btn:hover {
  color: var(--cm-common-white);
}
.cm-main-homemenu .homemenu-btn .menu-btn.cm-btn-black {
  color: var(--cm-common-white);
}
.cm-main-homemenu .homemenu-btn .menu-btn.cm-btn-black:hover {
  color: var(--cm-common-black);
}
.cm-main-homemenu .homemenu-title {
  padding: 0;
  font-size: 18px;
  font-weight: 400;
  color: var(--cm-common-black);
  font-family: var(--cm-ff-kanit);
}
.cm-main-homemenu .homemenu-title a {
  padding: 0;
  font-size: 18px;
  font-weight: 400;
  color: var(--cm-common-black);
  text-transform: capitalize;
}
.cm-main-homemenu .homemenu-title a:hover {
  color: var(--cm-grey-1);
}

/*----------------------------------------*/
/*  5.2 Postbox css
/*----------------------------------------*/
.cm-postbox-meta {
  color: var(--cm-grey-1);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  font-family: var(--cm-ff-kanit);
  display: inline-block;
}
.cm-postbox-title {
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -2.24px;
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-manrope);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-postbox-title {
    font-size: 40px;
  }
}
.cm-postbox-title a {
  background-image: linear-gradient(#121212, #121212), linear-gradient(#121212, #121212);
  background-size: 0 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.cm-postbox-title a:hover {
  background-image: linear-gradient(#121212, #121212), linear-gradient(#121212, #121212);
  background-size: 0 1px, 100% 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
}
.cm-postbox-play-btn .popup-video {
  height: 66px;
  width: 66px;
  line-height: 66px;
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  border-radius: 50%;
  animation: pulse 2s infinite;
  transform: translate(-50%, -50%);
  color: var(--cm-common-white);
  border: 2px solid var(--cm-common-white);
}
.cm-postbox-thumb img {
  border-radius: 12px;
}
.cm-postbox-text p {
  color: var(--cm-grey-1);
  font-size: 17px;
  font-weight: 400;
  line-height: 26px;
  margin-bottom: 30px;
  font-family: var(--cm-ff-kanit);
}
.cm-postbox-btn {
  height: 52px;
  line-height: 47px;
  border-radius: 40px;
  padding: 0 30px;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.03em;
  z-index: 9;
  overflow: hidden;
  display: inline-block;
  text-transform: capitalize;
  position: relative;
  transition: all 0.3s;
  font-family: var(--cm-ff-kanit);
  background-color: var(--cm-common-black);
  color: var(--cm-common-white);
  border: 2px solid transparent;
}
.cm-postbox-btn:hover {
  border-color: var(--cm-common-black-2);
  background: transparent;
  color: var(--cm-common-black-2);
}
.cm-postbox-details-top-text p {
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
  color: var(--cm-grey-1);
  font-family: var(--cm-ff-kanit);
}
.cm-postbox-comment ul li {
  margin-bottom: 45px;
  list-style: none;
}
.cm-postbox-comment ul li.children {
  margin-left: 65px;
}
@media (max-width: 575px) {
  .cm-postbox-comment ul li.children {
    margin-left: 15px;
  }
}
.cm-postbox-comment-title {
  font-size: 28px;
  color: #121416;
  font-weight: 600;
  margin-bottom: 20px;
}
.cm-postbox-comment-box {
  padding-top: 20px;
}
@media (max-width: 575px) {
  .cm-postbox-comment-box {
    flex-wrap: wrap;
  }
}
.cm-postbox-comment-info {
  flex: 0 0 auto;
}
@media (max-width: 575px) {
  .cm-postbox-comment-avater {
    margin-right: 0;
  }
}
.cm-postbox-comment-avater img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
}
@media (max-width: 575px) {
  .cm-postbox-comment-avater img {
    margin-bottom: 30px;
  }
}
.cm-postbox-comment-name {
  margin-bottom: 17px;
}
.cm-postbox-comment-name h5 {
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.4px;
  color: var(--cm-common-black-2);
  margin-bottom: 0;
  font-family: var(--cm-ff-kanit);
}
.cm-postbox-comment-name span {
  color: var(--cm-grey-1);
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  font-family: var(--cm-ff-kanit);
}
.cm-postbox-comment-text p {
  color: var(--cm-grey-1);
  font-size: 17px;
  font-weight: 300;
  font-family: var(--cm-ff-kanit);
  line-height: 26px;
}
.cm-postbox-comment-reply a {
  color: var(--cm-common-black-2);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  padding: 5px 20px;
  border: 1px solid #E0E2E3;
  font-family: var(--cm-ff-kanit);
  border-radius: 30px;
}
.cm-postbox-comment-reply a:hover {
  background-color: var(--cm-common-black-2);
  color: var(--cm-common-white);
  border-color: var(--cm-common-white);
}

.cm-postbox-details-form p {
  color: var(--cm-grey-1);
  font-family: var(--cm-ff-kanit);
  font-size: 17px;
  font-weight: 300;
  line-height: 26px;
}
@media (max-width: 575px) {
  .cm-postbox-details-form p {
    font-size: 16px;
  }
}
.cm-postbox-details-form-title {
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-manrope);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.68px;
}
.cm-postbox-details-remeber {
  display: flex;
}
.cm-postbox-details-remeber input {
  width: 15px;
  height: 15px;
  transform: translateY(6px);
  margin-right: 6px;
}
.cm-postbox-details-remeber label {
  color: var(--cm-grey-1);
  font-size: 16px;
  font-weight: 300;
  line-height: 26px;
  font-family: var(--cm-ff-kanit);
  cursor: pointer;
}

.sidebar__wrapper {
  padding-left: 70px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sidebar__wrapper {
    padding-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .sidebar__wrapper {
    margin-top: 40px;
    padding-left: 0;
  }
}
.sidebar__widget-title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: var(--cm-common-black);
  margin-bottom: 25px;
  font-family: var(--cm-ff-kanit);
}
.sidebar__widget ul li {
  list-style: none;
  margin-bottom: 20px;
  line-height: 0;
}
.sidebar__widget ul li:last-child {
  margin-bottom: 0;
}
.sidebar__widget ul li a {
  color: #414145;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  background-image: -webkit-radial-gradient(#414145, #414145), -webkit-radial-gradient(#414145, #414145);
  background-image: -moz-radial-gradient(#414145, #414145), -moz-radial-gradient(#414145, #414145);
  background-image: -ms-radial-gradient(#414145, #414145), -ms-radial-gradient(#414145, #414145);
  background-image: -o-radial-gradient(#414145, #414145), -o-radial-gradient(#414145, #414145);
  background-image: radial-gradient(#414145, #414145), radial-gradient(#414145, #414145);
  background-size: 0% 1px, 0 1px;
  background-position: 100% 100%, 0 91%;
  background-repeat: no-repeat;
  font-family: var(--cm-ff-kanit);
}
.sidebar__widget ul li a:hover {
  background-size: 0 1px, 100% 1px;
}
.sidebar__about {
  padding: 37px 0 38px 0;
}
.sidebar__thumb img {
  border-radius: 50%;
  margin-bottom: 20px;
}
.sidebar__content-title {
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--cm-common-black);
  margin-bottom: 6px;
}
.sidebar__content-designation {
  font-weight: 400;
  font-size: 14px;
  color: #727A7D;
  display: block;
  margin-bottom: 13px;
}
.sidebar__content p {
  font-size: 16px;
  color: #838383;
  margin-bottom: 27px;
}
.sidebar__content-social a {
  height: 37px;
  width: 42px;
  line-height: 37px;
  text-align: center;
  display: inline-block;
  border: 1px solid #E8E8E8;
  margin-right: 12px;
}
.sidebar__content-social a i {
  transition: 0.3s;
}
.sidebar__content-social a:hover {
  border: 1px solid var(--cm-theme-1);
  background-color: var(--cm-theme-1);
}
.sidebar__content-social a:hover i {
  color: var(--cm-common-white);
}
.sidebar__search {
  position: relative;
}
.sidebar__search input {
  width: 100%;
  height: 60px;
  line-height: 52px;
  padding: 0 25px;
  outline: none;
  border: none;
  padding-right: 50px;
  background: transparent;
  border: 1px solid #D9D9D9;
  font-family: var(--cm-ff-kanit);
  border-radius: 6px;
}
.sidebar__search input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #5D5D63;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  font-family: var(--cm-ff-kanit);
}
.sidebar__search input::-moz-placeholder { /* Firefox 19+ */
  color: #5D5D63;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  font-family: var(--cm-ff-kanit);
}
.sidebar__search input:-moz-placeholder { /* Firefox 4-18 */
  color: #5D5D63;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  font-family: var(--cm-ff-kanit);
}
.sidebar__search input:-ms-input-placeholder { /* IE 10+  Edge*/
  color: #5D5D63;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  font-family: var(--cm-ff-kanit);
}
.sidebar__search input::placeholder { /* MODERN BROWSER */
  color: #5D5D63;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  font-family: var(--cm-ff-kanit);
}
.sidebar__search button {
  position: absolute;
  top: 0;
  right: 25px;
  height: 100%;
  line-height: 60px;
  color: var(--cm-common-black);
}
.sidebar__banner-img img {
  border-radius: 8px;
}
.sidebar__banner::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(65, 65, 69, 0.5);
}
.sidebar__banner-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
  background: var(--cm-common-white);
}
.sidebar__banner-content h4 {
  padding: 15px 20px;
  font-size: 24px;
  color: var(--cm-common-black);
  text-transform: uppercase;
  margin-bottom: 0;
}
.sidebar__social a {
  height: 45px;
  width: 45px;
  border-radius: 50%;
  text-align: center;
  line-height: 45px;
  display: inline-block;
  color: var(--cm-common-black);
  border: 1px solid rgba(25, 25, 26, 0.14);
  margin-right: 8px;
  font-size: 18px;
}
.sidebar__social a:hover {
  background-color: var(--cm-common-black);
  border-color: var(--cm-common-black);
  color: var(--cm-common-white);
}
@media (max-width: 575px) {
  .sidebar__banner-img img {
    width: 100%;
  }
}

.tagcloud a {
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  padding: 6px 15px;
  margin-right: 5px;
  margin-bottom: 14px;
  display: inline-block;
  text-transform: uppercase;
  color: var(--cm-common-black);
  border: 1px solid rgba(25, 25, 26, 0.1);
  font-family: var(--cm-ff-kanit);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tagcloud a {
    padding: 6px 12px;
  }
}
.tagcloud a:hover {
  color: var(--cm-common-white);
  background-color: var(--cm-common-black);
  border-color: var(--cm-common-black);
}

.rc__post ul li:not(:last-child) {
  margin-bottom: 15px;
}
.rc__post-title {
  font-size: 20px;
  font-weight: 400;
  line-height: 22px;
  color: var(--cm-common-black);
  font-family: var(--cm-ff-kanit);
}
.rc__post-title a {
  background-image: -webkit-radial-gradient(#000, #000), -webkit-radial-gradient(#000, #000);
  background-image: -moz-radial-gradient(#000, #000), -moz-radial-gradient(#000, #000);
  background-image: -ms-radial-gradient(#000, #000), -ms-radial-gradient(#000, #000);
  background-image: -o-radial-gradient(#000, #000), -o-radial-gradient(#000, #000);
  background-image: radial-gradient(#000, #000), radial-gradient(#000, #000);
  background-size: 0% 1px, 0 1px;
  background-position: 100% 100%, 0 91%;
  background-repeat: no-repeat;
}
.rc__post-title a:hover {
  background-size: 0 1px, 100% 1px;
}
.rc__meta span {
  color: #414145;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 15px;
  display: inline-block;
  font-family: var(--cm-ff-kanit);
}
.rc__post-thumb {
  flex: 0 0 auto;
}
.rc__post-thumb img {
  border-radius: 8px;
}

/*----------------------------------------*/
/*  5.1 Blog css
/*----------------------------------------*/
.cm-blog-subtitle .style {
  color: var(--cm-common-black);
  display: inline-block;
  background: var(--cm-theme-primary);
  padding: 3px 15px 0 15px;
  font-weight: 500;
}
.cm-blog-content {
  padding: 0 20px;
}
.cm-blog-thumb img {
  transition: all 0.4s ease;
}
.cm-blog-wrapper:hover .cm-blog-thumb img {
  transform: scale(1.1);
}
.cm-blog-title a {
  background-image: linear-gradient(white, white), linear-gradient(white, white);
  background-size: 0 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.cm-blog-title a:hover {
  background-image: linear-gradient(white, white), linear-gradient(white, white);
  background-size: 0 1px, 100% 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
}
.cm-blog-btn:hover {
  color: var(--cm-theme-primary);
}
.cm-blog-crtv-date {
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-kanit);
  font-size: 16px;
  display: inline-block;
  font-weight: 300;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-blog-crtv-btn {
    text-align: left;
  }
}
.cm-blog-crtv-wrap {
  border: 1px solid #E9E9E9;
  border-radius: 12px;
}
.cm-blog-crtv-wrap:hover .cm-blog-crtv-thumb img {
  transform: scale(1.1);
}
.cm-blog-crtv-thumb {
  overflow: hidden;
  border-radius: 12px 0px 0px 12px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-blog-crtv-thumb {
    border-radius: 12px 12px 0 0;
  }
}
.cm-blog-crtv-thumb img {
  border-radius: 12px 0px 0px 12px;
  -webkit-transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-blog-crtv-thumb img {
    border-radius: 12px 12px 0 0;
  }
}
.cm-blog-crtv-title {
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-marcellus);
  font-size: 32px;
}
.cm-blog-crtv-title a {
  background-image: linear-gradient(#121212, #121212), linear-gradient(#121212, #121212);
  background-size: 0 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.cm-blog-crtv-title a:hover {
  background-image: linear-gradient(#121212, #121212), linear-gradient(#121212, #121212);
  background-size: 0 1px, 100% 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .cm-blog-crtv-title {
    font-size: 30px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-blog-crtv-title {
    font-size: 22px;
    margin-bottom: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-blog-crtv-title {
    margin-bottom: 50px;
  }
}
.cm-blog-crtv-content {
  padding-right: 24px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-blog-crtv-content {
    padding: 24px;
  }
}
.cm-blog-crtv-tag span {
  background: #E9E9E9;
  color: var(--cm-common-black-2);
  display: inline-block;
  font-family: var(--cm-ff-kanit);
  padding: 4px 15px;
  border-radius: 6px;
  font-weight: 300;
}
.cm-blog-ai-btn {
  font-size: 24px;
  font-family: var(--cm-ff-manrope);
  color: var(--cm-common-black-2);
  font-weight: 500;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cm-blog-ai-btn {
    font-size: 29px;
  }
}
.cm-blog-ai-btn a {
  font-weight: 700;
  background-image: linear-gradient(#121212, #121212), linear-gradient(#121212, #121212);
  background-size: 0 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.cm-blog-ai-btn a:hover {
  background-image: linear-gradient(#121212, #121212), linear-gradient(#121212, #121212);
  background-size: 0 1px, 100% 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
}
.cm-blog-ai-btn a i {
  transform: translateY(2px);
}
.cm-blog-ai-wrap .cm-blog-crtv-date {
  font-family: var(--cm-ff-manrope);
}
.cm-blog-ai-wrap .cm-blog-crtv-title {
  font-family: var(--cm-ff-manrope);
}
.cm-blog-ai-wrap .cm-blog-crtv-tag span {
  font-family: var(--cm-ff-manrope);
}
.cm-blog-ai-wrap .cm-blog-crtv-content {
  padding: 0 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-blog-ai-wrap .cm-blog-crtv-content {
    padding: 24px;
  }
}
.cm-blog-brand-thumb .image-container {
  height: 490px;
}
@media (max-width: 575px) {
  .cm-blog-brand-thumb .image-container {
    height: 450px;
  }
}
.cm-blog-brand-thumb img {
  border-radius: 12px;
}
.cm-blog-brand-thumb .cm-project-brand-tag {
  bottom: 20px;
  right: auto;
  left: 20px;
}
.cm-blog-brand-thumb .cm-btn-brand {
  background: var(--cm-common-white);
  color: var(--cm-common-black-3);
}
@media (max-width: 575px) {
  .cm-blog-brand-thumb .cm-btn-brand {
    margin-top: 10px;
  }
}
.cm-blog-brand-title {
  font-family: var(--cm-ff-kanit);
  color: var(--cm-common-black-3);
  font-size: 30px;
  font-weight: 400;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-blog-brand-title {
    font-size: 20px;
  }
}
.cm-blog-brand-title a {
  background-image: linear-gradient(#3f4144, #3f4144), linear-gradient(#3f4144, #3f4144);
  background-size: 0 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.cm-blog-brand-title a:hover {
  background-image: linear-gradient(#3f4144, #3f4144), linear-gradient(#3f4144, #3f4144);
  background-size: 0 1px, 100% 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
}
.cm-blog-recent-wrapper .cm-blog-crtv-title {
  font-family: var(--cm-ff-manrope);
  font-size: 28px;
}
.cm-blog-details-top-author img {
  margin-right: 15px;
}
.cm-blog-details-top-author span {
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-kanit);
}
.cm-blog-details-top-author span i {
  color: var(--cm-grey-1);
}
.cm-blog-details-left-title {
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.6px;
  color: var(--cm-common-black);
  margin-bottom: 20px;
  font-family: var(--cm-ff-manrope);
}
.cm-blog-details-left-content p {
  color: var(--cm-grey-1);
  font-size: 18px;
  font-weight: 300;
  font-family: var(--cm-ff-kanit);
  line-height: 28px;
}
.cm-blog-details-thumb img {
  border-radius: 12px;
}
.cm-blog-details-blockquote {
  margin-left: 100px;
  position: relative;
  margin-bottom: 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-blog-details-blockquote {
    margin-left: 40px;
  }
}
@media (max-width: 575px) {
  .cm-blog-details-blockquote {
    margin-left: 0px;
  }
}
.cm-blog-details-blockquote p {
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.88px;
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-kanit);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-blog-details-blockquote p {
    font-size: 36px;
  }
}
@media (max-width: 575px) {
  .cm-blog-details-blockquote p {
    font-size: 30px;
  }
}
.cm-blog-details-blockquote .quote-icon {
  position: absolute;
  top: -30px;
  left: -35px;
}
.cm-blog-details-blockquote .blockquote-info {
  color: var(--cm-grey-1);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  font-family: var(--cm-ff-kanit);
}
.cm-blog-details-tag a, .cm-blog-details-share a {
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  color: var(--cm-common-black-2);
  margin-left: 20px;
  position: relative;
}
.cm-blog-details-tag a::after, .cm-blog-details-share a::after {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 1px;
  content: "";
  transition: 0.4s;
  background-color: var(--cm-common-black-2);
}
.cm-blog-details-tag a:hover::after, .cm-blog-details-share a:hover::after {
  right: auto;
  left: 0;
  width: 100%;
}
@media (max-width: 575px) {
  .cm-blog-details-tag a, .cm-blog-details-share a {
    margin-left: 10px;
  }
}
.cm-blog-details-tag span, .cm-blog-details-share span {
  transform: translateY(-2px);
  display: inline-block;
}

.cm-pagenation ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.cm-pagenation ul li a {
  color: var(--cm-common-black-2);
  height: 46px;
  width: 46px;
  line-height: 46px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  display: inline-block;
  border-radius: 100px;
  font-family: var(--cm-ff-kanit);
  border: 1px solid rgba(25, 25, 26, 0.2);
  transition: 0.3s;
}
.cm-pagenation ul li a:hover {
  background: var(--cm-common-black-2);
  color: var(--cm-common-white);
}

/*----------------------------------------*/
/*  5.1 Footer Style 1
/*----------------------------------------*/
.cm-footer-widget-idea {
  font-size: 28px;
}
.cm-footer-widget-idea-para {
  line-height: 1.4;
  font-size: 22px;
  color: var(--cm-grey-2);
}
.cm-footer-widget-content p {
  letter-spacing: 1px;
  margin-bottom: 0;
}
.cm-footer-widget-content a {
  background-image: linear-gradient(#ffc07c, #ffc07c), linear-gradient(#ffc07c, #ffc07c);
  background-size: 0 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  color: var(--cm-grey-2);
  letter-spacing: 1px;
}
.cm-footer-widget-content a:hover {
  background-image: linear-gradient(#ffc07c, #ffc07c), linear-gradient(#ffc07c, #ffc07c);
  background-size: 0 1px, 100% 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
  color: var(--cm-theme-primary);
}
.cm-footer-widget-content ul li {
  list-style: none;
}
.cm-footer-widget-content ul li:not(:last-child) {
  margin-bottom: 7px;
}
.cm-footer-widget-content ul li a {
  color: var(--cm-grey-2);
  letter-spacing: 1px;
}
.cm-footer-widget-content ul li a:hover {
  color: var(--cm-theme-primary);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cm-footer-widget-wrapper.mr-150 {
    margin-right: 70px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-footer-widget-wrapper {
    margin-right: 0;
  }
}
.cm-footer-left-title {
  line-height: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-footer-left-title {
    font-size: 40;
  }
}
.cm-footer-left-appointment {
  margin-right: 67px;
  color: var(--cm-grey-2);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-footer-left-appointment {
    margin-right: 0;
  }
}
.cm-footer-copyright p {
  margin-bottom: 0;
  letter-spacing: 1px;
}
.cm-footer-copyright a {
  background-image: linear-gradient(#ffc07c, #ffc07c), linear-gradient(#ffc07c, #ffc07c);
  background-size: 0 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  color: var(--cm-grey-2);
}
.cm-footer-copyright a:hover {
  background-image: linear-gradient(#ffc07c, #ffc07c), linear-gradient(#ffc07c, #ffc07c);
  background-size: 0 1px, 100% 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
  color: var(--cm-theme-primary);
}
.cm-footer-social {
  display: flex;
}
.cm-footer-social a {
  width: 50px;
  height: 50px;
  display: inline-block;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(224, 203, 203, 0.2784313725);
  border-radius: 50%;
  color: var(--cm-theme-primary);
  margin-right: 10px;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.cm-footer-social a:hover {
  background-color: var(--cm-theme-primary);
  border-color: var(--cm-theme-primary);
  color: var(--cm-common-white);
}
.cm-footer-social-wrap {
  border-top: 1px solid rgba(224, 203, 203, 0.2784313725);
  padding-top: 40px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) {
  .cm-footer-social-wrap {
    flex-direction: column;
  }
}
.cm-footer-subs-form {
  position: relative;
}
.cm-footer-subs-form input {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  font-size: 14px;
  color: var(--cm-common-white);
  letter-spacing: 1px;
  border: 1px solid transparent;
  padding-right: 10px;
}
.cm-footer-subs-form input:focus {
  border: 1px solid var(--cm-theme-primary);
}
.cm-footer-subs-form input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-size: 14px;
  color: var(--cm-grey-2);
  letter-spacing: 1px;
}
.cm-footer-subs-form input::-moz-placeholder { /* Firefox 19+ */
  font-size: 14px;
  color: var(--cm-grey-2);
  letter-spacing: 1px;
}
.cm-footer-subs-form input:-moz-placeholder { /* Firefox 4-18 */
  font-size: 14px;
  color: var(--cm-grey-2);
  letter-spacing: 1px;
}
.cm-footer-subs-form input:-ms-input-placeholder { /* IE 10+  Edge*/
  font-size: 14px;
  color: var(--cm-grey-2);
  letter-spacing: 1px;
}
.cm-footer-subs-form input::placeholder { /* MODERN BROWSER */
  font-size: 14px;
  color: var(--cm-grey-2);
  letter-spacing: 1px;
}
.cm-footer-subs-form button {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 20px;
}
.cm-footer-subs-form button:hover {
  color: var(--cm-theme-primary);
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .cm-footer-port-widget {
    margin-left: 40px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-footer-port-widget {
    margin-left: 0;
  }
}
.cm-footer-port-title {
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-manrope);
  font-size: 180px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.8em;
  display: block;
  letter-spacing: -3px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .cm-footer-port-title {
    font-size: 160px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cm-footer-port-title {
    font-size: 130px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-footer-port-title {
    font-size: 105px;
  }
}
@media (max-width: 575px) {
  .cm-footer-port-title {
    font-size: 62px;
  }
}
.cm-footer-port-title div {
  color: #121212;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-footer-port-block-text {
    text-align: left !important;
    margin-top: 50px;
  }
}
.cm-footer-port-block-text a {
  font-size: 28px;
  font-weight: 500;
  text-decoration: none;
  font-family: var(--cm-ff-manrope);
  color: var(--cm-common-black-2);
  border: 1px solid #E0E0E0;
  display: inline-block;
  border-radius: 50px;
  padding: 26px 37px;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .cm-footer-port-block-text a {
    padding: 26px 30px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-footer-port-block-text a {
    padding: 16px 15px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-footer-port-block-text a {
    font-size: 22px;
  }
}
@media (max-width: 575px) {
  .cm-footer-port-block-text a {
    font-size: 19px;
  }
}
.cm-footer-port-block-text a img {
  transform: translateY(-2px);
}
.cm-footer-port-top {
  border-bottom: 2px solid #E0E0E0;
}
.cm-footer-port-widget-title {
  color: var(--cm-common-black-2);
  font-size: 28px;
  font-family: var(--cm-ff-manrope);
  font-weight: 600;
}
.cm-footer-port-widget-title.cm-blod span {
  font-weight: 800;
  font-size: 30px;
}
.cm-footer-port-widget-title.cm-blod a {
  text-decoration: underline;
}
.cm-footer-port-widget-btn a {
  font-size: 30px;
  background: var(--cm-common-black-2);
  color: var(--cm-common-white);
  font-family: var(--cm-ff-manrope);
  border: 2px solid var(--cm-common-black-2);
  display: inline-block;
  padding: 23px 30px;
  border-radius: 50px;
  font-weight: 500;
  transition: all 0.4s ease;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-footer-port-widget-btn a {
    font-size: 22px;
    padding: 17px 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-footer-port-widget-btn a {
    font-size: 18px;
  }
}
.cm-footer-port-widget-btn a:hover {
  color: var(--cm-common-black-2);
  background: transparent;
}
.cm-footer-port-widget-list ul {
  grid-column-gap: 1em;
  grid-row-gap: 0.5em;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
@media (max-width: 575px) {
  .cm-footer-port-widget-list ul {
    grid-template-columns: 1fr 1fr;
  }
}
.cm-footer-port-widget-list ul li {
  list-style: none;
}
.cm-footer-port-widget-list ul li a {
  position: relative;
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-kanit);
  font-size: 20px;
  font-weight: 500;
  -webkit-transition: all 0.3s 0s ease-out;
  -moz-transition: all 0.3s 0s ease-out;
  -ms-transition: all 0.3s 0s ease-out;
  -o-transition: all 0.3s 0s ease-out;
  transition: all 0.3s 0s ease-out;
  display: inline-block;
  padding: 7px 0px;
}
.cm-footer-port-widget-list ul li a:hover {
  padding-left: 20px;
}
.cm-footer-port-widget-list ul li a:hover::before {
  opacity: 1;
}
.cm-footer-port-widget-list ul li a::before {
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  background: var(--cm-common-black-2);
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 20px;
  -webkit-transition: all 0.3s 0s ease-out;
  -moz-transition: all 0.3s 0s ease-out;
  -ms-transition: all 0.3s 0s ease-out;
  -o-transition: all 0.3s 0s ease-out;
  transition: all 0.3s 0s ease-out;
  opacity: 0;
}
.cm-footer-port-widget-social {
  display: flex;
  align-items: center;
}
.cm-footer-port-widget-social a {
  width: 70px;
  height: 70px;
  border: 1px solid #E0E0E0;
  display: inline-block;
  font-size: 24px;
  color: var(--cm-common-black-2);
  text-align: center;
  line-height: 70px;
  border-radius: 50%;
  margin-right: 12px;
  -webkit-transition: all 0.3s 0s ease-out;
  -moz-transition: all 0.3s 0s ease-out;
  -ms-transition: all 0.3s 0s ease-out;
  -o-transition: all 0.3s 0s ease-out;
  transition: all 0.3s 0s ease-out;
}
.cm-footer-port-widget-social a:hover {
  background: var(--cm-common-black-2);
  color: var(--cm-common-white);
  border-color: var(--cm-common-black-2);
}
.cm-footer-crtv-subtitle {
  font-size: 30px;
  font-weight: 700;
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-marcellus);
  display: inline-block;
}
.cm-footer-crtv-title {
  font-weight: 800;
  font-family: var(--cm-ff-marcellus);
  line-height: 1;
  letter-spacing: -2px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-footer-crtv-title {
    letter-spacing: -3px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-footer-crtv-title {
    font-size: 120px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-footer-crtv-title {
    font-size: 90px;
  }
}
@media (max-width: 575px) {
  .cm-footer-crtv-title {
    font-size: 60px;
  }
}
.cm-footer-ai-title {
  font-size: 140px;
  font-family: var(--cm-ff-antonio);
  color: var(--cm-common-black-2);
  text-transform: uppercase;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cm-footer-ai-title {
    font-size: 120px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-footer-ai-title {
    font-size: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-footer-ai-title {
    font-size: 80px;
  }
}
@media (max-width: 575px) {
  .cm-footer-ai-title {
    font-size: 65px;
  }
}
.cm-footer-ai-subscribe-form input {
  width: 600px;
  height: 60px;
  font-family: var(--cm-ff-manrope);
  font-size: 15px;
  color: var(--cm-common-black-2);
  border-radius: 12px;
  line-height: 60px;
  padding-right: 174px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-footer-ai-subscribe-form input {
    width: 100%;
  }
}
@media (max-width: 575px) {
  .cm-footer-ai-subscribe-form input {
    padding-right: 30px;
  }
}
.cm-footer-ai-subscribe-form input:focus {
  border: 1px solid var(--cm-common-apple);
}
.cm-footer-ai-subscribe-form input::placeholder {
  font-family: var(--cm-ff-manrope);
  font-size: 18px;
}
.cm-footer-ai-subscribe-form form {
  position: relative;
  display: inline-block;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-footer-ai-subscribe-form form {
    display: block;
  }
}
.cm-footer-ai-subscribe-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 7px;
  border-radius: 12px;
}
@media (max-width: 575px) {
  .cm-footer-ai-subscribe-btn {
    position: inherit;
    transform: translateY(0);
    margin-top: 20px;
  }
}
.cm-footer-brand-title {
  font-family: var(--cm-ff-kanit);
  font-size: 24px;
  font-weight: 500;
  color: var(--cm-common-white);
  text-transform: uppercase;
}
@media (max-width: 575px) {
  .cm-footer-brand-title {
    font-size: 20px;
  }
}
.cm-footer-brand-widget ul li {
  list-style: none;
  margin-bottom: 15px;
}
.cm-footer-brand-widget ul li a {
  color: var(--cm-grey-2);
  font-family: var(--cm-ff-kanit);
  font-weight: 300;
  font-size: 18px;
  text-transform: uppercase;
  background-image: linear-gradient(#d2cfcf, #d2cfcf), linear-gradient(#d2cfcf, #d2cfcf);
  background-size: 0 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.cm-footer-brand-widget ul li a:hover {
  background-image: linear-gradient(#d2cfcf, #d2cfcf), linear-gradient(#d2cfcf, #d2cfcf);
  background-size: 0 1px, 100% 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
}
.cm-footer-brand-news-wrap {
  background: var(--cm-common-black-3);
  border-radius: 12px;
  padding: 43px 55px 44px 50px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), (max-width: 575px) {
  .cm-footer-brand-news-wrap {
    padding: 23px 25px 24px 20px;
  }
}
.cm-footer-brand-news-wrap .cm-footer-subs-form input {
  border-radius: 8px;
}
.cm-footer-brand-news-wrap .cm-footer-subs-form input::placeholder {
  font-family: var(--cm-ff-kanit);
}
.cm-footer-brand-news-wrap .cm-footer-subs-form input:focus {
  border-color: var(--cm-common-white);
}
.cm-footer-brand-news-wrap .cm-footer-subs-form button {
  color: var(--cm-grey-2);
}
.cm-footer-brand-news-wrap .cm-footer-subs-form button:hover {
  color: var(--cm-common-white);
}
.cm-footer-brand-news-title {
  font-size: 64px;
  text-transform: lowercase;
  line-height: 1;
  letter-spacing: 4px;
  font-family: var(--cm-ff-dirtyline);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-footer-brand-news-title {
    font-size: 50px;
  }
}
@media (max-width: 575px) {
  .cm-footer-brand-news-title {
    font-size: 40px;
  }
}
.cm-footer-brand-bigtext {
  text-align: center;
}
.cm-footer-brand-bigtext h2 {
  font-family: var(--cm-ff-dirtyline);
  color: #eef3f3;
  font-weight: 800;
  text-transform: lowercase;
  font-size: 350px;
  line-height: 0.8;
  margin-bottom: -52px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cm-footer-brand-bigtext h2 {
    font-size: 250px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-footer-brand-bigtext h2 {
    font-size: 200px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-footer-brand-bigtext h2 {
    font-size: 150px;
    margin-bottom: -30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-footer-brand-bigtext h2 {
    font-size: 120px;
    margin-bottom: -20px;
  }
}
@media (max-width: 575px) {
  .cm-footer-brand-bigtext h2 {
    font-size: 70px;
    margin-bottom: -12px;
  }
}
.cm-footer-brand-copyright p {
  font-family: var(--cm-ff-kanit);
  color: var(--cm-common-black-3);
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 0;
  padding: 24px 0px;
}

/*----------------------------------------*/
/* 6.9 hero
/*----------------------------------------*/
.cm-hero-title {
  font-size: 90px;
  color: var(--cm-grey-2);
  text-transform: uppercase;
  font-weight: 700;
}
.cm-hero-title span {
  align-items: center;
  display: flex;
}
.cm-hero-pt {
  padding-top: 305px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-hero-pt {
    padding-top: 250px;
  }
}
@media (max-width: 575px) {
  .cm-hero-pt {
    padding-top: 180px;
  }
}
.cm-hero-social {
  position: absolute;
  top: 41%;
  right: 100px;
}
.cm-hero-social ul li {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.cm-hero-social ul li a {
  font-size: 23px;
  color: var(--cm-grey-2);
}
.cm-hero-social ul li a:hover {
  color: var(--cm-theme-primary);
}
.cm-hero-social ul li a:not(:last-child) {
  margin-bottom: 50px;
  position: relative;
}
.cm-hero-social ul li a:not(:last-child)::before {
  position: absolute;
  content: "";
  height: 30px;
  width: 1px;
  top: 33px;
  background-color: var(--cm-grey-2);
  left: 11px;
}
.cm-hero-bg {
  position: absolute;
  width: 100%;
  height: 950px;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(20, 20, 20, 0.6);
  z-index: -1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-hero-bg {
    height: 850px;
  }
}
.cm-hero-showcase .cm-hero-title div {
  display: block;
  overflow: hidden;
  line-height: 1;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-hero-showcase .cm-hero-title div {
    font-size: 60px;
  }
}
@media (max-width: 575px) {
  .cm-hero-showcase .cm-hero-title div {
    font-size: 45px;
  }
}
.cm-hero-showcase .cm-hero-title div span {
  position: relative;
  display: block;
  opacity: 0;
  transform: translateY(200px);
  -webkit-transform: translateY(200px);
  transition: 1s;
  overflow: hidden;
}
.cm-hero-showcase .cm-hero-title div a {
  position: relative;
  display: block;
  opacity: 0;
  transform: translateY(200px);
  -webkit-transform: translateY(200px);
  transition: 1s;
  overflow: hidden;
}
.cm-hero-showcase .swiper-slide-active .cm-hero-title div span {
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}
.cm-hero-showcase .swiper-slide-active .cm-hero-title div a {
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}
.cm-hero-showcase #canvas-slider {
  width: 100%;
  height: 950px;
  position: relative;
  top: 0;
  right: 0;
  overflow: hidden;
  -webkit-transition: width 0.5s ease-in-out 0;
  transition: width 0.5s ease-in-out 0s;
  z-index: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-hero-showcase #canvas-slider {
    height: 850px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-hero-showcase #canvas-slider {
    height: 750px;
  }
}
@media (max-width: 575px) {
  .cm-hero-showcase #canvas-slider {
    height: 600px;
  }
}
.cm-hero-showcase #canvas-slider .slider-img {
  position: absolute;
  height: 950px;
  width: 100%;
  background-size: cover;
  background-position: center center;
  background-color: #222;
  visibility: hidden;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0;
  -webkit-transform: scale(1.01);
  transform: scale(1.01);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-hero-showcase #canvas-slider .slider-img {
    height: 750px;
  }
}
@media (max-width: 575px) {
  .cm-hero-showcase #canvas-slider .slider-img {
    height: 600px;
  }
}
.cm-hero-showcase #showcase-slider-holder {
  width: 100%;
  height: 950px;
  position: absolute;
  overflow: hidden;
  opacity: 1;
  z-index: 2;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-hero-showcase #showcase-slider-holder {
    height: 750px;
  }
}
@media (max-width: 575px) {
  .cm-hero-showcase #showcase-slider-holder {
    height: 600px;
  }
}
.cm-hero-showcase .port-showcase-slider-item {
  height: 950px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-hero-showcase .port-showcase-slider-item {
    height: 750px;
  }
}
@media (max-width: 575px) {
  .cm-hero-showcase .port-showcase-slider-item {
    height: 600px;
  }
}
.cm-hero-showcase .parallax-slider-active .swiper-slide {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 950px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-hero-showcase .parallax-slider-active .swiper-slide {
    height: 750px;
  }
}
@media (max-width: 575px) {
  .cm-hero-showcase .parallax-slider-active .swiper-slide {
    height: 600px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-hero-showcase .parallax-slider-active .swiper-slide {
    font-size: 155px;
  }
}
.cm-hero-showcase .parallax-slider-active .swiper-container {
  width: 100%;
  height: 950px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-hero-showcase .parallax-slider-active .swiper-container {
    height: 750px;
  }
}
@media (max-width: 575px) {
  .cm-hero-showcase .parallax-slider-active .swiper-container {
    height: 600px;
  }
}
.cm-hero-slider-dot {
  position: absolute;
  bottom: 15% !important;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}
.cm-hero-slider-dot .swiper-pagination-bullet {
  width: 4px;
  height: 40px;
  opacity: 1;
  background-color: transparent;
  margin: 0 4px;
  position: relative;
  border-radius: 0;
  position: relative;
  z-index: 99;
}
.cm-hero-slider-dot .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  background-color: transparent;
}
.cm-hero-slider-dot .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
  background-color: var(--cm-theme-primary);
  width: 100%;
  height: 100%;
}
.cm-hero-slider-dot .swiper-pagination-bullet:before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  opacity: 1;
  content: "";
  display: inline-block;
  background-color: #c8cce6;
  transition: all 0.3s 0s ease-out;
}
.cm-hero-slider-dot .swiper-pagination-bullet:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  opacity: 1;
  content: "";
  transition: all 0.3s 0s ease-out;
  display: inline-block;
}
.cm-hero-port-spacing {
  padding: 200px 0px 150px 0px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-hero-port-spacing {
    padding-top: 160px;
  }
}
.cm-hero-port-backround {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  padding-bottom: 70px;
  height: 100%;
}
.cm-hero-port-backround img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cm-hero-port-title {
  font-size: 270px;
  font-weight: 600;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  line-height: 0.9;
  letter-spacing: 1px;
  background-image: -webkit-linear-gradient(89.64deg, #F87171 0.32%, #FACC15 32.07%, #C8F31D 60.55%, #38BDF8 99.28%);
  background-image: -moz-linear-gradient(89.64deg, #F87171 0.32%, #FACC15 32.07%, #C8F31D 60.55%, #38BDF8 99.28%);
  background-image: -ms-linear-gradient(89.64deg, #F87171 0.32%, #FACC15 32.07%, #C8F31D 60.55%, #38BDF8 99.28%);
  background-image: -o-linear-gradient(89.64deg, #F87171 0.32%, #FACC15 32.07%, #C8F31D 60.55%, #38BDF8 99.28%);
  background-image: linear-gradient(89.64deg, #F87171 0.32%, #FACC15 32.07%, #C8F31D 60.55%, #38BDF8 99.28%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 40px;
  -moz-animation: sliderTitle3 2s ease-in-out 1s forwards infinite alternate;
  -webkit-animation: sliderTitle3 2s ease-in-out 1s forwards infinite alternate;
  animation: sliderTitle3 2s ease-in-out 1s forwards infinite alternate;
  background-size: 150% 150%;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .cm-hero-port-title span {
    margin-left: 100px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-hero-port-title span {
    margin-left: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-hero-port-title span {
    font-size: 170px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-hero-port-title span {
    font-size: 120px;
  }
}
@media (max-width: 575px) {
  .cm-hero-port-title span {
    font-size: 78px;
  }
}
.cm-hero-port-title span:first-child {
  text-align: right;
}
.cm-hero-port-video-btn {
  border: 1px solid var(--cm-common-white);
  border-radius: 128px;
  padding-left: 32px;
  text-transform: uppercase;
  display: inline-block;
  font-weight: 500;
  letter-spacing: 1.2px;
}
.cm-hero-port-video-btn .watch-icon {
  width: 45px;
  height: 45px;
  display: inline-block;
  background: var(--cm-theme-secondary);
  text-align: center;
  line-height: 45px;
  border-radius: 50%;
  color: var(--cm-common-black);
  margin: -1px -1px -1px 15px;
}
.cm-hero-port-video-btn .watch-icon i {
  margin-left: 3px;
}
.cm-hero-port-para p {
  font-size: 30px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-hero-port-para p {
    font-size: 22px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-hero-port-para p br {
    display: none;
  }
}
.cm-hero-port-left {
  padding-top: 240px;
}
.cm-hero-port-social ul li {
  list-style: none;
}
.cm-hero-port-social ul li a {
  padding: 12px 0px;
  font-size: 26px;
  display: block;
}
.cm-hero-port-social ul li a:hover {
  color: var(--cm-theme-secondary);
}
.cm-hero-port-social ul li a i {
  font-size: 20px;
  margin-left: 5px;
}
.cm-hero-crtv-spacing {
  padding-top: 200px;
}
@media (max-width: 575px) {
  .cm-hero-crtv-spacing {
    padding-top: 120px;
  }
}
.cm-hero-crtv-right {
  display: flex;
  justify-content: space-between;
  margin-bottom: 55px;
}
.cm-hero-crtv-title {
  font-family: var(--cm-ff-marcellus);
  color: var(--cm-common-black-2);
  line-height: 0.9;
  font-size: 240px;
}
@media only screen and (min-width: 1700px) and (max-width: 1800px) {
  .cm-hero-crtv-title {
    font-size: 230px;
  }
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .cm-hero-crtv-title {
    font-size: 220px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-hero-crtv-title {
    font-size: 185px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cm-hero-crtv-title {
    font-size: 160px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-hero-crtv-title {
    font-size: 140px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-hero-crtv-title {
    font-size: 110px;
  }
}
@media (max-width: 575px) {
  .cm-hero-crtv-title {
    font-size: 67px;
  }
}
.cm-hero-crtv-para p {
  font-size: 30px;
  color: #555555;
  font-family: var(--cm-ff-kanit);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-hero-crtv-para p {
    font-size: 21px;
  }
}
.cm-hero-crtv-icon {
  float: right;
}
.cm-hero-crtv-icon span {
  width: 40px;
  height: 40px;
  border-radius: 50px;
  border: 2px solid #555555;
  display: inline-block;
  margin-left: -10px;
}
.cm-hero-crtv-border {
  height: 1px;
  width: 100%;
  background: #555555;
  position: relative;
}
.cm-hero-crtv-border::before {
  position: absolute;
  content: "";
  width: 5px;
  height: 5px;
  background: #555555;
  top: -2px;
  border-radius: 10px;
  left: 0;
}
.cm-hero-crtv-border::after {
  position: absolute;
  content: "";
  width: 5px;
  height: 5px;
  background: #555555;
  top: -2px;
  border-radius: 10px;
  right: 0;
}
.cm-hero-crtv-top {
  padding-bottom: 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-hero-crtv-awards:first-child span {
    margin-right: 8px;
  }
}
.cm-hero-crtv-awards span {
  color: var(--cm-common-black-2);
  border: 1.5px solid rgba(18, 18, 18, 0.5215686275);
  font-size: 21px;
  border-radius: 50px;
  padding: 10px 30px 8px 30px;
  display: inline-block;
  font-family: var(--cm-ff-kanit);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-hero-crtv-awards span {
    padding: 10px 20px 8px 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-hero-crtv-awards span {
    font-size: 17px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-hero-crtv-awards span {
    margin-bottom: 20px;
  }
}
.cm-hero-crtv-awards span img {
  width: 27px;
  transform: translateY(-3px);
}
.cm-hero-crtv-btn {
  position: absolute;
  top: -80px;
  right: 100px;
}
.cm-hero-crtv-thumb span {
  display: block;
  overflow: hidden;
  border-radius: 150px 150px 0px 0px;
  margin-bottom: -7px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-hero-crtv-thumb span {
    border-radius: 50px 50px 0px 0px;
  }
}
.cm-hero-crtv-thumb img {
  border-radius: 150px 150px 0px 0px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-hero-crtv-thumb img {
    border-radius: 50px 50px 0px 0px;
  }
}
.cm-hero-ai-spacing {
  padding: 190px 0px 160px 0px;
}
@media (max-width: 575px) {
  .cm-hero-ai-spacing {
    padding: 190px 0 0 0;
  }
}
.cm-hero-ai-bg {
  background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 4%, rgba(135, 81, 255, 0.3533788515) 100%, rgb(255, 255, 255) 100%);
}
.cm-hero-ai-title {
  text-transform: uppercase;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -10px;
  font-size: 190px;
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-antonio);
}
@media only screen and (min-width: 1700px) and (max-width: 1800px) {
  .cm-hero-ai-title {
    font-size: 180px;
  }
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .cm-hero-ai-title {
    font-size: 170px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-hero-ai-title {
    font-size: 151px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-hero-ai-title {
    font-size: 126px;
  }
}
@media (max-width: 575px) {
  .cm-hero-ai-title {
    font-size: 90px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-hero-ai-title span {
    margin-left: 0;
  }
}
.cm-hero-ai-title .cm-text-transparent {
  -webkit-text-stroke-width: 3px;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  stroke-width: 3px;
  -webkit-text-stroke-color: var(--cm-common-black-2);
  stroke: var(--cm-common-black-2);
}
.cm-hero-ai-thumb {
  position: absolute;
  right: 0;
  top: 15%;
  width: 47%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-hero-ai-thumb {
    top: inherit;
    width: 100%;
    bottom: 0;
  }
}
.cm-hero-ai-thumb img {
  width: 100%;
}
.cm-hero-ai-popup {
  position: relative;
  width: 100%;
  height: 400px;
  text-align: center;
}
.cm-hero-brand-spacing {
  padding-top: 250px;
  padding-bottom: 30px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cm-hero-brand-spacing {
    padding-bottom: 50px;
    padding-top: 200px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-hero-brand-spacing {
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-hero-brand-spacing {
    padding-top: 200px;
  }
}
@media (max-width: 575px) {
  .cm-hero-brand-spacing {
    padding-top: 150px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-hero-brand-btn {
    text-align: left !important;
  }
}
.cm-hero-brand-subtitle {
  font-size: 171px;
  font-family: var(--cm-ff-pinyon);
  margin-bottom: 76px;
  display: inline-block;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-hero-brand-subtitle {
    font-size: 130px;
    margin-bottom: 50px;
  }
}
@media (max-width: 575px) {
  .cm-hero-brand-subtitle {
    font-size: 80px;
    margin-bottom: 30px;
  }
}
.cm-hero-brand-title {
  font-family: var(--cm-ff-dirtyline);
  color: var(--cm-common-black-3);
  font-weight: normal;
  text-transform: lowercase;
  font-size: 224px;
  line-height: 0.8;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .cm-hero-brand-title {
    font-size: 190px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .cm-hero-brand-title {
    font-size: 160px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-hero-brand-title {
    font-size: 130px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-hero-brand-title {
    font-size: 100px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-hero-brand-title {
    font-size: 80px;
  }
}
@media (max-width: 575px) {
  .cm-hero-brand-title {
    font-size: 50px;
  }
}
.cm-hero-brand-content p {
  font-family: var(--cm-ff-kanit);
  font-size: 22px;
  font-weight: 300;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-hero-brand-content p {
    margin-bottom: 50px;
  }
}

.svg-animation.star line, .svg-animation.star path {
  -webkit-animation: starPathRotate;
  animation: starPathRotate;
  animation-direction: alternate-reverse;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  color: var(--cm-common-black-2);
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes starPathRotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  5% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  40% {
    -webkit-transform: rotate(var(--transform));
    transform: rotate(var(--transform));
  }
  60% {
    -webkit-transform: rotate(var(--transform));
    transform: rotate(var(--transform));
  }
  95% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes starPathRotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  5% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  40% {
    -webkit-transform: rotate(var(--transform));
    transform: rotate(var(--transform));
  }
  60% {
    -webkit-transform: rotate(var(--transform));
    transform: rotate(var(--transform));
  }
  95% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.full-body-overlay {
  position: fixed;
  z-index: -1;
  pointer-events: none;
  top: 0;
  opacity: 1;
  inset-inline-start: 0;
  width: 100vw;
  height: 100vh;
  background-repeat: repeat;
  background-position: top left;
  background-image: url(../img/body/body-bg.png);
}

.cm-letter-span {
  display: inline-block;
  cursor: default;
}

/*----------------------------------------*/
/* 6.1 about css
/*----------------------------------------*/
.cm-about-thumb-wrapper {
  padding-right: 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-about-thumb-wrapper {
    padding-right: 0px;
  }
}
.cm-about-thumb-1 {
  padding-right: 300px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .cm-about-thumb-1 {
    padding-right: 190px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cm-about-thumb-1 {
    padding-right: 200px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-about-thumb-1 {
    padding-right: 120px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-about-thumb-1 {
    padding-right: 120px;
  }
}
@media (max-width: 575px) {
  .cm-about-thumb-1 {
    padding-right: 0;
    padding-bottom: 30px;
  }
}
.cm-about-thumb-2 {
  float: right;
  margin-left: 290px;
  margin-top: -70px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .cm-about-thumb-2 {
    margin-left: 170px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cm-about-thumb-2 {
    margin-left: 200px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-about-thumb-2 {
    margin-left: 120px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-about-thumb-2 {
    margin-left: 120px;
  }
}
@media (max-width: 575px) {
  .cm-about-thumb-2 {
    margin-left: 0;
    margin-top: 0;
  }
}
.cm-about-thumb-shape {
  top: -72px;
  left: 287px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .cm-about-thumb-shape {
    left: 164px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cm-about-thumb-shape {
    left: 164px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-about-thumb-right {
    margin-top: 40px;
  }
}
.cm-about-thumb-right img {
  height: 500px;
  object-fit: cover;
}
.cm-about-content {
  margin-right: 50px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-about-content {
    margin-right: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-about-content {
    padding-top: 40px;
  }
}
.cm-about-content p {
  color: var(--cm-grey-2);
  font-size: 18px;
  letter-spacing: 0.3px;
  font-weight: 300;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-about-customer-counter {
    display: flex;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-about-single-counter {
    margin-right: 70px;
  }
}
.cm-about-item-count {
  font-size: 80px;
  text-transform: uppercase;
  font-weight: 600;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-about-item-count {
    font-size: 60px;
  }
}
.cm-about-item-subtitle {
  color: var(--cm-grey-2);
  letter-spacing: 0.3px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-about-item-subtitle {
    font-size: 18px;
  }
}
.cm-about-crtv-spacing {
  margin-top: -70px;
}
@media (max-width: 575px) {
  .cm-about-crtv-spacing {
    margin-top: 0;
  }
}
@media (max-width: 575px) {
  .cm-about-crtv-thumb {
    margin-left: 0;
    margin-top: 30px;
  }
}
.cm-about-crtv-content {
  margin-left: 70px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-about-crtv-content {
    margin-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-about-crtv-content {
    margin-top: 50px;
  }
}
.cm-about-crtv-content p {
  color: var(--cm-grey-1);
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0.2px;
  font-family: var(--cm-ff-kanit);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-about-crtv-content p {
    font-size: 18px;
  }
}
.cm-about-crtv-top p {
  color: var(--cm-grey-3);
  font-family: var(--cm-ff-marcellus);
  text-indent: 85px;
  margin-bottom: 65px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.4em;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-about-crtv-top p {
    font-size: 30px;
  }
}
@media (max-width: 575px) {
  .cm-about-crtv-top p {
    font-size: 20px;
  }
}
.cm-about-crtv-top p b {
  color: var(--cm-common-black-2);
  font-weight: 800;
}
.cm-about-crtv-title {
  font-size: 70px;
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-marcellus);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cm-about-crtv-title {
    font-size: 55px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-about-crtv-title {
    font-size: 45px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-about-thumb {
    margin-right: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-about-thumb {
    margin-right: 0;
    margin-bottom: 20px;
  }
}
.cm-about-ai-title {
  color: var(--cm-common-black-2);
  font-size: 52px;
  font-family: var(--cm-ff-manrope);
  font-weight: 600;
  line-height: 1.3;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-about-ai-title {
    font-size: 42px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-about-ai-title {
    font-size: 32px;
  }
}
@media (max-width: 575px) {
  .cm-about-ai-title {
    font-size: 26px;
  }
}
.cm-about-ai-title span {
  color: var(--cm-common-apple);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-about-ai-button {
    margin-bottom: 30px;
  }
}
.cm-about-ai-bottom {
  margin-top: -70px;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-about-ai-bottom {
    margin-top: 30px;
  }
}
.cm-about-ai-para p {
  color: var(--cm-grey-4);
  font-family: var(--cm-ff-manrope);
  font-weight: 500;
  letter-spacing: 0.5px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-about-brand-thumb {
    margin-right: 50px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-about-brand-thumb {
    margin-right: 0;
  }
}
.cm-about-brand-thumb .image-container {
  height: 715px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-about-brand-thumb .image-container {
    height: 590px;
  }
}
@media (max-width: 575px) {
  .cm-about-brand-thumb .image-container {
    height: 450px;
  }
}
.cm-about-brand-thumb img {
  border-radius: 12px;
}
.cm-about-hero-wrap {
  padding-top: 220px;
  padding-bottom: 120px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-about-hero-wrap {
    padding-top: 160px;
  }
}
.cm-about-hero-title {
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-manrope);
  font-size: 150px;
  font-weight: 800;
  line-height: 0.9em;
  letter-spacing: -6px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-about-hero-title {
    letter-spacing: 1px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cm-about-hero-title {
    font-size: 120px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-about-hero-title {
    font-size: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-about-hero-title {
    font-size: 80px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-about-hero-title {
    font-size: 60px;
  }
}
.cm-about-hero-title-2 {
  font-weight: 700;
  font-size: 100px;
  line-height: 1;
  letter-spacing: -0.01em;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cm-about-hero-title-2 {
    font-size: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-about-hero-title-2 {
    font-size: 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-about-hero-title-2 {
    font-size: 60px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-about-hero-title-2 {
    font-size: 50px;
  }
  .cm-about-hero-title-2 br {
    display: none;
  }
}
.cm-about-hero-subtitle {
  font-size: 16px;
  line-height: 1;
  display: inline-block;
  text-transform: uppercase;
  color: var(--cm-grey-1);
  font-family: var(--cm-ff-kanit);
  padding-inline-end: 100px;
}
.cm-about-hero-subtitle:after {
  position: absolute;
  content: "";
  width: 80px;
  height: 1px;
  background-color: currentColor;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
}
.cm-about-hero-text {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.42em;
  color: var(--cm-grey-1);
  font-family: var(--cm-ff-kanit);
  max-width: 440px;
  text-align: left;
}
.cm-about-hero-subtitle-wrap {
  display: grid;
  gap: 20px 40px;
  grid-template-columns: auto auto;
  justify-content: center;
  margin-top: 44px;
}
@media (max-width: 575px) {
  .cm-about-hero-subtitle-wrap {
    grid-template-columns: auto;
    justify-content: start;
    text-align: left;
  }
}
.cm-about-text-slider .cm-text-crtv-wrap .cm-text-port-slider-item h3 {
  font-family: var(--cm-ff-manrope);
  letter-spacing: 0.2px;
}
.cm-about-main-content p {
  font-size: 54px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -1.08px;
  color: var(--cm-common-black-2);
  padding-right: 25px;
  font-family: var(--cm-ff-kanit);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-about-main-content p {
    font-size: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-about-main-content p {
    font-size: 30px;
  }
}
.cm-about-main-content p img {
  width: 60px;
  margin-right: 10px;
  margin-top: -20px;
}
.cm-about-main-title-box {
  display: inline-block;
  padding-left: 150px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-about-main-title-box {
    padding-left: 0px;
  }
}
.cm-about-main-title-box h3 {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.88px;
  text-transform: uppercase;
  color: var(--cm-common-black-2);
  display: inline-block;
  font-family: var(--cm-ff-kanit);
}
.cm-about-main-title-box h3 span {
  color: #141414;
  font-size: 18px;
  font-weight: 400;
}
.cm-about-main-list {
  padding-left: 10px;
}
.cm-about-main-list ul li {
  color: var(--cm-grey-1);
  font-family: var(--cm-ff-kanit);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  position: relative;
  list-style-type: none;
  padding-left: 18px;
  margin-bottom: 18px;
}
.cm-about-main-list ul li::after {
  position: absolute;
  top: 6px;
  left: 0;
  height: 6px;
  width: 6px;
  background-color: #5D5D63;
  content: "";
}
.cm-about-main-thumb {
  margin-left: 100px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-about-main-thumb {
    margin-left: 0;
  }
}
.cm-about-main-thumb img {
  border-radius: 12px;
  max-width: 100%;
}
@media (max-width: 575px) {
  .cm-about-main-thumb img {
    width: 100%;
  }
}

/*----------------------------------------*/
/* 6.17 testimonial css
/*----------------------------------------*/
.cm-testimonial-wrpaper-main {
  padding: 0 20px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-testimonial-wrpaper-main {
    padding: 0px;
  }
}
.cm-testimonial-clients {
  display: flex;
  align-items: center;
}
.cm-testimonial-clients-icon {
  display: block;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-testimonial-clients-icon {
    margin-bottom: 30px;
  }
}
.cm-testimonial-clients-icon svg {
  color: var(--cm-theme-primary);
}
.cm-testimonial-clients-para {
  font-size: 22px;
  color: var(--cm-grey-2);
}
.cm-testimonial-clients img {
  border-radius: 50%;
  margin-right: 20px;
  width: 65px;
}
.cm-testimonial-clients-content p {
  font-size: 18px;
  margin-bottom: 3px;
}
.cm-testimonial-clients-content span {
  font-weight: 300;
  letter-spacing: 0.5px;
}
.cm-testimonial-shap-left-top {
  position: absolute;
  top: 0;
  left: -2.05rem;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.cm-testimonial-shap-left-top svg {
  width: 2.1rem;
  height: 2.1rem;
}
.cm-testimonial-shap-left-top-2 {
  position: absolute;
  top: -2.05rem;
  left: 0;
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
.cm-testimonial-shap-left-top-2 svg {
  width: 2.1rem;
  height: 2.1rem;
}
.cm-testimonial-shap-right-bottom {
  position: absolute;
  bottom: -2.1rem;
  right: 0;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.cm-testimonial-shap-right-bottom svg {
  width: 2.1rem;
  height: 2.1rem;
}
.cm-testimonial-shap-right-bottom-2 {
  position: absolute;
  bottom: 1px;
  right: -2.1rem;
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
.cm-testimonial-shap-right-bottom-2 svg {
  width: 2.1rem;
  height: 2.1rem;
}
.cm-testimonial-port-wrap {
  padding: 50px 50px 0px;
  border-radius: 30px 30px 30px 0;
  position: relative;
  background: #F5F5F5;
}
@media (max-width: 575px) {
  .cm-testimonial-port-wrap {
    padding: 50px 30px 0px;
  }
}
.cm-testimonial-port-stars {
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px 60px 15px 30px;
  border-radius: 0 0 0 30px;
  background: var(--cm-common-white);
  margin-top: -2px;
  margin-right: -2px;
}
.cm-testimonial-port-stars .stars-inner {
  color: #ffaa17;
}
.cm-testimonial-port-stars .stars-inner i {
  font-size: 15px;
}
.cm-testimonial-port-qoute svg {
  width: 60px;
  height: 60px;
  margin-bottom: 30px;
}
.cm-testimonial-port-tag {
  padding: 8px 20px 7px 20px;
  border: 1px solid rgba(55, 51, 51, 0.1);
  border-radius: 30px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: inline-block;
  font-family: var(--cm-ff-kanit);
  color: var(--cm-common-black-2);
}
.cm-testimonial-port-content p {
  font-size: 18px;
  font-family: var(--cm-ff-kanit);
  color: #555555;
}
.cm-testimonial-port-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-left: -50px;
}
.cm-testimonial-port-img-curv {
  position: relative;
  padding: 20px;
  border-radius: 0 30px 0 0;
  background: var(--cm-common-white);
  margin-bottom: -2px;
  margin-left: -2px;
}
.cm-testimonial-port-avatar {
  height: 80px;
  width: 80px;
  border-radius: 50%;
  overflow: hidden;
}
.cm-testimonial-port-avatar img {
  width: 100%;
  height: 100%;
}
.cm-testimonial-port-user-title {
  font-size: 20px;
  font-family: var(--cm-ff-manrope);
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--cm-common-black-2);
}
.cm-testimonial-port-user-subtitle {
  color: var(--cm-grey-3);
  font-weight: 300;
  font-family: var(--cm-ff-kanit);
  letter-spacing: 1.2px;
  font-size: 15px;
}
.cm-testimonial-crtv-wrap {
  background: var(--cm-common-white);
  box-shadow: 0 40px 80px 0 rgba(0, 0, 0, 0.06);
  margin: 0 90px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-testimonial-crtv-wrap {
    margin: 0 40px;
  }
}
@media (max-width: 575px) {
  .cm-testimonial-crtv-wrap {
    margin: 0;
  }
}
@media (max-width: 575px) {
  .cm-testimonial-crtv-title-wrap {
    margin-bottom: 170px;
  }
}
.cm-testimonial-crtv-ratngs span {
  font-weight: 400;
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-kanit);
}
.cm-testimonial-crtv-ratngs span.text {
  margin-left: 6px;
}
.cm-testimonial-crtv-ratngs i {
  color: #ffaa17;
  font-size: 14px;
}
.cm-testimonial-crtv-content {
  padding: 80px 140px 70px 140px;
  background: var(--cm-common-white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-testimonial-crtv-content {
    padding: 80px 80px 70px 80px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-testimonial-crtv-content {
    padding: 60px 40px 60px 40px;
  }
}
@media (max-width: 575px) {
  .cm-testimonial-crtv-content {
    padding: 40px 20px 40px 20px;
  }
}
.cm-testimonial-crtv-content p {
  font-size: 24px;
  line-height: 1.75;
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-kanit);
  margin-bottom: 50px;
  font-weight: 300;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-testimonial-crtv-content p {
    font-size: 22px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-testimonial-crtv-content p {
    font-size: 16px;
  }
}
.cm-testimonial-crtv-avater {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
}
.cm-testimonial-crtv-avater-thumb {
  margin-right: 16px;
}
.cm-testimonial-crtv-avater-thumb img {
  border-radius: 50%;
}
.cm-testimonial-crtv-avater-title {
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  color: var(--cm-common-black-2);
  margin-bottom: 5px;
  font-family: var(--cm-ff-kanit);
}
@media (max-width: 575px) {
  .cm-testimonial-crtv-avater-title {
    font-size: 20px;
  }
}
.cm-testimonial-crtv-avater-designation {
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-kanit);
}
.cm-testimonial-crtv-profile {
  padding: 32px 40px 32px 40px;
  border-top: 1px solid var(--cm-common-line);
  background: var(--cm-common-white);
}
.cm-testimonial-crtv-profile-logo img {
  width: 100%;
  opacity: 0.3;
  transition: all 0.4s ease;
}
.cm-testimonial-crtv-profile-logo img:hover {
  opacity: 1;
}
.cm-testimonial-crtv-btn div {
  box-shadow: 0 4px 80px 0 rgba(0, 0, 0, 0.08);
  height: 100px;
  width: 100px;
  background: var(--cm-common-white);
  text-align: center;
  line-height: 100px;
  border-radius: 50%;
  cursor: pointer;
  position: absolute;
  top: 50%;
  z-index: 1;
  left: -50px;
  transform: translateY(-50%);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-testimonial-crtv-btn div {
    height: 70px;
    width: 70px;
    line-height: 70px;
    left: -35px;
  }
}
@media (max-width: 575px) {
  .cm-testimonial-crtv-btn div {
    top: -70px;
  }
}
@media (max-width: 575px) {
  .cm-testimonial-crtv-btn div {
    left: 0;
  }
}
.cm-testimonial-crtv-btn div.cm-testimonial-next {
  left: auto;
  right: -50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-testimonial-crtv-btn div.cm-testimonial-next {
    right: -35px;
  }
}
@media (max-width: 575px) {
  .cm-testimonial-crtv-btn div.cm-testimonial-next {
    right: auto;
    left: 100px;
  }
}
.cm-testimonial-crtv-btn div .cm-testimonial-rotate {
  transform: rotate(-180deg);
}
.cm-testimonial-crtv-btn div i {
  opacity: 0.2;
  transition: all 0.4s ease;
}
.cm-testimonial-crtv-btn div:hover i {
  opacity: 1;
}
.cm-testimonial-crtv-slider-active .swiper-slide {
  background: var(--cm-common-white);
}
.cm-testimonial-ai-wrap .cm-testimonial-port-content p {
  font-family: var(--cm-ff-manrope);
}
.cm-testimonial-ai-wrap .cm-testimonial-port-tag {
  font-family: var(--cm-ff-manrope);
  letter-spacing: 1px;
  font-weight: 500;
}
.cm-testimonial-ai-wrap .cm-testimonial-port-user-subtitle {
  font-family: var(--cm-ff-manrope);
}
.cm-testimonial-ai-wrap .cm-testimonial-port-stars .stars-inner {
  color: var(--cm-common-apple);
}
.cm-testimonial-ai-shape {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.cm-testimonial-ai-shape img {
  width: 100%;
  height: 100%;
  background-position: bottom;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0.5;
  z-index: 2;
}
@media (max-width: 575px) {
  .cm-testimonial-about-spacing {
    padding-top: 80px;
  }
}

/*----------------------------------------*/
/*  6.4 contact css
/*----------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-contact-rounded-cercale {
    text-align: left !important;
  }
}
.cm-contact-port-content-box {
  padding: 70px 40px;
  border: 1px solid #E0E0E0;
  border-radius: 30px;
  position: relative;
  overflow: hidden;
  background: var(--cm-common-white);
}
.cm-contact-port-number a {
  color: var(--cm-common-black-2);
  font-size: 30px;
  font-weight: 600;
  text-decoration: underline;
  font-family: var(--cm-ff-manrope);
}
.cm-contact-port-rounded-img {
  display: inline-block;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-contact-port-rounded-img {
    margin-bottom: 30px;
  }
}
.cm-contact-port-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  text-align: center;
}
.cm-contact-port-morinfo.cm-border-bottom {
  border-bottom: 1px solid #E0E0E0;
}
.cm-contact-port-morinfo h6 {
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-manrope);
  font-size: 26px;
}
.cm-contact-port-morinfo a {
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-kanit);
  font-size: 17px;
  font-weight: 300;
  background-image: linear-gradient(#121212, #121212), linear-gradient(#121212, #121212);
  background-size: 0 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.cm-contact-port-morinfo a:hover {
  background-image: linear-gradient(#121212, #121212), linear-gradient(#121212, #121212);
  background-size: 0 1px, 100% 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
}
.cm-contact-port-social a {
  color: var(--cm-common-black-2);
  width: 55px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  border: 1px solid #E0E0E0;
  border-radius: 50%;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
  display: inline-block;
  font-size: 18px;
}
.cm-contact-port-social a:hover {
  background: var(--cm-theme-secondary);
  border-color: var(--cm-theme-secondary);
}
.cm-contact-port-form .input {
  font-family: var(--cm-ff-kanit);
  font-size: 18px;
  font-weight: 400;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: #E0E0E0;
  color: var(--cm-common-black-2);
  padding: 10px 30px;
  height: 60px;
  border-radius: 30px;
}
.cm-contact-port-form .input:focus {
  border-color: var(--cm-theme-secondary);
}
.cm-contact-port-form .input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-size: 18px;
  font-weight: 400;
  font-family: var(--cm-ff-kanit);
}
.cm-contact-port-form .input::-moz-placeholder { /* Firefox 19+ */
  font-size: 18px;
  font-weight: 400;
  font-family: var(--cm-ff-kanit);
}
.cm-contact-port-form .input:-moz-placeholder { /* Firefox 4-18 */
  font-size: 18px;
  font-weight: 400;
  font-family: var(--cm-ff-kanit);
}
.cm-contact-port-form .input:-ms-input-placeholder { /* IE 10+  Edge*/
  font-size: 18px;
  font-weight: 400;
  font-family: var(--cm-ff-kanit);
}
.cm-contact-port-form .input::placeholder { /* MODERN BROWSER */
  font-size: 18px;
  font-weight: 400;
  font-family: var(--cm-ff-kanit);
}
.cm-contact-port-form .textarea {
  font-family: var(--cm-ff-kanit);
  font-size: 18px;
  font-weight: 400;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: #E0E0E0;
  min-height: 200px;
  resize: none;
  color: var(--cm-common-black-2);
  padding: 20px 30px;
  border-radius: 30px;
}
.cm-contact-port-form .textarea:focus {
  border-color: var(--cm-theme-secondary);
}
.cm-contact-port-form .textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-size: 18px;
  font-weight: 400;
  font-family: var(--cm-ff-kanit);
}
.cm-contact-port-form .textarea::-moz-placeholder { /* Firefox 19+ */
  font-size: 18px;
  font-weight: 400;
  font-family: var(--cm-ff-kanit);
}
.cm-contact-port-form .textarea:-moz-placeholder { /* Firefox 4-18 */
  font-size: 18px;
  font-weight: 400;
  font-family: var(--cm-ff-kanit);
}
.cm-contact-port-form .textarea:-ms-input-placeholder { /* IE 10+  Edge*/
  font-size: 18px;
  font-weight: 400;
  font-family: var(--cm-ff-kanit);
}
.cm-contact-port-form .textarea::placeholder { /* MODERN BROWSER */
  font-size: 18px;
  font-weight: 400;
  font-family: var(--cm-ff-kanit);
}
.cm-contact-map-wrap {
  line-height: 1;
}
.cm-contact-map-wrap iframe {
  width: 100%;
  height: 810px;
  line-height: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cm-contact-map-wrap iframe {
    height: 650px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-contact-map-wrap iframe {
    height: 600px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-contact-map-wrap iframe {
    height: 400px;
  }
}
.cm-contact-map-thumb {
  height: 100%;
}
.cm-contact-map-thumb img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.cm-contact-2-content {
  background-color: #f5f5f5;
  padding: 90px 50px;
  transition: all 0.4s ease;
  border-radius: 12px;
}
.cm-contact-2-content:hover {
  background: var(--cm-common-black-2);
}
.cm-contact-2-content:hover .cm-contact-2-title {
  color: var(--cm-common-white);
}
.cm-contact-2-content:hover .cm-contact-2-info-details a, .cm-contact-2-content:hover .cm-contact-2-info-details span {
  color: var(--cm-common-white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-contact-2-content {
    margin-top: 0;
    padding: 30px 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) {
  .cm-contact-2-content {
    margin-top: 0;
    padding: 40px 30px;
  }
}
.cm-contact-2-title {
  font-size: 60px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -3.6px;
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-kanit);
  margin-bottom: 45px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-contact-2-title {
    font-size: 45px;
  }
}
.cm-contact-2-thumb {
  margin-bottom: 40px;
}
.cm-contact-2-thumb img {
  margin: 0px 8px;
}
.cm-contact-2-info-details a, .cm-contact-2-info-details span {
  color: #414147;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  max-width: 200px;
  display: block;
  margin: 0 auto;
  text-align: center;
  font-family: var(--cm-ff-kanit);
}

/*----------------------------------------*/
/*  6.6 error css
/*----------------------------------------*/
.cm-error-wrapper {
  padding-top: 200px;
}
.cm-error-wrapper .title {
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-kanit);
}
.cm-error-wrapper .para {
  font-weight: 400;
  font-size: 18px;
  color: var(--cm-grey-1);
  margin-bottom: 30px;
  font-family: var(--cm-ff-manrope);
}
.cm-error-thumb img {
  width: 600px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-error-thumb img {
    width: 100%;
  }
}

/*----------------------------------------*/
/*  6.5 counter css
/*----------------------------------------*/
.cm-counter-crtv-wrap {
  display: flex;
  align-items: center;
  border-left: 1px solid #E9E9E9;
  border-right: 1px solid #E9E9E9;
  justify-content: center;
  margin-left: -1px;
  padding: 50px 0px;
}
.cm-counter-crtv-border {
  border-top: 1px solid #E9E9E9;
  border-bottom: 1px solid #E9E9E9;
}
.cm-counter-crtv-count {
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-kanit);
  font-size: 150px;
  font-weight: 600;
  line-height: 100px;
  margin-right: 6px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-counter-crtv-count {
    font-size: 110px;
  }
}
.cm-counter-crtv-subtitle {
  color: #121212;
  font-family: var(--cm-ff-kanit);
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 20px;
  margin: 0px 0px 0px 0px;
}
.cm-counter-brands-wrap {
  border: 1px solid rgba(210, 207, 207, 0.168627451);
  border-radius: 12px;
  margin-right: -1px;
  padding: 87px 37px 32px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-counter-brands-wrap {
    padding: 37px 37px 32px;
  }
}
.cm-counter-brands-wrap .cm-counter-crtv-count {
  color: var(--cm-common-white);
  font-size: 230px;
  line-height: 1;
  margin-bottom: 100px;
  font-family: var(--cm-ff-kanit);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-counter-brands-wrap .cm-counter-crtv-count {
    font-size: 170px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-counter-brands-wrap .cm-counter-crtv-count {
    margin-bottom: 30px;
  }
}
.cm-counter-brands-wrap .cm-counter-crtv-count span {
  text-transform: lowercase;
}
.cm-counter-brands-wrap .cm-counter-crtv-subtitle {
  color: var(--cm-common-white);
  font-size: 32px;
  text-transform: capitalize;
  line-height: 1;
}

/*----------------------------------------*/
/* 6.13 service css
/*----------------------------------------*/
.cm-service-title {
  font-size: 30px;
  font-weight: 500;
}
.cm-service-title span {
  color: var(--cm-theme-primary);
}
.cm-service-description p {
  font-size: 20px;
  color: var(--cm-grey-2);
  letter-spacing: 0.4px;
}
.cm-service-description .cm-service-list ul li span {
  transform: translateY(0px);
}
.cm-service-list ul li {
  list-style: none;
  display: flex;
}
.cm-service-list ul li:not(:last-child) {
  margin-bottom: 10px;
}
.cm-service-list ul li span {
  color: var(--cm-theme-primary);
  margin-right: 10px;
  transform: translateY(3px);
}
.cm-service-list ul li p {
  margin-bottom: 0;
  font-size: 16px;
}
.cm-service-item {
  border-top: 1px solid rgba(224, 203, 203, 0.2784313725);
  border-bottom: 1px solid rgba(224, 203, 203, 0.2784313725);
  padding: 40px 0 30px;
  padding-bottom: 10px;
  transition: 0.5s;
  margin-top: -1px;
}
.cm-service-reveal-item.active:hover .cm-service-reveal-bg {
  opacity: 1;
}
.cm-service-reveal-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 370px;
  height: 370px;
  opacity: 0;
  margin: -150px 0 0 -150px;
  overflow: hidden;
  pointer-events: none;
  z-index: 99;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (max-width: 575px) {
  .cm-service-reveal-bg {
    width: 170px;
    height: 170px;
  }
}
.cm-service-link span {
  width: 60px;
  height: 60px;
  border: 1px solid var(--cm-theme-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  float: right;
}
.cm-service-link span i {
  transform: rotate(-45deg);
  color: var(--cm-theme-primary);
}
.cm-service-crtv-left {
  grid-column-gap: 95px;
  grid-row-gap: 95px;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
@media (max-width: 575px) {
  .cm-service-crtv-left {
    grid-column-gap: 20px;
  }
}
.cm-service-crtv-left h3 {
  font-size: 36px;
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-kanit);
  font-weight: 600;
  line-height: 1;
}
.cm-service-crtv-left h3 a {
  background-image: linear-gradient(#121212, #121212), linear-gradient(#121212, #121212);
  background-size: 0 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.cm-service-crtv-left h3 a:hover {
  background-image: linear-gradient(#121212, #121212), linear-gradient(#121212, #121212);
  background-size: 0 1px, 100% 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
}
.cm-service-crtv-right {
  grid-column-gap: 75px;
  grid-row-gap: 75px;
  justify-content: flex-end;
  align-items: flex-start;
  display: flex;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-service-crtv-right {
    justify-content: space-between;
  }
}
@media (max-width: 575px) {
  .cm-service-crtv-right {
    display: block;
  }
}
.cm-service-crtv-item {
  border-bottom: 1px solid #EFEFEF;
  margin-bottom: 50px;
  padding-bottom: 20px;
}
.cm-service-crtv-item:hover .cm-service-crtv-thumb img {
  transform: scale(1.1);
}
.cm-service-crtv-button {
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-kanit);
  letter-spacing: 0.2px;
  font-size: 22px;
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  justify-content: flex-end;
  align-items: center;
  display: inline-flex;
  background-image: linear-gradient(#121212, #121212), linear-gradient(#121212, #121212);
  background-size: 0 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.cm-service-crtv-button:hover {
  background-image: linear-gradient(#121212, #121212), linear-gradient(#121212, #121212);
  background-size: 0 1px, 100% 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
}
.cm-service-crtv-button:hover {
  color: var(--cm-common-black-2);
}
.cm-service-crtv-thumb {
  margin-left: -50px;
  border-radius: 12px;
  overflow: hidden;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-service-crtv-thumb {
    margin-left: 0;
  }
}
.cm-service-crtv-thumb img {
  transition: all 0.4s ease;
}
.cm-service-crtv-text {
  width: 100%;
  max-width: 241px;
}
.cm-service-crtv-text p {
  color: var(--cm-grey-1);
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.2px;
  font-family: var(--cm-ff-kanit);
  font-weight: 300;
}
.cm-service-ai-title {
  font-size: 80px;
  font-weight: 400;
  line-height: 1;
  color: var(--cm-common-black-2);
  letter-spacing: -3.2px;
  font-family: var(--cm-ff-antonio);
}
.cm-service-ai-title .cm-letter-span {
  cursor: pointer;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-service-ai-title {
    font-size: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-service-ai-title {
    font-size: 40px;
  }
}
@media (max-width: 575px) {
  .cm-service-ai-title {
    font-size: 45px;
  }
}
.cm-service-ai-title-box {
  position: relative;
  padding: 32px 0;
  z-index: 1;
  margin-bottom: -1px;
  border-bottom: 1px solid rgba(207, 194, 146, 0.2);
  border-top: 1px solid rgba(207, 194, 146, 0.2);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-service-ai-title-box {
    margin-bottom: 40px;
  }
}
.cm-service-ai-title-box:last-child {
  margin-bottom: 0;
}
.cm-service-ai-title-box.active .cm-service-ai-title {
  color: var(--cm-common-apple);
}
.cm-service-ai-title-box.active .cm-service-ai-thumb-box {
  top: 15%;
  opacity: 1;
  visibility: visible;
}
.cm-service-ai-title-box.active .cm-service-ai-title-box-bg {
  transform: scale(1);
  border-radius: 0 0 0 0;
}
.cm-service-ai-title-box-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: 1;
  border-radius: 0 0 50% 50%;
  transform: scaleY(0);
  transform-origin: top center;
  background-color: var(--cm-common-apple);
  opacity: 0.15;
  transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1), border-radius 0.3s cubic-bezier(0.5, 0, 0, 1);
  z-index: -1;
}
.cm-service-ai-thumb-box {
  position: absolute;
  top: 70%;
  left: 10%;
  right: 0;
  width: 80%;
  height: 100%;
  z-index: -1;
  text-align: center;
  object-fit: cover;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.cm-service-ai-thumb.thumb-1 img {
  transform: rotate(-6deg);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-service-ai-thumb.thumb-1 img {
    transform: rotate(0deg);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-service-ai-thumb.thumb-1 img {
    transform: scale(0.7);
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-service-ai-thumb.thumb-1 img {
    transform: scale(0.7);
    margin-left: -50px;
  }
}
@media (max-width: 575px) {
  .cm-service-ai-thumb.thumb-1 img {
    display: none;
  }
}
.cm-service-ai-thumb.thumb-2 img {
  transform: rotate(6deg);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) {
  .cm-service-ai-thumb.thumb-2 img {
    transform: rotate(0deg);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-service-ai-thumb.thumb-2 img {
    transform: scale(0.7);
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-service-ai-thumb.thumb-2 img {
    transform: scale(0.7);
    margin-right: -50px;
  }
}
.cm-service-brands-wrap {
  background: var(--cm-common-black-3);
  border-radius: 12px;
  padding: 55px 55px 44px 50px;
  height: 100%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) {
  .cm-service-brands-wrap {
    padding: 35px 35px 24px 30px;
  }
}
.cm-service-brands-wrap img {
  width: 60px;
}
.cm-service-brands-wrap p {
  color: var(--cm-grey-2);
  font-family: var(--cm-ff-kanit);
  font-weight: 300;
  font-size: 18px;
}
.cm-service-brands-title {
  font-family: var(--cm-ff-dirtyline);
  text-transform: lowercase;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 2px;
  font-weight: 400;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .cm-service-brands-title {
    font-size: 25px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-service-brands-title {
    font-size: 22px;
  }
}
.cm-service-brands-title a {
  background-image: linear-gradient(white, white), linear-gradient(white, white);
  background-size: 0 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.cm-service-brands-title a:hover {
  background-image: linear-gradient(white, white), linear-gradient(white, white);
  background-size: 0 1px, 100% 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
}
.cm-service-brands-count {
  font-size: 20px;
  color: var(--cm-common-white);
  display: block;
}
.cm-service-brands-btn {
  color: var(--cm-common-white);
  font-size: 18px;
  font-family: var(--cm-ff-kanit);
}
.cm-service-brands-btn:hover {
  color: var(--cm-grey-2);
}
.cm-service-brands-btn:hover img {
  opacity: 0.7;
}
.cm-service-brands-btn img {
  width: 26px;
}
.cm-service-brands-bottom {
  color: var(--cm-common-white);
  font-size: 18px;
  font-family: var(--cm-ff-kanit);
  margin-bottom: 0;
  background: var(--cm-common-black-3);
  display: inline-block;
  padding: 20px 40px 20px 40px;
  border-radius: 45px;
}
.cm-service-brands-bottom a {
  text-decoration: underline;
}
.cm-service-brands-bottom a:hover {
  color: var(--cm-grey-2);
}
.cm-service-single-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 45%;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-service-single-thumb {
    position: inherit;
    width: 100%;
    margin-bottom: 50px;
    height: auto;
  }
}
.cm-service-single-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cm-service-details-title {
  font-weight: 600;
  font-size: 80px;
  line-height: 1;
  font-family: var(--cm-ff-manrope);
  color: var(--cm-common-black-2);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-service-details-title {
    font-size: 65px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-service-details-title {
    font-size: 45px;
  }
}
.cm-service-details-para {
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
  color: var(--cm-grey-1);
  font-family: var(--cm-ff-kanit);
}
.cm-service-details-wrap .cm-portfolio-details-overview-title {
  font-size: 50px;
  display: flex;
  gap: 35px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-service-details-wrap .cm-portfolio-details-overview-title {
    font-size: 35px;
  }
}
.cm-service-details-wrap .cm-portfolio-details-overview-list {
  margin-right: 200px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-service-details-wrap .cm-portfolio-details-overview-list {
    margin-right: 0;
  }
}
.cm-service-details-wrap .cm-portfolio-details-overview-list ul {
  -moz-column-count: 2;
  column-count: 2;
  margin-top: 20px;
}
@media (max-width: 575px) {
  .cm-service-details-wrap .cm-portfolio-details-overview-list ul {
    -moz-column-count: 1;
    column-count: 1;
  }
}
.cm-service-details-wrap .cm-portfolio-details-overview-right p {
  font-weight: 300;
  font-size: 18px;
  line-height: 1.3;
  color: var(--cm-grey-1);
}
.cm-service-details-wrap .cm-portfolio-details-result .child-2 {
  font-size: 18px;
}
.cm-service-details-overview-thumb img {
  max-width: 100%;
}

#cm-service-ai-thumb-wrap.cm-service-ai-thumb-box-1 {
  opacity: 1;
  visibility: visible;
}
#cm-service-ai-thumb-wrap.cm-service-ai-thumb-box-1 .cm-service-ai-thumb-box-1 {
  top: 0;
  opacity: 1;
  visibility: visible;
}
#cm-service-ai-thumb-wrap.cm-service-ai-thumb-box-2 {
  opacity: 1;
  visibility: visible;
}
#cm-service-ai-thumb-wrap.cm-service-ai-thumb-box-2 .cm-service-ai-thumb-box-2 {
  top: 0;
  opacity: 1;
  visibility: visible;
}
#cm-service-ai-thumb-wrap.cm-service-ai-thumb-box-3 {
  opacity: 1;
  visibility: visible;
}
#cm-service-ai-thumb-wrap.cm-service-ai-thumb-box-3 .cm-service-ai-thumb-box-3 {
  top: 0;
  opacity: 1;
  visibility: visible;
}
#cm-service-ai-thumb-wrap.cm-service-ai-thumb-box-4 {
  opacity: 1;
  visibility: visible;
}
#cm-service-ai-thumb-wrap.cm-service-ai-thumb-box-4 .cm-service-ai-thumb-box-4 {
  top: 0;
  opacity: 1;
  visibility: visible;
}

/*----------------------------------------*/
/* 6.19 video css
/*----------------------------------------*/
.cm-video-img-inner {
  background-position: top center;
  background-size: cover;
  object-fit: cover;
  width: 670px;
  height: 890px;
  margin: 0 auto;
  overflow: hidden;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cm-video-img-inner {
    height: 700px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-video-img-inner {
    height: 600px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-video-img-inner {
    height: 500px;
  }
}
.cm-video-img-inner video {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  background-position: center center;
  background-size: cover;
  object-fit: cover;
}
.cm-video-img-inner-2 {
  height: 800px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .cm-video-img-inner-2 {
    height: 700px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cm-video-img-inner-2 {
    height: 600px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-video-img-inner-2 {
    height: 500px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-video-img-inner-2 {
    height: 400px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-video-img-inner-2 {
    height: 350px;
  }
}
.cm-video-img-inner-2 video {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  background-position: center center;
  background-size: cover;
  object-fit: cover;
}
.cm-video-box-video {
  position: relative;
}
.cm-video-box-video video {
  width: 99%;
  height: 600px;
  -o-object-fit: cover;
  object-fit: cover;
}
.cm-video-box-vthumb {
  position: absolute;
  top: -1px;
  inset-inline-start: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.cb-video-container {
  position: relative;
  width: 400px;
  float: right;
  cursor: pointer;
  height: 223px;
  overflow: hidden;
  border-radius: 32px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .cb-video-container {
    width: 285px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .cb-video-container {
    width: 240px;
  }
}
@media (max-width: 575px) {
  .cb-video-container {
    width: 90%;
  }
}

.video {
  display: block;
  border-radius: 30px;
  width: 100%;
}
.video source {
  width: 100%;
}

.play-pause--click-area {
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
  border-radius: 30px;
}

.play-pause--container {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}
.play-pause--container::before {
  width: 80px;
  height: 80px;
  border: 1px solid #1e1e1e;
  border-radius: 50%;
  content: "";
  top: 50%;
  left: 0;
  display: inline-block;
  right: 0;
  position: absolute;
  margin: 0 auto;
  transform: translateY(-50%);
}
.play-pause--container .play-pause--icon {
  margin: auto;
  right: 0;
  left: 0;
  position: absolute;
}
.play-pause--container .play-icon {
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-bottom-width: 15px;
  border-top-width: 15px;
  border-left: 25px solid #1e1e1e;
  position: relative;
}
.play-pause--container .pause-icon {
  background-color: #1e1e1e;
  position: relative;
  width: 10px;
  height: 30px;
  left: -14px;
  right: 0;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) !important;
}
.play-pause--container .pause-icon:after {
  content: "";
  background: inherit;
  width: 10px;
  height: 30px;
  left: 15px;
  position: absolute;
}

.cm-video-ai-play {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: inline-block;
  background: var(--cm-common-apple);
  line-height: 100px;
  font-size: 16px;
  color: var(--cm-common-black);
  position: relative;
  transition: all 0.4s ease;
  right: 0;
  left: 0;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  text-align: center;
  transform: translateY(-50%);
}
.cm-video-ai-play span {
  margin-left: 6px;
  color: var(--cm-common-white);
}
.cm-video-ai-space {
  padding: 400px 0px 400px 0px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-video-ai-space {
    padding: 300px 0px 300px 0px;
  }
}
.cm-video-ai-thumb {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.cm-video-ai-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cm-pulse-border {
  border-radius: 50%;
  z-index: 1;
}
.cm-pulse-border::after, .cm-pulse-border::before {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid var(--cm-common-apple);
  animation: borderanimate2 2s linear infinite;
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  z-index: -1;
}
.cm-pulse-border::before {
  animation-delay: 0.7s;
}

/*----------------------------------------*/
/*  6.11 pricing css
/*----------------------------------------*/
.cm-pricing-ai-top-title {
  font-size: 126px;
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-antonio);
  font-weight: 500;
  letter-spacing: -9px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cm-pricing-ai-top-title {
    font-size: 110px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-pricing-ai-top-title {
    font-size: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-pricing-ai-top-title {
    font-size: 70px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-pricing-ai-top-title {
    font-size: 50px;
    letter-spacing: -6px;
  }
}
@media (max-width: 575px) {
  .cm-pricing-ai-top-title {
    font-size: 35px;
    letter-spacing: -4px;
  }
}
.cm-pricing-ai-thumb {
  transform: rotate(10deg);
}
.cm-pricing-ai-thumb img {
  border-radius: 12px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-pricing-ai-thumb {
    transform: rotate(0) !important;
  }
}
.cm-pricing-ai-thumb-2 {
  transform: rotate(-10deg);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-pricing-ai-thumb-2 {
    transform: rotate(0) !important;
  }
}
.cm-pricing-ai-thumb-2 img {
  border-radius: 12px;
}
.cm-pricing-ai-price-wrap {
  background-color: var(--cm-grey-5);
  max-width: 410px;
  padding: 60px 90px;
  text-align: center;
  margin-left: -85px;
  position: relative;
  border-radius: 12px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-pricing-ai-price-wrap {
    margin-left: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-pricing-ai-price-wrap {
    max-width: 100%;
  }
}
@media (max-width: 575px) {
  .cm-pricing-ai-price-wrap {
    padding: 60px 20px;
  }
}
.cm-pricing-ai-price-wrap.two {
  margin-left: 0;
  margin-right: -86px;
  float: right;
  z-index: 1;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-pricing-ai-price-wrap.two {
    margin-right: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-pricing-ai-price-wrap.two {
    max-width: 100%;
    float: inherit;
  }
}
.cm-pricing-ai-subtitle {
  display: inline-block;
  padding: 5px 25px;
  border-radius: 21px;
  background: rgba(32, 31, 31, 0.1);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--cm-ff-manrope);
  text-transform: uppercase;
  margin-bottom: 35px;
  color: var(--cm-common-black-2);
}
.cm-pricing-ai-title {
  font-size: 80px;
  line-height: 1;
  letter-spacing: -2.4px;
  margin-bottom: -10px;
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-manrope);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-pricing-ai-title-wrap {
    margin-bottom: 50px;
  }
}
.cm-pricing-ai-month {
  margin-bottom: 22px;
  text-align: end;
  margin-right: 26px;
  color: var(--cm-common-black-2);
  letter-spacing: -0.9px;
  font-family: var(--cm-ff-manrope);
  font-size: 18px;
}
.cm-pricing-ai-sm-title {
  font-size: 30px;
  line-height: 1.4;
  letter-spacing: -0.9px;
  margin-bottom: 20px;
  font-family: var(--cm-ff-manrope);
  color: var(--cm-common-black-2);
}
.cm-pricing-ai-features-list {
  margin-bottom: 35px;
}
.cm-pricing-ai-features-list ul li {
  color: var(--cm-grey-4);
  font-size: 18px;
  letter-spacing: -0.36px;
  margin-bottom: 10px;
  list-style: none;
  font-family: var(--cm-ff-manrope);
  font-weight: 500;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-pricing-ai-item {
    margin-bottom: 30px;
  }
}
.cm-pricing-ai-btn {
  font-size: 16px;
  font-weight: 700;
  color: var(--cm-common-black-2);
  padding: 45px 45px;
  position: relative;
  display: inline-block;
  font-family: var(--cm-ff-manrope);
  background-color: var(--cm-common-black-2);
  border-radius: 100%;
  border-top-left-radius: 200%;
  border-bottom-right-radius: 200%;
  z-index: 1;
}
.cm-pricing-ai-btn:hover {
  color: var(--cm-common-apple);
}
.cm-pricing-ai-btn-wrap {
  display: inline-block;
}
.cm-pricing-ai-btn::before {
  position: absolute;
  content: "";
  width: calc(100% - 14px);
  height: calc(100% - 2px);
  background-color: var(--cm-common-white);
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  border-top-left-radius: 200%;
  border-bottom-right-radius: 200%;
}
.cm-pricing-ai-btn-arrow img {
  margin-right: -100px;
}
.cm-pricing-main-wrapper {
  background-color: var(--cm-common-white);
  border-radius: 12px;
  padding: 0 28px 28px 28px;
  border: 1px solid #d8d5d1;
}
.cm-pricing-main-icon {
  color: var(--cm-common-black-2);
}
.cm-pricing-main-planname {
  padding: 11px 7px 3px 7px;
  border-radius: 0 0 4px 4px;
  border: 1px solid #e4e2df;
  border-top: none;
  display: inline-block;
}
.cm-pricing-main-planname p {
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  font-family: var(--cm-ff-kanit);
  color: var(--cm-common-black-2);
  margin-bottom: 0;
}
.cm-pricing-main-planname span {
  background: linear-gradient(96.24deg, #ff7448 0%, #ff4848 52.43%, #6248ff 92.36%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cm-pricing-main-head .para {
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  font-family: var(--cm-ff-kanit);
  color: var(--cm-common-black-2);
}
.cm-pricing-main-head .para-2 {
  font-size: 14px;
  line-height: 20px;
  font-weight: 300;
  font-family: var(--cm-ff-kanit);
  color: var(--cm-common-black-2);
}
.cm-pricing-main-head-top {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 22px;
}
.cm-pricing-main-price {
  gap: 4px;
  align-items: start;
  justify-content: start;
  display: flex;
}
.cm-pricing-main-price .price {
  font-size: 32px;
  line-height: 40px;
  font-weight: 400;
  letter-spacing: -0.32px;
  font-family: var(--cm-ff-kanit);
  color: var(--cm-common-black-2);
}
.cm-pricing-main-price .currency {
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  font-family: var(--cm-ff-kanit);
  color: var(--cm-common-black-2);
  padding-top: 3px;
}
.cm-pricing-main-btn {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  border: 2px solid transparent;
  background-image: linear-gradient(#161616, #161616), linear-gradient(114deg, #ff7448, #ff4848 51%, #6248ff 88%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  font-family: var(--cm-ff-kanit);
  border-radius: 8px;
  padding: 10px 5px;
  width: 100%;
  display: block;
  text-align: center;
}
.cm-pricing-main-btn-wrap {
  border-bottom: 1px solid rgba(22, 22, 22, 0.1490196078);
}
.cm-pricing-main-list ul {
  gap: 8px;
  align-items: stretch;
  display: flex;
  flex-direction: column;
  padding-top: 22px;
}
.cm-pricing-main-list ul li {
  gap: 10px;
  align-items: center;
  justify-content: start;
  list-style: none;
  display: flex;
}
.cm-pricing-main-list ul li i {
  color: var(--cm-common-black-2);
  font-size: 14px;
}
.cm-pricing-main-list ul li span {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  font-family: var(--cm-ff-kanit);
  color: var(--cm-common-black-2);
}
.cm-pricing-main-wrapper-2 {
  background-color: #e4e2df;
}
.cm-pricing-main-wrapper-2 .cm-pricing-main-btn {
  background: rgb(249, 249, 249);
  opacity: 0.4;
  cursor: not-allowed;
  color: #161616;
}
.cm-pricing-main-wrapper-2 .cm-pricing-main-planname {
  background: var(--cm-common-white);
  border: 1px solid #d8d5d1;
  border-top: none;
}
.cm-pricing-main-wrapper-3 {
  border: 3px solid transparent;
  background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(96.24deg, #ff7448, #ff4848 51%, #6248ff 88%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.image-container {
  position: relative;
  width: 800px;
  height: 800px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  max-width: 100%;
  transition: all ease 0.5s;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .image-container {
    height: 600px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .image-container {
    height: 500px;
  }
}
@media (max-width: 575px) {
  .image-container {
    height: 400px;
  }
}

.image-container > * {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/*----------------------------------------*/
/*  6.7 faq css
/*----------------------------------------*/
.cm-faq-wrapper .accordion-item {
  border: none;
  border-radius: 0;
  border-top: 1px solid rgba(43, 33, 33, 0.1);
  padding: 23px 0px;
  background: none;
}
.cm-faq-wrapper .accordion-button:not(.collapsed) {
  color: var(--cm-common-black-2);
  background: none;
  box-shadow: none;
}
.cm-faq-wrapper .accordion-button::after {
  background-image: inherit;
}
.cm-faq-wrapper .cm-faq-btn {
  font-size: 22px;
  letter-spacing: 0px;
  line-height: 25px;
  color: var(--cm-common-black-2);
  font-weight: 400;
  font-family: var(--cm-ff-kanit);
  padding: 0 43px 0 0;
  background: none;
}
.cm-faq-wrapper .cm-faq-btn:focus {
  border: none;
  outline: 0;
  background: none;
  box-shadow: none;
}
.cm-faq-wrapper .cm-faq-btn:not(.collapsed) {
  color: var(--cm-common-black-2);
}
.cm-faq-wrapper .cm-faq-btn:not(.collapsed)::after {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
.cm-faq-wrapper .cm-faq-btn:not(.collapsed) .accordion-btn::before {
  -webkit-transform: translateX(-50%) rotate(90deg);
  -moz-transform: translateX(-50%) rotate(90deg);
  -ms-transform: translateX(-50%) rotate(90deg);
  -o-transform: translateX(-50%) rotate(90deg);
  transform: translateX(-50%) rotate(90deg);
  color: var(--cm-common-black-2);
}
.cm-faq-wrapper .cm-faq-btn:not(.collapsed) .accordion-btn::after {
  color: var(--cm-common-black-2);
}
.cm-faq-wrapper .accordion-btn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: inline-block;
  width: 12px;
  height: 12px;
}
.cm-faq-wrapper .accordion-btn::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: #000000;
  border-radius: 2px;
  transition: all 0.4s ease;
}
.cm-faq-wrapper .accordion-btn::before {
  position: absolute;
  content: "";
  width: 2px;
  height: 100%;
  left: 50%;
  top: 0;
  background-color: #000000;
  transform: translateX(-50%);
  border-radius: 2px;
  transition: all 0.4s ease;
}
.cm-faq-wrapper .cm-faq-details-para {
  padding: 0;
  padding-top: 20px;
}
.cm-faq-wrapper .cm-faq-details-para p {
  margin-bottom: 0;
  font-size: 18px;
  color: var(--cm-grey-1);
  font-weight: 400;
  line-height: 28px;
  padding-left: 0;
  font-family: var(--cm-ff-kanit);
  padding-right: 80px;
  padding-bottom: 5px;
}

/*----------------------------------------*/
/* 6.16 team css
/*----------------------------------------*/
.cm-team-subtitle {
  color: var(--cm-common-black);
  font-weight: 500;
}
.cm-team-title {
  font-size: 30px;
  color: var(--cm-common-black);
  margin-bottom: 0;
}
.cm-team-title a {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  background-image: linear-gradient(#1e1e1e, #1e1e1e), linear-gradient(#1e1e1e, #1e1e1e);
  background-size: 0 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
  line-height: 1;
}
.cm-team-title a:hover {
  background-image: linear-gradient(#1e1e1e, #1e1e1e), linear-gradient(#1e1e1e, #1e1e1e);
  background-size: 0 1px, 100% 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
}
.cm-team-thumb {
  position: relative;
}
.cm-team-thumb img {
  transition: all 0.4s cubic-bezier(0.37, 0, 0.63, 1);
}
.cm-team-item:hover .cm-team-content {
  bottom: 50px;
  visibility: visible;
  opacity: 1;
}
.cm-team-item:hover .cm-team-thumb img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}
.cm-team-content {
  position: absolute;
  transition: all 0.4s cubic-bezier(0.37, 0, 0.63, 1);
  bottom: 30px;
  text-align: center;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
}
.cm-team-modal-wrapper-architec .cm-details-content-wrap {
  padding-top: 120px;
}
.cm-team-modal-wrapper-architec .cm-team-modal-content-wrapper {
  overflow-y: auto;
}
.cm-team-modal-wrapper .modal-dialog {
  background-image: linear-gradient(to right, #2c3846, #333945, #3e393f, #584344, #8b4d41);
  z-index: 9999;
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}
.cm-team-modal-wrapper .modal-content {
  background-color: inherit;
}
.cm-team-modal-wrapper .modal-body {
  padding: 0;
}
.cm-team-modal-wrapper .modal-header {
  padding: 0;
  border-bottom: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.cm-team-modal-wrapper .btn-close {
  position: absolute;
  top: 35px;
  right: 35px;
  z-index: 99999999999;
  padding: 0;
  margin: 0;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  color: var(--tp-common-black);
  background-color: #fff !important;
  border: 1px solid rgba(25, 25, 26, 0.2);
  opacity: 1;
  transition: 0.3s;
}
.cm-team-modal-para {
  letter-spacing: 1px;
}
.cm-team-modal-details-thumb img {
  transform: translateY(30px);
}
.cm-team-modal-details-social {
  display: flex;
  align-items: center;
}
.cm-team-modal-details-social span {
  margin-right: 20px;
  font-size: 20px;
  color: var(--cm-theme-primary);
}
.cm-team-modal-details-social a {
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}
.cm-team-modal-details-social a:hover {
  color: var(--cm-theme-primary);
  border-color: var(--cm-theme-primary);
}
.cm-team-modal-title-wrapper h5 {
  color: var(--cm-theme-primary);
  margin-bottom: 0;
}
.cm-team-modal-content-wrapper {
  height: 100vh;
  overflow: hidden;
}
.cm-team-modal-service-wrap ul li {
  list-style: none;
  display: flex;
  margin-bottom: 30px;
  padding-bottom: 10px;
  border-bottom: 1px solid #535353;
}
.cm-team-modal-service-wrap ul li span {
  margin-right: 10px;
  transform: translateY(2px);
  font-size: 20px;
}
.cm-team-crtv-overly {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  right: 0;
  margin: 0 auto;
  text-align: center;
  transition: all 0.6s ease;
}
.cm-team-crtv-thumb {
  border: 1px solid #E9E9E9;
  margin-top: -1px;
  margin-right: -1px;
}
.cm-team-crtv-wrap:hover .cm-team-crtv-overly {
  transform: scale(2);
}
.cm-team-crtv-title {
  color: var(--cm-common-black-2);
  text-transform: capitalize;
  margin-top: 30px;
  margin-bottom: 3px;
  font-family: var(--cm-ff-marcellus);
  font-size: 30px;
  font-weight: 500;
}
.cm-team-crtv-title a {
  background-image: linear-gradient(#121212, #121212), linear-gradient(#121212, #121212);
  background-size: 0 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.cm-team-crtv-title a:hover {
  background-image: linear-gradient(#121212, #121212), linear-gradient(#121212, #121212);
  background-size: 0 1px, 100% 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
}
.cm-team-crtv-subtitle {
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-marcellus);
  font-size: 18px;
}
.cm-team-brands-custom .cm-team-crtv-thumb {
  border-radius: 12px;
}
.cm-team-brands-custom .cm-team-crtv-title {
  color: var(--cm-common-black-3);
  text-transform: lowercase;
  font-weight: 400;
  font-family: var(--cm-ff-dirtyline);
}
.cm-team-brands-custom .cm-team-crtv-title a {
  background-image: linear-gradient(#3f4144, #3f4144), linear-gradient(#3f4144, #3f4144);
  background-size: 0 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.cm-team-brands-custom .cm-team-crtv-title a:hover {
  background-image: linear-gradient(#3f4144, #3f4144), linear-gradient(#3f4144, #3f4144);
  background-size: 0 1px, 100% 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
}
.cm-team-brands-custom .cm-team-crtv-subtitle {
  color: var(--cm-common-black-3);
  font-family: var(--cm-ff-kanit);
}
.cm-team-about-wrap .cm-team-thumb {
  border-radius: 12px;
  overflow: hidden;
}
.cm-team-about-wrap .cm-team-thumb img {
  border-radius: 12px;
}
.cm-team-about-wrap .cm-team-subtitle {
  font-family: var(--cm-ff-kanit);
  font-weight: 400;
}
.cm-team-about-wrap .cm-team-title {
  font-family: var(--cm-ff-kanit);
  font-weight: 500;
}
.cm-team-details-wrpper {
  height: 100%;
  z-index: 1;
}
.cm-team-details-wrpper .cm-team-modal-title {
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-manrope);
  line-height: 1;
}
@media (max-width: 575px) {
  .cm-team-details-wrpper .cm-team-modal-title {
    font-size: 50px;
  }
}
.cm-team-details-wrpper .cm-team-modal-para {
  color: var(--cm-grey-1);
  font-family: var(--cm-ff-kanit);
}
.cm-team-details-wrpper .cm-team-modal-item-title {
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-manrope);
}
.cm-team-details-wrpper .cm-team-modal-service-iteam p {
  color: var(--cm-grey-1);
  font-family: var(--cm-ff-kanit);
}
.cm-team-details-wrpper .cm-team-modal-service-wrap ul li span {
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-manrope);
}
.cm-team-details-wrpper .cm-team-modal-details-social span {
  color: var(--cm-grey-1);
  font-family: var(--cm-ff-kanit);
}
.cm-team-details-wrpper .cm-team-modal-details-social a {
  color: var(--cm-grey-1);
}
.cm-team-details-wrpper .cm-team-modal-details-social a:hover {
  color: var(--cm-theme-primary);
}
.cm-team-details-wrpper .cm-team-modal-details-thumb {
  transform: translateX(150px);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-team-details-wrpper .cm-team-modal-details-thumb {
    transform: translateX(1px);
  }
}
.cm-team-details-shape {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.cm-team-details-shape img {
  max-width: 100%;
}
.cm-team-details-shape-2 {
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: 100%;
  z-index: -1;
}

.cm-box-overlay {
  background-image: radial-gradient(circle, rgb(238, 174, 202) 0%, rgb(148, 187, 233) 100%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  -webkit-transition: all 0.5s cubic-bezier(0.61, 1, 0.88, 1);
  transition: all 0.5s cubic-bezier(0.61, 1, 0.88, 1);
  opacity: 0;
  visibility: visible;
}
.cm-box-hover:hover .cm-box-overlay {
  visibility: visible;
  opacity: 0.7;
}

.modal {
  overflow-y: scroll;
  overflow-x: hidden;
  --bs-modal-border-width: 0;
  --bs-modal-border-radius: 0;
}

.cm-details-content-wrap {
  padding-bottom: 120px;
  padding-top: 220px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-details-content-wrap {
    padding-top: 180px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-details-content-wrap {
    padding-bottom: 20px;
  }
}

/*----------------------------------------*/
/* 6.2 brands css
/*----------------------------------------*/
.cm-brands-crtv-item a {
  border: 1px solid #E9E9E9;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 0px;
  padding-right: 0px;
  display: block;
  margin-top: -1px;
  margin-right: -1px;
  text-align: center;
}
.cm-brands-crtv-spacing {
  padding-top: 505px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .cm-brands-crtv-spacing {
    padding-top: 400px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cm-brands-crtv-spacing {
    padding-top: 380px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-brands-crtv-spacing {
    padding-top: 300px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-brands-crtv-spacing {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-brands-crtv-spacing {
    padding-top: 0;
  }
}
@media (max-width: 575px) {
  .cm-brands-crtv-spacing {
    padding-bottom: 60px;
  }
}
.cm-brands-company-logo {
  height: 300px;
  line-height: 300px;
  background: rgba(220, 229, 229, 0.7);
  border-radius: 12px;
  transition: all 0.4s ease;
}
.cm-brands-company-logo:hover .logo-1 {
  opacity: 0;
  visibility: hidden;
}
.cm-brands-company-logo:hover .logo-2 {
  opacity: 1;
  visibility: visible;
}
.cm-brands-company-logo .logo-1 {
  transition: all 0.4s ease;
}
.cm-brands-company-logo .logo-2 {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
}
.cm-brands-company-logo:hover {
  background: var(--cm-common-black-3);
}
.cm-brands-slide-about .cm-brands-company-logo {
  background: #F5F5F5;
}
.cm-brands-slide-about .cm-brands-company-logo:hover {
  background: var(--cm-common-black-2);
}

/*----------------------------------------*/
/*  6.3 chose css
/*----------------------------------------*/
.cm-chose-us-title-wrapper {
  margin-right: 200px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-chose-us-title-wrapper {
    margin-right: 0;
  }
}
.cm-chose-us-title-wrapper .para {
  margin-right: 115px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-chose-us-title-wrapper .para {
    margin-right: 0;
  }
}
.cm-chose-list {
  display: flex;
  justify-content: end;
}
@media (max-width: 575px) {
  .cm-chose-list {
    flex-direction: column;
  }
}
.cm-chose-list ul:not(:last-child) {
  margin-right: 50px;
}
.cm-chose-list ul li {
  display: flex;
  list-style: none;
}
.cm-chose-list ul li span {
  margin-right: 10px;
  font-size: 14px;
}
.cm-chose-list ul li p {
  letter-spacing: 0.3px;
  font-weight: 300;
}

/*----------------------------------------*/
/*  6.12 project css
/*----------------------------------------*/
.cm-project-spacing {
  padding-top: 865px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cm-project-spacing {
    padding-top: 750px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-project-spacing {
    padding-top: 640px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-project-spacing {
    padding-top: 70px;
  }
}
.cm-project-thumb {
  overflow: hidden;
  position: relative;
  height: 100%;
}
.cm-project-thumb a img {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  object-fit: cover;
}
.cm-project-thumb::before {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 0%;
  content: "";
  background: linear-gradient(178.92deg, rgba(29, 29, 29, 0) 27.4%, #1D1D1D 108.05%);
  opacity: 0;
  visibility: hidden;
  z-index: 2;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.cm-project-box {
  overflow: hidden;
  height: 100%;
}
@media (max-width: 575px) {
  .cm-project-box {
    height: 450px;
  }
}
.cm-project-box:hover .cm-project-content {
  opacity: 1;
  visibility: visible;
  bottom: 60px;
}
.cm-project-box:hover .cm-project-thumb::before {
  height: 100%;
  opacity: 1;
  visibility: visible;
}
.cm-project-content {
  bottom: 40px;
  left: 60px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 3;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-project-content {
    bottom: 30px;
    left: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-project-content {
    left: 30px;
  }
}
.cm-project-subtitle {
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cm-project-link {
  font-size: 18px;
  letter-spacing: 0.5px;
  font-weight: 300;
}
.cm-project-title {
  font-size: 32px;
  margin-bottom: 20px;
  font-weight: 600;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-project-title {
    font-size: 26px;
  }
}
.cm-project-title a {
  background-image: linear-gradient(white, white), linear-gradient(white, white);
  background-size: 0 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.cm-project-title a:hover {
  background-image: linear-gradient(white, white), linear-gradient(white, white);
  background-size: 0 1px, 100% 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
}
.cm-project-link:hover {
  color: var(--cm-theme-primary);
}
.cm-project-link i {
  margin-left: 5px;
}
.cm-project-pin-spacing {
  margin-top: -400px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-project-pin-spacing {
    margin-top: -300px;
  }
}
.cm-project-port-main-title {
  font-size: 400px;
  font-family: var(--cm-ff-manrope);
  font-weight: 800;
  -webkit-text-stroke-width: 3px;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  stroke-width: 3px;
  -webkit-text-stroke-color: #121212;
  stroke: #121212;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-project-port-main-title {
    font-size: 260px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-project-port-main-title {
    font-size: 160px;
  }
}
@media (max-width: 575px) {
  .cm-project-port-main-title {
    font-size: 100px;
  }
}
.cm-project-port-title {
  color: var(--cm-common-black-2);
  font-size: 60px;
  font-weight: 800;
  font-family: var(--cm-ff-manrope);
  line-height: 1em;
}
@media (max-width: 575px) {
  .cm-project-port-title {
    font-size: 50px;
  }
}
.cm-project-port-title-box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  z-index: -1;
}
.cm-project-port-subtitle {
  font-family: var(--cm-ff-kanit);
  font-size: 35px;
  color: var(--cm-grey-2);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-project-port-wrap {
    margin-left: 50px;
    margin-right: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-project-port-wrap {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-project-port-wrap {
    padding-top: 50px;
    margin-left: 0;
    margin-right: 0;
  }
}
@media (max-width: 575px) {
  .cm-project-port-wrap {
    padding-top: 120px;
  }
}
.cm-project-port-thumb img {
  border-radius: 12px;
}
.cm-project-crtv-item {
  padding: 0 15px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-project-crtv-item {
    width: 100%;
    padding: 0;
    margin-bottom: 30px;
  }
}
.cm-project-crtv-item-title {
  height: 100%;
  width: 700px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cm-project-crtv-item-title {
    width: 570px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-project-crtv-item-title {
    width: 100%;
  }
}
.cm-project-crtv-item-title .cm-project-crtv-title {
  height: 100%;
  display: flex;
  align-items: center;
}
.cm-project-crtv-item-title .cm-project-crtv-title h2 {
  padding-bottom: 244px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-project-crtv-item-title .cm-project-crtv-title h2 {
    padding-bottom: 40px;
  }
  .cm-project-crtv-item-title .cm-project-crtv-title h2 br {
    display: none;
  }
}
@media (max-width: 575px) {
  .cm-project-crtv-item-title .cm-project-crtv-title h2 {
    padding: 0 15px;
  }
}
.cm-project-crtv-item:hover .cm-project-crtv-content {
  bottom: 40px;
  opacity: 1;
  visibility: visible;
}
.cm-project-crtv-item:hover .cm-project-crtv-thumb::before {
  opacity: 1;
}
.cm-project-crtv-item:hover .cm-project-crtv-thumb img {
  transform: scale(1.1);
}
.cm-project-crtv-item-2 {
  width: 700px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-project-crtv-item-2 {
    width: 100%;
  }
}
.cm-project-crtv-item-2 .cm-project-crtv-title-2 {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  text-align: center;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-project-crtv-item-2 .cm-project-crtv-title-2 {
    position: inherit;
    margin-top: 80px;
  }
}
.cm-project-crtv-item-2 .cm-project-crtv-title-2 h2 {
  font-size: 120px;
  margin-bottom: 35px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-project-crtv-item-2 .cm-project-crtv-title-2 h2 {
    margin-bottom: 10px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-project-crtv-item-2 .cm-project-crtv-title-2 h2 {
    font-size: 80px;
    margin-bottom: 0;
  }
}
.cm-project-crtv-item-2 .cm-project-crtv-title-2 h2 a {
  background-image: linear-gradient(#121212, #121212), linear-gradient(#121212, #121212);
  background-size: 0 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.cm-project-crtv-item-2 .cm-project-crtv-title-2 h2 a:hover {
  background-image: linear-gradient(#121212, #121212), linear-gradient(#121212, #121212);
  background-size: 0 1px, 100% 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
}
.cm-project-crtv-title h2 {
  font-size: 155px;
  font-family: var(--cm-ff-marcellus);
  color: var(--cm-common-black-2);
  line-height: 1;
  text-transform: capitalize;
  padding: 40px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-project-crtv-title h2 {
    font-size: 120px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-project-crtv-title h2 {
    font-size: 80px;
  }
}
@media (max-width: 575px) {
  .cm-project-crtv-title h2 {
    padding: 0 15px;
    font-size: 60px !important;
  }
}
.cm-project-crtv-title-sm {
  font-size: 60px;
  font-family: var(--cm-ff-marcellus);
  letter-spacing: 3px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-project-crtv-title-sm {
    font-size: 45px;
  }
}
@media (max-width: 575px) {
  .cm-project-crtv-title-sm {
    font-size: 35px;
    line-height: 1;
    margin-top: 20px;
  }
}
.cm-project-crtv-title-sm a {
  background-image: linear-gradient(white, white), linear-gradient(white, white);
  background-size: 0 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.cm-project-crtv-title-sm a:hover {
  background-image: linear-gradient(white, white), linear-gradient(white, white);
  background-size: 0 1px, 100% 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
}
.cm-project-crtv-thumb {
  overflow: hidden;
  border-radius: 15px;
  position: relative;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}
.cm-project-crtv-thumb::before {
  background: linear-gradient(180deg, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 0.8) 100%);
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  opacity: 0;
  transition: all 0.4s ease;
  z-index: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-project-crtv-thumb {
    width: 100%;
  }
}
.cm-project-crtv-thumb img {
  max-width: inherit;
  object-fit: cover;
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  -ms-transition: all 0.6s;
  -o-transition: all 0.6s;
  transition: all 0.6s;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cm-project-crtv-thumb img {
    width: 600px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-project-crtv-thumb img {
    width: 100%;
    height: 100%;
  }
}
.cm-project-crtv-content {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  -webkit-transition: all 0.3s 0s ease-out;
  -moz-transition: all 0.3s 0s ease-out;
  -ms-transition: all 0.3s 0s ease-out;
  -o-transition: all 0.3s 0s ease-out;
  transition: all 0.3s 0s ease-out;
  opacity: 0;
  visibility: hidden;
  z-index: 3;
}
@media (max-width: 575px) {
  .cm-project-crtv-content {
    padding: 15px;
  }
}
.cm-project-crtv-content span {
  font-size: 25px;
  font-family: var(--cm-ff-marcellus);
}
.cm-project-ai-transtion {
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}
.cm-project-ai-shape-1 {
  position: absolute;
  top: 0;
  margin-top: -2px;
  left: 0;
  z-index: 9;
}
.cm-project-ai-shape-2 {
  position: absolute;
  bottom: 0;
  margin-bottom: -2px;
  left: 0;
  z-index: 2;
}
.cm-project-ai-gradient {
  pointer-events: none;
  background-image: linear-gradient(90deg, white, rgba(255, 255, 255, 0.95), rgba(255, 250, 250, 0.3) 10%, rgba(199, 193, 193, 0) 33%, rgba(243, 223, 223, 0) 53%, rgba(231, 213, 213, 0) 77%, rgba(255, 250, 250, 0.7) 90%, rgb(255, 255, 255) 96%, white);
  position: absolute;
  inset: 1%;
  z-index: 99;
  top: 0;
  left: 0;
  right: 0;
}
.cm-project-ai-item a {
  display: block;
}
.cm-project-ai-title {
  font-size: 70px;
  font-family: var(--cm-ff-antonio);
  color: var(--cm-common-black-2);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  text-align: center;
}
.cm-project-brand-btn .cm-btn-big {
  color: var(--cm-common-white);
  background: var(--cm-common-black-3);
}
.cm-project-brand-btn .cm-btn-big:hover {
  border-color: var(--cm-common-black-3);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-project-brand-btn .cm-hero-crtv-btn {
    position: inherit;
    top: inherit;
    right: inherit;
    margin-bottom: 50px;
  }
}
.cm-project-brand-tag {
  position: absolute;
  bottom: 40px;
  right: 40px;
}
.cm-project-brand-year {
  font-family: var(--cm-ff-kanit);
}
.cm-project-brand-title {
  line-height: 1;
}
.cm-project-brand-title .cm-btn-brand {
  padding: 0;
  background: transparent;
  color: var(--cm-common-black-3);
  border-radius: 0;
  line-height: 1;
  font-family: var(--cm-ff-dirtyline);
  text-transform: lowercase;
  font-size: 40px;
  line-height: 1;
}
.cm-project-brand-thumb .image-container {
  height: 750px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cm-project-brand-thumb .image-container {
    height: 600px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-project-brand-thumb .image-container {
    height: 500px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-project-brand-thumb .image-container {
    height: 580px;
  }
}

.cm_img_reveal {
  visibility: hidden;
  overflow: hidden;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .panels-container {
    flex-wrap: wrap;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .panels-container .panel {
    width: 100%;
  }
}

/*----------------------------------------*/
/* 6.18 text css
/*----------------------------------------*/
.cm-text-slider-item {
  position: relative;
}
.cm-text-slider-item .text {
  padding: 0 25px;
  font-size: 130px;
  font-weight: 700;
  font-family: var(--cm-ff-common);
  text-align: center;
  color: transparent;
  background-image: url(../img/service/transparent.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-clip: text;
  -webkit-background-clip: text;
  line-height: 1.2;
  flex: 0 0 auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-text-slider-item .text {
    font-size: 80px;
  }
}
@media (max-width: 575px) {
  .cm-text-slider-item .text {
    font-size: 60px;
  }
}
.cm-text-port-slider-active .swiper-slide {
  width: auto;
}
.cm-text-port-slider-item {
  display: flex;
  align-items: center;
}
.cm-text-port-slider-item h3 {
  color: var(--cm-common-black);
  font-family: var(--cm-ff-manrope);
  font-size: 130px;
  text-transform: uppercase;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-text-port-slider-item h3 {
    font-size: 80px;
  }
}
.cm-text-port-slider-item img {
  width: 110px;
  margin: 0px 20px 0px 50px;
  margin-top: -7px;
  -webkit-animation: rotate-infinite 15s linear infinite;
  animation: rotate-infinite 15s linear infinite;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-text-port-slider-item img {
    width: 80px;
  }
}
.cm-text-crtv-wrap .cm-text-port-slider-item h3 {
  font-family: var(--cm-ff-marcellus);
  letter-spacing: 0.7px;
  color: var(--cm-common-black-2);
}

.cm-hero-text-slide-active .swiper-slide {
  width: auto;
}

.slide-transtion {
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}

/*----------------------------------------*/
/* 6.8 gallery css
/*----------------------------------------*/
.cm-gallery-port-spacing {
  padding-top: 95px;
  padding-bottom: 120px;
}
.cm-gallery-port-item {
  width: 485px;
  height: 550px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-gallery-port-item {
    width: 350px;
    height: 400px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-gallery-port-item {
    width: 300px;
    height: 400px;
  }
}
.cm-gallery-port-item img {
  border-radius: 20px;
  width: 100%;
  height: 100%;
}
.cm-gallery-port-slide .swiper-slide {
  margin: 0 8px;
  transform-origin: center center;
  transform: rotate(4deg) translateZ(0);
  vertical-align: top;
  padding: 14px 0px;
  width: auto;
}
.cm-gallery-port-slide-2 .swiper-slide {
  margin: 0 8px;
  transform-origin: center center;
  transform: rotate(4deg) translateZ(0);
  vertical-align: top;
  padding: 20px 0px;
  width: auto;
}
.cm-gallery-port-slide-2 .cm-gallery-port-title-wrap {
  text-align: left;
}
.cm-gallery-port-title-wrap {
  background: var(--cm-common-black);
  width: auto;
  height: auto;
  margin: 2px 0 0 0;
  padding: 26px 65px 19px 36px;
  border-radius: 12px;
}
.cm-gallery-port-title-wrap h3 {
  color: var(--tp-common-white);
  font-family: var(--tp-ff-manrope);
  font-size: 21px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 0.93em;
  margin-bottom: 4px;
}
.cm-gallery-port-title-wrap span {
  color: var(--tp-common-white);
  font-family: var(--tp-ff-Kanit);
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
}
.cm-gallery-port-video video {
  width: 485px;
  height: 550px;
  object-fit: cover;
  border-radius: 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-gallery-port-video video {
    width: 350px;
    height: 400px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-gallery-port-video video {
    width: 300px;
    height: 400px;
  }
}
.cm-gallery-crtv-thumb img {
  border-radius: 150px 150px 0px 0px;
  height: 900px;
  object-fit: cover;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .cm-gallery-crtv-thumb img {
    height: 750px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cm-gallery-crtv-thumb img {
    height: 600px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-gallery-crtv-thumb img {
    height: 500px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-gallery-crtv-thumb img {
    border-radius: 0;
    height: auto;
  }
}
.cm-gallery-crtv-title {
  font-size: 250px;
  font-family: var(--cm-ff-marcellus);
  font-weight: 500;
  color: var(--cm-common-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-gallery-crtv-title {
    font-size: 150px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-gallery-crtv-title {
    font-size: 80px;
  }
}
@media (max-width: 575px) {
  .cm-gallery-crtv-title {
    font-size: 40px;
  }
}
.cm-gallery-crtv-content {
  padding: 40px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  text-align: center;
  display: inline-block;
}

/*----------------------------------------*/
/* 6.14 skill css
/*----------------------------------------*/
.cm-skill-icon img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}
.cm-skill-icon-thumb {
  padding: 45px 10px;
  border: 1px solid rgba(43, 33, 33, 0.1);
  border-radius: 100px;
  width: 100%;
  text-align: center;
  background: rgba(188, 188, 188, 0.08);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-skill-icon-item {
    margin-bottom: 30px;
  }
}
.cm-skill-count {
  font-family: var(--cm-ff-manrope);
  font-size: 24px;
  font-weight: 500;
  color: var(--cm-common-black-2);
  margin-bottom: 0;
}
.cm-skill-title {
  font-size: 20px;
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-kanit);
  font-weight: 500;
}
.cm-skill-section-content {
  border-left: 1px solid rgba(43, 33, 33, 0.1);
  margin-left: 280px;
  padding-left: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-skill-section-content {
    margin-left: 180px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-skill-section-content {
    margin-left: 0;
    border-left: 0;
    padding-left: 0;
  }
}
.cm-skill-item {
  border-top: 1px solid rgba(43, 33, 33, 0.1);
  border-bottom: 1px solid rgba(43, 33, 33, 0.1);
  padding: 34px 0px;
  margin-top: -1px;
}
.cm-skill-item-title {
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-manrope);
  font-size: 26px;
}
.cm-skill-item-title-box {
  margin-right: 20px;
}
.cm-skill-item-title-year {
  display: flex;
  align-items: end;
  flex-direction: column;
}
.cm-skill-item-title-year a {
  color: var(--cm-common-black-2);
  margin-bottom: 15px;
  font-size: 20px;
  transform: rotate(45deg);
  -webkit-transition: all 0.3s 0s ease-out;
  -moz-transition: all 0.3s 0s ease-out;
  -ms-transition: all 0.3s 0s ease-out;
  -o-transition: all 0.3s 0s ease-out;
  transition: all 0.3s 0s ease-out;
}
.cm-skill-item-title-year a:hover {
  transform: rotate(0);
}
.cm-skill-item-year {
  color: var(--cm-grey-3);
  font-family: var(--cm-ff-manrope);
}
.cm-skill-item-subtitle {
  font-size: 16px;
  font-family: var(--cm-ff-kanit);
  color: var(--cm-grey-3);
  font-weight: 300;
  margin-bottom: 0;
}
.cm-skill-about .cm-section-port-content {
  color: var(--cm-grey-1);
}
.cm-skill-about .cm-skill-item-subtitle {
  color: var(--cm-grey-1);
}
.cm-skill-about .cm-skill-item-year {
  color: var(--cm-grey-1);
}

/*----------------------------------------*/
/*  6.15 hero-stars
/*----------------------------------------*/
.cm-hero-stars {
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#stars {
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 1602px 661px #8751ff, 1779px 795px #8751ff, 1154px 812px #8751ff, 1328px 800px #8751ff, 1262px 1251px #8751ff, 1976px 432px #8751ff, 1650px 1853px #8751ff, 1001px 468px #8751ff, 609px 405px #8751ff, 1842px 1576px #8751ff, 742px 1365px #8751ff, 321px 1286px #8751ff, 462px 926px #8751ff, 481px 458px #8751ff, 484px 1952px #8751ff, 380px 1267px #8751ff, 1122px 820px #8751ff, 1626px 1217px #8751ff, 1953px 1255px #8751ff, 1728px 140px #8751ff, 1430px 1262px #8751ff, 7px 463px #8751ff, 1664px 338px #8751ff, 63px 11px #8751ff, 552px 438px #8751ff, 3px 783px #8751ff, 1247px 361px #8751ff, 803px 121px #8751ff, 755px 1435px #8751ff, 659px 1572px #8751ff, 462px 256px #8751ff, 654px 1979px #8751ff, 1747px 1521px #8751ff, 1222px 1922px #8751ff, 1615px 1672px #8751ff, 980px 918px #8751ff, 1477px 1509px #8751ff, 1311px 365px #8751ff, 286px 1255px #8751ff, 897px 1108px #8751ff, 770px 330px #8751ff, 337px 598px #8751ff, 1192px 711px #8751ff, 1656px 1284px #8751ff, 1808px 543px #8751ff, 1099px 608px #8751ff, 1215px 157px #8751ff, 1670px 748px #8751ff, 110px 734px #8751ff, 1513px 1678px #8751ff, 137px 1969px #8751ff, 242px 1029px #8751ff, 670px 606px #8751ff, 1173px 1915px #8751ff, 1730px 1946px #8751ff, 1617px 1395px #8751ff, 294px 1214px #8751ff, 942px 1551px #8751ff, 327px 885px #8751ff, 1961px 128px #8751ff, 314px 333px #8751ff, 845px 1457px #8751ff, 1293px 408px #8751ff, 1058px 582px #8751ff, 1981px 1771px #8751ff, 1473px 311px #8751ff, 1227px 955px #8751ff, 1937px 1262px #8751ff, 754px 624px #8751ff, 266px 619px #8751ff, 182px 1621px #8751ff, 29px 802px #8751ff, 1075px 298px #8751ff, 1986px 1900px #8751ff, 1770px 447px #8751ff, 1291px 57px #8751ff, 782px 1535px #8751ff, 1312px 111px #8751ff, 1194px 651px #8751ff, 899px 193px #8751ff, 282px 163px #8751ff, 1341px 998px #8751ff, 379px 1540px #8751ff, 406px 1584px #8751ff, 1227px 223px #8751ff, 1525px 402px #8751ff, 66px 1842px #8751ff, 1531px 1873px #8751ff, 1303px 376px #8751ff, 1949px 1797px #8751ff, 1093px 1018px #8751ff, 937px 886px #8751ff, 1954px 1675px #8751ff, 1957px 304px #8751ff, 74px 400px #8751ff, 556px 1123px #8751ff, 1659px 1330px #8751ff, 1110px 916px #8751ff, 503px 271px #8751ff, 1574px 1851px #8751ff, 436px 1833px #8751ff, 175px 1150px #8751ff, 43px 1691px #8751ff, 1758px 1857px #8751ff, 413px 257px #8751ff, 596px 336px #8751ff, 1608px 338px #8751ff, 333px 108px #8751ff, 794px 1318px #8751ff, 1150px 73px #8751ff, 891px 1149px #8751ff, 1614px 387px #8751ff, 1930px 1770px #8751ff, 465px 591px #8751ff, 394px 472px #8751ff, 438px 1877px #8751ff, 537px 1345px #8751ff, 583px 470px #8751ff, 1493px 1112px #8751ff, 1437px 1380px #8751ff, 494px 1304px #8751ff, 17px 1388px #8751ff, 1001px 1558px #8751ff, 10px 978px #8751ff, 25px 1053px #8751ff, 732px 576px #8751ff, 1169px 297px #8751ff, 915px 1519px #8751ff, 280px 1149px #8751ff, 1430px 761px #8751ff, 45px 208px #8751ff, 1790px 1104px #8751ff, 953px 296px #8751ff, 1480px 733px #8751ff, 1024px 1171px #8751ff, 1473px 1335px #8751ff, 631px 329px #8751ff, 1498px 1792px #8751ff, 385px 1825px #8751ff, 483px 781px #8751ff, 1888px 85px #8751ff, 1659px 715px #8751ff, 192px 177px #8751ff, 275px 1243px #8751ff, 1203px 1087px #8751ff, 412px 857px #8751ff, 1302px 1270px #8751ff, 787px 389px #8751ff, 751px 1838px #8751ff, 1381px 1377px #8751ff, 196px 878px #8751ff, 134px 277px #8751ff, 145px 549px #8751ff, 1957px 1961px #8751ff, 1120px 1050px #8751ff, 1354px 972px #8751ff, 1158px 1771px #8751ff, 47px 352px #8751ff, 1112px 584px #8751ff, 164px 1386px #8751ff, 1273px 1782px #8751ff, 110px 780px #8751ff, 502px 299px #8751ff, 1768px 933px #8751ff, 886px 1287px #8751ff, 1309px 1130px #8751ff, 847px 776px #8751ff, 1713px 269px #8751ff, 1718px 795px #8751ff, 1984px 717px #8751ff, 985px 341px #8751ff, 1462px 1078px #8751ff, 1702px 1461px #8751ff, 167px 1873px #8751ff, 862px 1117px #8751ff, 1968px 932px #8751ff, 814px 91px #8751ff, 1530px 607px #8751ff, 1799px 1571px #8751ff, 1868px 1734px #8751ff, 1800px 1137px #8751ff, 52px 178px #8751ff, 901px 853px #8751ff, 1181px 1232px #8751ff, 209px 650px #8751ff, 1165px 1321px #8751ff, 1046px 159px #8751ff, 578px 1748px #8751ff, 18px 337px #8751ff, 70px 1062px #8751ff, 1670px 270px #8751ff, 1828px 1321px #8751ff, 1817px 336px #8751ff, 124px 1935px #8751ff, 1840px 594px #8751ff, 836px 1194px #8751ff, 1292px 1801px #8751ff, 1547px 945px #8751ff, 500px 1563px #8751ff, 569px 376px #8751ff, 1107px 1627px #8751ff, 662px 717px #8751ff, 1352px 762px #8751ff, 771px 1694px #8751ff, 1529px 484px #8751ff, 1609px 798px #8751ff, 652px 627px #8751ff, 498px 20px #8751ff, 1308px 164px #8751ff, 245px 1239px #8751ff, 1131px 860px #8751ff, 1028px 333px #8751ff, 765px 1760px #8751ff, 1627px 684px #8751ff, 70px 1586px #8751ff, 63px 1230px #8751ff, 1727px 465px #8751ff, 1946px 1862px #8751ff, 169px 956px #8751ff, 121px 1826px #8751ff, 1615px 725px #8751ff, 1225px 1925px #8751ff, 1678px 323px #8751ff, 606px 371px #8751ff, 616px 985px #8751ff, 490px 1898px #8751ff, 516px 1019px #8751ff, 878px 1448px #8751ff, 1533px 98px #8751ff, 625px 1152px #8751ff, 224px 522px #8751ff, 215px 245px #8751ff, 153px 669px #8751ff, 1530px 1652px #8751ff, 1796px 1697px #8751ff, 908px 1456px #8751ff, 1326px 1947px #8751ff, 1294px 872px #8751ff, 806px 1296px #8751ff, 783px 556px #8751ff, 1075px 973px #8751ff, 613px 505px #8751ff, 1160px 833px #8751ff, 1053px 1793px #8751ff, 1343px 1990px #8751ff, 937px 254px #8751ff, 1084px 234px #8751ff, 575px 374px #8751ff, 367px 1656px #8751ff, 494px 510px #8751ff, 1403px 1242px #8751ff, 1827px 1741px #8751ff, 1239px 616px #8751ff, 579px 1670px #8751ff, 971px 836px #8751ff, 1025px 813px #8751ff, 707px 1407px #8751ff, 188px 1777px #8751ff, 1576px 18px #8751ff, 1px 533px #8751ff, 1123px 589px #8751ff, 88px 705px #8751ff, 1844px 679px #8751ff, 121px 350px #8751ff, 1853px 470px #8751ff, 1333px 263px #8751ff, 1702px 957px #8751ff, 475px 725px #8751ff, 1650px 75px #8751ff, 1372px 11px #8751ff, 714px 353px #8751ff, 968px 461px #8751ff, 1413px 1400px #8751ff, 1856px 1724px #8751ff, 793px 1524px #8751ff, 1717px 962px #8751ff, 1263px 1567px #8751ff, 1621px 1961px #8751ff, 537px 243px #8751ff, 912px 1140px #8751ff, 659px 1300px #8751ff, 113px 516px #8751ff, 1111px 1738px #8751ff, 336px 953px #8751ff, 1038px 248px #8751ff, 692px 935px #8751ff, 516px 1451px #8751ff, 1057px 401px #8751ff, 1014px 388px #8751ff, 1363px 1764px #8751ff, 855px 745px #8751ff, 57px 767px #8751ff, 779px 1263px #8751ff, 1746px 1797px #8751ff, 1975px 848px #8751ff, 1051px 941px #8751ff, 79px 1146px #8751ff, 1945px 1015px #8751ff, 1506px 1855px #8751ff, 955px 730px #8751ff, 27px 1865px #8751ff, 1378px 1691px #8751ff, 969px 1738px #8751ff, 206px 842px #8751ff, 1068px 91px #8751ff, 1466px 1725px #8751ff, 533px 1091px #8751ff, 1205px 748px #8751ff, 324px 398px #8751ff, 1417px 1048px #8751ff, 349px 1827px #8751ff, 730px 1048px #8751ff, 1671px 690px #8751ff, 1441px 1068px #8751ff, 251px 925px #8751ff, 144px 1631px #8751ff, 108px 1524px #8751ff, 187px 1172px #8751ff, 183px 403px #8751ff, 907px 1873px #8751ff, 973px 104px #8751ff, 65px 1390px #8751ff, 372px 1486px #8751ff, 424px 765px #8751ff, 1410px 350px #8751ff, 760px 827px #8751ff, 1179px 612px #8751ff, 251px 1106px #8751ff, 657px 851px #8751ff, 63px 925px #8751ff, 1272px 1791px #8751ff, 1361px 1189px #8751ff, 778px 1101px #8751ff, 817px 1436px #8751ff, 1884px 1440px #8751ff, 1662px 1781px #8751ff, 276px 990px #8751ff, 1835px 1617px #8751ff, 1516px 246px #8751ff, 544px 1792px #8751ff, 667px 1652px #8751ff, 1142px 1221px #8751ff, 1417px 38px #8751ff, 33px 1467px #8751ff, 1087px 1608px #8751ff, 1406px 1323px #8751ff, 440px 1564px #8751ff, 1697px 758px #8751ff, 743px 340px #8751ff, 1244px 218px #8751ff, 1382px 1783px #8751ff, 539px 1285px #8751ff, 273px 592px #8751ff, 1268px 444px #8751ff, 1302px 70px #8751ff, 989px 478px #8751ff, 1044px 1477px #8751ff, 395px 803px #8751ff, 1609px 1799px #8751ff, 999px 100px #8751ff, 1444px 2000px #8751ff, 1966px 1675px #8751ff, 51px 822px #8751ff, 1387px 825px #8751ff, 983px 440px #8751ff, 1269px 624px #8751ff, 1303px 1455px #8751ff, 666px 313px #8751ff, 1776px 132px #8751ff, 1041px 1523px #8751ff, 168px 1599px #8751ff, 1714px 604px #8751ff, 657px 594px #8751ff, 1301px 1318px #8751ff, 961px 541px #8751ff, 310px 422px #8751ff, 636px 1847px #8751ff, 814px 1005px #8751ff, 444px 1093px #8751ff, 583px 1551px #8751ff, 1746px 1807px #8751ff, 1550px 1359px #8751ff, 283px 1837px #8751ff, 1257px 1772px #8751ff, 1620px 1691px #8751ff, 727px 1180px #8751ff, 798px 1744px #8751ff, 754px 1707px #8751ff, 1871px 189px #8751ff, 1355px 1000px #8751ff, 1839px 599px #8751ff, 7px 1689px #8751ff, 775px 966px #8751ff, 231px 1980px #8751ff, 1231px 717px #8751ff, 1748px 1658px #8751ff, 385px 1352px #8751ff, 1168px 182px #8751ff, 576px 997px #8751ff, 1955px 279px #8751ff, 314px 1162px #8751ff, 626px 1525px #8751ff, 1372px 597px #8751ff, 168px 809px #8751ff, 1559px 1646px #8751ff, 1316px 600px #8751ff, 1903px 1615px #8751ff, 1899px 173px #8751ff, 1936px 1042px #8751ff, 977px 180px #8751ff, 80px 1132px #8751ff, 1258px 287px #8751ff, 1944px 1624px #8751ff, 1710px 1271px #8751ff, 859px 315px #8751ff, 658px 601px #8751ff, 444px 516px #8751ff, 1443px 70px #8751ff, 61px 1468px #8751ff, 67px 338px #8751ff, 1888px 711px #8751ff, 1838px 1848px #8751ff, 1252px 774px #8751ff, 1986px 1392px #8751ff, 1734px 213px #8751ff, 1904px 76px #8751ff, 1503px 1882px #8751ff, 268px 113px #8751ff, 1124px 387px #8751ff, 565px 1591px #8751ff, 446px 1116px #8751ff, 1861px 661px #8751ff, 55px 1090px #8751ff, 328px 837px #8751ff, 775px 85px #8751ff, 436px 632px #8751ff, 1704px 904px #8751ff, 406px 1068px #8751ff, 1077px 719px #8751ff, 125px 722px #8751ff, 1735px 174px #8751ff, 1541px 1590px #8751ff, 1883px 498px #8751ff, 733px 1195px #8751ff, 1178px 1793px #8751ff, 254px 719px #8751ff, 1790px 545px #8751ff, 799px 454px #8751ff, 1076px 1737px #8751ff, 360px 95px #8751ff, 516px 1367px #8751ff, 1016px 493px #8751ff, 1340px 15px #8751ff, 1843px 355px #8751ff, 416px 1857px #8751ff, 1745px 1967px #8751ff, 1768px 1266px #8751ff, 778px 1437px #8751ff, 1892px 1480px #8751ff, 1861px 1700px #8751ff, 1973px 832px #8751ff, 132px 1773px #8751ff, 1928px 1974px #8751ff, 470px 1852px #8751ff, 1855px 463px #8751ff, 892px 1018px #8751ff, 374px 1670px #8751ff, 140px 391px #8751ff, 1868px 1945px #8751ff, 505px 1988px #8751ff, 1798px 1514px #8751ff, 134px 873px #8751ff, 1319px 1278px #8751ff, 1796px 1403px #8751ff, 1400px 503px #8751ff, 480px 1004px #8751ff, 53px 434px #8751ff, 1075px 507px #8751ff, 1376px 13px #8751ff, 150px 623px #8751ff, 563px 1355px #8751ff, 1464px 858px #8751ff, 1123px 967px #8751ff, 1273px 1412px #8751ff, 1378px 1689px #8751ff, 1390px 1248px #8751ff, 273px 191px #8751ff, 471px 46px #8751ff, 1520px 780px #8751ff, 830px 530px #8751ff, 1369px 1915px #8751ff, 434px 1541px #8751ff, 1658px 753px #8751ff, 1955px 1908px #8751ff, 409px 1106px #8751ff, 1609px 597px #8751ff, 637px 1671px #8751ff, 1957px 475px #8751ff, 1595px 1496px #8751ff, 1979px 1958px #8751ff, 1364px 1658px #8751ff, 929px 425px #8751ff, 1197px 967px #8751ff, 82px 1164px #8751ff, 310px 176px #8751ff, 1242px 1822px #8751ff, 1081px 484px #8751ff, 1436px 1211px #8751ff, 992px 1826px #8751ff, 1801px 714px #8751ff, 1034px 16px #8751ff, 1241px 145px #8751ff, 1815px 811px #8751ff, 517px 111px #8751ff, 512px 1871px #8751ff, 185px 1024px #8751ff, 869px 1606px #8751ff, 904px 1418px #8751ff, 271px 807px #8751ff, 1627px 1971px #8751ff, 1048px 200px #8751ff, 1543px 152px #8751ff, 1559px 924px #8751ff, 1205px 1281px #8751ff, 1073px 697px #8751ff, 1614px 426px #8751ff, 1064px 1329px #8751ff, 1963px 1252px #8751ff, 444px 992px #8751ff, 553px 1688px #8751ff, 298px 578px #8751ff, 772px 636px #8751ff, 1755px 1446px #8751ff, 1503px 450px #8751ff, 504px 135px #8751ff, 1714px 314px #8751ff, 447px 1165px #8751ff, 1903px 1258px #8751ff, 1916px 434px #8751ff, 1468px 1851px #8751ff, 631px 244px #8751ff, 201px 1060px #8751ff, 88px 340px #8751ff, 342px 1039px #8751ff, 699px 488px #8751ff, 1284px 1794px #8751ff, 1458px 759px #8751ff, 1335px 1629px #8751ff, 1367px 1363px #8751ff, 185px 235px #8751ff, 76px 1315px #8751ff, 1528px 198px #8751ff, 471px 1165px #8751ff, 1160px 1077px #8751ff, 79px 473px #8751ff, 114px 654px #8751ff, 1400px 722px #8751ff, 829px 1532px #8751ff, 448px 941px #8751ff, 627px 1987px #8751ff, 820px 919px #8751ff, 1506px 217px #8751ff, 1946px 1562px #8751ff, 142px 1489px #8751ff, 793px 602px #8751ff, 441px 91px #8751ff, 259px 453px #8751ff, 1538px 1732px #8751ff, 1498px 1501px #8751ff, 656px 805px #8751ff, 1808px 1178px #8751ff, 1954px 890px #8751ff, 656px 1605px #8751ff, 1177px 350px #8751ff, 666px 992px #8751ff, 1486px 305px #8751ff, 661px 1647px #8751ff, 1209px 1168px #8751ff, 1499px 1450px #8751ff, 554px 98px #8751ff, 744px 1047px #8751ff, 2px 524px #8751ff, 383px 1086px #8751ff, 1822px 244px #8751ff, 1704px 1714px #8751ff, 797px 1527px #8751ff, 1916px 1610px #8751ff, 1865px 860px #8751ff, 1567px 1823px #8751ff, 1340px 273px #8751ff, 1133px 168px #8751ff, 557px 1978px #8751ff, 1419px 1724px #8751ff, 668px 538px #8751ff, 1411px 1026px #8751ff, 1194px 1431px #8751ff, 267px 1899px #8751ff, 556px 950px #8751ff, 1847px 1514px #8751ff, 255px 131px #8751ff, 442px 441px #8751ff, 1089px 1011px #8751ff, 1931px 1781px #8751ff, 187px 119px #8751ff, 1317px 1797px #8751ff, 15px 971px #8751ff, 1542px 618px #8751ff, 594px 1216px #8751ff, 523px 1980px #8751ff, 682px 1977px #8751ff, 1840px 1934px #8751ff, 73px 1975px #8751ff, 192px 37px #8751ff, 1796px 1491px #8751ff, 237px 418px #8751ff, 635px 1936px #8751ff, 735px 421px #8751ff, 1785px 1564px #8751ff, 85px 1401px #8751ff, 288px 1436px #8751ff, 972px 1682px #8751ff, 986px 206px #8751ff, 730px 1225px #8751ff, 569px 557px #8751ff, 1805px 1898px #8751ff, 488px 1963px #8751ff, 877px 997px #8751ff, 545px 1029px #8751ff, 1725px 1017px #8751ff, 1320px 1855px #8751ff, 1220px 409px #8751ff, 1911px 453px #8751ff, 784px 636px #8751ff, 570px 862px #8751ff, 1009px 7px #8751ff, 432px 1640px #8751ff, 1941px 1197px #8751ff, 422px 994px #8751ff, 465px 1879px #8751ff, 918px 200px #8751ff, 1978px 1313px #8751ff, 520px 954px #8751ff, 1270px 1594px #8751ff, 1087px 578px #8751ff, 1597px 58px #8751ff, 1782px 550px #8751ff, 274px 204px #8751ff, 1743px 1662px #8751ff, 441px 1338px #8751ff, 545px 1844px #8751ff, 1702px 894px #8751ff, 1760px 1426px #8751ff, 795px 1068px #8751ff, 1076px 373px #8751ff, 1666px 1594px #8751ff, 1490px 1257px #8751ff, 7px 1967px #8751ff, 357px 1354px #8751ff, 1740px 1071px #8751ff, 1876px 1981px #8751ff, 421px 1758px #8751ff, 750px 1071px #8751ff, 963px 266px #8751ff, 918px 1422px #8751ff, 811px 463px #8751ff, 1084px 1186px #8751ff, 950px 1852px #8751ff, 709px 916px #8751ff, 37px 1612px #8751ff, 777px 747px #8751ff, 749px 1663px #8751ff, 1036px 600px #8751ff, 1951px 1697px #8751ff, 1208px 1139px #8751ff, 549px 400px #8751ff, 1144px 584px #8751ff, 1466px 1315px #8751ff, 131px 826px #8751ff, 172px 1097px #8751ff, 253px 97px #8751ff, 197px 422px #8751ff, 792px 25px #8751ff, 957px 1632px #8751ff, 1209px 889px #8751ff, 826px 638px #8751ff, 1464px 1137px #8751ff, 1189px 2px #8751ff, 1737px 1514px #8751ff, 142px 954px #8751ff, 1831px 544px #8751ff, 1008px 779px #8751ff, 1889px 257px #8751ff, 1006px 1085px #8751ff, 428px 1043px #8751ff, 1915px 1585px #8751ff, 232px 1935px #8751ff, 767px 706px #8751ff, 431px 334px #8751ff, 897px 15px #8751ff, 705px 146px #8751ff;
  animation: animStar 50s linear infinite;
}

#stars:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 1602px 661px #8751ff, 1779px 795px #8751ff, 1154px 812px #8751ff, 1328px 800px #8751ff, 1262px 1251px #8751ff, 1976px 432px #8751ff, 1650px 1853px #8751ff, 1001px 468px #8751ff, 609px 405px #8751ff, 1842px 1576px #8751ff, 742px 1365px #8751ff, 321px 1286px #8751ff, 462px 926px #8751ff, 481px 458px #8751ff, 484px 1952px #8751ff, 380px 1267px #8751ff, 1122px 820px #8751ff, 1626px 1217px #8751ff, 1953px 1255px #8751ff, 1728px 140px #8751ff, 1430px 1262px #8751ff, 7px 463px #8751ff, 1664px 338px #8751ff, 63px 11px #8751ff, 552px 438px #8751ff, 3px 783px #8751ff, 1247px 361px #8751ff, 803px 121px #8751ff, 755px 1435px #8751ff, 659px 1572px #8751ff, 462px 256px #8751ff, 654px 1979px #8751ff, 1747px 1521px #8751ff, 1222px 1922px #8751ff, 1615px 1672px #8751ff, 980px 918px #8751ff, 1477px 1509px #8751ff, 1311px 365px #8751ff, 286px 1255px #8751ff, 897px 1108px #8751ff, 770px 330px #8751ff, 337px 598px #8751ff, 1192px 711px #8751ff, 1656px 1284px #8751ff, 1808px 543px #8751ff, 1099px 608px #8751ff, 1215px 157px #8751ff, 1670px 748px #8751ff, 110px 734px #8751ff, 1513px 1678px #8751ff, 137px 1969px #8751ff, 242px 1029px #8751ff, 670px 606px #8751ff, 1173px 1915px #8751ff, 1730px 1946px #8751ff, 1617px 1395px #8751ff, 294px 1214px #8751ff, 942px 1551px #8751ff, 327px 885px #8751ff, 1961px 128px #8751ff, 314px 333px #8751ff, 845px 1457px #8751ff, 1293px 408px #8751ff, 1058px 582px #8751ff, 1981px 1771px #8751ff, 1473px 311px #8751ff, 1227px 955px #8751ff, 1937px 1262px #8751ff, 754px 624px #8751ff, 266px 619px #8751ff, 182px 1621px #8751ff, 29px 802px #8751ff, 1075px 298px #8751ff, 1986px 1900px #8751ff, 1770px 447px #8751ff, 1291px 57px #8751ff, 782px 1535px #8751ff, 1312px 111px #8751ff, 1194px 651px #8751ff, 899px 193px #8751ff, 282px 163px #8751ff, 1341px 998px #8751ff, 379px 1540px #8751ff, 406px 1584px #8751ff, 1227px 223px #8751ff, 1525px 402px #8751ff, 66px 1842px #8751ff, 1531px 1873px #8751ff, 1303px 376px #8751ff, 1949px 1797px #8751ff, 1093px 1018px #8751ff, 937px 886px #8751ff, 1954px 1675px #8751ff, 1957px 304px #8751ff, 74px 400px #8751ff, 556px 1123px #8751ff, 1659px 1330px #8751ff, 1110px 916px #8751ff, 503px 271px #8751ff, 1574px 1851px #8751ff, 436px 1833px #8751ff, 175px 1150px #8751ff, 43px 1691px #8751ff, 1758px 1857px #8751ff, 413px 257px #8751ff, 596px 336px #8751ff, 1608px 338px #8751ff, 333px 108px #8751ff, 794px 1318px #8751ff, 1150px 73px #8751ff, 891px 1149px #8751ff, 1614px 387px #8751ff, 1930px 1770px #8751ff, 465px 591px #8751ff, 394px 472px #8751ff, 438px 1877px #8751ff, 537px 1345px #8751ff, 583px 470px #8751ff, 1493px 1112px #8751ff, 1437px 1380px #8751ff, 494px 1304px #8751ff, 17px 1388px #8751ff, 1001px 1558px #8751ff, 10px 978px #8751ff, 25px 1053px #8751ff, 732px 576px #8751ff, 1169px 297px #8751ff, 915px 1519px #8751ff, 280px 1149px #8751ff, 1430px 761px #8751ff, 45px 208px #8751ff, 1790px 1104px #8751ff, 953px 296px #8751ff, 1480px 733px #8751ff, 1024px 1171px #8751ff, 1473px 1335px #8751ff, 631px 329px #8751ff, 1498px 1792px #8751ff, 385px 1825px #8751ff, 483px 781px #8751ff, 1888px 85px #8751ff, 1659px 715px #8751ff, 192px 177px #8751ff, 275px 1243px #8751ff, 1203px 1087px #8751ff, 412px 857px #8751ff, 1302px 1270px #8751ff, 787px 389px #8751ff, 751px 1838px #8751ff, 1381px 1377px #8751ff, 196px 878px #8751ff, 134px 277px #8751ff, 145px 549px #8751ff, 1957px 1961px #8751ff, 1120px 1050px #8751ff, 1354px 972px #8751ff, 1158px 1771px #8751ff, 47px 352px #8751ff, 1112px 584px #8751ff, 164px 1386px #8751ff, 1273px 1782px #8751ff, 110px 780px #8751ff, 502px 299px #8751ff, 1768px 933px #8751ff, 886px 1287px #8751ff, 1309px 1130px #8751ff, 847px 776px #8751ff, 1713px 269px #8751ff, 1718px 795px #8751ff, 1984px 717px #8751ff, 985px 341px #8751ff, 1462px 1078px #8751ff, 1702px 1461px #8751ff, 167px 1873px #8751ff, 862px 1117px #8751ff, 1968px 932px #8751ff, 814px 91px #8751ff, 1530px 607px #8751ff, 1799px 1571px #8751ff, 1868px 1734px #8751ff, 1800px 1137px #8751ff, 52px 178px #8751ff, 901px 853px #8751ff, 1181px 1232px #8751ff, 209px 650px #8751ff, 1165px 1321px #8751ff, 1046px 159px #8751ff, 578px 1748px #8751ff, 18px 337px #8751ff, 70px 1062px #8751ff, 1670px 270px #8751ff, 1828px 1321px #8751ff, 1817px 336px #8751ff, 124px 1935px #8751ff, 1840px 594px #8751ff, 836px 1194px #8751ff, 1292px 1801px #8751ff, 1547px 945px #8751ff, 500px 1563px #8751ff, 569px 376px #8751ff, 1107px 1627px #8751ff, 662px 717px #8751ff, 1352px 762px #8751ff, 771px 1694px #8751ff, 1529px 484px #8751ff, 1609px 798px #8751ff, 652px 627px #8751ff, 498px 20px #8751ff, 1308px 164px #8751ff, 245px 1239px #8751ff, 1131px 860px #8751ff, 1028px 333px #8751ff, 765px 1760px #8751ff, 1627px 684px #8751ff, 70px 1586px #8751ff, 63px 1230px #8751ff, 1727px 465px #8751ff, 1946px 1862px #8751ff, 169px 956px #8751ff, 121px 1826px #8751ff, 1615px 725px #8751ff, 1225px 1925px #8751ff, 1678px 323px #8751ff, 606px 371px #8751ff, 616px 985px #8751ff, 490px 1898px #8751ff, 516px 1019px #8751ff, 878px 1448px #8751ff, 1533px 98px #8751ff, 625px 1152px #8751ff, 224px 522px #8751ff, 215px 245px #8751ff, 153px 669px #8751ff, 1530px 1652px #8751ff, 1796px 1697px #8751ff, 908px 1456px #8751ff, 1326px 1947px #8751ff, 1294px 872px #8751ff, 806px 1296px #8751ff, 783px 556px #8751ff, 1075px 973px #8751ff, 613px 505px #8751ff, 1160px 833px #8751ff, 1053px 1793px #8751ff, 1343px 1990px #8751ff, 937px 254px #8751ff, 1084px 234px #8751ff, 575px 374px #8751ff, 367px 1656px #8751ff, 494px 510px #8751ff, 1403px 1242px #8751ff, 1827px 1741px #8751ff, 1239px 616px #8751ff, 579px 1670px #8751ff, 971px 836px #8751ff, 1025px 813px #8751ff, 707px 1407px #8751ff, 188px 1777px #8751ff, 1576px 18px #8751ff, 1px 533px #8751ff, 1123px 589px #8751ff, 88px 705px #8751ff, 1844px 679px #8751ff, 121px 350px #8751ff, 1853px 470px #8751ff, 1333px 263px #8751ff, 1702px 957px #8751ff, 475px 725px #8751ff, 1650px 75px #8751ff, 1372px 11px #8751ff, 714px 353px #8751ff, 968px 461px #8751ff, 1413px 1400px #8751ff, 1856px 1724px #8751ff, 793px 1524px #8751ff, 1717px 962px #8751ff, 1263px 1567px #8751ff, 1621px 1961px #8751ff, 537px 243px #8751ff, 912px 1140px #8751ff, 659px 1300px #8751ff, 113px 516px #8751ff, 1111px 1738px #8751ff, 336px 953px #8751ff, 1038px 248px #8751ff, 692px 935px #8751ff, 516px 1451px #8751ff, 1057px 401px #8751ff, 1014px 388px #8751ff, 1363px 1764px #8751ff, 855px 745px #8751ff, 57px 767px #8751ff, 779px 1263px #8751ff, 1746px 1797px #8751ff, 1975px 848px #8751ff, 1051px 941px #8751ff, 79px 1146px #8751ff, 1945px 1015px #8751ff, 1506px 1855px #8751ff, 955px 730px #8751ff, 27px 1865px #8751ff, 1378px 1691px #8751ff, 969px 1738px #8751ff, 206px 842px #8751ff, 1068px 91px #8751ff, 1466px 1725px #8751ff, 533px 1091px #8751ff, 1205px 748px #8751ff, 324px 398px #8751ff, 1417px 1048px #8751ff, 349px 1827px #8751ff, 730px 1048px #8751ff, 1671px 690px #8751ff, 1441px 1068px #8751ff, 251px 925px #8751ff, 144px 1631px #8751ff, 108px 1524px #8751ff, 187px 1172px #8751ff, 183px 403px #8751ff, 907px 1873px #8751ff, 973px 104px #8751ff, 65px 1390px #8751ff, 372px 1486px #8751ff, 424px 765px #8751ff, 1410px 350px #8751ff, 760px 827px #8751ff, 1179px 612px #8751ff, 251px 1106px #8751ff, 657px 851px #8751ff, 63px 925px #8751ff, 1272px 1791px #8751ff, 1361px 1189px #8751ff, 778px 1101px #8751ff, 817px 1436px #8751ff, 1884px 1440px #8751ff, 1662px 1781px #8751ff, 276px 990px #8751ff, 1835px 1617px #8751ff, 1516px 246px #8751ff, 544px 1792px #8751ff, 667px 1652px #8751ff, 1142px 1221px #8751ff, 1417px 38px #8751ff, 33px 1467px #8751ff, 1087px 1608px #8751ff, 1406px 1323px #8751ff, 440px 1564px #8751ff, 1697px 758px #8751ff, 743px 340px #8751ff, 1244px 218px #8751ff, 1382px 1783px #8751ff, 539px 1285px #8751ff, 273px 592px #8751ff, 1268px 444px #8751ff, 1302px 70px #8751ff, 989px 478px #8751ff, 1044px 1477px #8751ff, 395px 803px #8751ff, 1609px 1799px #8751ff, 999px 100px #8751ff, 1444px 2000px #8751ff, 1966px 1675px #8751ff, 51px 822px #8751ff, 1387px 825px #8751ff, 983px 440px #8751ff, 1269px 624px #8751ff, 1303px 1455px #8751ff, 666px 313px #8751ff, 1776px 132px #8751ff, 1041px 1523px #8751ff, 168px 1599px #8751ff, 1714px 604px #8751ff, 657px 594px #8751ff, 1301px 1318px #8751ff, 961px 541px #8751ff, 310px 422px #8751ff, 636px 1847px #8751ff, 814px 1005px #8751ff, 444px 1093px #8751ff, 583px 1551px #8751ff, 1746px 1807px #8751ff, 1550px 1359px #8751ff, 283px 1837px #8751ff, 1257px 1772px #8751ff, 1620px 1691px #8751ff, 727px 1180px #8751ff, 798px 1744px #8751ff, 754px 1707px #8751ff, 1871px 189px #8751ff, 1355px 1000px #8751ff, 1839px 599px #8751ff, 7px 1689px #8751ff, 775px 966px #8751ff, 231px 1980px #8751ff, 1231px 717px #8751ff, 1748px 1658px #8751ff, 385px 1352px #8751ff, 1168px 182px #8751ff, 576px 997px #8751ff, 1955px 279px #8751ff, 314px 1162px #8751ff, 626px 1525px #8751ff, 1372px 597px #8751ff, 168px 809px #8751ff, 1559px 1646px #8751ff, 1316px 600px #8751ff, 1903px 1615px #8751ff, 1899px 173px #8751ff, 1936px 1042px #8751ff, 977px 180px #8751ff, 80px 1132px #8751ff, 1258px 287px #8751ff, 1944px 1624px #8751ff, 1710px 1271px #8751ff, 859px 315px #8751ff, 658px 601px #8751ff, 444px 516px #8751ff, 1443px 70px #8751ff, 61px 1468px #8751ff, 67px 338px #8751ff, 1888px 711px #8751ff, 1838px 1848px #8751ff, 1252px 774px #8751ff, 1986px 1392px #8751ff, 1734px 213px #8751ff, 1904px 76px #8751ff, 1503px 1882px #8751ff, 268px 113px #8751ff, 1124px 387px #8751ff, 565px 1591px #8751ff, 446px 1116px #8751ff, 1861px 661px #8751ff, 55px 1090px #8751ff, 328px 837px #8751ff, 775px 85px #8751ff, 436px 632px #8751ff, 1704px 904px #8751ff, 406px 1068px #8751ff, 1077px 719px #8751ff, 125px 722px #8751ff, 1735px 174px #8751ff, 1541px 1590px #8751ff, 1883px 498px #8751ff, 733px 1195px #8751ff, 1178px 1793px #8751ff, 254px 719px #8751ff, 1790px 545px #8751ff, 799px 454px #8751ff, 1076px 1737px #8751ff, 360px 95px #8751ff, 516px 1367px #8751ff, 1016px 493px #8751ff, 1340px 15px #8751ff, 1843px 355px #8751ff, 416px 1857px #8751ff, 1745px 1967px #8751ff, 1768px 1266px #8751ff, 778px 1437px #8751ff, 1892px 1480px #8751ff, 1861px 1700px #8751ff, 1973px 832px #8751ff, 132px 1773px #8751ff, 1928px 1974px #8751ff, 470px 1852px #8751ff, 1855px 463px #8751ff, 892px 1018px #8751ff, 374px 1670px #8751ff, 140px 391px #8751ff, 1868px 1945px #8751ff, 505px 1988px #8751ff, 1798px 1514px #8751ff, 134px 873px #8751ff, 1319px 1278px #8751ff, 1796px 1403px #8751ff, 1400px 503px #8751ff, 480px 1004px #8751ff, 53px 434px #8751ff, 1075px 507px #8751ff, 1376px 13px #8751ff, 150px 623px #8751ff, 563px 1355px #8751ff, 1464px 858px #8751ff, 1123px 967px #8751ff, 1273px 1412px #8751ff, 1378px 1689px #8751ff, 1390px 1248px #8751ff, 273px 191px #8751ff, 471px 46px #8751ff, 1520px 780px #8751ff, 830px 530px #8751ff, 1369px 1915px #8751ff, 434px 1541px #8751ff, 1658px 753px #8751ff, 1955px 1908px #8751ff, 409px 1106px #8751ff, 1609px 597px #8751ff, 637px 1671px #8751ff, 1957px 475px #8751ff, 1595px 1496px #8751ff, 1979px 1958px #8751ff, 1364px 1658px #8751ff, 929px 425px #8751ff, 1197px 967px #8751ff, 82px 1164px #8751ff, 310px 176px #8751ff, 1242px 1822px #8751ff, 1081px 484px #8751ff, 1436px 1211px #8751ff, 992px 1826px #8751ff, 1801px 714px #8751ff, 1034px 16px #8751ff, 1241px 145px #8751ff, 1815px 811px #8751ff, 517px 111px #8751ff, 512px 1871px #8751ff, 185px 1024px #8751ff, 869px 1606px #8751ff, 904px 1418px #8751ff, 271px 807px #8751ff, 1627px 1971px #8751ff, 1048px 200px #8751ff, 1543px 152px #8751ff, 1559px 924px #8751ff, 1205px 1281px #8751ff, 1073px 697px #8751ff, 1614px 426px #8751ff, 1064px 1329px #8751ff, 1963px 1252px #8751ff, 444px 992px #8751ff, 553px 1688px #8751ff, 298px 578px #8751ff, 772px 636px #8751ff, 1755px 1446px #8751ff, 1503px 450px #8751ff, 504px 135px #8751ff, 1714px 314px #8751ff, 447px 1165px #8751ff, 1903px 1258px #8751ff, 1916px 434px #8751ff, 1468px 1851px #8751ff, 631px 244px #8751ff, 201px 1060px #8751ff, 88px 340px #8751ff, 342px 1039px #8751ff, 699px 488px #8751ff, 1284px 1794px #8751ff, 1458px 759px #8751ff, 1335px 1629px #8751ff, 1367px 1363px #8751ff, 185px 235px #8751ff, 76px 1315px #8751ff, 1528px 198px #8751ff, 471px 1165px #8751ff, 1160px 1077px #8751ff, 79px 473px #8751ff, 114px 654px #8751ff, 1400px 722px #8751ff, 829px 1532px #8751ff, 448px 941px #8751ff, 627px 1987px #8751ff, 820px 919px #8751ff, 1506px 217px #8751ff, 1946px 1562px #8751ff, 142px 1489px #8751ff, 793px 602px #8751ff, 441px 91px #8751ff, 259px 453px #8751ff, 1538px 1732px #8751ff, 1498px 1501px #8751ff, 656px 805px #8751ff, 1808px 1178px #8751ff, 1954px 890px #8751ff, 656px 1605px #8751ff, 1177px 350px #8751ff, 666px 992px #8751ff, 1486px 305px #8751ff, 661px 1647px #8751ff, 1209px 1168px #8751ff, 1499px 1450px #8751ff, 554px 98px #8751ff, 744px 1047px #8751ff, 2px 524px #8751ff, 383px 1086px #8751ff, 1822px 244px #8751ff, 1704px 1714px #8751ff, 797px 1527px #8751ff, 1916px 1610px #8751ff, 1865px 860px #8751ff, 1567px 1823px #8751ff, 1340px 273px #8751ff, 1133px 168px #8751ff, 557px 1978px #8751ff, 1419px 1724px #8751ff, 668px 538px #8751ff, 1411px 1026px #8751ff, 1194px 1431px #8751ff, 267px 1899px #8751ff, 556px 950px #8751ff, 1847px 1514px #8751ff, 255px 131px #8751ff, 442px 441px #8751ff, 1089px 1011px #8751ff, 1931px 1781px #8751ff, 187px 119px #8751ff, 1317px 1797px #8751ff, 15px 971px #8751ff, 1542px 618px #8751ff, 594px 1216px #8751ff, 523px 1980px #8751ff, 682px 1977px #8751ff, 1840px 1934px #8751ff, 73px 1975px #8751ff, 192px 37px #8751ff, 1796px 1491px #8751ff, 237px 418px #8751ff, 635px 1936px #8751ff, 735px 421px #8751ff, 1785px 1564px #8751ff, 85px 1401px #8751ff, 288px 1436px #8751ff, 972px 1682px #8751ff, 986px 206px #8751ff, 730px 1225px #8751ff, 569px 557px #8751ff, 1805px 1898px #8751ff, 488px 1963px #8751ff, 877px 997px #8751ff, 545px 1029px #8751ff, 1725px 1017px #8751ff, 1320px 1855px #8751ff, 1220px 409px #8751ff, 1911px 453px #8751ff, 784px 636px #8751ff, 570px 862px #8751ff, 1009px 7px #8751ff, 432px 1640px #8751ff, 1941px 1197px #8751ff, 422px 994px #8751ff, 465px 1879px #8751ff, 918px 200px #8751ff, 1978px 1313px #8751ff, 520px 954px #8751ff, 1270px 1594px #8751ff, 1087px 578px #8751ff, 1597px 58px #8751ff, 1782px 550px #8751ff, 274px 204px #8751ff, 1743px 1662px #8751ff, 441px 1338px #8751ff, 545px 1844px #8751ff, 1702px 894px #8751ff, 1760px 1426px #8751ff, 795px 1068px #8751ff, 1076px 373px #8751ff, 1666px 1594px #8751ff, 1490px 1257px #8751ff, 7px 1967px #8751ff, 357px 1354px #8751ff, 1740px 1071px #8751ff, 1876px 1981px #8751ff, 421px 1758px #8751ff, 750px 1071px #8751ff, 963px 266px #8751ff, 918px 1422px #8751ff, 811px 463px #8751ff, 1084px 1186px #8751ff, 950px 1852px #8751ff, 709px 916px #8751ff, 37px 1612px #8751ff, 777px 747px #8751ff, 749px 1663px #8751ff, 1036px 600px #8751ff, 1951px 1697px #8751ff, 1208px 1139px #8751ff, 549px 400px #8751ff, 1144px 584px #8751ff, 1466px 1315px #8751ff, 131px 826px #8751ff, 172px 1097px #8751ff, 253px 97px #8751ff, 197px 422px #8751ff, 792px 25px #8751ff, 957px 1632px #8751ff, 1209px 889px #8751ff, 826px 638px #8751ff, 1464px 1137px #8751ff, 1189px 2px #8751ff, 1737px 1514px #8751ff, 142px 954px #8751ff, 1831px 544px #8751ff, 1008px 779px #8751ff, 1889px 257px #8751ff, 1006px 1085px #8751ff, 428px 1043px #8751ff, 1915px 1585px #8751ff, 232px 1935px #8751ff, 767px 706px #8751ff, 431px 334px #8751ff, 897px 15px #8751ff, 705px 146px #8751ff;
}

#stars2 {
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 743px 879px #8751ff, 1145px 1260px #8751ff, 1412px 672px #8751ff, 507px 1211px #8751ff, 52px 89px #8751ff, 1045px 256px #8751ff, 1022px 859px #8751ff, 1520px 413px #8751ff, 1575px 604px #8751ff, 992px 877px #8751ff, 914px 960px #8751ff, 139px 685px #8751ff, 720px 707px #8751ff, 1235px 945px #8751ff, 1256px 1153px #8751ff, 1223px 641px #8751ff, 1810px 466px #8751ff, 1011px 1248px #8751ff, 799px 1160px #8751ff, 770px 1135px #8751ff, 1000px 1841px #8751ff, 1733px 385px #8751ff, 1142px 610px #8751ff, 1047px 487px #8751ff, 1268px 1604px #8751ff, 1877px 835px #8751ff, 1003px 698px #8751ff, 525px 714px #8751ff, 703px 960px #8751ff, 267px 1336px #8751ff, 1343px 133px #8751ff, 230px 731px #8751ff, 1613px 1782px #8751ff, 758px 1457px #8751ff, 1877px 1912px #8751ff, 1155px 1320px #8751ff, 719px 932px #8751ff, 746px 69px #8751ff, 1148px 186px #8751ff, 1642px 1323px #8751ff, 728px 1138px #8751ff, 815px 461px #8751ff, 1281px 137px #8751ff, 132px 1620px #8751ff, 685px 500px #8751ff, 1067px 1439px #8751ff, 101px 1941px #8751ff, 218px 857px #8751ff, 181px 1464px #8751ff, 1403px 769px #8751ff, 744px 815px #8751ff, 1052px 553px #8751ff, 1447px 1035px #8751ff, 814px 1090px #8751ff, 1127px 1883px #8751ff, 689px 83px #8751ff, 1067px 1753px #8751ff, 1948px 34px #8751ff, 676px 1749px #8751ff, 830px 1875px #8751ff, 836px 512px #8751ff, 1847px 800px #8751ff, 920px 1950px #8751ff, 368px 71px #8751ff, 1773px 818px #8751ff, 215px 1460px #8751ff, 1246px 1249px #8751ff, 1078px 470px #8751ff, 401px 437px #8751ff, 1711px 1570px #8751ff, 1345px 506px #8751ff, 397px 571px #8751ff, 1610px 1971px #8751ff, 1134px 1569px #8751ff, 163px 322px #8751ff, 1837px 371px #8751ff, 485px 424px #8751ff, 488px 1287px #8751ff, 747px 354px #8751ff, 944px 939px #8751ff, 505px 100px #8751ff, 470px 1438px #8751ff, 1222px 1874px #8751ff, 559px 316px #8751ff, 1188px 1154px #8751ff, 136px 11px #8751ff, 1213px 1280px #8751ff, 335px 422px #8751ff, 1849px 388px #8751ff, 181px 1449px #8751ff, 1945px 1622px #8751ff, 1609px 1373px #8751ff, 901px 922px #8751ff, 1413px 520px #8751ff, 1526px 1563px #8751ff, 1318px 1232px #8751ff, 1623px 518px #8751ff, 664px 76px #8751ff, 1692px 1963px #8751ff, 1752px 1104px #8751ff, 1291px 1249px #8751ff, 369px 1823px #8751ff, 552px 1779px #8751ff, 1007px 634px #8751ff, 391px 1101px #8751ff, 1480px 1260px #8751ff, 1375px 251px #8751ff, 594px 1939px #8751ff, 1832px 333px #8751ff, 1233px 1790px #8751ff, 1802px 648px #8751ff, 1934px 798px #8751ff, 1781px 1814px #8751ff, 1849px 1544px #8751ff, 568px 771px #8751ff, 527px 169px #8751ff, 1094px 62px #8751ff, 713px 1750px #8751ff, 290px 563px #8751ff, 1704px 935px #8751ff, 1207px 1612px #8751ff, 202px 1971px #8751ff, 1451px 355px #8751ff, 1749px 571px #8751ff, 1292px 1565px #8751ff, 1827px 1082px #8751ff, 22px 984px #8751ff, 1315px 1760px #8751ff, 1699px 1391px #8751ff, 1793px 1715px #8751ff, 1501px 49px #8751ff, 1480px 1502px #8751ff, 1455px 1964px #8751ff, 1787px 1539px #8751ff, 462px 883px #8751ff, 84px 1082px #8751ff, 1589px 1414px #8751ff, 121px 1323px #8751ff, 788px 494px #8751ff, 109px 109px #8751ff, 951px 1299px #8751ff, 872px 1535px #8751ff, 1171px 806px #8751ff, 671px 598px #8751ff, 1767px 1069px #8751ff, 192px 1881px #8751ff, 1263px 171px #8751ff, 1532px 224px #8751ff, 664px 1191px #8751ff, 145px 686px #8751ff, 638px 1744px #8751ff, 1099px 332px #8751ff, 1119px 802px #8751ff, 530px 1776px #8751ff, 765px 1011px #8751ff, 1528px 1117px #8751ff, 1375px 1170px #8751ff, 1454px 470px #8751ff, 299px 558px #8751ff, 960px 655px #8751ff, 1816px 1220px #8751ff, 1165px 1486px #8751ff, 260px 731px #8751ff, 548px 80px #8751ff, 1003px 1239px #8751ff, 1058px 230px #8751ff, 505px 1085px #8751ff, 140px 1772px #8751ff, 1439px 326px #8751ff, 1456px 778px #8751ff, 915px 1545px #8751ff, 430px 1368px #8751ff, 849px 587px #8751ff, 1231px 869px #8751ff, 1662px 928px #8751ff, 1903px 38px #8751ff, 1052px 1977px #8751ff, 1935px 1481px #8751ff, 538px 1271px #8751ff, 1511px 1304px #8751ff, 1617px 1015px #8751ff, 489px 1088px #8751ff, 996px 1039px #8751ff, 201px 1878px #8751ff, 466px 1689px #8751ff, 1363px 862px #8751ff, 1374px 1714px #8751ff, 549px 787px #8751ff, 1669px 1043px #8751ff, 697px 1874px #8751ff, 1915px 1724px #8751ff, 1488px 1629px #8751ff, 1545px 1875px #8751ff, 978px 1201px #8751ff, 1126px 1916px #8751ff, 412px 592px #8751ff, 852px 732px #8751ff, 1060px 444px #8751ff, 323px 1676px #8751ff, 1593px 1616px #8751ff;
  animation: animStar 100s linear infinite;
}

#stars2:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 743px 879px #8751ff, 1145px 1260px #8751ff, 1412px 672px #8751ff, 507px 1211px #8751ff, 52px 89px #8751ff, 1045px 256px #8751ff, 1022px 859px #8751ff, 1520px 413px #8751ff, 1575px 604px #8751ff, 992px 877px #8751ff, 914px 960px #8751ff, 139px 685px #8751ff, 720px 707px #8751ff, 1235px 945px #8751ff, 1256px 1153px #8751ff, 1223px 641px #8751ff, 1810px 466px #8751ff, 1011px 1248px #8751ff, 799px 1160px #8751ff, 770px 1135px #8751ff, 1000px 1841px #8751ff, 1733px 385px #8751ff, 1142px 610px #8751ff, 1047px 487px #8751ff, 1268px 1604px #8751ff, 1877px 835px #8751ff, 1003px 698px #8751ff, 525px 714px #8751ff, 703px 960px #8751ff, 267px 1336px #8751ff, 1343px 133px #8751ff, 230px 731px #8751ff, 1613px 1782px #8751ff, 758px 1457px #8751ff, 1877px 1912px #8751ff, 1155px 1320px #8751ff, 719px 932px #8751ff, 746px 69px #8751ff, 1148px 186px #8751ff, 1642px 1323px #8751ff, 728px 1138px #8751ff, 815px 461px #8751ff, 1281px 137px #8751ff, 132px 1620px #8751ff, 685px 500px #8751ff, 1067px 1439px #8751ff, 101px 1941px #8751ff, 218px 857px #8751ff, 181px 1464px #8751ff, 1403px 769px #8751ff, 744px 815px #8751ff, 1052px 553px #8751ff, 1447px 1035px #8751ff, 814px 1090px #8751ff, 1127px 1883px #8751ff, 689px 83px #8751ff, 1067px 1753px #8751ff, 1948px 34px #8751ff, 676px 1749px #8751ff, 830px 1875px #8751ff, 836px 512px #8751ff, 1847px 800px #8751ff, 920px 1950px #8751ff, 368px 71px #8751ff, 1773px 818px #8751ff, 215px 1460px #8751ff, 1246px 1249px #8751ff, 1078px 470px #8751ff, 401px 437px #8751ff, 1711px 1570px #8751ff, 1345px 506px #8751ff, 397px 571px #8751ff, 1610px 1971px #8751ff, 1134px 1569px #8751ff, 163px 322px #8751ff, 1837px 371px #8751ff, 485px 424px #8751ff, 488px 1287px #8751ff, 747px 354px #8751ff, 944px 939px #8751ff, 505px 100px #8751ff, 470px 1438px #8751ff, 1222px 1874px #8751ff, 559px 316px #8751ff, 1188px 1154px #8751ff, 136px 11px #8751ff, 1213px 1280px #8751ff, 335px 422px #8751ff, 1849px 388px #8751ff, 181px 1449px #8751ff, 1945px 1622px #8751ff, 1609px 1373px #8751ff, 901px 922px #8751ff, 1413px 520px #8751ff, 1526px 1563px #8751ff, 1318px 1232px #8751ff, 1623px 518px #8751ff, 664px 76px #8751ff, 1692px 1963px #8751ff, 1752px 1104px #8751ff, 1291px 1249px #8751ff, 369px 1823px #8751ff, 552px 1779px #8751ff, 1007px 634px #8751ff, 391px 1101px #8751ff, 1480px 1260px #8751ff, 1375px 251px #8751ff, 594px 1939px #8751ff, 1832px 333px #8751ff, 1233px 1790px #8751ff, 1802px 648px #8751ff, 1934px 798px #8751ff, 1781px 1814px #8751ff, 1849px 1544px #8751ff, 568px 771px #8751ff, 527px 169px #8751ff, 1094px 62px #8751ff, 713px 1750px #8751ff, 290px 563px #8751ff, 1704px 935px #8751ff, 1207px 1612px #8751ff, 202px 1971px #8751ff, 1451px 355px #8751ff, 1749px 571px #8751ff, 1292px 1565px #8751ff, 1827px 1082px #8751ff, 22px 984px #8751ff, 1315px 1760px #8751ff, 1699px 1391px #8751ff, 1793px 1715px #8751ff, 1501px 49px #8751ff, 1480px 1502px #8751ff, 1455px 1964px #8751ff, 1787px 1539px #8751ff, 462px 883px #8751ff, 84px 1082px #8751ff, 1589px 1414px #8751ff, 121px 1323px #8751ff, 788px 494px #8751ff, 109px 109px #8751ff, 951px 1299px #8751ff, 872px 1535px #8751ff, 1171px 806px #8751ff, 671px 598px #8751ff, 1767px 1069px #8751ff, 192px 1881px #8751ff, 1263px 171px #8751ff, 1532px 224px #8751ff, 664px 1191px #8751ff, 145px 686px #8751ff, 638px 1744px #8751ff, 1099px 332px #8751ff, 1119px 802px #8751ff, 530px 1776px #8751ff, 765px 1011px #8751ff, 1528px 1117px #8751ff, 1375px 1170px #8751ff, 1454px 470px #8751ff, 299px 558px #8751ff, 960px 655px #8751ff, 1816px 1220px #8751ff, 1165px 1486px #8751ff, 260px 731px #8751ff, 548px 80px #8751ff, 1003px 1239px #8751ff, 1058px 230px #8751ff, 505px 1085px #8751ff, 140px 1772px #8751ff, 1439px 326px #8751ff, 1456px 778px #8751ff, 915px 1545px #8751ff, 430px 1368px #8751ff, 849px 587px #8751ff, 1231px 869px #8751ff, 1662px 928px #8751ff, 1903px 38px #8751ff, 1052px 1977px #8751ff, 1935px 1481px #8751ff, 538px 1271px #8751ff, 1511px 1304px #8751ff, 1617px 1015px #8751ff, 489px 1088px #8751ff, 996px 1039px #8751ff, 201px 1878px #8751ff, 466px 1689px #8751ff, 1363px 862px #8751ff, 1374px 1714px #8751ff, 549px 787px #8751ff, 1669px 1043px #8751ff, 697px 1874px #8751ff, 1915px 1724px #8751ff, 1488px 1629px #8751ff, 1545px 1875px #8751ff, 978px 1201px #8751ff, 1126px 1916px #8751ff, 412px 592px #8751ff, 852px 732px #8751ff, 1060px 444px #8751ff, 323px 1676px #8751ff, 1593px 1616px #8751ff;
}

#stars3 {
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 1703px 1208px #8751ff, 381px 207px #8751ff, 1516px 1990px #8751ff, 1960px 982px #8751ff, 922px 1278px #8751ff, 689px 1766px #8751ff, 538px 554px #8751ff, 802px 1529px #8751ff, 871px 1805px #8751ff, 228px 1830px #8751ff, 353px 186px #8751ff, 1873px 1154px #8751ff, 494px 1244px #8751ff, 1415px 261px #8751ff, 1020px 1990px #8751ff, 1924px 1169px #8751ff, 1205px 464px #8751ff, 596px 830px #8751ff, 1319px 504px #8751ff, 953px 1850px #8751ff, 408px 1360px #8751ff, 569px 1704px #8751ff, 1367px 729px #8751ff, 807px 1845px #8751ff, 572px 825px #8751ff, 523px 1089px #8751ff, 1405px 1622px #8751ff, 1352px 423px #8751ff, 1247px 1758px #8751ff, 1117px 920px #8751ff, 983px 352px #8751ff, 175px 1351px #8751ff, 962px 260px #8751ff, 918px 1530px #8751ff, 1184px 935px #8751ff, 201px 473px #8751ff, 90px 1759px #8751ff, 211px 933px #8751ff, 1887px 171px #8751ff, 177px 101px #8751ff, 844px 346px #8751ff, 283px 1821px #8751ff, 1236px 1225px #8751ff, 173px 1875px #8751ff, 24px 1776px #8751ff, 277px 804px #8751ff, 1714px 715px #8751ff, 937px 1882px #8751ff, 1708px 1405px #8751ff, 173px 1847px #8751ff, 1902px 1160px #8751ff, 1725px 1270px #8751ff, 36px 18px #8751ff, 1612px 1467px #8751ff, 1390px 1733px #8751ff, 927px 1315px #8751ff, 1907px 1337px #8751ff, 1855px 1454px #8751ff, 1033px 1425px #8751ff, 1450px 1359px #8751ff, 1422px 771px #8751ff, 256px 343px #8751ff, 1581px 340px #8751ff, 1180px 247px #8751ff, 191px 882px #8751ff, 372px 1171px #8751ff, 1509px 937px #8751ff, 1018px 1829px #8751ff, 121px 152px #8751ff, 327px 767px #8751ff, 1438px 1421px #8751ff, 321px 905px #8751ff, 616px 245px #8751ff, 1957px 1520px #8751ff, 1811px 1924px #8751ff, 1454px 1778px #8751ff, 1507px 822px #8751ff, 649px 218px #8751ff, 362px 1567px #8751ff, 1637px 145px #8751ff, 115px 466px #8751ff, 345px 935px #8751ff, 112px 1019px #8751ff, 1440px 1910px #8751ff, 1280px 1367px #8751ff, 1505px 890px #8751ff, 788px 927px #8751ff, 753px 1273px #8751ff, 1924px 1714px #8751ff, 495px 1149px #8751ff, 267px 1851px #8751ff, 1293px 1431px #8751ff, 1159px 433px #8751ff, 1725px 1170px #8751ff, 1067px 296px #8751ff, 746px 463px #8751ff, 412px 349px #8751ff, 1193px 1421px #8751ff, 564px 455px #8751ff, 1675px 589px #8751ff;
  animation: animStar 150s linear infinite;
}

#stars3:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 1703px 1208px #8751ff, 381px 207px #8751ff, 1516px 1990px #8751ff, 1960px 982px #8751ff, 922px 1278px #8751ff, 689px 1766px #8751ff, 538px 554px #8751ff, 802px 1529px #8751ff, 871px 1805px #8751ff, 228px 1830px #8751ff, 353px 186px #8751ff, 1873px 1154px #8751ff, 494px 1244px #8751ff, 1415px 261px #8751ff, 1020px 1990px #8751ff, 1924px 1169px #8751ff, 1205px 464px #8751ff, 596px 830px #8751ff, 1319px 504px #8751ff, 953px 1850px #8751ff, 408px 1360px #8751ff, 569px 1704px #8751ff, 1367px 729px #8751ff, 807px 1845px #8751ff, 572px 825px #8751ff, 523px 1089px #8751ff, 1405px 1622px #8751ff, 1352px 423px #8751ff, 1247px 1758px #8751ff, 1117px 920px #8751ff, 983px 352px #8751ff, 175px 1351px #8751ff, 962px 260px #8751ff, 918px 1530px #8751ff, 1184px 935px #8751ff, 201px 473px #8751ff, 90px 1759px #8751ff, 211px 933px #8751ff, 1887px 171px #8751ff, 177px 101px #8751ff, 844px 346px #8751ff, 283px 1821px #8751ff, 1236px 1225px #8751ff, 173px 1875px #8751ff, 24px 1776px #8751ff, 277px 804px #8751ff, 1714px 715px #8751ff, 937px 1882px #8751ff, 1708px 1405px #8751ff, 173px 1847px #8751ff, 1902px 1160px #8751ff, 1725px 1270px #8751ff, 36px 18px #8751ff, 1612px 1467px #8751ff, 1390px 1733px #8751ff, 927px 1315px #8751ff, 1907px 1337px #8751ff, 1855px 1454px #8751ff, 1033px 1425px #8751ff, 1450px 1359px #8751ff, 1422px 771px #8751ff, 256px 343px #8751ff, 1581px 340px #8751ff, 1180px 247px #8751ff, 191px 882px #8751ff, 372px 1171px #8751ff, 1509px 937px #8751ff, 1018px 1829px #8751ff, 121px 152px #8751ff, 327px 767px #8751ff, 1438px 1421px #8751ff, 321px 905px #8751ff, 616px 245px #8751ff, 1957px 1520px #8751ff, 1811px 1924px #8751ff, 1454px 1778px #8751ff, 1507px 822px #8751ff, 649px 218px #8751ff, 362px 1567px #8751ff, 1637px 145px #8751ff, 115px 466px #8751ff, 345px 935px #8751ff, 112px 1019px #8751ff, 1440px 1910px #8751ff, 1280px 1367px #8751ff, 1505px 890px #8751ff, 788px 927px #8751ff, 753px 1273px #8751ff, 1924px 1714px #8751ff, 495px 1149px #8751ff, 267px 1851px #8751ff, 1293px 1431px #8751ff, 1159px 433px #8751ff, 1725px 1170px #8751ff, 1067px 296px #8751ff, 746px 463px #8751ff, 412px 349px #8751ff, 1193px 1421px #8751ff, 564px 455px #8751ff, 1675px 589px #8751ff;
}

#title {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  color: #8751ff;
  text-align: center;
  font-family: "lato", sans-serif;
  font-weight: 300;
  font-size: 50px;
  letter-spacing: 10px;
  margin-top: -60px;
  padding-left: 10px;
}

#title span {
  background: -webkit-linear-gradient(white, #38495a);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}
.view {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 50%;
  left: 50%;
  margin: -200px 0 0 -200px;
}

.circles {
  height: 100%;
  margin: 0;
  padding: 0;
  transform-style: preserve-3d;
}

.item {
  position: absolute;
  top: 0;
  left: 0;
  list-style: none;
  padding: 0;
  border: 15px solid #8751ff;
  border-radius: 50%;
  width: 300px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
}

@keyframes wave1 {
  100% {
    transform: rotateX(70deg) translate3d(0px, 0px, 100px);
  }
}
.h2 {
  border: 15px solid #8751ff;
  border-color: #8751ff #8751ff #8751ff #8751ff;
  box-shadow: 0 1px 0 #8751ff, inset 0 5px 0px #8751ff, inset 0 10px 0px #8751ff, 0 5px 0 #8751ff, 0 10px 0 #8751ff;
  width: 300px;
  height: 300px;
  transform: rotateX(70deg) translate3d(30px, 0px, -60px);
  animation: wave2 2s ease-in-out -400ms infinite alternate;
}

@keyframes wave2 {
  100% {
    transform: rotateX(70deg) translate3d(30px, 0px, 70px);
  }
}
.h3 {
  border: 15px solid #8751ff;
  border-color: #8751ff #8751ff #8751ff #8751ff;
  box-shadow: 0 1px 0 #8751ff, inset 0 5px 0px #8751ff, inset 0 10px 0px #8751ff, 0 5px 0 #8751ff, 0 10px 0 #8751ff;
  width: 240px;
  height: 240px;
  transform: rotateX(70deg) translate3d(60px, 0px, -90px);
  animation: wave3 2s ease-in-out -800ms infinite alternate;
}

@keyframes wave3 {
  100% {
    transform: rotateX(70deg) translate3d(60px, 0px, 40px);
  }
}
.h4 {
  border: 15px solid #8751ff;
  border-color: #8751ff #8751ff #8751ff #8751ff;
  box-shadow: 0 1px 0 #8751ff, inset 0 5px 0px #8751ff, inset 0 10px 0px #8751ff, 0 5px 0 #8751ff, 0 10px 0 #8751ff;
  width: 180px;
  height: 180px;
  transform: rotateX(70deg) translate3d(90px, 0px, -120px);
  animation: wave4 2s ease-in-out -1200ms infinite alternate;
}

@keyframes wave4 {
  100% {
    transform: rotateX(70deg) translate3d(90px, 0px, 10px);
  }
}
.h5 {
  border: 15px solid #8751ff;
  border-color: #8751ff #8751ff #8751ff #8751ff;
  box-shadow: 0 1px 0 #8751ff, inset 0 5px 0px #8751ff, inset 0 10px 0px #8751ff, 0 5px 0 #8751ff, 0 10px 0 #8751ff;
  width: 120px;
  height: 120px;
  transform: rotateX(70deg) translate3d(120px, 0px, -150px);
  animation: wave5 2s ease-in-out -1600ms infinite alternate;
}

@keyframes wave5 {
  100% {
    transform: rotateX(70deg) translate3d(120px, 0px, -20px);
  }
}
.h6 {
  border: 15px solid #8751ff;
  border-color: #8751ff #8751ff #8751ff #8751ff;
  box-shadow: 0 1px 0 #8751ff, inset 0 5px 0px #8751ff, inset 0 10px 0px #8751ff, 0 5px 0 #8751ff, 0 10px 0 #8751ff;
  width: 60px;
  height: 60px;
  transform: rotateX(70deg) translate3d(150px, 0px, -180px);
  animation: wave6 2s ease-in-out -2000ms infinite alternate;
}

@keyframes wave6 {
  100% {
    transform: rotateX(70deg) translate3d(150px, 0px, -50px);
  }
}
.h7 {
  border: 15px solid #8751ff;
  border-color: #8751ff #8751ff #8751ff #8751ff;
  box-shadow: 0 1px 0 #8751ff, inset 0 5px 0px #8751ff, inset 0 10px 0px #8751ff, 0 5px 0 #8751ff, 0 10px 0 #8751ff;
  width: 20px;
  height: 20px;
  transform: rotateX(70deg) translate3d(167px, 0px, -197px);
  animation: wave7 2s ease-in-out -2400ms infinite alternate;
}

@keyframes wave7 {
  100% {
    transform: rotateX(70deg) translate3d(167px, 0px, -80px);
  }
}
/*----------------------------------------*/
/*  6.10 portfolio css
/*----------------------------------------*/
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-portfolio-showcase .cm-gallery-crtv-thumb img {
    border-radius: 0px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-portfolio-showcase .pin-spacer {
    height: 432px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-portfolio-showcase {
    padding-top: 93px;
  }
}
@media (max-width: 575px) {
  .cm-portfolio-showcase {
    padding-top: 82px;
  }
}
.cm-portfolio-showcase-spacing {
  padding-top: 490px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cm-portfolio-showcase-spacing {
    padding-top: 320px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-portfolio-showcase-spacing {
    padding-top: 150px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-portfolio-showcase-spacing {
    padding-top: 0;
  }
}
@media (max-width: 575px) {
  .cm-portfolio-showcase-spacing {
    padding-bottom: 0;
  }
}
.cm-portfolio-showcase-spacing .cm-footer-brand-bigtext h2 {
  color: var(--cm-common-white);
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .cm-portfolio-showcase-spacing .cm-footer-brand-bigtext h2 {
    font-size: 270px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cm-portfolio-showcase-spacing .cm-footer-brand-bigtext h2 {
    font-size: 230px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-portfolio-showcase-spacing .cm-footer-brand-bigtext h2 {
    font-size: 180px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-portfolio-showcase-spacing .cm-footer-brand-bigtext h2 {
    font-size: 130px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-portfolio-showcase-spacing .cm-footer-brand-bigtext h2 {
    font-size: 100px;
  }
}
@media (max-width: 575px) {
  .cm-portfolio-showcase-spacing .cm-footer-brand-bigtext h2 {
    font-size: 60px;
  }
}
.cm-portfolio-carousel-category {
  font-weight: 400;
  font-size: 120px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cm-common-white);
  font-family: var(--cm-ff-pinyon);
  margin-bottom: 0px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-portfolio-carousel-category {
    font-size: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-portfolio-carousel-category {
    font-size: 70px;
  }
}
@media (max-width: 575px) {
  .cm-portfolio-carousel-category {
    font-size: 50px;
  }
}
.cm-portfolio-carousel-scroll {
  position: relative;
  z-index: 99;
}
.cm-portfolio-carousel-scroll a {
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  text-transform: capitalize;
  color: var(--cm-common-black);
  font-family: var(--cm-ff-marcellus);
}
.cm-portfolio-carousel-social-wrap {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  z-index: 99;
}
.cm-portfolio-carousel-social-info span {
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  color: var(--cm-common-black);
  font-family: var(--cm-ff-marcellus);
}
.cm-portfolio-grid .cm-project-crtv-thumb img {
  width: 100%;
  transition: none;
}
.cm-portfolio-grid .cm-project-crtv-item {
  padding: 0;
}
.cm-portfolio-grid .cm-project-crtv-title-sm {
  font-size: 40px;
  font-family: var(--cm-ff-kanit);
  font-weight: 500;
}
@media (max-width: 575px) {
  .cm-portfolio-grid .cm-project-crtv-item:hover .cm-project-crtv-content {
    bottom: 10px;
  }
}
.cm-portfolio-grid .cm-project-crtv-item:hover .cm-project-crtv-thumb img {
  transform: scale(1);
}
@media (max-width: 575px) {
  .cm-portfolio-grid .cm-project-crtv-title-sm {
    margin-top: 0;
    font-size: 30px;
  }
}
.cm-portfolio-grid .cm-project-crtv-content span {
  font-size: 20px;
  font-family: var(--cm-ff-kanit);
  font-weight: 500;
}
.cm-portfolio-grid .cm-project-brand-tag {
  position: absolute;
  bottom: auto;
  top: 40px;
  left: 40px;
  right: auto;
  z-index: 99;
}
@media (max-width: 575px) {
  .cm-portfolio-grid .cm-project-brand-tag {
    top: 20px;
    left: 20px;
  }
}
.cm-portfolio-grid .cm-btn-switch-text > span {
  background: var(--cm-common-white);
  color: var(--cm-common-black-2);
  padding: 5px 25px;
}
@media (max-width: 575px) {
  .cm-portfolio-grid .portfolio-filter {
    flex-wrap: wrap;
  }
}
.cm-portfolio-grid .portfolio-filter button {
  color: var(--cm-grey-1);
  font-size: 17px;
  font-weight: 500;
  line-height: 13px;
  text-transform: uppercase;
  font-family: var(--cm-ff-kanit);
  margin: 0px 21px;
  position: relative;
  transition: 0.3s;
  margin-bottom: 20px;
}
@media (max-width: 575px) {
  .cm-portfolio-grid .portfolio-filter button {
    margin: 0px 15px;
    margin-bottom: 20px;
  }
}
.cm-portfolio-grid .portfolio-filter button.active {
  color: var(--cm-common-black-2);
}
.cm-portfolio-grid .portfolio-filter button.active::after {
  width: 100%;
  opacity: 1;
  visibility: visible;
}
.cm-portfolio-grid .portfolio-filter button::after {
  position: absolute;
  bottom: -3px;
  left: 0;
  height: 1px;
  width: 0%;
  content: "";
  opacity: 0;
  visibility: hidden;
  background-color: var(--cm-common-black-2);
  transition: 0.4s;
}
.cm-portfolio-grid .cm-pricing-ai-btn {
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-kanit);
  font-size: 18px;
  font-weight: 400;
}
.cm-portfolio-grid .cm-pricing-ai-btn:hover {
  color: var(--cm-grey-1);
}
.cm-portfolio-grid-four .cm-project-crtv-thumb img {
  height: 450px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-portfolio-grid-four .cm-project-crtv-thumb img {
    height: auto;
  }
}
.cm-portfolio-details-hero-img {
  height: 955px;
  overflow: hidden;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-portfolio-details-hero-img {
    height: 800px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-portfolio-details-hero-img {
    height: 700px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-portfolio-details-hero-img {
    height: 550px;
  }
}
@media (max-width: 575px) {
  .cm-portfolio-details-hero-img {
    height: 400px;
  }
}
.cm-portfolio-details-hero-img img {
  margin-top: -50px;
  height: 1200px;
  width: 100%;
  object-fit: cover;
}
.cm-portfolio-details-right-info p {
  font-weight: 400;
  font-size: 20px;
  line-height: 31px;
  color: var(--cm-grey-1);
  font-family: var(--cm-ff-kanit);
  margin-bottom: 45px;
}
.cm-portfolio-details-left-content {
  margin-bottom: 45px;
}
.cm-portfolio-details-left-info-title {
  font-weight: 500;
  font-size: 26px;
  line-height: 18px;
  color: var(--cm-common-black);
  font-family: var(--cm-ff-manrope);
  padding-bottom: 5px;
}
.cm-portfolio-details-left-info span {
  font-weight: 400;
  font-size: 18px;
  line-height: 14px;
  color: var(--cm-grey-1);
  display: block;
  margin-bottom: 15px;
}
.cm-portfolio-details-overview-title {
  font-weight: 500;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-manrope);
}
.cm-portfolio-details-overview-thumb {
  overflow: hidden;
  position: relative;
  width: auto;
  height: 100%;
  height: 650px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cm-portfolio-details-overview-thumb {
    height: 500px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px), (max-width: 575px) {
  .cm-portfolio-details-overview-thumb {
    height: 400px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-portfolio-details-overview-thumb img {
    height: 450px;
  }
}
.cm-portfolio-details-overview-thumb img {
  width: 100%;
}
.cm-portfolio-details-overview-right p {
  font-weight: 300;
  font-size: 30px;
  line-height: 40px;
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-kanit);
  margin-bottom: 40px;
}
.cm-portfolio-details-overview-list ul li {
  list-style-type: none;
  position: relative;
  padding-left: 17px;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  color: var(--cm-grey-1);
  margin-bottom: 20px;
  font-family: var(--cm-ff-kanit);
}
.cm-portfolio-details-overview-list ul li::after {
  position: absolute;
  top: 7px;
  left: 0;
  height: 5px;
  width: 5px;
  background: var(--cm-grey-1);
  content: "";
  border-radius: 50%;
}
.cm-portfolio-details-result {
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(2, 11, 24, 0.1);
}
.cm-portfolio-details-result .child-1 {
  font-weight: 700;
  font-size: 70px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-manrope);
  margin-right: 15px;
}
@media (max-width: 575px) {
  .cm-portfolio-details-result .child-1 {
    font-size: 50px;
    display: block;
  }
}
.cm-portfolio-details-result .child-2 {
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  color: var(--cm-grey-1);
  margin-bottom: 0;
}
.cm-portfolio-details-thumb-box .cm-portfolio-item-3 img {
  width: 100%;
}
.cm-portfolio-details-navigation-content {
  margin-top: 350px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cm-portfolio-details-navigation-content {
    margin-top: 250px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-portfolio-details-navigation-content {
    margin-top: 200px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-portfolio-details-navigation-content {
    margin-top: 100px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-portfolio-details-navigation-content {
    margin-top: 50px;
  }
}
.cm-portfolio-details-navigation-content a {
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-kanit);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: inline-block;
}
.cm-portfolio-details-navigation-content h4 {
  margin-bottom: 0;
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--cm-common-black-2);
  font-family: var(--cm-ff-manrope);
}

/* SLIDER */
.cm-perspective-slider {
  width: 100%;
  overflow: hidden;
  padding: 2vw 3vw 0;
  box-sizing: border-box;
  margin-bottom: 80px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cm-perspective-slider {
    margin-top: 12px;
  }
}
.cm-perspective-slider .cm-slider-inner {
  width: 100%;
  height: 90vh;
  position: relative;
  display: inline-block;
}
.cm-perspective-slider .cm-slider-inner .cm-slider-content {
  position: absolute;
  text-align: center;
  width: 100%;
  top: 50%;
  z-index: 10;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}
.cm-perspective-slider .cm-slider-inner .cm-slider-content .cm-gallery-crtv-title {
  font-size: 200px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-perspective-slider .cm-slider-inner .cm-slider-content .cm-gallery-crtv-title {
    font-size: 130px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-perspective-slider .cm-slider-inner .cm-slider-content .cm-gallery-crtv-title {
    font-size: 70px;
  }
}
@media (max-width: 575px) {
  .cm-perspective-slider .cm-slider-inner .cm-slider-content .cm-gallery-crtv-title {
    font-size: 35px;
  }
}
.cm-perspective-slider .cm-slider-inner .cm-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  position: relative;
  display: inline-block;
}
.cm-perspective-slider .cm-slider-inner .cm-image:before {
  content: "";
  width: 40px;
  height: 103%;
  background: #fff;
  position: absolute;
  left: -20px;
  top: -1.5%;
  z-index: 10;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
}
.cm-perspective-slider .cm-slider-inner .cm-image:after {
  content: "";
  width: 40px;
  height: 103%;
  background: #fff;
  position: absolute;
  right: -20px;
  top: -1.5%;
  z-index: 10;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
}

.cm-reveal-line {
  overflow: hidden;
  padding-bottom: 18px;
}

/* portfolio area style  */
#app {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper {
  width: 100%;
  height: 100%;
  --swiper-theme-color: #fff;
}

.demo-slide-title {
  font-weight: bold;
  font-size: 58px;
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 10%;
  z-index: 100;
  transform: translate3d(0, 0, 0);
}

.swiper-slicer-image {
  max-width: unset;
}

.cm-portfolio-slicer-slider {
  position: relative;
  z-index: 1;
}
.cm-portfolio-slicer-slider .nav-icon {
  font-size: 14px;
  text-transform: uppercase;
  display: flex;
  gap: 20px;
  color: var(--black);
  line-height: 1;
  position: relative;
  z-index: 2;
}
.cm-portfolio-slicer-slider .slider-nav {
  display: flex;
  height: 100px;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .cm-portfolio-slicer-slider .slider-nav {
    height: 80px;
  }
}
.cm-portfolio-slicer-slider .cm-portfolio-slicer-pagination {
  position: absolute;
  top: auto;
  bottom: 0;
  transform: none;
  height: 100px;
  left: 0;
  right: 0;
  display: inline-flex;
  gap: 20px;
  margin-inline: auto;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .cm-portfolio-slicer-slider .cm-portfolio-slicer-pagination {
    height: 80px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cm-portfolio-slicer-slider .cm-portfolio-slicer-pagination {
    gap: 10px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-portfolio-slicer-slider .cm-portfolio-slicer-pagination {
    display: none;
  }
}
.cm-portfolio-slicer-slider .cm-portfolio-slicer-pagination .swiper-pagination-bullet {
  width: 30px;
  height: 2px;
  background-color: var(--black);
  opacity: 1;
  border-radius: 2px;
  transition: all 0.5s;
  margin: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-portfolio-slicer-slider .cm-portfolio-slicer-pagination .swiper-pagination-bullet {
    width: 20px;
  }
}
.cm-portfolio-slicer-slider .cm-portfolio-slicer-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-portfolio-slicer-slider .cm-portfolio-slicer-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 40px;
  }
}
.cm-portfolio-slicer-slider .slider-nav-box {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.cm-portfolio-slicer-slider .slide-content {
  position: absolute;
  width: 100%;
  bottom: 20%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
}
.cm-portfolio-slicer-slider .slide-content .cm-portfolio-slicer-category {
  font-size: 40px;
  font-family: var(--cm-ff-kanit);
  margin-bottom: 36px;
  display: inline-block;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-portfolio-slicer-slider .slide-content .cm-portfolio-slicer-category {
    font-size: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-portfolio-slicer-slider .slide-content .cm-portfolio-slicer-category {
    font-size: 25px;
  }
}
@media (max-width: 575px) {
  .cm-portfolio-slicer-slider .slide-content .cm-portfolio-slicer-category {
    font-size: 20px;
  }
}
.cm-portfolio-slicer-slider .slide-content .cm-portfolio-slicer-title {
  font-family: var(--cm-ff-dirtyline);
  color: var(--cm-common-white);
  font-weight: normal;
  text-transform: lowercase;
  font-size: 150px;
  line-height: 0.8;
  font-weight: 300;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) {
  .cm-portfolio-slicer-slider .slide-content .cm-portfolio-slicer-title {
    font-size: 130px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cm-portfolio-slicer-slider .slide-content .cm-portfolio-slicer-title {
    font-size: 100px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cm-portfolio-slicer-slider .slide-content .cm-portfolio-slicer-title {
    font-size: 80px;
  }
}
@media (max-width: 575px) {
  .cm-portfolio-slicer-slider .slide-content .cm-portfolio-slicer-title {
    font-size: 50px;
  }
}
.cm-portfolio-slicer-slider .swiper-slide-active .slide-content {
  opacity: 1;
  visibility: visible;
}

.header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.parallax-slider-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.parallax-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 4200px;
  height: 100%;
}
@media (max-width: 575px) {
  .parallax-slider {
    width: 2600px;
  }
}

.parallax-slider-inner {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  display: flex;
  gap: 5px;
  left: 0px;
  right: 0;
}

.parallax-item {
  position: relative;
  width: 600px;
  height: 100%;
  overflow: hidden;
}
@media (max-width: 575px) {
  .parallax-item {
    width: 350px;
  }
}
.parallax-item:hover .parallax-content {
  bottom: 0;
  opacity: 1;
  visibility: visible;
}
.parallax-item:hover .parallax-img::after {
  opacity: 1;
  height: 100%;
  visibility: visible;
}

.parallax-content {
  position: absolute;
  bottom: -100px;
  left: 0;
  z-index: 55;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  margin: 40px 40px 30px 35px;
  transition: 0.4s;
}
.parallax-content span {
  font-size: 24px;
  line-height: 1;
  display: block;
  font-size: 20px;
  margin-bottom: 10px;
  color: var(--cm-common-white);
  font-family: var(--cm-ff-marcellus);
  text-transform: capitalize;
}
.parallax-content h4 {
  font-size: 50px;
  line-height: 1;
  padding-bottom: 7px;
  display: inline-block;
  color: var(--cm-common-white);
  font-family: var(--cm-ff-marcellus);
}

.parallax-img {
  position: absolute;
  height: 100%;
  width: 840px;
  background-size: cover;
  background-position: center;
  margin-left: -100px;
}
.parallax-img::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  opacity: 0;
  visibility: hidden;
  transition: 0.4s;
  background-color: rgba(0, 0, 0, 0.3);
}

/*# sourceMappingURL=main.css.map */