header{
display:flex;
justify-content:space-between;
align-items:center;
color:rgb(243, 239, 239);
background-color:#233241;
height:90px;
padding: 15px 40px;

top: 0;
z-index: 1000;

}
header h2{
font-size:40px;
margin: 0;
}
nav {
    display: flex;
    justify-content: center;   
    align-items: center;       
    padding: 15px 0;
    gap:50px;
    height: 30px;
    
}

nav a {
    text-decoration: none;
    color: white;
    font-size: 17px;
    font-weight: 500;
    transition: 0.3s;
}

nav a:hover {
    color: #f1c40f;           
}
.body{
    display: flex;
    justify-content: center;
    justify-content: space-evenly;
    font-size: large;
}
#cartList li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

#cartList button {
    border: none;
    background: red;
    color: white;
    border-radius: 5px;
    padding: 5px 10px;
}
.card img {
    height: 200px;      
    object-fit: cover;   
}
.card {
    height: 150%;
}
@media (max-width: 768px) {
 header {
 flex-direction: column;
 height: auto;
 text-align: center;
 }
 nav {
flex-direction: column;
gap: 10px;
height: auto;
 }
.d-flex {
width: 100%;
}
#searchInput {
width: 100%;
}
#cartBtn {
width: 100%;
}
}
#suggestionBox {
  top: 100%;
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
}
#suggestionBox li {
  cursor: pointer;
}
@media (max-width: 1024px) {

    header {
        padding: 10px 25px;
    }

    nav {
        gap: 25px;
    }

    nav a {
        font-size: 15px;
    }
}