<div>
    <style data-emotion="css 9in2xk">
        .css-9in2xk {
            padding: 3.2rem 1.6rem 2.4rem;
            border-top: 1px solid #B3C3DE;
            background-color: #F5F7FB;
        }

        @media screen and (min-width: 768px) {
            .css-9in2xk {
                padding: 4.8rem 3.2rem 3.2rem;
            }
        }

        @media screen and (min-width: 992px) {
            .css-9in2xk {
                padding: 8rem 3.2rem 3.2rem;
                position: initial;
            }
        }

        @media print {
            .css-9in2xk {
                display: none;
            }
        }
    </style>
    <footer class="searchDetailFilters css-9in2xk">
        <style data-emotion="css 1146vtv">
            .css-1146vtv {
                max-width: 1216px;
                margin: 0 auto;
            }
        </style>
        <nav class="css-1146vtv">
            <style data-emotion="css 55y74h">
                .css-55y74h {
                    display: grid;
                    grid-template-columns: 1fr;
                    grid-gap: 3.2rem;
                }

                @media screen and (min-width: 768px) {
                    .css-55y74h {
                        grid-template-columns: repeat(2, 1fr);
                    }
                }

                @media screen and (min-width: 992px) {
                    .css-55y74h {
                        grid-template-columns: repeat(3, 1fr);
                    }
                }
            </style>
            <div class="css-55y74h" id="footer-content">
                <style data-emotion="css 12yvqoj">
                    .css-12yvqoj {
                        display: -webkit-box;
                        display: -webkit-flex;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-flex-direction: column;
                        -ms-flex-direction: column;
                        flex-direction: column;
                        -webkit-order: 2;
                        -ms-flex-order: 2;
                        order: 2;
                    }

                    @media screen and (min-width: 768px) {
                        .css-12yvqoj {
                            -webkit-flex-direction: row;
                            -ms-flex-direction: row;
                            flex-direction: row;
                            -webkit-box-pack: justify;
                            -webkit-justify-content: space-between;
                            justify-content: space-between;
                            -webkit-align-items: center;
                            -webkit-box-align: center;
                            -ms-flex-align: center;
                            align-items: center;
                            grid-column-start: 1;
                            grid-column-end: 3;
                        }
                    }

                    @media screen and (min-width: 992px) {
                        .css-12yvqoj {
                            -webkit-flex-direction: column;
                            -ms-flex-direction: column;
                            flex-direction: column;
                            -webkit-box-pack: initial;
                            -ms-flex-pack: initial;
                            -webkit-justify-content: initial;
                            justify-content: initial;
                            -webkit-align-items: initial;
                            -webkit-box-align: initial;
                            -ms-flex-align: initial;
                            align-items: initial;
                            -webkit-order: 0;
                            -ms-flex-order: 0;
                            order: 0;
                            grid-column-start: initial;
                            grid-column-end: initial;
                        }
                    }
                </style>
                <div class="css-12yvqoj">
                    <x-logo />

                    <style data-emotion="css jk8x0s">
                        .css-jk8x0s {
                            font-size: 1.4rem;
                            line-height: 2.4rem;
                            color: #63749B;
                        }
                    </style>
                    <div class="css-jk8x0s">
                        <style data-emotion="css 1iczezx">
                            .css-1iczezx {
                                margin-top: 3.2rem;
                                color: #63749B;
                                font-size: 1.4rem;
                                line-height: 2.4rem;
                            }

                            @media screen and (min-width: 768px) {
                                .css-1iczezx {
                                    margin-top: var(--chakra-space-0);
                                }
                            }

                            @media screen and (min-width: 992px) {
                                .css-1iczezx {
                                    margin-top: 4rem;
                                }
                            }
                        </style>
                        <div class="css-1iczezx">
                            {{ config("app.name") }}
                            <!-- -->
                            {{ date('Y') }} •
                            <!-- -->
                            All rights reserved
                        </div>
                    </div>
                </div>
                <style data-emotion="css 134twh9">
                    .css-134twh9 {
                        display: -webkit-box;
                        display: -webkit-flex;
                        display: -ms-flexbox;
                        display: flex;
                        gap: 2.4rem;
                    }

                    @media screen and (min-width: 768px) {
                        .css-134twh9 {
                            gap: 3.2rem;
                        }
                    }
                </style>
                <div class="css-134twh9">
                    <style data-emotion="css 1s0nsnu">
                        .css-1s0nsnu {
                            display: -webkit-box;
                            display: -webkit-flex;
                            display: -ms-flexbox;
                            display: flex;
                            -webkit-flex: 1;
                            -ms-flex: 1;
                            flex: 1;
                            -webkit-flex-direction: column;
                            -ms-flex-direction: column;
                            flex-direction: column;
                            gap: 0.4rem;
                            max-width: calc(50% - 1.2rem);
                        }

                        @media screen and (min-width: 768px) {
                            .css-1s0nsnu {
                                gap: 0.8rem;
                                max-width: calc(50% - 1.6rem);
                            }
                        }
                    </style>
                    <div class="css-1s0nsnu">
                        <style data-emotion="css 10smyx2">
                            .css-10smyx2 {
                                font-family: EuclidCircularB, sans-serif;
                                font-style: normal;
                                margin: var(--chakra-space-0);
                                font-weight: 700;
                                font-size: 1.6rem;
                                line-height: 2.4rem;
                                letter-spacing: -0.02rem;
                                color: #485885;
                                padding-bottom: 1.2rem;
                            }

                            @media screen and (min-width: 768px) {
                                .css-10smyx2 {
                                    padding-bottom: 1.6rem;
                                }
                            }

                            @media screen and (min-width: 992px) {
                                .css-10smyx2 {
                                    font-size: 1.8rem;
                                }
                            }
                        </style>
                        <h6 class="chakra-heading css-10smyx2" role="heading">
                            {{ config('app.name') }}
                        </h6>
                        <style data-emotion="css 1b8u0n8">
                            .css-1b8u0n8 {
                                transition-property: var(--chakra-transition-property-common);
                                transition-duration: var(--chakra-transition-duration-fast);
                                transition-timing-function: var(--chakra-transition-easing-ease-out);
                                cursor: pointer;
                                outline: 2px solid transparent;
                                outline-offset: 2px;
                                color: #3E47DD;
                                font-family: EuclidCircularB, sans-serif;
                                font-style: normal;
                                font-weight: 600;
                                display: block;
                                width: -webkit-fit-content;
                                width: -moz-fit-content;
                                width: fit-content;
                                -webkit-text-decoration: none;
                                text-decoration: none;
                            }

                            .css-1b8u0n8:focus-visible,
                            .css-1b8u0n8[data-focus-visible] {
                                box-shadow: var(--chakra-shadows-outline);
                            }

                            .css-1b8u0n8:hover,
                            .css-1b8u0n8[data-hover] {
                                -webkit-text-decoration: none;
                                text-decoration: none;
                            }
                        </style>
                        <a class="chakra-link css-1b8u0n8" href="{{ route('cars') }}">
                            <style data-emotion="css b4old4">
                                .css-b4old4 {
                                    font-family: EuclidCircularB, sans-serif;
                                    font-style: normal;
                                    color: var(--chakra-colors-gray-600);
                                    font-size: 1.4rem;
                                    line-height: 2.4rem;
                                    font-weight: 400;
                                    letter-spacing: -0.01rem;
                                    cursor: pointer;
                                }

                                @media screen and (min-width: 992px) {
                                    .css-b4old4 {
                                        font-size: 1.6rem;
                                        line-height: 2.8rem;
                                    }
                                }

                                .css-b4old4:hover,
                                .css-b4old4[data-hover] {
                                    font-weight: 600;
                                    color: var(--chakra-colors-gray-800);
                                    -webkit-text-decoration: none;
                                    text-decoration: none;
                                }
                            </style>
                            <p class="chakra-text css-b4old4">
                                Buy
                            </p>
                        </a>
                        <a class="chakra-link css-1b8u0n8" href="{{ route('how-it-works') }}">
                            <p class="chakra-text css-b4old4">
                                How it works
                            </p>
                        </a>
                        <a class="chakra-link css-1b8u0n8" href="https://trustpilot.com">
                            <p class="chakra-text css-b4old4">
                                Reviews
                            </p>
                        </a>
                        <a class="chakra-link css-1b8u0n8" href="{{ route('electric-hybrid-vehicles') }}">
                            <p class="chakra-text css-b4old4">
                                Electric &amp; Hybrid
                            </p>
                        </a>
                    </div>
                    <div class="css-1s0nsnu">
                        <h6 class="chakra-heading css-10smyx2" role="heading">
                            Services
                        </h6>
                        <a class="chakra-link css-1b8u0n8" href="{{ route('caraudit') }}">
                            <p class="chakra-text css-b4old4">
                                CarAudit™
                            </p>
                        </a>
                        <a class="chakra-link css-1b8u0n8" href="{{ route('car-delivery') }}">
                            <p class="chakra-text css-b4old4">
                                Delivery
                            </p>
                        </a>
                        <a class="chakra-link css-1b8u0n8" href="{{ route('car-financing') }}">
                            <p class="chakra-text css-b4old4">
                                Financing
                            </p>
                        </a>
                        <a class="chakra-link css-1b8u0n8" href="{{ route('warranty') }}">
                            <p class="chakra-text css-b4old4">
                                Warranty
                            </p>
                        </a>
                    </div>
                </div>
                <div class="css-134twh9">
                    <div class="css-1s0nsnu">
                        <h6 class="chakra-heading css-10smyx2" role="heading">
                            Company
                        </h6>
                        <a class="chakra-link css-1b8u0n8" href="{{ route('about-us') }}">
                            <p class="chakra-text css-b4old4">
                                About us
                            </p>
                        </a>
                        <a class="chakra-link css-1b8u0n8" href="/#homepage-contact">
                            <p class="chakra-text css-b4old4">
                                Contact
                            </p>
                        </a>
                        <a class="chakra-link css-1b8u0n8" href="{{ route('terms') }}">
                            <p class="chakra-text css-b4old4">
                                Terms of Use
                            </p>
                        </a>
                    </div>
                </div>
            </div>
        </nav>
    </footer>
</div>
