/* ══════════════════════════════════════════════
   ECO CLEANING BRISBANE — DESIGN SYSTEM
   Palette: Forest Green + Dark Blue + Lime Green
   ══════════════════════════════════════════════ */

/* ── TOKENS ── */
:root{
  /* Forest greens — primary brand, backgrounds, text */
  --g-darkest:#062a1e;   /* deepest forest, footer bg */
  --g-dark:#0a3d2e;      /* dark forest, headings, logo */
  --g-mid:#1a6647;       /* mid forest, hover states */
  --g-base:#2d9e6b;      /* base green, borders, icons */
  --g-light:#c8ecd9;     /* light green, subtle borders */
  --g-pale:#edf7f2;      /* palest green, section bg */

  /* Dark blue — strong CTA, interactive, badges */
  --b-dark:#0f1f9a;      /* deepest blue, hover */
  --b-base:#1a2fe0;      /* primary blue, buttons, numbers */
  --b-mid:#3a52f5;       /* medium blue, accents */
  --b-light:#dde3ff;     /* light blue, tints */
  --b-pale:#f0f2ff;      /* palest blue, section bg alt */

  /* Lime green — energy, highlights, trust signals */
  --l-dark:#3a8c18;      /* deep lime, text on light */
  --l-base:#6bcf3f;      /* vibrant lime, stars, tags */
  --l-mid:#8fdc63;       /* lighter lime, hovers */
  --l-light:#d6f5c0;     /* light lime, pill bg */
  --l-pale:#f0fde8;      /* palest lime, subtle fills */

  /* Neutrals */
  --n-white:#ffffff;
  --n-off:#faf9f7;       /* warm off-white page bg */
  --n-charcoal:#1a1a1a;
  --n-body:#4a5568;      /* body text */
  --n-muted:#718096;     /* secondary text */

  /* Shadows */
  --sh-g:0 4px 20px rgba(10,61,46,.10);
  --sh-g-lg:0 8px 40px rgba(10,61,46,.14);
  --sh-b:0 4px 20px rgba(26,47,224,.14);
  --sh-b-lg:0 8px 36px rgba(26,47,224,.18);

  /* Radii */
  --r:16px;--rs:10px;--rpill:100px;
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%;display:block}
html{scroll-behavior:smooth}
body{
  font-family:'DM Sans',sans-serif;
  background:var(--n-off);
  color:var(--n-charcoal);
  line-height:1.65;
  overflow-x:hidden;
}

/* ════════════════════
   TOPBAR
   ════════════════════ */
#topbar{
  background:var(--b-dark);  /* deep blue — bold brand statement */
  padding:8px 5%;
  display:flex;justify-content:flex-end;align-items:center;
  flex-wrap:wrap;gap:0;
}
#topbar a{
  color:rgba(255,255,255,.75);text-decoration:none;
  font-size:12.5px;padding:0 12px;
  transition:color .2s;
  border-right:1px solid rgba(255,255,255,.15);
  white-space:nowrap;
}
#topbar a:last-child{border-right:none}
#topbar a:hover{color:var(--l-base)}  /* lime hover */


/* #0aaa30 */


/* ════════════════════
   NAV
   ════════════════════ */
