/* Add this to your custom.css or at the bottom of your main style file */
:root {
--primary-brand-color: #0052FF; /* Distinct RoamBest Blue */
--accent-gold: #D4AF37; /* For "Best" premium feel */
--font-main: 'Inter', sans-serif;
}

<!-- Header Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top">
<div class="container">
<a class="navbar-brand" href="/">Roam<span>Best</span></a>

<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="/esim-shop">eSIM Shop</a></li>
<li class="nav-item"><a class="nav-link" href="/b2b">Partnerships</a></li>
<li class="nav-item"><a class="nav-link" href="/support">Support</a></li>
<li class="nav-item"><a class="btn btn-outline-primary ms-lg-3" href="/login">Client Portal</a></li>
</ul>
</div>
</div>
</nav>

.navbar-brand span {
color: var(--accent-gold); /* Highlighting the "Best" in RoamBest */
}

/* Button Refinement - Mirroring the .me aesthetics */
.btn-primary {
background-color: var(--primary-brand-color);
border: none;
border-radius: 8px;
padding: 12px 24px;
transition: transform 0.2s ease;
}

.btn-primary:hover {
background-color: #0041CC;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 82, 255, 0.3);
}