:root{
  --green:#0bb04b;
  --black:#0b0b0b;
  --muted:#6b6b6b;
  --glass-bg: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.12);
  --maxw: 1100px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--black);
  background: linear-gradient(180deg,#f3f7f6 0%, #eef2f1 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

/* container: consistent centered layout + padding */
.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 32px; /* consistent gutter so nothing touches edges */
}

/* HEADER */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(255,255,255,0.8);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
}
.logo-dummy{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:8px 18px;
  background:var(--black);
  color:var(--green);
  border-radius:8px;
  font-weight:700;
  letter-spacing:0.6px;
  box-shadow: 0 4px 14px rgba(11,11,11,0.06);
}
/* nav unchanged visually - only hover changed */
.main-nav{display:flex;gap:14px;align-items:center}
.main-nav a{
  display:inline-block;
  padding:8px 12px;
  text-decoration:none;
  color:var(--black);
  font-weight:600;
  border-radius:8px;
  transition: background .18s ease, color .18s ease;
}
.main-nav a:hover{
  background:var(--green);
  color:#fff;
}

/* HERO */
.hero-section{position:relative;height:100vh;display:flex;align-items:center;overflow:hidden}
.hero-bg{
  position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;filter:brightness(0.98);
}
.hero-content{position:relative;z-index:2;display:flex;align-items:flex-start;height:100%}
.hero-left{max-width:560px;padding:80px 0}
.hero-title{
  margin:0;
  font-size:clamp(28px,4.8vw,48px);
  font-weight:700;
  color:var(--black);
  line-height:1.02;
  margin-top: 200px;
}
.hero-cta{
  display:inline-block;margin-top:20px;padding:12px 24px;border-radius:8px;background:var(--black);color:var(--green);
  font-weight:700;text-decoration:none;border:2px solid rgba(0,0,0,0.08);
}

/* SECTIONS general */
.section-heading{font-size:24px;margin:28px 0 18px;font-weight:700;color:var(--black)}
.center{text-align:center}

/* SERVICES CARDS */
.services-section{padding:36px 0 12px}
.cards-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  align-items:stretch;
  text-align: center;
}
.service-card{cursor:pointer}
.card-glass{
  height:160px;
  padding:18px;border-radius:12px;
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.85));
  border:1px solid rgba(11,11,11,0.06);
  box-shadow: 0 8px 18px rgba(11,11,11,0.04);
  display:flex;flex-direction:column;justify-content:center;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .2s;
}
.card-glass h4{margin:0 0 6px;font-size:16px}
.card-glass p{margin:0;font-size:13px}
.service-card:hover .card-glass{transform:translateY(-8px)}

/* BOOK FORM */
.book-section{padding:36px 0}
.book-form{display:flex;justify-content:center}
.form-glass{
  width:100%;
  max-width:520px;
  padding:20px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.92));
  border:1px solid rgba(11,11,11,0.06);
  box-shadow: 0 10px 24px rgba(11,11,11,0.05);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.field{display:flex;flex-direction:column;gap:6px}
.label-text{font-weight:700;font-size:14px}
.required{color:var(--green);margin-left:6px;font-weight:700}
.form-glass input{
  padding:10px 12px;border-radius:8px;border:1px solid rgba(11,11,11,0.08);
  font-size:15px;background:#fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.form-cta{
  margin-top:6px;
  padding:10px 12px;
  border-radius:8px;
  background:var(--black);
  color:var(--green);
  font-weight:700;
  border:2px solid rgba(0,0,0,0.08);
  cursor:pointer;
  width:220px;
  align-self:center; /* button centered within form */
}

/* REVIEWS */
.reviews-section{padding:36px 0}
.reviews-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.review-card{
  padding:18px;border-radius:12px;background:#fff;border:1px solid rgba(11,11,11,0.04);
  box-shadow: 0 8px 16px rgba(11,11,11,0.03);
}
.rev-text{margin:0 0 8px;color: #000;         /* black */
    font-weight: bold;   /* bold text */ text-align: center;}
