/* ===== 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; }
/* ===== Hero slider ===== */
.hero-carousel { position: relative; }

.hero-owl .owl-stage-outer { overflow: hidden; }

/* Each slide as BG image */
.hero-slide{
  position: relative;
  min-height: 88svh;                /* safe viewport for mobile */
  background-size: cover;
  background-position: center;
  display: grid;
  align-items: center;
  color: #fff;
}

/* dark veil for readability */
.hero-slide::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.45) 45%,
    rgba(0,0,0,.25) 70%,
    rgba(0,0,0,.10) 100%
  );
  pointer-events:none;
}

/* left column copy */
.hero-copy{
  position: relative; z-index: 2;
  max-width: 760px;
  padding: clamp(8px, 3vw, 24px) 0;
}

.hero-eyebrow{
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .9;
  margin-bottom: .6rem;
  font-size: clamp(.8rem, 1.2vw, 1rem);
}

.hero-title{
  margin: 0 0 1.2rem 0;
  font-weight: 300;
  line-height: 1.05;
  font-size: clamp(2rem, 6.4vw, 5.2rem);
}

/* CTA + social proof row */
.hero-actions{ display:flex; align-items:center; gap: 18px; flex-wrap: wrap; }

.hero-btn{
  --from: #403838;         /* dark logo color */
  --to:   #eadec4;         /* light logo color */
  color: #fff;
  font-weight: 600;
  border: 0;
  background: linear-gradient(135deg, var(--from), var(--to));
  padding: .9rem 1.4rem;
  border-radius: 999px;
  box-shadow: 0 14px 32px rgba(64, 56, 56, .25); /* shadow tuned to dark color */
  transition: filter .2s ease, transform .2s ease;
}
.hero-btn:hover{ filter: brightness(1.05); transform: translateY(-1px); }

