.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
}
.ride-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background-color: #f9f9f9;
    border-radius: 12px;
    padding: 15px;
    border-left: 6px solid #ccc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    transition: background 0.2s ease, transform 0.1s ease;
    margin-bottom: 16px;
}

.ride-card:hover {
    background-color: #eef7ff;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.ride-active {
    border-left-color: #4CAF50;
    background-color: #e8f5e9;
}

.ride-completed {
    border-left-color: #aaa;
    background-color: #f0f0f0;
}

.section-title {
    font-size: 1.5em;
    margin: 30px 0 15px;
    color: #333;
    border-left: 5px solid #4CAF50;
    padding-left: 10px;
}