html {
 scroll-behavior: smooth;
}
*{
 margin: 0;
 padding: 0;
 font-family: "Roboto", sans-serif;
 box-sizing: border-box;
}
body{
  overflow-x: hidden;
}

/* NavBar */

nav{
 display: flex;
 justify-content: space-between;
 align-items: center;
 background: white;
 box-shadow: 0 2px 5px rgba(0,0,0,0.1);
 padding: 10px 20px;
}
.logo{
 height: 90px;
 width: auto;
 margin-left: 20px;
}
.menu-toggle{
 display: none;
 font-size: 30px;
 cursor: pointer;
}
ul{
 display: flex;
 list-style: none;
 gap: 50px;
 margin-right: 20px;
}
ul a {
 text-decoration: none;
 color: black;
 font-weight: 600;
 font-size: 24px;
 transition: 0.3s;
}
ul a:hover {
 color: rgb(237, 7, 7);
 transform: scale(1.05);
}

/* Media */
@media(max-width: 768px){

.menu-toggle{
 display: block;
}

ul{
 position: absolute;
 top: 80px;
 right: 0;
 width: 100%;
 background: white;
 flex-direction: column;
 text-align: center;
 gap: 0;
 display: none;
 box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

ul li{
 padding: 15px 0;
 border-bottom: 1px solid #eee;
}

ul.show{
 display: flex;
}

}

/* Home Section */

.home-section{
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 60px 8%;
 gap: 40px;
}
.text{
 flex: 1;
 max-width: 50%;
}
.text h1{
 font-size: 40px;
 padding-bottom: 30px;
 padding-left: 0;
}
span{
 color:rgb(237, 7, 7) ;
}
.text p{
 font-size: 20px;
 line-height: 1.6;
}
.home_img{
 flex: 1;
 display: flex;
 justify-content: center;
 align-items: center;
}
.h_img{
 width: 100%;
 max-width: 500px;
 height: auto;
 display: block;
}
@media(max-width: 992px){

.home-section{
 flex-direction: column;
 text-align: center;
 padding: 40px;
}

.text p{
 font-size: 16px;
}

}
@media(max-width: 768px){

.text h1{
 font-size: 28px;
}

.text p{
 font-size: 16px;
 text-align: justify;
}

.home_img img{
 max-width: 320px;
}

}
@media(max-width: 480px){

.home-section{
 padding: 20px;
}

.text h1{
 font-size: 24px;
}

}

/* About Section  */

.about-section{
 min-height:100vh;
 display:flex;
 align-items:center;
 justify-content:center;
 gap:50px;
 padding:60px 8%;
 }
.about-text{
 flex: 1
 }
.about-img{
 flex:1;
 display:flex;
 justify-content:center;
 align-items:center;    
}
.about-imgg{
 width:100%;
 max-width:550px;
 height:auto;
 display:block;
}
.about-text h1{
 font-size: 40px;
 margin-bottom: 20px;
 text-align: left;
 margin-left: 20px;
}
.about-text h2{
 font-size: 28px;
 margin-bottom: 20px;
 margin-left: 20px;
}
.about-text p{
 padding:20px;
 font-size: 20px;
 line-height: 1.6;
 text-align: justify;
 margin-bottom: 0;
}
@media(max-width: 992px){

.about-section{
 flex-direction: column;
 text-align: center;
 padding: 40px;
}

.about-text{
 width: 100%;
}

.about-text h1{
 text-align: center;
}

}
@media(max-width: 768px){

.about-text h1{
 font-size: 28px;
}

.about-text h2{
 font-size: 22px;
}

.about-text p{
 font-size: 16px;
}

.about-imgg img{
 max-width: 300px;
}

}
@media(max-width: 480px){

.about-section{
 padding: 20px;
}

.about-text h1{
 font-size: 24px;
}

.about-text h2{
 font-size: 18px;
}

}
/* Menu Section */

.Menu-section{
 display: flex;
 width: 100%;
 flex-direction: column;
}

.menu-text h1{
 text-align: center;
 font-size: 48px;
 padding-top: 15px;

}
 .menu-box{
 display: flex;
 flex-wrap: wrap;      
 justify-content: center;
 gap: 20px;              
 width: 100%;
 padding: 20px;
  }
 
.menu-card{
 width: 300px;
 background: #fff;
 border-radius: 10px;
 box-shadow: 0 4px 10px rgba(0,0,0,0.15);
 padding: 15px;
 text-align: center;
 margin-bottom: 10px;
 }
.menu-img{
 width: 100%;
 border-radius: 5px;
 margin-bottom: 10px;
 height:260px ;
 object-position: center;
 transition: 0.5s;
 object-fit: cover;

}
.menu-img:hover{
  transform: scale(1.1);
}

.menu_info h2{
 font-size: 1.2rem;
 font-weight: bold;
 color: rgb(237, 7, 7);
 margin: 0 0 10px 25px;
 
}
.menu_info p{
 font-size: 0.9rem;
 color: #555;
 margin-bottom: 10px;
 padding-left: 5px;
 text-align: left;
}
.menu_info h3{
 font-size: 1rem;
 font-weight: bold;
 color: #e67e22;
 display: block;
}
.menu_icon{
 color: #f1c40f;
 margin-bottom: 16px;
}
.menu_btn{
  display: inline-block;
  transition: all 0.2s ease-in;
  position: relative;
  overflow: hidden;
  z-index: 1;
  color: #090909;
  padding: 0.7em 1.7em;
  cursor: pointer;
  font-size: 18px;
  border-radius: 0.5em;
  background: #e8e8e8;
  border: 1px solid #e8e8e8;
  box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
  text-decoration: none;
}
.menu_btn:active {
  color: #666;
  box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
}
.menu_btn:before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleY(1) scaleX(1.25);
  top: 100%;
  width: 140%;
  height: 180%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}
