*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
scroll-behavior:smooth;
}
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #07122e;
    z-index: 1000;
    padding: 20px 0;
}
body{
background:#0f172a;
color:white;
    padding-top: 90px;
}

nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:25px 8%;
background:#111827;
position:fixed;
width:100%;
z-index:100;
}

.logo{
font-size:24px;
font-weight:700;
}

nav ul{
display:flex;
gap:30px;
list-style:none;
}

nav a{
color:white;
text-decoration:none;
}

.hero{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
padding:20px;
background:linear-gradient(
rgba(0,0,0,.7),
rgba(0,0,0,.7)
),
url('https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?w=1600');
background-size:cover;
background-position:center;
}

.hero h1{
font-size:4rem;
margin-bottom:20px;
}

.hero p{
max-width:700px;
margin:auto;
font-size:18px;
line-height:1.8;
margin-bottom:30px;
}

.btn{
padding:15px 35px;
background:#ef4444;
color:white;
text-decoration:none;
border-radius:50px;
}

section{
padding:100px 8%;
}

h2{
text-align:center;
margin-bottom:50px;
font-size:2.5rem;
}

.service-grid,
.portfolio-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
}

.service-card,
.portfolio-card,
.testimonial-box{
background:#1e293b;
padding:30px;
border-radius:15px;
}

.portfolio-card img{
width:100%;
border-radius:10px;
}

#about p{
max-width:900px;
margin:auto;
text-align:center;
line-height:2;
font-size:18px;
}

.testimonial-box{
max-width:700px;
margin:auto;
text-align:center;
}

form{
max-width:700px;
margin:auto;
display:flex;
flex-direction:column;
gap:20px;
}

input,
textarea{
padding:15px;
border:none;
border-radius:10px;
}

button{
padding:15px;
background:#ef4444;
color:white;
border:none;
cursor:pointer;
border-radius:10px;
}

footer{
padding:30px;
text-align:center;
background:#111827;
}

@media(max-width:768px){

nav{
flex-direction:column;
gap:15px;
}

.hero h1{
font-size:2.5rem;
}

nav ul{
flex-wrap:wrap;
justify-content:center;
}