/* Fix card alignment in fleet capabilities section */
.cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
}
.cards-grid .card {
    flex: 0 1 340px;
    width: 340px;
    max-width: 340px;
}
@media (max-width: 768px) {
    .cards-grid .card {
        flex: 0 1 100%;
        width: 100%;
        max-width: 400px;
    }
}
        :root {
            --brand-primary: #0F63B0;
            --brand-dark: #094682;
            --brand-light: #E6F0FA;
            --brand-light-text: #D1E8FF;
            --accent: #F59E0B;
            --neutral: #4B5563;
            --white: #FFFFFF;
            --gray-light: #E5E7EB;
            --gray-medium: #9CA3AF;
            --gray-dark: #374151;
            --success: #10B981;
            --error: #EF4444;
            --warning: #F59E0B;
            --info: #3B82F6;
            --space-4: 4px;
            --space-8: 8px;
            --space-12: 12px;
            --space-16: 16px;
            --space-24: 24px;
            --space-32: 32px;
            --space-48: 48px;
            --space-64: 64px;
            --radius-small: 4px;
            --radius-medium: 8px;
            --radius-large: 12px;
            --radius-full: 9999px;
            --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
            --shadow-md: 0 4px 8px rgba(0,0,0,0.1);
            --shadow-lg: 0 8px 16px rgba(0,0,0,0.15);
            --transition-fast: 150ms ease;
            --transition-normal: 300ms ease;
        }
        .bg-brand-primary { background-color: var(--brand-primary); }
        .bg-brand-dark { background-color: var(--brand-dark); }
        .bg-brand-light { background-color: var(--brand-light); }
        .text-brand-primary { color: var(--brand-primary); }
        .text-brand-dark { color: var(--brand-dark); }
        .text-brand-light-text { color: var(--brand-light-text); }
        .text-accent { color: var(--accent); }
        .border-brand-primary { border-color: var(--brand-primary); }
        .bg-accent { background-color: var(--accent); }
        .border-accent { border-color: var(--accent); }
        .rounded-full { border-radius: var(--radius-full); }
        .hero-underline { position: relative; }
        .hero-underline:after { content: ""; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 32px; height: 4px; background-color: var(--accent); }
        .mystic-card { transition: transform 300ms ease, box-shadow 300ms ease; display: block; will-change: transform; position: relative; z-index: 1; }
        .mystic-card:hover { transform: translateY(-8px) !important; box-shadow: 0 12px 24px rgba(0,0,0,0.2); z-index: 10; }
        a.mystic-card:hover { transform: translateY(-8px) !important; box-shadow: 0 12px 24px rgba(0,0,0,0.2); z-index: 10; }
        .cards-grid .mystic-card:hover { transform: translateY(-8px) !important; box-shadow: 0 12px 24px rgba(0,0,0,0.2); z-index: 10; }
        @media (max-width: 767px) {
            .mobile-h1 { font-size: 32px; line-height: 40px; }
            .mobile-h2 { font-size: 28px; line-height: 36px; }
            .mobile-h3 { font-size: 24px; line-height: 32px; }
        }
        .hero-badge {
            background-color: rgba(15, 99, 176, 0.9);
            backdrop-filter: blur(4px);
            border-radius: var(--radius-full);
            padding: 8px 16px;
            display: inline-flex;
            align-items: center;
            box-shadow: var(--shadow-md);
        }
        .hero-truck {
            animation: truck-move 20s infinite linear;
            transform-origin: center;
        }
        .hero-pulse {
            animation: pulse 2s infinite;
        }
        .hero-stat-item {
            backdrop-filter: blur(4px);
            transition: all 150ms ease;
        }
        .hero-stat-item:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
        }
        .hero-blob {
            position: absolute;
            border-radius: 50%;
            filter: blur(50px);
            z-index: -1;
            opacity: 0.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-primary) 100%);
            position: relative;
            overflow: hidden;
        }
        @media (max-width: 767px) {
            .hero-responsive-spacing {
                margin-bottom: 2rem;
            }
            .hero-image-container {
                padding: 0 1rem;
            }
            .hero-content-spacing {
                margin-bottom: 3rem;
            }
        }
        @media (max-width: 480px) {
            .hero-responsive-spacing {
                margin-bottom: 1.5rem;
            }
            .hero-image-container {
                padding: 0 0.5rem;
            }
        }
        .parallax-element {
            will-change: transform;
            transition: transform 0.2s ease-out;
        }
        .premier-underline {
            position: relative;
            display: inline-block;
        }
        .premier-underline::after {
            content: "";
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 100%;
            height: 4px;
            background-color: var(--accent);
            border-radius: 2px;
        }
        .min-w-300 {
            min-width: 300px;
        }
        .max-w-400 {
            max-width: 400px;
        }
        .service-area-map {
            position: relative;
            transition: all 0.3s ease;
        }
        .service-area-item {
            transition: all 0.3s ease;
        }
        .service-area-item:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
        }
        .service-area-item:hover .service-area-icon {
            background-color: var(--accent);
            color: white;
        }
        .service-area-icon {
            transition: all 0.3s ease;
        }
        .service-area-badge {
            position: absolute;
            top: -10px;
            right: -10px;
            z-index: 10;
        }
        @keyframes truck-move {
            0% { transform: translateX(-5px); }
            50% { transform: translateX(5px); }
            100% { transform: translateX(-5px); }
        }
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        .safety-cert-wrap img {
            max-height: 420px;
            width: auto;
            display: block;
            margin: 0 auto;
            border-radius: 16px;
        }
        #map {
            height: 400px;
            width: 100%;
            position: relative;
            z-index: 1;
            min-height: 300px;
        }
        @media (max-width: 767px) {
            #map {
                height: 350px;
                min-height: 300px;
                width: 100%;
            }
            .service-area-map {
                width: 100%;
            }
        }