html, body{
	width: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	position: relative;
}





body{
font-family: Arial;
margin:0;
background:linear-gradient(to bottom, #f5f7fa, #e4edf5);

}

.header{
display:flex;
justify-content:space-between;
align-items:center;
padding: 8px 20px;
background:white;
box-shadow:0 2px 10px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 1000;
}

@media (max-width: 768px){
.header{
	flex-direction: column;
	align-items: flex-start;
	padding: 10px;

nav ul{
	display: flex;
	flex-direction: row;
	gap: 10px;
	width: 100%;
	font-size: 14px;
	padding: 0;
}
nav li{
	width: 100%;
}
nav a{
	display: block;
	padding: 8px 0;
}
}
}

@media (max-width: 768px){
	.glow{
		font-size: 28px;
	}
}

@media (max-width: 768px){
	.area-cards{
		grid-template-columns: 1fr;
	}
	.card img{
		height:120px;
	}
}

.announcement-text{
display: inline-block;
white-space: nowrap;
animation: scrollText 15s linear infinite;
}

.announcement-bar:hover .announcement-text{
	animation-play-state: paused;
}

.icon{
margin-right: 10px;
font-size: 18px;
animation: blink 1s infinite;
}

@keyframes blink{
0%{opacity: 1;}
50%{opacity: 0;}
100%{opacity: 1;}
}


nav{
	display: flex;
	align-items: center;
}

.logo{
width:45px;
height: 45px;
}

.logo-area{
display: flex;
align-items: center;
gap: 8px;
}



.glow{
font-size: 26px;
font-weight: bold;
margin: 0;
margin-left: 12px;
background: linear-gradient(90deg, #ff0000, #ff7b00, #ff0000);
background-size: 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 10px rgba(255,0,0,0.5);

animation: logoMove 4s linear infinite;
transition: 0.3s;
}

nav ul{
display:flex;
list-style:none;
gap:30px;
margin: 0px;
padding: 0px;
align-items: center;
}

nav{
margin-left: auto;
}

nav a{
text-decoration:none;
font-weight:bold;
color:black;
}

nav a:hover{
color:red;
}

.area-section{
text-align:center;
padding:40px;
}

.area-text{
	width: 100%;
	overflow: hidden;
	text-align: center;
	margin-top: 10px;
	font-weight: bold;
	color: blue;
	font-size: 20px;
	position: relative;
}

.moving-text{
	display: inline-block;
	white-space: nowrap;
	animation: alternateMove 6s linear infinite alternate;
}
.moving-text{
	animation: smoothBlink 2s infinite;
}
@keyframes smoothBlink{
	0%{
		opacity: 1;
	}
	50%{
		opacity: 0.2;
	}
	100%{
		opacity: 1;
	}
}

@keyframes alternateMove{
	0%{
		transform: translateX(-50px);
	}
	100%{
		transform: translateX(50px);
	}
}



/* Status Bar Styling 
.status-banner {
    position: fixed;
    top: 60px;
    right: 5px;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 10px 20px;
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border: 1px solid rgba(0,0,0,0.05);
    font-family: 'Poppins', sans-serif;
    transition: all 0.5s ease;
}

.status-content {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 14px;
}

.timer-badge {
    background: #ee5253;
    color: white;
    padding: 2px 10px;
    border-radius: 20px;
    font-family: monospace;
}

/* Page Disable Effect 
.shop-closed-mode {
    pointer-events: none !important;  कोई भी बटन काम नहीं करेगा 
    filter: grayscale(0.8) blur(1px);  पेज थोड़ा धुंधला दिखेगा 
    user-select: none;
}

.shop-closed-mode #status-bar {
    pointer-events: auto !important;  टाइमर हमेशा चलता रहेगा 
}

/* Overlay Message 
.closed-screen {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 9998;
    display: flex;
    justify-content: center;
    align-items: center;
}

.closed-msg {
    background: white;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    max-width: 90%;
}

/* मोबाइल के लिए एडजस्टमेंट 
@media (max-width: 600px) {
    .status-banner { top: 10px; right: 10px; padding: 8px 15px; }
}
*/

/* Jumbo card ------------------------*/
/* जंबो कार्ड का स्पेशल स्टाइल */
.jumbo-special {
    border: 2px dashed #ee5253 !important; /* डैश वाली बॉर्डर */
    background: linear-gradient(135deg, #fff5f5, #ffffff) !important;
    padding: 20px !important;
    position: relative;
    overflow: hidden;

}

/* कॉम्बो विजुअल (आइकन्स वाला हिस्सा) */
.combo-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    padding: 15px;
    border-radius: 15px;
    margin-bottom: 15px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
}

.combo-item {
    font-size: 30px;
    text-align: center;
}

.combo-item span {
    font-size: 20px;
    font-weight: bold;
    display: block;
    color: #555;
}

.plus-icon {
    font-size: 20px;
    font-weight: bold;
    color: #ee5253;
    margin: 0 10px;
}

.jumbo-title {
    color: black !important;
    font-weight: 900 !important;
    letter-spacing: 1px;
}

.items-list {
    font-size: 20px;
    color: #666;
    margin-bottom: 10px;
}

/* प्राइसिंग स्टाइल */
.old-price {
    text-decoration: line-through;
    color: #999;
    font-size: 16px;
    margin-right: 10px;
}

.actual-price {
    color: #28a745;
    font-weight: bold;
    font-size: 22px;
}

.special-badge{
	position: absolute;
	top: 10px;
	left:10px;
	background: linear-gradient(45deg, #ff416c, #ff4b2b);
	color: white;
	padding: 5px 12px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	border-radius: 50px;
	z-index: 5;
	box-shadow: 0 4px 15px rgba(255, 75, 43, 0.4);
	letter-spacing: 1px;

animation: specialGlow 2s infinite ease-in-out;
}

@keyframes specialGlow{
	0% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(255, 75, 43, 0.7);
	}
	50% {
		transform: scale(1.08);
		box-shadow: 0 0 15px 10px rgba(255, 75, 43, 0);
	}
	100%{
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(255, 75, 43, 0);
	}
}



/* only lock menu*/
.lock-only-menu{
	pointer-events: none !important;
	filter: blur(5px) grayscale(100%);
	opacity: 0.4;
	user-select: none;

}


/*
#closed-overlay{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
}
.closed-content{
	background: white;
	padding: 30px;
	border-radius: 20px;
	text-align: center;
	border-top: 5px solid red;
}

*/








.area-cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
margin-top:30px;
}

.card{
background:white;
border-radius:15px;
overflow:hidden;
text-decoration:none;
color:black;
box-shadow:0 8px 20px rgba(0,0,0,0.1);
transition:0.3s;
}

.card img{
width:100%;
height:150px;
object-fit:cover;
}

.card:hover{
transform: translateY(-8px);
box-shadow: 0 12px 25px;
}

.time-section{
text-align:center;
margin-top:40px;
font-size:20px;
color:red;
}

.services-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px, 1fr));
gap:20px;
padding:20px;
}

