:root {
  --cert-heading: "Montserrat", sans-serif;
  --cert-body: "Poppins", sans-serif;
  --cert-script: "Great Vibes", cursive;
}

.cert-title {
    font-family: var(--cert-body);
    font-size: clamp(28px, 5.5vw, 48px);
    font-weight: bolder;
    color: #371806;
    line-height: 0.95;
    margin-bottom: 8px;
}
 .recipient-name {
    font-size: 4.3rem;
    font-family: 'Great Vibes', cursive;
    letter-spacing: 4px;
    color: #1a1a1a;
  }
  .course-modules {
    color: #1a1a1a;
    text-transform: capitalize;
    font-size: 0.9rem;
  }
  .for-label {
    font-size: 0.8rem;
    color: #1a1a1a;
    margin-bottom: 0px;
  }
/* .recipient-name {
    font-family: 'Great Vibes', cursive;
    font-size: 5rem;
    color: #1a1a1a;
    margin: 20px 0;
} */

/* NOTE: .cert-title, .cert-presented, .recipient-name, .for-label,
   .course-name, .course-modules, .sig-name, .sig-role, .contact-row,
   .cert-top-blob, and .cert-date-text are intentionally NOT redefined here.
   They're already sized in certificate-template.html's inline <style> block,
   tuned specifically so the certificate fits one fixed A4-landscape page.
   This stylesheet loads after that inline block, so redeclaring those same
   selectors here at larger sizes silently wins the cascade and was pushing
   the footer (address / programme coordinator / QR) below the page's fixed
   height, clipping it. Only unique, non-conflicting rules stay below. */

.certificate-logo {
  width: 210px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  padding: 10px;
}

.certificate-logo-image {
  width: 100%;

  height: auto;

  object-fit: contain;
}

.certified-emblem {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cert-phone-text {
  font-family: sans-serif;
  font-weight: 600;
}

/* Responsive Scaling (screen preview only — inert under the fixed-size
   @media print layout used for PDF generation) */
@media (max-width: 768px) {
  .cert-card {
    font-size: 0.8em;
  }
  .cert-title {
    font-size: 3rem;
  }
  .recipient-name {
    font-size: 3.5rem;
  }
  .seal {
    width: 120px;
    height: 120px;
  }
  .certified-emblem {
    width: 100px;
    height: 100px;
  }
}
@media (max-width: 900px) {
  .certificate-logo {
    width: 165px;
    height: 68px;
  }
}

@media (max-width: 700px) {
  .certificate-logo {
    width: 145px;
    height: 60px;

    padding: 8px;
  }
}

@media (max-width: 500px) {
  .certificate-logo {
    width: 120px;
    height: 52px;
  }
}
@media (max-width: 568px) {
  .recipient-name {
    font-size: 1.8rem;
  }
  .cert-title {
    font-size: 2rem;
  }
}

.contact-icon-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1c0800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-icon-circle svg {
  display: block;
}