/* ================= GLOBAL ================= */
body{
margin:0;
font-family:'Poppins',sans-serif;
background:#000;
color:#fff;
}

/* ================= NAVBAR ================= */
.header{
position:fixed;
top:0;
width:100%;
z-index:9999;
background:rgba(0,0,0,.45);
backdrop-filter:blur(10px);
}

.nav-container{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 60px;
}

.brand{
display:flex;
align-items:center;
gap:10px;
}

.logo-img{
width:40px;
height:40px;
border-radius:50%;
}

.logo-text{
font-size:20px;
font-weight:600;
}

.nav-menu ul{
display:flex;
gap:30px;
align-items:center;
list-style:none;
}

.nav-menu a{
color:#fff;
text-decoration:none;
transition:.3s;
}

.nav-menu a:hover{
color:#c8a96a;
}

.admin-btn{
background:#c8a96a;
border:none;
padding:8px 18px;
border-radius:6px;
cursor:pointer;
}

/* toggle icon */
.menu-toggle{
display:none;
flex-direction:column;
cursor:pointer;
}

.menu-toggle span{
width:28px;
height:3px;
background:#fff;
margin:5px 0;
transition:.4s;
}

.menu-toggle.active span:nth-child(1){
transform:rotate(45deg) translate(5px,5px);
}
.menu-toggle.active span:nth-child(2){
opacity:0;
}
.menu-toggle.active span:nth-child(3){
transform:rotate(-45deg) translate(6px,-6px);
}

/* ================= HERO ================= */
.hero{
height:100vh;
position:relative;
overflow:hidden;
}

.hero-slider{
height:100%;
position:relative;
}

.slide{
position:absolute;
width:100%;
height:100%;
background-size:cover;
background-position:center;
opacity:0;
transition:1.5s;
}

.slide.active{
opacity:1;
}

.overlay{
position:absolute;
width:100%;
height:100%;
background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,.2));
}

.hero-content{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
}

.hero-content h1{
font-size:60px;
}

.hero-content p{
font-size:20px;
}

.btn{
padding:12px 30px;
background:#c8a96a;
color:#000;
border-radius:6px;
text-decoration:none;
}

/* ================= BOOKING ================= */
/* ================= BOOKING FIX ================= */
.booking-section{
margin-top:40px;   /* আগে -80 ছিল */
display:flex;
justify-content:center;
position:relative;
z-index:10;
}

/* booking box */
.booking-box{
background:rgba(0,0,0,.85);
padding:25px;
border-radius:14px;
display:flex;
gap:20px;
flex-wrap:wrap;
justify-content:center;
box-shadow:0 15px 50px rgba(0,0,0,.6);
}
@media(max-width:768px){

.booking-section{
margin-top:20px;   /* mobile spacing */
padding:0 12px;
}

}

.booking-box{
background:rgba(0,0,0,.85);
padding:25px;
border-radius:14px;
display:flex;
gap:20px;
flex-wrap:wrap;
justify-content:center;
}

.date-field,.guest-field{
display:flex;
flex-direction:column;
}

.date-field input,.guest-field select{
padding:10px;
border-radius:6px;
border:1px solid #333;
background:#000;
color:#fff;
min-width:160px;
}

.find-btn{
background:#c8a96a;
border:none;
padding:12px 25px;
border-radius:6px;
cursor:pointer;
}

/* ================= CALENDAR ================= */
/* ================= LUXURY DATEPICKER ================= */
.calendar{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:#fff;
color:#111;
padding:22px;
border-radius:18px;
display:none;
z-index:999999;
width:340px;
box-shadow:0 40px 120px rgba(0,0,0,.8);
animation:pop .25s ease;
}

.calendar.show{
display:block;
}

/* header */
.cal-header{
display:flex;
justify-content:center;
gap:10px;
margin-bottom:15px;
}

.cal-header select{
padding:8px 10px;
border-radius:8px;
border:1px solid #ddd;
font-weight:600;
}

/* grid */
.cal-days{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:6px;
margin-top:10px;
}

/* day */
.day{
padding:11px 0;
text-align:center;
border-radius:8px;
cursor:pointer;
font-size:14px;
transition:.2s;
}

