:root{

--bg:#0b0b0b;
--bg-light:#111;
--bg-lighter:#151515;
--card:#161616;

--accent:#d4af37;
--hover: rgb(235, 160, 10);

--text:#ffffff;
--muted:#888;

}

html { 
    scroll-behavior: smooth;
}

/* RESET */

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

body{
font-family:Inter, sans-serif;
background:var(--bg);
color:var(--text);
}



/* CONTAINER */

.container{
max-width:1200px;
margin:auto;
padding:0 24px;
position:relative;
z-index:2;
}



/* NAVBAR */

.navbar{

position:fixed;
top:0;
left:0;
width:100%;

height:70px;

background:rgba(0,0,0,0.7);
backdrop-filter:blur(10px);

border-bottom:1px solid rgba(255,255,255,0.05);

z-index:9999;

}

.nav-container{
display:flex;
justify-content:space-between;
align-items:center;
height:100%;
}

.logo{
font-family:Playfair Display;
font-size:22px;
cursor: pointer;
}

.nav-menu{
display:flex;
gap:32px;
}

.nav-menu a{
color:var(--muted);
text-decoration:none;
font-size:14px;
transition:0.3s;
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.nav-menu a:hover{
 text-decoration: underline;
 text-decoration-color: var(--accent);
 text-underline-offset: 3px;
 text-decoration-thickness: 2px;
}

.nav-cta{
color:var(--accent);
}

/* HAMBURGER */

.hamburger{

display:none;
flex-direction:column;
gap:5px;
cursor:pointer;

}

.hamburger span{

width:25px;
height:2px;
background:white;

transition:0.3s;

}


/* MOBILE NAV */

@media(max-width:900px){

.nav-menu{

position:fixed;

top:70px;
right:-100%;

width:280px;
height:100vh;

background:#0b0b0b;

flex-direction:column;

padding:40px;

transition:0.4s ease;

border-left:1px solid rgba(255,255,255,0.08);

}

.nav-menu.active{

right:0;

}

.hamburger{

display:flex;

}

}



/* HERO */

.hero{

height:100vh;
display:flex;
align-items:center;
padding-top: 80px;

background:
linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.6)),
url("https://source.unsplash.com/1600x900/?tattoo,studio");

background-size:cover;
background-position:center;

}

.hero-container{
max-width:600px;
}

.hero h1{

font-family:Playfair Display;

font-size:clamp(36px, 7vw, 72px);

line-height:1.1;

margin-bottom:20px;

}


.hero p{
color:var(--muted);
font-weight: 200;
margin-bottom:32px;
}

.hero-buttons{

display:flex;
gap:16px;
flex-wrap:wrap;

}


/* Mobile */

@media(max-width:600px){

.hero-buttons{

flex-direction:column;
width:100%;

}

.btn{

width:100%;
text-align:center;

}

}


/* BUTTONS */

.btn{
text-decoration:none;
display:inline-block;
padding:clamp(12px, 1.5vw, 18px) clamp(20px, 3vw, 32px);

font-size:clamp(14px, 1.5vw, 16px);

white-space:nowrap;
}

.btn-primary{
border:1px solid brown;
background:var(--accent);
color:black;
}

.btn-primary:hover { 
    background-color: var(--hover);
}

.btn-outline{
border:1px solid white;
color:white;
}

.btn-outline:hover { 
    background: white; 
    color: black; 
    border: 1px solid grey;
}

.btn-large{
padding:18px 32px;
font-size:16px;
}



/* GENERAL SECTIONS */

.section{
padding:100px 0;
scroll-margin-top:90px;
position:relative;
z-index:1;
}

.section-dark{

position:relative;

background:
linear-gradient(
180deg,
rgba(0,0,0,0.7),
rgba(0,0,0,0.9)
),
url("https://images.unsplash.com/photo-1595433562696-7f4a6c4d5b1d?auto=format&fit=crop&w=1600&q=80");

background-size:cover;
background-position:center;
background-attachment:fixed;

}


.section-light{

position:relative;

background:
radial-gradient(
circle at 20% 30%,
rgba(212,175,55,0.06),
transparent 40%
),
radial-gradient(
circle at 80% 70%,
rgba(255,255,255,0.03),
transparent 40%
),
#0b0b0b;

}


.section h2{
font-family:Playfair Display;
font-size:42px;
margin-bottom:40px;
}

/* PORTFOLIO GRID */

.portfolio-grid{

display:grid;

grid-template-columns:repeat(3, 1fr);

gap:24px;

margin-top:40px;

}


/* Images */

.portfolio-grid img{

width:100%;
height:320px;

object-fit:cover;

border-radius:8px;

transition:0.4s ease;

cursor:pointer;
border:1px solid rgba(255,255,255,0.06);

box-shadow:
0 10px 30px rgba(0,0,0,0.5);

}

.portfolio-grid img:hover{

transform:scale(1.05);

box-shadow:0 20px 50px rgba(0,0,0,0.5);

}

/* Tablet */

@media(max-width:1000px){

.portfolio-grid{

grid-template-columns:repeat(2, 1fr);

}

}


/* Mobile */

@media(max-width:600px){

.portfolio-grid{

grid-template-columns:1fr;

}

}




/* ABOUT SECTION (FIXED VERSION) */

.about-section{

position:relative;
padding:200px 0;
overflow:hidden;

}


/* Background image layer */

