/* =========================================================
   CRESCADEMY CERTIFICATE TEMPLATE
   Fixed export dimensions: 1600 × 1100
========================================================= */

.cd-certificate {

    width: 1600px;
    height: 1100px;

    position: relative;

    overflow: hidden;

    box-sizing: border-box;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(0, 195, 255, 0.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(132, 74, 255, 0.20),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #07172f 0%,
            #0d2b55 45%,
            #1d2264 100%
        );

    font-family:
        Arial,
        Helvetica,
        sans-serif;

}


/* =========================================================
   BACKGROUND ICONS
========================================================= */

.cd-certificate-icons {

    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 1;

}

.cd-certificate-icons i {

    position: absolute;

    color: rgba(255, 255, 255, 0.055);

    font-size: 145px;

    transform: rotate(-12deg);

}


/* Individual positions */

.cd-certificate-icons i:nth-child(1) {
    top: 90px;
    left: 80px;
}

.cd-certificate-icons i:nth-child(2) {
    top: 80px;
    right: 130px;
    font-size: 125px;
    transform: rotate(15deg);
}

.cd-certificate-icons i:nth-child(3) {
    bottom: 120px;
    left: 100px;
    font-size: 150px;
    transform: rotate(12deg);
}

.cd-certificate-icons i:nth-child(4) {
    bottom: 100px;
    right: 110px;
    font-size: 160px;
}

.cd-certificate-icons i:nth-child(5) {
    top: 450px;
    left: 250px;
    font-size: 100px;
    transform: rotate(8deg);
}

.cd-certificate-icons i:nth-child(6) {
    top: 400px;
    right: 270px;
    font-size: 110px;
}

.cd-certificate-icons i:nth-child(7) {
    bottom: 270px;
    right: 400px;
    font-size: 120px;
}

.cd-certificate-icons i:nth-child(8) {
    top: 250px;
    left: 700px;
    font-size: 105px;
}


/* =========================================================
   GLOWS
========================================================= */

.cd-certificate-glow {

    position: absolute;

    width: 550px;
    height: 550px;

    border-radius: 50%;

    filter: blur(90px);

    pointer-events: none;

    z-index: 1;

}

.cd-glow-one {

    top: -280px;
    left: -200px;

    background:
        rgba(0, 195, 255, 0.18);

}

.cd-glow-two {

    bottom: -300px;
    right: -180px;

    background:
        rgba(139, 92, 246, 0.20);

}


/* =========================================================
   DECORATIVE LINES
========================================================= */

.cd-certificate-top-line,
.cd-certificate-bottom-line {

    position: absolute;

    left: 0;
    right: 0;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            #16c8ff,
            #3b82f6,
            #8b5cf6,
            #16c8ff
        );

    z-index: 5;

}

.cd-certificate-top-line {
    top: 0;
}

.cd-certificate-bottom-line {
    bottom: 0;
}


/* =========================================================
   FRAME
========================================================= */

.cd-certificate-frame {

    position: absolute;

    inset: 42px;

    border:
        2px solid
        rgba(255, 255, 255, 0.30);

    border-radius: 24px;

    padding: 18px;

    box-sizing: border-box;

    z-index: 4;

}

.cd-certificate-inner {

    width: 100%;
    height: 100%;

    position: relative;

    box-sizing: border-box;

    border:
        1px solid
        rgba(255, 255, 255, 0.15);

    border-radius: 16px;

}


/* =========================================================
   LOGO
========================================================= */

.cd-certificate-logo {

    position: absolute;

    top: 60px;
    left: 70px;

    width: 125px;
    height: 125px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 30px;

    background:
        black;

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.20);

}

.cd-certificate-logo img {

    width: 150px;
    height: 150px;

    object-fit: contain;

}


/* =========================================================
   BRAND
========================================================= */

.cd-certificate-brand {

    position: absolute;

    top: 70px;
    right: 75px;

    font-size: 24px;

    font-weight: 800;

    letter-spacing: 5px;

    color: rgba(255, 255, 255, 0.78);

}


/* =========================================================
   TITLE
========================================================= */

.cd-certificate-title {

    position: absolute;

    top: 155px;

    left: 0;
    right: 0;

    text-align: center;

}

