/* ===== Your base styles (kept) ===== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500;600;700&display=swap');
body{ font-family:"Cormorant", serif; }
/* Hide horizontal overflow globally */
html,body{ width:100%; overflow-x:hidden; }

/* ===== NAVBAR (fixed) ===== */
.navbar{
  background:#fff;
  position:fixed;
  top:0; left:0; right:0;
  z-index:1050;
  box-shadow:0 2px 12px rgba(0,0,0,.05);
}

.nav-link{
  font-weight:500;
  letter-spacing:.04em;
  color:#182024;
  opacity:.9;
}
.nav-link:hover,
.nav-link.active{ color:#0b0f12; opacity:1; }

/* evenly spaced center nav (desktop) */
@media (min-width: 992px){
  .main-nav{ gap:3.5rem; }
}

/* icon links */
.nav-icon-link{ color:#212529; opacity:.9; text-decoration:none; }
.nav-icon-link:hover{ opacity:1; }

/* CTA (desktop) */
.enquire-btn{
  border:1.5px solid #212529;
  transition:all .15s ease;
}
.enquire-btn:hover{ background:#212529; color:#fff; }

/* Offcanvas width */
.offcanvas{ width:290px; z-index:1060; }
.offcanvas .nav-link{ font-size:1rem; }

/* Improve hamburger visibility on light bg */
.navbar-light .navbar-toggler-icon{ filter:invert(0); }

/* Demo: space below fixed header (you can keep this) */
body{ padding-top:76px; }

/* ===== NEW: Desktop hover dropdown (smooth fade/slide) ===== */
.navbar .dropdown-menu{
  border:0;
  border-radius:.5rem;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  padding:.5rem 0;
}

/* Only enable hover behavior on desktop */
@media (min-width: 992px){
  .navbar .dropdown-hover .dropdown-menu{
    display:block;                 /* keep in flow so transition works */
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    pointer-events:none;
    margin-top:.25rem;
  }
  .navbar .dropdown-hover:hover > .dropdown-menu,
  .navbar .dropdown-hover:focus-within > .dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    transition-delay:0s;
    pointer-events:auto;
  }
}

/* Dropdown items look */
.dropdown-item{
  font-weight:500;
  padding:.5rem 1rem;
}
.dropdown-item:hover{ background:#f6f7f8; }

    /* Demo page padding (real padding is set dynamically by JS) */
    body { padding-top: 76px; }

/* ===== About hero ===== */
.hero-about{
  position: relative;
  min-height: clamp(48vh, 56vh, 72vh);   /* responsive height */
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Background image (uses a CSS variable so you can swap via inline style) */
.hero-about .hero-bg{
  position: absolute; inset: 0;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center;   /* change to 'center top' if you want more headroom */
  background-repeat: no-repeat;
  transform: scale(1.02);        /* tiny scale to avoid gaps on zoom */
  will-change: transform;
}

/* Subtle dark veil to keep text readable on every photo */
.hero-about .hero-overlay{
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.25) 0%,
    rgba(0,0,0,.35) 60%,
    rgba(0,0,0,.25) 100%
  );
  pointer-events: none;
}

/* Centered text block */
.hero-about .hero-inner{
  position: relative;
  z-index: 1;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,.45);
  padding-inline: 1rem;
}

/* Title sizes scale nicely from mobile to desktop */
.hero-about .hero-title{
  font-weight: 300;
  letter-spacing: .02em;
  line-height: 1.1;
  margin: 0;
  font-size: clamp(2rem, 6vw, 4.5rem);
}

/* Optional subheading style */
.hero-about .hero-sub{
  margin-top: .75rem;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  opacity: .95;
}

/* Respect reduced motion users */
@media (prefers-reduced-motion: reduce){
  .hero-about .hero-bg{ transform: none; }
}
    /* Make nice square tiles and subtle hover */
    .gallery-item { border-radius: 14px; overflow: hidden; background:#f6f6f6; }
    .gallery-item img {
      width: 100%; height: 100%;
      object-fit: cover; transition: transform .35s ease;
      display:block;
    }
    .gallery-item:hover img { transform: scale(1.05); }