* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

#heading {

    width: 100%;
    height: 200px;
    margin-bottom: 1rem;
   
    box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}

.nav {
    display: flex;
    width: 100%;
    margin-top: 1rem;
    
    max-height: 50%;
    justify-content: center;
    position: sticky;
    row-gap: 10px;
    column-gap: 10px;

}

#search_bar {
    width: 45%;
    height: 2rem;
    margin-top: 0.5rem;
    /* margin-right: 0px; */
    padding-left: 2rem;
    text-align: start;
    border: 1px solid grey;
    border-radius: 4px;
}

#search_bar:focus {
    border-style: green;
}

#nav1 {
    width: 14%;
    margin-right: 0px;
    margin-top: 2rem;
    padding-bottom: 2rem;
   
}

#nav1 > img {
    width: 100%;
    max-width: 100%;
   
    margin-top: -50%;
}


#lnk {
    width: 75px;
    height: 3rem;
    padding-top: 30px;
}

#lnk > img {
    position: sticky;
    margin-top: -30px;
    width: 70%;
}

#login {
    width: 8%;
    text-align: center;
    margin-left: 10px;
    background-color: rgb(32, 32, 32);
    color: white;
    height: 3rem;
    padding: 7px;
    border: 2px solid black;
    border-radius: 13px;
    text-decoration: none;
}

#location {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: sticky;
    width: 12%;
    margin-top: 0px;
    height: 2.5rem;
    background-color: rgb(238, 238, 238);
    color: black;
    text-align-last: right;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;

}

#location > img {
    width: 30px;
}

#dropdown_list h6 {
    display: flex;
    justify-content: space-between;
}

#dropdown_list {
    /* display: flex; */
    /* flex-direction: column;
    justify-content: center; */
    /* align-items: center; */
    width: 12%;
    height: 40%;
    background-color: rgb(94, 148, 0);
    position: sticky;
    margin-top: 10px;
    margin-left: 60px;
    border-radius: 13px;
    /* padding-bottom: 2rem; */
}

#dropdown_list p {
    padding-left: 1rem;
    padding-top: 0.5rem;
    font-size: 1.2rem;
}

#dropdown_list h6 {
    font-size: 1.5rem;
    padding: 1rem;
}

#dropdown_list a {
    color: white;
    text-decoration: none;
    font-size: 1.5rem;
}

#drop1 {
    display: none;
    background-color: white;
}

#dropdown_list:hover #drop1 {
    display: block;
    position: absolute;
    margin-top: 0px;
    margin-left: -2px;
}

#dropdown_list:hover #drop1 a {
    display: block;
    color: black;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    padding: 5px;
}

#dropdown_list:hover #drop1 a:first-child {
    border-top: 1px solid black;
}

#drop1 a:hover {
    background-color: lightgray;
}

#offers {
    width: 12%;
    height: 25%;
    text-align: center;
    margin-left: 80%;
    margin-top: -50px;
    border-radius: 3px;
    background-color: rgb(94, 148, 0);
}

#offers p {
    font-size: 1.2rem;
    padding: 0.4rem;
}

#offers :hover {
    cursor: pointer;
    background-color: rgb(94, 148, 0);
    border-radius: 3px;
    color: white;
}

#bodyy {

    width: 100%;
}

#company {
    display: flex;
    width: 100%;
    justify-content: center;
}

#company img {
    width: 12%;
    margin: 1%;
}

#bank_offers {
    text-align: center;
    font-size: 2rem;
    font-family: verdana;
}

#bank_offers_id {
    margin-top: 20px;
}

#bank_offers_id img {
    width: 20%;
    margin-left: 20px;
    border: 0.5px solid lightgray;
}

#bank_offers_id img:hover {
    box-shadow: 5px 5px 10px 10px grey;
}

#popular {
    text-align: center;
    font-size: 2rem;
    font-family: verdana;
}

#popular_id {
    margin-top: 20px;
}

#popular_id img {
    width: 20%;
    margin-left: 20px;
    border: 0.5px solid lightgray;
}

#popular_id img:hover {
    box-shadow: 5px 5px 10px 10px grey;
}

#staples {
    text-align: center;
    font-size: 2rem;
    font-family: verdana;
}

#staples_id {
    margin-top: 20px;
}

