  <div id="notificationDropdown"
      class="absolute right-0 mt-2 sm:w-[500px] max-h-[380px] w-[350px]  overflow-y-auto bg-white border border-gray-200 rounded-lg shadow-lg hidden z-50">

      <div class="flex justify-between items-center p-4 border-b border-[#EAEAEA] bg-gray-50 rounded-t-lg">
    
    
    <h3 class="text-[20px] text-[#133754] Poppins-medium flex items-center">
        Notifications
        <span id="notificationDropdownCount"
            class="ml-2 bg-blue-100 text-[#1CD8C4] px-2 py-0.5 rounded-full text-sm font-medium notificationDropdownCount">
            {{ $unreadCount ?? 0 }}
        </span>
    </h3>

    
    <a href="javascript:void(0)" id="refreshNotification"
        class="text-[#3B3B3B] hover:text-[#1CD8C4] text-lg cursor-pointer">
        
        <i class="fa-solid fa-rotate-right"></i>
    </a>

</div>
      <div id="notificationDropdownSection" class="p-3 space-y-2 Poppins-medium">
            @include('components.notification_list',$notifications)
      </div>

      <div class="p-3 border-t border-[#EAEAEA] text-center">
          <a href="javascript:void(0)" id="loadMoreNotifications" class="text-sm font-medium text-[#3B3B3B]">
              Load More Notifications
          </a>
      </div>
  </div>