/* Avatars + rating */
.hero-social{ display:flex; align-items:center; gap:14px; }
.faces{ display:flex; }
.faces img{
  width:44px; height:44px; border-radius:50%; object-fit:cover;
  border:3px solid rgba(255,255,255,.9);
  margin-left:-10px;
}
.faces img:first-child{ margin-left:0; }
.stars{ letter-spacing:.15em; color:#ffcc55; }
.muted{ opacity:.9; }

/* Owl dots styled to be visible on images */
.hero-owl .owl-dots{
  position: absolute; left: 24px; bottom: 20px;
}
.hero-owl .owl-dot span{
  width: 10px; height: 10px; background: rgba(255,255,255,.5);
}
.hero-owl .owl-dot.active span{ background:#fff; }

/* Mobile tweaks */
@media (max-width: 575.98px){
  .hero-slide{ min-height: 78svh; }
  .hero-actions{ gap:12px; }
  .faces img{ width:36px; height:36px; border-width:2px; }
}
/* --- Center arched image --- */
.arch-mask{
  width: min(100%, 760px);           /* max width */
  aspect-ratio: 4 / 5;               /* nice tall ratio */
  border-radius: 9999px 9999px 0 0;  /* arched top */
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
  background: #f7f7f7;
}
.arch-mask img{
  width: 100%; height: 100%; object-fit: cover; display:block;
}

/* --- Side clusters --- */
.cluster{ position: relative; }
.card-img{
  border-radius: 18px;
  overflow: hidden;
  background:#f3f3f3;
  box-shadow: 0 14px 28px rgba(0,0,0,.12);
}
.card-img img{ width:100%; height:100%; object-fit:cover; display:block; }

/* main card on each side */
.card-img.big{ aspect-ratio: 4/5; }

/* overlapping small cards */
.card-img.small{
  position: absolute; width: 64%;
  aspect-ratio: 4/3;
  bottom: -10%;                      /* hang a little below */
}
.left-overlap{ left: -6%; }
.right-overlap{ right: -6%; }

/* --- Responsive polish --- */
@media (max-width: 991.98px){
  .arch-mask{ width: min(100%, 640px); }
  .card-img.small{ width: 68%; bottom: -8%; }
}

@media (max-width: 575.98px){
  /* stack nicely: put center first, then small overlaps tighter */
  .img-arch-row{ row-gap: 2.25rem; }
  .arch-mask{ width: 100%; aspect-ratio: 3/4; }
  .card-img.big{ aspect-ratio: 3/4; }
  .card-img.small{ width: 70%; bottom: -6%; }
  .left-overlap{ left: -3%; }
  .right-overlap{ right: -3%; }
}
/* --- Typography + spacing --- */
.statement{ color:#191919; }
.eyebrow{
  font-size: .92rem;
  letter-spacing: .14em;
  font-weight: 600;
  opacity:.8;
}

.display-title{
  line-height: 1.05;
  font-weight: 400;
  /* Responsive size: mobile → desktop */
  font-size: clamp(2.1rem, 6.2vw, 4.6rem);
  max-width: 18ch;             /* keep beautiful line length */
}

.lead-copy{
  font-size: clamp(1rem, 2.3vw, 1.25rem);
  line-height: 1.8;
  max-width: 52rem;            /* centered measure */
  color: #2c2c2c;
  opacity:.9;
}

/* Brand vars (optional) */
:root{
  --peach: #403838;
  --peach-600: #403839;   /* hover tint */
  --ring: rgba(0,0,0,.18);
}

/* Base button */
.btn-enquire{
  background: var(--peach);
  color:#fff;
  border:0;
  border-radius:.5rem;
  padding:.9rem 1.4rem;
  font-weight:600;
  letter-spacing:.02em;
  /* keep shadow tight – no gigantic spread */
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  will-change: transform;
}

/* Hover: tiny lift + slightly darker color + slightly stronger (but tight) shadow */
.btn-enquire:hover{
  background: var(--peach-600);
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(0,0,0,.18);
  color:#fff;
}

/* Active: press down a bit, reduce shadow */
.btn-enquire:active{
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(0,0,0,.16);
}

/* Keyboard focus: visible ring, no glow explosion */
.btn-enquire:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 5px var(--ring);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn-enquire{ transition: none; }
}


/* Optional: a little extra space at larger screens */
@media (min-width: 992px){
  .py-lg-6{ padding-top:5rem!important; padding-bottom:5rem!important; }
}

/* ---- Heading accent ---- */
.services .accent{
  width: 48px; height: 8px; border-radius: 4px;
  background: #403838;
}

/* ---- Card base ---- */
.svc-card{
  --overlay: rgba(0,0,0,.55);   /* default; overridden by modifiers below */
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  min-height: 520px;               /* desktop height */
  color: #fff; text-decoration: none;
  background: #111;
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
  transition: transform .28s ease, box-shadow .28s ease;
}
.svc-card:hover,
.svc-card:focus-visible{
  transform: translateY(-4px);
  box-shadow: 0 24px 56px rgba(0,0,0,.18);
  outline: none;
}

/* Image */
.svc-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform .6s ease;
}
.svc-card:hover .svc-img{ transform: scale(1.03); }

/* Bottom title (visible by default) */
.svc-title{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 20px 24px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.2rem, 1.8vw, 1.8rem);
  line-height: 1.2;
  /* soft gradient so text is readable */
  background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0));
  transition: opacity .35s ease, transform .35s ease;
}

/* Overlay (hidden at rest) */
.svc-overlay{
  position: absolute; inset: 0;
  background: var(--overlay);
  backdrop-filter: blur(1px);
  padding: clamp(20px, 4vw, 36px);
  display: grid;
  align-content: start;
  gap: 12px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}

/* Overlay content */
.svc-head{
  margin: 0 0 6px 0;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
}
.svc-points{
  margin: 0; padding-left: 1rem;
  font-size: clamp(.98rem, 1.4vw, 1.15rem);
  line-height: 1.8;
}
.svc-points li{ margin-bottom: .2rem; }

/* State: show overlay smoothly */
.svc-card:hover .svc-overlay,
.svc-card:focus-visible .svc-overlay{
  opacity: 1; transform: translateY(0);
}
.svc-card:hover .svc-title,
.svc-card:focus-visible .svc-title{
  opacity: 0; transform: translateY(6px);
}

/* ---- Different overlay colors per card ---- */
.svc-card.is-mint { --overlay: rgba(43,110,116,.78); }   /* teal/mint */
.svc-card.is-rose { --overlay: rgba(168,71,94,.78); }    /* rose */
.svc-card.is-gold { --overlay: rgba(161,126,59,.78); }   /* warm gold */
/* extra overlay colors */
.svc-card.is-lavender { --overlay: rgba(121, 99, 160, .78); } /* lavender */
.svc-card.is-navy     { --overlay: rgba(22, 40, 78,  .78); }  /* deep navy */
.svc-card.is-emerald  { --overlay: rgba(26, 110, 86, .78); }  /* emerald */