.service-card{
display: block;
background:white;
border-radius:15px;
padding: 15px;
text-align:center;
text-decoration:none;
color:black;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
transition:0.3s;
}
.service-card img{
	width: 100%;
	height: 110px;
	object-fit: contain;
}
.service-card h3{
	margin-top: 10px;
	font-size: 16px;
	color: #333;
}

h3{
	font-size: 22px;
}

@media (max-width: 600px){
	.services-grid{
		grid-template-columns: repeat(2, 1fr);
	}
	.service-card img{
		height: 90px;
	}
	.service-card h3{
		font-size: 15px;
	}
}
.service-card:hover{
transform:scale(1.05);
}

.provider-card{
display:flex;
gap:20px;
background:white;
padding:20px;
margin:20px;
border-radius:15px;
text-decoration:none;
color:black;
box-shadow:0 5px 20px rgba(0,0,0,0.1);
}

.provider-card img{
width:100px;
height:100px;
border-radius:10px;
}

.provider-detail{
text-align:center;
padding:40px;
}

.provider-img{
width:200px;
border-radius:15px;
}



.btn{
margin-top: 20px;
justify-content: center;
gap: 15px;
clear: both;
padding:12px 25px;
border-radius:8px;
text-decoration:none;
color:white;
font-weight:bold;
}

.book-btn{
background:red;
}

.book-btn:hover{
background:green;
}

.back-btn{
background:red;
}

.back-btn:hover{
background:green;
}

.footer{
margin-top: 30px;
background:#222;
color:white;
padding:40px;
}

.footer-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:30px;
}

.copyright{
text-align: center;
}

.center{
text-align:center;
margin:30px;
}

.green-title{
color:green;
font-weight: bold;
text-align: center;
font-size: 25px;
font-family: arial;
}

.page-title{
text-align:center;
margin-top:30px;
}

.search-box{
text-align:center;
margin:20px;
}

.search-box input{
width:300px;
max-width:90%;
padding:10px;
border-radius:8px;
border:1px solid #ccc;
font-size:16px;
}

