@import url("slick.css");

/* SLIDESHOW */

.about,
.amenities,
.reviews,
body .homepage {
  overflow-x: clip !important;
}

.innerCaption,
.sliderCaption {
  font-size: var(--font-35);

  color: white;

  line-height: 1.2;

  position: absolute;

  top: 48%;

  font-weight: 100;

  letter-spacing: 4px;

  -webkit-animation: slideLeft 2s ease-in-out forwards;

  animation: slideLeft 2s ease-in-out forwards;
}

@-webkit-keyframes slideLeft {
  from {
    left: -400px;
  }

  to {
    left: 50%;
  }
}

@keyframes slideLeft {
  from {
    left: -400px;
  }

  to {
    left: 50%;
  }
}

.innerCaption h2,
.sliderCaption h2 {
  font-size: var(--font-62);

  letter-spacing: clamp(0px, 1.051vw, 20px);

  font-weight: bold;

  color: white;

  margin: 0px;
}

/* MOTO-SYMBOL */

.homepage_motto-symbol {
  height: clamp(0px, 36.784vw, 940px);
  width: 100%;
  background-color: var(--primary-clr);
  top: -3px;
  position: relative;
}

.homepage_motto-symbol > div {
  position: absolute;

  bottom: clamp(0px, 7.882vw, 150px);

  right: 10%;
}

