body{
background:#0D0D0D;
color:#fff;
font-family:Poppins;
}

.navbar{
background:rgba(0,0,0,0.6);
backdrop-filter:blur(10px);
}

.btn-gold{
background:#C8A96A;
color:#000;
padding:12px 28px;
border:none;
}

.card{
background:#1A1A1A;
border:1px solid #C8A96A30;
transition:.4s;
}

.card:hover{
transform:translateY(-10px);
}

body{
font-family:'Poppins',sans-serif;
background:#0d0d0d;
color:white;
}

.brand-logo{
font-family:'Playfair Display',serif;
font-size:28px;
color:#C8A96A !important;
}

.premium-navbar{
background:#000;
padding:15px 0;
position:fixed;
top:0;
width:100%;
z-index:9999;
}

.navbar-nav .nav-link{
color:#C8A96A !important;
margin-right:20px;
font-weight:500;
}

.navbar-nav .nav-link:hover{
color:#ffffff !important;
}

.navbar-brand{
color:#C8A96A !important;
font-size:26px;
font-family:'Playfair Display',serif;
}

.btn-gold{
background:#C8A96A;
color:#000;
padding:10px 22px;
border-radius:30px;
font-weight:500;
}

.btn-gold:hover{
background:#b89554;
}

.hero{

margin-top:90px;
min-height:100vh;

background:#f8f8f8;

display:flex;
align-items:center;
justify-content:center;   /* center content */

position:relative;
overflow:hidden;

padding:120px 0;   /* spacing top bottom */

}

/* container layout */

.hero-flex{

display:flex;
align-items:center;
justify-content:space-between;
gap:60px;

}

.hero-image{

flex:1;
display:flex;
justify-content:flex-start;

}

/* left image */

.hero-image img{

width:850px;              /* perfect size */
max-width:100%;

filter:drop-shadow(0 40px 60px rgba(0,0,0,0.15));

animation:floatImage 6s ease-in-out infinite;

}

/* right content */

.hero-content{

flex:1;
padding-left:40px;

}

.hero-content h1{
font-family: 'Playfair Display', serif;
font-size:72px;
font-weight:600;
letter-spacing:1px;
color:#111;

}

.hero-content p{

margin:15px 0;
font-size:18px;
color:#555;

}

/* button */

.btn-gold{

background:linear-gradient(135deg,#caa35a,#e7c178);
color:#111;

padding:14px 36px;

border-radius:40px;

font-weight:600;

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

transition:0.3s;

}

.btn-gold:hover{

transform:translateY(-3px);
box-shadow:0px 12px 25px rgba(0,0,0,0.25);

}

/* floating animation */

@keyframes floatImage{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-15px);
}

100%{
transform:translateY(0px);
}

}

/* floating beans */

.coffee-bg{

position:absolute;
width:100%;
height:100%;

z-index:0;

}

.coffee-bg span{

position:absolute;

bottom:-150px;

width:30px;
height:30px;

background:url("../images/coffee_bean.png") center/contain no-repeat;

filter:drop-shadow(0px 6px 6px rgba(0,0,0,0.2));
animation:beans 10s linear infinite;

opacity:0.6;

}

.coffee-bg span:nth-child(1){left:10%;animation-duration:8s;}
.coffee-bg span:nth-child(2){left:25%;animation-duration:10s;}
.coffee-bg span:nth-child(3){left:40%;animation-duration:12s;}
.coffee-bg span:nth-child(4){left:55%;animation-duration:9s;}
.coffee-bg span:nth-child(5){left:70%;animation-duration:11s;}
.coffee-bg span:nth-child(6){left:85%;animation-duration:13s;}
.coffee-bg span:nth-child(7){left:50%;animation-duration:7s;}
.coffee-bg span:nth-child(8){left:30%;animation-duration:10s;}

@keyframes beans{

0%{
transform:translateY(0) rotate(0deg);
opacity:0;
}

50%{
opacity:0.8;
}

100%{
transform:translateY(-120vh) rotate(360deg);
opacity:0;
}

}

.tagline{

letter-spacing:4px;
font-size:14px;
color:#caa35a;
text-transform:uppercase;

}

.about-restaurant{

padding:140px 0;

background:#ffffff;   /* change */

position:relative;

border-top:1px solid #eee;

}

.about-grid{

display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:80px;

}

/* text */

.section-tag{

color:#caa35a;
letter-spacing:4px;
font-size:14px;
text-transform:uppercase;

}

.about-content h2{

font-family:'Playfair Display',serif;
font-size:48px;
margin:15px 0;

color:#111;   /* FIX */

}
.about-content p{

color:#555;
line-height:1.7;
margin-bottom:15px;

}

/* image */

.about-image{

text-align:right;

}

.about-image img{

width:100%;
max-width:520px;

border-radius:20px;

box-shadow:0px 30px 60px rgba(0,0,0,0.15);

animation:floatImage 6s ease-in-out infinite;

}

/* floating animation */

@keyframes floatImage{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-15px);
}

100%{
transform:translateY(0px);
}

}

.cuisine-section{

padding:120px 0;
background:#f8f8f8;

}

.section-title{

text-align:center;
margin-bottom:60px;

}

.section-title span{

color:#caa35a;
letter-spacing:4px;
font-size:14px;

}

.section-title h2{

font-family:'Playfair Display',serif;
font-size:48px;
color:#111;

}

.cuisine-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;

}

.cuisine-card{
position:relative;
}