#staples_id img {
    width: 20%;
    margin-left: 20px;
    border: 0.5px solid lightgray;
}

#staples_id img:hover {
    box-shadow: 5px 5px 10px 10px grey;
}

#tea {
    text-align: center;
    font-size: 2rem;
    font-family: verdana;
    pointer-events: none;

}

#tea a {
    text-decoration: none;
    color: inherit;
}

#tea_id {
    margin-top: 20px;
}

#tea_id img {
    width: 20%;
    margin-left: 20px;
    border: 0.5px solid lightgray;
}

#tea_id img:hover {
    box-shadow: 5px 5px 10px 10px grey;
}

#house {
    text-align: center;
    font-size: 2rem;
    font-family: verdana;
}

#house_id {
    margin-top: 20px;
}

#house_id img {
    width: 20%;
    margin-left: 20px;
    border: 0.5px solid lightgray;
}

#house_id img:hover {
    box-shadow: 5px 5px 10px 10px grey;
}

#home {
    text-align: center;
    font-size: 2rem;
    font-family: verdana;
}

#home_id {
    margin-top: 20px;
}

#home_id img {
    width: 12%;
    margin-left: 15px;
    border: 0.5px solid lightgray;
}

#home_id img:hover {
    box-shadow: 3px 3px 10px 10px grey;
}

#brand {
    text-align: center;
    font-size: 2rem;
    font-family: verdana;
}

#brand_id {
    margin-top: 20px;
}

#brand_id img {
    width: 12%;
    margin-left: 15px;
    border: 0.5px solid lightgray;
}

#brand_id img:hover {
    box-shadow: 3px 3px 10px 10px grey;
}

.five_para {
    text-align: center;
    font-size: 2rem;
    font-family: verdana;
    margin-top: 20px;
}

.fruits {
    display: flex;
    justify-content: center;
    margin-left: 25px;
    margin-bottom: 70px;
}

.right_fruit {
    display: grid;
    grid-template-columns: 50% 50%;
}

.left_fruit,
.right_fruit {
    margin-top: 20px;
}

.fruits img {
    border: 0.5px solid lightgray;
    margin: 10px;
}

.fruits img:hover {
    box-shadow: 3px 3px 10px 10px grey;
}

#read_me {
    width: 82%;
    border: 2px solid grey;
    border-radius: 10px;
    margin: 50px auto;
    /*display: none;*/
    line-height: 1.5;
    padding: 10px;
    letter-spacing: 1.2;
    font-family: verdana;
}

#more {
    display: none;
}

#read_me h2 {
    text-align: center;
    font-size: 3rem;
}

#read_me button {
    margin-left: 48%;
    padding: 10px;
    font-size: 1.2rem;
}

#read_me button:hover {
    background-color: #84c225;
    color: white;
}

#middle_banners {
    /*    background-color: red;*/
    width: 90%;
    height: 50vh;
    margin: 5vw;

}

#footer {
    /* background-color: black; */
    width: 100%;
    /* height: 90vh;  */
    /* margin-left: 9vw; */
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    background-color: rgb(16, 16, 16);
}

#footer1 {
    /*    background-color: blue;*/
    width: 100%;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 15px;
}

#footer2 {
   
    width: 100%;
    height: 35vh;
    font-family: "arial";
    padding-left: 15px;
}

.inside_footer1 {
   
    width: 20vw;
    height: 70%;
    display: flex;
    flex-direction: column;
    color: white;
    font-family: "arial";
    font-weight: 70;
    letter-spacing: 1px;
    font-size: 13px;

}

.inside_footer1 ul li {
    margin-top: 2vh;
}

.inside_footer1 ul li:hover {
    background-color: rgb(16, 16, 16);

}

.inside_footer1 span {
    background-color: rgb(16, 16, 16);
    font-size: 15px;

}

hr {
    margin-top: -10vh;
}

#footer2 span {

    background-color: rgb(16, 16, 16);

}

#footer2 p {
    color: white;
    font-size: 13px;
    margin-top: 2vh;
    background-color: rgb(16, 16, 16);


}

#greetings {
    background-color: rgb(201, 0, 0);
    width: 100%;
    height: 3vh;
    color: black;
    font-family: monospace;
    text-align: center;
}

#greetings span {
    color: white;
    font-size: 15px;
}