#nav{
  position:sticky;top:0;z-index:200;
  background:rgba(250,249,247,.96);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:2px solid var(--g-light);  /* green border */
  height:68px;
  display:flex;align-items:center;
  padding:0 5%;gap:16px;
}
.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.logo-placeholder{
  width:44px;height:44px;flex-shrink:0;
  background:linear-gradient(135deg,var(--b-base),var(--g-dark));  /* blue-green gradient */
  border-radius:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
}
.logo-placeholder span{display:block;font-size:9px;font-weight:700;color:#fff;letter-spacing:.04em;text-align:center;line-height:1.1}
.logo-placeholder .leaf{font-size:16px;line-height:1}
.logo-wordmark{line-height:1.15}
.logo-wordmark strong{font-family:'Playfair Display',serif;font-size:16px;font-weight:700;color:var(--g-dark);display:block}
.logo-wordmark em{font-style:normal;font-size:10px;font-weight:500;color:var(--n-muted);letter-spacing:.05em;text-transform:uppercase;display:block}

.nav-links{display:flex;gap:2px;list-style:none;margin-left:auto}
.nav-links a{
  text-decoration:none;font-size:13.5px;font-weight:500;
  color:var(--n-body);padding:6px 11px;border-radius:8px;
  transition:all .2s;white-space:nowrap;
}
.nav-links a:hover{color:var(--b-base);background:var(--b-pale)}  /* blue hover */

.nav-btns{display:flex;gap:8px;align-items:center;flex-shrink:0}
.nbtn-ph{
  text-decoration:none;font-size:13px;font-weight:600;
  color:var(--g-dark);
  border:1.5px solid var(--g-base);
  padding:7px 15px;border-radius:var(--rpill);
  transition:all .2s;white-space:nowrap;
}
.nbtn-ph:hover{background:var(--g-pale);border-color:var(--g-mid)}
.nbtn-cta{
  text-decoration:none;font-size:13px;font-weight:600;color:#fff;
  background:linear-gradient(135deg,var(--b-base),var(--b-dark));  /* blue gradient CTA */
  padding:8px 20px;border-radius:var(--rpill);
  transition:all .2s;white-space:nowrap;
  box-shadow:var(--sh-b);
}
.nbtn-cta:hover{background:linear-gradient(135deg,var(--b-mid),var(--b-base));transform:translateY(-1px);box-shadow:var(--sh-b-lg)}

.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;border:none;background:none;margin-left:auto}
.hamburger span{display:block;width:22px;height:2px;background:var(--g-dark);border-radius:2px;transition:all .3s}

#mobile-menu{
  display:none;position:fixed;top:68px;left:0;right:0;bottom:0;
  background:rgba(250,249,247,.99);z-index:190;
  overflow-y:auto;padding:20px 5% 40px;
  flex-direction:column;gap:8px;
}
#mobile-menu.open{display:flex}
#mobile-menu a{
  text-decoration:none;font-size:16px;font-weight:500;color:var(--g-dark);
  padding:14px 16px;border-radius:12px;
  border:1px solid var(--g-light);transition:all .2s;
}
#mobile-menu a:hover{background:var(--b-pale);color:var(--b-base);border-color:var(--b-light)}
.mm-divider{height:1px;background:var(--g-light);margin:6px 0}
.mm-cta{
  background:linear-gradient(135deg,var(--b-base),var(--b-dark))!important;
  color:#fff!important;text-align:center;font-size:16px!important;
  border-color:transparent!important;
}

/* ════════════════════
   HERO
   ════════════════════ */
#hero{
  min-height:100svh;
  display:grid;grid-template-columns:1fr 1fr;
  align-items:center;gap:60px;
  padding:100px 5% 60px;
  /* background:linear-gradient(145deg,#eaf7f2 0%,var(--n-off) 50%,#eceeff 100%); */
  position:relative;overflow:hidden;

   background: url(../img/city.jpg) no-repeat;

  background-size: cover;

  /* padding: 100px 0px 120px; */

  background-attachment: fixed;

      /* position: relative; */

    z-index: 0;
}
.hero-orb{
  position:absolute;right:-160px;top:-160px;width:600px;height:600px;
  background:radial-gradient(circle,rgba(45,158,107,.12) 0%,transparent 70%);
  pointer-events:none;
}
.hero-orb2{
  position:absolute;left:-100px;bottom:-100px;width:380px;height:380px;
  background:radial-gradient(circle,rgba(26,47,224,.08) 0%,transparent 70%);  /* blue orb */
  pointer-events:none;
}
.hero-left{position:relative;z-index:1}

/* lime badge */
.hero-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--l-light);color:var(--l-dark);
  font-size:12px;font-weight:700;
  padding:5px 14px;border-radius:var(--rpill);
  border:1px solid rgba(107,207,63,.4);
  margin-bottom:20px;
}
h1{font-family:'Playfair Display',serif;font-size:clamp(34px,4.2vw,58px);font-weight:900;line-height:1.06;color:var(--g-dark);margin-bottom:16px}
h1 em{font-style:italic;color:var(--b-base)}   /* blue italic — not green */

.hero-sub{font-size:16px;color:var(--n-body);line-height:1.75;max-width:460px;margin-bottom:24px}

/* lime trust pills */
.trust-pills{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:30px}
.tp{
  font-size:12px;font-weight:600;
  color:var(--l-dark);
  background:var(--l-pale);
  border:1px solid rgba(107,207,63,.35);
  border-radius:var(--rpill);padding:5px 12px;
}

