@extends('layouts.layout')

@section('content')
    <div
        class="w-full px-4 lg:flex hidden justify-center bg-[white] z-40 border-b-[2px] border-primaryColor fixed top-28 ">
        <x-category-list/>
    </div>
    <div class="lg:pt-44 pt-32 w-full flex justify-center py-4">
        <div class="lg:w-[80%] w-full flex flex-col">
            <div class="flex flex-wrap justify-between items-center mx-auto w-full relative">
                <div class="flex flex-wrap w-full">
                    <div class="w-full">
                        <div class="flex flex-wrap m-0 p-[15px] border-[1px] border-solid border-[#eee] rounded-b-[5px] border-t-[0] gi_breadcrumb_inner">
                            <div class="w-full px-4">
                                <div class="flex gap-2 text-xs ">
                                    <a href="{{route('home')}}"><i class="fa fa-home"></i></a>
                                    <p>/</p>
                                    <a href="{{route('home')}}" class="text-secondaryColor">
                                        Digital Marketing
                                    </a>
                                </div>
                                <h2 class="gi-breadcrumb-title text-primaryColor block lg:text-3xl md:text-3xl sm:text-2xl text-xl font-Poppins font-semibold my-[0] mx-auto capitalize mt-4">
                                    Search Engine Optimization (SEO)
                                </h2>
                                <p class="font-semibold text-sm text-secondaryColor">
                                   Rank high in search engines and get more visitors with SEO.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-4 w-full flex justify-center px-4">
        <div class="lg:w-[80%] w-full flex flex-col ">
         <div class="w-full grid lg:grid-cols-7 md:grid-cols-5 sm:grid-cols-3 grid-cols-2 gap-4">
             
                @foreach($categories as $category)
                     <div class="gi-cat-box transition-all duration-[0.3s] ease-in-out p-[15px] rounded-[5px] relative bg-primaryColor/20">
                         <div class="gi-cat-icon h-full p-[15px] flex flex-col items-center justify-center bg-primaryColor/30 relative rounded-[5px] z-[5]">

                                <i class="{{$category['icon']}} text-xl text-white"></i>
                             <div class="gi-cat-detail text-center">
                                 <a href="shop-left-sidebar-col-3.html">
                                     <h4 class="gi-cat-title m-[0] text-[15px] leading-[22px] font-semibold text-gray-100 capitalize font-manrope">
                                            {{$category['title']}}
                                     </h4>
                                 </a>

                             </div>
                         </div>
                     </div>
                @endforeach


         </div>

        </div>
    </div>
    <div class="mt-4 w-full flex justify-center px-4">
        <div class="lg:w-[80%] w-full flex flex-col ">
            <div class="gi-pro-list-top flex items-center justify-between text-[14px] border-[1px] border-solid border-[#eee] rounded-[5px] mb-[30px]">
                <div class="min-[768px]:w-[50%] w-full gi-grid-list">
                    <div class="gi-gl-btn ml-[5px] flex items-center flex-row gap-2">
                        <button type="button" class="grid-btn filter-toggle-icon  hover:bg-primaryColor text-primaryColor hover:text-white  h-[40px] w-[40px] border-[0] rounded-[0] flex items-center justify-center flex-row transition ease-in duration-2000">
                            <i class="fa fa-filter text-[20px]  leading-[0]"></i>
                        </button>
                        <button type="button" class="grid-btn btn-grid-50 h-[40px] bg-primaryColor hover:bg-primaryColor text-white hover:text-white w-[40px] border-[0] rounded-[0] flex items-center justify-center flex-row transition ease-in duration-2000">
                            <i class="fa fa-bars text-[20px]  leading-[0]"></i>
                        </button>
                        <button type="button" class="grid-btn btn-list-50 h-[40px] hover:bg-primaryColor text-primaryColor hover:text-white  w-[40px] border-[0] rounded-[0] flex items-center justify-center flex-row transition ease-in duration-2000">
                            <i class="fa fa-list text-[20px]  leading-[0]"></i>
                        </button>
                    </div>
                </div>
                <div class="min-[768px]:w-[50%] w-full gi-sort-select flex justify-end items-center">
                    <div class="gi-select-inner relative flex w-[140px] h-[50px] leading-[1.5] bg-[#fff] overflow-hidden rounded-[0] border-l-[1px] border-solid border-[#eee]">
                        <select name="gi-select" id="gi-select" class="appearance-none outline-[0] border-[0] bg-[#fff] grow-[1] px-[10px] text-primaryColor cursor-pointer">
                            <option selected="" disabled="">Sort by</option>
                            <option value="1">Position</option>
                            <option value="2">Relevance</option>
                            <option value="3">Name, A to Z</option>
                            <option value="4">Name, Z to A</option>
                            <option value="5">Price, low to high</option>
                            <option value="6">Price, high to low</option>
                        </select>
                    </div>
                </div>
            </div>


            <div class="gi-select-bar mt-[-5px] mx-[-5px] mb-[25px] flex flex-wrap justify-end ">

                <div class="gi-select-inner relative flex w-[140px] h-[50px] leading-[1.5] bg-[#fff] overflow-hidden rounded-[0] border-l-[1px] border-solid border-[#eee]">
                    <select name="gi-select" id="gi-select" class="appearance-none outline-[0] border-[0] bg-[#fff] grow-[1] px-[10px] text-primaryColor cursor-pointer">
                        <option selected="" disabled="">Service Options</option>
                        <option value="1">Position</option>
                        <option value="2">Relevance</option>
                        <option value="3">Name, A to Z</option>
                        <option value="4">Name, Z to A</option>
                        <option value="5">Price, low to high</option>
                        <option value="6">Price, high to low</option>
                    </select>
                </div>
                <div class="gi-select-inner relative flex w-[140px] h-[50px] leading-[1.5] bg-[#fff] overflow-hidden rounded-[0] border-l-[1px] border-solid border-[#eee]">
                    <select name="gi-select" id="gi-select" class="appearance-none outline-[0] border-[0] bg-[#fff] grow-[1] px-[10px] text-primaryColor cursor-pointer">
                        <option selected="" disabled="">Seller Details</option>
                        <option value="1">Top Rated Seller</option>
                        <option value="1">Level 1</option>
                        <option value="2">Level 2</option>
                        <option value="3">New Seller</option>
                        <option value="3">Online </option>
                        <option value="3">Offline</option>
                        <option value="3">Hindi </option>
                        <option value="3">English</option>

                    </select>
                </div>
                <div class="gi-select-inner relative flex w-[140px] h-[50px] leading-[1.5] bg-[#fff] overflow-hidden rounded-[0] border-l-[1px] border-solid border-[#eee]">
                    <select name="gi-select" id="gi-select" class="appearance-none outline-[0] border-[0] bg-[#fff] grow-[1] px-[10px] text-primaryColor cursor-pointer">
                        <option selected="" disabled="">Delivery Time</option>
                        <option value="1">Under 1 day</option>
                        <option value="1">1 - 2 days</option>
                        <option value="2">2 - 3 days</option>
                        <option value="3">3 - 7 days</option>


                    </select>
                </div>

                <div class="gi-select-inner relative flex w-[140px] h-[50px] leading-[1.5] bg-[#fff] overflow-hidden rounded-[0] border-l-[1px] border-solid border-[#eee]">
                    <select name="gi-select" id="gi-select" class="appearance-none outline-[0] border-[0] bg-[#fff] grow-[1] px-[10px] text-primaryColor cursor-pointer">
                        <option selected="" disabled="">Budget</option>
                        <option value="1">Under 5000</option>
                        <option value="1">5000 - 10000</option>
                        <option value="2">10000 - 20000</option>
                        <option value="3">20000 - 50000</option>
                        <option value="3">50000 - above</option>

                    </select>
                </div>
                <button
                    class="font-bold text-white bg-primaryColor border-[1px] border-primaryColor hover:text-primaryColor hover:bg-white/90 px-4 py-2 rounded-full transition ease-in duration-2000"
                    style="font: 600 15px / 25px 'Inter', sans-serif;">
                    Clear All
                </button>
            </div>


        </div>
    </div>
    <div class="mt-4 w-full flex justify-center px-4">
        <div class="lg:w-[80%] w-full flex flex-col ">
            <div class="grid lg:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-2">
                <div class="blog-info transition-all duration-[0.3s] ease-in-out w-full mb-[24px] bg-white shadow-lg shadow-secondaryColor/20 rounded-[5px] hover:shadow-secondaryColor/60">
                    <figure class="blog-img w-full h-auto m-[0] relative overflow-hidden rounded-t-lg">
                        <div class=" h-8 w-8 flex justify-center items-center absolute top-2 right-2 rounded-full bg-white text-primaryColor hover:text-white hover:bg-primaryColor  transition ease-in duration-2000 shadow-lg shadow-secondaryColor">
                               <i class="fa fa-heart"></i>
                        </div>
                        <a href="{{route('job-detail')}}">
                            <img src="{{asset('assets/images/job1.jpg')}}" alt="news imag" class="transition-all duration-[0.3s] ease-in-out rounded-t-lg w-full h-full">
                        </a>
                    </figure>

                    <div class="detail px-2 border-[2px] border-t-[0px] border-primaryColor/30 rounded-b-lg" style="  box-shadow: 0px 0px 5px 1px rgba(141,27,27,0.48) inset;">
                        <div class="w-full flex justify-between">
                            <label class="mt-[20px] flex items-center gap-2 inline-block text-[13px] text-[#999]">
                                <img class="h-8 w-8 rounded-full" src="{{asset('assets/images/u1.jpg')}}" alt="">
                                <a href="#" class="text-black font-semibold text-[16px]">Michle</a>
                            </label>

                        </div>



                        <h3 class="mt-[10px] mb-[15px] ">
                            <a href="{{route('job-detail')}}" class="font-Poppins text-primaryColor hover:underline text-[18px] font-medium leading-[22px]">
                                I will do high quality SEO backlink link building off page service for google ranking
                            </a>
                        </h3>
                        <div class="w-full ">
                             <span class="font-semibold text-md"><i class="fa fa-star"></i> 4.9</span> <span class="font-normal text-sm">(478)</span>
                        </div>

                        <div class="more-info mb-4 rounded-b-lg">
                           <span class="font-semibold text-primaryColor text-lg">From ₹15,000</span>
                        </div>
                    </div>
                </div>
                <div class="blog-info transition-all duration-[0.3s] ease-in-out w-full mb-[24px] bg-white shadow-lg shadow-secondaryColor/20 rounded-[5px] hover:shadow-secondaryColor/60">
                    <figure class="blog-img w-full h-auto m-[0] relative overflow-hidden rounded-t-lg">
                        <div class=" h-8 w-8 flex justify-center items-center absolute top-2 right-2 rounded-full bg-white text-primaryColor hover:text-white hover:bg-primaryColor  transition ease-in duration-2000 shadow-lg shadow-secondaryColor">
                               <i class="fa fa-heart"></i>
                        </div>
                        <a href="{{route('job-detail')}}">
                            <img src="{{asset('assets/images/job2.jpg')}}" alt="news imag" class="transition-all duration-[0.3s] ease-in-out rounded-t-lg w-full h-full">
                        </a>
                    </figure>

                    <div class="detail px-2 border-[2px] border-t-[0px] border-primaryColor/30 rounded-b-lg" style="  box-shadow: 0px 0px 5px 1px rgba(141,27,27,0.48) inset;">
                        <div class="w-full flex justify-between">
                            <label class="mt-[20px] flex items-center gap-2 inline-block text-[13px] text-[#999]">
                                <img class="h-8 w-8 rounded-full" src="{{asset('assets/images/u1.jpg')}}" alt="">
                                <a href="#" class="text-black font-semibold text-[16px]">Michle</a>
                            </label>

                        </div>



                        <h3 class="mt-[10px] mb-[15px] ">
                            <a href="{{route('job-detail')}}" class="font-Poppins text-primaryColor hover:underline text-[18px] font-medium leading-[22px]">
                                I will do high quality SEO backlink link building off page service for google ranking
                            </a>
                        </h3>
                        <div class="w-full ">
                             <span class="font-semibold text-md"><i class="fa fa-star"></i> 4.9</span> <span class="font-normal text-sm">(478)</span>
                        </div>

                        <div class="more-info mb-4 rounded-b-lg">
                           <span class="font-semibold text-primaryColor text-lg">From ₹15,000</span>
                        </div>
                    </div>
                </div>
                <div class="blog-info transition-all duration-[0.3s] ease-in-out w-full mb-[24px] bg-white shadow-lg shadow-secondaryColor/20 rounded-[5px] hover:shadow-secondaryColor/60">
                    <figure class="blog-img w-full h-auto m-[0] relative overflow-hidden rounded-t-lg">
                        <div class=" h-8 w-8 flex justify-center items-center absolute top-2 right-2 rounded-full bg-white text-primaryColor hover:text-white hover:bg-primaryColor  transition ease-in duration-2000 shadow-lg shadow-secondaryColor">
                            <i class="fa fa-heart"></i>
                        </div>
                        <a href="{{route('job-detail')}}">
                            <img src="{{asset('assets/images/job1.jpg')}}" alt="news imag" class="transition-all duration-[0.3s] ease-in-out rounded-t-lg w-full h-full">
                        </a>
                    </figure>

                    <div class="detail px-2 border-[2px] border-t-[0px] border-primaryColor/30 rounded-b-lg" style="  box-shadow: 0px 0px 5px 1px rgba(141,27,27,0.48) inset;">
                        <div class="w-full flex justify-between">
                            <label class="mt-[20px] flex items-center gap-2 inline-block text-[13px] text-[#999]">
                                <img class="h-8 w-8 rounded-full" src="{{asset('assets/images/u1.jpg')}}" alt="">
                                <a href="#" class="text-black font-semibold text-[16px]">Michle</a>
                            </label>

                        </div>



                        <h3 class="mt-[10px] mb-[15px] ">
                            <a href="{{route('job-detail')}}" class="font-Poppins text-primaryColor hover:underline text-[18px] font-medium leading-[22px]">
                                I will do high quality SEO backlink link building off page service for google ranking
                            </a>
                        </h3>
                        <div class="w-full ">
                            <span class="font-semibold text-md"><i class="fa fa-star"></i> 4.9</span> <span class="font-normal text-sm">(478)</span>
                        </div>

                        <div class="more-info mb-4 rounded-b-lg">
                            <span class="font-semibold text-primaryColor text-lg">From ₹15,000</span>
                        </div>
                    </div>
                </div>
                <div class="blog-info transition-all duration-[0.3s] ease-in-out w-full mb-[24px] bg-white shadow-lg shadow-secondaryColor/20 rounded-[5px] hover:shadow-secondaryColor/60">
                    <figure class="blog-img w-full h-auto m-[0] relative overflow-hidden rounded-t-lg">
                        <div class=" h-8 w-8 flex justify-center items-center absolute top-2 right-2 rounded-full bg-white text-primaryColor hover:text-white hover:bg-primaryColor  transition ease-in duration-2000 shadow-lg shadow-secondaryColor">
                            <i class="fa fa-heart"></i>
                        </div>
                        <a href="{{route('job-detail')}}">
                            <img src="{{asset('assets/images/job2.jpg')}}" alt="news imag" class="transition-all duration-[0.3s] ease-in-out rounded-t-lg w-full h-full">
                        </a>
                    </figure>

                    <div class="detail px-2 border-[2px] border-t-[0px] border-primaryColor/30 rounded-b-lg" style="  box-shadow: 0px 0px 5px 1px rgba(141,27,27,0.48) inset;">
                        <div class="w-full flex justify-between">
                            <label class="mt-[20px] flex items-center gap-2 inline-block text-[13px] text-[#999]">
                                <img class="h-8 w-8 rounded-full" src="{{asset('assets/images/u1.jpg')}}" alt="">
                                <a href="#" class="text-black font-semibold text-[16px]">Michle</a>
                            </label>

                        </div>



                        <h3 class="mt-[10px] mb-[15px] ">
                            <a href="{{route('job-detail')}}" class="font-Poppins text-primaryColor hover:underline text-[18px] font-medium leading-[22px]">
                                I will do high quality SEO backlink link building off page service for google ranking
                            </a>
                        </h3>
                        <div class="w-full ">
                            <span class="font-semibold text-md"><i class="fa fa-star"></i> 4.9</span> <span class="font-normal text-sm">(478)</span>
                        </div>

                        <div class="more-info mb-4 rounded-b-lg">
                            <span class="font-semibold text-primaryColor text-lg">From ₹15,000</span>
                        </div>
                    </div>
                </div>
                <div class="blog-info transition-all duration-[0.3s] ease-in-out w-full mb-[24px] bg-white shadow-lg shadow-secondaryColor/20 rounded-[5px] hover:shadow-secondaryColor/60">
                    <figure class="blog-img w-full h-auto m-[0] relative overflow-hidden rounded-t-lg">
                        <div class=" h-8 w-8 flex justify-center items-center absolute top-2 right-2 rounded-full bg-white text-primaryColor hover:text-white hover:bg-primaryColor  transition ease-in duration-2000 shadow-lg shadow-secondaryColor">
                            <i class="fa fa-heart"></i>
                        </div>
                        <a href="{{route('job-detail')}}">
                            <img src="{{asset('assets/images/job1.jpg')}}" alt="news imag" class="transition-all duration-[0.3s] ease-in-out rounded-t-lg w-full h-full">
                        </a>
                    </figure>

                    <div class="detail px-2 border-[2px] border-t-[0px] border-primaryColor/30 rounded-b-lg" style="  box-shadow: 0px 0px 5px 1px rgba(141,27,27,0.48) inset;">
                        <div class="w-full flex justify-between">
                            <label class="mt-[20px] flex items-center gap-2 inline-block text-[13px] text-[#999]">
                                <img class="h-8 w-8 rounded-full" src="{{asset('assets/images/u1.jpg')}}" alt="">
                                <a href="#" class="text-black font-semibold text-[16px]">Michle</a>
                            </label>

                        </div>



                        <h3 class="mt-[10px] mb-[15px] ">
                            <a href="{{route('job-detail')}}" class="font-Poppins text-primaryColor hover:underline text-[18px] font-medium leading-[22px]">
                                I will do high quality SEO backlink link building off page service for google ranking
                            </a>
                        </h3>
                        <div class="w-full ">
                            <span class="font-semibold text-md"><i class="fa fa-star"></i> 4.9</span> <span class="font-normal text-sm">(478)</span>
                        </div>

                        <div class="more-info mb-4 rounded-b-lg">
                            <span class="font-semibold text-primaryColor text-lg">From ₹15,000</span>
                        </div>
                    </div>
                </div>
                <div class="blog-info transition-all duration-[0.3s] ease-in-out w-full mb-[24px] bg-white shadow-lg shadow-secondaryColor/20 rounded-[5px] hover:shadow-secondaryColor/60">
                    <figure class="blog-img w-full h-auto m-[0] relative overflow-hidden rounded-t-lg">
                        <div class=" h-8 w-8 flex justify-center items-center absolute top-2 right-2 rounded-full bg-white text-primaryColor hover:text-white hover:bg-primaryColor  transition ease-in duration-2000 shadow-lg shadow-secondaryColor">
                            <i class="fa fa-heart"></i>
                        </div>
                        <a href="{{route('job-detail')}}">
                            <img src="{{asset('assets/images/job1.jpg')}}" alt="news imag" class="transition-all duration-[0.3s] ease-in-out rounded-t-lg w-full h-full">
                        </a>
                    </figure>

                    <div class="detail px-2 border-[2px] border-t-[0px] border-primaryColor/30 rounded-b-lg" style="  box-shadow: 0px 0px 5px 1px rgba(141,27,27,0.48) inset;">
                        <div class="w-full flex justify-between">
                            <label class="mt-[20px] flex items-center gap-2 inline-block text-[13px] text-[#999]">
                                <img class="h-8 w-8 rounded-full" src="{{asset('assets/images/u1.jpg')}}" alt="">
                                <a href="#" class="text-black font-semibold text-[16px]">Michle</a>
                            </label>

                        </div>



                        <h3 class="mt-[10px] mb-[15px] ">
                            <a href="{{route('job-detail')}}" class="font-Poppins text-primaryColor hover:underline text-[18px] font-medium leading-[22px]">
                                I will do high quality SEO backlink link building off page service for google ranking
                            </a>
                        </h3>
                        <div class="w-full ">
                            <span class="font-semibold text-md"><i class="fa fa-star"></i> 4.9</span> <span class="font-normal text-sm">(478)</span>
                        </div>

                        <div class="more-info mb-4 rounded-b-lg">
                            <span class="font-semibold text-primaryColor text-lg">From ₹15,000</span>
                        </div>
                    </div>
                </div>
                <div class="blog-info transition-all duration-[0.3s] ease-in-out w-full mb-[24px] bg-white shadow-lg shadow-secondaryColor/20 rounded-[5px] hover:shadow-secondaryColor/60">
                    <figure class="blog-img w-full h-auto m-[0] relative overflow-hidden rounded-t-lg">
                        <div class=" h-8 w-8 flex justify-center items-center absolute top-2 right-2 rounded-full bg-white text-primaryColor hover:text-white hover:bg-primaryColor  transition ease-in duration-2000 shadow-lg shadow-secondaryColor">
                            <i class="fa fa-heart"></i>
                        </div>
                        <a href="{{route('job-detail')}}">
                            <img src="{{asset('assets/images/job2.jpg')}}" alt="news imag" class="transition-all duration-[0.3s] ease-in-out rounded-t-lg w-full h-full">
                        </a>
                    </figure>

                    <div class="detail px-2 border-[2px] border-t-[0px] border-primaryColor/30 rounded-b-lg" style="  box-shadow: 0px 0px 5px 1px rgba(141,27,27,0.48) inset;">
                        <div class="w-full flex justify-between">
                            <label class="mt-[20px] flex items-center gap-2 inline-block text-[13px] text-[#999]">
                                <img class="h-8 w-8 rounded-full" src="{{asset('assets/images/u1.jpg')}}" alt="">
                                <a href="#" class="text-black font-semibold text-[16px]">Michle</a>
                            </label>

                        </div>



                        <h3 class="mt-[10px] mb-[15px] ">
                            <a href="{{route('job-detail')}}" class="font-Poppins text-primaryColor hover:underline text-[18px] font-medium leading-[22px]">
                                I will do high quality SEO backlink link building off page service for google ranking
                            </a>
                        </h3>
                        <div class="w-full ">
                            <span class="font-semibold text-md"><i class="fa fa-star"></i> 4.9</span> <span class="font-normal text-sm">(478)</span>
                        </div>

                        <div class="more-info mb-4 rounded-b-lg">
                            <span class="font-semibold text-primaryColor text-lg">From ₹15,000</span>
                        </div>
                    </div>
                </div>
                <div class="blog-info transition-all duration-[0.3s] ease-in-out w-full mb-[24px] bg-white shadow-lg shadow-secondaryColor/20 rounded-[5px] hover:shadow-secondaryColor/60">
                    <figure class="blog-img w-full h-auto m-[0] relative overflow-hidden rounded-t-lg">
                        <div class=" h-8 w-8 flex justify-center items-center absolute top-2 right-2 rounded-full bg-white text-primaryColor hover:text-white hover:bg-primaryColor  transition ease-in duration-2000 shadow-lg shadow-secondaryColor">
                            <i class="fa fa-heart"></i>
                        </div>
                        <a href="{{route('job-detail')}}">
                            <img src="{{asset('assets/images/job1.jpg')}}" alt="news imag" class="transition-all duration-[0.3s] ease-in-out rounded-t-lg w-full h-full">
                        </a>
                    </figure>

                    <div class="detail px-2 border-[2px] border-t-[0px] border-primaryColor/30 rounded-b-lg" style="  box-shadow: 0px 0px 5px 1px rgba(141,27,27,0.48) inset;">
                        <div class="w-full flex justify-between">
                            <label class="mt-[20px] flex items-center gap-2 inline-block text-[13px] text-[#999]">
                                <img class="h-8 w-8 rounded-full" src="{{asset('assets/images/u1.jpg')}}" alt="">
                                <a href="#" class="text-black font-semibold text-[16px]">Michle</a>
                            </label>

                        </div>



                        <h3 class="mt-[10px] mb-[15px] ">
                            <a href="{{route('job-detail')}}" class="font-Poppins text-primaryColor hover:underline text-[18px] font-medium leading-[22px]">
                                I will do high quality SEO backlink link building off page service for google ranking
                            </a>
                        </h3>
                        <div class="w-full ">
                            <span class="font-semibold text-md"><i class="fa fa-star"></i> 4.9</span> <span class="font-normal text-sm">(478)</span>
                        </div>

                        <div class="more-info mb-4 rounded-b-lg">
                            <span class="font-semibold text-primaryColor text-lg">From ₹15,000</span>
                        </div>
                    </div>
                </div>
                <div class="blog-info transition-all duration-[0.3s] ease-in-out w-full mb-[24px] bg-white shadow-lg shadow-secondaryColor/20 rounded-[5px] hover:shadow-secondaryColor/60">
                    <figure class="blog-img w-full h-auto m-[0] relative overflow-hidden rounded-t-lg">
                        <div class=" h-8 w-8 flex justify-center items-center absolute top-2 right-2 rounded-full bg-white text-primaryColor hover:text-white hover:bg-primaryColor  transition ease-in duration-2000 shadow-lg shadow-secondaryColor">
                            <i class="fa fa-heart"></i>
                        </div>
                        <a href="{{route('job-detail')}}">
                            <img src="{{asset('assets/images/job1.jpg')}}" alt="news imag" class="transition-all duration-[0.3s] ease-in-out rounded-t-lg w-full h-full">
                        </a>
                    </figure>

                    <div class="detail px-2 border-[2px] border-t-[0px] border-primaryColor/30 rounded-b-lg" style="  box-shadow: 0px 0px 5px 1px rgba(141,27,27,0.48) inset;">
                        <div class="w-full flex justify-between">
                            <label class="mt-[20px] flex items-center gap-2 inline-block text-[13px] text-[#999]">
                                <img class="h-8 w-8 rounded-full" src="{{asset('assets/images/u1.jpg')}}" alt="">
                                <a href="#" class="text-black font-semibold text-[16px]">Michle</a>
                            </label>

                        </div>



                        <h3 class="mt-[10px] mb-[15px] ">
                            <a href="{{route('job-detail')}}" class="font-Poppins text-primaryColor hover:underline text-[18px] font-medium leading-[22px]">
                                I will do high quality SEO backlink link building off page service for google ranking
                            </a>
                        </h3>
                        <div class="w-full ">
                            <span class="font-semibold text-md"><i class="fa fa-star"></i> 4.9</span> <span class="font-normal text-sm">(478)</span>
                        </div>

                        <div class="more-info mb-4 rounded-b-lg">
                            <span class="font-semibold text-primaryColor text-lg">From ₹15,000</span>
                        </div>
                    </div>
                </div>
                <div class="blog-info transition-all duration-[0.3s] ease-in-out w-full mb-[24px] bg-white shadow-lg shadow-secondaryColor/20 rounded-[5px] hover:shadow-secondaryColor/60">
                    <figure class="blog-img w-full h-auto m-[0] relative overflow-hidden rounded-t-lg">
                        <div class=" h-8 w-8 flex justify-center items-center absolute top-2 right-2 rounded-full bg-white text-primaryColor hover:text-white hover:bg-primaryColor  transition ease-in duration-2000 shadow-lg shadow-secondaryColor">
                            <i class="fa fa-heart"></i>
                        </div>
                        <a href="{{route('job-detail')}}">
                            <img src="{{asset('assets/images/job2.jpg')}}" alt="news imag" class="transition-all duration-[0.3s] ease-in-out rounded-t-lg w-full h-full">
                        </a>
                    </figure>

                    <div class="detail px-2 border-[2px] border-t-[0px] border-primaryColor/30 rounded-b-lg" style="  box-shadow: 0px 0px 5px 1px rgba(141,27,27,0.48) inset;">
                        <div class="w-full flex justify-between">
                            <label class="mt-[20px] flex items-center gap-2 inline-block text-[13px] text-[#999]">
                                <img class="h-8 w-8 rounded-full" src="{{asset('assets/images/u1.jpg')}}" alt="">
                                <a href="#" class="text-black font-semibold text-[16px]">Michle</a>
                            </label>

                        </div>



                        <h3 class="mt-[10px] mb-[15px] ">
                            <a href="{{route('job-detail')}}" class="font-Poppins text-primaryColor hover:underline text-[18px] font-medium leading-[22px]">
                                I will do high quality SEO backlink link building off page service for google ranking
                            </a>
                        </h3>
                        <div class="w-full ">
                            <span class="font-semibold text-md"><i class="fa fa-star"></i> 4.9</span> <span class="font-normal text-sm">(478)</span>
                        </div>

                        <div class="more-info mb-4 rounded-b-lg">
                            <span class="font-semibold text-primaryColor text-lg">From ₹15,000</span>
                        </div>
                    </div>
                </div>
                <div class="blog-info transition-all duration-[0.3s] ease-in-out w-full mb-[24px] bg-white shadow-lg shadow-secondaryColor/20 rounded-[5px] hover:shadow-secondaryColor/60">
                    <figure class="blog-img w-full h-auto m-[0] relative overflow-hidden rounded-t-lg">
                        <div class=" h-8 w-8 flex justify-center items-center absolute top-2 right-2 rounded-full bg-white text-primaryColor hover:text-white hover:bg-primaryColor  transition ease-in duration-2000 shadow-lg shadow-secondaryColor">
                            <i class="fa fa-heart"></i>
                        </div>
                        <a href="{{route('job-detail')}}">
                            <img src="{{asset('assets/images/job1.jpg')}}" alt="news imag" class="transition-all duration-[0.3s] ease-in-out rounded-t-lg w-full h-full">
                        </a>
                    </figure>

                    <div class="detail px-2 border-[2px] border-t-[0px] border-primaryColor/30 rounded-b-lg" style="  box-shadow: 0px 0px 5px 1px rgba(141,27,27,0.48) inset;">
                        <div class="w-full flex justify-between">
                            <label class="mt-[20px] flex items-center gap-2 inline-block text-[13px] text-[#999]">
                                <img class="h-8 w-8 rounded-full" src="{{asset('assets/images/u1.jpg')}}" alt="">
                                <a href="#" class="text-black font-semibold text-[16px]">Michle</a>
                            </label>

                        </div>



                        <h3 class="mt-[10px] mb-[15px] ">
                            <a href="{{route('job-detail')}}" class="font-Poppins text-primaryColor hover:underline text-[18px] font-medium leading-[22px]">
                                I will do high quality SEO backlink link building off page service for google ranking
                            </a>
                        </h3>
                        <div class="w-full ">
                            <span class="font-semibold text-md"><i class="fa fa-star"></i> 4.9</span> <span class="font-normal text-sm">(478)</span>
                        </div>

                        <div class="more-info mb-4 rounded-b-lg">
                            <span class="font-semibold text-primaryColor text-lg">From ₹15,000</span>
                        </div>
                    </div>
                </div>
                <div class="blog-info transition-all duration-[0.3s] ease-in-out w-full mb-[24px] bg-white shadow-lg shadow-secondaryColor/20 rounded-[5px] hover:shadow-secondaryColor/60">
                    <figure class="blog-img w-full h-auto m-[0] relative overflow-hidden rounded-t-lg">
                        <div class=" h-8 w-8 flex justify-center items-center absolute top-2 right-2 rounded-full bg-white text-primaryColor hover:text-white hover:bg-primaryColor  transition ease-in duration-2000 shadow-lg shadow-secondaryColor">
                            <i class="fa fa-heart"></i>
                        </div>
                        <a href="{{route('job-detail')}}">
                            <img src="{{asset('assets/images/job2.jpg')}}" alt="news imag" class="transition-all duration-[0.3s] ease-in-out rounded-t-lg w-full h-full">
                        </a>
                    </figure>

                    <div class="detail px-2 border-[2px] border-t-[0px] border-primaryColor/30 rounded-b-lg" style="  box-shadow: 0px 0px 5px 1px rgba(141,27,27,0.48) inset;">
                        <div class="w-full flex justify-between">
                            <label class="mt-[20px] flex items-center gap-2 inline-block text-[13px] text-[#999]">
                                <img class="h-8 w-8 rounded-full" src="{{asset('assets/images/u1.jpg')}}" alt="">
                                <a href="#" class="text-black font-semibold text-[16px]">Michle</a>
                            </label>

                        </div>



                        <h3 class="mt-[10px] mb-[15px] ">
                            <a href="{{route('job-detail')}}" class="font-Poppins text-primaryColor hover:underline text-[18px] font-medium leading-[22px]">
                                I will do high quality SEO backlink link building off page service for google ranking
                            </a>
                        </h3>
                        <div class="w-full ">
                            <span class="font-semibold text-md"><i class="fa fa-star"></i> 4.9</span> <span class="font-normal text-sm">(478)</span>
                        </div>

                        <div class="more-info mb-4 rounded-b-lg">
                            <span class="font-semibold text-primaryColor text-lg">From ₹15,000</span>
                        </div>
                    </div>
                </div>
                <div class="blog-info transition-all duration-[0.3s] ease-in-out w-full mb-[24px] bg-white shadow-lg shadow-secondaryColor/20 rounded-[5px] hover:shadow-secondaryColor/60">
                    <figure class="blog-img w-full h-auto m-[0] relative overflow-hidden rounded-t-lg">
                        <div class=" h-8 w-8 flex justify-center items-center absolute top-2 right-2 rounded-full bg-white text-primaryColor hover:text-white hover:bg-primaryColor  transition ease-in duration-2000 shadow-lg shadow-secondaryColor">
                            <i class="fa fa-heart"></i>
                        </div>
                        <a href="{{route('job-detail')}}">
                            <img src="{{asset('assets/images/job1.jpg')}}" alt="news imag" class="transition-all duration-[0.3s] ease-in-out rounded-t-lg w-full h-full">
                        </a>
                    </figure>

                    <div class="detail px-2 border-[2px] border-t-[0px] border-primaryColor/30 rounded-b-lg" style="  box-shadow: 0px 0px 5px 1px rgba(141,27,27,0.48) inset;">
                        <div class="w-full flex justify-between">
                            <label class="mt-[20px] flex items-center gap-2 inline-block text-[13px] text-[#999]">
                                <img class="h-8 w-8 rounded-full" src="{{asset('assets/images/u1.jpg')}}" alt="">
                                <a href="#" class="text-black font-semibold text-[16px]">Michle</a>
                            </label>

                        </div>



                        <h3 class="mt-[10px] mb-[15px] ">
                            <a href="{{route('job-detail')}}" class="font-Poppins text-primaryColor hover:underline text-[18px] font-medium leading-[22px]">
                                I will do high quality SEO backlink link building off page service for google ranking
                            </a>
                        </h3>
                        <div class="w-full ">
                            <span class="font-semibold text-md"><i class="fa fa-star"></i> 4.9</span> <span class="font-normal text-sm">(478)</span>
                        </div>

                        <div class="more-info mb-4 rounded-b-lg">
                            <span class="font-semibold text-primaryColor text-lg">From ₹15,000</span>
                        </div>
                    </div>
                </div>
                <div class="blog-info transition-all duration-[0.3s] ease-in-out w-full mb-[24px] bg-white shadow-lg shadow-secondaryColor/20 rounded-[5px] hover:shadow-secondaryColor/60">
                    <figure class="blog-img w-full h-auto m-[0] relative overflow-hidden rounded-t-lg">
                        <div class=" h-8 w-8 flex justify-center items-center absolute top-2 right-2 rounded-full bg-white text-primaryColor hover:text-white hover:bg-primaryColor  transition ease-in duration-2000 shadow-lg shadow-secondaryColor">
                            <i class="fa fa-heart"></i>
                        </div>
                        <a href="{{route('job-detail')}}">
                            <img src="{{asset('assets/images/job1.jpg')}}" alt="news imag" class="transition-all duration-[0.3s] ease-in-out rounded-t-lg w-full h-full">
                        </a>
                    </figure>

                    <div class="detail px-2 border-[2px] border-t-[0px] border-primaryColor/30 rounded-b-lg" style="  box-shadow: 0px 0px 5px 1px rgba(141,27,27,0.48) inset;">
                        <div class="w-full flex justify-between">
                            <label class="mt-[20px] flex items-center gap-2 inline-block text-[13px] text-[#999]">
                                <img class="h-8 w-8 rounded-full" src="{{asset('assets/images/u1.jpg')}}" alt="">
                                <a href="#" class="text-black font-semibold text-[16px]">Michle</a>
                            </label>

                        </div>



                        <h3 class="mt-[10px] mb-[15px] ">
                            <a href="{{route('job-detail')}}" class="font-Poppins text-primaryColor hover:underline text-[18px] font-medium leading-[22px]">
                                I will do high quality SEO backlink link building off page service for google ranking
                            </a>
                        </h3>
                        <div class="w-full ">
                            <span class="font-semibold text-md"><i class="fa fa-star"></i> 4.9</span> <span class="font-normal text-sm">(478)</span>
                        </div>

                        <div class="more-info mb-4 rounded-b-lg">
                            <span class="font-semibold text-primaryColor text-lg">From ₹15,000</span>
                        </div>
                    </div>
                </div>
                <div class="blog-info transition-all duration-[0.3s] ease-in-out w-full mb-[24px] bg-white shadow-lg shadow-secondaryColor/20 rounded-[5px] hover:shadow-secondaryColor/60">
                    <figure class="blog-img w-full h-auto m-[0] relative overflow-hidden rounded-t-lg">
                        <div class=" h-8 w-8 flex justify-center items-center absolute top-2 right-2 rounded-full bg-white text-primaryColor hover:text-white hover:bg-primaryColor  transition ease-in duration-2000 shadow-lg shadow-secondaryColor">
                            <i class="fa fa-heart"></i>
                        </div>
                        <a href="{{route('job-detail')}}">
                            <img src="{{asset('assets/images/job2.jpg')}}" alt="news imag" class="transition-all duration-[0.3s] ease-in-out rounded-t-lg w-full h-full">
                        </a>
                    </figure>

                    <div class="detail px-2 border-[2px] border-t-[0px] border-primaryColor/30 rounded-b-lg" style="  box-shadow: 0px 0px 5px 1px rgba(141,27,27,0.48) inset;">
                        <div class="w-full flex justify-between">
                            <label class="mt-[20px] flex items-center gap-2 inline-block text-[13px] text-[#999]">
                                <img class="h-8 w-8 rounded-full" src="{{asset('assets/images/u1.jpg')}}" alt="">
                                <a href="#" class="text-black font-semibold text-[16px]">Michle</a>
                            </label>

                        </div>



                        <h3 class="mt-[10px] mb-[15px] ">
                            <a href="{{route('job-detail')}}" class="font-Poppins text-primaryColor hover:underline text-[18px] font-medium leading-[22px]">
                                I will do high quality SEO backlink link building off page service for google ranking
                            </a>
                        </h3>
                        <div class="w-full ">
                            <span class="font-semibold text-md"><i class="fa fa-star"></i> 4.9</span> <span class="font-normal text-sm">(478)</span>
                        </div>

                        <div class="more-info mb-4 rounded-b-lg">
                            <span class="font-semibold text-primaryColor text-lg">From ₹15,000</span>
                        </div>
                    </div>
                </div>
                <div class="blog-info transition-all duration-[0.3s] ease-in-out w-full mb-[24px] bg-white shadow-lg shadow-secondaryColor/20 rounded-[5px] hover:shadow-secondaryColor/60">
                    <figure class="blog-img w-full h-auto m-[0] relative overflow-hidden rounded-t-lg">
                        <div class=" h-8 w-8 flex justify-center items-center absolute top-2 right-2 rounded-full bg-white text-primaryColor hover:text-white hover:bg-primaryColor  transition ease-in duration-2000 shadow-lg shadow-secondaryColor">
                            <i class="fa fa-heart"></i>
                        </div>
                        <a href="{{route('job-detail')}}">
                            <img src="{{asset('assets/images/job1.jpg')}}" alt="news imag" class="transition-all duration-[0.3s] ease-in-out rounded-t-lg w-full h-full">
                        </a>
                    </figure>

                    <div class="detail px-2 border-[2px] border-t-[0px] border-primaryColor/30 rounded-b-lg" style="  box-shadow: 0px 0px 5px 1px rgba(141,27,27,0.48) inset;">
                        <div class="w-full flex justify-between">
                            <label class="mt-[20px] flex items-center gap-2 inline-block text-[13px] text-[#999]">
                                <img class="h-8 w-8 rounded-full" src="{{asset('assets/images/u1.jpg')}}" alt="">
                                <a href="#" class="text-black font-semibold text-[16px]">Michle</a>
                            </label>

                        </div>



                        <h3 class="mt-[10px] mb-[15px] ">
                            <a href="{{route('job-detail')}}" class="font-Poppins text-primaryColor hover:underline text-[18px] font-medium leading-[22px]">
                                I will do high quality SEO backlink link building off page service for google ranking
                            </a>
                        </h3>
                        <div class="w-full ">
                            <span class="font-semibold text-md"><i class="fa fa-star"></i> 4.9</span> <span class="font-normal text-sm">(478)</span>
                        </div>

                        <div class="more-info mb-4 rounded-b-lg">
                            <span class="font-semibold text-primaryColor text-lg">From ₹15,000</span>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
    <div class="mt-4 w-full flex justify-center px-4">
        <div class="lg:w-[80%] w-full flex flex-col ">
            <div class=" section-title flex justify-between items-center mb-5">
                <div>
              <span class="lg:text-4xl md:text-3xl sm:text-2xl text-2xl text-primaryColor font-medium"
                    style="font-family:'Inter', sans-serif;">Faq's</span>
                </div>

            </div>



            <div class="w-full flex flex-wrap">
                <div class="min-[992px]:w-[50%] w-full px-2 ">
                    <div class="gi-accordion style-1">
                        <div class="gi-accordion-item border-primaryColor/30 border-[1px] overflow-hidden mb-[10px] group">
                            <h4 class=" m-[0] py-[15px] pl-[30px] pr-[35px] bg-primaryColor/10 text-primaryColor  text-[16px] leading-[28px] font-semibold relative font-Poppins border-[1px] border-solid border-[#eee] rounded-[5px] tracking-[0.01rem] max-[767px]:text-[15px]">
                                What is the multi vendor services?
                            </h4>

                            <div class=" show py-[15px] text-[14px] px-6  leading-[24px] text-secondaryColor  group-hover:block">Lorem Ipsum is simply dummy text of the printing and
                                typesetting industry. Lorem
                                Ipsum has been the industry's standard <code class="text-[#5caf90] text-[14px] font-semibold">dummy text</code> ever since the 1500s,
                                when an
                                unknown printer took a galley of type and scrambled it to make a type specimen book.
                            </div>
                        </div>

                    </div>
                    <div class="gi-accordion style-1">
                        <div class="gi-accordion-item border-primaryColor/30 border-[1px] overflow-hidden mb-[10px] group">
                            <h4 class=" m-[0] py-[15px] pl-[30px] pr-[35px] bg-primaryColor/10 text-primaryColor  text-[16px] leading-[28px] font-semibold relative font-Poppins border-[1px] border-solid border-[#eee] rounded-[5px] tracking-[0.01rem] max-[767px]:text-[15px]">
                                What is the multi vendor services?
                            </h4>

                            <div class=" show py-[15px] text-[14px] px-6  leading-[24px] text-secondaryColor hidden  group-hover:block">Lorem Ipsum is simply dummy text of the printing and
                                typesetting industry. Lorem
                                Ipsum has been the industry's standard <code class="text-[#5caf90] text-[14px] font-semibold">dummy text</code> ever since the 1500s,
                                when an
                                unknown printer took a galley of type and scrambled it to make a type specimen book.
                            </div>
                        </div>

                    </div>
                    <div class="gi-accordion style-1">
                        <div class="gi-accordion-item border-primaryColor/30 border-[1px] overflow-hidden mb-[10px] group">
                            <h4 class=" m-[0] py-[15px] pl-[30px] pr-[35px] bg-primaryColor/10 text-primaryColor  text-[16px] leading-[28px] font-semibold relative font-Poppins border-[1px] border-solid border-[#eee] rounded-[5px] tracking-[0.01rem] max-[767px]:text-[15px]">
                                What is the multi vendor services?
                            </h4>

                            <div class=" show py-[15px] text-[14px] px-6  leading-[24px] text-secondaryColor hidden  group-hover:block">Lorem Ipsum is simply dummy text of the printing and
                                typesetting industry. Lorem
                                Ipsum has been the industry's standard <code class="text-[#5caf90] text-[14px] font-semibold">dummy text</code> ever since the 1500s,
                                when an
                                unknown printer took a galley of type and scrambled it to make a type specimen book.
                            </div>
                        </div>

                    </div>
                </div>
                <div class="min-[992px]:w-[50%] w-full px-2">
                    <div class="gi-accordion style-1">
                        <div class="gi-accordion-item border-primaryColor/30 border-[1px] overflow-hidden mb-[10px] group">
                            <h4 class=" m-[0] py-[15px] pl-[30px] pr-[35px] bg-primaryColor/10 text-primaryColor  text-[16px] leading-[28px] font-semibold relative font-Poppins border-[1px] border-solid border-[#eee] rounded-[5px] tracking-[0.01rem] max-[767px]:text-[15px]">
                                What is the multi vendor services?
                            </h4>

                            <div class=" show py-[15px] text-[14px] px-6  leading-[24px] text-secondaryColor   group-hover:block">Lorem Ipsum is simply dummy text of the printing and
                                typesetting industry. Lorem
                                Ipsum has been the industry's standard <code class="text-[#5caf90] text-[14px] font-semibold">dummy text</code> ever since the 1500s,
                                when an
                                unknown printer took a galley of type and scrambled it to make a type specimen book.
                            </div>
                        </div>

                    </div>
                    <div class="gi-accordion style-1">
                        <div class="gi-accordion-item border-primaryColor/30 border-[1px] overflow-hidden mb-[10px] group">
                            <h4 class=" m-[0] py-[15px] pl-[30px] pr-[35px] bg-primaryColor/10 text-primaryColor  text-[16px] leading-[28px] font-semibold relative font-Poppins border-[1px] border-solid border-[#eee] rounded-[5px] tracking-[0.01rem] max-[767px]:text-[15px]">
                                What is the multi vendor services?
                            </h4>

                            <div class=" show py-[15px] text-[14px] px-6  leading-[24px] text-secondaryColor hidden  group-hover:block">Lorem Ipsum is simply dummy text of the printing and
                                typesetting industry. Lorem
                                Ipsum has been the industry's standard <code class="text-[#5caf90] text-[14px] font-semibold">dummy text</code> ever since the 1500s,
                                when an
                                unknown printer took a galley of type and scrambled it to make a type specimen book.
                            </div>
                        </div>

                    </div>
                    <div class="gi-accordion style-1">
                        <div class="gi-accordion-item border-primaryColor/30 border-[1px] overflow-hidden mb-[10px] group">
                            <h4 class=" m-[0] py-[15px] pl-[30px] pr-[35px] bg-primaryColor/10 text-primaryColor  text-[16px] leading-[28px] font-semibold relative font-Poppins border-[1px] border-solid border-[#eee] rounded-[5px] tracking-[0.01rem] max-[767px]:text-[15px]">
                                What is the multi vendor services?
                            </h4>

                            <div class=" show py-[15px] text-[14px] px-6  leading-[24px] text-secondaryColor hidden  group-hover:block">Lorem Ipsum is simply dummy text of the printing and
                                typesetting industry. Lorem
                                Ipsum has been the industry's standard <code class="text-[#5caf90] text-[14px] font-semibold">dummy text</code> ever since the 1500s,
                                when an
                                unknown printer took a galley of type and scrambled it to make a type specimen book.
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>





@endsection