body{
    background-color: rgb(11, 10, 10);
    color: white;
    min-height: 100%;
}
.navbar{
    display: flex;
    max-height: 60px;
    background-color: rgba(255, 166, 0, 0.578);
    margin: auto;
    padding: 2px;
    align-items: center;
    position: sticky;
    top:0;
    width:100%;
    margin:auto;
    justify-content: space-between;
}
.navbar>i{
    color: black;
    position: relative;
    font-size: x-large;
    padding-right: 4px;
}
.firstpage{
    color: white;
    display: flex;
    margin-top: 100px;
}
.firstpage>img{
    border-radius: 350px;
    border: 100px solid rgba(128, 128, 128, 0.21);
    margin: 50px;
}
.fptext{
    top:100px;
    position: relative;
    margin: 7px;
}
.fptext>h1{
    font-size: 80px;
    font-family: cursive;
    margin: 10px 0px;
}
.b1{
    padding: 5px;
    font-size: large;
    background-color: green;
    color: white;
    border: 1px solid white;
}
.b2{
    background-color: orange;
    font-size: medium;
    margin-top: 10px;
}
.b1:hover{
 background-color: rgba(95, 169, 95, 0.564);
 cursor: pointer;
}
.b2:hover{
    background-color: rgba(192, 149, 68, 0.523);
}

/*coupons section starts*/
.iconsec{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 2px;
    box-shadow: 3px 3px grey;
    width: 95%;
    margin: auto;
    margin-top: 300px;
}

.box{
    margin:3px;
    padding: 3px;
    display: flex;
    justify-content: center;
    font-family: cursive;
}

.box>img{
    margin-top: 25px;
}
.boxlogo{
    margin-left: 10px;
}
.box:hover{
    box-shadow: 3px 3px grey;
    cursor: pointer;
}

/*Menu section starts*/
.menusec{
    margin-top: 300px;
    justify-content: center;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.menu{
    align-self: center;
}

.menuimages{
    display: grid;
    width: 70%;
    margin: auto;
    height: 600px;
    grid-template-rows:1fr 1fr 1fr;
    grid-template-columns:1fr 1fr 1fr 1fr;
    gap:15px;
}

.item1{
    background-image: url(imagesres/menu.jpg);  
    background-size: 100% 100%;
    grid-row: 1/span 2;
    grid-column: 1/span 2;
    border-radius: 10px;
}

.item2{
    background-image: url(imagesres/menu1.jpg);
    grid-column: 3/span 1;
    grid-row: 1/span 2;
    border-radius: 10px;
    background-size: 100% 100%;
}
.item3{
    background-image: url(imagesres/menu2.jpg);
    grid-column: 4/span 1;
    grid-row: 1/span 1;
    border-radius: 10px;
    background-size: 100% 100%;
}
.item4{
    background-image: url(imagesres/menu3.jpg);
    grid-column: 4/span 1;
    grid-row: 2/span 3;
    border-radius: 10px;
    background-size: 100% 100%;
}.item5{
    background-image: url(imagesres/menu4.jpg);
    grid-column: 1/span 1;
    grid-row: 3/span 1;
    border-radius: 10px;
    background-size: 100% 100%;
}.item6{
    background-image: url(imagesres/menu5.jpeg);
    grid-column: 2/span 1;
    grid-row: 3/span 1;
    border-radius: 10px;
    background-size: 100% 100%;
}
.item7{
    background-image: url(imagesres/menu6.jpg);
    grid-column: 3/span 1;
    grid-row: 3/span 1;
    border-radius: 10px;
    background-size: 100% 100%;
}

.footer{
    display:flex;
    color:black;
    background-color: rgba(255, 166, 0, 0.578);
    margin-top: 300px;
}

.foosec{
    display: flex;
    justify-content: space-between;
    width: 70%;
}
.mainlinks,.contact{
    margin: 20px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-content: center;
}
.mainlinks>h4,.contact>h4{
    align-self: start;
    display: flex;
    margin-bottom: 2px;
    font-size: 20px;
}
.email{
    margin-left:10px;
}
.fa-brands{
    font-size: 25px;
}

/*Responsive*/

@media screen and (max-width:600px){
    .firstpage{
        flex-direction: column;
        text-align: center;
    }

    .firstpage>img{
        height: 250px;
        width:300px;
    }

    .box{flex-direction: column;}
    .menuimages{
        height: 400px;
    }
    .footer,.foosec{
        flex-direction: column;
    }
}