.rev-author{margin:0;color:black; text-align: center;}

/* MAP + ADDRESS */
.contact-section{padding:36px 0 80px}
.map-address{display:flex;gap:20px;align-items:stretch}
.map-half,.addr-half{flex:1;display:flex;flex-direction:column}
.map-half .center{margin-bottom:12px}
.map-embed{width:100%;height:270px;border:0;border-radius:10px}
.addr-half {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.contact-image {
    width: 100%;
    max-width: 500px;    /* adjust if you want larger */
    height: 350px;
    border-radius: 20px; /* optional – makes it nicer */
    object-fit: cover;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}


/* FOOTER */
.site-footer{background:var(--black);color:var(--green);padding:18px 0}
.footer-inner{display:flex;align-items:center;justify-content:center}

/* RESPONSIVE */
@media (max-width:1000px){
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .reviews-grid{grid-template-columns:repeat(2,1fr)}
  .map-address{flex-direction:column}
  .hero-left{padding:60px 0}
}

@media (max-width:640px){
  .main-nav{display:none}
  .mobile-nav-toggle{display:block}
  .cards-grid,.reviews-grid{grid-template-columns:1fr}
  .form-cta{width:100%}
  .hero-left{padding:28px 0}
  .hero-title{font-size:28px}
}
@media (max-width: 768px) {
    .map-address {
        flex-direction: column;
    }

    .contact-image {
        max-width: 100%;
        margin-top: 20px;
    }
}
/* MOBILE HERO IMAGE */
@media (max-width: 768px) {
    .hero-bg {
        content: url("images/hero-mobile.png");
        object-fit: cover;
        height: 100vh;
        width: 100%;
    }
}
/* HERO — MOBILE ADJUSTMENTS */
@media (max-width: 768px) {


    /* Larger title */
    .hero-title {
        font-size: 2.5rem;     /* larger on mobile */
        line-height: 1.3;
        max-width: 80%;        /* better text width */
    }

    /* Bigger CTA button */
    .hero-cta {
        padding: 14px 26px;
        font-size: 1.3rem;
        margin-top: 12px;
    }
}
/* ===============================
   MOBILE FONT SIZE ADJUSTMENTS
   =============================== */
@media (max-width: 768px) {

  /* Global text scaling */
  body {
    font-size: 18px;      /* base text bigger */
  }

  h2, h3, h4 {
    line-height: 1.3;
  }

  /* HERO */
  .hero-title {
    font-size: 28px;      /* bigger hero heading */
    margin-top: 400px;
  }
  .hero-cta {
    font-size: 18px;
    padding: 14px 22px;
  }

  /* Service cards */
  .service-card h4 {
    font-size: 20px;
  }
  .service-card p {
    font-size: 16px;
  }

  /* FORM */
  .label-text {
    font-size: 16px;
  }
  input {
    font-size: 16px;
    padding: 14px;
  }
  .form-cta {
    font-size: 18px;
    padding: 14px;
  }


  /* Section headings */
  .section-heading {
    font-size: 26px;
  }
}
@media (max-width: 768px) {

  /* REVIEW CARDS — MOBILE OVERRIDES */
  .rev-text {
    font-size: 18px !important;
  }

  .rev-author {
    font-size: 16px !important;
  }
}
@media (max-width: 768px) {
    .hero-content {
        margin-top: 140px;   /* safe and responsive */
    }
}
@media (max-width: 768px) {
    .container {
        padding: 0 18px;   /* safe padding */
    }
}
/* FIX: stop global horizontal scrolling */
@media (max-width: 768px) {

    /* reduce global left/right padding */
    .container {
        padding: 0 18px;
    }

    /* FIX HERO OVERFLOW — remove 90vh push */
    .hero-content {
        margin-top: 140px !important;  
    }
}