:root {
      --primary: #0b3c74; /* deep blue */
      --secondary: #ffffff;
      --accent: #e6f0fb;
      --dark: #0a1f33;
      --muted: #6b7c93;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    }

    body {
      background: var(--secondary);
      color: var(--dark);
      line-height: 1.6;
    }

    /* ===== TOP BAR ===== */
    .top-bar {
      background: var(--dark);
      color: #fff;
      font-size: 0.85rem;
      padding: 6px 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .top-bar a {
      color: #fff;
      text-decoration: none;
      margin-left: 16px;
    }

    /* ===== HEADER ===== */
    header {
      border-bottom: 1px solid #e5e5e5;
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 40px;
    }

    .branding {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .logo {
    width: 68px;
    height: 68px;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden; /* ensures the image stays inside the circle */
    margin-top: 15px;
    }

    .logo img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* use 'contain' if you want the full logo visible */
    }


    .branding h1 {
      font-size: 2.25rem;
      color: var(--primary);
      font-weight: 700;
    }

    .branding h1 a {
      text-decoration: none;
      color: inherit;
      font-weight: inherit;
    }

    .branding p {
      font-size: 0.95rem;
      color: var(--muted);
    }

    /* ===== NAVIGATION ===== */
    nav {
      background: var(--primary);
      position: sticky;  /* Stickiness */
      top: 0;            /* Stick to top */
      z-index: 999;      /* Make sure it stays above other content */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.425);
    }

    nav ul {
      list-style: none;
      display: flex;
      padding: 0 40px;
      justify-content: flex-end;
    }

    nav li {
      position: relative;
    }

    nav a {
      display: block;
      padding: 14px 18px;
      color: #fff;
      text-decoration: none;
      font-weight: 600;
      font-size: 0.9rem;
    }

    nav a:hover {
      background: #669bca;
      color: #0b3c74;;
    }

    /* ===== DROPDOWN MENU ===== */
    nav li.has-dropdown {
      position: relative;
    }

    /* Dropdown container */
    nav ul .dropdown {
      position: absolute;
      top: 100%;
      left: 0;
      background: #ffffff;
      min-width: 220px;
      padding: 4px 0; /* removes side padding */
      display: none;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
      z-index: 1000;
    }


    /* Show dropdown on hover */
    nav li.has-dropdown:hover .dropdown {
      display: block;
    }

    nav ul .dropdown li {
  margin: 0;
}

    /* Dropdown links */
      nav ul .dropdown li a {
        padding: 10px 12px; /* tighter left & right */
        color: var(--dark);
        background: #ffffff;
        font-weight: 500;
        font-size: 0.9rem;
        white-space: nowrap;
      }


    /* Hover effect for dropdown items */
    nav ul .dropdown li a:hover {
      background: var(--accent);
      color: var(--primary);
    }