/* =========================================

   EDWIN HOME — COMPLETE WEBSITE STYLES

========================================= */

:root {

  --green: #77746F;

  --green-dark: #45433F;

  --green-light: #918B81;

  --gold: #C5A15B;

  --gold-light: #E8D5A8;

  --cream: #F8F4EB;

  --white: #FFFFFF;

  --text: #45433F;

  --muted: #77736B;

  --border: #DCD4C5;

  --serif: "Cormorant Garamond", Georgia, serif;

  --sans: "DM Sans", Arial, sans-serif;

}

* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

html {

  scroll-behavior: smooth;

  scroll-padding-top: 90px;

}

body {

  font-family: var(--sans);

  color: var(--text);

  background: var(--cream);

  line-height: 1.7;

  overflow-x: hidden;

}

img {

  display: block;

  width: 100%;

}

a {

  color: inherit;

  text-decoration: none;

}

button,

input,

select,

textarea {

  font: inherit;

}

button,

a {

  -webkit-tap-highlight-color: transparent;

}

button:focus-visible,

a:focus-visible,

input:focus-visible,

select:focus-visible,

textarea:focus-visible {

  outline: 2px solid var(--gold);

  outline-offset: 4px;

}

::selection
{

  background: var(--gold);

  color: var(--green-dark);

}

/* Announcement */

.announcement-bar {

  background: var(--green-dark);

  color: var(--gold-light);

  padding: 9px 16px;

  text-align: center;

  font-size: 10px;

  letter-spacing: 2.5px;

  font-weight: 600;

}

/* Navigation */

.header {

  position: sticky;

  top: 0;

  z-index: 1000;

  background: rgba(248, 245, 239, 0.97);

  border-bottom: 1px solid rgba(23, 59, 50, 0.09);

  backdrop-filter: blur(14px);

}

.nav-container {

  width: min(1240px, 90%);

  min-height: 86px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

}

.brand {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 2px;

  flex-shrink: 0;

  padding: 8px 0;

  text-align: center;

}

.brand-logo {

  display: block;

  width: 48px;

  height: 43px;

  object-fit: contain;

  margin-bottom: 2px;

}

.brand-text {

  display: flex;

  flex-direction: column;

  align-items: center;

  line-height: 1.2;

}

.brand-text strong {

  color: var(--green-dark);

  font-size: 14px;

  font-weight: 700;

  letter-spacing: 2px;

}

.brand-text small {

  margin-top: 4px;

  color: var(--muted);

  font-size: 8px;

  letter-spacing: 1.5px;

}

.nav-menu {

  display: flex;

  align-items: center;

  gap: clamp(16px, 2.5vw, 34px);

}

.nav-menu > a {

  color: var(--green-dark);

  font-size: 12px;

  font-weight: 600;

  transition: color 0.2s ease;

}

.nav-menu > a:hover {

  color: #a47731;

}

.nav-menu .nav-booking {

  display: inline-flex;

  align-items: center;

  gap: 13px;

  padding: 13px 18px;

  background: var(--green);

  color: var(--white);

}

.nav-booking span {

  color: var(--gold);

  font-size: 17px;

}

.menu-toggle {

  display: none;

  width: 42px;

  height: 42px;

  border: 1px solid var(--border);

  background: transparent;

  cursor: pointer;

  padding: 10px;

}

.menu-toggle span {

  display: block;

  height: 2px;

  width: 100%;

  margin: 4px 0;

  background: var(--green);

  transition: transform 0.2s ease;

}

/* Shared elements */

/* Bold, high-contrast navigation */

.header {

  position: sticky;

  top: 0;

  z-index: 1000;

  background: var(--cream);

  border-bottom: 2px solid var(--gold);

  box-shadow: 0 5px 18px rgba(69, 67, 63, 0.12);

}

.nav-container {

  width: min(1240px, 92%);

  min-height: 100px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

}

.nav-menu {

  display: flex;

  align-items: center;

  gap: clamp(16px, 2vw, 30px);

}

.nav-menu > a {

  color: var(--green-dark);

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 0.3px;

  transition: color 0.2s ease;

}

.nav-menu > a:hover {

  color: #A47731;

}

.nav-menu .nav-booking {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 13px;

  padding: 15px 21px;

  background: var(--gold);

  color: var(--green-dark);

  border: 1px solid var(--gold);

  font-weight: 700;

  box-shadow: 0 4px 10px rgba(69, 67, 63, 0.12);

}

.nav-menu .nav-booking:hover {

  background: var(--green-dark);

  border-color: var(--green-dark);

  color: var(--cream);

}

.nav-booking span {

  color: inherit;

  font-size: 17px;

}

