
  .hamburger {
        display: none;
        font-size: 26px;
        cursor: pointer;
        padding: 10px;
      }

      .logo-img {
        width: 150px;
        height: auto;
      }

      .top-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
        flex-wrap: wrap;
      }

      #navMenu {
        display: flex;
        justify-content: center;
      }

      @media (max-width: 992px) {
        .hamburger {
          display: block;
        }

        #navMenu {
          display: none;
          flex-direction: column;
          width: 100%;
          background-color: #fff;
          padding: 1rem;
        }

        #navMenu.active {
          display: flex;
        }

        .nav-list {
          flex-direction: column;
          gap: 10px;
        }

        .nav-list li {
          width: 100%;
        }

        .mega-menu {
          flex-direction: column;
          width: 100%;
          position: static;
          box-shadow: none;
          padding: 10px 0;
        }

        .header-icons {
          width: 100%;
          justify-content: flex-start;
          margin-top: 10px;
        }
      }
      /* Modal Background */
      .modal-overlay {
          position: fixed;
          top: 0; left: 0;
          width: 100%; height: 100%;
          background-color: rgba(0,0,0,0.5);
          display: none;
          align-items: center;
          justify-content: center;
          z-index: 1000;
      }

      /* Modal Box */
      .modal {
        width: 613px !important;
        background-color: #fff;
        /* width: 500px; */
        max-width: 90%;
        padding: 2.5rem;
        height:72% !important;
        border-radius: 6px;
        position: relative;
        box-shadow: 0 10px 25px rgba(0,0,0,0.3);
      }

      .modal h2 {
        margin-top: 0;
        font-size: 28px;
      }

      .modal input {
        width: 100%;
        padding: 0.75rem;
        margin-top: 1rem;
        border: 1px solid #ccc;
        border-radius: 4px;
      }

      .modal a {
        display: inline-block;
        margin-top: 0.75rem;
        font-size: 0.9rem;
        text-decoration: none;
        color: #222;
      }

      .modal a:hover {
        text-decoration: underline;
      }

      .modal button {
        margin-top: 1.5rem;
        padding: 0.75rem;
        width: 100%;
        border: none;
        background-color: #000;
        color: white;
        font-weight: bold;
        border-radius: 4px;
        cursor: pointer;
      }

      .modal .switch-link {
        margin-top: 1rem;
        text-align: center;
        font-size: 0.95rem;
      }

      .close-btn {
        position: absolute;
        top: 1rem;
        right: 1rem;
        font-size: 20px;
        cursor: pointer;
      }

      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      body {
          font-family: "Helvetica Neue" !important;
      }

      .header {
          width: 100%;
          background: #fff;
          border-bottom: 1px solid #ddd;
          position: relative;
          z-index: 1000;
      }

      .header-container {
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: relative;
      }
      .dropdown-toggle::after {
        display: none !important;
      }

      .nav {
        justify-content: center !important;
        flex: 4;
      }

      .nav-list {
          display: flex;
          align-items: center;
          list-style: none;
          gap: 20px;
      }

      .nav-list li {
          position: relative;
      }

      .nav-list a {
          text-decoration: none;
          color: #000;
          font-weight: 500;
          padding: 8px 10px;
      }

      .logo {
          flex: 1;
          text-align: center;
      }

      .logo h1 {
          font-size: 32px;
          margin-bottom: 5px;
      }

      .logo p {
          font-size: 12px;
          color: #555;
      }

      .header-icons {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 15px;
        position: relative;
        margin-right: 30px;
      }

      .icon-badge {
          position: relative;
          display: inline-block;
          color: #000;
          font-size: 20px;
      }

      .icon-badge .badge {
          position: absolute;
          top: -6px;
          right: -8px;
          background: red;
          color: white;
          font-size: 10px;
          padding: 2px 5px;
          border-radius: 50%;
          font-weight: bold;
      }

      .dropdown:hover .mega-menu {
          display: flex;
      }

      .mega-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: -30rem;
        background: #fff;
        width: 67rem;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: 20px;
        gap: 30px;
        z-index: 999;
        flex-wrap: wrap;
      }

      /* Make mega menu full-width and stack on mobile */
      @media (max-width: 992px) {
        .mega-menu {
          display: none;
          position: relative;
          top: 0;
          left: 0;
          width: 100%;
          box-shadow: none;
          flex-direction: column;
          padding: 15px;
        }

        .mega-column {
          margin-bottom: 15px;
        }
      }

      .mega-column {
          flex: 1;
          display: flex;
          flex-direction: column;
      }

      .mega-column h4 {
          font-size: 16px;
          margin-bottom: 10px;
          font-weight: 700;
      }

      .mega-column a {
          font-size: 15px;
          font-family:"Helvetica Neue"!important;
          margin-bottom: -14px;
          color: #333;
          text-decoration: none;
      }

      .mega-column a:hover {
        text-decoration: underline;
      }

      .sticky {
          display: block !important;
      }

      .dropdown {
        position: relative;
        display: inline-block;
      }

      .dropdown-menu {
        display: none;
        position: absolute;
        right: 0;
        top: 100%;
        background-color: #fff;
        min-width: 150px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        z-index: 999;
        padding: 10px 0;
      }

      .dropdown-menu a {
        display: block;
        padding: 10px 15px;
        text-decoration: none;
        color: #333;
      }

      .dropdown-menu a:hover {
        background-color: #f0f0f0;
      }
      .nav {
        display: none;
      }

      /* Sidebar for mobile */
      .mobile-menu {
          position: fixed;
          top: 0;
          left: 0;
          width: 280px;
          height: 100vh;
          background: #fff;
          box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
          padding: 20px;
          z-index: 999;
          overflow-y: auto;
          transform: translateX(-100%);
          transition: transform 0.3s ease;
      }

      .mobile-menu.active {
          transform: translateX(0);
      }

      .mobile-menu ul {
          list-style: none;
          padding: 0;
          margin: 0;
      }

      .mobile-menu li {
          padding: 15px 0;
          border-bottom: 1px solid #eee;
      }

      .mobile-menu .icon-badge {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          margin-top: 20px;
      }
      .category-toggle {
          margin-top: 10px;
      }

      .category-header {
          display: flex;
          justify-content: space-between;
          font-weight: bold;
          padding: 10px 0;
          border-bottom: 1px solid #ccc;
          cursor: pointer;
      }

      .close-icon {
          font-size: 20px;
          font-weight: bold;
      }

      .category-list {
          background-color: #007C8A; /* Teal-like shade */
          padding: 15px;
          color: #fff;
          display: block;
      }

      .category-group {
          margin-bottom: 15px;
      }

      .category-group strong {
          display: block;
          font-size: 16px;
          margin-bottom: 5px;
      }

      .category-group hr {
          border: none;
          border-top: 1px solid #fff;
          margin-bottom: 10px;
      }

      .category-group a {
          display: block;
          color: #fff;
          margin-bottom: 8px;
          text-decoration: none;
          font-size: 14px;
      }

      .category-group a:hover {
          text-decoration: underline;
      }
      