<!DOCTYPE html>
<html lang="am">
<head>
    <meta charset="UTF-8">
    <title>የምስክር ወረቀት - Certificate of Completion</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Ethiopic:wght@400;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,400&display=swap');

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f5f5f5;
            font-family: 'Noto Sans Ethiopic', 'Playfair Display', serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

        .certificate-container {
            width: 950px;
            height: 670px;
            background: #fff;
            padding: 25px;
            position: relative;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            border: 2px solid #d4af37;
        }

        .outer-border {
            border: 2px solid #c5a059;
            height: 100%;
            width: 100%;
            padding: 6px;
            position: relative;
        }

        .inner-border {
            border: 1px solid #d4af37;
            height: 100%;
            width: 100%;
            padding: 20px 30px;
            text-align: center;
            position: relative;
            background: linear-gradient(135deg, #ffffff 0%, #fffcf7 100%);
        }

        /* Decorative Corners */
        .corner {
            width: 25px;
            height: 25px;
            position: absolute;
            border-color: #c5a059;
            border-style: solid;
        }
        .top-left { top: 4px; left: 4px; border-width: 3px 0 0 3px; }
        .top-right { top: 4px; right: 4px; border-width: 3px 3px 0 0; }
        .bottom-left { bottom: 4px; left: 4px; border-width: 0 0 3px 3px; }
        .bottom-right { bottom: 4px; right: 4px; border-width: 0 3px 3px 0; }

        /* Header Layout with Logo */
        .header-section {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
            border-bottom: 1px solid #e0d0b0;
            padding-bottom: 10px;
        }

        .logo-box {
            width: 80px;
            height: 80px;
            border: 2px solid #c5a059;
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: #faf6ee;
            color: #886c25;
            font-size: 10px;
            font-weight: bold;
            padding: 5px;
            text-align: center;
        }

        .logo-box svg {
            width: 32px;
            height: 32px;
            fill: #c5a059;
            margin-bottom: 2px;
        }

        .header-text {
            flex: 1;
            padding: 0 15px;
        }

        .header-text h1 {
            font-size: 22px;
            color: #2c2c2c;
            font-weight: 700;
            letter-spacing: 0.5px;
            margin-bottom: 3px;
        }

        .header-text h2 {
            font-size: 13px;
            color: #886c25;
            text-transform: uppercase;
            letter-spacing: 1.5px;
        }

        .cert-info-top {
            font-size: 11px;
            color: #555;
            text-align: right;
            line-height: 1.5;
        }

        /* Certificate Title */
        .title {
            font-size: 30px;
            color: #c5a059;
            font-weight: bold;
            margin-top: 5px;
            margin-bottom: 2px;
        }

        .subtitle {
            font-size: 13px;
            color: #666;
            margin-bottom: 15px;
            font-style: italic;
            letter-spacing: 2px;
        }

        /* Recipient and Details */
        .presented-to {
            font-size: 14px;
            color: #444;
            margin-bottom: 5px;
        }

        .student-name {
            font-size: 26px;
            color: #1a1a1a;
            font-weight: 700;
            border-bottom: 2px solid #c5a059;
            display: inline-block;
            padding: 0 25px 3px 25px;
            margin-bottom: 12px;
            min-width: 320px;
        }

        .reason {
            font-size: 14px;
            color: #333;
            line-height: 1.6;
            max-width: 720px;
            margin: 0 auto 15px auto;
        }

        .course-name {
            color: #886c25;
            font-weight: 700;
        }

        /* Training Details Breakdown Table */
        .details-grid {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin: 10px auto 20px auto;
            max-width: 750px;
            background: #faf6ee;
            padding: 8px 15px;
            border-radius: 6px;
            border: 1px dashed #d4af37;
            font-size: 12px;
            color: #444;
        }

        .details-item {
            display: flex;
            gap: 5px;
        }

        .details-item strong {
            color: #886c25;
        }

        /* Footer / Signatures */
        .footer {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-top: 15px;
            padding: 0 30px;
        }

        .signature-block {
            text-align: center;
            width: 180px;
        }

        .signature-line {
            border-bottom: 1px solid #777;
            margin-bottom: 5px;
            height: 30px;
        }

        .signature-title {
            font-size: 12px;
            color: #555;
            font-weight: 600;
        }

        /* Gold Seal Badge */
        .badge {
            width: 65px;
            height: 65px;
            background: radial-gradient(circle, #f0d078 0%, #c5a059 100%);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 2px dashed #fff;
            box-shadow: 0 0 0 4px #c5a059, 0 4px 10px rgba(0,0,0,0.15);
            color: #fff;
            font-size: 9px;
            font-weight: bold;
            text-transform: uppercase;
            text-align: center;
            letter-spacing: 1px;
        }
    </style>
</head>
<body>

<div class="certificate-container">
    <div class="outer-border">
        <!-- Corner Ornaments -->
        <div class="corner top-left"></div>
        <div class="corner top-right"></div>
        <div class="corner bottom-left"></div>
        <div class="corner bottom-right"></div>

        <div class="inner-border">
            <!-- Top Header with Logo and Certificate No -->
            <div class="header-section">
                <!-- Vector Logo Placeholder -->
                <div class="logo-box">
                    <svg viewBox="0 0 24 24">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 16h-2v-2h2v2zm1.07-7.75l-.9.92C12.45 11.9 12 12.5 12 14h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H7c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.04-.42 1.99-1.07 2.75z" fill="none"/>
                        <path d="M12 2a10 10 0 1010 10A10 10 0 0012 2zm-1 14a1 1 0 112 0 1 1 0 01-2 0zm3.5-6.5c0 1.5-1.5 2-2 3v1h-1v-1.5c0-1 .5-1.5 1.5-2.5s1-1.2 1-2a1.5 1.5 0 00-3 0H9a3 3 0 016 0c0 1-.5 1.5-1.5 2z"/>
                    </svg>
                    <span>KIDIST BEAUTY</span>
                </div>

                <div class="header-text">
                    <h1>ቅድስት ደርሶ የሴቶች የውበት ሳሎን እና ማሰልጠኛ</h1>
                    <h2>Kidist Derso Beauty Salon & Training Center</h2>
                </div>

                <div class="cert-info-top">
                    <div><strong>ተ.ቁ / Cert No:</strong> KD-2026/____</div>
                    <div><strong>አድራሻ / Address:</strong> ሁመራ፣ ኢትዮጵያ[span_0](start_span)[span_0](end_span)</div>
                    <div><strong>ስልክ / Tel:</strong> +251 9__ __ __ __</div>
                </div>
            </div>

            <!-- Title -->
            <div class="title">የምስክር ወረቀት</div>
            <div class="subtitle">CERTIFICATE OF COMPLETION</div>

            <!-- Recipient -->
            <div class="presented-to">ይህ የምስክር ወረቀት ለ</div>
            <div class="student-name">______________________</div>

            <!-- Course Details -->
            <div class="reason">
                በማሰልጠኛችን ተገኝተው በ<span class="course-name">[ የሙያ ዘርፉ ስም / የኮርሱ ዓይነት ]</span> 
                የተሰጠውን Theory እና Practical ትምህርት በብቃት አጠናቀው ይህንን የምስክር ወረቀት ለማግኘት የበቁ መሆናቸውን እንመሰክራለን።
            </div>

            <!-- Additional Detailed Breakdown -->
            <div class="details-grid">
                <div class="details-item"><strong>የስልጠናው ሰዓት (Duration):</strong> <span>___ ሰዓታት / Hours</span></div>
                <div class="details-item">|</div>
                <div class="details-item"><strong>የስልጠና ደረጃ (Level):</strong> <span>መሰረታዊ / Basic & Advance</span></div>
                <div class="details-item">|</div>
                <div class="details-item"><strong>የተሰጠበት ቀን (Issue Date):</strong> <span>___/___/2019 ዓ.ም</span></div>
            </div>

            <!-- Footer Section -->
            <div class="footer">
                <div class="signature-block">
                    <div class="signature-line"></div>
                    <div class="signature-title">የዋና አሰልጣኝ ፊርማ<br>(Head Trainer)</div>
                </div>

                <div class="badge">
                    <span>OFFICIAL<br>QUALIFIED<br>SEAL</span>
                </div>

                <div class="signature-block">
                    <div class="signature-line"></div>
                    <div class="signature-title">የስራ አስኪያጅ ፊርማ<br>(Manager)</div>
                </div>
            </div>

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

</body>
</html>
