*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{

background:#f4f5f7;

color:#222;

overflow-x:hidden;

}

.hidden{

display:none !important;

}

a{

text-decoration:none;

color:inherit;

}

button{

font-family:'Poppins',sans-serif;

}

#splash{

position:fixed;

top:0;

left:0;

width:100%;

height:100vh;

background:linear-gradient(135deg,#1d5a3b,#2d7a52);

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

color:white;

z-index:999999;

}

.splashLogo{

width:150px;

animation:logo 1.5s infinite;

}

@keyframes logo{

0%{

transform:scale(.9);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(.9);

}

}

#splash h1{

margin-top:25px;

font-size:38px;

letter-spacing:3px;

}

#splash h2{

margin-top:10px;

font-weight:400;

opacity:.95;

}

#roomSplash{

margin-top:20px;

padding:10px 24px;

border-radius:30px;

background:rgba(255,255,255,.2);

font-size:18px;

}

.hero{

background:linear-gradient(135deg,#1d5a3b,#2d7a52);

padding:35px 20px;

text-align:center;

color:white;

border-radius:0 0 35px 35px;

box-shadow:0 6px 20px rgba(0,0,0,.15);

}

.logo{

width:110px;

margin-bottom:15px;

}

.hero h1{

font-size:34px;

letter-spacing:2px;

}

.hero h3{

margin-top:8px;

font-weight:400;

opacity:.9;

}

#roomNumber{

margin-top:18px;

display:inline-block;

padding:8px 22px;

background:rgba(255,255,255,.18);

border-radius:30px;

font-size:18px;

}

#homePage{

padding:20px;

}

.serviceCard{

background:white;

border-radius:20px;

padding:22px;

margin-bottom:18px;

display:flex;

justify-content:space-between;

align-items:center;

box-shadow:0 5px 18px rgba(0,0,0,.08);

transition:.3s;

cursor:pointer;

}

.serviceCard:hover{

transform:translateY(-4px);

}

.serviceLeft{

display:flex;

align-items:center;

gap:18px;

}

.serviceIcon{

width:65px;

height:65px;

border-radius:50%;

background:#1d5a3b;

display:flex;

justify-content:center;

align-items:center;

font-size:30px;

color:white;

flex-shrink:0;

}

.serviceCard h2{

font-size:24px;

margin-bottom:5px;

}

.serviceCard p{

color:#777;

font-size:15px;

}

.serviceCard i{

font-size:22px;

color:#999;

}

.topBar{

position:sticky;

top:0;

background:white;

padding:18px;

display:flex;

align-items:center;

gap:15px;

box-shadow:0 3px 12px rgba(0,0,0,.08);

z-index:100;

}

.topBar button{

background:#1d5a3b;

color:white;

border:none;

padding:10px 18px;

border-radius:12px;

cursor:pointer;

font-size:15px;

}

.topBar h2{

font-size:28px;

color:#1d5a3b;

}

#restaurantPage,

#categoryPage,

#productPage{

padding-bottom:100px;

}

.categoryCard{

background:white;

margin:18px;

padding:20px;

border-radius:18px;

display:flex;

justify-content:space-between;

align-items:center;

box-shadow:0 5px 15px rgba(0,0,0,.08);

cursor:pointer;

transition:.3s;

}

.categoryCard:hover{

transform:translateY(-3px);

}

.categoryLeft{

display:flex;

align-items:center;

gap:18px;

}

.categoryIcon{

font-size:42px;

}

.categoryCard h3{

font-size:22px;

margin-bottom:5px;

}

.categoryCard p{

color:#777;

}

#productList{

padding:20px;

}

.foodCard{

background:white;

border-radius:20px;

overflow:hidden;

margin-bottom:20px;

box-shadow:0 6px 18px rgba(0,0,0,.08);

transition:.3s;

}

.foodCard:hover{

transform:translateY(-4px);

}

.foodImage{

height:180px;

background:linear-gradient(135deg,#ececec,#dcdcdc);

display:flex;

justify-content:center;

align-items:center;

font-size:70px;

}

.foodInfo{

padding:20px;

}

.foodInfo h2{

font-size:24px;

margin-bottom:10px;

}

.rating{

color:#f8b400;

font-size:18px;

letter-spacing:2px;

margin-bottom:12px;

}

.foodPrice{

font-size:24px;

font-weight:600;

color:#1d5a3b;

margin-bottom:15px;

}

.counter{

display:flex;

justify-content:center;

align-items:center;

gap:15px;

margin-top:10px;

}

.counter button{

width:45px;

height:45px;

border:none;

border-radius:50%;

background:#1d5a3b;

color:white;

font-size:22px;

cursor:pointer;

transition:.3s;

}

.counter button:hover{

background:#2f7f56;

transform:scale(1.08);

}

.counter span{

font-size:22px;

font-weight:bold;

min-width:35px;

text-align:center;

}

#floatingCart{

position:fixed;

bottom:25px;

right:25px;

width:75px;

height:75px;

border-radius:50%;

background:#1d5a3b;

display:flex;

justify-content:center;

align-items:center;

font-size:30px;

color:white;

cursor:pointer;

box-shadow:0 8px 20px rgba(0,0,0,.25);

z-index:1000;

transition:.3s;

}

