body{
    background:#f4f4f4;
    font-family:tahoma;
}

.cg-page{
    display:flex;
    flex-direction:row-reverse;
    gap:50px;
    padding:50px;
    align-items:flex-start;
}
/* FORM */

.cg-form{
    width:350px;
    background:#fff;
    padding:25px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    position:sticky;
    top:30px;
}

.cg-form h2{
    margin-bottom:25px;
    color:#0f172a;
}

.cg-form label{
    display:block;
    margin-bottom:8px;
    margin-top:15px;
    font-size:14px;
    font-weight:bold;
}

.cg-form input,
.cg-form textarea{
    width:100%;
    padding:14px;
    border:1px solid #ddd;
    border-radius:12px;
    font-size:15px;
}

.cg-form textarea{
    height:140px;
    resize:none;
}

.template-buttons{
    display:flex;
    gap:10px;
    margin-top:20px;
    flex-wrap:wrap;
}

.template-btn{
    border:none;
    padding:12px 18px;
    border-radius:10px;
    cursor:pointer;
    background:#ddd;
    font-size:14px;
}

.template-btn.active{
    background:#0f172a;
    color:#fff;
}

/* PREVIEW */

.cg-preview{
    flex:1;
}

.certificate{
    width:1123px;
    height:794px;
    background:#fff;
    position:relative;
    overflow:hidden;
    border:12px solid #c8a75d;
    padding:70px;
    box-sizing:border-box;
    text-align:center;
    font-family:tahoma;
}

/* الشعار */

.certificate-logo{
   width: 140px;
max-width: 140px;
display: block;
margin: 0 auto;
}

/* اسم المدرسة */

.school-name{
    font-size:28px;
    color:#777;
    margin-top:10px;
}

/* عبارة التكريم */

.award-text{
    font-size:30px;
    color:#444;
    margin-top:35px;
    line-height:2;
}

/* اسم الطالب */

#previewName{
    font-size:65px;
    color:#0f1e46;
    margin-top:35px;
    font-weight:bold;
}

/* نص الشهادة */

.description{
    width:80%;
    margin:40px auto;
    font-size:30px;
    line-height:2.2;
    color:#444;
}

/* التواقيع */

.signatures{
    width:100%;
    display:flex;
    justify-content:space-between;
    margin-top:70px;
}

.sign-box{
    width:250px;
    text-align:center;
}

.sign-title{
    font-size:24px;
    color:#777;
    margin-bottom:15px;
}

.sign-name{
    font-size:28px;
    color:#111;
    font-weight:bold;
}

/* التاريخ */

.date{
    margin-top:40px;
    font-size:26px;
    color:#777;
}
/* TOP SHAPE */

.top-shape{
    position:absolute;
    top:0;
    left:0;
    width:320px;
    height:120px;
    background:#0f172a;
    clip-path:polygon(0 0,100% 0,70% 100%,0 100%);
}

/* TEXT */

.certificate h1{
    text-align:center;
    margin-top:80px;
    font-size:62px;
    color:#0f172a;
}

.school-name{
    text-align:center;
    font-size:30px;
    margin-top:40px;
}

.certificate-title{
    text-align:center;
    margin-top:30px;
    font-size:32px;
}

#previewStudent{
    text-align:center;
    margin-top:40px;
    font-size:56px;
    color:#d4af37;
}

.certificate-text{
    text-align:center;
    margin-top:50px;
    font-size:32px;
    line-height:2;
}

/* FOOTER */

.certificate-footer{
    display:flex;
    justify-content:space-between;
    margin-top:100px;
}

.certificate-footer span{
    display:block;
    margin-bottom:15px;
    font-size:22px;
}

.certificate-footer strong{
    font-size:28px;
}

.certificate-date{
    text-align:center;
    margin-top:70px;
    font-size:26px;
}

/* TEMPLATE 2 */

.template2{
    background:#f7f5ef;
    border-color:#14532d;
}

.template2 h1{
    color:#14532d;
}

.template2 #previewStudent{
    color:#14532d;
}

.template2 .top-shape{
    background:#14532d;
}

/* TEMPLATE 3 */

.template3{
    background:#0f172a;
    color:#fff;
    border-color:#38bdf8;
}

.template3 h1{
    color:#38bdf8;
}

.template3 #previewStudent{
    color:#facc15;
}

.template3 .school-name,
.template3 .certificate-title,
.template3 .certificate-text,
.template3 .certificate-date{
    color:#fff;
}

.template3 .top-shape{
    background:#38bdf8;
}
/* FIX ALIGNMENT */

.school-name,
.certificate-title,
.certificate-text,
.certificate-date,
#previewStudent{
    width:100%;
    text-align:center;
}

.certificate-footer{
    width:100%;
    display:flex;
    justify-content:space-between;
    margin-top:100px;
}

.certificate-footer div{
    width:40%;
    text-align:center;
}

/* FORM FIX */

.cg-form{
    z-index:10;
}

/* MOBILE */

@media(max-width:1200px){

    .cg-page{
        flex-direction:column;
        padding:20px;
    }

    .certificate{
        width:100%;
        padding:40px;
        min-height:auto;
    }

    .cg-form{
        width:100%;
        position:relative;
    }

}
.certificate-logo{
    width:420px;
    display:block;
    margin:40px auto;
}