/* Creative Icon certificate — A4 portrait at 96dpi (794 x 1123), site theme colours.
   Vertical positions follow the academy's existing certificate layout. */
.ci-cert {
  position: relative; width: 794px; height: 1123px; overflow: hidden;
  background: #f7f8fc; color: #1a2238; font-family: "Poppins", Arial, sans-serif;
  text-align: center; box-sizing: border-box; line-height: 1.4;
}
.ci-cert * { box-sizing: border-box; margin: 0; }
.ci-cert .bg { position: absolute; left: 0; top: 0; width: 794px; height: 1123px; }
.ci-cert .logos { position: absolute; top: 200px; left: 0; right: 0; height: 124px; display: flex; justify-content: center; align-items: center; gap: 30px; }
.ci-cert .logos .ci-logo { width: 318px; height: 122px; }
.ci-cert .logos .ccert { width: 104px; height: 97px; }
.ci-cert .title { position: absolute; top: 326px; left: 0; right: 0; font-size: 54px; line-height: 75.6px; font-weight: 700; letter-spacing: 2px; color: #1d3b8f; }
.ci-cert .sub { position: absolute; top: 393px; left: 0; right: 0; font-size: 24px; line-height: 33.6px; font-weight: 500; letter-spacing: 3px; color: #f26b1d; }
.ci-cert .presented { position: absolute; top: 447px; left: 0; right: 0; font-size: 17px; line-height: 23.8px; letter-spacing: 3.5px; color: #5b6480; }
.ci-cert .name { position: absolute; top: 470px; left: 120px; right: 120px; height: 78px; font-family: "Great Vibes", cursive; font-size: 62px; line-height: 78px; color: #1a2238; white-space: nowrap; overflow: hidden; }
.ci-cert .name-rule { position: absolute; top: 546px; left: 129px; right: 129px; height: 2px; background: linear-gradient(90deg, #1d3b8f, #1d3b8f 60%, #f26b1d); }
.ci-cert .desc { position: absolute; top: 555px; left: 165px; right: 165px; font-size: 16px; line-height: 29px; color: #1a2238; }
.ci-cert .desc b { font-weight: 600; color: #1d3b8f; }
.ci-cert .desc .m { font-weight: 500; }
.ci-cert .date { position: absolute; top: 651px; left: 0; right: 0; font-size: 16px; line-height: 22.4px; font-weight: 500; letter-spacing: .5px; color: #1a2238; }
.ci-cert .date .sep { color: #f26b1d; padding: 0 8px; }
.ci-cert .tech { position: absolute; top: 686px; left: 90px; right: 90px; height: 50px; display: flex; justify-content: center; align-items: center; gap: 10px; }
.ci-cert .tech img { height: 44px; width: auto; max-width: 112px; object-fit: contain; }
.ci-cert .certno { position: absolute; top: 758px; left: 0; right: 0; font-size: 15px; line-height: 21px; font-weight: 600; letter-spacing: .6px; color: #1d3b8f; }
.ci-cert .sig { position: absolute; top: 790px; width: 200px; height: 100px; display: flex; align-items: flex-end; justify-content: center; }
.ci-cert .sig img { max-height: 96px; max-width: 190px; }
.ci-cert .sig.director { left: 175px; }
.ci-cert .sig.head { left: 445px; }
.ci-cert .sig-label { position: absolute; top: 895px; width: 200px; font-size: 17px; line-height: 23.8px; letter-spacing: .5px; color: #1a2238; }
.ci-cert .sig-label.director { left: 175px; }
.ci-cert .sig-label.head { left: 445px; }
.ci-cert .qr { position: absolute; top: 806px; left: 359px; width: 76px; height: 76px; background: #fff; padding: 4px; border: 1px solid #d7deef; border-radius: 4px; }
.ci-cert .qr img, .ci-cert .qr canvas { width: 66px !important; height: 66px !important; display: block; }
.ci-cert .qr-cap { position: absolute; top: 885px; left: 337px; width: 120px; font-size: 9.5px; line-height: 13px; color: #5b6480; letter-spacing: .2px; }
.ci-cert .medal { position: absolute; top: 928px; left: 355px; width: 84px; height: 104px; }
.ci-cert .revoked { position: absolute; top: 470px; left: -80px; right: -80px; transform: rotate(-28deg); font-size: 104px; font-weight: 800; color: rgba(214, 33, 33, .2); letter-spacing: 12px; }
.ci-cert .copy-mark { position: absolute; top: 1040px; left: 0; right: 0; font-size: 10px; color: #8a90a2; letter-spacing: .4px; }

/* Scaled preview wrapper */
.ci-cert-frame { position: relative; overflow: hidden; box-shadow: 0 12px 40px rgba(19, 42, 107, .18); border-radius: 6px; background: #f7f8fc; }
.ci-cert-frame > .ci-cert { transform-origin: top left; position: absolute; top: 0; left: 0; }