/* media queries */
@media all and (max-width: 720px) {
    .nav {
        display: flex;
        width: 100%;
        margin-top: 1rem;
        max-height: 50%;
        justify-content: center;
        position: sticky;
        row-gap: 10px;
        column-gap: 10px;

    }

    #bodyy {

        width: 100%;
    }

    .mySlides {
        width: 90%;
        margin: auto;
    }

    #company {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        justify-content: center;
    }

    #company img {
        width: 90%;
        margin: 1%;
    }

    #bank_offers {
        text-align: center;
        font-size: 1rem;
        font-family: verdana;
    }

    #bank_offers_id {
        margin-top: 20px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    #bank_offers_id img {
        width: 90%;
        margin-left: 20px;
        border: 0.5px solid lightgray;
    }

    #popular {
        text-align: center;
        font-size: 2rem;
        font-family: verdana;
    }

    #popular_id {
        margin-top: 20px;
        display: grid;
        justify-content: center;
        grid-template-columns: repeat(3, 1fr);
    }

    #popular_id img {
        width: 90%;
        margin-left: 20px;
        border: 0.5px solid lightgray;
    }

    #staples {

        text-align: center;
        font-size: 1rem;
        font-family: verdana;
    }

    #staples_id {
        margin-top: 20px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-content: center;
    }

    #staples_id img {
        width: 90%;
        margin-left: 20px;
        border: 0.5px solid lightgray;
    }

    #tea {
        text-align: center;
        font-size: 1rem;
        font-family: verdana;
        pointer-events: none;

    }

    #tea_id {
        margin-top: 20px;
        display: grid;
        justify-content: center;
        grid-template-columns: repeat(3, 1fr);
    }

    #tea_id img {
        width: 90%;
        margin-left: 20px;
        border: 0.5px solid lightgray;
    }

    #house_id {
        margin-top: 20px;
        display: grid;
        justify-content: center;
        grid-template-columns: repeat(3, 1fr)
    }

    #house_id img {
        width: 90%;
        margin-left: 20px;
        border: 0.5px solid lightgray;
    }

    #brand_id {
        margin-top: 20px;
        display: grid;
        justify-content: center;
        grid-template-columns: repeat(3, 1fr)
    }

    #brand_id img {
        width: 90%;
        margin-left: 15px;
        border: 0.5px solid lightgray;
    }

    .fruits{
        margin-top: 20px;
        display:grid ;
        justify-content: center;
        grid-template-columns: repeat(1,1fr);
    }

    .fruits img {
        width: 90%;
        border: 0.5px solid lightgray;
        margin: 10px;
    }
    #home_id {
        margin-top: 20px;
        display:grid ;
        justify-content: center;
        grid-template-columns: repeat(3,1fr);
    }
    
    #home_id img {
        width: 90%;
        margin-left: 20px;
        border: 0.5px solid lightgray;
    }

}

