* {margin: 0; padding: 0; box-sizing: border-box;}
body {font-family: 'Montserrat', sans-serif; color: #222; background: #fff; line-height: 1.6;}
header {position: fixed; top: 0; width: 100%; background: #fff; padding: 20px 50px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); z-index: 1000;}
header h1 {font-size: 22px; font-weight: 700; color: #0a2a4a; letter-spacing: 2px;}
nav a {margin-left: 25px; text-decoration: none; font-weight: 600; color: #222; transition: color 0.3s;}
nav a:hover {color: #0a2a4a;}

.hero {height: 100vh; background: url('hero_bk.jpg') center/cover no-repeat; display: flex; justify-content: center; align-items: center; text-align: center; padding: 0 20px;}
.hero h2 {color: #fff; font-size: 48px; font-weight: 700; max-width: 800px;}
.hero button {margin-top: 20px; padding: 14px 28px; font-size: 16px; font-weight: 600; border: none; background: #0a2a4a; color: #fff; cursor: pointer; border-radius: 4px; transition: background 0.3s;}
.hero button:hover {background: #143c63;}

section {padding: 80px 50px; max-width: 1200px; margin: auto;}
.services {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; text-align: center;}
.service-card {padding: 20px; border: 1px solid #eee; border-radius: 8px; transition: box-shadow 0.3s;}
.service-card:hover {box-shadow: 0 4px 12px rgba(0,0,0,0.1);}
.service-card h3 {margin: 15px 0 10px; color: #0a2a4a;}

.projects {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;}
.projects img {width: 100%; border-radius: 8px;}

.about-contact {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px;}
.about-contact h3 {margin-bottom: 15px; color: #0a2a4a;}

footer {background: #0a2a4a; color: #fff; text-align: center; padding: 20px; margin-top: 50px;}