تفاصيل بطاقة السائق

    <!-- Main Card -->
    <div class="bg-white rounded-lg border border-[#e2e8f0] p-12 shadow-sm">
        
        <!-- Area 1: بيانات المنشأة/الفرد -->
        <section>
            <h2 class="text-[#008abf] font-bold mb-8">بيانات المنشأة/الفرد</h2>
            <div class="grid grid-cols-2 gap-8">
                <div>
                    <p class="text-gray-400 text-sm mb-1">الاسم</p>
                    <p class="text-black font-bold">شركة افق التوصيل للخدمات اللوجستية</p>
                </div>
                <div>
                    <p class="text-gray-400 text-sm mb-1">رقم هوية المنشأة</p>
                    <p class="text-black font-bold">7051692601</p>
                </div>
            </div>
        </section>

        <hr class="my-10 border-slate-100">

        <!-- Area 2: معلومات الترخيص الرئيسي -->
        <section>
            <h2 class="text-[#008abf] font-bold mb-8">معلومات الترخيص الرئيسي</h2>
            <div class="grid grid-cols-3 gap-8 mb-8">
                <div>
                    <p class="text-gray-400 text-sm mb-1">رقم الترخيص</p>
                    <p class="text-black font-bold">38/00020774</p>
                </div>
                <div>
                    <p class="text-gray-400 text-sm mb-1">نوع الترخيص/النشاط</p>
                    <p class="text-black font-bold">نشاط النقل الخفيف للبضائع لأغراض تجارية (للغير - منشآت)</p>
                </div>
                <div>
                    <p class="text-gray-400 text-sm mb-1">المدينة</p>
                    <p class="text-black font-bold">تبوك</p>
                </div>
            </div>
            <div class="grid grid-cols-3 gap-8">
                <div>
                    <p class="text-gray-400 text-sm mb-1">تاريخ الإصدار</p>
                    <p class="text-black font-bold">1447/06/06</p>
                </div>
                <div>
                    <p class="text-gray-400 text-sm mb-1">تاريخ الإنتهاء</p>
                    <p class="text-black font-bold">1450/07/10</p>
                </div>
                <div></div>
            </div>
        </section>

        <hr class="my-10 border-slate-100">

        <!-- Area 3: بطاقة السائق -->
        <section>
            <h2 class="text-[#008abf] font-bold mb-8">بطاقة السائق</h2>
            <div class="grid grid-cols-3 gap-8 mb-8">
                <div>
                    <p class="text-gray-400 text-sm mb-1">رقم البطاقة</p>
                    <p class="text-black font-bold">38.00008128</p>
                </div>
                <div>
                    <p class="text-gray-400 text-sm mb-1">هوية السائق</p>
                    <p class="text-black font-bold">2611346632</p>
                </div>
                <div>
                    <p class="text-gray-400 text-sm mb-1">الاسم الأول</p>
                    <p class="text-black font-bold">تاريف </p>
                </div>
            </div>
            <div class="grid grid-cols-3 gap-8 mb-8">
                <div>
                    <p class="text-gray-400 text-sm mb-1">اسم العائلة</p>
                    <p class="text-black font-bold">شاكدار</p>
                </div>
                <div>
                    <p class="text-gray-400 text-sm mb-1">تاريخ إصدار البطاقة</p>
                    <p class="text-black font-bold">2026-12-28</p>
                </div>
                <div>
                    <p class="text-gray-400 text-sm mb-1">تاريخ إنتهاء البطاقة</p>
                    <p class="text-black font-bold">2027-12-29</p>
                </div>
            </div>
            <div class="w-full">
                <p class="text-gray-400 text-sm mb-1">نوع البطاقة</p>
                <p class="text-black font-bold">نشاط النقل الخفيف للبضائع لأغراض تجارية (للغير - منشآت)</p>
            </div>
        </section>
    </div>

    <!-- Back Button -->
    <div class="flex justify-end mt-8">
        <button class="border border-blue-400 text-blue-500 px-10 py-2 rounded-md hover:bg-blue-50 transition-colors font-semibold">
            رجوع
        </button>
    </div>
</div>