/* RESET */
*{
margin:0;
padding:0;
box-sizing:border-box;
}

/* BODY */
body{
font-family:'Segoe UI',sans-serif;
background-color:#f5f0eb;
color:#3e2c23;
line-height:1.6;
}

/* HEADER */
header{
position: sticky;
top: 0;
z-index: 1000;

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

padding: 20px 50px;
background-color:#3e2c23;
color:white;
}

/* LEFT TEXT */
.brand-text{
z-index: 2;
}

/* CENTER LOGO */
.logo-center{
position:absolute;
left:50%;
transform:translateX(-50%);
height:70px; /* slightly balanced */
pointer-events:none;
}

/* MENU */
.menu-toggle{
z-index:2;
}

/* NAV RIGHT */
#nav-menu {
display: flex;
gap: 20px;
}
header{
background-color:#3e2c23;
color:white;
padding:20px 50px;
display:flex;
justify-content:space-between;
align-items:center;
position:sticky;
top:0;
z-index:1000;
}

/* NAV */
nav a{
color:#e6d3c3;
margin-left:20px;
text-decoration:none;
font-weight:500;
}

nav a:hover{
color:white;
}

/* HERO */
.hero{
height:90vh;
background:
linear-gradient(rgba(62,44,35,0.7),rgba(62,44,35,0.7)),
url("IMG_2641.jpg");
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
}

.hero-overlay{
max-width:700px;
padding:20px;
}

.hero h2{
font-size:40px;
margin-bottom:10px;
}

.tagline{
font-size:20px;
margin-bottom:10px;
color:#e6d3c3;
}

/* BUTTON */
.hero button,
.booking button{
margin-top:20px;
padding:12px 25px;
background-color:#a67c52;
border:none;
color:white;
cursor:pointer;
border-radius:6px;
font-size:16px;
}

.hero button:hover,
.booking button:hover{
background-color:#8c633f;
}

/* REVIEWS */
.reviews{
padding:60px;
text-align:center;
background:#ffffff;
}

/* SERVICES */

.service-icon{
width:70px;
height:70px;
background:#f3e8df;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 18px auto;
}

.service-icon i{
font-size:28px;
color:#a67c52;
}

.service-card{
cursor:pointer;
transition:all 0.25s ease;
}

.service-card:active{
transform:scale(0.97);
}
.service-card:hover{
transform:translateY(-6px);
box-shadow:0 12px 25px rgba(0,0,0,0.12);
}

.services{
padding:60px;
text-align:center;
}


.service-grid{
display:flex;
flex-wrap:wrap;
gap:30px;
justify-content:center;
margin-top:30px;
}

.service-card{
background:white;
padding:25px;
width:260px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.08);
}

/* BEFORE AFTER SLIDER */
.before-after{
padding:70px;
text-align:center;
background:#f8f5f2;
}

.slider-container{
display:flex;
flex-wrap:wrap;
gap:40px;
justify-content:center;
margin-top:30px;
}

.before-after-card{
width:320px;
}

.image-container{
position:relative;
width:100%;
overflow:hidden;
border-radius:10px;
}

.image-container img{
width:100%;
display:block;
}

.after{
position:absolute;
top:0;
left:0;
clip-path:inset(0 80% 0 0);
}

.slider{
width:100%;
margin-top:10px;
}

/* GALLERY */
.gallery{
padding:60px;
text-align:center;
}

.gallery-grid{
display:flex;
flex-wrap:wrap;
gap:20px;
justify-content:center;
margin-top:25px;
}

.gallery-grid img{
width:280px;
border-radius:10px;
}

/* TEAM */
.team{
padding:60px;
background-color:#f8f5f2;
}

.team-container{
display:flex;
gap:30px;
flex-wrap:wrap;
}

.team-card{
background:white;
padding:20px;
width:300px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.08);
}

.team-card img{
width:100%;
border-radius:50%;
margin-bottom:15px;
}

/* FAQ */
.faq{
padding:60px;
}

.faq-item{
margin-top:20px;
max-width:700px;
}

/* MAP */
.map-section{
padding:60px;
text-align:center;
background:#ffffff;
}

.map-buttons{
display:flex;
gap:12px;
justify-content:center;
margin-top:15px;
}

.map-buttons a{
background:#a67c52;
color:white;
padding:10px 16px;
border-radius:8px;
text-decoration:none;
font-size:14px;
}

.map-buttons a:hover{
background:#8c633f;
}

/* BOOKING */
.booking{
background-color:#725431;
padding:60px;
text-align:center;
color:white;
}

/* FOOTER */
footer{
background-color:#3e2c23;
color:#e6d3c3;
text-align:center;
padding:20px;
}

/* FLOAT WHATSAPP BUTTON */
.whatsapp-float{
position:fixed;
bottom:90px;
right:20px;
background:#25D366;
color:white;
font-size:24px;
padding:15px;
border-radius:50%;
text-decoration:none;
box-shadow:0 4px 10px rgba(0,0,0,0.2);
}

/* STICKY WHATSAPP BAR */
.whatsapp-bar{
position:fixed;
bottom:0;
width:100%;
background:#a67c52;
color:white;
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 20px;
z-index:999;
}

.whatsapp-bar a{
background:#25D366;
color:white;
padding:8px 16px;
border-radius:6px;
text-decoration:none;
}

/* MOBILE MENU */
.menu-toggle{
display:none;
font-size:28px;
}

@media(max-width:768px){

.menu-toggle{
display:block;
cursor:pointer;
}

nav{
display:none;
flex-direction:column;
position:absolute;
background:#3e2c23;
top:70px;
right:0;
width:200px;
}

nav.active{
display:flex;
}

nav a{
padding:15px;
}

.hero h2{
font-size:30px;
}

.service-grid{
flex-direction:column;
align-items:center;
}

.slider-container{
flex-direction:column;
align-items:center;
}

.gallery-grid{
flex-direction:column;
align-items:center;
}

}