.joya-home-main {
  width: 100%;
  max-width: none;
  margin: 0;
}
.joya-home-main > .joya-home-layout {
  overflow: hidden;
}
.joya-home-hero {
  height: calc(100vh - 86px);
  min-height: 620px;
  position: relative;
  color: #fff;
}
.joya-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity 1.2s,
    transform 7s;
}
.joya-slide.active {
  opacity: 1;
  transform: scale(1);
}
.joya-home-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0618159c 0%, #06181540 50%, #06181518);
}
.joya-home-caption {
  position: absolute;
  z-index: 2;
  left: max(6%, calc((100% - 1180px) / 2));
  top: 50%;
  transform: translateY(-40%);
  max-width: 720px;
}
.joya-home-caption > span,
.joya-intro-copy > span,
.joya-restaurant span {
  font-size: 12px;
  letter-spacing: 5px;
  font-weight: 700;
}
.joya-home-caption h1 {
  color: #fff;
  font:
    60px/1.08 Georgia,
    serif;
  margin: 18px 0;
}
.joya-home-caption p {
  font-size: 18px;
  max-width: 600px;
}
.joya-home-caption a,
.joya-restaurant a {
  display: inline-block;
  margin-top: 18px;
  padding: 14px 24px;
  border: 1px solid #fff;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
}
.joya-dots {
  position: absolute;
  z-index: 3;
  left: 4%;
  top: 50%;
  display: grid;
  gap: 10px;
}
.joya-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 50%;
  background: transparent;
}
.joya-dots button.active {
  background: #c39a62;
  border-color: #c39a62;
}
.joya-intro {
  width: min(1220px, 90%);
  margin: 0 auto;
  padding: 120px 0 150px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 100px;
  align-items: start;
}
.joya-intro-copy {
  padding-top: 45px;
}
.joya-intro-copy > span {
  color: #a67f4c;
}
.joya-intro-copy h2 {
  font:
    52px/1.08 Georgia,
    serif;
  margin: 18px 0 28px;
}
.joya-intro-copy p {
  color: #5d6664;
  line-height: 1.9;
}
.joya-intro-copy a {
  display: inline-block;
  margin-top: 20px;
  color: var(--joya-dark);
  font-weight: 700;
  text-decoration: none;
}
.joya-intro-images {
  position: relative;
  height: 600px;
}
.joya-intro-images img {
  position: absolute;
  width: 58%;
  height: 76%;
  object-fit: cover;
}
.joya-intro-images img:first-child {
  left: 0;
  bottom: 0;
}
.joya-intro-images img:last-child {
  right: 0;
  top: 0;
}
.joya-experience {
  height: 580px;
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  color: #fff;
  text-align: center;
}
.joya-experience span {
  color: #d4aa6b;
  letter-spacing: 8px;
}
.joya-experience small {
  display: block;
  letter-spacing: 5px;
  margin: 14px;
}
.joya-experience h2 {
  color: #fff;
  font:
    52px Georgia,
    serif;
  margin: 10px;
}
.joya-experience a {
  display: inline-block;
  margin-top: 18px;
  color: #fff;
  border: 1px solid #fff;
  padding: 13px 24px;
  text-decoration: none;
}
.joya-home-layout > .joya-rooms {
  width: min(1220px, 90%);
  margin: 110px auto;
}
.joya-discover {
  padding: 105px max(5%, calc((100% - 1220px) / 2));
  background: #1e211f;
  color: #fff;
}
.joya-discover .joya-section-head span {
  color: #c49a63;
}
.joya-discover .joya-section-head h2 {
  color: #fff;
}
.joya-discover-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.joya-discover-card {
  color: #fff;
  text-decoration: none;
}
.joya-discover-card img {
  display: block;
  width: 100%;
  height: 275px;
  object-fit: cover;
}
.joya-discover-card strong {
  display: block;
  background: #f3eee5;
  color: #202421;
  padding: 24px;
  font:
    24px Georgia,
    serif;
}
.joya-discover-card p {
  min-height: 72px;
}
.joya-discover-card em {
  color: #d2aa75;
  font-style: normal;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 2px;
}
.joya-restaurant {
  width: min(1220px, 90%);
  margin: 120px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #f3eee5;
}
.joya-restaurant img {
  width: 100%;
  height: 520px;
  object-fit: cover;
}
.joya-restaurant div {
  padding: 70px;
}
.joya-restaurant span {
  color: #a67f4c;
}
.joya-restaurant h2 {
  font:
    48px Georgia,
    serif;
  margin: 16px 0;
}
.joya-restaurant p {
  color: #5d6664;
  line-height: 1.9;
}
.joya-restaurant a {
  border-color: #a67f4c;
  background: #a67f4c;
}
.joya-home-main + .joya-footer {
  margin-top: 0;
}
@media (max-width: 900px) {
  .joya-home-hero {
    height: 78vh;
    min-height: 540px;
  }
  .joya-home-caption h1 {
    font-size: 44px;
  }
  .joya-intro {
    grid-template-columns: 1fr;
    gap: 45px;
    padding: 80px 0;
  }
  .joya-intro-images {
    height: 470px;
  }
  .joya-experience {
    height: 460px;
  }
  .joya-discover-grid {
    grid-template-columns: 1fr;
  }
  .joya-discover-card p {
    min-height: 0;
  }
  .joya-restaurant {
    grid-template-columns: 1fr;
  }
  .joya-restaurant div {
    padding: 45px;
  }
  .joya-restaurant img {
    height: 380px;
  }
}
@media (max-width: 520px) {
  .joya-home-caption {
    left: 7%;
    right: 7%;
  }
  .joya-home-caption h1 {
    font-size: 37px;
  }
  .joya-home-caption p {
    font-size: 15px;
  }
  .joya-dots {
    display: none;
  }
  .joya-intro-copy h2,
  .joya-experience h2,
  .joya-restaurant h2 {
    font-size: 36px;
  }
  .joya-intro-images {
    height: 360px;
  }
  .joya-discover {
    padding-top: 70px;
    padding-bottom: 70px;
  }
  .joya-restaurant div {
    padding: 32px;
  }
}