@extends('layouts.landing')

@section('title')
    Detail Keanggotaan
@endsection

@section('content')
    <!--<section class="wrapper bg-soft-primary position-relative">-->
    <!--    <div class="container pt-20 pb-17 pt-md-20 text-center">-->
    <!--        <div class="row">-->
    <!--            <div class="col-lg-8 mx-auto mb-5">-->

    <!--            </div>-->
    <!-- /column -->
    <!--        </div>-->
    <!-- /.row -->
    <!--    </div>-->
    <!-- /.container -->
    <!--    <div class="overflow-hidden">-->
    <!--        <div class="divider text-light mx-n2">-->
    <!--            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 60">-->
    <!--                <path fill="currentColor" d="M0,0V60H1440V0A5771,5771,0,0,1,0,0Z" />-->
    <!--            </svg>-->
    <!--        </div>-->
    <!--    </div>-->
    <!--</section>-->

    <section class="wrapper bg-light position-relative">
        <div class="container pt-32 mt-20 pt-md-20 pb-15 pb-md-17">
            <div class="row gx-md-5 gy-5 mt-n18 mt-md-n19">
                <div class="card lift">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4 col-12 text-left bg-soft-primary rounded text-center">
                                <h3 class="display-1 mb-6">{{ $membership->name }}</h3>
                                <img class="rounded-circle w-20 mx-auto mb-4 mt-2"
                                    src="{{ asset('uploads/landing-page/membership/images/' . $membership->logo) }}"
                                    srcset="{{ asset('uploads/landing-page/membership/images/' . $membership->logo) }} 2x"
                                    alt="" />

                                <table style="text-align: justify">
                                    <tr>
                                        <td>
                                            <span class="fw-bold">{{ __('message.Wilayah') }}</span>
                                        </td>
                                        <td>
                                            <span class="fw-bold px-1">:</span>
                                        </td>
                                        <td>
                                            <span
                                                class="fw-bold text-primary">{{ $membership->region_id ? $membership->region->name : __('message.Tidak ada data') }}</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span class="fw-bold">{{ __('message.QR Code') }}</span>
                                        </td>
                                        <td>
                                            <span class="fw-bold px-1">:</span>
                                        </td>
                                        <td>
                                            <span class="fw-bold text-primary ">
                                                <a href="data:image/png;base64, {!! base64_encode(
                                                    QrCode::format('png')->size(200)->generate(env('APP_URL') . '/membership/' . $membership->slug),
                                                ) !!} " download="">
                                                    <img class="m-4"
                                                        src="data:image/png;base64, {!! base64_encode(
                                                            QrCode::format('png')->size(200)->errorCorrection('H')->generate(env('APP_URL') . '/membership/' . $membership->slug),
                                                        ) !!} ">
                                                    <br>
                                                    <p class="text-center">{{ __('message.Unduh') }}</p>
                                                </a>

                                            </span>
                                        </td>
                                    </tr>
                                </table>

                            </div>
                            <div class="col-md-8 col-12 ">
                                <div class="py-1">
                                    <h3>{{ __('message.Informasi Perusahaan') }}</h3>
                                    <p style="text-align: justify" class="mt-5">
                                        {{ $membership->description ? $membership->description : __('message.Tidak ada data') }}
                                    </p>
                                </div>
                                <div class="py-1">
                                    <h3>{{ __('message.Kategori Produk') }}</h3>
                                    <p style="text-align: justify" class="mt-5">
                                        {{ $membership->section_business_id ? $membership->sectionBusiness->name : __('message.Tidak ada data') }}
                                    </p>
                                </div>
                                <div class="py-1">
                                    <h3>{{ __('message.Sertifikasi') }}</h3>
                                    <p class="">
                                        {{ $membership->certification ? $membership->certification : __('message.Tidak ada data') }}
                                    </p>
                                </div>
                                <div class="py-1">
                                    <h3>{{ __('message.Website') }}</h3>
                                    <a href="{{ $membership->website }}">
                                        <p>
                                            {{ $membership->website ? $membership->website : __('message.Tidak ada data') }}
                                        </p>
                                    </a>
                                </div>
                                <div class="py-1">
                                    <h3>{{ __('message.Produk') }}</h3>
                                    <div class="row text-center">
                                        <div class="col-12 col-md-4">
                                            <div style="padding: 15px;border: 1px solid #c7c7c7;border-radius: 10px;">
                                                @if ($membership->image_1)
                                                    @if ($membership->name_image_1)
                                                        <b class="mb-0">{{ $membership->name_image_1 }}</b>
                                                    @endif
                                                    <div>
                                                        <img class="w-20 mx-auto mb-4 mt-0"
                                                            src="{{ asset('uploads/landing-page/membership/images/' . $membership->image_1) }}"
                                                            srcset="{{ asset('uploads/landing-page/membership/images/' . $membership->image_1) }} 2x"
                                                            alt="" height="250" width="250" />
                                                    </div>
                                                    @if ($membership->url_image_1)
                                                        <a class="btn btn-sm btn-primary d-flex"
                                                            href="{{ $membership->url_image_1 }}" target="_blank"
                                                            rel="noopener noreferrer">
                                                            Link
                                                        </a>
                                                    @endif
                                                @else
                                                    <h5 style="text-align: justify" class="mt-5">
                                                        {{ __('message.Tidak ada data') }}
                                                    </h5>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-4">
                                            @if ($membership->image_2)
                                                <div style="padding: 15px;border: 1px solid #c7c7c7;border-radius: 10px;">
                                                    @if ($membership->name_image_2)
                                                        <b class="mb-0">{{ $membership->name_image_2 }}</b>
                                                    @endif
                                                    <div>
                                                        <img class="w-20 mx-auto mb-4 mt-0"
                                                            src="{{ asset('uploads/landing-page/membership/images/' . $membership->image_2) }}"
                                                            srcset="{{ asset('uploads/landing-page/membership/images/' . $membership->image_2) }} 2x"
                                                            alt="" height="250" width="250" />
                                                    </div>
                                                    @if ($membership->url_image_2)
                                                        <a class="btn btn-sm btn-primary d-flex"
                                                            href="{{ $membership->url_image_2 }}" target="_blank"
                                                            rel="noopener noreferrer">
                                                            Link
                                                        </a>
                                                    @endif
                                                </div>
                                            @endif
                                        </div>
                                        <div class="col-12 col-md-4">
                                            @if ($membership->image_3)
                                                <div style="padding: 15px;border: 1px solid #c7c7c7;border-radius: 10px;">
                                                    @if ($membership->name_image_3)
                                                        <b class="mb-0">{{ $membership->name_image_3 }}</b>
                                                    @endif
                                                    <div>
                                                        <img class="w-20 mx-auto mb-4 mt-0"
                                                            src="{{ asset('uploads/landing-page/membership/images/' . $membership->image_3) }}"
                                                            srcset="{{ asset('uploads/landing-page/membership/images/' . $membership->image_3) }} 2x"
                                                            alt="" height="250" width="250" />
                                                    </div>
                                                    @if ($membership->url_image_3)
                                                        <a class="btn btn-sm btn-primary d-flex"
                                                            href="{{ $membership->url_image_3 }}" target="_blank"
                                                            rel="noopener noreferrer">
                                                            Link
                                                        </a>
                                                    @endif
                                                </div>
                                            @endif
                                        </div>
                                        <div class="col-12 col-md-4 mt-5">
                                            @if ($membership->image_4)
                                                <div style="padding: 15px;border: 1px solid #c7c7c7;border-radius: 10px;">
                                                    @if ($membership->name_image_4)
                                                        <b class="mb-0">{{ $membership->name_image_4 }}</b>
                                                    @endif
                                                    <div>
                                                        <img class="w-20 mx-auto mb-4 mt-0"
                                                            src="{{ asset('uploads/landing-page/membership/images/' . $membership->image_4) }}"
                                                            srcset="{{ asset('uploads/landing-page/membership/images/' . $membership->image_4) }} 2x"
                                                            alt="" height="250" width="250" />
                                                    </div>
                                                    @if ($membership->url_image_4)
                                                        <a class="btn btn-sm btn-primary d-flex"
                                                            href="{{ $membership->url_image_4 }}" target="_blank"
                                                            rel="noopener noreferrer">
                                                            Link
                                                        </a>
                                                    @endif
                                                </div>
                                            @endif
                                        </div>
                                        <div class="col-12 col-md-4 mt-5">
                                            @if ($membership->image_5)
                                                <div style="padding: 15px;border: 1px solid #c7c7c7;border-radius: 10px;">
                                                    @if ($membership->name_image_5)
                                                        <b class="mb-0">{{ $membership->name_image_5 }}</b>
                                                    @endif
                                                    <div>
                                                        <img class="w-20 mx-auto mb-4 mt-0"
                                                            src="{{ asset('uploads/landing-page/membership/images/' . $membership->image_5) }}"
                                                            srcset="{{ asset('uploads/landing-page/membership/images/' . $membership->image_5) }} 2x"
                                                            alt="" height="250" width="250" />
                                                    </div>
                                                    @if ($membership->url_image_5)
                                                        <a class="btn btn-sm btn-primary d-flex"
                                                            href="{{ $membership->url_image_5 }}" target="_blank"
                                                            rel="noopener noreferrer">
                                                            Link
                                                        </a>
                                                    @endif
                                                </div>
                                            @endif
                                        </div>
                                        <div class="col-12 col-md-4 mt-5">
                                            @if ($membership->image_6)
                                                <div style="padding: 15px;border: 1px solid #c7c7c7;border-radius: 10px;">
                                                    @if ($membership->name_image_6)
                                                        <b class="mb-0">{{ $membership->name_image_6 }}</b>
                                                    @endif
                                                    <div>
                                                        <img class="w-20 mx-auto mb-4 mt-0"
                                                            src="{{ asset('uploads/landing-page/membership/images/' . $membership->image_6) }}"
                                                            srcset="{{ asset('uploads/landing-page/membership/images/' . $membership->image_6) }} 2x"
                                                            alt="" height="250" width="250" />
                                                    </div>
                                                    @if ($membership->url_image_6)
                                                        <a class="btn btn-sm btn-primary d-flex"
                                                            href="{{ $membership->url_image_6 }}" target="_blank"
                                                            rel="noopener noreferrer">
                                                            Link
                                                        </a>
                                                    @endif
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="py-1">
                                    <h3>{{ __('message.Kontak') }}</h3>

                                    <div class="row mt-5">
                                        <div class="col-md-6 col-12">
                                            <table style="text-align: justify">
                                                <tr>
                                                    <td>
                                                        <span>{{ __('message.Nama') }}</span>
                                                    </td>
                                                    <td>
                                                        <span class=" px-1">:</span>
                                                    </td>
                                                    <td>
                                                        <span
                                                            class="">{{ $membership->name_contact_1 ? $membership->name_contact_1 : __('message.Tidak ada data') }}</span>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <span>{{ __('message.Jabatan') }}</span>
                                                    </td>
                                                    <td>
                                                        <span class=" px-1">:</span>
                                                    </td>
                                                    <td>
                                                        <span class="">
                                                            {{ $membership->department_1 ? $membership->department_1 : __('message.Tidak ada data') }}</span>
                                                    </td>
                                                </tr>
                                                {{-- <tr>
                                                    <td>
                                                        <span>{{ __('message.Telepon') }}</span>
                                                    </td>
                                                    <td>
                                                        <span class=" px-1">:</span>
                                                    </td>
                                                    <td>
                                                        <span class="">
                                                            {{ $membership->phone_1 ? $membership->phone_1 : __('message.Tidak ada data') }}</span>
                                                    </td>
                                                </tr> --}}
                                                <tr>
                                                    <td>
                                                        <span>{{ __('message.Email') }}</span>
                                                    </td>
                                                    <td>
                                                        <span class=" px-1">:</span>
                                                    </td>
                                                    <td>
                                                        <span class="">
                                                            {{ $membership->email_1 ? $membership->email_1 : __('message.Tidak ada data') }}</span>
                                                    </td>
                                                </tr>
                                            </table>

                                        </div>
                                        <div class="col-md-6 col-12 pt-5 pt-md-0">
                                            <table style="text-align: justify">
                                                <tr>
                                                    <td>
                                                        <span class=" ">{{ __('message.Nama') }}</span>
                                                    </td>
                                                    <td>
                                                        <span class=" px-1">:</span>
                                                    </td>
                                                    <td>
                                                        <span
                                                            class="">{{ $membership->name_contact_2 ? $membership->name_contact_2 : __('message.Tidak ada data') }}</span>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <span class=" ">{{ __('message.Jabatan') }}</span>
                                                    </td>
                                                    <td>
                                                        <span class=" px-1">:</span>
                                                    </td>
                                                    <td>
                                                        <span class="">
                                                            {{ $membership->department_2 ? $membership->department_2 : __('message.Tidak ada data') }}</span>
                                                    </td>
                                                </tr>
                                                {{-- <tr>
                                                    <td>
                                                        <span class=" ">{{ __('message.Telepon') }}</span>
                                                    </td>
                                                    <td>
                                                        <span class=" px-1">:</span>
                                                    </td>
                                                    <td>
                                                        <span class="">
                                                            {{ $membership->phone_2 ? $membership->phone_2 : __('message.Tidak ada data') }}</span>
                                                    </td>
                                                </tr> --}}
                                                <tr>
                                                    <td>
                                                        <span class=" ">{{ __('message.Email') }}</span>
                                                    </td>
                                                    <td>
                                                        <span class=" px-1">:</span>
                                                    </td>
                                                    <td>
                                                        <span class="">
                                                            {{ $membership->email_2 ? $membership->email_2 : __('message.Tidak ada data') }}</span>
                                                    </td>
                                                </tr>
                                            </table>

                                        </div>
                                    </div>

                                </div>
                                <div class="pt-2 pb-1">
                                    <h3>{{ __('message.Alamat') }}</h3>
                                    <p>
                                        {{ $membership->address ? $membership->address : __('message.Tidak ada data') }}
                                    </p>
                                </div>

                                <div class="py-1">
                                    <h3>{{ __('message.Link katalog') }}</h3>
                                    <a href=" {{ $membership->catalog ? $membership->catalog : 'javascript:void(0)' }}"
                                        class="btn btn-soft-primary">
                                        {{ $membership->catalog ? __('message.Unduh') : __('message.Tidak ada data') }}
                                    </a>
                                </div>
                                <div class="py-3 text-end" style="align-content:flex-end">
                                    <a href="{{ route('landing.membership') }}" class="btn btn-primary">
                                        {{ __('message.Kembali') }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--/.card-body -->
                </div>
            </div>
            <!--/.row -->
            {{-- <div class="row gy-10 gy-sm-13 gx-md-8 gx-xl-12 align-items-center mt-12">
                <div class="col-lg-6">
                    <div class="row gx-md-5 gy-5">
                        <div class="col-12">
                            <figure class="rounded mx-md-5"><img src="./assets/img/photos/g8.jpg"
                                    srcset="./assets/img/photos/g8@2x.jpg 2x" alt=""></figure>
                        </div>
                        <!--/column -->
                        <div class="col-md-6">
                            <figure class="rounded"><img src="./assets/img/photos/g9.jpg"
                                    srcset="./assets/img/photos/g9@2x.jpg 2x" alt=""></figure>
                        </div>
                        <!--/column -->
                        <div class="col-md-6">
                            <figure class="rounded"><img src="./assets/img/photos/g10.jpg"
                                    srcset="./assets/img/photos/g10@2x.jpg 2x" alt=""></figure>
                        </div>
                        <!--/column -->
                    </div>
                    <!--/.row -->
                </div>
                <!--/column -->
                <div class="col-lg-6">
                    <h2 class="fs-16 text-uppercase text-muted mb-3 mt-md-n5">What Makes Us Different?</h2>
                    <h3 class="display-3 mb-5">We bring solutions to make life easier for our customers.</h3>
                    <p class="mb-6">Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et magnis
                        dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Etiam
                        porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget
                        quam. Maecenas sed.</p>
                    <div class="row gy-8">
                        <div class="col-md-6">
                            <div class="d-flex flex-row">
                                <div>
                                    <img src="./assets/img/icons/solid/share.svg"
                                        class="svg-inject icon-svg icon-svg-xs solid-mono text-primary me-4"
                                        alt="" />
                                </div>
                                <div>
                                    <h4 class="mb-1">Our Mission</h4>
                                    <p class="mb-0">Curabitur blandit lacus porttitor ridiculus mus.</p>
                                </div>
                            </div>
                        </div>
                        <!--/column -->
                        <div class="col-md-6">
                            <div class="d-flex flex-row">
                                <div>
                                    <img src="./assets/img/icons/solid/partnership.svg"
                                        class="svg-inject icon-svg icon-svg-xs solid-mono text-primary me-4"
                                        alt="" />
                                </div>
                                <div>
                                    <h4 class="mb-1">Our Values</h4>
                                    <p class="mb-0">Curabitur blandit lacus porttitor ridiculus mus.</p>
                                </div>
                            </div>
                        </div>
                        <!--/column -->
                    </div>
                    <!--/.row -->
                </div>
                <!--/column -->
            </div> --}}
            <!--/.row -->
            {{-- <hr class="my-14 my-md-17" />
            <div class="row text-center">
                <div class="col-xl-10 mx-auto">
                    <h2 class="fs-15 text-uppercase text-muted mb-3">Job Positions</h2>
                    <h3 class="display-4 mb-10 px-xxl-15">We’re always searching for amazing people to join our team. Take a
                        look at our current openings.</h3>
                </div>
                <!-- /column -->
            </div> --}}
            <!-- /.row -->
            {{-- <div class="row">
                <div class="col-xl-10 mx-auto">
                    <form class="filter-form mb-10">
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <div class="form-select-wrapper">
                                    <select class="form-select" aria-label="">
                                        <option selected>Position</option>
                                        <option value="position1">Business</option>
                                        <option value="position2">Design</option>
                                        <option value="position3">Development</option>
                                        <option value="position4">Engineering</option>
                                        <option value="position5">Finance</option>
                                        <option value="position6">Marketing</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <div class="form-select-wrapper">
                                    <select class="form-select" aria-label="">
                                        <option selected>Type</option>
                                        <option value="type1">Full-time</option>
                                        <option value="type3">Part-time</option>
                                        <option value="type4">Remote</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <div class="form-select-wrapper">
                                    <select class="form-select" aria-label="">
                                        <option selected>Location</option>
                                        <option value="location1">Chicago, US</option>
                                        <option value="location3">Michigan, US</option>
                                        <option value="location2">New York, US</option>
                                        <option value="location4">Los Angles, US</option>
                                        <option value="location5">Moscow, Russia</option>
                                        <option value="location6">Sydney, Australia</option>
                                        <option value="location7">Birmingham, UK</option>
                                        <option value="location8">Manchester, UK</option>
                                        <option value="location9">Beijing, China</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="job-list mb-10">
                        <h3 class="mb-4">Design</h3>
                        <a href="#" class="card mb-4 lift">
                            <div class="card-body p-5">
                                <span class="row justify-content-between align-items-center">
                                    <span class="col-md-5 mb-2 mb-md-0 d-flex align-items-center text-body">
                                        <span class="avatar bg-red text-white w-9 h-9 fs-17 me-3">GD</span> Senior Graphic
                                        Designer </span>
                                    <span class="col-5 col-md-3 text-body d-flex align-items-center">
                                        <i class="uil uil-clock me-1"></i> Full time </span>
                                    <span class="col-7 col-md-4 col-lg-3 text-body d-flex align-items-center">
                                        <i class="uil uil-location-arrow me-1"></i> San Francisco, US </span>
                                    <span class="d-none d-lg-block col-1 text-center text-body">
                                        <i class="uil uil-angle-right-b"></i>
                                    </span>
                                </span>
                            </div>
                            <!-- /.card-body -->
                        </a>
                        <!-- /.card -->
                        <a href="#" class="card mb-4 lift">
                            <div class="card-body p-5">
                                <span class="row justify-content-between align-items-center">
                                    <span class="col-md-5 mb-2 mb-md-0 d-flex align-items-center text-body">
                                        <span class="avatar bg-green text-white w-9 h-9 fs-17 me-3">UX</span> UI/UX
                                        Designer </span>
                                    <span class="col-5 col-md-3 text-body d-flex align-items-center">
                                        <i class="uil uil-clock me-1"></i> Remote </span>
                                    <span class="col-7 col-md-4 col-lg-3 text-body d-flex align-items-center">
                                        <i class="uil uil-location-arrow me-1"></i> Anywhere </span>
                                    <span class="d-none d-lg-block col-1 text-center text-body">
                                        <i class="uil uil-angle-right-b"></i>
                                    </span>
                                </span>
                            </div>
                            <!-- /.card-body -->
                        </a>
                        <!-- /.card -->
                        <a href="#" class="card mb-4 lift">
                            <div class="card-body p-5">
                                <span class="row justify-content-between align-items-center">
                                    <span class="col-md-5 mb-2 mb-md-0 d-flex align-items-center text-body">
                                        <span class="avatar bg-yellow text-white w-9 h-9 fs-17 me-3">AN</span> Multimedia
                                        Artist &amp; Animator </span>
                                    <span class="col-5 col-md-3 text-body d-flex align-items-center">
                                        <i class="uil uil-clock me-1"></i> Full time </span>
                                    <span class="col-7 col-md-4 col-lg-3 text-body d-flex align-items-center">
                                        <i class="uil uil-location-arrow me-1"></i> Birmingham, UK </span>
                                    <span class="d-none d-lg-block col-1 text-center text-body">
                                        <i class="uil uil-angle-right-b"></i>
                                    </span>
                                </span>
                            </div>
                            <!-- /.card-body -->
                        </a>
                        <!-- /.card -->
                    </div>
                    <div class="job-list">
                        <h3 class="mb-4">Development</h3>
                        <a href="#" class="card mb-4 lift">
                            <div class="card-body p-5">
                                <span class="row justify-content-between align-items-center">
                                    <span class="col-md-5 mb-2 mb-md-0 d-flex align-items-center text-body">
                                        <span class="avatar bg-purple text-white w-9 h-9 fs-17 me-3">FE</span> Front End
                                        Developer </span>
                                    <span class="col-5 col-md-3 text-body d-flex align-items-center">
                                        <i class="uil uil-clock me-1"></i> Part time </span>
                                    <span class="col-7 col-md-4 col-lg-3 text-body d-flex align-items-center">
                                        <i class="uil uil-location-arrow me-1"></i> Sydney, AU </span>
                                    <span class="d-none d-lg-block col-1 text-center text-body">
                                        <i class="uil uil-angle-right-b"></i>
                                    </span>
                                </span>
                            </div>
                            <!-- /.card-body -->
                        </a>
                        <!-- /.card -->
                        <a href="#" class="card mb-4 lift">
                            <div class="card-body p-5">
                                <span class="row justify-content-between align-items-center">
                                    <span class="col-md-5 mb-2 mb-md-0 d-flex align-items-center text-body">
                                        <span class="avatar bg-orange text-white w-9 h-9 fs-17 me-3">MD</span> Mobile
                                        Developer </span>
                                    <span class="col-5 col-md-3 text-body d-flex align-items-center">
                                        <i class="uil uil-clock me-1"></i> Full-time </span>
                                    <span class="col-7 col-md-4 col-lg-3 text-body d-flex align-items-center">
                                        <i class="uil uil-location-arrow me-1"></i> San Francisco, US </span>
                                    <span class="d-none d-lg-block col-1 text-center text-body">
                                        <i class="uil uil-angle-right-b"></i>
                                    </span>
                                </span>
                            </div>
                            <!-- /.card-body -->
                        </a>
                        <!-- /.card -->
                        <a href="#" class="card mb-4 lift">
                            <div class="card-body p-5">
                                <span class="row justify-content-between align-items-center">
                                    <span class="col-md-5 mb-2 mb-md-0 d-flex align-items-center text-body">
                                        <span class="avatar bg-pink text-white w-9 h-9 fs-17 me-3">NT</span> .NET Developer
                                    </span>
                                    <span class="col-5 col-md-3 text-body d-flex align-items-center">
                                        <i class="uil uil-clock me-1"></i> Full time </span>
                                    <span class="col-7 col-md-4 col-lg-3 text-body d-flex align-items-center">
                                        <i class="uil uil-location-arrow me-1"></i> Manchester, UK </span>
                                    <span class="d-none d-lg-block col-1 text-center text-body">
                                        <i class="uil uil-angle-right-b"></i>
                                    </span>
                                </span>
                            </div>
                            <!-- /.card-body -->
                        </a>
                        <!-- /.card -->
                    </div>
                </div>
                <!-- /column -->
            </div> --}}
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>
@endsection