.menu_btn:after {
  content: "";
  position: absolute;
  left: 55%;
  transform: translateX(-50%) scaleY(1) scaleX(1.45);
  top: 180%;
  width: 160%;
  height: 190%;
  background-color: #e67e22;
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}
.menu_btn:hover {
  color: #090909;
  border: 1px solid #e67e22;
}

.menu_btn:hover:before {
  top: -35%;
  background-color: #e67e22;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.menu_btn:hover:after {
  top: -45%;
  background: #e67e22;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.small_card{
 width: 45px;
 height: 45px;
 float: right;
 position: relative;
 top: -240px;
 right: -8px;
 border-radius: 7px;
 color: #f1c40f;
 opacity: 0;
 border-radius: 7px;
 transition: 0.5s;
}
.small_card:hover{
 position: relative;
 top: -240px;
 right: 20px;
 opacity: 1;
 width: 65px;
 height: 65px;
} 
@media(max-width: 992px){
 .menu-card{
  width: 45%;
 }
}

@media(max-width: 768px){
 .menu-card{
  width: 90%;
 }

 .menu-text h1{
  font-size: 36px;
 }
}

@media(max-width: 480px){
 .menu-text h1{
  font-size: 28px;
 }
}
/* Gallery Section */
.gallery-section{
 width: 100%;
 padding: 50px 0;
}

.gallery-section h1{
 text-align: center;
 font-size: 48px;
 margin-bottom: 30px;
}

.gallery-section span{
 color: rgb(237, 7, 7);
}

/* Grid Container */
.gallery_image_box{
 width: 85%;
 margin: auto;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 20px;
}

/* Card */
.gallery_image{
 height: 300px;
 position: relative;
 overflow: hidden;
 border-radius: 12px;
 box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Image */
.gallery_image img{
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center;
 transition: 0.5s ease;
}

/* Hover effect */
.gallery_image:hover img{
 transform: scale(1.08);
 opacity: 0.4;
}

/* Overlay text */
.gallery_text{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 text-align: center;
 color: #fff;
 opacity: 0;
 transition: 0.4s ease;
 background: rgba(0,0,0,0.3);
 padding: 15px;
}

.gallery_image:hover .gallery_text{
 opacity: 1;
}

.gallery_text h3{
 color: orange;
 font-size: 28px;
 margin-bottom: 10px;
}

/* Button */
.gallery_btn{
 display: inline-block;
 padding: 0.7em 1.5em;
 font-size: 16px;
 border-radius: 8px;
 background: #e67e22;
 color: #fff;
 text-decoration: none;
 transition: 0.3s;
 margin-top: 10px;
}

.gallery_btn:hover{
 background: #cf711f;
 transform: translateY(-3px);
}

/* ===== Responsive ===== */

/* Tablet */
@media(max-width: 992px){
 .gallery_image_box{
  grid-template-columns: repeat(2, 1fr);
 }
}

/* Mobile */
@media(max-width: 768px){
 .gallery_image_box{
  grid-template-columns: 1fr;
  width: 90%;
 }

 .gallery-section h1{
  font-size: 36px;
 }

 .gallery_text h3{
  font-size: 24px;
 }
}

/* Small Mobile */
@media(max-width: 480px){
 .gallery-section h1{
  font-size: 28px;
 }
}
/* Contact Us */
.Contact-Us{
 background-color:#e67e22;
 width: 100%;
 min-height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 padding: 40px;
}
.Contact-Us .container{
 background: #fff;
 width: 100%;
 max-width: 420px;
 padding: 40px;
 border-radius: 15px;
 box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}
.Contact-Us h2{
 text-align: center;
 margin-bottom: 25px;
 color: #e67e22;
 font-size: 35px;
}

.input-box{
 display: flex;
 flex-direction: column;
 margin-bottom: 20px;
}

.input-box label{
 margin-bottom: 8px;
 font-size: 18px;
 font-weight: 600;
}

.input-box input{
 padding: 12px;
 border: 1px solid #ccc;
 border-radius: 8px;
 font-size: 16px;
 outline: none;
}

.input-box input:focus{
 border-color: #e67e22;
}

.Contact-Us button{
 width: 100%;
 padding: 12px;
 border: none;
 border-radius: 8px;
 background: #e67e22;
 color: white;
 font-size: 18px;
 cursor: pointer;
 transition: 0.3s;
}

.Contact-Us button:hover{
 background: #cf711f;
}
@media(max-width: 992px){
 .Contact-Us .container{
  max-width: 380px;
  padding: 30px;
 }
}
@media(max-width: 768px){

.Contact-Us{
 padding: 20px;
}

.Contact-Us h2{
 font-size: 28px;
}

.input-box label{
 font-size: 16px;
}

.input-box input{
 font-size: 14px;
}

.Contact-Us button{
 font-size: 16px;
}

}
@media(max-width: 480px){

.Contact-Us .container{
 padding: 20px;
}

.Contact-Us h2{
 font-size: 24px;
}

}
/* Footer */
.footer{
 background: #f8f8f8;
 color: #333;
 text-align: center;
 padding: 40px 20px;
 border-top: 1px solid #eee;
}

.social-box{
 background: white;
 display: inline-flex;
 gap: 15px;
 padding: 15px 25px;
 border-radius: 10px;
 margin-bottom: 20px;
}

.social-box a{
 text-decoration: none;
 color: #e67e22;
 font-weight: bold;
 font-size: 18px;
 transition: 0.3s;
}

.social-box a:hover{
 transform: scale(1.2);
}
@media (max-width: 600px) {
 .social-box {
   gap: 15px;
  }
  .social-box a {
   font-size: 24px;
  }
  .footer p {
   font-size: 12px;
  }
}