:root{
      --bg:#ffffff; --text:#1a1a1a; --muted:#555; --primary:#0a7cff;
      --accent:#0e8f69; --border:#e6e6e6; --card:#fafafa;
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
      color:var(--text); background:var(--bg); line-height:1.6;
    }
    a{color:var(--primary); text-decoration:none}
    a:hover{text-decoration:underline}
    .container{max-width:1080px;margin:0 auto;padding:24px}
    header{
      background:linear-gradient(180deg, rgba(10,124,255,0.08), rgba(14,143,105,0.08));
      border-bottom:1px solid var(--border);
    }

.topbar {
  display: flex;
  flex-direction: column;   /* stack logo above nav */
  align-items: center;      /* center horizontally */
  text-align: center;
}

.btn {
  display:inline-block;
  padding:12px 16px;
  border-radius:10px;
  font-weight:600;
  border:1px solid var(--border);
  background:#fff;
  color:#0a3a66;
}
.btn.primary {
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}

.logo img {
  display: block;
  margin: 0 auto;
}

.hero-content {
  display: flex;
  align-items: center;   /* vertically center image with text */
  gap: 20px;             /* space between image and text */
}

.hero-content img {
  flex-shrink: 0;        /* prevent image from shrinking */
  border-radius: 8px;    /* optional: rounded corners */
}

.hero-text {
  max-width: 600px;      /* keeps text from stretching too wide */
}

.hero-line {
  display: flex;
  align-items: baseline;   /* keeps heading and paragraph aligned nicely */
  gap: 12px;               /* space between them */
}

.hero-line h2,
.hero-line p {
  margin: 0;               /* remove default spacing */
}

@media (max-width: 600px) {
  .card {
    flex-direction: column;
    text-align: center;
  }
  .card img {
    margin-bottom: 12px;
  }
}

    .logo h1{font-size:22px;margin:0;font-weight:700}

    nav{display:flex;gap:18px;flex-wrap:wrap}

    nav a{font-weight:600;color:#0a3a66}

    .hero{padding:48px 24px 24px}

    .hero h2{font-size:34px;margin:0 0 12px}

    .hero p{color:var(--muted); margin:0 0 16px}

    .cta{display:flex; gap:12px; flex-wrap:wrap}

.card {
  display: flex;
  flex-direction: column;   /* stack vertically */
  align-items: center;      /* center image + text */
  text-align: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
}

.card img {
  width: 100%;
  max-width: 300px;         /* keeps images from being too wide */
  height: auto;
  border-radius: 8px;
}

.card-text {
  width: 100%;
}
/* Your existing grid is fine */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 24px;
}

/* Optional: tighten small screens */
@media (max-width: 600px) {
  .card img { max-width: 100%; }
}

   .card h3{margin:0 0 8px; font-size:18px}
    .badge{display:inline-block; background:#eaf6ff; color:#0a3a66; padding:4px 10px; border-radius:999px; font-weight:600; font-size:13px}
    .section{padding:24px}
    .section h2{font-size:24px; margin:0 0 12px}
    .features{list-style:none; padding:0; margin:0}
    .features li{padding:8px 0; border-bottom:1px dashed var(--border)}
    .features li:last-child{border-bottom:none}
    .map{width:100%; height:320px; border:1px solid var(--border); border-radius:12px; background:#eee}
    footer{
      border-top:1px solid var(--border); background:#f8f8f8; margin-top:36px;
    }

    .footer-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px; padding:24px}
    small{color:var(--muted)}

    .location-small { font-size: 1.2rem; }
    .location-medium { font-size: 1.6rem; }
    .location-large { font-size: 2rem; font-weight: bold; }