/*!**************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./assets/scss/composable.scss ***!
  \**************************************************************************************************************************************************/
/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Custom by project
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.topic {
  padding: 110rem 129rem 116rem 129rem;
  display: flex;
  min-height: 966rem;
  flex-direction: column;
  position: relative;
}
@media (max-width: 991.98px) {
  .topic {
    min-height: 852rem;
    padding: 81rem 27rem 60rem 27rem;
  }
  .topic--imgonly {
    padding-top: 60rem;
    padding-bottom: 41.5rem;
    min-height: auto;
  }
}
@media (max-width: 575.98px) {
  .topic--imgaselement {
    min-height: auto;
  }
}
.topic__bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0rem;
  right: 0rem;
  bottom: 0rem;
  left: 0rem;
  object-fit: cover;
}
@media (max-width: 575.98px) {
  .topic__bg--desktop {
    display: none;
  }
}
@media (min-width: 576px) {
  .topic__bg--mobile {
    display: none;
  }
}
* + .topic__bg--mobile--aselement {
  margin-top: 23rem;
}
.topic__bg--mobile--aselement {
  width: 100%;
  height: auto;
  position: relative;
  top: unset;
  right: unset;
  bottom: unset;
  left: unset;
  border-radius: 8rem;
}
.topic__bg--noborderbottom {
  border-bottom-left-radius: 0rem;
  border-bottom-right-radius: 0rem;
}
.topic__title {
  position: relative;
  display: inline-block;
  font-family: "GEELY", Arial, Helvetica, sans-serif;
  font-size: 44rem;
  line-height: 54rem;
  letter-spacing: 0.03em;
  font-weight: 700;
  color: #ffffff;
  z-index: 1;
  align-self: flex-start;
}
@media (max-width: 991.98px) {
  .topic__title {
    font-size: 18rem;
    line-height: 29rem;
    letter-spacing: 0.02em;
  }
}
* + .topic__text {
  margin-top: 30rem;
}
@media (max-width: 575.98px) {
  * + .topic__text {
    margin-top: 12rem;
  }
}
.topic__text {
  position: relative;
  z-index: 1;
  font-size: 16rem;
  line-height: 24rem;
  letter-spacing: 0.03em;
  color: #ffffff;
  width: 651rem;
}
.topic__text--big {
  font-size: 22rem;
  line-height: 35rem;
  letter-spacing: 0.02em;
  font-family: "GEELY", Arial, Helvetica, sans-serif;
}
.topic__text--atbottom {
  margin-top: auto;
  margin-left: 159rem;
}
@media (max-width: 991.98px) {
  .topic__text {
    width: auto;
    font-size: 12rem;
    line-height: 18rem;
    letter-spacing: 0em;
    margin-left: 0rem;
  }
}
.topic__bottom {
  position: relative;
  margin-top: auto;
  padding-top: 48rem;
}
@media (max-width: 991.98px) {
  .topic__bottom {
    padding-top: 24rem;
  }
}
@media (max-width: 991.98px) {
  .topic__bottom--logosonly {
    padding-top: 0rem;
  }
}
.topic__bottom__list {
  display: flex;
  gap: 20rem;
}
@media (max-width: 991.98px) {
  .topic__bottom__list {
    gap: 31rem;
    flex-direction: column;
  }
}
.topic__bottom__list__item {
  min-width: 260rem;
}
@media (max-width: 991.98px) {
  .topic__bottom__list__item {
    min-width: auto;
  }
}
.topic__bottom__list__item__title {
  font-family: "GEELY", Arial, Helvetica, sans-serif;
  font-size: 32rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #ffffff;
}
@media (max-width: 991.98px) {
  .topic__bottom__list__item__title {
    font-size: 22rem;
    line-height: 25rem;
    letter-spacing: 0.01em;
    font-weight: 700;
  }
}
.topic__bottom__list__item__text {
  font-size: 14rem;
  line-height: 19rem;
  letter-spacing: 0.01em;
  color: #ffffff;
}
@media (max-width: 991.98px) {
  .topic__bottom__list__item__text {
    font-size: 14rem;
    line-height: 19rem;
    letter-spacing: 0.005em;
  }
}
* + .topic__bottom__buttons {
  margin-top: 36rem;
}
@media (max-width: 991.98px) {
  * + .topic__bottom__buttons .button {
    width: 100%;
  }
}
.topic__bottom__buttons {
  display: flex;
  gap: 20rem;
}
@media (max-width: 991.98px) {
  .topic__bottom__buttons {
    width: 100%;
    flex-direction: column;
  }
  .topic__bottom__buttons .button {
    width: 100%;
  }
}
.topic__bottom__logos {
  margin-top: auto;
  padding-top: 24rem;
  display: flex;
  gap: 24rem;
}
@media (min-width: 992px) {
  .topic__bottom__logos {
    background-color: transparent !important;
  }
}
@media (max-width: 991.98px) {
  .topic__bottom__logos {
    padding: 12rem;
    justify-content: center;
  }
}
.topic__bottom__logos__img {
  width: 250rem;
}
@media (max-width: 991.98px) {
  .topic--imgaselement .topic__bg--desktop {
    display: none;
  }
  .topic--imgaselement .topic__bg--mobile {
    display: block;
  }
  .topic--imgaselement .topic__title {
    color: #000000;
  }
  .topic--imgaselement .topic__text {
    color: #000000;
  }
  .topic--imgaselement .button {
    border: 1px solid #000000;
  }
  .topic--imgaselement .button:hover {
    color: #ffffff;
    background-color: #000000;
  }
  .topic--imgaselement .button--transparent {
    color: #ffffff;
    background-color: #000000;
  }
  .topic--imgaselement .button--transparent:hover {
    color: #000000;
    background-color: transparent;
  }
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Custom by project
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.titleandexcerptaboveimg {
  position: relative;
  margin: 122rem 129rem 131rem 129rem;
}
.titleandexcerptaboveimg:first-of-type {
  margin-top: 148rem;
}
@media (max-width: 991.98px) {
  .titleandexcerptaboveimg:first-of-type {
    margin-top: 88rem;
  }
}
@media (max-width: 575.98px) {
  .titleandexcerptaboveimg:first-of-type {
    margin-top: 78rem;
  }
}
@media (max-width: 991.98px) {
  .titleandexcerptaboveimg {
    margin: 41rem 27rem 71rem 27rem;
  }
}
.titleandexcerptaboveimg__head {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 991.98px) {
  .titleandexcerptaboveimg__head {
    flex-direction: column;
    justify-content: flex-start;
  }
}
.titleandexcerptaboveimg__head__title {
  font-size: 42rem;
  line-height: 54rem;
  letter-spacing: 0.03em;
  color: #000000;
  font-weight: 700;
  font-family: "GEELY", Arial, Helvetica, sans-serif;
}
@media (max-width: 991.98px) {
  .titleandexcerptaboveimg__head__title {
    font-size: 18rem;
    line-height: 28rem;
    letter-spacing: 0.02em;
  }
}
@media (max-width: 991.98px) {
  * + .titleandexcerptaboveimg__head__excerpt {
    margin-top: 19rem;
  }
}
.titleandexcerptaboveimg__head__excerpt {
  width: 659rem;
  font-size: 16rem;
  line-height: 24rem;
  letter-spacing: 0.03em;
  color: #000000;
}
.titleandexcerptaboveimg__head__excerpt--excerptwide {
  width: 789rem;
}
@media (max-width: 991.98px) {
  .titleandexcerptaboveimg__head__excerpt {
    width: auto;
    font-size: 12rem;
    line-height: 18rem;
    letter-spacing: 0em;
  }
}
* + .titleandexcerptaboveimg__photo {
  margin-top: 27rem;
}
@media (max-width: 991.98px) {
  * + .titleandexcerptaboveimg__photo {
    margin-top: 19rem;
  }
}
.titleandexcerptaboveimg__photo {
  width: 100%;
  height: auto;
  border-radius: 10rem;
}
* + .titleandexcerptaboveimg__video {
  margin-top: 27rem;
}
@media (max-width: 991.98px) {
  * + .titleandexcerptaboveimg__video {
    margin-top: 19rem;
  }
}
.titleandexcerptaboveimg__video {
  width: 100%;
  height: auto;
  border-radius: 10rem;
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Custom by project
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.tilesandimg {
  margin: 101rem 129rem 18rem 129rem;
}
@media (max-width: 991.98px) {
  .tilesandimg {
    margin: 41rem 27rem;
  }
}
* + .tilesandimg__items {
  margin-top: 10rem;
}
.tilesandimg__items {
  width: 100%;
  display: flex;
  gap: 17rem;
}
@media (max-width: 991.98px) {
  .tilesandimg__items {
    flex-direction: column;
  }
}
.tilesandimg__item {
  flex: 1 1 0;
  padding: 38rem 40rem 29rem 41rem;
  border-radius: 10rem;
  background: linear-gradient(135deg, #EFFDFF 3%, #EBFCFF 50%, #F5FDFF 75%, #e2faff 100%);
  display: flex;
  align-items: flex-start;
  gap: 21rem;
  font-size: 14rem;
  line-height: 22rem;
  color: #000000;
}
@media (max-width: 991.98px) {
  .tilesandimg__item {
    padding: 17rem 12rem;
    font-size: 10rem;
    line-height: 14rem;
    letter-spacing: 0em;
    gap: 15rem;
  }
}
* + .tilesandimg__img {
  margin-top: 17rem;
}
.tilesandimg__img {
  width: 100%;
  height: auto;
  border-radius: 10rem;
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Custom by project
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.textsection {
  position: relative;
  font-size: 15rem;
  line-height: 27rem;
  letter-spacing: 0.03em;
  color: #000000;
  margin: 74rem 549rem;
}
@media (max-width: 991.98px) {
  .textsection {
    margin: 30rem 27rem;
    letter-spacing: 0em;
  }
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Custom by project
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.textandimg {
  position: relative;
  margin: 74rem 0rem 74rem 269rem;
  display: flex;
  gap: 140rem;
  align-items: center;
}
@media (max-width: 991.98px) {
  .textandimg {
    flex-direction: column;
    gap: 18rem;
    margin: 30rem 27rem;
  }
}
.textandimg__content {
  width: 560rem;
  flex-shrink: 0;
}
@media (max-width: 991.98px) {
  .textandimg__content {
    width: 100%;
  }
}
.textandimg__content__title {
  font-size: 22rem;
  line-height: 35rem;
  letter-spacing: 0em;
  font-family: "GEELY", Arial, Helvetica, sans-serif;
  color: #000000;
}
@media (max-width: 991.98px) {
  .textandimg__content__title {
    font-size: 18rem;
    line-height: 24rem;
  }
}
* + .textandimg__content__text {
  margin-top: 13rem;
}
.textandimg__content__text {
  font-size: 15rem;
  line-height: 27rem;
  letter-spacing: 0em;
  color: #000000;
}
.textandimg__img {
  max-width: 100%;
  flex-grow: 1;
  min-height: 742rem;
  object-fit: cover;
  border-radius: 8rem;
}
@media (max-width: 991.98px) {
  .textandimg__img {
    min-height: auto;
  }
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Custom by project
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.tabswithsliders {
  padding: 90rem 0rem 51.5rem 0rem;
}
@media (max-width: 991.98px) {
  .tabswithsliders {
    padding: 39rem 0rem 0rem 0rem;
  }
}
.tabswithsliders__nav {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  padding-left: 129rem;
  padding-right: 129rem;
  position: relative;
  z-index: 1;
}
@media (max-width: 991.98px) {
  .tabswithsliders__nav {
    padding-left: 27rem;
    padding-right: 27rem;
  }
}
.tabswithsliders__nav__tab {
  min-width: 195rem;
  padding-top: 16rem;
  padding-right: 12rem;
  font-size: 16rem;
  line-height: 24rem;
  letter-spacing: 0.03em;
  color: #000000;
  position: relative;
  flex-shrink: 0;
}
@media (max-width: 991.98px) {
  .tabswithsliders__nav__tab {
    text-align: center;
    width: 33.333%;
    min-width: auto;
    padding-top: 0rem;
    padding-bottom: 7rem;
    font-size: 12rem;
    line-height: 24rem;
    letter-spacing: 0.01em;
    padding-right: 0rem;
    padding-left: 0rem;
  }
}
.tabswithsliders__nav__tab::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: rgba(112, 112, 112, 0.35);
  position: absolute;
  top: 0rem;
  left: 0rem;
  right: 0rem;
}
@media (max-width: 991.98px) {
  .tabswithsliders__nav__tab::before {
    top: unset;
    bottom: 0rem;
  }
}
.tabswithsliders__nav__tab::after {
  content: "";
  display: block;
  width: 100%;
  height: 1.5px;
  background-color: #3a7ff8;
  position: absolute;
  top: 0rem;
  left: 0rem;
  right: 0rem;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s linear;
}
@media (max-width: 991.98px) {
  .tabswithsliders__nav__tab::after {
    top: unset;
    bottom: 0rem;
  }
}
.tabswithsliders__nav__tab.active::after {
  transform: scaleX(1);
}
.tabswithsliders__items {
  margin-top: -40rem;
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Custom by project
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.specform {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0rem;
  right: 0rem;
  bottom: 0rem;
  left: 0rem;
  z-index: 11000;
  background-color: rgba(159, 159, 159, 0.69);
  overflow-y: auto;
}
@media (max-width: 575.98px) {
  .specform {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.specform__form {
  width: 47.76%;
  height: 100vh;
  margin-left: auto;
  padding: 70rem 130rem 20rem 90rem;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  border-top-left-radius: 10rem;
  border-bottom-left-radius: 10rem;
  transition: transform 0.2s linear;
  transform: translateX(101%);
}
.specform__form.active {
  transform: translateX(0%);
}
@media (max-width: 991.98px) {
  .specform__form {
    width: 80%;
  }
}
@media (max-width: 575.98px) {
  .specform__form {
    width: 95%;
    height: 85vh;
    border-radius: 10rem;
    padding: 42rem 27rem;
    margin-left: 0rem;
  }
}
.specform__form__close {
  width: 10rem;
  height: 10rem;
  -webkit-mask: url("../images/global/x_sharp.svg") no-repeat center;
  mask: url("../images/global/x_sharp.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: #000000;
  position: absolute;
  top: 46rem;
  right: 130rem;
  transition: background-color 0.2s linear;
}
@media (max-width: 575.98px) {
  .specform__form__close {
    top: 42rem;
    right: 27rem;
  }
}
.specform__form__close:hover {
  background-color: #F6292E;
}
.specform__form__title {
  font-size: 14rem;
  line-height: 24rem;
  letter-spacing: 0.03em;
  color: #000000;
  font-weight: 800;
}
* + .specform__form__inputs {
  margin-top: 11.5rem;
}
.specform__form * + .input__container {
  margin-top: 15rem;
}
.specform__form .input__container {
  display: block;
}
* + .specform__form__add {
  margin-top: 13.5rem;
}
.specform__form__add {
  font-size: 11rem;
  line-height: 14rem;
  letter-spacing: 0em;
  color: #000000;
}
.specform__form__add a {
  color: #000000;
}
.specform__form__add a:hover {
  color: #3a7ff8;
}
* + .specform__form__choice {
  margin-top: 7.5rem;
}
.specform__form__choice {
  display: flex;
  gap: 48rem;
}
@media (max-width: 991.98px) {
  .specform__form__choice {
    gap: 55rem;
  }
}
.specform__form__choice + .specform__form__add {
  margin-top: 5.5rem;
}
* + .specform__form__submit {
  margin-top: 26rem;
}
.specform__form__submit {
  display: flex;
}
.specform__form__submit .button {
  min-width: 139rem;
}
@media (max-width: 991.98px) {
  .specform__form__submit .button {
    width: 100%;
  }
}

.swtagt {
  padding: 119rem 127rem;
  background-color: #F5F4F4;
}
@media (max-width: 991.98px) {
  .swtagt {
    padding: 20rem;
  }
}
.swtagt__title {
  font-family: "GEELY";
  font-size: 42rem;
  line-height: 54rem;
  text-align: left;
  color: #000;
  border: 1px solid rgba(0, 0, 0, 0);
  opacity: 1;
}
@media (max-width: 991.98px) {
  .swtagt__title {
    font-size: 18rem;
    line-height: 29rem;
    letter-spacing: 0.02em;
    font-weight: 700;
  }
}
.swtagt__flex {
  margin-top: 44rem;
  display: flex;
  gap: 18rem;
}
@media (max-width: 991.98px) {
  .swtagt__flex {
    flex-direction: column;
  }
}
.swtagt__flex__item {
  width: 25%;
}
@media (max-width: 991.98px) {
  .swtagt__flex__item {
    width: 100%;
  }
}
.swtagt__flex__item__img {
  width: 402rem;
  height: 330rem;
  object-fit: cover;
  border-radius: 10rem;
}
@media (max-width: 991.98px) {
  .swtagt__flex__item__img {
    width: 100%;
    height: auto;
  }
}
.swtagt__flex__item__content {
  margin-top: 49rem;
  font-weight: normal;
  font-size: 14rem;
  letter-spacing: 0.01em;
  line-height: 22rem;
  text-align: left;
  color: #000;
}
@media (max-width: 991.98px) {
  .swtagt__flex__item__content {
    margin-top: 15rem;
  }
}
.swtagt__flex__item__content__smallHeader {
  font-weight: normal;
  font-size: 15rem;
  letter-spacing: 0.01em;
  line-height: 24rem;
  text-align: left;
  color: #000;
  margin-bottom: 10rem;
}
.swtagt__flex__item__content__h3 {
  font-family: "GEELY";
  font-weight: normal;
  font-size: 20rem;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-align: left;
  color: #000;
  margin-bottom: 30rem;
}
@media (max-width: 991.98px) {
  .swtagt__flex__item__content__h3 {
    margin-bottom: 15rem;
  }
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Custom by project
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.promotions {
  position: relative;
  padding: 108rem 129rem 153rem 129rem;
  background: linear-gradient(135deg, #EFFDFF 6.5%, #EBFCFF 50%, #F5FDFF 75%, #DEF9FF 100%);
}
@media (max-width: 991.98px) {
  .promotions {
    padding: 81rem 0rem 60rem 27rem;
  }
}
.promotions__title {
  font-family: "GEELY", Arial, Helvetica, sans-serif;
  font-size: 42rem;
  line-height: 54rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #000000;
}
@media (max-width: 991.98px) {
  .promotions__title {
    width: 262rem;
    font-size: 18rem;
    line-height: 25rem;
    letter-spacing: 0.02em;
  }
}
* + .promotions__slider {
  margin-top: 51rem;
}
@media (max-width: 991.98px) {
  * + .promotions__slider {
    margin-top: 24rem;
  }
}
.promotions__slider:not(:has(.slick-list)) {
  display: flex;
  gap: 18rem;
}
.promotions__slider .slick-track {
  display: flex;
  gap: 18rem;
}
@media (max-width: 991.98px) {
  .promotions__slider .slick-track {
    gap: 0rem;
  }
}
@media (max-width: 991.98px) {
  .promotions__slider .slick-slide {
    height: auto;
  }
}
.promotions__slider .slick-slide > div {
  width: auto;
}
@media (max-width: 991.98px) {
  .promotions__slider .slick-slide > div {
    margin-right: 18rem;
    height: 100%;
  }
}
.promotions__slider__item {
  min-width: 682rem;
  max-width: 1662rem;
  display: inline-flex !important;
  flex-direction: column;
  overflow: hidden;
}
@media (max-width: 991.98px) {
  .promotions__slider__item {
    min-width: auto;
    max-width: 100%;
    height: 100%;
    display: flex !important;
  }
}
.promotions__slider__item__img {
  width: auto;
  height: 500rem;
  object-fit: cover;
  border-radius: 10rem;
  transition: filter 0.2s linear;
}
@media (max-width: 991.98px) {
  .promotions__slider__item__img {
    width: 322rem !important;
    height: 250rem;
  }
}
.promotions__slider__item__title, .promotions__slider__item__excerpt {
  display: table-caption;
  max-width: 100%;
  min-width: 100%;
  width: min-content;
}
* + .promotions__slider__item__title {
  margin-top: 37rem;
}
@media (max-width: 991.98px) {
  * + .promotions__slider__item__title {
    margin-top: 17rem;
  }
}
.promotions__slider__item__title {
  font-family: "GEELY", Arial, Helvetica, sans-serif;
  font-size: 16rem;
  line-height: 22rem;
  letter-spacing: 0.02em;
  color: #000000;
  font-weight: 700;
}
@media (max-width: 991.98px) {
  .promotions__slider__item__title {
    font-size: 16rem;
    line-height: 23rem;
    letter-spacing: 0em;
  }
}
* + .promotions__slider__item__excerpt {
  margin-top: 9rem;
}
.promotions__slider__item__excerpt {
  font-size: 14rem;
  line-height: 22rem;
  letter-spacing: 0.03em;
  color: #000000;
}
@media (max-width: 991.98px) {
  .promotions__slider__item__excerpt {
    font-size: 12rem;
    line-height: 18rem;
    letter-spacing: 0em;
  }
}
* + .promotions__slider__item__button {
  padding-top: 25rem;
  margin-top: auto;
}
.promotions__slider__item__button {
  display: none;
}
@media (max-width: 991.98px) {
  .promotions__slider__item__button {
    display: block;
  }
  .promotions__slider__item__button .button {
    width: 100%;
  }
}
.promotions__slider__item:hover .promotions__slider__item__img {
  filter: brightness(1.1);
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Custom by project
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.panelwithimg {
  padding: 103rem 0rem 114rem 130rem;
  margin: 0rem;
  display: flex;
  gap: 66rem;
}
.panelwithimg--imgfirst {
  flex-direction: row-reverse;
  padding: 103rem 130rem 114rem 0rem;
  margin: 0rem;
  gap: 158rem;
}
.panelwithimg--transparent {
  padding: 0rem;
  margin: 103rem 0rem 114rem 130rem;
}
.panelwithimg--transparent.panelwithimg--imgfirst {
  margin: 103rem 130rem 114rem 0rem;
}
@media (max-width: 991.98px) {
  .panelwithimg {
    flex-direction: column;
    padding: 41rem 27rem;
    margin: 0rem;
    gap: 24rem;
  }
  .panelwithimg--transparent, .panelwithimg--transparent.panelwithimg--imgfirst {
    padding: 0rem;
    margin: 41rem 27rem;
  }
}
.panelwithimg__content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.panelwithimg__content__title {
  font-family: "GEELY", Arial, Helvetica, sans-serif;
  font-size: 42rem;
  line-height: 54rem;
  font-weight: 700;
  color: #000000;
}
@media (max-width: 991.98px) {
  .panelwithimg__content__title {
    font-size: 18rem;
    line-height: 28rem;
    letter-spacing: 0.02em;
  }
}
* + .panelwithimg__content__desc {
  margin-top: 22rem;
}
@media (max-width: 991.98px) {
  * + .panelwithimg__content__desc {
    margin-top: 19rem;
  }
}
.panelwithimg__content__desc {
  font-family: "GEELY", Arial, Helvetica, sans-serif;
  font-size: 16rem;
  line-height: 22rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #000000;
}
@media (max-width: 991.98px) {
  .panelwithimg__content__desc {
    font-size: 12rem;
    line-height: 18rem;
    letter-spacing: 0em;
  }
}
* + .panelwithimg__content__tabs {
  margin-top: 50.5rem;
}
@media (max-width: 991.98px) {
  * + .panelwithimg__content__tabs {
    margin-top: 19rem;
  }
}
* + .panelwithimg__content__excerpt {
  margin-top: 10rem;
}
.panelwithimg__content__excerpt {
  width: 710rem;
  font-size: 14rem;
  line-height: 22rem;
  letter-spacing: 0.01em;
  color: #000000;
}
@media (max-width: 991.98px) {
  .panelwithimg__content__excerpt {
    width: auto;
    font-size: 10rem;
    line-height: 14rem;
    letter-spacing: 0em;
  }
}
.panelwithimg__content__tabs__nav {
  display: flex;
}
.panelwithimg__content__tabs__nav__el {
  width: 225rem;
  position: relative;
  padding-top: 15.5rem;
  font-size: 15rem;
  line-height: 24rem;
  color: #000000;
}
@media (max-width: 991.98px) {
  .panelwithimg__content__tabs__nav__el {
    font-size: 14rem;
    line-height: 20rem;
  }
}
@media (max-width: 575.98px) {
  .panelwithimg__content__tabs__nav__el {
    width: auto;
    font-size: 10rem;
    line-height: 16rem;
    padding-right: 12rem;
  }
}
.panelwithimg__content__tabs__nav__el::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #cdcdcd;
  position: absolute;
  top: 0rem;
  left: 0rem;
  right: 0rem;
  transform: translateY(-50%);
}
.panelwithimg__content__tabs__nav__el::after {
  content: "";
  display: block;
  width: 100%;
  height: 1.5px;
  background-color: #3a7ff8;
  position: absolute;
  top: 0rem;
  left: 0rem;
  right: 0rem;
  transform: translateY(-50%) scaleX(0);
  transition: transform 0.2s linear;
  transform-origin: center left;
}
.panelwithimg__content__tabs__nav__el.active {
  font-weight: 600;
}
.panelwithimg__content__tabs__nav__el.active::after {
  transform: translateY(-50%) scaleX(1);
}
* + .panelwithimg__content__tabs__items {
  margin-top: 28rem;
}
@media (max-width: 991.98px) {
  * + .panelwithimg__content__tabs__items {
    margin-top: 8rem;
  }
}
.panelwithimg__content__tabs__items {
  font-size: 14rem;
  line-height: 24rem;
  letter-spacing: 0.03em;
  padding-left: 40rem;
}
@media (max-width: 991.98px) {
  .panelwithimg__content__tabs__items {
    padding-left: 9rem;
  }
}
* + .panelwithimg__content__expanders {
  margin-top: 87rem;
}
@media (max-width: 991.98px) {
  * + .panelwithimg__content__expanders {
    margin-top: 19rem;
  }
}
.panelwithimg__content__expanders {
  width: 682rem;
}
@media (max-width: 991.98px) {
  .panelwithimg__content__expanders {
    width: 100%;
  }
}
* + .panelwithimg__content__expanders__item {
  margin-top: 12rem;
}
.panelwithimg__content__expanders__item {
  display: block;
  width: 100%;
  padding: 22rem 27rem 25rem 44rem;
  background-color: #ebfcff;
  border-radius: 10rem;
}
@media (max-width: 991.98px) {
  .panelwithimg__content__expanders__item {
    padding: 17rem 12rem;
  }
}
.panelwithimg__content__expanders__item__title {
  font-size: 15rem;
  line-height: 24rem;
  letter-spacing: 0.01em;
  color: #000000;
  position: relative;
  padding-right: 20rem;
}
.panelwithimg__content__expanders__item__title::after {
  content: "";
  display: block;
  width: 17.6rem;
  height: 10rem;
  -webkit-mask: url("../images/global/chevron_up.svg") no-repeat center;
  mask: url("../images/global/chevron_up.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: #3a7ff8;
  position: absolute;
  top: 0.6em;
  right: 0rem;
  transform: rotate(-180deg);
  transition: transform 0.2s linear;
}
* + .panelwithimg__content__expanders__item__text {
  margin-top: 32rem;
}
@media (max-width: 991.98px) {
  * + .panelwithimg__content__expanders__item__text {
    margin-top: 19rem;
  }
}
.panelwithimg__content__expanders__item__text {
  font-size: 14rem;
  line-height: 22rem;
  letter-spacing: 0.02em;
  color: #000000;
}
.panelwithimg__content__expanders__item--unrolled {
  cursor: default;
}
.panelwithimg__content__expanders__item--unrolled .panelwithimg__content__expanders__item__title::after {
  display: none;
}
.panelwithimg__content__expanders__item--unrolled * + .panelwithimg__content__expanders__item__text {
  margin-top: 10rem;
}
.panelwithimg__content__expanders__item.active .panelwithimg__content__expanders__item__title {
  font-weight: 600;
}
.panelwithimg__content__expanders__item.active .panelwithimg__content__expanders__item__title::after {
  transform: rotate(0deg);
}
* + .panelwithimg__content__textunder {
  margin-top: 69rem;
}
@media (max-width: 991.98px) {
  * + .panelwithimg__content__textunder {
    margin-top: 19rem;
  }
}
.panelwithimg__content__textunder {
  font-size: 14rem;
  line-height: 22rem;
  letter-spacing: 0.01em;
  color: #000000;
}
@media (max-width: 991.98px) {
  .panelwithimg__content__textunder {
    font-size: 10rem;
    line-height: 14rem;
    letter-spacing: 0em;
  }
}
* + .panelwithimg__content__buttons {
  margin-top: auto;
  padding-top: 104rem;
}
@media (max-width: 991.98px) {
  * + .panelwithimg__content__buttons {
    padding-top: 19rem;
  }
}
.panelwithimg__content__buttons {
  display: flex;
  gap: 26rem;
}
@media (max-width: 991.98px) {
  .panelwithimg__content__buttons {
    flex-direction: column;
    gap: 15rem;
    width: 100%;
  }
  .panelwithimg__content__buttons .button-new {
    width: 100%;
  }
}
.panelwithimg__img {
  flex-shrink: 0;
  width: 951rem;
  height: 750rem;
  object-fit: cover;
  border-top-left-radius: 10rem;
  border-bottom-left-radius: 10rem;
  border-top-right-radius: 0rem;
  border-bottom-right-radius: 0rem;
}
.panelwithimg__img--imgfirst {
  width: 822rem;
  height: 968rem;
  border-top-left-radius: 0rem;
  border-bottom-left-radius: 0rem;
  border-top-right-radius: 10rem;
  border-bottom-right-radius: 10rem;
}
@media (max-width: 991.98px) {
  .panelwithimg__img {
    width: 100%;
    height: auto;
    border-radius: 10rem;
  }
}
.panelwithimg__img--auto {
  height: auto;
  object-fit: none;
  align-self: flex-start;
}
@media (max-width: 991.98px) {
  .panelwithimg__img--auto {
    object-fit: contain;
  }
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Custom by project
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.news {
  padding: 110rem 129rem 116rem 129rem;
  position: relative;
}
@media (max-width: 991.98px) {
  .news {
    padding: 30rem 0rem 30rem 27rem;
  }
}
.news__title {
  font-family: "GEELY", Arial, Helvetica, sans-serif;
  font-size: 42rem;
  line-height: 54rem;
  font-weight: 700;
  color: #000000;
  letter-spacing: 0.03em;
}
@media (max-width: 991.98px) {
  .news__title {
    padding-right: 27rem;
    font-size: 18rem;
    line-height: 29rem;
    letter-spacing: 0.02em;
  }
}
* + .news__latest {
  margin-top: 52rem;
}
@media (max-width: 991.98px) {
  * + .news__latest {
    margin-top: 38rem;
  }
}
.news__latest {
  display: flex;
  gap: 19rem;
}
@media (max-width: 991.98px) {
  .news__latest {
    gap: 0rem;
    display: block;
  }
}
.news__latest__left {
  width: 822rem;
  display: flex;
}
@media (max-width: 991.98px) {
  .news__latest__left {
    display: none;
  }
}
.news__latest__left .itemnews {
  width: 100%;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}
.news__latest__left .itemnews__img {
  width: 100%;
  height: 597rem;
  object-fit: cover;
}
.news__latest__right {
  display: flex;
  flex-direction: column;
  gap: 19rem;
  width: 822rem;
}
@media (max-width: 991.98px) {
  .news__latest__right {
    display: none;
  }
}
.news__latest__right__top {
  display: flex;
  gap: 18rem;
}
.news__latest__right__top .itemnews {
  flex: 1 1 0;
}
.news__latest__right__top .itemnews__img {
  width: 100%;
  height: 240rem;
  object-fit: cover;
}
.news__latest__right__bottom .itemnews {
  flex: 1 1 0;
}
.news__latest__right__bottom .itemnews__img {
  width: 100%;
  height: 250rem;
  object-fit: cover;
}
@media (min-width: 992px) {
  .news__latest__slider {
    display: none;
  }
}
@media (max-width: 991.98px) {
  .news__latest__slider__item {
    width: 322rem !important;
    margin-right: 16rem;
  }
}
@media (max-width: 991.98px) {
  .news .slidernav {
    background-color: transparent;
  }
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Custom by project
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.moreposts {
  position: relative;
  padding: 116rem 129rem;
}
@media (max-width: 991.98px) {
  .moreposts {
    padding: 30rem 0rem 30rem 27rem;
  }
}
.moreposts__title {
  font-size: 42rem;
  line-height: 54rem;
  letter-spacing: 0.03em;
  color: #000000;
  font-family: "GEELY", Arial, Helvetica, sans-serif;
}
@media (max-width: 991.98px) {
  .moreposts__title {
    font-size: 18rem;
    line-height: 29rem;
    letter-spacing: 0.02em;
  }
}
* + .moreposts__slider {
  margin-top: 44rem;
}
@media (max-width: 991.98px) {
  * + .moreposts__slider {
    margin-top: 12rem;
  }
}
.moreposts__slider {
  margin-left: -18rem;
}
@media (max-width: 991.98px) {
  .moreposts__slider {
    margin-left: 0rem;
  }
}
.moreposts__slider .slick-track {
  display: flex;
  gap: 16rem;
  margin-left: 0rem !important;
}
@media (max-width: 991.98px) {
  .moreposts__slider .slick-track {
    gap: 6rem;
  }
}
@media (max-width: 991.98px) {
  .moreposts__slider .slick-slide {
    height: auto;
  }
}
.moreposts__slider .slick-slide > div {
  width: auto;
}
@media (max-width: 991.98px) {
  .moreposts__slider .slick-slide > div {
    height: 100%;
  }
}
.moreposts__slide {
  width: 404rem !important;
  padding-left: 1px;
  padding-right: 1px;
}
@media (max-width: 991.98px) {
  .moreposts__slide {
    width: 828rem !important;
  }
}
@media (max-width: 575.98px) {
  .moreposts__slide {
    width: 310rem !important;
  }
}
.moreposts__slide .itemnews__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.moreposts__slide .itemnews__img__container {
  height: 240rem;
}
@media (max-width: 991.98px) {
  .moreposts__slide .itemnews__img__container {
    height: 360rem;
  }
}
@media (max-width: 575.98px) {
  .moreposts__slide .itemnews__img__container {
    height: 240rem;
  }
}
.moreposts__slide .button {
  background-color: transparent;
}
@media (min-width: 992px) {
  .moreposts__slide .button {
    border-color: transparent;
  }
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Custom by project
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
@media (max-width: 991.98px) {
  .itemnews {
    width: 100%;
    display: block;
  }
}
.itemnews__img {
  border-radius: 10rem;
  max-width: 100%;
  transition: filter 0.2s linear;
}
@media (max-width: 991.98px) {
  .itemnews__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.itemnews__img__container {
  position: relative;
}
@media (max-width: 991.98px) {
  .itemnews__img__container {
    width: 100%;
    height: 250rem;
  }
}
.itemnews .badge {
  position: absolute;
  top: 25rem;
  left: 37rem;
}
@media (max-width: 991.98px) {
  .itemnews .badge {
    top: 16rem;
    left: 16rem;
  }
}
* + .itemnews__title {
  margin-top: 21rem;
}
@media (max-width: 991.98px) {
  * + .itemnews__title {
    margin-top: 18rem;
  }
}
.itemnews__title {
  font-family: "GEELY", Arial, Helvetica, sans-serif;
  font-size: 14rem;
  line-height: 20rem;
  letter-spacing: 0.018em;
  color: #000000;
  font-weight: 700;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  height: 40rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 991.98px) {
  .itemnews__title {
    font-size: 16rem;
    line-height: 23rem;
    height: 46rem;
    letter-spacing: 0em;
  }
}
* + .itemnews__button {
  padding-top: 8rem;
  margin-top: auto;
}
@media (max-width: 991.98px) {
  * + .itemnews__button {
    padding-top: 28rem;
  }
}
.itemnews__button {
  position: relative;
  display: inline-flex;
}
@media (max-width: 991.98px) {
  .itemnews__button {
    width: 100%;
  }
}
.itemnews__button .button {
  font-weight: 500;
  font-size: 12rem;
  line-height: 15rem;
}
@media (max-width: 991.98px) {
  .itemnews__button .button {
    width: 100%;
  }
}
.itemnews:hover .itemnews__img {
  filter: brightness(1.1);
}
.itemnews:hover .itemnews__date::before {
  backdrop-filter: blur(36rem) brightness(1.09);
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Custom by project
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.iteminfomodel {
  display: block;
  border-radius: 10rem;
  overflow: hidden;
}
.iteminfomodel__img {
  width: 100%;
  height: auto;
  position: relative;
}
.iteminfomodel__img__container {
  width: 100%;
  position: relative;
}
.iteminfomodel__img__shadow {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0rem;
  right: 0rem;
  bottom: 0rem;
  left: 0rem;
  transition: filter 0.2s linear;
}
.iteminfomodel__img__tags {
  position: absolute;
  top: 37rem;
  left: 37rem;
  display: flex;
  gap: 12rem;
}
@media (max-width: 991.98px) {
  .iteminfomodel__img__tags {
    top: 18rem;
    left: 16rem;
  }
}
.iteminfomodel__img__tag {
  width: 51rem;
  height: 51rem;
  border-radius: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.04);
  position: relative;
}
@media (max-width: 991.98px) {
  .iteminfomodel__img__tag {
    width: 50rem;
    height: 50rem;
  }
}
@media (max-width: 575.98px) {
  .iteminfomodel__img__tag {
    width: 40rem;
    height: 40rem;
  }
}
.iteminfomodel__img__tag::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  backdrop-filter: blur(36rem) brightness(1.18);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
@media (max-width: 991.98px) {
  .iteminfomodel__img__tag::before {
    opacity: 0.5;
  }
}
.iteminfomodel__img__tag__icon {
  width: 27.965rem;
  height: 27.966rem;
  object-fit: contain;
  position: relative;
}
@media (max-width: 991.98px) {
  .iteminfomodel__img__tag__icon {
    width: 27.1rem;
    height: 27.1rem;
  }
}
@media (max-width: 575.98px) {
  .iteminfomodel__img__tag__icon {
    width: 22rem;
    height: 22rem;
  }
}
* + .iteminfomodel__title {
  margin-top: 8rem;
}
.iteminfomodel__content {
  padding: 8rem 37rem 22rem 37rem;
}
@media (max-width: 991.98px) {
  .iteminfomodel__content {
    padding: 0rem;
  }
}
.iteminfomodel__content__title {
  font-family: "GEELY", Arial, Helvetica, sans-serif;
  font-size: 22rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  font-weight: 700;
  color: #000000;
}
@media (max-width: 991.98px) {
  .iteminfomodel__content__title {
    font-size: 16rem;
    line-height: 23rem;
    letter-spacing: 0em;
    text-align: center;
  }
}
* + .iteminfomodel__content__list {
  margin-top: 21rem;
}
.iteminfomodel__content__list {
  display: flex;
  gap: 26rem;
  min-width: 126rem;
}
@media (max-width: 991.98px) {
  .iteminfomodel__content__list {
    display: none;
  }
}
.iteminfomodel__content__list__item__title {
  font-family: "GEELY", Arial, Helvetica, sans-serif;
  font-size: 18rem;
  line-height: 25rem;
  letter-spacing: 0.01em;
  color: #000000;
  font-weight: 700;
}
.iteminfomodel__content__list__item__text {
  margin-top: -4rem;
  font-size: 12rem;
  line-height: 19rem;
  letter-spacing: 0.005em;
  color: #000000;
}
* + .iteminfomodel__content__button {
  margin-top: 37rem;
}
@media (max-width: 991.98px) {
  * + .iteminfomodel__content__button {
    margin-top: 11rem;
  }
  * + .iteminfomodel__content__button .button {
    width: 100%;
  }
}
.iteminfomodel:hover .iteminfomodel__img__shadow {
  filter: brightness(1.1);
}
.iteminfomodel:hover .iteminfomodel__img__tag::before {
  backdrop-filter: blur(36rem) brightness(1.09);
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Custom by project
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.introsvideo {
  background-color: #000000;
  position: relative;
}
.introsvideo__item {
  position: relative;
  min-height: 924rem;
  padding: 115rem 134rem 115rem 129rem;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
@media (max-width: 991.98px) {
  .introsvideo__item {
    padding: 91rem 27rem 75rem 27rem;
    min-height: 765rem;
    background-position: center bottom;
    justify-content: flex-start;
  }
}
.introsvideo__item--video {
  margin-bottom: 148rem;
}
@media (max-width: 991.98px) {
  .introsvideo__item--video {
    margin-bottom: 0rem;
    min-height: 555rem;
  }
}
@media (max-width: 575.98px) {
  .introsvideo__item--video {
    min-height: 765rem;
  }
}
.introsvideo__item__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0rem;
  right: 0rem;
  bottom: 0rem;
  left: 0rem;
}
@media (max-width: 575.98px) {
  .introsvideo__item__bg--desktop {
    display: none;
  }
}
@media (min-width: 576px) {
  .introsvideo__item__bg--mobile {
    display: none;
  }
}
.introsvideo__item__video {
  width: 100%;
}
.introsvideo__item__video__container {
  width: 100%;
  position: absolute;
  top: 0rem;
  right: 0rem;
  left: 0rem;
}
@media (max-width: 575.98px) {
  .introsvideo__item__video__container--desktop {
    display: none;
  }
}
.introsvideo__item__video__container--mobile {
  display: none;
}
@media (max-width: 575.98px) {
  .introsvideo__item__video__container--mobile {
    display: block;
  }
}
* + .introsvideo__item__title {
  margin-top: 34rem;
}
.introsvideo__item__title {
  position: relative;
  font-family: "GEELY", Arial, Helvetica, sans-serif;
  font-size: 56rem;
  line-height: 1.2;
  letter-spacing: 0.03em;
  font-weight: 700;
  color: #ffffff;
}
@media (max-width: 991.98px) {
  .introsvideo__item__title {
    font-size: 40rem;
    line-height: 41rem;
    letter-spacing: 0em;
  }
}
* + .introsvideo__item__smalltitle {
  margin-top: 0rem;
}
.introsvideo__item__smalltitle {
  position: relative;
  font-family: "GEELY", Arial, Helvetica, sans-serif;
  font-size: calc(42rem * (var(--fontsize) / 100));
  line-height: 1.2857;
  letter-spacing: 0.03em;
  color: #ffffff;
}
@media (max-width: 991.98px) {
  .introsvideo__item__smalltitle {
    font-size: calc(18rem * (var(--fontsize) / 100));
    line-height: 1.3888;
    letter-spacing: 0.02em;
  }
}
* + .introsvideo__item__add {
  margin-top: 22rem;
}
@media (max-width: 575.98px) {
  * + .introsvideo__item__add {
    margin-top: 12rem;
  }
}
.introsvideo__item__add {
  position: relative;
  display: flex;
  gap: 14rem;
}
.introsvideo__item__add__text {
  font-family: "GEELY", Arial, Helvetica, sans-serif;
  font-size: 52rem;
  line-height: 1.2;
  color: #ffffff;
  letter-spacing: 0.01em;
  font-weight: 700;
}
@media (max-width: 991.98px) {
  .introsvideo__item__add__text {
    font-size: 36rem;
    line-height: 1;
    letter-spacing: 0em;
  }
}
.introsvideo__item__add__suffix {
  width: 124rem;
  font-size: 16rem;
  line-height: 22rem;
  letter-spacing: 0.03em;
  color: #ffffff;
  position: relative;
}
@media (max-width: 991.98px) {
  .introsvideo__item__add__suffix {
    width: 94rem;
    font-size: 12rem;
    line-height: 16rem;
    letter-spacing: 0em;
  }
}
* + .introsvideo__item__excerpt {
  margin-top: -3rem;
}
.introsvideo__item__excerpt {
  position: relative;
  font-size: 16rem;
  line-height: 24rem;
  letter-spacing: 0.03em;
  color: #ffffff;
}
@media (max-width: 991.98px) {
  .introsvideo__item__excerpt {
    font-size: 12rem;
    line-height: 18rem;
    letter-spacing: 0em;
  }
}
* + .introsvideo__item__buttons {
  padding-top: 47rem;
}
@media (max-width: 991.98px) {
  * + .introsvideo__item__buttons {
    margin-top: auto;
  }
}
.introsvideo__item__buttons {
  position: relative;
  display: flex;
  gap: 20rem;
}
@media (max-width: 991.98px) {
  .introsvideo__item__buttons {
    flex-direction: column;
  }
  .introsvideo__item__buttons .button {
    width: 100%;
  }
}
.introsvideo__nav {
  position: absolute;
  bottom: 260rem;
  right: 129rem;
  display: flex;
  gap: 19rem;
}
@media (max-width: 991.98px) {
  .introsvideo__nav {
    bottom: 8rem;
    left: 27rem;
    right: unset;
    align-items: flex-start;
    padding-right: 27rem;
  }
}
.introsvideo__nav__item {
  min-width: 146.5rem;
}
@media (max-width: 991.98px) {
  .introsvideo__nav__item {
    min-width: 51rem;
  }
  .introsvideo__nav__item:first-of-type {
    flex-shrink: 0;
  }
}
.introsvideo__nav__item__progress {
  width: 100%;
  height: 2px;
  position: relative;
}
.introsvideo__nav__item__progress__fill {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.55);
  transform: translate(0%, -50%);
}
* + .introsvideo__nav__item__title {
  margin-top: 15rem;
}
@media (max-width: 991.98px) {
  * + .introsvideo__nav__item__title {
    margin-top: 1rem;
  }
}
.introsvideo__nav__item__title {
  font-family: "GELLY", Arial, Helvetica, sans-serif;
  font-size: 14rem;
  line-height: 29rem;
  color: #ffffff;
}
.introsvideo__nav__item.active .introsvideo__nav__item__title {
  font-weight: 700;
}
.introsvideo__nav__item.active .introsvideo__nav__item__progress__fill {
  height: 2px;
  background-color: white;
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Custom by project
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.instagram {
  padding: 110rem 129rem 116rem 129rem;
  position: relative;
}
@media (max-width: 991.98px) {
  .instagram {
    padding: 30rem 0rem 30rem 27rem;
  }
}
.instagram__title {
  font-size: 42rem;
  line-height: 54rem;
  color: #0C1A36;
  font-family: "GEELY", Arial, Helvetica, sans-serif;
  letter-spacing: 0.03em;
  font-weight: 700;
}
@media (max-width: 991.98px) {
  .instagram__title {
    font-size: 18rem;
    line-height: 29rem;
    letter-spacing: 0.02em;
    padding-right: 27rem;
  }
}
* + .instagram__feed {
  margin-top: 36rem;
}
.instagram__feed__items {
  display: flex;
  gap: 18rem;
}
@media (max-width: 991.98px) {
  .instagram__feed__items {
    gap: 0rem;
    display: block;
  }
}
.instagram__feed__item {
  display: block;
  width: 402rem !important;
  flex-shrink: 0;
  margin-right: 18rem;
}
@media (max-width: 991.98px) {
  .instagram__feed__item {
    width: 322rem !important;
  }
}
@media (max-width: 991.98px) {
  .instagram__feed__item {
    margin-right: 18rem;
  }
}
.instagram__feed__item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.instagram__feed__item__img__container {
  width: 100%;
  height: 502.5rem;
  border-radius: 10rem;
  overflow: hidden;
  position: relative;
}
@media (max-width: 991.98px) {
  .instagram__feed__item__img__container {
    width: 100%;
    height: 402.5rem;
  }
}
.instagram__feed__item__author {
  display: flex;
  align-items: center;
  gap: 19rem;
  position: absolute;
  bottom: 35rem;
  left: 35rem;
}
@media (max-width: 991.98px) {
  .instagram__feed__item__author {
    bottom: 32rem;
    left: 14rem;
    gap: 11rem;
  }
}
.instagram__feed__item__author__avatar {
  width: 54rem;
  height: 54rem;
  border-radius: 9999px;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
@media (max-width: 991.98px) {
  .instagram__feed__item__author__avatar {
    width: 63rem;
    height: 63rem;
  }
}
.instagram__feed__item__author__name {
  font-size: 16rem;
  line-height: 24rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #ffffff;
}
@media (max-width: 991.98px) {
  .instagram__feed__item__author__name {
    letter-spacing: 0em;
  }
}
* + .instagram__feed__item__title {
  margin-top: 17rem;
}
.instagram__feed__item__title {
  width: 80.9%;
  font-size: 14rem;
  line-height: 24rem;
  letter-spacing: 0.03em;
  color: #000000;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 991.98px) {
  .instagram__feed__item__title {
    font-size: 14rem;
    line-height: 20rem;
    width: 100%;
  }
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Custom by project
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.infotiles {
  position: relative;
  padding: 108rem 127rem 120rem 127rem;
}
@media (max-width: 991.98px) {
  .infotiles {
    padding: 80rem 0rem 73rem 27rem;
  }
}
.infotiles__title {
  position: relative;
  font-size: 42rem;
  line-height: 54rem;
  letter-spacing: 0.03em;
  font-weight: 700;
  font-family: "GEELY", Arial, Helvetica, sans-serif;
  color: #000000;
  display: inline-block;
}
@media (max-width: 991.98px) {
  .infotiles__title {
    padding-right: 27rem;
    font-size: 18rem;
    line-height: 28rem;
    letter-spacing: 0.02em;
    width: 250rem;
  }
}
* + .infotiles__excerpt {
  margin-top: 11rem;
}
@media (max-width: 991.98px) {
  * + .infotiles__excerpt {
    margin-top: 19rem;
  }
}
.infotiles__excerpt {
  font-size: 16rem;
  line-height: 24rem;
  letter-spacing: 0.03em;
  color: #000000;
}
@media (max-width: 991.98px) {
  .infotiles__excerpt {
    padding-right: 27rem;
    font-size: 12rem;
    line-height: 18rem;
    letter-spacing: 0em;
  }
}
.infotiles__items {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  gap: 18rem 12rem;
}
@media (max-width: 991.98px) {
  .infotiles__items {
    gap: 14rem 10rem;
    padding-right: 27rem;
  }
}
@media (max-width: 575.98px) {
  .infotiles__items {
    width: 691rem;
  }
}
* + .infotiles__items__container {
  margin-top: 70rem;
}
@media (max-width: 991.98px) {
  * + .infotiles__items__container {
    margin-top: 24rem;
  }
}
.infotiles__items__container {
  width: 100%;
}
@media (max-width: 991.98px) {
  .infotiles__items__container {
    overflow-x: auto;
  }
}
.infotiles__items__group {
  display: flex;
  gap: 18rem;
}
@media (max-width: 991.98px) {
  .infotiles__items__group {
    flex-direction: column;
    gap: 14rem 10rem;
  }
}
.infotiles__item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24rem 66rem;
  border-radius: 18rem;
  background-color: #F9F8F9;
  width: 542rem;
  min-height: 282rem;
}
@media (max-width: 991.98px) {
  .infotiles__item {
    width: 300rem;
    min-height: 150rem;
    padding: 24rem 14.3rem 24rem 32rem;
    border-radius: 10rem;
  }
}
@media (max-width: 575.98px) {
  .infotiles__item {
    width: 325rem;
  }
}
.infotiles__item:nth-child(1) {
  border-top-left-radius: 72rem;
}
@media (max-width: 991.98px) {
  .infotiles__item:nth-child(1) {
    border-radius: 10rem;
  }
}
.infotiles__item:nth-child(3) {
  border-top-right-radius: 72rem;
}
@media (max-width: 991.98px) {
  .infotiles__item:nth-child(3) {
    border-radius: 10rem;
  }
}
.infotiles__item:nth-last-child(3) {
  border-bottom-left-radius: 72rem;
}
@media (max-width: 991.98px) {
  .infotiles__item:nth-last-child(3) {
    border-radius: 10rem;
  }
}
.infotiles__item:nth-last-child(1) {
  border-bottom-right-radius: 72rem;
}
@media (max-width: 991.98px) {
  .infotiles__item:nth-last-child(1) {
    border-radius: 10rem;
  }
}
.infotiles__item__inner {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
@media (max-width: 991.98px) {
  .infotiles__item__inner {
    gap: 28rem;
    flex-direction: row-reverse;
  }
}
.infotiles__item__inner__content {
  flex-grow: 1;
}
.infotiles__item__inner__content__title {
  position: relative;
  display: inline-block;
  font-size: 36rem;
  line-height: 54rem;
  letter-spacing: 0.03em;
  font-weight: 700;
  color: #000000;
  font-family: "GEELY", Arial, Helvetica, sans-serif;
}
@media (max-width: 991.98px) {
  .infotiles__item__inner__content__title {
    font-size: 20rem;
    line-height: 29rem;
    letter-spacing: 0.02em;
  }
  .infotiles__item__inner__content__title .subcenter {
    text-transform: uppercase;
  }
}
.infotiles__item__inner__content__text {
  font-size: 18rem;
  line-height: 24rem;
  letter-spacing: 0.03em;
  color: #000000;
}
@media (max-width: 991.98px) {
  .infotiles__item__inner__content__text {
    font-size: 14rem;
    line-height: 19rem;
  }
}
.infotiles__item__inner__img {
  width: 59rem;
  height: 67rem;
  object-fit: contain;
  flex-shrink: 0;
}
@media (max-width: 991.98px) {
  .infotiles__item__inner__img {
    width: 38rem;
    line-height: 44rem;
  }
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Custom by project
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.imgstextcollapsed {
  padding: 81rem 129rem 130rem 129rem;
  position: relative;
}
@media (max-width: 991.98px) {
  .imgstextcollapsed {
    padding: 41rem 27rem 71rem 27rem;
  }
}
.imgstextcollapsed__title {
  font-family: "GEELY", Arial, Helvetica, sans-serif;
  font-size: 42rem;
  line-height: 54rem;
  letter-spacing: 0.03em;
  color: #000000;
  font-weight: 700;
}
@media (max-width: 991.98px) {
  .imgstextcollapsed__title {
    font-size: 18rem;
    line-height: 28rem;
    letter-spacing: 0.02em;
  }
}
* + .imgstextcollapsed__excerpt {
  margin-top: 30rem;
}
@media (max-width: 991.98px) {
  * + .imgstextcollapsed__excerpt {
    margin-top: 19rem;
  }
}
.imgstextcollapsed__excerpt {
  font-size: 16rem;
  line-height: 24rem;
  letter-spacing: 0.03em;
  color: #000000;
}
@media (max-width: 991.98px) {
  .imgstextcollapsed__excerpt {
    font-size: 12rem;
    line-height: 18rem;
    letter-spacing: 0em;
  }
}
* + .imgstextcollapsed__rows {
  margin-top: 36rem;
}
@media (max-width: 991.98px) {
  * + .imgstextcollapsed__rows {
    margin-top: 24rem;
  }
}
* + .imgstextcollapsed__row {
  margin-top: 130rem;
}
@media (max-width: 991.98px) {
  * + .imgstextcollapsed__row {
    margin-top: 16rem;
  }
}
.imgstextcollapsed__columns {
  display: flex;
  gap: 18rem;
}
@media (max-width: 991.98px) {
  .imgstextcollapsed__columns {
    flex-direction: column;
    gap: 16rem;
  }
}
.imgstextcollapsed__column {
  position: relative;
  height: 545rem;
  border-radius: 10rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 20rem 22rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
@media (max-width: 991.98px) {
  .imgstextcollapsed__column {
    padding: 16rem 14rem;
  }
}
@media (max-width: 575.98px) {
  .imgstextcollapsed__column {
    background-position: left center;
    height: 250rem;
  }
}
.imgstextcollapsed__column--one {
  width: 100%;
}
.imgstextcollapsed__column--half-half {
  width: calc(50% - 9rem);
}
@media (max-width: 991.98px) {
  .imgstextcollapsed__column--half-half {
    width: 100%;
  }
}
.imgstextcollapsed__column--big-medium-small:nth-child(1) {
  width: 682rem;
}
.imgstextcollapsed__column--big-medium-small:nth-child(2) {
  width: 542rem;
}
.imgstextcollapsed__column--big-medium-small:nth-child(3) {
  width: 402rem;
}
.imgstextcollapsed__column--big-small-medium:nth-child(1) {
  width: 682rem;
}
.imgstextcollapsed__column--big-small-medium:nth-child(2) {
  width: 402rem;
}
.imgstextcollapsed__column--big-small-medium:nth-child(3) {
  width: 542rem;
}
.imgstextcollapsed__column--medium-big-small:nth-child(1) {
  width: 542rem;
}
.imgstextcollapsed__column--medium-big-small:nth-child(2) {
  width: 682rem;
}
.imgstextcollapsed__column--medium-big-small:nth-child(3) {
  width: 402rem;
}
.imgstextcollapsed__column--medium-small-big:nth-child(1) {
  width: 542rem;
}
.imgstextcollapsed__column--medium-small-big:nth-child(2) {
  width: 402rem;
}
.imgstextcollapsed__column--medium-small-big:nth-child(3) {
  width: 682rem;
}
.imgstextcollapsed__column--small-big-medium:nth-child(1) {
  width: 402rem;
}
.imgstextcollapsed__column--small-big-medium:nth-child(2) {
  width: 682rem;
}
.imgstextcollapsed__column--small-big-medium:nth-child(3) {
  width: 542rem;
}
.imgstextcollapsed__column--small-medium-big:nth-child(1) {
  width: 402rem;
}
.imgstextcollapsed__column--small-medium-big:nth-child(2) {
  width: 542rem;
}
.imgstextcollapsed__column--small-medium-big:nth-child(3) {
  width: 682rem;
}
@media (max-width: 991.98px) {
  .imgstextcollapsed__column:nth-child(1), .imgstextcollapsed__column:nth-child(2), .imgstextcollapsed__column:nth-child(3) {
    width: 100%;
  }
}
.imgstextcollapsed__column__plus, .imgstextcollapsed__column__content, .imgstextcollapsed__column__content__label, .imgstextcollapsed__column__content__text {
  position: relative;
  display: inline-flex;
  border-radius: 10rem;
}
.imgstextcollapsed__column__plus::before, .imgstextcollapsed__column__content::before, .imgstextcollapsed__column__content__label::before, .imgstextcollapsed__column__content__text::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  backdrop-filter: blur(18rem) brightness(1.18);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.9;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
@media (max-width: 991.98px) {
  .imgstextcollapsed__column__plus::before, .imgstextcollapsed__column__content::before, .imgstextcollapsed__column__content__label::before, .imgstextcollapsed__column__content__text::before {
    opacity: 0.9;
    background-color: rgba(255, 255, 255, 0.22);
  }
}
.imgstextcollapsed__column__plus__inner, .imgstextcollapsed__column__plus::after, .imgstextcollapsed__column__content__inner, .imgstextcollapsed__column__content::after, .imgstextcollapsed__column__content__label__inner, .imgstextcollapsed__column__content__label::after, .imgstextcollapsed__column__content__text__inner, .imgstextcollapsed__column__content__text::after {
  position: relative;
  z-index: 1;
}
.imgstextcollapsed__column__plus {
  width: 40rem;
  height: 40rem;
}
.imgstextcollapsed__column__plus::after {
  content: "";
  display: block;
  width: 11.964rem;
  height: 11.5rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-mask: url("../images/global/plus.svg") no-repeat center;
  mask: url("../images/global/plus.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: #ffffff;
  transition: background-color 0.2s linear;
}
@media (max-width: 991.98px) {
  .imgstextcollapsed__column__plus::after {
    background-color: #000000;
  }
}
.imgstextcollapsed__column__plus:hover::after {
  background-color: #3a7ff8;
}
* + .imgstextcollapsed__column__content {
  margin-top: 10rem;
}
.imgstextcollapsed__column__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
@media (max-width: 991.98px) {
  .imgstextcollapsed__column__content {
    width: 100%;
    padding: 8rem 14rem;
  }
}
@media (min-width: 992px) {
  .imgstextcollapsed__column__content::before {
    display: none;
  }
}
.imgstextcollapsed__column__content__label {
  margin-right: auto;
}
@media (max-width: 991.98px) {
  .imgstextcollapsed__column__content__label {
    width: 100%;
    margin-right: 0rem;
  }
  .imgstextcollapsed__column__content__label::before {
    display: none;
  }
}
.imgstextcollapsed__column__content__label__inner {
  padding: 8rem 14rem;
  font-size: 14rem;
  line-height: 24rem;
  letter-spacing: 0.03em;
  color: #ffffff;
  font-weight: 600;
  text-align: center;
}
@media (max-width: 991.98px) {
  .imgstextcollapsed__column__content__label__inner {
    width: 100%;
    font-size: 12rem;
    line-height: 24rem;
    letter-spacing: 0em;
    color: #000000;
    padding: 0rem 0rem 0rem 0rem;
  }
}
* + .imgstextcollapsed__column__content__text {
  margin-top: 10rem;
}
@media (max-width: 991.98px) {
  * + .imgstextcollapsed__column__content__text {
    margin-top: 17rem;
  }
}
.imgstextcollapsed__column__content__text {
  padding: 25rem 40rem 25rem 18rem;
  font-size: 12rem;
  line-height: 20rem;
  letter-spacing: 0.01em;
  color: #000000;
}
.imgstextcollapsed__column__content__text::before {
  background-color: rgba(255, 255, 255, 0.3);
}
@media (max-width: 991.98px) {
  .imgstextcollapsed__column__content__text {
    font-size: 12rem;
    line-height: 18rem;
    letter-spacing: 0em;
    padding: 0rem;
  }
  .imgstextcollapsed__column__content__text::before {
    display: none;
  }
}
.imgstextcollapsed__column__content__text__close {
  width: 40rem;
  height: 40rem;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10rem;
  position: absolute;
  top: 0%;
  right: 0%;
  z-index: 2;
}
.imgstextcollapsed__column__content__text__close--mobile {
  display: none;
}
@media (max-width: 991.98px) {
  .imgstextcollapsed__column__content__text__close {
    display: none;
    background-color: transparent;
  }
}
.imgstextcollapsed__column__content__text__close::after {
  content: "";
  display: block;
  width: 11.061rem;
  height: 11.061rem;
  -webkit-mask: url("../images/global/x_sharp.svg") no-repeat center;
  mask: url("../images/global/x_sharp.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 0.2s linear;
  background-color: #000000;
}
.imgstextcollapsed__column__content__text__close:hover::after {
  background-color: #F6292E;
}
@media (max-width: 991.98px) {
  .imgstextcollapsed__column__content.active .imgstextcollapsed__column__content__label__inner {
    text-align: left;
    padding-right: 26rem;
  }
}
@media (max-width: 991.98px) {
  .imgstextcollapsed__column__content.active .imgstextcollapsed__column__content__text__close--mobile {
    display: flex;
  }
}
.imgstextcollapsed__box {
  display: flex;
  gap: 18rem;
  width: 100%;
}
.imgstextcollapsed__box--left2small-rightbig {
  flex-direction: row-reverse;
}
@media (max-width: 991.98px) {
  .imgstextcollapsed__box {
    flex-direction: column;
    gap: 16rem;
  }
}
.imgstextcollapsed__box__big {
  width: 962rem;
}
@media (max-width: 991.98px) {
  .imgstextcollapsed__box__big {
    width: 100%;
  }
}
.imgstextcollapsed__box__big .imgstextcollapsed__column {
  height: 786rem;
}
@media (max-width: 575.98px) {
  .imgstextcollapsed__box__big .imgstextcollapsed__column {
    height: 250rem;
  }
}
.imgstextcollapsed__box__smalls {
  display: flex;
  flex-direction: column;
  gap: 18rem;
  width: 682rem;
}
@media (max-width: 991.98px) {
  .imgstextcollapsed__box__smalls {
    width: 100%;
  }
}
.imgstextcollapsed__box__smalls .imgstextcollapsed__column--leftbig-right2small,
.imgstextcollapsed__box__smalls .imgstextcollapsed__column--left2small-rightbig {
  height: 384rem;
}
@media (max-width: 575.98px) {
  .imgstextcollapsed__box__smalls .imgstextcollapsed__column--leftbig-right2small,
  .imgstextcollapsed__box__smalls .imgstextcollapsed__column--left2small-rightbig {
    height: 250rem;
  }
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Custom by project
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.imgsection {
  position: relative;
  margin: 74rem 269rem;
}
@media (max-width: 991.98px) {
  .imgsection {
    margin: 30rem 27rem;
  }
}
.imgsection__img {
  width: 100%;
  height: auto;
  border-radius: 10rem;
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Custom by project
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.heading {
  position: relative;
  margin: 74rem 409rem;
  font-size: 22rem;
  line-height: 35rem;
  font-family: "GEELY", Arial, Helvetica, sans-serif;
  letter-spacing: 0.02em;
  color: #000000;
}
@media (max-width: 991.98px) {
  .heading {
    margin: 30rem 27rem;
    font-size: 18rem;
    line-height: 24rem;
    letter-spacing: 0em;
  }
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Custom by project
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.gradientpoints {
  margin: 110rem 129rem 116rem 129rem;
  position: relative;
  display: flex;
  gap: 158rem;
}
.gradientpoints--imgfromedge {
  margin-right: 0rem;
}
.gradientpoints--imgfirst {
  flex-direction: row-reverse;
  margin-right: 211rem;
}
.gradientpoints--imgfirst .gradientpoints----imgfromedge {
  margin-left: 0rem;
}
@media (max-width: 991.98px) {
  .gradientpoints {
    margin: 81rem 27rem 30rem 27rem;
    gap: 0rem;
    flex-direction: column;
  }
}
.gradientpoints__content {
  width: 541rem;
  flex-shrink: 0;
}
.gradientpoints__content--imgfirst {
  width: 600rem;
}
@media (max-width: 991.98px) {
  .gradientpoints__content {
    width: 100%;
  }
}
@media (max-width: 575.98px) {
  .gradientpoints__content {
    width: auto;
  }
}
.gradientpoints__content__title {
  font-family: "GEELY", Arial, Helvetica, sans-serif;
  font-size: 42rem;
  line-height: 54rem;
  letter-spacing: 0.03em;
  color: #000000;
  font-weight: 700;
}
.gradientpoints__content__title--imgfirst {
  margin-right: -70rem;
}
@media (max-width: 991.98px) {
  .gradientpoints__content__title {
    font-size: 18rem;
    line-height: 29rem;
    letter-spacing: 0.02em;
    font-weight: 700;
  }
  .gradientpoints__content__title--imgfirst {
    margin-right: 0rem;
  }
}
* + .gradientpoints__content__text {
  margin-top: 37rem;
}
@media (max-width: 575.98px) {
  * + .gradientpoints__content__text {
    margin-top: 24rem;
  }
}
.gradientpoints__content__text {
  font-size: 16rem;
  line-height: 24rem;
  letter-spacing: 0.03em;
  color: #000000;
  position: relative;
}
@media (max-width: 991.98px) {
  .gradientpoints__content__text {
    width: 100%;
    min-height: 881rem;
    border-radius: 10rem;
    overflow: hidden;
    padding: 28rem 17rem 28rem 14rem;
    color: #ffffff;
  }
}
@media (max-width: 575.98px) {
  .gradientpoints__content__text {
    min-height: 321rem;
    font-size: 12rem;
    line-height: 18rem;
    letter-spacing: 0em;
  }
}
.gradientpoints__content__text__bgmobile {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0rem;
  right: 0rem;
  bottom: 0rem;
  left: 0rem;
}
@media (min-width: 992px) {
  .gradientpoints__content__text__bgmobile {
    display: none;
  }
}
* + .gradientpoints__content__list {
  margin-top: 76rem;
}
@media (max-width: 991.98px) {
  * + .gradientpoints__content__list {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  * + .gradientpoints__content__list {
    margin-top: 24rem;
  }
}
.gradientpoints__content__list {
  width: 100%;
  list-style-type: none;
}
@media (max-width: 991.98px) {
  .gradientpoints__content__list {
    display: flex;
    flex-direction: column;
    gap: 15rem;
  }
}
.gradientpoints__content__list__item {
  position: relative;
  width: 100%;
  min-height: 112rem;
  padding-top: 30rem;
  padding-bottom: 30rem;
  cursor: default !important;
}
.gradientpoints__content__list__item--auto {
  min-height: auto;
  padding-top: 27rem;
  padding-bottom: 27rem;
}
@media (min-width: 992px) {
  .gradientpoints__content__list__item:first-of-type {
    padding-top: 0rem;
  }
  .gradientpoints__content__list__item:first-of-type::before {
    display: none;
  }
}
.gradientpoints__content__list__item:last-of-type {
  min-height: auto;
}
@media (min-width: 992px) {
  .gradientpoints__content__list__item:last-of-type {
    padding-bottom: 0rem;
  }
}
@media (max-width: 991.98px) {
  .gradientpoints__content__list__item {
    border-radius: 10rem;
    padding: 22rem 16rem 15rem 16rem;
    border: 1px solid #EAEBEC;
    min-height: 75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    cursor: pointer !important;
  }
}
.gradientpoints__content__list__item::before {
  content: "";
  display: block;
  width: 100%;
  height: 5rem;
  position: absolute;
  top: 0rem;
  left: 0rem;
  right: 0rem;
  background: linear-gradient(90deg, #5FC8AA 0%, #4C80F0 100%);
  transition: opacity 0.2s linear;
}
@media (max-width: 991.98px) {
  .gradientpoints__content__list__item::before {
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    top: 50%;
    left: 50%;
    right: unset;
    transform: translate(-50%, -50%);
    border-radius: inherit;
    opacity: 0;
  }
}
@media (max-width: 991.98px) {
  .gradientpoints__content__list__item::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    border-radius: inherit;
  }
}
.gradientpoints__content__list__item__title {
  position: relative;
  display: inline-block;
  font-family: "GEELY", Arial, Helvetica, sans-serif;
  font-size: 20rem;
  line-height: 1.2;
  letter-spacing: 0.03em;
  color: #000000;
  font-weight: 700;
  max-width: 100%;
  z-index: 2;
}
@media (max-width: 991.98px) {
  .gradientpoints__content__list__item__title {
    font-size: 16rem;
    line-height: 23rem;
    letter-spacing: 0em;
  }
}
.gradientpoints__content__list__item__title__toggler {
  width: 6.93rem;
  height: 13.26rem;
  position: absolute;
  flex-shrink: 0;
  display: none;
  top: 50%;
  transform: translateY(-50%);
}
@media (max-width: 991.98px) {
  .gradientpoints__content__list__item__title__toggler {
    display: block;
    left: 892rem;
  }
}
@media (max-width: 575.98px) {
  .gradientpoints__content__list__item__title__toggler {
    left: 295rem;
  }
}
.gradientpoints__content__list__item__title__toggler::before, .gradientpoints__content__list__item__title__toggler::after {
  content: "";
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  transition: opacity 0.2s linear;
  opacity: 1;
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(-50%, -50%) rotate(270deg);
}
.gradientpoints__content__list__item__title__toggler::before {
  width: 6.206rem;
  height: 12.413rem;
  background-image: url("../images/global/prev.svg");
}
.gradientpoints__content__list__item__title__toggler::after {
  width: 6.93rem;
  height: 13.26rem;
  background-image: url("../images/global/prev_active.svg");
  transform: translate(-50%, -50%) rotate(450deg);
  opacity: 0;
}
* + .gradientpoints__content__list__item__text {
  margin-top: 5rem;
}
@media (max-width: 991.98px) {
  * + .gradientpoints__content__list__item__text {
    margin-top: 3rem;
  }
}
.gradientpoints__content__list__item__text {
  font-size: 14rem;
  line-height: 22rem;
  letter-spacing: 0.03em;
  color: #000000;
  max-width: 100%;
  position: relative;
  z-index: 1;
}
@media (min-width: 992px) {
  .gradientpoints__content__list__item__text {
    display: block !important;
  }
}
@media (max-width: 991.98px) {
  .gradientpoints__content__list__item__text {
    font-size: 12rem;
    line-height: 18rem;
    letter-spacing: 0em;
  }
}
.gradientpoints__content__list__item.active::before {
  opacity: 1;
}
.gradientpoints__content__list__item.active .gradientpoints__content__list__item__title__toggler::before {
  opacity: 0;
}
.gradientpoints__content__list__item.active .gradientpoints__content__list__item__title__toggler::after {
  opacity: 1;
}
.gradientpoints__img {
  flex-grow: 1;
  max-width: 100%;
  border-radius: 8rem;
}
@media (max-width: 991.98px) {
  .gradientpoints__img {
    display: none;
  }
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Custom by project
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.gettoknow {
  position: relative;
  padding: 108rem 129rem 114rem 129rem;
}
@media (max-width: 991.98px) {
  .gettoknow {
    padding: 79rem 27rem 71rem 27rem;
  }
}
.gettoknow__title {
  font-family: "GEELY", Arial, Helvetica, sans-serif;
  font-size: 42rem;
  line-height: 54rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.03em;
  color: #000000;
}
@media (max-width: 991.98px) {
  .gettoknow__title {
    font-size: 18rem;
    line-height: 29rem;
    letter-spacing: 0.02em;
  }
}
* + .gettoknow__items {
  margin-top: 40rem;
}
@media (max-width: 991.98px) {
  * + .gettoknow__items {
    margin-top: 17rem;
  }
}
.gettoknow__items {
  display: flex;
  flex-wrap: wrap;
  gap: 18rem;
}
@media (max-width: 991.98px) {
  .gettoknow__items {
    flex-direction: column;
    gap: 34rem;
  }
}
.gettoknow__item {
  width: calc(50% - 9rem);
}
@media (max-width: 991.98px) {
  .gettoknow__item {
    width: 100%;
  }
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Custom by project
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.componentexample {
  background-color: #ffffff;
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Custom by project
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.centeredslider {
  position: relative;
  margin: 74rem 0rem 74rem 269rem;
}
@media (max-width: 991.98px) {
  .centeredslider {
    margin: 60rem 0rem 30rem 27rem;
  }
}
.centeredslider__slider .slick-track {
  display: flex;
  gap: 18rem;
}
@media (max-width: 991.98px) {
  .centeredslider__slider .slick-track {
    gap: 0rem;
  }
}
@media (max-width: 991.98px) {
  .centeredslider__slider .slick-slide {
    height: auto;
  }
}
.centeredslider__slider .slick-slide > div {
  width: auto;
}
@media (max-width: 991.98px) {
  .centeredslider__slider .slick-slide > div {
    margin-right: 18rem;
    height: 100%;
  }
}
.centeredslider__slide {
  width: 1242rem !important;
}
@media (max-width: 991.98px) {
  .centeredslider__slide {
    width: 880rem !important;
  }
}
@media (max-width: 575.98px) {
  .centeredslider__slide {
    width: 320rem !important;
  }
}
.centeredslider__slide__img {
  width: 100%;
  height: auto;
  border-radius: 10rem;
}
.centeredslider .slidernav {
  top: -89.4rem;
  right: 297rem;
}
@media (max-width: 991.98px) {
  .centeredslider .slidernav {
    top: -50rem;
    right: 17rem;
  }
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Custom by project
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.centeredbuttons {
  position: relative;
  margin: 74rem 549rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 991.98px) {
  .centeredbuttons {
    margin: 30rem 27rem;
    flex-direction: column;
  }
}
.centeredbuttons__items {
  width: 100%;
  display: flex;
  gap: 8rem;
}
@media (max-width: 991.98px) {
  .centeredbuttons__items {
    flex-direction: column;
  }
  .centeredbuttons__items .button,
  .centeredbuttons__items .button-new {
    width: 100%;
  }
}
.centeredbuttons * + .scrollup {
  margin-top: 12rem;
}
.centeredbuttons .scrollup {
  position: relative;
  top: unset;
  right: unset;
  left: unset;
  bottom: unset;
  flex-shrink: 0;
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Custom by project
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.carvariants__box {
  display: flex;
  gap: 48rem;
  margin-left: 127rem;
  margin-right: 127rem;
  position: relative;
  z-index: 1;
}
@media (max-width: 991.98px) {
  .carvariants__box {
    gap: 23rem;
    flex-direction: column;
    margin-left: 27rem;
    margin-right: 27rem;
  }
}
.carvariants__box__content {
  width: 1074rem;
}
@media (max-width: 991.98px) {
  .carvariants__box__content {
    width: auto;
  }
}
.carvariants__box__content__title {
  font-size: 42rem;
  line-height: 54rem;
  letter-spacing: 0.03em;
  font-weight: 700;
  font-family: "GEELY", Arial, Helvetica, sans-serif;
}
@media (max-width: 991.98px) {
  .carvariants__box__content__title {
    font-size: 18rem;
    line-height: 25rem;
    letter-spacing: 0.02em;
    text-align: center;
  }
}
* + .carvariants__box__content__excerpt {
  margin-top: 10rem;
}
@media (max-width: 991.98px) {
  * + .carvariants__box__content__excerpt {
    margin-top: 30rem;
  }
}
.carvariants__box__content__excerpt {
  font-size: 16rem;
  line-height: 24rem;
  letter-spacing: 0.03em;
}
@media (max-width: 991.98px) {
  .carvariants__box__content__excerpt {
    font-size: 12rem;
    line-height: 18rem;
    letter-spacing: 0em;
    text-align: center;
  }
}
@media (max-width: 991.98px) {
  .carvariants__box__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.carvariants__box__nav__panel {
  display: flex;
  padding: 13rem 12rem;
  gap: 19rem;
  border-radius: 42rem;
  position: relative;
}
.carvariants__box__nav__panel--mobileleft {
  margin-right: auto;
}
.carvariants__box__nav__panel::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  backdrop-filter: blur(36rem) brightness(1.06);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}
@media (max-width: 991.98px) {
  .carvariants__box__nav__panel--type {
    gap: 28rem;
    justify-content: center;
    padding: 0rem;
  }
}
@media (max-width: 991.98px) {
  .carvariants__box__nav__panel--type::before {
    display: none;
  }
}
@media (max-width: 991.98px) {
  .carvariants__box__nav__panel--wrap4mobile {
    flex-wrap: wrap;
    gap: 49rem 40rem;
    justify-content: flex-start;
  }
}
.carvariants__box__nav__top {
  font-size: 16rem;
  line-height: 18rem;
  letter-spacing: 0.03em;
}
@media (max-width: 991.98px) {
  .carvariants__box__nav__top {
    display: none;
  }
}
* + .carvariants__box__nav__bottom {
  margin-top: 12rem;
}
@media (max-width: 991.98px) {
  * + .carvariants__box__nav__bottom {
    margin-top: 0rem;
  }
}
.carvariants__box__nav__bottom {
  position: relative;
  display: flex;
  gap: 11rem;
}
@media (max-width: 991.98px) {
  .carvariants__box__nav__bottom {
    width: 100%;
    flex-direction: column;
    align-items: center;
  }
}
.carvariants__box__nav__bottom__icon {
  position: relative;
  width: 51%;
  height: 51%;
  object-fit: contain;
}
.carvariants__box__nav__bottom__icon--color {
  width: 100%;
  height: 100%;
  border-radius: 9999px;
}
.carvariants__box__nav__bottom__icon--color::before {
  content: "";
  display: block;
  width: 125.9%;
  height: 125.9%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 9999px;
}
.carvariants__box__nav__bottom__icon__container {
  position: relative;
  width: 54rem;
  height: 54rem;
  border-radius: 9999px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  box-shadow: 3rem 6rem 9rem rgba(62, 62, 62, 0.33);
}
@media (max-width: 991.98px) {
  .carvariants__box__nav__bottom__icon__container {
    width: 77rem;
    height: 77rem;
  }
}
@media (max-width: 991.98px) {
  .carvariants__box__nav__bottom__icon__container--type {
    display: none;
  }
}
.carvariants__box__nav__bottom__icon__container::before {
  content: "";
  display: block;
  width: 125.9%;
  height: 125.9%;
  border: 2px solid #3A7FF8;
  border-radius: 9999px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s linear;
  pointer-events: none;
}
.carvariants__box__nav__bottom__icon__container::after {
  content: "";
  display: block;
  width: 33.3%;
  height: 33.3%;
  border-radius: 9999px;
  position: absolute;
  top: -13%;
  right: -13%;
  opacity: 0;
  transition: opacity 0.2s linear;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("../images/global/check.svg");
  pointer-events: none;
}
.carvariants__box__nav__bottom__icon__container__name {
  display: none;
  font-size: 12rem;
  line-height: 18rem;
  text-align: center;
  position: absolute;
  z-index: 2;
  bottom: -19.5rem;
  left: 50%;
  transform: translate(-50%, 100%);
  text-wrap: nowrap;
}
.carvariants__box__nav__bottom__icon__container__name--left {
  left: 0%;
  transform: translate(0%, 100%);
}
.carvariants__box__nav__bottom__icon__container__name--right {
  left: unset;
  right: 0%;
  transform: translate(0%, 100%);
}
.carvariants__box__nav__bottom__icon__container.active {
  background-color: #ffffff;
  box-shadow: 4rem 10rem 20rem rgba(62, 62, 62, 0.33);
}
.carvariants__box__nav__bottom__icon__container.active::before, .carvariants__box__nav__bottom__icon__container.active::after {
  opacity: 1;
}
@media (max-width: 991.98px) {
  .carvariants__box__nav__bottom__icon__container.active .carvariants__box__nav__bottom__icon__container__name {
    display: block;
  }
}
.carvariants__box__nav__bottom__buttonmobile {
  display: none;
  padding: 8rem 16rem;
  border-radius: 9999px;
  font-size: 12rem;
  line-height: 18rem;
  text-align: center;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  transition: color 0.2s linear, background-color 0.2s linear;
}
@media (max-width: 991.98px) {
  .carvariants__box__nav__bottom__buttonmobile {
    display: flex;
  }
}
.carvariants__box__nav__bottom__buttonmobile.active {
  background-color: #3a7ff8;
  color: #ffffff;
}
.carvariants__outer, .carvariants__inner {
  position: relative;
  padding: 114rem 0rem 56rem 0rem;
}
@media (max-width: 991.98px) {
  .carvariants__outer, .carvariants__inner {
    padding: 81rem 0rem 63rem 0rem;
  }
}
.carvariants__outer__images {
  margin-top: -25rem;
  margin-bottom: -80rem;
}
@media (max-width: 991.98px) {
  .carvariants__outer__images {
    margin-top: 0rem;
    margin-bottom: 0rem;
    margin-left: -14rem;
    margin-right: -14rem;
  }
}
.carvariants__outer__images .slick-slide + .slick-slide .carvariants__outer__images__item {
  margin-left: -418rem;
}
@media (max-width: 991.98px) {
  .carvariants__outer__images .slick-slide + .slick-slide .carvariants__outer__images__item {
    margin-left: 0rem;
  }
}
.carvariants__outer__images__item {
  padding-left: 152rem;
}
@media (max-width: 991.98px) {
  .carvariants__outer__images__item {
    padding-left: 0rem;
  }
}
.carvariants__outer__images__item__img {
  width: 1188rem;
  height: 792rem;
  object-fit: contain;
}
@media (max-width: 991.98px) {
  .carvariants__outer__images__item__img {
    width: 425rem;
    height: 283rem;
  }
}
.carvariants__inner__sliders {
  padding-top: 18rem;
  padding-left: 127rem;
}
@media (max-width: 991.98px) {
  .carvariants__inner__sliders {
    padding-top: 36rem;
    padding-left: 27rem;
  }
}
.carvariants__inner__slider .slick-slide {
  margin-right: 18rem;
}
.carvariants__inner__slider__item__img {
  width: 1242rem;
  height: 661rem;
  object-fit: cover;
  border-radius: 10rem;
}
@media (max-width: 991.98px) {
  .carvariants__inner__slider__item__img {
    width: 335.34rem;
    height: 178.47rem;
  }
}

.cardcarousel {
  padding: 119rem 127rem;
  position: relative;
}
@media (max-width: 991.98px) {
  .cardcarousel {
    padding: 30rem 27rem;
  }
  .cardcarousel .slidernav {
    top: 100rem;
  }
}
@media (max-width: 575.98px) {
  .cardcarousel .slidernav {
    top: 150rem;
  }
}
.cardcarousel__intro {
  font-size: 14rem;
  letter-spacing: 0.02em;
  line-height: 22rem;
  text-align: left;
  color: #000;
  width: 774rem;
}
@media (max-width: 991.98px) {
  .cardcarousel__intro {
    width: 100%;
    margin-bottom: 30rem;
  }
}
.cardcarousel__carousel {
  margin-top: 44rem;
  overflow: visible;
}
.cardcarousel__carousel .slick-track, .cardcarousel__carousel .slick-list {
  overflow: visible;
}
.cardcarousel__carousel .slick-slide > div {
  width: 560rem;
}
@media (max-width: 991.98px) {
  .cardcarousel__carousel .slick-slide > div {
    width: auto;
  }
}
.cardcarousel__carousel__item {
  padding-right: 18rem;
}
.cardcarousel__carousel__item__img {
  width: auto;
  height: 337rem;
  border-radius: 10rem;
}
@media (max-width: 991.98px) {
  .cardcarousel__carousel__item__img {
    width: 100%;
    height: auto;
  }
}
.cardcarousel__carousel__item__content {
  min-height: 265rem;
  padding: 60rem 40rem 30rem 20rem;
  background-position: center;
  background-size: cover;
  margin-top: 17rem;
  border-radius: 10rem;
}
@media (max-width: 991.98px) {
  .cardcarousel__carousel__item__content {
    padding: 20rem 20rem;
  }
}
.cardcarousel__carousel__item__content h2 {
  font-family: "GEELY";
  font-size: 16rem;
  letter-spacing: 0.03em;
  line-height: 25rem;
  min-height: 50rem;
  color: #000;
  border: 1px solid rgba(0, 0, 0, 0);
  text-transform: uppercase;
}
* + .cardcarousel__carousel__item__content__text {
  margin-top: 17rem;
}
.cardcarousel__carousel__item__content__text {
  font-size: 14rem;
  letter-spacing: 0.03em;
  line-height: 22rem;
  text-align: left;
  color: #000;
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Custom by project
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.buttonsatimg {
  position: relative;
}
.buttonsatimg__img {
  width: 100%;
  height: 968rem;
  height: auto;
  object-fit: cover;
}
@media (max-width: 575.98px) {
  .buttonsatimg__img {
    height: 663rem;
    display: none;
  }
}
.buttonsatimg__img--mobile {
  display: none;
}
@media (max-width: 575.98px) {
  .buttonsatimg__img--mobile {
    display: block;
  }
}
@media (max-width: 991.98px) {
  .buttonsatimg__img--mobile--short {
    height: 313rem;
  }
}
.buttonsatimg__buttons {
  position: absolute;
  bottom: 117rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20rem;
}
@media (max-width: 991.98px) {
  .buttonsatimg__buttons {
    flex-direction: column;
    bottom: 61rem;
    width: 100%;
    padding: 0rem 27rem;
  }
  .buttonsatimg__buttons .button {
    width: 100%;
  }
  .buttonsatimg__buttons--short {
    bottom: 31rem;
  }
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Custom by project
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
@media (min-width: 992px) {
  .gradientpoints + .bigandsmallimg {
    padding-top: 60rem;
  }
}

.bigandsmallimg {
  position: relative;
  padding: 123rem 129rem 90rem 129rem;
}
@media (max-width: 991.98px) {
  .bigandsmallimg {
    padding: 81rem 27rem 39rem 27rem;
  }
}
@media (max-width: 991.98px) {
  .bigandsmallimg--mobilesmalltopspace {
    padding-top: 20rem;
  }
}
.bigandsmallimg__title {
  font-size: 42rem;
  line-height: 54rem;
  letter-spacing: 0.03em;
  color: #000000;
  font-weight: 700;
  font-family: "GEELY", Arial, Helvetica, sans-serif;
}
@media (max-width: 991.98px) {
  .bigandsmallimg__title {
    font-size: 18rem;
    line-height: 29rem;
    letter-spacing: 0.02em;
  }
}
* + .bigandsmallimg__box {
  margin-top: 15rem;
}
@media (max-width: 991.98px) {
  * + .bigandsmallimg__box {
    margin-top: 39rem;
  }
}
.bigandsmallimg__box {
  display: flex;
  gap: 18rem;
}
@media (max-width: 991.98px) {
  .bigandsmallimg__box {
    flex-direction: column;
  }
}
.bigandsmallimg__box__left {
  width: 682rem;
}
@media (max-width: 991.98px) {
  .bigandsmallimg__box__left {
    width: 100%;
  }
}
.bigandsmallimg__box__left__img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8rem;
}
* + .bigandsmallimg__box__left__text {
  margin-top: 49rem;
}
@media (max-width: 991.98px) {
  * + .bigandsmallimg__box__left__text {
    margin-top: 0rem;
  }
}
.bigandsmallimg__box__left__text {
  font-size: 16rem;
  line-height: 24rem;
}
@media (max-width: 991.98px) {
  .bigandsmallimg__box__left__text {
    display: none;
    font-size: 12rem;
    line-height: 18rem;
  }
}
.bigandsmallimg__box__left__text--mobile {
  display: none;
}
@media (max-width: 991.98px) {
  .bigandsmallimg__box__left__text--mobile {
    display: block;
  }
}
.bigandsmallimg__box__right {
  width: 962rem;
}
@media (max-width: 991.98px) {
  .bigandsmallimg__box__right {
    width: 100%;
  }
}
.bigandsmallimg__box__right__img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8rem;
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Custom by project
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.baseslider {
  position: relative;
  padding: 108rem 0rem 119rem 129rem;
}
@media (max-width: 991.98px) {
  .baseslider {
    padding: 81rem 0rem 60rem 27rem;
  }
}
@media (max-width: 991.98px) {
  .baseslider--mobilesmalltopspace {
    padding-top: 20rem;
  }
  .baseslider--mobilesmalltopspace .slidernav {
    top: 18rem;
  }
}
.baseslider__title {
  font-family: "GEELY", Arial, Helvetica, sans-serif;
  font-size: 42rem;
  line-height: 54rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #000000;
  padding-right: 129rem;
}
@media (max-width: 991.98px) {
  .baseslider__title {
    padding-right: 27rem;
    width: 262rem;
    font-size: 18rem;
    line-height: 25rem;
    letter-spacing: 0.02em;
  }
}
* + .baseslider__excerpt {
  margin-top: 13rem;
}
.baseslider__excerpt {
  padding-right: 129rem;
  font-size: 16rem;
  line-height: 24rem;
  letter-spacing: 0.03em;
  color: #000000;
}
@media (max-width: 991.98px) {
  .baseslider__excerpt {
    padding-right: 27rem;
    font-size: 12rem;
    line-height: 18rem;
    letter-spacing: 0em;
  }
}
* + .baseslider__slider {
  margin-top: 31rem;
}
@media (max-width: 991.98px) {
  * + .baseslider__slider {
    margin-top: 24rem;
  }
}
.baseslider__slider:not(:has(.slick-list)) {
  display: flex;
  gap: 18rem;
}
.baseslider__slider .slick-track {
  display: flex;
  gap: 18rem;
}
@media (max-width: 991.98px) {
  .baseslider__slider .slick-track {
    gap: 0rem;
  }
}
@media (max-width: 991.98px) {
  .baseslider__slider .slick-slide {
    height: auto;
  }
}
.baseslider__slider .slick-slide > div {
  width: auto;
}
@media (max-width: 991.98px) {
  .baseslider__slider .slick-slide > div {
    margin-right: 18rem;
    height: 100%;
  }
}
.baseslider__slider__item {
  width: 962rem !important;
  display: inline-flex !important;
  flex-direction: column;
  overflow: hidden;
}
.baseslider__slider__item--wide, .baseslider__slider__item--widelow {
  width: 1382rem !important;
}
.baseslider__slider__item--narrow {
  width: 682rem !important;
}
@media (max-width: 991.98px) {
  .baseslider__slider__item {
    min-width: auto;
    width: 100% !important;
    max-width: 100%;
    height: 100%;
    display: flex !important;
  }
}
.baseslider__slider__item__img {
  width: auto;
  height: 500rem;
  object-fit: cover;
  border-radius: 10rem;
  transition: filter 0.2s linear;
}
.baseslider__slider__item__img--highter {
  height: 574rem;
}
.baseslider__slider__item__img--wide {
  height: 690rem;
}
.baseslider__slider__item__img--widelow {
  height: 579rem;
}
@media (max-width: 991.98px) {
  .baseslider__slider__item__img {
    width: 322rem !important;
    height: 250rem;
  }
}
.baseslider__slider__item__title, .baseslider__slider__item__excerpt {
  display: table-caption;
  max-width: 100%;
  min-width: 100%;
  width: min-content;
}
* + .baseslider__slider__item__title {
  margin-top: 37rem;
}
@media (max-width: 991.98px) {
  * + .baseslider__slider__item__title {
    margin-top: 17rem;
  }
}
.baseslider__slider__item__title {
  font-family: "GEELY", Arial, Helvetica, sans-serif;
  font-size: 16rem;
  line-height: 22rem;
  letter-spacing: 0.02em;
  color: #000000;
  font-weight: 700;
}
@media (max-width: 991.98px) {
  .baseslider__slider__item__title {
    font-size: 16rem;
    line-height: 23rem;
    letter-spacing: 0em;
  }
}
* + .baseslider__slider__item__excerpt {
  margin-top: 9rem;
}
.baseslider__slider__item__excerpt {
  font-size: 14rem;
  line-height: 22rem;
  letter-spacing: 0.03em;
  color: #000000;
}
@media (max-width: 991.98px) {
  .baseslider__slider__item__excerpt {
    font-size: 12rem;
    line-height: 18rem;
    letter-spacing: 0em;
  }
}
* + .baseslider__slider__item__button {
  padding-top: 25rem;
  margin-top: auto;
}
.baseslider__slider__item__button {
  display: none;
}
@media (max-width: 991.98px) {
  .baseslider__slider__item__button {
    display: block;
  }
  .baseslider__slider__item__button .button {
    width: 100%;
  }
}
.baseslider__slider__item:hover .baseslider__slider__item__img {
  filter: brightness(1.1);
}