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

html{
scroll-behavior:smooth;
}

body{

background:
radial-gradient(
circle at top right,
rgba(110,0,255,.18),
transparent 40%
),
#050510;

color:white;

overflow-x:hidden;

}

/* NAV */

nav{

position:fixed;

top:0;

left:0;

width:100%;

padding:25px 8%;

display:flex;

justify-content:space-between;

align-items:center;

background:rgba(0,0,0,.35);

backdrop-filter:blur(12px);

z-index:100;

}

nav h2{

font-size:32px;

font-weight:800;

}

nav ul{

display:flex;

gap:40px;

list-style:none;

}

nav a{

color:white;

text-decoration:none;

opacity:.8;

transition:.3s;

}

nav a:hover{

opacity:1;

color:#d8a14d;

}

/* BUTTONS */

button,
.hero-btn{

background:
linear-gradient(
90deg,
#d8a14d,
#b8863b
);

border:none;

padding:18px 40px;

border-radius:10px;

font-weight:700;

cursor:pointer;

transition:.3s;

text-decoration:none;

display:inline-flex;

align-items:center;

justify-content:center;

color:black;

}

button:hover,
.hero-btn:hover{

transform:translateY(-4px);

}

.outline{

background:transparent;

border:2px solid #d8a14d;

color:#d8a14d;

}

/* HERO */

.hero{

position:relative;

height:100vh;

min-height:900px;

overflow:hidden;

display:flex;

align-items:center;

}

.hero img{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

object-fit:cover;

z-index:0;

}

.overlay{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:

linear-gradient(

90deg,

rgba(0,0,0,.82),

rgba(0,0,0,.35)

);

z-index:1;

}

.hero-content{

position:absolute;

top:55%;

left:8%;

transform:translateY(-50%);

z-index:10;

max-width:700px;

display:flex;

flex-direction:column;

align-items:flex-start;

}

.hero-small{

font-size:22px;

color:#d8a14d;

letter-spacing:8px;

margin-bottom:25px;

font-weight:700;

}

.hero h1{

font-size:110px;

line-height:.9;

font-weight:800;

margin-bottom:30px;

color:white;

}

.hero h1 span{

color:#d8a14d;

}

.hero-desc{

font-size:30px;

line-height:1.5;

margin-bottom:50px;

max-width:650px;

color:#ddd;

}

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

/* GENERAL */

section:not(.hero){

padding:120px 8%;

}

/* MENU */

.menu h2,
.about h2,
.booking h2,
.reviews h2{

font-size:52px;

margin-bottom:60px;

}

.menu-grid{

display:grid;

grid-template-columns:

repeat(
auto-fit,
minmax(
280px,
1fr
)
);

gap:30px;

}

.dish{

padding:30px;

border-radius:20px;

background:

rgba(
255,
255,
255,
0.04
);

border:

1px solid rgba(
255,
255,
255,
0.08
);

backdrop-filter:blur(10px);

transition:.3s;

overflow:hidden;

}

.dish:hover{

transform:translateY(-10px);

}

.dish img{

width:100%;

height:220px;

object-fit:cover;

border-radius:16px;

margin-bottom:20px;

}

.dish h3{

font-size:28px;

margin-bottom:10px;

}

.dish p{

font-size:22px;

color:#d8a14d;

margin-bottom:20px;

}

.dish button{

width:100%;

}

/* ABOUT */

.about{

text-align:center;

}

.about p{

max-width:850px;

margin:auto;

font-size:22px;

line-height:1.8;

opacity:.8;

}

/* BOOKING */

.booking{

text-align:center;

}

.booking-form{

display:flex;

flex-direction:column;

gap:20px;

max-width:700px;

margin:auto;

}

.booking-form input{

padding:20px;

border:none;

border-radius:12px;

background:

rgba(
255,
255,
255,
0.05
);

color:white;

font-size:16px;

}

.booking-form button{

padding:20px;

}

.booking-result{

margin-top:40px;

font-size:22px;

color:#d8a14d;

}

/* REVIEWS */

.review-grid{

display:grid;

grid-template-columns:

repeat(
auto-fit,
minmax(
280px,
1fr
)
);

gap:30px;

}

.review{

padding:40px;

border-radius:20px;

background:

rgba(
255,
255,
255,
0.03
);

border:

1px solid rgba(
255,
255,
255,
0.08
);

backdrop-filter:blur(20px);

transition:.3s;

}

.review:hover{

transform:translateY(-10px);

}

.review h3{

font-size:30px;

color:#d8a14d;

margin-bottom:20px;

}