/* ---- Responsive heights ---- */
@media (max-width: 991.98px){   /* tablets */
  .svc-card{ min-height: 460px; }
}
@media (max-width: 575.98px){   /* phones */
  .svc-card{ min-height: 360px; }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce){
  .svc-card, .svc-img, .svc-overlay, .svc-title{ transition: none !important; }
}

/* Section spacing & heading */
.testimonial-section { background:#fff; }
.testim-heading { letter-spacing:.08em; }

/* Photo keeps cover fit */
.object-cover { object-fit: cover; }

/* Quote side */
.testim-copy{ position:relative; }
.testim-quote-mark{
  font-family: serif;
  font-size: clamp(48px, 8vw, 84px);
  line-height: .6;
  color: #eadbd2;           /* soft beige like the mock */
  margin-bottom: .25rem;
}
.testim-text{
  font-size: clamp(1.05rem, 1.2vw, 1.35rem);
  line-height: 1.8;
  color: #1c1c1c;
  margin-bottom: 1rem;
}
.testim-author{
  font-weight: 600;
  font-size: 1.05rem;
  color:#1c1c1c;
}

/* Owl dots styled like small circles under the text block */
.testimonial-owl .owl-dots{
  margin-top: 1rem;
  display:flex; gap:.5rem;
}
.testimonial-owl .owl-dot span{
  width:10px; height:10px; border-radius:50%;
  display:block; background:#d9d9d9; transition:.25s ease;
}
.testimonial-owl .owl-dot.active span{ background:#111; transform:scale(1.15); }

/* Make the dots sit under the right column on lg+ screens */
@media (min-width: 992px){
  .testim-slide .owl-dots { justify-content:flex-start; }
}

/* Optional: soften image corners like the design */
.testim-photo img{ border-radius: 6px; }
/* Spacing helpers (works with Bootstrap 5) */
.py-6 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.py-8 { padding-top: 5rem; padding-bottom: 5rem; }

.blogs-title {
  letter-spacing: .02em;
  font-weight: 400;            /* elegant thin look */
}

.blogs-viewall {
  border-radius: .35rem;
}

/* Card image hover */
.blog-card .blog-thumb img {
  transition: transform .5s ease, filter .5s ease;
}
.blog-card:hover .blog-thumb img {
  transform: scale(1.04);
  filter: saturate(105%);
}

/* Title sizing to mimic the design (big but readable) */
.blog-card-title{
  font-size: clamp(1.1rem, 1.2vw + .9rem, 1.6rem);
}

/* Make the full card feel clickable without extra underline */
.blog-card a:hover { text-decoration: none; }

/* Optional: subtle focus ring for accessibility */
.blog-card a:focus-visible .blog-thumb img {
  outline: 3px solid #111;
  outline-offset: 3px;
}

/* Mobile polish */
@media (max-width: 575.98px) {
  .blogs-viewall { padding: .45rem 1rem; }
}
/* subtle hover zoom */
.gal-thumb img{ transition: transform .6s ease; }
.gal-item a:hover .gal-thumb img{ transform: scale(1.05); }

/* small corner zoom icon */
.zoom-badge{
  position:absolute; right:.5rem; bottom:.5rem;
  width:28px; height:28px; border-radius:50%;
  background: rgba(255,255,255,.85);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.zoom-badge::before{
  content:""; position:absolute; inset:0; margin:auto;
  width:14px; height:14px; border:2px solid #222; border-radius:50%;
  transform: translate(-2px,-2px);
}
.zoom-badge::after{
  content:""; position:absolute; right:7px; bottom:6px;
  width:8px; height:2px; background:#222; transform: rotate(45deg);
}

/* hide Owl default dots (you can enable if you want) */
.gallery-owl .owl-dots{ display:none; }
/* Section spacing helper (optional) */
.py-lg-6 { padding-top: 4.5rem; padding-bottom: 4.5rem; }
@media (min-width: 992px){
  .py-lg-6 { padding-top: 6rem; padding-bottom: 6rem; }
}

/* Headline + eyebrow */
.eyebrow{
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .8rem;
  opacity: .75;
  margin-bottom: .5rem;
}
.contact-title{
  line-height: 1.1;
  letter-spacing: .02em;
}

/* Minimal underline form style */
.line-label{
  display:block;
  font-size:.9rem;
  opacity:.8;
  margin-bottom:.25rem;
}

.line-input{
  border: 0 !important;
  border-bottom: 1px solid #cfcfcf !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent;
  box-shadow: none !important;
}
.line-input:focus{
  border-bottom-color:#000 !important;
}

/* Make selects visually match inputs */
.form-select.line-input{
  background-image: none;   /* remove default arrow */
  padding-right: 0 !important;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
}
.form-select.line-input:after{ display:none; }

/* Image keeps nice proportions */
.contact-photo img{ object-position: center; }
  /* palette */
  :root{
    --peach:#403838;        /* filled button + accents */
    --peach-600:#403839;    /* hover */
    --border:#e9ecef;
  }

  /* card shell */
  .product-card{
    border:1px solid var(--border);
    border-radius: 14px;
    overflow:hidden;
    background:#fff;
    display:flex;
    flex-direction:column;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .product-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(0,0,0,.08);
  }

  /* image with fixed aspect for tidy rows */
  .product-media{
    position:relative;
    width:100%;
    aspect-ratio: 4 / 3;           /* modern browsers */
    background:#fafafa;
  }
  .product-media img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:contain;            /* keep product inside box */
    padding:18px;
  }

  .product-body{
    padding:16px 18px 0;
    flex:1;
  }
  .product-title{
    font-size:1.05rem;
    font-weight:600;
    line-height:1.3;
    margin-bottom:.35rem;
    display:-webkit-box;
    -webkit-line-clamp:2;          /* avoid cards with very tall titles */
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .product-price{
    font-weight:700;
  }

  .product-actions{
    display:flex; gap:12px;
    padding:16px 18px 18px;
    border-top:1px solid var(--border);
  }

  /* buttons styled like your design */
  .btn-peach{
    background:var(--peach);
    color:#fff;
    border:1.5px solid var(--peach);
    border-radius:6px;
    padding:.65rem .9rem;
    font-weight:600;
    letter-spacing:.02em;
  }
  .btn-peach:hover{ background:var(--peach-600); border-color:var(--peach-600); color:#fff; }

  .btn-outline-peach{
    background:#fff;
    color:#111;
    border:1.5px solid var(--peach);
    border-radius:6px;
    padding:.65rem .9rem;
    font-weight:700;
    letter-spacing:.02em;
  }
  .btn-outline-peach:hover{ background:#fff3ef; color:#111; }

  /* optional – make buttons stack on very narrow screens */
  @media (max-width: 420px){
    .product-actions{ flex-direction:column; }
    .product-actions .btn{ width:100% !important; }
  }
   /* ===== Footer ===== */
  .site-footer{
    --footer-bg: url('https://images.unsplash.com/photo-1591604466107-ec97de577aff?q=80&w=1600&auto=format&fit=crop'); /* swap to your image */
    position: relative;
    color: #fff;
    padding-top: 48px;
    padding-bottom: 24px;
    background: #0b0b0b;
    overflow: hidden;
  }
  .site-footer::before{
    content:"";
    position: absolute; inset: 0;
    background-image: var(--footer-bg);
    background-size: cover;
    background-position: center;
    filter: brightness(.35); /* dim the image */
    z-index: 0;
  }
  .site-footer::after{
    content:"";
    position:absolute; inset:0;
    background: radial-gradient(ellipse at center, rgba(0,0,0,.25), rgba(0,0,0,.55));
    z-index: 0;
  }
  .site-footer .footer-inner{ position: relative; z-index: 1; }

  /* social pills */
  .social-list a{
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,.35);
    color: #fff; border-radius: 999px;
    transition: .2s ease;
  }
  .social-list a:hover{ background: #ffffff1a; border-color: #fff; transform: translateY(-2px); }

  /* link styles */
  .footer-link{ color: rgba(255,255,255,.9); text-decoration: none; }
  .footer-link:hover{ color:#fff; text-decoration: underline; }

  .footer-title{
    font-weight: 600; letter-spacing:.03em; text-transform: uppercase;
    font-size: 0.95rem; color:#fff; opacity:.9;
  }

  .footer-hr{ border-color: rgba(255,255,255,.2); opacity:1; }

  /* bottom bar */
  .contact-bar{
    border-top: 1px solid rgba(255,255,255,.2);
    padding-top: 14px; margin-top: 16px;
    font-size: 0.95rem;
  }
  .contact-item{ color:#fff; text-decoration:none; opacity:.95; }
  .contact-item:hover{ opacity:1; text-decoration: underline; }

  /* spacing tweaks on small screens */
  @media (max-width: 575.98px){
    .site-footer{ padding-top: 36px; }
    .footer-col{ margin-bottom: 20px; }
  }