:root {
  --brand: #0b4d8b;
  --accent: #e5f0fb;
  --text: #1b1b1b;
  --max: 1080px;
}

* { box-sizing: border-box; }
body { margin:0; font:16px/1.6 system-ui, Arial, sans-serif; color:var(--text); background:#fff; }
a { color:var(--brand); text-decoration:none; }
a:hover { text-decoration:underline; }

header { background:var(--brand); color:#fff; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:10px 20px; max-width:var(--max); margin:0 auto; flex-wrap:wrap; }
.brand { font-weight:700; font-size:1.2rem; }
.contact a { color:#fff; margin-left:12px; }
.menu-toggle { display:none; background:none; border:none; color:#fff; font-size:1.5rem; cursor:pointer; }

nav { background:#083d70; display:flex; flex-wrap:wrap; justify-content:center; }
nav a { color:#fff; padding:10px; display:block; }
nav.open { display:block; flex-direction:column; }

.hero { background:var(--accent); padding:20px; text-align:center; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; padding:20px; max-width:var(--max); margin:0 auto; }
.card { background:#fff; border:1px solid #ccc; border-radius:6px; padding:15px; }

footer { background:#f4f4f4; text-align:center; padding:10px; font-size:0.9em; }

img { max-width:100%; height:auto; }

@media (max-width:768px) {
  .menu-toggle { display:block; }
  nav { display:none; }
}




body {
  margin: 0;
  font: 16px/1.6 system-ui, Arial, sans-serif;
  color: var(--text);
  background: #fff;
  padding-left: 15px;   /* add space on left */
  padding-right: 15px;  /* add space on right */
}

.main, .hero, footer, header, nav, .grid {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.hero-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 20px; /* center and add space below */
  border-radius: 4px;  /* optional: slight rounded corners */
}

.hero {
  padding-left: 15px;
  padding-right: 15px;
  text-align: center; /* center text and image in hero section */
}

