/*!**************************************************************************************************************************************************!*\
  !*** 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
 */
/**
 * 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
 */
.timeline {
  padding: 52.5rem 147rem 103.3rem 140rem;
}
@media (max-width: 991.98px) {
  .timeline {
    padding: 48rem 48rem 48rem 24rem;
  }
}
@media (max-width: 575.98px) {
  .timeline {
    padding: 24rem 24rem 24rem 12rem;
  }
}
* + .timeline__items {
  margin-top: 73.6rem;
}
@media (max-width: 991.98px) {
  * + .timeline__items {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  * + .timeline__items {
    margin-top: 24rem;
  }
}
.timeline__item {
  position: relative;
  margin-top: 19.4rem;
  padding-bottom: 27rem;
  display: flex;
  align-items: flex-start;
  gap: 9rem;
}
@media (max-width: 991.98px) {
  .timeline__item {
    flex-direction: column;
  }
}
.timeline__item::before {
  content: "";
  display: block;
  width: 1.2px;
  background-color: #2B2B2B;
  height: 100%;
  position: absolute;
  top: 0rem;
  bottom: 0rem;
  left: 16.175rem;
  transform: translateX(-50%);
}
.timeline__item:last-of-type {
  padding-bottom: 0rem;
}
.timeline__item:last-of-type::before {
  display: none;
}
.timeline__item__nav {
  position: relative;
  width: 200rem;
  flex-shrink: 0;
  padding-bottom: 16rem;
  display: flex;
  align-items: center;
  gap: 21.8rem;
  background-color: #ffffff;
}
@media (max-width: 991.98px) {
  .timeline__item__nav {
    width: auto;
  }
}
.timeline__item__nav__icon {
  width: 32.35rem;
  flex-shrink: 0;
}
.timeline__item__nav__name {
  font-size: calc(19rem * (var(--fontsize) / 100));
  line-height: 1.2;
  color: #2B2B2B;
  font-weight: 500;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
}
@media (max-width: 991.98px) {
  .timeline__item__box {
    padding-left: 55rem;
  }
}
* + .timeline__item__gallerytitle {
  margin-top: 52.8rem;
}
@media (max-width: 991.98px) {
  * + .timeline__item__gallerytitle {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  * + .timeline__item__gallerytitle {
    margin-top: 24rem;
  }
}
.timeline__item__gallerytitle {
  font-size: calc(28rem * (var(--fontsize) / 100));
  line-height: 1.5;
  font-style: italic;
  color: #2B2B2B;
}
* + .timeline__item__galerry {
  margin-top: 52.8rem;
}
@media (max-width: 991.98px) {
  * + .timeline__item__galerry {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  * + .timeline__item__galerry {
    margin-top: 24rem;
  }
}
.timeline__item__gallerytitle + .timeline__item__gallery {
  margin-top: 20rem;
}
@media (max-width: 575.98px) {
  .timeline__item__gallerytitle + .timeline__item__gallery {
    margin-top: 12rem;
  }
}
.timeline__item__gallery {
  position: relative;
  width: 1414rem;
}
@media (max-width: 991.98px) {
  .timeline__item__gallery {
    width: 884rem;
  }
}
@media (max-width: 575.98px) {
  .timeline__item__gallery {
    width: 484rem;
  }
}
.timeline__item__gallery .slick-list {
  margin-left: 0rem !important;
  margin-right: 0rem !important;
  padding-left: 0rem !important;
}
* + .timeline__button {
  margin-top: 83rem;
}
@media (max-width: 991.98px) {
  * + .timeline__button {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  * + .timeline__button {
    margin-top: 24rem;
  }
}
.timeline__button {
  display: flex;
  justify-content: center;
  position: relative;
}

/**
 * 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
 */
/**
 * 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
 */
.tabs {
  background-color: #F8F3ED;
  padding: 95rem 147rem 99rem 147rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 991.98px) {
  .tabs {
    padding: 48rem 48rem 48rem 24rem;
  }
}
@media (max-width: 575.98px) {
  .tabs {
    padding: 48rem 24rem 24rem 24rem;
  }
}
* + .tabs__nav {
  margin-top: 40rem;
}
@media (max-width: 575.98px) {
  * + .tabs__nav {
    margin-top: 24rem;
  }
}
.tabs__nav {
  display: flex;
  gap: 45rem;
}
* + .tabs__items {
  margin-top: 76.5rem;
}
@media (max-width: 991.98px) {
  * + .tabs__items {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  * + .tabs__items {
    margin-top: 24rem;
  }
}
.tabs__items {
  width: 100%;
}
* + .tabs__tab__button {
  margin-top: 86.8rem;
}
@media (max-width: 991.98px) {
  * + .tabs__tab__button {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  * + .tabs__tab__button {
    margin-top: 24rem;
  }
}
* + .tabs__tab__button--map {
  margin-top: 10rem;
}
.tabs__tab__button {
  display: flex;
  justify-content: center;
}
.tabs__row {
  width: 100%;
}
@media (max-width: 991.98px) {
  .tabs__row {
    gap: 24rem 0rem;
  }
}
.tabs__row.gutter-11-5 {
  gap: 25rem 0rem;
}
.tabs__row__el {
  width: 100%;
  display: block;
  padding: 412.8rem 0rem 63rem 0rem;
  font-size: calc(30rem * (var(--fontsize) / 100));
  color: #ffffff;
  font-family: "Cormorant Garamond", Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  text-align: center;
  transition: filter 0.2s linear;
}
.tabs__row__el--small {
  padding: 269.7rem 0rem 46.7rem 0rem;
  font-size: calc(22rem * (var(--fontsize) / 100));
}
.tabs__row__el:hover {
  filter: brightness(1.1);
}
.tabs__row__el::before {
  content: "";
  display: block;
  width: 100%;
  height: 76.24%;
  opacity: 0.65;
  background: linear-gradient(0deg, #000000 38%, rgba(0, 0, 0, 0) 50%);
  position: absolute;
  bottom: 0rem;
  left: 0rem;
  right: 0rem;
}
.tabs__row__el > div {
  position: relative;
}

/**
 * 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
 */
/**
 * 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
 */
.simplecontent {
  padding: 50rem 147rem 52.5rem 140rem;
}
@media (max-width: 991.98px) {
  .simplecontent {
    padding: 48rem 48rem 48rem 24rem;
  }
}
@media (max-width: 575.98px) {
  .simplecontent {
    padding: 24rem 24rem 24rem 12rem;
  }
}
.simplecontent ul ul {
  margin-top: 28.2rem;
}
@media (max-width: 575.98px) {
  .simplecontent ul ul {
    margin-top: 12rem;
  }
}
* + .simplecontent > ul {
  margin-top: 45rem;
}
@media (max-width: 575.98px) {
  * + .simplecontent > ul {
    margin-top: 24rem;
  }
}

/**
 * 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
 */
/**
 * 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
 */
.sectionbuttons {
  display: flex;
  justify-content: center;
  gap: 30.6rem;
  margin: 83.8rem 147rem 87.6rem 140rem;
  background-color: #ffffff;
}
.sectionbuttons--left {
  justify-content: flex-start;
}
.sectionbuttons--center {
  margin-right: 140rem;
  justify-content: center;
}
.sectionbuttons--right {
  justify-content: flex-end;
}
@media (max-width: 991.98px) {
  .sectionbuttons {
    margin: 48rem 48rem 48rem 24rem;
  }
}
@media (max-width: 575.98px) {
  .sectionbuttons {
    margin: 24rem 24rem 24rem 12rem;
    gap: 12rem;
    flex-direction: column;
  }
}
.sectionbuttons .button {
  margin-top: 0rem;
}

/**
 * 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
 */
/**
 * 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
 */
.reservation {
  margin: 67.8rem 147rem 146.1rem 140rem;
  padding: 74.9rem 105.9rem 97.6rem 104.7rem;
  background-color: #F8F3ED;
}
@media (max-width: 991.98px) {
  .reservation {
    margin: 48rem 48rem 48rem 24rem;
    padding: 24rem;
  }
}
@media (max-width: 575.98px) {
  .reservation {
    margin: 24rem 24rem 24rem 12rem;
    padding: 12rem;
  }
}
.reservation * + .wpcf7-field-group {
  margin-top: 80.4rem;
}
@media (max-width: 991.98px) {
  .reservation * + .wpcf7-field-group {
    margin-top: 48rem;
  }
}
.reservation .wpcf7-field-group:first-of-type {
  position: relative;
}
.reservation .wpcf7-field-group:first-of-type .reservation__participant__head__remove {
  display: none !important;
}
.reservation .wpcf7-field-group-add,
.reservation .wpcf7-field-group-remove {
  position: absolute;
  top: 0rem;
  left: 0rem;
  opacity: 0;
  width: 0rem;
  height: 0rem;
  -webkit-appearance: none;
  appearance: none;
}
.reservation__participant__head {
  display: flex;
  justify-content: space-between;
  font-size: calc(19rem * (var(--fontsize) / 100));
  line-height: 1.578;
  color: #2B2B2B;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
}
.reservation__participant__head__title {
  position: relative;
  font-weight: 700;
}
.reservation__participant__head__title__suffix {
  font-weight: 400;
}
.reservation__participant__head__title::before {
  content: "";
  display: block;
  width: 100%;
  height: 1.2px;
  background-color: #2B2B2B;
  position: absolute;
  bottom: -2.2rem;
  left: 0rem;
  right: 0rem;
  transform: translateY(100%);
}
.reservation__participant__head__remove {
  width: 1em;
  height: 1em;
  background-color: #FF7979;
  -webkit-mask: url("../images/global/x-strawberry-slim.svg") no-repeat center;
  mask: url("../images/global/x-strawberry-slim.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
* + .reservation__participant__group {
  margin-top: 34.9rem;
}
@media (max-width: 991.98px) {
  * + .reservation__participant__group {
    margin-top: 24rem;
  }
}
.reservation__participant__group {
  position: relative;
}
.reservation__participant__group__title {
  font-size: calc(19rem * (var(--fontsize) / 100));
  line-height: 1.578;
  font-weight: 500;
  color: #2B2B2B;
}
@media (max-width: 575.98px) {
  .reservation__participant__group__title {
    font-size: 24rem;
  }
}
* + .reservation__participant__group__fields {
  margin-top: 30rem;
}
@media (max-width: 991.98px) {
  * + .reservation__participant__group__fields {
    margin-top: 24rem;
  }
}
@media (max-width: 575.98px) {
  * + .reservation__participant__group__fields {
    margin-top: 12rem;
  }
}
.reservation__participant__group__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 24rem;
}
.reservation__participant__group__field {
  position: relative;
  flex-shrink: 0;
}
.reservation__participant__group__field--firstname, .reservation__participant__group__field--surname, .reservation__participant__group__field--email, .reservation__participant__group__field--address, .reservation__participant__group__field--spacerbig {
  width: 500.59rem;
}
.reservation__participant__group__field--birth, .reservation__participant__group__field--country, .reservation__participant__group__field--passport, .reservation__participant__group__field--passport-expiry, .reservation__participant__group__field--phone, .reservation__participant__group__field--spacer {
  width: 370.59rem;
}
.reservation__participant__group__field--gender, .reservation__participant__group__field--houseno, .reservation__participant__group__field--flatno, .reservation__participant__group__field--postcode, .reservation__participant__group__field--city, .reservation__participant__group__field--spacersmall {
  width: 237.51rem;
}
@media (max-width: 991.98px) {
  .reservation__participant__group__field {
    width: 400rem;
  }
  .reservation__participant__group__field--spacerbig, .reservation__participant__group__field--spacer, .reservation__participant__group__field--spacersmall {
    display: none;
  }
}
@media (max-width: 575.98px) {
  .reservation__participant__group__field {
    width: 100%;
  }
}
.reservation__participant__group__field__label {
  font-size: calc(16rem * (var(--fontsize) / 100));
  line-height: 1.19;
  color: #2B2B2B;
  font-weight: 500;
  margin-bottom: 10.9rem;
}
@media (max-width: 575.98px) {
  .reservation__participant__group__field__label {
    margin-bottom: 6rem;
    font-size: calc(19rem * (var(--fontsize) / 100));
  }
}
.reservation__participant__group__field .wpcf7-form-control-wrap {
  width: 100%;
}
.reservation__participant__group__field input {
  width: 100%;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  box-shadow: 0rem 3rem 6rem rgba(0, 0, 0, 0.16);
  font-size: calc(16rem * (var(--fontsize) / 100));
  line-height: 1.19;
  color: #2B2B2B;
  padding: 17rem 24.6rem;
  background-color: #ffffff;
  border-radius: 10rem;
}
@media (max-width: 575.98px) {
  .reservation__participant__group__field input {
    font-size: calc(19rem * (var(--fontsize) / 100));
    padding: 11rem 12rem;
  }
}
.reservation__participant__group__field input::placeholder {
  font-size: calc(16rem * (var(--fontsize) / 100));
  line-height: 1.19;
  color: rgba(43, 43, 43, 0.3);
}
.reservation__participant__group__field__calendar {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28rem 37.2rem 35.9rem 42.8rem;
  position: absolute;
  box-shadow: 0rem 30rem 40rem rgba(87, 87, 87, 0.1);
  bottom: -16.8rem;
  left: 50%;
  transform: translate(-50%, 100%);
  background-color: #ffffff;
}
* + .reservation__participant__agreements {
  margin-top: 42rem;
}
@media (max-width: 991.98px) {
  * + .reservation__participant__agreements {
    margin-top: 24rem;
  }
}
.reservation__participant__agreements__add {
  font-size: calc(14rem * (var(--fontsize) / 100));
  line-height: 1.5;
  color: #2B2B2B;
}
* + .reservation__participant__agreements__items {
  margin-top: 17.3rem;
}
@media (max-width: 575.98px) {
  * + .reservation__participant__agreements__items {
    margin-top: 12rem;
  }
}
.reservation__participant__agreements__item {
  display: flex;
  align-items: center;
  gap: 16.9rem;
  position: relative;
  cursor: pointer;
}
.reservation__participant__agreements__item .wpcf7-form-control-wrap {
  opacity: 0;
  position: absolute;
  width: 0rem;
  height: 0rem;
  visibility: hidden;
  -webkit-visibility: hidden;
}
.reservation__participant__agreements__item__checkbox {
  position: relative;
  width: 23.51rem;
  height: 23.51rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1.2px solid #2B2B2B;
  flex-shrink: 0;
}
.reservation__participant__agreements__item__checkbox svg {
  stroke: #2B2B2B;
  width: 80%;
  height: 80%;
  opacity: 0;
  transition: opacity 0.2s linear;
}
.reservation__participant__agreements__item__text {
  font-size: calc(14rem * (var(--fontsize) / 100));
  line-height: 1.5;
}
* + .reservation__participant__buttons {
  margin-top: 31.1rem;
}
@media (max-width: 991.98px) {
  * + .reservation__participant__buttons {
    margin-top: 24rem;
  }
}
.reservation__participant__buttons {
  display: flex;
  justify-content: center;
  gap: 20.6rem;
}
.reservation__participant__buttons .wpcf7-spinner {
  display: none;
}

.reservation__participant__agreements__item:has(input:checked) .reservation__participant__agreements__item__checkbox svg {
  opacity: 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
 */
/**
 * 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
 */
.qoutesection {
  position: relative;
  padding: 151.4rem 206.1rem 105.1rem 332.4rem;
}
@media (max-width: 991.98px) {
  .qoutesection {
    padding: 48rem 48rem 48rem 204rem;
  }
}
@media (max-width: 575.98px) {
  .qoutesection {
    padding: 24rem 24rem 24rem 102rem;
  }
}
.qoutesection__content {
  position: relative;
}

/**
 * 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
 */
/**
 * 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
 */
.postintro {
  padding: 31.1rem 147rem 69rem 140rem;
}
@media (max-width: 991.98px) {
  .postintro {
    padding: 48rem 48rem 48rem 24rem;
  }
}
@media (max-width: 575.98px) {
  .postintro {
    padding: 24rem 24rem 24rem 12rem;
  }
}
.postintro__box {
  display: flex;
  gap: 121.5rem;
}
@media (max-width: 991.98px) {
  .postintro__box {
    flex-direction: column;
    gap: 48rem;
  }
}
.postintro__content {
  width: 698.5rem;
}
@media (max-width: 991.98px) {
  .postintro__content {
    width: auto;
  }
}
* + .postintro__content__excerpt {
  margin-top: 5rem;
}
* + .postintro__content__text {
  margin-top: 43.3rem;
}
@media (max-width: 991.98px) {
  * + .postintro__content__text {
    margin-top: 24rem;
  }
}
@media (max-width: 575.98px) {
  * + .postintro__content__text {
    margin-top: 12rem;
  }
}
* + .postintro__content__text--close {
  margin-top: 0rem;
}
* + .postintro__content__button {
  margin-top: 63rem;
}
@media (max-width: 991.98px) {
  * + .postintro__content__button {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  * + .postintro__content__button {
    margin-top: 24rem;
  }
}
.postintro__content__button {
  display: flex;
  position: relative;
}
@media (max-width: 991.98px) {
  .postintro__content__button {
    justify-content: center;
  }
}
* + .postintro__content__country {
  margin-top: 10rem;
}
.postintro__infos__top {
  display: flex;
  align-items: center;
  gap: 33.5rem;
}
@media (max-width: 575.98px) {
  .postintro__infos__top {
    gap: 12rem;
  }
}
.postintro__infos__price {
  font-size: calc(19rem * (var(--fontsize) / 100));
  font-style: italic;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  line-height: 1.26;
  font-weight: 700;
  color: #CE7F00;
}
* + .postintro__infos__price--apartament {
  margin-left: 35rem;
}
@media (max-width: 575.98px) {
  * + .postintro__infos__price--apartament {
    margin-left: 0rem;
  }
}
* + .postintro__infos__list {
  margin-top: 35rem;
}
@media (max-width: 575.98px) {
  * + .postintro__infos__list {
    margin-top: 24rem;
  }
}
.postintro__infos__list {
  display: flex;
  gap: 17rem;
  flex-wrap: wrap;
  list-style-type: none;
  width: 685rem;
}
@media (max-width: 575.98px) {
  .postintro__infos__list {
    flex-direction: column;
    width: auto;
  }
}
.postintro__infos__list__left, .postintro__infos__list__right {
  width: 334rem;
  flex-shrink: 0;
}
.postintro__infos__list__left--apartament, .postintro__infos__list__right--apartament {
  font-size: calc(19rem * (var(--fontsize) / 100));
  line-height: 1.58;
}
.postintro__infos__list__left--apartament {
  width: 261rem;
}
@media (max-width: 575.98px) {
  .postintro__infos__list__left {
    width: auto;
  }
}
.postintro__infos__list__right--apartament {
  width: 357.5rem;
}
@media (max-width: 575.98px) {
  .postintro__infos__list__right {
    width: auto;
  }
}
* + .postintro__infos__list__item {
  margin-top: 24.6rem;
}
@media (max-width: 575.98px) {
  * + .postintro__infos__list__item {
    margin-top: 12rem;
  }
}
.postintro__infos__list__item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 8.7rem;
  font-size: calc(19rem * (var(--fontsize) / 100));
  line-height: 1.579;
  color: #2B2B2B;
}
.postintro__infos__list__item__icon {
  width: 28.52rem;
  height: auto;
  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
 */
/**
 * 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
 */
.otheroffers {
  padding: 47rem 147rem 50rem 140rem;
}
@media (max-width: 991.98px) {
  .otheroffers {
    padding: 48rem 48rem 48rem 24rem;
  }
}
@media (max-width: 575.98px) {
  .otheroffers {
    padding: 24rem 24rem 24rem 12rem;
  }
}
* + .otheroffers__offers {
  margin-top: 45rem;
}
@media (max-width: 575.98px) {
  * + .otheroffers__offers {
    margin-top: 24rem;
  }
}
* + .otheroffers__offers__item {
  margin-top: 20.4rem;
}
.otheroffers__offers__item {
  display: flex;
  width: 1213.73rem;
  color: #2B2B2B;
}
@media (max-width: 991.98px) {
  .otheroffers__offers__item {
    width: auto;
  }
}
@media (max-width: 575.98px) {
  .otheroffers__offers__item {
    flex-direction: column;
  }
}
.otheroffers__offers__item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0rem;
  right: 0rem;
  bottom: 0rem;
  left: 0rem;
}
@media (max-width: 575.98px) {
  .otheroffers__offers__item__img {
    height: auto;
    max-height: 200rem;
    position: relative;
    top: unset;
    right: unset;
    bottom: unset;
    left: unset;
  }
}
.otheroffers__offers__item__img__container {
  position: relative;
  width: 382.5rem;
  flex-shrink: 0;
}
@media (max-width: 575.98px) {
  .otheroffers__offers__item__img__container {
    width: 100%;
    height: auto;
  }
}
.otheroffers__offers__item__box {
  flex-grow: 1;
  padding: 22.7rem 27.3rem 23.5rem 39.2rem;
  display: flex;
  justify-content: space-between;
  gap: 12rem;
  border: 1px solid #2B2B2B;
  border-left: none;
}
@media (max-width: 575.98px) {
  .otheroffers__offers__item__box {
    border: 1px solid #2B2B2B;
    border-top: none;
  }
}
.otheroffers__offers__item__box__right {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
}
* + .otheroffers__offers__item__date {
  margin-top: 21.4rem;
}
@media (max-width: 575.98px) {
  * + .otheroffers__offers__item__date {
    margin-top: 12rem;
  }
}
.otheroffers__offers__item__date {
  display: flex;
  align-items: center;
  gap: 10rem;
}
* + .otheroffers__offers__item__price {
  margin-top: 19.4rem;
}
@media (max-width: 575.98px) {
  * + .otheroffers__offers__item__price {
    margin-top: 12rem;
  }
}
.otheroffers__offers__item__price {
  font-size: calc(19rem * (var(--fontsize) / 100));
  line-height: 1.26;
  color: #CE7F00;
  font-weight: 700;
  font-style: italic;
}
.otheroffers__offers__item__caption {
  font-size: calc(19rem * (var(--fontsize) / 100));
  line-height: 1.59;
  font-weight: 700;
  color: #CE7F00;
  text-align: center;
}
.otheroffers__offers__item__caption--red {
  color: #EA0000;
}
* + .otheroffers__offers__item__button {
  padding-top: 29.3rem;
}
@media (max-width: 575.98px) {
  * + .otheroffers__offers__item__button {
    padding-top: 12rem;
  }
}
.otheroffers__offers__item__button {
  margin-top: auto;
  position: relative;
  display: flex;
}

/**
 * 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
 */
/**
 * 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
 */
.opinions {
  position: relative;
  padding: 59.3rem 147rem 75rem 140rem;
  background-color: #F8F3ED;
}
@media (max-width: 575.98px) {
  .opinions {
    padding: 24rem 24rem 24rem 12rem;
  }
}
.opinions__icon {
  width: 89.9rem;
  height: 89.8rem;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
}
* + .opinions__content {
  margin-top: 11.9rem;
}
.opinions__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
* + .opinions__slider {
  margin-top: 69.3rem;
}
@media (max-width: 991.98px) {
  * + .opinions__slider {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  * + .opinions__slider {
    margin-top: 24rem;
  }
}
.opinions__slider {
  margin-right: -147rem;
}
@media (max-width: 575.98px) {
  .opinions__slider {
    margin-right: 0rem;
  }
}
.opinions__slider .slick-list {
  padding-left: 143rem;
  margin-left: -143rem;
}
@media (max-width: 575.98px) {
  .opinions__slider .slick-list {
    padding-left: 0rem;
    margin-left: 0rem;
  }
}
.opinions__slider .slick-track {
  display: flex !important;
  padding-bottom: 73.1rem;
}
@media (max-width: 991.98px) {
  .opinions__slider .slick-track {
    padding-bottom: 48rem;
  }
}
@media (max-width: 575.98px) {
  .opinions__slider .slick-track {
    padding-bottom: 24rem;
  }
}
.opinions__slider .slick-slide {
  height: inherit !important;
  margin-right: 77rem;
}
@media (max-width: 575.98px) {
  .opinions__slider .slick-slide {
    margin-right: 24rem;
  }
}
.opinions__slider .slick-slide > div {
  height: 100%;
}
.opinions__slide {
  width: 613rem !important;
  height: 100%;
  padding: 52.2rem 31rem 35rem 70rem;
  box-shadow: 0rem 30rem 40rem rgba(87, 87, 87, 0.1);
  background-color: #FDF9F4;
  display: flex !important;
  flex-direction: column;
}
@media (max-width: 575.98px) {
  .opinions__slide {
    box-shadow: 0rem 10rem 20rem rgba(87, 87, 87, 0.1);
    width: 400rem !important;
    padding: 24rem 24rem 48rem 24rem;
  }
}
.opinions__slide__stars {
  display: flex;
  align-items: center;
  gap: 4rem;
}
.opinions__slide__star {
  width: 27.4rem;
  height: 26.1rem;
  object-fit: contain;
}
* + .opinions__slide__text {
  margin-top: 23.9rem;
}
@media (max-width: 575.98px) {
  * + .opinions__slide__text {
    margin-top: 12rem;
  }
}
.opinions__slide__text {
  font-size: calc(16rem * (var(--fontsize) / 100));
  line-height: 1.625;
  color: #2B2B2B;
}
* + .opinions__slide__bottom {
  padding-top: 43rem;
  margin-top: auto;
}
@media (max-width: 575.98px) {
  * + .opinions__slide__bottom {
    padding-top: 24rem;
  }
}
.opinions__slide__author {
  font-size: calc(18rem * (var(--fontsize) / 100));
  line-height: 1.5;
  text-shadow: 0rem 1rem 1rem rgba(0, 0, 0, 0.08);
  font-style: italic;
  color: #CE7F00;
  font-weight: 700;
}
.opinions__slide__date {
  font-size: calc(18rem * (var(--fontsize) / 100));
  line-height: 1.5;
  text-shadow: 0rem 1rem 1rem rgba(0, 0, 0, 0.08);
  font-style: italic;
  color: #2B2B2B;
}
.opinions__button {
  position: relative;
  display: flex;
  justify-content: center;
}
.opinions__nav {
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 71rem;
  left: 134rem;
  right: 134rem;
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 575.98px) {
  .opinions__nav {
    bottom: 20rem;
    left: 24rem;
    right: 24rem;
  }
}

/**
 * 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
 */
/**
 * 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
 */
.offerslider {
  position: relative;
}
* + .offerslider__button {
  margin-top: 86.8rem;
}
@media (max-width: 991.98px) {
  * + .offerslider__button {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  * + .offerslider__button {
    margin-top: 24rem;
  }
}
.offerslider .slick-list {
  margin-left: -420rem;
  margin-right: -147rem;
}
@media (max-width: 575.98px) {
  .offerslider .slick-list {
    margin-left: 0rem;
    margin-right: 0rem;
  }
}
.offerslider:not(.offerslider--infinity) .slick-list {
  margin-left: -300rem;
  padding-left: 300rem;
}
@media (max-width: 991.98px) {
  .offerslider:not(.offerslider--infinity) .slick-list {
    margin-left: 0rem;
    padding-left: 0rem;
  }
}
@media (max-width: 575.98px) {
  .offerslider .slick-list {
    padding-left: 1rem;
  }
}
.offerslider .slick-track {
  display: flex;
  height: 100%;
}
.offerslider .slick-slide {
  height: auto;
}
.offerslider .slick-slide {
  margin: 0 17.25rem;
  height: auto;
}
.offerslider .slick-slide > div {
  height: 100%;
}
.offerslider .slick-slide > div > * {
  height: 100%;
}
.offerslider--full .slick-list {
  margin-left: 0rem;
  margin-right: 0rem;
}
.offerslider__button {
  display: flex;
  justify-content: center;
}
.offerslider__button--left {
  justify-content: flex-start;
}
.offerslider__nav {
  width: 100%;
  position: absolute;
  bottom: 0rem;
  left: 0rem;
  right: 0rem;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 1;
}
.offerslider__nav--middle {
  bottom: unset;
  top: 50%;
  transform: translateY(-50%);
}
.offerslider__nav--arrowsoutside .prev {
  margin-left: -33.1rem;
  transform: translateX(-100%);
}
.offerslider__nav--arrowsoutside .next {
  margin-right: -33.1rem;
  transform: translateX(100%);
}
@media (max-width: 991.98px) {
  * + .offerslider__nav--mobilerelative {
    margin-top: 24rem;
  }
}
@media (max-width: 991.98px) {
  .offerslider__nav--mobilerelative {
    position: relative;
    top: unset;
    bottom: unset;
    left: unset;
    right: unset;
    transform: none;
  }
}
@media (max-width: 991.98px) {
  .offerslider__nav--mobilerelative .next {
    margin-right: 0rem;
    transform: none;
  }
}
@media (max-width: 991.98px) {
  .offerslider__nav--mobilerelative .prev {
    margin-left: 0rem;
    transform: 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
 */
/**
 * 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
 */
.olf {
  padding: 160rem 147rem 160rem 140rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 991.98px) {
  .olf {
    padding: 48rem 48rem 48rem 24rem;
    flex-direction: column;
    justify-content: flex-start;
  }
}
.olf__content {
  width: 420rem;
  flex-shrink: 0;
}
@media (max-width: 991.98px) {
  .olf__content {
    width: auto;
  }
}
@media (max-width: 991.98px) {
  * + .olf__offers {
    margin-top: 48rem;
  }
}
.olf__offers {
  display: flex;
}
@media (max-width: 575.98px) {
  .olf__offers {
    flex-direction: column;
    gap: 24rem;
  }
}
.olf__offers__item {
  padding: 89.4rem 40rem 45.7rem 40rem;
  width: 382rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #2B2B2B;
}
@media (max-width: 991.98px) {
  .olf__offers__item {
    width: 300rem;
    padding: 48rem 24rem;
  }
}
.olf__offers__item__icon {
  width: 211rem;
  height: auto;
}
@media (max-width: 991.98px) {
  .olf__offers__item__icon {
    width: 150rem;
  }
}
* + .olf__offers__item__title {
  padding-top: 45.7rem;
}
.olf__offers__item__title {
  margin-top: auto;
  margin-bottom: auto;
  font-size: calc(30rem * (var(--fontsize) / 100));
  line-height: 1.2;
  width: 330rem;
  font-family: "Cormorant Garamond", Arial, Helvetica, sans-serif;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}
@media (max-width: 991.98px) {
  .olf__offers__item__title {
    width: auto;
  }
}
* + .olf__offers__item__button {
  padding-top: 17rem;
}
.olf__offers__item__button {
  display: flex;
  justify-content: center;
  position: relative;
  margin-top: auto;
}
.olf__offers__item:hover {
  transform: scale(1.12);
}
.olf__offers__item:hover .button {
  background-color: #ffffff;
  border-color: #ffffff;
}
.olf__offers__item:hover .button::before {
  background-color: #ffffff;
}
@media (min-width: 992px) {
  .olf__offers:not(:has(.olf__offers__item:hover)) .olf__offers__item:nth-child(2) {
    transform: scale(1.12);
  }
  .olf__offers:not(:has(.olf__offers__item:hover)) .olf__offers__item:nth-child(2) .button {
    background-color: #ffffff;
    border-color: #ffffff;
  }
  .olf__offers:not(:has(.olf__offers__item:hover)) .olf__offers__item:nth-child(2) .button::before {
    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
 */
/**
 * 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
 */
.newsletter {
  display: flex;
}
.newsletter__img {
  width: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
@media (max-width: 991.98px) {
  .newsletter__img {
    display: none;
  }
}
.newsletter__box {
  padding: 50rem 204rem 57rem 107rem;
  background-color: #FFD179;
}
@media (max-width: 575.98px) {
  .newsletter__box {
    padding: 24rem 24rem 24rem 12rem;
  }
}
* + .newsletter__excerpt {
  margin-top: 24rem;
}
@media (max-width: 575.98px) {
  * + .newsletter__excerpt {
    margin-top: 12rem;
  }
}
.newsletter__excerpt {
  font-size: calc(19rem * (var(--fontsize) / 100));
  line-height: 1.58;
}
* + .newsletter__form {
  margin-top: 34rem;
}
@media (max-width: 575.98px) {
  * + .newsletter__form {
    margin-top: 24rem;
  }
}
.newsletter__form {
  position: relative;
}
.newsletter__form__top {
  display: flex;
  justify-content: space-between;
  gap: 25.1rem;
}
.newsletter__form__input {
  font-size: calc(19rem * (var(--fontsize) / 100));
  line-height: 1.158;
  font-weight: 500;
  color: #2B2B2B;
  padding: 16rem 32rem;
  border-radius: 9999px;
  box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.16);
  background-color: #ffffff;
  flex-grow: 1;
}
@media (max-width: 575.98px) {
  .newsletter__form__input {
    width: 300rem;
  }
}
.newsletter__form__input::placeholder {
  font-size: calc(19rem * (var(--fontsize) / 100));
  line-height: 1.158;
  font-weight: 500;
  color: rgba(43, 43, 43, 0.2);
}
.newsletter__form__submit {
  flex-shrink: 0;
}
* + .newsletter__form__agreements {
  margin-top: 41.1rem;
}
@media (max-width: 575.98px) {
  * + .newsletter__form__agreements {
    margin-top: 24rem;
  }
}
.newsletter__form__agreement {
  display: flex;
  gap: 16.9rem;
  position: relative;
  cursor: pointer;
}
.newsletter__form__agreement input {
  opacity: 0;
  position: absolute;
  width: 0rem;
  height: 0rem;
  visibility: hidden;
  -webkit-visibility: hidden;
}
.newsletter__form__agreement__checkbox {
  position: relative;
  width: 23.51rem;
  height: 23.51rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1.2px solid #2B2B2B;
  flex-shrink: 0;
}
.newsletter__form__agreement__checkbox svg {
  stroke: #2B2B2B;
  width: 80%;
  height: 80%;
  opacity: 0;
  transition: opacity 0.2s linear;
}
.newsletter__form__agreement__text {
  font-size: calc(14rem * (var(--fontsize) / 100));
  line-height: 1.5;
}
.newsletter__form__response {
  font-size: calc(12rem * (var(--fontsize) / 100));
  line-height: 1.5;
  font-weight: 500;
  padding: 4rem 12rem;
  color: #007500;
  border: 1px solid #007500;
  position: absolute;
  top: -6rem;
  left: 0%;
  right: 0rem;
  transform: translateY(-100%);
}
.newsletter__form__response.wrong {
  color: #ff0000;
  border-color: #ff0000;
}

input:checked + .newsletter__form__agreement__checkbox svg {
  opacity: 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
 */
/**
 * 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
 */
.listitem {
  width: 382rem;
  display: block;
  position: relative;
}
.listitem--soon {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.listitem--soon--wyjazd {
  min-height: 518rem;
}
.listitem--soon--apartament {
  min-height: 448.15rem;
}
.listitem:has(.listitem__content), .listitem:has(.listitem__soon__content) {
  border: 1.2px solid #2B2B2B;
  border-top: none;
}
.listitem__caption {
  position: absolute;
  top: 0rem;
  right: 0rem;
}
.listitem__img {
  width: calc(382rem + 1.2px);
  height: 225.74rem;
  margin-left: -1.2px;
  margin-right: -1.2px;
  object-fit: cover;
  flex-shrink: 0;
}
.listitem__img--imgonly {
  width: 382rem;
  margin-left: 0rem;
  margin-right: 0rem;
}
@media (max-width: 991.98px) {
  .listitem__img {
    min-width: auto;
  }
}
.listitem__content {
  width: 382rem;
  padding: 30.3rem 12rem 35rem 33rem;
}
.listitem__title {
  font-size: calc(16rem * (var(--fontsize) / 100));
  line-height: 1.5;
  color: #2B2B2B;
  font-weight: 700;
  text-transform: uppercase;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
}
* + .listitem__excerpt {
  margin-top: 3rem;
}
.listitem__excerpt {
  font-size: calc(16rem * (var(--fontsize) / 100));
  line-height: 1.5;
  color: #2B2B2B;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
}
* + .listitem__info {
  margin-top: 17rem;
}
* + .listitem__info__item {
  margin-top: 11.2rem;
}
.listitem__info__item {
  display: flex;
}
.listitem__info__item__icon {
  width: 20rem;
  height: 22rem;
  object-fit: contain;
  flex-shrink: 0;
}
* + .listitem__info__item__text {
  margin-left: 7.3rem;
}
.listitem__info__item__text {
  font-size: calc(16rem * (var(--fontsize) / 100));
  line-height: 1.5;
  color: #2B2B2B;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
}
* + .listitem__price {
  margin-top: 12.8rem;
}
@media (max-width: 575.98px) {
  * + .listitem__price {
    margin-top: 12rem;
  }
}
.listitem__price {
  font-size: calc(16rem * (var(--fontsize) / 100));
  line-height: 1.5;
  color: #CE7F00;
  font-weight: 700;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  font-style: italic;
}
* + .listitem__button {
  margin-top: 19.2rem;
}
@media (max-width: 575.98px) {
  * + .listitem__button {
    margin-top: 12rem;
  }
}
.listitem__button {
  display: flex;
}
.listitem:hover .button::before {
  background-color: transparent;
}
.listitem__soon__content {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("../images/grouptrip/placeholder.png");
  flex: 1 1 auto;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}
.listitem__soon__content__base {
  position: relative;
  font-family: "Cormorant Garamond", Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  font-size: calc(30rem * (var(--fontsize) / 100));
  line-height: 1.2;
  font-weight: 700;
  color: #2B2B2B;
  text-align: center;
}
.listitem__soon__content__base__title {
  font-size: calc(16rem * (var(--fontsize) / 100));
  line-height: 1.5;
  color: #2B2B2B;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  position: absolute;
  top: -8.4rem;
  left: 50%;
  transform: translate(-50%, -100%);
}
.listitem__soon__hourglass {
  width: 16.822rem;
  height: 24.095rem;
  object-fit: contain;
  margin-left: auto;
  margin-right: 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
 */
/**
 * 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
 */
.introtitle {
  display: flex;
  width: 100%;
  padding: 0 147rem 29rem 140rem;
  background-color: #ffffff;
  justify-content: center;
  text-align: center;
}
@media (max-width: 991.98px) {
  .introtitle {
    padding: 48rem 48rem 48rem 24rem;
  }
}
@media (max-width: 575.98px) {
  .introtitle {
    padding: 24rem 24rem 24rem 12rem;
  }
}
.introtitle--left {
  justify-content: flex-start;
  text-align: left;
}
.introtitle--center {
  justify-content: center;
  text-align: center;
}
.introtitle--right {
  justify-content: flex-end;
  text-align: right;
}

/**
 * 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
 */
/**
 * 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
 */
.intro {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media (max-width: 991.98px) {
  .intro {
    padding-bottom: 24rem;
    min-height: 60vh;
  }
}
@media (max-width: 575.98px) {
  .intro--homelike {
    min-height: 1234.428rem;
    padding: 250.51rem 53rem 82rem 53rem;
    justify-content: flex-start;
  }
}
.intro--imgonly {
  min-height: 541rem;
  padding-bottom: 0rem;
}
.intro__img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0rem;
  right: 0rem;
  bottom: 0rem;
  left: 0rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.intro__content {
  position: relative;
  text-align: center;
}
@media (max-width: 575.98px) {
  .intro__content--homelike h1 {
    font-size: calc(46.9rem * (var(--fontsize) / 100));
    line-height: 60.76rem;
    font-family: "Cormorant Garamond", Arial, Helvetica, sans-serif;
    line-height: 1.21;
    font-weight: 700;
  }
}
.intro__scroll {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 20rem;
  bottom: 262rem;
  left: 52rem;
  transform: rotate(-90deg);
}
@media (max-width: 991.98px) {
  .intro__scroll {
    left: -48rem;
  }
}
.intro__scroll::before {
  content: "";
  display: block;
  width: 44.069rem;
  height: 36.694rem;
  -webkit-mask: url("../images/global/arrow_left_fat.svg") no-repeat center;
  mask: url("../images/global/arrow_left_fat.svg") no-repeat center;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: #000000;
}
@media (max-width: 575.98px) {
  .intro__scroll--homelike {
    left: 50%;
    bottom: 148rem;
    transform: translateX(-50%) rotate(-90deg) !important;
  }
  .intro__scroll--homelike::before {
    background-color: #ffffff;
    width: 22.19rem;
    height: 18.476rem;
  }
}
.intro__scroll__text {
  font-size: calc(20rem * (var(--fontsize) / 100));
  line-height: 1.2;
  color: #2B2B2B;
  text-transform: uppercase;
}
@media (max-width: 575.98px) {
  .intro__scroll__text--homelike {
    color: #ffffff;
    font-size: calc(16.5rem * (var(--fontsize) / 100));
  }
}
.intro__scroll:hover {
  transform: rotate(-90deg) translateX(30rem);
}

/**
 * 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
 */
/**
 * 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
 */
.inspire {
  position: relative;
  padding: 57rem 147rem 134.2rem 140rem;
}
@media (max-width: 991.98px) {
  .inspire {
    padding: 48rem 48rem 48rem 24rem;
  }
}
* + .inspire__socials {
  margin-top: 20rem;
}
@media (max-width: 575.98px) {
  * + .inspire__socials {
    margin-top: 12rem;
  }
}
* + .inspire__slider {
  margin-top: 42.7rem;
}
@media (max-width: 575.98px) {
  * + .inspire__slider {
    margin-top: 24rem;
  }
}

/**
 * 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
 */
/**
 * 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
 */
.imgwithtitle {
  padding: 95rem 147rem 146rem 140rem;
  background-color: #F8F3ED;
}
@media (max-width: 991.98px) {
  .imgwithtitle {
    padding: 48rem 48rem 48rem 24rem;
  }
}
@media (max-width: 575.98px) {
  .imgwithtitle {
    padding: 24rem 24rem 24rem 12rem;
  }
}
.imgwithtitle__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.imgwithtitle__content h1, .imgwithtitle__content h2 {
  font-weight: 400;
}
* + .imgwithtitle__img {
  margin-top: 59.5rem;
}
@media (max-width: 991.98px) {
  * + .imgwithtitle__img {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  * + .imgwithtitle__img {
    margin-top: 24rem;
  }
}
.imgwithtitle__img {
  width: 100%;
  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
 */
/**
 * 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
 */
.headerspacer {
  height: 150rem;
}

/**
 * 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
 */
/**
 * 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
 */
.halfcontenthalfimg {
  display: flex;
  min-height: 539rem;
}
@media (max-width: 991.98px) {
  .halfcontenthalfimg {
    min-height: auto;
    flex-direction: column;
  }
}
.halfcontenthalfimg--imgasfirst {
  flex-direction: row-reverse;
}
@media (max-width: 991.98px) {
  .halfcontenthalfimg--imgasfirst {
    flex-direction: column;
  }
}
.halfcontenthalfimg__content {
  position: relative;
  width: 50%;
  padding: 120rem 260rem 110rem 147rem;
}
@media (max-width: 991.98px) {
  .halfcontenthalfimg__content {
    padding: 48rem 48rem 24rem 12rem;
    width: 100%;
  }
}
.halfcontenthalfimg__content__scroll {
  text-transform: uppercase;
  font-size: calc(16rem * (var(--fontsize) / 100));
  line-height: 1.625;
  color: #2B2B2B;
  display: flex;
  gap: 17.9rem;
  display: flex;
  align-items: center;
  transform: rotate(-90deg) translate(100%, 100%);
  transform-origin: right bottom;
  transition: transform 0.2s linear;
}
.halfcontenthalfimg__content__scroll::before {
  content: "";
  display: block;
  width: 22.966rem;
  height: 12.862rem;
  background-color: #2B2B2B;
  -webkit-mask: url("../images/global/arrow-left-long.svg") no-repeat center;
  mask: url("../images/global/arrow-left-long.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.halfcontenthalfimg__content__scroll__container {
  position: absolute;
  right: 55.5rem;
  bottom: 31.1rem;
}
@media (max-width: 991.98px) {
  .halfcontenthalfimg__content__scroll__container {
    right: 35rem;
  }
}
.halfcontenthalfimg__content__scroll:hover {
  transform: rotate(-90deg) translate(calc(100% + 30rem), 100%);
}
.halfcontenthalfimg__img {
  width: 50%;
  max-height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}
@media (max-width: 991.98px) {
  .halfcontenthalfimg__img {
    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
 */
/**
 * 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
 */
.gallery {
  padding: 48rem 147rem 48rem 140rem;
  position: relative;
}
@media (max-width: 991.98px) {
  .gallery {
    padding: 48rem 48rem 48rem 24rem;
  }
}
@media (max-width: 575.98px) {
  .gallery {
    padding: 24rem 24rem 24rem 12rem;
  }
}
.gallery__items {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24rem 24rem;
}
@media (max-width: 575.98px) {
  .gallery__items {
    gap: 12rem 12rem;
  }
}
.gallery__item {
  width: 32%;
  height: 382rem;
  cursor: pointer;
  transition: filter 0.2s linear;
}
.gallery__item:hover {
  filter: brightness(1.1);
}
@media (max-width: 991.98px) {
  .gallery__item {
    width: 47.5%;
  }
}
@media (max-width: 575.98px) {
  .gallery__item {
    height: 192rem;
  }
}
.gallery__item__img {
  width: 100%;
  height: 100%;
  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
 */
/**
 * 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
 */
.forcomps {
  position: relative;
  padding: 138.1rem 147rem 57rem 140rem;
}
@media (max-width: 991.98px) {
  .forcomps {
    padding: 48rem 48rem 48rem 24rem;
  }
}
.forcomps__content ul {
  width: 664rem;
}
@media (max-width: 575.98px) {
  .forcomps__content ul {
    width: auto;
  }
}
* + .forcomps__slider {
  margin-top: 80rem;
}
@media (max-width: 991.98px) {
  * + .forcomps__slider {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  * + .forcomps__slider {
    margin-top: 24rem;
  }
}

/**
 * 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
 */
/**
 * 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
 */
.filterlist {
  padding: 51rem 147rem 43rem 140rem;
}
@media (max-width: 991.98px) {
  .filterlist {
    padding: 48rem 48rem 48rem 24rem;
  }
}
@media (max-width: 575.98px) {
  .filterlist {
    padding: 24rem 24rem 24rem 12rem;
  }
}
.filterlist__top {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 575.98px) {
  .filterlist__top {
    flex-wrap: wrap;
    gap: 24rem 0rem;
  }
}
.filterlist__top .link {
  font-size: calc(19rem * (var(--fontsize) / 100));
  line-height: 1.159;
  text-transform: uppercase;
}
.filterlist__top .link::before {
  bottom: -4rem;
}
.filterlist__top__tabs {
  display: flex;
  gap: 35rem;
}
@media (max-width: 575.98px) {
  .filterlist__top__tabs .link {
    text-align: center;
  }
}
.filterlist__top__stricts {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 15.9rem;
}
.filterlist__top__stricts__item {
  position: relative;
}
* + .filterlist__filterstab {
  margin-top: 23rem;
}
.filterlist__filterstab {
  display: flex;
  gap: 11.6rem;
  flex-wrap: wrap;
}
* + .filterlist__choosed {
  margin-top: 33.6rem;
}
.filterlist__choosed {
  display: flex;
  align-items: center;
  gap: 47rem;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  font-size: calc(13rem * (var(--fontsize) / 100));
  line-height: 1.5;
  font-weight: 500;
}
.filterlist__choosed__output {
  display: flex;
  align-items: center;
  gap: 47.1rem;
}
.filterlist__choosed__output__container {
  display: flex;
  align-items: center;
  gap: 18.9rem;
}
.filterlist__choosed__output__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8rem;
  cursor: pointer;
  transition: color 0.2s linear;
}
.filterlist__choosed__output__item::after {
  content: "";
  display: block;
  width: 5.97rem;
  height: 5.97rem;
  background-color: #2B2B2B;
  -webkit-mask: url("../images/global/x.svg") no-repeat center;
  mask: url("../images/global/x.svg") no-repeat center;
  -webkit-mask-size: cover;
  mask-size: cover;
}
.filterlist__choosed__output__item:hover {
  color: #ff0000;
}
.filterlist__choosed__output__item:hover::after {
  background-color: #ff0000;
}
* + .filterlist__items {
  margin-top: 20.5rem;
}
.filterlist__items__row {
  gap: 36rem 0rem;
}
@media (max-width: 991.98px) {
  .filterlist__items__row .listitem {
    margin-left: auto;
    margin-right: auto;
  }
}
.filterlist__calendar {
  padding: 29.5rem 22.5rem 34.5rem 22.5rem;
  position: absolute;
  box-shadow: 0rem 30rem 40rem rgba(87, 87, 87, 0.1);
  bottom: -11.1rem;
  right: -10rem;
  transform: translateY(100%);
  background-color: #ffffff;
}
@media (max-width: 575.98px) {
  .filterlist__calendar {
    right: unset;
    left: -70rem;
    bottom: -50rem;
    transform: scale(0.8) translateY(100%);
  }
}
.filterlist__humans {
  box-shadow: 0rem 30rem 40rem rgba(87, 87, 87, 0.1);
  padding: 32rem 32.6rem 23.6rem 30.8rem;
  position: absolute;
  bottom: -11.1rem;
  right: 0rem;
  transform: translateY(100%);
  background-color: #ffffff;
}
@media (max-width: 575.98px) {
  .filterlist__humans {
    right: unset;
    left: 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
 */
/**
 * 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
 */
.faq {
  padding: 5rem 147rem 86.7rem 140rem;
}
@media (max-width: 991.98px) {
  .faq {
    padding: 48rem 48rem 48rem 24rem;
  }
}
.faq:not(.simplecontent + .faq) {
  padding: 109.3rem 147rem 86.7rem 140rem;
}
@media (max-width: 991.98px) {
  .faq:not(.simplecontent + .faq) {
    padding: 48rem 48rem 48rem 24rem;
  }
}
* + .faq__items {
  margin-top: 37.1rem;
}
@media (max-width: 575.98px) {
  * + .faq__items {
    margin-top: 24rem;
  }
}
* + .faq__item {
  margin-top: 10.2rem;
}
.faq__item {
  position: relative;
  cursor: pointer;
  display: block;
  width: 100%;
  box-shadow: 0rem 30rem 40rem rgba(87, 87, 87, 0.1);
  padding: 35.4rem 60.4rem 33.6rem 68rem;
  background-color: #ffffff;
}
@media (max-width: 575.98px) {
  .faq__item {
    padding: 12rem 24rem;
  }
}
.faq__item__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  transition: color 0.2s linear;
}
.faq__item__top__svg {
  width: 12.862rem;
  height: 22.966rem;
  flex-shrink: 0;
  transition: transform 0.2s linear;
}
* + .faq__item__bottom {
  margin-top: 23.3rem;
}
@media (max-width: 575.98px) {
  * + .faq__item__bottom {
    margin-top: 12rem;
  }
}
.faq__item__bottom {
  font-size: calc(18rem * (var(--fontsize) / 100));
  line-height: 1.5;
  position: relative;
  display: flex;
  gap: 15.5rem;
  color: #2B2B2B;
}
.faq__item__bottom::before {
  content: "";
  display: block;
  width: 22.966rem;
  height: 28.547rem;
  flex-shrink: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("../images/global/enter.svg");
}
.faq__item:hover {
  color: #FFD179;
}
.faq__item:hover .faq__item__top__svg path {
  stroke: #FFD179;
}
.faq__item.active .faq__item__top__svg {
  transform: rotate(180deg);
}
* + .faq__button {
  margin-top: 86.7rem;
}
@media (max-width: 991.98px) {
  * + .faq__button {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  * + .faq__button {
    margin-top: 24rem;
  }
}
.faq__button {
  display: flex;
  position: relative;
}
@media (max-width: 991.98px) {
  .faq__button {
    justify-content: center;
  }
}

/**
 * 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
 */
/**
 * 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
 */
.contactsection {
  display: flex;
  min-height: 539rem;
}
@media (max-width: 991.98px) {
  .contactsection {
    min-height: auto;
    flex-direction: column;
  }
}
.contactsection__box {
  min-height: 539rem;
  padding: 80rem 113.3rem 46rem 140rem;
}
@media (max-width: 991.98px) {
  .contactsection__box {
    padding: 48rem 48rem 48rem 24rem;
  }
}
@media (max-width: 575.98px) {
  .contactsection__box {
    padding: 24rem 24rem 24rem 12rem;
  }
}
* + .contactsection__row {
  margin-top: 34.5rem;
}
@media (max-width: 575.98px) {
  * + .contactsection__row {
    margin-top: 24rem;
  }
}
.contactsection__column__title {
  font-size: calc(19rem * (var(--fontsize) / 100));
  line-height: 1.5789;
}
* + .contactsection__column__content {
  margin-top: 18.4rem;
}
@media (max-width: 575.98px) {
  * + .contactsection__column__content {
    margin-top: 12rem;
  }
}
.contactsection__column__content {
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  color: #2B2B2B;
  display: flex;
  flex-direction: column;
  gap: 15.1rem;
  line-height: 1.5789;
}
@media (max-width: 575.98px) {
  .contactsection__column__content {
    gap: 12rem;
  }
}
.contactsection__column__content a {
  color: #2B2B2B;
}
.contactsection__form {
  background-color: #FFD179;
  padding: 51.1rem 223rem 37.5rem 90rem;
}
@media (max-width: 991.98px) {
  .contactsection__form {
    padding: 48rem 48rem 48rem 24rem;
  }
}
@media (max-width: 575.98px) {
  .contactsection__form {
    padding: 24rem 24rem 24rem 12rem;
  }
}

/**
 * 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
 */
/**
 * 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
 */
/**
 * 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
 */
.bannerslider {
  position: relative;
}
.bannerslider__item {
  padding: 123rem 147rem 61.1rem 140rem;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
@media (max-width: 575.98px) {
  .bannerslider__item {
    padding: 80rem 24rem 24rem 12rem;
  }
}
.bannerslider__item::before {
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
  top: 0rem;
  left: 0rem;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  background: linear-gradient(90deg, #000000 16%, rgba(60, 60, 60, 0) 62.5%);
}
.bannerslider__item__caption {
  padding: 19rem 23rem 19rem 140rem;
  background-color: #FFD179;
  font-size: calc(33rem * (var(--fontsize) / 100));
  line-height: 1.45;
  font-weight: 600;
  color: #2B2B2B;
  text-transform: uppercase;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  position: absolute;
  top: 0rem;
  left: 0rem;
  border-bottom-right-radius: 14rem;
}
@media (max-width: 575.98px) {
  .bannerslider__item__caption {
    padding: 6rem 24rem 6rem 32rem;
  }
}
.bannerslider__item__title {
  position: relative;
  font-size: calc(81rem * (var(--fontsize) / 100));
  line-height: 1.15;
  font-weight: 700;
  font-family: "Cormorant Garamond", Arial, Helvetica, sans-serif;
  color: #ffffff;
}
* + .bannerslider__item__params {
  margin-top: 23rem;
}
.bannerslider__item__params {
  position: relative;
  display: flex;
  gap: 27rem;
}
.bannerslider__item__params__icon {
  width: 53.4rem;
  flex-shrink: 0;
}
.bannerslider__item__params__date {
  font-size: calc(26rem * (var(--fontsize) / 100));
  line-height: 1.23;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  color: #FFD179;
}
* + .bannerslider__item__params__price {
  margin-top: 6rem;
}
.bannerslider__item__params__price {
  font-size: calc(16rem * (var(--fontsize) / 100));
  line-height: 1.5;
  font-style: italic;
  color: #FFD179;
  font-weight: 800;
}
* + .bannerslider__item__excerpt {
  margin-top: 34rem;
}
.bannerslider__item__excerpt {
  position: relative;
  font-size: calc(19rem * (var(--fontsize) / 100));
  line-height: 1.58;
  color: #ffffff;
  width: 586rem;
}
@media (max-width: 575.98px) {
  .bannerslider__item__excerpt {
    width: auto;
  }
}
* + .bannerslider__item__button {
  margin-top: 33rem;
}
@media (max-width: 575.98px) {
  * + .bannerslider__item__button {
    margin-top: 12rem;
  }
}
.bannerslider__item__button {
  display: flex;
  position: relative;
}
.bannerslider__bullets {
  display: flex;
  gap: 13rem;
  position: absolute;
  bottom: 49rem;
  left: 50%;
  transform: translateX(-50%);
}
.bannerslider__bullet {
  width: 12rem;
  height: 12rem;
  background-color: #ffffff;
  border-radius: 9999px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bannerslider__bullet::before {
  content: "";
  display: block;
  width: 9rem;
  height: 9rem;
  border-radius: 9999px;
  background-color: #ffffff;
}
.bannerslider__bullet:hover::before {
  background-color: #99E2E8;
}
.bannerslider__bullet.active::before {
  background-color: #FFD179;
}

/**
 * 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
 */
/**
 * 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
 */
.aboutus {
  position: relative;
  padding: 57rem 147rem 57rem 140rem;
}
@media (max-width: 991.98px) {
  .aboutus {
    padding: 48rem 48rem 48rem 24rem;
  }
}
.aboutus__content ul {
  width: 898.28rem;
}
@media (max-width: 991.98px) {
  .aboutus__content ul {
    width: auto;
  }
}
* + .aboutus__points {
  margin-top: 77.5rem;
}
@media (max-width: 991.98px) {
  * + .aboutus__points {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  * + .aboutus__points {
    margin-top: 24rem;
  }
}
.aboutus__points {
  display: flex;
  justify-content: center;
  gap: 113.6rem;
}
@media (max-width: 991.98px) {
  .aboutus__points {
    flex-wrap: wrap;
    gap: 48rem 113.6rem;
  }
}
.aboutus__point {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 991.98px) {
  .aboutus__point {
    min-width: auto;
  }
}
.aboutus__point__icon {
  width: 56%;
  height: 66%;
  object-fit: contain;
}
.aboutus__point__icon__container {
  width: 265.84rem;
  height: 265.84rem;
  border: 3.5px solid #FFD179;
  border-radius: 9999px;
  display: flex;
  justify-content: center;
  align-items: center;
}
* + .aboutus__point__title {
  margin-top: 25.8rem;
}
@media (max-width: 575.98px) {
  * + .aboutus__point__title {
    margin-top: 12rem;
  }
}
.aboutus__point__title {
  font-size: calc(16rem * (var(--fontsize) / 100));
  line-height: 1.625;
  color: #2B2B2B;
  text-align: center;
  font-weight: 700;
}
* + .aboutus__point__text {
  margin-top: 10rem;
}
.aboutus__point__text {
  font-size: calc(16rem * (var(--fontsize) / 100));
  line-height: 1.625;
  color: #2B2B2B;
  text-align: center;
}
* + .aboutus__button {
  margin-top: 105rem;
}
@media (max-width: 991.98px) {
  * + .aboutus__button {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  * + .aboutus__button {
    margin-top: 24rem;
  }
}
.aboutus__button {
  display: flex;
  position: relative;
}
@media (max-width: 991.98px) {
  .aboutus__button {
    justify-content: center;
  }
}