body{font-family:sans-serif;margin:0;background:#f4f6f9;color:#333;}
    .header{background:#fff;border-bottom:2px solid #cfd6ce;padding:10px 0;}
    .main-menu{max-width:1200px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:0 15px;}
    .logo{font-size:22px;color:#2a80b9;font-weight:bold;text-decoration:none;}
    .menu-icon{font-size:28px;cursor:pointer;color:#2a80b9;}
    .sidenav{height:100%;width:0;position:fixed;z-index:99999;top:0;left:0;background:#fafafa;overflow-x:hidden;transition:.4s;padding-top:60px;box-shadow:2px 0 10px rgba(0,0,0,.1);}
    .sidenav a{padding:10px 15px 10px 32px;font-size:19px;color:#222;display:block;transition:.3s;text-decoration:none;}
    .sidenav a:hover{color:#2A80B9;}
    .sidenav .closebtn{position:absolute;top:15px;right:25px;font-size:36px;color:#888;cursor:pointer;}
    .container{max-width:1000px;margin:30px auto;padding:25px;background:#fff;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,.08);}
    h1{color:#222;text-align:left;margin-bottom:20px;font-size:20px;}
    textarea{width:98%;height:90px;padding:12px;font-size:1.1em;border:1px solid #ccc;border-radius:6px;margin-bottom:15px;resize:vertical;}
    .controls{margin-bottom:25px;text-align:center;}
    .controls label{display:inline-block;margin:8px 12px;font-weight:600;}
    .controls input[type="range"]{width:120px;}
    .preview-box{border:1px solid #ddd;margin:10px 0;padding:35px;text-align:center;white-space:pre-wrap;border-radius:8px;background:#fff;position:relative;}
    .font-label{font-weight:bold;margin:75px 0 8px;color:#222;font-size:1.1em;}
    .download-buttons{float:right;margin-top:8px;}
    .download-buttons button{margin-left:6px;padding:6px 12px;font-size:13px;}
    button{padding:7px 14px;background:#f0f0f0;border:1px solid #ccc;border-radius:5px;cursor:pointer;font-size:14px;}
    button:hover{background:#e0e0e0;}
    .pagination{text-align:center;margin:85px 0;width:100%;border:0px solid red;}
    .pagination a{display:inline-block;padding:9px 16px;margin:0 5px;text-decoration:none;color:#222;border:1px solid #222;border-radius:5px;font-size:15px;}
    
    .pagination a.active{background:#2A80B9;color:#fff;pointer-events:none;border:1px solid #2A80B9;}
    .site-footer {
  background-color: #fff;
  color: #080000;
  padding: 40px 20px 20px;
  font-family: 'Segoe UI', sans-serif;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  max-width: 1100px;
  margin: auto;
}

.footer-content h3,
.footer-content h4 {
  color: #222;
}

.footer-left p {
  max-width: 300px;
  font-size: 0.95em;
  line-height: 1.6;
}

.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-links ul li {
  margin-bottom: 8px;
}

.footer-links ul li a {
  color: #302f31;
  text-decoration: none;
}

.footer-links ul li a:hover {
  text-decoration: underline;
}

.footer-social a {
  color:#302f31;
  text-decoration: none;
  font-size: 0.95em;
}

.footer-social a:hover {
  text-decoration: underline;
}

.footer-bottom {
  text-align: center;
  margin-top: 30px;
  font-size: 0.85em;
  color: #999;
  border-top: 1px solid #333;
  padding-top: 15px;
}

@media (max-width:768px) {
  /* tighten pagination spacing */
  .pagination {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    padding:8px 0;
    margin:10px 0;       /* reduced */
    box-sizing:border-box;
    overflow:visible;
  }

  /* reduce stacked container spacing */
  .container { margin-bottom:16px; }
  .container + .container { margin-top:10px; }

  /* make hero mobile-friendly */
  .hero {
    padding:28px 16px;
    margin-top:12px;
  }

  /* make headings compact */
  .hero h1, .container h2 { margin-top:8px; margin-bottom:10px; }
}


.section h2{ margin:0 0 14px; font-size: clamp(22px,3.6vw,30px); }


/* Form */
.form{ display:grid; gap:12px; max-width:720px; background: linear-gradient(180deg, #acadb3, #e2e2e6); border:1px solid rgba(148,163,184,.18); border-radius:16px; padding:16px; box-shadow: var(--shadow); }
.form label{ font-weight:700; }
.input, textarea{ width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(237, 243, 250, 0.884); background:#f4f5f7; color:var(--text); outline:none; }
textarea{ min-height:120px; resize: vertical; }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width: 640px){ .form .row{ grid-template-columns:1fr; } }

.container {
   
    margin: 0 auto;
}
* {
    box-sizing: border-box;
}

div {
    display: block;
    unicode-bidi: isolate;
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    background-color: #eee8e8ef;
    color: #333333;
    margin: 0;
    padding: 0;
}
main {
    padding: 20px;
}
.btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    border: none;
}
.btn.primary {
    background-color: #007BFF;
    color: white;
}