#floatingCart:hover{

transform:scale(1.08);

}

#cartCount{

position:absolute;

top:-5px;

right:-5px;

width:30px;

height:30px;

border-radius:50%;

background:#d4af37;

color:#000;

display:flex;

justify-content:center;

align-items:center;

font-size:13px;

font-weight:bold;

}

#cartPage{

position:fixed;

top:0;

left:0;

width:100%;

height:100vh;

background:#f5f5f5;

z-index:99999;

display:flex;

flex-direction:column;

}

.cartHeader{

height:75px;

background:#1d5a3b;

color:white;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 20px;

}

.cartHeader h2{

font-size:26px;

}

.cartHeader button{

background:none;

border:none;

color:white;

font-size:32px;

cursor:pointer;

}

#cartItems{

flex:1;

overflow-y:auto;

padding:20px;

}

.cartItem{

background:white;

border-radius:18px;

padding:18px;

margin-bottom:18px;

box-shadow:0 5px 15px rgba(0,0,0,.08);

}

.cartItemTop{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:15px;

}

.cartItem h3{

font-size:22px;

}

.cartPrice{

font-size:18px;

color:#1d5a3b;

font-weight:600;

}

.cartControls{

display:flex;

justify-content:space-between;

align-items:center;

margin-top:15px;

}

.removeBtn{

background:#d32f2f;

color:white;

border:none;

padding:10px 18px;

border-radius:10px;

cursor:pointer;

font-size:15px;

}

.cartFooter{

background:white;

padding:20px;

box-shadow:0 -5px 15px rgba(0,0,0,.08);

}

.summaryRow{

display:flex;

justify-content:space-between;

margin:10px 0;

font-size:18px;

}

.totalRow{

font-size:24px;

font-weight:bold;

color:#1d5a3b;

border-top:2px solid #ddd;

padding-top:15px;

margin-top:15px;

}

textarea{

width:100%;

height:110px;

margin-top:20px;

padding:15px;

border-radius:12px;

border:1px solid #ccc;

resize:none;

font-size:15px;

outline:none;

}

.cartButtons{

display:flex;

gap:12px;

margin-top:20px;

}

.clearBtn{

flex:1;

background:#c62828;

color:white;

border:none;

padding:15px;

border-radius:12px;

cursor:pointer;

}

.continueBtn{

flex:1;

background:#888;

color:white;

border:none;

padding:15px;

border-radius:12px;

cursor:pointer;

}

.sendBtn{

flex:1;

background:#1d5a3b;

color:white;

border:none;

padding:15px;

border-radius:12px;

cursor:pointer;

}

#toast{

position:fixed;

left:50%;

bottom:120px;

transform:translateX(-50%);

background:#1d5a3b;

color:white;

padding:15px 28px;

border-radius:30px;

font-size:16px;

box-shadow:0 8px 20px rgba(0,0,0,.25);

opacity:0;

pointer-events:none;

transition:.4s;

z-index:999999;

}

#toast.show{

opacity:1;

bottom:140px;

}

#thanksPage{

position:fixed;

top:0;

left:0;

width:100%;

height:100vh;

background:white;

display:flex;

justify-content:center;

align-items:center;

z-index:9999999;

}

.thanksBox{

text-align:center;

padding:30px;

max-width:420px;

}

.done{

font-size:90px;

color:#1d5a3b;

margin-bottom:20px;

}

.thanksBox h1{

font-size:40px;

margin-bottom:15px;

color:#1d5a3b;

}

.thanksBox p{

font-size:18px;

margin:10px 0;

color:#666;

}

.thanksBox button{

width:100%;

margin-top:15px;

padding:16px;

border:none;

border-radius:14px;

background:#1d5a3b;

color:white;

font-size:17px;

cursor:pointer;

transition:.3s;

}

.thanksBox button:hover{

background:#2d7a52;

}

footer{

text-align:center;

padding:40px 20px;

color:#777;

font-size:14px;

}

footer b{

display:block;

margin-top:10px;

font-size:18px;

color:#1d5a3b;

}

@media(max-width:768px){

.hero h1{

font-size:28px;

}

.hero h3{

font-size:18px;

}

.serviceCard h2{

font-size:20px;

}

.serviceIcon{

width:55px;

height:55px;

font-size:24px;

}

.foodImage{

height:150px;

}

.foodInfo h2{

font-size:20px;

}

.cartButtons{

flex-direction:column;

}

.clearBtn,

.continueBtn,

.sendBtn{

width:100%;

}

#floatingCart{

width:65px;

height:65px;

font-size:26px;

}

}

#trackPage{

position:fixed;

top:0;

left:0;

width:100%;

height:100vh;

background:white;

display:flex;

justify-content:center;

align-items:center;

z-index:99999999;

}

.trackStep{

width:280px;

padding:18px;

margin:12px auto;

border-radius:12px;

background:#f2f2f2;

font-size:20px;

font-weight:500;

}

.trackStep.active{

background:#dff5e3;

border-left:6px solid #1d5a3b;

color:#1d5a3b;

}