{{-- ar-//-
<div id="capture" class="certificate-template" style="height: 2480px !important;width: 3508px;">
    <section>
        <div class="header-title" style="margin-bottom: 140px">
            <p class="code-aria" style="justify-self: flex-start; margin-right: -150px;">
                <span>رقم الشهادة</span>
                <span>[code]</span>
            </p>
            <p style="font-family: Andalus, Tajawal, serif; font-size: 350px !important; color: green; line-height: 100px; !important; ">
                شَهَـادَةُ تَخَرُّج
            </p>
            <span></span>
        </div>
        <aside class="header flex-column" style="width: 90%">
            <p class="fw-bold prm-mark "> تشهد أكاديمية الإمامين ابن باز وابن عثيمين  <span class="sec-mark">رحمهما الله</span> أن الطالب</p>
            <div class="flex-column" style="font-weight: bold; color: #c36b00; row-gap: 100px !important;">
                <span class="main-mark" style="font-family: Arabic Typesetting, Tajawal, serif; font-size: 220px !important">[name]</span>
                <p class="prm-mark"><span> أتم دراسة جميع مواد الأكاديمية</span> <span class="main-mark">(34 مادة)</span> في <span class="main-mark"> ستة فصول دراسية</span> <span>واجتازها بتقدير</span>   </p>
                <span class="main-mark" style="font-size: 200px !important; margin-bottom: 60px">[final_result_in_rate]</span>
            </div>
            <div class="flex-column" style="row-gap: 100px !important;">
                <span class="prm-mark">كما في سجله الأكاديمي...</span>
                <p class="prm-mark" style="font-size: 80px !important;">وبناء على ذلك منحت له هذه الشهادة وندعوه للاستمرار في طلب العلم..</p>
                <p class="prm-mark">متمنين له دوام التوفيق والنجاح في طلب العلم والعمل به...</p>
            </div>
        </aside>

        <div class="footer" style="margin-top: 180px">
            <div class="holder">
                <p> <span>حرر بتاريخ: </span> <span>[date_md]</span>  </p>
                <p> <span>الموافق: </span> <span>[date_hj]</span> </p>
            </div>
        </div>

    </section>
</div>

<style>
    .certificate-template {
        height: 2480px !important;
        width: 3508px;
        display: flex;
        justify-content: flex-start;
        row-gap: 50px;
        background-image: url('/assets/img/certificates/graduation/[bg_image]');
        background-position: center;
        flex-direction: column;
        align-items: center;
        background-size: cover;
        padding: 100px;
        margin-bottom: 200px;
    }

    .certificate-template * {
        font-size: 80px;
        font-family: "Tajawal", serif;
    }

    .certificate-template .header-title{
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
    }

    .certificate-template .code-aria{
        display: inline-flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background-color: white;
        padding: 20px;
        border-radius: 20px;
        border: 1px solid #f4f4f4;
    }
    .certificate-template .code-aria *{
        font-size: 50px !important;
    }


    .certificate-template section {
        display: flex;
        /*justify-content: space-between;*/
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
        row-gap: 20px;
    }

    .certificate-template aside {
        display: flex;
        justify-content: center;
        flex-direction: column;
        gap: 100px;
    }

    .certificate-template aside * {
        line-height: 120px;
    }

    .certificate-template p {
        text-align: center;
        font-size: 100px !important;
        color: black;
    }

    .certificate-template aside .prg {
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;

    }

    .certificate-template .header > div {
        display: flex;
        gap: 20px;
        align-items: center !important;
    }

    .certificate-template .header.right-side > div {
        display: flex;
        justify-content: flex-end;
    }

    .certificate-template .header * {
        /*line-height: 20px;*/
        flex: 0 0 auto;
    }

    .certificate-template .left-side {
        text-align: left;
    }

    .certificate-template .right-side {
        text-align: right;
    }

    .certificate-template .header .name {
        font-size: 100px;
        color: green;
        font-weight: bold;
        /*line-height: 120px;*/
    }

    .certificate-template .left-side .name {
        font-family: "Rowdies", "Cantarell", "Philosopher", serif;
        letter-spacing: -0.03ch;
        /*font-size: 90px;*/
    }

    .certificate-template .right-side .name {
        font-family: "Fustat", "Tajawal", serif;
        font-weight: bold;
    }

    .certificate-template .header .name-user {
        font-size: 100px;
        color: #cb5b00;
        font-weight: bold;
        line-height: 80px;
        /*width: 100%;*/
        display: block;
    }

    .certificate-template .main-mark {
        font-size: 100px;
        color: #cb5b00;
        font-weight: bold;
        line-height: 70px;
    }

    .certificate-template .prm-mark {
        font-size: 100px;
        color: green;
        font-weight: bold;
        line-height: 70px;
    }
    .certificate-template .sec-mark {
        font-size: 100px;
        color: gray;
        font-weight: normal;
        line-height: 70px;
    }

    .certificate-template .footer {
        display: flex;
        justify-content: start;
        align-items: start;
        width: 100%;

    }
    .certificate-template .holder {
        display: inline-flex;
        justify-content: start;
        align-items: center;
        flex-direction: column;
    }

    .certificate-template .footer * {
        font-size: 50px;
        line-height: 50px;
    }

    .flex-row, .flex-column{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 7px;
    }
    .flex-column{
        flex-direction: column;
    }

</style>
 --}}
