/*=========================================
Codever Diploma Verification
verification.css
=========================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Segoe UI",sans-serif;
}

body{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#eef4ff;

    background-image:
    radial-gradient(circle at top left,#dbeafe 0%,transparent 35%),
    radial-gradient(circle at bottom right,#ffffff 0%,transparent 40%);

    padding:25px;

}
.page{

    width:100%;

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}

.container{

    width:100%;
    max-width:760px;

}

.card{

    background:#ffffff;

    border-radius:28px;

    padding:55px;

    box-shadow:
    0 20px 60px rgba(15,23,42,.08);

}

.logo{

    width:95px;

    display:block;

    margin:0 auto 25px;

}

h1{

    text-align:center;

    font-size:48px;

    color:#1e3a8a;

    font-weight:700;

    margin-bottom:12px;

}

.subtitle{

    text-align:center;

    color:#6b7280;

    font-size:20px;

    margin-bottom:40px;

}

form{

    display:flex;

    flex-direction:column;

}

label{

    font-size:16px;

    font-weight:600;

    color:#374151;

    margin-bottom:12px;

}

input{

    width:100%;

    height:60px;

    border:1px solid #d9e2ef;

    border-radius:14px;

    padding:0 22px;

    font-size:17px;

    outline:none;

    transition:.3s;

}

input:focus{

    border-color:#2563eb;

    box-shadow:0 0 0 4px rgba(37,99,235,.12);

}

.btn-green{

    width:100%;

    height:60px;

    border:none;

    border-radius:14px;

    margin-top:25px;

    background:#2563eb;

    color:#fff;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.btn-green:hover{

    background:#1d4ed8;

}

/*=========================
Result
=========================*/

#result{

    width:100%;

    max-width:760px;

    margin-top:35px;

}

.result-card{

    background:#ffffff;

    margin-top:35px;

    border-radius:24px;

    padding:35px;

    box-shadow:
    0 20px 60px rgba(15,23,42,.08);

}

.result-card h2{

    color:#16a34a;

    margin-bottom:25px;

}

.info{

    padding:10px 0;

    border-bottom:1px solid #edf2f7;

    color:#374151;

}

.info:last-child{

    border:none;

}

.result-card img{

    width:100%;

    margin-top:30px;

    border-radius:16px;

    border:1px solid #dbe3f0;

}

.download-btn{

    display:inline-block;

    margin-top:25px;

    padding:14px 24px;

    background:#2563eb;

    color:#fff;

    text-decoration:none;

    border-radius:12px;

    font-weight:600;

}

.download-btn:hover{

    background:#1d4ed8;

}

.not-found{

    margin-top:35px;

    background:#ffffff;

    border-radius:24px;

    padding:35px;

    text-align:center;

    box-shadow:
    0 20px 60px rgba(15,23,42,.08);

    color:#dc2626;

}

@media(max-width:768px){

.card{

    padding:35px 25px;

}

h1{

    font-size:36px;

}

.subtitle{

    font-size:18px;

}

.logo{

    width:75px;

}

}