.hero-btns{display:flex;gap:10px;flex-wrap:wrap}
/* PRIMARY: deep blue */
.btn-dark{
  text-decoration:none;
  background:linear-gradient(135deg,var(--b-base) 0%,var(--b-dark) 100%);
  color:#fff;padding:14px 30px;border-radius:var(--rpill);
  font-weight:700;font-size:15px;
  transition:all .25s;display:inline-flex;align-items:center;gap:8px;
  white-space:nowrap;box-shadow:var(--sh-b);
}
.btn-quotecity {
    display: inline-block;
    background: #00a500;
    color: #fff;
    padding: 14px 28px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-quotecity:hover {
    background-color: #008a00 !important;
    color: #fff !important;
    text-decoration: underline;
}

.btn-dark:hover{transform:translateY(-2px);box-shadow:var(--sh-b-lg);background:linear-gradient(135deg,var(--b-mid),var(--b-base))}
/* SECONDARY: dark green outline */
.btn-out{
  text-decoration:none;border:2px solid var(--g-dark);color:var(--g-dark);
  padding:12px 26px;border-radius:var(--rpill);font-weight:600;font-size:15px;
  transition:all .25s;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
}
.btn-out:hover{background:var(--g-dark);color:#fff}

/* hero right — placeholder image */
.hero-right{position:relative;z-index:1}
.hero-img-placeholder{
  width:100%;height:380px;border-radius:24px;
  /* blue-to-lime gradient on the placeholder */
  background:linear-gradient(135deg,var(--b-light) 0%,var(--l-light) 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  border:2px dashed rgba(26,47,224,.2);
  position:relative;overflow:hidden;
}
.hero-img-placeholder::before{
  /* content:'';position:absolute;inset:0; */
  /* background:url("../img/new_home_img/team-cleaning-ladies-working.jpg") no-repeat center/cover; */
}
.placeholder-icon{font-size:48px;position:relative;z-index:1}
.placeholder-label{font-size:14px;font-weight:600;color:var(--b-dark);position:relative;z-index:1}
.placeholder-sub{font-size:12px;color:var(--n-muted);position:relative;z-index:1;text-align:center;padding:0 16px}

/* floating pill badges on image */
.hero-badge-float{
  position:absolute;top:-14px;left:20px;
  background:#fff;border-radius:12px;padding:9px 13px;
  box-shadow:var(--sh-g);
  border:1px solid var(--g-light);
  display:flex;align-items:center;gap:8px;
  animation:flt 4s ease-in-out infinite;
}
@keyframes flt{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.hbf-icon{font-size:18px}
.hbf-t{font-size:11px;font-weight:700;color:var(--g-dark);line-height:1.2}
.hbf-s{font-size:10px;color:var(--n-muted)}

/* ════════════════════
   REAL ESTATE CAROUSEL
   ════════════════════ */
#re-carousel{
  background:var(--n-off);padding:36px 0;
  border-top:1px solid var(--g-light);
  border-bottom:1px solid var(--b-light);  /* blue bottom border */
  overflow:hidden;position:relative;
}
#re-carousel::before,#re-carousel::after{
  content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none;
}
#re-carousel::before{left:0;background:linear-gradient(90deg,var(--n-off),transparent)}
#re-carousel::after{right:0;background:linear-gradient(-90deg,var(--n-off),transparent)}
.re-label{
  text-align:center;font-size:11px;font-weight:700;letter-spacing:.14em;
  color:var(--n-muted);text-transform:uppercase;margin-bottom:22px;
}
.re-track-wrap{overflow:hidden}
.re-track{display:flex;gap:0;align-items:center;width:max-content;animation:scroll-re 28s linear infinite}
.re-track:hover{animation-play-state:paused}
@keyframes scroll-re{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.re-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 36px;flex-shrink:0;gap:6px;
  border-right:1px solid var(--b-light);  /* blue dividers */
}
.re-item:last-child{border-right:none}
.re-logo-box{
  height:48px;display:flex;align-items:center;justify-content:center;
  padding:8px 16px;border-radius:10px;
  background:#fff;border:1px solid var(--b-light);
  min-width:120px;transition:all .25s;cursor:default;
}
.re-item:hover .re-logo-box{border-color:var(--b-base);box-shadow:var(--sh-b);transform:translateY(-2px)}
.re-logo-text{font-size:15px;font-weight:700;white-space:nowrap;line-height:1}
.re-sub{font-size:10.5px;color:var(--n-muted);font-weight:500;letter-spacing:.02em;text-align:center}

/* ════════════════════
   TRUST BAR
   ════════════════════ */
#trust-bar{
  /* deep blue — strong contrast band */
  background:linear-gradient(135deg,var(--b-dark) 0%,var(--b-base) 100%);
  padding:22px 5%;
}
.tb-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap;gap:16px}
.ts{text-align:center}
.ts-n{
  font-family:'Playfair Display',serif;font-size:28px;font-weight:700;
  color:var(--l-base);  /* lime numbers on blue — high contrast pop */
  display:block;
}
.ts-l{font-size:11.5px;color:rgba(255,255,255,.7);margin-top:2px}
.tb-div{width:1px;height:40px;background:rgba(255,255,255,.2)}

