:root{
  --primary: #0a57a3;
  --primary-2:#083d75;
  --bg:#ffffff;
  --muted:#f3f7ff;
  --text:#121826;
  --sub:#4b5563;
  --card:#ffffff;
  --border: rgba(17,24,39,.12);
  --shadow: 0 10px 30px rgba(2,6,23,.08);
  --radius: 16px;
  --max: 1100px;
}

*{box-sizing:border-box;margin:0;padding:0;font-family: Arial, Helvetica, sans-serif;}
body{background:var(--bg);color:var(--text);line-height:1.6;}
a{color:inherit;}
img{max-width:100%;display:block;}

html, body { height: 100%; }

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main{ flex: 1; }

/* optional: your footer currently has margin-top:40px; which can look like a gap */
.footer{ margin-top: 0; }

.container{max-width:var(--max);margin:0 auto;padding:0 20px;}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  background: rgba(10,87,163,.10);
  color: var(--primary);
  border: 1px solid rgba(10,87,163,.20);
  padding: 6px 10px;border-radius:999px;
  font-weight:700;font-size:.85rem;
}

header{
  background: linear-gradient(120deg, var(--primary), var(--primary-2));
  color:#fff;
    padding-top: 1px;   /* prevents margin-collapsing into body */
  margin-top: -1px;   /* cancels the visual change */
}
.header-inner{
  padding: 20px 0;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff;}
.brand img{height:54px;width:auto;}
.brand-title{display:flex;flex-direction:column;line-height:1.15;}
.brand-title strong{font-size:1.35rem;}
.brand-title span{opacity:.9;font-size:.95rem;}