.section-padding {

  padding: 110px 0;

}

.section-label {

  margin-bottom: 17px;

  color: #a47731;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 3px;

}

.section-title {

  color: var(--green-dark);

  font-family: var(--serif);

  font-size: clamp(39px, 5vw, 62px);

  font-weight: 500;

  line-height: 1.08;

}

.section-title em {

  color: #9c743c;

  font-weight: 400;

}

.btn {

  min-height: 54px;

  padding: 15px 23px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 22px;

  border: 1px solid transparent;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.7px;

  cursor: pointer;

  transition:

    background 0.25s ease,

    color 0.25s ease,

    transform 0.25s ease;

}

.btn:hover {

  transform: translateY(-2px);

}

.btn-gold {

  background: var(--gold);

  color: var(--green-dark);

}

.btn-gold:hover {

  background: var(--gold-light);

}

.btn-outline {

  border-color: rgba(255, 255, 255, 0.7);

  color: var(--white);

  background: transparent;

}

.btn-outline:hover {

  background: var(--white);

  color: var(--green-dark);

}

/* Hero slideshow */

.hero {

  position: relative;

  isolation: isolate;

  min-height: 680px;

  height: min(820px, calc(100svh - 110px));

  overflow: hidden;

  display: flex;

  align-items: center;

  background: var(--green-dark);

  color: var(--white);

}

.hero-slides {

  position: absolute;

  inset: 0;

  z-index: 0;

}

.hero-slide {

  position: absolute;

  inset: 0;

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  opacity: 0;

  transform: scale(1.04);

  transition: opacity 1s ease, transform 6s ease;

}

.hero-slide.active {

  opacity: 1;

  transform: scale(1);

}

.hero-overlay {

  position: absolute;

  inset: 0;

  z-index: 1;

  background:

    linear-gradient(

      90deg,

      rgba(8, 27, 22, 0.86) 0%,

      rgba(8, 27, 22, 0.66) 43%,

      rgba(8, 27, 22, 0.18) 100%

    ),

    linear-gradient(

      0deg,

      rgba(8, 27, 22, 0.35),

      transparent 40%

    );

}

.hero-content {

  position: relative;

  z-index: 2;

  width: min(1240px, 90%);

  margin: -30px auto 30px;

}

.hero-eyebrow {

  color: var(--gold-light);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 4px;

  margin-bottom: 25px;

}

.hero h1 {

  max-width: 760px;

  font-family: var(--serif);

  font-size: clamp(58px, 8vw, 100px);

  line-height: 0.98;

  font-weight: 500;

  letter-spacing: -1.5px;

}

.hero h1 em {

  color: var(--gold);

  font-weight: 400;

}

.hero-description {

  max-width: 470px;

  margin: 28px 0 32px;

  color: rgba(255, 255, 255, 0.87);

  font-size: 14px;

  line-height: 1.9;

}

.hero-buttons {

  display: flex;

  flex-wrap: wrap;

  gap: 14px;

}

.hero-bottom {

  position: absolute;

  z-index: 2;

  left: 5%;

  right: 5%;

  bottom: 34px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  border-top: 1px solid rgba(255, 255, 255, 0.25);

  padding-top: 19px;

}

.hero-bottom p,

.scroll-link {

  color: rgba(255, 255, 255, 0.88);

  font-size: 10px;

  letter-spacing: 1px;

}

.scroll-link {

  display: flex;

  align-items: center;

  gap: 12px;

  font-weight: 700;

}

.scroll-link span {

  color: var(--gold);

  font-size: 20px;

}

.hero-controls {

  position: absolute;

  z-index: 3;

  right: 5%;

  bottom: 100px;

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 15px;

}

.hero-counter {

  display: flex;

  align-items: center;

  gap: 12px;

  color: rgba(255, 255, 255, 0.75);

  font-size: 11px;

}

#heroCurrent {

  color: var(--gold);

  font-size: 21px;

}

.counter-line {

  width: 36px;

  height: 1px;

  background: rgba(255, 255, 255, 0.5);

}

.hero-dots {

  display: flex;

  gap: 8px;

}

.hero-dot {

  width: 8px;

  height: 8px;

  padding: 0;

  border: 1px solid var(--white);

  border-radius: 50%;

  background: transparent;

  cursor: pointer;

}

.hero-dot.active {

  background: var(--gold);

  border-color: var(--gold);

  transform: scale(1.2);

}

/* About */

.about {

  background: var(--cream);

}

.about-container {

  width: min(1150px, 88%);

  margin: 0 auto;

  display: grid;

  grid-template-columns: 1fr 0.9fr;

  align-items: center;

  gap: clamp(40px, 8vw, 100px);

}