/* ════════════════════
   COMMON SECTION BASE
   ════════════════════ */
.sec{padding:90px 5%}
.sec-inner{max-width:1200px;margin:0 auto}
.sec-label{
  font-size:11px;font-weight:700;letter-spacing:.14em;
  color:var(--b-base);  /* blue eyebrow labels */
  text-transform:uppercase;margin-bottom:10px;
}
h2{font-family:'Playfair Display',serif;font-size:clamp(26px,3.2vw,42px);font-weight:700;line-height:1.12;color:var(--g-dark);margin-bottom:14px}
h2 em{font-style:italic;color:var(--b-base)}  /* blue italic in headings */
.sec-intro{font-size:15.5px;color:var(--n-body);line-height:1.75;max-width:580px;margin-bottom:48px}
.center-text{text-align:center}
.center-text .sec-intro{margin-left:auto;margin-right:auto}

/* ════════════════════
   SERVICES
   ════════════════════ */
#services{background:#fff}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.svc-card{
  border:1.5px solid var(--g-light);border-radius:var(--r);
  padding:26px;transition:all .25s;
  background:var(--g-pale);text-decoration:none;display:block;
  position:relative;overflow:hidden;
}
.svc-card::before{  /* blue-to-lime top accent line, hidden by default */
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--b-base),var(--l-base));
  transform:scaleX(0);transition:transform .3s;transform-origin:left;
}
.svc-card:hover{transform:translateY(-4px);box-shadow:var(--sh-b);border-color:var(--b-light);background:#fff}
.svc-card:hover::before{transform:scaleX(1)}
.svc-icon{
  width:48px;height:48px;border-radius:10px;
  background:linear-gradient(135deg,var(--b-pale),var(--l-pale));  /* blue-lime tint */
  display:flex;align-items:center;justify-content:center;font-size:21px;margin-bottom:14px;
}
.svc-card h3{font-family:'Playfair Display',serif;font-size:17px;font-weight:700;color:var(--g-dark);margin-bottom:8px}
.svc-card p{font-size:13.5px;color:var(--n-body);line-height:1.6;margin-bottom:12px}
.svc-lnk{font-size:12.5px;font-weight:600;color:var(--b-base)}  /* blue */

/* ════════════════════
   WHY CHOOSE
   ════════════════════ */
#why{background:var(--n-off)}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.why-list{list-style:none}
.wi{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--g-light)}
.wi:first-child{border-top:1px solid var(--g-light)}
.wi-check{
  width:28px;height:28px;flex-shrink:0;border-radius:50%;
  background:var(--l-light);  /* lime check circles */
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:var(--l-dark);
}
.wi h4{font-size:14px;font-weight:600;color:var(--g-dark);margin-bottom:3px}
.wi p{font-size:13px;color:var(--n-body);line-height:1.55}

/* reviews */
.rv-col{display:flex;flex-direction:column;gap:12px}
.rv-card{
  background:#fff;border-radius:var(--r);padding:20px;
  border:1px solid var(--b-light);  /* blue card border */
  box-shadow:var(--sh-b);position:relative;
}
.rv-g{
  position:absolute;top:-9px;right:14px;background:#fff;
  border:1px solid rgba(66,133,244,.2);border-radius:100px;
  padding:3px 9px;font-size:10.5px;font-weight:600;color:#4285f4;
  box-shadow:0 1px 5px rgba(0,0,0,.07);
}
.rv-stars{color:var(--l-base);font-size:12.5px;letter-spacing:1.5px;margin-bottom:7px}  /* lime stars */
.rv-text{font-size:13px;color:var(--n-body);line-height:1.65;font-style:italic;margin-bottom:11px}
.rv-auth{display:flex;align-items:center;gap:8px}
.rv-av{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--b-base),var(--g-dark));  /* blue-green avatar */
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;flex-shrink:0;
}
.rv-name{font-size:12.5px;font-weight:600;color:var(--g-dark)}
.rv-date{font-size:11px;color:var(--n-muted)}

