.header {
   position: sticky;
   top: 0;
   z-index: 1000;
   display: grid;
   grid-template-columns: 1fr auto auto auto;
   grid-auto-flow: column;
   grid-auto-columns: max-content;
   align-items: center;
   justify-content: center;
   gap: 0.6rem;
   padding: 0.7rem 1.5rem;
   direction: ltr;
   font-family: mi-demibold;
   background: #fcfdff;
   border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.header .logo {
  display: flex;
  justify-content: left;
  align-items: center;
  font-weight: 900;
  font-size: 1.5rem;
  width: 100%;
}

.header .logo .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #235de5;
  color: #fafcff;
  width: 34px;
  height: 34px;
  border-radius: 100px;
  font-size: 3rem;
}

.header .logo span {
  padding: 0 0.4rem;
  font-weight: 800;
}

.header .menu-card .menu-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #f8fafc;
  padding: 0.732rem;
  font-family: mi-regular;
  cursor: pointer;
}

.header .search-card .search-btn:hover , .header .menu-card .menu-btn:hover {
  background: rgba(0, 0, 0, 0.04);
}

.header .search-card .search-btn span {
  font-size: 0.9rem;
  padding: 0 0 0.23rem 0.5rem;
}

.header .menu-card .menu-btn img {
  display: block;
  width: 1.25rem;
  object-fit: contain;
}