body{ font-size:17px; line-height:1.85; background:#f4f6fb; } /* Page Frame */ .page-frame{ background:#fff; border:1px solid #e2e5f1; border-radius:18px; padding:30px; box-shadow:0 12px 35px rgba(0,0,0,.08); } /* Hero Section */ .hero{ background:linear-gradient(135deg,#eef2ff,#f8faff); border-radius:18px; padding:40px 30px; border:1px solid #dde2ff; } .hero h1{ font-size:34px; font-weight:700; color:#2c2f4a; } .hero-img{ width:100%; max-width:520px; height:auto; } /* Sections */ .section{ margin-top:50px; } .section h2{ font-size:26px; font-weight:700; color:#4c2cc7; border-left:5px solid #4c2cc7; padding-left:12px; margin-bottom:15px; } /* Highlight text */ .highlight{ background:#fff3cd; padding:4px 8px; border-radius:6px; font-weight:600; } /* Main Button */ .btn-main{ background:#4c2cc7; color:#fff; padding:14px 36px; font-size:18px; border-radius:12px; } .btn-main:hover{ background:#3a1fa0; color:#fff; } /* ID Card Preview */ .id-preview img{ width:260px; height:380px; object-fit:cover; border-radius:12px; border:1px solid #ddd; box-shadow:0 8px 25px rgba(0,0,0,.12); transition:.3s; } .id-preview a:hover img{ transform:scale(1.03); } /* CTA Box */ .cta{ border:2px dashed #4c2cc7; background:#fafbff; border-radius:18px; padding:40px; } /* Related Links */ .related-links a{ display:block; padding:4px 0; font-size:16px; } /* Mobile Responsive */ @media(max-width:768px){ .hero{ text-align:center; } .hero-img{ max-width:100%; margin-top:25px; } }