/* ════════════════════
   CHECKLIST
   ════════════════════ */
#checklist{background:#fff}
.cl-grid{display:grid;grid-template-columns: repeat(4, 1fr);;gap:18px}
.cl-item{
  text-align:center;padding:26px 16px;border-radius:var(--r);
  border:1.5px solid var(--g-light);
  background:var(--g-pale);transition:all .25s;
}
.cl-item:hover{transform:translateY(-4px);box-shadow:var(--sh-b);background:#fff;border-color:var(--b-light)}
.cl-emoji{font-size:30px;display:block;margin-bottom:11px}
.cl-item h4{font-size:14px;font-weight:700;color:var(--g-dark);margin-bottom:6px}
.cl-item p{font-size:12.5px;color:var(--n-body);line-height:1.5}

/* ════════════════════
   PROCESS
   ════════════════════ */
#process{background:var(--b-pale)}  /* blue-tinted background */
.ps-row{display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:820px;margin:0 auto;position:relative}
.ps-row::before{
  content:'';position:absolute;top:26px;left:20%;right:20%;height:2px;
  background:linear-gradient(90deg,var(--b-base),var(--l-base),var(--b-base));  /* blue-lime-blue */
}
.ps{text-align:center;padding:0 16px}
.ps-num{
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,var(--b-base),var(--b-dark));  /* blue */
  color:#fff;font-family:'Playfair Display',serif;font-size:20px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;position:relative;z-index:1;
  border:3px solid var(--b-pale);box-shadow:var(--sh-b);
}
.ps h4{font-size:14.5px;font-weight:700;color:var(--g-dark);margin-bottom:7px}
.ps p{font-size:13px;color:var(--n-body);line-height:1.6}

/* ════════════════════
   PRICING
   ════════════════════ */
#pricing{background:var(--g-dark)}  /* dark forest green */
#pricing .sec-label{color:var(--l-base)}   /* lime label on dark */
#pricing h2{color:#fff}
#pricing h2 em{color:var(--l-base)}  /* lime em on dark bg */
#pricing .sec-intro{color:rgba(255,255,255,.65)}
.pr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:24px}
.pr-card{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r);padding:24px 16px;text-align:center;
  transition:all .25s;position:relative;overflow:hidden;
}
.pr-card:hover{background:rgba(107,207,63,.1);border-color:rgba(107,207,63,.3);transform:translateY(-3px)}
/* most popular — blue highlight on green bg */
.pr-pop{
  background:rgba(26,47,224,.25)!important;
  border-color:var(--b-mid)!important;
}
.pop-tag{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  background:linear-gradient(90deg,var(--b-base),var(--b-mid));  /* blue gradient tag */
  color:#fff;font-size:9px;font-weight:700;
  padding:4px 13px;border-radius:0 0 7px 7px;letter-spacing:.06em;text-transform:uppercase;
}
.pr-bed{font-size:12px;color:rgba(255,255,255,.55);margin-bottom:3px}
.pr-bath{font-size:10.5px;color:rgba(255,255,255,.38);margin-bottom:13px}
.pr-price{font-family:'Playfair Display',serif;font-size:28px;font-weight:700;color:#fff;margin-bottom:3px}
.pr-from{font-size:10.5px;color:rgba(255,255,255,.4);margin-bottom:13px}
.pr-tag{
  font-size:10.5px;color:var(--l-base);  /* lime tag text */
  background:rgba(107,207,63,.15);
  border:1px solid rgba(107,207,63,.3);
  border-radius:var(--rpill);padding:3px 9px;display:inline-block;
}
.pr-note{text-align:center;font-size:12.5px;color:rgba(255,255,255,.42);max-width:580px;margin:0 auto 32px;line-height:1.7}
.pr-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ════════════════════
   BUTTONS (global)
   ════════════════════ */
.btn-gold{
  text-decoration:none;
  background:var(--l-base);  /* lime — energetic CTA */
  color:var(--g-dark);padding:13px 32px;border-radius:var(--rpill);
  font-weight:700;font-size:15px;transition:all .25s;
  display:inline-flex;align-items:center;gap:8px;
}
.btn-gold:hover{background:var(--l-mid);transform:translateY(-2px);box-shadow:0 4px 20px rgba(107,207,63,.3)}
.btn-wh{
  text-decoration:none;border:2px solid rgba(255,255,255,.4);color:#fff;
  padding:11px 24px;border-radius:var(--rpill);font-weight:600;font-size:14.5px;
  transition:all .25s;
}
.btn-wh:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6)}

