<div>
    <!-- anchor tag horizontally -->
    <div class="flex items-center gap-2 text-xs text-gray-600">
        <!-- Home link -->
        <a href="/main/profile" class="flex items-center hover:text-orange-600">
            <x-heroicon-o-home class="w-3 h-3 mr-1" />
            <span class="leading-none">Home</span>
        </a>
        <x-heroicon-o-chevron-right class="w-3 h-3" />
        <a href="/main/about-us/card-type" class="hover:text-orange-600">
            Card Types
        </a>
        <x-heroicon-o-chevron-right class="w-3 h-3" />
        <span>
            View Card Type
        </span>
    </div>

    <!-- Page Title -->
    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Card Type Details</h3>

    <!-- Bottom border -->
    <div class="border-b border-gray-300 mt-5"></div>

    <div class="mt-10">

        <div class="p-6 mt-10 max-w-5xl mx-auto bg-white rounded-md shadow-md">
            <div>
                <h4 class="font-bold mb-5 text-2xl">Details</h4>
            </div>
            <div>
                <h4 class="font-bold mb-5 text-2xl"> Card Details</h4>
                <p><span class="font-semibold">Card Code:</span> {{$code}}</p>
                <p><span class="font-semibold">Card Type Description:</span> {{$name}}</p>
                <p><span class="font-semibold">Card Type Short Description:</span> {{$description}}</p>
                <p><span class="font-semibold">Card Type Image:</span> <img src="{{ $image }}" alt="Cover Type Image"></p>
                <p><span class="font-semibold">Virtual Card Font Color:</span> {{$virtual_card_font_color}}</p>
                <p><span class="font-semibold">Card Type Cover Image:</span><img src="{{ $image }}" alt="Card Type Cover Image"></p>
                <p><span class="font-semibold">ID Number Required:</span> {{$id_number}}</p>
                <p><span class="font-semibold">ID Number Description:</span> {{$id_number_description}}</p>
            </div>

            <div>
                <h4 class="font-bold mt-10 mb-5 text-2xl">Data Privacy Details</h4>
                <p><span class="font-semibold">Terms and Conditions:</span> {{$terms_and_conditions}}</p>
                <p><span class="font-semibold">FAQs:</span> {{$faqs}}</p>
            </div>
        </div>
    </div>
</div>