.about-bg{

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

z-index:0;

}

.about-bg img{

width:100%;
height:100%;

object-fit:cover;

}


/* Overlay */

.about-overlay{

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

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

z-index:1;

}


/* Content */

.about-container{

position:relative;
z-index:2;

}

.about-content{

max-width:750px;

}

.about-content h2{

font-family:"Playfair Display";
font-size:48px;
margin-bottom:25px;

}

.about-content p{

font-size:18px;
color:#ddd;
margin-bottom:20px;
line-height:1.7;

}



/* SERVICES */

.services-grid{

display:grid;

grid-template-columns:repeat(3, 1fr);

gap:30px;

margin-top:40px;

}

.services h2 { 
    color: black;
}


/* Tablet */

@media(max-width:1000px){

.services-grid{

grid-template-columns:repeat(2, 1fr);

}

}


/* Mobile */

@media(max-width:600px){

.services-grid{

grid-template-columns:1fr;

gap:20px;

}

.service-card{

height:260px;

}

.service-content h3{

font-size:18px;

}

.service-content p{

font-size:13px;

}

}


.service-card{

position:relative;

height:320px;

border-radius:10px;

overflow:hidden;

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

backdrop-filter:blur(8px);

border:1px solid rgba(255,255,255,0.08);

transition:0.4s;

}

.service-card:hover{

transform:translateY(-8px);

border-color:rgba(212,175,55,0.4);

box-shadow:0 20px 50px rgba(0,0,0,0.6);

}


.service-card img{

position:absolute;
width:100%;
height:100%;
object-fit:cover;

transition:0.6s;

}

.service-content{

position:absolute;
bottom:25px;
left:25px;
right:25px;

}

.service-content h3{
font-size:20px;
margin-bottom:8px;
}

.service-content p{
color:#ccc;
font-size:14px;
}

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



/* BOOKING */

.booking{

position:relative;

padding:160px 0;

background:

linear-gradient(
rgba(0,0,0,0.65),
rgba(0,0,0,0.8)
),

url("/images/tattoobooking.jpg");

background-size:cover;
background-position:center;
background-repeat:no-repeat;

}


.booking h2{

font-size:clamp(32px, 5vw, 48px);

margin-bottom:20px;

}


.booking-btn{

display:inline-block;

padding:clamp(14px, 1.8vw, 20px) clamp(24px, 3.5vw, 40px);

font-size:clamp(15px, 1.6vw, 18px);

border-radius:4px;

text-align:center;

}

.booking-container{

display:flex;
flex-direction:column;
align-items:center;

padding-left:20px;
padding-right:20px;

}



/* Mobile fix */

@media(max-width:600px){

.booking-btn{

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

}

}


.booking-btn:hover { 
    background: var(--hover); 
    color: black;
}



/* FOOTER */

footer{

background:#050505;

padding:80px 0 40px;

border-top:1px solid rgba(255,255,255,0.05);

}

.footer-container{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:40px;

}

.footer-logo{

font-family:"Playfair Display";

font-size:24px;

margin-bottom:12px;

}

.footer-desc{

color:#888;

max-width:300px;

line-height:1.6;

font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

}

.footer-section h4{

margin-bottom:15px;

font-size:14px;

color:white;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;


}

.footer-section a{

display:block;

color:#777;

text-decoration:none;

margin-bottom:10px;

font-size:13px;

transition:0.3s;

font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

}

.footer-section a:hover{

color:var(--accent);

}

.footer-bottom{

margin-top:60px;

padding-top:20px;

border-top:1px solid rgba(255,255,255,0.05);

text-align:center;

color:#666;

font-size:14px;

}


/* FOOTER RESPONSIVE */

@media(max-width:900px){

.footer-container{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:600px){

.footer-container{

grid-template-columns:1fr;

gap:30px;

}

.footer-bottom{

margin-top:40px;

}

}
/* =========================
   PORTFOLIO BACKGROUND
   ========================= */

/* Smooth transition between sections */

#portfolio{
position:relative;
padding-bottom:80px; 
background: rgb(249, 234, 205);
color: black;
}

#portfolio::after{

content:"";

position:absolute;
left:0;
bottom:0;

width:100%;
height:180px;

pointer-events:none;

z-index:1;

}



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

#services{

position:relative;
overflow:hidden;

padding-top: 80px;
padding-bottom:160px;

}

#services h2 { 
    color: white;
}


/* Base image layer */

.services-bg{

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

background:
linear-gradient(
rgba(0,0,0,0.55),
rgba(0,0,0,0.75)
),
url("https://images.unsplash.com/photo-1611501275019-9b5cda994e8d?auto=format&fit=crop&w=1600&q=80");

background-size:cover;
background-position:center;
background-repeat:no-repeat;

filter: brightness(0.8);

transform:scale(1.05);

z-index:0;


}


/* Lighting & cinematic overlay */

.services-overlay{

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

/* background:

linear-gradient(
to bottom,
rgba(11,11,11,0.9),
rgba(11,11,11,0.6),
rgba(11,11,11,0.9)
),

radial-gradient(
circle at 20% 30%,
rgba(212,175,55,0.15),
transparent 40%
),

radial-gradient(
circle at 80% 70%,
rgba(255,255,255,0.05),
transparent 40%
); */

z-index:1;

}


/* Content above background */

#services .container{
position:relative;
z-index:2;
}