/* Style for the modal */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #333333; /* Changed background color */
            padding: 40px;
            border: 0px solid #ccc;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            border-radius: 15px; /* Added border radius */
            color: white; /* Added text color */
        }

	/*body {
  margin: 0;
  padding: 0;
  overflow: hidden; 
}

.background-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://images.hdqwalls.com/download/lost-in-between-4k-9o-3840x2400.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1; 
}*/
		   html {
  zoom: 100%;
			 
}
		  body {
      zoom: 1; /* Set the zoom level to 100% */
    }
  body {
	  
	 
     /*background-image: url("https://images.hdqwalls.com/download/lost-in-between-4k-9o-3840x2400.jpg");*/
      
	 background-repeat: no-repeat;
      background-size: cover;
	  /*background-color: #222222;*/
	   overflow: hidden;
    }
		  
		 /* .text-with-border {
    border: 1px solid black;
    padding: 10px;
  }
		  
		 
    
    .logo {
      animation: fadeInUp 1s ease-out;
	   
    }
   
    .search-input {
     
      animation: slideInLeft 1s ease-out;
	   
    }*/
		  
    
    .autocom-box {
      
      box-shadow: 0px 5px 10px rgba(0,0,0,0.1);
      z-index: 4;
      animation: fadeInDown 4s ease-out;
      
    }
    
    /*.icon {
      
      animation: fadeIn 1s ease-out;
    }*/
    
    @keyframes slideInLeft {
      from {
        left: -100%;
      }
      to {
        left: 0;
      }
    }
    
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(50px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    @keyframes fadeInDown {
      from {
        opacity: 0;
        transform: translateY(-50px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
		  
		   /* .translate-btn {
    position: reltive;
			    bottom: -20px;
      z-index: 9999;
      background-color: #6996E6;
      color: #fff;
      padding: 4px;
      border-radius: 10px;
      cursor: pointer;
      width: 40px;
  }
		  
		  .wrapper .search-input{
  background: #333333;
  color: #f5f5f5;
  width: 100%;
  border-radius: 10px;
  position: relative;
  box-shadow: 0px 1px 5px 3px rgba(0,0,0,0.12);
}

.search-input input{
  height: 56px;
  width: 100%;
  outline: none;
  border: none;
  border-radius: 10px;
  padding: 0 60px 0 20px;
  font-size: 20px;
  box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
  background: #333333;
  color: white;
}
*/

body {
  padding-top: 20px; 
}

.banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #6996E6;
  padding: 10px;
  text-align: center;
  z-index: 9999;
}

.close-btn {
  position: absolute;
  top: 5px;
  right: 10px;
  cursor: pointer;
}


		 



		    .text-with-border {
      font-size: 22px;
      color: white;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); 
    }