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

/* social app */
.social {
    width: 100%;
    height: 5vh;
    background: black;
}

.socialrap {
    width: 70%;
    margin: auto;
}

.name {
    position: absolute;
}

.name h1 {
    margin-top: 30px;
    color: rgb(255, 0, 0);
}

.app {
    float: right;
    margin-top: 30px;
}

.app ul li {
    display: inline;
}

.app ul li a {
    color: whitesmoke;
    font-size: 25px;
    padding-left: 20px;
    padding-right: 20px;
}

/* navigation bar */
#nav {
    width: 100%;
    height: 10vh;
    background: black;
}

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

.logo {
    position: absolute;
    margin-top: -20px;
}

.logo img {
    height: 10vh;
    width: 100%;
}

.menu {
    float: right;
}

.menu ul {
    margin-top: 15px;
}

.menu ul li {
    display: inline;
}

.menu ul li a {
    color: rgb(251, 1, 1);
    font-size: 20px;
    text-decoration: none;
    text-transform: uppercase;
    padding: 25px;
}

.menu ul li a:hover {
    border-top: 2px solid white;
    border-bottom: 2px solid grey;
    color: bisque;
}

/* navigation bar 1 */
#nav1 {
    width: 100%;
    height: 10vh;
    background: black;
}

/* banner */
.ban {
    width: 100%;
    height: 119vh;
    background-image: url(./biriyani2.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
}

.banrap {
    width: 100%;
    height: 100%;
}

.banrap1 {
    width: 50%;
    margin: auto;
}

/* middle */
.mid {
    width: 100%;
    height: 80vh;
    background-color: rgb(216, 219, 192);
}

.midrap {
    width: 80%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto;
    padding-top: 50px;
}

.box p {
    height: 50vh;
    width: 100%;
    padding: 10px;
    margin-top: -40%;
    font-size: larger;
}

.box h1 {
    height: 50vh;
    width: 100%;
    padding: 10px;
    font-size: 60px;
    font-family: cursive;
    font-weight: bolder;
    /* margin-top: 20%; */
}

.box img {
    width: 110%;
    height: 55vh;
    margin-top: 10%;
    border-radius: 10%;
}

/* banner1 */
.ban1 {
    width: 100%;
    height: 103vh;
    background-image: url(./dinning.webp);
    background-size: 100%;
    background-repeat: no-repeat;
}

.banrap2 {
    width: 100%;
    height: 100%;
    background-color: rgba(12, 10, 10, 0.76);
}

.banrap3 {
    width: 50%;
    margin: auto;
}

.banrap3 {
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-row-gap: 10px;
    grid-column-gap: 50px;
    padding-top: 30px;
}

.banrap2 img {
    width: 100%;
    height: 40vh;
    margin-top: 110px;
    border-radius: 10%;
}

.box {
    padding: 40px;
}

.box1 h1 {
    font-family: cursive;
    font-weight: bolder;
    color: rgb(255, 255, 255);
    margin-bottom: 5%;
    margin-right: 20px;
    text-align: center;
    margin-top: -5%;
}

.box2 h2 {
    font-family: cursive;
    text-align: center;
    margin-top: -5%;
    font-weight: bolder;
    color: rgb(255, 255, 255);
    margin-bottom: 5%;
    font-size: 30px;
}

.box3 h3 {
    font-family: cursive;
    text-align: center;
    margin-top: -5%;
    font-weight: bolder;
    color: rgb(250, 249, 249);
    margin-bottom: 5%;
    font-size: 30px;

}

/* footer */
.foot {
    width: 100%;
    height: 60vh;
    background-color: rgb(22, 21, 21);
}
.footrap1{
    padding: 50px;
}
.footrap {
    width: 30%;
    margin: auto;
}
.footrap p{
    text-align: center;
    color: aliceblue;
    font-size: large;
}
.icon{
    width: 30%;
    margin: auto;
}
.icon ul{
    margin-left: 35%;
}
.icon ul li{
    display: inline;
}
.icon ul li a{
    color: aliceblue;
    padding-left: 20px;
}
.info{
    width: 80%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-column-gap: 20px;
    padding-top: 50px;
}
.inforap h1{
    color: aliceblue;
    text-align: center;
}
.inforap p{
    color: aliceblue;
    text-align: center;
}
.conclu{
    margin-top: 50px;
}
.conclu p{
    text-align: center;
    color: aliceblue;
    font-size: large;
}