:root{
    scroll-behavior: smooth;
    --primary-color:white;
    --secondary-color:orange;
    --accent-color:rgb(34, 40, 49);
    scroll-behavior: smooth;
}

*{
    padding:0px;
    margin:0px;
    box-sizing: border-box;
    overflow-x: hidden;
    scrollbar-width:none ;
}
.container-1{ 
    background-image:url("bg image.jpg") ;
    height:100vh;
    width:100vw;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;

}   
.logo{
    color:var(--primary-color);
    font-size:4rem ;
    font-family: "Dancing Script", serif;
    /* color:var(--secondary-color) ; */
    
}
.cont-p
  {
    display:flex;
    justify-content: space-between;
    align-items: center; 
    /*background-color: black; */
    width:100%; 
    padding-left:10rem; 
    padding-right:10rem ;
    padding-top:2rem ;
    padding-bottom:2rem ;
    
}
.headernav{
    display:flex;
    gap:40px;
}
#header-nav1{
    color:var(--secondary-color);
}
#header-nav{
    color:var(--primary-color) ;
}
 #header-nav:hover{
    color:var(--secondary-color) ;
     /* padding:10px 20px; */

}
.header-icon{
    display:flex;
    gap:20px;
    align-items: center;
}
ion-icon{
    font-size:1.5rem ;
}
.order{
    background-color:var(--secondary-color);
    border-radius:20px ;
    padding:10px;
}
.hamberger{
    color:var(--primary-color);
    display:none;
    
}
.icon{
    font-size:3rem ;
}
#checkbox{
    display:none;
}

.cont-q{
    /* position: absolute; */
    /* top:40%;
    left:50%;
    transform: translate(-40%,-30%); */
    color:var(--primary-color);
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    /* gap:20px;    */
    /* padding:10px;  */
    width:100%;
    margin-top: 10%;
    text-align:center;
    /* padding-left:10% ;
    padding-bottom: 10px; */
    /* font-size:1.5rem;   */
}
.about-rest{
      font-size:20px ;
}
.ordernow{
    background-color:var(--secondary-color);
    padding:10px ;
    border-radius: 20px;
    width:fit-content;
    text-align: center;
    font-size:20px ;
    font-weight: bold;
    cursor:pointer;

}
.ordernow:hover{
    color:var(--primary-color);
    transform: 1.5rem ease;
}
.container{
    width:100%;
    display:flex;
    gap:10px;
    align-items: center;
}

#explore-menu{
    padding:20px;
}
.container3{
    display:grid ;
    grid-template-columns:repeat(2,1fr) ;
    padding-left:10rem;
    padding-right: 10rem;
    gap:30px;
}

.cont-1{
    background-color:var(--accent-color) ;
    padding:10px;
    color:var(--primary-color);
    font-size:1.5rem;
    padding:20px;
    display:flex;
    gap:30px;
    align-items: center;
    border-radius:10px;
    margin-top:100px ;
    /* transition:transform 1s; */
}
.font{
    font-family:"Dancing Script", serif;
    display:flex;
    flex-direction: column;
    gap:10px;
}
.discount{
    font-size:3rem ;
    font-family:"Dancing Script", serif;
    /* width:30%; */
}
.order-icon{
    background-color:var(--secondary-color) ;
    color: var(--primary-color);
    display:flex; 
    /* justify-content: space-between; */
    border-radius:20px;
    align-items: center;
    padding: 5px;
    width:fit-content;
}

.burger{
    width:30%;
    border-radius:50% ;
    border: 4px solid var(--secondary-color) ;
    transition:transform 1s;
     
}
.burger:hover{
    transform:scale(1.2);
    cursor: pointer;
}
 
.menu{
    font-size: 3rem;
    text-align: center;
    margin-top: 4rem;
    margin-bottom: 2rem;
    font-family:"Dancing Script", serif;
}

.container4{
    display: flex;
    align-items: center;
    justify-content: center;
    gap:70px;
    margin-bottom: 20px;
    width:100%;
}

.all-1{
    background-color:var(--accent-color) ;
    padding-left:20px;
    padding-right:20px;
    border-radius: 30px;
    padding-top:10px ;
    padding-bottom:10px ;
    padding-left: 20px;
    padding-right: 20px;
}

