<style>
    #moreDropdown {
    color: #222 !important;  /* Darker text color */
    font-weight: 600; /* Slightly bolder */
}

#moreDropdown .mdi-dots-horizontal {
    color: #222 !important;  /* Darker icon */
}
</style>
<!-- Topbar Start -->
<div class="topbar-custom">
    <div class="container-fluid" style="height: 70px;">
        <div class="d-flex justify-content-between" style="height: 70px;">
            <ul class="list-unstyled topnav-menu mb-0 d-flex align-items-center">
                <li>
                    <button class="button-toggle-menu nav-link" id="menuBtn">
                        <i data-feather="menu" class="noti-icon"></i>
                    </button>
                </li>
            </ul>

            <ul class="list-unstyled topnav-menu mb-0 d-flex align-items-center">
                <li class="d-none d-lg-block">
                    <div class="btn-group" role="group">

                        <button type="button" class="dropdown-toggle" style="border-radius: 50%;padding: 8px;border: none;" data-bs-toggle="dropdown" aria-expanded="false">

                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" style="fill: rgba(90, 90, 90, 1);transform: ;msFilter:;">
                                <path d="M20.26 7.8a4.82 4.82 0 0 0-3.93-2.44 3.91 3.91 0 0 0-2.54 1.09 10.58 10.58 0 0 0-1.52 1.71 11 11 0 0 0-1.63-1.72 4.39 4.39 0 0 0-2.88-1.08A5 5 0 0 0 3.7 8 11.49 11.49 0 0 0 2 14a7 7 0 0 0 .18 1.64A4.44 4.44 0 0 0 2.71 17a3.23 3.23 0 0 0 3 1.6c1.25 0 2.19-.56 3.3-2a26.4 26.4 0 0 0 2.21-3.6l.63-1.12c.06-.09.11-.18.16-.27l.15.25 1.79 3A14.77 14.77 0 0 0 16 17.63a3.38 3.38 0 0 0 2.55 1 3 3 0 0 0 2.54-1.23 2.2 2.2 0 0 0 .18-.28 4.1 4.1 0 0 0 .31-.63l.12-.35A6.53 6.53 0 0 0 22 15a9 9 0 0 0 0-1 11.15 11.15 0 0 0-1.74-6.2zm-10.12 3.56c-.64 1-1.57 2.51-2.37 3.61-1 1.37-1.51 1.51-2.07 1.51a1.29 1.29 0 0 1-1.15-.66 3.3 3.3 0 0 1-.39-1.7A9.74 9.74 0 0 1 5.54 9a2.8 2.8 0 0 1 2.19-1.47A3 3 0 0 1 10 8.74a14.07 14.07 0 0 1 1 1.31zm8.42 5.12c-.48 0-.85-.19-1.38-.83A34.87 34.87 0 0 1 14.82 12l-.52-.86c-.36-.61-.71-1.16-1-1.65a2.46 2.46 0 0 1 .17-.27c.94-1.39 1.77-2.17 2.8-2.17a3.12 3.12 0 0 1 2.49 1.66 10.17 10.17 0 0 1 1.37 5.34c-.04 1.31-.34 2.43-1.57 2.43z"></path>
                            </svg>

                        </button>

                        <div class="dropdown-menu" style="width: 300px;">
                            <div class="p-2">
                                <h5>Number Connected</h5>
                                <p>Your Wati account is connected to a phone number</p>

                                <p class="mb-0">Your WhatsApp Business Phone Number is <b>+919258717346</b></p>
                            </div>
                        </div>

                    </div>
                </li>
  
                <!-- Button Trigger Customizer Offcanvas -->
                <li class="d-none d-sm-flex">
                    <!-- <button type="button" class="ms-4" data-toggle="fullscreen" style="border-radius: 50%;padding: 8px;border: none;background: #c6e2ff;">
                    </button> -->
                    <div class="btn-group" role="group">

                        <button type="button" class="dropdown-toggle ms-4" style="border-radius: 50%;padding: 8px;border: none;background: #c6e2ff;" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" style="fill: #003267;">
                                <path d="M20 3H5C3.346 3 2 4.346 2 6v12c0 1.654 1.346 3 3 3h15c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2zM5 19c-.552 0-1-.449-1-1V6c0-.551.448-1 1-1h15v3h-6c-1.103 0-2 .897-2 2v4c0 1.103.897 2 2 2h6.001v3H5zm15-9v4h-6v-4h6z"></path>
                            </svg>
                        </button>

                        <div class="dropdown-menu" style="width: 350px;">
                            <div class="p-2">
                                <h6 class="fw-semibold">Use your Credit Balance to engage in different kinds of conversations with your customers </h6>
                                <p>Credit Balance: &nbsp; <b>₹5127.92</b></p>

                                <div class="d-flex justify-content-center align-items-center gap-2">
                                    <button class="btn btn-outline-success w-100">Pricing Overview</button>
                                    <button class="btn btn-success w-100">Buy Credits</button>
                                </div>

                                <hr style="margin: 0.8rem 0;">

                                <div class="btn-group dropend w-100">
                                    <p type="button" class="dropdown-toggle m-auto" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        View Credit Usage History <i class="mdi mdi-chevron-right"></i>
                                    </p>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="#">Raw Data</a>
                                        <a class="dropdown-item" href="#">Daily</a>
                                        <a class="dropdown-item" href="#">Monthly</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <!-- Light/Dark Mode Button Themes -->
                <li class="ms-4">
                    <p class="mb-0 text-center fs-small">CONNECTED</p>
                    <p class="mb-0 fw-bold text-primary">+919258717346</p>
                </li>
                <!-- Light/Dark Mode Button Themes -->
                <li class="ms-4">
                    <a class="nav-user me-0" data-bs-toggle="offcanvas" href="#" role="button" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
                        <img src="assets/images/users/user-13.jpg" alt="user-image" class="rounded-circle" />
                        <!-- <span class="pro-user-name ms-1">Alex <i class="mdi mdi-chevron-down"></i></span> -->
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- end Topbar -->
