.popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #fff;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            z-index: 9960;
            border-radius: 8px;
            width: 90%;
            max-width: 500px;
            
        }
        .popup-header {
            font-size: 18px;
            margin-bottom: 10px;
        }
        .popup input {
            width: calc(90% - 80px);
            padding: 10px;
            margin: 5px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
            display: inline-block;
        }
       
      
        .suggestions {
            list-style: none;
            padding: 0;
            margin: 0;
            max-height: fit-content;
            overflow-y: auto;
            border: 1px solid #ddd;
            display: flex;
            flex-wrap: wrap;

        }
        .suggestions li1 {
            padding: 5px 8px;
            cursor: pointer;
            font-size: 12px;
            width: 100%;
            
        }
        .suggestions li1:hover {
            background: #f0f0f0;
        }
      .suggestions  li1::before{
          content: "🔎";
          padding: 0 10px;
          color: darkgray;
          font-size: 13px;
   
        }

      
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }
     

/*search bar */

        #containerinput{
            width: 80%;
            border-radius: 25px;
            display: inline-block;
            position: relative;
            background-color: rgba(212, 211, 211, 0.63);
        }
        input[game="game"]{
            border: 1px solid rgba(146, 143, 143, 0.801);
            position:relative;
            outline:none;
            padding: 10px 30px;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
            left:  50px;




        }
        .searchAc{
            padding: 14px 24px;
            border: 1px solid rgba(104, 101, 101, 0.719);
            position:relative;
            right: -50px;
            border-top: none;
            border-bottom: none;
            border-right: none;
            background-color: transparent;
            font-size: 14px;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            cursor: pointer;
 

        }

        .closeAc{
            position: absolute;
            top: 5px ;
            right: 5px;
            background-color: rgba(212, 211, 211, 0.63);
            border-radius: 10px;
            padding: 7px 12px;
            border: 1px solid darkgray;
            font-size: 22px;
            cursor: pointer;


        }
          .searchAc:hover{
            background-color: rgba(187, 181, 181, 0.493);
        }

        .closeAc:hover{
            box-shadow: 0 7px 7px rgba(0, 0, 0, 0.493);
            background-color: rgba(187, 181, 181, 0.493);

        }


        .opensearchcontainer{
                z-index: 9950;
                display: block;
                position: absolute;
                top: 35px;
                right: 0%;       
        }


        @media (max-width: 720px){
            .opensearchcontainer{
                z-index: 9950;
                display: block;
                position: absolute;
                top: 8%;
                right: 22%;
               
            }
            
        }