/* media 2 */
@media all and (max-width: 480px) {
    .nav {
        display: flex;
        width: 100%;
        margin-top: 1rem;
        /* border: 2px solid black; */
        max-height: 50%;
        justify-content: center;
        position: sticky;
        row-gap: 10px;
        column-gap: 10px;

    }

    #bodyy {

        width: 100%;
    }

    .mySlides {
        width: 90%;
        margin: auto;
    }

    #company {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        justify-content: center;
    }

    #company img {
        width: 90%;
        margin: 1%;
    }

    #bank_offers {
        text-align: center;
        font-size: 1rem;
        font-family: verdana;
    }

    #bank_offers_id {
        margin-top: 20px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    #bank_offers_id img {
        width: 90%;
        margin-left: 20px;
        border: 0.5px solid lightgray;
    }

    #popular {
        text-align: center;
        font-size: 2rem;
        font-family: verdana;
    }

    #popular_id {
        margin-top: 20px;
        display: grid;
        justify-content: center;
        grid-template-columns: repeat(2, 1fr);
    }

    #popular_id img {

        width: 90%;
        margin-left: 20px;
        border: 0.5px solid lightgray;
    }

    #staples {

        text-align: center;
        font-size: 1rem;
        font-family: verdana;
    }

    #staples_id {
        margin-top: 20px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
    }

    #staples_id img {
        width: 90%;
        margin-left: 20px;
        border: 0.5px solid lightgray;
    }

    #tea_id {
        margin-top: 20px;
        display: grid;
        justify-content: center;
        grid-template-columns: repeat(2, 1fr);
    }

    #tea_id img {
        width: 90%;
        margin-left: 20px;
        border: 0.5px solid lightgray;
    }

    #house_id {
        margin-top: 20px;
        display: grid;
        justify-content: center;
        grid-template-columns: repeat(2, 1fr)
    }

    #house_id img {
        width: 90%;
        margin-left: 20px;
        border: 0.5px solid lightgray;
    }

    #brand_id {
        margin-top: 20px;
        display: grid;
        justify-content: center;
        grid-template-columns: repeat(2, 1fr)
    }

    #brand_id img {
        width: 90%;
        margin-left: 15px;
        border: 0.5px solid lightgray;
    }
    .fruits{
        margin-top: 20px;
        display:grid ;
        grid-template-columns: repeat(1,1fr);
    }

    .fruits img {
        width: 90%;
        border: 0.5px solid lightgray;
        margin: 10px;
    }
    #home_id {
        margin-top: 20px;
        display:grid ;
        justify-content: center;
        grid-template-columns: repeat(2,1fr);
    }
    
    #home_id img {
        width: 90%;
        margin-left: 20px;
        border: 0.5px solid lightgray;
    }
}

/* media 3 */
@media all and (max-width: 360px) {
    .nav {
        display: flex;
        width: 100%;
        margin-top: 1rem;
        /* border: 2px solid black; */
        max-height: 50%;
        justify-content: center;
        position: sticky;
        row-gap: 10px;
        column-gap: 10px;

    }

    #bodyy {

        width: 100%;
    }

    .mySlides {
        width: 90%;
        margin: auto;
    }

    #company {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-content: center;
    }

    #company img {
        width: 90%;
        margin: 1%;
    }

    #bank_offers {
        text-align: center;
        font-size: 1rem;
        font-family: verdana;
    }

    #bank_offers_id {
        margin-top: 20px;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    #bank_offers_id img {
        width: 90%;
        margin-left: 20px;
        border: 0.5px solid lightgray;
    }

    #popular {
        text-align: center;
        font-size: 2rem;
        font-family: verdana;
    }

    #popular_id {
        margin-top: 20px;
        display: grid;
        justify-content: center;
        grid-template-columns: repeat(1, 1fr);
    }

    #popular_id img {

        width: 90%;
        margin-left: 20px;
        border: 0.5px solid lightgray;
    }

    #staples {

        text-align: center;
        font-size: 1rem;
        font-family: verdana;
    }

    #staples_id {
        margin-top: 20px;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        justify-content: center;
    }

    #staples_id img {
        width: 90%;
        margin-left: 20px;
        border: 0.5px solid lightgray;
    }

    #tea_id {
        margin-top: 20px;
        display: grid;
        justify-content: center;
        grid-template-columns: repeat(1, 1fr);
    }

    #tea_id img {
        width: 90%;
        margin-left: 20px;
        border: 0.5px solid lightgray;
    }

    #house_id {
        margin-top: 20px;
        display: grid;
        justify-content: center;
        grid-template-columns: repeat(1, 1fr)
    }

    #house_id img {
        width: 90%;
        margin-left: 20px;
        border: 0.5px solid lightgray;
    }

    #brand_id {
        margin-top: 20px;
        display: grid;
        justify-content: center;
        grid-template-columns: repeat(1, 1fr)
    }

    #brand_id img {
        width: 90%;
        margin-left: 15px;
        border: 0.5px solid lightgray;
    }
    .right_fruit{
        display: grid;
        justify-content: center;
        grid-template-columns: repeat(1,1fr);
    }
    .fruits{
        margin-top: 20px;
        display:grid;
        grid-template-columns: repeat(1,1fr);
    }

    .fruits img {
        width: 90%;
        border: 0.5px solid lightgray;
        margin: 10px;
    }
    #home_id {
        margin-top: 20px;
        display:grid ;
        justify-content: center;
        grid-template-columns: repeat(1,1fr);
    }
    
    #home_id img {
        width: 90%;
        margin-left: 20px;
        border: 0.5px solid lightgray;
    }
}