.hero-image {
    height: 250px;
    background-image: url('hero-desktop.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

@media (max-width: 768px) {
    .hero-image {
        height: 200px;
        background-image: url('hero-mobile.jpg');
    }
}

.hero-logo {
    position: absolute;
    top: 30px;
    left: 0;
    max-height: 100px;
}

.map-container { height: 400px; margin-top: 1em; }
.navbar-nav .nav-link { color: white !important; }
.hero { background: #f8f9fa; padding: 3rem 0; }
.advantages .card { margin-bottom: 1rem; }
footer { background: #343a40; color: white; padding: 1rem 0; }
#distance, #cost { font-weight: bold; }