.review p{

line-height:1.8;

opacity:.85;

margin-bottom:20px;

}

.review span{

color:#d8a14d;

font-weight:700;

}

/* FOOTER */

footer{

padding:80px;

text-align:center;

opacity:.6;

}

/* MOBILE */

@media(max-width:900px){

nav ul{

display:none;

}

.hero-content{

left:6%;

max-width:90%;

}

.hero h1{

font-size:58px;

}

.hero-desc{

font-size:20px;

}

.hero-buttons{

flex-direction:column;

}

}

.fade{
opacity:1;
transform:none;
}

/* STATS */

.stats{

display:grid;

grid-template-columns:

repeat(
auto-fit,
minmax(
200px,
1fr
)
);

gap:30px;

text-align:center;

}

.stat{

padding:50px;

border-radius:20px;

background:

rgba(
255,
255,
255,
0.04
);

border:

1px solid rgba(
255,
255,
255,
0.08
);

backdrop-filter:

blur(20px);

}

.stat h2{

font-size:60px;

color:#d8a14d;

margin-bottom:15px;

}

.stat p{

font-size:20px;

opacity:.8;

}

/* GALLERY */

.gallery{

text-align:center;

}

.gallery h2{

font-size:52px;

margin-bottom:60px;

}

.gallery-grid{

display:grid;

grid-template-columns:

repeat(
auto-fit,
minmax(
280px,
1fr
)
);

gap:25px;

}

.gallery-grid img{

width:100%;

height:280px;

object-fit:cover;

border-radius:20px;

transition:.4s;

cursor:pointer;

}

.gallery-grid img:hover{

transform:

scale(1.04);

}

.tables{

text-align:center;

}

.tables h2{

font-size:52px;

margin-bottom:20px;

}

.tables p{

opacity:.8;

margin-bottom:60px;

}

.table-layout{

display:grid;

grid-template-columns:

repeat(
auto-fit,
minmax(
220px,
1fr
)
);

gap:30px;

}

.table-card{

padding:40px;

border-radius:20px;

background:

rgba(
255,
255,
255,
0.04
);

border:

1px solid rgba(
255,
255,
255,
0.08
);

transition:.3s;

}

.table-card:hover{

transform:

translateY(-8px);

border-color:#d8a14d;

}

.table-card h3{

font-size:32px;

margin-bottom:15px;

}

.table-card p{

margin-bottom:25px;

color:#d8a14d;

}

/* TABLE SELECTION */

.tables{

text-align:center;

}

.tables h2{

font-size:56px;

margin-bottom:20px;

}

.tables p{

opacity:.8;

margin-bottom:60px;

}

.table-layout{

display:grid;

grid-template-columns:

repeat(
auto-fit,
minmax(
260px,
1fr
)
);

gap:30px;

}

.table-card{

padding:45px;

border-radius:25px;

background:

rgba(
255,
255,
255,
0.04
);

border:

1px solid rgba(
255,
255,
255,
0.08
);

backdrop-filter:

blur(20px);

transition:.4s;

}

.table-card:hover{

transform:

translateY(-12px);

border-color:#d8a14d;

box-shadow:

0 0 40px rgba(
216,
161,
77,
0.2
);

}

.table-icon{

font-size:60px;

margin-bottom:25px;

}

.table-card h3{

font-size:34px;

margin-bottom:15px;

}

.table-card p{

color:#d8a14d;

margin-bottom:30px;

}

.selected-table{

margin-top:35px;

font-size:24px;

}

.selected-table span{

color:#d8a14d;

font-weight:bold;

}

.hours{

text-align:center;

}

.hours-grid{

display:grid;

grid-template-columns:

1fr 1fr;

gap:30px;

margin-top:50px;

}

.hours-grid div{

padding:40px;

border-radius:20px;

background:

rgba(255,255,255,.04);

}

/* CONTACT */

.contact{

text-align:center;

}

.contact h2{

font-size:56px;

margin-bottom:20px;

}

.contact p{

opacity:.85;

margin-bottom:50px;

}

.contact-grid{

display:grid;

grid-template-columns:

repeat(
auto-fit,
minmax(
240px,
1fr
)
);

gap:30px;

margin-bottom:60px;

}

.contact-card{

padding:40px;

border-radius:20px;

background:

rgba(
255,
255,
255,
0.04
);

border:

1px solid rgba(
255,
255,
255,
0.08
);

backdrop-filter:

blur(20px);

}

.contact-card h3{

font-size:30px;

margin-bottom:20px;

color:#d8a14d;

}

.map-button{

display:flex;

justify-content:center;

}