/* Style the autocomplete dropdown */
      .ui-autocomplete {
          background-color: white; /* White background for the suggestions box */
          border: 1px solid #ccc; /* Border around the suggestions box */
          max-height: 200px; /* Maximum height for the suggestions box */
          overflow-y: auto; /* Scrollable if the list is too long */
          overflow-x: hidden; /* Prevent horizontal scrolling */
          z-index: 1000; /* Ensure it appears above other elements */
          width:150px;
      }

      /* Remove the default bullet points */
      .ui-autocomplete ul {
          list-style-type: none; /* Remove bullet points */
          padding: 0;
          margin: 0;
      }

      /* Style each item in the dropdown */
      .ui-menu-item {
          padding: 5px; /* Add padding for readability */
          cursor: pointer; /* Change cursor to pointer */
      }

      /* Highlight the hovered or active item */
.ui-menu-item:hover, .ui-menu-item .ui-state-active {
    background-color: #f0f0f0; /* Light gray background for hover effect */
    color: black; /* Ensure text color is black on hover */
}
      /* Highlight the hovered or active item */
      .ui-menu-item:hover, .ui-menu-item .ui-state-active {
          background-color: #f0f0f0; /* Light gray background for hover effect */
      }

        body {
            font-family: Arial, sans-serif;
        }
        .container-custom {
            text-align: center;
            margin-top: 50px;
        }
        .search-box {
            width: 100% !important;
            margin: 0 auto !important;
            padding: 10px !important;
            border: 1px solid #ccc !important;
            border-radius: 5px !important;
            font-size: 16px !important;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1) !important;
            transition: box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out !important;
        }
        .search-box:focus {
            border-color: #f77e33 !important;
            box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.2) !important;
            outline: none !important;
        }
        .button-container {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        .button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 100px;
            margin: 0 10px;
            border: 1px solid #ccc;
            border-radius: 10px;
            cursor: pointer;
            overflow: hidden;
            padding: 0;
            background-color: white; /* To ensure button color when no image */
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }
        .button:hover {
            transform: translateY(-5px);
            box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.2);
        }
        .button img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .search-button {
            margin-top: 20px;
        }
        .search-button button {
            background-color: #f77e33;
            border: none;
            padding: 10px 20px;
            color: white;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
            transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }
        .search-button button:hover {
          background-color: #f77e33;
          border: none;
          padding: 10px 20px;
          color: white;
          font-size: 16px;
          border-radius: 5px;
          cursor: pointer;
          box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
          transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }