/* ===== 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; }
    /* Tab pills styled like simple links with underline for active */
    .filter-tabs {
      gap: 1.25rem;
      border-bottom: 1px solid #e9ecef;
      padding-bottom: .25rem;
      margin-bottom: 1.25rem;
    }
    .filter-link {
      position: relative;
      text-decoration: none;
      color: #111;
      font-weight: 600;
      opacity: .65;
    }
    .filter-link.active,
    .filter-link:hover { opacity: 1; }
    .filter-link.active::after {
      content: "";
      position: absolute;
      left: 0; right: 0; bottom: -10px;
      height: 2px; background: #403838; /* accent underline */
    }

    /* Gallery cards */
    .work-card {
      overflow: hidden;
      border-radius: .5rem;
      background: #fff;
      box-shadow: 0 2px 10px rgba(0,0,0,.06);
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .work-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(0,0,0,.12);
    }
    .work-thumb {
      width: 100%;
      height: 240px;              /* desktop */
      object-fit: cover;
      display: block;
    }
    @media (max-width: 576px){
      .work-thumb { height: 160px; } /* mobile crop */
    }

    /* Simple “play” badge for videos */
    .badge-play {
      position: absolute; inset: 0;
      display: grid; place-items: center;
      background: linear-gradient(transparent, rgba(0,0,0,.25));
    }
    .badge-play span{
      width: 54px; height: 54px; border-radius: 50%;
      background: rgba(255,255,255,.9);
      display: grid; place-items: center;
      font-size: 22px; line-height: 1;
      box-shadow: 0 5px 15px rgba(0,0,0,.2);
    }