.cuisine-title{

position:absolute;

bottom:0;

width:100%;

background:rgba(0,0,0,0.6);

color:#fff;

padding:12px;

font-size:18px;

}

.cuisine-card img{

width:100%;
height:220px;

object-fit:cover;

}

.cuisine-title{

padding:18px;

font-size:20px;

font-weight:600;

color:#222;

font-family:'Playfair Display',serif;

}

.cuisine-card{
    position:relative;
}

.cuisine-card h3{
    position:absolute;
    bottom:10px;
    left:0;
    width:100%;
    color:#fff;
    background:rgba(0,0,0,0.6);
    padding:8px 0;
}

/* hover effect */

.cuisine-card:hover{

transform:translateY(-10px);

box-shadow:0 30px 60px rgba(0,0,0,0.15);

}

.chef-section{
padding:120px 0;
background:#ffffff;
}

.chef-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;
margin-top:60px;
}

.chef-card{
background:#fff;
border-radius:15px;
overflow:hidden;
box-shadow:0 20px 40px rgba(0,0,0,0.08);
transition:0.4s;
}

.chef-card img{
width:100%;
height:250px;
object-fit:cover;
}

.chef-info{
padding:20px;
}

.chef-info h3{
font-size:22px;
margin-bottom:10px;
}

.chef-info p{
font-size:14px;
color:#666;
margin-bottom:12px;
}

.price{
color:#caa35a;
font-weight:600;
font-size:18px;
}

.chef-card:hover{
transform:translateY(-10px);
box-shadow:0 30px 60px rgba(0,0,0,0.15);
}

.coffee-process-section{
padding:120px 0;
background:#0f0f0f;
text-align:center;
color:white;
}

.coffee-subtitle{
color:#c9a35c;
letter-spacing:2px;
font-size:13px;
}

.coffee-title{
font-size:42px;
margin:10px 0 20px;
}

.coffee-desc{
max-width:650px;
margin:auto;
color:#bbb;
margin-bottom:70px;
line-height:1.7;
}

.coffee-process-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
max-width:1100px;
margin:auto;
}

.coffee-process-box{
background:#1c1c1c;
padding:40px;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.3);
transition:0.3s;
}

.coffee-process-box:hover{
transform:translateY(-10px);
box-shadow:0 20px 40px rgba(0,0,0,0.5);
}

.coffee-number{
font-size:32px;
color:#c9a35c;
font-weight:bold;
margin-bottom:10px;
}

.coffee-process-box h3{
font-size:20px;
margin-bottom:10px;
}

.coffee-process-box p{
font-size:14px;
color:#bbb;
line-height:1.6;
}

.review-section{
padding:120px 0;
background:#f8f8f8;
text-align:center;
}

.review-sub{
color:#c9a35c;
letter-spacing:2px;
font-size:13px;
}

.review-title{
font-size:42px;
margin:10px 0 20px;
color:#000;
}

.review-desc{
max-width:650px;
margin:auto;
color:#666;
margin-bottom:70px;
line-height:1.7;
}

.review-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
max-width:1100px;
margin:auto;
}

.review-card{
background:white;
padding:35px;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
text-align:left;
transition:0.3s;
}

.review-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

.stars{
color:#c9a35c;
font-size:18px;
margin-bottom:10px;
}

.review-text{
color:#666;
font-size:15px;
line-height:1.6;
margin-bottom:20px;
}

.review-user{
display:flex;
align-items:center;
gap:12px;
}

.review-user img{
width:45px;
height:45px;
border-radius:50%;
object-fit:cover;
}

.review-user h4{
font-size:16px;
margin:0;
}

.review-user span{
font-size:13px;
color:#888;
}

.cta-section{
position:relative;
padding:120px 20px;
background:url("../images/coffee_banner.png") center/cover no-repeat;
text-align:center;
color:white;
}

.cta-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.65);
}

.cta-content{
position:relative;
max-width:700px;
margin:auto;
z-index:2;
}

.cta-content h2{
font-size:42px;
margin-bottom:20px;
}

.cta-content p{
font-size:16px;
line-height:1.7;
color:#ddd;
margin-bottom:35px;
}

.cta-buttons{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.cta-btn{
background:#c9a35c;
color:#000;
padding:14px 28px;
border-radius:30px;
text-decoration:none;
font-weight:600;
transition:0.3s;
}

.cta-btn:hover{
background:#b58d48;
}

.cta-btn-outline{
border:2px solid #c9a35c;
color:white;
padding:12px 28px;
border-radius:30px;
text-decoration:none;
transition:0.3s;
}

.cta-btn-outline:hover{
background:#c9a35c;
color:#000;
}

.site-footer{
background:#0f0f0f;
color:#ccc;
padding:80px 0 20px;
}

.footer-container{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:40px;
padding:0 20px;
}

.footer-logo{
color:#c9a35c;
font-size:28px;
margin-bottom:10px;
}

.footer-col h4{
color:white;
margin-bottom:15px;
}

.footer-col ul{
list-style:none;
padding:0;
}

.footer-col ul li{
margin-bottom:10px;
font-size:14px;
}

.footer-col ul li a{
color:#ccc;
text-decoration:none;
transition:0.3s;
}

.footer-col ul li a:hover{
color:#c9a35c;
}

.footer-bottom{
text-align:center;
margin-top:50px;
border-top:1px solid #222;
padding-top:15px;
font-size:14px;
}