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

body {
background: #0f172a;
color: white;
scroll-behavior: smooth;
}

/* Header */

header {
position: fixed;
width: 100%;
display: flex;
justify-content: space-between;
padding: 20px 40px;
backdrop-filter: blur(10px);
background: rgba(15, 23, 42, 0.6);
z-index: 1000;
}

header nav a {
color: white;
text-decoration: none;
margin-left: 25px;
transition: 0.3s;
}

header nav a:hover {
color: #38bdf8;
}

/* Hero */

.hero {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background: linear-gradient(135deg, #0f172a, #1e293b);
animation: fadeIn 2s ease-in-out;
}

.hero-content h1 {
font-size: 5rem;
}

.hero-content p {
font-size: 1.5rem;
margin: 20px 20px;
margin-bottom: 40px;
opacity: 0.8;
}

.btn {
padding: 12px 25px;
background: #38bdf8;
border-radius: 30px;
text-decoration: none;
color: rgb(255, 255, 255);
font-weight: bold;
transition: 0.3s;
}

.btn:hover {
background: white;
}

/* Map */

.map-section {
padding: 100px 40px;
text-align: center;
}

.map-container {
margin-top: 30px;
height: 70vh;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

.map-container iframe {
width: 100%;
height: 100%;
}

/* Info */

.info {
padding: 80px 40px;
background: #1e293b;
text-align: center;
}

/* CTA */

.cta {
padding: 80px 40px;
text-align: center;
}

/* Footer */

footer {
padding: 20px;
text-align: center;
background: #0f172a;
opacity: 0.7;
}

/* Animation */

@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

/* Responsive */

@media(max-width: 768px) {

header {
padding: 15px 20px;
}

.hero-content h1 {
font-size: 2rem;
}

.map-container {
height: 50vh;
}
}