body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
background:#1f1f1f;
color:#f5f5f5;
}

/* NAVBAR */

nav{
background:#111;
border-bottom:1px solid #333;
}

.nav-container{
max-width:1100px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 20px;
}

.logo img{
height:55px;
}

.nav-links{
display:flex;
gap:20px;
list-style:none;
align-items:center;
flex-wrap:nowrap;
margin:0;
padding:0;
}

.nav-links a{
text-decoration:none;
color:#f5f5f5;
font-weight:bold;
}

.nav-links a:hover{
color:#f4b942;
}

.order-nav{
background:#f4b942;
color:black;
padding:8px 16px;
border-radius:6px;
font-weight:bold;
white-space:nowrap;
}

/* HERO */

.hero{
background:
linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)),
url("images/volleyball.jpg");

background-size:cover;
background-position:center;
background-repeat:no-repeat;

height:520px;

display:flex;
align-items:center;
justify-content:center;
}


.hero-overlay{
padding:50px;
text-align:center;
}

.hero h1{
font-size:52px;
margin-bottom:10px;
}

.hero p{
font-size:18px;
margin-bottom:20px;
}

.hero-tagline{
font-size:20px;
color:#f4b942;
margin-top:10px;
}

.hero-buttons{
display:flex;
justify-content:center;
align-items:center;
gap:12px;
flex-wrap:wrap;
}

/* BUTTONS */

.button{
display:inline-block;
background:#f4b942;
color:black;
padding:12px 26px;
border-radius:6px;
text-decoration:none;
font-weight:bold;
margin:10px;
transition:.2s;
}

.button:hover{
background:#e6a92e;
}

.order-hero{
font-size:18px;
padding:14px 30px;
}

/* RATING BAR */

.rating{
text-align:center;
background:#111;
padding:14px;
color:#f4b942;
font-weight:bold;
}

/* GENERAL CONTENT */

.container{
max-width:1000px;
margin:auto;
padding:60px 20px;
text-align:center;
}

/* FAN FAVORITES */

.favorites{
background:#262626;
padding:70px 20px;
text-align:center;
}

.food-grid{
max-width:1100px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
gap:30px;
margin-top:40px;
}

.food-card{
background:#2a2a2a;
border-radius:10px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,.4);
transition:transform .2s ease, box-shadow .2s ease;
}

.food-card:hover{
transform:translateY(-5px);
box-shadow:0 20px 35px rgba(0,0,0,.6);
}

.food-card img{
width:100%;
height:220px;
object-fit:cover;
display:block;
}

.food-card h3{
padding:18px;
margin:0;
}

/* FEATURE SECTION */

.feature{
background:#262626;
padding:70px 20px;
}

.feature-container{
max-width:1100px;
margin:auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;
}

.feature-text{
font-size:18px;
}

.feature-image img{
width:100%;
border-radius:10px;
}

/* MENU PREVIEW */

.menu-preview{
padding:70px 20px;
text-align:center;
}

.menu-preview-grid{
max-width:1000px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;
margin-top:30px;
}

.menu-item{
background:#2a2a2a;
padding:25px;
border-radius:10px;
box-shadow:0 10px 25px rgba(0,0,0,.4);
}

.menu-item h3{
margin-top:0;
color:#f4b942;
}

.menu-item p{
font-size:14px;
color:#ddd;
}

/* EVENTS */

.events{
padding:70px 20px;
text-align:center;
}

.events-grid{
max-width:1000px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;
margin-top:30px;
}

.event-card{
background:#2a2a2a;
padding:25px;
border-radius:10px;
box-shadow:0 10px 25px rgba(0,0,0,.4);
}

/* GALLERY */

.gallery{
padding:70px 20px;
text-align:center;
background:#262626;
}

.gallery-grid{
max-width:1100px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:15px;
margin-top:40px;
}

.gallery-grid img{
width:100%;
height:220px;
object-fit:cover;
border-radius:10px;
transition:transform .3s ease;
}

.gallery-grid img:hover{
transform:scale(1.05);
}

/* REVIEWS */

.reviews{
padding:70px 20px;
text-align:center;
}

.review-grid{
max-width:1100px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
gap:25px;
margin-top:40px;
}

.review-card{
background:#2a2a2a;
padding:25px;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,.5);
text-align:left;
}

.stars{
color:#f4b942;
font-size:20px;
margin-bottom:10px;
}

.review-author{
display:block;
margin-top:10px;
color:#cfcfcf;
}

.review-button{
display:inline-block;
margin-top:30px;
background:#f4b942;
color:black;
padding:12px 26px;
border-radius:6px;
text-decoration:none;
font-weight:bold;
}

/* CONTACT */

.contact-section{
max-width:1100px;
margin:auto;
padding:60px 20px;
text-align:center;
}

.location-text{
font-size:18px;
margin-bottom:40px;
}

.contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
}

.contact-card{
background:#2a2a2a;
padding:30px;
border-radius:10px;
box-shadow:0 10px 25px rgba(0,0,0,.4);
}

.contact-card h3{
color:#f4b942;
margin-top:0;
}

.contact-card a{
color:#f4b942;
text-decoration:none;
}

.contact-card a:hover{
text-decoration:underline;
}

/* MENU PAGE */

.menu-section{
text-align:center;
padding:60px 20px;
}

.menu-container{
max-width:1100px;
margin:auto;
padding:40px 20px;
}

.menu-frame{
width:100%;
height:900px;
border:none;
border-radius:10px;
background:white;
box-shadow:0 10px 30px rgba(0,0,0,.6);
display:block;
}

/* FOOTER */

footer{
background:#111;
color:#aaa;
text-align:center;
padding:25px;
margin-top:40px;
}

/* FLOATING ORDER BUTTON */

.floating-order{
position:fixed;
right:20px;
bottom:20px;
background:#f4b942;
color:black;
padding:14px 20px;
border-radius:30px;
font-weight:bold;
text-decoration:none;
box-shadow:0 10px 25px rgba(0,0,0,.4);
z-index:999;
}

/* MOBILE */

@media(max-width:768px){

.hero{
height:380px;
background-position:center top;
}

.hero h1{
font-size:34px;
}

.hero-overlay{
padding:30px 20px;
}

.logo img{
height:40px;
}

.nav-container{
padding:10px 14px;
}

.nav-links{
gap:14px;
font-size:14px;
}

.order-nav{
display:none;
}

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

.hero-buttons{
flex-direction:column;
}

.hero-buttons .button{
width:200px;
font-size:16px;
padding:12px;
margin:8px 0;
}

.feature-container{
grid-template-columns:1fr;
}

.menu-frame{
display:none;
}

}