#all-menu{
    color:black;   
}
#all-menu:hover{
    background-color: black;
    color:var(--primary-color);
    font-size:20px;
    padding:10px;
    border-radius:30px; 
}
.box{
    background-color: var(--accent-color);
    color:var(--primary-color);
}
.image-box{
    background-color: var(--secondary-color);
    border-bottom-left-radius: 50px;
    width:100%;
    /* height:100%; */
    display: flex;
    align-items: center;
    justify-content: center;

}
.container-5{
    display:grid;
    grid-template-columns:repeat(3,1fr) ;
    gap:20px;
    width:100%;
    padding-left:200px;
    padding-right:200px;
    margin-bottom:10px; 
} 
.description{
    display:flex;
    flex-direction: column;
    gap:10px;
    padding:20px;
}
 
.cart-outline{
    background-color:var(--secondary-color) ;
    color:white ;
    font-size:1rem ;
    border-radius:50%;
    padding: 10px;
}
.pract1{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 50px;
    padding: 50px 130px;
    width:100%;
}

.practimg{
    height: 150px;
    width: 150px;
    margin-left:20px;
    margin-top: 15px;
    transition: transforms 1s;
}
.practimg:hover{
    transform:scale(1.2);
    cursor: pointer;

  }

.pract2{
    background-color: var(--accent-color);
}

.pract3{
    background-color:lightgray;
    border-bottom-left-radius: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:20px;
    /* padding-top:10px; 
    padding-bottom:10px; ; */
}

.pract4{
    font-size: 1rem;
    background-color: var(--accent-color);
    color: white;
    padding: 20px;
}