.cd-certificate-title h1 {

    margin: 0;

    font-family:
        Georgia,
        'Times New Roman',
        serif;

    font-size: 82px;

    line-height: 1;

    letter-spacing: 8px;

    font-weight: 700;

    color: #ffffff;

}

.cd-certificate-title span {

    display: block;

    margin-top: 24px;

    font-size: 22px;

    letter-spacing: 12px;

    font-weight: 800;

    color: #72e5ff;

}


/* =========================================================
   PRESENTED
========================================================= */

.cd-certificate-presented {

    position: absolute;

    top: 340px;

    left: 0;
    right: 0;

    margin: 0;

    text-align: center;

    font-size: 23px;

    color:
        rgba(255, 255, 255, 0.65);

}


/* =========================================================
   STUDENT
========================================================= */

.cd-certificate-student {

    position: absolute;

    top: 385px;

    left: 170px;
    right: 170px;

    margin: 0;

    text-align: center;

    font-family:
        Georgia,
        'Times New Roman',
        serif;

    font-size: 62px;

    line-height: 1.15;

    color: #ffffff;

    font-weight: 700;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.cd-certificate-name-line {

    position: absolute;

    top: 470px;

    left: 300px;
    right: 300px;

    height: 1px;

    background:
        rgba(255, 255, 255, 0.30);

}


/* =========================================================
   COMPLETION
========================================================= */

.cd-certificate-completion {

    position: absolute;

    top: 500px;

    left: 0;
    right: 0;

    margin: 0;

    text-align: center;

    font-size: 21px;

    color:
        rgba(255, 255, 255, 0.65);

}


/* =========================================================
   COURSE
========================================================= */

.cd-certificate-course {

    position: absolute;

    top: 535px;

    left: 250px;
    right: 250px;

    margin: 0;

    text-align: center;

    font-size: 38px;

    color: #ffffff;

    font-weight: 700;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


/* =========================================================
   DETAILS
========================================================= */

.cd-certificate-details {

    position: absolute;

    left: -25px;
    right: 85px;

    bottom: 125px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 25px;

}

.cd-certificate-detail {

    text-align: center;

}

.cd-certificate-detail span {

    display: block;

    margin-bottom: 10px;

    font-size: 14px;

    text-transform: uppercase;

    letter-spacing: 2px;

    color:
        rgba(255, 255, 255, 0.52);

}

.cd-certificate-detail strong {

    display: block;

    font-size: 19px;

    color: #ffffff;

}


/* =========================================================
   VERIFIED SEAL
========================================================= */

.cd-certificate-seal {

    position: absolute;

    right: 60px;
    top: 760px;

    width: 150px;

    text-align: center;

}

.cd-seal-circle {

    width: 88px;
    height: 88px;

    margin: 0 auto 10px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    border:
        3px solid
        rgba(114, 229, 255, 0.8);

    box-shadow:
        0 0 0 8px
        rgba(114, 229, 255, 0.07);

}

.cd-seal-circle i {

    font-size: 36px;

    color: #72e5ff;

}

.cd-certificate-seal strong {

    display: block;

    font-size: 14px;

    letter-spacing: 3px;

}

.cd-certificate-seal span {

    display: block;

    margin-top: 5px;

    font-size: 10px;

    letter-spacing: 2px;

    color:
        rgba(255, 255, 255, 0.55);

}


/* =========================================================
   SIGNATURE
========================================================= */

.cd-certificate-signature {

    position: absolute;

    left: 85px;

    bottom: 45px;

    width: 230px;

    text-align: center;

}

.cd-signature-line {

    width: 100%;

    height: 1px;

    margin-bottom: 9px;

    background:
        rgba(255, 255, 255, 0.50);

}

.cd-certificate-signature strong {

    display: block;

    font-family:
        'Brush Script MT',
        cursive;

    font-size: 27px;

    font-weight: 400;

}

.cd-certificate-signature span {

    display: block;

    margin-top: 3px;

    font-size: 10px;

    letter-spacing: 1px;

    color:
        rgba(255, 255, 255, 0.50);

}





/* =========================================================
   SCREEN PREVIEW
========================================================= */

.certificate-template-preview {

    width: 100%;

    position: relative;

    overflow: hidden;

}

.certificate-template-stage {

    position: relative;

    width: 100%;

    overflow: hidden;

}

.certificate-template-stage
.cd-certificate {

    transform-origin:
        top left;

}