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

body{

background:#0b0b0b;

color:#ffffff;

font-family:Arial, Helvetica, sans-serif;

line-height:1.6;

}


.hero{

min-height:100vh;

background:
linear-gradient(
rgba(0,0,0,.55),
rgba(0,0,0,.85)
),
radial-gradient(
circle at top,
#6b3f1d,
#0b0b0b 60%
);

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

padding:40px;

}


.nav{

width:100%;

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 8%;

position:absolute;

top:0;

left:0;

z-index:10;

}


.logo{

display:flex;

align-items:center;

}


.logo img{

width:130px;

height:auto;

}


.nav-links{

display:flex;

gap:35px;

}


.nav-links a{

color:white;

text-decoration:none;

font-size:1.1rem;

font-weight:bold;

transition:0.3s;

}


.nav-links a:hover{

color:#d6a15d;

}


.hero-content{

flex:1;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

padding:40px 20px;

}


.hero h1{

font-size:4rem;

letter-spacing:5px;

line-height:1.1;

text-shadow:0 0 25px #d6a15d;

}


.hero h2{

margin-top:30px;

color:#d6a15d;

font-size:2rem;

}


.hero p{

max-width:750px;

margin:30px 0;

font-size:1.3rem;

}


.button{

background:#d6a15d;

color:#111;

padding:16px 40px;

border-radius:40px;

text-decoration:none;

font-weight:bold;

display:inline-block;

margin-top:20px;

transition:0.3s;

}


.button:hover{

transform:translateY(-3px);

box-shadow:0 10px 25px rgba(214,161,93,0.4);

}


section{

padding:80px 8%;

text-align:center;

}


section h2{

font-size:3rem;

margin-bottom:30px;

color:#d6a15d;

}


.about p,
.why p{

max-width:900px;

margin:20px auto;

font-size:1.2rem;

}


.services{

background:#111;

}


.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:30px;

margin-top:40px;

}



.card{

background:#181818;

padding:35px;

border-radius:15px;

border:1px solid #3a2a18;

transition:0.3s;

height:100%;

}



.card:hover{

transform:translateY(-8px);

border-color:#d6a15d;

box-shadow:0 15px 30px rgba(214,161,93,0.15);

}



.card h3{

color:#d6a15d;

margin-bottom:15px;

font-size:1.4rem;

}



.card p{

font-size:1.05rem;

line-height:1.6;

}
#contact{

background:#0b0b0b;

}


.logo img{

width:120px;

height:auto;

}


@media(max-width:700px){

.hero h1{

font-size:3rem;

}


.nav{

flex-direction:column;

gap:20px;

}


.logo img{

width:120px;

height:auto;

}

}