/* ===== Theme & Base (global) ===== */
:root {
  --brand-700:#0C65C2;
  --brand-600:#1E7DDF;
  --brand:#0B5CAD;
  --brand-2:#2BBBAD;

  --bg:#F5F8FC;
  --text:#1F2937;
  --muted:#6B7280;
  --card:#ffffff;

  --radius:14px;
  --shadow:0 8px 24px rgba(15,23,42,.08);
  --container:1100px;
  --space:clamp(12px,1.6vw,20px);
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }

body {
  font-family:'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

h1,h2,h3 {
  font-family:'Raleway', sans-serif;
  letter-spacing:.5px;
}

/* Layout helpers */
.container { max-width:var(--container); margin:0 auto; padding:0 20px; }
.section { padding:clamp(36px,6vw,72px) 0; }
.section.alt { background:#fff; }

.grid { display:grid; gap:calc(var(--space)*1.5); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:900px){ .grid-3 { grid-template-columns:1fr; } }


/* ===== Header / Nav (global) ===== */
header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg,var(--brand-700) 0%, var(--brand-600) 100%);
  color:#fff;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.18), var(--shadow);
}
header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 40px;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand img{
  height:76px; width:auto; display:block;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.85))
          drop-shadow(0 0 14px rgba(80,200,255,.45));
  transform: translateY(2px);
}
.brand-text{ font-weight:700; letter-spacing:.3px; font-size:22px; color:#fff; }

nav ul{ display:flex; gap:36px; list-style:none; margin:0; padding:0; }
nav a{
  color:#fff; text-decoration:none; font-weight:600; font-size:17px;
  position:relative; padding:4px 0;
}
nav a::after{
  content:""; position:absolute; left:0; bottom:-6px;
  height:2px; width:0; background:#fff; transition:.25s ease;
}
nav a:hover::after{ width:100%; }
nav a.active{ opacity:.9; }
nav a.active::after{ width:100%; }

/* ===== Shared UI ===== */
.btn{
  display:inline-block; padding:12px 18px; border-radius:10px;
  background:var(--brand); color:#fff; text-decoration:none; font-weight:700;
  transition: transform .06s ease, box-shadow .25s ease, background .25s ease;
  box-shadow:0 8px 16px rgba(11,92,173,.18);
}
.btn:hover{ transform:translateY(-1px); background:#094b8f; }

.card{
  background:var(--card); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow);
  
}
.card:hover {
  transform: translateY(-6px);
  transition: all 0.25s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}
.card h3 {
  margin-top: 0;
  margin-bottom: 8px; /* adds a bit of space before list */
}

/* ===== Footer (global) ===== */
footer {
  background: var(--brand);
  color: #fff;
  padding: 24px 20px;
  font-size: 14px;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap; /* stacks nicely on mobile */
  text-align: center;
}

.footer-inner p {
  margin: 0;
}

/* BBB seal */
.bbb-iframe {
  width: 160px;       /* slightly larger to fit seal fully */
  height: 118px;
  border: 0;
  display: block;
  border-radius: 8px;
  background: #fff;
  padding: 4px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
  transition: transform .25s ease, box-shadow .25s ease;
}

.bbb-iframe:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}

/* ===== Header: Mobile responsiveness ===== */
@media (max-width: 720px) {
  header .container{
    padding: 12px 16px;
    flex-wrap: wrap;          /* allow brand + nav to wrap */
    gap: 10px;
    justify-content: center;  /* center nicely on small screens */
  }

  .brand{
    width: 100%;
    justify-content: center;  /* center logo + text */
  }

  .brand img{
    height: 52px;             /* smaller logo on mobile */
  }

  .brand-text{
    font-size: 18px;
  }

  nav{
    width: 100%;
  }

  nav ul{
    justify-content: center;
    flex-wrap: wrap;          /* allow links to wrap to 2 lines */
    gap: 16px;
  }

  nav a{
    font-size: 15px;
  }
}