/* hover */
.day:hover{
background:#f1f1f1;
}

/* today */
.today{
background:#c8a96a;
color:#000;
font-weight:bold;
}

/* selected */
.selected{
background:#111;
color:#fff;
}

/* disabled */
.disabled{
color:#ccc;
pointer-events:none;
}

/* buttons */
.cal-actions{
display:flex;
gap:10px;
margin-top:15px;
}

.cal-actions button{
flex:1;
padding:10px;
border:none;
border-radius:8px;
cursor:pointer;
font-weight:600;
}

#applyBtn{
background:#111;
color:#fff;
}

#cancelBtn{
background:#eee;
}

/* animation */
@keyframes pop{
from{transform:translate(-50%,-40%) scale(.9);opacity:0}
to{transform:translate(-50%,-50%) scale(1);opacity:1}
}
@media(max-width:768px){

.calendar{
width:92%;
max-width:350px;
padding:18px;
}

.day{
padding:10px 0;
font-size:13px;
}

}

.calendar.show{
display:block;
}
/* ================= LUXURY ROOMS ================= */
.rooms-section{
padding:110px 8%;
text-align:center;
background:#000;
position:relative;
overflow:hidden;
}

.section-title{
font-size:40px;
margin-bottom:60px;
letter-spacing:1px;
}

/* grid */
.rooms{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:35px;
}

/* card */
.room-card{
background:rgba(255,255,255,0.04);
backdrop-filter:blur(10px);
border-radius:18px;
padding:18px;
transition:.5s;
position:relative;
z-index:1;
overflow:hidden;
transform:translateY(40px);
opacity:0;
}
.room-card a{
position:relative;
z-index:10;
}
/* scroll show */
.room-card.show{
transform:translateY(0);
opacity:1;
}