.about-image-wrap {

  position: relative;

  min-width: 0;

  padding: 0 25px 25px 0;

  width: 100%;

  overflow: hidden;

}

.about-image-wrap::after {

  content: "";

  position: absolute;

  z-index: 0;

  top: 25px;

  right: 0;

  bottom: 0;

  left: 25px;

  border: 1px solid var(--gold);

}

.about-image {

  width: 100%;

  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center;

}

.image-caption {

  position: absolute;

  z-index: 2;

  right: -1px;

  bottom: 45px;

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 15px 20px;

  background: var(--green);

  color: var(--white);

  font-size: 11px;

}

.caption-mark {

  color: var(--gold);

  font-family: var(--serif);

  font-size: 28px;

}

.about-content {

  padding: 15px 0;

}

.about-text {

  margin-top: 22px;

  color: var(--muted);

  font-size: 13px;

  line-height: 2;

}

.text-link {

  display: inline-flex;

  align-items: center;

  gap: 20px;

  margin-top: 28px;

  padding-bottom: 8px;

  border-bottom: 1px solid var(--gold);

  color: var(--green);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 1px;

}

.text-link span {

  color: #a47731;

  font-size: 16px;

}

/* Rooms */

.rooms {

  background: #eeebe3;

}

.section-heading {

  width: min(1150px, 88%);

  margin: 0 auto 48px;

  text-align: center;

}

.section-heading > p:last-child {

  margin-top: 18px;

  color: var(--muted);

  font-size: 13px;

}

.rooms-grid {

  width: min(1150px, 88%);

  margin: 0 auto;

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 25px;

}

.room-card {

  min-width: 0;

  background: var(--cream);

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.room-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 18px 35px rgba(20, 48, 39, 0.09);

}

.room-image {

  position: relative;

  height: 270px;

  overflow: hidden;

  background: #d8d3c8;

}

.room-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.5s ease;

}

.room-card:hover .room-image img {

  transform: scale(1.04);

}

.room-tag {

  position: absolute;

  left: 17px;

  top: 17px;

  padding: 7px 10px;

  background: var(--green);

  color: var(--gold-light);

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 1.5px;

}

.room-details {

  padding: 26px 23px 28px;

}

.room-number {

  color: #a47731;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 1.7px;

}

.room-details h3 {

  margin-top: 7px;

  color: var(--green-dark);

  font-family: var(--serif);

  font-size: 31px;

  font-weight: 500;

  line-height: 1.2;

}

.room-details > p:not(.room-number) {

  min-height: 60px;

  margin-top: 12px;

  color: var(--muted);

  font-size: 12px;

  line-height: 1.8;

}

.room-link {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  margin-top: 18px;

  color: var(--green);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.5px;

}

.room-link span {

  color: #a47731;

  font-size: 15px;

}

.availability-note {

  width: min(1150px, 88%);

  margin: 22px auto 0;

  color: var(--muted);

  font-size: 11px;

  text-align: center;

}

/* Amenities */

.experience {

  background: var(--green);

  color: var(--white);

}

.experience-heading {

  width: min(1150px, 88%);

  margin: 0 auto 48px;

}

.experience .section-title {

  color: var(--white);

}

.experience .section-title em {

  color: var(--gold);

}

.amenities-grid {

  width: min(1150px, 88%);

  margin: 0 auto;

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  border-top: 1px solid rgba(255, 255, 255, 0.2);

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

}

.amenity {

  padding: 32px 23px;

  border-right: 1px solid rgba(255, 255, 255, 0.17);

}

.amenity:first-child {

  padding-left: 0;

}

.amenity:last-child {

  border-right: 0;

}

.amenity-icon {

  color: var(--gold);

  font-family: var(--serif);

  font-size: 32px;

}

.amenity h3 {

  margin-top: 14px;

  color: var(--white);

  font-family: var(--serif);

  font-size: 23px;

  font-weight: 500;

  line-height: 1.25;

}

.amenity p {

  margin-top: 10px;

  color: rgba(255, 255, 255, 0.68);

  font-size: 11px;

  line-height: 1.9;

}

.experience .availability-note {

  color: rgba(255, 255, 255, 0.65);

}

/* Booking form */

.booking {

  background: var(--cream);

}

.booking-container {

  width: min(1150px, 88%);

  margin: 0 auto;

  display: grid;

  grid-template-columns: 0.8fr 1.2fr;

  align-items: start;

  gap: clamp(40px, 8vw, 100px);

}

.booking-intro {

  padding-top: 25px;

}

.booking-intro > p:not(.section-label) {

  margin-top: 25px;

  color: var(--muted);

  font-size: 13px;

  line-height: 2;

}