/* ════════════════════
   WHY CARDS (dark band)
   ════════════════════ */
#why-cards{background:linear-gradient(135deg,var(--b-dark) 0%,var(--b-base) 100%)}  /* blue gradient band */
#why-cards .sec-label{color:var(--l-base)}  /* lime on blue */
#why-cards h2{color:#fff}
#why-cards h2 em{color:var(--l-base)}
.wc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.wc-card{
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r);padding:26px 20px;text-align:center;transition:all .25s;
}
.wc-card:hover{background:rgba(107,207,63,.12);border-color:rgba(107,207,63,.25);transform:translateY(-3px)}
.wc-icon{font-size:28px;margin-bottom:12px;display:block}
.wc-card h4{font-family:'Playfair Display',serif;font-size:16px;font-weight:700;color:#fff;margin-bottom:7px}
.wc-card p{font-size:13px;color:rgba(255,255,255,.65);line-height:1.6}

/* ════════════════════
   QUOTE FORM
   ════════════════════ */
#quote{background:var(--b-pale)}  /* light blue bg */
.form-wrap{max-width:860px;margin:0 auto}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-group label{font-size:12.5px;font-weight:600;color:var(--g-dark)}
.form-group select,
.form-group input,
.form-group textarea{
  font-family:'DM Sans',sans-serif;font-size:14px;color:var(--n-charcoal);
  background:#fff;
  border:1.5px solid var(--b-light);
  border-radius:var(--rs);padding:10px 13px;width:100%;
  transition:border-color .2s;-webkit-appearance:none;appearance:none;
}
.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus{outline:none;border-color:var(--b-base);box-shadow:0 0 0 3px rgba(26,47,224,.08)}
.form-group textarea{resize:vertical;min-height:90px}
.form-full{grid-column:1/-1}
.form-submit{display:flex;justify-content:center;margin-top:10px}
.btn-submit{
  background:linear-gradient(135deg,var(--b-base),var(--b-dark));  /* blue gradient */
  color:#fff;border:none;padding:13px 44px;border-radius:var(--rpill);
  font-family:'DM Sans',sans-serif;font-size:15px;font-weight:700;
  cursor:pointer;transition:all .25s;box-shadow:var(--sh-b);
}
.btn-submit:hover{background:linear-gradient(135deg,var(--b-mid),var(--b-base));transform:translateY(-2px);box-shadow:var(--sh-b-lg)}
.form-note{text-align:center;font-size:12.5px;color:var(--n-muted);margin-top:12px}

/* ════════════════════
   AREAS
   ════════════════════ */
#areas{background:var(--g-pale)}
.pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.a-pill{
  text-decoration:none;
  background:linear-gradient(135deg,var(--b-base),var(--b-dark));
  border:1.5px solid var(--g-light);
  border-radius:var(--rpill);
  padding:7px 16px;
  font-size:13px;
  font-weight:500;
  color:#fff;
  transition:all .2s;
}
.a-pill:hover{background:linear-gradient(135deg,var(--b-base),var(--b-dark));color:#fff;border-color:var(--b-base)}

/* ════════════════════
   FAQ
   ════════════════════ */
#faq{background:#fff}
/* .faq-wrap{max-width:760px;margin:0 auto} */
.faq-wrap {
  max-width: 1100px;           /* Increased width for 2 columns */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* 2 columns */
  gap: 30px 40px;                          /* Vertical & Horizontal gap */
}
.faq-item{border-bottom:1px solid var(--g-light)}
.faq-q{
  width:100%;background:none;border:none;text-align:left;
  font-family:'DM Sans',sans-serif;font-size:14.5px;font-weight:600;
  color:var(--g-dark);padding:18px 0;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  transition:color .2s;
}
.faq-q:hover{color:var(--b-base)}  /* blue hover */
.faq-arr{flex-shrink:0;font-size:15px;color:var(--b-base);transition:transform .3s}
.faq-a{max-height:0;overflow:hidden;font-size:13.5px;color:var(--n-body);line-height:1.7;transition:max-height .35s ease,padding-bottom .35s}
.faq-item.open .faq-a{max-height:220px;padding-bottom:16px}
.faq-item.open .faq-arr{transform:rotate(180deg)}

/* ════════════════════
   CTA BAND
   ════════════════════ */
#cta-band{
  /* lime gradient — energetic closing CTA */
  background:linear-gradient(135deg,var(--g-dark) 0%,var(--b-dark) 100%);
  padding:90px 5%;text-align:center;position:relative;overflow:hidden;
}
#cta-band::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 30% 50%,rgba(107,207,63,.15) 0%,transparent 60%),
             radial-gradient(ellipse at 70% 50%,rgba(26,47,224,.2) 0%,transparent 60%);
}
#cta-band h2{color:#fff;position:relative;z-index:1;margin-bottom:12px}
#cta-band h2 em{color:var(--l-base)}
#cta-band p{color:rgba(255,255,255,.75);font-size:16px;margin-bottom:32px;position:relative;z-index:1;max-width:500px;margin-left:auto;margin-right:auto}
.cta-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}