/* glow border */
.room-card:before{
content:"";
position:absolute;
inset:0;
border-radius:18px;
padding:1px;
background:linear-gradient(45deg,#c8a96a,transparent,#c8a96a);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
opacity:.3;
pointer-events:none;
}

/* hover */
.room-card:hover{
transform:translateY(-12px) scale(1.03);
box-shadow:0 25px 60px rgba(0,0,0,.7);
}

/* image */
.img-wrap{
overflow:hidden;
border-radius:14px;
}

.img-wrap img{
width:100%;
height:210px;
object-fit:cover;
border-radius:14px;
transition:1s;
}

/* image zoom */
.room-card:hover img{
transform:scale(1.15) rotate(1deg);
filter:brightness(1.1);
}

/* text */
.room-card h3{
margin:15px 0 6px;
font-size:20px;
}

.room-card p{
color:#c8a96a;
font-weight:600;
margin-bottom:10px;
}

/* button */
.room-btn{
display:inline-block;
padding:9px 20px;
background:#c8a96a;
color:#000;
border-radius:6px;
text-decoration:none;
font-weight:600;
transition:.3s;
position: relative;
z-index:5;
}

.room-btn:hover{
background:#fff;
}

/* more button */
.more-room-wrap{
margin-top:50px;
}

.more-room-btn{
padding:14px 40px;
background:linear-gradient(45deg,#c8a96a,#e0c48b);
color:#000;
border-radius:40px;
font-weight:bold;
text-decoration:none;
font-size:16px;
box-shadow:0 10px 40px rgba(200,169,106,.4);
transition:.4s;
}

.more-room-btn:hover{
transform:scale(1.08);
}
/* ================= VIDEO ================= */
/* ===== RESPONSIVE VIDEO SECTION FIX ===== */

.video-section{
padding:100px 20px;
text-align:center;
background:#000;
}

.tour-box{
position:relative;
width:100%;
max-width:1100px;
margin:auto;
aspect-ratio:16/9;
border-radius:20px;
overflow:hidden;
box-shadow:0 30px 80px rgba(0,0,0,.7);
}

.tour-box video{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.tour-overlay{
position:absolute;
bottom:20px;
left:20px;
background:rgba(0,0,0,.6);
padding:10px 20px;
border-radius:10px;
font-size:18px;
}

/* mobile */
@media(max-width:768px){
.tour-box{
aspect-ratio:16/9;
}
.tour-overlay{
font-size:14px;
}
}

/* ================= MOBILE ================= */
@media(max-width:768px){

.nav-container{
padding:15px 20px;
}

.nav-menu{
position:fixed;
top:0;
right:-100%;
width:100%;
height:100vh;
background:#000;
display:flex;
justify-content:center;
align-items:center;
transition:.4s;
}

.nav-menu.show{
right:0;
}

.nav-menu ul{
flex-direction:column;
gap:35px;
}

.menu-toggle{
display:flex;
}

.hero{
height:65vh;
}

.hero-content h1{
font-size:26px;
}

.booking-box{
flex-direction:row;
flex-wrap:wrap;
gap:10px;
}

.date-field,.guest-field{
width:30%;
min-width:110px;
}

.find-btn{
width:160px;
margin:10px auto 0 auto;
display:block;
}

.rooms{
flex-direction:column;
}

.room-card{
width:90%;
}

.videos iframe{
width:100%;
height:200px;
}

}

/* ================= Login popup   ================= */
/* ===== LOGIN OVERLAY ===== */
.login-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background:rgba(0,0,0,.75);
backdrop-filter:blur(8px);
display:flex;
justify-content:center;
align-items:center;
z-index:999999;
opacity:0;
visibility:hidden;
transition:.4s;
}

.login-overlay.show{
opacity:1;
visibility:visible;
}

/* ===== LOGIN BOX ===== */
.login-modal{
width:780px;
max-width:95%;
background:#0d0d0d;
border-radius:18px;
display:flex;
overflow:hidden;
box-shadow:0 40px 120px rgba(0,0,0,.9);
transform:scale(.8);
transition:.4s;
}

.login-overlay.show .login-modal{
transform:scale(1);
}

/* left */
.login-left{
flex:1;
background:linear-gradient(135deg,#c8a96a,#8b6d3b);
padding:60px 40px;
color:#000;
display:flex;
flex-direction:column;
justify-content:center;
}

.login-left h2{
font-size:32px;
margin-bottom:10px;
}

.login-left p{
font-size:18px;
margin-bottom:15px;
}

.login-tag{
background:#000;
color:#fff;
padding:6px 14px;
border-radius:30px;
font-size:13px;
width:max-content;
}

/* right */
.login-right{
flex:1;
padding:50px 40px;
position:relative;
}

.login-right h3{
margin-bottom:25px;
font-size:24px;
}

.close-login{
position:absolute;
top:15px;
right:20px;
font-size:26px;
cursor:pointer;
color:#aaa;
}

.close-login:hover{
color:#fff;
}

/* input */
.input-group{
margin-bottom:18px;
}

.input-group label{
font-size:13px;
color:#aaa;
display:block;
margin-bottom:6px;
}

.input-group input{
width:100%;
padding:13px;
background:#000;
border:1px solid #333;
border-radius:8px;
color:#fff;
font-size:15px;
}

/* button */
.login-submit{
width:100%;
padding:14px;
background:#c8a96a;
border:none;
border-radius:8px;
font-size:16px;
font-weight:bold;
margin-top:10px;
cursor:pointer;
transition:.3s;
}

.login-submit:hover{
background:#e0c48b;
}

/* ===== MOBILE ===== */
@media(max-width:768px){

.login-modal{
flex-direction:column;
}

.login-left{
padding:30px;
text-align:center;
}

.login-right{
padding:30px;
}

}
/* ===== login-tag mobile center ===== */
@media(max-width:768px){

.login-left{
display:flex;
flex-direction:column;
align-items:center;   /* center everything */
text-align:center;
}

.login-tag{
margin-top:10px;
margin-left:auto;
margin-right:auto;
display:block;
}

}
/* ===== DETAILS PAGE ===== */
.video-bg{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
object-fit:cover;
z-index:-1;
}

.details-page{
padding:140px 8% 80px;
}

.details-container{
display:flex;
gap:60px;
align-items:center;
flex-wrap:wrap;
}

.details-img{
flex:1;
}

.details-img img{
width:100%;
border-radius:18px;
box-shadow:0 30px 80px rgba(0,0,0,.7);
transition:.6s;
}

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

.details-info{
flex:1;
}

.details-info h1{
font-size:42px;
margin-bottom:15px;
}

.price{
font-size:26px;
color:#c8a96a;
margin-bottom:15px;
}

.desc{
color:#ccc;
margin-bottom:20px;
line-height:1.6;
}

.facilities{
list-style:none;
padding:0;
margin-bottom:25px;
}

.facilities li{
margin:8px 0;
padding-left:18px;
position:relative;
}

.facilities li:before{
content:"✔";
position:absolute;
left:0;
color:#c8a96a;
}

.book-btn{
background:#c8a96a;
color:#000;
padding:14px 30px;
border-radius:8px;
text-decoration:none;
font-weight:600;
display:inline-block;
transition:.3s;
}
.book-btn{
display:inline-block;
padding:12px 22px;
background:#c8a96a;
color:#000;
border-radius:8px;
text-decoration:none;
font-weight:600;
position:relative;
z-index:5;
cursor:pointer;
}

.book-btn:hover{
transform:scale(1.05);
}

/* mobile */
@media(max-width:768px){

.details-container{
flex-direction:column;
}

.details-info h1{
font-size:26px;
}

}
.video-section{
padding:120px 8%;
text-align:center;
background:#000;
}

.video-full{
width:100%;
height:520px;
border-radius:20px;
overflow:hidden;
box-shadow:0 40px 120px rgba(0,0,0,.8);
}

.video-full iframe{
width:100%;
height:100%;
border:none;
}
/* ===== PICKUP CINEMATIC ===== */
.pickup-section{
position:relative;
width:100%;
height:520px;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#2b0050,#6a00ff);
}

.pickup-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.45);
z-index:1;
}

/* boats */
.boat{
position:absolute;
bottom:40px;
z-index:2;
}

/* first boat */
.boat1{
left:-250px;
animation:boatRight 6s linear infinite;
}


/* second boat */
.boat2{
right:-250px;
animation:boatLeft 6s linear infinite;
animation-delay:6s;
}

/* animations */
@keyframes boatRight{
0%{left:-250px}
100%{left:110%}
}

@keyframes boatLeft{
0%{right:-250px}
100%{right:110%}
}

/* content */
.pickup-content{
position:relative;
z-index:3;
text-align:center;
color:#fff;
}

.pickup-title{
font-size:46px;
margin-bottom:10px;
}

.pickup-text{
font-size:18px;
margin-bottom:20px;
}

.ride-card{
padding:15px 35px;
background:rgba(255,255,255,.15);
border-radius:14px;
display:inline-block;
}

/* mobile */
@media(max-width:768px){

.pickup-section{height:420px}

.pickup-title{font-size:26px}
.pickup-text{font-size:14px}

.boat dotlottie-wc{
width:150px!important;
height:150px!important;
}

}
/* ===== FULL SITE LOADER ===== */
/* ===== SITE LOADER ===== */
#siteLoader{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background:#000;
display:flex;
align-items:center;
justify-content:center;
z-index:999999;
transition:0.8s;
}