.booking-address {

  margin-top: 45px;

  padding-top: 22px;

  border-top: 1px solid var(--border);

}

.booking-address span {

  color: #a47731;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 2px;

}

.booking-address p {

  margin-top: 9px;

  color: var(--green-dark);

  font-size: 12px;

  line-height: 1.9;

}

.booking-form {

  padding: clamp(25px, 4vw, 45px);

  background: var(--white);

  border: 1px solid var(--border);

  box-shadow: 0 15px 50px rgba(25, 48, 39, 0.05);

}

.booking-form h3 {

  color: var(--green-dark);

  font-family: var(--serif);

  font-size: 34px;

  font-weight: 500;

  line-height: 1.2;

}

.form-intro {

  margin-top: 9px;

  margin-bottom: 28px;

  color: var(--muted);

  font-size: 12px;

}

.form-row {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 18px;

}

.form-group {

  min-width: 0;

  margin-bottom: 19px;

}

.form-group label {

  display: block;

  margin-bottom: 7px;

  color: var(--green-dark);

  font-size: 11px;

  font-weight: 700;

}

.form-group input,

.form-group select,

.form-group textarea {

  display: block;

  width: 100%;

  min-width: 0;

  min-height: 48px;

  padding: 12px;

  border: 1px solid #dedfd8;

  border-radius: 0;

  outline: none;

  background: #fcfbf8;

  color: var(--text);

  font-size: 12px;

}

.form-group textarea {

  resize: vertical;

}

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

  border-color: #a47731;

}

.submit-button {

  width: 100%;

  margin-top: 4px;

  border: 0;

}

.form-status {

  margin-top: 13px;

  font-size: 12px;

  line-height: 1.7;

}

.form-status:empty {

  display: none;

}

.form-status.error {

  color: #b3261e;

}

.form-status.success {

  color: var(--green);

}

.form-disclaimer {

  margin-top: 17px;

  color: var(--muted);

  font-size: 10px;

  line-height: 1.8;

}

/* Contact */

.contact {

  position: relative;

  overflow: hidden;

  background:

    linear-gradient(rgba(12, 38, 30, 0.93), rgba(12, 38, 30, 0.93)),

    url("public/images/room-2.jpeg") center / cover no-repeat;

  text-align: center;

  color: var(--white);

}

.contact-content {

  width: min(700px, 88%);

  margin: 0 auto;

}

.contact .section-title {

  color: var(--white);

}

.contact .section-title em {

  color: var(--gold);

}

.contact-content > p:not(.section-label) {

  margin: 22px auto 0;

  color: rgba(255, 255, 255, 0.75);

  font-size: 13px;

  line-height: 1.9;

}

.contact-address {

  margin-bottom: 27px !important;

}

/* Footer */

.footer {

  padding: 38px 20px;

  background: var(--green-dark);

  color: rgba(255, 255, 255, 0.7);

  text-align: center;

}

.footer-brand {

  color: var(--white);

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 3px;

}

.footer-brand span {

  color: var(--gold);

}

.footer > p {

  margin-top: 8px;

  font-size: 11px;

}

.footer .copyright {

  margin-top: 22px;

  color: rgba(255, 255, 255, 0.48);

  font-size: 10px;

}

/* Tablet */

@media (max-width: 950px) {

  .nav-container {

    width: 92%;

    min-height: 76px;

  }

  .menu-toggle {

    display: block;

    position: relative;

    z-index: 1002;

  }

  .nav-menu {

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    display: none;

    flex-direction: column;

    align-items: stretch;

    gap: 0;

    padding: 12px 4% 22px;

    background: var(--cream);

    border-bottom: 1px solid var(--border);

    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.07);

  }

  .nav-menu.open {

    display: flex;

  }

  .nav-menu > a {

    padding: 13px 5px;

    border-bottom: 1px solid var(--border);

  }

  .nav-menu .nav-booking {

    justify-content: space-between;

    margin-top: 12px;

    padding: 14px;

  }

  .about-container {

    grid-template-columns: 1fr 1fr;

    gap: 40px;

  }

  .about-image {

    height: 410px;

  }

  .rooms-grid {

    gap: 16px;

  }

  .room-image {

    height: 220px;

  }

  .room-details {

    padding: 22px 16px;

  }

  .amenities-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

  .amenity {

    border-bottom: 1px solid rgba(255, 255, 255, 0.17);

  }

  .amenity:nth-child(2) {

    border-right: 0;

  }

  .amenity:nth-child(3),

  .amenity:nth-child(4) {

    border-bottom: 0;

  }

  .amenity:nth-child(3) {

    padding-left: 0;

  }

  .booking-container {

    gap: 35px;

  }

}

