<style>
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        /* background-color: #03002b; */
        background-color: rgba(170, 170, 170, 0.3);
        backdrop-filter: blur(10px);
        padding: 15px 10rem;
        color: white;
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 1000;
        transition: background-color 0.3s ease;
    }

    .logos a {
        font-size: 1.5rem;
        color: #ccff01;
        text-decoration: none;
        font-weight: bold;
    }

    .logos a img {
        width: 80px;
    }

    .nav-links {
        /* width: 55%; */
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        /* gap: 20px; */
    }

    .nav-links li a {
        text-decoration: none;
        padding: 0 1rem;
        color: white;
        font-size: 0.9rem;
        transition: color 0.3s ease;
    }

    .nav-links li a:hover {
        color: #ccff01;
    }

    .hamburger {
        display: none;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
    }

    .hamburger span {
        display: block;
        width: 25px;
        height: 3px;
        background-color: white;
        transition: all 0.3s ease;
    }

    .navbar.scrolled {
        background-color: black;
        /* Change to black */
    }

    @media (max-width: 768px) {
        .navbar {
            padding: 1rem;
        }

        .nav-links {
            position: absolute;
            top: 60px;
            right: 0;
            background-color: rgba(58, 58, 58, 0.6);
            backdrop-filter: blur(10px);
            flex-direction: column;
            width: 100%;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .nav-links.active {
            max-height: 300px;
        }

        .hamburger {
            display: flex;
        }
    }
</style>
<nav class="navbar">
    <div class="logos">
        <a href="/"><img src="ppc_logo.png" alt="Promotional playing card logo"></a>
    </div>
    <ul class="nav-links">
        <li><a href="/">Home</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="playingcards-quote_new.php">Request a Quote</a></li>
        <li><a href="contactus.php">Contact Us</a></li>
    </ul>
    <div class="hamburger">
        <span></span>
        <span></span>
        <span></span>
    </div>
</nav>
<script>
    const hamburger = document.querySelector('.hamburger');
    const navLinks = document.querySelector('.nav-links');

    hamburger.addEventListener('click', () => {
        navLinks.classList.toggle('active');
        hamburger.classList.toggle('open');
    });


    const navbar = document.querySelector('.navbar');

    window.addEventListener('scroll', () => {
        if (window.scrollY > window.innerHeight) {
            navbar.classList.add('scrolled');
        } else {
            navbar.classList.remove('scrolled');
        }
    });
</script>