#navbar {
    width: 100%;
    height: 20vh;
    background-color: white;
    color: rgb(58, 56, 56);
    position: fixed;
    top: 0px;
    z-index: 10;


}

#navbar>img {
    width: auto;
    height: 70%;
}

#navbar1,
#search {
    display: flex;
    position: relative;
    left: 310px;
    top: -80px;
    width: 75%;
    height: 50px;
    justify-content: space-evenly;


}

#location {
    margin-top: 10px;
    height: 25px;
    margin-left: 20px;
    cursor: pointer;
}

#navbar1>input {
    margin-top: 10px;
    height: 25px;
    margin-left: 20px;
    cursor: pointer;
}

#navbar1>p {
    border-right: 1px solid gray;
    padding-right: 10px;
    padding-left: 5px;
    cursor: pointer;
}

p :nth-last-child(2) {
    margin-left: 30px;
}

#search {
    width: 60%;
    position: relative;
    left: 320px;
    height: auto;
}

#searchbar {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    color: gray;

}

#searchbar::placeholder {
    text-align: center;
}

/* list */
#list {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 150px;
    height: 40px;
    border: 1px solid gray;
    border-radius: 10px;
}

#list>p {
    color: black;
    border: none;
    cursor: pointer;
}

#list>p:hover {
    padding-bottom: 10px;
    border-bottom: 2px solid rgb(10, 118, 10);

}

#list>p:nth-child(1):hover {
    border: none;
}

#banner {
    width: 100%;
    height: 400px;
    margin-top: 20px;
}

#banner img {
    width: 100%;
    border-radius: 10px;
}

#main {
    width: 100%;
    margin-top: -170px;
    height: auto;
    display: flex;
}

#filter {
    width: 18%;
    height: 170vh;
    border: 1px solid gray;
    border-radius: 10px;
    background-color: white;
}

#filter1 {
    display: flex;
    justify-content: space-around;

}

#filter1>p {
    font-size: 25px;
    padding-bottom: -50px;
}

#filter1>p+p {
    color: green;
    font-size: 18px;
    margin-top: 30px;
}

.gift>p:nth-child(1) {
    margin-left: 10px;
    font-weight: bold;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;


}

.gift>p:nth-child(2),
.gift>p:nth-child(3) {
    border: 1px solid purple;
    border-radius: 10px;
    padding: 10px;
    width: 80%;
    margin-left: 10px;
    color: purple;
    cursor: pointer;
}

.gift>p:nth-child(2):hover,
.gift>p:nth-child(3):hover {
    background-color: purple;
    color: white;

}

.info {
    width: 100%;
    height: auto;
    background-color: gray;
}

.info>p:nth-child(1) {
    width: 100%;
    text-align: center;
    padding-top: 20px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: bold;

}

#surname {
    margin-left: 10px;
    padding: 3px 0px;

}

#first {
    padding: 3px 0px;
}

.detail,
#location1 {
    box-sizing: border-box;
    width: 91%;
    margin-left: 10px;
    margin-top: 10px;
}

#enq {
    box-sizing: border-box;
    padding-bottom: 70px;
    width: 91%;
    margin-left: 10px;
    margin-top: 10px;
}

#submit {
    box-sizing: border-box;
    width: 91%;
    padding: 10px 2px;
    margin-left: 10px;
    margin-top: 10px;
    background-color: purple;
    color: white;
    border: 0px;
    font-size: 17px;
}

#tick {
    margin-top: 10px;
    margin-left: 10px;
}

span {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

#gifting {
    width: 100%;
    font-size: 12px;
    box-sizing: border-box;
    padding: 10px;
    background-color: purple;
    color: white;
    border: 0px;
    margin-top: 20px;
    margin-bottom: 50px;

}

#voucher {
    width: 80%;
    margin-left: 50px;

}

#hamper {
    display: flex;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    margin-left: 10px;
    border-bottom: 1px solid gray;

}

#hamper>h1 {
    color: rgb(90, 90, 90);
}

#hamper>p {
    margin-top: 31px;
    margin-left: 30px;
    color: gray;
}

#giftexp {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 12px;
    color: rgb(90, 90, 90);
    margin-left: 10px;
}

#container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(8, auto);
    gap: 30px;
    text-align: center;
}

#container>div {
    border-right: 1px solid gray;
    padding-right: 10px;
    padding-left: 10px;
}

#container>div:hover {
    box-shadow: 10px 17px 18px -8px rgba(0, 0, 0, 0.48);
    border: 0px;
    padding-right: 10px;
    padding-left: 10px;
}

#container>div>img {
    width: 100%;
    border-radius: 10px;
}

#container>div>p:nth-child(2) {
    color: purple;
    border: 1px solid purple;
    border-radius: 10px;
    font-size: 12px;
    padding: 3px 0px;
    width: 80%;
    margin: auto;
}

#container>div>p:nth-child(3) {
    font-size: 17px;
    color: gray;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

#container>div>button {
    border: 2px solid green;
    background-color: white;
    padding: 5px 10px;
    margin-bottom: 10px;
}

#container>div>div>button {
    border: 1px solid gray;
    border-radius: 5px;
    background-color: white;
    padding: 5px 10px;
    margin-right: 10px;
    margin-bottom: 10px;
}

#container>div>div>input {
    margin-bottom: -8px;
    border-radius: 5px;
}

#container>div>div {
    margin-bottom: 10px;
}

#container1 {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(1, auto);
    gap: 30px;

}

#container1>div>img {
    width: 100%;
}

#container1>div>p {
    font-size: 20px;
    color: gray;
    margin: 15px;
}

#container1>div>.heading-br {
    color: rgb(49, 46, 46);
    font-weight: bold;
    font-size: 18px;
}

#container1>div>input {
    padding: 15px 5px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px;
    margin-top: 20px;
}

#container1>div>button {
    margin-top: 10px;
    padding: 12px 22px;
    border: 0px;
    background-color: rgb(59, 196, 59);
    color: white;
    font-size: 17px;


}

a {
    color: gray;
    text-decoration: none;
}