/* Hotel Jairose Palace — theme stylesheet.
   The original css/style.css and css/plugins.css were never archived by Wayback
   (0 of 30 assets captured), so this rebuilds the presentation layer against the
   class names that survive in the archived markup. All copy, structure and page
   layout come from the 2024-08-28 capture and are unchanged. */

:root {
  --gold: #b99160;
  --gold-dark: #9c7743;
  --ink: #1c1c1c;
  --muted: #7a7a7a;
  --cream: #f7f4ef;
  --line: #e6e0d6;
}

body {
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  line-height: 1.75;
  font-size: 15px;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { font-weight: 600; color: var(--ink); }
a { color: var(--gold-dark); text-decoration: none; transition: color .25s; }
a:hover { color: var(--gold); text-decoration: none; }
img { max-width: 100%; height: auto; }

.section-padding { padding: 90px 0; }
.bg-cream { background: var(--cream); }
.position-re { position: relative; }
.o-hidden { overflow: hidden; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.mb-30 { margin-bottom: 30px; }
.p-0 { padding: 0; }

/* section headings */
.section-subtitle {
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-weight: 600;
}
.section-title {
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 35px;
  line-height: 1.3;
}
.section-title .line,
.line {
  display: block;
  width: 70px;
  height: 2px;
  background: var(--gold);
  margin: 18px 0;
}
.text-center .line, .text-center .section-title .line { margin: 18px auto; }

/* nav */
.navbar {
  background: rgba(20, 20, 20, .96);
  padding: 14px 0;
  border: 0;
}
.navbar .logo { max-height: 52px; width: auto; }
.navbar .nav-link {
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px !important;
}
.navbar .nav-link:hover { color: var(--gold) !important; }
.navbar-toggler {
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
}
.navbar-toggler .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  margin: 4px 0;
}

/* hero */
header.slider-fade,
.header,
.banner-header {
  position: relative;
  min-height: 78vh;
  background: #141414;
  color: #fff;
  display: flex;
  align-items: center;
}
.bg-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
header .caption { position: relative; z-index: 3; }
header .caption h1,
header .caption h2,
header .caption h3 {
  color: #fff;
  font-size: 46px;
  font-weight: 700;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
header .caption span,
header .caption p { color: #f0ece6; }
header:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.65));
  z-index: 1;
}
.valign { display: flex; align-items: center; }
.v-middle { align-self: center; width: 100%; }

/* buttons */
.butn, .button, .btn-form1-submit, .btn {
  display: inline-block;
  background: var(--gold);
  color: #fff !important;
  border: 0;
  padding: 13px 34px;
  border-radius: 2px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .25s;
}
.butn:hover, .button:hover, .btn-form1-submit:hover, .btn:hover {
  background: var(--gold-dark);
  color: #fff !important;
}

/* booking bar */
.booking-box, .reservation, .form1 {
  background: #fff;
  padding: 26px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .12);
  border-radius: 3px;
}
select, input[type="text"], input[type="date"], input[type="email"], textarea {
  width: 100%;
  border: 1px solid var(--line);
  padding: 11px 12px;
  border-radius: 2px;
  background: #fff;
  font-size: 14px;
}

/* rooms */
.rooms3 .item, .rooms1 .item, .item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 30px;
  transition: box-shadow .3s, transform .3s;
}
.item:hover { box-shadow: 0 16px 44px rgba(0, 0, 0, .13); transform: translateY(-4px); }
.item .img img, .item img { width: 100%; display: block; object-fit: cover; }
.item .con, .item .content, .item .cont, .item .info { padding: 22px 24px 26px; }
.item h5, .item h4, .item h3 { font-size: 20px; margin-bottom: 8px; }
.item .price, .price {
  color: var(--gold);
  font-weight: 700;
  font-size: 19px;
}
.room-facilities { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 6px; }
.room-facilities li, .room-facilities div { font-size: 13px; color: var(--muted); }
.star-rating, .fa-star { color: var(--gold); font-size: 13px; }

/* services */
.services .item, .services-box {
  text-align: center;
  padding: 30px 20px;
  background: #fff;
  border: 1px solid var(--line);
}
.services img { max-width: 78px; margin: 0 auto 16px; display: block; }

/* about */
.about img { border-radius: 3px; }

/* footer */
.footer { background: #141414; color: #cfcfcf; padding-top: 70px; }
.footer h3, .footer h4, .footer h5 {
  color: #fff;
  font-size: 17px;
  margin-bottom: 20px;
  letter-spacing: .5px;
}
.footer a { color: #cfcfcf; }
.footer a:hover { color: var(--gold); }
.footer-column { margin-bottom: 34px; }
.footer-contact-text { margin-bottom: 12px; font-size: 14px; }
.footer-about-social-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  margin-right: 8px;
}
.footer-about-social-list a:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  margin-top: 24px;
  padding: 22px 0;
  font-size: 13px;
}
.footer-logo, .footer img { max-height: 56px; width: auto; }

/* the archived markup relies on a scroll-reveal plugin that was never captured;
   without it these blocks would stay invisible, so force them visible */