/* Mobile */

@media (max-width: 650px) {

  .announcement-bar {

    font-size: 8px;

    letter-spacing: 1.3px;

    padding: 8px 10px;

  }

  .nav-container {

    min-height: 72px;

  }

  .brand-icon {

    width: 38px;

    height: 38px;

    font-size: 25px;

  }

  .brand-text strong {

    font-size: 12px;

    letter-spacing: 1.5px;

  }

  .brand-text small {

    font-size: 7px;

    letter-spacing: 1px;

  }

  .hero {

    min-height: 680px;

    height: calc(100svh - 100px);

    max-height: 820px;

  }

  .hero-overlay {

    background:

      linear-gradient(

        90deg,

        rgba(8, 27, 22, 0.82),

        rgba(8, 27, 22, 0.43)

      ),

      linear-gradient(

        0deg,

        rgba(8, 27, 22, 0.58),

        transparent 75%

      );

  }

  .hero-slide {

    background-position: center;

  }

  .hero-content {

    width: 88%;

    margin: -45px auto 30px;

  }

  .hero-eyebrow {

    font-size: 9px;

    letter-spacing: 2.5px;

    margin-bottom: 20px;

  }

  .hero h1 {

    font-size: clamp(53px, 12vw, 74px);

    letter-spacing: -0.5px;

  }

  .hero-description {

    max-width: 360px;

    margin: 22px 0 26px;

    font-size: 12px;

  }

  .hero-buttons {

    align-items: flex-start;

    flex-direction: column;

    gap: 11px;

  }

  .btn {

    min-height: 49px;

    padding: 13px 17px;

    font-size: 10px;

  }

  .hero-bottom {

    left: 6%;

    right: 6%;

    bottom: 22px;

    padding-top: 13px;

  }

  .hero-bottom p {

    max-width: 65%;

    font-size: 8px;

    line-height: 1.6;

  }

  .scroll-link {

    gap: 5px;

    font-size: 8px;

  }

  .hero-controls {

    right: 6%;

    bottom: 88px;

    gap: 10px;

  }

  .hero-counter {

    font-size: 9px;

  }

  #heroCurrent {

    font-size: 17px;

  }

  .section-padding {

    padding: 75px 0;

  }

  .section-title {

    font-size: clamp(39px, 10vw, 53px);

  }

  .about-container {

    width: 88%;

    grid-template-columns: 1fr;

    gap: 45px;

  }

  .about-image-wrap {

    padding: 0 16px 16px 0;

  }

  .about-image {

    height: 340px;

  }

  .about-image-wrap::after {

    top: 16px;

    left: 16px;

  }

  .image-caption {

    bottom: 28px;

    padding: 10px 13px;

    font-size: 10px;

  }

  .about-text {

    margin-top: 16px;

    font-size: 12px;

  }

  .section-heading {

    margin-bottom: 32px;

  }

  .rooms-grid {

    grid-template-columns: 1fr;

    gap: 23px;

  }

  .room-image {

    height: 280px;

  }

  .room-details {

    padding: 23px;

  }

  .room-details h3 {

    font-size: 30px;

  }

  .room-details > p:not(.room-number) {

    min-height: auto;

  }

  .amenities-grid {

    grid-template-columns: 1fr 1fr;

  }

  .amenity {

    padding: 24px 15px;

  }

  .amenity:first-child,

  .amenity:nth-child(3) {

    padding-left: 0;

  }

  .amenity:nth-child(2) {

    padding-right: 0;

  }

  .amenity h3 {

    font-size: 21px;

  }

  .amenity p {

    font-size: 10px;

  }

  .booking-container {

    width: 88%;

    grid-template-columns: 1fr;

    gap: 35px;

  }

  .booking-intro {

    padding-top: 0;

  }

  .booking-address {

    margin-top: 25px;

  }

  .booking-form {

    padding: 23px 18px;

  }

  .booking-form h3 {

    font-size: 30px;

  }

  .form-row {

    grid-template-columns: 1fr;

    gap: 0;

  }

  .form-group {

    margin-bottom: 16px;

  }

  .contact-content {

    width: 90%;

  }

  .footer {

    padding: 32px 16px;

  }

}

/* Reduced motion preference */

@media (prefers-reduced-motion: reduce) {

  html {

    scroll-behavior: auto;

  }

  *,

  *::before,

  *::after {

    transition-duration: 0.01ms !important;

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

  }

}

/* Grey, gold and cream finishing touches */

.rooms {

  background: #EAE6DE;

}

.room-card,

.booking-form {

  background: #FFFCF6;

}