nav{
  background: rgba(255,255,255,.08);
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.nav-inner{
  padding: 10px 0;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.nav-links{list-style:none;display:flex;gap:16px;flex-wrap:wrap;}
.nav-links a{
  color:#fff;text-decoration:none;font-weight:800;
  padding:8px 10px;border-radius:10px;
}
.nav-links a:hover{background: rgba(255,255,255,.12);}
.nav-cta{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:12px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12);
  color:#fff;text-decoration:none;font-weight:900;
}
.btn:hover{background: rgba(255,255,255,.18);}
.btn.primary{
  background:#fff;color:var(--primary-2);
  border-color:#fff;
}
.btn.primary:hover{opacity:.95;}

.hero{
  padding: 56px 0 34px 0;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 22px;
  align-items:stretch;
}
.hero h1{font-size:2.3rem;line-height:1.15;margin:10px 0 10px;}
.hero p{color:rgba(255,255,255,.92);font-size:1.05rem;max-width:55ch;}
.hero-card{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 12px 40px rgba(2,6,23,.18);
}
.hero-card h3{font-size:1.1rem;margin-bottom:8px;}
.hero-list{list-style:none;display:grid;gap:8px;color:rgba(255,255,255,.92);}
.hero-list li{display:flex;gap:10px;align-items:flex-start;}
.hero-list .dot{
  width:10px;height:10px;border-radius:999px;background:#fff;margin-top:7px;flex:0 0 auto;
}

main{padding: 42px 0;}
.section{padding: 34px 0;}
.section h2{font-size:1.6rem;color:var(--primary);margin-bottom:10px;}
.section p.lead{color:var(--sub);max-width:75ch;margin-bottom:18px;}

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.card h3{margin-bottom:8px;font-size:1.15rem;color:var(--primary-2);}
.card p{color:var(--sub);}
.card .actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;}
.card .link{
  display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;font-weight:900;
  color: var(--primary);
  border: 1px solid rgba(10,87,163,.25);
  background: rgba(10,87,163,.08);
  padding: 9px 12px;border-radius: 12px;
}
.card .link:hover{background: rgba(10,87,163,.12);}
.card .ghost{
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.card .ghost:hover{background: rgba(2,6,23,.03);}

.span-4{grid-column: span 4;}
.span-6{grid-column: span 6;}
.span-8{grid-column: span 8;}
.span-12{grid-column: span 12;}

.strip{
  background: var(--muted);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.form{
  display:grid;gap:12px;
}
.input{
  display:grid;gap:6px;
}
label{font-weight:800;font-size:.95rem;}
input, textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background:#fff;
  font-size: 1rem;
}
textarea{min-height: 140px;resize: vertical;}
.small{font-size:.9rem;color:var(--sub);}

.footer{
  background: var(--primary-2);
  color:#fff;
  margin-top: 40px;
}
.footer-inner{
  padding: 18px 0;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  opacity:.95;
}
.footer a{color:#fff;text-decoration:none;font-weight:800;}
.footer a:hover{text-decoration:underline;}

@media (max-width: 900px){
  .hero-grid{grid-template-columns: 1fr;}
  .span-4,.span-6,.span-8{grid-column: span 12;}
}
/* Make badges readable on the dark header/hero */
header .badge{
  background: rgba(255,255,255,.14);
  color:#fff;
  border: 1px solid rgba(255,255,255,.22);
}
/* ===== Global background image (subtle + stays as you scroll) ===== */
body{
  position: relative;
  background: #ffffff; /* keep your base */
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;

  /* Background image + gentle fade */
  background:
    radial-gradient(circle at top, rgba(10,87,163,.10), rgba(255,255,255,.95) 55%),
    url("/assets/images/bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  /* This is what makes it not overwhelming */
  opacity: 0.14;
  filter: blur(0px) saturate(0.9);
}

/* Make content readable on top */
header, main, footer{
  position: relative;
}
/* ===== Homepage hero banner image ===== */
/* ===== Homepage/Pages hero banner image (per-page) ===== */
.hero-banner{
  position: relative;
  overflow: hidden;
}

.hero-banner::before{
  content:"";
  position:absolute;
  inset:0;

  /* Use the per-page hero image variable */
  background-image:
    linear-gradient(120deg, rgba(10,87,163,.72), rgba(8,61,117,.62)),
    var(--hero-image, url("/assets/images/hero-home.jpg"));

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

.hero-banner .container{
  position: relative;
  z-index: 1;
}

/* Keep hero text readable on top of photos */
.hero-banner h1,
.hero-banner p,
.hero-banner .hero-list,
.hero-banner .hero-card h3{
  color: #fff;
}
.hero-banner p{ opacity: .92; }

.hero-banner .hero-card{
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.26);
  backdrop-filter: blur(10px);
}
/* ===== Floating Chat Widget ===== */
:root{
  --chat-z: 9999;
  --chat-bg: #ffffff;
  --chat-surface: #f8fafc;
  --chat-text: #0f172a;
  --chat-sub: #475569;
  --chat-border: rgba(2,6,23,.12);
  --chat-shadow: 0 18px 50px rgba(2,6,23,.18);
  --chat-primary: #0a57a3;
  --chat-primary2:#083d75;

  /* sizing */
  --chat-panel-h: 520px;
  --chat-quick-max: 170px;   /* quick replies won’t grow forever */
}

/* Floating button */
.chat-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: var(--chat-z);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: linear-gradient(90deg, var(--chat-primary), #1d9bf0);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--chat-shadow);
}
.chat-fab:focus{ outline: 3px solid rgba(29,155,240,.35); outline-offset: 3px; }
.chat-fab .dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: #34d399;
  box-shadow: 0 0 0 4px rgba(52,211,153,.20);
}

/* Panel */
.chat-panel{
  position: fixed;
  right: 18px;
  bottom: 74px;
  width: min(380px, calc(100vw - 36px));
  height: var(--chat-panel-h);
  z-index: var(--chat-z);
  background: var(--chat-bg);
  color: var(--chat-text);
  border: 1px solid var(--chat-border);
  border-radius: 18px;
  box-shadow: var(--chat-shadow);
  overflow: hidden;

  display: none;
  flex-direction: column;  /* important: column layout */
}
.chat-panel.open{ display:flex; }

/* Header */
.chat-header{
  background: linear-gradient(90deg, var(--chat-primary2), var(--chat-primary));
  color: #fff;
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 auto;
}
.chat-header strong{ font-size: 1rem; }
.chat-header small{ opacity: .9; display:block; font-weight: 600; }

.chat-close{
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  color:#fff;
  border-radius: 12px;
  padding: 6px 10px;
  cursor:pointer;
  font-weight: 800;
}

/* Messages area: ONLY this scrolls */
.chat-body{
  flex: 1 1 auto;
  min-height: 0;              /* critical for flex scrolling */
  overflow-y: auto;
  padding: 12px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  background: var(--chat-surface);
}

/* Message bubbles */
.chat-msg{
  max-width: 90%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--chat-border);
  background: #fff;
  color: var(--chat-text);
  line-height: 1.35;
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
  word-wrap: break-word;
}
.chat-msg.bot{ align-self: flex-start; }
.chat-msg.user{
  align-self: flex-end;
  background: rgba(10,87,163,.10);
  border-color: rgba(10,87,163,.22);
}
.chat-msg .meta{
  margin-top: 6px;
  font-size: .82rem;
  color: var(--chat-sub);
}

/* Quick replies: lives UNDER messages, never overlays */
.chat-quick{
  flex: 0 0 auto;

  /* If anything previously set this to absolute/sticky, kill that */
  position: static !important;

  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px 12px;
  background: var(--chat-surface);
  border-top: 1px solid rgba(2,6,23,.06);

  /* If there are lots of buttons, this area scrolls instead of covering messages */
  max-height: var(--chat-quick-max);
  overflow-y: auto;
}

/* Chips */
.chat-chip{
  border: 1px solid rgba(10,87,163,.22);
  background: rgba(10,87,163,.08);
  color: var(--chat-primary2);
  border-radius: 999px;
  padding: 7px 10px;
  font-weight: 800;
  cursor: pointer;
  font-size: .9rem;

  /* wrapping fix */
  max-width: 100%;
  white-space: normal;
  text-align: left;
  line-height: 1.2;
}
.chat-chip:hover{ background: rgba(10,87,163,.12); }

/* Input pinned at bottom */
.chat-input{
  flex: 0 0 auto;
  padding: 10px;
  display:flex;
  gap: 8px;
  border-top: 1px solid rgba(2,6,23,.08);
  background: #fff;
}
.chat-input input{
  flex: 1;
  border: 1px solid var(--chat-border);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 1rem;
  outline: none;
}
.chat-input input:focus{
  border-color: rgba(10,87,163,.45);
  box-shadow: 0 0 0 4px rgba(10,87,163,.12);
}
.chat-send{
  border: none;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 900;
  background: linear-gradient(90deg, var(--chat-primary), #1d9bf0);
  color:#fff;
  cursor:pointer;
}
.chat-send:hover{ filter: brightness(1.02); }

/* Mobile: panel fills more screen nicely */
@media (max-width: 520px){
  .chat-panel{
    right: 12px;
    left: 12px;
    width: auto;
    height: 70vh;
    bottom: 74px;
  }
  .chat-fab{ right: 12px; bottom: 12px; }
}
.chat-header-actions{
  display:flex;
  gap:8px;
  align-items:center;
}

.chat-reset{
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  color:#fff;
  border-radius: 12px;
  padding: 6px 10px;
  cursor:pointer;
  font-weight: 900;
  line-height: 1;
}
.chat-reset:hover{ background: rgba(255,255,255,.20); }