.animate-box { opacity: 1 !important; visibility: visible !important; }

@media (max-width: 991px) {
  .section-padding { padding: 60px 0; }
  header.slider-fade { min-height: 62vh; }
  header .caption h1, header .caption h2, header .caption h3 { font-size: 30px; }
  .section-title { font-size: 26px; }
}

/* ---- carousel / grid fallbacks ----
   The owl-carousel plugin was never archived, so its layout rules are gone.
   These make the surviving markup lay out correctly as static blocks. */

/* hero: full-bleed single slide */
header.slider-fade { display: block; min-height: 0; }
header .owl-carousel, header .owl-theme { display: block; width: 100%; margin: 0; }
header .owl-carousel > .item {
  display: block;
  width: 100% !important;
  min-height: 82vh;
  position: relative;
  margin: 0;
  border: 0;
  background: #141414;
}
header .owl-carousel > .item:hover { transform: none; box-shadow: none; }
header .item .v-middle.caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  z-index: 3;
}
header .item .caption .container { width: 100%; }
header .caption h4 {
  color: #fff;
  font-size: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 14px;
  font-weight: 600;
}
header .caption h1 { font-size: 52px; margin-bottom: 22px; }
header .star-rating:before {
  content: "\f005";
  font-family: FontAwesome;
  color: var(--gold);
  margin-right: 3px;
}

/* room cards: the .square bg-img blocks need a real height */
.rooms3 .owl-carousel, .rooms1 .owl-carousel,
.rooms3 .owl-theme, .rooms1 .owl-theme { display: block; }
.rooms3 .item, .rooms1 .item {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100% !important;
  margin-bottom: 34px;
  background: #fff;
}
.square.bg-img {
  min-height: 320px;
  flex: 0 0 44%;
  max-width: 44%;
  background-size: cover;
  background-position: center;
}
.rooms3 .item > *:not(.square), .rooms1 .item > *:not(.square) {
  flex: 1 1 56%;
  max-width: 56%;
  padding: 30px 34px;
}
.rooms3 .item .price, .rooms1 .item .price { display: block; margin-bottom: 4px; }

/* services icons shouldn't stretch */
.services img, .item img { max-width: 100%; }
.services .item { display: block; }

@media (max-width: 767px) {
  header .owl-carousel > .item { min-height: 62vh; }
  header .caption h1 { font-size: 30px; }
  .square.bg-img { flex: 0 0 100%; max-width: 100%; min-height: 220px; }
  .rooms3 .item > *:not(.square), .rooms1 .item > *:not(.square) { flex: 0 0 100%; max-width: 100%; }
}

/* ---- square-flip room cards ----
   Original theme flipped .square (photo) to .square2 (details) on hover.
   Rebuilt here as a stacked card: photo on top with the title overlaid at the
   bottom, details below — same content, same order, no plugin needed. */
.rooms3 .owl-carousel, .rooms1 .owl-carousel { display: flex; flex-wrap: wrap; gap: 30px; }
.square-flip {
  flex: 1 1 320px;
  max-width: calc(33.333% - 20px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .3s, transform .3s;
}
.square-flip:hover { box-shadow: 0 16px 44px rgba(0,0,0,.13); transform: translateY(-4px); }

.square-flip .square {
  position: relative;
  min-height: 260px;
  flex: none;
  max-width: none;
  background-size: cover;
  background-position: center;
}
.square-flip .square:after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.72) 100%);
}
.square-flip .square .category {
  position: absolute; top: 14px; left: 14px; z-index: 3;
}
.square-flip .square .category a {
  background: var(--gold); color: #fff !important;
  padding: 6px 16px; border-radius: 2px;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600;
}
.square-flip .square-container {
  position: absolute; inset: auto 0 0 0; z-index: 3;
  padding: 18px 22px;
  display: block !important;
}
.square-flip .box-title { color: #fff; font-size: 21px; font-weight: 700; line-height: 1.35; }
.square-flip .box-title span, .square-flip .box-title .price { color: var(--gold); font-size: 15px; }
.square-flip .flip-overlay { display: none; }

.square-flip .square2 {
  flex: 1 1 auto; max-width: none;
  padding: 22px 24px 26px;
  background: #fff;
}
.square-flip .square-container2 { display: block; }
.square-flip .square2 .box-title { color: var(--ink); font-size: 19px; margin-bottom: 8px; }
.square-flip .room-facilities { margin-bottom: 16px !important; }
.square-flip .room-facilities ul { list-style: none; padding: 0; margin: 0; }
.square-flip .room-facilities li { font-size: 13px; color: var(--muted); padding: 3px 0; }
.square-flip .room-facilities .fa { color: var(--gold); width: 18px; }
.btn-line a, a.btn-line {
  display: inline-block; border: 1px solid var(--gold);
  color: var(--gold-dark) !important; padding: 9px 22px;
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600;
}
.btn-line a:hover, a.btn-line:hover { background: var(--gold); color: #fff !important; }

@media (max-width: 991px) { .square-flip { max-width: calc(50% - 15px); } }
@media (max-width: 640px) { .square-flip { max-width: 100%; } }