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

.container{
    position: relative;
}

a, p, h1, label, input{
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
}
.firstbg{
     background-image: url(./assests/bg1.jpg);
    background-repeat: no-repeat;
    background-size: 100% 700px;
        height: 100vh;
       position: sticky;
       top: 0;
}
.res_bg{
    position: sticky;
    top: 0;
     height: 80vh;
      background-size: 100% 100%;
}
.nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 30px;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 2000;
    background-color:rgba(0,0,0,0.3);
}

.navlinks{
    ul{
        li{
            display: inline-block;
             list-style-type: none;
             margin: 0px 5px;
             a{
                text-decoration: none;
                color: #F5F5F5;
                font-size: 13px;
             }
             a:hover{
                opacity: 0.5;
             }
    
        }
    }
}
#menu{
    display: none;
}
.menubox{
    display: none;
}
.firstphase{
    margin: 0px auto;
    padding: 0px 30px;
}
#white_button{
    border: 1px solid #F5F5F5;
    padding: 8px;
    border-radius: 5px;
    a:hover{
        color: #1A1A1A;
    }
}

#white_button:hover{
      background-color: #B3B3B3;
    color: #1A1A1A;
}
.firstphase_body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 230px;
    h1{
       color: #F5F5F5;
       text-transform: capitalize;
       line-height: 40px;
       margin-bottom: 20px;
       z-index: 200;
    }
}
#simple_button{
     border: 1px solid #F5F5F5;
     padding: 8px;
     border-radius: 5px;
     text-decoration: none;
     color: #F5F5F5;
     font-size: 13px;
     z-index: 200;
}
#simple_button:hover{
    background-color: #B3B3B3;
    color: #1A1A1A;
}

/* second phase */

.secondphase{
       position: sticky;
       top: 0;
    .main{
    background-image: url(./assests/bg2.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 0px 30px;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    h1, p{
        color: #F5F5F5;
        z-index: 200;
    }
    }    
}
.bg{
         position: absolute;
         width: 100%;
         height: 100%;
         background-color: rgba(0,0,0,0.3);
         top: 0;
    }

 /* grid styling for home page*/
.thirdphase{
    background-color:#121212;
    padding: 50px 10px;
        position: sticky;
       top: 0;
       /* height: 100vh; */
}
.food_grid{
    display: grid;
    max-width: 1120px;
    margin: 0px auto;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(270px, auto);
    gap: 20px;
    margin-bottom: 30px;
    position: sticky;
    top: 0;
}
.order_third{
    padding-bottom: 500px;
}
.food{
    img{
        width: 100%;
        height: 400px;
        display: block;
        border-radius: 5px;
    }
}

#food_grid_menu{
    text-align: center;
}

/* grid styling for resturant page */
.res1{
    grid-column: 1/4;
}


.fourthphase{
    position: sticky;
    top: 0;
    background-color: #121212;
    color: #F5F5F5;
    padding: 50px 10px;
    p{
            max-width: 800px;
            margin: 0px auto;
            text-align: center;
            line-height: 30px;
    }
}
.fifthphase{
    position: sticky;
    top: 0;
    background-color: #121212;
    padding: 80px 40px;
    display: flex;
    gap: 50px;
    p{
        color: #B3B3B3;
        margin: 10px 0px;
    }
    h1{
        color: #F5F5F5;
        font-size: 26px;
    }
}
.fifthphase_header{
    padding-top: 20px;
}
.first_row_form{
    display: flex;
    gap: 10px;
}
.second_row_form{
    display: flex;
    flex-direction: column;

}
#fullname, #email{
    padding: 5px;
     padding-right: 300px;
     background: #B3B3B3;
    outline: none;
    border-radius: 5px;
    border: 1px solid #B3B3B3 ;
    margin-bottom: 10px;
}
#subject, #message{
    padding: 5px;
     width: 100%;
     background: #B3B3B3;
    outline: none;
    border: 1px solid #B3B3B3 ;
      border-radius: 5px;
      margin-bottom: 10px;
}
label{
    display: inline-block;
    margin-bottom: 5px;
    color: #F5F5F5;
}

.sixthphase{
    position: sticky;
    top: 0;
   background: #1A1A1A;
    padding: 70px;
    /* height: 100vh; */
}
.social_icon{
    img{
        display: inline-block;
        margin: 0px 3px;
    }
}
.sixthphase_body{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.date{
    display: flex;
    flex-direction: column;
    gap: 25px;
    h1{
        color:#B3B3B3;
        margin-bottom: 10px;
        text-align: right;
    }
    p{
        color: #FFFFFF;
        text-align: right;
    }
}
#res, #del{
   font-size: 18px;
}
.location{
    h1{
        color: #B3B3B3;
    }
    p{
        color: #F5F5F5;
    }
}
.sixthphase_footer{
    color: #ffff;
}


