.new-category-container {
        position: relative;
      }

      .new-category-tabs {
        /* background: #1e3a8a; */
        border-radius: 4px;
        /* padding: 4px 20px; */
        overflow: hidden;
        max-height: 0;
        margin-top: 20px;
        transition: max-height 0.3s ease-in-out;
      }

      .new-category-tabs.hidden {
        max-height: 0;
      }

      .new-category-tabs:not(.hidden) {
        max-height: 400px;
        /* Adjust based on content height */
      }

      .new-tab-list {
        display: flex;
        /* border-bottom: 1px solid #3b82f6; */
        margin-bottom: 4px;
      }

      .new-tab {
        flex: 1;
        padding: 8px;
        color: #fff;
        opacity: 50%;
        text-align: center;
        background: none;
        border: none;
        cursor: pointer;
        font-size: 14px;
      }

      .new-tab.active {
        border-bottom: 1px solid #0094fa;
        opacity: 1;
        /* background: #3b82f6; */
      }

      .new-tab:hover {
        /* background: #2563eb; */
      }

      .new-tab-content {
        padding: 4px 0;
      }

      .new-tab-panel {
        display: none;
      }

      .new-tab-panel.active {
        display: block;
      }

      .new-tab-panel a {
        display: flex;
        align-items: center;
        padding: 8px 16px;
        color: #fff;
        text-decoration: none;
        font-size: 14px;
      }

      .new-tab-panel a:hover {
        background: #2563eb;
      }
      /* Custom styles for hover effect */

      .custom-scroll-list::-webkit-scrollbar {
        width: 10px;
        /* scrollbar width */
        height: 100px;
        /* horizontal scrollbar height */
      }
      /* Track (background of scrollbar) */

      .custom-scroll-list::-webkit-scrollbar-track {
        background: #f1f1f1;
        /* light grey or any color you want */
      }
      /* Thumb (the draggable handle) */

      .custom-scroll-list::-webkit-scrollbar-thumb {
        background-color: #00285f;
        /* your desired color */
        border-radius: 10px;
        /* rounded edges */
        border: 2px solid #f1f1f1;
        /* optional: gives spacing effect */
      }

      .header-bg {
        background: linear-gradient(90.28deg, #002250 9.7%, #547eb7 92.95%);
      }

      .fade-in {
        animation: fadeIn 0.3s ease-in;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      #hamburgerMenu {
        transition: all 0.3s ease-in-out;
      }
      /* .suggestion-box {
      z-index: 1000;
      } */

      .focused {
        background-color: #bfdbfe;
        /* Tailwind blue-100 */
      }

      .hide-text {
        transform: translateY(100%);
        transition: transform 0.5s ease;
      }

      .group:hover .hover-reveal {
        transform: translateY(0);
      }

      .box-shadow-bottom {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
          0 2px 4px -1px rgba(0, 0, 0, 0.06);
      }

      .fade-in {
        animation: fadeIn 0.3s ease-in;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      .category-custom-width {
        width: 1520px;
      }

      @media (max-width: 1535px) {
        .category-custom-width {
          width: 1260px;
        }
      }

      @media (max-width: 1280px) {
        .category-custom-width {
          width: 1005px;
        }
      }

      @media (min-width: 768px) and (max-width: 1024px) {
        .tablet-grid {
          display: grid;
          grid-template-columns: 40% 60%;
          gap: 10px;
        }
        .tablet-grid-cols {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 10px;
        }
        .tablet-aspect-4-3 {
          aspect-ratio: 4/3;
          height: auto;
        }
        .tablet-aspect-4-6 {
          aspect-ratio: 2/3;
          height: auto;
        }
        .container {
          padding: 0.5rem;
        }
      }

      @media (max-width: 768px) {
        .phone-popover {
          left: 0px !important;
          width: 100% !important;
        }
        .modal-content {
          width: 90%;
          max-width: 90%;
        }
        .custom-category {
          display: none !important;
        }
        .custom-search {
          display: none !important;
        }
      }
      .tab-btn {
        border: 1px solid #d1d6de;
        background: #fff;
        color: #00285f;
        font-size: 16px;
        line-height: 22px;
        font-weight: 600;
        padding: 12px 16px;
        transition: background 0.2s, color 0.2s;
        text-align: left;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .tab-btn.active {
        background: #f5f6f9;
        font-weight: 600;
        border-left-width: 3px;
        border-left-color: #0094fa;
      }
      .tab-btn:hover {
        background: #f5f6f9;
      }
      .tab-content {
        display: none;
      }
      .tab-content.active {
        display: block;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      /* hedare style end */
      .tab-btn {
        border: 1px solid #d1d6de;
        background: #fff;
        color: #00285f;
        font-size: 16px;
        line-height: 22px;
        font-weight: 600;
        padding: 12px 16px;
        transition: background 0.2s, color 0.2s;
        text-align: left;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .tab-btn.active {
        background: #f5f6f9;
        font-weight: 600;
        border-left-width: 3px;
        border-left-color: #0094fa;
      }
      .tab-btn:hover {
        background: #f5f6f9;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none !important;
      }
      .scrollbar-hide {
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
      }