.category-container {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* Internet Explorer 10+ */
        width: 95%;
        /* Set width to 90% */
        margin: 0 auto;
        /* Center the container */
    }
    
.category-container::-webkit-scrollbar {
      display: none;  /* Chrome, Safari, Opera */
    }

    .category-button {
        flex: 0 0 auto;
        margin: 5px;
    }

    .scroll-btn {
        /* position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 100; */
         position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 100;
      background: #ffffff;
      border: none;
      color: orange;
      font-size: 2rem;
      padding: 10px;
      cursor: pointer;
      border-radius: 50%;
    }

    .scroll-btn.left {
        left: 0;
    }

    .scroll-btn.right {
        right: 0;
    }

    .scroll-btn:hover {
      background-color: #0056b3;
    }

    /* Custom Tooltip Style */
    .tooltip-inner {
      background-color: #28a745 !important;  /* Green background */
      color: #fff !important;  /* White text */
      border-radius: 5px;  /* Rounded corners */
      padding: 10px 15px;
      font-size: 1rem;
      font-weight: 500;
    }

    .tooltip-arrow {
      border-top-color: #28a745 !important;  /* Green arrow */
    }

    /* Optionally, add a subtle shadow to tooltips */
    .tooltip-inner {
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    /* Add padding around the tooltip for better readability */
    .category-button {
      position: relative;
    }