/*!**********************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./assets/scss/theme/templates/page-test-ride.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
 */
.testride {
  position: relative;
  display: flex;
}
.testride__map {
  width: 50%;
  height: 100vh;
}
@media (max-width: 991.98px) {
  .testride__map {
    display: none;
  }
}
.testride__map .gmnoprint.gm-bundled-control.gm-bundled-control-on-bottom {
  bottom: 100rem !important;
  right: 113rem !important;
}
@media (max-width: 991.98px) {
  .testride__map .gmnoprint.gm-bundled-control.gm-bundled-control-on-bottom {
    bottom: 270rem !important;
    right: 60rem !important;
  }
}
@media (max-width: 575.98px) {
  .testride__map .gmnoprint.gm-bundled-control.gm-bundled-control-on-bottom {
    bottom: 251rem !important;
    right: 50rem !important;
  }
}
.testride__contact {
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  padding: 139rem 29rem 121.5rem 129rem;
  counter-reset: stepNo;
  position: relative;
}
@media (max-width: 991.98px) {
  .testride__contact {
    padding: 84rem 27rem 72rem 27rem;
    height: auto;
  }
}
.testride__contact .os-scrollbar.os-scrollbar-vertical {
  top: 11%;
}
.testride__contact__container {
  width: 951rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
@media (max-width: 991.98px) {
  .testride__contact__container {
    width: 100%;
  }
}
.testride__contact__title {
  font-size: 34rem;
  line-height: 54rem;
  letter-spacing: 0.01em;
  font-weight: 700;
  color: #000000;
  font-family: "GEELY", Arial, Helvetica, sans-serif;
}
@media (max-width: 991.98px) {
  .testride__contact__title {
    font-size: 18rem;
    line-height: 28rem;
    letter-spacing: 0.02em;
  }
}
* + .testride__contact__excerpt {
  margin-top: 22rem;
}
.testride__contact__excerpt {
  font-size: 16rem;
  line-height: 24rem;
  letter-spacing: 0.03em;
  color: #000000;
}
@media (max-width: 991.98px) {
  .testride__contact__excerpt {
    display: none;
  }
}
* + .testride__contact__steps {
  margin-top: 55rem;
}
@media (max-width: 991.98px) {
  * + .testride__contact__steps {
    margin-top: 22rem;
  }
}
.testride__contact__steps {
  padding-right: 83rem;
}
@media (max-width: 991.98px) {
  .testride__contact__steps {
    padding-right: 0rem;
  }
}
* + .testride__contact__step {
  margin-top: 55rem;
}
@media (max-width: 991.98px) {
  * + .testride__contact__step {
    margin-top: 35rem;
  }
}
.testride__contact__step {
  position: relative;
  counter-increment: stepNo;
}
@media (max-width: 991.98px) {
  .testride__contact__step--mobreverse {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}
.testride__contact__step__title {
  font-size: 14rem;
  line-height: 24rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #000000;
  text-transform: uppercase;
}
@media (max-width: 991.98px) {
  .testride__contact__step__title {
    font-size: 16rem;
    line-height: 23rem;
    font-weight: 700;
    letter-spacing: 0em;
    font-family: "GEELY", Arial, Helvetica, sans-serif;
    text-transform: none;
  }
}
.testride__contact__step__title::before {
  content: counter(stepNo) ". ";
  display: inline-block;
}
* + .testride__contact__step__excerpt {
  margin-top: 17.5rem;
}
@media (max-width: 991.98px) {
  * + .testride__contact__step__excerpt {
    margin-top: 26.5rem;
  }
}
.testride__contact__step__excerpt {
  font-size: 12rem;
  line-height: 18rem;
  letter-spacing: 0.03em;
  color: #000000;
}
* + .testride__contact__step__modelsnav {
  margin-top: 26.5rem;
}
.testride__contact__step__modelsnav {
  display: none;
}
@media (max-width: 991.98px) {
  .testride__contact__step__modelsnav {
    display: flex;
  }
}
.testride__contact__step__modelsnav__item {
  width: 50%;
  display: flex;
  align-items: center;
  gap: 10rem;
  font-size: 12rem;
  line-height: 24rem;
  letter-spacing: 0.01em;
  color: #000000;
  font-weight: 800;
}
.testride__contact__step__modelsnav__item::before {
  content: "";
  display: block;
  width: 20rem;
  height: 20rem;
  border-radius: 9999px;
  border: 1px solid #E3E0DB;
}
.testride__contact__step__modelsnav__item::after {
  content: "";
  width: 24rem;
  height: 24rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("../../../images/global/check_slim.svg");
  display: none;
}
.testride__contact__step__modelsnav__item > div {
  order: 1;
}
.testride__contact__step__modelsnav__item.active::before {
  display: none;
}
.testride__contact__step__modelsnav__item.active::after {
  display: block;
}
* + .testride__contact__step__models {
  margin-top: 20rem;
}
@media (max-width: 991.98px) {
  * + .testride__contact__step__models {
    margin-top: 14.5rem;
  }
}
.testride__contact__step__models {
  display: flex;
  gap: 10rem;
}
.testride__contact__step__models__item {
  position: relative;
  width: calc(50% - 5rem);
  display: flex;
  flex-direction: column;
  gap: 10rem;
  border-radius: 10rem;
  border: 1px solid #F5F4F4;
  padding: 9rem 0rem 18rem 0rem;
}
.testride__contact__step__models__item::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  border: 2px solid #3a7ff8;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity 0.2s linear;
  opacity: 0;
}
.testride__contact__step__models__item::after {
  content: "";
  display: block;
  width: 24rem;
  height: 24rem;
  position: absolute;
  top: -7rem;
  right: -7rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("../../../images/global/check_slim.svg");
  filter: drop-shadow(4rem 10rem 20rem rgba(62, 62, 62, 0.13));
  transition: opacity 0.2s linear;
  opacity: 0;
}
.testride__contact__step__models__item.error::before {
  opacity: 1;
  border-color: #F20E0E;
}
.testride__contact__step__models__item__img {
  width: 103.8%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: contain;
}
@media (max-width: 991.98px) {
  .testride__contact__step__models__item__img {
    height: 106.27%;
  }
}
.testride__contact__step__models__item__img__container {
  position: relative;
  width: 100%;
  height: 237rem;
}
@media (max-width: 991.98px) {
  .testride__contact__step__models__item__img__container {
    height: 223rem;
  }
}
.testride__contact__step__models__item__title {
  font-size: 14rem;
  line-height: 24rem;
  letter-spacing: 0.03em;
  font-weight: 800;
  color: #000000;
  text-align: center;
  transition: color 0.2s linear;
}
@media (max-width: 991.98px) {
  .testride__contact__step__models__item__title {
    display: none;
  }
}
.testride__contact__step__models__item.active {
  box-shadow: 2rem 7rem 20rem rgba(149, 149, 149, 0.1);
  border-color: transparent;
}
.testride__contact__step__models__item.active::before {
  opacity: 1;
  border-color: #3a7ff8;
}
.testride__contact__step__models__item.active::after {
  opacity: 1;
}
.testride__contact__step__models__item.active .testride__contact__step__models__item__title {
  color: #3a7ff8;
}
@media (max-width: 991.98px) {
  .testride__contact__step__models__item {
    box-shadow: 2rem 7rem 20rem rgba(149, 149, 149, 0.1);
    border-color: transparent;
  }
  .testride__contact__step__models__item::before {
    opacity: 1;
    border-color: #3a7ff8;
  }
  .testride__contact__step__models__item::after {
    opacity: 1;
  }
  .testride__contact__step__models__item .testride__contact__step__models__item__title {
    color: #3a7ff8;
  }
  .testride__contact__step__models__item {
    width: 100%;
    padding: 0rem;
  }
}
* + .testride__contact__step__buttons {
  margin-top: 23.5rem;
}
.testride__contact__step__buttons {
  display: flex;
  gap: 18rem;
}
@media (max-width: 991.98px) {
  .testride__contact__step__buttons {
    display: none;
  }
}
.testride__contact__step__buttons__item {
  position: relative;
  width: calc(50% - 9rem);
}
@media (max-width: 991.98px) {
  .testride__contact__step__buttons__item--mobile {
    width: calc(100% - 32rem);
    position: absolute;
    top: 16rem;
    left: 50%;
    transform: translateX(-50%);
  }
}
.testride__contact__step__buttons__item .input {
  width: 100%;
}
@media (max-width: 991.98px) {
  .testride__contact__step__buttons__item .input {
    border-color: transparent;
    background-color: #ffffff;
    box-shadow: 20rem 20rem 34rem rgba(62, 62, 62, 0.16);
    letter-spacing: 0em;
    line-height: 18rem;
  }
}
@media (max-width: 991.98px) {
  .testride__contact__step__buttons__item .input::placeholder {
    color: #000000;
    letter-spacing: 0em;
    line-height: 18rem;
  }
}
.testride__contact__step__buttons__item .button-new {
  width: 100%;
}
* + .testride__contact__step__fields {
  margin-top: 21.2rem;
}
@media (min-width: 992px) {
  .testride__contact__step .footer__contact__form__add {
    margin-top: 31.5rem;
  }
}
.testride__contact__step .input__container {
  display: block;
}
.testride__contact__step * + .input__container {
  margin-top: 15rem;
}
@media (max-width: 991.98px) {
  .testride__contact__step * + .input__container {
    margin-top: 10.2rem;
  }
}
.testride__contact__step .input {
  padding-left: 31.5rem;
  font-size: 12rem;
  line-height: 23rem;
  letter-spacing: 0.03em;
}
@media (max-width: 991.98px) {
  .testride__contact__step .input {
    padding: 12.5rem 31.5rem 12.5rem 15rem;
  }
}
.testride__contact__step .input::placeholder {
  font-size: 12rem;
  line-height: 23rem;
  letter-spacing: 0.03em;
}
@media (max-width: 991.98px) {
  .testride__contact__step .input::placeholder {
    color: #595A5A;
  }
}
* + .testride__contact__step__submit {
  margin-top: 34.2rem;
}
@media (max-width: 991.98px) {
  * + .testride__contact__step__submit {
    margin-top: 24rem;
  }
}
@media (max-width: 991.98px) {
  .testride__contact__step__submit .button-new {
    width: 100%;
  }
}
.testride__contact__step__map {
  width: 100%;
  height: 486rem;
  border-radius: 8rem;
}
* + .testride__contact__step__map__container {
  margin-top: 30rem;
}
.testride__contact__step__map__container {
  width: 100%;
  position: relative;
  display: none;
}
@media (max-width: 991.98px) {
  .testride__contact__step__map__container {
    display: block;
  }
}
.testride__contact__step__map__container * + .button-new {
  margin-top: 15rem;
}
.testride__contact__step__map__container .button-new {
  width: 100%;
}
@media (max-width: 991.98px) {
  .testride__contact__step__map__container--mob1 {
    order: 1;
  }
}
.testride__panels {
  position: absolute;
  top: 120rem;
  right: 27rem;
  display: flex;
  flex-direction: column;
  gap: 24rem;
}
@media (min-width: 992px) {
  .testride__panels--lifted {
    top: 71rem;
  }
}
.testride__panels__title {
  font-size: 24rem;
  line-height: 32rem;
  letter-spacing: 0.01em;
  font-weight: 700;
  color: #000000;
  font-family: "GEELY", Arial, Helvetica, sans-serif;
}
@media (max-width: 991.98px) {
  .testride__panels__title {
    font-size: 18rem;
    line-height: 28rem;
    letter-spacing: 0.02em;
  }
}