.homepage_motto-symbol::after {
  position: absolute;

  content: "";

  height: clamp(0px, 58.854vw, 1500px);
  left: -3px;
  width: 100%;

  top: -6.5vw;

  z-index: 1;

  background-repeat: no-repeat;

  background-image: url(https://www.villalinum.com/assets/img/slider-symbol.png);

  background-position: bottom;

  background-size: 100%;
}

.homepage_motto-symbol p {
  font-size: var(--font-52);

  color: white;

  line-height: 1.2;

  text-align: left;
}

/* LOCATION  */

.location a {
  font-size: var(--font-30);
  color: var(--primary-clr);
  line-height: 1.333;
  font-weight: 800;
  display: block;
}

.location > div > img {
  margin-left: clamp(0px, 16.605vw, 316px);
}

.location p,
.location {
  font-size: var(--font-30);
  color: var(--primary-clr);
  line-height: 1.333;
  max-width: var(--max-width);
  margin: auto;
}

.location div {
  max-width: clamp(500px, 60.956vw, 1160px);
  margin: auto;
  margin-bottom: clamp(0px, 4.729vw, 90px);
  position: relative;
  z-index: 2;
  background: var(--secondary-clr);
}

.location > div > a {
  font-size: var(--font-47);

  color: var(--primary-clr);

  margin-top: clamp(0px, 2.102vw, 40px);

  margin-bottom: clamp(0px, 3.678vw, 70px);
}

/* ABOUT */

.about {
  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  max-width: var(--max-width);

  margin: auto;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  margin-bottom: -100px;

  padding-top: var(--space);

  gap: clamp(0px, 6.831vw, 130px);

  padding-left: 10px;

  padding-right: 10px;
}

.about_image-container a {
  font-size: var(--font-47);

  color: var(--primary-clr);

  font-weight: 800;

  max-width: clamp(0px, 7.357vw, 140px);
}

.about_image-container {
  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  flex-direction: column;

  gap: clamp(0px, 12.612vw, 240px);

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  position: relative;
}

.about_image-container::after {
  content: "";

  width: clamp(5px, 0.3681vw, 7px);

  height: clamp(0px, 49.921vw, 950px);

  background-color: white;

  position: absolute;

  top: -21.808vw;

  right: clamp(0px, 7.357vw, 140px);
}

.about-article p,
.about-article {
  font-size: var(--font-30);

  color: var(--primary-clr);

  max-width: clamp(500px, 34.524vw, 657px);

  line-height: clamp(28px, 2.102vw, 40px);

  font-weight: 200;
}

/* amenities */

.amenities {
  background-color: var(--secondary-clr);

  padding-bottom: var(--space);

  padding-top: var(--space);
}

.amenities-gallery {
  display: none;
}

.amenities-top > div {
  max-width: clamp(500px, 71.992vw, 1370px);

  margin: auto;
}

.amenities-top_relative img:nth-child(2) {
  position: relative;

  top: clamp(0px, 2.89vw, 55px);
}

.amenities-top_title > div > a:nth-child(1) {
  font-size: var(--font-62);
  white-space: nowrap;
  color: var(--secondary-clr);

  display: block;

  font-weight: bold;
}

.amenities-top_title {
  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  gap: var(--space);

  -webkit-box-align: end;

  -ms-flex-align: end;

  align-items: end;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  margin-bottom: clamp(0px, 2.102vw, 40px) !important;
}

a.discover-btn {
  font-size: var(--font-44);

  display: block;

  color: white;

  border-radius: clamp(0px, 13.663vw, 260px);

  border: 6px solid white;

  padding: clamp(0px, 1.314vw, 25px) clamp(0px, 4.729vw, 90px);

  width: -webkit-fit-content;

  width: -moz-fit-content;

  width: fit-content;

  font-weight: bold;

  letter-spacing: -1px;

  -webkit-transition: all 0.3s;

  -o-transition: all 0.3s;

  transition: all 0.3s;
}

a.discover-btn:hover {
  -webkit-box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;

  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;

  background-color: white;

  color: var(--primary-clr);
}

.amenities > a.discover-btn {
  color: var(--primary-clr);

  border: 6px solid var(--primary-clr);

  margin: var(--space) auto 0;

  margin-left: clamp(200px, 24.698vw, 470px);
}

.amenities > a.discover-btn:hover {
  background-color: var(--primary-clr);

  color: white;
}

.amenities-top_relative {
  position: relative;

  padding-bottom: clamp(0px, 13.137vw, 250px);

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  gap: clamp(0px, 6.831vw, 130px);
}

.amenities-top_relative > div {
  position: absolute;

  bottom: -2.89vw;
}

.amenities-top_title_left {
  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  flex-direction: column;

  gap: var(--space);

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  height: 100%;
}

.amenities-bottom {
  margin: auto;

  margin-top: clamp(0px, 13.663vw, 260px);

  max-width: var(--max-width);

  background-color: var(--secondary-clr);

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  flex-direction: column;

  gap: var(--space);
}

.amenities-bottom > div:has(p) {
  width: -webkit-fit-content;

  width: -moz-fit-content;

  width: fit-content;

  margin: auto;
}

.amenities-bottom > div:has(p) * {
  font-size: var(--font-30);

  color: var(--primary-clr);

  margin-bottom: 0px;

  line-height: clamp(28px, 1.997vw, 38px);
}

.amenities-bottom > div:has(p) h4 {
  font-weight: bold;

  text-transform: uppercase;

  margin-bottom: clamp(0px, 2.102vw, 40px);
}

.amenities-bottom_img {
  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  gap: clamp(0px, 6.831vw, 156px);

  padding-bottom: clamp(0px, 9.459vw, 180px);
}

.amenities-bottom_img img:nth-child(2) {
  position: relative;

  top: clamp(0px, 9.459vw, 180px);
}

/* REVIEWS */

.reviews {
  background-color: var(--secondary-clr);

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  gap: var(--space);

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  padding-top: clamp(0px, 15.765vw, 300px);

  padding-bottom: clamp(0px, 8.671vw, 165px);

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  background-image: url("https://www.villalinum.com/assets/img/review_image.png");

  background-repeat: no-repeat;

  background-size: cover;
}

.reviews_title {
  font-size: var(--font-47);
  max-width: clamp(0px, 14.663vw, 262px);
  color: var(--primary-clr);
  font-weight: bold;
  margin-bottom: var(--space);
}

.reviews_group * {
  font-size: var(--font-30);

  color: var(--primary-clr);

  font-weight: 100;

  line-height: clamp(28px, 1.892vw, 36px);
}

.reviews_group {
  max-width: clamp(0px, 49.921vw, 950px);

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  padding-top: var(--space);

  padding-bottom: var(--space);

  position: relative;
}

.reviews_group::before,
.reviews_group::after {
  content: "";

  position: absolute;

  width: clamp(0px, 3.521vw, 67px);

  height: clamp(0px, 2.207vw, 42px);

  background-image: url("https://www.villalinum.com/assets/img/quotes.png");

  background-size: cover;
}

.reviews_group::after {
  top: 0px;

  right: 0px;
}

.reviews_group::before {
  bottom: 0px;

  left: 0;
}

.slick-arrow {
  background-color: transparent;

  background-image: url("https://www.villalinum.com/assets/img/arrow-right.png");

  background-repeat: no-repeat;

  height: clamp(0px, 5.413vw, 103px);

  width: 100%;

  max-width: clamp(0px, 8.933vw, 170px);

  font-size: 0px;

  background-size: contain;

  background-position: right;
}

.slick-prev {
  -webkit-transform: rotate(180deg);

  -ms-transform: rotate(180deg);

  transform: rotate(180deg);
}

.slick-arrow:hover {
  background-color: transparent;
}

.reviews_group .slick-slide {
  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: reverse;

  -ms-flex-direction: column-reverse;

  flex-direction: column-reverse;
}

.reviews_group .moduleTitle {
  font-weight: bold;
}

.amenities {
  background-repeat: no-repeat;

  background-size: 100%;
}

.container-loc-ab {
  background-repeat: no-repeat;

  background-position: bottom;

  padding-top: clamp(0px, 14.063vw, 270px);

  background-size: cover;
}

.amenities-bottom_img img {
  max-height: clamp(0px, 37.835vw, 720px);
}

.amenities-top_relative > img:nth-child(1) {
  max-width: clamp(0px, 26.012vw, 495px);

  max-height: clamp(0px, 50.499vw, 961px);
}

.amenities-top_relative > img:nth-child(2) {
  max-width: clamp(0px, 37.835vw, 720px);

  max-height: clamp(0px, 53.757vw, 1023px);
}

.amenities-top_title > img {
  max-width: clamp(0px, 33.526vw, 628px);

  max-height: clamp(0px, 33.526vw, 628px);
}

.about_image-container > img {
  max-width: clamp(438px, 33.526vw, 638px);

  max-height: clamp(438px, 33.526vw, 638px);
}

@media screen and (max-width: 1024px) {
  .location > div > a {
    margin-top: 10px;

    margin-bottom: 10px;
  }

  .about_image-container a {
    max-width: unset;

    margin-bottom: 10px;
  }

  .homepage_motto-symbol > div {
    width: 100%;

    background-color: var(--primary-clr);

    right: 0px;

    max-width: unset;
  }

  .about {
    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    margin-bottom: 0px;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    gap: 10px;
  }

  .about_image-container {
    gap: 10px;
  }

  .reviews {
    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    gap: 10px;
  }

  .reviews_title {
    max-width: none;
    text-align: center;
    margin-bottom: 0px;
  }

  .reviews_group {
    max-width: 100%;

    padding: 0 10px;
    margin-top: 20px;
  }

  .reviews {
    padding-top: 0px;

    background-image: none;
  }

  .location > img {
    max-height: 400px;

    width: 100%;

    -o-object-fit: cover;

    object-fit: cover;
  }

  .homepage_motto-symbol p {
    margin-bottom: 0px;
  }

  .innerCaption h2,
  .sliderCaption h2 {
    letter-spacing: 1px;
  }

  .homepage_motto-symbol > div {
    max-width: 290px;

    z-index: 3;
  }
}

@media screen and (max-width: 640px) {
  .homepage {
    padding-top: 80px;
  }

  .slideshow .slick-slide img {
    min-height: 300px;

    -o-object-fit: cover;

    object-fit: cover;
  }

  .sliderCaption h2,
  .sliderCaption {
    font-size: 20px;

    letter-spacing: 1px;
  }

  .about-article p,
  .location > div p,
  .about-article,
  .location > div {
    font-size: 16px;
    padding: 0 10px;
  }

  a.discover-btn,
  .amenities-top_title > div > a:nth-child(1),
  .location > div > a,
  .homepage_motto-symbol p,
  .about_image-container a {
    font-size: 22px;
  }

  /* .amenities img {

    display: none !important;

  } */

  .container-loc-ab {
    padding-top: 50px;
  }

  .about {
    padding-left: 0px;

    padding-bottom: 10px;

    padding-right: 0px;
  }

  .about_image-container {
    width: 100%;
  }

  .about_image-container > img {
    max-width: unset;

    max-height: 300px;

    width: 100%;

    -o-object-fit: cover;

    object-fit: cover;
  }

  .location > img {
    max-height: 300px;
  }

  .about-article {
    line-height: 22px;
  }

  .amenities-bottom > div:has(p) *,
  .reviews_group .slick-list.draggable * {
    font-size: 16px;

    line-height: 22px;
  }

  .amenities-bottom_img {
    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    gap: 0px;
  }

  .amenities-bottom_img img {
    -o-object-fit: cover;

    object-fit: cover;
  }

  .amenities-bottom_img img:nth-child(2) {
    top: 0px;
  }

  .amenities-top_title {
    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;
  }

  .amenities-top_title {
    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;
  }

  .amenities-top_title > img {
    max-width: 100%;

    max-height: 300px;

    width: 100%;

    -o-object-fit: none;

    object-fit: none;
  }

  .amenities-top > div {
    margin: auto;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    max-width: unset;
  }

  .amenities-top_relative > img:nth-child(1) {
    display: none;
  }

  .amenities-top_relative > div {
    position: unset;
  }

  .amenities-top_relative > img:nth-child(2) {
    max-width: unset;

    max-height: unset;

    width: 100%;

    top: 0px;
  }

  .amenities-bottom {
    margin-top: 0px;
  }

  .amenities-top > div {
    padding-bottom: 0px;

    margin-bottom: 0px !important;
  }

  .amenities-top_relative {
    gap: 0px;
  }

  .amenities img {
    height: 300px !important;

    max-width: 100% !important;

    -o-object-fit: cover;

    object-fit: cover;

    max-height: unset !important;
  }

  .amenities-bottom_img {
    padding-bottom: 0px;
  }

  .amenities > a.discover-btn {
    margin: 10px;

    margin-left: auto;
  }

  .amenities-top img,
  .amenities-bottom img {
    display: none !important;
  }

  .amenities-gallery {
    display: block;

    padding-top: 50px;
  }

  .seperator-image {
    display: none !important;
  }

  .amenities-bottom {
    gap: 0px;

    padding-top: 50px;
  }

  .policies {
    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;
  }

  .affiliates.slick-initialized.slick-slider {
    margin-top: 25px;

    margin-bottom: 25px;
  }

  header.site-header.fixed .top-bar {
    background-color: transparent !important;
  }

  .fixed .top-bar {
    padding-bottom: 0px;
  }

  .amenities-bottom > div:has(p) *,
  .reviews_group .slick-list.draggable *,
  .about-article p,
  .location > div p,
  .about-article,
  .location > div {
    line-height: 20px;
  }
}

@media screen and (max-width: 425px) {
  .sliderCaption h2,
  .sliderCaption {
    font-size: 17px;
    left: 10px !important;
  }

  a.discover-btn,
  .amenities-top_title > div > a:nth-child(1),
  .location > div > a,
  .homepage_motto-symbol p,
  .about_image-container a {
    font-size: 17px;
  }
}