ar-//-<div id="capture" style="position: absolute;color: #4d4d4d; font-family: 'arial', serif; text-shadow: 1px 1px 3px #fff; background-image: url('/assets/img/certificates/courses/[bg_imge]'); background-position: center; text-align: center; background-repeat: no-repeat; background-size: cover;     width: 1364px;
   height: 942px;">
    <div class="forecolor" style="color: black; font-weight: bold; position: absolute; top: 87px; left: 1049px; font-size: 9px !important; direction: rtl;text-align: center;">[site_certificate_code]</div>
    <div class="forecolor" style="color: black;font-weight: bold;position: absolute;top: 787px;left: -10px;font-size: 11px !important;direction: rtl;border-radius: 4px;line-height: 12px;border-radius: 3px;padding: 4px 5px 3px 20px;">حرر بتاريخ : [exam_date_h]</div>
    <div class="forecolor" style="color: black;font-weight: bold;position: absolute;top: 812px;left: -8px;font-size: 11px !important;direction: rtl; border-radius: 4px;line-height: 12px;border-radius: 3px;padding: 4px 5px 3px 30px;">الموافق :   [exam_date_m]</div>
    <div class="forecolor" style=" font-family: Tajawal;";font-weight: bold;">
    <p style="font-size: 25px; color:black; font-weight: bold; margin-top: 193px;">تشهد أكاديمية الإمامين ابن باز وابن العثيمين <span style="font-weight: 200;">رحمهما الله</span> أن [gender_name]</p>
    <p style="font-size: 40px;color: firebrick;margin-top: -21px;"> [name] </p>
</div>
<div style="font-family: Tajawal;">
    <p style="font-weight: bold; font-size: 25px; color:black;margin-top: -10px;"> قد [gender_passed] جميع اختبارات [site_name] بتقدير [rate]  <span style="text-align: center; color: #bb912c;">[degree]%</p>
</div>
<div style="font-family: Tajawal;">
    <div style="font-family: Tajawal; margin-top: 30px;">
        <table style="width: 70%; border-collapse: collapse; direction: rtl; margin: 0 auto;">
            <thead>
            <tr>
                <th style="border: 1px solid #ddd; padding: 8px; font-size: 18px;">المادة</th>
                <th style="border: 1px solid #ddd; padding: 8px; font-size: 18px;">الشيخ</th>
                <th style="border: 1px solid #ddd; padding: 8px; font-size: 18px;">الدرجة</th>
                <th style="border: 1px solid #ddd; padding: 8px; font-size: 18px;">التقدير</th>
            </tr>
            </thead>
            <tbody>
            [term_passed_courses]
            </tbody>
        </table>
    </div>
</div>
<div style="font-family: Tajawal;">
    <p style= "font-size: 20px; color:black;">وبناءً على ذلك تم [gender_gives] هذه الشهادة و[gender_invitaion] للاستمرار في طلب العلم وإكمال باقي المستويات الدراسية بالأكاديمية </p>
    <p style= "font-size: 20px; color:black;">متمنين [gender_to] دوام التوفيق والنجاح</p>
</div>
</div>

