/*
 * SEO landing pages (e.g. /luxury-apartments-mombasa). Built on the same
 * sections as /luxury-apartments-westlands-nairobi; the content blocks use
 * <h2> headings where that page uses <h3>, so they get the same styling here.
 */

/* Long keyword-rich H1s: scale the hero heading down from 54px. */
.landing-hero .breadcrum_bigtxt {
  font-size: clamp(30px, 3.3vw, 46px);
  line-height: 1.15;
  max-width: 1100px;
}
@media (max-width: 767px) {
  .landing-hero .breadcrum_bigtxt {
    font-size: 26px;
  }
}

/* Feature blocks (dark panel beside an image): h2 styled like the h3. */
.program.program-one .ref-program .row .contentBox .contents h2 {
  color: #fff;
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  font-family: "Nexa";
  margin-bottom: 0.8rem;
  /* loyalty.css styles ".program .ref-program h2" as a giant uppercase title */
  text-transform: none;
  letter-spacing: normal;
}
@media (max-width: 767px) {
  .program.program-one .ref-program .row .contentBox .contents h2 {
    font-size: 22px;
  }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .program.program-one .ref-program .row .contentBox .contents h2 {
    font-size: 30px;
  }
}
/* loyalty.css only resets the 2nd item's spacing; lists here have 2-3 items. */
section.program.program-one .ref-program .row .contentBox .contents ul li:nth-child(n) p {
  margin-bottom: 1.2rem;
}
section.program.program-one .ref-program .row .contentBox .contents ul li:last-child p {
  margin-bottom: 0;
}

/* Section titles that are real headings (h2) but look like .bigtitle. */
h2.bigtitle {
  font-weight: inherit;
}
/* Section titles here are full phrases, not the 1-2 word display titles
   .bigtitle (95px) was designed for. */
.unlock-rewards h2.bigtitle,
.landing-text h2.bigtitle,
.landing-explore h2.bigtitle {
  font-size: clamp(30px, 3.4vw, 56px);
  line-height: 1.1;
  letter-spacing: -1px;
}
.landing-text {
  padding: 80px 0 70px;
}
.landing-text .blog-paratxt {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

/* "Explore more" internal links. */
.landing-explore .CommonBt {
  margin: 0 12px 16px;
}

/* Item labels are h3 (under each h2), styled like the original h4 / h5. */
.program.program-one .ref-program .row .contentBox .contents ul li h3 {
  color: #fff;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .program.program-one .ref-program .row .contentBox .contents ul li h3 {
    font-size: 20px;
  }
}
.unlock-rewards .rewardsBox h3 {
  color: #666;
  font-size: 20px;
  font-weight: 400;
  font-family: "Nexa";
}
.landing-explore {
  padding: 70px 0 60px;
}

/* Gallery: the source photos have different proportions; show every slide at
   the same 3:2 shape (cropped to fill, not stretched) so the carousel lines up. */
#gallery .galleryBox img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Testimonials: equal-height cards whatever the quote length. */
#testimonial .TestimonialSwiper .swiper-slide {
  height: auto;
}
#testimonial .textimonailBox {
  height: 100%;
}
#testimonial .bigtitle {
  transform: translate(0, 20px) !important;
}

/* ---- Mobile / tablet fixes ---------------------------------------------- */

/* Overview title ("SMB Grand Riviera, Nyali") is 50px on every screen. */
@media (max-width: 991px) {
  #overview .blog-txt {
    font-size: 36px;
  }
}
@media (max-width: 767px) {
  #overview .blog-txt {
    font-size: 26px;
    line-height: 1.2;
  }
}