.hero-truck {
    background: linear-gradient(135deg, rgba(15, 52, 96, 0.92) 0%, rgba(10, 37, 64, 0.95) 100%),
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600'%3E%3Cdefs%3E%3ClinearGradient id='road' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%231A4A7A'/%3E%3Cstop offset='100%25' stop-color='%230F3460'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23road)' width='1200' height='600'/%3E%3Cpath d='M0 450 Q300 420 600 450 Q900 480 1200 430 L1200 600 L0 600 Z' fill='%230A2540'/%3E%3Crect x='100' y='200' width='200' height='100' fill='%23E6B325' opacity='0.15' rx='4'/%3E%3Crect x='400' y='180' width='250' height='120' fill='%23E6B325' opacity='0.2' rx='4'/%3E%3Crect x='750' y='200' width='180' height='90' fill='%23E6B325' opacity='0.12' rx='4'/%3E%3Cpath d='M200 280 L280 250 L280 310 L200 280 Z' fill='%23E6B325' opacity='0.1'/%3E%3Cpath d='M500 260 L580 230 L580 290 L500 260 Z' fill='%23E6B325' opacity='0.08'/%3E%3Cpath d='M900 280 L980 250 L980 310 L900 280 Z' fill='%23E6B325' opacity='0.1'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    min-height: calc(100vh - 60px);
}

.city-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.city-card:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.city-card:hover img {
    transform: scale(1.1);
}

.service-card {
    box-shadow: 0 2px 8px rgba(15, 52, 96, 0.06);
}

.service-card:hover {
    box-shadow: 0 4px 12px rgba(15, 52, 96, 0.1);
}

.vehicle-card {
    box-shadow: 0 2px 8px rgba(15, 52, 96, 0.06);
}

.vehicle-card:hover {
    box-shadow: 0 4px 16px rgba(15, 52, 96, 0.12);
}

.vehicle-card:hover .vehicle-img svg {
    transform: scale(1.03);
    transition: transform 0.3s ease;
}

.vehicle-img svg {
    transition: transform 0.3s ease;
}

.advantage-item:hover svg {
    color: #C99A1E;
    transition: color 0.3s ease;
}

.advantage-item svg {
    transition: color 0.3s ease;
}

@media (max-width: 768px) {
    .hero-truck {
        min-height: auto;
        padding-top: 80px;
        padding-bottom: 40px;
    }
    
    .service-card,
    .vehicle-card {
        margin-bottom: 20px;
    }
    
    .advantage-item {
        margin-bottom: 30px;
    }
}