//-//en-//-<div id="capture" style="position: absolute;color: #4d4d4d; font-family: 'arial', serif; text-shadow: 1px 1px 3px #fff; background-image: url('/public/assets/img/certificates/courses/[bg_imge]'); text-align: center; background-repeat: no-repeat; background-size: cover; height: 720px !important; width: 1020px;">


    <!-- <div style="position: absolute;width: 100%;top: 20px;text-align: left; left: 47px;"><img style="width: 80px;border-radius: 15px;" src="/public/assets/img/certificates/yemen_flag.jpg"></div>
    <div class="forecolor" style="color: #706e6e; font-weight: bold; position: absolute; top: 35px; left: 130px; direction: rtl;font-size: 18px !important;">الجمهورية اليمنية</div> -->
    <div class="forecolor" style="color: black; font-weight: bold; position: absolute; top: 55px; left: 840px; font-size: 12px !important; direction: rtl;text-align: center;">[test_code]</div>

    <div class="forecolor" style="color: gray;font-weight: bold;position: absolute;top: 585px;left: 860px;font-size: 11px !important;direction: rtl;background-color: white;border-radius: 4px;line-height: 12px;border-radius: 3px;padding: 4px 5px 3px 5px;">[exam_date_h]</div>
    <div class="forecolor" style="color: gray;font-weight: bold;position: absolute;top: 610px;left: 860px;font-size: 11px !important;direction: rtl;background-color: white;border-radius: 4px;line-height: 12px;border-radius: 3px;padding: 4px 5px 3px 5px;">[exam_date_m]</div>




    <div class="forecolor" style="text-align: center; color: #262f6a; font-weight: bold; position: absolute; width: 810px; top: 160px; left: 0px; font-size: 22px !important; font-family: Tajawal;">[name]</div>
    <div class="forecolor" style="color: #262f6a; font-weight: bold; position: absolute; width: 750px; top: 235px; left: 40px; font-size: 20px !important;line-height:22px;"><span style="font-size: 15pt;">[course_name]</span></div>
    <div class="forecolor" style="color: #262f6a; font-weight: bold; position: absolute; width: 750px; top: 325px; left: 40px; font-size: 20px !important;"><span style="font-size: 22pt;"> [site_name]</span></div>
    <div class="forecolor" style="width: 500px; text-align: center; color: #262f6a; font-weight: bold; position: absolute; width: 810px; top: 460px; left: 0px; font-size: 21px !important;"> [rate] <span style="text-align: center; color: #bb912c;">[degree]% </span></div>

    <!-- <div class="forecolor" style="text-align: center;color: #ef5f54;font-weight: bold;position: absolute;width: 730px;top: 690px;left: 0px;font-size: 13px !important;direction: rtl;text-decoration: underline;">www.baldatayiba.com</div> -->
</div>


//-//en-//-<div id="capture" style="position: absolute;color: #4d4d4d; font-family: 'arial', serif; text-shadow: 1px 1px 3px #fff; background-image: url('/public/assets/img/certificates/courses/[bg_imge]'); text-align: center; background-repeat: no-repeat; background-size: cover; height: 720px !important; width: 1020px;">


    <!-- <div style="position: absolute;width: 100%;top: 20px;text-align: left; left: 47px;"><img style="width: 80px;border-radius: 15px;" src="/public/assets/img/certificates/yemen_flag.jpg"></div>
    <div class="forecolor" style="color: #706e6e; font-weight: bold; position: absolute; top: 35px; left: 130px; direction: rtl;font-size: 18px !important;">الجمهورية اليمنية</div> -->
    <div class="forecolor" style="color: black; font-weight: bold; position: absolute; top: 55px; left: 840px; font-size: 12px !important; direction: rtl;text-align: center;">[test_code]</div>

    <div class="forecolor" style="color: gray;font-weight: bold;position: absolute;top: 585px;left: 860px;font-size: 11px !important;direction: rtl;background-color: white;border-radius: 4px;line-height: 12px;border-radius: 3px;padding: 4px 5px 3px 5px;">[exam_date_h]</div>
    <div class="forecolor" style="color: gray;font-weight: bold;position: absolute;top: 610px;left: 860px;font-size: 11px !important;direction: rtl;background-color: white;border-radius: 4px;line-height: 12px;border-radius: 3px;padding: 4px 5px 3px 5px;">[exam_date_m]</div>




    <div class="forecolor" style="text-align: center; color: #262f6a; font-weight: bold; position: absolute; width: 810px; top: 160px; left: 0px; font-size: 22px !important; font-family: Tajawal;">[name]</div>
    <div class="forecolor" style="color: #262f6a; font-weight: bold; position: absolute; width: 750px; top: 235px; left: 40px; font-size: 20px !important;line-height:22px;"><span style="font-size: 15pt;">[course_name]</span></div>
    <div class="forecolor" style="color: #262f6a; font-weight: bold; position: absolute; width: 750px; top: 325px; left: 40px; font-size: 20px !important;"><span style="font-size: 22pt;"> [site_name]</span></div>
    <div class="forecolor" style="width: 500px; text-align: center; color: #262f6a; font-weight: bold; position: absolute; width: 810px; top: 460px; left: 0px; font-size: 21px !important;"> [rate] <span style="text-align: center; color: #bb912c;">[degree]% </span></div>

    <!-- <div class="forecolor" style="text-align: center;color: #ef5f54;font-weight: bold;position: absolute;width: 730px;top: 690px;left: 0px;font-size: 13px !important;direction: rtl;text-decoration: underline;">www.baldatayiba.com</div> -->
</div>