<!-- Sidebar Start -->
<aside class="left-sidebar gran">
    <!-- Sidebar scroll-->

    <div>
        <div class="brand-logo d-flex align-items-center justify-content-between" style="animation: rainbow-effect 5s infinite;">
            <a href="#" class="text-nowrap logo-img">
                <img src="
https://i.ibb.co/Ndwr1VLh/image.jpg" width="210" alt="" />
            </a>
            <div class="close-btn d-xl-none d-block sidebartoggler cursor-pointer" id="sidebarCollapse">
                <i class="ti ti-x fs-8"></i>
            </div>
        </div>
        <!-- Sidebar navigation-->
        <nav class="sidebar-nav" style="overflow-y: auto; padding: 20px; max-height: calc(100vh - 60px);">
            <ul id="sidebarnav">
                <li class="nav-small-cap">
                    <i class="ti ti-dots nav-small-cap-icon fs-4"></i>
                    <span class="hide-menu" style="color: black;">WELCOME</span>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link btn-border" href="index.php" aria-expanded="false">
                        <span>
                            <i class="fas fa-tachometer-alt" style="color: black;"></i>
                        </span>
                        <span class="hide-menu">Dashboard</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link btn-border" href="recharge.php" aria-expanded="false">
                        <span>
                            <i class="fa fa-credit-card" style="color: black;"></i>
                        </span>
                        <span class="hide-menu">টাকা রিচার্জ করুন</span>
                    </a>
                </li>
                <li class="nav-small-cap">
                    <i class="ti ti-dots nav-small-cap-icon fs-4"></i>
                    <span class="hide-menu" style="color: black;">AUTO SERVICE MENU</span>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link btn-border" href="autoTin.php" aria-expanded="false">
                        <span>
                            <i class="fa fa-mail-bulk" style="color: black;"></i>
                        </span>
                        <span style="font-size: 11pt;" class="hide-menu">অটো টিন সার্টিফিকেট</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link btn-border" href="Server_Copy.php" aria-expanded="false">
                        <span>
                            <i class="fa fa-server" style="color: black;"></i>
                        </span>
                        <span style="font-size: 11pt;" class="hide-menu">সার্ভার কপি</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link btn-border" href="birth.php" aria-expanded="false">
                        <span>
                            <i class="fa fa-baby" style="color: black;"></i>
                        </span>
                        <span class="hide-menu">জন্ম নিবন্ধন</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link btn-border" href="Sign2Nid.php" aria-expanded="false">
                        <span>
                            <i class="fa fa-signature" style="color: black;"></i>
                        </span>
                        <span style="font-size: 11pt;" class="hide-menu">সাইন 2 NID</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link btn-border" href="m-nid.php" aria-expanded="false">
                        <span>
                            <i class="fa fa-cogs" style="color: black;"></i>
                        </span>
                        <span class="hide-menu">ম্যানুয়ালি NID</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link btn-border" href="log.php" aria-expanded="false">
                        <span>
                            <i class="fa fa-history" style="color: black;"></i>
                        </span>
                        <span class="hide-menu">এনআইডি হিস্ট্ররি</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link btn-border" href="br-log.php" aria-expanded="false">
                        <span>
                            <i class="fa fa-history" style="color: black;"></i>
                        </span>
                        <span class="hide-menu">নিবন্ধন হিস্ট্ররি</span>
                    </a>
                </li>
                <li class="nav-small-cap">
                    <i class="ti ti-dots nav-small-cap-icon fs-4"></i>
                    <span class="hide-menu" style="color: black;">ORDER MENU</span>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link btn-border" href="Locaion.php" aria-expanded="false">
                        <span>
                            <i class="fa fa-map-marker-alt" style="color: black;"></i>
                        </span>
                        <span class="hide-menu">টেক্সট অর্ডার</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link btn-border" href="nameaddress.php" aria-expanded="false">
                        <span>
                            <i class="fa fa-file-alt" style="color: black;"></i>
                        </span>
                        <span style="font-size: 11pt;" class="hide-menu">ফাইল অর্ডার</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link btn-border" href="bio.php" aria-expanded="false">
                        <span>
                            <i class="fa fa-id-badge" style="color: black;"></i>
                        </span>
                        <span class="hide-menu">বায়োমেট্রিক অর্ডার</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link btn-border" href="nid_order.php" aria-expanded="false">
                        <span>
                            <i class="fa fa-id-card" style="color: black;"></i>
                        </span>
                        <span class="hide-menu">এনআইডি অর্ডার</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link btn-border" href="sign.php" aria-expanded="false">
                        <span>
                            <i class="fa fa-signature" style="color: black;"></i>
                        </span>
                        <span style="font-size: 11pt;" class="hide-menu">সাইন অর্ডার</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link btn-border" href="tin_order.php" aria-expanded="false">
                        <span>
                            <i class="fa fa-certificate" style="color: black;"></i>
                        </span>
                        <span style="font-size: 11pt;" class="hide-menu">টিন সার্টিফিকেট অর্ডার</span>
                    </a>
                </li>
                <li class="nav-small-cap">
                    <i class="ti ti-dots nav-small-cap-icon fs-4" style="color: white"></i>
                    <span class="hide-menu" style="color: black;">PROFILE MENU</span>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link btn-border" href="https://chat.whatsapp.com/DpH4TeeftB25HgzzYdKsAX" aria-expanded="false">
                        <span>
                            <i class="fab fa-telegram" style="color: #25d366;"></i>
                        </span>
                        <span class="hide-menu">Whatsapp</span>
                    </a>
                </li>
               
                <li class="sidebar-item">
                    <a class="sidebar-link btn-border" href="profile.php" aria-expanded="false">
                        <span>
                            <i class="fa fa-user" style="color: black;"></i>
                        </span>
                        <span class="hide-menu">আমার প্রোফাইল</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link btn-border" href="change-password.php" aria-expanded="false">
                        <span>
                            <i class="fa fa-key" style="color: black;"></i>
                        </span>
                        <span class="hide-menu">পাসওয়ার্ড পরিবর্তন</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link btn-border" href="logout.php" aria-expanded="false">
                        <span>
                            <i class="fa fa-sign-out-alt" style="color: Red;"></i>
                        </span>
                        <span class="hide-menu">লগ আউট</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</aside>

