<!-- Navigation -->
<nav class="navbar" id="navbar">
    <div class="nav-container">
        <div class="nav-logo">
            <a href="/">
                <picture>
                    <source srcset="/assets/images/ukds-main-logo.webp" type="image/webp">
                    <img src="/assets/images/ukds-main-logo.png" alt="UK Data Services" class="logo">
                </picture>
            </a>
        </div>
        <div class="nav-menu" id="nav-menu">
            <a href="/" class="nav-link">Home</a>
            <a href="/#services" class="nav-link">Services</a>
            <a href="/project-types" class="nav-link">Project Types</a>
            <a href="/about" class="nav-link">About</a>
            <a href="/tools/" class="nav-link">Free Tools</a>
            <a href="/blog/" class="nav-link">Blog</a>
            <a href="/#contact" class="nav-link">Contact</a>
            <a href="/quote" class="nav-link cta-button">Request Consultation</a>
        </div>
        <button class="nav-toggle" id="nav-toggle" aria-expanded="false" aria-controls="nav-menu" aria-label="Toggle navigation menu">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </button>
    </div>
</nav>