/* ===========================
   Kalpurush Font
=========================== */

@font-face{

    font-family:'Kalpurush';

    src:url('../fonts/Kalpurush.ttf') format('truetype');

}

@font-face{

    font-family:'Arial-Bold';

    src:url('../fonts/Arial-Bold.ttf') format('truetype');


}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{

    font-family:'Kalpurush',sans-serif;

    background:#f4f8fc;

    color:#222;

}


.eilong{
    font-family:'Arial-Bold';
    color:#ff0000;
    text-align:center;
}
.container{

    width:100%;
    max-width:700px;

    margin:auto;

    padding:10px 15px 40px;

}

/* ===========================
   Header
=========================== */

.header{

    text-align:center;

    margin-bottom:25px;

}

.logo{

    width:90px;

    margin-bottom:15px;

}

.header h1{

    color:#005BAC;

    font-size:34px;

    margin-bottom:8px;

}

.header p{

    color:#666;

    font-size:18px;

    line-height:28px;

}

/* ===========================
   Main Card
=========================== */

.main-card{

    background:#fff;

    border-radius:20px;

    padding:35px;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

    margin-bottom:25px;

}

.main-card h2{

    text-align:center;

    color:#005BAC;

    margin-bottom:10px;

}

.main-card p{

    text-align:center;

    color:#666;

    margin-bottom:30px;

}

/* ===========================
   Buttons
=========================== */

.action-buttons{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-top:25px;

}

.action-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    text-decoration:none;

    color:#fff;

    padding:22px;

    min-height:120px;

    border-radius:18px;

    font-size:24px;

    font-weight:700;

    transition:.25s;

    box-shadow:0 8px 20px rgba(0,0,0,.10);

}

.action-btn:hover{

    transform:translateY(-4px);

}

.verify-btn{

    background:#198754;

}

.guarantee-btn{

    background:#005BAC;

}

.register-btn{

    background:#ff9800;

}

/* ===========================
   Dynamic Area
=========================== */

.dynamic-area{

    margin-top:25px;

}

/* ===========================
   Poster
=========================== */

.poster-section{

    margin-top:35px;

    background:#fff;

    border-radius:20px;

    padding:25px;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

}

.poster-section h3{

    text-align:center;

    color:#005BAC;

    margin-bottom:20px;

}

.poster{

    width:100%;

    border-radius:15px;

    border:1px solid #ddd;

}

/* ===========================
   Footer
=========================== */

.footer{

    margin-top:30px;

    text-align:center;

    background:#fff;

    border-radius:20px;

    padding:30px;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

}

.footer h3{

    color:#005BAC;

    margin-bottom:15px;

}

.footer p{

    margin-bottom:8px;

    color:#555;

    font-size:17px;

}

.footer hr{

    margin:20px 0;

    border:none;

    border-top:1px solid #ddd;

}

.footer small{

    color:#888;

}

/* ===========================
   Form
=========================== */

.form-box{

    background:#fff;

    border-radius:20px;

    padding:30px;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

}

.form-box h2{

    color:#005BAC;

    text-align:center;

    margin-bottom:20px;

}

.form-box input{

    width:100%;

    height:55px;

    border:1px solid #ccc;

    border-radius:12px;

    padding:0 15px;

    font-size:18px;

    margin-bottom:20px;

    font-family:'Kalpurush';

}

.form-box button{

    width:100%;

    height:55px;

    border:none;

    border-radius:12px;

    background:#005BAC;

    color:#fff;

    font-size:20px;

    cursor:pointer;

    transition:.25s;

    font-family:'Kalpurush';

}

.form-box button:hover{

    background:#00498f;

}

/* ===========================
   Result Card
=========================== */

.result-card{

    background:#fff;

    border-radius:20px;

    padding:30px;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

}

.result-title{

    font-size:26px;

    text-align:center;

    margin-bottom:25px;

}

.success{

    color:#198754;

}

.warning{

    color:#ff9800;

}

.danger{

    color:#dc3545;

}

.result-table{

    width:100%;

    border-collapse:collapse;

}

.result-table td{

    padding:14px;

    border-bottom:1px solid #eee;

}

.result-table td:first-child{

    width:45%;

    font-weight:bold;

}


.verify-page{

max-width:700px;

margin:40px auto;

padding:20px;

}

.verify-card{

background:#fff;

padding:30px;

border-radius:18px;

box-shadow:0 12px 35px rgba(0,0,0,.08);

}

.verify-success{

text-align:center;

}

.verify-failed{

text-align:center;

}

.verify-icon{

font-size:70px;

margin-bottom:20px;

}

.verify-success h2{

color:#198754;

margin-bottom:10px;

}

.verify-failed h2{

color:#dc3545;

margin-bottom:15px;

}

.verify-subtitle{

color:#666;

margin-bottom:30px;

}

.verify-info{

margin-top:20px;

}

.info-row{

display:flex;

justify-content:space-between;

padding:15px 0;

border-bottom:1px solid #eee;

font-size:17px;

}

.active{

color:#198754;

font-weight:bold;

}

.expired{

color:#dc3545;

font-weight:bold;

}

.loader{

width:60px;

height:60px;

border:6px solid #eee;

border-top:6px solid #198754;

border-radius:50%;

margin:auto;

animation:spin .8s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

@media(max-width:768px){

.verify-card{

padding:20px;

}

.info-row{

display:block;

text-align:left;

}

.info-row strong{

display:block;

margin-top:8px;

}

}

.container{

max-width:900px;

margin:auto;

padding:0 20px;

}

.site-header{

background:#ffffff;

box-shadow:0 2px 15px rgba(0,0,0,.08);

padding:18px 0;

margin-bottom:30px;

}

.logo-area{

display:flex;

align-items:center;

gap:15px;

text-decoration:none;

color:#222;

}

.logo-area img{

width:70px;

height:70px;

object-fit:contain;

}

.logo-area h1{

font-size:28px;

margin:0;

color:#0d6efd;

}

.logo-area p{

margin-top:4px;

color:#666;

font-size:15px;

}

.site-footer{

margin-top:60px;

padding:50px 0;

background:#fff;

border-top:1px solid #eee;

}

.guide{

text-align:center;

margin-bottom:40px;

}

.guide h3{

margin-bottom:12px;

color:#198754;

}

.guide p{

color:#666;

margin-bottom:20px;

}

.guide-image{

max-width:100%;

border-radius:15px;

box-shadow:0 8px 25px rgba(0,0,0,.08);

}

.support{

text-align:center;

line-height:2;

margin-top:35px;

}

.support h3{

margin-bottom:15px;

}

.copyright{

margin-top:30px;

text-align:center;

color:#777;

font-size:14px;

}

.input-card{

    background:#fff;

    padding:20px;

    border-radius:18px;

    margin-top:25px;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

}

.input-card h3{

    text-align:center;

    margin-bottom:10px;

}

.input-card p{

    text-align:center;

    color:#666;

    margin-bottom:20px;

}

.input-card input{

    width:100%;

    padding:16px;

    border:2px solid #ddd;

    border-radius:12px;

    font-size:18px;

    margin-bottom:15px;

    box-sizing:border-box;

}

.input-card input:focus{

    border-color:#198754;

    outline:none;

}

.input-card button{

    width:100%;

    padding:16px;

    background:#198754;

    color:#fff;

    border:none;

    border-radius:12px;

    font-size:18px;

    font-weight:600;

}