/* Rent Vehicle Page Styles */
        :root {
            --primary: #2a52be;
            --primary-color: #2563eb;
            --secondary-color: #64748b;
            --accent-color: #f97316;
            --success-color: #22c55e;
            --card-shadow: 0 10px 30px rgba(0,0,0,0.08);
            --card-hover-shadow: 0 15px 40px rgba(0,0,0,0.15);
            --card-border-radius: 16px;
            --transition: all 0.3s ease;
        }
        body{
            font-family: 'Inter', sans-serif;
            background: url(https://portal.hef.co.ke/assets/app-assets/images/patterns/bg06.png);
            background-repeat: repeat;
        }
        .container-fluid{
            margin-right: 10px;
            margin-left: 10px;
        }
        /* Modern Card Design */
        .vehicle-card {
            border: none;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
            height: 100%;
        }
        .vehicle-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.15);
        }
        .card-img-container {
            height: 220px;
            overflow: hidden;
            position: relative;
        }
        .card-img-top {
            height: 100%;
            width: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        .vehicle-card:hover .card-img-top {
            transform: scale(1.05);
        }
        .badge-container {
            position: absolute;
            top: 15px;
            right: 15px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .card-badge {
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .price-tag {
            position: absolute;
            bottom: 15px;
            left: 15px;
            background: linear-gradient(135deg, #0d6efd, #0b5ed7);
            color: white;
            padding: 8px 15px;
            border-radius: 20px;
            font-weight: 600;
            box-shadow: 0 4px 10px rgba(13, 110, 253, 0.3);
        }
        
        /* Modern Pagination */
        .pagination .page-item .page-link {
            border: none;
            color: #495057;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 5px;
            transition: all 0.3s;
        }
        .pagination .page-item.active .page-link {
            background: linear-gradient(135deg, #0d6efd, #0b5ed7);
            color: white;
            box-shadow: 0 5px 10px rgba(13, 110, 253, 0.2);
        }
        .pagination .page-item:not(.active):hover .page-link {
            background-color: #e9ecef;
            transform: translateY(-3px);
        }
        
        /* Featured Fleets Section */
        .featured-fleets {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }
        .fleet-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            transition: transform 0.15s, box-shadow 0.15s;
            height: 100%;
        }
        .fleet-card:hover {
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 8px 24px rgba(0,0,0,0.08);
        }
        .fleet-logo {
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 15px;
            background: white;
        }

        .fleet-logo img {
            max-height: 60px;
            max-width: 100%;
            object-fit: contain;
        }
        .fleet-body {
            padding: 20px;
            text-align: center;
        }
        .fleet-stats {
            display: flex;
            justify-content: space-around;
            padding: 15px;
            background: #f8f9fa;
            border-top: 1px solid #eee;
        }
        .stat-item {
            text-align: center;
        }
        .stat-value {
            font-weight: 700;
            color: #0d6efd;
            font-size: 1.1rem;
        }
        .stat-label {
            font-size: 0.8rem;
            color: #6c757d;
        }
        
        /* Filter Section */
        .filter-section {
            background-color: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }