{"id":1019,"date":"2025-09-17T10:58:58","date_gmt":"2025-09-17T10:58:58","guid":{"rendered":"https:\/\/taleemnama.pk\/urdu\/tiehome\/"},"modified":"2026-08-29T07:41:10","modified_gmt":"2026-08-29T07:41:10","slug":"tiehome","status":"publish","type":"page","link":"https:\/\/taleemnama.pk\/urdu\/","title":{"rendered":"Home"},"content":{"rendered":"<style>.kb-row-layout-id1019_a61099-d2 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id1019_a61099-d2 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id1019_a61099-d2 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, calc(75% - ((var(--global-kb-gap-md, 2rem) * 1 )\/2)))minmax(0, calc(25% - ((var(--global-kb-gap-md, 2rem) * 1 )\/2)));}.kb-row-layout-id1019_a61099-d2 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id1019_a61099-d2 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr) minmax(0, 2fr);}}@media all and (max-width: 767px){.kb-row-layout-id1019_a61099-d2 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id1019_a61099-d2 alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-right-golden kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column1019_90194c-dc > .kt-inside-inner-col,.kadence-column1019_90194c-dc > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column1019_90194c-dc > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column1019_90194c-dc > .kt-inside-inner-col{flex-direction:column;}.kadence-column1019_90194c-dc > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column1019_90194c-dc > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column1019_90194c-dc{position:relative;}@media all and (max-width: 1024px){.kadence-column1019_90194c-dc > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column1019_90194c-dc > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column1019_90194c-dc\"><div class=\"kt-inside-inner-col\">\n<section class=\"tnu-brand-news\" dir=\"rtl\">\n\n  <!-- =====================================================\n       REGIONAL CATEGORY NAVIGATION\n  ====================================================== -->\n  <nav class=\"tnu-brand-tabs\" aria-label=\"\u0639\u0644\u0627\u0642\u0627\u0626\u06cc \u062a\u0639\u0644\u06cc\u0645\u06cc \u062e\u0628\u0631\u06cc\u06ba\">\n\n    <button class=\"tnu-brand-tab active\" data-slug=\"latest-news\">\n      \u062a\u0627\u0632\u06c1 \u062a\u0631\u06cc\u0646\n    <\/button>\n\n    <button class=\"tnu-brand-tab\" data-slug=\"federal-govt\">\n      \u0648\u0641\u0627\u0642\u06cc \u062f\u0627\u0631\u0627\u0644\u062d\u06a9\u0648\u0645\u062a\n    <\/button>\n\n    <button class=\"tnu-brand-tab\" data-slug=\"punjab\">\n      \u067e\u0646\u062c\u0627\u0628\n    <\/button>\n\n    <button class=\"tnu-brand-tab\" data-slug=\"sindh\">\n      \u0633\u0646\u062f\u06be\n    <\/button>\n\n    <button class=\"tnu-brand-tab\" data-slug=\"kpk\">\n      \u062e\u06cc\u0628\u0631\u067e\u062e\u062a\u0648\u0646\u062e\u0648\u0627\u06c1\n    <\/button>\n\n    <button class=\"tnu-brand-tab\" data-slug=\"baluichstan\">\n      \u0628\u0644\u0648\u0686\u0633\u062a\u0627\u0646\n    <\/button>\n\n    <button class=\"tnu-brand-tab\" data-slug=\"ajk\">\n      \u0622\u0632\u0627\u062f \u06a9\u0634\u0645\u06cc\u0631\n    <\/button>\n\n    <button class=\"tnu-brand-tab\" data-slug=\"gb\">\n      \u06af\u0644\u06af\u062a \u0628\u0644\u062a\u0633\u062a\u0627\u0646\n    <\/button>\n\n  <\/nav>\n\n\n  <!-- LOADER -->\n  <div class=\"tnu-brand-loader\" hidden>\n    \u062e\u0628\u0631\u06cc\u06ba \u0644\u0648\u0688 \u06c1\u0648 \u0631\u06c1\u06cc \u06c1\u06cc\u06ba&#8230;\n  <\/div>\n\n\n  <!-- =====================================================\n       MAIN NEWS AREA\n  ====================================================== -->\n  <div class=\"tnu-brand-grid\">\n\n\n    <!-- ===================================================\n         MAIN 16:9 SLIDER\n    ==================================================== -->\n    <article class=\"tnu-brand-main\">\n\n      <a class=\"tnu-brand-main-link\" href=\"#\">\n\n        <div class=\"tnu-brand-media\">\n\n          <!-- MAIN IMAGE -->\n          <img\n            class=\"tnu-brand-main-image\"\n            src=\"\"\n            alt=\"\"\n            width=\"960\"\n            height=\"540\"\n            fetchpriority=\"high\"\n            decoding=\"async\"\n          >\n\n\n          <!-- MAIN FALLBACK -->\n          <div class=\"tnu-brand-main-fallback\" hidden>\n\n            <div class=\"tnu-brand-main-fallback-mark\">\n              <span>TN<\/span>\n              <small>\u062a\u0639\u0644\u06cc\u0645 \u0646\u0627\u0645\u06c1<\/small>\n            <\/div>\n\n          <\/div>\n\n\n          <!-- OVERLAY -->\n          <div class=\"tnu-brand-overlay\"><\/div>\n\n\n          <!-- BRAND LABEL -->\n          <span class=\"tnu-brand-label\">\n            \u062a\u0639\u0644\u06cc\u0645 \u0646\u0627\u0645\u06c1\n          <\/span>\n\n\n          <!-- CATEGORY -->\n          <span class=\"tnu-brand-category\">\n            \u062a\u0627\u0632\u06c1 \u062a\u0631\u06cc\u0646\n          <\/span>\n\n\n          <!-- HEADLINE -->\n          <div class=\"tnu-brand-main-copy\">\n\n            <h2 class=\"tnu-brand-main-title\">\n              \u062a\u0627\u0632\u06c1 \u062a\u0631\u06cc\u0646 \u062a\u0639\u0644\u06cc\u0645\u06cc \u062e\u0628\u0631\n            <\/h2>\n\n            <span class=\"tnu-brand-read\">\n              \u0645\u06a9\u0645\u0644 \u062e\u0628\u0631 \u067e\u0691\u06be\u06cc\u06ba \u2190\n            <\/span>\n\n            <span class=\"tnu-brand-line\"><\/span>\n\n          <\/div>\n\n        <\/div>\n\n      <\/a>\n\n\n      <!-- =================================================\n           CONTROLS\n      ================================================== -->\n      <div class=\"tnu-brand-controls\">\n\n        <button\n          class=\"tnu-brand-prev\"\n          type=\"button\"\n          aria-label=\"\u067e\u0686\u06be\u0644\u06cc \u062e\u0628\u0631\"\n        >\n          \u2039\n        <\/button>\n\n        <div class=\"tnu-brand-counter\">\n\n          <span class=\"tnu-brand-current\">\n            1\n          <\/span>\n\n          \/\n\n          <span class=\"tnu-brand-total\">\n            1\n          <\/span>\n\n        <\/div>\n\n        <button\n          class=\"tnu-brand-next\"\n          type=\"button\"\n          aria-label=\"\u0627\u06af\u0644\u06cc \u062e\u0628\u0631\"\n        >\n          \u203a\n        <\/button>\n\n      <\/div>\n\n\n      <!-- PROGRESS -->\n      <div class=\"tnu-brand-progress-track\">\n        <span class=\"tnu-brand-progress\"><\/span>\n      <\/div>\n\n    <\/article>\n\n\n    <!-- ===================================================\n         FOUR SIDE STORIES\n    ==================================================== -->\n    <aside\n      class=\"tnu-brand-side\"\n      aria-label=\"\u0645\u0632\u06cc\u062f \u062a\u0627\u0632\u06c1 \u062e\u0628\u0631\u06cc\u06ba\"\n    ><\/aside>\n\n  <\/div>\n\n\n  <!-- =====================================================\n       CATEGORY ARCHIVE\n  ====================================================== -->\n  <div class=\"tnu-brand-footer\">\n\n    <a\n      id=\"tnu-brand-category-link\"\n      href=\"https:\/\/taleemnama.pk\/urdu\/category\/latest-news\/\"\n    >\n      \u062a\u0645\u0627\u0645 \u062a\u0627\u0632\u06c1 \u062a\u0631\u06cc\u0646 \u062e\u0628\u0631\u06cc\u06ba \u062f\u06cc\u06a9\u06be\u06cc\u06ba \u2190\n    <\/a>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =========================================================\n   TALEEM NAMA URDU\n   FINAL FIXED NEWS SLIDER\n========================================================= *\/\n\n.tnu-brand-news{\n\n  --blue:#1A237E;\n  --dark:#0A2C64;\n\n  --orange:#FF6F00;\n  --orange-dark:#E85D00;\n\n  --border:#E2E7F0;\n  --soft:#F7F9FC;\n\n  width:100%;\n  max-width:1290px;\n\n  margin:0 auto;\n\n  padding:\n    0 12px 8px;\n\n  box-sizing:border-box;\n}\n\n\n.tnu-brand-news *,\n.tnu-brand-news *::before,\n.tnu-brand-news *::after{\n\n  box-sizing:border-box;\n\n}\n\n\n\/* =========================================================\n   CATEGORY NAVIGATION\n========================================================= *\/\n\n.tnu-brand-tabs{\n\n  display:grid;\n\n  grid-template-columns:\n    repeat(8,minmax(0,1fr));\n\n  gap:6px;\n\n  width:100%;\n\n  margin:\n    0 0 14px;\n\n  padding:7px;\n\n  border-radius:12px;\n\n  background:#F5F7FB;\n\n  border-top:\n    4px solid var(--blue);\n\n  border-bottom:\n    4px solid var(--orange);\n\n  box-shadow:\n    0 5px 18px\n    rgba(16,45,95,.06);\n}\n\n\n.tnu-brand-tab{\n\n  min-width:0;\n  min-height:48px;\n\n  display:flex;\n\n  align-items:center;\n  justify-content:center;\n\n  padding:\n    7px 6px;\n\n  border:0;\n\n  border-radius:8px;\n\n  cursor:pointer;\n\n  background:\n    var(--blue);\n\n  color:#fff;\n\n  font-family:inherit;\n\n  font-size:15px;\n\n  line-height:1.8;\n\n  font-weight:700;\n\n  white-space:nowrap;\n\n  transition:\n    background .18s ease,\n    transform .18s ease,\n    box-shadow .18s ease;\n}\n\n\n.tnu-brand-tab:hover{\n\n  background:\n    var(--dark);\n\n  transform:\n    translateY(-1px);\n}\n\n\n.tnu-brand-tab.active{\n\n  background:\n    linear-gradient(\n      135deg,\n      var(--orange-dark),\n      var(--orange)\n    );\n\n  color:#fff;\n\n  box-shadow:\n    0 4px 12px\n    rgba(255,111,0,.22);\n}\n\n\n\/* =========================================================\n   LOADER\n========================================================= *\/\n\n.tnu-brand-loader{\n\n  margin-bottom:10px;\n\n  padding:\n    8px 12px;\n\n  border-radius:8px;\n\n  background:#F5F7FC;\n\n  color:\n    var(--blue);\n\n  text-align:center;\n\n  font-size:13px;\n}\n\n\n\/* =========================================================\n   MAIN GRID\n========================================================= *\/\n\n.tnu-brand-grid{\n\n  display:grid;\n\n  grid-template-columns:\n    minmax(0,2.12fr)\n    minmax(330px,.88fr);\n\n  gap:14px;\n\n  align-items:start;\n}\n\n\n\/* =========================================================\n   MAIN SLIDER\n========================================================= *\/\n\n.tnu-brand-main{\n\n  position:relative;\n\n  min-width:0;\n\n  overflow:hidden;\n\n  border-radius:16px;\n\n  background:\n    var(--dark);\n\n  box-shadow:\n    0 9px 28px\n    rgba(10,44,100,.14);\n}\n\n\n.tnu-brand-main-link{\n\n  display:block;\n\n  width:100%;\n\n  color:inherit;\n\n  text-decoration:none!important;\n}\n\n\n\/* =========================================================\n   TRUE 16:9 MEDIA\n========================================================= *\/\n\n.tnu-brand-media{\n\n  position:relative;\n\n  width:100%;\n\n  aspect-ratio:\n    16 \/ 9;\n\n  overflow:hidden;\n\n  background:\n    var(--dark);\n}\n\n\n.tnu-brand-main-image{\n\n  position:absolute;\n\n  inset:0;\n\n  display:block;\n\n  width:100%;\n  height:100%;\n\n  object-fit:cover;\n\n  transition:\n    transform .5s ease;\n}\n\n\n.tnu-brand-main:hover\n.tnu-brand-main-image{\n\n  transform:\n    scale(1.018);\n}\n\n\n\/* =========================================================\n   MAIN IMAGE FALLBACK\n========================================================= *\/\n\n.tnu-brand-main-fallback{\n\n  position:absolute;\n\n  inset:0;\n\n  display:flex;\n\n  align-items:center;\n\n  justify-content:center;\n\n  background:\n\n    radial-gradient(\n      circle at 25% 25%,\n      rgba(255,111,0,.17),\n      transparent 35%\n    ),\n\n    linear-gradient(\n      135deg,\n      #0A2C64,\n      #1A237E\n    );\n}\n\n\n.tnu-brand-main-fallback[hidden]{\n\n  display:none!important;\n}\n\n\n.tnu-brand-main-fallback-mark{\n\n  display:flex;\n\n  flex-direction:column;\n\n  align-items:center;\n\n  gap:7px;\n\n  opacity:.30;\n}\n\n\n.tnu-brand-main-fallback-mark span{\n\n  font-family:\n    Arial,sans-serif;\n\n  font-size:65px;\n\n  line-height:1;\n\n  font-weight:900;\n\n  color:#fff;\n}\n\n\n.tnu-brand-main-fallback-mark small{\n\n  color:#fff;\n\n  font-size:16px;\n\n  font-weight:700;\n}\n\n\n\/* =========================================================\n   MAIN OVERLAY\n========================================================= *\/\n\n.tnu-brand-overlay{\n\n  position:absolute;\n\n  z-index:2;\n\n  inset:0;\n\n  pointer-events:none;\n\n  background:\n\n    linear-gradient(\n      to left,\n\n      rgba(10,44,100,.96) 0%,\n      rgba(10,44,100,.80) 24%,\n      rgba(10,44,100,.49) 48%,\n      rgba(10,44,100,.12) 70%,\n      rgba(10,44,100,.02) 84%\n    ),\n\n    linear-gradient(\n      to top,\n\n      rgba(5,27,70,.92) 0%,\n      rgba(10,44,100,.44) 30%,\n      rgba(10,44,100,.04) 60%\n    );\n}\n\n\n\/* =========================================================\n   LABEL\n========================================================= *\/\n\n.tnu-brand-label{\n\n  position:absolute;\n\n  z-index:5;\n\n  top:17px;\n  left:17px;\n\n  padding:\n    5px 10px;\n\n  border:\n    1px solid\n    rgba(255,255,255,.24);\n\n  border-radius:7px;\n\n  background:\n    rgba(10,44,100,.90);\n\n  color:#fff;\n\n  font-size:11px;\n\n  font-weight:700;\n}\n\n\n\/* =========================================================\n   CATEGORY BADGE\n========================================================= *\/\n\n.tnu-brand-category{\n\n  position:absolute;\n\n  z-index:5;\n\n  top:68px;\n  right:23px;\n\n  padding:\n    4px 10px;\n\n  border-radius:6px;\n\n  background:\n    linear-gradient(\n      90deg,\n      var(--orange-dark),\n      var(--orange)\n    );\n\n  color:#fff;\n\n  font-size:11px;\n\n  font-weight:700;\n}\n\n\n\/* =========================================================\n   MAIN COPY\n========================================================= *\/\n\n.tnu-brand-main-copy{\n\n  position:absolute;\n\n  z-index:5;\n\n  right:0;\n  bottom:0;\n\n  width:78%;\n\n  padding:\n    24px\n    28px\n    34px;\n}\n\n\n.tnu-brand-main-title{\n\n  margin:0;\n\n  color:#fff!important;\n\n  font-size:30px;\n\n  line-height:1.86;\n\n  font-weight:700;\n\n  text-shadow:\n    0 2px 8px\n    rgba(0,0,0,.28);\n}\n\n\n.tnu-brand-read{\n\n  display:inline-block;\n\n  margin-top:6px;\n\n  color:\n    rgba(255,255,255,.92);\n\n  font-size:11px;\n\n  font-weight:600;\n}\n\n\n.tnu-brand-line{\n\n  display:block;\n\n  width:70px;\n  height:4px;\n\n  margin-top:9px;\n\n  border-radius:99px;\n\n  background:\n    var(--orange);\n}\n\n\n\/* =========================================================\n   CONTROLS\n========================================================= *\/\n\n.tnu-brand-controls{\n\n  position:absolute;\n\n  z-index:8;\n\n  left:15px;\n  bottom:17px;\n\n  display:flex;\n\n  align-items:center;\n\n  gap:6px;\n\n  direction:ltr;\n}\n\n\n.tnu-brand-controls button{\n\n  width:32px;\n  height:32px;\n\n  display:grid;\n\n  place-items:center;\n\n  padding:0;\n\n  border:0;\n\n  border-radius:50%;\n\n  cursor:pointer;\n\n  background:\n    rgba(255,255,255,.96);\n\n  color:\n    var(--blue);\n\n  font-family:\n    Arial,sans-serif;\n\n  font-size:21px;\n\n  box-shadow:\n    0 2px 8px\n    rgba(0,0,0,.14);\n}\n\n\n.tnu-brand-controls button:hover{\n\n  background:\n    var(--orange);\n\n  color:#fff;\n}\n\n\n.tnu-brand-counter{\n\n  min-width:50px;\n\n  padding:\n    5px 9px;\n\n  border-radius:16px;\n\n  background:\n    rgba(4,24,65,.82);\n\n  color:#fff;\n\n  text-align:center;\n\n  font-family:\n    Arial,sans-serif;\n\n  font-size:10px;\n}\n\n\n\/* =========================================================\n   PROGRESS\n========================================================= *\/\n\n.tnu-brand-progress-track{\n\n  position:absolute;\n\n  z-index:9;\n\n  right:0;\n  left:0;\n  bottom:0;\n\n  height:4px;\n\n  background:\n    rgba(255,255,255,.15);\n}\n\n\n.tnu-brand-progress{\n\n  display:block;\n\n  width:0%;\n  height:100%;\n\n  background:\n    var(--orange);\n}\n\n\n.tnu-brand-progress.running{\n\n  animation:\n    tnuBrandProgress\n    6s\n    linear\n    forwards;\n}\n\n\n@keyframes tnuBrandProgress{\n\n  from{\n    width:0%;\n  }\n\n  to{\n    width:100%;\n  }\n\n}\n\n\n\/* =========================================================\n   SIDE STORIES CONTAINER\n========================================================= *\/\n\n.tnu-brand-side{\n\n  display:grid;\n\n  grid-template-rows:\n    repeat(4,minmax(0,1fr));\n\n  gap:9px;\n\n  min-width:0;\n  min-height:0;\n}\n\n\n\/* =========================================================\n   SIDE STORY CARD\n========================================================= *\/\n\n.tnu-brand-side-card{\n\n  min-width:0;\n  min-height:0;\n\n  overflow:hidden;\n\n  border:\n    1px solid\n    var(--border);\n\n  border-right:\n    3px solid\n    var(--blue);\n\n  border-radius:11px;\n\n  background:#fff;\n\n  box-shadow:\n    0 4px 14px\n    rgba(16,45,95,.045);\n\n  transition:\n    transform .18s ease,\n    border-color .18s ease,\n    box-shadow .18s ease;\n}\n\n\n.tnu-brand-side-card:hover{\n\n  transform:\n    translateY(-1px);\n\n  border-right-color:\n    var(--orange);\n\n  box-shadow:\n    0 7px 18px\n    rgba(16,45,95,.08);\n}\n\n\n\/* =========================================================\n   CRITICAL FIX:\n   MEDIA SLOT ALWAYS EXISTS\n========================================================= *\/\n\n.tnu-brand-side-card > a{\n\n  display:grid;\n\n  grid-template-columns:\n    74px\n    minmax(0,1fr);\n\n  width:100%;\n  height:100%;\n\n  min-width:0;\n\n  color:inherit;\n\n  text-decoration:none!important;\n}\n\n\n\/* =========================================================\n   SIDE MEDIA SLOT\n========================================================= *\/\n\n.tnu-brand-side-media{\n\n  position:relative;\n\n  width:74px;\n  height:100%;\n\n  min-height:0;\n\n  overflow:hidden;\n\n  background:\n    linear-gradient(\n      135deg,\n      #EEF0FF,\n      #FFF2E8\n    );\n\n  border-left:\n    1px solid #E4E8EF;\n}\n\n\n\/* ACTUAL IMAGE *\/\n\n.tnu-brand-side-image{\n\n  position:absolute;\n\n  inset:0;\n\n  display:block;\n\n  width:100%;\n  height:100%;\n\n  object-fit:cover;\n\n  background:#EEF2F7;\n}\n\n\n\/* =========================================================\n   SIDE PLACEHOLDER\n========================================================= *\/\n\n.tnu-brand-side-placeholder{\n\n  position:absolute;\n\n  inset:0;\n\n  display:flex;\n\n  flex-direction:column;\n\n  align-items:center;\n  justify-content:center;\n\n  gap:4px;\n\n  background:\n\n    radial-gradient(\n      circle at 30% 20%,\n      rgba(255,111,0,.12),\n      transparent 45%\n    ),\n\n    linear-gradient(\n      135deg,\n      #EEF0FF,\n      #FFF4EB\n    );\n}\n\n\n.tnu-brand-side-placeholder span{\n\n  width:40px;\n  height:40px;\n\n  display:grid;\n\n  place-items:center;\n\n  border-radius:50%;\n\n  background:\n    var(--blue);\n\n  color:#fff;\n\n  border-bottom:\n    3px solid\n    var(--orange);\n\n  font-family:\n    Arial,sans-serif;\n\n  font-size:12px;\n\n  line-height:1;\n\n  font-weight:900;\n}\n\n\n.tnu-brand-side-placeholder small{\n\n  color:\n    var(--blue);\n\n  font-size:8px;\n\n  font-weight:700;\n}\n\n\n\/* =========================================================\n   SIDE TEXT\n========================================================= *\/\n\n.tnu-brand-side-content{\n\n  min-width:0;\n\n  display:flex;\n\n  align-items:center;\n\n  overflow:hidden;\n\n  padding:\n    8px\n    13px\n    10px\n    9px;\n}\n\n\n.tnu-brand-side-title{\n\n  width:100%;\n\n  margin:0;\n\n  padding:\n    2px 0\n    7px;\n\n  color:\n    var(--blue);\n\n  font-size:16px;\n\n  line-height:1.95;\n\n  font-weight:700;\n\n  white-space:normal;\n\n  overflow:hidden;\n\n  word-break:normal;\n\n  overflow-wrap:break-word;\n\n  display:-webkit-box;\n\n  -webkit-box-orient:vertical;\n\n  -webkit-line-clamp:3;\n}\n\n\n\/* =========================================================\n   CATEGORY FOOTER\n========================================================= *\/\n\n.tnu-brand-footer{\n\n  display:flex;\n\n  justify-content:flex-start;\n\n  margin-top:9px;\n}\n\n\n.tnu-brand-footer a{\n\n  color:\n    var(--blue);\n\n  text-decoration:none;\n\n  font-size:13px;\n\n  font-weight:700;\n}\n\n\n.tnu-brand-footer a:hover{\n\n  color:\n    var(--orange);\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media(max-width:1000px){\n\n  .tnu-brand-tabs{\n\n    display:grid;\n\n    grid-template-columns:\n      repeat(4,minmax(0,1fr));\n\n    gap:5px;\n  }\n\n\n  .tnu-brand-tab{\n\n    white-space:normal;\n\n    line-height:1.65;\n  }\n\n\n  .tnu-brand-grid{\n\n    grid-template-columns:1fr;\n  }\n\n\n  .tnu-brand-side{\n\n    height:auto!important;\n\n    grid-template-columns:\n      repeat(2,minmax(0,1fr));\n\n    grid-template-rows:auto;\n  }\n\n\n  .tnu-brand-side-card{\n\n    min-height:120px;\n  }\n\n\n  .tnu-brand-side-card > a{\n\n    grid-template-columns:\n      95px\n      minmax(0,1fr);\n  }\n\n\n  .tnu-brand-side-media{\n\n    width:95px;\n\n    min-height:120px;\n  }\n\n\n  .tnu-brand-side-title{\n\n    font-size:16px;\n\n    line-height:1.9;\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media(max-width:600px){\n\n  .tnu-brand-news{\n\n    width:100%;\n\n    padding:\n      0 7px 8px;\n\n    overflow:hidden;\n  }\n\n\n  \/* CATEGORY MENU *\/\n\n  .tnu-brand-tabs{\n\n    display:grid;\n\n    grid-template-columns:\n      repeat(4,minmax(0,1fr));\n\n    gap:5px;\n\n    width:100%;\n\n    margin-bottom:10px;\n\n    padding:5px;\n\n    overflow:visible;\n\n    border-radius:10px;\n\n    border-top-width:3px;\n\n    border-bottom-width:3px;\n  }\n\n\n  .tnu-brand-tab{\n\n    width:100%;\n\n    min-width:0;\n    min-height:48px;\n\n    padding:\n      4px 3px;\n\n    border-radius:6px;\n\n    white-space:normal;\n\n    font-size:12.5px;\n\n    line-height:1.6;\n\n    text-align:center;\n\n    overflow:hidden;\n  }\n\n\n  .tnu-brand-tab[data-slug=\"federal-govt\"],\n  .tnu-brand-tab[data-slug=\"kpk\"]{\n\n    font-size:11.5px;\n  }\n\n\n  \/* MAIN *\/\n\n  .tnu-brand-main{\n\n    width:100%;\n\n    border-radius:11px;\n  }\n\n\n  .tnu-brand-media{\n\n    width:100%;\n\n    aspect-ratio:\n      16 \/ 9;\n  }\n\n\n  .tnu-brand-main-copy{\n\n    width:100%;\n\n    padding:\n      12px\n      13px\n      20px;\n  }\n\n\n  .tnu-brand-main-title{\n\n    font-size:18px;\n\n    line-height:1.75;\n\n    display:-webkit-box;\n\n    -webkit-box-orient:vertical;\n\n    -webkit-line-clamp:2;\n\n    overflow:hidden;\n  }\n\n\n  .tnu-brand-category{\n\n    top:43px;\n    right:10px;\n\n    padding:\n      2px 7px;\n\n    font-size:9px;\n  }\n\n\n  .tnu-brand-label{\n\n    top:8px;\n    left:8px;\n\n    padding:\n      3px 7px;\n\n    font-size:9px;\n  }\n\n\n  .tnu-brand-read{\n\n    display:none;\n  }\n\n\n  .tnu-brand-line{\n\n    width:42px;\n    height:3px;\n\n    margin-top:4px;\n  }\n\n\n  \/* CONTROLS *\/\n\n  .tnu-brand-controls{\n\n    left:7px;\n\n    bottom:9px;\n  }\n\n\n  .tnu-brand-controls button{\n\n    width:25px;\n    height:25px;\n\n    font-size:17px;\n  }\n\n\n  .tnu-brand-counter{\n\n    min-width:42px;\n\n    padding:\n      3px 6px;\n\n    font-size:8px;\n  }\n\n\n  \/* SIDE STORIES *\/\n\n  .tnu-brand-side{\n\n    width:100%;\n\n    height:auto!important;\n\n    grid-template-columns:1fr;\n\n    gap:8px;\n\n    margin-top:10px;\n  }\n\n\n  .tnu-brand-side-card{\n\n    width:100%;\n\n    min-height:112px;\n  }\n\n\n  .tnu-brand-side-card > a{\n\n    grid-template-columns:\n      95px\n      minmax(0,1fr);\n  }\n\n\n  .tnu-brand-side-media{\n\n    width:95px;\n    height:112px;\n\n    min-height:112px;\n  }\n\n\n  .tnu-brand-side-content{\n\n    min-width:0;\n\n    padding:\n      7px\n      12px\n      10px\n      8px;\n  }\n\n\n  .tnu-brand-side-title{\n\n    font-size:15px;\n\n    line-height:1.9;\n\n    padding:\n      2px 0\n      6px;\n\n    -webkit-line-clamp:3;\n  }\n\n\n  .tnu-brand-footer{\n\n    margin-top:8px;\n  }\n\n\n  .tnu-brand-footer a{\n\n    font-size:12px;\n  }\n\n}\n\n\n\/* =========================================================\n   VERY SMALL MOBILE\n========================================================= *\/\n\n@media(max-width:380px){\n\n  .tnu-brand-tab{\n\n    font-size:11.5px;\n\n    min-height:46px;\n  }\n\n\n  .tnu-brand-tab[data-slug=\"federal-govt\"],\n  .tnu-brand-tab[data-slug=\"kpk\"]{\n\n    font-size:10.5px;\n  }\n\n\n  .tnu-brand-main-title{\n\n    font-size:17px;\n  }\n\n\n  .tnu-brand-side-title{\n\n    font-size:14.5px;\n  }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media(prefers-reduced-motion:reduce){\n\n  .tnu-brand-main-image,\n  .tnu-brand-side-card,\n  .tnu-brand-tab{\n\n    transition:none!important;\n  }\n\n}\n\n<\/style>\n\n\n<script>\n\n(function(){\n\n\/* =========================================================\n   SETTINGS\n========================================================= *\/\n\nconst BASE =\n  \"https:\/\/taleemnama.pk\/urdu\";\n\n\n\/*\nSeven latest posts only.\n*\/\n\nconst POSTS_PER_CATEGORY =\n  7;\n\n\n\/*\nFour side stories.\n*\/\n\nconst SIDE_STORIES =\n  4;\n\n\n\/*\nSix second autoplay.\n*\/\n\nconst AUTOPLAY_TIME =\n  6000;\n\n\n\/* =========================================================\n   CATEGORY URLS\n========================================================= *\/\n\nconst CATEGORY_URLS = {\n\n  \"latest-news\":\n    BASE + \"\/category\/latest-news\/\",\n\n  \"federal-govt\":\n    BASE + \"\/category\/federal-govt\/\",\n\n  \"punjab\":\n    BASE + \"\/category\/punjab\/\",\n\n  \"sindh\":\n    BASE + \"\/category\/sindh\/\",\n\n  \"kpk\":\n    BASE + \"\/category\/kpk\/\",\n\n  \"baluichstan\":\n    BASE + \"\/category\/baluichstan\/\",\n\n  \"ajk\":\n    BASE + \"\/category\/ajk\/\",\n\n  \"gb\":\n    BASE + \"\/category\/gb\/\"\n\n};\n\n\n\/* =========================================================\n   LABELS\n========================================================= *\/\n\nconst LABELS = {\n\n  \"latest-news\":\n    \"\u062a\u0627\u0632\u06c1 \u062a\u0631\u06cc\u0646\",\n\n  \"federal-govt\":\n    \"\u0648\u0641\u0627\u0642\u06cc \u062f\u0627\u0631\u0627\u0644\u062d\u06a9\u0648\u0645\u062a\",\n\n  \"punjab\":\n    \"\u067e\u0646\u062c\u0627\u0628\",\n\n  \"sindh\":\n    \"\u0633\u0646\u062f\u06be\",\n\n  \"kpk\":\n    \"\u062e\u06cc\u0628\u0631\u067e\u062e\u062a\u0648\u0646\u062e\u0648\u0627\u06c1\",\n\n  \"baluichstan\":\n    \"\u0628\u0644\u0648\u0686\u0633\u062a\u0627\u0646\",\n\n  \"ajk\":\n    \"\u0622\u0632\u0627\u062f \u06a9\u0634\u0645\u06cc\u0631\",\n\n  \"gb\":\n    \"\u06af\u0644\u06af\u062a \u0628\u0644\u062a\u0633\u062a\u0627\u0646\"\n\n};\n\n\n\/* =========================================================\n   DOM\n========================================================= *\/\n\nconst root =\n  document.querySelector(\n    \".tnu-brand-news\"\n  );\n\n\nif(!root){\n  return;\n}\n\n\nconst tabs =\n  [\n    ...root.querySelectorAll(\n      \".tnu-brand-tab\"\n    )\n  ];\n\n\nconst loader =\n  root.querySelector(\n    \".tnu-brand-loader\"\n  );\n\n\nconst media =\n  root.querySelector(\n    \".tnu-brand-media\"\n  );\n\n\nconst main =\n  root.querySelector(\n    \".tnu-brand-main\"\n  );\n\n\nconst mainImage =\n  root.querySelector(\n    \".tnu-brand-main-image\"\n  );\n\n\nconst mainFallback =\n  root.querySelector(\n    \".tnu-brand-main-fallback\"\n  );\n\n\nconst mainLink =\n  root.querySelector(\n    \".tnu-brand-main-link\"\n  );\n\n\nconst mainTitle =\n  root.querySelector(\n    \".tnu-brand-main-title\"\n  );\n\n\nconst mainCategory =\n  root.querySelector(\n    \".tnu-brand-category\"\n  );\n\n\nconst side =\n  root.querySelector(\n    \".tnu-brand-side\"\n  );\n\n\nconst currentEl =\n  root.querySelector(\n    \".tnu-brand-current\"\n  );\n\n\nconst totalEl =\n  root.querySelector(\n    \".tnu-brand-total\"\n  );\n\n\nconst prev =\n  root.querySelector(\n    \".tnu-brand-prev\"\n  );\n\n\nconst next =\n  root.querySelector(\n    \".tnu-brand-next\"\n  );\n\n\nconst progress =\n  root.querySelector(\n    \".tnu-brand-progress\"\n  );\n\n\nconst categoryLink =\n  root.querySelector(\n    \"#tnu-brand-category-link\"\n  );\n\n\nif(\n  !main ||\n  !media ||\n  !side\n){\n\n  return;\n}\n\n\n\/* =========================================================\n   STATE\n========================================================= *\/\n\nlet posts =\n  [];\n\n\nlet current =\n  0;\n\n\nlet activeSlug =\n  \"latest-news\";\n\n\nlet timer =\n  null;\n\n\nconst cache =\n  new Map();\n\n\nconst reducedMotion =\n\n  window.matchMedia(\n\n    \"(prefers-reduced-motion:reduce)\"\n\n  ).matches;\n\n\n\/* =========================================================\n   DESKTOP SIDE HEIGHT\n========================================================= *\/\n\nfunction syncSideHeight(){\n\n  if(\n    window.innerWidth <= 1000\n  ){\n\n    side.style.height =\n      \"\";\n\n    return;\n\n  }\n\n\n  const height =\n\n    media\n    .getBoundingClientRect()\n    .height;\n\n\n  if(\n    height > 0\n  ){\n\n    side.style.height =\n      height + \"px\";\n\n  }\n\n}\n\n\nif(\n  \"ResizeObserver\" in window\n){\n\n  const observer =\n\n    new ResizeObserver(\n      syncSideHeight\n    );\n\n\n  observer.observe(\n    media\n  );\n\n}\n\n\nwindow.addEventListener(\n  \"resize\",\n  syncSideHeight\n);\n\n\n\/* =========================================================\n   HTML DECODER\n========================================================= *\/\n\nfunction decodeHTML(value){\n\n  const box =\n\n    document.createElement(\n      \"textarea\"\n    );\n\n\n  box.innerHTML =\n    value || \"\";\n\n\n  return box.value;\n\n}\n\n\n\/* =========================================================\n   CATEGORY ID\n========================================================= *\/\n\nasync function getCategoryId(slug){\n\n  const response =\n\n    await fetch(\n\n      BASE +\n\n      \"\/wp-json\/wp\/v2\/categories\" +\n\n      \"?slug=\" +\n\n      encodeURIComponent(slug),\n\n      {\n        credentials:\n          \"same-origin\"\n      }\n\n    );\n\n\n  if(\n    !response.ok\n  ){\n\n    throw new Error(\n      \"Category request failed\"\n    );\n\n  }\n\n\n  const data =\n    await response.json();\n\n\n  if(\n    !data.length\n  ){\n\n    throw new Error(\n      \"Category not found: \" +\n      slug\n    );\n\n  }\n\n\n  return data[0].id;\n\n}\n\n\n\/* =========================================================\n   LOAD POSTS\n========================================================= *\/\n\nasync function loadPosts(slug){\n\n  if(\n    cache.has(slug)\n  ){\n\n    return cache.get(slug);\n\n  }\n\n\n  const categoryId =\n\n    await getCategoryId(\n      slug\n    );\n\n\n  const endpoint =\n\n    BASE +\n\n    \"\/wp-json\/wp\/v2\/posts\" +\n\n    \"?categories=\" +\n\n    categoryId +\n\n    \"&per_page=\" +\n\n    POSTS_PER_CATEGORY +\n\n    \"&orderby=date\" +\n\n    \"&order=desc\" +\n\n    \"&_embed=1\";\n\n\n  const response =\n\n    await fetch(\n\n      endpoint,\n\n      {\n        credentials:\n          \"same-origin\"\n      }\n\n    );\n\n\n  if(\n    !response.ok\n  ){\n\n    throw new Error(\n      \"Posts request failed\"\n    );\n\n  }\n\n\n  const raw =\n    await response.json();\n\n\n  const result =\n\n    raw.map(\n\n      function(post){\n\n        let image =\n          \"\";\n\n        let thumb =\n          \"\";\n\n\n        try{\n\n          const embedded =\n            post\n            ._embedded\n            ?.[\"wp:featuredmedia\"];\n\n\n          const featured =\n\n            Array.isArray(embedded)\n            ? embedded[0]\n            : null;\n\n\n          if(featured){\n\n            image =\n\n              featured\n              .media_details\n              ?.sizes\n              ?.large\n              ?.source_url\n\n              ||\n\n              featured\n              .media_details\n              ?.sizes\n              ?.medium_large\n              ?.source_url\n\n              ||\n\n              featured\n              .source_url\n\n              ||\n\n              \"\";\n\n\n            thumb =\n\n              featured\n              .media_details\n              ?.sizes\n              ?.thumbnail\n              ?.source_url\n\n              ||\n\n              featured\n              .media_details\n              ?.sizes\n              ?.medium\n              ?.source_url\n\n              ||\n\n              image\n\n              ||\n\n              \"\";\n\n          }\n\n        }\n\n        catch(error){}\n\n\n        return {\n\n          title:\n            decodeHTML(\n              post\n              .title\n              ?.rendered\n            ),\n\n          url:\n            post.link,\n\n          image:\n            image,\n\n          thumb:\n            thumb\n\n        };\n\n      }\n\n    );\n\n\n  cache.set(\n    slug,\n    result\n  );\n\n\n  return result;\n\n}\n\n\n\/* =========================================================\n   CREATE SIDE MEDIA\n   ALWAYS RETURNS AN ELEMENT\n========================================================= *\/\n\nfunction createSideMedia(post){\n\n  const mediaBox =\n\n    document.createElement(\n      \"div\"\n    );\n\n\n  mediaBox.className =\n    \"tnu-brand-side-media\";\n\n\n  if(\n    post.thumb\n  ){\n\n    const image =\n\n      document.createElement(\n        \"img\"\n      );\n\n\n    image.className =\n      \"tnu-brand-side-image\";\n\n\n    image.src =\n      post.thumb;\n\n\n    image.alt =\n      post.title;\n\n\n    image.loading =\n      \"lazy\";\n\n\n    image.decoding =\n      \"async\";\n\n\n    image.width =\n      95;\n\n\n    image.height =\n      112;\n\n\n    \/*\n    If WordPress image URL exists\n    but image itself fails,\n    automatically replace it.\n    *\/\n\n    image.addEventListener(\n\n      \"error\",\n\n      function(){\n\n        mediaBox.innerHTML =\n          \"\";\n\n\n        const fallback =\n          createSidePlaceholder();\n\n\n        mediaBox.appendChild(\n          fallback\n        );\n\n      },\n\n      {\n        once:true\n      }\n\n    );\n\n\n    mediaBox.appendChild(\n      image\n    );\n\n  }\n\n  else{\n\n    mediaBox.appendChild(\n      createSidePlaceholder()\n    );\n\n  }\n\n\n  return mediaBox;\n\n}\n\n\n\/* =========================================================\n   SIDE PLACEHOLDER\n========================================================= *\/\n\nfunction createSidePlaceholder(){\n\n  const placeholder =\n\n    document.createElement(\n      \"div\"\n    );\n\n\n  placeholder.className =\n    \"tnu-brand-side-placeholder\";\n\n\n  const mark =\n\n    document.createElement(\n      \"span\"\n    );\n\n\n  mark.textContent =\n    \"TN\";\n\n\n  const label =\n\n    document.createElement(\n      \"small\"\n    );\n\n\n  label.textContent =\n    \"\u062a\u0639\u0644\u06cc\u0645 \u0646\u0627\u0645\u06c1\";\n\n\n  placeholder.append(\n    mark,\n    label\n  );\n\n\n  return placeholder;\n\n}\n\n\n\/* =========================================================\n   CREATE SIDE STORY\n========================================================= *\/\n\nfunction createSideStory(post){\n\n  const card =\n\n    document.createElement(\n      \"article\"\n    );\n\n\n  card.className =\n    \"tnu-brand-side-card\";\n\n\n  const link =\n\n    document.createElement(\n      \"a\"\n    );\n\n\n  link.href =\n    post.url;\n\n\n  \/*\n  CRITICAL:\n  First grid column ALWAYS gets media.\n  *\/\n\n  const mediaBox =\n    createSideMedia(\n      post\n    );\n\n\n  link.appendChild(\n    mediaBox\n  );\n\n\n  \/*\n  Second grid column ALWAYS gets headline.\n  *\/\n\n  const content =\n\n    document.createElement(\n      \"div\"\n    );\n\n\n  content.className =\n    \"tnu-brand-side-content\";\n\n\n  const heading =\n\n    document.createElement(\n      \"h3\"\n    );\n\n\n  heading.className =\n    \"tnu-brand-side-title\";\n\n\n  heading.textContent =\n    post.title;\n\n\n  content.appendChild(\n    heading\n  );\n\n\n  link.appendChild(\n    content\n  );\n\n\n  card.appendChild(\n    link\n  );\n\n\n  return card;\n\n}\n\n\n\/* =========================================================\n   MAIN IMAGE\n========================================================= *\/\n\nfunction renderMainImage(post){\n\n  if(\n    post.image\n  ){\n\n    mainFallback.hidden =\n      true;\n\n\n    mainImage.style.display =\n      \"block\";\n\n\n    mainImage.src =\n      post.image;\n\n\n    mainImage.alt =\n      post.title;\n\n\n    mainImage.onerror =\n\n      function(){\n\n        mainImage.style.display =\n          \"none\";\n\n\n        mainFallback.hidden =\n          false;\n\n      };\n\n  }\n\n  else{\n\n    mainImage.removeAttribute(\n      \"src\"\n    );\n\n\n    mainImage.alt =\n      \"\";\n\n\n    mainImage.style.display =\n      \"none\";\n\n\n    mainFallback.hidden =\n      false;\n\n  }\n\n}\n\n\n\/* =========================================================\n   PROGRESS\n========================================================= *\/\n\nfunction restartProgress(){\n\n  if(\n    reducedMotion\n  ){\n\n    return;\n\n  }\n\n\n  progress\n    .classList\n    .remove(\n      \"running\"\n    );\n\n\n  void progress.offsetWidth;\n\n\n  progress\n    .classList\n    .add(\n      \"running\"\n    );\n\n}\n\n\n\/* =========================================================\n   RENDER\n========================================================= *\/\n\nfunction render(){\n\n  if(\n    !posts.length\n  ){\n\n    return;\n\n  }\n\n\n  const post =\n    posts[current];\n\n\n  mainLink.href =\n    post.url;\n\n\n  mainTitle.textContent =\n    post.title;\n\n\n  mainCategory.textContent =\n\n    LABELS[\n      activeSlug\n    ]\n\n    ||\n\n    \"\u062a\u0627\u0632\u06c1 \u062a\u0631\u06cc\u0646\";\n\n\n  renderMainImage(\n    post\n  );\n\n\n  currentEl.textContent =\n    current + 1;\n\n\n  totalEl.textContent =\n    posts.length;\n\n\n  \/*\n  Rebuild side stories safely.\n  *\/\n\n  const fragment =\n    document.createDocumentFragment();\n\n\n  const maximum =\n\n    Math.min(\n      SIDE_STORIES,\n      Math.max(\n        posts.length - 1,\n        0\n      )\n    );\n\n\n  for(\n    let i = 1;\n    i <= maximum;\n    i++\n  ){\n\n    const index =\n\n      (\n        current + i\n      )\n\n      %\n\n      posts.length;\n\n\n    fragment.appendChild(\n\n      createSideStory(\n        posts[index]\n      )\n\n    );\n\n  }\n\n\n  side.replaceChildren(\n    fragment\n  );\n\n\n  requestAnimationFrame(\n    syncSideHeight\n  );\n\n\n  restartProgress();\n\n}\n\n\n\/* =========================================================\n   STOP AUTOPLAY\n========================================================= *\/\n\nfunction stopAuto(){\n\n  if(\n    timer\n  ){\n\n    clearInterval(\n      timer\n    );\n\n\n    timer =\n      null;\n\n  }\n\n\n  progress\n    .classList\n    .remove(\n      \"running\"\n    );\n\n}\n\n\n\/* =========================================================\n   START AUTOPLAY\n========================================================= *\/\n\nfunction startAuto(){\n\n  stopAuto();\n\n\n  if(\n    reducedMotion ||\n    posts.length < 2\n  ){\n\n    return;\n\n  }\n\n\n  restartProgress();\n\n\n  timer =\n\n    setInterval(\n\n      function(){\n\n        current =\n\n          (\n            current + 1\n          )\n\n          %\n\n          posts.length;\n\n\n        render();\n\n      },\n\n      AUTOPLAY_TIME\n\n    );\n\n}\n\n\n\/* =========================================================\n   SWITCH CATEGORY\n========================================================= *\/\n\nasync function switchCategory(slug){\n\n  activeSlug =\n    slug;\n\n\n  tabs.forEach(\n\n    function(tab){\n\n      tab.classList.toggle(\n\n        \"active\",\n\n        tab.dataset.slug === slug\n\n      );\n\n    }\n\n  );\n\n\n  if(\n    CATEGORY_URLS[slug]\n  ){\n\n    categoryLink.href =\n      CATEGORY_URLS[slug];\n\n  }\n\n\n  categoryLink.textContent =\n\n    \"\u062a\u0645\u0627\u0645 \" +\n\n    (\n      LABELS[slug]\n      ||\n      \"\"\n    ) +\n\n    \" \u062e\u0628\u0631\u06cc\u06ba \u062f\u06cc\u06a9\u06be\u06cc\u06ba \u2190\";\n\n\n  loader.hidden =\n    false;\n\n\n  stopAuto();\n\n\n  try{\n\n    posts =\n\n      await loadPosts(\n        slug\n      );\n\n\n    current =\n      0;\n\n\n    if(\n      !posts.length\n    ){\n\n      mainTitle.textContent =\n        \"\u0627\u0633 \u06a9\u06cc\u0679\u06af\u0631\u06cc \u0645\u06cc\u06ba \u0641\u06cc \u0627\u0644\u062d\u0627\u0644 \u06a9\u0648\u0626\u06cc \u062e\u0628\u0631 \u0645\u0648\u062c\u0648\u062f \u0646\u06c1\u06cc\u06ba\";\n\n\n      mainImage.style.display =\n        \"none\";\n\n\n      mainFallback.hidden =\n        false;\n\n\n      side.replaceChildren();\n\n\n      currentEl.textContent =\n        \"0\";\n\n\n      totalEl.textContent =\n        \"0\";\n\n\n      return;\n\n    }\n\n\n    render();\n\n\n    startAuto();\n\n  }\n\n  catch(error){\n\n    console.error(\n      error\n    );\n\n\n    mainTitle.textContent =\n      \"\u062e\u0628\u0631\u06cc\u06ba \u0644\u0648\u0688 \u0646\u06c1\u06cc\u06ba \u06c1\u0648 \u0633\u06a9\u06cc\u06ba\";\n\n\n    mainImage.style.display =\n      \"none\";\n\n\n    mainFallback.hidden =\n      false;\n\n\n    side.innerHTML =\n\n      '<div style=\"padding:18px;border:1px solid #E2E7F0;border-radius:10px;background:#fff;color:#1A237E;\">\u0635\u0641\u062d\u06c1 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0631\u06cc\u0641\u0631\u06cc\u0634 \u06a9\u0631\u06cc\u06ba\u06d4<\/div>';\n\n  }\n\n  finally{\n\n    loader.hidden =\n      true;\n\n  }\n\n}\n\n\n\/* =========================================================\n   CATEGORY BUTTONS\n========================================================= *\/\n\ntabs.forEach(\n\n  function(tab){\n\n    tab.addEventListener(\n\n      \"click\",\n\n      function(){\n\n        switchCategory(\n          this.dataset.slug\n        );\n\n      }\n\n    );\n\n  }\n\n);\n\n\n\/* =========================================================\n   NEXT\n========================================================= *\/\n\nnext.addEventListener(\n\n  \"click\",\n\n  function(){\n\n    if(\n      !posts.length\n    ){\n\n      return;\n\n    }\n\n\n    current =\n\n      (\n        current + 1\n      )\n\n      %\n\n      posts.length;\n\n\n    render();\n\n    startAuto();\n\n  }\n\n);\n\n\n\/* =========================================================\n   PREVIOUS\n========================================================= *\/\n\nprev.addEventListener(\n\n  \"click\",\n\n  function(){\n\n    if(\n      !posts.length\n    ){\n\n      return;\n\n    }\n\n\n    current =\n\n      (\n        current - 1 +\n        posts.length\n      )\n\n      %\n\n      posts.length;\n\n\n    render();\n\n    startAuto();\n\n  }\n\n);\n\n\n\/* =========================================================\n   PAUSE DESKTOP HOVER\n========================================================= *\/\n\nmain.addEventListener(\n\n  \"mouseenter\",\n\n  stopAuto\n\n);\n\n\nmain.addEventListener(\n\n  \"mouseleave\",\n\n  startAuto\n\n);\n\n\n\/* =========================================================\n   TAB VISIBILITY\n========================================================= *\/\n\ndocument.addEventListener(\n\n  \"visibilitychange\",\n\n  function(){\n\n    if(\n      document.hidden\n    ){\n\n      stopAuto();\n\n    }\n\n    else{\n\n      startAuto();\n\n    }\n\n  }\n\n);\n\n\n\/* =========================================================\n   INITIAL LOAD\n========================================================= *\/\n\nswitchCategory(\n  \"latest-news\"\n);\n\n\n})();\n\n<\/script>\n<\/div><\/div>\n\n\n<style>.kadence-column1019_7c60ed-14 > .kt-inside-inner-col,.kadence-column1019_7c60ed-14 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column1019_7c60ed-14 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column1019_7c60ed-14 > .kt-inside-inner-col{flex-direction:column;}.kadence-column1019_7c60ed-14 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column1019_7c60ed-14 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column1019_7c60ed-14{position:relative;}@media all and (max-width: 1024px){.kadence-column1019_7c60ed-14 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column1019_7c60ed-14 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column1019_7c60ed-14\"><div class=\"kt-inside-inner-col\">\n<section class=\"tnu-important-final\" dir=\"rtl\">\n\n  <header class=\"tnu-important-final-head\">\n    <h2>\n      <span>\ud83d\udd25<\/span>\n      \u0627\u06c1\u0645 \u0645\u0648\u0636\u0648\u0639\u0627\u062a\n    <\/h2>\n  <\/header>\n\n  <div\n    class=\"tnu-important-final-list\"\n    id=\"tnu-important-final-list\"\n  >\n    <div class=\"tnu-important-final-loading\">\n      \u0627\u06c1\u0645 \u0645\u0648\u0636\u0648\u0639\u0627\u062a \u0644\u0648\u0688 \u06c1\u0648 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba&#8230;\n    <\/div>\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =====================================================\n   TALEEM NAMA \u2014 IMPORTANT TOPICS FINAL\n===================================================== *\/\n\n.tnu-important-final{\n\n  --blue:#1A237E;\n  --dark:#0A2C64;\n  --orange:#FF6F00;\n\n  width:100%;\n\n  margin:0;\n\n  display:flex;\n  flex-direction:column;\n\n  background:#fff;\n\n  border:1px solid #E1E6EF;\n\n  border-radius:14px;\n\n  overflow:hidden;\n\n  box-shadow:\n    0 5px 18px\n    rgba(16,45,95,.055);\n\n  box-sizing:border-box;\n}\n\n\n.tnu-important-final *,\n.tnu-important-final *::before,\n.tnu-important-final *::after{\n  box-sizing:border-box;\n}\n\n\n\/* =====================================================\n   HEADER\n===================================================== *\/\n\n.tnu-important-final-head{\n\n  position:relative;\n\n  flex:0 0 58px;\n\n  height:58px;\n\n  display:flex;\n\n  align-items:center;\n\n  padding:\n    3px\n    16px\n    2px;\n\n  background:#fff;\n\n  border-bottom:\n    3px solid var(--orange);\n}\n\n\n.tnu-important-final-head::after{\n\n  content:\"\";\n\n  position:absolute;\n\n  right:0;\n  bottom:-3px;\n\n  width:110px;\n  height:3px;\n\n  background:\n    var(--blue);\n}\n\n\n.tnu-important-final-head h2{\n\n  display:flex;\n\n  align-items:center;\n\n  gap:6px;\n\n  margin:0;\n  padding:0;\n\n  color:\n    var(--blue);\n\n  font-size:25px;\n\n  line-height:1.45;\n\n  font-weight:800;\n}\n\n\n.tnu-important-final-head h2 span{\n\n  font-family:\n    Arial,sans-serif;\n\n  font-size:27px;\n\n  line-height:1;\n}\n\n\n\/* =====================================================\n   FIVE ITEMS AREA\n===================================================== *\/\n\n.tnu-important-final-list{\n\n  flex:1 1 auto;\n\n  min-height:0;\n\n  display:grid;\n\n  grid-template-rows:\n    repeat(5,minmax(0,1fr));\n\n  gap:7px;\n\n  padding:\n    9px\n    10px\n    10px;\n\n  overflow:hidden;\n}\n\n\n\/* =====================================================\n   ITEM\n===================================================== *\/\n\n.tnu-important-final-item{\n\n  min-height:0;\n\n  display:grid;\n\n  grid-template-columns:\n    43px\n    minmax(0,1fr)\n    17px;\n\n  align-items:center;\n\n  gap:9px;\n\n  width:100%;\n  height:100%;\n\n  padding:\n    5px\n    10px;\n\n  border:\n    1px solid transparent;\n\n  border-radius:10px;\n\n  text-decoration:none !important;\n\n  transition:\n    transform .17s ease,\n    box-shadow .17s ease;\n}\n\n\n.tnu-important-final-item:hover{\n\n  transform:\n    translateY(-1px);\n\n  box-shadow:\n    0 5px 13px\n    rgba(16,45,95,.075);\n}\n\n\n\/* =====================================================\n   FIVE COLOR CARDS\n===================================================== *\/\n\n.tnu-important-final-item:nth-child(1){\n\n  background:#FFF2E9;\n\n  border-color:#FFD5B7;\n}\n\n\n.tnu-important-final-item:nth-child(2){\n\n  background:#EAF4FF;\n\n  border-color:#CEE4FA;\n}\n\n\n.tnu-important-final-item:nth-child(3){\n\n  background:#EAF8F0;\n\n  border-color:#CEE9D8;\n}\n\n\n.tnu-important-final-item:nth-child(4){\n\n  background:#F4ECFF;\n\n  border-color:#DFD0F5;\n}\n\n\n.tnu-important-final-item:nth-child(5){\n\n  background:#FFF0F4;\n\n  border-color:#FFD0DC;\n}\n\n\n\/* =====================================================\n   NUMBER\n===================================================== *\/\n\n.tnu-important-final-number{\n\n  width:39px;\n  height:39px;\n\n  display:grid;\n\n  place-items:center;\n\n  border-radius:50%;\n\n  color:#fff;\n\n  font-family:\n    Arial,sans-serif;\n\n  font-size:12px;\n\n  line-height:1;\n\n  font-weight:800;\n\n  box-shadow:\n    0 3px 8px\n    rgba(0,0,0,.10);\n}\n\n\n.tnu-important-final-item:nth-child(1)\n.tnu-important-final-number{\n  background:#FF6F00;\n}\n\n\n.tnu-important-final-item:nth-child(2)\n.tnu-important-final-number{\n  background:#258CDD;\n}\n\n\n.tnu-important-final-item:nth-child(3)\n.tnu-important-final-number{\n  background:#1DBA67;\n}\n\n\n.tnu-important-final-item:nth-child(4)\n.tnu-important-final-number{\n  background:#8447D6;\n}\n\n\n.tnu-important-final-item:nth-child(5)\n.tnu-important-final-number{\n  background:#ED4264;\n}\n\n\n\/* =====================================================\n   HEADLINE \u2014 BIGGER FONT\n===================================================== *\/\n\n.tnu-important-final-title{\n\n  margin:0;\n\n  padding:\n    2px 0\n    6px;\n\n  color:#10182B;\n\n  font-size:16.5px;\n\n  line-height:1.75;\n\n  font-weight:700;\n\n  display:-webkit-box;\n\n  -webkit-box-orient:vertical;\n\n  -webkit-line-clamp:2;\n\n  overflow:hidden;\n}\n\n\n\/* =====================================================\n   ARROW\n===================================================== *\/\n\n.tnu-important-final-arrow{\n\n  color:\n    var(--blue);\n\n  font-family:\n    Arial,sans-serif;\n\n  font-size:21px;\n\n  line-height:1;\n\n  font-weight:700;\n\n  text-align:center;\n}\n\n\n\/* =====================================================\n   LOADING\n===================================================== *\/\n\n.tnu-important-final-loading{\n\n  grid-row:1 \/ -1;\n\n  display:grid;\n\n  place-items:center;\n\n  color:\n    var(--blue);\n\n  font-size:13px;\n}\n\n\n\/* =====================================================\n   TABLET\n===================================================== *\/\n\n@media(max-width:1000px){\n\n  .tnu-important-final{\n\n    height:auto !important;\n  }\n\n\n  .tnu-important-final-list{\n\n    display:flex;\n\n    flex-direction:column;\n\n    overflow:visible;\n  }\n\n\n  .tnu-important-final-item{\n\n    min-height:72px;\n\n    height:auto;\n  }\n\n}\n\n\n\/* =====================================================\n   MOBILE\n===================================================== *\/\n\n@media(max-width:600px){\n\n  .tnu-important-final{\n\n    border-radius:11px;\n  }\n\n\n  .tnu-important-final-head{\n\n    flex-basis:50px;\n\n    height:50px;\n\n    padding:\n      2px\n      12px;\n  }\n\n\n  .tnu-important-final-head h2{\n\n    font-size:21px;\n  }\n\n\n  .tnu-important-final-head h2 span{\n\n    font-size:23px;\n  }\n\n\n  .tnu-important-final-head::after{\n\n    width:82px;\n  }\n\n\n  .tnu-important-final-list{\n\n    gap:7px;\n\n    padding:\n      8px;\n  }\n\n\n  .tnu-important-final-item{\n\n    grid-template-columns:\n      38px\n      minmax(0,1fr)\n      16px;\n\n    gap:7px;\n\n    min-height:68px;\n\n    padding:\n      6px\n      8px;\n\n    border-radius:8px;\n  }\n\n\n  .tnu-important-final-number{\n\n    width:35px;\n\n    height:35px;\n\n    font-size:11px;\n  }\n\n\n  .tnu-important-final-title{\n\n    font-size:15.5px;\n\n    line-height:1.75;\n\n    padding-bottom:5px;\n  }\n\n\n  .tnu-important-final-arrow{\n\n    font-size:18px;\n  }\n\n}\n\n<\/style>\n\n\n<script>\n\n(function(){\n\nconst BASE =\n  \"https:\/\/taleemnama.pk\/urdu\";\n\n\nconst TAG_SLUG =\n  \"trending\";\n\n\nconst MAX_POSTS =\n  5;\n\n\nconst panel =\n  document.querySelector(\n    \".tnu-important-final\"\n  );\n\n\nconst list =\n  document.getElementById(\n    \"tnu-important-final-list\"\n  );\n\n\nif(\n  !panel ||\n  !list\n){\n  return;\n}\n\n\n\/* ===================================================\n   HTML DECODER\n=================================================== *\/\n\nfunction decodeHTML(value){\n\n  const box =\n    document.createElement(\n      \"textarea\"\n    );\n\n\n  box.innerHTML =\n    value || \"\";\n\n\n  return box.value;\n}\n\n\n\/* ===================================================\n   MATCH WHOLE NEWS BLOCK HEIGHT\n=================================================== *\/\n\nfunction syncImportantPanel(){\n\n  if(\n    window.innerWidth <= 1000\n  ){\n\n    panel.style.height =\n      \"\";\n\n    return;\n  }\n\n\n  const regionalMenu =\n    document.querySelector(\n      \".tnu-brand-tabs\"\n    );\n\n\n  const mainSlider =\n    document.querySelector(\n      \".tnu-brand-main\"\n    );\n\n\n  if(\n    !regionalMenu ||\n    !mainSlider\n  ){\n    return;\n  }\n\n\n  const menuRect =\n    regionalMenu\n    .getBoundingClientRect();\n\n\n  const sliderRect =\n    mainSlider\n    .getBoundingClientRect();\n\n\n  const totalHeight =\n\n    sliderRect.bottom -\n    menuRect.top;\n\n\n  if(\n    totalHeight > 300\n  ){\n\n    panel.style.height =\n      totalHeight + \"px\";\n\n  }\n\n}\n\n\n\/* ===================================================\n   WATCH RESIZE\n=================================================== *\/\n\nif(\n  \"ResizeObserver\" in window\n){\n\n  const regionalMenu =\n    document.querySelector(\n      \".tnu-brand-tabs\"\n    );\n\n\n  const mainSlider =\n    document.querySelector(\n      \".tnu-brand-main\"\n    );\n\n\n  const observer =\n    new ResizeObserver(\n      syncImportantPanel\n    );\n\n\n  if(regionalMenu){\n    observer.observe(\n      regionalMenu\n    );\n  }\n\n\n  if(mainSlider){\n    observer.observe(\n      mainSlider\n    );\n  }\n\n}\n\n\nwindow.addEventListener(\n  \"resize\",\n  syncImportantPanel\n);\n\n\n\/* ===================================================\n   GET TAG ID\n=================================================== *\/\n\nasync function getTagId(){\n\n  const response =\n\n    await fetch(\n\n      BASE +\n\n      \"\/wp-json\/wp\/v2\/tags\" +\n\n      \"?slug=\" +\n\n      encodeURIComponent(\n        TAG_SLUG\n      ),\n\n      {\n        credentials:\n          \"same-origin\"\n      }\n\n    );\n\n\n  if(\n    !response.ok\n  ){\n\n    throw new Error(\n      \"Trending tag request failed\"\n    );\n\n  }\n\n\n  const data =\n    await response.json();\n\n\n  if(\n    !data.length\n  ){\n\n    throw new Error(\n      \"Trending tag not found\"\n    );\n\n  }\n\n\n  return data[0].id;\n}\n\n\n\/* ===================================================\n   LOAD FIVE TOPICS\n=================================================== *\/\n\nasync function loadImportantTopics(){\n\n  try{\n\n\n    const tagId =\n      await getTagId();\n\n\n    const response =\n\n      await fetch(\n\n        BASE +\n\n        \"\/wp-json\/wp\/v2\/posts\" +\n\n        \"?tags=\" +\n\n        tagId +\n\n        \"&per_page=\" +\n\n        MAX_POSTS +\n\n        \"&orderby=date\" +\n\n        \"&order=desc\",\n\n        {\n          credentials:\n            \"same-origin\"\n        }\n\n      );\n\n\n    if(\n      !response.ok\n    ){\n\n      throw new Error(\n        \"Important topics request failed\"\n      );\n\n    }\n\n\n    const posts =\n      await response.json();\n\n\n    list.innerHTML =\n      \"\";\n\n\n    if(\n      !posts.length\n    ){\n\n      list.innerHTML =\n\n        '<div class=\"tnu-important-final-loading\">\u0641\u06cc \u0627\u0644\u062d\u0627\u0644 \u06a9\u0648\u0626\u06cc \u0627\u06c1\u0645 \u0645\u0648\u0636\u0648\u0639 \u0645\u0646\u062a\u062e\u0628 \u0646\u06c1\u06cc\u06ba \u06a9\u06cc\u0627 \u06af\u06cc\u0627\u06d4<\/div>';\n\n\n      return;\n    }\n\n\n    posts.forEach(\n\n      function(post,index){\n\n\n        const item =\n\n          document.createElement(\n            \"a\"\n          );\n\n\n        item.className =\n          \"tnu-important-final-item\";\n\n\n        item.href =\n          post.link;\n\n\n\n        const number =\n\n          document.createElement(\n            \"span\"\n          );\n\n\n        number.className =\n          \"tnu-important-final-number\";\n\n\n        number.textContent =\n\n          String(\n            index + 1\n          ).padStart(\n            2,\n            \"0\"\n          );\n\n\n\n        const heading =\n\n          document.createElement(\n            \"h3\"\n          );\n\n\n        heading.className =\n          \"tnu-important-final-title\";\n\n\n        heading.textContent =\n\n          decodeHTML(\n            post.title.rendered\n          );\n\n\n\n        const arrow =\n\n          document.createElement(\n            \"span\"\n          );\n\n\n        arrow.className =\n          \"tnu-important-final-arrow\";\n\n\n        arrow.textContent =\n          \"\u2039\";\n\n\n\n        item.append(\n          number,\n          heading,\n          arrow\n        );\n\n\n        list.appendChild(\n          item\n        );\n\n      }\n\n    );\n\n\n    requestAnimationFrame(\n      syncImportantPanel\n    );\n\n\n  }\n\n\n  catch(error){\n\n\n    console.error(\n      error\n    );\n\n\n    list.innerHTML =\n\n      '<div class=\"tnu-important-final-loading\">\u0627\u06c1\u0645 \u0645\u0648\u0636\u0648\u0639\u0627\u062a \u0644\u0648\u0688 \u0646\u06c1\u06cc\u06ba \u06c1\u0648 \u0633\u06a9\u06d2\u06d4<\/div>';\n\n  }\n\n}\n\n\n\/* ===================================================\n   START\n=================================================== *\/\n\nloadImportantTopics();\n\n\n})();\n\n<\/script>\n<\/div><\/div>\n\n<\/div><\/div>\n\n\n<!-- =========================================================\n TALEEM NAMA URDU\n IMPORTANT EDUCATION NEWS\n 3-CATEGORY LIGHTWEIGHT HOMEPAGE SECTION\n FINAL FIXED VERSION\n========================================================= -->\n\n<section class=\"tnedu-news-section\" dir=\"rtl\" aria-labelledby=\"tnedu-main-title\">\n\n    <!-- =====================================================\n         MAIN BRANDED SECTION HEADER\n    ====================================================== -->\n\n    <header class=\"tnedu-section-header\">\n\n        <div class=\"tnedu-heading-row\">\n\n            <span class=\"tnedu-heading-icon\" aria-hidden=\"true\">\n                <svg viewBox=\"0 0 64 64\">\n                    <path d=\"M7 23 32 9l25 14-25 14L7 23Z\" fill=\"#1A237E\"><\/path>\n                    <path d=\"M16 31v13c0 6 8 11 16 11s16-5 16-11V31L32 40 16 31Z\" fill=\"#3949AB\"><\/path>\n                    <path d=\"M53 26v17\" stroke=\"#FF6F00\" stroke-width=\"4\" stroke-linecap=\"round\"><\/path>\n                    <circle cx=\"53\" cy=\"47\" r=\"4\" fill=\"#FFB300\"><\/circle>\n                <\/svg>\n            <\/span>\n\n            <div class=\"tnedu-heading-text\">\n\n                <h2 id=\"tnedu-main-title\">\n                    \u067e\u0627\u06a9\u0633\u062a\u0627\u0646 \u06a9\u06cc \u0627\u06c1\u0645 \u062a\u0639\u0644\u06cc\u0645\u06cc \u062e\u0628\u0631\u06cc\u06ba\n                <\/h2>\n\n                <p>\n                    \u06af\u0648\u0631\u0646\u0645\u0646\u0679 \u0648 \u0627\u062f\u0627\u0631\u06d2\u060c \u0627\u0645\u062a\u062d\u0627\u0646\u0627\u062a \u0648 \u0646\u062a\u0627\u0626\u062c \u0627\u0648\u0631 \u062a\u0639\u0644\u06cc\u0645\u06cc \u0627\u062f\u0627\u0631\u0648\u06ba \u06a9\u06cc \u062a\u0627\u0632\u06c1 \u062a\u0631\u06cc\u0646 \u062e\u0628\u0631\u06cc\u06ba\n                <\/p>\n\n            <\/div>\n\n        <\/div>\n\n    <\/header>\n\n\n    <!-- =====================================================\n         BRAND DIVIDER\n    ====================================================== -->\n\n    <div class=\"tnedu-brand-line\" aria-hidden=\"true\">\n        <span class=\"tnedu-brand-blue\"><\/span>\n        <span class=\"tnedu-brand-orange\"><\/span>\n    <\/div>\n\n\n    <!-- =====================================================\n         THREE CATEGORY COLUMNS\n    ====================================================== -->\n\n    <div class=\"tnedu-news-grid\">\n\n\n        <!-- =================================================\n             GOVERNMENT & INSTITUTIONS\n        ================================================== -->\n\n        <section\n            class=\"tnedu-news-column\"\n            data-category-slug=\"government-and-institutions\"\n        >\n\n            <header class=\"tnedu-category-head\">\n\n                <span class=\"tnedu-category-icon\">\ud83c\udfdb\ufe0f<\/span>\n\n                <h3>\n                    \u06af\u0648\u0631\u0646\u0645\u0646\u0679 \u0648 \u0627\u062f\u0627\u0631\u06d2\n                <\/h3>\n\n            <\/header>\n\n\n            <div class=\"tnedu-news-list\">\n\n                <div class=\"tnedu-loading\">\n                    \u062e\u0628\u0631\u06cc\u06ba \u0644\u0648\u0688 \u06c1\u0648 \u0631\u06c1\u06cc \u06c1\u06cc\u06ba&#8230;\n                <\/div>\n\n            <\/div>\n\n\n            <a\n                class=\"tnedu-view-all\"\n                href=\"https:\/\/taleemnama.pk\/urdu\/category\/government-and-institutions\/\"\n            >\n                \u06af\u0648\u0631\u0646\u0645\u0646\u0679 \u0648 \u0627\u062f\u0627\u0631\u06d2 \u06a9\u06cc \u062a\u0645\u0627\u0645 \u062e\u0628\u0631\u06cc\u06ba\n                <span>\u2190<\/span>\n            <\/a>\n\n        <\/section>\n\n\n\n        <!-- =================================================\n             EXAMS & RESULTS\n        ================================================== -->\n\n        <section\n            class=\"tnedu-news-column\"\n            data-category-slug=\"exam-and-results\"\n        >\n\n            <header class=\"tnedu-category-head\">\n\n                <span class=\"tnedu-category-icon\">\ud83d\udccb<\/span>\n\n                <h3>\n                    \u0627\u0645\u062a\u062d\u0627\u0646\u0627\u062a \u0648 \u0646\u062a\u0627\u0626\u062c\n                <\/h3>\n\n            <\/header>\n\n\n            <div class=\"tnedu-news-list\">\n\n                <div class=\"tnedu-loading\">\n                    \u062e\u0628\u0631\u06cc\u06ba \u0644\u0648\u0688 \u06c1\u0648 \u0631\u06c1\u06cc \u06c1\u06cc\u06ba&#8230;\n                <\/div>\n\n            <\/div>\n\n\n            <a\n                class=\"tnedu-view-all\"\n                href=\"https:\/\/taleemnama.pk\/urdu\/category\/exam-and-results\/\"\n            >\n                \u0627\u0645\u062a\u062d\u0627\u0646\u0627\u062a \u0648 \u0646\u062a\u0627\u0626\u062c \u06a9\u06cc \u062a\u0645\u0627\u0645 \u062e\u0628\u0631\u06cc\u06ba\n                <span>\u2190<\/span>\n            <\/a>\n\n        <\/section>\n\n\n\n        <!-- =================================================\n             EDUCATIONAL INSTITUTIONS\n        ================================================== -->\n\n        <section\n            class=\"tnedu-news-column\"\n            data-category-slug=\"educational-institutions\"\n        >\n\n            <header class=\"tnedu-category-head\">\n\n                <span class=\"tnedu-category-icon\">\ud83c\udf93<\/span>\n\n                <h3>\n                    \u062a\u0639\u0644\u06cc\u0645\u06cc \u0627\u062f\u0627\u0631\u06d2\n                <\/h3>\n\n            <\/header>\n\n\n            <div class=\"tnedu-news-list\">\n\n                <div class=\"tnedu-loading\">\n                    \u062e\u0628\u0631\u06cc\u06ba \u0644\u0648\u0688 \u06c1\u0648 \u0631\u06c1\u06cc \u06c1\u06cc\u06ba&#8230;\n                <\/div>\n\n            <\/div>\n\n\n            <a\n                class=\"tnedu-view-all\"\n                href=\"https:\/\/taleemnama.pk\/urdu\/category\/educational-institutions\/\"\n            >\n                \u062a\u0639\u0644\u06cc\u0645\u06cc \u0627\u062f\u0627\u0631\u0648\u06ba \u06a9\u06cc \u062a\u0645\u0627\u0645 \u062e\u0628\u0631\u06cc\u06ba\n                <span>\u2190<\/span>\n            <\/a>\n\n        <\/section>\n\n\n    <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =========================================================\n   BASE\n========================================================= *\/\n\n.tnedu-news-section,\n.tnedu-news-section *{\n    box-sizing:border-box;\n}\n\n\n.tnedu-news-section{\n\n    --tn-blue:#1A237E;\n    --tn-dark:#0A2C64;\n\n    --tn-orange:#FF6F00;\n    --tn-orange-dark:#E85D00;\n\n    --tn-text:#172033;\n    --tn-muted:#667085;\n\n    --tn-border:#E3E7EE;\n    --tn-soft:#F7F8FB;\n\n    width:100%;\n    max-width:1290px;\n\n    margin:0 auto;\n\n    background:#fff;\n\n    font-family:inherit;\n}\n\n\n\/* =========================================================\n   MAIN SECTION HEADER\n========================================================= *\/\n\n.tnedu-section-header{\n\n    width:100%;\n\n    padding:\n        10px\n        4px\n        11px;\n\n    background:#fff;\n}\n\n\n.tnedu-heading-row{\n\n    display:flex;\n\n    align-items:center;\n\n    gap:13px;\n}\n\n\n\/* =========================================================\n   MAIN ICON\n========================================================= *\/\n\n.tnedu-heading-icon{\n\n    flex:0 0 auto;\n\n    width:56px;\n    height:56px;\n\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    border-radius:15px;\n\n    background:\n        linear-gradient(\n            135deg,\n            #EEF0FF,\n            #FFF2E7\n        );\n\n    box-shadow:\n        0 4px 12px\n        rgba(26,35,126,.08);\n}\n\n\n.tnedu-heading-icon svg{\n\n    width:46px;\n    height:46px;\n\n    display:block;\n}\n\n\n\/* =========================================================\n   MAIN TITLE\n========================================================= *\/\n\n.tnedu-heading-text{\n\n    min-width:0;\n}\n\n\n.tnedu-heading-text h2{\n\n    margin:0 0 3px!important;\n\n    padding:0!important;\n\n    color:\n        var(--tn-blue)!important;\n\n    font-size:30px!important;\n\n    line-height:1.55!important;\n\n    font-weight:850!important;\n}\n\n\n.tnedu-heading-text p{\n\n    margin:0!important;\n\n    padding:\n        0 0 3px!important;\n\n    color:\n        var(--tn-muted)!important;\n\n    font-size:14px!important;\n\n    line-height:1.8!important;\n\n    font-weight:500;\n}\n\n\n\/* =========================================================\n   BRAND LINE\n========================================================= *\/\n\n.tnedu-brand-line{\n\n    display:flex;\n\n    width:100%;\n    height:4px;\n\n    margin:\n        0 0 18px;\n\n    overflow:hidden;\n}\n\n\n.tnedu-brand-blue{\n\n    display:block;\n\n    width:125px;\n\n    background:\n        var(--tn-blue);\n}\n\n\n.tnedu-brand-orange{\n\n    display:block;\n\n    flex:1;\n\n    background:\n        var(--tn-orange);\n}\n\n\n\/* =========================================================\n   GRID\n========================================================= *\/\n\n.tnedu-news-grid{\n\n    display:grid;\n\n    grid-template-columns:\n        repeat(3,minmax(0,1fr));\n\n    gap:24px;\n\n    align-items:stretch;\n}\n\n\n\/* =========================================================\n   COLUMN\n========================================================= *\/\n\n.tnedu-news-column{\n\n    min-width:0;\n\n    display:flex;\n\n    flex-direction:column;\n\n    overflow:hidden;\n\n    background:#fff;\n\n    border:\n        1px solid\n        var(--tn-border);\n\n    border-radius:12px;\n\n    box-shadow:\n        0 4px 16px\n        rgba(26,35,126,.055);\n}\n\n\n\/* =========================================================\n   CATEGORY HEADER\n========================================================= *\/\n\n.tnedu-category-head{\n\n    position:relative;\n\n    min-height:68px;\n\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    gap:8px;\n\n    padding:\n        10px\n        14px;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--tn-orange-dark),\n            var(--tn-orange)\n        );\n\n    color:#fff;\n}\n\n\n.tnedu-category-head::after{\n\n    content:\"\";\n\n    position:absolute;\n\n    right:0;\n    left:0;\n    bottom:0;\n\n    height:4px;\n\n    background:\n        var(--tn-blue);\n}\n\n\n.tnedu-category-icon{\n\n    font-family:\n        Arial,sans-serif;\n\n    font-size:22px;\n\n    line-height:1;\n}\n\n\n.tnedu-category-head h3{\n\n    margin:0!important;\n\n    padding:\n        0 0 2px!important;\n\n    color:#fff!important;\n\n    font-size:22px!important;\n\n    line-height:1.7!important;\n\n    font-weight:800!important;\n\n    text-align:center;\n}\n\n\n\/* =========================================================\n   NEWS LIST\n========================================================= *\/\n\n.tnedu-news-list{\n\n    display:flex;\n\n    flex-direction:column;\n\n    flex:1;\n\n    padding:\n        3px\n        14px\n        0;\n\n    background:#fff;\n}\n\n\n\/* =========================================================\n   SINGLE NEWS ITEM\n========================================================= *\/\n\n.tnedu-news-item{\n\n    display:grid;\n\n    grid-template-columns:\n        82px\n        minmax(0,1fr);\n\n    gap:12px;\n\n    align-items:center;\n\n    min-width:0;\n    min-height:104px;\n\n    padding:\n        11px\n        0;\n\n    border-bottom:\n        1px solid #E8EBF0;\n\n    color:inherit;\n\n    text-decoration:none!important;\n\n    transition:\n        background .18s ease,\n        transform .18s ease;\n}\n\n\n.tnedu-news-item:hover{\n\n    background:#FAFBFD;\n\n    transform:\n        translateX(-2px);\n}\n\n\n\/* =========================================================\n   CRITICAL FIX:\n   MEDIA SLOT ALWAYS EXISTS\n========================================================= *\/\n\n.tnedu-media-slot{\n\n    position:relative;\n\n    width:82px;\n    height:74px;\n\n    overflow:hidden;\n\n    flex:0 0 auto;\n\n    border:\n        1px solid #D6DDE8;\n\n    border-radius:7px;\n\n    background:\n        linear-gradient(\n            135deg,\n            #EEF0FF,\n            #FFF2E7\n        );\n}\n\n\n\/* =========================================================\n   THUMBNAIL\n========================================================= *\/\n\n.tnedu-thumb{\n\n    position:absolute;\n\n    inset:0;\n\n    width:100%;\n    height:100%;\n\n    display:block;\n\n    object-fit:cover;\n\n    background:#EEF2F6;\n}\n\n\n\/* =========================================================\n   PLACEHOLDER\n========================================================= *\/\n\n.tnedu-thumb-placeholder{\n\n    position:absolute;\n\n    inset:0;\n\n    display:flex;\n\n    flex-direction:column;\n\n    align-items:center;\n    justify-content:center;\n\n    gap:3px;\n\n    background:\n\n        radial-gradient(\n            circle at 30% 20%,\n            rgba(255,111,0,.14),\n            transparent 45%\n        ),\n\n        linear-gradient(\n            135deg,\n            #EEF0FF,\n            #FFF3E9\n        );\n}\n\n\n.tnedu-thumb-placeholder span{\n\n    width:39px;\n    height:39px;\n\n    display:grid;\n\n    place-items:center;\n\n    border-radius:50%;\n\n    background:\n        var(--tn-blue);\n\n    color:#fff;\n\n    font-family:\n        Arial,sans-serif;\n\n    font-size:12px;\n\n    line-height:1;\n\n    font-weight:900;\n\n    border-bottom:\n        3px solid\n        var(--tn-orange);\n}\n\n\n.tnedu-thumb-placeholder small{\n\n    color:\n        var(--tn-blue);\n\n    font-size:8px;\n\n    font-weight:700;\n}\n\n\n\/* =========================================================\n   HEADLINE\n========================================================= *\/\n\n.tnedu-news-title{\n\n    min-width:0;\n\n    margin:0!important;\n\n    padding:\n        2px\n        2px\n        6px\n        0!important;\n\n    color:\n        var(--tn-text)!important;\n\n    font-size:17px!important;\n\n    line-height:1.95!important;\n\n    font-weight:700!important;\n\n    display:-webkit-box;\n\n    -webkit-box-orient:vertical;\n\n    -webkit-line-clamp:3;\n\n    overflow:hidden;\n\n    white-space:normal;\n\n    word-break:normal;\n\n    overflow-wrap:break-word;\n}\n\n\n.tnedu-news-item:hover\n.tnedu-news-title{\n\n    color:\n        var(--tn-blue)!important;\n}\n\n\n\/* =========================================================\n   VIEW ALL\n========================================================= *\/\n\n.tnedu-view-all{\n\n    display:flex;\n\n    align-items:center;\n    justify-content:space-between;\n\n    gap:8px;\n\n    min-height:47px;\n\n    margin:\n        0 14px\n        13px;\n\n    padding:\n        7px\n        12px\n        8px;\n\n    border-radius:7px;\n\n    background:#F5F6FC;\n\n    color:\n        var(--tn-blue)!important;\n\n    text-decoration:none!important;\n\n    font-size:14px;\n\n    line-height:1.7;\n\n    font-weight:800;\n\n    transition:\n        background .18s ease,\n        color .18s ease;\n}\n\n\n.tnedu-view-all span{\n\n    color:\n        var(--tn-orange);\n\n    font-family:\n        Arial,sans-serif;\n\n    font-size:19px;\n}\n\n\n.tnedu-view-all:hover{\n\n    background:#FFF1E7;\n\n    color:\n        var(--tn-orange)!important;\n}\n\n\n\/* =========================================================\n   LOADER\n========================================================= *\/\n\n.tnedu-loading{\n\n    min-height:130px;\n\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    padding:20px;\n\n    text-align:center;\n\n    color:\n        var(--tn-blue);\n\n    font-size:13px;\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media(max-width:1000px){\n\n    .tnedu-news-grid{\n\n        grid-template-columns:\n            repeat(2,minmax(0,1fr));\n\n        gap:18px;\n    }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media(max-width:650px){\n\n    .tnedu-section-header{\n\n        padding:\n            6px\n            2px\n            8px;\n    }\n\n\n    .tnedu-heading-row{\n\n        gap:9px;\n    }\n\n\n    .tnedu-heading-icon{\n\n        width:48px;\n        height:48px;\n\n        border-radius:12px;\n    }\n\n\n    .tnedu-heading-icon svg{\n\n        width:39px;\n        height:39px;\n    }\n\n\n    .tnedu-heading-text h2{\n\n        font-size:22px!important;\n\n        line-height:1.6!important;\n    }\n\n\n    .tnedu-heading-text p{\n\n        font-size:11.5px!important;\n\n        line-height:1.75!important;\n    }\n\n\n    .tnedu-brand-line{\n\n        height:3px;\n\n        margin-bottom:13px;\n    }\n\n\n    .tnedu-brand-blue{\n\n        width:95px;\n    }\n\n\n    .tnedu-news-grid{\n\n        grid-template-columns:1fr;\n\n        gap:18px;\n    }\n\n\n    .tnedu-category-head{\n\n        min-height:58px;\n\n        padding:\n            8px\n            12px;\n    }\n\n\n    .tnedu-category-head h3{\n\n        font-size:20px!important;\n\n        line-height:1.65!important;\n    }\n\n\n    .tnedu-category-icon{\n\n        font-size:19px;\n    }\n\n\n    .tnedu-news-list{\n\n        padding:\n            2px\n            11px\n            0;\n    }\n\n\n    .tnedu-news-item{\n\n        grid-template-columns:\n            88px\n            minmax(0,1fr);\n\n        gap:10px;\n\n        min-height:102px;\n\n        padding:\n            9px\n            0;\n    }\n\n\n    .tnedu-media-slot{\n\n        width:88px;\n        height:76px;\n    }\n\n\n    .tnedu-news-title{\n\n        font-size:16px!important;\n\n        line-height:1.95!important;\n    }\n\n\n    .tnedu-view-all{\n\n        margin:\n            2px\n            11px\n            11px;\n\n        font-size:13.5px;\n    }\n\n}\n\n\n\/* =========================================================\n   VERY SMALL MOBILE\n========================================================= *\/\n\n@media(max-width:380px){\n\n    .tnedu-heading-text h2{\n\n        font-size:20px!important;\n    }\n\n\n    .tnedu-heading-text p{\n\n        display:none;\n    }\n\n\n    .tnedu-news-item{\n\n        grid-template-columns:\n            78px\n            minmax(0,1fr);\n    }\n\n\n    .tnedu-media-slot{\n\n        width:78px;\n        height:70px;\n    }\n\n\n    .tnedu-news-title{\n\n        font-size:15px!important;\n    }\n\n}\n\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n.tnedu-news-item:focus-visible,\n.tnedu-view-all:focus-visible{\n\n    outline:\n        3px solid\n        var(--tn-orange);\n\n    outline-offset:2px;\n}\n\n<\/style>\n\n\n<script>\n\n(function(){\n\nconst BASE =\n    \"https:\/\/taleemnama.pk\/urdu\";\n\n\n\/*\nFive latest posts per category.\n*\/\n\nconst POSTS_PER_CATEGORY =\n    5;\n\n\nconst root =\n    document.querySelector(\n        \".tnedu-news-section\"\n    );\n\n\nif(!root){\n    return;\n}\n\n\nconst columns =\n    root.querySelectorAll(\n        \".tnedu-news-column\"\n    );\n\n\nif(!columns.length){\n    return;\n}\n\n\n\/* =====================================================\n   HTML DECODER\n===================================================== *\/\n\nfunction decodeHTML(value){\n\n    const box =\n        document.createElement(\n            \"textarea\"\n        );\n\n\n    box.innerHTML =\n        value || \"\";\n\n\n    return box.value;\n}\n\n\n\/* =====================================================\n   CATEGORY ID\n===================================================== *\/\n\nasync function getCategoryId(slug){\n\n    const response =\n\n        await fetch(\n\n            BASE +\n\n            \"\/wp-json\/wp\/v2\/categories\" +\n\n            \"?slug=\" +\n\n            encodeURIComponent(\n                slug\n            ),\n\n            {\n                credentials:\n                    \"same-origin\"\n            }\n\n        );\n\n\n    if(!response.ok){\n\n        throw new Error(\n            \"Category request failed\"\n        );\n    }\n\n\n    const categories =\n        await response.json();\n\n\n    if(!categories.length){\n\n        throw new Error(\n            \"Category not found: \" +\n            slug\n        );\n    }\n\n\n    return categories[0].id;\n}\n\n\n\/* =====================================================\n   GET POSTS\n===================================================== *\/\n\nasync function getPosts(slug){\n\n    const categoryId =\n        await getCategoryId(\n            slug\n        );\n\n\n    const endpoint =\n\n        BASE +\n\n        \"\/wp-json\/wp\/v2\/posts\" +\n\n        \"?categories=\" +\n\n        categoryId +\n\n        \"&per_page=\" +\n\n        POSTS_PER_CATEGORY +\n\n        \"&orderby=date\" +\n\n        \"&order=desc\" +\n\n        \"&_embed=1\";\n\n\n    const response =\n\n        await fetch(\n\n            endpoint,\n\n            {\n                credentials:\n                    \"same-origin\"\n            }\n\n        );\n\n\n    if(!response.ok){\n\n        throw new Error(\n            \"Posts request failed\"\n        );\n    }\n\n\n    return await response.json();\n}\n\n\n\/* =====================================================\n   GET THUMBNAIL\n===================================================== *\/\n\nfunction getThumbnail(post){\n\n    try{\n\n        const embedded =\n\n            post\n            ._embedded\n            ?.[\"wp:featuredmedia\"];\n\n\n        const media =\n\n            Array.isArray(embedded)\n            ? embedded[0]\n            : null;\n\n\n        if(!media){\n            return \"\";\n        }\n\n\n        return (\n\n            media\n            .media_details\n            ?.sizes\n            ?.thumbnail\n            ?.source_url\n\n            ||\n\n            media\n            .media_details\n            ?.sizes\n            ?.medium\n            ?.source_url\n\n            ||\n\n            media\n            .source_url\n\n            ||\n\n            \"\"\n\n        );\n\n    }\n\n    catch(error){\n\n        return \"\";\n    }\n}\n\n\n\/* =====================================================\n   PLACEHOLDER\n===================================================== *\/\n\nfunction createPlaceholder(){\n\n    const placeholder =\n\n        document.createElement(\n            \"div\"\n        );\n\n\n    placeholder.className =\n        \"tnedu-thumb-placeholder\";\n\n\n    const mark =\n\n        document.createElement(\n            \"span\"\n        );\n\n\n    mark.textContent =\n        \"TN\";\n\n\n    const label =\n\n        document.createElement(\n            \"small\"\n        );\n\n\n    label.textContent =\n        \"\u062a\u0639\u0644\u06cc\u0645 \u0646\u0627\u0645\u06c1\";\n\n\n    placeholder.append(\n        mark,\n        label\n    );\n\n\n    return placeholder;\n}\n\n\n\/* =====================================================\n   MEDIA SLOT\n===================================================== *\/\n\nfunction createMediaSlot(post,title){\n\n    const mediaSlot =\n\n        document.createElement(\n            \"div\"\n        );\n\n\n    mediaSlot.className =\n        \"tnedu-media-slot\";\n\n\n    const thumb =\n        getThumbnail(post);\n\n\n    if(thumb){\n\n        const image =\n\n            document.createElement(\n                \"img\"\n            );\n\n\n        image.className =\n            \"tnedu-thumb\";\n\n\n        image.src =\n            thumb;\n\n\n        image.alt =\n            title;\n\n\n        image.loading =\n            \"lazy\";\n\n\n        image.decoding =\n            \"async\";\n\n\n        image.width =\n            88;\n\n\n        image.height =\n            76;\n\n\n        \/*\n        If image URL exists but\n        loading fails, replace\n        with TN placeholder.\n        *\/\n\n        image.addEventListener(\n\n            \"error\",\n\n            function(){\n\n                mediaSlot.replaceChildren(\n                    createPlaceholder()\n                );\n\n            },\n\n            {\n                once:true\n            }\n\n        );\n\n\n        mediaSlot.appendChild(\n            image\n        );\n\n    }\n\n    else{\n\n        mediaSlot.appendChild(\n            createPlaceholder()\n        );\n\n    }\n\n\n    return mediaSlot;\n}\n\n\n\/* =====================================================\n   CREATE NEWS ITEM\n===================================================== *\/\n\nfunction createNewsItem(post){\n\n    const title =\n\n        decodeHTML(\n\n            post\n            .title\n            ?.rendered\n\n        );\n\n\n    const item =\n\n        document.createElement(\n            \"a\"\n        );\n\n\n    item.className =\n        \"tnedu-news-item\";\n\n\n    item.href =\n        post.link;\n\n\n    \/*\n    CRITICAL:\n    first column always has a media slot.\n    *\/\n\n    const mediaSlot =\n\n        createMediaSlot(\n            post,\n            title\n        );\n\n\n    item.appendChild(\n        mediaSlot\n    );\n\n\n    \/*\n    second column always has headline.\n    *\/\n\n    const heading =\n\n        document.createElement(\n            \"h4\"\n        );\n\n\n    heading.className =\n        \"tnedu-news-title\";\n\n\n    heading.textContent =\n        title;\n\n\n    item.appendChild(\n        heading\n    );\n\n\n    return item;\n}\n\n\n\/* =====================================================\n   LOAD ONE CATEGORY\n===================================================== *\/\n\nasync function loadColumn(column){\n\n    const slug =\n\n        column\n        .dataset\n        .categorySlug;\n\n\n    const list =\n\n        column.querySelector(\n            \".tnedu-news-list\"\n        );\n\n\n    if(\n        !slug ||\n        !list\n    ){\n\n        return;\n    }\n\n\n    try{\n\n        const posts =\n\n            await getPosts(\n                slug\n            );\n\n\n        const fragment =\n\n            document.createDocumentFragment();\n\n\n        if(\n            !posts.length\n        ){\n\n            list.innerHTML =\n\n                '<div class=\"tnedu-loading\">\u0627\u0633 \u06a9\u06cc\u0679\u06af\u0631\u06cc \u0645\u06cc\u06ba \u0641\u06cc \u0627\u0644\u062d\u0627\u0644 \u06a9\u0648\u0626\u06cc \u062e\u0628\u0631 \u0645\u0648\u062c\u0648\u062f \u0646\u06c1\u06cc\u06ba\u06d4<\/div>';\n\n\n            return;\n        }\n\n\n        posts.forEach(\n\n            function(post){\n\n                fragment.appendChild(\n\n                    createNewsItem(\n                        post\n                    )\n\n                );\n\n            }\n\n        );\n\n\n        list.replaceChildren(\n            fragment\n        );\n\n    }\n\n    catch(error){\n\n        console.error(\n            error\n        );\n\n\n        list.innerHTML =\n\n            '<div class=\"tnedu-loading\">\u062e\u0628\u0631\u06cc\u06ba \u0644\u0648\u0688 \u0646\u06c1\u06cc\u06ba \u06c1\u0648 \u0633\u06a9\u06cc\u06ba\u06d4<\/div>';\n\n    }\n\n}\n\n\n\/* =====================================================\n   LOAD ALL THREE\n===================================================== *\/\n\ncolumns.forEach(\n\n    function(column){\n\n        loadColumn(\n            column\n        );\n\n    }\n\n);\n\n\n})();\n\n<\/script>\n\n\n\n<!-- =========================================================\n TALEEM NAMA URDU - COLORFUL QUICK ACCESS\n Same URLs as Main English Website\n========================================================= -->\n\n<section class=\"tnqa-wrap\" dir=\"rtl\" aria-labelledby=\"tnqa-title\">\n\n    <header class=\"tnqa-header\">\n        <h2 id=\"tnqa-title\">\n            <span class=\"tnqa-head-icon\">\u26a1<\/span>\n            \u0641\u0648\u0631\u06cc \u0631\u0633\u0627\u0626\u06cc\n        <\/h2>\n    <\/header>\n\n    <div class=\"tnqa-grid\">\n\n        <!-- Admissions -->\n        <a class=\"tnqa-card\" href=\"https:\/\/taleemnama.pk\/category\/admissions-updates\/\">\n            <span class=\"tnqa-icon tnqa-i1\">\n                <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                    <path fill=\"#5B4BDB\" d=\"M5 22 32 8l27 14-27 14L5 22Z\"><\/path>\n                    <path fill=\"#8A7CF2\" d=\"M16 29v13c0 6 8 11 16 11s16-5 16-11V29L32 38 16 29Z\"><\/path>\n                    <path fill=\"#FF8A00\" d=\"M55 25h4v18h-4z\"><\/path>\n                    <circle cx=\"57\" cy=\"46\" r=\"4\" fill=\"#FFB300\"><\/circle>\n                <\/svg>\n            <\/span>\n\n            <strong>\u062f\u0627\u062e\u0644\u06d2<\/strong>\n            <small>\u062f\u0627\u062e\u0644\u0648\u06ba \u06a9\u06cc \u062a\u0627\u0632\u06c1 \u062a\u0631\u06cc\u0646 \u0645\u0639\u0644\u0648\u0645\u0627\u062a<\/small>\n        <\/a>\n\n\n        <!-- Exams & Results -->\n        <a class=\"tnqa-card\" href=\"https:\/\/taleemnama.pk\/category\/exams-results\/\">\n            <span class=\"tnqa-icon tnqa-i2\">\n                <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                    <rect x=\"13\" y=\"8\" width=\"38\" height=\"48\" rx=\"6\" fill=\"#E8F7EE\"><\/rect>\n                    <rect x=\"18\" y=\"14\" width=\"28\" height=\"7\" rx=\"3\" fill=\"#2E7D32\"><\/rect>\n                    <path d=\"M20 30h12M20 38h10M20 46h15\" stroke=\"#3F51B5\" stroke-width=\"4\" stroke-linecap=\"round\"><\/path>\n                    <circle cx=\"43\" cy=\"38\" r=\"10\" fill=\"#29B66F\"><\/circle>\n                    <path d=\"m38 38 4 4 7-8\" fill=\"none\" stroke=\"#fff\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n                <\/svg>\n            <\/span>\n\n            <strong>\u0627\u0645\u062a\u062d\u0627\u0646\u0627\u062a \u0648 \u0646\u062a\u0627\u0626\u062c<\/strong>\n            <small>\u0628\u0648\u0631\u0688 \u0627\u0645\u062a\u062d\u0627\u0646\u0627\u062a \u0627\u0648\u0631 \u0646\u062a\u0627\u0626\u062c<\/small>\n        <\/a>\n\n\n        <!-- Date Sheets -->\n        <a class=\"tnqa-card\" href=\"https:\/\/taleemnama.pk\/category\/date-sheets\/\">\n            <span class=\"tnqa-icon tnqa-i3\">\n                <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                    <rect x=\"10\" y=\"13\" width=\"44\" height=\"41\" rx=\"7\" fill=\"#FFF2E7\"><\/rect>\n                    <rect x=\"10\" y=\"13\" width=\"44\" height=\"13\" rx=\"7\" fill=\"#FF6F00\"><\/rect>\n                    <path d=\"M20 8v10M44 8v10\" stroke=\"#1A237E\" stroke-width=\"5\" stroke-linecap=\"round\"><\/path>\n                    <rect x=\"17\" y=\"32\" width=\"8\" height=\"8\" rx=\"2\" fill=\"#42A5F5\"><\/rect>\n                    <rect x=\"28\" y=\"32\" width=\"8\" height=\"8\" rx=\"2\" fill=\"#66BB6A\"><\/rect>\n                    <rect x=\"39\" y=\"32\" width=\"8\" height=\"8\" rx=\"2\" fill=\"#AB47BC\"><\/rect>\n                    <rect x=\"17\" y=\"43\" width=\"8\" height=\"6\" rx=\"2\" fill=\"#FFB300\"><\/rect>\n                    <rect x=\"28\" y=\"43\" width=\"8\" height=\"6\" rx=\"2\" fill=\"#EF5350\"><\/rect>\n                <\/svg>\n            <\/span>\n\n            <strong>\u0688\u06cc\u0679 \u0634\u06cc\u0679\u0633<\/strong>\n            <small>\u0627\u0645\u062a\u062d\u0627\u0646\u0627\u062a \u06a9\u06d2 \u062a\u0627\u0632\u06c1 \u0634\u06cc\u0688\u0648\u0644<\/small>\n        <\/a>\n\n\n        <!-- Scholarships -->\n        <a class=\"tnqa-card\" href=\"https:\/\/taleemnama.pk\/category\/scholarships-grants\/\">\n            <span class=\"tnqa-icon tnqa-i4\">\n                <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                    <circle cx=\"32\" cy=\"24\" r=\"16\" fill=\"#FFD54F\"><\/circle>\n                    <circle cx=\"32\" cy=\"24\" r=\"10\" fill=\"#FFB300\"><\/circle>\n                    <path d=\"m22 38-5 18 15-8 15 8-5-18\" fill=\"#5B4BDB\"><\/path>\n                    <path d=\"m26 24 4 4 8-9\" fill=\"none\" stroke=\"#fff\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n                <\/svg>\n            <\/span>\n\n            <strong>\u0648\u0638\u0627\u0626\u0641 \u0648 \u0627\u0633\u06a9\u0627\u0644\u0631\u0634\u067e\u0633<\/strong>\n            <small>\u0627\u0633\u06a9\u0627\u0644\u0631\u0634\u067e\u0633 \u0627\u0648\u0631 \u062a\u0639\u0644\u06cc\u0645\u06cc \u06af\u0631\u0627\u0646\u0679\u0633<\/small>\n        <\/a>\n\n\n        <!-- Teachers Corner -->\n        <a class=\"tnqa-card\" href=\"https:\/\/taleemnama.pk\/category\/teachers-corner\/\">\n            <span class=\"tnqa-icon tnqa-i5\">\n                <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                    <circle cx=\"22\" cy=\"20\" r=\"9\" fill=\"#FFB27A\"><\/circle>\n                    <path d=\"M9 54c1-13 7-20 13-20s12 7 13 20H9Z\" fill=\"#6C5CE7\"><\/path>\n                    <rect x=\"35\" y=\"12\" width=\"21\" height=\"29\" rx=\"4\" fill=\"#E8F4FF\"><\/rect>\n                    <path d=\"M40 20h11M40 26h8M40 32h10\" stroke=\"#1A73E8\" stroke-width=\"3\" stroke-linecap=\"round\"><\/path>\n                    <path d=\"M31 37 43 29\" stroke=\"#FF6F00\" stroke-width=\"4\" stroke-linecap=\"round\"><\/path>\n                <\/svg>\n            <\/span>\n\n            <strong>\u0627\u0633\u0627\u062a\u0630\u06c1 \u06a9\u0627\u0631\u0646\u0631<\/strong>\n            <small>\u0627\u0633\u0627\u062a\u0630\u06c1 \u0627\u0648\u0631 \u0645\u0644\u0627\u0632\u0645\u06cc\u0646 \u06a9\u06cc\u0644\u0626\u06d2 \u0645\u0639\u0644\u0648\u0645\u0627\u062a<\/small>\n        <\/a>\n\n\n        <!-- Students Guide -->\n        <a class=\"tnqa-card\" href=\"https:\/\/taleemnama.pk\/category\/students-guide\/\">\n            <span class=\"tnqa-icon tnqa-i6\">\n                <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                    <rect x=\"10\" y=\"13\" width=\"13\" height=\"39\" rx=\"3\" fill=\"#42A5F5\"><\/rect>\n                    <rect x=\"24\" y=\"9\" width=\"13\" height=\"43\" rx=\"3\" fill=\"#66BB6A\"><\/rect>\n                    <rect x=\"38\" y=\"16\" width=\"13\" height=\"36\" rx=\"3\" fill=\"#FF8A65\"><\/rect>\n                    <path d=\"M16 19h4M30 16h4M44 23h4\" stroke=\"#fff\" stroke-width=\"3\" stroke-linecap=\"round\"><\/path>\n                    <path d=\"m49 14 7-6 4 5-7 6-6 2 2-7Z\" fill=\"#5B4BDB\"><\/path>\n                <\/svg>\n            <\/span>\n\n            <strong>\u0637\u0644\u0628\u06c1 \u0631\u06c1\u0646\u0645\u0627\u0626\u06cc<\/strong>\n            <small>\u0637\u0644\u0628\u06c1 \u06a9\u06cc\u0644\u0626\u06d2 \u0645\u0641\u06cc\u062f \u062a\u0639\u0644\u06cc\u0645\u06cc \u0631\u06c1\u0646\u0645\u0627\u0626\u06cc<\/small>\n        <\/a>\n\n\n        <!-- Curriculum & Syllabus -->\n        <a class=\"tnqa-card\" href=\"https:\/\/taleemnama.pk\/category\/curriculum-syllabus\/\">\n            <span class=\"tnqa-icon tnqa-i7\">\n                <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                    <path d=\"M8 14c8-3 16-1 24 5v34c-8-6-16-8-24-5V14Z\" fill=\"#FF8A00\"><\/path>\n                    <path d=\"M56 14c-8-3-16-1-24 5v34c8-6 16-8 24-5V14Z\" fill=\"#3F51B5\"><\/path>\n                    <path d=\"M16 24h9M16 31h11M16 38h8\" stroke=\"#fff\" stroke-width=\"3\" stroke-linecap=\"round\"><\/path>\n                    <path d=\"M39 24h9M37 31h11M40 38h8\" stroke=\"#fff\" stroke-width=\"3\" stroke-linecap=\"round\"><\/path>\n                <\/svg>\n            <\/span>\n\n            <strong>\u0646\u0635\u0627\u0628 \u0648 \u0633\u0644\u06cc\u0628\u0633<\/strong>\n            <small>\u0646\u0635\u0627\u0628 \u0627\u0648\u0631 \u0633\u0644\u06cc\u0628\u0633 \u06a9\u06cc \u062a\u0627\u0632\u06c1 \u0627\u067e\u0688\u06cc\u0679\u0633<\/small>\n        <\/a>\n\n\n        <!-- Jobs -->\n        <a class=\"tnqa-card\" href=\"https:\/\/taleemnama.pk\/jobs\">\n            <span class=\"tnqa-icon tnqa-i8\">\n                <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                    <rect x=\"8\" y=\"20\" width=\"48\" height=\"32\" rx=\"7\" fill=\"#1A237E\"><\/rect>\n                    <rect x=\"24\" y=\"11\" width=\"16\" height=\"12\" rx=\"4\" fill=\"#FF9800\"><\/rect>\n                    <rect x=\"27\" y=\"15\" width=\"10\" height=\"6\" rx=\"2\" fill=\"#fff\"><\/rect>\n                    <path d=\"M8 32h48\" stroke=\"#FFB300\" stroke-width=\"5\"><\/path>\n                    <rect x=\"27\" y=\"29\" width=\"10\" height=\"7\" rx=\"2\" fill=\"#FF6F00\"><\/rect>\n                <\/svg>\n            <\/span>\n\n            <strong>\u0646\u0648\u06a9\u0631\u06cc\u0627\u06ba<\/strong>\n            <small>\u062a\u0639\u0644\u06cc\u0645 \u0627\u0648\u0631 \u06a9\u06cc\u0631\u06cc\u0626\u0631 \u06a9\u06cc \u062a\u0627\u0632\u06c1 \u0646\u0648\u06a9\u0631\u06cc\u0627\u06ba<\/small>\n        <\/a>\n\n    <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =========================================================\n   BASE\n========================================================= *\/\n\n.tnqa-wrap,\n.tnqa-wrap *{\n    box-sizing:border-box;\n}\n\n.tnqa-wrap{\n    width:100%;\n    background:#fff;\n    border:1px solid #e5e7eb;\n    border-radius:12px;\n    overflow:hidden;\n    box-shadow:0 5px 20px rgba(20,30,80,.07);\n    font-family:inherit;\n}\n\n\n\/* =========================================================\n   HEADING\n========================================================= *\/\n\n.tnqa-header{\n    position:relative;\n    min-height:76px;\n    display:flex;\n    align-items:center;\n\n    \/* RTL *\/\n    justify-content:flex-start;\n\n    padding:15px 20px 13px;\n    background:#fff;\n    border-bottom:3px solid #FF6F00;\n}\n\n.tnqa-header::after{\n    content:\"\";\n    position:absolute;\n\n    \/* Changed for Urdu RTL *\/\n    right:0;\n    left:auto;\n\n    bottom:-3px;\n    width:105px;\n    height:3px;\n    background:#1A237E;\n}\n\n.tnqa-header h2{\n    display:flex;\n    align-items:center;\n    gap:8px;\n    margin:0!important;\n    padding:0!important;\n    color:#1A237E!important;\n    font-size:28px!important;\n    line-height:1.5!important;\n    font-weight:800!important;\n}\n\n.tnqa-head-icon{\n    font-family:Arial,sans-serif;\n    font-size:25px;\n    line-height:1;\n}\n\n\n\/* =========================================================\n   GRID\n========================================================= *\/\n\n.tnqa-grid{\n    display:grid;\n    grid-template-columns:repeat(4,minmax(0,1fr));\n    gap:14px;\n    padding:18px;\n    background:#F7F8FB;\n}\n\n\n\/* =========================================================\n   CARDS\n========================================================= *\/\n\n.tnqa-card{\n    position:relative;\n    min-height:165px;\n    display:flex;\n    flex-direction:column;\n    align-items:center;\n    justify-content:center;\n    gap:7px;\n    padding:17px 12px;\n    background:#fff;\n    border:1px solid #e5e7eb;\n    border-radius:14px;\n    text-align:center;\n    text-decoration:none!important;\n    box-shadow:0 3px 12px rgba(20,30,80,.045);\n\n    transition:\n        transform .22s ease,\n        box-shadow .22s ease,\n        border-color .22s ease;\n}\n\n\n.tnqa-card::before{\n    content:\"\";\n    position:absolute;\n    top:0;\n    left:25px;\n    right:25px;\n    height:4px;\n    background:#FF6F00;\n    border-radius:0 0 8px 8px;\n    opacity:.82;\n}\n\n\n.tnqa-card:hover{\n    transform:translateY(-5px);\n    border-color:#ffd3ae;\n    box-shadow:0 11px 26px rgba(26,35,126,.13);\n}\n\n\n\/* =========================================================\n   ICONS\n========================================================= *\/\n\n.tnqa-icon{\n    width:76px;\n    height:76px;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    margin-bottom:3px;\n    border-radius:20px;\n    transition:transform .22s ease;\n}\n\n\n.tnqa-icon svg{\n    width:58px;\n    height:58px;\n    display:block;\n}\n\n\n.tnqa-card:hover .tnqa-icon{\n    transform:scale(1.07);\n}\n\n\n\/* Soft icon backgrounds *\/\n\n.tnqa-i1{background:#F1EEFF;}\n.tnqa-i2{background:#ECF9F0;}\n.tnqa-i3{background:#FFF2E8;}\n.tnqa-i4{background:#FFF8DD;}\n.tnqa-i5{background:#F4EEFF;}\n.tnqa-i6{background:#ECF7FF;}\n.tnqa-i7{background:#FFF1E7;}\n.tnqa-i8{background:#EEF0FF;}\n\n\n\/* =========================================================\n   URDU TEXT\n========================================================= *\/\n\n.tnqa-card strong{\n    color:#1A237E!important;\n\n    \/*\n       Slightly larger line-height for Urdu\/Nastaliq\n       while keeping same visual design\n    *\/\n    font-size:17px!important;\n    line-height:1.65!important;\n    font-weight:800!important;\n\n    margin:0!important;\n    padding:0 0 2px!important;\n}\n\n\n.tnqa-card small{\n    color:#667085!important;\n    font-size:12px!important;\n    line-height:1.75!important;\n    font-weight:500;\n\n    margin:0!important;\n    padding:0!important;\n}\n\n\n\/* Hover underline *\/\n\n.tnqa-card strong::after{\n    content:\"\";\n    display:block;\n    width:0;\n    height:2px;\n    margin:3px auto 0;\n    background:#FF6F00;\n    transition:width .22s ease;\n}\n\n\n.tnqa-card:hover strong::after{\n    width:38px;\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media(max-width:1050px){\n\n    .tnqa-grid{\n        grid-template-columns:\n            repeat(2,minmax(0,1fr));\n    }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media(max-width:600px){\n\n    .tnqa-wrap{\n        border-radius:9px;\n    }\n\n\n    .tnqa-header{\n        min-height:67px;\n        padding:10px 14px 8px;\n    }\n\n\n    .tnqa-header h2{\n        font-size:23px!important;\n        line-height:1.55!important;\n    }\n\n\n    .tnqa-head-icon{\n        font-size:22px;\n    }\n\n\n    .tnqa-header::after{\n        width:90px;\n    }\n\n\n    \/*\n       Keep same English-site 2-column mobile layout\n    *\/\n\n    .tnqa-grid{\n        grid-template-columns:\n            repeat(2,minmax(0,1fr));\n\n        gap:9px;\n        padding:11px;\n    }\n\n\n    .tnqa-card{\n        min-height:145px;\n        padding:12px 7px 10px;\n        border-radius:11px;\n    }\n\n\n    .tnqa-icon{\n        width:62px;\n        height:62px;\n        border-radius:16px;\n    }\n\n\n    .tnqa-icon svg{\n        width:48px;\n        height:48px;\n    }\n\n\n    .tnqa-card strong{\n        font-size:14.5px!important;\n        line-height:1.65!important;\n    }\n\n\n    .tnqa-card small{\n        font-size:10.5px!important;\n        line-height:1.65!important;\n    }\n\n\n    .tnqa-card:hover{\n        transform:none;\n    }\n\n}\n\n\n\/* =========================================================\n   VERY SMALL PHONES\n========================================================= *\/\n\n@media(max-width:380px){\n\n    .tnqa-grid{\n        gap:7px;\n        padding:9px;\n    }\n\n\n    .tnqa-card{\n        min-height:138px;\n        padding-left:5px;\n        padding-right:5px;\n    }\n\n\n    .tnqa-icon{\n        width:57px;\n        height:57px;\n    }\n\n\n    .tnqa-icon svg{\n        width:44px;\n        height:44px;\n    }\n\n\n    .tnqa-card strong{\n        font-size:13.5px!important;\n    }\n\n\n    .tnqa-card small{\n        font-size:10px!important;\n    }\n\n}\n\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n.tnqa-card:focus-visible{\n    outline:3px solid #FF6F00;\n    outline-offset:3px;\n}\n\n<\/style>\n\n\n\n<!-- =========================================================\n TALEEM NAMA URDU\n IDEAL EDUCATIONAL INSTITUTIONS + YOUR OPINION\n 60 \/ 40 EDITORIAL SECTION\n========================================================= -->\n\n<section class=\"tn-editorial-wrap\" dir=\"rtl\">\n\n    <div class=\"tn-editorial-grid\">\n\n        <!-- =================================================\n             60% \u2014 IDEAL EDUCATIONAL INSTITUTIONS\n        ================================================== -->\n        <section class=\"tn-ideal-box\">\n\n            <!-- HEADER -->\n            <header class=\"tn-ideal-header\">\n\n                <div class=\"tn-ideal-heading-row\">\n\n                    <span class=\"tn-ideal-main-icon\" aria-hidden=\"true\">\n                        <svg viewBox=\"0 0 64 64\">\n                            <path d=\"M7 25 32 9l25 16v5H7v-5Z\" fill=\"#1A237E\"><\/path>\n                            <rect x=\"11\" y=\"30\" width=\"42\" height=\"23\" rx=\"3\" fill=\"#3949AB\"><\/rect>\n                            <rect x=\"17\" y=\"34\" width=\"6\" height=\"15\" fill=\"#fff\"><\/rect>\n                            <rect x=\"29\" y=\"34\" width=\"6\" height=\"15\" fill=\"#fff\"><\/rect>\n                            <rect x=\"41\" y=\"34\" width=\"6\" height=\"15\" fill=\"#fff\"><\/rect>\n                            <rect x=\"6\" y=\"53\" width=\"52\" height=\"5\" rx=\"2\" fill=\"#FF6F00\"><\/rect>\n                            <circle cx=\"32\" cy=\"21\" r=\"5\" fill=\"#FFB300\"><\/circle>\n                        <\/svg>\n                    <\/span>\n\n                    <div>\n                        <h2>\u0645\u062b\u0627\u0644\u06cc \u062a\u0639\u0644\u06cc\u0645\u06cc \u0627\u062f\u0627\u0631\u06d2<\/h2>\n\n                        <p>\n                            \u0646\u0645\u0627\u06cc\u0627\u06ba \u062a\u0639\u0644\u06cc\u0645\u06cc \u0627\u062f\u0627\u0631\u0648\u06ba \u06a9\u0627 \u062a\u0639\u0627\u0631\u0641\u060c \u06a9\u0627\u0645\u06cc\u0627\u0628\u06cc\u0627\u06ba\u060c\n                            \u062e\u0635\u0648\u0635\u06cc \u067e\u0631\u0648\u0641\u0627\u0626\u0644\u0632 \u0627\u0648\u0631 \u0627\u0646\u0679\u0631\u0648\u06cc\u0648\u0632\n                        <\/p>\n                    <\/div>\n\n                <\/div>\n\n            <\/header>\n\n\n            <!-- BRAND LINE -->\n            <div class=\"tn-editorial-brand-line\">\n                <span class=\"tn-editorial-blue\"><\/span>\n                <span class=\"tn-editorial-orange\"><\/span>\n            <\/div>\n\n\n            <!-- DYNAMIC CONTENT -->\n            <div\n                class=\"tn-ideal-content\"\n                id=\"tn-ideal-content\"\n            >\n\n                <div class=\"tn-editorial-loading\">\n                    \u0645\u062b\u0627\u0644\u06cc \u062a\u0639\u0644\u06cc\u0645\u06cc \u0627\u062f\u0627\u0631\u06d2 \u0644\u0648\u0688 \u06c1\u0648 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba&#8230;\n                <\/div>\n\n            <\/div>\n\n\n            <!-- ARCHIVE -->\n            <a\n                class=\"tn-ideal-all\"\n                href=\"https:\/\/taleemnama.pk\/urdu\/category\/ideal-educational-institutions\/\"\n            >\n                \u062a\u0645\u0627\u0645 \u0645\u062b\u0627\u0644\u06cc \u062a\u0639\u0644\u06cc\u0645\u06cc \u0627\u062f\u0627\u0631\u06d2 \u062f\u06cc\u06a9\u06be\u06cc\u06ba\n                <span>\u2190<\/span>\n            <\/a>\n\n        <\/section>\n\n\n        <!-- =================================================\n             40% \u2014 YOUR OPINION\n        ================================================== -->\n        <section class=\"tn-opinion-box\">\n\n            <!-- HEADER -->\n            <header class=\"tn-opinion-header\">\n\n                <h2>\n                    <span class=\"tn-opinion-head-icon\">\ud83d\udcac<\/span>\n                    \u0622\u067e \u06a9\u06cc \u0631\u0627\u0626\u06d2\n                <\/h2>\n\n            <\/header>\n\n\n            <!-- BRAND LINE -->\n            <div class=\"tn-opinion-brand-line\">\n                <span><\/span>\n                <b><\/b>\n            <\/div>\n\n\n            <!-- OPINION LIST -->\n            <div\n                class=\"tn-opinion-list\"\n                id=\"tn-opinion-list\"\n            >\n\n                <div class=\"tn-editorial-loading\">\n                    \u0622\u0631\u0627\u0621 \u0644\u0648\u0688 \u06c1\u0648 \u0631\u06c1\u06cc \u06c1\u06cc\u06ba&#8230;\n                <\/div>\n\n            <\/div>\n\n\n            <!-- ARCHIVE -->\n            <a\n                class=\"tn-opinion-all\"\n                href=\"https:\/\/taleemnama.pk\/urdu\/category\/blog\/\"\n            >\n                \u062a\u0645\u0627\u0645 \u0622\u0631\u0627\u0621 \u0627\u0648\u0631 \u0645\u0636\u0627\u0645\u06cc\u0646 \u062f\u06cc\u06a9\u06be\u06cc\u06ba\n                <span>\u2190<\/span>\n            <\/a>\n\n        <\/section>\n\n    <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =========================================================\n   GLOBAL\n========================================================= *\/\n\n.tn-editorial-wrap,\n.tn-editorial-wrap *{\n    box-sizing:border-box;\n}\n\n.tn-editorial-wrap{\n\n    --tn-blue:#1A237E;\n    --tn-dark:#0A2C64;\n\n    --tn-orange:#FF6F00;\n\n    --tn-text:#172033;\n    --tn-muted:#667085;\n\n    --tn-border:#E1E6EF;\n\n    width:100%;\n    max-width:1290px;\n\n    margin:0 auto;\n\n    font-family:inherit;\n}\n\n\n\/* =========================================================\n   60 \/ 40 GRID\n========================================================= *\/\n\n.tn-editorial-grid{\n\n    display:grid;\n\n    grid-template-columns:\n        minmax(0,3fr)\n        minmax(320px,2fr);\n\n    gap:20px;\n\n    align-items:stretch;\n}\n\n\n\/* BOTH PANELS *\/\n\n.tn-ideal-box,\n.tn-opinion-box{\n\n    min-width:0;\n\n    display:flex;\n\n    flex-direction:column;\n\n    background:#fff;\n\n    border:\n        1px solid\n        var(--tn-border);\n\n    border-radius:14px;\n\n    overflow:hidden;\n\n    box-shadow:\n        0 6px 22px\n        rgba(26,35,126,.06);\n}\n\n\n\/* =========================================================\n   IDEAL INSTITUTIONS HEADER\n========================================================= *\/\n\n.tn-ideal-header{\n\n    padding:\n        11px\n        17px\n        9px;\n\n    background:\n        linear-gradient(\n            250deg,\n            #fff 0%,\n            #F7F8FF 68%,\n            #FFF7EF 100%\n        );\n}\n\n\n.tn-ideal-heading-row{\n\n    display:flex;\n\n    align-items:center;\n\n    gap:12px;\n}\n\n\n.tn-ideal-main-icon{\n\n    flex:0 0 auto;\n\n    width:57px;\n    height:57px;\n\n    display:flex;\n\n    align-items:center;\n\n    justify-content:center;\n\n    border-radius:15px;\n\n    background:\n        linear-gradient(\n            135deg,\n            #EEF0FF,\n            #FFF2E7\n        );\n\n    box-shadow:\n        0 4px 12px\n        rgba(26,35,126,.07);\n}\n\n\n.tn-ideal-main-icon svg{\n\n    width:46px;\n    height:46px;\n}\n\n\n.tn-ideal-header h2{\n\n    margin:0 0 2px!important;\n\n    padding:0!important;\n\n    color:\n        var(--tn-blue)!important;\n\n    font-size:27px!important;\n\n    line-height:1.55!important;\n\n    font-weight:850!important;\n}\n\n\n.tn-ideal-header p{\n\n    margin:0!important;\n\n    padding:\n        0 0 3px!important;\n\n    color:\n        var(--tn-muted)!important;\n\n    font-size:13px!important;\n\n    line-height:1.8!important;\n\n    font-weight:500;\n}\n\n\n\/* =========================================================\n   BRAND DIVIDER\n========================================================= *\/\n\n.tn-editorial-brand-line{\n\n    display:flex;\n\n    height:4px;\n\n    width:100%;\n}\n\n\n.tn-editorial-blue{\n\n    width:125px;\n\n    background:\n        var(--tn-blue);\n}\n\n\n.tn-editorial-orange{\n\n    flex:1;\n\n    background:\n        var(--tn-orange);\n}\n\n\n\/* =========================================================\n   IDEAL INSTITUTION CONTENT\n========================================================= *\/\n\n.tn-ideal-content{\n\n    flex:1;\n\n    display:flex;\n\n    flex-direction:column;\n\n    gap:13px;\n\n    padding:\n        14px\n        14px\n        10px;\n\n    background:#F7F8FB;\n}\n\n\n\/* =========================================================\n   FEATURED INSTITUTION\n========================================================= *\/\n\n.tn-ideal-featured{\n\n    display:grid;\n\n    grid-template-columns:\n        minmax(0,1.23fr)\n        minmax(210px,.77fr);\n\n    min-height:240px;\n\n    overflow:hidden;\n\n    background:#fff;\n\n    border:\n        1px solid\n        #E1E5EC;\n\n    border-radius:12px;\n\n    text-decoration:none!important;\n\n    box-shadow:\n        0 4px 14px\n        rgba(26,35,126,.05);\n\n    transition:\n        transform .2s ease,\n        box-shadow .2s ease;\n}\n\n\n.tn-ideal-featured:hover{\n\n    transform:\n        translateY(-2px);\n\n    box-shadow:\n        0 10px 24px\n        rgba(26,35,126,.10);\n}\n\n\n\/* FEATURE IMAGE *\/\n\n.tn-ideal-feature-image-wrap{\n\n    position:relative;\n\n    min-width:0;\n\n    overflow:hidden;\n\n    background:#EEF2F6;\n}\n\n\n.tn-ideal-feature-image{\n\n    display:block;\n\n    width:100%;\n    height:100%;\n\n    min-height:240px;\n\n    object-fit:cover;\n}\n\n\n\/* BADGE *\/\n\n.tn-ideal-badge{\n\n    position:absolute;\n\n    top:12px;\n    right:12px;\n\n    padding:\n        5px\n        9px;\n\n    background:\n        var(--tn-orange);\n\n    color:#fff;\n\n    border-radius:6px;\n\n    font-size:10px;\n\n    font-weight:700;\n}\n\n\n\/* CONTENT *\/\n\n.tn-ideal-feature-copy{\n\n    display:flex;\n\n    flex-direction:column;\n\n    justify-content:center;\n\n    padding:\n        17px\n        16px;\n}\n\n\n.tn-ideal-feature-copy h3{\n\n    margin:0 0 7px!important;\n\n    padding:\n        0 0 4px!important;\n\n    color:\n        var(--tn-blue)!important;\n\n    font-size:20px!important;\n\n    line-height:1.85!important;\n\n    font-weight:800!important;\n\n    display:-webkit-box;\n\n    -webkit-box-orient:vertical;\n\n    -webkit-line-clamp:3;\n\n    overflow:hidden;\n}\n\n\n.tn-ideal-feature-copy p{\n\n    margin:0 0 11px!important;\n\n    padding:0!important;\n\n    color:\n        var(--tn-muted)!important;\n\n    font-size:12.5px!important;\n\n    line-height:1.85!important;\n\n    font-weight:500;\n\n    display:-webkit-box;\n\n    -webkit-box-orient:vertical;\n\n    -webkit-line-clamp:3;\n\n    overflow:hidden;\n}\n\n\n.tn-ideal-read{\n\n    margin-top:auto;\n\n    color:\n        var(--tn-orange);\n\n    font-size:13px;\n\n    line-height:1.7;\n\n    font-weight:800;\n}\n\n\n\/* =========================================================\n   3 MINI INSTITUTION CARDS\n========================================================= *\/\n\n.tn-ideal-mini-grid{\n\n    display:grid;\n\n    grid-template-columns:\n        repeat(3,minmax(0,1fr));\n\n    gap:10px;\n}\n\n\n.tn-ideal-mini{\n\n    overflow:hidden;\n\n    background:#fff;\n\n    border:\n        1px solid\n        #E1E5EC;\n\n    border-radius:10px;\n\n    text-decoration:none!important;\n\n    box-shadow:\n        0 3px 11px\n        rgba(26,35,126,.04);\n\n    transition:\n        transform .18s ease,\n        box-shadow .18s ease;\n}\n\n\n.tn-ideal-mini:hover{\n\n    transform:\n        translateY(-2px);\n\n    box-shadow:\n        0 7px 16px\n        rgba(26,35,126,.08);\n}\n\n\n.tn-ideal-mini-image{\n\n    display:block;\n\n    width:100%;\n\n    aspect-ratio:16 \/ 9;\n\n    object-fit:cover;\n\n    background:#EEF2F6;\n\n    border-bottom:\n        3px solid\n        var(--tn-orange);\n}\n\n\n.tn-ideal-mini h3{\n\n    margin:0!important;\n\n    padding:\n        8px\n        9px\n        10px!important;\n\n    color:\n        var(--tn-blue)!important;\n\n    font-size:14px!important;\n\n    line-height:1.85!important;\n\n    font-weight:700!important;\n\n    display:-webkit-box;\n\n    -webkit-box-orient:vertical;\n\n    -webkit-line-clamp:2;\n\n    overflow:hidden;\n}\n\n\n\/* =========================================================\n   IDEAL ARCHIVE BUTTON\n========================================================= *\/\n\n.tn-ideal-all{\n\n    display:flex;\n\n    align-items:center;\n\n    justify-content:space-between;\n\n    gap:8px;\n\n    margin:\n        2px\n        14px\n        13px;\n\n    padding:\n        8px\n        12px;\n\n    background:#F5F6FC;\n\n    border-radius:7px;\n\n    color:\n        var(--tn-blue)!important;\n\n    text-decoration:none!important;\n\n    font-size:13.5px;\n\n    line-height:1.7;\n\n    font-weight:800;\n}\n\n\n.tn-ideal-all span{\n\n    color:\n        var(--tn-orange);\n\n    font-family:\n        Arial,sans-serif;\n\n    font-size:19px;\n}\n\n\n\/* =========================================================\n   OPINION HEADER\n========================================================= *\/\n\n.tn-opinion-header{\n\n    min-height:80px;\n\n    display:flex;\n\n    align-items:center;\n\n    padding:\n        9px\n        16px\n        7px;\n\n    background:#fff;\n}\n\n\n.tn-opinion-header h2{\n\n    display:flex;\n\n    align-items:center;\n\n    gap:7px;\n\n    margin:0!important;\n\n    padding:0!important;\n\n    color:\n        var(--tn-blue)!important;\n\n    font-size:27px!important;\n\n    line-height:1.55!important;\n\n    font-weight:850!important;\n}\n\n\n.tn-opinion-head-icon{\n\n    font-family:\n        Arial,sans-serif;\n\n    font-size:28px;\n\n    line-height:1;\n}\n\n\n\/* OPINION BRAND LINE *\/\n\n.tn-opinion-brand-line{\n\n    display:flex;\n\n    width:100%;\n\n    height:4px;\n}\n\n\n.tn-opinion-brand-line span{\n\n    width:110px;\n\n    background:\n        var(--tn-blue);\n}\n\n\n.tn-opinion-brand-line b{\n\n    flex:1;\n\n    background:\n        var(--tn-orange);\n}\n\n\n\/* =========================================================\n   OPINION LIST\n========================================================= *\/\n\n.tn-opinion-list{\n\n    flex:1;\n\n    display:grid;\n\n    grid-template-rows:\n        repeat(5,minmax(0,1fr));\n\n    gap:8px;\n\n    padding:\n        12px\n        12px\n        8px;\n\n    background:#fff;\n}\n\n\n\/* OPINION ITEM *\/\n\n.tn-opinion-item{\n\n    display:grid;\n\n    grid-template-columns:\n        43px\n        minmax(0,1fr)\n        17px;\n\n    align-items:center;\n\n    gap:9px;\n\n    min-height:0;\n\n    padding:\n        7px\n        10px;\n\n    border-radius:10px;\n\n    border:\n        1px solid transparent;\n\n    color:inherit;\n\n    text-decoration:none!important;\n\n    transition:\n        transform .17s ease,\n        box-shadow .17s ease;\n}\n\n\n.tn-opinion-item:hover{\n\n    transform:\n        translateY(-1px);\n\n    box-shadow:\n        0 5px 12px\n        rgba(26,35,126,.07);\n}\n\n\n\/* COLORFUL BACKGROUNDS *\/\n\n.tn-opinion-item:nth-child(1){\n\n    background:#FFF2E9;\n\n    border-color:#FFD6B9;\n}\n\n\n.tn-opinion-item:nth-child(2){\n\n    background:#EAF4FF;\n\n    border-color:#D0E5FA;\n}\n\n\n.tn-opinion-item:nth-child(3){\n\n    background:#EAF8F0;\n\n    border-color:#CEE9D8;\n}\n\n\n.tn-opinion-item:nth-child(4){\n\n    background:#F4ECFF;\n\n    border-color:#E0D2F5;\n}\n\n\n.tn-opinion-item:nth-child(5){\n\n    background:#FFF0F4;\n\n    border-color:#FFD0DC;\n}\n\n\n\/* NUMBER *\/\n\n.tn-opinion-number{\n\n    width:39px;\n    height:39px;\n\n    display:grid;\n\n    place-items:center;\n\n    border-radius:50%;\n\n    color:#fff;\n\n    font-family:\n        Arial,sans-serif;\n\n    font-size:11px;\n\n    line-height:1;\n\n    font-weight:800;\n\n    box-shadow:\n        0 3px 7px\n        rgba(0,0,0,.1);\n}\n\n\n.tn-opinion-item:nth-child(1)\n.tn-opinion-number{\n    background:#FF6F00;\n}\n\n\n.tn-opinion-item:nth-child(2)\n.tn-opinion-number{\n    background:#258CDD;\n}\n\n\n.tn-opinion-item:nth-child(3)\n.tn-opinion-number{\n    background:#1DBA67;\n}\n\n\n.tn-opinion-item:nth-child(4)\n.tn-opinion-number{\n    background:#8447D6;\n}\n\n\n.tn-opinion-item:nth-child(5)\n.tn-opinion-number{\n    background:#ED4264;\n}\n\n\n\/* TITLE *\/\n\n.tn-opinion-title{\n\n    margin:0!important;\n\n    padding:\n        2px 0\n        5px!important;\n\n    color:#10182B!important;\n\n    font-size:16px!important;\n\n    line-height:1.85!important;\n\n    font-weight:700!important;\n\n    display:-webkit-box;\n\n    -webkit-box-orient:vertical;\n\n    -webkit-line-clamp:2;\n\n    overflow:hidden;\n}\n\n\n\/* ARROW *\/\n\n.tn-opinion-arrow{\n\n    color:\n        var(--tn-blue);\n\n    font-family:\n        Arial,sans-serif;\n\n    font-size:20px;\n\n    font-weight:700;\n\n    text-align:center;\n}\n\n\n\/* =========================================================\n   OPINION ARCHIVE\n========================================================= *\/\n\n.tn-opinion-all{\n\n    display:flex;\n\n    align-items:center;\n\n    justify-content:space-between;\n\n    gap:7px;\n\n    margin:\n        1px\n        12px\n        13px;\n\n    padding:\n        8px\n        11px;\n\n    border-radius:7px;\n\n    background:#F5F6FC;\n\n    color:\n        var(--tn-blue)!important;\n\n    text-decoration:none!important;\n\n    font-size:13.5px;\n\n    line-height:1.7;\n\n    font-weight:800;\n}\n\n\n.tn-opinion-all span{\n\n    color:\n        var(--tn-orange);\n\n    font-family:\n        Arial,sans-serif;\n\n    font-size:19px;\n}\n\n\n\/* =========================================================\n   LOADING\n========================================================= *\/\n\n.tn-editorial-loading{\n\n    min-height:180px;\n\n    display:flex;\n\n    align-items:center;\n\n    justify-content:center;\n\n    padding:20px;\n\n    text-align:center;\n\n    color:\n        var(--tn-blue);\n\n    font-size:13px;\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media(max-width:950px){\n\n    .tn-editorial-grid{\n\n        grid-template-columns:1fr;\n    }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media(max-width:650px){\n\n    .tn-ideal-box,\n    .tn-opinion-box{\n\n        border-radius:10px;\n    }\n\n\n    .tn-ideal-header{\n\n        padding:\n            9px\n            12px\n            7px;\n    }\n\n\n    .tn-ideal-heading-row{\n\n        gap:9px;\n    }\n\n\n    .tn-ideal-main-icon{\n\n        width:49px;\n        height:49px;\n\n        border-radius:12px;\n    }\n\n\n    .tn-ideal-main-icon svg{\n\n        width:39px;\n        height:39px;\n    }\n\n\n    .tn-ideal-header h2{\n\n        font-size:22px!important;\n\n        line-height:1.6!important;\n    }\n\n\n    .tn-ideal-header p{\n\n        font-size:11px!important;\n\n        line-height:1.7!important;\n    }\n\n\n    .tn-editorial-blue{\n\n        width:90px;\n    }\n\n\n    \/* FEATURE *\/\n\n    .tn-ideal-featured{\n\n        grid-template-columns:1fr;\n\n        min-height:0;\n    }\n\n\n    .tn-ideal-feature-image{\n\n        aspect-ratio:16 \/ 9;\n\n        min-height:0;\n    }\n\n\n    .tn-ideal-feature-copy{\n\n        padding:\n            12px\n            13px;\n    }\n\n\n    .tn-ideal-feature-copy h3{\n\n        font-size:18px!important;\n    }\n\n\n    \/* MINI CARDS \u2014 horizontal swipe *\/\n\n    .tn-ideal-mini-grid{\n\n        display:flex;\n\n        overflow-x:auto;\n\n        gap:9px;\n\n        scrollbar-width:none;\n    }\n\n\n    .tn-ideal-mini-grid::-webkit-scrollbar{\n        display:none;\n    }\n\n\n    .tn-ideal-mini{\n\n        flex:\n            0 0 72%;\n    }\n\n\n    .tn-ideal-mini h3{\n\n        font-size:14.5px!important;\n    }\n\n\n    \/* OPINION *\/\n\n    .tn-opinion-header{\n\n        min-height:65px;\n\n        padding:\n            7px\n            12px\n            5px;\n    }\n\n\n    .tn-opinion-header h2{\n\n        font-size:22px!important;\n    }\n\n\n    .tn-opinion-head-icon{\n\n        font-size:23px;\n    }\n\n\n    .tn-opinion-list{\n\n        grid-template-rows:auto;\n\n        gap:7px;\n\n        padding:\n            9px\n            9px\n            7px;\n    }\n\n\n    .tn-opinion-item{\n\n        min-height:70px;\n\n        grid-template-columns:\n            38px\n            minmax(0,1fr)\n            16px;\n\n        gap:7px;\n\n        padding:\n            6px\n            8px;\n    }\n\n\n    .tn-opinion-number{\n\n        width:35px;\n        height:35px;\n\n        font-size:10px;\n    }\n\n\n    .tn-opinion-title{\n\n        font-size:15px!important;\n\n        line-height:1.8!important;\n    }\n\n}\n\n\n\/* =========================================================\n   VERY SMALL MOBILE\n========================================================= *\/\n\n@media(max-width:380px){\n\n    .tn-ideal-header p{\n        display:none;\n    }\n\n\n    .tn-ideal-header h2{\n\n        font-size:20px!important;\n    }\n\n\n    .tn-opinion-title{\n\n        font-size:14.5px!important;\n    }\n\n}\n\n<\/style>\n\n\n<script>\n\n(function(){\n\nconst BASE =\n    \"https:\/\/taleemnama.pk\/urdu\";\n\n\nconst IDEAL_SLUG =\n    \"ideal-educational-institutions\";\n\n\nconst BLOG_SLUG =\n    \"blog\";\n\n\nconst IDEAL_POSTS =\n    4;\n\n\nconst BLOG_POSTS =\n    5;\n\n\nconst idealContent =\n    document.getElementById(\n        \"tn-ideal-content\"\n    );\n\n\nconst opinionList =\n    document.getElementById(\n        \"tn-opinion-list\"\n    );\n\n\nif(\n    !idealContent ||\n    !opinionList\n){\n    return;\n}\n\n\n\/* =====================================================\n   HTML DECODER\n===================================================== *\/\n\nfunction decodeHTML(value){\n\n    const box =\n        document.createElement(\n            \"textarea\"\n        );\n\n    box.innerHTML =\n        value || \"\";\n\n    return box.value;\n}\n\n\n\/* =====================================================\n   STRIP EXCERPT HTML\n===================================================== *\/\n\nfunction stripHTML(value){\n\n    const box =\n        document.createElement(\n            \"div\"\n        );\n\n    box.innerHTML =\n        value || \"\";\n\n    return (\n        box.textContent ||\n        box.innerText ||\n        \"\"\n    ).trim();\n}\n\n\n\/* =====================================================\n   CATEGORY ID\n===================================================== *\/\n\nasync function getCategoryId(slug){\n\n    const response =\n\n        await fetch(\n\n            BASE +\n\n            \"\/wp-json\/wp\/v2\/categories\" +\n\n            \"?slug=\" +\n\n            encodeURIComponent(slug),\n\n            {\n                credentials:\n                    \"same-origin\"\n            }\n\n        );\n\n\n    if(!response.ok){\n\n        throw new Error(\n            \"Category request failed\"\n        );\n    }\n\n\n    const data =\n        await response.json();\n\n\n    if(!data.length){\n\n        throw new Error(\n            \"Category not found: \" +\n            slug\n        );\n    }\n\n\n    return data[0].id;\n}\n\n\n\/* =====================================================\n   FETCH POSTS\n===================================================== *\/\n\nasync function fetchPosts(\n    slug,\n    limit\n){\n\n    const categoryId =\n        await getCategoryId(\n            slug\n        );\n\n\n    const response =\n\n        await fetch(\n\n            BASE +\n\n            \"\/wp-json\/wp\/v2\/posts\" +\n\n            \"?categories=\" +\n\n            categoryId +\n\n            \"&per_page=\" +\n\n            limit +\n\n            \"&orderby=date\" +\n\n            \"&order=desc\" +\n\n            \"&_embed=1\",\n\n            {\n                credentials:\n                    \"same-origin\"\n            }\n\n        );\n\n\n    if(!response.ok){\n\n        throw new Error(\n            \"Posts request failed\"\n        );\n    }\n\n\n    return await response.json();\n}\n\n\n\/* =====================================================\n   IMAGE HELPER\n===================================================== *\/\n\nfunction getImage(\n    post,\n    type\n){\n\n    try{\n\n        const media =\n\n            post\n            ._embedded[\n                \"wp:featuredmedia\"\n            ][0];\n\n\n        if(type === \"large\"){\n\n            return (\n\n                media\n                .media_details\n                ?.sizes\n                ?.medium_large\n                ?.source_url\n\n                ||\n\n                media\n                .media_details\n                ?.sizes\n                ?.medium\n                ?.source_url\n\n                ||\n\n                media\n                .source_url\n\n                ||\n\n                \"\"\n\n            );\n\n        }\n\n\n        return (\n\n            media\n            .media_details\n            ?.sizes\n            ?.medium\n            ?.source_url\n\n            ||\n\n            media\n            .media_details\n            ?.sizes\n            ?.thumbnail\n            ?.source_url\n\n            ||\n\n            media\n            .source_url\n\n            ||\n\n            \"\"\n\n        );\n\n    }\n\n    catch(error){\n\n        return \"\";\n    }\n}\n\n\n\/* =====================================================\n   IDEAL INSTITUTIONS\n===================================================== *\/\n\nasync function loadIdealInstitutions(){\n\n    try{\n\n        const posts =\n            await fetchPosts(\n                IDEAL_SLUG,\n                IDEAL_POSTS\n            );\n\n\n        idealContent.innerHTML =\n            \"\";\n\n\n        if(!posts.length){\n\n            idealContent.innerHTML =\n\n                '<div class=\"tn-editorial-loading\">\u0641\u06cc \u0627\u0644\u062d\u0627\u0644 \u06a9\u0648\u0626\u06cc \u0627\u062f\u0627\u0631\u06c1 \u0634\u0627\u0645\u0644 \u0646\u06c1\u06cc\u06ba \u06a9\u06cc\u0627 \u06af\u06cc\u0627\u06d4<\/div>';\n\n\n            return;\n        }\n\n\n        \/* =============================================\n           FEATURED\n        ============================================= *\/\n\n        const featured =\n            posts[0];\n\n\n        const featuredTitle =\n            decodeHTML(\n                featured.title.rendered\n            );\n\n\n        const featureLink =\n            document.createElement(\n                \"a\"\n            );\n\n\n        featureLink.className =\n            \"tn-ideal-featured\";\n\n\n        featureLink.href =\n            featured.link;\n\n\n        \/* IMAGE *\/\n\n        const imageWrap =\n            document.createElement(\n                \"div\"\n            );\n\n\n        imageWrap.className =\n            \"tn-ideal-feature-image-wrap\";\n\n\n        const imageURL =\n            getImage(\n                featured,\n                \"large\"\n            );\n\n\n        if(imageURL){\n\n            const image =\n                document.createElement(\n                    \"img\"\n                );\n\n\n            image.className =\n                \"tn-ideal-feature-image\";\n\n\n            image.src =\n                imageURL;\n\n\n            image.alt =\n                featuredTitle;\n\n\n            image.loading =\n                \"lazy\";\n\n\n            image.decoding =\n                \"async\";\n\n\n            imageWrap.appendChild(\n                image\n            );\n\n        }\n\n\n        const badge =\n            document.createElement(\n                \"span\"\n            );\n\n\n        badge.className =\n            \"tn-ideal-badge\";\n\n\n        badge.textContent =\n            \"\u0645\u062b\u0627\u0644\u06cc \u0627\u062f\u0627\u0631\u06c1\";\n\n\n        imageWrap.appendChild(\n            badge\n        );\n\n\n        featureLink.appendChild(\n            imageWrap\n        );\n\n\n        \/* COPY *\/\n\n        const copy =\n            document.createElement(\n                \"div\"\n            );\n\n\n        copy.className =\n            \"tn-ideal-feature-copy\";\n\n\n        const heading =\n            document.createElement(\n                \"h3\"\n            );\n\n\n        heading.textContent =\n            featuredTitle;\n\n\n        const excerpt =\n            document.createElement(\n                \"p\"\n            );\n\n\n        excerpt.textContent =\n            stripHTML(\n                featured.excerpt.rendered\n            );\n\n\n        const read =\n            document.createElement(\n                \"span\"\n            );\n\n\n        read.className =\n            \"tn-ideal-read\";\n\n\n        read.textContent =\n            \"\u0645\u06a9\u0645\u0644 \u067e\u0631\u0648\u0641\u0627\u0626\u0644 \u067e\u0691\u06be\u06cc\u06ba \u2190\";\n\n\n        copy.append(\n            heading,\n            excerpt,\n            read\n        );\n\n\n        featureLink.appendChild(\n            copy\n        );\n\n\n        idealContent.appendChild(\n            featureLink\n        );\n\n\n        \/* =============================================\n           MINI GRID\n        ============================================= *\/\n\n        if(posts.length > 1){\n\n            const miniGrid =\n                document.createElement(\n                    \"div\"\n                );\n\n\n            miniGrid.className =\n                \"tn-ideal-mini-grid\";\n\n\n            posts\n            .slice(1)\n            .forEach(\n\n                function(post){\n\n                    const title =\n                        decodeHTML(\n                            post.title.rendered\n                        );\n\n\n                    const card =\n                        document.createElement(\n                            \"a\"\n                        );\n\n\n                    card.className =\n                        \"tn-ideal-mini\";\n\n\n                    card.href =\n                        post.link;\n\n\n                    const imageURL =\n                        getImage(\n                            post,\n                            \"small\"\n                        );\n\n\n                    if(imageURL){\n\n                        const image =\n                            document.createElement(\n                                \"img\"\n                            );\n\n\n                        image.className =\n                            \"tn-ideal-mini-image\";\n\n\n                        image.src =\n                            imageURL;\n\n\n                        image.alt =\n                            title;\n\n\n                        image.loading =\n                            \"lazy\";\n\n\n                        image.decoding =\n                            \"async\";\n\n\n                        card.appendChild(\n                            image\n                        );\n\n                    }\n\n\n                    const heading =\n                        document.createElement(\n                            \"h3\"\n                        );\n\n\n                    heading.textContent =\n                        title;\n\n\n                    card.appendChild(\n                        heading\n                    );\n\n\n                    miniGrid.appendChild(\n                        card\n                    );\n\n                }\n\n            );\n\n\n            idealContent.appendChild(\n                miniGrid\n            );\n\n        }\n\n    }\n\n\n    catch(error){\n\n        console.error(\n            error\n        );\n\n\n        idealContent.innerHTML =\n\n            '<div class=\"tn-editorial-loading\">\u0645\u062b\u0627\u0644\u06cc \u062a\u0639\u0644\u06cc\u0645\u06cc \u0627\u062f\u0627\u0631\u06d2 \u0644\u0648\u0688 \u0646\u06c1\u06cc\u06ba \u06c1\u0648 \u0633\u06a9\u06d2\u06d4<\/div>';\n\n    }\n\n}\n\n\n\/* =====================================================\n   YOUR OPINION\n===================================================== *\/\n\nasync function loadOpinions(){\n\n    try{\n\n        const posts =\n            await fetchPosts(\n                BLOG_SLUG,\n                BLOG_POSTS\n            );\n\n\n        opinionList.innerHTML =\n            \"\";\n\n\n        if(!posts.length){\n\n            opinionList.innerHTML =\n\n                '<div class=\"tn-editorial-loading\">\u0641\u06cc \u0627\u0644\u062d\u0627\u0644 \u06a9\u0648\u0626\u06cc \u0631\u0627\u0626\u06d2 \u06cc\u0627 \u0645\u0636\u0645\u0648\u0646 \u0645\u0648\u062c\u0648\u062f \u0646\u06c1\u06cc\u06ba\u06d4<\/div>';\n\n\n            return;\n        }\n\n\n        posts.forEach(\n\n            function(post,index){\n\n                const item =\n                    document.createElement(\n                        \"a\"\n                    );\n\n\n                item.className =\n                    \"tn-opinion-item\";\n\n\n                item.href =\n                    post.link;\n\n\n                const number =\n                    document.createElement(\n                        \"span\"\n                    );\n\n\n                number.className =\n                    \"tn-opinion-number\";\n\n\n                number.textContent =\n\n                    String(\n                        index + 1\n                    ).padStart(\n                        2,\n                        \"0\"\n                    );\n\n\n                const title =\n                    document.createElement(\n                        \"h3\"\n                    );\n\n\n                title.className =\n                    \"tn-opinion-title\";\n\n\n                title.textContent =\n\n                    decodeHTML(\n                        post.title.rendered\n                    );\n\n\n                const arrow =\n                    document.createElement(\n                        \"span\"\n                    );\n\n\n                arrow.className =\n                    \"tn-opinion-arrow\";\n\n\n                arrow.textContent =\n                    \"\u2039\";\n\n\n                item.append(\n                    number,\n                    title,\n                    arrow\n                );\n\n\n                opinionList.appendChild(\n                    item\n                );\n\n            }\n\n        );\n\n    }\n\n\n    catch(error){\n\n        console.error(\n            error\n        );\n\n\n        opinionList.innerHTML =\n\n            '<div class=\"tn-editorial-loading\">\u0622\u0631\u0627\u0621 \u0627\u0648\u0631 \u0645\u0636\u0627\u0645\u06cc\u0646 \u0644\u0648\u0688 \u0646\u06c1\u06cc\u06ba \u06c1\u0648 \u0633\u06a9\u06d2\u06d4<\/div>';\n\n    }\n\n}\n\n\n\/* =====================================================\n   LOAD BOTH\n===================================================== *\/\n\nloadIdealInstitutions();\n\nloadOpinions();\n\n\n})();\n\n<\/script>\n\n\n\n<!-- =========================================================\n TALEEM NAMA URDU\n PAKISTAN EDUCATION DIRECTORY\n Larger Urdu Typography\n Same Main-Site URLs\n========================================================= -->\n\n<section class=\"tned-section\" dir=\"rtl\" aria-labelledby=\"tned-title\">\n\n    <!-- HEADER -->\n    <header class=\"tned-header\">\n\n        <div class=\"tned-header-left\">\n\n            <span class=\"tned-main-icon\" aria-hidden=\"true\">\n                <svg viewBox=\"0 0 64 64\">\n                    <path d=\"M7 24 32 10l25 14-25 14L7 24Z\" fill=\"#3949AB\"><\/path>\n                    <path d=\"M16 32v12c0 6 8 11 16 11s16-5 16-11V32L32 41 16 32Z\" fill=\"#5C6BC0\"><\/path>\n                    <circle cx=\"49\" cy=\"15\" r=\"9\" fill=\"#FF8A00\"><\/circle>\n                    <path d=\"M45 15h8M49 11v8\" stroke=\"#fff\" stroke-width=\"2.7\" stroke-linecap=\"round\"><\/path>\n                <\/svg>\n            <\/span>\n\n            <div>\n                <h2 id=\"tned-title\">\u067e\u0627\u06a9\u0633\u062a\u0627\u0646 \u062a\u0639\u0644\u06cc\u0645\u06cc \u0688\u0627\u0626\u0631\u06cc\u06a9\u0679\u0631\u06cc<\/h2>\n                <p>\u067e\u0627\u06a9\u0633\u062a\u0627\u0646 \u06a9\u06d2 \u062a\u0639\u0644\u06cc\u0645\u06cc \u0627\u062f\u0627\u0631\u06d2\u060c \u0645\u062d\u06a9\u0645\u06d2 \u0627\u0648\u0631 \u062a\u0646\u0638\u06cc\u0645\u06cc\u06ba \u062a\u0644\u0627\u0634 \u06a9\u0631\u06cc\u06ba<\/p>\n            <\/div>\n\n        <\/div>\n\n        <span class=\"tned-pakistan\">\ud83c\uddf5\ud83c\uddf0 \u067e\u0627\u06a9\u0633\u062a\u0627\u0646<\/span>\n\n    <\/header>\n\n\n    <!-- DIRECTORY GRID -->\n    <div class=\"tned-grid\">\n\n\n        <!-- 01 UNIVERSITIES -->\n        <a class=\"tned-card tned-universities\"\n           href=\"https:\/\/taleemnama.pk\/universities\/\">\n\n            <span class=\"tned-card-decoration\"><\/span>\n\n            <span class=\"tned-icon\">\n                <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                    <path d=\"M5 22 32 7l27 15-27 15L5 22Z\" fill=\"#4F46E5\"><\/path>\n                    <path d=\"M15 30v14c0 6 8 11 17 11s17-5 17-11V30L32 39 15 30Z\" fill=\"#7C6FF0\"><\/path>\n                    <path d=\"M55 25v18\" stroke=\"#FF8A00\" stroke-width=\"4\" stroke-linecap=\"round\"><\/path>\n                    <circle cx=\"55\" cy=\"47\" r=\"4\" fill=\"#FFB300\"><\/circle>\n                <\/svg>\n            <\/span>\n\n            <div class=\"tned-card-content\">\n                <h3>\u062c\u0627\u0645\u0639\u0627\u062a<\/h3>\n                <p>\u067e\u0627\u06a9\u0633\u062a\u0627\u0646 \u0628\u06be\u0631 \u06a9\u06cc \u0633\u0631\u06a9\u0627\u0631\u06cc \u0627\u0648\u0631 \u0646\u062c\u06cc \u062c\u0627\u0645\u0639\u0627\u062a<\/p>\n\n                <span class=\"tned-explore\">\n                    \u062c\u0627\u0645\u0639\u0627\u062a \u062f\u06cc\u06a9\u06be\u06cc\u06ba\n                    <b>\u2190<\/b>\n                <\/span>\n            <\/div>\n\n        <\/a>\n\n\n        <!-- 02 MEDICAL COLLEGES -->\n        <a class=\"tned-card tned-medical\"\n           href=\"https:\/\/taleemnama.pk\/medical-dental-colleges-pakistan\/\">\n\n            <span class=\"tned-card-decoration\"><\/span>\n\n            <span class=\"tned-icon\">\n                <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                    <circle cx=\"32\" cy=\"32\" r=\"25\" fill=\"#EAF9F2\"><\/circle>\n                    <rect x=\"18\" y=\"16\" width=\"28\" height=\"36\" rx=\"6\" fill=\"#16A36A\"><\/rect>\n                    <rect x=\"28\" y=\"22\" width=\"8\" height=\"24\" rx=\"2\" fill=\"#fff\"><\/rect>\n                    <rect x=\"22\" y=\"30\" width=\"20\" height=\"8\" rx=\"2\" fill=\"#fff\"><\/rect>\n                    <circle cx=\"47\" cy=\"17\" r=\"8\" fill=\"#42A5F5\"><\/circle>\n                    <path d=\"M44 17h6M47 14v6\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\"><\/path>\n                <\/svg>\n            <\/span>\n\n            <div class=\"tned-card-content\">\n                <h3>\u0645\u06cc\u0688\u06cc\u06a9\u0644 \u06a9\u0627\u0644\u062c\u0632<\/h3>\n                <p>\u067e\u0627\u06a9\u0633\u062a\u0627\u0646 \u06a9\u06d2 \u0645\u06cc\u0688\u06cc\u06a9\u0644 \u0627\u0648\u0631 \u0688\u06cc\u0646\u0679\u0644 \u06a9\u0627\u0644\u062c\u0632<\/p>\n\n                <span class=\"tned-explore\">\n                    \u0645\u06cc\u0688\u06cc\u06a9\u0644 \u06a9\u0627\u0644\u062c\u0632 \u062f\u06cc\u06a9\u06be\u06cc\u06ba\n                    <b>\u2190<\/b>\n                <\/span>\n            <\/div>\n\n        <\/a>\n\n\n        <!-- 03 COLLEGES -->\n        <a class=\"tned-card tned-colleges\"\n           href=\"https:\/\/taleemnama.pk\/colleges\/\">\n\n            <span class=\"tned-card-decoration\"><\/span>\n\n            <span class=\"tned-icon\">\n                <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                    <path d=\"M8 25 32 10l24 15v5H8v-5Z\" fill=\"#FF7A00\"><\/path>\n                    <rect x=\"12\" y=\"30\" width=\"40\" height=\"22\" rx=\"2\" fill=\"#FFB74D\"><\/rect>\n                    <rect x=\"18\" y=\"34\" width=\"6\" height=\"18\" fill=\"#fff\"><\/rect>\n                    <rect x=\"29\" y=\"34\" width=\"6\" height=\"18\" fill=\"#fff\"><\/rect>\n                    <rect x=\"40\" y=\"34\" width=\"6\" height=\"18\" fill=\"#fff\"><\/rect>\n                    <rect x=\"7\" y=\"52\" width=\"50\" height=\"5\" rx=\"2\" fill=\"#3949AB\"><\/rect>\n                    <circle cx=\"32\" cy=\"22\" r=\"4\" fill=\"#fff\"><\/circle>\n                <\/svg>\n            <\/span>\n\n            <div class=\"tned-card-content\">\n                <h3>\u06a9\u0627\u0644\u062c\u0632<\/h3>\n                <p>\u0634\u06c1\u0631 \u0627\u0648\u0631 \u0635\u0648\u0628\u06d2 \u06a9\u06d2 \u0644\u062d\u0627\u0638 \u0633\u06d2 \u0646\u0645\u0627\u06cc\u0627\u06ba \u06a9\u0627\u0644\u062c\u0632<\/p>\n\n                <span class=\"tned-explore\">\n                    \u06a9\u0627\u0644\u062c\u0632 \u062a\u0644\u0627\u0634 \u06a9\u0631\u06cc\u06ba\n                    <b>\u2190<\/b>\n                <\/span>\n            <\/div>\n\n        <\/a>\n\n\n        <!-- 04 SCHOOLS -->\n        <a class=\"tned-card tned-schools\"\n           href=\"https:\/\/taleemnama.pk\/schools\/\">\n\n            <span class=\"tned-card-decoration\"><\/span>\n\n            <span class=\"tned-icon\">\n                <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                    <path d=\"M8 27 32 10l24 17v28H8V27Z\" fill=\"#42A5F5\"><\/path>\n                    <path d=\"M5 28 32 7l27 21-4 5-23-18L9 33 5 28Z\" fill=\"#1A73E8\"><\/path>\n                    <rect x=\"26\" y=\"37\" width=\"12\" height=\"18\" rx=\"2\" fill=\"#FFB300\"><\/rect>\n                    <rect x=\"14\" y=\"34\" width=\"8\" height=\"8\" rx=\"1\" fill=\"#fff\"><\/rect>\n                    <rect x=\"42\" y=\"34\" width=\"8\" height=\"8\" rx=\"1\" fill=\"#fff\"><\/rect>\n                    <path d=\"M32 7v11\" stroke=\"#FF6F00\" stroke-width=\"3\"><\/path>\n                    <path d=\"m32 8 12 4-12 4Z\" fill=\"#FF6F00\"><\/path>\n                <\/svg>\n            <\/span>\n\n            <div class=\"tned-card-content\">\n                <h3>\u0627\u0633\u06a9\u0648\u0644\u0632<\/h3>\n                <p>\u0645\u0639\u0631\u0648\u0641 \u0627\u0633\u06a9\u0648\u0644\u0632 \u0627\u0648\u0631 \u0627\u0633\u06a9\u0648\u0644 \u0646\u06cc\u0679 \u0648\u0631\u06a9\u0633<\/p>\n\n                <span class=\"tned-explore\">\n                    \u0627\u0633\u06a9\u0648\u0644\u0632 \u062f\u06cc\u06a9\u06be\u06cc\u06ba\n                    <b>\u2190<\/b>\n                <\/span>\n            <\/div>\n\n        <\/a>\n\n\n        <!-- 05 EDUCATION DEPARTMENTS -->\n        <a class=\"tned-card tned-departments\"\n           href=\"https:\/\/taleemnama.pk\/education-departments\/\">\n\n            <span class=\"tned-card-decoration\"><\/span>\n\n            <span class=\"tned-icon\">\n                <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                    <path d=\"M7 24 32 9l25 15v6H7v-6Z\" fill=\"#1A237E\"><\/path>\n                    <rect x=\"11\" y=\"30\" width=\"42\" height=\"23\" fill=\"#3949AB\"><\/rect>\n                    <rect x=\"16\" y=\"34\" width=\"5\" height=\"15\" fill=\"#fff\"><\/rect>\n                    <rect x=\"26\" y=\"34\" width=\"5\" height=\"15\" fill=\"#fff\"><\/rect>\n                    <rect x=\"36\" y=\"34\" width=\"5\" height=\"15\" fill=\"#fff\"><\/rect>\n                    <rect x=\"46\" y=\"34\" width=\"3\" height=\"15\" fill=\"#fff\"><\/rect>\n                    <rect x=\"6\" y=\"53\" width=\"52\" height=\"5\" rx=\"2\" fill=\"#FF6F00\"><\/rect>\n                    <circle cx=\"32\" cy=\"21\" r=\"4\" fill=\"#FFB300\"><\/circle>\n                <\/svg>\n            <\/span>\n\n            <div class=\"tned-card-content\">\n                <h3>\u0645\u062d\u06a9\u0645\u06c1 \u06c1\u0627\u0626\u06d2 \u062a\u0639\u0644\u06cc\u0645<\/h3>\n                <p>\u0648\u0641\u0627\u0642\u06cc \u0627\u0648\u0631 \u0635\u0648\u0628\u0627\u0626\u06cc \u062a\u0639\u0644\u06cc\u0645\u06cc \u0645\u062d\u06a9\u0645\u06d2<\/p>\n\n                <span class=\"tned-explore\">\n                    \u0645\u062d\u06a9\u0645\u06d2 \u062f\u06cc\u06a9\u06be\u06cc\u06ba\n                    <b>\u2190<\/b>\n                <\/span>\n            <\/div>\n\n        <\/a>\n\n\n        <!-- 06 EDUCATION BOARDS -->\n        <a class=\"tned-card tned-boards\"\n           href=\"https:\/\/taleemnama.pk\/education-boards\/\">\n\n            <span class=\"tned-card-decoration\"><\/span>\n\n            <span class=\"tned-icon\">\n                <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                    <rect x=\"11\" y=\"8\" width=\"42\" height=\"48\" rx=\"6\" fill=\"#FFF2E4\"><\/rect>\n                    <rect x=\"16\" y=\"13\" width=\"32\" height=\"10\" rx=\"3\" fill=\"#FF6F00\"><\/rect>\n                    <path d=\"M19 31h12M19 39h10M19 47h15\" stroke=\"#3949AB\" stroke-width=\"3.5\" stroke-linecap=\"round\"><\/path>\n                    <circle cx=\"43\" cy=\"39\" r=\"10\" fill=\"#26A269\"><\/circle>\n                    <path d=\"m38 39 4 4 7-9\" fill=\"none\" stroke=\"#fff\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n                <\/svg>\n            <\/span>\n\n            <div class=\"tned-card-content\">\n                <h3>\u062a\u0639\u0644\u06cc\u0645\u06cc \u0628\u0648\u0631\u0688\u0632<\/h3>\n                <p>\u067e\u0627\u06a9\u0633\u062a\u0627\u0646 \u06a9\u06d2 BISE \u0628\u0648\u0631\u0688\u0632 \u0627\u0648\u0631 \u0627\u0645\u062a\u062d\u0627\u0646\u06cc \u0627\u062f\u0627\u0631\u06d2<\/p>\n\n                <span class=\"tned-explore\">\n                    \u062a\u0639\u0644\u06cc\u0645\u06cc \u0628\u0648\u0631\u0688\u0632 \u062f\u06cc\u06a9\u06be\u06cc\u06ba\n                    <b>\u2190<\/b>\n                <\/span>\n            <\/div>\n\n        <\/a>\n\n\n        <!-- 07 TEACHERS ASSOCIATIONS -->\n        <a class=\"tned-card tned-teachers\"\n           href=\"https:\/\/taleemnama.pk\/teachers-associations\/\">\n\n            <span class=\"tned-card-decoration\"><\/span>\n\n            <span class=\"tned-icon\">\n                <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                    <circle cx=\"23\" cy=\"19\" r=\"9\" fill=\"#FFB27A\"><\/circle>\n                    <path d=\"M9 55c1-14 7-21 14-21s13 7 14 21H9Z\" fill=\"#7C4DFF\"><\/path>\n                    <circle cx=\"45\" cy=\"23\" r=\"7\" fill=\"#FFCC80\"><\/circle>\n                    <path d=\"M35 54c1-11 5-17 10-17s10 6 11 17H35Z\" fill=\"#FF7043\"><\/path>\n                    <path d=\"M28 38c5-5 10-7 15-7\" stroke=\"#42A5F5\" stroke-width=\"4\" stroke-linecap=\"round\"><\/path>\n                    <circle cx=\"34\" cy=\"10\" r=\"5\" fill=\"#FFD54F\"><\/circle>\n                <\/svg>\n            <\/span>\n\n            <div class=\"tned-card-content\">\n                <h3>\u0627\u0633\u0627\u062a\u0630\u06c1 \u062a\u0646\u0638\u06cc\u0645\u06cc\u06ba<\/h3>\n                <p>\u0627\u0633\u0627\u062a\u0630\u06c1 \u06a9\u06cc \u0627\u0646\u062c\u0645\u0646\u06cc\u06ba\u060c \u06cc\u0648\u0646\u06cc\u0646\u0632 \u0627\u0648\u0631 \u062a\u0646\u0638\u06cc\u0645\u06cc\u06ba<\/p>\n\n                <span class=\"tned-explore\">\n                    \u062a\u0646\u0638\u06cc\u0645\u06cc\u06ba \u062f\u06cc\u06a9\u06be\u06cc\u06ba\n                    <b>\u2190<\/b>\n                <\/span>\n            <\/div>\n\n        <\/a>\n\n\n        <!-- 08 STUDENT ORGANIZATIONS -->\n        <a class=\"tned-card tned-students\"\n           href=\"https:\/\/taleemnama.pk\/student-organizations\/\">\n\n            <span class=\"tned-card-decoration\"><\/span>\n\n            <span class=\"tned-icon\">\n                <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                    <circle cx=\"32\" cy=\"18\" r=\"8\" fill=\"#FFB27A\"><\/circle>\n                    <circle cx=\"15\" cy=\"25\" r=\"7\" fill=\"#FFD09B\"><\/circle>\n                    <circle cx=\"49\" cy=\"25\" r=\"7\" fill=\"#FFD09B\"><\/circle>\n                    <path d=\"M19 55c1-15 6-23 13-23s12 8 13 23H19Z\" fill=\"#3949AB\"><\/path>\n                    <path d=\"M3 55c1-12 5-19 12-19 4 0 7 3 9 7-3 3-5 7-6 12H3Z\" fill=\"#26A269\"><\/path>\n                    <path d=\"M46 55c-1-5-3-9-6-12 2-4 5-7 9-7 7 0 11 7 12 19H46Z\" fill=\"#FF6F00\"><\/path>\n                    <path d=\"M27 10 32 7l5 3-5 3-5-3Z\" fill=\"#FFD54F\"><\/path>\n                <\/svg>\n            <\/span>\n\n            <div class=\"tned-card-content\">\n                <h3>\u0637\u0644\u0628\u06c1 \u062a\u0646\u0638\u06cc\u0645\u06cc\u06ba<\/h3>\n                <p>\u0637\u0644\u0628\u06c1 \u06cc\u0648\u0646\u06cc\u0646\u0632\u060c \u0633\u0648\u0633\u0627\u0626\u0679\u06cc\u0632 \u0627\u0648\u0631 \u062a\u0646\u0638\u06cc\u0645\u06cc\u06ba<\/p>\n\n                <span class=\"tned-explore\">\n                    \u0637\u0644\u0628\u06c1 \u062a\u0646\u0638\u06cc\u0645\u06cc\u06ba \u062f\u06cc\u06a9\u06be\u06cc\u06ba\n                    <b>\u2190<\/b>\n                <\/span>\n            <\/div>\n\n        <\/a>\n\n    <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =========================================================\n   BASE\n========================================================= *\/\n\n.tned-section,\n.tned-section *{\n    box-sizing:border-box;\n}\n\n.tned-section{\n    position:relative;\n    width:100%;\n    margin:0;\n    padding:0;\n\n    font-family:inherit;\n\n    background:#ffffff;\n\n    border:1px solid #e3e6ec;\n    border-radius:14px;\n\n    overflow:hidden;\n\n    box-shadow:\n        0 6px 24px rgba(26,35,126,.07);\n}\n\n\n\/* =========================================================\n   HEADER\n========================================================= *\/\n\n.tned-header{\n    position:relative;\n\n    min-height:92px;\n\n    display:flex;\n    align-items:center;\n    justify-content:space-between;\n\n    gap:20px;\n\n    padding:15px 21px;\n\n    background:\n        linear-gradient(\n            250deg,\n            #ffffff 0%,\n            #F7F8FF 65%,\n            #FFF7EF 100%\n        );\n\n    border-bottom:3px solid #FF6F00;\n}\n\n.tned-header::after{\n    content:\"\";\n\n    position:absolute;\n\n    right:0;\n    bottom:-3px;\n\n    width:145px;\n    height:3px;\n\n    background:#1A237E;\n}\n\n.tned-header-left{\n    display:flex;\n    align-items:center;\n\n    gap:13px;\n\n    min-width:0;\n}\n\n.tned-main-icon{\n    flex:0 0 auto;\n\n    width:61px;\n    height:61px;\n\n    display:flex;\n    align-items:center;\n    justify-content:center;\n\n    background:\n        linear-gradient(\n            135deg,\n            #EEEFFF,\n            #FFF0E3\n        );\n\n    border-radius:17px;\n\n    box-shadow:\n        0 4px 12px rgba(26,35,126,.08);\n}\n\n.tned-main-icon svg{\n    width:50px;\n    height:50px;\n}\n\n.tned-header h2{\n    margin:0 0 3px!important;\n    padding:0!important;\n\n    color:#1A237E!important;\n\n    font-size:29px!important;\n    line-height:1.55!important;\n\n    font-weight:850!important;\n}\n\n.tned-header p{\n    margin:0!important;\n    padding:0 0 3px!important;\n\n    color:#667085!important;\n\n    font-size:14px!important;\n    line-height:1.8!important;\n\n    font-weight:500;\n}\n\n.tned-pakistan{\n    flex:0 0 auto;\n\n    display:inline-flex;\n    align-items:center;\n\n    padding:8px 13px;\n\n    background:#EAF8EF;\n\n    border:1px solid #CDEBD8;\n    border-radius:20px;\n\n    color:#08783E;\n\n    font-size:13px;\n    font-weight:800;\n}\n\n\n\/* =========================================================\n   GRID\n========================================================= *\/\n\n.tned-grid{\n    display:grid;\n\n    grid-template-columns:\n        repeat(4,minmax(0,1fr));\n\n    gap:14px;\n\n    padding:19px;\n\n    background:#F7F8FB;\n}\n\n\n\/* =========================================================\n   CARD\n========================================================= *\/\n\n.tned-card{\n    position:relative;\n\n    min-width:0;\n    min-height:245px;\n\n    display:flex;\n    flex-direction:column;\n\n    padding:20px 17px 17px;\n\n    overflow:hidden;\n\n    background:#ffffff;\n\n    border:1px solid #E4E7ED;\n    border-radius:14px;\n\n    text-decoration:none!important;\n    text-align:right;\n\n    box-shadow:\n        0 3px 12px rgba(26,35,126,.045);\n\n    transition:\n        transform .25s ease,\n        box-shadow .25s ease,\n        border-color .25s ease;\n}\n\n.tned-card-decoration{\n    position:absolute;\n\n    top:0;\n    right:0;\n    left:0;\n\n    width:100%;\n    height:5px;\n\n    background:#FF6F00;\n}\n\n.tned-card::after{\n    content:\"\";\n\n    position:absolute;\n\n    width:90px;\n    height:90px;\n\n    top:-40px;\n    left:-38px;\n\n    border-radius:50%;\n\n    opacity:.5;\n\n    transition:transform .35s ease;\n}\n\n.tned-card:hover{\n    transform:translateY(-6px);\n\n    border-color:#FFCAA0;\n\n    box-shadow:\n        0 13px 28px rgba(26,35,126,.13);\n}\n\n.tned-card:hover::after{\n    transform:scale(1.3);\n}\n\n\n\/* =========================================================\n   ICON\n========================================================= *\/\n\n.tned-icon{\n    position:relative;\n    z-index:2;\n\n    width:75px;\n    height:75px;\n\n    display:flex;\n    align-items:center;\n    justify-content:center;\n\n    margin-bottom:12px;\n\n    border-radius:20px;\n\n    transition:transform .3s ease;\n}\n\n.tned-icon svg{\n    width:59px;\n    height:59px;\n\n    display:block;\n}\n\n.tned-card:hover .tned-icon{\n    transform:\n        translateY(-3px)\n        scale(1.07)\n        rotate(2deg);\n}\n\n\n\/* =========================================================\n   LARGER URDU TYPOGRAPHY\n========================================================= *\/\n\n.tned-card-content{\n    position:relative;\n    z-index:2;\n\n    display:flex;\n    flex-direction:column;\n\n    flex:1;\n}\n\n\n\/* CARD TITLE *\/\n\n.tned-card h3{\n    margin:0 0 6px!important;\n    padding:0 0 3px!important;\n\n    color:#1A237E!important;\n\n    font-size:20px!important;\n    line-height:1.75!important;\n\n    font-weight:800!important;\n}\n\n\n\/* DESCRIPTION *\/\n\n.tned-card p{\n    margin:0 0 14px!important;\n    padding:0 0 3px!important;\n\n    color:#667085!important;\n\n    font-size:14px!important;\n    line-height:1.85!important;\n\n    font-weight:500!important;\n}\n\n\n\/* BOTTOM LINK *\/\n\n.tned-explore{\n    display:inline-flex;\n    align-items:center;\n\n    gap:6px;\n\n    margin-top:auto;\n\n    color:#1A237E!important;\n\n    font-size:14px;\n    line-height:1.7;\n\n    font-weight:800;\n}\n\n.tned-explore b{\n    color:#FF6F00;\n\n    font-family:Arial,sans-serif;\n\n    font-size:19px;\n\n    transition:transform .2s ease;\n}\n\n.tned-card:hover .tned-explore{\n    color:#FF6F00!important;\n}\n\n.tned-card:hover .tned-explore b{\n    transform:translateX(-4px);\n}\n\n\n\/* =========================================================\n   UNIVERSITIES\n========================================================= *\/\n\n.tned-universities{\n    background:\n        linear-gradient(\n            215deg,\n            #FFFFFF 60%,\n            #F1EFFF 100%\n        );\n}\n\n.tned-universities .tned-icon{\n    background:#EFEDFF;\n}\n\n.tned-universities::after{\n    background:#DDD8FF;\n}\n\n.tned-universities .tned-card-decoration{\n    background:\n        linear-gradient(\n            90deg,\n            #4F46E5,\n            #8B7CF6\n        );\n}\n\n\n\/* =========================================================\n   MEDICAL COLLEGES\n========================================================= *\/\n\n.tned-medical{\n    background:\n        linear-gradient(\n            215deg,\n            #FFFFFF 60%,\n            #EAF9F2 100%\n        );\n}\n\n.tned-medical .tned-icon{\n    background:#E6F8EF;\n}\n\n.tned-medical::after{\n    background:#CDEEDD;\n}\n\n.tned-medical .tned-card-decoration{\n    background:\n        linear-gradient(\n            90deg,\n            #16A36A,\n            #42A5F5\n        );\n}\n\n\n\/* =========================================================\n   COLLEGES\n========================================================= *\/\n\n.tned-colleges{\n    background:\n        linear-gradient(\n            215deg,\n            #FFFFFF 60%,\n            #FFF1E4 100%\n        );\n}\n\n.tned-colleges .tned-icon{\n    background:#FFF0E1;\n}\n\n.tned-colleges::after{\n    background:#FFE0C1;\n}\n\n.tned-colleges .tned-card-decoration{\n    background:\n        linear-gradient(\n            90deg,\n            #FF6F00,\n            #FFB300\n        );\n}\n\n\n\/* =========================================================\n   SCHOOLS\n========================================================= *\/\n\n.tned-schools{\n    background:\n        linear-gradient(\n            215deg,\n            #FFFFFF 60%,\n            #EAF6FF 100%\n        );\n}\n\n.tned-schools .tned-icon{\n    background:#E8F5FF;\n}\n\n.tned-schools::after{\n    background:#CDEAFF;\n}\n\n.tned-schools .tned-card-decoration{\n    background:\n        linear-gradient(\n            90deg,\n            #1A73E8,\n            #42A5F5\n        );\n}\n\n\n\/* =========================================================\n   EDUCATION DEPARTMENTS\n========================================================= *\/\n\n.tned-departments{\n    background:\n        linear-gradient(\n            215deg,\n            #FFFFFF 60%,\n            #EFF0FF 100%\n        );\n}\n\n.tned-departments .tned-icon{\n    background:#ECEEFF;\n}\n\n.tned-departments::after{\n    background:#D9DCFF;\n}\n\n.tned-departments .tned-card-decoration{\n    background:\n        linear-gradient(\n            90deg,\n            #1A237E,\n            #5C6BC0\n        );\n}\n\n\n\/* =========================================================\n   EDUCATION BOARDS\n========================================================= *\/\n\n.tned-boards{\n    background:\n        linear-gradient(\n            215deg,\n            #FFFFFF 60%,\n            #FFF4E9 100%\n        );\n}\n\n.tned-boards .tned-icon{\n    background:#FFF2E5;\n}\n\n.tned-boards::after{\n    background:#FFE0C4;\n}\n\n.tned-boards .tned-card-decoration{\n    background:\n        linear-gradient(\n            90deg,\n            #FF6F00,\n            #26A269\n        );\n}\n\n\n\/* =========================================================\n   TEACHERS ASSOCIATIONS\n========================================================= *\/\n\n.tned-teachers{\n    background:\n        linear-gradient(\n            215deg,\n            #FFFFFF 60%,\n            #F4EEFF 100%\n        );\n}\n\n.tned-teachers .tned-icon{\n    background:#F3ECFF;\n}\n\n.tned-teachers::after{\n    background:#E5D7FF;\n}\n\n.tned-teachers .tned-card-decoration{\n    background:\n        linear-gradient(\n            90deg,\n            #7C4DFF,\n            #FF7043\n        );\n}\n\n\n\/* =========================================================\n   STUDENT ORGANIZATIONS\n========================================================= *\/\n\n.tned-students{\n    background:\n        linear-gradient(\n            215deg,\n            #FFFFFF 60%,\n            #EAF8EF 100%\n        );\n}\n\n.tned-students .tned-icon{\n    background:#EAF8EF;\n}\n\n.tned-students::after{\n    background:#D3F0DE;\n}\n\n.tned-students .tned-card-decoration{\n    background:\n        linear-gradient(\n            90deg,\n            #26A269,\n            #3949AB,\n            #FF6F00\n        );\n}\n\n\n\/* =========================================================\n   ENTRY ANIMATION\n========================================================= *\/\n\n@keyframes tnedFadeUp{\n\n    from{\n        opacity:0;\n        transform:translateY(15px);\n    }\n\n    to{\n        opacity:1;\n        transform:translateY(0);\n    }\n}\n\n.tned-card{\n    animation:\n        tnedFadeUp .5s ease both;\n}\n\n.tned-card:nth-child(1){animation-delay:.03s;}\n.tned-card:nth-child(2){animation-delay:.06s;}\n.tned-card:nth-child(3){animation-delay:.09s;}\n.tned-card:nth-child(4){animation-delay:.12s;}\n.tned-card:nth-child(5){animation-delay:.15s;}\n.tned-card:nth-child(6){animation-delay:.18s;}\n.tned-card:nth-child(7){animation-delay:.21s;}\n.tned-card:nth-child(8){animation-delay:.24s;}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media screen and (max-width:1050px){\n\n    .tned-grid{\n        grid-template-columns:\n            repeat(2,minmax(0,1fr));\n    }\n\n    .tned-card{\n        min-height:225px;\n    }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media screen and (max-width:650px){\n\n    .tned-section{\n        border-radius:9px;\n    }\n\n    .tned-header{\n        min-height:82px;\n\n        padding:\n            10px\n            13px;\n    }\n\n    .tned-header-left{\n        gap:9px;\n    }\n\n    .tned-main-icon{\n        width:52px;\n        height:52px;\n\n        border-radius:14px;\n    }\n\n    .tned-main-icon svg{\n        width:43px;\n        height:43px;\n    }\n\n    .tned-header h2{\n        font-size:22px!important;\n        line-height:1.6!important;\n    }\n\n    .tned-header p{\n        font-size:12px!important;\n        line-height:1.75!important;\n    }\n\n    .tned-pakistan{\n        display:none;\n    }\n\n    .tned-header::after{\n        width:105px;\n    }\n\n\n    \/* 2 CARDS PER ROW *\/\n\n    .tned-grid{\n        grid-template-columns:\n            repeat(2,minmax(0,1fr));\n\n        gap:9px;\n\n        padding:11px;\n    }\n\n    .tned-card{\n        min-height:225px;\n\n        padding:\n            15px\n            11px\n            12px;\n\n        border-radius:11px;\n    }\n\n    .tned-icon{\n        width:62px;\n        height:62px;\n\n        margin-bottom:9px;\n\n        border-radius:16px;\n    }\n\n    .tned-icon svg{\n        width:49px;\n        height:49px;\n    }\n\n\n    \/* LARGER MOBILE TITLE *\/\n\n    .tned-card h3{\n        font-size:17px!important;\n        line-height:1.75!important;\n\n        margin-bottom:5px!important;\n    }\n\n\n    \/* LARGER MOBILE DESCRIPTION *\/\n\n    .tned-card p{\n        font-size:12.5px!important;\n        line-height:1.8!important;\n\n        margin-bottom:10px!important;\n    }\n\n\n    \/* LARGER MOBILE LINK *\/\n\n    .tned-explore{\n        font-size:12.5px;\n        line-height:1.65;\n    }\n\n    .tned-explore b{\n        font-size:17px;\n    }\n\n    .tned-card:hover{\n        transform:none;\n    }\n\n}\n\n\n\/* =========================================================\n   VERY SMALL PHONES\n========================================================= *\/\n\n@media screen and (max-width:380px){\n\n    .tned-header h2{\n        font-size:20px!important;\n    }\n\n    .tned-header p{\n        display:none;\n    }\n\n    .tned-grid{\n        gap:7px;\n        padding:9px;\n    }\n\n    .tned-card{\n        min-height:215px;\n\n        padding:\n            13px\n            9px\n            10px;\n    }\n\n    .tned-icon{\n        width:56px;\n        height:56px;\n    }\n\n    .tned-icon svg{\n        width:44px;\n        height:44px;\n    }\n\n    .tned-card h3{\n        font-size:16px!important;\n        line-height:1.75!important;\n    }\n\n    .tned-card p{\n        font-size:11.5px!important;\n        line-height:1.75!important;\n    }\n\n    .tned-explore{\n        font-size:11.5px;\n    }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media (prefers-reduced-motion:reduce){\n\n    .tned-card,\n    .tned-icon,\n    .tned-card::after,\n    .tned-explore b{\n\n        animation:none!important;\n        transition:none!important;\n    }\n\n}\n\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n.tned-card:focus-visible{\n    outline:3px solid #FF6F00;\n    outline-offset:3px;\n}\n\n<\/style>\n\n\n\n<!-- =========================================================\n TALEEM NAMA URDU\n TEACHER ISSUES + STUDENT PROBLEMS\n TITLE + 2-LINE EXCERPT + READ MORE\n FINAL VERSION\n========================================================= -->\n\n<section class=\"tn-issues-wrap\" dir=\"rtl\">\n\n    <div class=\"tn-issues-grid\">\n\n        <!-- =================================================\n             TEACHER ISSUES\n        ================================================== -->\n        <section class=\"tn-issues-column\" data-category-slug=\"teacher-issues\">\n\n            <header class=\"tn-issues-head\">\n\n                <div class=\"tn-issues-title-row\">\n\n                    <span class=\"tn-issues-icon\" aria-hidden=\"true\">\n                        <svg viewBox=\"0 0 64 64\">\n                            <circle cx=\"22\" cy=\"18\" r=\"9\" fill=\"#FFB27A\"><\/circle>\n                            <path d=\"M8 54c1-14 7-21 14-21s13 7 14 21H8Z\" fill=\"#5C6BC0\"><\/path>\n                            <rect x=\"35\" y=\"11\" width=\"21\" height=\"30\" rx=\"4\" fill=\"#EAF3FF\"><\/rect>\n                            <path d=\"M40 19h11M40 25h9M40 31h10\" stroke=\"#1A73E8\" stroke-width=\"3\" stroke-linecap=\"round\"><\/path>\n                            <path d=\"M31 37 43 29\" stroke=\"#FF6F00\" stroke-width=\"4\" stroke-linecap=\"round\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <div>\n                        <h2>\u0627\u0633\u0627\u062a\u0630\u06c1 \u06a9\u06d2 \u0645\u0633\u0627\u0626\u0644<\/h2>\n                        <p>\u0627\u0633\u0627\u062a\u0630\u06c1\u060c \u0645\u0644\u0627\u0632\u0645\u06cc\u0646 \u0627\u0648\u0631 \u062a\u0639\u0644\u06cc\u0645\u06cc \u0633\u0631\u0648\u0633 \u0633\u06d2 \u0645\u062a\u0639\u0644\u0642 \u0627\u06c1\u0645 \u062e\u0628\u0631\u06cc\u06ba<\/p>\n                    <\/div>\n\n                <\/div>\n\n                <div class=\"tn-issues-brand-line\" aria-hidden=\"true\">\n                    <span class=\"tn-issues-blue-line\"><\/span>\n                    <span class=\"tn-issues-orange-line\"><\/span>\n                <\/div>\n\n            <\/header>\n\n\n            <div class=\"tn-issues-list\">\n                <div class=\"tn-issues-loading\">\n                    \u062e\u0628\u0631\u06cc\u06ba \u0644\u0648\u0688 \u06c1\u0648 \u0631\u06c1\u06cc \u06c1\u06cc\u06ba&#8230;\n                <\/div>\n            <\/div>\n\n\n            <a\n                class=\"tn-issues-more\"\n                href=\"https:\/\/taleemnama.pk\/urdu\/category\/teacher-issues\/\"\n            >\n                \u0627\u0633\u0627\u062a\u0630\u06c1 \u06a9\u06d2 \u0645\u0633\u0627\u0626\u0644 \u06a9\u06cc \u0645\u0632\u06cc\u062f \u062e\u0628\u0631\u06cc\u06ba\n                <span>\u2190<\/span>\n            <\/a>\n\n        <\/section>\n\n\n        <!-- =================================================\n             STUDENT PROBLEMS\n        ================================================== -->\n        <section class=\"tn-issues-column\" data-category-slug=\"students-problems\">\n\n            <header class=\"tn-issues-head\">\n\n                <div class=\"tn-issues-title-row\">\n\n                    <span class=\"tn-issues-icon\" aria-hidden=\"true\">\n                        <svg viewBox=\"0 0 64 64\">\n                            <path d=\"M6 21 32 7l26 14-26 14L6 21Z\" fill=\"#3949AB\"><\/path>\n                            <path d=\"M16 29v13c0 6 8 11 16 11s16-5 16-11V29L32 38 16 29Z\" fill=\"#5C6BC0\"><\/path>\n                            <circle cx=\"51\" cy=\"43\" r=\"10\" fill=\"#FF6F00\"><\/circle>\n                            <path d=\"M51 36v8\" stroke=\"#fff\" stroke-width=\"4\" stroke-linecap=\"round\"><\/path>\n                            <circle cx=\"51\" cy=\"48\" r=\"2\" fill=\"#fff\"><\/circle>\n                        <\/svg>\n                    <\/span>\n\n                    <div>\n                        <h2>\u0637\u0644\u0628\u06c1 \u06a9\u06d2 \u0645\u0633\u0627\u0626\u0644<\/h2>\n                        <p>\u0637\u0644\u0628\u06c1 \u06a9\u0648 \u062f\u0631\u067e\u06cc\u0634 \u062a\u0639\u0644\u06cc\u0645\u06cc\u060c \u0627\u0645\u062a\u062d\u0627\u0646\u06cc \u0627\u0648\u0631 \u0627\u062f\u0627\u0631\u06c1 \u062c\u0627\u062a\u06cc \u0645\u0633\u0627\u0626\u0644<\/p>\n                    <\/div>\n\n                <\/div>\n\n                <div class=\"tn-issues-brand-line\" aria-hidden=\"true\">\n                    <span class=\"tn-issues-blue-line\"><\/span>\n                    <span class=\"tn-issues-orange-line\"><\/span>\n                <\/div>\n\n            <\/header>\n\n\n            <div class=\"tn-issues-list\">\n                <div class=\"tn-issues-loading\">\n                    \u062e\u0628\u0631\u06cc\u06ba \u0644\u0648\u0688 \u06c1\u0648 \u0631\u06c1\u06cc \u06c1\u06cc\u06ba&#8230;\n                <\/div>\n            <\/div>\n\n\n            <a\n                class=\"tn-issues-more\"\n                href=\"https:\/\/taleemnama.pk\/urdu\/category\/students-problems\/\"\n            >\n                \u0637\u0644\u0628\u06c1 \u06a9\u06d2 \u0645\u0633\u0627\u0626\u0644 \u06a9\u06cc \u0645\u0632\u06cc\u062f \u062e\u0628\u0631\u06cc\u06ba\n                <span>\u2190<\/span>\n            <\/a>\n\n        <\/section>\n\n    <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =========================================================\n   BASE\n========================================================= *\/\n\n.tn-issues-wrap,\n.tn-issues-wrap *{\n    box-sizing:border-box;\n}\n\n.tn-issues-wrap{\n\n    --tn-blue:#1A237E;\n    --tn-dark:#0A2C64;\n    --tn-orange:#FF6F00;\n    --tn-text:#172033;\n    --tn-muted:#667085;\n    --tn-border:#E2E6ED;\n\n    width:100%;\n    max-width:1290px;\n\n    margin:0 auto;\n\n    font-family:inherit;\n}\n\n\n\/* =========================================================\n   TWO COLUMNS\n========================================================= *\/\n\n.tn-issues-grid{\n\n    display:grid;\n\n    grid-template-columns:\n        repeat(2,minmax(0,1fr));\n\n    gap:24px;\n\n    align-items:stretch;\n}\n\n\n\/* =========================================================\n   COLUMN\n========================================================= *\/\n\n.tn-issues-column{\n\n    min-width:0;\n\n    display:flex;\n    flex-direction:column;\n\n    background:#fff;\n\n    border:1px solid var(--tn-border);\n\n    border-radius:13px;\n\n    overflow:hidden;\n\n    box-shadow:\n        0 5px 18px\n        rgba(26,35,126,.055);\n}\n\n\n\/* =========================================================\n   HEADER\n========================================================= *\/\n\n.tn-issues-head{\n    background:#fff;\n}\n\n.tn-issues-title-row{\n\n    min-height:84px;\n\n    display:flex;\n    align-items:center;\n\n    gap:12px;\n\n    padding:\n        12px\n        17px\n        10px;\n}\n\n\n\/* ICON *\/\n\n.tn-issues-icon{\n\n    flex:0 0 auto;\n\n    width:58px;\n    height:58px;\n\n    display:flex;\n    align-items:center;\n    justify-content:center;\n\n    border-radius:15px;\n\n    background:\n        linear-gradient(\n            135deg,\n            #EEF0FF,\n            #FFF1E7\n        );\n\n    box-shadow:\n        0 4px 12px\n        rgba(26,35,126,.07);\n}\n\n.tn-issues-icon svg{\n\n    width:47px;\n    height:47px;\n\n    display:block;\n}\n\n\n\/* TITLE *\/\n\n.tn-issues-title-row h2{\n\n    margin:0 0 2px!important;\n    padding:0!important;\n\n    color:var(--tn-blue)!important;\n\n    font-size:25px!important;\n    line-height:1.55!important;\n\n    font-weight:850!important;\n}\n\n\n\/* SUBTITLE *\/\n\n.tn-issues-title-row p{\n\n    margin:0!important;\n    padding:0 0 3px!important;\n\n    color:var(--tn-muted)!important;\n\n    font-size:13px!important;\n    line-height:1.75!important;\n\n    font-weight:500;\n}\n\n\n\/* =========================================================\n   BRAND LINE\n========================================================= *\/\n\n.tn-issues-brand-line{\n\n    display:flex;\n\n    width:100%;\n    height:4px;\n\n    overflow:hidden;\n}\n\n.tn-issues-blue-line{\n\n    width:115px;\n\n    background:var(--tn-blue);\n}\n\n.tn-issues-orange-line{\n\n    flex:1;\n\n    background:var(--tn-orange);\n}\n\n\n\/* =========================================================\n   NEWS LIST\n========================================================= *\/\n\n.tn-issues-list{\n\n    display:flex;\n\n    flex-direction:column;\n\n    flex:1;\n\n    padding:\n        4px\n        14px\n        0;\n\n    background:#fff;\n}\n\n\n\/* =========================================================\n   NEWS ITEM\n========================================================= *\/\n\n.tn-issues-item{\n\n    display:grid;\n\n    grid-template-columns:\n        105px\n        minmax(0,1fr);\n\n    gap:14px;\n\n    align-items:center;\n\n    min-width:0;\n\n    min-height:145px;\n\n    padding:\n        12px\n        0;\n\n    border-bottom:\n        1px solid #E8EBF0;\n\n    text-decoration:none!important;\n\n    color:inherit;\n\n    transition:\n        background .18s ease,\n        transform .18s ease;\n}\n\n\n.tn-issues-item:hover{\n\n    background:#FAFBFD;\n\n    transform:\n        translateX(-2px);\n}\n\n\n\/* =========================================================\n   MEDIA SLOT\n========================================================= *\/\n\n.tn-issues-media-slot{\n\n    position:relative;\n\n    width:105px;\n    height:94px;\n\n    flex:0 0 auto;\n\n    overflow:hidden;\n\n    border:\n        1px solid #D7DEE8;\n\n    border-radius:9px;\n\n    background:\n        linear-gradient(\n            135deg,\n            #EEF0FF,\n            #FFF2E8\n        );\n}\n\n\n\/* IMAGE *\/\n\n.tn-issues-thumb{\n\n    position:absolute;\n\n    inset:0;\n\n    display:block;\n\n    width:100%;\n    height:100%;\n\n    object-fit:cover;\n\n    background:#EEF2F6;\n}\n\n\n\/* =========================================================\n   PLACEHOLDER\n========================================================= *\/\n\n.tn-issues-placeholder{\n\n    position:absolute;\n\n    inset:0;\n\n    display:flex;\n\n    flex-direction:column;\n\n    align-items:center;\n    justify-content:center;\n\n    gap:4px;\n\n    background:\n\n        radial-gradient(\n            circle at 30% 20%,\n            rgba(255,111,0,.14),\n            transparent 45%\n        ),\n\n        linear-gradient(\n            135deg,\n            #EEF0FF,\n            #FFF2E8\n        );\n}\n\n\n.tn-issues-placeholder span{\n\n    width:43px;\n    height:43px;\n\n    display:grid;\n\n    place-items:center;\n\n    border-radius:50%;\n\n    background:\n        var(--tn-blue);\n\n    color:#fff;\n\n    font-family:\n        Arial,sans-serif;\n\n    font-size:12px;\n\n    font-weight:900;\n\n    border-bottom:\n        3px solid\n        var(--tn-orange);\n}\n\n\n.tn-issues-placeholder small{\n\n    color:\n        var(--tn-blue);\n\n    font-size:8px;\n\n    font-weight:700;\n}\n\n\n\/* =========================================================\n   TEXT AREA\n========================================================= *\/\n\n.tn-issues-copy{\n\n    min-width:0;\n\n    display:flex;\n\n    flex-direction:column;\n\n    justify-content:center;\n}\n\n\n\/* HEADLINE *\/\n\n.tn-issues-title{\n\n    margin:0 0 4px!important;\n\n    padding:\n        1px 0\n        4px!important;\n\n    color:\n        var(--tn-text)!important;\n\n    font-size:18px!important;\n\n    line-height:1.8!important;\n\n    font-weight:800!important;\n\n    display:-webkit-box;\n\n    -webkit-box-orient:vertical;\n\n    -webkit-line-clamp:2;\n\n    overflow:hidden;\n}\n\n\n.tn-issues-item:hover\n.tn-issues-title{\n\n    color:\n        var(--tn-blue)!important;\n}\n\n\n\/* =========================================================\n   TWO-LINE DESCRIPTION\n========================================================= *\/\n\n.tn-issues-excerpt{\n\n    margin:0 0 5px!important;\n\n    padding:0!important;\n\n    color:\n        var(--tn-muted)!important;\n\n    font-size:13px!important;\n\n    line-height:1.85!important;\n\n    font-weight:500!important;\n\n    display:-webkit-box;\n\n    -webkit-box-orient:vertical;\n\n    -webkit-line-clamp:2;\n\n    overflow:hidden;\n}\n\n\n\/* =========================================================\n   READ MORE\n========================================================= *\/\n\n.tn-issues-read{\n\n    display:inline-flex;\n\n    align-items:center;\n\n    gap:5px;\n\n    width:max-content;\n\n    margin-top:2px;\n\n    color:\n        var(--tn-orange);\n\n    font-size:12.5px;\n\n    line-height:1.7;\n\n    font-weight:800;\n}\n\n\n.tn-issues-read span{\n\n    font-family:\n        Arial,sans-serif;\n\n    font-size:16px;\n\n    color:\n        var(--tn-blue);\n}\n\n\n\/* =========================================================\n   CATEGORY MORE\n========================================================= *\/\n\n.tn-issues-more{\n\n    display:flex;\n\n    align-items:center;\n    justify-content:space-between;\n\n    gap:8px;\n\n    min-height:47px;\n\n    margin:\n        5px\n        14px\n        13px;\n\n    padding:\n        7px\n        12px\n        8px;\n\n    border-radius:7px;\n\n    background:#F5F6FC;\n\n    color:\n        var(--tn-blue)!important;\n\n    text-decoration:none!important;\n\n    font-size:14px;\n    line-height:1.7;\n\n    font-weight:800;\n\n    transition:\n        background .18s ease,\n        color .18s ease;\n}\n\n\n.tn-issues-more span{\n\n    color:\n        var(--tn-orange);\n\n    font-family:\n        Arial,sans-serif;\n\n    font-size:19px;\n}\n\n\n.tn-issues-more:hover{\n\n    background:#FFF1E7;\n\n    color:\n        var(--tn-orange)!important;\n}\n\n\n\/* =========================================================\n   LOADER\n========================================================= *\/\n\n.tn-issues-loading{\n\n    min-height:180px;\n\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    padding:20px;\n\n    text-align:center;\n\n    color:\n        var(--tn-blue);\n\n    font-size:13px;\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media(max-width:900px){\n\n    .tn-issues-grid{\n\n        grid-template-columns:1fr;\n\n        gap:20px;\n    }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media(max-width:650px){\n\n    .tn-issues-column{\n        border-radius:10px;\n    }\n\n\n    .tn-issues-title-row{\n\n        min-height:75px;\n\n        gap:9px;\n\n        padding:\n            9px\n            12px\n            8px;\n    }\n\n\n    .tn-issues-icon{\n\n        width:50px;\n        height:50px;\n\n        border-radius:12px;\n    }\n\n\n    .tn-issues-icon svg{\n\n        width:40px;\n        height:40px;\n    }\n\n\n    .tn-issues-title-row h2{\n\n        font-size:21px!important;\n\n        line-height:1.6!important;\n    }\n\n\n    .tn-issues-title-row p{\n\n        font-size:11.5px!important;\n\n        line-height:1.75!important;\n    }\n\n\n    .tn-issues-brand-line{\n\n        height:3px;\n    }\n\n\n    .tn-issues-blue-line{\n\n        width:90px;\n    }\n\n\n    .tn-issues-list{\n\n        padding:\n            2px\n            11px\n            0;\n    }\n\n\n    \/* MOBILE CARD *\/\n\n    .tn-issues-item{\n\n        grid-template-columns:\n            92px\n            minmax(0,1fr);\n\n        gap:10px;\n\n        min-height:138px;\n\n        padding:\n            10px\n            0;\n    }\n\n\n    .tn-issues-media-slot{\n\n        width:92px;\n        height:88px;\n    }\n\n\n    .tn-issues-title{\n\n        font-size:16px!important;\n\n        line-height:1.8!important;\n    }\n\n\n    .tn-issues-excerpt{\n\n        font-size:12px!important;\n\n        line-height:1.75!important;\n\n        -webkit-line-clamp:2;\n    }\n\n\n    .tn-issues-read{\n\n        font-size:11.5px;\n    }\n\n\n    .tn-issues-more{\n\n        margin:\n            3px\n            11px\n            11px;\n\n        font-size:13.5px;\n    }\n\n}\n\n\n\/* =========================================================\n   VERY SMALL PHONE\n========================================================= *\/\n\n@media(max-width:380px){\n\n    .tn-issues-title-row h2{\n\n        font-size:19px!important;\n    }\n\n\n    .tn-issues-title-row p{\n\n        display:none;\n    }\n\n\n    .tn-issues-item{\n\n        grid-template-columns:\n            82px\n            minmax(0,1fr);\n\n        min-height:132px;\n    }\n\n\n    .tn-issues-media-slot{\n\n        width:82px;\n        height:78px;\n    }\n\n\n    .tn-issues-title{\n\n        font-size:15px!important;\n    }\n\n\n    .tn-issues-excerpt{\n\n        font-size:11.5px!important;\n    }\n\n}\n\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n.tn-issues-item:focus-visible,\n.tn-issues-more:focus-visible{\n\n    outline:\n        3px solid\n        var(--tn-orange);\n\n    outline-offset:2px;\n}\n\n<\/style>\n\n\n<script>\n\n(function(){\n\nconst BASE =\n    \"https:\/\/taleemnama.pk\/urdu\";\n\n\nconst POSTS_PER_CATEGORY =\n    5;\n\n\nconst root =\n    document.querySelector(\n        \".tn-issues-wrap\"\n    );\n\n\nif(!root){\n    return;\n}\n\n\nconst columns =\n    root.querySelectorAll(\n        \".tn-issues-column\"\n    );\n\n\nif(!columns.length){\n    return;\n}\n\n\n\/* =========================================================\n   DECODE TITLE\n========================================================= *\/\n\nfunction decodeHTML(value){\n\n    const box =\n        document.createElement(\n            \"textarea\"\n        );\n\n\n    box.innerHTML =\n        value || \"\";\n\n\n    return box.value;\n}\n\n\n\/* =========================================================\n   STRIP HTML FROM EXCERPT\n========================================================= *\/\n\nfunction stripHTML(value){\n\n    const box =\n        document.createElement(\n            \"div\"\n        );\n\n\n    box.innerHTML =\n        value || \"\";\n\n\n    return (\n        box.textContent ||\n        box.innerText ||\n        \"\"\n    ).trim();\n}\n\n\n\/* =========================================================\n   CATEGORY ID\n========================================================= *\/\n\nasync function getCategoryId(slug){\n\n    const response =\n\n        await fetch(\n\n            BASE +\n\n            \"\/wp-json\/wp\/v2\/categories\" +\n\n            \"?slug=\" +\n\n            encodeURIComponent(slug),\n\n            {\n                credentials:\n                    \"same-origin\"\n            }\n\n        );\n\n\n    if(!response.ok){\n\n        throw new Error(\n            \"Category request failed\"\n        );\n    }\n\n\n    const categories =\n        await response.json();\n\n\n    if(!categories.length){\n\n        throw new Error(\n            \"Category not found: \" +\n            slug\n        );\n    }\n\n\n    return categories[0].id;\n}\n\n\n\/* =========================================================\n   GET POSTS\n========================================================= *\/\n\nasync function getPosts(slug){\n\n    const categoryId =\n        await getCategoryId(\n            slug\n        );\n\n\n    const endpoint =\n\n        BASE +\n\n        \"\/wp-json\/wp\/v2\/posts\" +\n\n        \"?categories=\" +\n\n        categoryId +\n\n        \"&per_page=\" +\n\n        POSTS_PER_CATEGORY +\n\n        \"&orderby=date\" +\n\n        \"&order=desc\" +\n\n        \"&_embed=1\";\n\n\n    const response =\n\n        await fetch(\n\n            endpoint,\n\n            {\n                credentials:\n                    \"same-origin\"\n            }\n\n        );\n\n\n    if(!response.ok){\n\n        throw new Error(\n            \"Posts request failed\"\n        );\n    }\n\n\n    return await response.json();\n}\n\n\n\/* =========================================================\n   GET THUMB\n========================================================= *\/\n\nfunction getThumbnail(post){\n\n    try{\n\n        const embedded =\n            post\n            ._embedded\n            ?.[\"wp:featuredmedia\"];\n\n\n        const media =\n\n            Array.isArray(embedded)\n            ? embedded[0]\n            : null;\n\n\n        if(!media){\n\n            return \"\";\n        }\n\n\n        return (\n\n            media\n            .media_details\n            ?.sizes\n            ?.thumbnail\n            ?.source_url\n\n            ||\n\n            media\n            .media_details\n            ?.sizes\n            ?.medium\n            ?.source_url\n\n            ||\n\n            media\n            .source_url\n\n            ||\n\n            \"\"\n\n        );\n\n    }\n\n    catch(error){\n\n        return \"\";\n    }\n}\n\n\n\/* =========================================================\n   PLACEHOLDER\n========================================================= *\/\n\nfunction createPlaceholder(){\n\n    const placeholder =\n        document.createElement(\n            \"div\"\n        );\n\n\n    placeholder.className =\n        \"tn-issues-placeholder\";\n\n\n    const mark =\n        document.createElement(\n            \"span\"\n        );\n\n\n    mark.textContent =\n        \"TN\";\n\n\n    const label =\n        document.createElement(\n            \"small\"\n        );\n\n\n    label.textContent =\n        \"\u062a\u0639\u0644\u06cc\u0645 \u0646\u0627\u0645\u06c1\";\n\n\n    placeholder.append(\n        mark,\n        label\n    );\n\n\n    return placeholder;\n}\n\n\n\/* =========================================================\n   MEDIA\n========================================================= *\/\n\nfunction createMediaSlot(post,title){\n\n    const slot =\n        document.createElement(\n            \"div\"\n        );\n\n\n    slot.className =\n        \"tn-issues-media-slot\";\n\n\n    const thumb =\n        getThumbnail(post);\n\n\n    if(thumb){\n\n        const image =\n            document.createElement(\n                \"img\"\n            );\n\n\n        image.className =\n            \"tn-issues-thumb\";\n\n\n        image.src =\n            thumb;\n\n\n        image.alt =\n            title;\n\n\n        image.loading =\n            \"lazy\";\n\n\n        image.decoding =\n            \"async\";\n\n\n        image.addEventListener(\n\n            \"error\",\n\n            function(){\n\n                slot.replaceChildren(\n                    createPlaceholder()\n                );\n\n            },\n\n            {\n                once:true\n            }\n\n        );\n\n\n        slot.appendChild(\n            image\n        );\n\n    }\n\n    else{\n\n        slot.appendChild(\n            createPlaceholder()\n        );\n\n    }\n\n\n    return slot;\n}\n\n\n\/* =========================================================\n   NEWS CARD\n========================================================= *\/\n\nfunction createNewsItem(post){\n\n    const title =\n        decodeHTML(\n            post.title?.rendered\n        );\n\n\n    const excerpt =\n        stripHTML(\n            post.excerpt?.rendered\n        );\n\n\n    const item =\n        document.createElement(\n            \"a\"\n        );\n\n\n    item.className =\n        \"tn-issues-item\";\n\n\n    item.href =\n        post.link;\n\n\n    \/* IMAGE *\/\n\n    item.appendChild(\n\n        createMediaSlot(\n            post,\n            title\n        )\n\n    );\n\n\n    \/* COPY *\/\n\n    const copy =\n        document.createElement(\n            \"div\"\n        );\n\n\n    copy.className =\n        \"tn-issues-copy\";\n\n\n    \/* TITLE *\/\n\n    const heading =\n        document.createElement(\n            \"h3\"\n        );\n\n\n    heading.className =\n        \"tn-issues-title\";\n\n\n    heading.textContent =\n        title;\n\n\n    copy.appendChild(\n        heading\n    );\n\n\n    \/* DESCRIPTION *\/\n\n    if(excerpt){\n\n        const description =\n            document.createElement(\n                \"p\"\n            );\n\n\n        description.className =\n            \"tn-issues-excerpt\";\n\n\n        description.textContent =\n            excerpt;\n\n\n        copy.appendChild(\n            description\n        );\n\n    }\n\n\n    \/* READ MORE *\/\n\n    const read =\n        document.createElement(\n            \"span\"\n        );\n\n\n    read.className =\n        \"tn-issues-read\";\n\n\n    read.innerHTML =\n        '\u0645\u0632\u06cc\u062f \u067e\u0691\u06be\u06cc\u06d2 <span>\u2190<\/span>';\n\n\n    copy.appendChild(\n        read\n    );\n\n\n    item.appendChild(\n        copy\n    );\n\n\n    return item;\n}\n\n\n\/* =========================================================\n   LOAD COLUMN\n========================================================= *\/\n\nasync function loadColumn(column){\n\n    const slug =\n        column.dataset.categorySlug;\n\n\n    const list =\n        column.querySelector(\n            \".tn-issues-list\"\n        );\n\n\n    if(\n        !slug ||\n        !list\n    ){\n\n        return;\n    }\n\n\n    try{\n\n        const posts =\n            await getPosts(\n                slug\n            );\n\n\n        if(!posts.length){\n\n            list.innerHTML =\n                '<div class=\"tn-issues-loading\">\u0627\u0633 \u06a9\u06cc\u0679\u06af\u0631\u06cc \u0645\u06cc\u06ba \u0641\u06cc \u0627\u0644\u062d\u0627\u0644 \u06a9\u0648\u0626\u06cc \u062e\u0628\u0631 \u0645\u0648\u062c\u0648\u062f \u0646\u06c1\u06cc\u06ba\u06d4<\/div>';\n\n            return;\n        }\n\n\n        const fragment =\n            document.createDocumentFragment();\n\n\n        posts.forEach(\n\n            function(post){\n\n                fragment.appendChild(\n\n                    createNewsItem(\n                        post\n                    )\n\n                );\n\n            }\n\n        );\n\n\n        list.replaceChildren(\n            fragment\n        );\n\n    }\n\n    catch(error){\n\n        console.error(\n            error\n        );\n\n\n        list.innerHTML =\n            '<div class=\"tn-issues-loading\">\u062e\u0628\u0631\u06cc\u06ba \u0644\u0648\u0688 \u0646\u06c1\u06cc\u06ba \u06c1\u0648 \u0633\u06a9\u06cc\u06ba\u06d4<\/div>';\n\n    }\n\n}\n\n\n\/* =========================================================\n   LOAD BOTH\n========================================================= *\/\n\ncolumns.forEach(\n\n    function(column){\n\n        loadColumn(\n            column\n        );\n\n    }\n\n);\n\n\n})();\n\n<\/script>\n\n\n\n<!-- =========================================================\n TALEEM NAMA URDU\n ROSHAN SITARAY \/ SHINING STARS\n 8 POSTS - 4 CARDS PER VIEW\n LIGHTWEIGHT HORIZONTAL SCROLL SECTION\n========================================================= -->\n\n<section class=\"tnstars-wrap\" dir=\"rtl\" aria-labelledby=\"tnstars-title\">\n\n    <!-- =========================\n         BRANDED HEADER\n    ========================== -->\n    <header class=\"tnstars-header\">\n\n        <div class=\"tnstars-title-row\">\n\n            <span class=\"tnstars-main-icon\" aria-hidden=\"true\">\n                <svg viewBox=\"0 0 64 64\">\n                    <path d=\"M32 6 39 22 57 24 44 36 48 54 32 45 16 54 20 36 7 24 25 22 32 6Z\" fill=\"#FFB300\"><\/path>\n                    <circle cx=\"32\" cy=\"31\" r=\"11\" fill=\"#FF6F00\"><\/circle>\n                    <path d=\"m27 31 4 4 7-9\" fill=\"none\" stroke=\"#fff\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n                <\/svg>\n            <\/span>\n\n            <div>\n                <h2 id=\"tnstars-title\">\u0631\u0648\u0634\u0646 \u0633\u062a\u0627\u0631\u06d2<\/h2>\n                <p>\n                    \u0627\u0645\u062a\u062d\u0627\u0646\u0627\u062a\u060c \u0645\u0642\u0627\u0628\u0644\u0648\u06ba \u0627\u0648\u0631 \u062f\u06cc\u06af\u0631 \u0634\u0639\u0628\u0648\u06ba \u0645\u06cc\u06ba \u0646\u0645\u0627\u06cc\u0627\u06ba \u06a9\u0627\u0645\u06cc\u0627\u0628\u06cc \u062d\u0627\u0635\u0644 \u06a9\u0631\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0637\u0644\u0628\u06c1\n                <\/p>\n            <\/div>\n\n        <\/div>\n\n    <\/header>\n\n\n    <!-- BRAND LINE -->\n    <div class=\"tnstars-brand-line\" aria-hidden=\"true\">\n        <span class=\"tnstars-blue-line\"><\/span>\n        <span class=\"tnstars-orange-line\"><\/span>\n    <\/div>\n\n\n    <!-- =========================\n         SCROLLER\n    ========================== -->\n    <div class=\"tnstars-scroller-wrap\">\n\n        <button\n            class=\"tnstars-nav tnstars-prev\"\n            type=\"button\"\n            aria-label=\"\u067e\u0686\u06be\u0644\u06cc \u062e\u0628\u0631\u06cc\u06ba\"\n        >\n            \u203a\n        <\/button>\n\n        <div\n            class=\"tnstars-scroller\"\n            id=\"tnstars-scroller\"\n        >\n\n            <div class=\"tnstars-loading\">\n                \u0631\u0648\u0634\u0646 \u0633\u062a\u0627\u0631\u06d2 \u0644\u0648\u0688 \u06c1\u0648 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba&#8230;\n            <\/div>\n\n        <\/div>\n\n        <button\n            class=\"tnstars-nav tnstars-next\"\n            type=\"button\"\n            aria-label=\"\u0627\u06af\u0644\u06cc \u062e\u0628\u0631\u06cc\u06ba\"\n        >\n            \u2039\n        <\/button>\n\n    <\/div>\n\n\n    <!-- FOOTER LINK -->\n    <div class=\"tnstars-footer\">\n\n        <a href=\"https:\/\/taleemnama.pk\/urdu\/category\/shining-stars\/\">\n            \u062a\u0645\u0627\u0645 \u0631\u0648\u0634\u0646 \u0633\u062a\u0627\u0631\u06d2 \u062f\u06cc\u06a9\u06be\u06cc\u06ba\n            <span>\u2190<\/span>\n        <\/a>\n\n    <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =========================================================\n   BASE\n========================================================= *\/\n\n.tnstars-wrap,\n.tnstars-wrap *{\n    box-sizing:border-box;\n}\n\n.tnstars-wrap{\n\n    --blue:#1A237E;\n    --dark:#0A2C64;\n    --orange:#FF6F00;\n    --orange-dark:#E85D00;\n\n    width:100%;\n    max-width:1290px;\n\n    margin:0 auto;\n\n    background:#fff;\n\n    border:1px solid #E2E6ED;\n    border-radius:14px;\n\n    overflow:hidden;\n\n    box-shadow:\n        0 6px 22px rgba(26,35,126,.065);\n\n    font-family:inherit;\n}\n\n\n\/* =========================================================\n   HEADER\n========================================================= *\/\n\n.tnstars-header{\n\n    padding:\n        13px\n        20px\n        11px;\n\n    background:\n        linear-gradient(\n            250deg,\n            #FFFFFF 0%,\n            #F7F8FF 68%,\n            #FFF7EF 100%\n        );\n}\n\n\n.tnstars-title-row{\n\n    display:flex;\n\n    align-items:center;\n\n    gap:13px;\n}\n\n\n.tnstars-main-icon{\n\n    flex:0 0 auto;\n\n    width:58px;\n    height:58px;\n\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    border-radius:16px;\n\n    background:\n        linear-gradient(\n            135deg,\n            #FFF5D9,\n            #FFF0E5\n        );\n\n    box-shadow:\n        0 4px 12px rgba(26,35,126,.07);\n}\n\n\n.tnstars-main-icon svg{\n\n    width:47px;\n    height:47px;\n}\n\n\n.tnstars-header h2{\n\n    margin:0 0 2px!important;\n    padding:0!important;\n\n    color:\n        var(--blue)!important;\n\n    font-size:29px!important;\n    line-height:1.55!important;\n\n    font-weight:850!important;\n}\n\n\n.tnstars-header p{\n\n    margin:0!important;\n    padding:0 0 3px!important;\n\n    color:#667085!important;\n\n    font-size:13.5px!important;\n    line-height:1.8!important;\n\n    font-weight:500;\n}\n\n\n\/* =========================================================\n   BRAND LINE\n========================================================= *\/\n\n.tnstars-brand-line{\n\n    display:flex;\n\n    width:100%;\n    height:4px;\n}\n\n\n.tnstars-blue-line{\n\n    width:130px;\n\n    background:\n        var(--blue);\n}\n\n\n.tnstars-orange-line{\n\n    flex:1;\n\n    background:\n        var(--orange);\n}\n\n\n\/* =========================================================\n   SCROLLER WRAPPER\n========================================================= *\/\n\n.tnstars-scroller-wrap{\n\n    position:relative;\n\n    padding:\n        18px\n        42px\n        10px;\n\n    background:#F7F8FB;\n}\n\n\n\/* =========================================================\n   HORIZONTAL SCROLLER\n========================================================= *\/\n\n.tnstars-scroller{\n\n    display:grid;\n\n    grid-auto-flow:column;\n\n    grid-auto-columns:\n        calc((100% - 42px) \/ 4);\n\n    gap:14px;\n\n    overflow-x:auto;\n\n    overflow-y:hidden;\n\n    scroll-snap-type:x mandatory;\n\n    scroll-behavior:smooth;\n\n    scrollbar-width:none;\n\n    padding-bottom:2px;\n}\n\n\n.tnstars-scroller::-webkit-scrollbar{\n    display:none;\n}\n\n\n\/* =========================================================\n   CARD\n========================================================= *\/\n\n.tnstars-card{\n\n    scroll-snap-align:start;\n\n    min-width:0;\n\n    background:#fff;\n\n    border:1px solid #E1E5EC;\n    border-radius:13px;\n\n    overflow:hidden;\n\n    text-decoration:none!important;\n\n    box-shadow:\n        0 4px 13px rgba(26,35,126,.05);\n\n    transition:\n        transform .2s ease,\n        box-shadow .2s ease;\n}\n\n\n.tnstars-card:hover{\n\n    transform:\n        translateY(-4px);\n\n    box-shadow:\n        0 10px 24px rgba(26,35,126,.11);\n}\n\n\n\/* =========================================================\n   IMAGE\n========================================================= *\/\n\n.tnstars-image-wrap{\n\n    position:relative;\n\n    width:100%;\n\n    aspect-ratio:16 \/ 9;\n\n    overflow:hidden;\n\n    background:#EEF2F6;\n\n    border-bottom:\n        3px solid var(--orange);\n}\n\n\n.tnstars-image{\n\n    width:100%;\n    height:100%;\n\n    display:block;\n\n    object-fit:cover;\n}\n\n\n\/* SMALL BADGE *\/\n\n.tnstars-badge{\n\n    position:absolute;\n\n    top:10px;\n    right:10px;\n\n    padding:\n        4px\n        8px;\n\n    border-radius:6px;\n\n    background:\n        rgba(26,35,126,.90);\n\n    color:#fff;\n\n    font-size:10px;\n\n    font-weight:700;\n}\n\n\n\/* =========================================================\n   TEXT\n========================================================= *\/\n\n.tnstars-card-content{\n\n    min-height:105px;\n\n    display:flex;\n\n    align-items:center;\n\n    padding:\n        11px\n        13px\n        13px;\n}\n\n\n.tnstars-title{\n\n    margin:0!important;\n\n    padding:\n        1px 0\n        5px!important;\n\n    color:#172033!important;\n\n    font-size:17px!important;\n\n    line-height:1.95!important;\n\n    font-weight:700!important;\n\n    display:-webkit-box;\n\n    -webkit-box-orient:vertical;\n\n    -webkit-line-clamp:3;\n\n    overflow:hidden;\n}\n\n\n.tnstars-card:hover\n.tnstars-title{\n\n    color:\n        var(--blue)!important;\n}\n\n\n\/* =========================================================\n   NAVIGATION BUTTONS\n========================================================= *\/\n\n.tnstars-nav{\n\n    position:absolute;\n\n    z-index:10;\n\n    top:50%;\n\n    transform:\n        translateY(-50%);\n\n    width:42px;\n    height:42px;\n\n    display:grid;\n\n    place-items:center;\n\n    padding:0;\n\n    border:0;\n\n    border-radius:50%;\n\n    cursor:pointer;\n\n    background:\n        var(--blue);\n\n    color:#fff;\n\n    font-family:\n        Arial,sans-serif;\n\n    font-size:26px;\n\n    box-shadow:\n        0 4px 12px rgba(26,35,126,.2);\n\n    transition:\n        background .18s ease,\n        transform .18s ease;\n}\n\n\n.tnstars-nav:hover{\n\n    background:\n        var(--orange);\n\n    transform:\n        translateY(-50%)\n        scale(1.05);\n}\n\n\n.tnstars-prev{\n\n    right:8px;\n}\n\n\n.tnstars-next{\n\n    left:8px;\n}\n\n\n\/* =========================================================\n   FOOTER\n========================================================= *\/\n\n.tnstars-footer{\n\n    display:flex;\n\n    justify-content:flex-start;\n\n    padding:\n        7px\n        18px\n        13px;\n\n    background:#F7F8FB;\n}\n\n\n.tnstars-footer a{\n\n    display:inline-flex;\n\n    align-items:center;\n\n    gap:7px;\n\n    color:\n        var(--blue)!important;\n\n    text-decoration:none!important;\n\n    font-size:14px;\n\n    line-height:1.7;\n\n    font-weight:800;\n}\n\n\n.tnstars-footer a span{\n\n    color:\n        var(--orange);\n\n    font-family:\n        Arial,sans-serif;\n\n    font-size:19px;\n}\n\n\n.tnstars-footer a:hover{\n\n    color:\n        var(--orange)!important;\n}\n\n\n\/* =========================================================\n   LOADER\n========================================================= *\/\n\n.tnstars-loading{\n\n    grid-column:1 \/ -1;\n\n    min-height:220px;\n\n    display:flex;\n\n    align-items:center;\n\n    justify-content:center;\n\n    color:\n        var(--blue);\n\n    font-size:13px;\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media(max-width:1000px){\n\n    .tnstars-scroller{\n\n        grid-auto-columns:\n            calc((100% - 14px) \/ 2);\n    }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media(max-width:650px){\n\n    .tnstars-wrap{\n\n        border-radius:10px;\n    }\n\n\n    .tnstars-header{\n\n        padding:\n            10px\n            12px\n            8px;\n    }\n\n\n    .tnstars-title-row{\n\n        gap:9px;\n    }\n\n\n    .tnstars-main-icon{\n\n        width:49px;\n        height:49px;\n\n        border-radius:12px;\n    }\n\n\n    .tnstars-main-icon svg{\n\n        width:39px;\n        height:39px;\n    }\n\n\n    .tnstars-header h2{\n\n        font-size:22px!important;\n\n        line-height:1.6!important;\n    }\n\n\n    .tnstars-header p{\n\n        font-size:11px!important;\n\n        line-height:1.7!important;\n    }\n\n\n    .tnstars-blue-line{\n\n        width:90px;\n    }\n\n\n    .tnstars-scroller-wrap{\n\n        padding:\n            12px\n            13px\n            9px;\n    }\n\n\n    \/*\n      1 full card + part of next card\n      signals swipe naturally\n    *\/\n\n    .tnstars-scroller{\n\n        grid-auto-columns:\n            82%;\n\n        gap:10px;\n\n        padding-left:28px;\n    }\n\n\n    .tnstars-card-content{\n\n        min-height:95px;\n\n        padding:\n            9px\n            11px\n            11px;\n    }\n\n\n    .tnstars-title{\n\n        font-size:15.5px!important;\n\n        line-height:1.9!important;\n    }\n\n\n    .tnstars-nav{\n\n        width:34px;\n        height:34px;\n\n        font-size:21px;\n\n        opacity:.92;\n    }\n\n\n    .tnstars-prev{\n\n        right:5px;\n    }\n\n\n    .tnstars-next{\n\n        left:5px;\n    }\n\n\n    .tnstars-footer{\n\n        padding:\n            5px\n            12px\n            10px;\n    }\n\n\n    .tnstars-footer a{\n\n        font-size:13px;\n    }\n\n}\n\n\n\/* =========================================================\n   VERY SMALL PHONES\n========================================================= *\/\n\n@media(max-width:380px){\n\n    .tnstars-header p{\n        display:none;\n    }\n\n\n    .tnstars-header h2{\n\n        font-size:20px!important;\n    }\n\n\n    .tnstars-scroller{\n\n        grid-auto-columns:\n            86%;\n    }\n\n\n    .tnstars-title{\n\n        font-size:14.5px!important;\n    }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media(prefers-reduced-motion:reduce){\n\n    .tnstars-card,\n    .tnstars-nav,\n    .tnstars-scroller{\n\n        transition:none!important;\n        scroll-behavior:auto!important;\n    }\n\n}\n\n<\/style>\n\n\n<script>\n\n(function(){\n\nconst BASE =\n    \"https:\/\/taleemnama.pk\/urdu\";\n\n\nconst CATEGORY_SLUG =\n    \"shining-stars\";\n\n\n\/*\n8 latest Shining Stars posts\n*\/\n\nconst POSTS_LIMIT =\n    8;\n\n\nconst scroller =\n    document.getElementById(\n        \"tnstars-scroller\"\n    );\n\n\nconst prev =\n    document.querySelector(\n        \".tnstars-prev\"\n    );\n\n\nconst next =\n    document.querySelector(\n        \".tnstars-next\"\n    );\n\n\nif(!scroller){\n    return;\n}\n\n\n\/* =====================================================\n   HTML DECODER\n===================================================== *\/\n\nfunction decodeHTML(value){\n\n    const box =\n        document.createElement(\n            \"textarea\"\n        );\n\n    box.innerHTML =\n        value || \"\";\n\n    return box.value;\n}\n\n\n\/* =====================================================\n   CATEGORY ID\n===================================================== *\/\n\nasync function getCategoryId(){\n\n    const response =\n\n        await fetch(\n\n            BASE +\n\n            \"\/wp-json\/wp\/v2\/categories\" +\n\n            \"?slug=\" +\n\n            encodeURIComponent(\n                CATEGORY_SLUG\n            ),\n\n            {\n                credentials:\n                    \"same-origin\"\n            }\n\n        );\n\n\n    if(!response.ok){\n\n        throw new Error(\n            \"Category request failed\"\n        );\n    }\n\n\n    const data =\n        await response.json();\n\n\n    if(!data.length){\n\n        throw new Error(\n            \"Shining Stars category not found\"\n        );\n    }\n\n\n    return data[0].id;\n}\n\n\n\/* =====================================================\n   IMAGE\n===================================================== *\/\n\nfunction getImage(post){\n\n    try{\n\n        const media =\n\n            post\n            ._embedded[\n                \"wp:featuredmedia\"\n            ][0];\n\n\n        return (\n\n            media\n            .media_details\n            ?.sizes\n            ?.medium_large\n            ?.source_url\n\n            ||\n\n            media\n            .media_details\n            ?.sizes\n            ?.medium\n            ?.source_url\n\n            ||\n\n            media\n            .source_url\n\n            ||\n\n            \"\"\n\n        );\n\n    }\n\n    catch(error){\n\n        return \"\";\n    }\n}\n\n\n\/* =====================================================\n   CREATE CARD\n===================================================== *\/\n\nfunction createCard(post){\n\n    const title =\n\n        decodeHTML(\n            post.title.rendered\n        );\n\n\n    const card =\n\n        document.createElement(\n            \"a\"\n        );\n\n\n    card.className =\n        \"tnstars-card\";\n\n\n    card.href =\n        post.link;\n\n\n    \/* IMAGE WRAP *\/\n\n    const imageWrap =\n\n        document.createElement(\n            \"div\"\n        );\n\n\n    imageWrap.className =\n        \"tnstars-image-wrap\";\n\n\n    const imageURL =\n        getImage(post);\n\n\n    if(imageURL){\n\n        const image =\n\n            document.createElement(\n                \"img\"\n            );\n\n\n        image.className =\n            \"tnstars-image\";\n\n\n        image.src =\n            imageURL;\n\n\n        image.alt =\n            title;\n\n\n        image.loading =\n            \"lazy\";\n\n\n        image.decoding =\n            \"async\";\n\n\n        image.width =\n            320;\n\n\n        image.height =\n            180;\n\n\n        imageWrap.appendChild(\n            image\n        );\n\n    }\n\n\n    const badge =\n\n        document.createElement(\n            \"span\"\n        );\n\n\n    badge.className =\n        \"tnstars-badge\";\n\n\n    badge.textContent =\n        \"\u0631\u0648\u0634\u0646 \u0633\u062a\u0627\u0631\u06c1\";\n\n\n    imageWrap.appendChild(\n        badge\n    );\n\n\n    card.appendChild(\n        imageWrap\n    );\n\n\n    \/* CONTENT *\/\n\n    const content =\n\n        document.createElement(\n            \"div\"\n        );\n\n\n    content.className =\n        \"tnstars-card-content\";\n\n\n    const heading =\n\n        document.createElement(\n            \"h3\"\n        );\n\n\n    heading.className =\n        \"tnstars-title\";\n\n\n    heading.textContent =\n        title;\n\n\n    content.appendChild(\n        heading\n    );\n\n\n    card.appendChild(\n        content\n    );\n\n\n    return card;\n}\n\n\n\/* =====================================================\n   LOAD POSTS\n===================================================== *\/\n\nasync function loadStars(){\n\n    try{\n\n        const categoryId =\n            await getCategoryId();\n\n\n        const response =\n\n            await fetch(\n\n                BASE +\n\n                \"\/wp-json\/wp\/v2\/posts\" +\n\n                \"?categories=\" +\n\n                categoryId +\n\n                \"&per_page=\" +\n\n                POSTS_LIMIT +\n\n                \"&orderby=date\" +\n\n                \"&order=desc\" +\n\n                \"&_embed=1\",\n\n                {\n                    credentials:\n                        \"same-origin\"\n                }\n\n            );\n\n\n        if(!response.ok){\n\n            throw new Error(\n                \"Posts request failed\"\n            );\n        }\n\n\n        const posts =\n            await response.json();\n\n\n        scroller.innerHTML =\n            \"\";\n\n\n        if(!posts.length){\n\n            scroller.innerHTML =\n\n                '<div class=\"tnstars-loading\">\u0641\u06cc \u0627\u0644\u062d\u0627\u0644 \u0631\u0648\u0634\u0646 \u0633\u062a\u0627\u0631\u0648\u06ba \u06a9\u06cc \u06a9\u0648\u0626\u06cc \u062e\u0628\u0631 \u0645\u0648\u062c\u0648\u062f \u0646\u06c1\u06cc\u06ba\u06d4<\/div>';\n\n\n            return;\n        }\n\n\n        posts.forEach(\n\n            post => {\n\n                scroller.appendChild(\n\n                    createCard(\n                        post\n                    )\n\n                );\n\n            }\n\n        );\n\n    }\n\n\n    catch(error){\n\n        console.error(\n            error\n        );\n\n\n        scroller.innerHTML =\n\n            '<div class=\"tnstars-loading\">\u0631\u0648\u0634\u0646 \u0633\u062a\u0627\u0631\u06d2 \u0644\u0648\u0688 \u0646\u06c1\u06cc\u06ba \u06c1\u0648 \u0633\u06a9\u06d2\u06d4<\/div>';\n\n    }\n\n}\n\n\n\/* =====================================================\n   SCROLL CONTROLS\n===================================================== *\/\n\nfunction scrollAmount(){\n\n    return Math.max(\n        250,\n        scroller.clientWidth * .94\n    );\n}\n\n\nif(prev){\n\n    prev.addEventListener(\n\n        \"click\",\n\n        function(){\n\n            scroller.scrollBy({\n                left:\n                    scrollAmount(),\n\n                behavior:\n                    \"smooth\"\n            });\n\n        }\n\n    );\n\n}\n\n\nif(next){\n\n    next.addEventListener(\n\n        \"click\",\n\n        function(){\n\n            scroller.scrollBy({\n                left:\n                    -scrollAmount(),\n\n                behavior:\n                    \"smooth\"\n            });\n\n        }\n\n    );\n\n}\n\n\n\/* =====================================================\n   START\n===================================================== *\/\n\nloadStars();\n\n\n})();\n\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u062a\u0627\u0632\u06c1 \u062a\u0631\u06cc\u0646 \u0648\u0641\u0627\u0642\u06cc \u062f\u0627\u0631\u0627\u0644\u062d\u06a9\u0648\u0645\u062a \u067e\u0646\u062c\u0627\u0628 \u0633\u0646\u062f\u06be \u062e\u06cc\u0628\u0631\u067e\u062e\u062a\u0648\u0646\u062e\u0648\u0627\u06c1 \u0628\u0644\u0648\u0686\u0633\u062a\u0627\u0646 \u0622\u0632\u0627\u062f \u06a9\u0634\u0645\u06cc\u0631 \u06af\u0644\u06af\u062a \u0628\u0644\u062a\u0633\u062a\u0627\u0646 \u062e\u0628\u0631\u06cc\u06ba \u0644\u0648\u0688 \u06c1\u0648 \u0631\u06c1\u06cc \u06c1\u06cc\u06ba&#8230; TN \u062a\u0639\u0644\u06cc\u0645 \u0646\u0627\u0645\u06c1 \u062a\u0639\u0644\u06cc\u0645 \u0646\u0627\u0645\u06c1 \u062a\u0627\u0632\u06c1 \u062a\u0631\u06cc\u0646 \u062a\u0627\u0632\u06c1 \u062a\u0631\u06cc\u0646 \u062a\u0639\u0644\u06cc\u0645\u06cc \u062e\u0628\u0631 \u0645\u06a9\u0645\u0644 \u062e\u0628\u0631 \u067e\u0691\u06be\u06cc\u06ba \u2190 \u2039 1 \/ 1 \u203a \u062a\u0645\u0627\u0645 \u062a\u0627\u0632\u06c1 \u062a\u0631\u06cc\u0646 \u062e\u0628\u0631\u06cc\u06ba \u062f\u06cc\u06a9\u06be\u06cc\u06ba \u2190 \ud83d\udd25 \u0627\u06c1\u0645 \u0645\u0648\u0636\u0648\u0639\u0627\u062a \u0627\u06c1\u0645 \u0645\u0648\u0636\u0648\u0639\u0627\u062a \u0644\u0648\u0688 \u06c1\u0648 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba&#8230; \u067e\u0627\u06a9\u0633\u062a\u0627\u0646 \u06a9\u06cc \u0627\u06c1\u0645&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-1019","page","type-page","status-publish","hentry"],"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"taleemnama","author_link":"https:\/\/taleemnama.pk\/urdu\/author\/taleemnama\/"},"comment_info":0,"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/taleemnama.pk\/urdu\/wp-json\/wp\/v2\/pages\/1019","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/taleemnama.pk\/urdu\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/taleemnama.pk\/urdu\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/taleemnama.pk\/urdu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/taleemnama.pk\/urdu\/wp-json\/wp\/v2\/comments?post=1019"}],"version-history":[{"count":152,"href":"https:\/\/taleemnama.pk\/urdu\/wp-json\/wp\/v2\/pages\/1019\/revisions"}],"predecessor-version":[{"id":1474,"href":"https:\/\/taleemnama.pk\/urdu\/wp-json\/wp\/v2\/pages\/1019\/revisions\/1474"}],"wp:attachment":[{"href":"https:\/\/taleemnama.pk\/urdu\/wp-json\/wp\/v2\/media?parent=1019"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}