body {
      font-family: sans-serif;
      padding: 0px;
      margin: 0;
      background: #fff;
    }
      :root {
      --bg:#f7fafc;
      --card:#ffffff;
      --accent:#0f172a;
      --muted:#475569;
      --accent-2:#1f2937;
      --radius:12px;
      --maxw:900px;
      --gradient: linear-gradient(135deg,#111827,#0ea5a9);
      font-family: Inter, "Noto Nastaliq Urdu", "Noto Sans", "Segoe UI", Roboto, system-ui, -apple-system, "Segoe UI Emoji", "Helvetica", Arial, sans-serif;
    }
    html,body{
      height:100%;
      margin:0;
      background:var(--bg);
      color:var(--accent-2);
    }
    /* ✅ HEADER with Gradient */
    .header {
      background: var(--gradient);
      width: 100%;
      margin: 0;
      border-bottom: 2px solid #cfd6ce;
      box-shadow: 0 3px 12px rgba(0,0,0,0.15);
    }
    .main-menu {
      background: var(--gradient);
      overflow: hidden;
      margin: 0 auto;
      width: 100%;
      max-width: 1200px;
      color: #fff;
    }
    a.logo { color: #0ea5a9; text-decoration:none; }
    .sidenav {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 99999;
      top: 0;
      left: 0;
      background-color: #fafafa;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 60px;
    }
    .sidenav a, .sidenav h3 {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 20px;
      color: #222;
      display: block;
      transition: 0.3s;
    }
    .sidenav a:hover { color: #0ea5a9; }
    .sidenav .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
    }
    .wrap{
      max-width:var(--maxw);
      margin:36px auto;
      padding:24px;
    }
    header.page-header{
      display:flex;
      gap:18px;
      align-items:center;
      margin-bottom:20px;
    }
    .logo-box {
      width:72px;
      height:72px;
      background:var(--gradient);
      border-radius:14px;
      display:flex;
      align-items:center;
      justify-content:center;
      color:white;
      font-weight:700;
      font-size:20px;
      box-shadow:0 6px 18px rgba(2,6,23,0.12);
    }
    img {
      width: 100%;
      max-width: 1000px;
      margin: 0px auto;
      border: 0px;
    }
    .container1 {
      width: 100%;
      max-width: 1000px;
      margin: 20px auto;
      padding: 20px;
      background: #fff;
    }
    .container {
      width: 100%;
      max-width: 1000px;
      margin: 20px auto;
      padding: 20px;
      background: #fff;
    }
    h1 {
      color: #2a80b9;
      font-size: 20px;
      color: #222;
    }
    a.logo {
      color: #28A745;
    }
  
    a.logo:hover{color:#28A745; }
  
    @font-face { font-family: 'Jameel Noori Nastaleeq Regular'; src: url('fonts/Jameel Noori Nastaleeq Regular.ttf'); font-display: swap; }
    @font-face { font-family: 'Jameel Noori Nastaleeq Kasheeda'; src: url('fonts/Jameel Noori Nastaleeq Kasheeda.ttf'); font-display: swap; }
    @font-face { font-family: 'Gandhara Suls Regular'; src: url('fonts/Gandhara Suls Regular.ttf'); font-display: swap; }
    @font-face { font-family: 'Urdu Special Regular'; src: url('fonts/Urdu Special Regular.ttf'); font-display: swap; }
    @font-face { font-family: 'AA Sameer Asmaak Regular'; src: url('fonts/AA Sameer Asmaak Regular.ttf'); font-display: swap; }
    @font-face { font-family: 'AA Sameer Armaa unicode'; src: url('fonts/AA Sameer Armaa unicode.ttf'); font-display: swap; }
    @font-face { font-family: 'AlQalam Khat-e-Qirtas Regular'; src: url('fonts/AlQalam Khat-e-Qirtas Regular.ttf'); font-display: swap; }
    @font-face { font-family: 'Al Qalam Kolkatta Quranic font Regular'; src: url('fonts/Al Qalam Kolkatta Quranic font Regular.ttf');font-display: swap; }
    @font-face { font-family: 'AlQalam Makki Regular'; src: url('fonts/AlQalam Makki Regular.ttf'); font-display: swap; }
    @font-face { font-family: 'Farsi Simple Outline Regular'; src: url('fonts/Farsi Simple Outline Regular.ttf'); font-display: swap; }
    @font-face { font-family: 'Ebham Unicode Ebham Unicode'; src: url('fonts/Ebham Unicode Ebham Unicode.ttf'); font-display: swap; }
    @font-face { font-family: 'Farsi Unicode Farsi Unicode'; src: url('fonts/Farsi Unicode Farsi Unicode.ttf'); font-display: swap; }
    @font-face { font-family: 'Fazal Fazal'; src: url('fonts/Fazal Fazal.ttf'); font-display: swap; }
    @font-face { font-family: 'Firoz Unicode Firoz Unicode'; src: url('fonts/Firoz Unicode Firoz Unicode.ttf'); font-display: swap; }
    @font-face { font-family: 'Ghalib Unicode Ghalib Unicode'; src: url('fonts/Ghalib Unicode Ghalib Unicode.ttf'); font-display: swap; }
   
    body {
      font-family: sans-serif;
      background: #f4f4f4;
      padding: 0px;
    }
    .section {
      background: #fff;
      border: 0px solid #28a745;
      padding: 15px;
      border-radius: 10px;
      width: 100%;
      max-width: 1000px;
      margin: 20px auto;
    }
    .section h2 {
      color: #222;
      margin: -15px -15px 15px;
      padding: 10px 15px;
    }
    .font-controls, .typing-controls {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 15px;
      justify-content: center;
    }
    input[type="text"] {
      flex: 1;
      padding: 10px;
      font-size: 18px;
    }
    select, input[type="color"], button {
      padding: 6px 10px;
      font-size: 16px;
      border-radius: 4px;
      border: 1px solid #ccc;
      background: white;
      cursor: pointer;
      margin:5px;
    }
    button:hover {
      background: #eee;
    }
    button.active {
      background: #28a745;
      color: white;
    }
    .font-preview-wrapper {
      margin-bottom: 20px;
    }
    .preview-item {
      background: #fff;
      padding: 10px;
      border-radius: 0px;
      border: 1px solid #ccc;
      direction: rtl;
      text-align: center;
      min-height: 60px;
    }
    .font-name {
      font-size: 14px;
      color: #555;
      margin-bottom: 6px;
      direction: ltr;
      text-align: left;
    }
    .font-text {
      display: inline-block;
      padding: 30px 0;
      line-height: 1.2;
      width: calc(100% - 20px);
      box-sizing: border-box;
    }
    .button-group {
      display: flex;
      gap: 5px;
      margin-top: 6px;
      justify-content: flex-end;
    }
    .button-group button {
      font-size: 16px;
      padding: 5px 10px;
      background:#E0E0E0;
      color: #222;
    }
    @media (max-width: 768px) {
      .font-controls, .typing-controls {
        flex-direction: column;
      }
      .button-group {
        flex-direction: row;
        gap: 3px;
      }
    }
  
   /* ✅ FOOTER with White Text */
    .site-footer {
      background: var(--gradient);
      color: #ffffff;
      padding: 40px 20px 20px;
      font-family: 'Segoe UI', sans-serif;
      border-top: 1px solid rgba(255,255,255,0.2);
    }
    .footer-content {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 40px;
      max-width: 1100px;
      margin: auto;
    }
    .footer-content h3,
    .footer-content h4,
    .footer-left p,
    .footer-links a,
    .footer-social a,
    .footer-links ul li,
    .footer-social li {
      color: #ffffff !important;
    }
    .footer-links ul, .footer-social li { list-style: none; padding: 0; }
    .footer-links a, .footer-social a {
      text-decoration: none;
      opacity: 0.9;
      transition: opacity 0.2s ease;
    }
    .footer-links a:hover, .footer-social a:hover {
      opacity: 1;
      text-decoration: underline;
      color: #fff;
    }
    .footer-bottom {
      text-align: center;
      margin-top: 30px;
      font-size: 0.9em;
      color: #ffffff !important;
      border-top: 1px solid rgba(255,255,255,0.3);
      padding-top: 15px;
    }
    .footer-bottom p {
      color: #ffffff !important;
      margin: 0;
    }
    a{ color:#0f172a; text-decoration:none; font-weight:600; }
  
.pagination {
  text-align: center;
  margin:30px auto;
  font-family: sans-serif;
}
.pagination a {
  display: inline-block;
  padding: 8px 14px;
  margin: 0 4px;
  text-decoration: none;
  color: #222;
  border: 1px solid #222;
  border-radius: 4px;
  transition: all 0.3s ease;
}
.pagination a:hover {
  background-color: #E0E0E0;
  color: #222;
  text-decoration: none;
}
.pagination a.active {
  background-color: #E0E0E0;
  color: #222;
  pointer-events: none;
  cursor: default;
}

/* -------------------------------------------------
   1. GLOBAL RESET & MOBILE-FIRST FOUNDATION
   ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin:0; padding:0; }
html { font-size: 100%; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  font-family: Inter, "Noto Nastaliq Urdu", "Noto Sans", system-ui, sans-serif;
  background: var(--bg, #f7fafc);
  color: var(--accent-2, #1f2937);
  line-height: 1.5;
}
/* Fluid typography */
h1 { font-size: clamp(1.8rem, 5vw, 2.2rem); }
h2 { font-size: clamp(1.5rem, 4vw, 1.8rem); }
p, input, button, select { font-size: clamp(0.95rem, 2.5vw, 1rem); }
/* -------------------------------------------------
   2. LAYOUT CONTAINERS
   ------------------------------------------------- */
.container,
.wrap,
.section,
.container1 {
  width: min(100% - 2rem, var(--maxw, 1200px));
  margin-inline: auto;
  padding: 1rem;
}
@media (min-width: 640px) { .container { padding: 1.5rem; } }
@media (min-width: 1024px){ .container { padding: 2rem; } }
/* -------------------------------------------------
   3. HEADER & SIDEBAR
   ------------------------------------------------- */
.header {
  background: var(--gradient, linear-gradient(135deg,#111827,#0ea5a9));
  color:#fff;
}
.main-menu {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.75rem 1rem;
  max-width: var(--maxw,1200px);
  margin:auto;
}
.main-menu a.logo {
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  color:#0ea5a9;
  text-decoration:none;
}
.menu-toggle {
  font-size:1.8rem;
  cursor:pointer;
  padding:0.25rem;
}
/* Sidebar */
.sidenav {
  height:100%; width:0; position:fixed; top:0; left:0;
  background:#fafafa; overflow-x:hidden; transition:width .4s;
  padding-top:4rem; z-index:99999;
}
.sidenav.open { width: min(80vw, 300px); }
.sidenav a, .sidenav h3 {
  padding:0.75rem 1rem 0.75rem 2rem;
  display:block; font-size:1.1rem;
}
.sidenav .closebtn {
  position:absolute; top:0.5rem; right:1rem; font-size:2rem;
}
/* -------------------------------------------------
   5. PREVIEW GRID
   ------------------------------------------------- */
#previews { display:grid; gap:1.5rem; }
@media (min-width: 480px) { #previews { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 768px) { #previews { grid-template-columns: repeat(3,1fr); } }
.font-preview-wrapper {
  background:#fff; border:1px solid #ddd; border-radius:8px;
  overflow:hidden; display:flex; flex-direction:column;
}
.font-name {
  padding:0.5rem 0.75rem; font-size:0.85rem; background:#f8f9fa;
}
.preview-item {
  flex-grow:1; padding:1rem; text-align:center;
  direction:rtl; min-height:120px; display:flex; align-items:center;
  justify-content:center;
}
.font-text {
  width:100%; word-break:break-word; line-height:1.3;
}
.button-group {
  display:flex; gap:0.4rem; padding:0.5rem;
  justify-content:flex-end; flex-wrap:wrap;
}
.button-group button {
  font-size:0.85rem; padding:0.35rem 0.6rem;
}
/* -------------------------------------------------
   6. PAGINATION & FOOTER
   ------------------------------------------------- */
.pagination {
  display:flex; flex-wrap:wrap; gap:0.4rem;
  justify-content:center; margin:2rem 0;
}
.pagination a {
  min-width:2.2rem; padding:0.4rem 0.6rem;
  text-align:center; border:1px solid #222; border-radius:4px;
}
/* Footer stays full-width */
.site-footer {
  background:var(--gradient); color:#fff; padding:2rem 1rem;
}
.footer-content {
  display:flex; flex-wrap:wrap; gap:2rem;
  max-width:var(--maxw,1200px); margin:auto;
}
.footer-content > div { flex:1 1 200px; }
/* -------------------------------------------------
   7. IMAGES & MEDIA
   ------------------------------------------------- */
img, picture, canvas {
  max-width:100%; height:auto; display:block;
}
/* -------------------------------------------------
   8. UTILITIES (optional)
   ------------------------------------------------- */
.text-center { text-align:center; }
.mt-1 { margin-top:0.5rem; }
.mt-2 { margin-top:1rem; }
/* -------------------------------------------------
   9. KEEP YOUR ORIGINAL CUSTOM STYLES
   ------------------------------------------------- */
@font-face { /* keep all your @font-face rules */ }

/* FIX: Auto Ads ke load hone ke baad layout shift ko 100% stop karega */
ins.adsbygoogle,
.adsbygoogle,
.google-auto-placed {
    display: block !important;
    width: 100% !important;
    min-height: 250px !important;
    margin: 12px 0 !important;
    overflow: hidden !important;
}

    h1, h2, h3 {
      color: #2c3e50;
    }
    ul {
      padding-left: 20px;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin: 20px 0;
    }
    table, th, td {
      border: 1px solid #ccc;
    }
    th, td {
      padding: 10px;
      text-align: left;
    }
    .highlight {
      background-color: #f9f9f9;
      border-left: 5px solid #007bff;
      padding: 10px;
      margin: 20px 0;
    }
    .faq-item, .howto-item {
      margin-bottom: 20px;
      padding: 15px;
      border: 1px solid #ddd;
      border-radius: 8px;
      background-color: #f9f9f9;
    }
    .faq-question, .howto-step {
      font-weight: bold;
      color: #2c3e50;
      margin-bottom: 10px;
    }
    .faq-answer, .howto-description {
      color: #555;
      line-height: 1.6;
    }