/* hide */
#siteLoader.hide{
opacity:0;
visibility:hidden;
pointer-events:none;
}
/* ===================== */
/* FINAL PICKUP SECTION  */
/* ===================== */



/* overlay */
.pickup-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.45);
z-index:1;
}

/* boats */
.boat{
position:absolute;
bottom:20px;
z-index:2;
}

/* boat left → right */
.boat1{
left:-250px;
bottom: 200px;
animation:boatRight 6s linear infinite;
}

/* boat right → left */
.boat2{
right:-250px;
animation:boatLeft 6s linear infinite;
animation-delay:6s;
}

/* animation */
@keyframes boatRight{
0%{left:-250px}
100%{left:110%}
}

@keyframes boatLeft{
0%{right:-250px}
100%{right:110%}
}

/* content */
.pickup-content{
position:relative;
z-index:3;
text-align:center;
color:#fff;
max-width:800px;
padding:20px;
}

.pickup-title{
font-size:48px;
font-family:'Playfair Display',serif;
margin-bottom:10px;
}

.pickup-text{
font-size:20px;
margin-bottom:25px;
}

.ride-card{
display:inline-block;
padding:18px 40px;
background:rgba(255,255,255,.15);
border-radius:16px;
backdrop-filter:blur(10px);
font-size:18px;
margin-bottom:15px;
}

