@import url('https://cdn.jsdelivr.net/gh/rastikerdar/shabnam-font@v5.0.1/dist/font-face.css');

body{
margin:0;
font-family:Shabnam;
background:#f4ede2;
color:#2b1d14;
overflow-x:hidden;
}

/* ===== HEADER ===== */
.header{
position:fixed;
top:0;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 50px;
backdrop-filter:blur(10px);
background:rgba(255,255,255,0.6);
z-index:1000;
transition:.3s;
}

.header.scrolled{
background:rgba(43,29,20,0.9);
color:white;
}

/* ===== HERO ===== */
.hero{
height:100vh;
background:url('../assets/hero.jpg') center/cover;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}

.hero::after{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at center, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
}

.hero-content{
position:relative;
z-index:2;
text-align:center;
color:white;
animation:fadeUp 1.2s ease;
}

.hero h1{
font-size:70px;
letter-spacing:2px;
text-shadow:0 0 20px rgba(255,200,120,0.3);
}

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

/* ===== BUTTONS ===== */
.btn{
padding:14px 28px;
background:#3b2a1f;
color:white;
text-decoration:none;
border-radius:10px;
display:inline-block;
margin:10px;
transition:.3s;
box-shadow:0 10px 30px rgba(0,0,0,0.2);
}

.btn:hover{
transform:translateY(-4px);
box-shadow:0 0 25px rgba(255,180,100,0.3);
}

.btn.outline{
background:transparent;
border:1px solid white;
}

/* ===== MENU ===== */
.menu-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;
padding:40px;
}

.card{
background:rgba(255,255,255,0.8);
backdrop-filter:blur(8px);
padding:25px;
border-radius:18px;
transition:.4s;
transform:translateY(0);
}

.card:hover{
transform:translateY(-10px) rotateX(3deg);
box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

/* ===== GALLERY ===== */
.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:15px;
padding:40px;
}

.gallery-grid img{
width:100%;
border-radius:14px;
cursor:pointer;
transition:.3s;
}

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

/* ===== FLOATING BUTTONS ===== */
.floating-buttons{
position:fixed;
bottom:20px;
left:20px;
display:flex;
flex-direction:column;
gap:12px;
}

.floating-buttons a{
width:55px;
height:55px;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
background:#3b2a1f;
color:white;
font-size:22px;
transition:.3s;
box-shadow:0 10px 25px rgba(0,0,0,0.3);
}

.floating-buttons a:hover{
transform:scale(1.1);
box-shadow:0 0 20px rgba(255,180,100,0.4);
}