<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
@page {
    size: A4;
    margin: 0;
}
body {
    margin: 0;
}

.page {
    position: relative;
    width: 210mm;
    height: 297mm;
}

/* FULL BACKGROUND IMAGE */
.bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 210mm;
    height: 297mm;
}

/* STUDENT NAME */
.name {
    position: absolute;
    top: 150mm;   /* 🔥 adjust small up/down if needed */
    width: 100%;
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    color: #0f172a;
}

/* CERTIFICATE ID */
.cert-id {
    position: absolute;
    top: 35mm;
    right: 30mm;
    font-size: 12px;
    color: #334155;
}

/* ISSUE DATE */
.issue-date {
    position: absolute;
    top: 42mm;
    right: 30mm;
    font-size: 12px;
    color: #334155;
}
</style>
</head>

<body>
<div class="page">

    <img class="bg" src="assets/certificate_bg.png">

    <div class="cert-id">Certificate ID: {{CERT_ID}}</div>
    <div class="issue-date">Issue Date: {{ISSUE_DATE}}</div>

    <div class="name">{{NAME}}</div>

</div>
</body>
</html>