.pract5{
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding:10px;
}
   
 .view-button{
    background-color:var(--secondary-color) ;
    color:var(--primary-color);
    font-size:1 ;
    display: block;
    margin: auto;
     
 }


  
 .container6{
    background-color:var(--accent-color);
    margin-top:50px; 
    width:100vw;
    height:100vh;
    display:grid;
    grid-template-columns:repeat(2,1fr) ;
    justify-content: center;
    align-items: center;
    margin-bottom:50px;
    padding:100px;

}
 .aboutimage>img{
    /* height:50%; */
    width:60%;

} 
  
 .about-restaurant{
    display:flex;
    flex-direction: column;
    /*justify-content: center;
    align-items: center;*/
    gap:20px;
    color:var(--primary-color);
     
 }

 .container7{
    display:grid;
    grid-template-columns:repeat(2,1fr) ;
    gap:50px;
    margin-top: 30px;
    padding-left:100px ;
    padding-right:100px ;
    margin-bottom:30px ;
     
 }
 .booking{
    width:100%;
    height:100%; 
    display:grid;
    grid-template-columns:1fr ;
     
 }
 iframe{
     width:100%;
     height:100%;
 }
 .name,.phone,.email,.options,.date{
    width:100%;
    padding:10px;
    border:2px solid black;
    /* margin-top:20px; ;  */
    font-size:1.5rem ;   
 }
 .phone,.email,.options,.date{
margin-top: 20px;
 }
  .table{
    color:black;
    text-align: center;
    font-family:"Dancing Script", serif;
    font-size:3rem ;
  }
   .cont-a{
    background-color:var(--accent-color);
    color:var(--primary-color);
    display:flex;
    gap:10px;
    font-size:1rem ; 
    padding: 30px; 
    width:50%; 
    border-radius:10px ;
    justify-content: center;
   }
   .matter-image1{
    display:flex;
    align-items: center;
    justify-content: center;
   }
   .client{
     width:100% ;
     border:5px solid var(--secondary-color) ;
     border-radius: 50%;
     margin-top: 20px;
     margin-bottom:30px;

   }
   .checked{
    color:var(--secondary-color);
   }
   .carousel-control-prev-icon,.carousel-control-next-icon{
    background-color:var(--secondary-color) ;
    border-radius:50%;
    color:var(--primary-color);
    border:none;
    padding:20px;
    margin:20px;
   }
   .footer{
    background-color:var(--accent-color) ;
    height:50vh;
    padding:20px;
   }
   .footer-1{
    display:grid;
    grid-template-columns:repeat(3,1fr) ;
    justify-content: space-around;
    align-items: center;

   }
   .f-1,.f-2,.f-3{
    display:flex;
    flex-direction: column;
    gap:10px;
    justify-content: center;
    align-items: center;
    /* margin-top:40px ; */
    color:white ;

   }
   .f-2{
    text-align: center;
   }
   .location,.call,.mail{
    display:flex;
    gap:10px;
   }
   .location:hover,.call:hover,.mail:hover{
    color:var(--secondary-color);
   }
   .footer-2{
    text-align: center;
    color:var(--primary-color);
    margin-top:60px; 
    display:flex;
    flex-direction: column;
    gap:10px;

   }
   @media screen and (min-width: 550px) and (max-width : 900px){
    .container3{
        grid-template-columns: 1fr;
    }
    .pract1{
        grid-template-columns:1fr 1fr ;
         
    }
    .container7{
        grid-template-columns:1fr;
    }
    .header-icon{
        display:none;
    }
    .cont-a{
        flex-direction: column;
    }
    .cont-p{
         
        padding-left: 5px;
        padding-right:5px;
    }
   }

   @media screen  and (max-width : 500px){
    .cont-p{
         
        padding-left: 5px;
        padding-right:5px;
    }
    .hamberger{
        display:block;
    }
    #checkbox:checked+.headernav{
        
        display:flex;
        flex-direction: column;
        width:50%;
        left:30%;
        top:50px;
        padding-top:5rem;
        align-items:center; 
        gap:10px;
        font-size: 1.5rem;  
        height:60%;
        cursor:pointer;
     }
     .container-1{
        height:120vh;
     }
     .logo{
        align-self:start ;
     }
     .hamberger{
        align-self:start;
        font-size:4rem;
         
     }
     #header-nav:hover{
        color:var(--secondary-color)
     }
     .cont-q{
        width:100%;
        text-align: center;
        margin-top:30%;
     }
     .logo{
        font-size:3rem ;
     }
     
     .header-icon,.headernav{
        display:none;
        }
       .container3{
         grid-template-columns:1fr ;
         padding:1rem;
       } 
       .cont-1{
         display:flex;
         flex-direction: column;
         gap:5px;
         .burger{
            width:60%;
         }
       }
       .pract1{
        grid-template-columns:1fr ;
        padding-left:2rem;
        padding-right:2rem ;
       }
       .container4{
        gap:50px;
        flex-wrap: wrap;
       }
       .container6{
        grid-template-columns:1fr ;
        padding:2rem;
        height:120vh;
       }
       .aboutimage{
        width:150%;
       }
       .container7{
        grid-template-columns:1fr ;
       }
        .cont-a{
            flex-direction: column;
        }
       .footer-1{
        grid-template-columns:1fr ;
       }
       .container7{
        padding-left:1rem ;
        padding-right:1rem;

       }
        /* .matter-image1{
          display:inline;
        } */
         .cont-a{
             flex-direction: column;
             width:100vw;
             margin-left:1rem ;
             margin-right:1rem ;
         }
       #location{
        height:30vh;
       }
       .table{
        text-align: center;
       }
   }
    








   /* ------------------ small functional CSS additions (append to existing file) ------------------ */

   /* Mobile overlay nav links */
   #mobileOverlay .mobile-link {
       color: #fff;
       text-decoration: none;
       font-weight: 600;
       padding: 8px 0;
   }

   /* ensure mobile close button style */
   #mobileClose {
       font-size: 28px;
       line-height: 1;
       background: none;
       border: none;
       color: #fff;
   }

   /* Slight highlight when search finds a menu heading */
   .pract4 h2[style] {
       transition: background 0.2s ease;
   }

   /* Make input elements' fonts consistent (tightening) */
   .name,
   .phone,
   .email,
   .options,
   .date {
       font-size: 1rem;
       padding: 10px 12px;
       border-radius: 6px;
       box-sizing: border-box;
   }

   /* mobile date placeholder overlay text (if your old CSS doesn't have it) */
   .date-placeholder-text {
       font-size: 0.95rem;
   }

   /* small accessibility improvement: focus outline */
   a:focus,
   button:focus,
   input:focus {
       outline: 3px solid rgba(255, 179, 0, 0.18);
       outline-offset: 2px;
   }

   /* keep footer text readable on small screens */
   .footer-2 p {
       margin: 0;
   }

   /* ensure carousel control icons visible on top of background */
   .carousel-control-prev-icon,
   .carousel-control-next-icon {
       filter: none;
   }

   /* ensure menu filtering active state is visible (keeps your .all-1 style) */
   .container4 .filter-btn.all-1 {
       background-color: var(--accent-color);
       color: var(--primary-color);
   }