/* ── Base ── */
    *, *::before, *::after { box-sizing: border-box; }
    body { font-family: 'Open Sans', sans-serif; color: #333; margin: 0; }
    
    a { color: inherit; text-decoration: none; }
    a:hover { text-decoration: none; }

    /* ── Navbar ── */
    .navbar {
      background: linear-gradient(135deg, #0d1f33 0%, #0a3d6b 100%);
      padding: 0;
      box-shadow: 0 2px 16px rgba(0,0,0,0.28);
      position: sticky;
      top: 0;
      z-index: 1030;
    }

    /* Top utility strip */
    .nav-topbar {
      background: rgba(0,0,0,0.25);
      border-bottom: 1px solid rgba(255,255,255,0.08);
      padding: 5px 0;
      font-size: 12px;
      color: rgba(255,255,255,0.6);
      overflow: hidden;
    }
    .nav-topbar a { color: rgba(255,255,255,0.6); font-size: 12px; }
    .nav-topbar a:hover { color: #fff; }
    .nav-topbar .topbar-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
    }
    .topbar-left { display: flex; gap: 20px; align-items: center; }
    .topbar-right { display: flex; gap: 16px; align-items: center; }
    .topbar-left i, .topbar-right i { font-size: 11px; margin-right: 4px; color: #4fc3f7; }

    /* Main nav row */
    .nav-main { padding: 14px 0; }
    .navbar-brand { padding: 0; margin-right: 0; }
    .navbar-brand img {
      height: 54px;
      filter: brightness(0) invert(1);   /* makes any dark/grey logo pure white */
      opacity: 0.95;
      transition: opacity 0.2s;
    }
    .navbar-brand:hover img { opacity: 1; }

    /* Logo text fallback (shown if img fails) */
    .logo-text {
      font-size: 20px;
      font-weight: 700;
      color: #fff;
      letter-spacing: -0.3px;
    }
    .logo-text span { color: #4fc3f7; }

    .navbar-toggler {
      border: 1px solid rgba(255,255,255,0.35);
      padding: 5px 10px;
    }
    .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    .navbar-nav { align-items: center; gap: 2px; }
    .navbar-nav .nav-link {
      color: rgba(255,255,255,0.82) !important;
      font-size: 13.5px;
      font-weight: 600;
      padding: 8px 14px !important;
      border-radius: 4px;
      letter-spacing: 0.2px;
      transition: background 0.18s, color 0.18s;
      position: relative;
    }
    .navbar-nav .nav-link::after {
      content: '';
      position: absolute;
      left: 14px; right: 14px; bottom: 4px;
      height: 2px;
      background: #4fc3f7;
      border-radius: 2px;
      transform: scaleX(0);
      transition: transform 0.2s;
    }
    .navbar-nav .nav-link:hover { color: #fff !important; background: rgba(255,255,255,0.08); }
    .navbar-nav .nav-link:hover::after { transform: scaleX(1); }

    /* Active page indicator */
    .navbar-nav .nav-link.active { color: #fff !important; }
    .navbar-nav .nav-link.active::after { transform: scaleX(1); }

    /* Login ghost button */
    .nav-login {
      color: rgba(255,255,255,0.85) !important;
      border: 1px solid rgba(255,255,255,0.35) !important;
      border-radius: 4px;
      padding: 7px 16px !important;
      margin-left: 4px;
    }
    .nav-login:hover {
      background: rgba(255,255,255,0.12) !important;
      border-color: rgba(255,255,255,0.6) !important;
      color: #fff !important;
    }
    .nav-login::after { display: none !important; }

    /* Primary CTA button */
    .nav-cta {
      background: #4fc3f7 !important;
      color: #0d1f33 !important;
      font-weight: 700 !important;
      border-radius: 4px;
      padding: 8px 18px !important;
      margin-left: 6px;
      white-space: nowrap;
      box-shadow: 0 2px 8px rgba(79,195,247,0.3);
      transition: background 0.18s, box-shadow 0.18s !important;
    }
    .nav-cta:hover {
      background: #29b6f6 !important;
      color: #0d1f33 !important;
      box-shadow: 0 4px 14px rgba(79,195,247,0.45) !important;
    }
    .nav-cta::after { display: none !important; }

    /* Mobile collapse */
    @media (max-width: 991px) {
      .nav-topbar { display: none; }
      .navbar-collapse { background: rgba(0,0,0,0.25); border-top: 1px solid rgba(255,255,255,0.1); margin: 0 -15px; padding: 10px 15px 16px;  overflow: hidden; }
      .navbar-nav .nav-link::after { display: none; }
      .nav-cta { margin: 8px 0 0 0 !important; display: block; text-align: center; }
      .nav-login { margin: 6px 0 0 0 !important; display: block; text-align: center; }
    }
    
        /* user dropdown */
    .nav-user-toggle{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.88)!important;font-size:13.5px;font-weight:600;padding:6px 12px!important;border-radius:50px!important;border:1.5px solid rgba(255,255,255,.25)!important;background:rgba(255,255,255,.07)!important;transition:background .18s,border-color .18s!important;cursor:pointer;margin-left:8px}
    .nav-user-toggle:hover,.nav-user-toggle.show{background:rgba(255,255,255,.14)!important;border-color:rgba(255,255,255,.5)!important;color:#fff!important}
    .nav-user-toggle::after{display:none!important}
    .user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#4fc3f7,#0a3d6b);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
    .user-chevron{font-size:11px;color:rgba(255,255,255,.6);transition:transform .2s}
    .nav-user-toggle.show .user-chevron{transform:rotate(180deg)}
    .user-dropdown-menu{min-width:220px;border:0!important;border-radius:12px!important;box-shadow:0 8px 32px rgba(0,0,0,.18)!important;padding:8px!important;margin-top:10px!important;background:#fff;animation:dropFade .18s ease}
    @keyframes dropFade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
    .dropdown-user-header{padding:12px 14px 10px;border-bottom:1px solid #f0f0f0;margin-bottom:6px}
    .dropdown-user-header .duh-name{font-size:14px;font-weight:700;color:#0d1f33;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .dropdown-user-header .duh-role{font-size:11.5px;color:#888;margin-top:1px}
    .duh-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#4fc3f7,#0a3d6b);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#fff;flex-shrink:0}
    .user-dropdown-menu .dropdown-item{font-size:13.5px;font-weight:500;color:#333;border-radius:8px!important;padding:9px 14px!important;display:flex;align-items:center;gap:10px;transition:background .15s}
    .user-dropdown-menu .dropdown-item i{font-size:15px;width:18px;text-align:center;flex-shrink:0}
    .user-dropdown-menu .dropdown-item:hover{background:#f4f8fc;color:#0a3d6b}
    .user-dropdown-menu .dropdown-item.text-danger:hover{background:#fff5f5;color:#d32f2f!important}
    .user-dropdown-menu .dropdown-divider{margin:6px 0;border-color:#f0f0f0}


/* ── Footer ── */
    .footer { background: #0d1f33; padding: 32px 0 20px; }
    .footer-links a { color: rgba(255,255,255,0.65); font-size: 13px; margin: 0 10px; }
    .footer-links a:hover { color: #fff; }
    .footer-copy { color: rgba(255,255,255,0.45); font-size: 12px; margin-top: 10px; }
    .footer-tagline { color: rgba(255,255,255,0.6); font-size: 12px; margin-top: 6px; }

    /* ── Responsive ── */
    @media (max-width: 767px) {
      .hero h1 { font-size: 1.55rem; }
      .hero { min-height: 420px; }
      .section-pad { padding: 48px 0; }
      .section-title { font-size: 1.4rem; }
    }