:root{
  --brand: #e40046;
  --dark: #0f0f10;
  --ink: #2b2b2f;
  --muted: #6b6b78;
  --bg: #ffffff;
  --card: #f6f7f9;
}

.hotline {
  color: inherit;               /* or #fff in the top bar */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}


*{box-sizing:border-box}
html, body{margin:0; padding:0}
body{font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--ink); background:var(--bg); line-height:1.6}

/* ---------- Top Bar ---------- */
.top-bar{
  background: var(--brand);
  color:#fff;
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding:6px 20px;
  font-size:14px;
}
/* Center the email in the top bar */
.top-bar {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* If the opening-hours <p> is still in the HTML, hide it */
.top-bar p { display: none; }

.top-bar p{margin:0; font-weight:600}
.top-bar .contact-info a{
  color:#fff; text-decoration:none; display:flex; align-items:center; gap:8px;
}

/* ---------- Nav ---------- */
.site-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 20px;
  background: transparent;               /* transparent as requested */
  position: relative;
}
.site-nav .brand img{
  width:150px; height:60px; object-fit:contain; display:block;
}
.site-nav .menu{
  list-style:none; display:flex; gap:28px; margin:0; padding:0;
}
.site-nav .menu a{
  text-decoration:none; color:#111; font-weight:700; letter-spacing:.02em;
}
.site-nav .menu a.active{ color: var(--brand); }
.nav-toggle{ display:none; background:none; border:0; font-size:22px; color:#111; cursor:pointer}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:65vh;
  background:url('../images/hero1.jpg') center/cover no-repeat;
  display:flex; align-items:center; justify-content:center; text-align:center; color:#fff;
}
.hero .hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.55));
}
.hero .hero-content{ position:relative; padding:0 20px; max-width:1000px; }
.hero h1{ font-size:clamp(22px, 4vw, 40px); margin:0 0 10px; font-weight:800; }
.hero p{ font-size:clamp(14px, 2.2vw, 20px); margin:0 0 18px; opacity:.95 }
.btn, .btn-outline{
  display:inline-block; padding:20px 18px; border-radius:10px; font-weight:700; text-decoration:none; cursor:pointer;
}
.btn{ background:#fff; color:#111 }
.btn-outline{ background:transparent; border:2px solid var(--brand); color:var(--brand) }
.center{text-align:center}

/* ---------- Layout ---------- */
.wrapper{ max-width:1200px; margin:40px auto; padding:0 20px }
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:24px }
.card, .p-card{ background:var(--card); border-radius:16px; padding:20px; box-shadow: 0 8px 24px rgba(0,0,0,.05) }
.card i{ font-size:28px; color:var(--brand) }
.p-card img{ width:100%; height:220px; object-fit:cover; border-radius:12px; }
.p-card h3{ margin:12px 0 8px }

/* ---------- Page hero ---------- */
.page-hero.small{ text-align:center; padding:40px 0 10px }
.page-hero.small h1{ margin:0; font-size:32px }
.page-hero.small p{ color:var(--muted) }

/* ---------- Two column ---------- */
.two-col{ display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center; margin:30px 0 }
.two-col .col img.rounded{ width:100%; border-radius:16px; }

/* ---------- Footer ---------- */
.footer{ background:#111; color:#ddd; margin-top:50px }
.footer-inner{ max-width:1200px; margin:0 auto; padding:30px 20px; display:grid; grid-template-columns: 1.2fr 1.2fr .6fr; gap:24px; align-items:center }
.footer a{ color:#fff; text-decoration:none }
.footer .foot-brand img{ width:140px; height:56px; object-fit:contain }
.footer .foot-social a{ font-size:22px; margin-right:14px }
.copy{ text-align:center; color:#aaa; padding:12px 0; border-top:1px solid #222 }

/* ---------- Adjustments for smaller hero ---------- */

/* Smaller hero headline and subtext */
.hero h1 {
  font-size: clamp(16px, 2.2vw, 26px);  /* smaller than before */
  line-height: 1.08;
  margin: 0 0 10px;
}

.hero p {
  font-size: clamp(11px, 1.4vw, 14px);
}

/* Smaller Explore button (only in hero) */
.hero .btn {
  font-size: clamp(12px, 1.4vw, 14px);
  padding: 8px 14px;        /* tighter padding */
  border-radius: 8px;
}

/* Put the hero content at the bottom */
.hero {
  min-height: 72vh;          /* or 65–80vh as you like */
  display: flex;
  justify-content: center;
  align-items: flex-end;      /* push content to the bottom */
  padding-bottom: 16px;       /* distance from the bottom edge */
}

/* make sure the content sits above the dark overlay */
.hero .hero-content {
  position: relative;
  z-index: 1;
}



/* ---------- Forms ---------- */
.contact-form label{ display:block; font-weight:600; margin:14px 0 6px }
.contact-form input, .contact-form textarea{
  width:100%; padding:12px 14px; border:1px solid #e5e7eb; border-radius:10px; font:inherit; outline:none;
}
.contact-form input:focus, .contact-form textarea:focus{ border-color: var(--brand) }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .grid-3{ grid-template-columns:1fr 1fr }
  .two-col{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr; text-align:center }
}

@media (max-width: 720px){
  .nav-toggle{ display:block }
  .site-nav .menu{
    position:absolute; right:20px; top:64px; background:#fff; border-radius:12px;
    padding:12px; display:none; flex-direction:column; gap:12px; min-width:200px;
    box-shadow: 0 16px 40px rgba(0,0,0,.12);
  }
  .site-nav .menu a{ color:#111 }
  .site-nav .menu.show{ display:flex }
  .grid-3{ grid-template-columns:1fr }
}

/* Ensure the hamburger is clickable */
.site-nav {
  position: relative;
  z-index: 1000;            /* nav above the hero overlay */
}
.nav-toggle { z-index: 1001; }

/* Don’t let the hero overlay block taps/clicks */
.hero { position: relative; }
.hero .hero-overlay {
  pointer-events: none;     /* overlay won’t catch clicks */
  z-index: 0;               /* keep it behind content/nav */
}
.hero .hero-content { z-index: 1; }

/* Mobile dropdown: appear right under the bar */
@media (max-width: 720px){
  .site-nav .menu{
    position: absolute;
    right: 20px;
    top: calc(100% + 8px);  /* below the nav */
    display: none;
  }
  .site-nav .menu.show{ display: flex; }
}