:root { 
    --primary: #0056b3; 
    --accent: #00a8ff; 
    --dark: #1a1e23; 
    --danger: #d9534f;
    --gray-bg: #f1f5f9;
}

* { box-sizing: border-box; }
body { margin: 0; color: #333; line-height: 1.6; font-family: 'Inter', 'Noto Sans SC', sans-serif; }

/* Navigation */
nav { 
    background: rgba(255,255,255,0.95); 
    padding: 15px 5%; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
    position: sticky; top: 0; z-index: 1000; 
}
.logo { font-size: 1.4rem; color: var(--primary); font-weight: 700; }
.lang-switch { text-decoration: none; color: var(--primary); border: 1px solid var(--primary); padding: 5px 15px; border-radius: 20px; transition: 0.3s; }
.lang-switch:hover { background: var(--primary); color: white; }

/* Hero Section */
.hero { 
    position: relative; 
    background: url('imgs/hero-bg.JPG') no-repeat top center/cover; 
    height: 60vh; 
    display: flex; align-items: center; justify-content: center; 
    color: white; text-align: center; 
}
.hero::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); }
.hero-content { position: relative; z-index: 1; padding: 0 20px; }
.hero h1 { font-size: 3rem; margin: 0; }

/* Main Section & Cards */
.section { padding: 40px 5%; max-width: 1400px; margin: auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 40px; }
.card { background: #f8fafc; padding: 25px; border-radius: 12px; border-top: 5px solid var(--primary); box-shadow: 0 4px 6px rgba(0,0,0,0.05); }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 40px; }
.gallery-item { overflow: hidden; border-radius: 8px; background: #eee; height: 200px; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; cursor: zoom-in; display: block; }
.gallery img:hover { transform: scale(1.1); filter: brightness(1.1); }

/* Emergency & Service Area */
.emergency-bar { background: var(--danger); color: white; padding: 25px; text-align: center; font-weight: bold; border-radius: 8px; margin: 40px 0; }
.emergency-bar a { color: white; text-decoration: none; font-size: 1.8rem; display: block; margin-top: 10px; }

.service-area-container { background: var(--gray-bg); border-radius: 12px; padding: 30px 20px; margin-top: 20px; }
.service-row { display: flex; justify-content: center; gap: 8px; flex-wrap: nowrap; overflow-x: auto; padding: 10px 0; }
.service-tag { flex: 1; min-width: 100px; background: white; padding: 10px 5px; border: 1px solid #cbd5e1; border-radius: 6px; text-align: center; font-size: 0.85rem; white-space: nowrap; }

/* Lightbox */
.lightbox { display: none; position: fixed; z-index: 2000; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.92); justify-content: center; align-items: center; }
.lightbox.active { display: flex; }
.lightbox-content { position: relative; max-width: 90%; max-height: 80%; }
.lightbox img { max-width: 100%; max-height: 80vh; border: 3px solid white; border-radius: 5px; }
.nav-btn { position: absolute; top: 50%; transform: translateY(-50%); color: white; background: none; border: none; font-size: 3rem; cursor: pointer; padding: 20px; }
.prev-btn { left: -80px; }
.next-btn { right: -80px; }
.close-lightbox { position: absolute; top: -50px; right: 0; color: white; font-size: 40px; cursor: pointer; }

footer { text-align: center; padding: 40px; color: #777; border-top: 1px solid #eee; margin-top: 40px; }

.card-link { text-decoration: none; color: inherit; display: block; }
.card-link:hover .card { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); border-top-color: var(--accent); }

@media (max-width: 900px) {
    .prev-btn { left: 10px; }
    .next-btn { right: 10px; }
    .nav-btn { background: rgba(0,0,0,0.3); border-radius: 50%; }
}