:root{
      --primary: #0D47A1;    /* Deep Royal Blue */
      --secondary: #1976D2;  /* Medium Blue */
      --accent: #42A5F5;     /* Sky Blue */
      --lightBg: #E3F2FD;    /* Soft Blue White */
         /* Body text */
      --highlight: #90CAF9;  /* Light tint for cards */
      --glass: rgba(255,255,255,0.08);
      
    }

    /* ========== Reset & base ========== */
    
    html,body{height:100%, width:100%;}
    body{
      margin:0;
      font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      
      color: var(--bodyText);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.45;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}

    .container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    

}

    /* ========== Top contact bar ========== */
    .topbar{
      background:var(--primary);
      color:#fff;
      font-size:14px;
      padding:8px 0;
      box-shadow:0 4px 18px rgba(13,71,161,0.08);
    }
    .topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.topbar a.top-link { color: #fff; text-decoration:none; margin-right:10px; }
.topbar .sep { margin: 0 8px; opacity:0.8; }




   /* Main header */
.main-header {
  border-bottom: 1px solid #eee;
}
.header-inner {
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 18px 16px;
  gap: 20px;
}

/* Brand area */
.brand { display:flex; align-items:center; gap:14px; min-width: 0; }

.logo-wrap { width:76px; height:76px; flex: 0 0 76px; display:flex; align-items:center; justify-content:center; }
.logo { width:72px; height:72px; display:block; border-radius:12px; }

.brand-text { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.site-title { margin:0; font-size:24px; color:#0D47A1; letter-spacing:0.2px; font-family: 'Open Sans', 'Lato', 'Roboto', sans-serif;
font-weight: 700;}
.tagline { margin:2px 0 0; font-size:13px; color:#666; }

/* Contact block on right */
.contact-block { display:flex; gap:18px; align-items:center; }
.contact-item { display:flex; gap:10px; align-items:center; min-width: 0; }
.contact-item .icon { width:36px; height:36px; flex-shrink:0; color:#497ed9; }
.contact-item .small { font-size:12px; color:#666; }
.contact-item .big { font-weight:600; color:#2b2bc1; text-decoration:none; }

/* Navigation */
.nav { border-bottom: 2px solid #eee; background: #fff; border-top:1px solid #f2f2f2; }
.nav-inner { max-width:1200px; margin:0 auto; padding: 10px 16px; display:flex; align-items:center; justify-content:center; position:relative; }




/* Menu items centered */
.menu { list-style:none; margin:0; padding:0; display:flex; gap:28px; align-items:center; }
.menu-link {
  text-decoration:none;
  color:#222;
  padding:8px 6px;
  font-weight:500;
  font-size:15px;
  display:inline-block;
  border-bottom:3px solid transparent;
  transition: color .15s, border-color .15s;
}
.menu-link:hover { color:#1976D2; border-bottom-color:#1976D2; }
.menu-link:focus { outline: 2px solid rgba(25,118,210,0.2); outline-offset:4px; }

/* Active / current */
.menu-link.active { color:#1976D2; border-bottom-color:#1976D2; }

/* Responsive: collapse nav to mobile */
@media (max-width: 860px) {
  .header-inner { padding: 12px 12px; }
  .nav-inner { justify-content:flex-end; }
  .nav-toggle { display:block; }
  .menu {
    position: absolute;
    right: 16px;
    top: 54px;
    flex-direction:column;
    background: #fff;
    padding: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    border-radius:6px;
    display:none;
    min-width: 200px;
    gap:8px;
  }
  .menu.open { display:flex; }
  .brand-text .site-title { font-size:18px; }
  .logo-wrap { width:56px; height:56px; }
  .contact-block { display:none; }
}