/* common.css - shared across every DBR page (header, footer, base, shared components) */

:root { --green:#237b3d; --dark-green:#14582a; --light-green:#f3f8f3; --yellow:#f2e900; --soft-yellow:#fffde0; --dark:#17231a; --muted:#6c766e; --border:#e8ece8 }
* { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body { font-family:"DM Sans",sans-serif; color:var(--dark); background:#fff; line-height:1.6; overflow-x:hidden }
img { max-width:100%; display:block }
a { text-decoration:none; color:inherit }
.container { width:min(1180px,calc(100% - 40px)); margin:auto }
header { position:relative; z-index:10; background:rgba(255,255,255,.97); border-bottom:1px solid #f0f2ef }
.navbar { height:86px; display:flex; align-items:center; justify-content:space-between }
.logo { display:flex; align-items:center; gap:12px; font-weight:800 }
.logo img { width:62px; height:62px; object-fit:contain }
.logo-text { line-height:1.05 }
.logo-text strong { display:block; font-family:Manrope; font-size:15px }
.logo-text span { display:block; font-size:11px; color:var(--green); margin-top:4px; letter-spacing:1px; text-transform:uppercase }
.nav-links { display:flex; align-items:center; gap:32px }
.nav-links a { font-size:14px; font-weight:600; color:#39423b }
.nav-links a:hover { color:var(--green) }
.nav-links a.active { color:var(--green) }
.nav-book { background:var(--green); color:#fff!important; padding:13px 22px; border-radius:50px }
.menu-btn { display:none; border:0; background:none; font-size:26px }
.eyebrow-dot { width:7px; height:7px; background:var(--green); border-radius:50% }
h1, h2, h3 { font-family:Manrope }
.btn-primary { background:var(--green); color:#fff }
.section-label { color:var(--green); text-transform:uppercase; letter-spacing:2px; font-size:11px; font-weight:800; margin-bottom:13px }
.review-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.cta-section { padding:90px 0 }
footer { background:#f7f9f6; border-top:1px solid var(--border); padding:60px 0 25px }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:50px; padding-bottom:50px }
.footer-brand p { color:var(--muted); font-size:13px; max-width:320px; margin-top:17px }
.footer h4 { font-size:14px; margin-bottom:18px }
.footer-links { display:grid; gap:10px }
.footer-links a { color:var(--muted); font-size:13px }
.footer-links a:hover { color:var(--green) }
.footer-bottom { border-top:1px solid var(--border); padding-top:22px; display:flex; justify-content:space-between; color:#879087; font-size:11px }
.whatsapp { position:fixed; right:24px; bottom:24px; width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; font-size:25px; box-shadow:0 10px 30px rgba(0,0,0,.18); z-index:20 }
.btn-light { background:#fff; color:var(--green); border:1px solid var(--border) }
.check-icon { width:25px; height:25px; flex:0 0 25px; border-radius:50%; background:var(--green-soft); color:var(--green); display:grid; place-items:center; font-weight:800; font-size:13px }
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
.card { border:1px solid var(--border); border-radius:22px; overflow:hidden; background:#fff; transition:.25s }
.card:hover { transform:translateY(-5px); box-shadow:var(--shadow) }
.card-img { height:260px; overflow:hidden; background:var(--green-soft) }
.card-img img { height:100%; object-fit:cover; transition:.35s }
.card:hover .card-img img { transform:scale(1.04) }
.card-body { padding:22px }
.card-body p { color:var(--muted); font-size:14px; margin:8px 0 18px }
.card-link { color:var(--green); font-weight:700; font-size:14px }
.feature-img { height:480px; border-radius:26px; overflow:hidden }
.feature-img img { height:100%; object-fit:cover }

@media (max-width:1000px) {
  .footer-grid { grid-template-columns:1fr 1fr }
}

@media (max-width:900px) {
  .card-grid { grid-template-columns:1fr 1fr }
}

@media (max-width:700px) {
  .container { width:calc(100% - 28px) }
  .navbar { height:74px }
  .logo img { width:52px; height:52px }
  .logo-text { display:none }
  .nav-links { display:none }
  .menu-btn { display:block }
  .footer-grid { grid-template-columns:1fr 1fr; gap:35px 25px }
  .footer-bottom { flex-direction:column; gap:8px }
  .whatsapp { right:18px; bottom:18px; width:52px; height:52px }
}

@media (max-width:620px) {
  .cta-box { padding:38px 25px; display:block }
  .card-grid { grid-template-columns:1fr }
  .feature-img { height:310px }
}

/* Mobile navigation panel (previously applied with inline styles from JS). */
@media (max-width:700px) {
  .nav-links.open {
    display:flex;
    position:absolute;
    top:74px;
    left:14px;
    right:14px;
    background:#fff;
    padding:20px;
    border-radius:18px;
    flex-direction:column;
    align-items:flex-start;
    box-shadow:0 15px 40px rgba(0,0,0,.10)
  }
}