.experience {

  background: #56534E;

}

.experience .section-title,

.amenity h3 {

  color: var(--cream);

}

.experience .section-title em,

.amenity-icon {

  color: var(--gold-light);

}

.btn-gold {

  background: var(--gold);

  color: #302D28;

}

.btn-gold:hover {

  background: var(--gold-light);

}

.text-link,

.room-link {

  color: var(--green-dark);

}

.section-label,

.room-number {

  color: #987438;

}

@media (max-width: 950px) {

  .nav-container {

    min-height: 90px;

  }

  .brand-logo {

    width: 42px;

    height: 36px;

  }

  .nav-menu {

    background: var(--cream);

  }

  .nav-menu > a {

    padding: 13px 5px;

  }

}

/* =========================================

   EDWIN HOME — UPDATED BRANDING & COLOURS

========================================= */

/* Larger logo stacked above the hotel name */

.brand {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 3px;

  padding: 8px 0;

  text-align: center;

}

.brand-logo {

  width: 76px;

  height: 58px;

  object-fit: contain;

  margin-bottom: 2px;

}

.brand-text {

  display: flex;

  flex-direction: column;

  align-items: center;

  line-height: 1.2;

}

.brand-text strong {

  font-family: "Cinzel", Georgia, serif;

  font-size: 17px;

  font-weight: 700;

  letter-spacing: 2.5px;

  color: #45433F;

}

.brand-text small {

  margin-top: 5px;

  font-family: "DM Sans", Arial, sans-serif;

  font-size: 8px;

  font-weight: 600;

  letter-spacing: 2px;

  color: #77736B;

}

/* Give the taller logo enough space in the navigation */

.nav-container {

  min-height: 120px;

}

/* Remove green from the slideshow overlay */

.hero-overlay {

  background:

    linear-gradient(

      90deg,

      rgba(38, 37, 35, 0.78) 0%,

      rgba(38, 37, 35, 0.54) 45%,

      rgba(38, 37, 35, 0.12) 100%

    ),

    linear-gradient(

      0deg,

      rgba(38, 37, 35, 0.30),

      transparent 40%

    );

}

/* Remove the green-tinted background image at the bottom */

.contact {

  background: #56534E;

  color: #FFFFFF;

}

.contact .section-title {

  color: #F8F4EB;

}

.contact .section-title em {

  color: #E8D5A8;

}

/* Keep the gold-and-cream theme consistent */

.header {

  background: #F8F4EB;

  border-bottom: 2px solid #C5A15B;

}

@media (max-width: 950px) {

  .nav-container {

    min-height: 105px;

  }

  .brand-logo {

    width: 66px;

    height: 48px;

  }

  .brand-text strong {

    font-size: 15px;

  }

}

@media (max-width: 650px) {

  .nav-container {

    min-height: 94px;

  }

  .brand-logo {

    width: 56px;

    height: 40px;

  }

  .brand-text strong {

    font-size: 13px;

    letter-spacing: 1.8px;

  }

  .brand-text small {

    font-size: 7px;

    letter-spacing: 1.2px;

  }

  .hero-overlay {

    background:

      linear-gradient(

        90deg,

        rgba(38, 37, 35, 0.76),

        rgba(38, 37, 35, 0.35)

      ),

      linear-gradient(

        0deg,

        rgba(38, 37, 35, 0.40),

        transparent 75%

      );

  }

}

/* =========================================

   ROOM COLLECTION — DETAILS AND PRICES

========================================= */

.rooms-intro {

  margin-top: 18px;

  color: #56534E;

  font-family: "Cormorant Garamond", Georgia, serif;

  font-size: 22px;

}

.rooms-tagline {

  margin-top: 8px;

  color: #987438;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 1.3px;

}

.rooms-description {

  max-width: 680px;

  margin: 15px auto 0;

  color: #77736B;

  font-size: 12px;

  line-height: 2;

}

.room-category {

  width: min(1150px, 88%);

  margin: 0 auto 65px;

}

.room-category:last-child {

  margin-bottom: 0;

}

.category-heading {

  display: flex;

  align-items: center;

  gap: 18px;

  margin-bottom: 25px;

  padding-bottom: 14px;

  border-bottom: 1px solid #C5A15B;

}

.category-heading > span {

  color: #987438;

  font-family: "Cormorant Garamond", Georgia, serif;

  font-size: 28px;

}

.category-heading h3 {

  color: #45433F;

  font-family: "Cormorant Garamond", Georgia, serif;

  font-size: 30px;

  font-weight: 600;

}

.category-heading h3 em {

  color: #987438;

  font-weight: 400;

}

.room-category .rooms-grid {

  width: 100%;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  align-items: stretch;

}

