* {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Remove the default tap highlight color on touch devices */
      }
    body {
    margin: 5px;
    font-family: Arial, sans-serif;
    overflow-x: hidden;
  }
  .search-center {
    display: flex;
    justify-content: center;
    }
  .search-container {
    position: relative;
    display: flex;
    align-items: center;  /* center in searchbar of searchsign and cross button */
    background-color: white;
    width:390px;
    /* justify-content: center; */
    /* height: 100%; */
    /* margin-bottom: 10px; */
    /* height: 100vh; */
    /* color:red; */
  }
  #searchInput {
    width:350px;
    height: 45px;
    padding: 0px;
    font-size: 16px;
    /*border: 1px solid #ccc;*/
    border-radius: 999px;
    box-sizing: border-box; /* Ensure padding is included in the width */
    padding-left: 55px;
    margin-left: -24px;
  -webkit-transition: width .35s ease-in-out;
  transition: width .15s ease-in-out;
  border:none;
  outline: none;  /* remove the border after focus*/
    /* width: 100%; */
    /* text-align: center; */
    /* Adjust the width as needed */
    /* max-width: 500px; */
     /* Limit maximum width for larger screens */
  }
  input::placeholder{
  /*color: #999;*/
  color: blue;
    
  /*text-align: center;*/
}
input[type="text"]:focus {
  /*width: 50%;*/
 /*height: 40px;*/
 /* border-color: green; */
 background-color: #c6f6f1;

}

  .hide-placeholder::placeholder {
    /*opacity: 0;*/
    color: #999;}
    .search-focused .search-icon {
    visibility: visible;
  }
  .search-focused .clear-icon {
    visibility: visible;
  }

.search-container input[type="text"] {flex:1;}
.search-icon,.clear-icon{position:relative;top:50%;visibility: hidden;cursor: pointer; transform:translateY(-50%);}
.search-icon{left:18px; /* Adjust the size */color: #1595f8; padding:5px;} /* Match the color */
.search-icon:hover{background-color:  #99f8ee; border-radius: 999px;}
.search-icon:hover circle{fill:#99f8ee}
.clear-icon {right:45px;font-size:20px; padding: 10px; border-radius: 999px;}
.svgclearsearchbtn:active line {stroke: #0098d5;}
.svgclearsearchbtn {display:block;}
.clear-icon:hover {background-color: #99f8ee;}

  .footer1 {
            background-color: #f3f4f6;
            padding: 20px;
        }
        .footer2 {
            padding: 5px;
        }