<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top py-3">

    <div class="container">

        <!-- Logo -->

        <a class="navbar-brand d-flex align-items-center" href="index.php">

            <img src="assets/images/logo.png"
                 alt="Complete Bliss Solutions"
                 width="80"
                 class="me-2">

            <div>

                <h5 class="mb-0 fw-bold">
                    Complete Bliss
                </h5>

                <small class="text-muted">
                    Solutions
                </small>

            </div>

        </a>

        <!-- Mobile Toggle -->

        <button class="navbar-toggler"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#navbar">

            <span class="navbar-toggler-icon"></span>

        </button>

        <!-- Menu -->

        <div class="collapse navbar-collapse" id="navbar">

           <ul class="navbar-nav mx-auto">

    <li class="nav-item">
        <a class="nav-link active" href="index.php">
            Home
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link" href="index.php#about">
            About
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link" href="index.php#plans">
            Plans
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link" href="index.php#faq">
            FAQ
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link" href="index.php#contact">
            Contact
        </a>
    </li>

</ul>
            <!-- Buttons -->

            <div class="d-flex">

                <a href="login.php"
                   class="btn btn-outline-primary me-2">

                    Login

                </a>

                <a href="register.php"
                   class="btn btn-primary">

                    Become a Member

                </a>

            </div>

        </div>

    </div>

</nav>