* {
margin:0;
padding:0;
box-sizing:border-box;
font-family: 'Segoe UI', sans-serif;
}

body {
background:#fff;
}

/* Loader */
#loader {
position:fixed;
width:100%;
height:100%;
background:#0a1f44;
color:white;
display:flex;
justify-content:center;
align-items:center;
z-index:1000;
}

/* Navbar */
header {
position:sticky;
top:0;
background:#0a1f44;
padding:15px 0;
z-index:999;
}

.navbar {
display:flex;
justify-content:space-between;
width:90%;
margin:auto;
color:white;
}

.nav-links {
list-style:none;
display:flex;
}

.nav-links li {
margin-left:20px;
}

.nav-links a {
color:white;
text-decoration:none;
transition:0.3s;
}

.nav-links a:hover {
color:#00bcd4;
}

/* Hero */
.hero {
height:90vh;
background:url('https://images.unsplash.com/photo-1503387762-592deb58ef4e') center/cover;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
color:white;
}

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

.btn {
padding:10px 20px;
margin:10px;
background:#00bcd4;
color:white;
text-decoration:none;
display:inline-block;
}

.secondary {
background:transparent;
border:1px solid white;
}

/* Sections */
.section {
padding:60px 10%;
text-align:center;
}

.dark {
background:#f0f4f8;
}

/* Grid */
.grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
margin-top:20px;
}

.card {
padding:20px;
background:white;
box-shadow:0 5px 10px rgba(0,0,0,0.1);
transition:0.3s;
}

.card:hover {
transform:translateY(-5px);
}

/* Portfolio */
.portfolio-item {
padding:40px;
background:#ddd;
transition:0.3s;
}

.portfolio-item:hover {
background:#00bcd4;
color:white;
}

/* About */
.about-grid {
display:flex;
gap:20px;
margin-top:20px;
flex-wrap:wrap;
}

/* Contact */
.contact-form {
display:flex;
flex-direction:column;
width:300px;
margin:auto;
}

.contact-form input,
.contact-form textarea {
margin:10px 0;
padding:10px;
}

button {
padding:10px;
background:#0a1f44;
color:white;
border:none;
}

/* Map */
.map iframe {
width:100%;
height:300px;
margin-top:20px;
}

/* Footer */
footer {
background:#0a1f44;
color:white;
padding:20px;
text-align:center;
}

.socials a {
color:white;
margin:0 10px;
text-decoration:none;
}

/* Responsive */
@media(max-width:768px){
.hero h1 {
font-size:1.8rem;
}
}