.room-category .room-card {

  display: flex;

  flex-direction: column;

  border: 1px solid #E0D8C9;

}

.room-category .room-image {

  height: 240px;

  flex-shrink: 0;

}

.room-category .room-details {

  display: flex;

  flex-direction: column;

  flex: 1;

}

.room-category .room-details h3 {

  font-family: "Cinzel", Georgia, serif;

  font-size: 24px;

  font-weight: 600;

  letter-spacing: 1px;

}

.room-type {

  margin-top: 7px;

  color: #987438;

  font-size: 11px;

  font-weight: 700;

}

.room-category .room-details .room-description {

  min-height: 76px;

  margin-top: 12px;

  color: #77736B;

  font-size: 12px;

  line-height: 1.8;

}

.room-price {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  margin-top: 18px;

  padding: 15px 0;

  border-top: 1px solid #E0D8C9;

  border-bottom: 1px solid #E0D8C9;

}

.room-price span {

  color: #77736B;

  font-size: 10px;

}

.room-price strong {

  color: #8f7237;

  font-family: "Cormorant Garamond", Georgia, serif;

  font-size: 25px;

  font-weight: 700;

}

.room-category .room-link {

  justify-content: space-between;

  margin-top: auto;

  padding-top: 20px;

  line-height: 1.8;

}

@media (max-width: 950px) {

  .room-category .rooms-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}

@media (max-width: 650px) {

  .rooms-intro {

    font-size: 20px;

  }

  .rooms-tagline {

    font-size: 11px;

    line-height: 1.8;

  }

  .room-category {

    margin-bottom: 48px;

  }

  .category-heading h3 {

    font-size: 26px;

  }

  .room-category .rooms-grid {

    grid-template-columns: 1fr;

    gap: 20px;

  }

  .room-category .room-image {

    height: 260px;

  }

  .room-category .room-details .room-description {

    min-height: auto;

  }

}

/* ==========================================

   BOOKING PAYMENT DETAILS

========================================== */

.payment-details {

  margin-top: 35px;

  padding: 30px;

  background: #f8f5ef;

  border: 1px solid #d9c9a5;

  border-radius: 12px;

  color: #292929;

}

.payment-details-header {

  margin-bottom: 24px;

}

.payment-eyebrow {

  display: block;

  margin-bottom: 10px;

  color: #a17b35;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 2px;

}

.payment-details h3 {

  margin: 0 0 12px;

  color: #252525;

  font-size: 26px;

}

.payment-details-header p,

.payment-notice {

  color: #666;

  line-height: 1.7;

  font-size: 14px;

}

.payment-account {

  padding: 22px;

  background: #fff;

  border: 1px solid #e5dfd2;

  border-radius: 10px;

}

.payment-account-row {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 15px;

  padding: 14px 0;

  border-bottom: 1px solid #eee9df;

}

.payment-account-row span {

  color: #777;

  font-size: 14px;

}

.payment-account-row strong {

  text-align: right;

  color: #252525;

  font-size: 15px;

}

.account-number {

  font-size: 20px !important;

  letter-spacing: 1px;

}

.copy-account-button {

  width: 100%;

  margin-top: 18px;

  padding: 14px 18px;

  border: none;

  border-radius: 6px;

  background: #b18a42;

  color: #fff;

  font-size: 14px;

  font-weight: 600;

  cursor: pointer;

  transition: background 0.2s ease;

}

.copy-account-button:hover {

  background: #8f6b2e;

}

.payment-notice {

  margin: 18px 0 0;

}

@media (max-width: 600px) {

  .payment-details {

    padding: 20px;

  }

  .payment-account {

    padding: 15px;

  }

  .payment-account-row {

    align-items: flex-start;

  }

  .payment-account-row strong {

    max-width: 60%;

    overflow-wrap: anywhere;

  }

}

.payment-choice {

  margin-bottom: 25px;

}

.payment-choice h4 {

  margin-bottom: 15px;

  color: #252525;

}

.payment-option {

  display: flex;

  align-items: flex-start;

  gap: 12px;

  padding: 16px;

  margin-bottom: 12px;

  border: 1px solid #ded6c7;

  border-radius: 8px;

  background: #fff;

  cursor: pointer;

}

.payment-option input {

  margin-top: 4px;

  accent-color: #b18a42;

}

.payment-option span {

  display: flex;

  flex-direction: column;

  gap: 5px;

}

.payment-option strong {

  color: #292929;

}

.payment-option small {

  color: #777;

  line-height: 1.5;

}

.payment-amount-display {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 12px;

  padding: 18px;

  margin-top: 18px;

  background: #292929;

  color: #fff;

  border-radius: 8px;

}

