@extends('../main')
@section('content')
@include('../navbar')
<style>

.text-murky-300 {
    --tw-text-opacity: 1;
    color: rgb(157 165 171 / var(--tw-text-opacity));
}

.max-w-4xl	{
    max-width: 56rem; /* 896px */
}
</style>

<main class="relative"> 
         <div class="relative">
        <div class="absolute inset-0 max-h-[9rem] sm:max-h-[11.5rem] md:max-h-[11.5rem] lg:max-h-[14rem]">
            <div class="relative h-full w-full">
                <img
                    alt=""
                    sizes="100vw"
                    srcset="/assets/image/footer.png"
                    src="/assets/image/footer.png"
                    decoding="async"
                    data-nimg="fill"
                    class="object-cover"
                    style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;"
                />
                
                <div class="flex-col w-full h-full flex text-center justify-center">
                    <h1 class="text-[24px] lg:text-[30px] font-semibold leading-8 tracking-[0.2em] text-center">Testimonials</h1>
                    <p class="mt-2 font-bold tracking-tight text-white">Terima kasih untuk semua pelanggan yang memberi kami ulasan dan peringkat.</p>
                </div>
            </div>
        </div>
        <div class="relative mx-auto max-w-7xl py-[5.5rem] lg:py-24 px-4 sm:py-24 sm:px-6 lg:px-8"></div>
    </div>

   
        <div class="container col-lg-11">
            <div class=" mx-auto flow-root sm:mt-20 lg:mx-0 lg:max-w-none" >
                <div class="sm:-mx-4 p-2 grid grid-cols-1 lg:grid-cols-3 gap-3" id="items_container" >
                    @foreach ($ratings as $rating)