/* Reset & Base */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI', sans-serif; line-height:1.6; color:#333; }

/* Header */
header { position: sticky; top:0; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,0.1); z-index:1000; }
nav { display:flex; justify-content:space-between; align-items:center; padding:1rem 2rem; }
nav ul { display:flex; gap:1.5rem; list-style:none; }
nav a { text-decoration:none; color:#333; font-weight:500; transition:0.3s; }
nav a:hover { color:#007BFF; }
.logo { font-size:1.5rem; font-weight:bold; }

/* Hero */
.hero { display:flex; align-items:center; justify-content:center; text-align:center; padding:4rem 2rem; background:#f4f4f4; flex-direction:column; }
.hero-img { width:30%; max-width:600px; border-radius:10px; margin-bottom:2rem; }
.hero-text h1 { font-size:2.5rem; margin-bottom:1rem; }
.hero-text p { font-size:1.2rem; margin-bottom:1.5rem; }
.btn { padding:.8rem 1.5rem; background:#007BFF; color:#fff; border:none; border-radius:5px; text-decoration:none; transition:0.3s; }
.btn:hover { background:#0056b3; }

/* Projects */
.projects { padding:4rem 2rem; }
.project-list { display:flex; flex-wrap:wrap; gap:2rem; justify-content:center; }
.project-item { background:#fff; padding:1rem; border-radius:10px; text-align:center; box-shadow:0 4px 8px rgba(0,0,0,0.1); width:300px; transition:transform 0.3s; }
.project-item:hover { transform:translateY(-5px); }
.project-item img { width:100%; border-radius:10px; margin-bottom:1rem; }

/* CTA */
.cta { background:#007BFF; color:#fff; text-align:center; padding:3rem 2rem; margin-top:2rem; border-radius:10px; }
.cta a.btn { background:#fff; color:#007BFF; }

/* Contact Form */
.contact { padding:4rem 2rem; max-width:600px; margin:0 auto; }
.form-group { margin-bottom:1rem; }
input, textarea { width:100%; padding:.8rem 1rem; border:1px solid #ccc; border-radius:5px; font-size:1rem; }
input:focus, textarea:focus { outline:none; border-color:#007BFF; box-shadow:0 0 5px rgba(0,123,255,0.3); }

/* Footer */
footer { background:#fff; text-align:center; padding:2rem; margin-top:2rem; box-shadow:0 -2px 5px rgba(0,0,0,0.1); }
footer a { color:#007BFF; margin:0 .5rem; text-decoration:none; }

/* Responsive */
@media(max-width:768px){
    nav ul { flex-direction:column; gap:.5rem; }
    .project-list { flex-direction:column; align-items:center; }
    .hero-text h1 { font-size:2rem; }
}