/* ════════════════════
   FOOTER
   ════════════════════ */
#footer{background:var(--g-darkest);padding:56px 5% 26px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;max-width:1200px;margin:0 auto 40px}
.f-brand-logo{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.f-logo-box{
  width:40px;height:40px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(135deg,var(--b-base),var(--g-mid));  /* blue-green gradient */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.f-logo-box .leaf{font-size:18px}
.f-brand-name strong{font-family:'Playfair Display',serif;font-size:15px;font-weight:700;color:#fff;display:block;line-height:1.2}
.f-brand-name em{font-style:normal;font-size:10px;color:rgba(255,255,255,.4);letter-spacing:.05em;text-transform:uppercase}
.f-brand p{font-size:13px;color:rgba(255,255,255,.45);line-height:1.7;max-width:260px;margin-bottom:16px}
.f-contact a{display:flex;align-items:center;gap:6px;text-decoration:none;color:rgba(255,255,255,.6);font-size:13px;margin-bottom:8px;transition:color .2s}
.f-contact a:hover{color:var(--l-base)}  /* lime hover */
.f-social{display:flex;gap:8px;margin-top:14px}
.f-soc{
  text-decoration:none;width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:rgba(255,255,255,.5);transition:all .2s;
}
.f-soc:hover{background:var(--b-base);border-color:var(--b-base);color:#fff}  /* blue */
.f-col h5{font-size:11px;font-weight:700;color:rgba(255,255,255,.9);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.f-col a{display:block;text-decoration:none;font-size:13px;color:rgba(255,255,255,.48);margin-bottom:8px;transition:color .2s}
.f-col a:hover{color:var(--l-base)}  /* lime hover */
.footer-bottom{
  max-width:1200px;margin:0 auto;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
}
.footer-bottom p{font-size:12px;color:rgba(255,255,255,.35)}
.f-eco{font-size:12px;color:var(--l-base);font-weight:700}  /* lime */

/* ════════════════════
   SCROLL REVEAL
   ════════════════════ */
.reveal{opacity:1;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease}
.reveal.in{opacity:1;transform:none}

/* ════════════════════
   RESPONSIVE
   ════════════════════ */
@media(max-width:900px){
  #about .sec-inner > div{grid-template-columns:1fr!important}
  #about .sec-inner > div > div:last-child{display:none}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:768px){
  .reveal{opacity:1!important;transform:none!important}
  #hero{grid-template-columns:1fr;padding:90px 5% 60px;gap:40px;min-height:auto}
  .hero-right{display:none}
  #topbar{justify-content:center;gap:0;overflow-x:auto;padding:8px 4%;flex-wrap:nowrap;justify-content:flex-start}
  .nav-links,.nav-btns{display:none}
  .hamburger{display:flex}
  #nav{padding:0 4%;gap:0}
  .nav-logo{flex:1}
  #hero{padding:80px 4% 50px}
  h1{font-size:34px}
  .sec{padding:64px 4%}
  .why-grid{grid-template-columns:1fr}
  .ps-row{grid-template-columns:1fr;gap:28px}
  .ps-row::before{display:none}
  .footer-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .fg{grid-template-columns:1fr}
  .pr-grid{grid-template-columns:1fr 1fr}
  .hero-btns{flex-direction:column;align-items:flex-start}
  .btn-dark,.btn-out{width:100%;justify-content:center}
}



/* --- General Section Style --- */
.about-service, .service_discription {
    padding: 90px 0;
    background: #fff;
}

/* --- Content & Images --- */
.about-image {
    position: relative;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.12);
}
.about-image img {
    width: 100%;
    height: 600px;
    object-fit: cover;
    display: block;
}
.floating-card {
    position: absolute;
    background: #fff;
    border-radius: 50px;
    padding: 12px 20px;
    font-weight: 600;
    box-shadow: 0 10px 35px rgba(0,0,0,.15);
    font-size: 15px;
    z-index: 2;
}
.top-card { top: 25px; left: 25px; }
.bottom-card { bottom: 25px; left: 25px; }

.section-badge {
    display: inline-block;
    padding: 8px 18px;
    background: #eaf8ef;
    color: #0aaa30;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 18px;
}
.section-title {
    font-size: 48px;
    font-weight: 700;
    color: #10322b;
    line-height: 1.2;
    margin-bottom: 20px;
}
.section-title span { color: #0aaa30; }
.section-desc {
    font-size: 17px;
    line-height: 1.9;
    color: #555;
    margin-bottom: 35px;
}

/* --- Trust Grid --- */
.trust-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}
.trust-item {
    background: #f8faf9;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 15px 18px;
    font-weight: 500;
    transition: .3s;
}
.trust-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
}
.trust-item i {
    color: #0aaa30;
    margin-right: 8px;
}
.about-buttons {
    margin-top: 35px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* --- Why Choose Us Section --- */
.why-us-section {
    padding: 60px 0;
    background: #f8fbf9;
}
.section-heading {
    max-width: 700px;
    margin: 0 auto 60px auto;
}
.section-heading h2 {
    font-size: 42px;
    font-weight: 700;
    margin: 15px 0;
}
.section-heading h2 span { color: #0aaa30; }
.section-heading p {
    color: #666;
    line-height: 1.8;
}
.why-card {
    background: #fff;
    border-radius: 18px;
    padding: 35px 25px;
    text-align: center;
    transition: .35s;
    height: 100%;
    border: 1px solid #ececec;
}
.why-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0,0,0,.08);
}
.why-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px auto;
    border-radius: 50%;
    background: #0aaa30;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
}

/* --- Grid Map & Info Cards --- */
.sidebar-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(0,0,0,.08);
    margin-bottom: 30px;
    border: 1px solid #edf0f3;
    overflow: hidden;
    height: 100%; /* Ensures alignment across rows */
}
.sidebar-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: #0aaa30;
    color: #fff;
}
.sidebar-header i {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    color: #0aaa30;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.sidebar-header h5 {
    margin: 0;
    color: #fff;
    font-weight: 700;
}
.sidebar-header small { color: #e7fbe8; }
.sidebar-card iframe {
    display: block;
    width: 100%;
    height: 250px;
    border: 0;
}
.sidebar-contact { padding: 25px; }
.contact-row {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}
.contact-row i {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #eaf8ef;
    color: #0aaa30;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.contact-row strong {
    display: block;
    color: #14352d;
}
.contact-row a, .contact-row span {
    color: #666;
    text-decoration: none;
}
.sidebar-btn {
    display: block;
    margin-top: 20px;
    background: #0aaa30;
    color: #fff;
    text-align: center;
    padding: 14px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: .3s;
}
.sidebar-btn:hover {
    background: #0b8d52;
    color: #fff;
}
.sidebar-title {
    padding: 22px 25px;
    margin: 0;
    border-bottom: 1px solid #eee;
    font-size: 20px;
    font-weight: 700;
    color: #14352d;
}
.sidebar-title i {
    color: #0aaa30;
    margin-right: 10px;
}
.sidebar-links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sidebar-links li { border-bottom: 1px solid #f1f1f1; }
.sidebar-links li:last-child { border-bottom: none; }
.sidebar-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 25px;
    color: #444;
    text-decoration: none;
    transition: .3s;
}
.sidebar-links a:hover {
    background: #f7fbf8;
    color: #0aaa30;
    padding-left: 30px;
}

/* --- Responsive Adjustments --- */
@media(max-width: 991px) {
    .about-image { margin-bottom: 40px; }
    .about-image img { height: 400px; }
    .section-title { font-size: 36px; }
}
@media(max-width: 576px) {
    .trust-grid { grid-template-columns: 1fr; }
    .about-image img { height: 300px; }
    .floating-card {
        font-size: 13px;
        padding: 10px 15px;
    }
}