/* RESET */

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

/* BODY */

body{
font-family:'Montserrat', sans-serif;
color:#111;
background-image:url('/assets/images/hero/hero-salon-watercolor.png');
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
min-height:100vh;
opacity:0;
transition:opacity 0.6s ease;
}

/* HEADER */

.header{
height:80px;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 60px;
border-bottom:1px solid rgba(0,0,0,0.08);
background:transparent;
}

.logo{
font-family:'Playfair Display', serif;
font-size:30px;
font-weight:600;
letter-spacing:2px;
color:#111;
}

.logo::after{
content:"";
display:block;
width:40px;
height:1px;
background:#111;
margin-top:6px;
}

/* NAVBAR */

.nav a{
position:relative;
text-decoration:none;
margin-left:40px;
font-family:'Cinzel', serif;
font-size:14px;
color:#111;
padding-bottom:6px;
}

.nav a::after{
content:'';
position:absolute;
left:0;
bottom:0;
width:0%;
height:1px;
background:#111;
transition:width 0.3s ease;
}

.nav a:hover::after{
width:100%;
}

/* HERO */

.hero{
position:relative;
min-height:calc(100vh - 160px);
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}

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

.hero-content{
position:relative;
max-width:700px;
}

.hero-content h1{
font-family:'Playfair Display', serif;
font-size:74px;
letter-spacing:3px;
margin-bottom:18px;
}

.hero-tagline{
font-family:'Cinzel', serif;
font-size:20px;
letter-spacing:2px;
margin-bottom:18px;
color:#333;
}

.hero-sub{
font-family:'Montserrat', sans-serif;
font-size:16px;
color:#666;
}

/* SERVICES PAGE */

.services-page{
padding:80px 20px;
max-width:1200px;
margin:auto;
}

.services-title{
text-align:center;
margin-bottom:50px;
}

.services-title h1{
font-family:'Playfair Display', serif;
font-size:42px;
margin-bottom:10px;
}

/* SERVICES GRID */

.services-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:50px;
align-items:end;
}

/* SERVICE CARD */

.service-card{
position:relative;
text-align:center;
padding:25px;
background:#ffffff;
border-radius:8px;
box-shadow:0 6px 25px rgba(0,0,0,0.06);
transition:all 0.35s ease;
}

.service-card::after{
content:"";
position:absolute;
left:10%;
bottom:-12px;
width:80%;
height:14px;
background:rgba(0,0,0,0.08);
border-radius:50%;
filter:blur(6px);
z-index:-1;
}

.service-card:hover{
transform:translateY(-8px) scale(1.02);
box-shadow:0 14px 40px rgba(0,0,0,0.12);
}

.service-image{
width:100%;
height:220px;
background:#f2f2f2;
margin-bottom:18px;
border-radius:6px;
overflow:hidden;
}

.service-image img{
width:100%;
height:100%;
object-fit:cover;
}

.service-card:hover .service-image{
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.service-card h3{
font-family:'Cinzel', serif;
font-size:18px;
margin-bottom:8px;
transition:all 0.3s ease;
}

.service-card:hover h3{
letter-spacing:1px;
}

.service-card p{
font-size:14px;
color:#666;
}

/* SERVICE HILL EFFECT */

.service-card:nth-child(1){transform:translateY(18px);}
.service-card:nth-child(2){transform:translateY(-12px);}
.service-card:nth-child(3){transform:translateY(18px);}
.service-card:nth-child(4){transform:translateY(6px);}
.service-card:nth-child(5){transform:translateY(-18px);}
.service-card:nth-child(6){transform:translateY(6px);}

/* GALLERY */

.gallery,
.gallery-page{
padding:80px 20px;
max-width:1200px;
margin:auto;
}

.gallery-title{
text-align:center;
margin-bottom:60px;
}

.gallery-title h1{
font-family:'Playfair Display', serif;
font-size:42px;
margin-bottom:10px;
}

.gallery-title p{
font-family:'Montserrat', sans-serif;
color:#666;
}

.gallery-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.gallery-item{
overflow:hidden;
background:#f2f2f2;
}

.gallery-item img{
width:100%;
height:260px;
object-fit:cover;
transition:transform 0.4s ease;
}

.gallery-item:hover img{
transform:scale(1.08);
}

/* FOOTER */

.footer{
height:80px;
display:flex;
align-items:center;
justify-content:center;
border-top:1px solid rgba(0,0,0,0.08);
margin-top:60px;
background:transparent;
}

/* FLOATING WHATSAPP */

.floating-wa{
position:fixed;
bottom:30px;
right:30px;
background:#25D366;
color:#fff;
padding:14px 22px;
border-radius:30px;
font-family:'Montserrat', sans-serif;
font-size:14px;
text-decoration:none;
box-shadow:0 8px 25px rgba(0,0,0,0.15);
transition:all 0.3s ease;
}

.floating-wa:hover{
background:#1ebe5d;
transform:translateY(-3px);
}

/* =========================
   SERVICES PAGE BACKGROUND
========================= */

.services-page {
    background-image: url('../images/services-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


/* =========================
   GALLERY PAGE BACKGROUND
========================= */

.gallery-page {
    background-image: url('../images/gallery-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}