.payment-amount-display strong {

  color: #d9b66d;

  font-size: 22px;

}

.bank-payment-details {

    margin-top: 25px;

    padding: 22px;

    background: #f8f5ef;

    border: 1px solid #d8c7a2;

    border-radius: 12px;

}

.bank-payment-details h3 {

    margin-bottom: 8px;

    color: #8a6b32;

}

.bank-detail {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding: 12px 0;

    border-bottom: 1px solid #e4dccd;

}

.bank-detail span {

    color: #666;

}

.bank-detail strong {

    color: #252525;

}

#copyAccountNumber {

    padding: 9px 14px;

    border: none;

    border-radius: 6px;

    background: #a88746;

    color: white;

    cursor: pointer;

}

.payment-note {

    margin-top: 15px;

    font-size: 14px;

    color: #666;

}

/* ROOM PHOTO SLIDESHOW */

.room-slideshow {

  position: relative;

  width: 100%;

  height: 320px;

  overflow: hidden;

  background: #f5f2ed;

}

.room-slideshow .room-slide-image {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: contain;

  object-position: center;

}

.room-slide-arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  z-index: 5;

  width: 40px;

  height: 40px;

  border: none;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.9);

  color: #222;

  font-size: 24px;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

}

.room-slide-prev {

  left: 12px;

}

.room-slide-next {

  right: 12px;

}

.room-slide-arrow:hover {

  background: #c9a45c;

  color: white;

}

.room-slide-count {

  position: absolute;

  bottom: 12px;

  right: 12px;

  z-index: 5;

  background: rgba(0, 0, 0, 0.65);

  color: white;

  padding: 5px 9px;

  border-radius: 20px;

  font-size: 12px;

}

/* FIX: KEEP ABOUT IMAGE INSIDE ITS FRAME */

.about-image-wrap {

  position: relative;

  width: 100%;

  aspect-ratio: 4 / 3;

  overflow: hidden;

  box-sizing: border-box;

}

.about-image-wrap .about-image {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  box-sizing: border-box;

}

/* ALIGN THE WELCOME IMAGE AND ITS FRAME */

.about-image-wrap {

  padding: 0 !important;

  width: 100%;

  overflow: hidden;

}

.about-image-wrap::after {

  display: none;

}

.about-image-wrap .about-image {

  width: 100% !important;

  height: auto !important;

  aspect-ratio: 4 / 3;

  object-fit: cover;

  display: block;

}

.about-image-wrap .image-caption {

  right: 0;

  bottom: 20px;

}

/* Show complete room photos */

.room-card .room-image.room-slideshow {

  height: 320px !important;

  overflow: hidden;

}

.room-card .room-image.room-slideshow .room-slide-image {

  width: 100% !important;

  height: 100% !important;

  object-fit: contain !important;

  object-position: center !important;

  background: #f5f2ed;

}

/* =================================

   EDWIN HOME - NAVBAR ENHANCEMENT

================================= */

.navbar {

  box-shadow: 0 4px 18px rgba(30, 25, 15, 0.08);

  border-bottom: 1px solid rgba(201, 164, 92, 0.25);

}

/* Make navigation links bolder */

.navbar a {

  font-weight: 600;

  position: relative;

  transition: color 0.3s ease;

}

/* Elegant gold underline on hover */

.navbar a::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -6px;

  width: 0;

  height: 2px;

  background: #C9A45C;

  transition: width 0.3s ease;

}

.navbar a:hover::after {

  width: 100%;

}

/* Gold booking button */

.navbar .book-btn {

  background: #C9A45C;

  color: #fff;

  font-weight: 700;

  border: 1px solid #C9A45C;

  transition: all 0.3s ease;

}

.navbar .book-btn:hover {

  background: #A9853E;

  border-color: #A9853E;

}

/* BACK TO TOP BUTTON */

.back-to-top {

  position: fixed;

  bottom: 25px;

  right: 25px;

  z-index: 999;

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 12px 18px;

  background: #C9A45C;

  color: #fff;

  border: 1px solid #C9A45C;

  border-radius: 30px;

  font-size: 14px;

  font-weight: 700;

  cursor: pointer;

  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.15);

  opacity: 0;

  visibility: hidden;

  transform: translateY(10px);

  transition: all 0.3s ease;

}

.back-to-top.show {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

}

.back-to-top:hover {

  background: #A9853E;

  border-color: #A9853E;

  transform: translateY(-3px);

}

@media (max-width: 600px) {

  .back-to-top {

    bottom: 18px;

    right: 15px;

    padding: 11px 15px;

    font-size: 13px;

  }

}