.extra-text{
font-size:15px;
letter-spacing:2px;
opacity:.9;
}


/* animation */
@keyframes boatRight{
0%{left:-250px}
100%{left:110%}
}

@keyframes boatLeft{
0%{right:-250px}
100%{right:110%}
}

/* content */
.pickup-content{
position:relative;
z-index:3;
text-align:center;
color:#fff;
max-width:800px;
padding:20px;
}

.pickup-title{
font-size:48px;
font-family:'Playfair Display',serif;
margin-bottom:10px;
}

.pickup-text{
font-size:20px;
margin-bottom:25px;
}

.ride-card{
display:inline-block;
padding:18px 40px;
background:rgba(255,255,255,.15);
border-radius:16px;
backdrop-filter:blur(10px);
font-size:18px;
margin-bottom:15px;
}

.extra-text{
font-size:15px;
letter-spacing:2px;
opacity:.9;
}

/* ================= ULTRA LUXURY FOOTER ================= */

.ultra-footer{
position:relative;
color:#fff;
padding-top:100px;
background:linear-gradient(rgba(0,0,0,.85),rgba(0,0,0,.95)),
url('assets/images/footer-bg.jpg') center/cover no-repeat;
overflow:hidden;
}

/* subtle overlay glow */
.footer-bg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:radial-gradient(circle at top right,rgba(200,169,106,.15),transparent 40%);
pointer-events:none;
}

/* grid */
.footer-wrapper{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:60px;
padding:0 8% 70px;
position:relative;
z-index:2;
}

/* columns */
.footer-column h3{
color:#c8a96a;
font-size:20px;
margin-bottom:20px;
letter-spacing:1px;
}

.footer-column p,
.footer-column a{
display:block;
color:#ccc;
font-size:14px;
margin-bottom:10px;
text-decoration:none;
transition:.3s;
}

.footer-column a:hover{
color:#c8a96a;
transform:translateX(5px);
}

/* social icons */
.footer-social a{
width:42px;
height:42px;
background:rgba(255,255,255,.08);
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:50%;
margin-right:12px;
font-size:16px;
transition:.4s;
}

.footer-social a:hover{
background:#c8a96a;
color:#000;
transform:translateY(-5px) scale(1.1);
}

/* bottom */
.footer-bottom{
border-top:1px solid rgba(255,255,255,.08);
padding:30px 8%;
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
font-size:13px;
color:#aaa;
position:relative;
z-index:2;
}

.footer-bottom a{
color:#c8a96a;
text-decoration:none;
}

.dev-social a{
margin-left:15px;
color:#aaa;
transition:.3s;
}

.dev-social a:hover{
color:#c8a96a;
}

/* ================= MOBILE ================= */

@media(max-width:768px){

.ultra-footer{
padding-top:70px;
}

.footer-wrapper{
padding:0 20px 50px;
gap:40px;
}

.footer-bottom{
flex-direction:column;
gap:15px;
text-align:center;
}

}



/* ===== REST HERO WITH VIDEO ===== */
.rest-hero{
position:relative;
width:100%;
height:85vh;
min-height:520px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
text-align:center;
}

/* background video */
.rest-video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:-2;
}

/* overlay */
.rest-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(135deg,rgba(0,0,0,.6),rgba(60,0,100,.6));
z-index:-1;
}

/* content */
.rest-hero-content{
position:relative;
z-index:2;
color:#fff;
animation:fadeUp 1.5s ease;
}

.rest-hero h1{
font-size:60px;
font-family:'Playfair Display',serif;
}

.rest-hero p{
font-size:20px;
margin-top:10px;
color:#ddd;
}

/* ===== MOBILE FIX ===== */
@media(max-width:768px){

.rest-hero{
height:65vh;       /* height reduce */
min-height:400px;  /* not too tall */
padding:0 20px;
}

.rest-hero h1{
font-size:28px;
}

.rest-hero p{
font-size:14px;
}

}