.about-header{
background: linear-gradient(90deg, #ff4b2b, #ff416c);
color: white;
text-align: center;
padding: 50px 20px;
}

.about-header h1{
	font-size: 40px;
	margin-bottom: 10px;
}

.about-container{
max-width: 900px;
margin: 0 auto;
padding: 40px;
box-sizing: border-box;
}
.about-container p{
text-align: justify;
line-height: 1.8;
}

@media (max-width: 768){
.about-container{
	padding: 20px;
}
.about-container p{
font-size: 16px;
text-align: justify;

}
}

.about-container h2{
color: #333;
margin-top: 30px;
margin-bottom: 10px;

}
.service-list{
margin-top: 10px;
padding-left:40px;
}
.service-list{
margin: 8px 0;
}

.features{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 20px;
}

.feature-box{
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.about-footer{
background: #222;
color: white;
text-align: center;
padding: 20px;
margin-top: 40px;
}

.two-column{
	display: flex;
	justify-content: center;
	gap: 30px;
	align-items: flex-start;
	margin-top: 10px auto;
	flex-wrap: wrap;
	width: fit-content;
	margin: 30px auto;


}

.box{
	display: inline-block;
	width: 260px;
	background: #f5f5f5;
	padding: 15px;
	border-radius: 10px;
	text-align: left;
	margin-bottom: 20px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
.box ul{
	padding-left: 20px;
}
.box li{
	margin: 5px 0;

}
@media(max-width: 600px){
	.two-column{
		flex-direction: column;
		align-items: center;
	}
}
@keyframes logoMove{
	0%{
		background-position: 0%;
	}
	100%{
		background-position: 200%;
	}
}
.glow:hover{
	text-shadow: 0 0 20px red,
	0 0 30px red,
	0 0 40px red;
transform: scale(1.05);
}

@keyframes scrollText{
0%{
	transform: translateX(100%);
}
100%{
	transform: translateX(-100%);
}
}


body {
  margin: 0;
  font-family: Arial;
  transition: 0.5s;
}








.service-card{
	animation: glowCard 2s infinite alternate;
}
@keyframes glowCard{
	from{
		box-shadow: 0 0 5px red;
		}
		to{
			box-shadow: 0 0 25px darkorange;

		}
}

.provider-card{
	animation: glowCard 3s infinite alternate;
}
@keyframes glowCard{
	from{
		box-shadow: 0 0 5px red;
		}
		to{
			box-shadow: 0 0 10px darkorange;

		}
}

.install-btn{
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: #ff6b6b;
	color: white;
	border: none;
	padding: 12px 18px;
	border-radius: 16px;
	display: none;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.restaurant-section{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
gap:20px;
padding:20px;
}

/* Card */
.restaurant-card{
position:relative;
border-radius:15px;
overflow:hidden;
cursor:pointer;
box-shadow:0 5px 15px rgba(0,0,0,0.2);
transition:0.3s;
}

/* Image */
.restaurant-card img{
width:100%;
height:220px;
object-fit:cover;
display:block;
}

/* Overlay (Name) */
.overlay{
position:absolute;
bottom:0;
width:100%;
padding:12px;
background:linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}

.overlay h3{
color:white;
margin:0;
text-align:center;
font-size:18px;
}

/* Hover effect (only desktop) */
@media(min-width:768px){
.restaurant-card:hover{
transform: scale(1.05);
box-shadow:0 10px 25px rgba(0,0,0,0.4);
}
}

/* 📱 Mobile optimization */
@media(max-width:600px){

.restaurant-section{
grid-template-columns: repeat(2,1fr);
gap:12px;
padding:10px;
}

.restaurant-card img{
height:140px;
}

.overlay h3{
font-size:14px;
padding:5px;
}

}


.restaurant-banner{
position:relative;
width:100%;
height:350px;
overflow:hidden;
}


/* Image */
.restaurant-banner img{
width:100%;
height:100%;
object-fit: contain;   /* 🔥 important */
display:block;
background: black;
}

/* Text Overlay */
.banner-text{
position:absolute;
bottom:20px;
left:20px;
color: white;
z-index: 1;
}

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

.banner-text p{
margin:5px 0 0;
font-size:16px;
}

/* Dark overlay for readability */
.restaurant-banner::after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
}

/* 📱 Mobile responsive */
@media(max-width:600px){

.restaurant-banner{
height:180px;
}

.banner-text h1{
font-size:18px;
}

.banner-text p{
font-size:12px;
}

}

.restaurant-banner img{
transition:0.5s;
}

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

/* Section */
.restaurant-details{
display:flex;
justify-content:center;
padding:20px;
}

/* Card */
.details-card{
max-width:800px;
width:100%;
background:#fff;
padding:20px;
border-radius:15px;
box-shadow:0 5px 20px rgba(0,0,0,0.1);
transition:0.3s;
cursor:pointer;
}

/* Title */
.details-card h2{
margin-top:0;
text-align:center;
}

/* Paragraph */
.details-card p{
text-align:justify;
line-height:1.6;
color:#444;
}

/* Info grid */
.info-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
margin-top:15px;
}

/* Items */
.info-grid div{
background:#f5f5f5;
padding:10px;
border-radius:8px;
text-align:left;
}

/* Hover (Desktop) */
.details-card:hover{
transform:translateY(-5px);
box-shadow:0 10px 30px rgba(0,0,0,0.2);
}

/* 🔥 Mobile Touch Effect */
.details-card:active{
transform:scale(0.97);
}

/* 📱 Mobile responsive */
@media(max-width:600px){

.details-card{
padding:15px;
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.8);
}

.info-grid{
grid-template-columns:1fr;
}

}

/* Title */
.menu-header{
	text-align: center;
	margin: 40px 0;
}

.menu-title{
	font-size: 32px;
	font-weight: 800;
	color: #2d3436;
	text-transform: uppercase;
	letter-spacing: 2px;
	display: inline-block;
	position: relative;
	background: linear-gradient(135deg, #ff6b6b, #ee5253);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.cursor{
	font-weight: bold;
	color: #ee5253;
	animation: blink 0.7s infinite;
	webkit-text-fill-color: #ee5253;
}
@keyframes blink{
	0%, 100% { opacity:1; }
	50% { opacity: 0; }
}
@media (max-width: 600px) {
	.menu-title{
		font-size: 24px;
	}
}


/* Grid 
.menu-container{
display:flex;
height: auto;
overflow: hidden;
flex-wrap: wrap;
justify-content: center;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:10px;
padding:10px;
padding-bottom: 50px;
max-width: 900px;
margin: auto;
object-fit: contain;
}

/* Card 
.menu-item{
background:#fff;

object-fit: contain;
padding:10px;
border-radius:10px;
text-align:center;
box-shadow:0 3px 10px rgba(0,0,0,0.1);
transition:0.3s;
}

/* Image 
.menu-item img{

object-fit:cover;
width: 100%;
height: 180px;
border-radius:10px 10px 0 0;
display: block;

}

*/


.menu-container{
	display: grid;
	gap: 20px;
	padding: 20px;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	margin-bottom: 100px;
}

.menu-item{
	background: #fff;
	border-radius: 15px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: auto;
	transition: transform 0.3s ease;
}

.menu-item img{
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
}

@media (min-width: 600px){
	.menu-container{
		grid-template-columns: 1fr;
		padding: 15px;
		}
		.menu-item img{
			height: 180px;
			}
		}

@media (min-width: 601px) and (max-width: 1024px){
	.menu-container{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1025px){
	.menu-container{
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	}
}







/* Hover */
.menu-item{
	transition: 0.3s;
}
.menu-item:hover {
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
	background: #fff5f5;
}
button{
	transition: 0.2s;
}
button: active{
	transform: scale(0.95);
}

/* Qty */
.qty-box{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
margin-top:8px;
}
/*
.qty-box button{
font-size: 16px;
padding:5px 10px;
border:none;
background:#ff4d4d;
color:white;
border-radius:5px;
}
*/
/*
#cart-summary{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #ff5722;
	color: white;
	padding: 10px 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
	z-index: 999;
	gap: 8px;
	flex-wrap: wrap;

}

#cart-summary button{
	background: white;
	color: #ff5722;
	border: none;
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 14px;
	white-space: nowrap;
	flex-shrink: 0;
}
#cart-summary span{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

}

.cart-box{
	display: none;
	margin-bottom: 80px;
}

@media (max-width: 480px){
	#cart-summary{
		font-size: 13px;
	}
}

body{
	padding-bottom: 30px;
}

.cart-box.active{
	display: block;
}

*/

/* Cart */
.cart-box{
position:relative;
margin-top: 30px;
background:#fff;
padding:15px;
box-shadow:0 -5px 15px rgba(0,0,0,0.2);
z-index: 10;
margin: 15px;

}

.cart-box ul{
max-height:100px;
overflow:auto;
padding:0;
}

.cart-box li{
list-style:none;
font-size:14px;
}

/* Button */
.cart-box button{
width:100%;
padding:10px;
background:green;
color:white;
border:none;
border-radius:8px;
margin-top:10px;
}

/* 📱 Mobile */
@media(max-width:600px){
.menu-item img{
height:80px;
}
}

.order-form{
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.order-form input,
.order-form textarea{
	width: 100%;
	padding: 12px;
	margin-bottom: 10px;
	border-radius: 8px;
	border: 1px solid #ccc;
	border-radius: 6px;
	border: 1px solid #ccc;
	font-size: 16px;
	box-sizing: border-box;
}


.order-btn{
	background: linear-gradient(45deg, #28a745, #34d058);
	color: white;
	padding: 14px;
	border: none;
	width: 100%;
	font-size: 16px;
	border-radius: 10px;
	cursor: pointer;
	transition: 0.3s;
	font-weight: bold;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.order-btn:hover{
	transform: scale(1.03);
}
.order-btn:active{
	transform: scale(0.95);

}
.order-btn.loading{
	background: green;

}
.order-btn.error{
	background: red;
}

.shake{
	text-align: center;
	font-weight: bold;
	margin: 15px;
	color: red;
	font-family: arial;
	font-size: 25px;
}


.colddrinks{
	text-align: center;
	font-weight: bold;
	margin: 15px;
	color: red;
	font-family: arial;
	font-size: 25px;
	
}

.roti{
	text-align: center;
	font-weight: bold;
	margin: 15px;
	color: red;
	font-family: arial;
	font-size: 25px;
	
}

.kulcha{
	text-align: center;
	font-weight: bold;
	margin: 15px;
	color: red;
	font-family: arial;
	font-size: 25px;
	
}


/* 🔥 Slider Container for Namaste Restaurant*/
.slider {
    width: 100%;
    max-height: 400px;
    overflow: hidden;
    position: relative;


    background-color: #000;


   }










/* Slides */
.slides {
    display: flex;
    width: 100%;
}

/* Image Style */
.slide {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: none;
}

/* Active Slide */
.slide.active {
    display: block;
}

/* 📱 Mobile Responsive */
@media (max-width: 768px) {
    .slide {
        height: 200px;
    }
}

@media (max-width: 480px) {
    .slide {
        height: 150px;
    }
}

.about-card {
    width: 90%;
    max-width: 900px;
    margin: 30px auto;
    padding: 20px 25px;
    
    border-radius: 20px;
    
    /* Glass Effect */
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.3);

    box-shadow: 0 8px 32px rgba(0,0,0,0.2);

    color: #333;
}

/* Title */
.about-card h2 {
    text-align: center;
    margin-bottom: 10px;
}

/* Description */
.about-card p {
    text-align: center;
    font-size: 15px;
    margin-bottom: 15px;
}

/* Info Section */
.info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    font-size: 14px;
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .info {
        grid-template-columns: 1fr;
    }

    .about-card {
        padding: 15px;
    }
}


body{
    font-family: Arial;
    margin:0;
    background:#f5f5f5;
}

.title{
    text-align:center;
    padding:10px;
}

/* =========================
   🔥 GRID (FIXED RESPONSIVE)
========================= */
.menu-container{
    display:grid;
    gap:14px;
    padding:10px;

    /* Desktop */
    grid-template-columns: repeat(4, minmax(0,1fr));
}

/* Tablet */
@media (max-width: 1024px){
    .menu-container{
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}

/* Mobile */
@media (max-width: 600px){
    .menu-container{
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

/* Very small mobile */
@media (max-width: 350px){
    .menu-container{
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}


/* =========================
   🔥 CARD (IMPORTANT FIX)
========================= */
.menu-item{
    width:100%;              /* 🔥 MOST IMPORTANT */
    margin:0;                /* ❌ remove auto center */

    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);

    border-radius:14px;
    padding:10px;

    text-align:center;
    position:relative;

    border:1px solid rgba(0,255,150,0.2);

    box-shadow:
        0 0 10px rgba(0,255,150,0.2),
        0 5px 15px rgba(0,0,0,0.2);

    transition: 0.3s;
}

/* Hover */
.menu-item:hover{
    transform: translateY(-4px);
    box-shadow:
        0 0 18px rgba(0,255,150,0.6),
        0 10px 20px rgba(0,0,0,0.3);
}


/* =========================
   🔥 IMAGE FIX (NO STRETCH)
========================= */
.menu-item img{
    width:100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius:10px;
}


/* =========================
   🔥 TEXT
========================= */
.menu-item h3{
    font-size:15px;
    margin:6px 0;
    color:red;
}

.menu-item p{
    font-size:15px !important;
    color:blue;
    font-weight:bold;
}


/* =========================
   🔥 VEG ICON
========================= */
.veg{
    width:12px;
    height:12px;
    border-radius:50%;
    position:absolute;
    top:8px;
    right:8px;
    box-shadow:0 0 6px currentColor;
}

.veg{ background:#00ff00; }
.nonveg{ background:#ff0000; }


/* =========================
   🔥 BUTTONS
========================= */
.qty-box{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px;
    margin-top:8px;
}

.add, .remove{
    font-size:15px;
    padding:6px 8px;
    border-radius:6px;
    border:none;
    cursor:pointer;
}

.add{
    background:#00ff9c;
    color:#000;
}

.remove{
    background:#ff4d4d;
    color:#fff;
}

.add:hover{
    box-shadow:0 0 8px #00ff9c;
}

.remove:hover{
    box-shadow:0 0 8px #ff4d4d;
}


/* =========================
   📱 EXTRA MOBILE FIX
========================= */
@media (max-width:600px){

    .menu-container{
        gap:10px;
    }

    .menu-item{
        padding:8px;
    }

    .menu-item h3{
        font-size:15px;
    }

    .menu-item p{
        font-size:15px !important;
    }
}


/* =========================
   🔥 CARD SIZE COMPACT FIX
========================= */

/* Grid थोड़ा tight */
.menu-container{
    gap:10px !important;
    padding:8px !important;
}

/* Card छोटा */
.menu-item{
    padding:8px !important;
    border-radius:12px;
}

/* Image height कम */
.menu-item img{
    aspect-ratio: 1 / 1;
    max-height:120px;   /* 🔥 main control */
}

/* Title छोटा */
.menu-item h3{
    font-size:18px;
    margin:4px 0;
}

/* Price छोटा */
.menu-item p{
    font-size:16px !important;
}

/* Buttons छोटे */
.add, .remove{
    font-size:16px;
    padding:4px 6px;
}

/* Qty text */
.qty-box span{
    font-size:15px;
}

/* =========================
   📱 MOBILE EXTRA SMALL
========================= */
@media (max-width:600px){

    .menu-item img{
        max-height:100px;
    }

    .menu-item{
        padding:6px !important;
    }

    .menu-item h3{
        font-size:15px;
    }

    .menu-item p{
        font-size:18px !important;
    }

    .add, .remove{
        font-size:15px;
        padding:3px 5px;
    }
}








.cart{
    background:#fff;
    margin:20px;
    padding:15px;
    border-radius:10px;
    box-shadow:0 4px 10px rgba(0,0,0,0.1);
}

.form input,
.form textarea{
    width:100%;
    margin-bottom:10px;
    padding:12px;
    border-radius: 8px;
    border-color: #ff5722;
    outline: none;
    font-size: 16px;
    box-sizing: border-box;
    box-shadow: 0 0 5px rgba(255, 87, 34, 0.3);
}

.order-btn{
    width:100%;
    padding:12px;
    background:red;
    color:white;
    border:none;
    border-radius:8px;
    margin-top:10px;
}




/* Floating Cart Styling */
#floating-cart {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: black; /* ऑर्डर बटन जैसा हरा रंग */
    color: white;
    padding: 12px 20px;
    border-radius: 50px;
    box-shadow: 0px 4px 15px rgba(0,0,0,0.3);
    cursor: pointer;
    z-index: 1000;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
}

#floating-cart:hover {
    transform: scale(1.1);
}

.cart-icon-container {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-family: sans-serif;
}

.cart-text {
    margin-right: 10px;
    font-size: 16px;
}

.cart-count {
    background: red;
    color: white;
    border-radius: 50%;
    padding: 2px 8px;
    font-size: 16px;
    min-width: 15px;
    text-align: center;
}

/* मोबाइल के लिए एडजस्टमेंट */
@media (max-width: 600px) {
    #floating-cart {
        bottom: 15px;
        right: 15px;
        padding: 10px 15px;
    }
    .cart-text {
        font-size: 12px;
    }
}




@media (max-width: 480px) 
/*{
	.main-div, .restaurant-item{
		width: 95% !important;
		box-sizing: border-box;
	}


h1, h2{
	font-size: 1.5rem !important;
}
}
*/


.menu-container{
	display: grid !important;
	gap: 20px !important;
	padding: 15px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
}
@media (min-width: 1025px){
	.menu-container{
		grid-template-columns: repeat(4, 1fr) !important;

	}
}
@media (min-width: 601px) and (max-width: 1024px){
	.menu-container{
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 600px){
	.menu-container{
		grid-template-columns: 1fr !important;
	}
}
.menu-item img {
	width: 100% !important;
	height: auto !important;
	object-fit: contain; !important;
	display: block; !important;
	aspect-ratio: 16/9 !important;
	border-radius: 10px 10x 0 0 !important;
}



.menu-item{
	width: auto !important;
	max-height: 100% !important;
	margin: 0 !important;
	height: auto !important;
	display: flex !important;
	flex-direction: column !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	padding-bottom: 15px !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}

/*---------------- category nav------ */
/* बाहर वाला डिब्बा */
.category-wrapper {
    position: sticky; /* यह स्क्रॉल करते समय ऊपर चिपका रहेगा */
    top: 0;
    background: #fff;
    z-index: 100;
    padding: 10px 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* बटन का कंटेनर - मोबाइल पर स्लाइड होगा */
.category-container {
    display: flex;
    overflow-x: auto; /* मोबाइल पर उंगली से सरकाने के लिए */
    white-space: nowrap;
    gap: 12px;
    padding: 5px 15px;
    scrollbar-width: none; /* ब्राउज़र का स्क्रॉलबार छुपाने के लिए */
}

.category-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari के लिए स्क्रॉलबार छुपाएं */
}

/* बटन की स्टाइलिंग */
.cat-btn {
    background: linear-gradient(135deg, #ff6b6b, #ee5253); /* सुंदर ग्रेडिएंट */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 50px; /* कैप्सूल शेप */
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
    flex-shrink: 0; /* बटन को पिचकने से रोकेगा */
}

/* Hover Effect */
.cat-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

/* Press Effect (जब बटन दबाएं) */
.cat-btn:active {
    transform: scale(0.92); /* बटन थोड़ा अंदर दबेगा */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    background: #d43f3a;
}

/* बटन की स्टाइलिंग */
.cat-btn1 {
    background: linear-gradient(135deg, green, black); /* सुंदर ग्रेडिएंट */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 50px; /* कैप्सूल शेप */
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
    flex-shrink: 0; /* बटन को पिचकने से रोकेगा */
}

/* Hover Effect */
.cat-btn1:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

/* Press Effect (जब बटन दबाएं) */
.cat-btn1:active {
    transform: scale(0.92); /* बटन थोड़ा अंदर दबेगा */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    background: #d43f3a;
}






.category-heading{
	display: table;
	margin: 30px auto;
	background: #f8f9fa;
	color: #ee5253;
	padding: 8px 30px;
	border-radius: 50px;
	font-size: 22px;
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.05);
	border-left: 5px solid #ee5253;
	border-right: 5px solid #ee5253;

}

/*
 --- Floating Status Badge (Right Side Overlap) --- 

.shop-status-wrapper {
    position: fixed; ------ Screen par fix rahega --
    top: 20px;       ----------- Upar se dori -----------
    right: 20px;     ----------- Right side se dori -----------
    z-index: 2000;   ----------- Sabse upar dikhega -----------
    background: transparent; ----------- Piche ka background waisa hi rahega -----------
    padding: 0;
    border: none;
}

.status-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end; ----------- Sab kuch right side align hoga -----------
    gap: 5px;
}

----------- Badge Styling -----------
.badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 700;
    color: white;
    font-size: 13px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2); ----------- Thoda heavy shadow for floating look -----------
    transition: all 0.3s ease;
    text-transform: uppercase;
    backdrop-filter: blur(5px); ----------- Halki transparency ke liye -----------
}

----------- Timer text below the badge -----------
#timer-display {
    font-size: 11px;
    color: #ffffff; ----------- Agar dark background hai to white, warna #333 rakhein -----------
    background: rgba(0,0,0,0.5); ----------- Timer ke piche halka black shade taaki dikhe -----------
    padding: 2px 10px;
    border-radius: 10px;
    font-weight: 600;
}

----------- Mobile Settings -----------
@media (max-width: 600px) {
    .shop-status-wrapper {
        top: 10px;
        right: 10px;
    }
    .badge {
        padding: 6px 15px;
        font-size: 11px;
    }
}
*/



/* 🔥 Premium Glass Timer Strip */
.timer-overlay {
    position: fixed;
    top: 65px;
    right: 5px;
    left: auto;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 10px 18px;
    border-radius: 50px;

    background: rgba(20, 20, 40, 0.55);
    backdrop-filter: blur(12px);

    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 
        0 8px 25px rgba(0,0,0,0.3),
        inset 0 0 10px rgba(255,255,255,0.05);

    z-index: 9999;

    animation: slideIn 0.4s ease forwards, float 3s ease-in-out infinite;
}

/* 🌊 Floating Effect */
@keyframes float {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Slide animation */
@keyframes slideIn {
    from { transform: translateX(120%); }
    to { transform: translateX(0); }
}

/* Layout fix */
.timer-header,
.timer-body,
.timer-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
}

/* Restaurant Name */
#restaurant-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    opacity: 0.9;
}

/* Icon */
.timer-icon {
    font-size: 16px;
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.6));
}

/* 🔥 Status Badge */
.status-badge {
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 20px;
    font-weight: bold;
    letter-spacing: 1px;
}

/* OPEN (Neon Green) */
.status-open {
    background: rgba(0,255,150,0.15);
    color: #00ff9c;
    box-shadow: 0 0 10px rgba(0,255,150,0.6);
    animation: pulseGreen 1.5s infinite;
}

/* CLOSED (Neon Red) */
.status-closed {
    background: rgba(255,80,80,0.15);
    color: #ff4d4d;
    box-shadow: 0 0 10px rgba(255,80,80,0.6);
}

/* Pulse animation */
@keyframes pulseGreen {
    0%,100% { box-shadow: 0 0 10px rgba(0,255,150,0.6); }
    50% { box-shadow: 0 0 18px rgba(0,255,150,1); }
}

/* Countdown */
.countdown {
    font-size: 14px;
    font-weight: bold;
    font-family: 'Courier New', monospace;

    padding: 5px 10px;
    border-radius: 10px;

    background: rgba(255,255,255,0.1);
    color: #fff;

    box-shadow: inset 0 0 5px rgba(255,255,255,0.2);
}

/* Message */
.timer-message {
    font-size: 11px;
    color: rgba(255,255,255,0.8);
}

/* Footer */
.next-event {
    font-size: 10px;
    color: rgba(255,255,255,0.6);
}

/* 🔥 Hover Premium Effect */
.timer-overlay:hover {
    transform: scale(1.05);
    box-shadow: 
        0 12px 35px rgba(0,0,0,0.4),
        0 0 20px rgba(0,150,255,0.4);
}

/* ⚠️ Closing Soon */
.closing-soon {
    color: #ffcc00 !important;
    animation: warningPulse 1s infinite;
}

/* ⚠️ Opening Soon */
.opening-soon {
    color: #00d4ff !important;
    animation: warningPulse 1.5s infinite;
}

@keyframes warningPulse {
    0%,100% { text-shadow: 0 0 5px currentColor; }
    50% { text-shadow: 0 0 15px currentColor; }
}

/* 📱 MOBILE PERFECT FIX */
@media (max-width: 768px) {
    .timer-overlay {
        top: 10px;
        right: 10px;
        left: 10px;

        justify-content: space-between;
        overflow-x: auto;
        border-radius: 15px;
    }

    #restaurant-name {
        font-size: 12px;
    }

    .countdown {
        font-size: 12px;
    }

    .timer-message,
    .next-event {
        display: none;
    }
}

/* Small devices */
@media (max-width: 480px) {
    .timer-overlay {
        padding: 8px 10px;
    }

    .status-badge {
        font-size: 10px;
    }

    .countdown {
        font-size: 11px;
    }
}









/*--------------- Namaste Restaurant----------------*/

/* =========================
   💎 DETAILS CARD (PREMIUM)
========================= */
.details-card {
    position: relative;
    padding: 20px;
    border-radius: 18px;
    overflow: hidden;

    /* Glass background */
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(12px);

    color: red;

    border: 1px solid rgba(0,255,150,0.2);

    box-shadow:
        0 0 15px rgba(0,255,150,0.2),
        inset 0 0 20px rgba(0,255,150,0.05);

    transition: 0.3s;
}

/* Hover glow */
.details-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 0 25px rgba(0,255,150,0.5),
        0 10px 30px rgba(0,0,0,0.3);
}


/* =========================
   ✨ FALLING LIGHT EFFECT
========================= */
.details-card::before {
    content: "";
    position: absolute;
    top: -150%;
    left: 0;
    width: 100%;
    height: 300%;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(0,255,150,0.3),
        transparent
    );

    transform: rotate(25deg);

    animation: lightFall 4s linear infinite;
}

/* Animation */
@keyframes lightFall {
    0% {
        top: -150%;
    }
    100% {
        top: 150%;
    }
}


/* =========================
   💡 SOFT GLOW LAYER
========================= */
.details-card::after {
    content: "";
    position: absolute;
    inset: 0;

    background: radial-gradient(
        circle at 50% 30%,
        rgba(0,255,150,0.15),
        transparent 70%
    );

    pointer-events: none;
}


/* =========================
   🧠 CONTENT SAFE
========================= */
.details-card * {
    position: relative;
    z-index: 2;
}


/* =========================
   📱 MOBILE OPTIMIZATION
========================= */
@media (max-width:600px){
    .details-card {
        padding: 15px;
        border-radius: 14px;
    }
}



/*----------Multi light falling effect ------------*/

/* =========================
   💎 DETAILS CARD ULTRA PRO
========================= */
.details-card1 {
    position: relative;
    padding: 20px;
    border-radius: 18px;
    overflow: hidden;

    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(12px);

    color: black;

    border: 1px solid rgba(0,255,150,0.25);

    box-shadow:
        0 0 20px rgba(0,255,150,0.2),
        inset 0 0 25px rgba(0,255,150,0.08);

    transition: 0.3s;
}

/* Hover glow */
.details-card1:hover {
    transform: translateY(-6px);
    box-shadow:
        0 0 30px rgba(0,255,150,0.6),
        0 15px 40px rgba(0,0,0,0.4);
}


/* =========================
   ✨ MULTIPLE FALLING LIGHTS
========================= */

/* Light Layer 1 */
.details-card1::before {
    content: "";
    position: absolute;
    top: -200%;
    left: -20%;
    width: 140%;
    height: 300%;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(0,255,150,0.25),
        transparent
    );

    transform: rotate(20deg);

    animation: lightFall1 5s linear infinite;
}