<!-- CSS Style for Gradient and Buttons with Icons -->

<style>
.gran {
    background: #f7f7f7; /* Light gray background */
    animation: none; /* Remove animation since it's not needed for a static background */
}

/* Sidebar Button Styling */
.sidebar-link {
    display: flex;
    align-items: center;
    padding: 10px;
    font-size: 14px; /* Adjusted font size */
    color: #333; /* Dark gray text color */
    text-decoration: none;
    border: none;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
    background: #fff; /* White button background */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 0 20px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

.sidebar-link:hover {
    background: #f2f2f2; /* Light gray hover background */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.2); /* Slightly darker shadow on hover */
}

.sidebar-link i {
    margin-right: 10px;
}

.btn-border {
    border: none;
    padding: 10px 20px;
    margin: 5px 0;
    border-radius: 10px;
    transition: background-color 0.3s, color 0.3s;
    font-size: 14px; /* Adjusted font size */
    background: #fff; /* White button background */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 0 20px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

.btn-border:hover {
    background: #f2f2f2; /* Light gray hover background */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.2); /* Slightly darker shadow on hover */
}

/* Small Caps */
.nav-small-cap {
    font-size: 14px;
    color: #333; /* Dark gray text color */
    margin-top: 20px;
    padding-left: 20px;
}

.sidebar-nav {
    overflow-y: auto; /* Enable vertical scrolling */
    padding: 20px;
    max-height: calc(100vh - 60px); /* Adjust height as needed */
}

.sidebar-nav::-webkit-scrollbar {
    width: 10px; /* Set the scrollbar width */
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: #ccc; /* Set the scrollbar thumb color */
    border-radius: 10px; /* Add a subtle border radius */
}

.sidebar-nav::-webkit-scrollbar-track {
    background: #f7f7f7; /* Set the scrollbar track color */
}


</style>
