/* CSS FOR NAVBAR */
body {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    background-size: cover;
    background-repeat: no-repeat;
}

.navBar {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    cursor: pointer;
    color: black;
    position: fixed;
    background-color: aliceblue;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    top: 0px;
    align-items: center;
    text-align: center;
}

.navLeft {
    margin: 10px;
    font-style: italic;
    letter-spacing: 2px;
    width: 25%;
}

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

.logo {
    padding: 6px;
    margin: 5px;
}

.logo>img {
    width: 25%;
    height: 25%;

}

.links {
    padding: 20px;
    margin: 2px;

}

.links>a {
    padding: 8px;
    margin: 17px;
    text-decoration: none;
    font-size: 15px;
    font-family: cursive;
    color: black;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;

}

.navRight {
    font-size: 15px;
    margin: 10px;
    font-style: italic;
    letter-spacing: 2px;
    width: 22%;

}

#links2 {
    display: none;
}

/* CSS FOR BODYPART */
.bodyPart {
    width: 100%;
    background-image: url(https://4kwallpapers.com/images/walls/thumbs_3t/3327.jpg);
    text-align: center;
    text-align: center;
    padding-top: 15%;
    padding-bottom: 20px;
}

.bodyPart>h1 {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    letter-spacing: 6px;
    color: white;
}


.p_1 {
    font-family: cursive;
    font-size: 22px;
    letter-spacing: 4px;
    padding: 10px;
    color: white;
}

/* CSS FOR FRESH FOOD
 */

#food {
    background-color: aliceblue;
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;

}

.f_1,
.f_3,
.f_2 {
    display: flex;
    flex-direction: row;
    padding: 10px;
    margin: 80px;
    background-color: red;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}


.f_1>img,
.f_2>img,
.f_3>img {
    width: 150px;
    height: 100px;
    object-fit: cover;
}
.txt_1>h3,
.txt_2>h3,
.txt_3>h3 {
    font-size: 20px;
    text-align: center;
}

.txt_1>p,
.txt_2>p,
.txt_3>p {
    font-size: 15px;
    text-align: center;
    font-style: italic;
    letter-spacing: 2px;
}

/* CSS FOR ABOUT US  */

#about {
    background-color: aliceblue;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.history {
    width: 40%;
    padding: 20px;
}

.history>h1 {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    letter-spacing: 4px;
    padding: 10px;
    color: white;

}

.history>h4 {
    padding: 4px;
    letter-spacing: 2px;
    font-style: italic;

}

.history>p {
    font-style: italic;
    font-size: 20px;
    letter-spacing: 2px;

}

.frontImg {
    width: 50%;
}

.frontImg>img {
    width: 80%;
    height: 80%;
    margin: 30px;
    padding: 20px;
    box-shadow: rgba(1, 10, 10, 15) 10px 4px 10px;
}

/* CSS FOR MENU */
#Menuu {
    text-align: center;
    background-color: aliceblue;
}

.headings {
    padding: 20px;
}

.headings>h3 {
    font-size: 16px;
    font-style: italic;
    letter-spacing: 3px;
    color: black;
    padding: 10px;
}

.headings>h1 {
    font-size: 40px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;  
  letter-spacing: 2px;
}

.headings>hr {
    width: 20%;
}

.headings>p {
    font-size: 21px;
    font-style: italic;
    padding: 20px;
    color: black;
}

/* CSS FOR SANDWICH */
.dishes {
    display: flex;
    flex-direction: column;
    background-color: aliceblue;
}

.Juices,
.falooda,
.roll,
.drink {
    padding: 20px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;  
    letter-spacing: 2px;
    justify-content: center;
}

summary {
    padding: 10px;
}

#img1,
#img2,
#img3,
#img4 {
    width: 300px;
    height: 300px;
    object-fit: cover;
}

details>summary {
    list-style-type: '▶️';
    cursor: pointer;
}

details[open]>summary {
    list-style-type: '🔽';
}

/* CSS FPR BLOG */
.blog {
    background-color: aliceblue;
    text-align: center;
    font-style: italic;
    letter-spacing: 2px;
    padding: 30px;
}

.blog>h3 {
    font-size: 20px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;  
    letter-spacing: 4px;
    padding: 10px;
}

.blog>p {
    font-style: italic;
    font-size: 20px;
    letter-spacing: 3px;
    padding: 10px;
}

.blog>hr {
    width: 20%;
}

