@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@600;700;800&display=swap');
:root{
  --bg:#ffffff; --text:#0f172a; --muted:#475569;
  --blue:#2e78bc; --green:#479573; --gray:#4a5668; --light:#a2c8ea;
  --border:#e5e7eb; --card:#f8fafc; --radius:14px;
}
*{box-sizing:border-box}

/* NEW: Make all images responsive and fill container width */
img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Helvetica Neue", Arial, system-ui, -apple-system, Segoe UI, Roboto, "Manrope", sans-serif;line-height:1.6}
.y-header{position:sticky;top:0;z-index:999;background:rgba(255,255,255,.96);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--border)}
.y-container{max-width:1200px;margin:0 auto;padding:0 16px}
.y-nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.y-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.y-logo-img{height:84px;width:auto;display:block}
.y-title{font-family:"Manrope",sans-serif;font-weight:800;letter-spacing:-.02em}
.y-menu{display:flex;gap:10px;align-items:center}
.y-menu a{color:var(--gray);text-decoration:none;font-weight:700;font-family:"Manrope",sans-serif;padding:9px 10px;border-radius:10px}
.y-menu a:hover{color:#fff;background:var(--blue)}
.y-cta{margin-left:6px;background:var(--green);color:#fff;text-decoration:none;font-weight:800;font-family:"Manrope",sans-serif;padding:10px 14px;border-radius:12px}
.nav-group{position:relative}
.nav-btn{background:transparent;border:0;font-family:"Manrope",sans-serif;font-weight:800;color:var(--gray);padding:9px 10px;border-radius:10px;cursor:pointer}
.nav-btn:hover{color:#fff;background:var(--blue)}
.nav-menu{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--border);border-radius:12px;min-width:260px;box-shadow:0 10px 30px rgba(0,0,0,.08);padding:8px;z-index:1000}
.nav-menu a{display:block;padding:8px 10px;border-radius:8px;color:var(--text)}
.nav-menu a:hover{background:var(--card)}

/* FIX: Dropdown active/focus styles */
.nav-menu a:focus,
.nav-menu a:active {
  background: var(--blue);
  color: #fff;
  outline: none;
}
.nav-menu a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.nav-menu a.active,
.nav-menu a.active:hover {
  background: var(--blue);
  color: #fff;
}

.nav-group.open .nav-menu{display:block}
.y-burger{display:none;background:none;border:0;width:40px;height:40px}
.y-burger span{display:block;width:22px;height:2px;background:var(--text);margin:5px auto}
@media (max-width:900px){
  .y-menu{display:none;position:absolute;top:64px;left:0;right:0;background:#fff;border-bottom:1px solid var(--border);padding:12px;flex-direction:column;align-items:stretch}
  .y-menu.open{display:flex}
  .nav-group{width:100%}
  .nav-menu{position:static;display:none;border:0;box-shadow:none;padding:0;margin-top:6px}
  .nav-group.open .nav-menu{display:block}
  .y-burger{display:block}
}
.y-footer{background:var(--card);border-top:1px solid var(--border);margin-top:60px}
.y-foot-grid{display:grid;gap:20px;grid-template-columns:repeat(3,1fr);padding:36px 16px}
.y-foot-col h4{margin:0 0 10px;font-family:"Manrope",sans-serif;font-weight:800}
.y-foot-col a{display:block;color:var(--gray);text-decoration:none;margin:4px 0}
.y-foot-col a:hover{color:var(--blue)}
.y-foot-copy{border-top:1px solid var(--border);padding:14px 16px;color:var(--muted);font-size:14px}
@media (max-width:900px){.y-foot-grid{grid-template-columns:1fr}}
main{padding:24px 16px;max-width:1200px;margin:0 auto}
.btn{background:var(--blue);color:#fff;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:800;font-family:"Manrope",sans-serif;display:inline-block}
.btn:hover{background:#255f95}
.btn-green{background:var(--green)}
.btn-outline{background:transparent;border:2px solid var(--blue);color:var(--blue)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.hero-cta .stack{display:flex;flex-direction:column;gap:8px}
h1{font-family:"Manrope",sans-serif;font-weight:800;letter-spacing:-.01em;font-size:2rem;margin:0 0 8px}
h2{font-family:"Manrope",sans-serif;font-weight:800;font-size:1.5rem;margin:22px 0 8px}
h3{font-family:"Manrope",sans-serif;font-weight:700;font-size:1.25rem;margin:18px 0 6px}
p,li{font-size:1rem}
.hero-container {
  width: 100%;
  height: 400px; /* adjust as needed */
  overflow: hidden;
}
.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero{
  display: grid;
  grid-template-columns: 1fr 1fr; /* left/right halves */
  align-items: center;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 24px;
}
.hero-copy h1{ margin-bottom: 16px; }
.hero-cta .btn{ margin-right: 12px; }
.hero-media{
  position: relative;
  aspect-ratio: 16 / 10;   /* keeps a nice shape */
  overflow: hidden;
  border-radius: 16px;
}
.hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;       /* fill its half nicely */
  display: block;
}
/* Stack on mobile */
@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; }
  .hero-media{ margin-top: 24px; }
}



/* --- Fix for navbar dropdown links disappearing --- */
.y-menu a,
.nav-menu a {
  color: #111827; /* dark gray/black text */
}

.y-menu a:hover,
.y-menu a:focus,
.nav-menu a:hover,
.nav-menu a:focus {
  background-color: #f3f4f6; /* light gray background */
  color: #111827;            /* keep text dark */
}