html, body {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	background: #f4f7fb; 
	color: #111; 
}


.nav {
	background: #ffffff;
	border-bottom: 1px solid #ddd;
	padding: 10px 20px;
	position: sticky;
	top: 0;
}
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 20px; }
.nav-list a { text-decoration: none; color: #111; font-weight: bold; }


.welcome-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 60vh;
	text-align: center;
	padding: 40px 20px;
}
.welcome-section h1 { font-size: 2.5rem; margin: 0; }
.welcome-section p { color: #555; margin-top: 8px; }


.projects-section { max-width: 1000px; margin: 0 auto; padding: 20px; }
.projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.project { background: #fff; padding: 10px; border: 1px solid #e6e6e6; border-radius: 6px; text-decoration: none; color: inherit; }
.project-image { width: 100%; height: 140px; object-fit: cover; border-radius: 4px; }
.project-title { margin-top: 8px; font-weight: bold; }


.contact-section { background: #fff; padding: 20px; margin-top: 20px; border-top: 1px solid #eee; }
.contact-links { display: flex; gap: 10px; flex-wrap: wrap; }
.btn { display: inline-block; padding: 8px 12px; background: #0077cc; color: #fff; border-radius: 6px; text-decoration: none; }
.btn.contact-details { background: #444; }


footer { text-align: center; padding: 16px; color: #666; }


@media (max-width: 600px) {
	.welcome-section h1 { font-size: 1.8rem; }
	.projects-grid { gap: 12px; }}