/* styling for events page */
.tablephase{
    position: sticky;
    top: 0;
    padding: 45px 30px;
    color: #F5F5F5;
    background-color:#121212;
    gap: 20px;
    margin-bottom: 430px;
}
.first_table{

   max-width: 800px;
    margin: 0px auto;
   margin-bottom: 30px;
}
.table{
    max-width: 800px;
    margin: 0px auto;
  text-align: center;
  border-bottom: 2px solid #F5F5F5;
  padding-bottom: 10px;
    p{
    margin: 10px 0px;
  }
}

/* styling for event page */
.event{
    position: sticky;
    top: 0;
     background-color: #121212;
}
.eventdiv{
     position: sticky;
    top: 0;
    max-width:800px;
    padding: 20px;
    margin: 0px auto;
    text-align: center;
    color: #B3B3B3;
    h1{
        color: #F5F5F5;
    }
}

.eventdiv p{
     margin: 20px 0px;
}

.formevent{
     position: sticky;
    top: 0;
    background-color: #121212;
       padding-bottom: 50px;
}
 
.formdiv{
    display: flex;
    flex-direction: column;
    padding: 30px;
}
 .roll1, .roll2{
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
 }
  #contact, #date, #event_message, #fullname_message, #email_message{
     padding: 5px;
     background: #B3B3B3;
    outline: none;
    border-radius: 5px;
    border: 1px solid #B3B3B3 ;
    margin-bottom: 10px;
  }
  #event_message, #contact, #date, #fullname_message, #email_message{
    width: 100%;
  }
   .event_button{
    text-align: center;
   }
   
   .eventimage{
     position: sticky;
    top: 0;
    text-align: center;
    background-color: #121212;
   }
   .eventimage img{
    width: 80%;
   }

  /* res... third styling */
  .res_third{
    margin-bottom: 400px;
  }
  .sixth_res{
    position: relative;
  }



/* mobile responsive */
@media only screen and (max-width: 450px){
    .firstbg{
            background-size: 100% 100%;
            height: 750px;
    }
    .res_bg{
            background-size: 100% 100%;
            height: 500px;
    }
   .nav{   
        gap: 10px;
        width: 100%;
        position: absolute;
   }
   .navicon img{
    width: 75px;
}
 .navlinks{
    display: flex;
    gap: 10px;
 }
   .navlinks ul li{
    display: none;
   }

   #menu{
    display: inline-block;

   }
   .navlinks #white_button{
    display: inline-block;
    margin: 0px;
   }
   .bg{
         background-color: rgba(0,0,0,0.7);
    }
   .food_grid{
    display: block;
   }
   .food{
    margin-top: 20px;
    img{
        height: 200px;
    }
   }
   .thirdphase{
    height: 1050px;
    padding-bottom: 40px;
   }
   /* resturant styling for mobile */
    .res_third{
       height: 1030px;
       margin-bottom: 0px;
       
    }
/* ...... */

   .fifthphase{
    flex-direction: column;
   }
   .fifthphase_header{
    text-align: center;
   }
   .first_row_form{
    flex-direction: column;
   }
    #fullname, #email{
        width: 100%;
        padding:10px;
    }
   #subject, #message{
    padding: 10px;
     padding-right: 160px;
   }
   .social_icon{
    text-align: center;
   }
   .sixthphase_body{
    flex-direction: column;
    align-items: center;
   }
   .location{
    text-align: center;
   }
   .date{
    margin-top: 20px;
    align-items: center;
     h1{
        text-align:  center;
    }
    p{
        text-align: center;
    }
}
.sixthphase_footer{
    text-align: center;
    margin-top:20px;
}

/* menubox styling */
.menubox{
    background: #000000F2;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 5000;
    top: 0px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    display: none;
}
.menubox_icon{
    text-align: right;
}
#menubox_nav{
    ul{
        display: inline-block;
    }
    li{
        margin: 10px 0px;    
        a{
            text-decoration: none;
              color: #B3B3B3;
        }
    }
}
.roll1, .roll2{
    display: block;
}
.res_third{
    padding-bottom: 1800px;
}
.catering_bg{
    height: 400px;
}
.order_bg{
    height: 450px;
}
.order_third{
    height: 3850px;
    margin-bottom: 660px;
}

/* event mobile styling */
.tablephase{
    margin-bottom: 0px;
}




}



/* for tablet sizes */
@media (min-width:787px) and (max-width: 1024px){
   .nav{
      justify-content: space-between;
      gap: 45px;
   }
   .first_row_form{
    flex-direction: column;
   }

}




@media (min-width:451px) and (max-width: 786px){
    .firstphase_body{
        padding-top: 280px;
    }
    .nav{
        flex-direction: column;
        gap: 30px;
    }
    .navlinks{
        text-align: center;
        ul{
            li{
                display: inline-block;
                margin: 10px;
            }
        }
    }
    .first_row_form{
    flex-direction: column;
   }
     #fullname, #email{
        width: 100%;
        padding:10px;
    }
   #subject, #message{
    padding: 10px;
     padding-right: 160px;
   }
   .food_grid{
    display: block;
   }
   .food{
    margin: 20px 0px;
   }
  
}