/* Light Layer 2 */
.details-card1::after {
    content: "";
    position: absolute;
    top: -200%;
    left: -10%;
    width: 140%;
    height: 300%;

    background: linear-gradient(
        100deg,
        transparent,
        rgba(0,200,255,0.2),
        transparent
    );

    transform: rotate(-15deg);

    animation: lightFall2 7s linear infinite;
}


/* Extra Light using inner element */
.details-card1 span.light-effect {
    position: absolute;
    top: -200%;
    left: 0;
    width: 100%;
    height: 300%;

    background: linear-gradient(
        140deg,
        transparent,
        rgba(255,255,255,0.15),
        transparent
    );

    transform: rotate(30deg);

    animation: lightFall3 6s linear infinite;
    pointer-events: none;
}


/* =========================
   🎬 ANIMATIONS
========================= */
@keyframes lightFall1 {
    0% { top: -200%; }
    100% { top: 200%; }
}

@keyframes lightFall2 {
    0% { top: -200%; }
    100% { top: 200%; }
}

@keyframes lightFall3 {
    0% { top: -200%; }
    100% { top: 200%; }
}


/* =========================
   💡 EXTRA GLOW
========================= */
.details-card1::marker { display:none; }

.details-card1::after,
.details-card1::before {
    pointer-events: none;
}

/* Content safe */
.details-card1 * {
    position: relative;
    z-index: 2;
}


/* =========================
   📱 MOBILE FIX
========================= */
@media (max-width:600px){
    .details-card1 {
        padding: 15px;
        border-radius: 14px;
    }
}


	/* =========================
   🌌 BG COLOR (NEON PRO)
========================= */
.bg-color {
	color: white;

    background: linear-gradient(
        270deg,
        #020617,
        #0f172a,
        #001f1f,
        #020617
    );

    background-size: 400% 400%;
    animation: bgMove 12s ease infinite;

    position: relative;
    overflow: hidden;
}

/* Animation */
@keyframes bgMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Light effect */
.bg-color::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at 20% 30%, rgba(0,255,150,0.15), transparent 60%),
        radial-gradient(circle at 80% 70%, rgba(0,200,255,0.12), transparent 60%);

    animation: moveLight 15s linear infinite;
}

/* Floating light */
@keyframes moveLight {
    0% { transform: translate(0,0); }
    50% { transform: translate(-40px, 40px); }
    100% { transform: translate(0,0); }
}
}