@props(['clients'])

        <div>
        <style>
            .owl-stage-outer{
                padding-top: 20px;
                padding-bottom: 20px;
            }
        </style>
        <section class="py-8 bg-gray-50" wire:ignore>
            <div class="container mx-auto px-6 md:px-14">
                <p class="text-center text-gray-600 mb-6" data-aos="fade-up" data-aos-duration="2000">Trusted by</p>
                <div class=" owl-carousel" data-aos="fade-up"
                    data-aos-duration="2000">
                    @foreach ($clients as $client)
                        <div class="client-logo w-32 sm:w-40 h-20 flex items-center justify-center">
                            <div class="w-10 flex items-center justify-center" style="width:{{ $client->logo_width }}px">
                                <img src="{{ asset('storage/uploads/' . $client->company_logo) }}" alt="logo">
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

    </div>