/* ===== MENU ===== */
.menu-section{
padding:100px 8%;
background:#000;
text-align:center;
}

.section-title{
font-size:42px;
margin-bottom:60px;
}

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

/* food card */
.food-card{
background:#111;
border-radius:18px;
overflow:hidden;
transition:.5s;
transform:translateY(40px);
opacity:0;
}

.food-card.show{
transform:translateY(0);
opacity:1;
}

.food-card img{
width:100%;
height:220px;
object-fit:cover;
transition:1s;
}

.food-card:hover img{
transform:scale(1.1);
}

.food-info{
padding:20px;
}

.food-info h3{
font-size:22px;
margin-bottom:8px;
color:#c8a96a;
}

.food-info p{
color:#ccc;
font-size:14px;
}

/* ===== DINING LUXURY SECTION ===== */
.dining-section{
position:relative;
padding:140px 8%;
background:#000;
text-align:center;
overflow:hidden;
}

/* animated background glow */
.dining-bg{
position:absolute;
top:-200px;
left:50%;
transform:translateX(-50%);
width:900px;
height:900px;
background:radial-gradient(circle,#c8a96a22,transparent 60%);
filter:blur(120px);
animation:rotateGlow 20s linear infinite;
z-index:0;
}

@keyframes rotateGlow{
from{transform:translateX(-50%) rotate(0deg);}
to{transform:translateX(-50%) rotate(360deg);}
}

/* wrapper */
.dining-wrapper{
position:relative;
z-index:2;
max-width:1100px;
margin:auto;
}

/* title */
.dining-title{
font-size:52px;
font-family:'Playfair Display',serif;
margin-bottom:15px;
animation:fadeUp 1s ease;
}

.dining-sub{
color:#ccc;
font-size:18px;
max-width:700px;
margin:0 auto 40px;
animation:fadeUp 1.4s ease;
}

/* features */
.dining-features{
display:flex;
flex-wrap:wrap;
gap:18px;
justify-content:center;
margin-bottom:40px;
}

.feature{
background:rgba(255,255,255,.06);
padding:14px 22px;
border-radius:14px;
backdrop-filter:blur(10px);
transition:.4s;
font-size:16px;
}

.feature:hover{
transform:translateY(-6px) scale(1.05);
background:rgba(255,255,255,.12);
}

/* button */
.reserve-btn{
display:inline-block;
padding:16px 45px;
background:linear-gradient(45deg,#c8a96a,#e0c48b);
color:#000;
font-weight:600;
border-radius:40px;
text-decoration:none;
font-size:18px;
box-shadow:0 10px 40px rgba(200,169,106,.4);
transition:.4s;
margin-bottom:60px;
}

.reserve-btn:hover{
transform:scale(1.08);
box-shadow:0 20px 60px rgba(200,169,106,.6);
}

/* ===== RESTAURANT GALLERY ===== */
.rest-gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
}

.rest-gallery img{
width:100%;
height:200px;
object-fit:cover;
border-radius:16px;
transition:.6s;
box-shadow:0 20px 60px rgba(0,0,0,.6);
}

/* hover animation */
.rest-gallery img:hover{
transform:scale(1.1) rotate(1deg);
filter:brightness(1.2);
}

/* text animation */
@keyframes fadeUp{
from{opacity:0; transform:translateY(40px);}
to{opacity:1; transform:translateY(0);}
}

/* ===== MOBILE ===== */
@media(max-width:768px){

.dining-section{
padding:90px 20px;
}

.dining-title{
font-size:28px;
}

.dining-sub{
font-size:14px;
}

.feature{
font-size:13px;
padding:10px 14px;
}

.reserve-btn{
padding:14px 28px;
font-size:15px;
}

.rest-gallery img{
height:140px;
}

}


/* ===== ANIMATION ===== */
@keyframes fadeUp{
from{opacity:0;transform:translateY(60px)}
to{opacity:1;transform:translateY(0)}
}


/* ===== MOBILE ===== */
@media(max-width:768px){

.rest-hero h1{font-size:32px}
.rest-hero p{font-size:15px}

.section-title{font-size:26px}

.dining-content h2{font-size:28px}

}