@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Roboto, 'Poppins', sans-serif;
}

html, body {
  background: #f5f8fa;
  overflow: hidden;
}

.container {
  width: 100%;
  margin-top: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.container .search-box, form {
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.container form {
  position: relative;
  width: 80%;
}

.container form .search-box {
  border: 2px solid #e3e3e3;
  border-radius: 22px;
  box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
  background: #fff;
}

.container form .search-box:focus-within {
  border-color: #1558D6;
}

.container form .search-box, .search-suggest {
  width: 100%;
}

.container form input {
  width: 100%;
  height: 45px;
  outline: none;
  border: none;
  background: transparent;
  font-size: 16px;
}

.container form button[type="submit"] {
  background-image: url("https://raihan-zidan.github.io/images/search.png");
}

.btn-box {
  width: 45px;
  height: 45px;
  border: none;
  cursor: pointer;
  background-image: url("https://raihan-zidan.github.io/images/search.png");
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  
  background-color: transparent;
}

.btn-box.tmh {
  background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMCcgaGVpZ2h0PScyMCcgZmlsbD0nbm9uZSc+PHBhdGggZD0nTTE0IDQuMjVhLjc1Ljc1IDAgMCAxIC4xMDIgMS40OTNMMTQgNS43NUg1Ljc1VjE0YS43NS43NSAwIDAgMS0xLjQ5My4xMDJMNC4yNSAxNFY1QS43NS43NSAwIDAgMSA1IDQuMjVoOXpNNi40NDYgNS4zOTdsLjA4NC4wNzMgOSA5YS43NDkuNzQ5IDAgMCAxLS45NzYgMS4xMzNsLS4wODQtLjA3My05LTlhLjc0OS43NDkgMCAwIDEgLjk3Ni0xLjEzM3pNNS4yNSA0LjI1djFoLTF2LTFoMXonIGZpbGw9JyNCMEI5QzEnLz48L3N2Zz4=');
}

.btn-box.l {
  left: 0;
}

@media (min-width: 768px) {
  .container form {
    max-width: 500px;
  }
  .container .img-logo {
    height: 120px;
  }
  .container {
    margin-top: 88px;
    
  }
}


.container ul.link {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px 0;
  margin-top: 20px;
  max-width: 250px;
}

.container li {
  list-style: none;
}

a {
  color: black;
  text-decoration: none;
  transition: all .2s;
}

.search-suggest a {
  
}

.container ul.link li > a {

  gap: 4px 0;
  -webkit-tap-highlight-color: transparent;
  color: black;
  text-decoration: none;
  transition: all .2s;
}

a b {
  font-weight: 500;
}

.container ul.link li:active > a {
  filter: brightness(90%);
}

.container ul.link li a {
  font-size: 12px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  color: #000;
}

.container ul.link li .icon {
  width: 50px;
  height: 50px;
  background: #fff;
  border: 1px solid #ededed;
  border-radius: 50%;
  user-select: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container ul.link li .icon svg {
  width: 20px;
  fill: #494949;
}

.container ul.link li .icon span {
  font-size: 16px;
  color: #494949;
  text-shadow: 0.1px 0 0 #000, -0.1px 0 0 #000;
}

.container form {
  position: relative;
}

.search-suggest.active {
  display: block;
}

.search-suggest ul li {
  cursor: pointer;

  transition: all .1s ease-in;
  overflow: hidden;
}

.search-suggest ul li a {
  padding: 8px 40px;
  width: 100%;
  font-size: 16px;
}

.search-suggest ul li {
  display: flex;
  align-items: center;
}

.search-suggest ul li span {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: calc(100% - 20px);
  overflow: hidden;
}

.search-suggest ul li button {
  right: 0;
  position: absolute;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
.search-suggest ul li:hover {
  background: #edf3fc;
}

.container form .search-box {
  transition: all .2s;
}

.container form .search-box.active {
  border-radius: 22px 22px 0 0;
  border-color: #1558D6;
}

.search-suggest {
  position: absolute;
  border: 2px solid #1558D6;
  border-radius: 0px 0px 22px 22px;
  box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
  top: 100%;
display: none;
  height: auto;
  max-height: 300px;
  background: #fff;
  overflow: auto;
  border-top: none;
}

::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

::-webkit-scrollbar-track {
    border-radius: 0px;
}

::-webkit-scrollbar-thumb {
    background: #EDEDED;
    border-radius: 10px;

}

.link a {
  display: flex;
  flex-direction: column;
  align-items: center;
}