#Gallery {
    text-align: center;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;  
    letter-spacing: 3px;
    font-size: 25px;
}

.gallery>hr {
    width: 20%;
}

.pictures {
    background-color: white;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.pictures>img {
    width: 20vw;
    height: 40vh;
    padding: 3px;
    margin: 5px;
    object-fit: cover;
}


#addresss {
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.open {
    margin: 20px;
    text-align: center;
    font-size: 20px;
    letter-spacing: 2px;
}

.map>iframe {
    width: 40vw;
    height: 300px;
    margin: 20px;
}

/* CSS FOR MENU ICON */


.menuIcon {
    display: none;
}

#close {
    display: none;
}

footer {
    background-color: aliceblue;
    padding: 20px;
    text-align: center;
    font-size: 10px;
}

/* MEDIA QIERYYY */

@media only screen and (max-width:1200px) {
    .navBar {
        justify-content: space-between;
        align-items: center;
    }

    .logo>img {
        width: 90px;
    }

    .navLeft,
    .navRight {
        display: none;
    }

    .links {
        background-color: rgb(31, 202, 22);
        display: none;
        background-color: blueviolet;
    }

    #links2 {
        background-color: black;
        flex-direction: column;
        padding: 40px;
        font-size: 20px;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0px;

    }

    #links2>a {
        padding: 20px;
        text-decoration: none;
        color: white;
        font-size: 16px;
    }

    #close {
        display: flex;
        margin-left: 20px;
        margin: 10px;
        background-color: aliceblue;
    }

    #links2>img {
        width: 70px;
    }

    .menuIcon {
        display: flex;
        margin: 10px;
    }

    .menuIcon>img {
        width: 50px;
    }

    .bodyPart {
        margin-top: 90px;
    }

    .bodyPart>h1 {
        font-size: 40px;
        color: white;
    }

    .p_1 {
        font-size: 12px;
        letter-spacing: 2px;
        margin: 20px;
        color: antiquewhite;
    }

    /* CSS FOR foooood */
    #food {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }


    .f_1,
    .f_3,
    .f_2 {
        display: flex;
        flex-direction: row;
        margin: 2px;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
        align-items: center;
    }

    .f_1>img,
    .f_2>img,
    .f_3>img {
        width: 80px;
        height: 80px;
        padding: 0px;
    }

    .txt_1>h3,
    .txt_2>h3,
    .txt_3>h3 {
        font-size: 13px;
        text-align: center;
    }

    .txt_1>p,
    .txt_2>p,
    .txt_3>p {
        font-size: 12px;
        text-align: center;
        font-style: italic;
        letter-spacing: 2px;
    }


    /* CSS FOR ABOUTT */
    #about {
        background-color: aliceblue;
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
    }

    .history {
        width: 90%;
        background-color: aliceblue;
    }

    .history>h4 {
        font-size: 18px;
    }

    .history>p {
        font-size: 14px;
    }

    .frontImg {
        width: auto;
    }

    .frontImg>img {
        margin: 0px;
    }

    /* CSS FOR HEADINGS */
    .headings>h1,
    .headings>h3 {
        color: black;
        font-size: 18px;
    }

    .headings>p {
        font-size: 13px;
        color: black;
    }

    .headings>hr {
        width: 50%;
    }


    /* CSS FOR DISHES */
    .dishes {
        padding: 0px;
    }

    /* CSS FOR BLOG */
    .blog>h3,
    h1,
    p {
        color: rgb(4, 0, 0);
        font-size: 17px;
    }

    /* CSS FOR GALLERY */
    #Gallery>h2 {
        color: black;
    }

    .pictures {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }


    .pictures>img {
        width: 30vw;
        height: 30vw;
        margin: 0px;
        padding: 3px;
        justify-content: center;
    }


    /* VSS FOR ADDRESS */
    #addresss {
        display: flex;
        flex-direction: column;
        padding: 10px;
    }

    .leftSide {
        display: flex;
        flex-direction: row;
        padding: 0px;
        margin: 0px;
        width: 100%;
        align-items: center;
    }

    .address {
        padding: 3px;
        margin: 4px;
        font-size: 10px;
    }

    .open {
        padding: 3px;
        margin: 4px;
        font-size: 10px;
    }

    .leftSide>h3 {
        font-size: 10px;
    }


    .map>iframe {
        width: 93vw;
        margin: 0px;
    }

    #more {
        display: none;
    }
}