*{
margin:0;
padding:0;
box-sizing:border-box;
}

:root{
--primary:#0f172a;
--secondary:#1e293b;
--accent:#2563eb;
--light:#f8fafc;
--text:#334155;
--white:#ffffff;
--border:#e2e8f0;
}

body{
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background:var(--light);
color:var(--text);
line-height:1.7;
}

/* Navigation */

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 10%;
}

.logo{
color:white;
font-size:2rem;
font-weight:700;
}

.nav-btn{
text-decoration:none;
color:white;
border:2px solid white;
padding:10px 20px;
border-radius:8px;
transition:0.3s;
}

.nav-btn:hover{
background:white;
color:var(--primary);
}

/* Hero Section */

.hero{
background:linear-gradient(
rgba(15,23,42,0.92),
rgba(15,23,42,0.92)
),
url("https://images.unsplash.com/photo-1518770660439-4636190af475?w=1600");
background-size:cover;
background-position:center;
min-height:100vh;
}

.hero-content{
text-align:center;
color:white;
max-width:900px;
margin:auto;
padding:120px 20px;
}

.hero-content h2{
font-size:3.5rem;
margin-bottom:20px;
}

.hero-content p{
font-size:1.2rem;
margin-bottom:35px;
}

.btn{
display:inline-block;
text-decoration:none;
background:var(--accent);
color:white;
padding:15px 35px;
border-radius:8px;
font-weight:600;
transition:0.3s;
}

.btn:hover{
transform:translateY(-3px);
}

/* Sections */

section{
padding:80px 10%;
}

section h2{
text-align:center;
margin-bottom:25px;
color:var(--primary);
font-size:2.2rem;
}

.intro{
text-align:center;
background:white;
}

.intro p{
max-width:900px;
margin:auto;
}

/* Services */

.services{
background:#f1f5f9;
}

.service-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;
margin-top:40px;
}

.card{
background:white;
padding:30px;
border-radius:12px;
border:1px solid var(--border);
transition:0.3s;
}

.card:hover{
transform:translateY(-8px);
box-shadow:0 12px 25px rgba(0,0,0,0.08);
}

.card h3{
color:var(--primary);
margin-bottom:15px;
}

/* Why Us */

.why{
background:white;
}

.why ul{
max-width:800px;
margin:auto;
list-style:none;
}

.why li{
background:#f8fafc;
padding:15px 20px;
margin-bottom:12px;
border-left:4px solid var(--accent);
border-radius:6px;
}

/* Contract Section */

.contract{
background:var(--primary);
color:white;
text-align:center;
}

.contract h2{
color:white;
}

/* Contact */

.contact{
background:white;
text-align:center;
}

.contact p{
margin-bottom:10px;
}

/* Footer */

footer{
background:var(--secondary);
color:white;
text-align:center;
padding:25px;
}

/* Mobile */

@media(max-width:768px){

```
.navbar{
    flex-direction:column;
    gap:15px;
}

.hero-content h2{
    font-size:2.2rem;
}

.hero-content p{
    font-size:1rem;
}

section{
    padding:60px 20px;
}
```

}
