/* Styling for the certificate output */
.certificate-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: 707px;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 auto;
    color: #000;
}

/* Set the specific background for each language */
.cert-persian {
    background-image: url('../images/cer-fa2.webp');
}
.cert-english {
    background-image: url('../images/cer-en2.webp');
}

.certificate-container span {
    position: absolute;
    white-space: nowrap;
}

/* --- Persian Certificate Text Positioning --- */
.cert-validity-fa { top: 167px; right: 485px; color: white; }
.cert-main-text-fa { top: 282px; left: 50%; transform: translateX(-50%); width: 66%; text-align: center; line-height: 1.8; white-space: normal; }
.cert-date-fa-label { bottom: 150px; right: 307px; font-size: 14px; }
.cert-date-fa { bottom: 129px; right: 307px; font-size: 16px; }
.cert-number-fa-label { bottom: 150px; left: 304px; font-size: 14px; }
.cert-number-fa { bottom: 129px; left: 304px; font-size: 16px; }

/* --- English Certificate Text Positioning --- */
.cert-validity-en { top: 168px; right: 489px; color: white; }
.cert-main-text-en { top: 282px; left: 50%; transform: translateX(-50%); width: 66%; text-align: center; direction: ltr; line-height: 1.8; white-space: normal; }
.cert-date-en-label { bottom: 150px; left: 593px; font-size: 14px; direction: ltr; }
.cert-date-en { bottom: 128px; left: 593px; font-size: 16px; }
.cert-number-en-label { bottom: 150px; left: 296px; font-size: 14px; direction: ltr; }
.cert-number-en { bottom: 126px; left: 296px; font-size: 16px; }

/* Responsive adjustments */
@media (max-width: 768px) {
    .certificate-container { background-image: none; height: auto; }
    .certificate-container span { position: static; display: block; width: auto; margin-bottom: 10px; white-space: normal; text-align: right !important; direction: rtl !important; }
}