*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
}


html{
scroll-behavior:smooth;
}


body{
background:#050505;
color:#fff;
}



/* HEADER */

header{

height:90px;
display:flex;
align-items:center;
justify-content:center;
padding:0 8%;
background:rgba(5,5,5,.9);
position:relative;
z-index:10;
border-bottom:none;

}


header::after{

content:"";
position:absolute;
left:8%;
right:8%;
bottom:-20px;
height:1px;
background:#1f1f1f;

}



.logo{
position:absolute;
left:50%;
top:58%;
transform:translate(-50%,-50%);
z-index:20;
}



.logo img{

width:230px;
height:auto;
display:block;
object-fit:contain;

filter:drop-shadow(0 0 25px rgba(212,175,55,.35));

}



.left-nav{

position:absolute;
left:8%;

}



.right-nav{

position:absolute;
right:8%;

}



nav{

display:flex;
gap:35px;

}



nav a{

color:#fff;
text-decoration:none;
font-size:15px;
transition:.3s;

}


nav a:hover{

color:#d4af37;

}





/* HERO */


.hero{

min-height:90vh;

display:flex;

align-items:center;

justify-content:center;

padding:0 8%;

gap:clamp(40px,8vw,120px);

flex-wrap:wrap;

max-width:1400px;

margin:0 auto;

}



.hero-text{

flex:1 1 500px;

max-width:650px;

margin-right:auto;

}



.hero h1{

font-size:60px;

line-height:1.15;

font-weight:800;


background:linear-gradient(90deg,#fff,#d4af37);

-webkit-background-clip:text;

background-clip:text;

color:transparent;

}



.hero p{

margin:30px 0;

font-size:18px;

line-height:1.8;

color:#999;

}




.btn{

display:inline-block;

padding:15px 38px;

background:linear-gradient(90deg,#d4af37,#f5d77a);

color:#050505;

text-decoration:none;

border-radius:40px;

font-weight:700;

transition:.3s;

}



.btn:hover{

transform:translateY(-5px);

}





/* HERO CARD */


.hero-card{

flex:0 0 350px;

padding:40px;

background:#0d0d0d;

border:1px solid #242424;

border-radius:30px;

box-shadow:0 0 50px rgba(212,175,55,.08);

margin-left:auto;

}



.hero-card div{

margin-bottom:30px;

}



.hero-card h3{

color:#d4af37;

font-size:22px;

}



.hero-card p{

color:#888;

margin-top:5px;

}





/* SECTIONS */


section{

padding:90px 8%;

}



h2{

text-align:center;

font-size:42px;

margin-bottom:55px;

}





/* SERVICES */


.cards{

display:grid;

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

gap:25px;

max-width:1200px;

margin:0 auto;

justify-content:center;

align-items:stretch;

}



.card{

background:#0d0d0d;

padding:25px;

border-radius:25px;

border:1px solid #222;

transition:.35s;

overflow:hidden;

}



.card:hover{

transform:translateY(-12px);

border-color:#d4af37;

box-shadow:0 15px 40px rgba(212,175,55,.08);

}



.service-img{

width:100%;

height:180px;

object-fit:cover;

border-radius:20px;

margin-bottom:25px;

transition:.4s;

}



.card:hover .service-img{

transform:scale(1.05);

}



.card h3{

color:#d4af37;

font-size:22px;

margin-bottom:15px;

}



.card p{

color:#999;

line-height:1.8;

}





/* ABOUT */


.center{

max-width:750px;

margin:auto;

text-align:center;

color:#999;

font-size:18px;

line-height:1.8;

}





/* CONTACT */


#contact{

text-align:center;

}



#contact p{

color:#999;

margin-bottom:30px;

}





/* FOOTER */


footer{

padding:30px;

text-align:center;

border-top:1px solid #222;

color:#777;

}





/* DESKTOP LARGE */

@media(min-width:1200px){

.cards{

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

}

}





/* MOBILE */


@media(max-width:850px){


header{

height:80px;

}



.left-nav,
.right-nav{

display:none;

}



.logo img{

width:140px;

}



.hero{

flex-direction:column;

text-align:center;

padding-top:70px;

gap:30px;

max-width:100%;

}



.hero-text{

flex:unset;

max-width:100%;

margin-right:0;

}



.hero h1{

font-size:38px;

}



.hero-card{

flex:unset;

width:100%;

max-width:400px;

margin-left:0;

}



section{

padding:60px 5%;

}



h2{

font-size:32px;

}



.cards{

grid-template-columns:1fr;

max-width:100%;

}



.btn .fa-whatsapp {
    font-size: 20px;
    margin-right: 8px;
}

}