PageSourceSearch

https://islamiccharts.com/pages/about

html islamiccharts.com collected 2026-10-03 02:34:28 UTC 284,420 bytes, 7,008 lines download raw bytes

1<!doctype html>
2<html
3  
4  lang="en"
5>
6  <head><link
7        rel="icon"
8        type="image/png"
9        href="//islamiccharts.com/cdn/shop/files/Favicon.png?crop=center&height=32&v=1770269957&width=32"
10      >
11
12
13
14<meta charset="utf-8">
15<meta
16  http-equiv="X-UA-Compatible"
17  content="IE=edge"
18>
19<meta
20  name="viewport"
21  content="width=device-width,initial-scale=1,viewport-fit=cover"
22>
23<meta
24  name="theme-color"
25  content=""
26>
27
28<meta
29  property="og:site_name"
30  content="Islamic Charts"
31>
32<meta
33  property="og:url"
34  content="https://islamiccharts.com/pages/about"
35>
36<meta
37  property="og:title"
38  content="About Us"
39>
40<meta
41  property="og:type"
42  content="website"
43>
44<meta
45  property="og:description"
46  content="Pakistan&#39;s #1 Educational Store for History Posters. We transform complex history into easy-to-understand visual infographics for educational purposes."
47><meta
48  name="twitter:card"
49  content="summary_large_image"
50>
51<meta
52  name="twitter:title"
53  content="About Us"
54>
55<meta
56  name="twitter:description"
57  content="Pakistan&#39;s #1 Educational Store for History Posters. We transform complex history into easy-to-understand visual infographics for educational purposes."
58>
59
60<title>
61  About Us
62 &ndash; Islamic Charts</title>
63
64<link
65  rel="canonical"
66  href="https://islamiccharts.com/pages/about"
67>
68
69
70  <meta
71    name="description"
72    content="Pakistan&#39;s #1 Educational Store for History Posters. We transform complex history into easy-to-understand visual infographics for educational purposes."
73  >
74
75<link href="//islamiccharts.com/cdn/shop/t/20/assets/overflow-list.css?v=16727044177065489451788706330" as="style" rel="preload">
76<link href="//islamiccharts.com/cdn/shop/t/20/assets/base.css?v=135475115935388894871788706330" rel="stylesheet" type="text/css" media="all" />
77
78
79
80  <style data-shopify>
81    :root {
82      --hover-lift-amount: 4px;
83      --hover-scale-amount: 1.03;
84      --hover-subtle-zoom-amount: 1.015;
85    }
86
87    @media (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
88      
89        .card-hover-effect-lift .product-card:hover,
90        .card-hover-effect-lift .collection-card:hover,
91        .card-hover-effect-lift .predictive-search-results__card:hover {
92          transform: translateY(calc(-1 * var(--hover-lift-amount)));
93        }
94      
95
96      
97
98      
99    }
100  </style>
101
102
103
104<link href="//islamiccharts.com/cdn/fonts/instrument_sans/instrumentsans_n4.db86542ae5e1596dbdb28c279ae6c2086c4c5bfa.woff2" as="font" type="font/woff2" fetchpriority="low" crossorigin="anonymous" rel="preload">
105<link href="//islamiccharts.com/cdn/fonts/instrument_sans/instrumentsans_n4.db86542ae5e1596dbdb28c279ae6c2086c4c5bfa.woff2" as="font" type="font/woff2" fetchpriority="low" crossorigin="anonymous" rel="preload">
106<link href="//islamiccharts.com/cdn/fonts/instrument_serif/instrumentserif_n4.1f296bfb073af186bc0a0abe7791aa71e0f0fd99.woff2" as="font" type="font/woff2" fetchpriority="low" crossorigin="anonymous" rel="preload">
107
108
109<script async crossorigin fetchpriority="high" src="/cdn/shopifycloud/importmap-polyfill/es-modules-shim.2.4.0.js"></script>
vendor: 1 bytes, line 109
109
110<script type="importmap">
111  {
112    "imports": {
113      "@theme/overflow-list": "//islamiccharts.com/cdn/shop/t/20/assets/overflow-list.js?v=46858356770684902511788706330",
114      "@theme/component": "//islamiccharts.com/cdn/shop/t/20/assets/component.js?v=175690430936884589731788706330",
115      "@theme/dialog": "//islamiccharts.com/cdn/shop/t/20/assets/dialog.js?v=144816527575655702281788706330",
116      "@theme/events": "//islamiccharts.com/cdn/shop/t/20/assets/events.js?v=99399773727497444581788706330",
117      "@shopify/events": "https://cdn.shopify.com/storefront/standard-events.js",
118      "@theme/view-event-elements": "//islamiccharts.com/cdn/shop/t/20/assets/view-event-elements.js?v=34258756885466567141788706330",
119      "@theme/focus": "//islamiccharts.com/cdn/shop/t/20/assets/focus.js?v=60436577539430446401788706330",
120      "@theme/morph": "//islamiccharts.com/cdn/shop/t/20/assets/morph.js?v=163551064521986254391788706330",
121      "@theme/paginated-list": "//islamiccharts.com/cdn/shop/t/20/assets/paginated-list.js?v=71290058904108491691788706330",
122      "@theme/performance": "//islamiccharts.com/cdn/shop/t/20/assets/performance.js?v=171015751390534793081788706330",
123      "@theme/product-form": "//islamiccharts.com/cdn/shop/t/20/assets/product-form.js?v=156247955454460663281788706330",
124      "@theme/recently-viewed-products": "//islamiccharts.com/cdn/shop/t/20/assets/recently-viewed-products.js?v=94729125001750262651788706330",
125      "@theme/scrolling": "//islamiccharts.com/cdn/shop/t/20/assets/scrolling.js?v=162288454571026455011788706330",
126      "@theme/section-renderer": "//islamiccharts.com/cdn/shop/t/20/assets/section-renderer.js?v=44511745960026958271788706330",
127      "@theme/section-hydration": "//islamiccharts.com/cdn/shop/t/20/assets/section-hydration.js?v=108434990705342316311788706330",
128      "@theme/money-formatting": "//islamiccharts.com/cdn/shop/t/20/assets/money-formatting.js?v=160151249720534550011788706330",
129      "@theme/utilities": "//islamiccharts.com/cdn/shop/t/20/assets/utilities.js?v=51671090137987445501788706330",
130      "@theme/variant-picker": "//islamiccharts.com/cdn/shop/t/20/assets/variant-picker.js?v=76692244208061220611788706330",
131      "@theme/variant-resolution": "//islamiccharts.com/cdn/shop/t/20/assets/variant-resolution.js?v=69293302205961280521788706330",
132      "@theme/media-gallery": "//islamiccharts.com/cdn/shop/t/20/assets/media-gallery.js?v=154207211298275592001788706330",
133      "@theme/quick-add": "//islamiccharts.com/cdn/shop/t/20/assets/quick-add.js?v=160295260742220749141788706330",
134      "@theme/paginated-list-aspect-ratio": "//islamiccharts.com/cdn/shop/t/20/assets/paginated-list-aspect-ratio.js?v=25254270272143792451788706330",
135      "@theme/component-quantity-selector": "//islamiccharts.com/cdn/shop/t/20/assets/component-quantity-selector.js?v=125177944711255157891788706330",
136      "@theme/comparison-slider": "//islamiccharts.com/cdn/shop/t/20/assets/comparison-slider.js?v=106705562947035711941788706330",
137      "@theme/sticky-add-to-cart": "//islamiccharts.com/cdn/shop/t/20/assets/sticky-add-to-cart.js?v=130489688094345781431788706330",
138      "@theme/fly-to-cart": "//islamiccharts.com/cdn/shop/t/20/assets/fly-to-cart.js?v=48483246440248933081788706330",
139      "@theme/scroll-container": "//islamiccharts.com/cdn/shop/t/20/assets/scroll-container.js?v=127018149358875384221788706330",
140      "@theme/theme-drawer": "//islamiccharts.com/cdn/shop/t/20/assets/theme-drawer.js?v=69307657216630184831788706330"
141    }
142  }
143</script>
143<script
144  src="//islamiccharts.com/cdn/shop/t/20/assets/standard-actions-override.js?v=171683365447094389611788706330"
145  type="module"
146></script>
146
147
148<script
149  src="//islamiccharts.com/cdn/shop/t/20/assets/page-view-event.js?v=12823247316348680231788706330"
150  type="module"
151  defer
152></script>
152
153
154
155
156<link
157  rel="modulepreload"
158  href="//islamiccharts.com/cdn/shop/t/20/assets/utilities.js?v=51671090137987445501788706330"
159  fetchpriority="low"
160>
161<link
162  rel="modulepreload"
163  href="//islamiccharts.com/cdn/shop/t/20/assets/component.js?v=175690430936884589731788706330"
164  fetchpriority="low"
165>
166<link
167  rel="modulepreload"
168  href="//islamiccharts.com/cdn/shop/t/20/assets/section-renderer.js?v=44511745960026958271788706330"
169  fetchpriority="low"
170>
171<link
172  rel="modulepreload"
173  href="//islamiccharts.com/cdn/shop/t/20/assets/section-hydration.js?v=108434990705342316311788706330"
174  fetchpriority="low"
175>
176<link
177  rel="modulepreload"
178  href="//islamiccharts.com/cdn/shop/t/20/assets/morph.js?v=163551064521986254391788706330"
179  fetchpriority="low"
180>
181
182
183
184<link
185  rel="modulepreload"
186  href="//islamiccharts.com/cdn/shop/t/20/assets/focus.js?v=60436577539430446401788706330"
187  fetchpriority="low"
188>
189<link
190  rel="modulepreload"
191  href="//islamiccharts.com/cdn/shop/t/20/assets/recently-viewed-products.js?v=94729125001750262651788706330"
192  fetchpriority="low"
193>
194<link
195  rel="modulepreload"
196  href="//islamiccharts.com/cdn/shop/t/20/assets/scrolling.js?v=162288454571026455011788706330"
197  fetchpriority="low"
198>
199<link
200  rel="modulepreload"
201  href="//islamiccharts.com/cdn/shop/t/20/assets/events.js?v=99399773727497444581788706330"
202  fetchpriority="low"
203>
204<script
205  src="//islamiccharts.com/cdn/shop/t/20/assets/overflow-list.js?v=46858356770684902511788706330"
206  type="module"
207  fetchpriority="low"
208></script>
vendor: 1 bytes, line 208
208
209<script
210  src="//islamiccharts.com/cdn/shop/t/20/assets/quick-add.js?v=160295260742220749141788706330"
211  type="module"
212  fetchpriority="low"
213></script>
213
214
215  
215<script
216    src="//islamiccharts.com/cdn/shop/t/20/assets/cart-discount.js?v=138990160074728809221788706330"
217    type="module"
218    fetchpriority="low"
219  ></script>
219
220
221
222<script
223  src="//islamiccharts.com/cdn/shop/t/20/assets/dialog.js?v=144816527575655702281788706330"
224  type="module"
225  fetchpriority="low"
226></script>
vendor: 1 bytes, line 226
226
227<script
228  src="//islamiccharts.com/cdn/shop/t/20/assets/variant-picker.js?v=76692244208061220611788706330"
229  type="module"
230  fetchpriority="low"
231></script>
vendor: 1 bytes, line 231
231
232<script
233  src="//islamiccharts.com/cdn/shop/t/20/assets/product-card.js?v=80689566448612614681788706330"
234  type="module"
235  fetchpriority="low"
236></script>
vendor: 1 bytes, line 236
236
237<script
238  src="//islamiccharts.com/cdn/shop/t/20/assets/product-form.js?v=156247955454460663281788706330"
239  type="module"
240  fetchpriority="low"
241></script>
vendor: 1 bytes, line 241
241
242<script
243  src="//islamiccharts.com/cdn/shop/t/20/assets/fly-to-cart.js?v=48483246440248933081788706330"
244  type="module"
245  fetchpriority="low"
246></script>
vendor: 1 bytes, line 246
246
247<script
248  src="//islamiccharts.com/cdn/shop/t/20/assets/accordion-custom.js?v=105323356731531709191788706330"
249  type="module"
250  fetchpriority="low"
251></script>
vendor: 1 bytes, line 251
251
252<script
253  src="//islamiccharts.com/cdn/shop/t/20/assets/media.js?v=37825095869491791421788706330"
254  type="module"
255  fetchpriority="low"
256></script>
vendor: 1 bytes, line 256
256
257<script
258  src="//islamiccharts.com/cdn/shop/t/20/assets/product-price.js?v=179333985604099329921788706330"
259  type="module"
260  fetchpriority="low"
261></script>
vendor: 1 bytes, line 261
261
262<script
263  src="//islamiccharts.com/cdn/shop/t/20/assets/product-sku.js?v=28741104639155857071788706330"
264  type="module"
265  fetchpriority="low"
266></script>
vendor: 1 bytes, line 266
266
267<script
268  src="//islamiccharts.com/cdn/shop/t/20/assets/product-inventory.js?v=7173209571153411411788706330"
269  type="module"
270  fetchpriority="low"
271></script>
vendor: 1 bytes, line 271
271
272<script
273  src="//islamiccharts.com/cdn/shop/t/20/assets/show-more.js?v=94563802205717136101788706330"
274  type="module"
275  fetchpriority="low"
276></script>
vendor: 1 bytes, line 276
276
277<script
278  src="//islamiccharts.com/cdn/shop/t/20/assets/slideshow.js?v=28306258147874261831788706330"
279  type="module"
280  fetchpriority="low"
281></script>
vendor: 1 bytes, line 281
281
282<script
283  src="//islamiccharts.com/cdn/shop/t/20/assets/layered-slideshow.js?v=30135417790894624731788706330"
284  type="module"
285  fetchpriority="low"
286></script>
vendor: 1 bytes, line 286
286
287<script
288  src="//islamiccharts.com/cdn/shop/t/20/assets/anchored-popover.js?v=148974932401539066461788706330"
289  type="module"
290  fetchpriority="low"
291></script>
vendor: 1 bytes, line 291
291
292<script
293  src="//islamiccharts.com/cdn/shop/t/20/assets/floating-panel.js?v=151277338116891310371788706330"
294  type="module"
295  fetchpriority="low"
296></script>
vendor: 1 bytes, line 296
296
297<script
298  src="//islamiccharts.com/cdn/shop/t/20/assets/video-background.js?v=25237992823806706551788706330"
299  type="module"
300  fetchpriority="low"
301></script>
vendor: 1 bytes, line 301
301
302<script
303  src="//islamiccharts.com/cdn/shop/t/20/assets/component-quantity-selector.js?v=125177944711255157891788706330"
304  type="module"
305  fetchpriority="low"
306></script>
vendor: 1 bytes, line 306
306
307<script
308  src="//islamiccharts.com/cdn/shop/t/20/assets/media-gallery.js?v=154207211298275592001788706330"
309  type="module"
310  fetchpriority="low"
311></script>
vendor: 1 bytes, line 311
311
312<script
313  src="//islamiccharts.com/cdn/shop/t/20/assets/rte-formatter.js?v=40306132146590816021788706330"
314  type="module"
315  fetchpriority="low"
316></script>
vendor: 1 bytes, line 316
316
317<script
318  src="//islamiccharts.com/cdn/shop/t/20/assets/volume-pricing.js?v=15442793518842484731788706330"
319  type="module"
320  fetchpriority="low"
321></script>
vendor: 1 bytes, line 321
321
322<script
323  src="//islamiccharts.com/cdn/shop/t/20/assets/price-per-item.js?v=115937180292451397851788706330"
324  type="module"
325  fetchpriority="low"
326></script>
vendor: 1 bytes, line 326
326
327<script
328  src="//islamiccharts.com/cdn/shop/t/20/assets/volume-pricing-info.js?v=150538418000149674651788706330"
329  type="module"
330  fetchpriority="low"
331></script>
331
332
333
334  
334<script
335    src="//islamiccharts.com/cdn/shop/t/20/assets/localization.js?v=76602883968586766701788706330"
336    type="module"
337    fetchpriority="low"
338  ></script>
338
339
340
341
342
343<script
344  src="//islamiccharts.com/cdn/shop/t/20/assets/auto-close-details.js?v=58350291535404441581788706330"
345  defer="defer"
346></script>
346
347
348<script>
349  const supportsNativePopover = 'popover' in HTMLElement.prototype;
350  const Theme = {
351    supportsNativePopover,
352    popoverPolyfillReady: supportsNativePopover
353      ? Promise.resolve()
354      : import("//islamiccharts.com/cdn/shop/t/20/assets/popover-polyfill.js?v=119029313658895111201788706330").then(() => {}),
355    translations: {
356      placeholder_image: `Placeholder image`,
357      added: `Added`,
358      recipient_form_fields_visible: `Recipient form fields are now visible`,
359      recipient_form_fields_hidden: `Recipient form fields are now hidden`,
360      recipient_form_error: `There was an error with the form submission`,
361      items_added_to_cart_one: `1 item added to cart`,
362      items_added_to_cart_other: `{{ count }} items added to cart`,
363      cart_count: `Total items in cart`,
364    },
365    routes: {
366      cart_add_url: '/cart/add.js',
367      cart_change_url: '/cart/change',
368      cart_update_url: '/cart/update',
369      cart_url: '/cart',
370      predictive_search_url: '/search/suggest',
371      search_url: '/search',
372    },
373    template: {
374      name: 'page',
375    },
376  };
377</script>
377
378<style data-shopify>
379@font-face {
380  font-family: "Instrument Sans";
381  font-weight: 400;
382  font-style: normal;
383  font-display: swap;
384  src: url("//islamiccharts.com/cdn/fonts/instrument_sans/instrumentsans_n4.db86542ae5e1596dbdb28c279ae6c2086c4c5bfa.woff2") format("woff2"),
385       url("//islamiccharts.com/cdn/fonts/instrument_sans/instrumentsans_n4.510f1b081e58d08c30978f465518799851ef6d8b.woff") format("woff");
386}
387@font-face {
388  font-family: "Instrument Sans";
389  font-weight: 700;
390  font-style: normal;
391  font-display: swap;
392  src: url("//islamiccharts.com/cdn/fonts/instrument_sans/instrumentsans_n7.e4ad9032e203f9a0977786c356573ced65a7419a.woff2") format("woff2"),
393       url("//islamiccharts.com/cdn/fonts/instrument_sans/instrumentsans_n7.b9e40f166fb7639074ba34738101a9d2990bb41a.woff") format("woff");
394}
395@font-face {
396  font-family: "Instrument Sans";
397  font-weight: 400;
398  font-style: italic;
399  font-display: swap;
400  src: url("//islamiccharts.com/cdn/fonts/instrument_sans/instrumentsans_i4.028d3c3cd8d085648c808ceb20cd2fd1eb3560e5.woff2") format("woff2"),
401       url("//islamiccharts.com/cdn/fonts/instrument_sans/instrumentsans_i4.7e90d82df8dee29a99237cd19cc529d2206706a2.woff") format("woff");
402}
403@font-face {
404  font-family: "Instrument Sans";
405  font-weight: 700;
406  font-style: italic;
407  font-display: swap;
408  src: url("//islamiccharts.com/cdn/fonts/instrument_sans/instrumentsans_i7.d6063bb5d8f9cbf96eace9e8801697c54f363c6a.woff2") format("woff2"),
409       url("//islamiccharts.com/cdn/fonts/instrument_sans/instrumentsans_i7.ce33afe63f8198a3ac4261b826b560103542cd36.woff") format("woff");
410}
411@font-face {
412  font-family: "Instrument Serif";
413  font-weight: 400;
414  font-style: normal;
415  font-display: swap;
416  src: url("//islamiccharts.com/cdn/fonts/instrument_serif/instrumentserif_n4.1f296bfb073af186bc0a0abe7791aa71e0f0fd99.woff2") format("woff2"),
417       url("//islamiccharts.com/cdn/fonts/instrument_serif/instrumentserif_n4.9c1bc0cbb666f794ccbef0784eef2fae0981ce72.woff") format("woff");
418}
419@font-face {
420  font-family: "Instrument Serif";
421  font-weight: 400;
422  font-style: italic;
423  font-display: swap;
424  src: url("//islamiccharts.com/cdn/fonts/instrument_serif/instrumentserif_i4.5f74867220db936d30d7d208253fb8f2d3ef5a7c.woff2") format("woff2"),
425       url("//islamiccharts.com/cdn/fonts/instrument_serif/instrumentserif_i4.659537f426cac059f95efd6b1bd59c465d629984.woff") format("woff");
426}
427
428
429  :root {
430    /* Safe area insets — non-zero on notched devices because meta-tags.liquid sets viewport-fit=cover */
431    --safe-area-inset-top: env(safe-area-inset-top, 0px);
432    --safe-area-inset-right: env(safe-area-inset-right, 0px);
433    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
434    --safe-area-inset-left: env(safe-area-inset-left, 0px);
435
436    /* Page Layout */
437    --sidebar-width: 25rem;
438    --theme-drawer-width: 30rem;
439    --narrow-content-width: 36rem;
440    --normal-content-width: 42rem;
441    --narrow-page-width: 90rem;
442    --normal-page-width: 120rem;
443    --wide-page-width: 150rem;
444
445    /* Section Heights */
446    --section-height-small: 15rem;
447    --section-height-medium: 25rem;
448    --section-height-large: 35rem;
449
450    @media screen and (min-width: 40em) {
451      --section-height-small: 40svh;
452      --section-height-medium: 55svh;
453      --section-height-large: 70svh;
454    }
455
456    @media screen and (min-width: 60em) {
457      --section-height-small: 50svh;
458      --section-height-medium: 65svh;
459      --section-height-large: 80svh;
460    }
461
462    /* Letter spacing */
463    --letter-spacing-sm: 0.06em;
464
465    /* Font families */
466    --font-body--family: "Instrument Sans", sans-serif;
467    --font-body--style: normal;
468    --font-body--weight: 400;
469    --font-subheading--family: "Instrument Sans", sans-serif;
470    --font-subheading--style: normal;
471    --font-subheading--weight: 400;
472    --font-heading--family: Arial, sans-serif;
473    --font-heading--style: normal;
474    --font-heading--weight: 400;
475    --font-accent--family: "Instrument Serif", serif;
476    --font-accent--style: normal;
477    --font-accent--weight: 400;
478
479    /* Margin sizes */
480    --font-heading--spacing: 0.25em;
481    --font-h1--spacing: var(--font-heading--spacing);
482    --font-h2--spacing: var(--font-heading--spacing);
483    --font-h3--spacing: var(--font-heading--spacing);
484    --font-h4--spacing: var(--font-heading--spacing);
485    --font-h5--spacing: var(--font-heading--spacing);
486    --font-h6--spacing: var(--font-heading--spacing);
487    --font-paragraph--spacing: 0.5em;
488
489    /** Z-Index / Layering */
490    --layer-section-background: -2;
491    --layer-lowest: -1;
492    --layer-base: 0;
493    --layer-flat: 1;
494    --layer-raised: 2;
495    --layer-heightened: 4;
496    --layer-sticky: 8;
497    --layer-window-overlay: 10;
498    --layer-header-menu: 12;
499    --layer-overlay: 16;
500    --layer-menu-drawer: 18;
501    --layer-temporary: 20;
502
503    /* Max-width / Measure */
504    --max-width--body-normal: 32.5em;
505    --max-width--body-narrow: 22.75em;
506
507    --max-width--heading-normal: 32.5em;
508    --max-width--heading-narrow: 19.5em;
509
510    --max-width--display-normal: 13em;
511    --max-width--display-narrow: 9.75em;
512    --max-width--display-tight: 3.25em;
513
514    /* Letter-spacing / Tracking */
515    --letter-spacing--display-tight: -0.03em;
516    --letter-spacing--display-normal: 0em;
517    --letter-spacing--display-loose: 0.03em;
518
519    --letter-spacing--heading-tight: -0.03em;
520    --letter-spacing--heading-normal: 0em;
521    --letter-spacing--heading-loose: 0.03em;
522
523    --letter-spacing--body-tight: -0.03em;
524    --letter-spacing--body-normal: 0em;
525    --letter-spacing--body-loose: 0.03em;
526
527    /* Line height / Leading */
528    --line-height: 1;
529
530    --line-height--display-tight: 1;
531    --line-height--display-normal: 1.1;
532    --line-height--display-loose: 1.2;
533
534    --line-height--heading-tight: 1.15;
535    --line-height--heading-normal: 1.25;
536    --line-height--heading-loose: 1.35;
537
538    --line-height--body-tight: 1.2;
539    --line-height--body-normal: 1.4;
540    --line-height--body-loose: 1.6;
541
542    /* Typography presets */
543    --font-size--paragraph: 0.875rem;--font-size--h1: 2.0rem;--font-size--h2: clamp(2.25rem, 4.8vw, 3.0rem);--font-size--h3: 2.0rem;--font-size--h4: 1.5rem;--font-size--h5: 1.125rem;--font-size--h6: 1.0rem;--font-paragraph--weight: 400;--font-paragraph--size: var(--font-size--paragraph);--font-paragraph--family: var(--font-body--family);--font-paragraph--style: var(--font-body--style);--font-paragraph--case: ;--font-paragraph--line-height: var(--line-height--body-normal);--font-h1--weight: var(--font-heading--weight);--font-h1--letter-spacing: var(--letter-spacing--heading-normal);--font-h1--size: var(--font-size--h1);--font-h1--family: var(--font-heading--family);--font-h1--style: var(--font-heading--style);--font-h1--case: none;--font-h1--line-height: var(--line-height--display-normal);--font-h2--weight: var(--font-heading--weight);--font-h2--letter-spacing: var(--letter-spacing--heading-normal);--font-h2--size: var(--font-size--h2);--font-h2--family: var(--font-heading--family);--font-h2--style: var(--font-heading--style);--font-h2--case: none;--font-h2--line-height: var(--line-height--display-normal);--font-h3--weight: var(--font-heading--weight);--font-h3--letter-spacing: var(--letter-spacing--heading-normal);--font-h3--size: var(--font-size--h3);--font-h3--family: var(--font-heading--family);--font-h3--style: var(--font-heading--style);--font-h3--case: none;--font-h3--line-height: var(--line-height--display-normal);--font-h4--weight: var(--font-subheading--weight);--font-h4--letter-spacing: var(--letter-spacing--heading-normal);--font-h4--size: var(--font-size--h4);--font-h4--family: var(--font-subheading--family);--font-h4--style: var(--font-subheading--style);--font-h4--case: none;--font-h4--line-height: var(--line-height--display-normal);--font-h5--weight: var(--font-subheading--weight);--font-h5--letter-spacing: var(--letter-spacing--heading-normal);--font-h5--size: var(--font-size--h5);--font-h5--family: var(--font-subheading--family);--font-h5--style: var(--font-subheading--style);--font-h5--case: none;--font-h5--line-height: var(--line-height--display-normal);--font-h6--weight: var(--font-subheading--weight);--font-h6--letter-spacing: var(--letter-spacing--heading-normal);--font-h6--size: var(--font-size--h6);--font-h6--family: var(--font-subheading--family);--font-h6--style: var(--font-subheading--style);--font-h6--case: none;--font-h6--line-height: var(--line-height--display-normal);
544
545    /* Hardcoded font sizes */
546    --font-size--3xs: 0.625rem;
547    --font-size--2xs: 0.75rem;
548    --font-size--xs: 0.8125rem;
549    --font-size--sm: 0.875rem;
550    --font-size--md: 1rem;
551    --font-size--lg: 1.125rem;
552    --font-size--xl: 1.25rem;
553    --font-size--2xl: 1.5rem;
554    --font-size--3xl: 2rem;
555    --font-size--4xl: 2.5rem;
556    --font-size--5xl: 3rem;
557    --font-size--6xl: 3.5rem;
558
559    /* Menu font sizes */
560    --menu-font-sm--size: 0.875rem;
561    --menu-font-sm--line-height: calc(1.1 + 0.5 * min(16 / 14));
562    --menu-font-md--size: 1rem;
563    --menu-font-md--line-height: calc(1.1 + 0.5 * min(16 / 16));
564    --menu-font-xl--size: 1.25rem;
565    --menu-font-xl--line-height: calc(1.1 + 0.5 * min(16 / 20));
566    --menu-font-2xl--size: 1.75rem;
567    --menu-font-2xl--line-height: calc(1.1 + 0.5 * min(16 / 28));
568
569    /* Colors */
570    --color-error: #8B0000;
571    --color-success: #006400;
572    --color-white: #FFFFFF;
573    --color-white-rgb: 255 255 255;
574    --color-instock: #3ED660;
575    --color-lowstock: #EE9441;
576    --color-outofstock: #C8C8C8;
577
578    /* Opacity */
579    --opacity-5: 0.05;
580    --opacity-8: 0.08;
581    --opacity-10: 0.1;
582    --opacity-15: 0.15;
583    --opacity-20: 0.2;
584    --opacity-25: 0.25;
585    --opacity-30: 0.3;
586    --opacity-40: 0.4;
587    --opacity-50: 0.5;
588    --opacity-60: 0.6;
589    --opacity-70: 0.7;
590    --opacity-80: 0.8;
591    --opacity-85: 0.85;
592    --opacity-90: 0.9;
593    --opacity-subdued-text: 0.8;
594    --opacity-muted-text: 0.6;
595
596    --shadow-button: 0 2px 3px rgb(0 0 0 / 20%);
597    --gradient-image-overlay: linear-gradient(to top, rgb(0 0 0 / 0.5), transparent);
598
599    /* Spacing */
600    --margin-3xs: 0.125rem;
601    --margin-2xs: 0.3rem;
602    --margin-xs: 0.5rem;
603    --margin-sm: 0.7rem;
604    --margin-md: 0.8rem;
605    --margin-lg: 1rem;
606    --margin-xl: 1.25rem;
607    --margin-2xl: 1.5rem;
608    --margin-4xl: 2rem;
609    --margin-6xl: 5rem;
610
611
612    --padding-3xs: 0.125rem;
613    --padding-2xs: 0.25rem;
614    --padding-xs: 0.5rem;
615    --padding-sm: 0.7rem;
616    --padding-md: 0.8rem;
617    --padding-lg: 1rem;
618    --padding-xl: 1.25rem;
619    --padding-2xl: 1.5rem;
620    --padding-3xl: 1.75rem;
621    --padding-4xl: 2rem;
622    --padding-5xl: 3rem;
623    --padding-6xl: 4rem;
624
625    --gap-3xs: 0.125rem;
626    --gap-2xs: 0.3rem;
627    --gap-xs: 0.5rem;
628    --gap-sm: 0.7rem;
629    --gap-md: 0.9rem;
630    --gap-lg: 1rem;
631    --gap-xl: 1.25rem;
632    --gap-2xl: 2rem;
633    --gap-3xl: 3rem;
634
635    --spacing-scale-md: 0.7;
636    --spacing-scale-default: 1.0;
637
638    /* Checkout buttons gap */
639    --checkout-button-gap: 10px;
640
641    /* Borders */
642    --style-border-width: 1px;
643    --style-border-radius-xs: 0.2rem;
644    --style-border-radius-sm: 0.6rem;
645    --style-border-radius-md: 0.8rem;
646    --style-border-radius-50: 50%;
647    --style-border-radius-lg: 1rem;
648    --style-border-radius-pills: 40px;
649    --style-border-radius-inputs: 8px;
650    --style-border-radius-buttons-primary: 100px;
651    --style-border-radius-buttons-secondary: 100px;
652    --style-border-width-primary: 0px;
653    --style-border-width-secondary: 0px;
654    --style-border-width-inputs: 1px;
655    --style-border-radius-popover: 8px;
656    --style-border-popover: 0px solid #000000;
657    --style-border-drawer: 1px solid #000000;
658    --style-border-swatch-opacity: 10%;
659    --style-border-swatch-width: 1px;
660    --style-border-swatch-style: solid;
661
662    /* Animation */
663    --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
664    --ease-out-quad: cubic-bezier(0.32, 0.72, 0, 1);
665    --animation-speed-fast: 0.0625s;
666    --animation-speed: 0.125s;
667    --animation-speed-slow: 0.2s;
668    --animation-speed-medium: 0.15s;
669    --animation-easing: ease-in-out;
670    --drawer-animation-speed: 0.2s;
671    --animation-values: var(--animation-speed) var(--animation-easing);
672    --animation-timing-hover: cubic-bezier(0.25, 0.46, 0.45, 0.94);
673    --animation-timing-active: cubic-bezier(0.5, 0, 0.75, 0);
674    --animation-timing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
675    --animation-timing-default: cubic-bezier(0, 0, 0.2, 1);
676    --animation-timing-fade-in: cubic-bezier(0.16, 1, 0.3, 1);
677    --animation-timing-fade-out: cubic-bezier(0.4, 0, 0.2, 1);
678    /* Spring definitions suffixed with perceptual duration (d<ms>) and bounce (b<%>)*/
679    --spring-d300-b0-easing: linear(0, 0.0033 0.81%, 0.027 2.42%, 0.0916 4.84%, 0.4745 15.32%, 0.6422 20.97%, 0.7175, 0.7789, 0.8283 30.64%, 0.876, 0.9111 38.71%, 0.941, 0.9611 48.39%, 0.9707, 0.978 54.84%, 0.9885 62.1%, 0.9949 70.97%, 0.9982 82.26%, 0.9997 100%);
680    --spring-d300-b0-duration: 0.4980s;
681    --spring-d280-b0-easing: linear(0, 0.0044, 0.0164 1.85%, 0.085 4.63%, 0.4571 14.81%, 0.575 18.52%, 0.6505, 0.7148 24.07%, 0.7849, 0.8393, 0.8809 35.18%, 0.9189, 0.9453 44.44%, 0.9662, 0.9793 55.55%, 0.9894 62.95%, 0.995 71.28%, 0.9982 82.39%, 0.9997 99.98%);
682    --spring-d280-b0-duration: 0.4648s;
683    --spring-d220-b0-easing: linear(
684      0,
685      0.0093 1.37%,
686      0.0696 4.12%,
687      0.4667 15.09%,
688      0.6322 20.58%,
689      0.6986 23.32%,
690      0.7793 27.44%,
691      0.8219 30.18%,
692      0.8721,
693      0.9089 38.42%,
694      0.9427,
695      0.9644,
696      0.978 54.88%,
697      0.9881 61.74%,
698      0.9944 69.97%,
699      0.998 80.95%,
700      0.9996 98.78%
701    );
702    --spring-d220-b0-duration: 0.3818s;
703    --spring-d180-b0-easing: linear(0, 0.0234, 0.0805 4.48%, 0.4865 15.68%, 0.6211 20.16%, 0.7696 26.88%, 0.8064 29.12%, 0.8646, 0.9063, 0.9358, 0.9563 47.04%, 0.9757, 0.9867 60.48%, 0.9941 69.44%, 0.9979 80.64%, 0.9996 98.56%);
704    --spring-d180-b0-duration: 0.2988s;
705
706    /* View transitions */
707    /* View transition old */
708    --view-transition-old-main-content: var(--animation-speed) var(--animation-easing) both fadeOut;
709
710    /* View transition new */
711    --view-transition-new-main-content: var(--animation-speed) var(--animation-easing) both fadeIn, var(--animation-speed) var(--animation-easing) both slideInTopViewTransition;
712
713    /* Focus */
714    --focus-outline-width: 0.09375rem;
715    --focus-outline-offset: 0.2em;
716
717    /* Badges */
718    --badge-rectangle-padding-block: 1px;
719    --badge-rectangle-padding-inline: 6px;
720    @media screen and (min-width: 750px) {
721      --badge-rectangle-padding-block: 4px;
722      --badge-rectangle-padding-inline: 10px;
723    }
724
725    /* Icons */
726    --icon-size-2xs: 0.6rem;
727    --icon-size-xs: 0.85rem;
728    --icon-size-sm: 1.25rem;
729    --icon-size-md: 1.375rem;
730    --icon-size-lg: 1.5rem;
731    --icon-stroke-width: 1.5px;
732
733    /* Input */
734    --input-padding-y: 0.8rem;
735    --input-padding-x: 0.8rem;
736    --input-padding: var(--input-padding-y) var(--input-padding-x);
737    --input-box-shadow-width: var(--style-border-width-inputs);
738    --input-box-shadow: 0 0 0 var(--input-box-shadow-width) var(--color-input-border);
739    --input-box-shadow-focus: 0 0 0 calc(var(--input-box-shadow-width) + 0.5px) var(--color-input-border);
740    --input-disabled-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
741    --input-disabled-border-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
742    --input-disabled-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
743    --input-textarea-min-height: 55px;
744
745    /* Checkbox */
746    --checkbox-size: 22px;
747    --checkbox-border-radius: 7px;
748    --checkbox-border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));
749    --checkbox-label-padding: 8px;
750
751    @media screen and (min-width: 750px) {
752      --checkbox-size: 16px;
753      --checkbox-border-radius: 5px;
754      --checkbox-label-padding: 6px;
755    }
756
757    /* Button size */
758    --button-size-md: 36px;
759    --button-size: var(--minimum-touch-target);
760    --button-padding-inline: 24px;
761    --button-padding-block: 16px;
762
763    /* Button font-family */
764    --button-font-family-primary: var(--font-body--family);
765    --button-font-family-secondary: var(--font-body--family);
766
767    /* Button text case */
768    --button-text-case-primary: default;
769    --button-text-case-secondary: default;
770
771    /* Borders */
772    --border-color: rgb(var(--color-border-rgb) / var(--opacity-50));
773    --border-width-sm: 1px;
774    --border-radius-sm: 0.25rem;
775
776    /* Drawers */
777    --drawer-header-desktop-top: 0rem;
778    --drawer-padding: calc(var(--padding-sm) + 7px);
779    --drawer-height: 100dvh;
780    --drawer-width: 95vw;
781    --drawer-max-width: 500px;
782
783    /* Variant Picker Swatches */
784    --variant-picker-swatch-width-unitless: 30;
785    --variant-picker-swatch-height-unitless: 30;
786    --variant-picker-swatch-width: 30px;
787    --variant-picker-swatch-height: 30px;
788    --variant-picker-swatch-radius: 100px;
789    --variant-picker-border-width: 1px;
790    --variant-picker-border-style: solid;
791    --variant-picker-border-opacity: 10%;
792
793    /* Variant Picker Buttons */
794    --variant-picker-button-radius: 100px;
795    --variant-picker-button-border-width: 1px;
796    --variant-option-label-color: var(--color, var(--color-foreground));
797
798    /* Slideshow */
799    --slideshow-controls-icon: 2rem;
800    --peek-next-slide-size: 3rem;
801
802    /* Utilities */
803    --backdrop-opacity: 0.15;
804    --backdrop-color-rgb: var(--color-shadow-rgb);
805    --minimum-touch-target: 44px;
806    --disabled-opacity: 0.5;
807    --skeleton-opacity: 0.025;
808
809    /* Shapes */
810
811    /* Buy buttons */
812    --height-buy-buttons: calc(var(--padding-lg) * 2 + var(--icon-size-sm));
813
814    /* Card image width and height variables */
815    --card-width-small: 10rem;
816
817    --height-small: 10rem;
818
819    @media screen and (min-width: 750px) {
820      --height-small: 17.5rem;
821    }
822
823    /* Modal */
824    --modal-max-height: 65dvh;
825    --quick-add-modal-height: min(38.5rem, 96vh);
826    /* Centered dialog: reserve the larger side inset on both edges so a landscape
827       notch cannot cover the close button. 2vw keeps the original 96vw gutter. */
828    --quick-add-modal-width: min(
829      54rem,
830      calc(100vw - 2 * max(2vw, var(--safe-area-inset-left), var(--safe-area-inset-right)))
831    );
832    --quick-add-modal-gallery-width: 24rem;
833
834    /* Card styles for search */
835    --card-bg-hover: rgb(var(--color-foreground-rgb) / var(--opacity-5));
836    --card-border-hover: rgb(var(--color-foreground-rgb) / var(--opacity-30));
837    --card-border-focus: rgb(var(--color-foreground-rgb) / var(--opacity-10));
838
839    /* Cart */
840    --cart-primary-font-family: var(--font-body--family);
841    --cart-primary-font-style: var(--font-body--style);
842    --cart-primary-font-weight: var(--font-body--weight);
843    --cart-secondary-font-family: var(--font-subheading--family);
844    --cart-secondary-font-style: var(--font-subheading--style);
845    --cart-secondary-font-weight: var(--font-subheading--weight);
846  }
847
848  .custom-color-quick-add {
849    --quick-add-background: #ffffff;
850    --quick-add-foreground: #000000;
851  }
852</style>
853
854
855
856
857
858
859  <style data-shopify>
860    .color-custom-popover,
861    .color-custom-popover .text-block {
862      /* Background */
863      --color-background: #e3dcd2;
864      --color-background-rgb: 227 220 210;
865
866      /* Opacity values adjusted for background brightness */
867      
868--opacity-5-15: 0.05; --opacity-10-25: 0.1; --opacity-35-55: 0.35; --opacity-40-60:
8690.4; --opacity-30-60: 0.3; --opacity-60: 0.6;
870
871
872      
873        /* Foreground / text — explicit or smart-contrasted */
874        --color: #000000;
875        --color-rgb: 0 0 0;
876        --color-foreground: #000000;
877        --color-foreground-rgb: 0 0 0;
878        --color-foreground-muted: rgb(0 0 0 / var(--opacity-muted-text));
879        --color-foreground-subdued: rgb(0 0 0 / var(--opacity-subdued-text));
880        --color-border: #000000;
881        --color-border-rgb: 0 0 0;
882      
883    }
884
885    
886      .color-custom-popover {
887        /* Form-related tokens stay on .color-custom only — .text-block is a prose
888           container (text/announcement/inline-text/blog-post-description/
889           collection-link/price/sku) and never holds form inputs. */
890        --input-disabled-background-color: rgb(0 0 0 / var(--opacity-10));
891        --input-disabled-border-color: rgb(0 0 0 / var(--opacity-5));
892        --input-disabled-text-color: rgb(0 0 0 / var(--opacity-50));
893        --checkbox-border: 1px solid rgb(0 0 0 / var(--opacity-35-55));
894      }
895    
896
897    .color-custom-popover {
898      color: var(--color, var(--color-foreground));
899      background-color: var(--color-background);
900    }
901  </style>
902
903
904
905
906
907
908
909
910  <style data-shopify>
911    .color-custom-drawer,
912    .color-custom-drawer .text-block {
913      /* Background */
914      --color-background: #f1ede7ba;
915      --color-background-rgb: 241 237 231;
916
917      /* Opacity values adjusted for background brightness */
918      
919--opacity-5-15: 0.05; --opacity-10-25: 0.1; --opacity-35-55: 0.35; --opacity-40-60:
9200.4; --opacity-30-60: 0.3; --opacity-60: 0.6;
921
922
923      
924        /* Foreground / text — explicit or smart-contrasted */
925        --color: #000000;
926        --color-rgb: 0 0 0;
927        --color-foreground: #000000;
928        --color-foreground-rgb: 0 0 0;
929        --color-foreground-muted: rgb(0 0 0 / var(--opacity-muted-text));
930        --color-foreground-subdued: rgb(0 0 0 / var(--opacity-subdued-text));
931        --color-border: #000000;
932        --color-border-rgb: 0 0 0;
933      
934    }
935
936    
937      .color-custom-drawer {
938        /* Form-related tokens stay on .color-custom only — .text-block is a prose
939           container (text/announcement/inline-text/blog-post-description/
940           collection-link/price/sku) and never holds form inputs. */
941        --input-disabled-background-color: rgb(0 0 0 / var(--opacity-10));
942        --input-disabled-border-color: rgb(0 0 0 / var(--opacity-5));
943        --input-disabled-text-color: rgb(0 0 0 / var(--opacity-50));
944        --checkbox-border: 1px solid rgb(0 0 0 / var(--opacity-35-55));
945      }
946    
947
948    .color-custom-drawer {
949      color: var(--color, var(--color-foreground));
950      background-color: var(--color-background);
951    }
952  </style>
953
954
955
956
957
958
959
960
961  <style data-shopify>
962    .color-custom-badge-sale,
963    .color-custom-badge-sale .text-block {
964      /* Background */
965      --color-background: #fdc656;
966      --color-background-rgb: 253 198 86;
967
968      /* Opacity values adjusted for background brightness */
969      
970--opacity-5-15: 0.05; --opacity-10-25: 0.1; --opacity-35-55: 0.35; --opacity-40-60:
9710.4; --opacity-30-60: 0.3; --opacity-60: 0.6;
972
973
974      
975        /* Foreground / text — explicit or smart-contrasted */
976        --color: #000000;
977        --color-rgb: 0 0 0;
978        --color-foreground: #000000;
979        --color-foreground-rgb: 0 0 0;
980        --color-foreground-muted: rgb(0 0 0 / var(--opacity-muted-text));
981        --color-foreground-subdued: rgb(0 0 0 / var(--opacity-subdued-text));
982        --color-border: #000000;
983        --color-border-rgb: 0 0 0;
984      
985    }
986
987    
988      .color-custom-badge-sale {
989        /* Form-related tokens stay on .color-custom only — .text-block is a prose
990           container (text/announcement/inline-text/blog-post-description/
991           collection-link/price/sku) and never holds form inputs. */
992        --input-disabled-background-color: rgb(0 0 0 / var(--opacity-10));
993        --input-disabled-border-color: rgb(0 0 0 / var(--opacity-5));
994        --input-disabled-text-color: rgb(0 0 0 / var(--opacity-50));
995        --checkbox-border: 1px solid rgb(0 0 0 / var(--opacity-35-55));
996      }
997    
998
999    .color-custom-badge-sale {
1000      color: var(--color, var(--color-foreground));
1001      background-color: var(--color-background);
1002    }
1003  </style>
1004
1005
1006
1007
1008
1009
1010
1011
1012  <style data-shopify>
1013    .color-custom-badge-sold-out,
1014    .color-custom-badge-sold-out .text-block {
1015      /* Background */
1016      --color-background: #000000;
1017      --color-background-rgb: 0 0 0;
1018
1019      /* Opacity values adjusted for background brightness */
1020      
1021--opacity-5-15: 0.15; --opacity-10-25: 0.25; --opacity-35-55: 0.55; --opacity-40-60:
10220.6; --opacity-30-60: 0.6; --opacity-60: 0.6;
1023
1024
1025      
1026        /* Foreground / text — explicit or smart-contrasted */
1027        --color: #ffffff;
1028        --color-rgb: 255 255 255;
1029        --color-foreground: #ffffff;
1030        --color-foreground-rgb: 255 255 255;
1031        --color-foreground-muted: rgb(255 255 255 / var(--opacity-muted-text));
1032        --color-foreground-subdued: rgb(255 255 255 / var(--opacity-subdued-text));
1033        --color-border: #ffffff;
1034        --color-border-rgb: 255 255 255;
1035      
1036    }
1037
1038    
1039      .color-custom-badge-sold-out {
1040        /* Form-related tokens stay on .color-custom only — .text-block is a prose
1041           container (text/announcement/inline-text/blog-post-description/
1042           collection-link/price/sku) and never holds form inputs. */
1043        --input-disabled-background-color: rgb(255 255 255 / var(--opacity-10));
1044        --input-disabled-border-color: rgb(255 255 255 / var(--opacity-5));
1045        --input-disabled-text-color: rgb(255 255 255 / var(--opacity-50));
1046        --checkbox-border: 1px solid rgb(255 255 255 / var(--opacity-35-55));
1047      }
1048    
1049
1050    .color-custom-badge-sold-out {
1051      color: var(--color, var(--color-foreground));
1052      background-color: var(--color-background);
1053    }
1054  </style>
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073<style data-shopify>
1074  /* Palette colors */
1075  :root {
1076    --color-background: #faf9f1;
1077    --color-background-rgb: 250 249 241;
1078    --color-foreground: #000000;
1079    --color-foreground-rgb: 0 0 0;
1080    --color-border: #000000;
1081    --color-border-rgb: 0 0 0;
1082    --palette-lightest: #ffffff;
1083    --palette-lightest-rgb: 255 255 255;
1084    --palette-darkest: #000000;
1085    --palette-darkest-rgb: 0 0 0;
1086    
1087--opacity-5-15: 0.05; --opacity-10-25: 0.1; --opacity-35-55: 0.35; --opacity-40-60:
10880.4; --opacity-30-60: 0.3; --opacity-60: 0.6;
1089
1090
1091    --color-primary-button-text: rgb(253 198 86 / 1.0);
1092    --color-primary-button-background: rgb(0 138 69 / 1.0);
1093    --color-primary-button-border: rgb(66 2 28 / 1.0);
1094    --color-primary-button-focus-outline: rgb(0 138 69);
1095    --color-primary-button-hover-text: rgb(255 255 255 / 1.0);
1096    --color-primary-button-hover-background: #00a452;
1097    --color-primary-button-hover-border: #8c043c;
1098
1099    --color-secondary-button-text: rgb(66 2 28 / 1.0);
1100    --color-secondary-button-background: rgb(250 249 241 / 1.0);
1101    --color-secondary-button-border: rgb(66 2 28 / 1.0);
1102    --color-secondary-button-hover-text: rgb(0 0 0 / 1.0);
1103    --color-secondary-button-hover-background: #f3f1de;
1104    --color-secondary-button-hover-border: #8c043c;
1105
1106    --color-input-background: rgb(255 255 255 / 1.0);
1107    --color-input-text: rgb(0 0 0 / 1.0);
1108    --color-input-text-rgb: 0 0 0;
1109    --color-input-border: rgb(0 0 0 / 0.08);
1110
1111    --color-variant-background: rgb(255 255 255 / 1.0);
1112    --color-variant-border: rgb(230 230 230 / 1.0);
1113    --color-variant-text: rgb(0 0 0 / 1.0);
1114    --color-variant-text-rgb: 0 0 0;
1115    --color-variant-hover-background: #f2f2f2;
1116    --color-variant-hover-text: rgb(0 0 0 / 1.0);
1117    --color-variant-hover-border: #d9d9d9;
1118
1119    --color-selected-variant-background: rgb(0 0 0 / 1.0);
1120    --color-selected-variant-border: rgb(0 0 0 / 1.0);
1121    --color-selected-variant-text: rgb(255 255 255 / 1.0);
1122    --color-selected-variant-text-rgb: 255 255 255;
1123    --color-selected-variant-hover-background: #262626;
1124    --color-selected-variant-hover-text: rgb(255 255 255 / 1.0);
1125    --color-selected-variant-hover-border: #262626;
1126
1127    --input-disabled-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
1128    --input-disabled-border-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15));
1129    --input-disabled-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
1130    --color-foreground-muted: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-muted-text));
1131    --color-foreground-subdued: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
1132    --color-drawer-shadow-rgb: ;
1133    --color-popover-shadow-rgb: 0 0 0;
1134
1135    /* Shadows */
1136    
1137    
1138      --shadow-blur: 20px;
1139      --shadow-popover: 0px 4px 20px rgb(var(--color-popover-shadow-rgb) / var(--opacity-15));
1140    
1141  }
1142
1143  body {
1144    color: var(--color-foreground);
1145    background-color: var(--color-background);
1146  }
1147</style>
1148
1149
1150    
1150<script>window.performance && window.performance.mark && window.performance.mark('shopify.content_for_header.start');</script>
1150<meta id="shopify-digital-wallet" name="shopify-digital-wallet" content="/72107720994/digital_wallets/dialog">
1151<link rel="ucp" href="/.well-known/ucp" version="2026-08-25">
1151<script async="async" src="/checkouts/internal/preloads.js?locale=en-US"></script>
vendor: 1 bytes, line 1151
1151
1152<script id="shopify-features" type="application/json">{"accessToken":"8de7a16a4cb500ce8533c49043d45b1a","betas":["rich-media-storefront-analytics"],"domain":"islamiccharts.com","predictiveSearch":true,"shopId":72107720994,"locale":"en"}</script>
vendor: 1 bytes, line 1152
1152
1153<script>var Shopify = Shopify || {};
1154Shopify.shop = "bawa-toni-shah-shop.myshopify.com";
1155Shopify.locale = "en";
1156Shopify.currency = {"active":"PKR","rate":"1.0"};
1157Shopify.country = "US";
1158Shopify.theme = {"name":"Updated copy of Updated copy of Updated copy of...","id":190555226402,"schema_name":"Tinker","schema_version":"4.1.5","theme_store_id":3627,"role":"main"};
1159Shopify.theme.handle = "null";
1160Shopify.theme.style = {"id":null,"handle":null};
1161Shopify.cdnHost = "islamiccharts.com/cdn";
1162Shopify.routes = Shopify.routes || {};
1163Shopify.routes.root = "/";
1164Shopify.shopJsCdnBaseUrl = "https://cdn.shopify.com/shopifycloud/shop-js";
1165Shopify.SignInWithShop = Shopify.SignInWithShop || {};
1166Shopify.SignInWithShop.User = Shopify.SignInWithShop.User || {};
1167Shopify.SignInWithShop.User.recognized = false;</script>
vendor: 1 bytes, line 1167
1167
1168<script type="module">!function(o){(o.Shopify=o.Shopify||{}).modules=!0}(window);</script>
vendor: 1 bytes, line 1168
1168
1169<script>!function(o){function n(){var o=[];function n(){o.push(Array.prototype.slice.apply(arguments))}return n.q=o,n}var t=o.Shopify=o.Shopify||{};t.loadFeatures=n(),t.autoloadFeatures=n()}(window);</script>
vendor: 1 bytes, line 1169
1169
1170<script>
1171  window.Shopify = window.Shopify || {};
1172  window.Shopify.SignInWithShop = window.Shopify.SignInWithShop || {};
1173  window.Shopify.SignInWithShop.assetMetrics = { sampleRate: 0.25 };
1174  window.Shopify.SignInWithShop.eligible = true;
1175</script>
vendor: 1 bytes, line 1175
1175
1176<script id="shop-js-analytics" type="application/json">{"pageType":"page"}</script>
vendor: 1 bytes, line 1176
1176
1177<script defer="defer" async type="module" src="https://cdn.shopify.com/shopifycloud/shop-js/modules/v2/loader.init-shop-cart-sync.en.esm.js"></script>
vendor: 1 bytes, line 1177
1177
1178<script type="module">
1179  await import("https://cdn.shopify.com/shopifycloud/shop-js/modules/v2/loader.init-shop-cart-sync.en.esm.js");
1180
1181  window.Shopify.SignInWithShop?.initShopCartSync?.({"fedCMEnabled":true,"windoidEnabled":true});
1182
1183</script>
vendor: 1 bytes, line 1183
1183
1184<script>
1185  window.Shopify = window.Shopify || {};
1186  if (!window.Shopify.featureAssets) window.Shopify.featureAssets = {};
1187  window.Shopify.featureAssets['shop-js'] = {"avatar":["modules/v2/loader.avatar.en.esm.js"],"checkout-modal":["modules/v2/loader.checkout-modal.en.esm.js"],"init-customer-accounts-sign-up":["modules/v2/loader.init-customer-accounts-sign-up.en.esm.js"],"init-customer-accounts":["modules/v2/loader.init-customer-accounts.en.esm.js"],"init-fed-cm":["modules/v2/loader.init-fed-cm.en.esm.js"],"init-shop-cart-sync":["modules/v2/loader.init-shop-cart-sync.en.esm.js"],"init-shop-email-lookup-coordinator":["modules/v2/loader.init-shop-email-lookup-coordinator.en.esm.js"],"init-shop-for-new-customer-accounts":["modules/v2/loader.init-shop-for-new-customer-accounts.en.esm.js"],"init-shop-user-recognition":["modules/v2/loader.init-shop-user-recognition.en.esm.js"],"init-windoid":["modules/v2/loader.init-windoid.en.esm.js"],"lead-capture":["modules/v2/loader.lead-capture.en.esm.js"],"listener":["modules/v2/loader.listener.en.esm.js"],"pay-button":["modules/v2/loader.pay-button.en.esm.js"],"payment-terms":["modules/v2/loader.payment-terms.en.esm.js"],"shop-button":["modules/v2/loader.shop-button.en.esm.js"],"shop-cart-sync":["modules/v2/loader.shop-cart-sync.en.esm.js"],"shop-cash-offers":["modules/v2/loader.shop-cash-offers.en.esm.js"],"shop-follow-button":["modules/v2/loader.shop-follow-button.en.esm.js"],"shop-login-button":["modules/v2/loader.shop-login-button.en.esm.js"],"shop-login":["modules/v2/loader.shop-login.en.esm.js"],"shop-toast-manager":["modules/v2/loader.shop-toast-manager.en.esm.js"],"shop-user-recognition":["modules/v2/loader.shop-user-recognition.en.esm.js"]};
1188</script>
vendor: 1 bytes, line 1188
1188
1189<script>(function() {
1190  var isLoaded = false;
1191  function asyncLoad() {
1192    if (isLoaded) return;
1193    isLoaded = true;
1194    var urls = ["https:\/\/bawa-toni-shah-shop.myshopify.com\/apps\/delivery\/delivery_coder.js?t=1711784827.8093\u0026n=551513619\u0026shop=bawa-toni-shah-shop.myshopify.com"];
1195    for (var i = 0; i < urls.length; i++) {
1196      var s = document.createElement('script');
1197      s.type = 'text/javascript';
1198      s.async = true;
1199      s.src = urls[i];
1200      var x = document.getElementsByTagName('script')[0];
1201      x.parentNode.insertBefore(s, x);
1202    }
1203  };
1204  if(window.attachEvent) {
1205    window.attachEvent('onload', asyncLoad);
1206  } else {
1207    window.addEventListener('load', asyncLoad, false);
1208  }
1209})();</script>
vendor: 1 bytes, line 1209
1209
1210<script id="__st">var __st={"a":72107720994,"offset":18000,"reqid":"2aeee7db-0b7b-4b8c-8e50-4ca64cc341e9-1790994868","pageurl":"islamiccharts.com\/pages\/about","s":"pages-111639953698","u":"defd5a2283e6","p":"page","rtyp":"page","rid":111639953698};</script>
vendor: 1 bytes, line 1210
1210
1211<script>window.ShopifyPaypalV4VisibilityTracking = true;</script>
vendor: 1 bytes, line 1211
1211
1212<script id="captcha-bootstrap">!function(){'use strict';const t='contact',e='account',n='new_comment',o=[[t,t],['blogs',n],['comments',n],[t,'customer']],c=[[e,'customer_login'],[e,'guest_login'],[e,'recover_customer_password'],[e,'create_customer']],r=t=>t.map((([t,e])=>`form[action*='/${t}']:not([data-nocaptcha='true']) input[name='form_type'][value='${e}']`)).join(','),a=t=>()=>t?[...document.querySelectorAll(t)].map((t=>t.form)):[];function s(){const t=[...o],e=r(t);return a(e)}const i='password',u='form_key',d=['recaptcha-v3-token','g-recaptcha-response','h-captcha-response',i],f=()=>{try{return window.sessionStorage}catch{return}},m='__shopify_v',_=t=>t.elements[u];function p(t,e,n=!1){try{const o=window.sessionStorage,c=JSON.parse(o.getItem(e)),{data:r}=function(t){const{data:e,action:n}=t;return t[m]||n?{data:e,action:n}:{data:t,action:n}}(c);for(const[e,n]of Object.entries(r))t.elements[e]&&(t.elements[e].value=n);n&&o.removeItem(e)}catch(o){console.error('form repopulation failed',{error:o})}}const l='form_type',E='cptcha';function T(t){t.dataset[E]=!0}const w=window,h=w.document,L='Shopify',v='ce_forms',y='captcha';let A=!1;((t,e)=>{const n=(g='f06e6c50-85a8-45c8-87d0-21a2b65856fe',I='https://cdn.shopify.com/shopifycloud/storefront-forms-hcaptcha/ce_storefront_forms_captcha_hcaptcha.v1.5.3.iife.js',D={infoText:'Protected by hCaptcha',privacyText:'Privacy',termsText:'Terms'},(t,e,n)=>{const o=w[L][v],c=o.bindForm;if(c)return c(t,g,e,D).then(n);var r;o.q.push([[t,g,e,D],n]),r=I,A||(h.body.append(Object.assign(h.createElement('script'),{id:'captcha-provider',async:!0,src:r})),A=!0)});var g,I,D;w[L]=w[L]||{},w[L][v]=w[L][v]||{},w[L][v].q=[],w[L][y]=w[L][y]||{},w[L][y].protect=function(t,e){n(t,void 0,e),T(t)},Object.freeze(w[L][y]),function(t,e,n,w,h,L){const[v,y,A,g]=function(t,e,n){const i=e?o:[],u=t?c:[],d=[...i,...u],f=r(d),m=r(i),_=r(d.filter((([t,e])=>n.includes(e))));return[a(f),a(m),a(_),s()]}(w,h,L),I=t=>{const e=t.target;return e instanceof HTMLFormElement?e:e&&e.form},D=t=>v().includes(t);t.addEventListener('submit',(t=>{const e=I(t);if(!e)return;const n=D(e)&&!e.dataset.hcaptchaBound&&!e.dataset.recaptchaBound,o=_(e),c=g().includes(e)&&(!o||!o.value);(n||c)&&t.preventDefault(),c&&!n&&(function(t){try{if(!f())return;!function(t){const e=f();if(!e)return;const n=_(t);if(!n)return;const o=n.value;o&&e.removeItem(o)}(t);const e=Array.from(Array(32),(()=>Math.random().toString(36)[2])).join('');!function(t,e){_(t)||t.append(Object.assign(document.createElement('input'),{type:'hidden',name:u})),t.elements[u].value=e}(t,e),function(t,e){const n=f();if(!n)return;const o=[...t.querySelectorAll(`input[type='${i}']`)].map((({name:t})=>t)),c=[...d,...o],r={};for(const[a,s]of new FormData(t).entries())c.includes(a)||(r[a]=s);n.setItem(e,JSON.stringify({[m]:1,action:t.action,data:r}))}(t,e)}catch(e){console.error('failed to persist form',e)}}(e),e.submit())}));const S=(t,e)=>{t&&!t.dataset[E]&&(n(t,e.some((e=>e===t))),T(t))};for(const o of['focusin','change'])t.addEventListener(o,(t=>{const e=I(t);D(e)&&S(e,y())}));const B=e.get('form_key'),M=e.get(l),P=B&&M;t.addEventListener('DOMContentLoaded',(()=>{const t=y();if(P)for(const e of t)e.elements[l].value===M&&p(e,B);[...new Set([...A(),...v().filter((t=>'true'===t.dataset.shopifyCaptcha))])].forEach((e=>S(e,t)))}))}(h,new URLSearchParams(w.location.search),n,t,e,['guest_login'])})(!0,!0)}();</script>
vendor: 1 bytes, line 1212
1212
1213<script integrity="sha256-JjoPp5ZfB1sSAs5SQaol1x1GgvveM+BgmRzyDexInEQ=" data-source-attribution="shopify.loadfeatures" defer="defer" src="//islamiccharts.com/cdn/shopifycloud/storefront/assets/storefront/load_feature-1bd60354.js" crossorigin="anonymous"></script>
vendor: 1 bytes, line 1213
1213
1214<script>(function () {var userAgent = navigator.userAgent;var platform = navigator.platform;var maxTouchPoints = navigator.maxTouchPoints || 0;var isIOS = /iPad|iPhone|iPod/.test(platform) || (platform === 'MacIntel' && maxTouchPoints > 1);var isMacSafari = platform.indexOf('Mac') === 0 && /Safari/.test(userAgent) && !/Chrome|Chromium|CriOS|FxiOS|Edg|OPR|Android/.test(userAgent);var isAppleSafari = isIOS || isMacSafari;if (isAppleSafari) {fetch('/sf_private_access_tokens' + location.search).catch(function () {});}function browserMajorVersion(pattern) {var match = userAgent.match(pattern);return match ? parseInt(match[1], 10) : null;}function shouldLoadAutosizesPolyfill() {if (!window.PerformanceObserver?.supportedEntryTypes?.includes('paint')) {return false;}var chromeVersion = browserMajorVersion(/Chrome\/(\d+)/);if (chromeVersion !== null) {return chromeVersion < 126;}var firefoxVersion = browserMajorVersion(/Firefox\/(\d+)/);if (firefoxVersion !== null) {return firefoxVersion < 150;}var safariVersion = isAppleSafari ? browserMajorVersion(/Version\/(\d+).*Safari\//) : null;if (safariVersion !== null) {return safariVersion < 27;}return true;}if (shouldLoadAutosizesPolyfill()) {var autosizesScript = document.createElement('script');autosizesScript.async = true;autosizesScript.crossOrigin = 'anonymous';autosizesScript.src = "//islamiccharts.com/cdn/shopifycloud/storefront/assets/storefront/autosizes-84416378.js";(document.head || document.documentElement).appendChild(autosizesScript);}window.ShopifyAnalytics = window.ShopifyAnalytics || {};window.ShopifyAnalytics.performance = window.ShopifyAnalytics.performance || {};(function () {var LONG_FRAME_THRESHOLD = 50;var longAnimationFrames = [];var activeRafId = null;function collectLongFrames() {var previousTime = null;function rafMonitor(now) {if (activeRafId === null) {return;}var delta = now - previousTime;if (delta > LONG_FRAME_THRESHOLD) {longAnimationFrames.push({startTime: previousTime,endTime: now,});}previousTime = now;activeRafId = requestAnimationFrame(rafMonitor);}previousTime = performance.now();activeRafId = requestAnimationFrame(rafMonitor);}if (!window.PerformanceObserver?.supportedEntryTypes?.includes('long-animation-frame')) {collectLongFrames();var timeoutId = setTimeout(function () {cancelAnimationFrame(activeRafId);}, 10000);window.ShopifyAnalytics.performance.getLongAnimationFrames = function (stopCollection) {if (stopCollection === undefined) {stopCollection = false;}if (stopCollection) {clearTimeout(timeoutId);cancelAnimationFrame(activeRafId);}return longAnimationFrames;};}})();})();</script>
1214<script id="shopify-origin-trials" async="async" integrity="sha256-qJbe/jEZBHtr5W/BlA2cKAz3vkXu6vJQyLjgvgCC86g=" src="//cdn.shopify.com/shopifycloud/storefront/assets/storefront/origin_trials-318ab40a.js" crossorigin="anonymous" onload="window.__shopifyOriginTrialsDone = true" onerror="window.__shopifyOriginTrialsDone = true"></script>
vendor: 1 bytes, line 1214
1214
1215<script>
1216  window.Shopify = window.Shopify || {};
1217  window.Shopify.MCP = window.Shopify.MCP || {};
1218  window.Shopify.MCP.enabled = true;
1219  window.Shopify.MCP.shop = "bawa-toni-shah-shop.myshopify.com";
1220  window.Shopify.MCP.mcpEndpoint = "https:\/\/islamiccharts.com\/api\/mcp";
1221  window.Shopify.MCP.tools = [{"name":"search_shop_policies_and_faqs","description":"Used to get facts about the stores policies, products, or services.\nSome examples of questions you can ask are:\n  - What is your return policy?\n  - What is your shipping policy?\n  - What is your phone number?\n  - What are your hours of operation?\"\n","inputSchema":{"$schema":"https:\/\/json-schema.org\/draft\/2020-12\/schema","type":"object","properties":{"query":{"type":"string","description":"A natural language query."},"context":{"type":"string","description":"Additional information about the request such as user demographics, mood, location, or other relevant details that could help in tailoring the response appropriately."}},"required":["query"]}}];
1222</script>
vendor: 1 bytes, line 1222
1222
1223<script>(()=>{var d="shopify:webmcp_adapter_loaded",n=Symbol.for("shopify.webmcp_adapter_loading");function s(c,a,{win:r=window,doc:o=document}={}){function p(){try{return r.localStorage.getItem(d)==="true"}catch{return!1}}function l(){try{r.localStorage.setItem(d,"true")}catch{}}function u(){return typeof(o.modelContext||r.navigator?.modelContext)?.registerTool=="function"}function f(){if(r[n]||!u())return;let t=o.head||o.getElementsByTagName("head")[0];if(!t)return;let e=o.createElement("script");e.type="module",e.crossOrigin="anonymous",a&&(e.integrity=a),e.src=c,e.addEventListener("load",l,{once:!0}),e.addEventListener("error",()=>{r[n]=!1},{once:!0}),t.appendChild(e),r[n]=!0}function _(t){let e=o.getElementById("shopify-origin-trials");if(!e||r.__shopifyOriginTrialsDone){t();return}e.addEventListener("load",t,{once:!0}),e.addEventListener("error",t,{once:!0})}function i(){_(()=>r.setTimeout(f,0))}function m(){o.addEventListener("DOMContentLoaded",i,{once:!0})}p()?i():m()}s("\/\/islamiccharts.com\/cdn\/shopifycloud\/storefront\/assets\/storefront\/webmcp-c6b62ece.js","sha256-ke4DDuBjdvea3vxLWxHc9E9nq8zihuG4IfYEGbb77ys=");})();
1224</script>
vendor: 1 bytes, line 1224
1224
1225<script data-source-attribution="shopify.dynamic_checkout.dynamic.init">var Shopify=Shopify||{};Shopify.PaymentButton=Shopify.PaymentButton||{isStorefrontPortableWallets:!0,init:function(){window.Shopify.PaymentButton.init=function(){};var t=document.createElement("script");t.src="https://islamiccharts.com/cdn/shopifycloud/portable-wallets/latest/portable-wallets.en.js",t.type="module",document.head.appendChild(t)}};
1226</script>
vendor: 1 bytes, line 1226
1226
1227<script data-source-attribution="shopify.dynamic_checkout.buyer_consent">
1228  function portableWalletsHideBuyerConsent(e){var t=document.getElementById("shopify-buyer-consent"),n=document.getElementById("shopify-subscription-policy-button");t&&n&&(t.classList.add("hidden"),t.setAttribute("aria-hidden","true"),n.removeEventListener("click",e))}function portableWalletsShowBuyerConsent(e){var t=document.getElementById("shopify-buyer-consent"),n=document.getElementById("shopify-subscription-policy-button");t&&n&&(t.classList.remove("hidden"),t.removeAttribute("aria-hidden"),n.addEventListener("click",e))}window.Shopify?.PaymentButton&&(window.Shopify.PaymentButton.hideBuyerConsent=portableWalletsHideBuyerConsent,window.Shopify.PaymentButton.showBuyerConsent=portableWalletsShowBuyerConsent);
1229</script>
vendor: 1 bytes, line 1229
1229
1230<script data-source-attribution="shopify.dynamic_checkout.cart.bootstrap">document.addEventListener("DOMContentLoaded",(function(){function t(){return document.querySelector("shopify-accelerated-checkout-cart, shopify-accelerated-checkout")}if(t())Shopify.PaymentButton.init();else{new MutationObserver((function(e,n){t()&&(Shopify.PaymentButton.init(),n.disconnect())})).observe(document.body,{childList:!0,subtree:!0})}}));
1231</script>
vendor: 1 bytes, line 1231
1231
1232<script id='scb4127' type='text/javascript' async='' src='https://islamiccharts.com/cdn/shopifycloud/privacy-banner/storefront-banner.js'></script>
1232<link rel="stylesheet" media="screen" href="//islamiccharts.com/cdn/shop/t/20/compiled_assets/styles.css?v=17900344091035481021790012472">
1233<script id="shopify-cfh-end">window.performance && window.performance.mark && window.performance.mark('shopify.content_for_header.end');</script>
1233
1234  <!-- BEGIN app block: shopify://apps/c-edd-estimated-delivery-date/blocks/app_setting/4a0685bc-c234-45b2-8382-5ad6a8e3e3fd -->
1234<script>
1235    window.deliveryCommon = window.deliveryCommon || {};
1236    window.deliveryCommon.setting = {};
1237    Object.assign(window.deliveryCommon.setting, {
1238        "shop_currency_code__ed": 'PKR' || 'USD',
1239        "shop_locale_code__ed": 'en' || 'en',
1240        "shop_domain__ed":  'bawa-toni-shah-shop.myshopify.com',
1241        "product_available__ed": '',
1242        "product_id__ed": ''
1243    });
1244    window.deliveryED = window.deliveryED || {};
1245    window.deliveryED.setting = {};
1246    Object.assign(window.deliveryED.setting, {
1247        "delivery__app_setting": {"main_delivery_setting":{"is_active":1,"order_delivery_info":"\u003cp\u003e🚚 \u003cstrong\u003eTCS Express\u003c\/strong\u003e: Free Delivery in 2-4 Days\u003c\/p\u003e","is_ignore_out_of_stock":0,"out_of_stock_mode":0,"out_of_stock_info":"\u003cp\u003e\u003c\/p\u003e","order_progress_bar_mode":1,"order_progress_setting":{"ordered":{"svg_number":8,"title":"Order Now","tips_description":"After you place the order, we will need 1-2 days to prepare the shipment."},"order_ready":{"svg_number":4,"is_active":1,"title":"Shipped","date_title":"{order_ready_minimum_date} - {order_ready_maximum_date}","tips_description":"Orders will start to be shipped..."},"order_delivered":{"svg_number":10,"title":"Delivered","date_title":"{order_delivered_minimum_date} - {order_delivered_maximum_date}","tips_description":"Estimated arrival date range:{order_delivered_minimum_date} - {order_delivered_maximum_date}"}},"order_delivery_work_week":[0,1,1,1,1,1,1],"order_delivery_day_range":[2,4],"order_delivery_calc_method":0,"order_ready_work_week":[0,1,1,1,1,1,1],"order_ready_day_range":[0,1],"order_ready_calc_method":2,"holiday":[],"order_delivery_date_format":0,"delivery_date_custom_format":"{month_local} {day}","delivery_date_format_zero":0,"delivery_date_format_month_translate":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"delivery_date_format_week_translate":["Sun","Mon","Tues","Wed","Thur","Fri","Sat"],"order_delivery_countdown_format":0,"delivery_countdown_custom_format":"{hours} {hours_local} {minutes} {minutes_local} {seconds} {seconds_local}","countdown_format_translate":["Hours","Minutes","Seconds"],"delivery_countdown_format_zero":0,"countdown_cutoff_hour":0,"countdown_cutoff_minute":0,"countdown_cutoff_advanced_enable":0,"countdown_cutoff_advanced":[[23,59],[23,59],[23,59],[23,59],[23,59],[23,59],[23,59]],"countdown_mode":0,"after_deadline_hide_widget":0,"timezone_mode":0,"timezone":5,"todayandtomorrow":[{"lan_code":"en","lan_name":"English","left":"today","right":"tomorrow"}],"translate_country_name":[],"widget_layout_mode":0,"widget_placement_method":1,"widget_placement_position":0,"widget_placement_page":1,"widget_margin":[12,0,0,0],"message_text_widget_appearance_setting":{"border":{"border_width":1,"border_radius":4,"border_line":1},"color":{"text_color":"#000000","background_color":"#FFFFFF","border_color":"#E2E2E2"},"other":{"margin":[0,0,0,0],"padding":[10,10,10,10]}},"progress_bar_widget_appearance_setting":{"color":{"basic":{"icon_color":"#000000","icon_background_color":"#FFFFFF","order_status_title_color":"#000000","date_title_color":"#000000"},"advanced":{"order_status_title_color":"#000000","progress_line_color":"#000000","date_title_color":"#000000","description_tips_background_color":"#000000","icon_background_color":"#000000","icon_color":"#FFFFFF","description_tips_color":"#cacaca"}},"font":{"icon_font":20,"order_status_title_font":14,"date_title_font":14,"description_tips_font":14},"other":{"margin":[8,0,0,0]}},"show_country_mode":0,"arrow_down_position":0,"country_modal_background_rgba":[0,0,0,0.5],"country_modal_appearance_setting":{"color":{"text_color":"#000000","background_color":"#FFFFFF","icon_color":"#999999","selected_color":"#f2f2f2"},"border":{"border_radius":7},"font":{"text_font":16,"icon_font":16},"other":{"width":56}},"cart_form_mode":0,"cart_form_position":0,"product_form_position":0,"out_of_stock_product_form_position":0,"cart_checkout_status":1,"cart_checkout_title":"Estimated between","cart_checkout_description":"{order_delivered_minimum_date} and {order_delivered_maximum_date}","widget_custom_css":"","replace_jq":0,"jquery_version":"1.12.0","is_ignore_cookie_cache":0,"is_show_all":0,"p_mapping":11,"product_ids":["8121301008674"]}},
1248        "delivery__pro_setting": null,
1249        "delivery__cate_setting": null
1250    });
1251</script>
1251
1252
1253<script src="https://cdn.shopify.com/s/files/1/0654/5637/3996/files/delivery_coder_cc698f59-3829-49b3-8fa2-f9ef0ba024af.js?v=1767391130&t=1088" defer></script>
1253
1254
1255<!-- END app block -->
1255<script src="https://cdn.shopify.com/extensions/019ed19c-36f8-7d67-80aa-26a81480f6dd/webse-wp-button-v2-16/assets/whatsapp-free-button.js" type="text/javascript" defer="defer"></script>
1255
1256<link href="https://cdn.shopify.com/extensions/019ed19c-36f8-7d67-80aa-26a81480f6dd/webse-wp-button-v2-16/assets/whatsapp-free-button.css" rel="stylesheet" type="text/css" media="all">
1257<script src="https://cdn.shopify.com/extensions/01a0fdff-2b95-7a42-80bb-495e663795ed/forms-2610/assets/shopify-forms-loader.js" type="text/javascript" defer="defer"></script>
1257
1258<link href="https://cdn.shopify.com/extensions/019b80c0-5ba7-77ab-a728-75e1a0ebedc6/c-edd-estimated-delivery-date-27/assets/delivery_coder.css" rel="stylesheet" type="text/css" media="all">
1259<script src="https://cdn.shopify.com/extensions/01a06a4c-d8d4-72bf-ad54-105a8b9eb96d/doran-product-reviews-1788489800/assets/pr-sdk.js" type="text/javascript" defer="defer"></script>
1259
1260<link href="https://monorail-edge.shopifysvc.com" rel="dns-prefetch">
1261<script>(function(){if ("sendBeacon" in navigator && "performance" in window) {try {var session_token_from_headers = performance.getEntriesByType('navigation')[0].serverTiming.find(x => x.name == '_s').description;} catch {var session_token_from_headers = undefined;}var session_cookie_matches = document.cookie.match(/_shopify_s=([^;]*)/);var session_token_from_cookie = session_cookie_matches && session_cookie_matches.length === 2 ? session_cookie_matches[1] : "";var session_token = session_token_from_headers || session_token_from_cookie || "";function handle_abandonment_event(e) {var entries = performance.getEntries().filter(function(entry) {return /monorail-edge.shopifysvc.com/.test(entry.name);});if (!window.abandonment_tracked && entries.length === 0) {window.abandonment_tracked = true;var currentMs = Date.now();var navigation_start = performance.timing.navigationStart;var payload = {shop_id: 72107720994,url: window.location.href,navigation_start,duration: currentMs - navigation_start,session_token,page_type: "page"};window.navigator.sendBeacon("https://monorail-edge.shopifysvc.com/v1/produce", JSON.stringify({schema_id: "online_store_buyer_site_abandonment/1.1",payload: payload,metadata: {event_created_at_ms: currentMs,event_sent_at_ms: currentMs}}));}}window.addEventListener('pagehide', handle_abandonment_event);}}());</script>
vendor: 1 bytes, line 1261
1261
1262<script>
1263  window.__TREKKIE_SHIM_QUEUE = window.__TREKKIE_SHIM_QUEUE || [];
1264</script>
vendor: 1 bytes, line 1264
1264
1265<script>(function(){var wpmLoader=function(){"use strict";var e=/Googlebot|Storebot-Google|bingbot|Baiduspider|YandexBot|DuckDuckBot|Slurp|facebookexternalhit|Twitterbot|LinkedInBot|Applebot|AdsBot-Google|Mediapartners-Google|APIs-Google|PetalBot|SemrushBot|AhrefsBot|MJ12bot|DotBot|Acunetix|PerplexityBot|Perplexity-User/i,t=/bytedance/i;function i(){try{var e=document.cookie;if(!e||"string"!=typeof e)return;for(var t=0,i=e.split(";");t<i.length;t++){var n=i[t],r=n.indexOf("=");if(-1!==r){var o=n.slice(0,r).trim();if(o){var a=void 0;try{a=decodeURIComponent(o)}catch(e){a=o}if("_shopify_s"===a){var d=n.slice(r+1).trim();try{return decodeURIComponent(d)}catch(e){return d}}}}}return}catch(e){return}}function n(e){try{"undefined"!=typeof console&&"function"==typeof console.warn&&console.warn(e)}catch(e){}}function r(e,t){return"string"==typeof e&&e.length>0&&e.length<=t?e:void 0}function o(e){var t;switch(null==(t=null==e?void 0:e.navigation)?void 0:t.type){case 0:return"navigate";case 1:return"reload";case 2:return"back_forward";default:return}}function a(){var e,t,i;try{var n=null==(i=null==(t=null==(e=self.ShopifyAnalytics)?void 0:e.lib)?void 0:t.trekkie)?void 0:i.state;return"awaiting-consent"===n||"initialized"===n?n:void 0}catch(e){return}}return function(d,s,u,l){var c=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};try{var p=c.trekkieShim;!0!==p&&"true"!==p||null!=window.__TREKKIE_SHIM_QUEUE||(window.__TREKKIE_SHIM_QUEUE=[])}catch(e){}var f,v,h,y,g=(v=(f={modern:/Edge?\/(1{2}[4-9]|1[2-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Firefox\/(1{2}[4-9]|1[2-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Chrom(ium|e)\/(9{2}|\d{3,})\.\d+(\.\d+|)|(Maci|X1{2}).+ Version\/(15\.\d+|(1[6-9]|[2-9]\d|\d{3,})\.\d+)([,.]\d+|)( \(\w+\)|)( Mobile\/\w+|) Safari\/|Chrome.+OPR\/(9{2}|\d{3,})\.\d+\.\d+|(CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS|CPU iPad OS)[ +]+(15[._]\d+|(1[6-9]|[2-9]\d|\d{3,})[._]\d+)([._]\d+|)|Android:?[ /-](14[89]|1[5-9]\d|[2-9]\d{2}|\d{4,})(\.\d+|)(\.\d+|)|Android.+Firefox\/(15\d|1[6-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Android.+Chrom(ium|e)\/(14[89]|1[5-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|SamsungBrowser\/([2-9]\d|\d{3,})\.\d+/,legacy:/Edge?\/(1[6-9]|[2-9]\d|\d{3,})\.\d+(\.\d+|)|Firefox\/(5[4-9]|[6-9]\d|\d{3,})\.\d+(\.\d+|)|Chrom(ium|e)\/(5[1-9]|[6-9]\d|\d{3,})\.\d+(\.\d+|)([\d.]+$|.*Safari\/(?![\d.]+ Edge\/[\d.]+$))|(Maci|X1{2}).+ Version\/(10\.\d+|(1[1-9]|[2-9]\d|\d{3,})\.\d+)([,.]\d+|)( \(\w+\)|)( Mobile\/\w+|) Safari\/|Chrome.+OPR\/(3[89]|[4-9]\d|\d{3,})\.\d+\.\d+|(CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS|CPU iPad OS)[ +]+(10[._]\d+|(1[1-9]|[2-9]\d|\d{3,})[._]\d+)([._]\d+|)|Android:?[ /-](14[89]|1[5-9]\d|[2-9]\d{2}|\d{4,})(\.\d+|)(\.\d+|)|Mobile Safari.+OPR\/([89]\d|\d{3,})\.\d+\.\d+|Android.+Firefox\/(15\d|1[6-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Android.+Chrom(ium|e)\/(14[89]|1[5-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Android.+(UC? ?Browser|UCWEB|U3)[ /]?(15\.([5-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+)\.\d+|SamsungBrowser\/(5\.\d+|([6-9]|\d{2,})\.\d+)|Android.+MQ{2}Browser\/(14(\.(9|\d{2,})|)|(1[5-9]|[2-9]\d|\d{3,})(\.\d+|))(\.\d+|)|K[Aa][Ii]OS\/(3\.\d+|([4-9]|\d{2,})\.\d+)(\.\d+|)/}).modern,h=f.legacy,(y=navigator.userAgent).match(e)?"bot":y.match(v)?"modern":y.match(h)?"legacy":y.match(t)?"bot":"unknown"),m=function(e){var t,i,n=r(e,128);try{var a=window.performance,d=null==(t=null==a?void 0:a.getEntriesByType)?void 0:t.call(a,"navigation")[0];if(!d)return{requestId:n,navigationType:o(a)};var s="type"in d?r(d.type,64):void 0,u="serverTiming"in d&&Array.isArray(d.serverTiming)?d.serverTiming:[];return{requestId:null!=n?n:r(null==(i=u.find(function(e){return"requestID"===e.name}))?void 0:i.description,128),navigationType:s}}catch(e){return{requestId:n}}}(c.requestId),w=function(e){var t=e.version,r=e.browserTarget,o=e.surface,a=e.shopId,d=e.monorailEndpoint,s=window.location.href;return{emit:function(e){var u=e.status,l=e.errorMsg,c=e.failureReason,p=e.useKeepaliveFallback,f=void 0!==p&&p,v=e.navigationType,h=e.pagehidePersisted,y=e.requestId,g=e.trekkieState;if(d){var m,w;try{var b=(new Date).getTime();m=JSON.stringify({metadata:{event_sent_at_ms:b},events:[{schema_id:"web_pixels_manager_load/3.3",payload:{version:t,bundle_target:r,page_url:s,status:u,surface:o,error_msg:l,failure_reason:c,navigation_type:v,pagehide_persisted:h,request_id:y,trekkie_state:g,shop_id:a,visit_token:i()},metadata:{event_created_at_ms:b}}]})}catch(e){return}try{if("function"==typeof window.navigator.sendBeacon&&-1===(w=window.navigator.userAgent).indexOf("iPhone; CPU iPhone OS 12_")&&-1===w.indexOf("iPad; CPU OS 12_")&&-1===w.indexOf("iPod touch; CPU iPhone OS 12_")&&window.navigator.sendBeacon.bind(window.navigator)(d,m))return}catch(e){}if(f)try{"function"==typeof window.fetch&&window.fetch(d,{method:"POST",headers:{"Content-Type":"text/plain"},body:m,keepalive:!0}
1265).catch(function(){})}catch(e){}else try{var _=new XMLHttpRequest;_.open("POST",d,!0),_.setRequestHeader("Content-Type","text/plain"),_.send(m)}catch(e){n("[Web Pixels Manager] Got an unhandled error while logging to Monorail.")}}else n("[Web Pixels Manager] No Monorail endpoint provided, skipping logging.")}}}({version:u,browserTarget:g,surface:d.surface,shopId:d.shopId,monorailEndpoint:d.monorailEndpoint});if(Boolean(null==(_=null==(b=window.Shopify)?void 0:b.analytics)?void 0:_.replayQueue))w.emit({status:"setup-skipped",errorMsg:"replay queue already initialized."});else{var b,_;w.emit({status:"setup-started"}),window.Shopify=window.Shopify||{};var S=window.Shopify;S.analytics=S.analytics||{};var P=S.analytics;P.replayQueue=[],P.publish=function(e,t,i){return P.replayQueue.push([e,t,i]),!0};try{self.performance.mark("wpm:start")}catch(e){}var k,C="modern"===g?"modern":"legacy",E=(null!=l?l:{modern:"",legacy:""})[C],I=[(k={baseUrl:s,hashVersion:u,buildTarget:C}).baseUrl,"/wpm","/b",k.hashVersion,"modern"===k.buildTarget?"m":"l",".js"].join(""),O=!1,T=!1;try{c.browserTarget=g,function(){O=!0;try{window.addEventListener("pagehide",M)}catch(e){O=!1}}(),R(function(){try{R(x)}catch(e){D(e)}}),w.emit({status:"loading",requestId:m.requestId,navigationType:m.navigationType,trekkieState:a()})}catch(e){D(e)}}function U(){var e;if(q(),!function(){var e,t;return Boolean(null==(t=null==(e=window.Shopify)?void 0:e.analytics)?void 0:t.initialized)}()){var t,i,n;try{if("function"!=typeof(null==(e=window.webPixelsManager)?void 0:e.init))return void A();if(!(null!==(n=i=t=window.webPixelsManager.init(d))&&"function"!=typeof n&&Object(n)===n&&"publish"in i&&"function"==typeof i.publish&&"publishCustomEvent"in i&&"function"==typeof i.publishCustomEvent&&"visitor"in i&&"function"==typeof i.visitor))return void A()}catch(e){return void A(e)}var r=window.Shopify.analytics;r.replayQueue.forEach(function(e){var i=e[0],n=e[1],r=e[2];t.publishCustomEvent(i,n,r)}),r.replayQueue=[],r.publish=t.publishCustomEvent,r.visitor=t.visitor,r.initialized=!0}}function A(e){B("manager_api_unavailable",void 0===e?void 0:Q(e))}function x(){B("script_load_failed","".concat(I," has failed to load"))}function B(e,t){T||(T=!0,q(),w.emit({status:"failed",errorMsg:t,failureReason:e,requestId:m.requestId,navigationType:m.navigationType,trekkieState:a()}))}function M(e){O&&(q(),w.emit({status:"pagehide-while-loading",useKeepaliveFallback:!0,pagehidePersisted:e.persisted,requestId:m.requestId,navigationType:m.navigationType,trekkieState:a()}))}function q(){O=!1;try{window.removeEventListener("pagehide",M)}catch(e){}}function R(e){var t;!function(e){var t=e.src,i=e.async,n=void 0===i||i,r=e.onload,o=e.onerror,a=e.sri,d=e.scriptDataAttributes,s=void 0===d?{}:d,u=document.createElement("script"),l=document.querySelector("head"),c=document.querySelector("body");if(u.async=n,u.src=t,a&&(u.integrity=a,u.crossOrigin="anonymous"),s)for(var p in s)if(Object.prototype.hasOwnProperty.call(s,p))try{u.dataset[p]=String(s[p])}catch(e){}if(r&&u.addEventListener("load",r),o&&u.addEventListener("error",o),l)l.appendChild(u);else{if(!c)throw new Error("Did not find a head or body element to append the script");c.appendChild(u)}}({src:I,async:!0,onload:U,onerror:e,sri:(t=E,"string"==typeof t&&/^sha384-[A-Za-z0-9+/=]+$/.test(t)?E:""),scriptDataAttributes:c})}function D(e){B("script_append_failed",Q(e))}function Q(e){return e instanceof Error?e.message:"Unknown error"}}}();wpmLoader({shopId: 72107720994,storefrontBaseUrl: "https://islamiccharts.com",extensionsBaseUrl: "https://extensions.shopifycdn.com/cdn/shopifycloud/web-pixels-manager",monorailEndpoint: "https://islamiccharts.com/.well-known/shopify/monorail/unstable/produce_batch",surface: "storefront-renderer",enabledBetaFlags: ["4c64608a","16072cab","8450a54b","7ee89bf1"],webPixelsConfigList: [{"id":"2550104354","configuration":"{\"config\":\"{\\\"google_tag_ids\\\":[\\\"GT-K8GX224R\\\"],\\\"target_country\\\":\\\"ZZ\\\",\\\"gtag_events\\\":[{\\\"type\\\":\\\"view_item\\\",\\\"action_label\\\":\\\"MC-TCS0254NRX\\\"},{\\\"type\\\":\\\"purchase\\\",\\\"action_label\\\":\\\"MC-TCS0254NRX\\\"},{\\\"type\\\":\\\"page_view\\\",\\\"action_label\\\":\\\"MC-TCS0254NRX\\\"}],\\\"enable_monitoring_mode\\\":false}\"}","eventPayloadVersion":"v1","runtimeContext":"OPEN","scriptVersion":"a3321ca85cf5aaf6b57585fcd8d67b3a","type":"APP","apiClientId":1780363,"privacyPurposes":[],"dataSharingAdjustments":{"protectedCustomerApprovalScopes":["read_customer_address","read_customer_email","read_customer_name","read_customer_personal_data","read_customer_phone"],"dataSharingControls":["share_all_events"]}
1265,"dataSharingState":"unrestricted","enabledFlags":["9a3ed68a"]},{"id":"2505802018","configuration":"{\"pixelCode\":\"D562TJRC77U314HS2650\"}","eventPayloadVersion":"v1","runtimeContext":"STRICT","scriptVersion":"22e92c2ad45662f435e4801458fb78cc","type":"APP","apiClientId":4383523,"privacyPurposes":["ANALYTICS","MARKETING","SALE_OF_DATA"],"dataSharingAdjustments":{"protectedCustomerApprovalScopes":["read_customer_address","read_customer_email","read_customer_name","read_customer_personal_data","read_customer_phone"],"dataSharingControls":["share_all_events"]},"dataSharingState":"unrestricted"},{"id":"2459173154","configuration":"{\"pixel_id\":\"1270907331758566\",\"pixel_type\":\"facebook_pixel\"}","eventPayloadVersion":"v1","runtimeContext":"OPEN","scriptVersion":"96420dbe9ea96c426a1b7f364f977719","type":"APP","apiClientId":2329312,"privacyPurposes":["ANALYTICS","MARKETING","SALE_OF_DATA"],"dataSharingAdjustments":{"protectedCustomerApprovalScopes":["read_customer_address","read_customer_email","read_customer_name","read_customer_personal_data","read_customer_phone"],"dataSharingControls":["share_all_events"]},"dataSharingState":"unrestricted","enabledFlags":["9a3ed68a"]},{"id":"1541996834","configuration":"{\"webPixelName\":\"Judge.me\"}","eventPayloadVersion":"v1","runtimeContext":"STRICT","scriptVersion":"8acc938b1a30dc7624e304493ca567d7","type":"APP","apiClientId":683015,"privacyPurposes":["ANALYTICS"],"dataSharingAdjustments":{"protectedCustomerApprovalScopes":["read_customer_email","read_customer_name","read_customer_personal_data","read_customer_phone"],"dataSharingControls":["share_all_events"]},"dataSharingState":"unrestricted"},{"id":"152076578","eventPayloadVersion":"v1","runtimeContext":"LAX","scriptVersion":"1","type":"CUSTOM","privacyPurposes":["ANALYTICS"],"name":"Google Analytics tag (migrated)"},{"id":"shopify-app-pixel","configuration":"{}","eventPayloadVersion":"v1","runtimeContext":"STRICT","scriptVersion":"0530","apiClientId":"shopify-pixel","type":"APP","privacyPurposes":["ANALYTICS","MARKETING"]},{"id":"shopify-custom-pixel","eventPayloadVersion":"v1","runtimeContext":"LAX","scriptVersion":"0530","apiClientId":"shopify-pixel","type":"CUSTOM","privacyPurposes":["ANALYTICS","MARKETING"]}],isMerchantRequest: false,initData: {"shop":{"name":"Islamic Charts","paymentSettings":{"currencyCode":"PKR"},"myshopifyDomain":"bawa-toni-shah-shop.myshopify.com","countryCode":"PK","storefrontUrl":"https:\/\/islamiccharts.com"},"customer":null,"cart":null,"checkout":null,"productVariants":[],"products":[{"id":"8121301008674","handle":"prophets-family-tree-poster","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"49483184832802","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]}],"purchasingCompany":null},},"https://islamiccharts.com/cdn","5982071ew7ea472e3p69b68784m2150dfea",{"modern":"","legacy":""},{"trekkieShim":true,"agentContext":true,"apiClientId":"580111","facebookCapiEnabled":"true","themeId":"190555226402","themeStoreId":"3627","themePublished":"true","eventMetadataId":"4f5c1aaf-074a-4340-b251-3dd8fc3b8aff","pageType":"page","resourceId":"111639953698","shopId":"72107720994","storefrontBaseUrl":"https:\/\/islamiccharts.com","extensionBaseUrl":"https:\/\/extensions.shopifycdn.com\/cdn\/shopifycloud\/web-pixels-manager","surface":"storefront-renderer","enabledBetaFlags":"[\"4c64608a\", \"16072cab\", \"8450a54b\", \"7ee89bf1\"]","isMerchantRequest":"false","hashVersion":"5982071ew7ea472e3p69b68784m2150dfea","publish":"custom","events":"[[\"page_viewed\",{}]]"});})();</script>
1265<script>
1266  window.ShopifyAnalytics = window.ShopifyAnalytics || {};
1267  window.ShopifyAnalytics.meta = window.ShopifyAnalytics.meta || {};
1268  window.ShopifyAnalytics.meta.currency = 'PKR';
1269  var meta = {"page":{"pageType":"page","resourceType":"page","resourceId":111639953698,"requestId":"2aeee7db-0b7b-4b8c-8e50-4ca64cc341e9-1790994868"}};
1270  for (var attr in meta) {
1271    window.ShopifyAnalytics.meta[attr] = meta[attr];
1272  }
1273</script>
vendor: 1 bytes, line 1273
1273
1274<script class="analytics">
1275  (function () {
1276    var customDocumentWrite = function(content) {
1277      var jquery = null;
1278
1279      if (window.jQuery) {
1280        jquery = window.jQuery;
1281      } else if (window.Checkout && window.Checkout.$) {
1282        jquery = window.Checkout.$;
1283      }
1284
1285      if (jquery) {
1286        jquery('body').append(content);
1287      }
1288    };
1289
1290    var hasLoggedConversion = function(token) {
1291      if (token) {
1292        return document.cookie.indexOf('loggedConversion=' + token) !== -1;
1293      }
1294      return false;
1295    }
1296
1297    var setCookieIfConversion = function(token) {
1298      if (token) {
1299        var twoMonthsFromNow = new Date(Date.now());
1300        twoMonthsFromNow.setMonth(twoMonthsFromNow.getMonth() + 2);
1301
1302        document.cookie = 'loggedConversion=' + token + '; expires=' + twoMonthsFromNow;
1303      }
1304    }
1305
1306    var trekkie = window.ShopifyAnalytics.lib = window.trekkie = window.trekkie || [];
1307    window.ShopifyAnalytics.lib.trekkie = window.trekkie;
1308    if (trekkie.integrations) {
1309      return;
1310    }
1311    trekkie.methods = [
1312      'identify',
1313      'page',
1314      'ready',
1315      'track',
1316      'trackForm',
1317      'trackLink'
1318    ];
1319    trekkie.factory = function(method) {
1320      return function() {
1321        var args = Array.prototype.slice.call(arguments);
1322        args.unshift(method);
1323        trekkie.push(args);
1324        if (method == 'track' || method == 'page') {
1325          var pageUrl;
1326          try {
1327            pageUrl = window.location.href;
1328          } catch (e) {}
1329          var pageReferrer;
1330          try {
1331            pageReferrer = document.referrer;
1332          } catch (e) {}
1333          try {
1334            if (window.__TREKKIE_SHIM_QUEUE == null) {
1335              window.__TREKKIE_SHIM_QUEUE = [];
1336            }
1337            window.__TREKKIE_SHIM_QUEUE.push({
1338              from: 'trekkie-stub',
1339              method: method,
1340              args: args.slice(1),
1341              pageContext: {
1342                url: pageUrl,
1343                referrer: pageReferrer
1344              }
1345            });
1346          } catch (e) {
1347            // no-op
1348          }
1349        }
1350        return trekkie;
1351      };
1352    };
1353    for (var i = 0; i < trekkie.methods.length; i++) {
1354      var key = trekkie.methods[i];
1355      trekkie[key] = trekkie.factory(key);
1356    }
1357    trekkie.load = function(config) {
1358      trekkie.config = config || {};
1359      trekkie.config.initialDocumentCookie = document.cookie;
1360      var first = document.getElementsByTagName('script')[0];
1361var script = document.createElement('script');
1362script.type = 'text/javascript';
1363script.onerror = function(e) {
1364  var scriptFallback = document.createElement('script');
1365  scriptFallback.type = 'text/javascript';
1366  scriptFallback.onerror = function(error) {
1367          var Monorail = {
1368      produce: function produce(monorailDomain, schemaId, payload) {
1369        var currentMs = new Date().getTime();
1370        var event = {
1371          schema_id: schemaId,
1372          payload: payload,
1373          metadata: {
1374            event_created_at_ms: currentMs,
1375            event_sent_at_ms: currentMs
1376          }
1377        };
1378        return Monorail.sendRequest("https://" + monorailDomain + "/v1/produce", JSON.stringify(event));
1379      },
1380      sendRequest: function sendRequest(endpointUrl, payload) {
1381        // Try the sendBeacon API
1382        if (window && window.navigator && typeof window.navigator.sendBeacon === 'function' && typeof window.Blob === 'function' && !Monorail.isIos12()) {
1383          var blobData = new window.Blob([payload], {
1384            type: 'text/plain'
1385          });
1386
1387          if (window.navigator.sendBeacon(endpointUrl, blobData)) {
1388            return true;
1389          } // sendBeacon was not successful
1390
1391        } // XHR beacon
1392
1393        var xhr = new XMLHttpRequest();
1394
1395        try {
1396          xhr.open('POST', endpointUrl);
1397          xhr.setRequestHeader('Content-Type', 'text/plain');
1398          xhr.send(payload);
1399        } catch (e) {
1400          console.log(e);
1401        }
1402
1403        return false;
1404      },
1405      isIos12: function isIos12() {
1406        return window.navigator.userAgent.lastIndexOf('iPhone; CPU iPhone OS 12_') !== -1 || window.navigator.userAgent.lastIndexOf('iPad; CPU OS 12_') !== -1;
1407      }
1408    };
1409    Monorail.produce('monorail-edge.shopifysvc.com',
1410      'trekkie_storefront_load_errors/1.1',
1411      {shop_id: 72107720994,
1412      theme_id: 190555226402,
1413      app_name: "storefront",
1414      context_url: window.location.href,
1415      source_url: "//islamiccharts.com/cdn/s/trekkie.storefront.2f6d7d7ede7d24234881a9cd5f47e679642fa1f6.min.js"});
1416
1417  };
1418  scriptFallback.async = true;
1419  scriptFallback.src = '//islamiccharts.com/cdn/s/trekkie.storefront.2f6d7d7ede7d24234881a9cd5f47e679642fa1f6.min.js';
1420  first.parentNode.insertBefore(scriptFallback, first);
1421};
1422script.async = true;
1423script.src = '//islamiccharts.com/cdn/s/trekkie.storefront.2f6d7d7ede7d24234881a9cd5f47e679642fa1f6.min.js';
1424first.parentNode.insertBefore(script, first);
1425
1426    };
1427    trekkie.load(
1428      {"Trekkie":{"appName":"storefront","development":false,"defaultAttributes":{"shopId":72107720994,"isMerchantRequest":null,"themeId":190555226402,"themeCityHash":"180592054000332831","contentLanguage":"en","currency":"PKR","eventMetadataId":"4f5c1aaf-074a-4340-b251-3dd8fc3b8aff"},"isServerSideCookieWritingEnabled":true,"monorailRegion":"shop_domain","enabledBetaFlags":["764d78cb","8450a54b","7ee89bf1","4c64608a"]},"Session Attribution":{},"S2S":{"facebookCapiEnabled":true,"source":"trekkie-storefront-renderer","apiClientId":580111}}
1429    );
1430
1431    var loaded = false;
1432    trekkie.ready(function() {
1433      if (loaded) return;
1434      loaded = true;
1435
1436      window.ShopifyAnalytics.lib = window.trekkie;
1437
1438      var originalDocumentWrite = document.write;
1439      document.write = customDocumentWrite;
1440      try { window.ShopifyAnalytics.merchantGoogleAnalytics.call(this); } catch(error) {};
1441      document.write = originalDocumentWrite;
1442
1443      var match = window.location.pathname.match(/checkouts\/(.+)\/(thank_you|post_purchase)/)
1444      var token = match? match[1]: undefined;
1445      if (!hasLoggedConversion(token)) {
1446        setCookieIfConversion(token);
1447        
1448      }
1449    });
1450
1451    window.ShopifyAnalytics.lib.page(null,{"pageType":"page","resourceType":"page","resourceId":111639953698,"requestId":"2aeee7db-0b7b-4b8c-8e50-4ca64cc341e9-1790994868","shopifyEmitted":true});
1452
1453    var eventsListenerScript = document.createElement('script');
1454    eventsListenerScript.async = true;
1455    eventsListenerScript.src = "//islamiccharts.com/cdn/shopifycloud/storefront/assets/shop_events_listener-4e26a9ce.js";
1456    document.getElementsByTagName('head')[0].appendChild(eventsListenerScript);
1457})();</script>
1457
1458  
1458<script>
1459  if (!window.ga || (window.ga && typeof window.ga !== 'function')) {
1460    window.ga = function ga() {
1461      (window.ga.q = window.ga.q || []).push(arguments);
1462      if (window.Shopify && window.Shopify.analytics && typeof window.Shopify.analytics.publish === 'function') {
1463        window.Shopify.analytics.publish("ga_stub_called", {}, {sendTo: "google_osp_migration"});
1464      }
1465      console.error("Shopify's Google Analytics stub called with:", Array.from(arguments), "\nSee https://help.shopify.com/manual/promoting-marketing/pixels/pixel-migration#google for more information.");
1466    };
1467    if (window.Shopify && window.Shopify.analytics && typeof window.Shopify.analytics.publish === 'function') {
1468      window.Shopify.analytics.publish("ga_stub_initialized", {}, {sendTo: "google_osp_migration"});
1469    }
1470  }
1471</script>
vendor: 1 bytes, line 1471
1471
1472<script
1473  defer
1474  src="https://islamiccharts.com/cdn/shopifycloud/perf-kit/shopify-perf-kit-3.9.4.min.js"
1475  data-application="storefront-renderer"
1476  data-shop-id="72107720994"
1477  data-render-region="gcp-us-central1"
1478  data-page-type="page"
1479  data-theme-instance-id="190555226402"
1480  data-theme-name="Tinker"
1481  data-theme-version="4.1.5"
1482  data-monorail-region="shop_domain"
1483  data-resource-timing-sampling-rate="10"
1484  data-shs="true"
1485  data-shs-beacon="true"
1486  data-shs-export-with-fetch="true"
1487  data-shs-logs-sample-rate="1"
1488  data-shs-beacon-endpoint="https://islamiccharts.com/api/collect"
1489></script>
1489
1490<meta name="shopify-y" content="86e925e5-9ea3-4609-805d-cc011e079afa" data-expiration="1822552468000"><meta name="shopify-s" content="bc7f2029-77c3-4ee3-85e9-7557300b6c67" data-expiration="1790996668000"><meta name="new-cookie-storage-activated" content="t">
1491</head>
1492
1493  <body class="page-width-narrow card-hover-effect-lift">
1494    <a
1495  class="skip-to-content-link button-secondary"
1496  href="#MainContent"
1497>
1498  Skip to content
1499</a>
1500
1501
1502
1503
1504    
1505
1506<theme-drawer id="chat-drawer">
1507  <dialog
1508    ref="panel"
1509    class="theme-drawer__dialog chat-drawer"
1510  >
1511    <shopify-chat
1512      mode="standalone"
1513      mode-switch
1514    ></shopify-chat>
1515  </dialog>
1516</theme-drawer>
1517
1518<script type="module">
1519  const chatDrawer = document.querySelector('#chat-drawer');
1520  const shopifyChat = document.querySelector('shopify-chat');
1521
1522  document.addEventListener('theme-drawer:open', (event) => {
1523    if (/** @type {Element} */ (event.target).id !== 'chat-drawer') return;
1524    shopifyChat?.setAttribute('mode', 'managed');
1525  });
1526
1527  document.addEventListener('theme-drawer:close', (event) => {
1528    if (/** @type {Element} */ (event.target).id !== 'chat-drawer') return;
1529    // If mode is still managed, this is a theme-initiated close (backdrop /
1530    // Escape) — close the chat so the FAB appears. If mode is already
1531    // standalone, the close was triggered by an undock (enter-standalone sets
1532    // mode before closing the drawer) — leave the chat open as a floating panel.
1533    if (shopifyChat?.getAttribute('mode') === 'managed') {
1534      shopifyChat?.removeAttribute('open');
1535    }
1536    shopifyChat?.setAttribute('mode', 'standalone');
1537  });
1538
1539  document.addEventListener('shopify-chat:enter-managed', () => {
1540    // Captured at event-fire time — the dock-transition animation hint below
1541    // depends on state as it was when the event was dispatched.
1542    const isStandaloneAndOpen = shopifyChat?.hasAttribute('open') && shopifyChat?.getAttribute('mode') === 'standalone';
1543
1544    // The activator-click path (FAB click on desktop with stored
1545    // preferredMode=managed) dispatches enter-managed *before* calling show(),
1546    // so the chat's `open` attribute at event time understates the imminent
1547    // outcome. Defer to a microtask: by then show() (if any) has run, and we
1548    // can distinguish the viewport-driven mobile→desktop transition that left
1549    // a minimized FAB (chat stays closed → don't open an empty drawer) from
1550    // an activator click (chat just opened → open the drawer).
1551    queueMicrotask(() => {
1552      if (!shopifyChat?.hasAttribute('open') && !chatDrawer?.hasAttribute('open')) {
1553        return;
1554      }
1555      chatDrawer?.open?.(isStandaloneAndOpen ? { enter: 'inline-start' } : undefined);
1556    });
1557  });
1558
1559  document.addEventListener('shopify-chat:enter-standalone', () => {
1560    shopifyChat?.setAttribute('mode', 'standalone');
1561    chatDrawer?.close?.();
1562  });
1563
1564  document.addEventListener('shopify-chat:close', () => {
1565    if (shopifyChat?.getAttribute('mode') === 'managed') {
1566      chatDrawer?.close?.();
1567    }
1568  });
1569
1570  document.addEventListener('megaMenu:hover', () => {
1571    if (shopifyChat?.hasAttribute('open') && shopifyChat?.getAttribute('mode') === 'standalone') {
1572      shopifyChat?.removeAttribute('open');
1573    }
1574  });
1575
1576  // After the chat upgrades it self-restores its preferred mode from
1577  // sessionStorage. Reconcile any mismatch with the theme-drawer's state
1578  // — the drawer is the source of truth for which mode the chat should
1579  // be in (open → managed, closed → standalone).
1580  customElements.whenDefined('shopify-chat').then(() => {
1581    const mode = chatDrawer?.hasAttribute('open') ? 'managed' : 'standalone';
1582    if (shopifyChat?.getAttribute('mode') !== mode) {
1583      // When switching managed → standalone (e.g. narrow viewport skipped
1584      // drawer restore), also close the chat so it renders as the FAB
1585      // rather than an open standalone panel.
1586      if (mode === 'standalone' && shopifyChat?.hasAttribute('open')) {
1587        shopifyChat?.removeAttribute('open');
1588      }
1589      shopifyChat?.setAttribute('mode', mode);
1590    }
1591  });
1592</script>
1592
1593
1594
1595
1596
1597    <div class="page-wrapper">
1598      <div id="header-group">
1599        <!-- BEGIN sections: header-group -->
1600<div id="shopify-section-sections--28024663736610__header_announcements_WbCTVz" class="shopify-section shopify-section-group-header-group">
1601
1602
1603  
1603<script
1604    src="//islamiccharts.com/cdn/shop/t/20/assets/announcement-bar.js?v=34024675399582161451788706330"
1605    type="module"
1606    fetchpriority="low"
1607  ></script>
1607
1608
1609
1610
1611
1612
1613
1614
1615  <style data-shopify>
1616    .color-custom-sections--28024663736610__header_announcements_WbCTVz,
1617    .color-custom-sections--28024663736610__header_announcements_WbCTVz .text-block {
1618      /* Background */
1619      --color-background: #42021c;
1620      --color-background-rgb: 66 2 28;
1621
1622      /* Opacity values adjusted for background brightness */
1623      
1624--opacity-5-15: 0.15; --opacity-10-25: 0.25; --opacity-35-55: 0.55; --opacity-40-60:
16250.6; --opacity-30-60: 0.6; --opacity-60: 0.6;
1626
1627
1628      
1629        /* Foreground / text — explicit or smart-contrasted */
1630        --color: var(--palette-lightest);
1631        --color-rgb: var(--palette-lightest-rgb);
1632        --color-foreground: var(--palette-lightest);
1633        --color-foreground-rgb: var(--palette-lightest-rgb);
1634        --color-foreground-muted: rgb(var(--palette-lightest-rgb) / var(--opacity-muted-text));
1635        --color-foreground-subdued: rgb(var(--palette-lightest-rgb) / var(--opacity-subdued-text));
1636        --color-border: var(--palette-lightest);
1637        --color-border-rgb: var(--palette-lightest-rgb);
1638      
1639    }
1640
1641    
1642      .color-custom-sections--28024663736610__header_announcements_WbCTVz {
1643        /* Form-related tokens stay on .color-custom only — .text-block is a prose
1644           container (text/announcement/inline-text/blog-post-description/
1645           collection-link/price/sku) and never holds form inputs. */
1646        --input-disabled-background-color: rgb(var(--palette-lightest-rgb) / var(--opacity-10));
1647        --input-disabled-border-color: rgb(var(--palette-lightest-rgb) / var(--opacity-5));
1648        --input-disabled-text-color: rgb(var(--palette-lightest-rgb) / var(--opacity-50));
1649        --checkbox-border: 1px solid rgb(var(--palette-lightest-rgb) / var(--opacity-35-55));
1650      }
1651    
1652
1653    .color-custom-sections--28024663736610__header_announcements_WbCTVz {
1654      color: var(--color, var(--color-foreground));
1655      background-color: var(--color-background);
1656    }
1657  </style>
1658
1659
1660
1661<div class="section-background color-custom-sections--28024663736610__header_announcements_WbCTVz"></div>
1662<aside
1663  class="announcement-bar spacing-style section section--full-width color-custom-sections--28024663736610__header_announcements_WbCTVz"
1664  style="--padding-block-start: 15px; --padding-block-end:15px; --padding-inline-start:0px; --padding-inline-end:0px;
1665; --border-bottom-width: 0.5px; --color-border: #a47186;"
1666>
1667  
1668
1669  <announcement-bar-component
1670    class="announcement-bar__slider"
1671    
1672      autoplay="3" aria-live="polite"
1673    
1674  >
1675    
1676      <slideshow-arrows
1677  position="center"
1678  
1679><button
1680  class="
1681    slideshow-control slideshow-control--previous
1682    
1683    
1684    slideshow-control--style-chevron
1685    button button-unstyled button-unstyled--transparent
1686     flip-x
1687  "
1688  
1689    aria-label="Previous slide"
1690  
1691  on:click="/previous"
1692  ref="previous"
1693>
1694  <span class="svg-wrapper icon-caret"><svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
1695  <path d="M11 5.5L7 9.5L3 5.5" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
1696</svg>
1697</span>
1698</button>
1699
1700
1701<button
1702  class="
1703    slideshow-control slideshow-control--next
1704    
1705    
1706    slideshow-control--style-chevron
1707    button button-unstyled button-unstyled--transparent
1708    
1709  "
1710  
1711    aria-label="Next slide"
1712  
1713  on:click="/next"
1714  ref="next"
1715>
1716  <span class="svg-wrapper icon-caret"><svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
1717  <path d="M11 5.5L7 9.5L3 5.5" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
1718</svg>
1719</span>
1720</button>
1721
1722
1723</slideshow-arrows>
1724
1725
1726
1727    
1728
1729    <div class="announcement-bar__slides">
1730      
1731
1732
1733
1734<slideshow-slide
1735    ref="slides[]"
1736    class="
1737      announcement-bar__slide
1738      text-block
1739      text-block--AUmtTOTNsWENxNDdpM__announcement_nmwwhy
1740      text-block--align-center
1741      text-block--full-width
1742      custom-typography
1743      custom-font-size
1744      
1745    "
1746    style="
1747      
1748--font-size: 1rem;      --font-weight: var(--font-body--weight);--font-family: var(--font-body--family);    --text-transform: none;    --text-wrap: pretty;          --line-height: var(--line-height--body-);        --letter-spacing: var(--letter-spacing--body-normal);
1749      
1750      --width: 100%;
1751      --text-align: center;
1752      --line-height: 1;
1753    "
1754    
1755    aria-hidden="false"
1756  >
1757    <p class="announcement-bar__text">
1758      🚚 TCS Free Delivery (COD)
1759    </p>
1760
1761    
1762  </slideshow-slide>
1763
1764
1765
1766
1767<slideshow-slide
1768    ref="slides[]"
1769    class="
1770      announcement-bar__slide
1771      text-block
1772      text-block--AQlh1V0NPMTA0cHBxQ__announcement_U4X8X6
1773      text-block--align-center
1774      text-block--full-width
1775      custom-typography
1776      custom-font-size
1777      
1778    "
1779    style="
1780      
1781--font-size: 1rem;      --font-weight: var(--font-body--weight);--font-family: var(--font-body--family);    --text-transform: none;    --text-wrap: pretty;          --line-height: var(--line-height--body-);        --letter-spacing: var(--letter-spacing--body-normal);
1782      
1783      --width: 100%;
1784      --text-align: center;
1785      --line-height: 1;
1786    "
1787    
1788    aria-hidden="true"
1789  >
1790    <p class="announcement-bar__text">
1791      ⭐ 15,000+ Happy Customers
1792    </p>
1793
1794    
1795  </slideshow-slide>
1796
1797    </div>
1798  </announcement-bar-component>
1799</aside>
1800
1801
1802
1803
1804</div><header id="shopify-section-sections--28024663736610__header_section" class="shopify-section shopify-section-group-header-group header-section">
1805
1806
1807
1808
1809
1810
1811<script type="application/ld+json">
1812  {
1813    "@context": "http://schema.org",
1814    "@type": "Organization",
1815    "name": "Islamic Charts",
1816    
1817      "logo": "https:\/\/islamiccharts.com\/cdn\/shop\/files\/Artboard_7.png?v=1779783495\u0026width=500",
1818    
1819    "url": "https:\/\/islamiccharts.com\/pages\/about"
1820  }
1821</script>
1821
1822
1823<header-component
1824  id="header-component"
1825  class="header"
1826  data-theme-color="rgb(66 2 28)"
1827  data-bubble-style="default"
1828  
1829  
1830    sticky="scroll-up"
1831  
1832  data-skip-node-update
1833  data-scroll-direction="none"
1834  
1835  
1836  
1837  style="
1838    --color-background-top-row: rgba(66 2 28 / 1.0);
1839    --color-background-bottom-row: rgba(241 237 231 / 1.0);
1840    
1841    
1842      --cart-bubble-background: var(--palette-lightest);
1843      --cart-bubble-text: #42021c;
1844    
1845    
1846  "
1847>
1848  <div class="header__underlay header__underlay-closed"></div>
1849  <div
1850    class="header__underlay header__underlay-open"
1851  ></div>
1852    
1853
1854    
1855
1856    
1857    
1858      <div
1859        class="header__row header__row--top color-#42021c section section--full-width-margin section--page-width divider--page-width color-custom-top-sections--28024663736610__header_section"
1860        ref="headerRowTop"style="--border-bottom-width: 0px; --border-bottom-width-mobile: 0px; --border-bottom-color-mobile: var(--color-border);">
1861        <div class="header__columns spacing-style">
1862          <style data-shopify>
1863    .color-custom-top-sections--28024663736610__header_section,
1864    .color-custom-top-sections--28024663736610__header_section .text-block {
1865      /* Background */
1866      --color-background: #42021c;
1867      --color-background-rgb: 66 2 28;
1868
1869      /* Opacity values adjusted for background brightness */
1870      
1871--opacity-5-15: 0.15; --opacity-10-25: 0.25; --opacity-35-55: 0.55; --opacity-40-60:
18720.6; --opacity-30-60: 0.6; --opacity-60: 0.6;
1873
1874
1875      
1876        /* Foreground / text — explicit or smart-contrasted */
1877        --color: var(--palette-lightest);
1878        --color-rgb: var(--palette-lightest-rgb);
1879        --color-foreground: var(--palette-lightest);
1880        --color-foreground-rgb: var(--palette-lightest-rgb);
1881        --color-foreground-muted: rgb(var(--palette-lightest-rgb) / var(--opacity-muted-text));
1882        --color-foreground-subdued: rgb(var(--palette-lightest-rgb) / var(--opacity-subdued-text));
1883        --color-border: var(--palette-lightest);
1884        --color-border-rgb: var(--palette-lightest-rgb);
1885      
1886    }
1887
1888    
1889      .color-custom-top-sections--28024663736610__header_section {
1890        /* Form-related tokens stay on .color-custom only — .text-block is a prose
1891           container (text/announcement/inline-text/blog-post-description/
1892           collection-link/price/sku) and never holds form inputs. */
1893        --input-disabled-background-color: rgb(var(--palette-lightest-rgb) / var(--opacity-10));
1894        --input-disabled-border-color: rgb(var(--palette-lightest-rgb) / var(--opacity-5));
1895        --input-disabled-text-color: rgb(var(--palette-lightest-rgb) / var(--opacity-50));
1896        --checkbox-border: 1px solid rgb(var(--palette-lightest-rgb) / var(--opacity-35-55));
1897      }
1898    
1899
1900    .color-custom-top-sections--28024663736610__header_section {
1901      color: var(--color, var(--color-foreground));
1902      background-color: var(--color-background);
1903    }
1904  </style>
1905
1906
1907      
1908      
1909<div
1910      class="header__column header__column--left"
1911      data-testid="header-top-left"
1912    >
1913      
1914        
1915          
1916              
1917
1918
1919
1920    <div
1921      class="header__drawer"
1922      ref="headerDrawerContainer"
1923      data-hydration-key="header-drawer-mobile"
1924      
1925    >
1926      
1927
1928
1929
1930
1931
1932
1933
1934  <style data-shopify>
1935    .color-custom-AeVZDKzVpVUwwaGc4a__header-menu-1,
1936    .color-custom-AeVZDKzVpVUwwaGc4a__header-menu-1 .text-block {
1937      /* Background */
1938      --color-background: #ffffff;
1939      --color-background-rgb: 255 255 255;
1940
1941      /* Opacity values adjusted for background brightness */
1942      
1943--opacity-5-15: 0.05; --opacity-10-25: 0.1; --opacity-35-55: 0.35; --opacity-40-60:
19440.4; --opacity-30-60: 0.3; --opacity-60: 0.6;
1945
1946
1947      
1948        /* Foreground / text — explicit or smart-contrasted */
1949        --color: #000000;
1950        --color-rgb: 0 0 0;
1951        --color-foreground: #000000;
1952        --color-foreground-rgb: 0 0 0;
1953        --color-foreground-muted: rgb(0 0 0 / var(--opacity-muted-text));
1954        --color-foreground-subdued: rgb(0 0 0 / var(--opacity-subdued-text));
1955        --color-border: var(--palette-darkest);
1956        --color-border-rgb: var(--palette-darkest-rgb);
1957      
1958    }
1959
1960    
1961      .color-custom-AeVZDKzVpVUwwaGc4a__header-menu-1 {
1962        /* Form-related tokens stay on .color-custom only — .text-block is a prose
1963           container (text/announcement/inline-text/blog-post-description/
1964           collection-link/price/sku) and never holds form inputs. */
1965        --input-disabled-background-color: rgb(0 0 0 / var(--opacity-10));
1966        --input-disabled-border-color: rgb(0 0 0 / var(--opacity-5));
1967        --input-disabled-text-color: rgb(0 0 0 / var(--opacity-50));
1968        --checkbox-border: 1px solid rgb(0 0 0 / var(--opacity-35-55));
1969      }
1970    
1971
1972    .color-custom-AeVZDKzVpVUwwaGc4a__header-menu-1 {
1973      color: var(--color, var(--color-foreground));
1974      background-color: var(--color-background);
1975    }
1976  </style>
1977
1978
1979
1980<script
1981  src="//islamiccharts.com/cdn/shop/t/20/assets/header-drawer.js?v=121243031541024704371788706330"
1982  type="module"
1983  fetchpriority="low"
1984></script>
1984
1985
1986<header-drawer
1987  class="header-drawer "
1988  style="--menu-image-border-radius: 0px; --resource-card-corner-radius: 0px;"
1989>
1990  <details
1991    id="Details-menu-drawer-container"
1992    data-skip-node-update="true"
1993    class="menu-drawer-container"
1994    ref="details"
1995    scroll-lock
1996  >
1997    <summary
1998      class="header__icon header__icon--menu header__icon--summary"
1999      aria-label="Menu"
2000      on:click="/toggle"
2001    >
2002      <span class="svg-wrapper header-drawer-icon header-drawer-icon--open"><svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2003  <path d="M1 3.5H13" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round"/>
2004  <path d="M1 10.5H13" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round"/>
2005</svg>
2006</span>
2007      <span class="svg-wrapper header-drawer-icon header-drawer-icon--close"><svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2008  <path d="M3.75 3.75L10.25 10.25M10.25 3.75L3.75 10.25" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
2009</svg>
2010</span>
2011    </summary>
2012    <div
2013      ref="menuDrawer"
2014      class="
2015        menu-drawer
2016        
2017          color-custom-AeVZDKzVpVUwwaGc4a__header-menu-1
2018        
2019      "
2020    >
2021      <button
2022        class="button close-button menu-drawer__close-button focus-inset"
2023        type="button"
2024        aria-label="Close"
2025        on:click="/close"
2026      >
2027        <span class="svg-wrapper header-drawer-icon header-drawer-icon--close"><svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2028  <path d="M3.75 3.75L10.25 10.25M10.25 3.75L3.75 10.25" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
2029</svg>
2030</span>
2031      </button>
2032      <nav
2033        class="menu-drawer__navigation"
2034        style="--menu-top-level-font-family: var(--font-primary--family);
2035--menu-top-level-font-size-desktop: var(--font-size--body-md); --menu-top-level-font-style: var(--font-primary--style); --menu-top-level-font-weight: var(--font-primary--weight); --menu-top-level-font-case:none;
2036
2037  --menu-top-level-font-size: var(--menu-font-2xl--size); --menu-top-level-font-line-height:
2038  var(--menu-font-2xl--line-height);
2039
2040--menu-top-level-font-color: var(--color-foreground); --menu-top-level-font-color-rgb: var(--color-foreground-rgb);
2041
2042--menu-parent-font-family: var(--font-primary--family); --menu-parent-font-style:
2043var(--font-primary--style); --menu-parent-font-weight: var(--font-primary--weight); --menu-parent-font-case:
2044none;
2045
2046    --menu-parent-font-size: var(--menu-font-sm--size); --menu-parent-font-line-height:
2047    var(--menu-font-sm--line-height); --menu-parent-font-color: var(--color-foreground-subdued);
2048    --menu-parent-active-font-color: var(--color-foreground);
2049  
2050--menu-child-font-family: var(--font-primary--family); --menu-child-font-style:var(--font-primary--style); --menu-child-font-weight: var(--font-primary--weight); --menu-child-font-case:
2051none;
2052
2053    --menu-child-font-size: var(--menu-font-md--size); --menu-child-font-line-height: var(--menu-font-md--line-height);
2054    --menu-child-font-color: var(--color-foreground); --menu-child-active-font-color: var(--color-foreground-subdued);
2055  
2056
2057        "
2058        aria-label="Primary"
2059      >
2060        <ul
2061          class="menu-drawer__menu has-submenu"
2062          role="list"
2063        >
2064            
2065            
2066
2067              <li
2068                style="--menu-drawer-animation-index: 1;"
2069                class="menu-drawer__list-item--flat"
2070              >
2071                
2072<a
2073                    id="HeaderDrawer-home"
2074                    href="/"
2075                    class="menu-drawer__menu-item menu-drawer__menu-item--mainlist menu-drawer__animated-element"
2076                    
2077                  >
2078                    <span class="menu-drawer__menu-item-text wrap-text">Home</span>
2079                  </a>
2080                
2081              </li>
2082              <li
2083                style="--menu-drawer-animation-index: 2;"
2084                class="menu-drawer__list-item--flat"
2085              >
2086                
2087<a
2088                    id="HeaderDrawer-products"
2089                    href="/collections/all"
2090                    class="menu-drawer__menu-item menu-drawer__menu-item--mainlist menu-drawer__animated-element"
2091                    
2092                  >
2093                    <span class="menu-drawer__menu-item-text wrap-text">Products</span>
2094                  </a>
2095                
2096              </li>
2097              <li
2098                style="--menu-drawer-animation-index: 3;"
2099                class="menu-drawer__list-item--flat"
2100              >
2101                
2102<a
2103                    id="HeaderDrawer-faqs"
2104                    href="/pages/faqs"
2105                    class="menu-drawer__menu-item menu-drawer__menu-item--mainlist menu-drawer__animated-element"
2106                    
2107                  >
2108                    <span class="menu-drawer__menu-item-text wrap-text">FAQs</span>
2109                  </a>
2110                
2111              </li>
2112              <li
2113                style="--menu-drawer-animation-index: 4;"
2114                class="menu-drawer__list-item--flat"
2115              >
2116                
2117<a
2118                    id="HeaderDrawer-about"
2119                    href="/pages/about"
2120                    class="menu-drawer__menu-item menu-drawer__menu-item--mainlist menu-drawer__animated-element"
2121                    
2122                      aria-current="page"
2123                    
2124                  >
2125                    <span class="menu-drawer__menu-item-text wrap-text">About</span>
2126                  </a>
2127                
2128              </li>
2129              <li
2130                style="--menu-drawer-animation-index: 5;"
2131                class="menu-drawer__list-item--flat"
2132              >
2133                
2134<a
2135                    id="HeaderDrawer-contact"
2136                    href="/pages/contact"
2137                    class="menu-drawer__menu-item menu-drawer__menu-item--mainlist menu-drawer__animated-element"
2138                    
2139                  >
2140                    <span class="menu-drawer__menu-item-text wrap-text">Contact</span>
2141                  </a>
2142                
2143              </li>
2144              <li
2145                style="--menu-drawer-animation-index: 6;"
2146                class="menu-drawer__list-item--flat"
2147              >
2148                
2149<a
2150                    id="HeaderDrawer-track-order"
2151                    href="/pages/track-order"
2152                    class="menu-drawer__menu-item menu-drawer__menu-item--mainlist menu-drawer__animated-element"
2153                    
2154                  >
2155                    <span class="menu-drawer__menu-item-text wrap-text">Track Order</span>
2156                  </a>
2157                
2158              </li>
2159        </ul>
2160      </nav>
2161      <div
2162        class="menu-drawer__utility-links menu-drawer__animated-element"
2163        style="--menu-drawer-animation-index: 6;"
2164      >
2165        
2166        
2167          
2168          
2169            <drawer-localization-component class="menu-drawer__localization">
2170              <details
2171                id="drawer-localization"
2172                class="drawer-localization"
2173                on:toggle="/toggle"
2174              >
2175                <summary
2176                  id="HeaderDrawer-localization"
2177                  class="drawer-localization__button h3 focus-inset"
2178                  aria-expanded="false"
2179                  on:click="header-drawer/open/submenu"
2180                  style="--menu-localization-font: var(--font-accent--family); --color-shadow: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));"
2181                >
2182                  <div class="drawer-localization__button--label h6"><div class="mobile-localization mobile-localization--country"><span
2183                            class="icon-flag"
2184                            style="
2185                              background-image: url(//cdn.shopify.com/static/images/flags/us.svg?width=32);
2186                              --size-shadow: 2px;
2187                              --color-shadow: rgb(var(--color-foreground-rgb) / var(--opacity-30-60));
2188                            "
2189                          ></span><span class="currency-code">PKR</span>
2190                      </div></div>
2191                  <span class="svg-wrapper icon-caret icon-caret--forward"><svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2192  <path d="M11 5.5L7 9.5L3 5.5" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
2193</svg>
2194</span>
2195                </summary>
2196
2197                <div
2198                  class="menu-drawer__submenu has-submenu color-custom-drawer"
2199                >
2200                  <div
2201                    class="menu-drawer__nav-buttons menu-drawer__nav-buttons--with-title"
2202                    ref="navButtons"
2203                  >
2204                    <button
2205                      class="button menu-drawer__back-button focus-inset"
2206                      on:click="header-drawer/back"
2207                      aria-label="Back to main menu"
2208                    >
2209                      <span class="svg-wrapper icon-caret icon-caret--backward"><svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2210  <path d="M11 5.5L7 9.5L3 5.5" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
2211</svg>
2212</span>
2213                    </button>
2214                    <span class="menu-drawer__title">Region and language</span>
2215                    <button
2216                      class="button close-button menu-drawer__close-button focus-inset"
2217                      type="button"
2218                      aria-label="Close"
2219                      on:click="header-drawer/close"
2220                    >
2221                      <span class="svg-wrapper header-drawer-icon header-drawer-icon--close"><svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2222  <path d="M3.75 3.75L10.25 10.25M10.25 3.75L3.75 10.25" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
2223</svg>
2224</span>
2225                    </button>
2226                  </div>
2227
2228                  
2229<localization-form-component
2230  ref="localizationForm"
2231  data-label-results-count="[count] results"
2232  data-show-filter="true"
2233  style="--menu-localization-font: var(--font-accent--family); --color-shadow: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));"
2234>
2235  
2236<form method="post" action="/localization" id="LocalizationForm" accept-charset="UTF-8" class="localization-form" enctype="multipart/form-data" ref="form" aria-label="Region and language"><input type="hidden" name="form_type" value="localization" /><input type="hidden" name="utf8" value="✓" /><input type="hidden" name="_method" value="put" />
2237      
2238        <div class="country-filter">
2239          <div class="field">
2240            <div class="country-filter__search-icon field__button">
2241              <span class="svg-wrapper">
2242                <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><circle cx="9" cy="9" r="4.75" stroke="currentColor" stroke-width="var(--icon-stroke-width)"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="var(--icon-stroke-width)" d="m12.5 12.5 3.25 3.25"/></svg>
2243
2244              </span>
2245            </div>
2246            <input
2247              class="country-filter__input"
2248              id="country-filter-input"
2249              type="search"
2250              name="country_filter"
2251              value=""
2252              placeholder="Search"
2253              role="combobox"
2254              aria-owns="country-results"
2255              aria-controls="country-results"
2256              aria-haspopup="listbox"
2257              aria-autocomplete="list"
2258              aria-label="Find country"
2259              autocorrect="off"
2260              autocomplete="off"
2261              autocapitalize="off"
2262              spellcheck="false"
2263              ref="search"
2264              on:keyup="/filterCountries"
2265            >
2266            <label
2267              class="field__label visually-hidden"
2268              for="country-filter-input"
2269            >Search</label>
2270            <button
2271              type="reset"
2272              class="button button-unstyled country-filter__reset-button field__button"
2273              aria-label="Reset"
2274              ref="resetButton"
2275              hidden
2276              on:click="/resetCountriesFilter"
2277            >
2278              <span class="svg-wrapper">
2279                <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="6.25" stroke="currentColor" stroke-width="var(--icon-stroke-width)"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="var(--icon-stroke-width)" d="m12.5 7.5-5 5M12.5 12.5l-5-5"/></svg>
2280
2281              </span>
2282            </button>
2283          </div>
2284        </div>
2285      
2286      <div class="country-selector-form__wrapper">
2287        <h2
2288          class="visually-hidden"
2289          id="drawer-CountryLabel"
2290        >Country/Region</h2>
2291        
2292          <div
2293            id="sr-country-search-results-AeVZDKzVpVUwwaGc4a__header-menu-1"
2294            class="visually-hidden"
2295            aria-live="polite"
2296            ref="liveRegion"
2297          ></div>
2298        
2299        <div
2300          class="localization-form__list"
2301          id="drawer-country-results"
2302          ref="countryList"
2303        >
2304          
2305            <ul
2306              role="list"
2307              class="list-unstyled popular-countries"
2308              aria-label="Country/Region"
2309              ref="popularCountries"
2310            >
2311                <li
2312                  class="localization-form__list-item"
2313                  
2314                  data-value="PK"
2315                  
2316                    data-aliases=""
2317                  
2318                  id="Pakistan"
2319                  aria-label="Pakistan"
2320                  role="option"
2321                  tabindex="-1"
2322                  ref="countryListItems[]"
2323                  on:click="/selectCountry/PK"
2324                >
2325                  <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
2326<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
2327</svg>
2328</span>
2329                  <span class="country">Pakistan</span>
2330                  <span
2331                    class="localization-form__currency"
2332                    
2333                      hidden
2334                    
2335                  >
2336                    PKR
2337                    ₨</span>
2338                </li>
2339                <li
2340                  class="localization-form__list-item"
2341                  
2342                  data-value="GB"
2343                  
2344                    data-aliases="uk,gb,great britain"
2345                  
2346                  id="United Kingdom"
2347                  aria-label="United Kingdom"
2348                  role="option"
2349                  tabindex="-1"
2350                  ref="countryListItems[]"
2351                  on:click="/selectCountry/GB"
2352                >
2353                  <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
2354<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
2355</svg>
2356</span>
2357                  <span class="country">United Kingdom</span>
2358                  <span
2359                    class="localization-form__currency"
2360                    
2361                      hidden
2362                    
2363                  >
2364                    PKR
2365                    ₨</span>
2366                </li>
2367                <li
2368                  class="localization-form__list-item"
2369                  
2370                    aria-current="true"
2371                  
2372                  data-value="US"
2373                  
2374                    data-aliases="us,usa,america,united states of america"
2375                  
2376                  id="United States"
2377                  aria-label="United States"
2378                  role="option"
2379                  tabindex="-1"
2380                  ref="countryListItems[]"
2381                  on:click="/selectCountry/US"
2382                >
2383                  <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
2384<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
2385</svg>
2386</span>
2387                  <span class="country">United States</span>
2388                  <span
2389                    class="localization-form__currency"
2390                    
2391                      hidden
2392                    
2393                  >
2394                    PKR
2395                    ₨</span>
2396                </li></ul>
2397          
2398          <ul
2399            role="list"
2400            class="list-unstyled countries"
2401          >
2402            <span
2403              class="localization-form__list-item localization-form__list-item-disabled"
2404              id="no-results-message"
2405              ref="noResultsMessage"
2406              hidden
2407            >No results found</span>
2408              <li
2409                class="localization-form__list-item"
2410                
2411                data-value="AL"
2412                
2413                  data-aliases=""
2414                
2415                id="Albania"
2416                aria-label="Albania"
2417                role="option"
2418                tabindex="-1"
2419                ref="countryListItems[]"
2420                on:click="/selectCountry/AL"
2421              >
2422                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
2423<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
2424</svg>
2425</span>
2426                <span class="country">Albania</span>
2427                <span
2428                  class="localization-form__currency"
2429                  
2430                    hidden
2431                  
2432                >
2433                  PKR
2434                  ₨</span>
2435              </li>
2436              <li
2437                class="localization-form__list-item"
2438                
2439                data-value="DZ"
2440                
2441                  data-aliases=""
2442                
2443                id="Algeria"
2444                aria-label="Algeria"
2445                role="option"
2446                tabindex="-1"
2447                ref="countryListItems[]"
2448                on:click="/selectCountry/DZ"
2449              >
2450                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
2451<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
2452</svg>
2453</span>
2454                <span class="country">Algeria</span>
2455                <span
2456                  class="localization-form__currency"
2457                  
2458                    hidden
2459                  
2460                >
2461                  PKR
2462                  ₨</span>
2463              </li>
2464              <li
2465                class="localization-form__list-item"
2466                
2467                data-value="AU"
2468                
2469                  data-aliases=""
2470                
2471                id="Australia"
2472                aria-label="Australia"
2473                role="option"
2474                tabindex="-1"
2475                ref="countryListItems[]"
2476                on:click="/selectCountry/AU"
2477              >
2478                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
2479<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
2480</svg>
2481</span>
2482                <span class="country">Australia</span>
2483                <span
2484                  class="localization-form__currency"
2485                  
2486                    hidden
2487                  
2488                >
2489                  PKR
2490                  ₨</span>
2491              </li>
2492              <li
2493                class="localization-form__list-item"
2494                
2495                data-value="AT"
2496                
2497                  data-aliases=""
2498                
2499                id="Austria"
2500                aria-label="Austria"
2501                role="option"
2502                tabindex="-1"
2503                ref="countryListItems[]"
2504                on:click="/selectCountry/AT"
2505              >
2506                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
2507<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
2508</svg>
2509</span>
2510                <span class="country">Austria</span>
2511                <span
2512                  class="localization-form__currency"
2513                  
2514                    hidden
2515                  
2516                >
2517                  PKR
2518                  ₨</span>
2519              </li>
2520              <li
2521                class="localization-form__list-item"
2522                
2523                data-value="AZ"
2524                
2525                  data-aliases=""
2526                
2527                id="Azerbaijan"
2528                aria-label="Azerbaijan"
2529                role="option"
2530                tabindex="-1"
2531                ref="countryListItems[]"
2532                on:click="/selectCountry/AZ"
2533              >
2534                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
2535<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
2536</svg>
2537</span>
2538                <span class="country">Azerbaijan</span>
2539                <span
2540                  class="localization-form__currency"
2541                  
2542                    hidden
2543                  
2544                >
2545                  PKR
2546                  ₨</span>
2547              </li>
2548              <li
2549                class="localization-form__list-item"
2550                
2551                data-value="BH"
2552                
2553                  data-aliases=""
2554                
2555                id="Bahrain"
2556                aria-label="Bahrain"
2557                role="option"
2558                tabindex="-1"
2559                ref="countryListItems[]"
2560                on:click="/selectCountry/BH"
2561              >
2562                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
2563<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
2564</svg>
2565</span>
2566                <span class="country">Bahrain</span>
2567                <span
2568                  class="localization-form__currency"
2569                  
2570                    hidden
2571                  
2572                >
2573                  PKR
2574                  ₨</span>
2575              </li>
2576              <li
2577                class="localization-form__list-item"
2578                
2579                data-value="BD"
2580                
2581                  data-aliases=""
2582                
2583                id="Bangladesh"
2584                aria-label="Bangladesh"
2585                role="option"
2586                tabindex="-1"
2587                ref="countryListItems[]"
2588                on:click="/selectCountry/BD"
2589              >
2590                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
2591<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
2592</svg>
2593</span>
2594                <span class="country">Bangladesh</span>
2595                <span
2596                  class="localization-form__currency"
2597                  
2598                    hidden
2599                  
2600                >
2601                  PKR
2602                  ₨</span>
2603              </li>
2604              <li
2605                class="localization-form__list-item"
2606                
2607                data-value="BE"
2608                
2609                  data-aliases=""
2610                
2611                id="Belgium"
2612                aria-label="Belgium"
2613                role="option"
2614                tabindex="-1"
2615                ref="countryListItems[]"
2616                on:click="/selectCountry/BE"
2617              >
2618                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
2619<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
2620</svg>
2621</span>
2622                <span class="country">Belgium</span>
2623                <span
2624                  class="localization-form__currency"
2625                  
2626                    hidden
2627                  
2628                >
2629                  PKR
2630                  ₨</span>
2631              </li>
2632              <li
2633                class="localization-form__list-item"
2634                
2635                data-value="CA"
2636                
2637                  data-aliases=""
2638                
2639                id="Canada"
2640                aria-label="Canada"
2641                role="option"
2642                tabindex="-1"
2643                ref="countryListItems[]"
2644                on:click="/selectCountry/CA"
2645              >
2646                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
2647<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
2648</svg>
2649</span>
2650                <span class="country">Canada</span>
2651                <span
2652                  class="localization-form__currency"
2653                  
2654                    hidden
2655                  
2656                >
2657                  PKR
2658                  ₨</span>
2659              </li>
2660              <li
2661                class="localization-form__list-item"
2662                
2663                data-value="DK"
2664                
2665                  data-aliases=""
2666                
2667                id="Denmark"
2668                aria-label="Denmark"
2669                role="option"
2670                tabindex="-1"
2671                ref="countryListItems[]"
2672                on:click="/selectCountry/DK"
2673              >
2674                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
2675<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
2676</svg>
2677</span>
2678                <span class="country">Denmark</span>
2679                <span
2680                  class="localization-form__currency"
2681                  
2682                    hidden
2683                  
2684                >
2685                  PKR
2686                  ₨</span>
2687              </li>
2688              <li
2689                class="localization-form__list-item"
2690                
2691                data-value="EG"
2692                
2693                  data-aliases=""
2694                
2695                id="Egypt"
2696                aria-label="Egypt"
2697                role="option"
2698                tabindex="-1"
2699                ref="countryListItems[]"
2700                on:click="/selectCountry/EG"
2701              >
2702                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
2703<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
2704</svg>
2705</span>
2706                <span class="country">Egypt</span>
2707                <span
2708                  class="localization-form__currency"
2709                  
2710                    hidden
2711                  
2712                >
2713                  PKR
2714                  ₨</span>
2715              </li>
2716              <li
2717                class="localization-form__list-item"
2718                
2719                data-value="FI"
2720                
2721                  data-aliases=""
2722                
2723                id="Finland"
2724                aria-label="Finland"
2725                role="option"
2726                tabindex="-1"
2727                ref="countryListItems[]"
2728                on:click="/selectCountry/FI"
2729              >
2730                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
2731<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
2732</svg>
2733</span>
2734                <span class="country">Finland</span>
2735                <span
2736                  class="localization-form__currency"
2737                  
2738                    hidden
2739                  
2740                >
2741                  PKR
2742                  ₨</span>
2743              </li>
2744              <li
2745                class="localization-form__list-item"
2746                
2747                data-value="FR"
2748                
2749                  data-aliases=""
2750                
2751                id="France"
2752                aria-label="France"
2753                role="option"
2754                tabindex="-1"
2755                ref="countryListItems[]"
2756                on:click="/selectCountry/FR"
2757              >
2758                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
2759<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
2760</svg>
2761</span>
2762                <span class="country">France</span>
2763                <span
2764                  class="localization-form__currency"
2765                  
2766                    hidden
2767                  
2768                >
2769                  PKR
2770                  ₨</span>
2771              </li>
2772              <li
2773                class="localization-form__list-item"
2774                
2775                data-value="DE"
2776                
2777                  data-aliases=""
2778                
2779                id="Germany"
2780                aria-label="Germany"
2781                role="option"
2782                tabindex="-1"
2783                ref="countryListItems[]"
2784                on:click="/selectCountry/DE"
2785              >
2786                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
2787<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
2788</svg>
2789</span>
2790                <span class="country">Germany</span>
2791                <span
2792                  class="localization-form__currency"
2793                  
2794                    hidden
2795                  
2796                >
2797                  PKR
2798                  ₨</span>
2799              </li>
2800              <li
2801                class="localization-form__list-item"
2802                
2803                data-value="GR"
2804                
2805                  data-aliases=""
2806                
2807                id="Greece"
2808                aria-label="Greece"
2809                role="option"
2810                tabindex="-1"
2811                ref="countryListItems[]"
2812                on:click="/selectCountry/GR"
2813              >
2814                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
2815<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
2816</svg>
2817</span>
2818                <span class="country">Greece</span>
2819                <span
2820                  class="localization-form__currency"
2821                  
2822                    hidden
2823                  
2824                >
2825                  PKR
2826                  ₨</span>
2827              </li>
2828              <li
2829                class="localization-form__list-item"
2830                
2831                data-value="ID"
2832                
2833                  data-aliases=""
2834                
2835                id="Indonesia"
2836                aria-label="Indonesia"
2837                role="option"
2838                tabindex="-1"
2839                ref="countryListItems[]"
2840                on:click="/selectCountry/ID"
2841              >
2842                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
2843<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
2844</svg>
2845</span>
2846                <span class="country">Indonesia</span>
2847                <span
2848                  class="localization-form__currency"
2849                  
2850                    hidden
2851                  
2852                >
2853                  PKR
2854                  ₨</span>
2855              </li>
2856              <li
2857                class="localization-form__list-item"
2858                
2859                data-value="IE"
2860                
2861                  data-aliases=""
2862                
2863                id="Ireland"
2864                aria-label="Ireland"
2865                role="option"
2866                tabindex="-1"
2867                ref="countryListItems[]"
2868                on:click="/selectCountry/IE"
2869              >
2870                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
2871<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
2872</svg>
2873</span>
2874                <span class="country">Ireland</span>
2875                <span
2876                  class="localization-form__currency"
2877                  
2878                    hidden
2879                  
2880                >
2881                  PKR
2882                  ₨</span>
2883              </li>
2884              <li
2885                class="localization-form__list-item"
2886                
2887                data-value="IT"
2888                
2889                  data-aliases=""
2890                
2891                id="Italy"
2892                aria-label="Italy"
2893                role="option"
2894                tabindex="-1"
2895                ref="countryListItems[]"
2896                on:click="/selectCountry/IT"
2897              >
2898                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
2899<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
2900</svg>
2901</span>
2902                <span class="country">Italy</span>
2903                <span
2904                  class="localization-form__currency"
2905                  
2906                    hidden
2907                  
2908                >
2909                  PKR
2910                  ₨</span>
2911              </li>
2912              <li
2913                class="localization-form__list-item"
2914                
2915                data-value="KW"
2916                
2917                  data-aliases=""
2918                
2919                id="Kuwait"
2920                aria-label="Kuwait"
2921                role="option"
2922                tabindex="-1"
2923                ref="countryListItems[]"
2924                on:click="/selectCountry/KW"
2925              >
2926                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
2927<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
2928</svg>
2929</span>
2930                <span class="country">Kuwait</span>
2931                <span
2932                  class="localization-form__currency"
2933                  
2934                    hidden
2935                  
2936                >
2937                  PKR
2938                  ₨</span>
2939              </li>
2940              <li
2941                class="localization-form__list-item"
2942                
2943                data-value="LU"
2944                
2945                  data-aliases=""
2946                
2947                id="Luxembourg"
2948                aria-label="Luxembourg"
2949                role="option"
2950                tabindex="-1"
2951                ref="countryListItems[]"
2952                on:click="/selectCountry/LU"
2953              >
2954                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
2955<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
2956</svg>
2957</span>
2958                <span class="country">Luxembourg</span>
2959                <span
2960                  class="localization-form__currency"
2961                  
2962                    hidden
2963                  
2964                >
2965                  PKR
2966                  ₨</span>
2967              </li>
2968              <li
2969                class="localization-form__list-item"
2970                
2971                data-value="MY"
2972                
2973                  data-aliases=""
2974                
2975                id="Malaysia"
2976                aria-label="Malaysia"
2977                role="option"
2978                tabindex="-1"
2979                ref="countryListItems[]"
2980                on:click="/selectCountry/MY"
2981              >
2982                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
2983<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
2984</svg>
2985</span>
2986                <span class="country">Malaysia</span>
2987                <span
2988                  class="localization-form__currency"
2989                  
2990                    hidden
2991                  
2992                >
2993                  PKR
2994                  ₨</span>
2995              </li>
2996              <li
2997                class="localization-form__list-item"
2998                
2999                data-value="NL"
3000                
3001                  data-aliases=""
3002                
3003                id="Netherlands"
3004                aria-label="Netherlands"
3005                role="option"
3006                tabindex="-1"
3007                ref="countryListItems[]"
3008                on:click="/selectCountry/NL"
3009              >
3010                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
3011<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
3012</svg>
3013</span>
3014                <span class="country">Netherlands</span>
3015                <span
3016                  class="localization-form__currency"
3017                  
3018                    hidden
3019                  
3020                >
3021                  PKR
3022                  ₨</span>
3023              </li>
3024              <li
3025                class="localization-form__list-item"
3026                
3027                data-value="NZ"
3028                
3029                  data-aliases=""
3030                
3031                id="New Zealand"
3032                aria-label="New Zealand"
3033                role="option"
3034                tabindex="-1"
3035                ref="countryListItems[]"
3036                on:click="/selectCountry/NZ"
3037              >
3038                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
3039<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
3040</svg>
3041</span>
3042                <span class="country">New Zealand</span>
3043                <span
3044                  class="localization-form__currency"
3045                  
3046                    hidden
3047                  
3048                >
3049                  PKR
3050                  ₨</span>
3051              </li>
3052              <li
3053                class="localization-form__list-item"
3054                
3055                data-value="NO"
3056                
3057                  data-aliases=""
3058                
3059                id="Norway"
3060                aria-label="Norway"
3061                role="option"
3062                tabindex="-1"
3063                ref="countryListItems[]"
3064                on:click="/selectCountry/NO"
3065              >
3066                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
3067<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
3068</svg>
3069</span>
3070                <span class="country">Norway</span>
3071                <span
3072                  class="localization-form__currency"
3073                  
3074                    hidden
3075                  
3076                >
3077                  PKR
3078                  ₨</span>
3079              </li>
3080              <li
3081                class="localization-form__list-item"
3082                
3083                data-value="OM"
3084                
3085                  data-aliases=""
3086                
3087                id="Oman"
3088                aria-label="Oman"
3089                role="option"
3090                tabindex="-1"
3091                ref="countryListItems[]"
3092                on:click="/selectCountry/OM"
3093              >
3094                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
3095<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
3096</svg>
3097</span>
3098                <span class="country">Oman</span>
3099                <span
3100                  class="localization-form__currency"
3101                  
3102                    hidden
3103                  
3104                >
3105                  PKR
3106                  ₨</span>
3107              </li>
3108              <li
3109                class="localization-form__list-item"
3110                
3111                data-value="PL"
3112                
3113                  data-aliases=""
3114                
3115                id="Poland"
3116                aria-label="Poland"
3117                role="option"
3118                tabindex="-1"
3119                ref="countryListItems[]"
3120                on:click="/selectCountry/PL"
3121              >
3122                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
3123<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
3124</svg>
3125</span>
3126                <span class="country">Poland</span>
3127                <span
3128                  class="localization-form__currency"
3129                  
3130                    hidden
3131                  
3132                >
3133                  PKR
3134                  ₨</span>
3135              </li>
3136              <li
3137                class="localization-form__list-item"
3138                
3139                data-value="QA"
3140                
3141                  data-aliases=""
3142                
3143                id="Qatar"
3144                aria-label="Qatar"
3145                role="option"
3146                tabindex="-1"
3147                ref="countryListItems[]"
3148                on:click="/selectCountry/QA"
3149              >
3150                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
3151<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
3152</svg>
3153</span>
3154                <span class="country">Qatar</span>
3155                <span
3156                  class="localization-form__currency"
3157                  
3158                    hidden
3159                  
3160                >
3161                  PKR
3162                  ₨</span>
3163              </li>
3164              <li
3165                class="localization-form__list-item"
3166                
3167                data-value="RU"
3168                
3169                  data-aliases=""
3170                
3171                id="Russia"
3172                aria-label="Russia"
3173                role="option"
3174                tabindex="-1"
3175                ref="countryListItems[]"
3176                on:click="/selectCountry/RU"
3177              >
3178                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
3179<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
3180</svg>
3181</span>
3182                <span class="country">Russia</span>
3183                <span
3184                  class="localization-form__currency"
3185                  
3186                    hidden
3187                  
3188                >
3189                  PKR
3190                  ₨</span>
3191              </li>
3192              <li
3193                class="localization-form__list-item"
3194                
3195                data-value="SA"
3196                
3197                  data-aliases=""
3198                
3199                id="Saudi Arabia"
3200                aria-label="Saudi Arabia"
3201                role="option"
3202                tabindex="-1"
3203                ref="countryListItems[]"
3204                on:click="/selectCountry/SA"
3205              >
3206                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
3207<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
3208</svg>
3209</span>
3210                <span class="country">Saudi Arabia</span>
3211                <span
3212                  class="localization-form__currency"
3213                  
3214                    hidden
3215                  
3216                >
3217                  PKR
3218                  ₨</span>
3219              </li>
3220              <li
3221                class="localization-form__list-item"
3222                
3223                data-value="SG"
3224                
3225                  data-aliases=""
3226                
3227                id="Singapore"
3228                aria-label="Singapore"
3229                role="option"
3230                tabindex="-1"
3231                ref="countryListItems[]"
3232                on:click="/selectCountry/SG"
3233              >
3234                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
3235<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
3236</svg>
3237</span>
3238                <span class="country">Singapore</span>
3239                <span
3240                  class="localization-form__currency"
3241                  
3242                    hidden
3243                  
3244                >
3245                  PKR
3246                  ₨</span>
3247              </li>
3248              <li
3249                class="localization-form__list-item"
3250                
3251                data-value="ES"
3252                
3253                  data-aliases=""
3254                
3255                id="Spain"
3256                aria-label="Spain"
3257                role="option"
3258                tabindex="-1"
3259                ref="countryListItems[]"
3260                on:click="/selectCountry/ES"
3261              >
3262                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
3263<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
3264</svg>
3265</span>
3266                <span class="country">Spain</span>
3267                <span
3268                  class="localization-form__currency"
3269                  
3270                    hidden
3271                  
3272                >
3273                  PKR
3274                  ₨</span>
3275              </li>
3276              <li
3277                class="localization-form__list-item"
3278                
3279                data-value="SE"
3280                
3281                  data-aliases=""
3282                
3283                id="Sweden"
3284                aria-label="Sweden"
3285                role="option"
3286                tabindex="-1"
3287                ref="countryListItems[]"
3288                on:click="/selectCountry/SE"
3289              >
3290                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
3291<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
3292</svg>
3293</span>
3294                <span class="country">Sweden</span>
3295                <span
3296                  class="localization-form__currency"
3297                  
3298                    hidden
3299                  
3300                >
3301                  PKR
3302                  ₨</span>
3303              </li>
3304              <li
3305                class="localization-form__list-item"
3306                
3307                data-value="TR"
3308                
3309                  data-aliases=""
3310                
3311                id="Türkiye"
3312                aria-label="Türkiye"
3313                role="option"
3314                tabindex="-1"
3315                ref="countryListItems[]"
3316                on:click="/selectCountry/TR"
3317              >
3318                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
3319<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
3320</svg>
3321</span>
3322                <span class="country">Türkiye</span>
3323                <span
3324                  class="localization-form__currency"
3325                  
3326                    hidden
3327                  
3328                >
3329                  PKR
3330                  ₨</span>
3331              </li>
3332              <li
3333                class="localization-form__list-item"
3334                
3335                data-value="AE"
3336                
3337                  data-aliases=""
3338                
3339                id="United Arab Emirates"
3340                aria-label="United Arab Emirates"
3341                role="option"
3342                tabindex="-1"
3343                ref="countryListItems[]"
3344                on:click="/selectCountry/AE"
3345              >
3346                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
3347<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
3348</svg>
3349</span>
3350                <span class="country">United Arab Emirates</span>
3351                <span
3352                  class="localization-form__currency"
3353                  
3354                    hidden
3355                  
3356                >
3357                  PKR
3358                  ₨</span>
3359              </li>
3360              <li
3361                class="localization-form__list-item"
3362                
3363                data-value="UZ"
3364                
3365                  data-aliases=""
3366                
3367                id="Uzbekistan"
3368                aria-label="Uzbekistan"
3369                role="option"
3370                tabindex="-1"
3371                ref="countryListItems[]"
3372                on:click="/selectCountry/UZ"
3373              >
3374                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
3375<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
3376</svg>
3377</span>
3378                <span class="country">Uzbekistan</span>
3379                <span
3380                  class="localization-form__currency"
3381                  
3382                    hidden
3383                  
3384                >
3385                  PKR
3386                  ₨</span>
3387              </li></ul>
3388        </div>
3389        <div class="country-selector__overlay"></div>
3390        <input
3391          type="hidden"
3392          name="country_code"
3393          value="US"
3394          ref="countryInput"
3395        >
3396      </div>
3397    
3398
3399    
3400</form></localization-form-component>
3401
3402
3403
3404                </div>
3405              </details>
3406            </drawer-localization-component>
3407          
3408</div>
3409
3410      
3411    </div>
3412    <div
3413      class="menu-drawer__backdrop"
3414      on:click="header-drawer/close"
3415    ></div>
3416  </details>
3417</header-drawer>
3418
3419
3420
3421    </div>
3422
3423  
3424
3425<style data-shopify>
3426  .header__underlay {
3427    --color-submenu: rgb(255 255 255);
3428  }
3429</style>
3430
3431
3432
3433
3434            
3435        
3436      
3437        
3438          
3439              
3440  <search-button
3441    class="search-action search-action--hidden-on-menu"
3442  >
3443    <button
3444      on:click="#search-modal/showDialog"
3445      class="button-unstyled header-actions__action"
3446      aria-label="Search"
3447      aria-haspopup="dialog"
3448    >
3449      <span class="hidden">
3450        Search
3451      </span>
3452
3453      <span class="svg-wrapper ">
3454        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><circle cx="9" cy="9" r="4.75" stroke="currentColor" stroke-width="var(--icon-stroke-width)"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="var(--icon-stroke-width)" d="m12.5 12.5 3.25 3.25"/></svg>
3455
3456      </span>
3457    </button>
3458  </search-button>
3459
3460
3461
3462
3463            
3464        
3465      
3466    </div><div
3467      class="header__column header__column--center"
3468      data-testid="header-top-center"
3469    >
3470      
3471        
3472          
3473              
3474
3475
3476
3477
3478<a
3479  
3480  href="/"
3481  class="size-style spacing-style header-logo"
3482  style="
3483    --size-style-width: ;--size-style-height: ;
3484    --padding-block-start: 0px;--padding-block-end: 0px;
3485    --font-family: var(--font-body--family);
3486    --font-style: var(--font-body--style);
3487    --font-weight: 600;
3488  "
3489  
3490>
3491  
3492
3493  <span
3494    
3495    data-testid="header-logo"
3496  >
3497    
3498  
3499  
3500  
3501  
3502
3503  
3504
3505  
3506
3507  
3508
3509  <img src="//islamiccharts.com/cdn/shop/files/Artboard_7.png?height=100&amp;v=1779783495" alt="Islamic Charts - Home" width="118" height="100" class="header-logo__image" srcset="//islamiccharts.com/cdn/shop/files/Artboard_7.png?height=100&amp;v=1779783495 1x, //islamiccharts.com/cdn/shop/files/Artboard_7.png?height=200&amp;v=1779783495 2x, //islamiccharts.com/cdn/shop/files/Artboard_7.png?height=300&amp;v=1779783495 3x" style="--header-logo-image-width: 119px;--header-logo-image-width-mobile: 119px; --header-logo-image-height: 100px; --header-logo-image-height-mobile: 100px;">
3510
3511
3512  </span>
3513
3514  
3515</a>
3516
3517
3518
3519
3520
3521            
3522        
3523      
3524    </div><div
3525      class="header__column header__column--right"
3526      data-testid="header-top-right"
3527    >
3528      
3529        
3530          
3531              
3532  
3533  
3534    <dropdown-localization-component
3535      class="dropdown-localization mobile:hidden"
3536    >
3537      <button
3538        type="button"
3539        class="button dropdown-localization__button localization-selector header-actions__action"
3540        aria-expanded="false"
3541        aria-controls="dropdown-localization-results"
3542        ref="button"
3543        on:click="/toggleSelector"
3544        style="--menu-localization-font: var(--font-accent--family);  --menu-localization-font-size: 0.875rem; "
3545      >
3546        
3547          
3548            
3549            
3550            <span
3551              class="icon-flag"
3552              style="
3553                background-image: url(//cdn.shopify.com/static/images/flags/us.svg?width=32);
3554                --size-shadow: 4px;
3555                --color-shadow: rgb(var(--color-foreground-rgb) / var(--opacity-30-60));
3556              "
3557            ></span>
3558          
3559          <span
3560            class="currency-code"
3561            data-testid="localization-currency-code"
3562          >PKR</span>
3563        
3564        <span
3565          class="visually-hidden"
3566          data-testid="localization-visually-hidden"
3567        >Region and language selector</span><span class="svg-wrapper icon-caret"><svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
3568  <path d="M11 5.5L7 9.5L3 5.5" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
3569</svg>
3570</span>
3571      </button>
3572
3573      <div
3574        class="localization-wrapper right-bound color-custom-popover"
3575        hidden
3576        ref="panel"
3577      >
3578        
3579<localization-form-component
3580  ref="localizationForm"
3581  data-label-results-count="[count] results"
3582  data-show-filter="true"
3583  style="--menu-localization-font: var(--font-accent--family); --menu-localization-font-size: 0.875rem; --color-shadow: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));"
3584>
3585  
3586<form method="post" action="/localization" id="LocalizationForm" accept-charset="UTF-8" class="localization-form" enctype="multipart/form-data" ref="form" aria-label="Region and language"><input type="hidden" name="form_type" value="localization" /><input type="hidden" name="utf8" value="✓" /><input type="hidden" name="_method" value="put" />
3587      
3588        <div class="country-filter">
3589          <div class="field">
3590            <div class="country-filter__search-icon field__button">
3591              <span class="svg-wrapper">
3592                <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><circle cx="9" cy="9" r="4.75" stroke="currentColor" stroke-width="var(--icon-stroke-width)"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="var(--icon-stroke-width)" d="m12.5 12.5 3.25 3.25"/></svg>
3593
3594              </span>
3595            </div>
3596            <input
3597              class="country-filter__input"
3598              id="country-filter-input"
3599              type="search"
3600              name="country_filter"
3601              value=""
3602              placeholder="Search"
3603              role="combobox"
3604              aria-owns="country-results"
3605              aria-controls="country-results"
3606              aria-haspopup="listbox"
3607              aria-autocomplete="list"
3608              aria-label="Find country"
3609              autocorrect="off"
3610              autocomplete="off"
3611              autocapitalize="off"
3612              spellcheck="false"
3613              ref="search"
3614              on:keyup="/filterCountries"
3615            >
3616            <label
3617              class="field__label visually-hidden"
3618              for="country-filter-input"
3619            >Search</label>
3620            <button
3621              type="reset"
3622              class="button button-unstyled country-filter__reset-button field__button"
3623              aria-label="Reset"
3624              ref="resetButton"
3625              hidden
3626              on:click="/resetCountriesFilter"
3627            >
3628              <span class="svg-wrapper">
3629                <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="6.25" stroke="currentColor" stroke-width="var(--icon-stroke-width)"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="var(--icon-stroke-width)" d="m12.5 7.5-5 5M12.5 12.5l-5-5"/></svg>
3630
3631              </span>
3632            </button>
3633          </div>
3634        </div>
3635      
3636      <div class="country-selector-form__wrapper">
3637        <h2
3638          class="visually-hidden"
3639          id="dropdown-CountryLabel"
3640        >Country/Region</h2>
3641        
3642          <div
3643            id="sr-country-search-results-sections--28024663736610__header_section"
3644            class="visually-hidden"
3645            aria-live="polite"
3646            ref="liveRegion"
3647          ></div>
3648        
3649        <div
3650          class="localization-form__list"
3651          id="dropdown-country-results"
3652          ref="countryList"
3653        >
3654          
3655            <ul
3656              role="list"
3657              class="list-unstyled popular-countries"
3658              aria-label="Country/Region"
3659              ref="popularCountries"
3660            >
3661                <li
3662                  class="localization-form__list-item"
3663                  
3664                  data-value="PK"
3665                  
3666                    data-aliases=""
3667                  
3668                  id="Pakistan"
3669                  aria-label="Pakistan"
3670                  role="option"
3671                  tabindex="-1"
3672                  ref="countryListItems[]"
3673                  on:click="/selectCountry/PK"
3674                >
3675                  <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
3676<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
3677</svg>
3678</span>
3679                  <span class="country">Pakistan</span>
3680                  <span
3681                    class="localization-form__currency"
3682                    
3683                      hidden
3684                    
3685                  >
3686                    PKR
3687                    ₨</span>
3688                </li>
3689                <li
3690                  class="localization-form__list-item"
3691                  
3692                  data-value="GB"
3693                  
3694                    data-aliases="uk,gb,great britain"
3695                  
3696                  id="United Kingdom"
3697                  aria-label="United Kingdom"
3698                  role="option"
3699                  tabindex="-1"
3700                  ref="countryListItems[]"
3701                  on:click="/selectCountry/GB"
3702                >
3703                  <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
3704<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
3705</svg>
3706</span>
3707                  <span class="country">United Kingdom</span>
3708                  <span
3709                    class="localization-form__currency"
3710                    
3711                      hidden
3712                    
3713                  >
3714                    PKR
3715                    ₨</span>
3716                </li>
3717                <li
3718                  class="localization-form__list-item"
3719                  
3720                    aria-current="true"
3721                  
3722                  data-value="US"
3723                  
3724                    data-aliases="us,usa,america,united states of america"
3725                  
3726                  id="United States"
3727                  aria-label="United States"
3728                  role="option"
3729                  tabindex="-1"
3730                  ref="countryListItems[]"
3731                  on:click="/selectCountry/US"
3732                >
3733                  <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
3734<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
3735</svg>
3736</span>
3737                  <span class="country">United States</span>
3738                  <span
3739                    class="localization-form__currency"
3740                    
3741                      hidden
3742                    
3743                  >
3744                    PKR
3745                    ₨</span>
3746                </li></ul>
3747          
3748          <ul
3749            role="list"
3750            class="list-unstyled countries"
3751          >
3752            <span
3753              class="localization-form__list-item localization-form__list-item-disabled"
3754              id="no-results-message"
3755              ref="noResultsMessage"
3756              hidden
3757            >No results found</span>
3758              <li
3759                class="localization-form__list-item"
3760                
3761                data-value="AL"
3762                
3763                  data-aliases=""
3764                
3765                id="Albania"
3766                aria-label="Albania"
3767                role="option"
3768                tabindex="-1"
3769                ref="countryListItems[]"
3770                on:click="/selectCountry/AL"
3771              >
3772                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
3773<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
3774</svg>
3775</span>
3776                <span class="country">Albania</span>
3777                <span
3778                  class="localization-form__currency"
3779                  
3780                    hidden
3781                  
3782                >
3783                  PKR
3784                  ₨</span>
3785              </li>
3786              <li
3787                class="localization-form__list-item"
3788                
3789                data-value="DZ"
3790                
3791                  data-aliases=""
3792                
3793                id="Algeria"
3794                aria-label="Algeria"
3795                role="option"
3796                tabindex="-1"
3797                ref="countryListItems[]"
3798                on:click="/selectCountry/DZ"
3799              >
3800                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
3801<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
3802</svg>
3803</span>
3804                <span class="country">Algeria</span>
3805                <span
3806                  class="localization-form__currency"
3807                  
3808                    hidden
3809                  
3810                >
3811                  PKR
3812                  ₨</span>
3813              </li>
3814              <li
3815                class="localization-form__list-item"
3816                
3817                data-value="AU"
3818                
3819                  data-aliases=""
3820                
3821                id="Australia"
3822                aria-label="Australia"
3823                role="option"
3824                tabindex="-1"
3825                ref="countryListItems[]"
3826                on:click="/selectCountry/AU"
3827              >
3828                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
3829<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
3830</svg>
3831</span>
3832                <span class="country">Australia</span>
3833                <span
3834                  class="localization-form__currency"
3835                  
3836                    hidden
3837                  
3838                >
3839                  PKR
3840                  ₨</span>
3841              </li>
3842              <li
3843                class="localization-form__list-item"
3844                
3845                data-value="AT"
3846                
3847                  data-aliases=""
3848                
3849                id="Austria"
3850                aria-label="Austria"
3851                role="option"
3852                tabindex="-1"
3853                ref="countryListItems[]"
3854                on:click="/selectCountry/AT"
3855              >
3856                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
3857<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
3858</svg>
3859</span>
3860                <span class="country">Austria</span>
3861                <span
3862                  class="localization-form__currency"
3863                  
3864                    hidden
3865                  
3866                >
3867                  PKR
3868                  ₨</span>
3869              </li>
3870              <li
3871                class="localization-form__list-item"
3872                
3873                data-value="AZ"
3874                
3875                  data-aliases=""
3876                
3877                id="Azerbaijan"
3878                aria-label="Azerbaijan"
3879                role="option"
3880                tabindex="-1"
3881                ref="countryListItems[]"
3882                on:click="/selectCountry/AZ"
3883              >
3884                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
3885<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
3886</svg>
3887</span>
3888                <span class="country">Azerbaijan</span>
3889                <span
3890                  class="localization-form__currency"
3891                  
3892                    hidden
3893                  
3894                >
3895                  PKR
3896                  ₨</span>
3897              </li>
3898              <li
3899                class="localization-form__list-item"
3900                
3901                data-value="BH"
3902                
3903                  data-aliases=""
3904                
3905                id="Bahrain"
3906                aria-label="Bahrain"
3907                role="option"
3908                tabindex="-1"
3909                ref="countryListItems[]"
3910                on:click="/selectCountry/BH"
3911              >
3912                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
3913<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
3914</svg>
3915</span>
3916                <span class="country">Bahrain</span>
3917                <span
3918                  class="localization-form__currency"
3919                  
3920                    hidden
3921                  
3922                >
3923                  PKR
3924                  ₨</span>
3925              </li>
3926              <li
3927                class="localization-form__list-item"
3928                
3929                data-value="BD"
3930                
3931                  data-aliases=""
3932                
3933                id="Bangladesh"
3934                aria-label="Bangladesh"
3935                role="option"
3936                tabindex="-1"
3937                ref="countryListItems[]"
3938                on:click="/selectCountry/BD"
3939              >
3940                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
3941<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
3942</svg>
3943</span>
3944                <span class="country">Bangladesh</span>
3945                <span
3946                  class="localization-form__currency"
3947                  
3948                    hidden
3949                  
3950                >
3951                  PKR
3952                  ₨</span>
3953              </li>
3954              <li
3955                class="localization-form__list-item"
3956                
3957                data-value="BE"
3958                
3959                  data-aliases=""
3960                
3961                id="Belgium"
3962                aria-label="Belgium"
3963                role="option"
3964                tabindex="-1"
3965                ref="countryListItems[]"
3966                on:click="/selectCountry/BE"
3967              >
3968                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
3969<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
3970</svg>
3971</span>
3972                <span class="country">Belgium</span>
3973                <span
3974                  class="localization-form__currency"
3975                  
3976                    hidden
3977                  
3978                >
3979                  PKR
3980                  ₨</span>
3981              </li>
3982              <li
3983                class="localization-form__list-item"
3984                
3985                data-value="CA"
3986                
3987                  data-aliases=""
3988                
3989                id="Canada"
3990                aria-label="Canada"
3991                role="option"
3992                tabindex="-1"
3993                ref="countryListItems[]"
3994                on:click="/selectCountry/CA"
3995              >
3996                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
3997<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
3998</svg>
3999</span>
4000                <span class="country">Canada</span>
4001                <span
4002                  class="localization-form__currency"
4003                  
4004                    hidden
4005                  
4006                >
4007                  PKR
4008                  ₨</span>
4009              </li>
4010              <li
4011                class="localization-form__list-item"
4012                
4013                data-value="DK"
4014                
4015                  data-aliases=""
4016                
4017                id="Denmark"
4018                aria-label="Denmark"
4019                role="option"
4020                tabindex="-1"
4021                ref="countryListItems[]"
4022                on:click="/selectCountry/DK"
4023              >
4024                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
4025<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
4026</svg>
4027</span>
4028                <span class="country">Denmark</span>
4029                <span
4030                  class="localization-form__currency"
4031                  
4032                    hidden
4033                  
4034                >
4035                  PKR
4036                  ₨</span>
4037              </li>
4038              <li
4039                class="localization-form__list-item"
4040                
4041                data-value="EG"
4042                
4043                  data-aliases=""
4044                
4045                id="Egypt"
4046                aria-label="Egypt"
4047                role="option"
4048                tabindex="-1"
4049                ref="countryListItems[]"
4050                on:click="/selectCountry/EG"
4051              >
4052                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
4053<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
4054</svg>
4055</span>
4056                <span class="country">Egypt</span>
4057                <span
4058                  class="localization-form__currency"
4059                  
4060                    hidden
4061                  
4062                >
4063                  PKR
4064                  ₨</span>
4065              </li>
4066              <li
4067                class="localization-form__list-item"
4068                
4069                data-value="FI"
4070                
4071                  data-aliases=""
4072                
4073                id="Finland"
4074                aria-label="Finland"
4075                role="option"
4076                tabindex="-1"
4077                ref="countryListItems[]"
4078                on:click="/selectCountry/FI"
4079              >
4080                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
4081<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
4082</svg>
4083</span>
4084                <span class="country">Finland</span>
4085                <span
4086                  class="localization-form__currency"
4087                  
4088                    hidden
4089                  
4090                >
4091                  PKR
4092                  ₨</span>
4093              </li>
4094              <li
4095                class="localization-form__list-item"
4096                
4097                data-value="FR"
4098                
4099                  data-aliases=""
4100                
4101                id="France"
4102                aria-label="France"
4103                role="option"
4104                tabindex="-1"
4105                ref="countryListItems[]"
4106                on:click="/selectCountry/FR"
4107              >
4108                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
4109<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
4110</svg>
4111</span>
4112                <span class="country">France</span>
4113                <span
4114                  class="localization-form__currency"
4115                  
4116                    hidden
4117                  
4118                >
4119                  PKR
4120                  ₨</span>
4121              </li>
4122              <li
4123                class="localization-form__list-item"
4124                
4125                data-value="DE"
4126                
4127                  data-aliases=""
4128                
4129                id="Germany"
4130                aria-label="Germany"
4131                role="option"
4132                tabindex="-1"
4133                ref="countryListItems[]"
4134                on:click="/selectCountry/DE"
4135              >
4136                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
4137<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
4138</svg>
4139</span>
4140                <span class="country">Germany</span>
4141                <span
4142                  class="localization-form__currency"
4143                  
4144                    hidden
4145                  
4146                >
4147                  PKR
4148                  ₨</span>
4149              </li>
4150              <li
4151                class="localization-form__list-item"
4152                
4153                data-value="GR"
4154                
4155                  data-aliases=""
4156                
4157                id="Greece"
4158                aria-label="Greece"
4159                role="option"
4160                tabindex="-1"
4161                ref="countryListItems[]"
4162                on:click="/selectCountry/GR"
4163              >
4164                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
4165<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
4166</svg>
4167</span>
4168                <span class="country">Greece</span>
4169                <span
4170                  class="localization-form__currency"
4171                  
4172                    hidden
4173                  
4174                >
4175                  PKR
4176                  ₨</span>
4177              </li>
4178              <li
4179                class="localization-form__list-item"
4180                
4181                data-value="ID"
4182                
4183                  data-aliases=""
4184                
4185                id="Indonesia"
4186                aria-label="Indonesia"
4187                role="option"
4188                tabindex="-1"
4189                ref="countryListItems[]"
4190                on:click="/selectCountry/ID"
4191              >
4192                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
4193<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
4194</svg>
4195</span>
4196                <span class="country">Indonesia</span>
4197                <span
4198                  class="localization-form__currency"
4199                  
4200                    hidden
4201                  
4202                >
4203                  PKR
4204                  ₨</span>
4205              </li>
4206              <li
4207                class="localization-form__list-item"
4208                
4209                data-value="IE"
4210                
4211                  data-aliases=""
4212                
4213                id="Ireland"
4214                aria-label="Ireland"
4215                role="option"
4216                tabindex="-1"
4217                ref="countryListItems[]"
4218                on:click="/selectCountry/IE"
4219              >
4220                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
4221<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
4222</svg>
4223</span>
4224                <span class="country">Ireland</span>
4225                <span
4226                  class="localization-form__currency"
4227                  
4228                    hidden
4229                  
4230                >
4231                  PKR
4232                  ₨</span>
4233              </li>
4234              <li
4235                class="localization-form__list-item"
4236                
4237                data-value="IT"
4238                
4239                  data-aliases=""
4240                
4241                id="Italy"
4242                aria-label="Italy"
4243                role="option"
4244                tabindex="-1"
4245                ref="countryListItems[]"
4246                on:click="/selectCountry/IT"
4247              >
4248                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
4249<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
4250</svg>
4251</span>
4252                <span class="country">Italy</span>
4253                <span
4254                  class="localization-form__currency"
4255                  
4256                    hidden
4257                  
4258                >
4259                  PKR
4260                  ₨</span>
4261              </li>
4262              <li
4263                class="localization-form__list-item"
4264                
4265                data-value="KW"
4266                
4267                  data-aliases=""
4268                
4269                id="Kuwait"
4270                aria-label="Kuwait"
4271                role="option"
4272                tabindex="-1"
4273                ref="countryListItems[]"
4274                on:click="/selectCountry/KW"
4275              >
4276                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
4277<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
4278</svg>
4279</span>
4280                <span class="country">Kuwait</span>
4281                <span
4282                  class="localization-form__currency"
4283                  
4284                    hidden
4285                  
4286                >
4287                  PKR
4288                  ₨</span>
4289              </li>
4290              <li
4291                class="localization-form__list-item"
4292                
4293                data-value="LU"
4294                
4295                  data-aliases=""
4296                
4297                id="Luxembourg"
4298                aria-label="Luxembourg"
4299                role="option"
4300                tabindex="-1"
4301                ref="countryListItems[]"
4302                on:click="/selectCountry/LU"
4303              >
4304                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
4305<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
4306</svg>
4307</span>
4308                <span class="country">Luxembourg</span>
4309                <span
4310                  class="localization-form__currency"
4311                  
4312                    hidden
4313                  
4314                >
4315                  PKR
4316                  ₨</span>
4317              </li>
4318              <li
4319                class="localization-form__list-item"
4320                
4321                data-value="MY"
4322                
4323                  data-aliases=""
4324                
4325                id="Malaysia"
4326                aria-label="Malaysia"
4327                role="option"
4328                tabindex="-1"
4329                ref="countryListItems[]"
4330                on:click="/selectCountry/MY"
4331              >
4332                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
4333<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
4334</svg>
4335</span>
4336                <span class="country">Malaysia</span>
4337                <span
4338                  class="localization-form__currency"
4339                  
4340                    hidden
4341                  
4342                >
4343                  PKR
4344                  ₨</span>
4345              </li>
4346              <li
4347                class="localization-form__list-item"
4348                
4349                data-value="NL"
4350                
4351                  data-aliases=""
4352                
4353                id="Netherlands"
4354                aria-label="Netherlands"
4355                role="option"
4356                tabindex="-1"
4357                ref="countryListItems[]"
4358                on:click="/selectCountry/NL"
4359              >
4360                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
4361<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
4362</svg>
4363</span>
4364                <span class="country">Netherlands</span>
4365                <span
4366                  class="localization-form__currency"
4367                  
4368                    hidden
4369                  
4370                >
4371                  PKR
4372                  ₨</span>
4373              </li>
4374              <li
4375                class="localization-form__list-item"
4376                
4377                data-value="NZ"
4378                
4379                  data-aliases=""
4380                
4381                id="New Zealand"
4382                aria-label="New Zealand"
4383                role="option"
4384                tabindex="-1"
4385                ref="countryListItems[]"
4386                on:click="/selectCountry/NZ"
4387              >
4388                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
4389<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
4390</svg>
4391</span>
4392                <span class="country">New Zealand</span>
4393                <span
4394                  class="localization-form__currency"
4395                  
4396                    hidden
4397                  
4398                >
4399                  PKR
4400                  ₨</span>
4401              </li>
4402              <li
4403                class="localization-form__list-item"
4404                
4405                data-value="NO"
4406                
4407                  data-aliases=""
4408                
4409                id="Norway"
4410                aria-label="Norway"
4411                role="option"
4412                tabindex="-1"
4413                ref="countryListItems[]"
4414                on:click="/selectCountry/NO"
4415              >
4416                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
4417<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
4418</svg>
4419</span>
4420                <span class="country">Norway</span>
4421                <span
4422                  class="localization-form__currency"
4423                  
4424                    hidden
4425                  
4426                >
4427                  PKR
4428                  ₨</span>
4429              </li>
4430              <li
4431                class="localization-form__list-item"
4432                
4433                data-value="OM"
4434                
4435                  data-aliases=""
4436                
4437                id="Oman"
4438                aria-label="Oman"
4439                role="option"
4440                tabindex="-1"
4441                ref="countryListItems[]"
4442                on:click="/selectCountry/OM"
4443              >
4444                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
4445<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
4446</svg>
4447</span>
4448                <span class="country">Oman</span>
4449                <span
4450                  class="localization-form__currency"
4451                  
4452                    hidden
4453                  
4454                >
4455                  PKR
4456                  ₨</span>
4457              </li>
4458              <li
4459                class="localization-form__list-item"
4460                
4461                data-value="PL"
4462                
4463                  data-aliases=""
4464                
4465                id="Poland"
4466                aria-label="Poland"
4467                role="option"
4468                tabindex="-1"
4469                ref="countryListItems[]"
4470                on:click="/selectCountry/PL"
4471              >
4472                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
4473<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
4474</svg>
4475</span>
4476                <span class="country">Poland</span>
4477                <span
4478                  class="localization-form__currency"
4479                  
4480                    hidden
4481                  
4482                >
4483                  PKR
4484                  ₨</span>
4485              </li>
4486              <li
4487                class="localization-form__list-item"
4488                
4489                data-value="QA"
4490                
4491                  data-aliases=""
4492                
4493                id="Qatar"
4494                aria-label="Qatar"
4495                role="option"
4496                tabindex="-1"
4497                ref="countryListItems[]"
4498                on:click="/selectCountry/QA"
4499              >
4500                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
4501<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
4502</svg>
4503</span>
4504                <span class="country">Qatar</span>
4505                <span
4506                  class="localization-form__currency"
4507                  
4508                    hidden
4509                  
4510                >
4511                  PKR
4512                  ₨</span>
4513              </li>
4514              <li
4515                class="localization-form__list-item"
4516                
4517                data-value="RU"
4518                
4519                  data-aliases=""
4520                
4521                id="Russia"
4522                aria-label="Russia"
4523                role="option"
4524                tabindex="-1"
4525                ref="countryListItems[]"
4526                on:click="/selectCountry/RU"
4527              >
4528                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
4529<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
4530</svg>
4531</span>
4532                <span class="country">Russia</span>
4533                <span
4534                  class="localization-form__currency"
4535                  
4536                    hidden
4537                  
4538                >
4539                  PKR
4540                  ₨</span>
4541              </li>
4542              <li
4543                class="localization-form__list-item"
4544                
4545                data-value="SA"
4546                
4547                  data-aliases=""
4548                
4549                id="Saudi Arabia"
4550                aria-label="Saudi Arabia"
4551                role="option"
4552                tabindex="-1"
4553                ref="countryListItems[]"
4554                on:click="/selectCountry/SA"
4555              >
4556                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
4557<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
4558</svg>
4559</span>
4560                <span class="country">Saudi Arabia</span>
4561                <span
4562                  class="localization-form__currency"
4563                  
4564                    hidden
4565                  
4566                >
4567                  PKR
4568                  ₨</span>
4569              </li>
4570              <li
4571                class="localization-form__list-item"
4572                
4573                data-value="SG"
4574                
4575                  data-aliases=""
4576                
4577                id="Singapore"
4578                aria-label="Singapore"
4579                role="option"
4580                tabindex="-1"
4581                ref="countryListItems[]"
4582                on:click="/selectCountry/SG"
4583              >
4584                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
4585<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
4586</svg>
4587</span>
4588                <span class="country">Singapore</span>
4589                <span
4590                  class="localization-form__currency"
4591                  
4592                    hidden
4593                  
4594                >
4595                  PKR
4596                  ₨</span>
4597              </li>
4598              <li
4599                class="localization-form__list-item"
4600                
4601                data-value="ES"
4602                
4603                  data-aliases=""
4604                
4605                id="Spain"
4606                aria-label="Spain"
4607                role="option"
4608                tabindex="-1"
4609                ref="countryListItems[]"
4610                on:click="/selectCountry/ES"
4611              >
4612                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
4613<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
4614</svg>
4615</span>
4616                <span class="country">Spain</span>
4617                <span
4618                  class="localization-form__currency"
4619                  
4620                    hidden
4621                  
4622                >
4623                  PKR
4624                  ₨</span>
4625              </li>
4626              <li
4627                class="localization-form__list-item"
4628                
4629                data-value="SE"
4630                
4631                  data-aliases=""
4632                
4633                id="Sweden"
4634                aria-label="Sweden"
4635                role="option"
4636                tabindex="-1"
4637                ref="countryListItems[]"
4638                on:click="/selectCountry/SE"
4639              >
4640                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
4641<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
4642</svg>
4643</span>
4644                <span class="country">Sweden</span>
4645                <span
4646                  class="localization-form__currency"
4647                  
4648                    hidden
4649                  
4650                >
4651                  PKR
4652                  ₨</span>
4653              </li>
4654              <li
4655                class="localization-form__list-item"
4656                
4657                data-value="TR"
4658                
4659                  data-aliases=""
4660                
4661                id="Türkiye"
4662                aria-label="Türkiye"
4663                role="option"
4664                tabindex="-1"
4665                ref="countryListItems[]"
4666                on:click="/selectCountry/TR"
4667              >
4668                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
4669<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
4670</svg>
4671</span>
4672                <span class="country">Türkiye</span>
4673                <span
4674                  class="localization-form__currency"
4675                  
4676                    hidden
4677                  
4678                >
4679                  PKR
4680                  ₨</span>
4681              </li>
4682              <li
4683                class="localization-form__list-item"
4684                
4685                data-value="AE"
4686                
4687                  data-aliases=""
4688                
4689                id="United Arab Emirates"
4690                aria-label="United Arab Emirates"
4691                role="option"
4692                tabindex="-1"
4693                ref="countryListItems[]"
4694                on:click="/selectCountry/AE"
4695              >
4696                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
4697<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
4698</svg>
4699</span>
4700                <span class="country">United Arab Emirates</span>
4701                <span
4702                  class="localization-form__currency"
4703                  
4704                    hidden
4705                  
4706                >
4707                  PKR
4708                  ₨</span>
4709              </li>
4710              <li
4711                class="localization-form__list-item"
4712                
4713                data-value="UZ"
4714                
4715                  data-aliases=""
4716                
4717                id="Uzbekistan"
4718                aria-label="Uzbekistan"
4719                role="option"
4720                tabindex="-1"
4721                ref="countryListItems[]"
4722                on:click="/selectCountry/UZ"
4723              >
4724                <span class="svg-wrapper icon-checkmark"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-checkmark">
4725<path d="M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
4726</svg>
4727</span>
4728                <span class="country">Uzbekistan</span>
4729                <span
4730                  class="localization-form__currency"
4731                  
4732                    hidden
4733                  
4734                >
4735                  PKR
4736                  ₨</span>
4737              </li></ul>
4738        </div>
4739        <div class="country-selector__overlay"></div>
4740        <input
4741          type="hidden"
4742          name="country_code"
4743          value="US"
4744          ref="countryInput"
4745        >
4746      </div>
4747    
4748
4749    
4750</form></localization-form-component>
4751
4752
4753
4754      </div>
4755    </dropdown-localization-component>
4756  
4757
4758            
4759        
4760      
4761        
4762          
4763              
4764
4765<script
4766  type="module"
4767  src="//islamiccharts.com/cdn/shop/t/20/assets/cart-icon.js?v=109428858171217037751788706330"
4768  fetchpriority="low"
4769></script>
4769
4770
4771
4772
4773
4774
4775<header-actions
4776  
4777>
4778  
4779
4780  
4781    <button
4782      class="header-actions__action button-unstyled"
4783      on:click="#cart-drawer/toggle"
4784      aria-haspopup="dialog"
4785      aria-expanded="false"
4786      aria-controls="cart-drawer"
4787      aria-label="Cart"
4788      aria-describedby="cart-bubble-text"
4789      data-testid="cart-drawer-trigger"
4790    >
4791      
4792  <cart-icon
4793    class="header-actions__cart-icon"
4794    data-testid="cart-icon"
4795  >
4796    <span class="hidden">
4797      Cart
4798    </span>
4799
4800    <span
4801      class="svg-wrapper "
4802      aria-hidden="true"
4803    >
4804      <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="var(--icon-stroke-width)" d="M3.392 6.875h13.216v8.016c0 .567-.224 1.112-.624 1.513-.4.402-.941.627-1.506.627H5.522a2.13 2.13 0 0 1-1.506-.627 2.15 2.15 0 0 1-.624-1.513zM8.818 2.969h2.333c.618 0 1.211.247 1.649.686a2.35 2.35 0 0 1 .683 1.658v1.562H6.486V5.313c0-.622.246-1.218.683-1.658a2.33 2.33 0 0 1 1.65-.686"/></svg>
4805
4806    </span>
4807
4808    
4809
4810<div
4811  ref="cartBubble"
4812  class="cart-bubble visually-hidden"
4813  style="--cart-bubble-background-fallback: #000000; --cart-bubble-text-fallback: #faf9f1;"
4814  
4815  
4816    data-maintain-ratio
4817  
4818>
4819  <span class="cart-bubble__background"></span>
4820  <span
4821    ref="cartBubbleText"
4822    id="cart-bubble-text"
4823    class="cart-bubble__text"
4824  >
4825    <span
4826      class="cart-bubble__text-count hidden"
4827      ref="cartBubbleCount"
4828      aria-hidden="true"
4829      data-testid="cart-bubble"
4830    >
48310</span>
4832  </span>
4833</div>
4834
4835
4836
4837  </cart-icon>
4838
4839    </button>
4840  
4841
4842  <span
4843    ref="liveRegion"
4844    class="visually-hidden"
4845    role="status"
4846    data-testid="cart-count-live-region"
4847  ></span>
4848</header-actions>
4849
4850<script
4851  type="module"
4852  src="//islamiccharts.com/cdn/shop/t/20/assets/header-actions.js?v=157135685635924702181788706330"
4853  fetchpriority="low"
4854></script>
4854
4855
4856
4857
4858          
4859        
4860      
4861    </div>
4862        </div>
4863      </div>
4864    
4865  
4866    
4867
4868    
4869
4870    
4871    
4872      <div
4873        class="header__row header__row--bottom color-#f1ede7 section section--full-width-margin section--page-width mobile:hidden color-custom-bottom-sections--28024663736610__header_section"
4874        ref="headerRowTop"style="--border-bottom-width: 0px;">
4875        <div class="header__columns spacing-style">
4876          <style data-shopify>
4877    .color-custom-bottom-sections--28024663736610__header_section,
4878    .color-custom-bottom-sections--28024663736610__header_section .text-block {
4879      /* Background */
4880      --color-background: #f1ede7;
4881      --color-background-rgb: 241 237 231;
4882
4883      /* Opacity values adjusted for background brightness */
4884      
4885--opacity-5-15: 0.05; --opacity-10-25: 0.1; --opacity-35-55: 0.35; --opacity-40-60:
48860.4; --opacity-30-60: 0.3; --opacity-60: 0.6;
4887
4888
4889      
4890        /* Foreground / text — explicit or smart-contrasted */
4891        --color: #000000;
4892        --color-rgb: 0 0 0;
4893        --color-foreground: #000000;
4894        --color-foreground-rgb: 0 0 0;
4895        --color-foreground-muted: rgb(0 0 0 / var(--opacity-muted-text));
4896        --color-foreground-subdued: rgb(0 0 0 / var(--opacity-subdued-text));
4897        --color-border: var(--palette-darkest);
4898        --color-border-rgb: var(--palette-darkest-rgb);
4899      
4900    }
4901
4902    
4903      .color-custom-bottom-sections--28024663736610__header_section {
4904        /* Form-related tokens stay on .color-custom only — .text-block is a prose
4905           container (text/announcement/inline-text/blog-post-description/
4906           collection-link/price/sku) and never holds form inputs. */
4907        --input-disabled-background-color: rgb(0 0 0 / var(--opacity-10));
4908        --input-disabled-border-color: rgb(0 0 0 / var(--opacity-5));
4909        --input-disabled-text-color: rgb(0 0 0 / var(--opacity-50));
4910        --checkbox-border: 1px solid rgb(0 0 0 / var(--opacity-35-55));
4911      }
4912    
4913
4914    .color-custom-bottom-sections--28024663736610__header_section {
4915      color: var(--color, var(--color-foreground));
4916      background-color: var(--color-background);
4917    }
4918  </style>
4919
4920
4921      
4922      
4923<div
4924      class="header__column header__column--center"
4925      data-testid="header-bottom-center"
4926    >
4927      
4928        
4929          
4930              
4931
4932
4933
4934    
4935
4936
4937
4938
4939  <style data-shopify>
4940    .color-custom-AeVZDKzVpVUwwaGc4a__header-menu,
4941    .color-custom-AeVZDKzVpVUwwaGc4a__header-menu .text-block {
4942      /* Background */
4943      --color-background: #ffffff;
4944      --color-background-rgb: 255 255 255;
4945
4946      /* Opacity values adjusted for background brightness */
4947      
4948--opacity-5-15: 0.05; --opacity-10-25: 0.1; --opacity-35-55: 0.35; --opacity-40-60:
49490.4; --opacity-30-60: 0.3; --opacity-60: 0.6;
4950
4951
4952      
4953        /* Foreground / text — explicit or smart-contrasted */
4954        --color: #000000;
4955        --color-rgb: 0 0 0;
4956        --color-foreground: #000000;
4957        --color-foreground-rgb: 0 0 0;
4958        --color-foreground-muted: rgb(0 0 0 / var(--opacity-muted-text));
4959        --color-foreground-subdued: rgb(0 0 0 / var(--opacity-subdued-text));
4960        --color-border: var(--palette-darkest);
4961        --color-border-rgb: var(--palette-darkest-rgb);
4962      
4963    }
4964
4965    
4966      .color-custom-AeVZDKzVpVUwwaGc4a__header-menu {
4967        /* Form-related tokens stay on .color-custom only — .text-block is a prose
4968           container (text/announcement/inline-text/blog-post-description/
4969           collection-link/price/sku) and never holds form inputs. */
4970        --input-disabled-background-color: rgb(0 0 0 / var(--opacity-10));
4971        --input-disabled-border-color: rgb(0 0 0 / var(--opacity-5));
4972        --input-disabled-text-color: rgb(0 0 0 / var(--opacity-50));
4973        --checkbox-border: 1px solid rgb(0 0 0 / var(--opacity-35-55));
4974      }
4975    
4976
4977    .color-custom-AeVZDKzVpVUwwaGc4a__header-menu {
4978      color: var(--color, var(--color-foreground));
4979      background-color: var(--color-background);
4980    }
4981  </style>
4982
4983
4984
4985    
4986
4987    <header-menu
4988      ref="headerMenu"
4989      class="header-menu"
4990      
4991      data-hydration-key="header-menu"
4992      data-skip-node-update
4993    >
4994      <div class="header-menu__inner">
4995        <nav
4996          class="menu-list"
4997          aria-label="Primary"
4998          style="--menu-top-level-font-family: var(--font-primary--family);
4999--menu-top-level-font-size-desktop: var(--font-size--body-md); --menu-top-level-font-style: var(--font-primary--style);
4999 --menu-top-level-font-weight: var(--font-primary--weight); --menu-top-level-font-case:none;
5000
5001  --menu-top-level-font-size: var(--menu-font-sm--size); --menu-top-level-font-line-height:
5002  var(--menu-font-sm--line-height);
5003
5004--menu-top-level-font-color: var(--color-foreground); --menu-top-level-font-color-rgb: var(--color-foreground-rgb);
5005"
5006        >
5007          
5008          <overflow-list
5009  
5010    ref="overflowMenu"
5011  
5012  
5013    class="overflow-menu color-custom-AeVZDKzVpVUwwaGc4a__header-menu"
5014  
5015  
5016    minimum-items="2"
5017  
5018  
5019    data-testid="header-menu-overflow-list"
5020  
5021  
5022    data-skip-node-update
5023  
5024>
5025  <template shadowrootmode="open">
5026    <link href="//islamiccharts.com/cdn/shop/t/20/assets/overflow-list.css?v=16727044177065489451788706330" rel="stylesheet" type="text/css" media="all" />
5027
5028    <ul part="list">
5029      <slot></slot>
5030      <slot
5031        name="more"
5032        part="more"
5033        hidden
5034        
5035      >
5036        <li
5037          part="more"
5038        >
5039          <button
5040            class="button"
5041            type="button"
5042            tabindex="0"
5043            
5044          >
5045            More
5046          </button>
5047        </li>
5048      </slot>
5049      <li
5050        part="placeholder"
5051        hidden
5052      ></li>
5053    </ul>
5054
5055    <div part="overflow">
5056      <ul part="overflow-list">
5057        <slot name="overflow"></slot>
5058      </ul>
5059    </div>
5060  </template>
5061
5062  
5063      
5064        <li
5065          class="menu-list__list-item"
5066          on:blur="/deactivate"
5067          on:pointerenter="/activate"
5068          on:pointerleave="/deactivate"
5069        ><a
5070            href="/"
5071            data-skip-node-update="true"
5072            class="menu-list__link"
5073            
5074            ref="menuitem"
5075          >
5076            <span class="menu-list__link-title">Home</span>
5077          </a></li>
5078      
5079        <li
5080          class="menu-list__list-item"
5081          on:blur="/deactivate"
5082          on:pointerenter="/activate"
5083          on:pointerleave="/deactivate"
5084        ><a
5085            href="/collections/all"
5086            data-skip-node-update="true"
5087            class="menu-list__link"
5088            
5089            ref="menuitem"
5090          >
5091            <span class="menu-list__link-title">Products</span>
5092          </a></li>
5093      
5094        <li
5095          class="menu-list__list-item"
5096          on:blur="/deactivate"
5097          on:pointerenter="/activate"
5098          on:pointerleave="/deactivate"
5099        ><a
5100            href="/pages/faqs"
5101            data-skip-node-update="true"
5102            class="menu-list__link"
5103            
5104            ref="menuitem"
5105          >
5106            <span class="menu-list__link-title">FAQs</span>
5107          </a></li>
5108      
5109        <li
5110          class="menu-list__list-item"
5111          on:blur="/deactivate"
5112          on:pointerenter="/activate"
5113          on:pointerleave="/deactivate"
5114        ><a
5115            href="/pages/about"
5116            data-skip-node-update="true"
5117            class="menu-list__link menu-list__link--active"
5118            
5119              aria-current="page"
5120            
5121            ref="menuitem"
5122          >
5123            <span class="menu-list__link-title">About</span>
5124          </a></li>
5125      
5126        <li
5127          class="menu-list__list-item"
5128          on:blur="/deactivate"
5129          on:pointerenter="/activate"
5130          on:pointerleave="/deactivate"
5131        ><a
5132            href="/pages/contact"
5133            data-skip-node-update="true"
5134            class="menu-list__link"
5135            
5136            ref="menuitem"
5137          >
5138            <span class="menu-list__link-title">Contact</span>
5139          </a></li>
5140      
5141        <li
5142          class="menu-list__list-item"
5143          on:blur="/deactivate"
5144          on:pointerenter="/activate"
5145          on:pointerleave="/deactivate"
5146        ><a
5147            href="/pages/track-order"
5148            data-skip-node-update="true"
5149            class="menu-list__link"
5150            
5151            ref="menuitem"
5152          >
5153            <span class="menu-list__link-title">Track Order</span>
5154          </a></li>
5155      
5156      <li
5157        class="menu-list__list-item"
5158        slot="more"
5159        on:blur="/deactivate"
5160        on:pointerenter="/activate"
5161        on:pointerleave="/deactivate"
5162      >
5163        <button
5164          class="menu-list__link button-unstyled"
5165          aria-haspopup="true"
5166          aria-expanded="false"
5167          ref="menuitem"
5168          on:click="/toggle"
5169          data-testid="header-menu-more-button"
5170          data-skip-node-update
5171        >
5172          <span class="menu-list__link-title">More</span>
5173        </button>
5174      </li>
5175    
5176</overflow-list>
5177
5178        </nav>
5179      </div>
5180
5181      
5181<script
5182        src="//islamiccharts.com/cdn/shop/t/20/assets/header-menu.js?v=1177411761452820701788706330"
5183        type="module"
5184        fetchpriority="low"
5185      ></script>
5185
5186    </header-menu>
5187
5188
5189<style data-shopify>
5190  .header__underlay {
5191    --color-submenu: rgb(255 255 255);
5192  }
5193</style>
5194
5195
5196
5197
5198            
5199        
5200      
5201    </div><div
5202      class="header__column header__column--right"
5203      data-testid="header-bottom-right"
5204    >
5205      
5206        
5207          
5208              
5209  <search-button
5210    class="search-action"
5211  >
5212    <button
5213      on:click="#search-modal/showDialog"
5214      class="button-unstyled header-actions__action"
5215      aria-label="Search"
5216      aria-haspopup="dialog"
5217    >
5218      <span class="hidden">
5219        Search
5220      </span>
5221
5222      <span class="svg-wrapper ">
5223        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><circle cx="9" cy="9" r="4.75" stroke="currentColor" stroke-width="var(--icon-stroke-width)"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="var(--icon-stroke-width)" d="m12.5 12.5 3.25 3.25"/></svg>
5224
5225      </span>
5226    </button>
5227  </search-button>
5228
5229
5230
5231
5232            
5233        
5234      
5235    </div>
5236        </div>
5237      </div>
5238    
5239  
5240
5241  
5242</header-component>
5243
5244<script
5245  src="//islamiccharts.com/cdn/shop/t/20/assets/header.js?v=183210491532312943441788706330"
5246  type="module"
5247></script>
5247
5248
5249
5250
5251
5252  
5252<script type="module">
5253    import { hydrate } from '@theme/section-hydration';
5254    const url = new URL(window.location.href);
5255    url.searchParams.delete('page');
5256    hydrate('sections--28024663736610__header_section', url);
5257  </script>
5257
5258
5259
5260
5261</header>
5262<!-- END sections: header-group -->
5263      </div>
5264
5265      
5265<script>
5266        /**
5267         * Sets `--header-height` and `--header-group-height` to measured values before first paint.
5268         *
5269         * A few CSS rules position content relative to the header at first paint — a hero sized to
5270         * the remaining viewport, a transparent header's negative margin. Without a measured value
5271         * those rules use the `60px` fallback from `sections/header.liquid`, and the content visibly
5272         * jumps once `header.js` corrects the values after load.
5273         *
5274         * Measuring forces layout mid-parse, so it only runs where a consuming rule exists.
5275         * Callers opt in: the transparent-header branch below, or `snippets/measure-header-heights.liquid`,
5276         * which any new first-paint consumer must render too.
5277         *
5278         * Measures once per page; after load, header.js's ResizeObservers keep the values fresh.
5279         * The group-height walk mimics calculateHeaderGroupHeight() in utilities.js — keep them
5280         * in sync.
5281         */
5282        window.measureHeaderHeights = (function () {
5283          let measured = false;
5284
5285          return function measureHeaderHeights() {
5286            if (measured) return;
5287
5288            const header = document.querySelector('#header-component');
5289            const headerGroup = document.querySelector('#header-group');
5290
5291            if (!header || !headerGroup) return;
5292            measured = true;
5293
5294            const headerHeight = header.offsetHeight;
5295
5296            let headerGroupHeight = 0;
5297            for (const element of headerGroup.children) {
5298              if (element instanceof HTMLElement) headerGroupHeight += element.offsetHeight;
5299            }
5300
5301            /**
5302             * A transparent header is absolutely positioned, so the loop above counts its section
5303             * wrapper as 0px. When a section follows it in the group, header.liquid pushes that
5304             * section down by the header's height using a margin, which offsetHeight also
5305             * excludes — so the header's height has to be added back manually.
5306             */
5307            if (header.hasAttribute('transparent') && header.parentElement?.nextElementSibling) {
5308              headerGroupHeight += headerHeight;
5309            }
5310
5311            document.body.style.setProperty('--header-height', `${headerHeight}px`);
5312            document.body.style.setProperty('--header-group-height', `${headerGroupHeight}px`);
5313          };
5314        })();
5315
5316        /**
5317         * Transparent-header rules consume the measured heights at first paint on every
5318         * template, so the transparent case opts in globally here instead of per-section.
5319         */
5320        if (document.querySelector('#header-component')?.hasAttribute('transparent')) {
5321          measureHeaderHeights();
5322        }
5323
5324        /**
5325         * Sets `--top-row-height`, consumed by the header underlays and submenus. Deferred to a
5326         * rAF so the height read doesn't force layout mid-parse, and scoped to the
5327         * header, where all consumers live, so the write only invalidates the header subtree.
5328         * Mimics the `--top-row-height` write in updateHeaderHeights() in utilities.js
5329         */
5330        (function setTopRowHeight() {
5331          const header = document.querySelector('#header-component');
5332          const headerTopRow = header?.querySelector('.header__row--top');
5333          if (!headerTopRow) return;
5334
5335          window.requestAnimationFrame(function () {
5336            header.style.setProperty('--top-row-height', `${headerTopRow.getBoundingClientRect().height}px`);
5337          });
5338        })();
5339
5340        /**
5341         * Sets `--transparent-header-offset-boolean` when the first section must offset itself
5342         * under a transparent header. The non-offset case relies on the `0` default declared in
5343         * sections/header.liquid — unlike updateTransparentHeaderOffset() in utilities.js, which
5344         * re-runs on editor changes and must write '0' to reset a previously written '1'.
5345         */
5346        (function updateTransparentHeaderOffset() {
5347          const header = document.querySelector('#header-component');
5348          const headerSection = document.querySelector('#header-group .header-section');
5349          if (!headerSection || !header?.hasAttribute('transparent')) return;
5350
5351          const hasImmediateSection = headerSection.nextElementSibling?.classList.contains('shopify-section');
5352          if (!hasImmediateSection) {
5353            document.body.style.setProperty('--transparent-header-offset-boolean', '1');
5354          }
5355        })();
5356
5357        /**
5358         * Sets the initial menu style (inline menu vs. drawer) on the header component.
5359         * Mimics setHeaderMenuStyle() in utilities.js
5360         */
5361        (function setHeaderMenuStyle() {
5362          const headerComponent = document.querySelector('#header-component');
5363          if (headerComponent) {
5364            const isTouchDevice = 'ontouchstart' in window && navigator.maxTouchPoints > 0;
5365            const overflowList = headerComponent.querySelector('overflow-list');
5366            const hasReachedMinimum = overflowList && overflowList.hasAttribute('minimum-reached');
5367            headerComponent.dataset.menuStyle = isTouchDevice || hasReachedMinimum ? 'drawer' : 'menu';
5368          }
5369        })();
5370      </script>
5370
5371
5372      <main
5373        id="MainContent"
5374        class="content-for-layout"
5375        role="main"
5376        data-page-transition-enabled="false"
5377        data-product-transition="false"
5378        data-template="page"
5379      >
5380        <div id="shopify-section-template--28024663671074__main" class="shopify-section section-wrapper">
5381
5382
5383
5384
5385
5386
5387  <style data-shopify>
5388    .color-custom-template--28024663671074__main,
5389    .color-custom-template--28024663671074__main .text-block {
5390      /* Background */
5391      --color-background: #ffffff;
5392      --color-background-rgb: 255 255 255;
5393
5394      /* Opacity values adjusted for background brightness */
5395      
5396--opacity-5-15: 0.05; --opacity-10-25: 0.1; --opacity-35-55: 0.35; --opacity-40-60:
53970.4; --opacity-30-60: 0.3; --opacity-60: 0.6;
5398
5399
5400      
5401        /* Foreground / text — explicit or smart-contrasted */
5402        --color: #000000;
5403        --color-rgb: 0 0 0;
5404        --color-foreground: #000000;
5405        --color-foreground-rgb: 0 0 0;
5406        --color-foreground-muted: rgb(0 0 0 / var(--opacity-muted-text));
5407        --color-foreground-subdued: rgb(0 0 0 / var(--opacity-subdued-text));
5408        --color-border: var(--palette-darkest);
5409        --color-border-rgb: var(--palette-darkest-rgb);
5410      
5411    }
5412
5413    
5414      .color-custom-template--28024663671074__main {
5415        /* Form-related tokens stay on .color-custom only — .text-block is a prose
5416           container (text/announcement/inline-text/blog-post-description/
5417           collection-link/price/sku) and never holds form inputs. */
5418        --input-disabled-background-color: rgb(0 0 0 / var(--opacity-10));
5419        --input-disabled-border-color: rgb(0 0 0 / var(--opacity-5));
5420        --input-disabled-text-color: rgb(0 0 0 / var(--opacity-50));
5421        --checkbox-border: 1px solid rgb(0 0 0 / var(--opacity-35-55));
5422      }
5423    
5424
5425    .color-custom-template--28024663671074__main {
5426      color: var(--color, var(--color-foreground));
5427      background-color: var(--color-background);
5428    }
5429  </style>
5430
5431
5432
5433<div
5434  class="section-background color-custom-template--28024663671074__main"
5435></div>
5436<div class="section page-width-content color-custom-template--28024663671074__main">
5437  <div
5438    class="
5439      spacing-style
5440      layout-panel-flex
5441      layout-panel-flex--column
5442      section-content-wrapper
5443      mobile-column
5444    "
5445    style="
5446      --flex-direction: column; --flex-wrap: nowrap; --flex-wrap-mobile: wrap;
5447
5448--gap: max(24px, calc(var(--gap-scale, 1.0) * 32px));
5449
5450--horizontal-alignment: ; --vertical-alignment: ;
5451--vertical-alignment-mobile: ;
5452
5453      --padding-block-start: max(20px, calc(var(--spacing-scale) * 40px));--padding-block-end: max(20px, calc(var(--spacing-scale) * 80px));
5454    "
5455  >
5456    
5457
5458
5459
5460
5461
5462
5463
5464
5465
5466
5467
5468  <div class=" spacing-style text-block text-block--AV0lyVC84UVhlbG5nR__heading h2    text-block--align-left  "  style="    --padding-block-start: 0px; --padding-block-end:0px; --padding-inline-start:0px; --padding-inline-end:0px;            --width: 100%;    --max-width: var(--max-width--body-normal);          --text-align: left;          ">
5469    <h1>About Us</h1>
5470  </div>
5471
5472
5473
5474
5475
5476
5477<div id="shopify-block-AVllDMnZsN0NNRE1xR__page-content" class="shopify-block rte">
5478
5479<div
5480  class="page-content"
5481  style="
5482    
5483  "
5484>
5485  <rte-formatter>
5486    <div style="text-align: left;">
5487<div style="direction: ltr; border-width: 100%;">
5488<div style="direction: ltr; margin-top: 0in; margin-left: 0in; width: 6.184in;">
5489<div style="direction: ltr; margin-top: 0in; margin-left: 0in; width: 6.184in;">
5490<p data-path-to-node="6"><b data-path-to-node="6" data-index-in-node="0">ABOUT HELPFUL CHARTS PUBLISHING</b></p>
5491<p data-path-to-node="7">Welcome to <b data-path-to-node="7" data-index-in-node="11">Helpful Charts Publishing</b>, a registered educational publishing house with the <b data-path-to-node="7" data-index-in-node="89">SECP (Securities and Exchange Commission of Pakistan)</b>. We specialize in Educational Infographics, Data Visualization, and Historical Mapping.</p>
5492<p data-path-to-node="8"><b data-path-to-node="8" data-index-in-node="0">Our Mission: Visualizing History</b> Our core focus is to transform complex genealogical data and classical historical records into engaging, easy-to-understand <b data-path-to-node="8" data-index-in-node="157">Visual Learning Tools</b>. We design academic wall charts tailored for students, history researchers, and educational institutions.</p>
5493<p data-path-to-node="9"><b data-path-to-node="9" data-index-in-node="0">ABOUT THIS PROJECT: THE CIVILIZATION SERIES</b> <span style="color: rgb(246, 4, 4);">You are currently visiting <b data-path-to-node="9" data-index-in-node="71">IslamicCharts.com</b>,</span> a specialized academic project by Helpful Charts Publishing.</p>
5494<p data-path-to-node="10">This project is dedicated to the <b data-path-to-node="10" data-index-in-node="33">historical study of civilizations</b>. Just as one might study <i data-path-to-node="10" data-index-in-node="92">Roman History</i> or <i data-path-to-node="10" data-index-in-node="109">Greek Antiquity</i>, this collection focuses on the genealogical and chronological history of the <strong>Ancient Middle Eastern Civilization</strong> spanning over 1,400 years.</p>
5495<p data-path-to-node="11"><b data-path-to-node="11" data-index-in-node="0">Note:</b> Our publications are strictly <b data-path-to-node="11" data-index-in-node="36">educational and historical</b> in nature, designed to support history curriculums and academic research.</p>
5496<hr data-path-to-node="12">
5497<p data-path-to-node="13"><b data-path-to-node="13" data-index-in-node="0">THE FOUNDER &amp; LEAD RESEARCHER</b> The project is led by <b data-path-to-node="13" data-index-in-node="52">Mr. Syed Faqeer Haider</b>, a Data Historian and Digital Creator known for his work in <b data-path-to-node="13" data-index-in-node="135">Genealogical Data Research</b>.</p>
5498<p data-path-to-node="14">With a community of over <b data-path-to-node="14" data-index-in-node="25">1.5 million history enthusiasts</b> and <b data-path-to-node="14" data-index-in-node="61">300 million views</b>
5498 across social platforms, Mr. Haider specializes in converting dense, classical historical texts into modern, structured visual formats. Every chart produced is backed by rigorous academic research and primary source verification.</p>
5499<p style="margin: 0in; font-family: Calibri; font-size: 11.0pt;"> </p>
5500<p style="margin: 0in; font-family: Calibri; font-size: 11.0pt;"><img src="https://cdn.shopify.com/s/files/1/0721/0772/0994/files/Profile_Picture.png?v=1769155753" alt="Secular historical timeline and genealogy map curated by an independent freelance history researcher. This educational poster traces the family tree of world-famous historical personalities, making it an ideal visual tool for homeschooling, parenting, and history books readers."></p>
5501<div style="text-align: center;"><strong>MR. SYED FAQEER HAIDER</strong></div>
5502<div style="text-align: center;"><strong><span style="color: #ff0000;"> </span></strong></div>
5503<hr data-path-to-node="15">
5504<p data-path-to-node="16"><b data-path-to-node="16" data-index-in-node="0">OUR METHODOLOGY: DATA-DRIVEN HISTORY</b> History is often scattered across voluminous texts, making it difficult for the modern generation to visualize timelines and lineages. <b data-path-to-node="16" data-index-in-node="172">Visual Learning</b> is the solution.</p>
5505<p data-path-to-node="17">We document and present history in a <b data-path-to-node="17" data-index-in-node="37">Structured, Chronological Format</b>. By converting textual records into <b data-path-to-node="17" data-index-in-node="106">Infographic Maps</b>, we help visual learners connect the dots between eras, regions, and historical figures.</p>
5506<p data-path-to-node="18"><b data-path-to-node="18" data-index-in-node="0">Why We Do It:</b> In the digital age, access to structured genealogical records is declining. We bridge this gap by providing:</p>
5507<ul data-path-to-node="19">
5508<li>
5509<p data-path-to-node="19,0,0"><b data-path-to-node="19,0,0" data-index-in-node="0">Structured Learning:</b> Chronological family trees that simplify complex historical eras.</p>
5510</li>
5511<li>
5512<p data-path-to-node="19,1,0"><b data-path-to-node="19,1,0" data-index-in-node="0">Academic Rigor:</b> Data verified from primary historical sources and classical manuscripts.</p>
5513</li>
5514<li>
5515<p data-path-to-node="19,2,0"><b data-path-to-node="19,2,0" data-index-in-node="0">Visual Utility:</b> professionally designed posters that function as effective educational tools for classrooms, libraries, and study rooms.</p>
5516</li>
5517</ul>
5518<p data-path-to-node="20"><b data-path-to-node="20" data-index-in-node="0">Helpful Charts Publishing</b> aims to make genealogical knowledge intellectually engaging and visually accessible for the next generation of learners.</p>
5519</div>
5520</div>
5521</div>
5522</div>
5523  </rte-formatter>
5524</div>
5525
5526
5527
5528
5529</div>
5530
5531  </div>
5532</div>
5533
5534
5535</div>
5536      </main>
5537
5538      <footer>
5539        <!-- BEGIN sections: footer-group -->
5540<div id="shopify-section-sections--28024663703842__footer" class="shopify-section shopify-section-group-footer-group section-wrapper">
5541
5542
5543
5544
5545
5546
5547  <style data-shopify>
5548    .color-custom-sections--28024663703842__footer,
5549    .color-custom-sections--28024663703842__footer .text-block {
5550      /* Background */
5551      --color-background: #faf9f1;
5552      --color-background-rgb: 250 249 241;
5553
5554      /* Opacity values adjusted for background brightness */
5555      
5556--opacity-5-15: 0.05; --opacity-10-25: 0.1; --opacity-35-55: 0.35; --opacity-40-60:
55570.4; --opacity-30-60: 0.3; --opacity-60: 0.6;
5558
5559
5560      
5561        /* Foreground / text — explicit or smart-contrasted */
5562        --color: #000000;
5563        --color-rgb: 0 0 0;
5564        --color-foreground: #000000;
5565        --color-foreground-rgb: 0 0 0;
5566        --color-foreground-muted: rgb(0 0 0 / var(--opacity-muted-text));
5567        --color-foreground-subdued: rgb(0 0 0 / var(--opacity-subdued-text));
5568        --color-border: var(--palette-darkest);
5569        --color-border-rgb: var(--palette-darkest-rgb);
5570      
5571    }
5572
5573    
5574      .color-custom-sections--28024663703842__footer {
5575        /* Form-related tokens stay on .color-custom only — .text-block is a prose
5576           container (text/announcement/inline-text/blog-post-description/
5577           collection-link/price/sku) and never holds form inputs. */
5578        --input-disabled-background-color: rgb(0 0 0 / var(--opacity-10));
5579        --input-disabled-border-color: rgb(0 0 0 / var(--opacity-5));
5580        --input-disabled-text-color: rgb(0 0 0 / var(--opacity-50));
5581        --checkbox-border: 1px solid rgb(0 0 0 / var(--opacity-35-55));
5582      }
5583    
5584
5585    .color-custom-sections--28024663703842__footer {
5586      color: var(--color, var(--color-foreground));
5587      background-color: var(--color-background);
5588    }
5589  </style>
5590
5591
5592
5593<div
5594  class="section-background color-custom-sections--28024663703842__footer"
5595></div>
5596<div
5597  class="section section--page-width color-custom-sections--28024663703842__footer"
5598>
5599  
5600  <div
5601    class="
5602      footer-content
5603      spacing-style
5604      
5605      
5606    "
5607    style="
5608      --padding-block-start: max(20px, calc(var(--spacing-scale) * 36px));--padding-block-end: 18px;
5609      --footer-gap: 12px;
5610      --grid-columns: 3;
5611      --last-row-count: 3;
5612      --tablet-last-row-count: 1;
5613    "
5614  >
5615    
5616
5617
5618
5619
5620  
5621
5622
5623
5624
5625
5626
5627  
5628
5629
5630<accordion-custom
5631  
5632    class="menu"
5633  
5634  
5635  
5636    open-by-default-on-desktop
5637  
5638  
5639    open-by-default-on-mobile
5640  
5641  
5642    data-disable-on-desktop="true"
5643  
5644  
5645    data-disable-on-mobile="true"
5646  
5647  
5648  
5649  
5650>
5651  
5652    <details
5653      class="
5654        menu__details
5655        spacing-style
5656        
5657      "
5658      data-testid="menu-details"
5659      style="
5660        --spacing--size: 12px;
5661        --padding-block-start: 0px;--padding-block-end: 0px;--padding-inline-start: 0px;--padding-inline-end: 0px;
5662      "
5663      
5664        open
5665      
5666      
5667    >
5668      <summary class="menu__heading h3">
5669        <span class="menu__heading__default">Shop</span>
5670        <span class="menu__heading__accordion">
5671          Shop
5672          
5673            <span class="menu__heading__toggle svg-wrapper icon-caret icon-animated"><svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
5674  <path d="M11 5.5L7 9.5L3 5.5" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
5675</svg>
5676</span>
5677          
5678        </span>
5679      </summary>
5680
5681      <nav
5682        class="details-content"
5683        
5684      >
5685        
5686          <ul class="list-unstyled">
5687            
5688              <li class="menu__item paragraph">
5689                <a href="/policies/shipping-policy">
5690                  🚚 Shipping Policy
5691                </a>
5692              </li>
5693            
5694              <li class="menu__item paragraph">
5695                <a href="/policies/refund-policy">
5696                  🛡️ Return and Refund Policy
5697                </a>
5698              </li>
5699            
5700              <li class="menu__item paragraph">
5701                <a href="/policies/privacy-policy">
5702                  🔒 Privacy Policy
5703                </a>
5704              </li>
5705            
5706              <li class="menu__item paragraph">
5707                <a href="/policies/terms-of-service">
5708                  ⚖️Terms of Service
5709                </a>
5710              </li>
5711            
5712          </ul>
5713        
5714      </nav>
5715    </details>
5716  
5717</accordion-custom>
5718
5719
5720
5721
5722
5723
5724
5725
5726
5727
5728
5729
5730
5731  
5732
5733
5734
5735
5736
5737
5738  
5739
5740
5741<accordion-custom
5742  
5743    class="menu"
5744  
5745  
5746  
5747    open-by-default-on-desktop
5748  
5749  
5750    open-by-default-on-mobile
5751  
5752  
5753    data-disable-on-desktop="true"
5754  
5755  
5756    data-disable-on-mobile="true"
5757  
5758  
5759  
5760  
5761>
5762  
5763    <details
5764      class="
5765        menu__details
5766        spacing-style
5767        
5768      "
5769      data-testid="menu-details"
5770      style="
5771        --spacing--size: 12px;
5772        --padding-block-start: 0px;--padding-block-end: 0px;--padding-inline-start: 0px;--padding-inline-end: 0px;
5773      "
5774      
5775        open
5776      
5777      
5778    >
5779      <summary class="menu__heading h3">
5780        <span class="menu__heading__default">Help</span>
5781        <span class="menu__heading__accordion">
5782          Help
5783          
5784            <span class="menu__heading__toggle svg-wrapper icon-caret icon-animated"><svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
5785  <path d="M11 5.5L7 9.5L3 5.5" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
5786</svg>
5787</span>
5788          
5789        </span>
5790      </summary>
5791
5792      <nav
5793        class="details-content"
5794        
5795      >
5796        
5797          <ul class="list-unstyled">
5798            
5799              <li class="menu__item paragraph">
5800                <a href="/pages/contact">
5801                  📝 Contact us Form
5802                </a>
5803              </li>
5804            
5805              <li class="menu__item paragraph">
5806                <a href="tel:03100000240">
5807                  📞 Call: 0310 0000 240
5808                </a>
5809              </li>
5810            
5811              <li class="menu__item paragraph">
5812                <a href="https://api.whatsapp.com/send/?phone=923187314447">
5813                  💬 WhatsApp: +92 318 731 4448
5814                </a>
5815              </li>
5816            
5817          </ul>
5818        
5819      </nav>
5820    </details>
5821  
5822</accordion-custom>
5823
5824
5825
5826
5827
5828
5829
5830
5831
5832
5833
5834
5835
5836
5837
5838
5839
5840
5841
5842<div
5843  class="
5844    group-block
5845    group-block--height-fill
5846    group-block--width-fill
5847    border-style
5848    spacing-style
5849    size-style
5850    
5851    
5852  "
5853  style="
5854    
5855--border-width: 1px; --border-style: none; --border-color:
5856rgb(var(--color-border-rgb) / 1.0); --border-radius: 0px; 
5857
5858    --padding-block-start: 0px;--padding-block-end: 4px;--padding-inline-start: 0px;--padding-inline-end: 0px;
5859    --size-style-width: 100%;--size-style-height: 100%;--size-style-width-mobile: 100%; --size-style-width-mobile-min: 5rem;
5860    
5861  "
5862  
5863  data-testid="group-block"
5864><div class="group-block__media-wrapper">
5865    
5866
5867
5868
5869
5870
5871
5872    
5873  </div>
5874
5875  <div
5876    class="
5877      group-block-content
5878      
5879      layout-panel-flex
5880      layout-panel-flex--column
5881      
5882    "
5883    style="--flex-direction: column; --flex-wrap: nowrap; --flex-wrap-mobile: wrap;
5884
5885--gap: 24px;
5886
5887--horizontal-alignment: flex-start; --vertical-alignment: flex-start;
5888--vertical-alignment-mobile: flex-start;
5889"
5890  >
5891  
5892<div
5893  class="social-icons__wrapper social-icons__wrapper--AQVlzZGlTVkNKdDhWZ__social_links_JBkCiP"
5894  
5895>
5896  
5897  
5898
5899  
5900    
5901
5902    
5903    
5904  
5905    
5906
5907    
5908    
5909  
5910    
5911
5912    
5913    
5914  
5915    
5916
5917    
5918    
5919  
5920    
5921
5922    
5923    
5924  
5925    
5926
5927    
5928    
5929  
5930    
5931
5932    
5933    
5934  
5935    
5936
5937    
5938    
5939  
5940    
5941
5942    
5943    
5944  
5945    
5946
5947    
5948    
5949  
5950    
5951
5952    
5953    
5954  
5955    
5956
5957    
5958    
5959  
5960    
5961
5962    
5963    
5964  
5965</div>
5966
5967
5968
5969
5970
5971</div>
5972</div>
5973
5974
5975
5976
5977
5978
5979  </div>
5980</div>
5981
5982
5983
5984
5985</div><div id="shopify-section-sections--28024663703842__utilities" class="shopify-section shopify-section-group-footer-group footer-utilities">
5986
5987
5988
5989
5990
5991
5992  <style data-shopify>
5993    .color-custom-sections--28024663703842__utilities,
5994    .color-custom-sections--28024663703842__utilities .text-block {
5995      /* Background */
5996      --color-background: #42021c;
5997      --color-background-rgb: 66 2 28;
5998
5999      /* Opacity values adjusted for background brightness */
6000      
6001--opacity-5-15: 0.15; --opacity-10-25: 0.25; --opacity-35-55: 0.55; --opacity-40-60:
60020.6; --opacity-30-60: 0.6; --opacity-60: 0.6;
6003
6004
6005      
6006        /* Foreground / text — explicit or smart-contrasted */
6007        --color: var(--palette-lightest);
6008        --color-rgb: var(--palette-lightest-rgb);
6009        --color-foreground: var(--palette-lightest);
6010        --color-foreground-rgb: var(--palette-lightest-rgb);
6011        --color-foreground-muted: rgb(var(--palette-lightest-rgb) / var(--opacity-muted-text));
6012        --color-foreground-subdued: rgb(var(--palette-lightest-rgb) / var(--opacity-subdued-text));
6013        --color-border: var(--palette-lightest);
6014        --color-border-rgb: var(--palette-lightest-rgb);
6015      
6016    }
6017
6018    
6019      .color-custom-sections--28024663703842__utilities {
6020        /* Form-related tokens stay on .color-custom only — .text-block is a prose
6021           container (text/announcement/inline-text/blog-post-description/
6022           collection-link/price/sku) and never holds form inputs. */
6023        --input-disabled-background-color: rgb(var(--palette-lightest-rgb) / var(--opacity-10));
6024        --input-disabled-border-color: rgb(var(--palette-lightest-rgb) / var(--opacity-5));
6025        --input-disabled-text-color: rgb(var(--palette-lightest-rgb) / var(--opacity-50));
6026        --checkbox-border: 1px solid rgb(var(--palette-lightest-rgb) / var(--opacity-35-55));
6027      }
6028    
6029
6030    .color-custom-sections--28024663703842__utilities {
6031      color: var(--color, var(--color-foreground));
6032      background-color: var(--color-background);
6033    }
6034  </style>
6035
6036
6037
6038<div
6039  class="section-background color-custom-sections--28024663703842__utilities"
6040></div>
6041<div
6042  class="section section--page-width color-custom-sections--28024663703842__utilities"
6043  
6044>
6045  <div
6046    class="utilities utilities--blocks-1 spacing-style"
6047    style="--padding-block-start: 20px;--padding-block-end: 18px; --border-width: 1px; --gap: 24px;"
6048    data-testid="footer-utilities"
6049  >
6050    
6051
6052<div
6053  class="
6054    footer-utilities__group-copyright
6055    custom-typography
6056    custom-font-size
6057  "
6058  style="
6059    
6060--font-size: 0.75rem;      --font-weight: ;--font-family: ;    --text-transform: none;    --text-wrap: pretty;          --line-height: var(--line-height--body-);        --letter-spacing: var(--letter-spacing--body-);
6061    
6062  "
6063  
6064>
6065  <span class="footer-utilities__text">
6066    &copy; 2026
6067    <a href="/" title="">Islamic Charts</a></span>
6068</div>
6069
6070
6071
6072
6073
6074  </div>
6075</div>
6076
6077
6078
6079
6080</div>
6081<!-- END sections: footer-group -->
6082      </footer>
6083    </div>
6084
6085    
6086
6087    <div
6088      id="shopify-section-cart-drawer-section"
6089      class="shopify-section"
6090    >
6091  
6092
6093  
6093<script
6094    type="module"
6095    src="//islamiccharts.com/cdn/shop/t/20/assets/cart-drawer.js?v=101430053943909765251788706330"
6096    fetchpriority="low"
6097  ></script>
6097
6098
6099  
6100
6101  <theme-drawer
6102    id="cart-drawer"
6103    data-skip-node-update
6104  >
6105    <dialog
6106      ref="panel"
6107      class="theme-drawer__dialog color-custom-drawer"
6108      aria-labelledby="cart-drawer-heading"
6109      cart-summary-sticky="true"
6110    >
6111      <cart-drawer-component
6112        
6113          auto-open
6114        
6115      >
6116        <template id="empty-cart-template">
6117          
6118    <div
6119      class="cart-drawer__content"
6120      aria-label="Cart"
6121    >
6122      <h2
6123        class="theme-drawer__title h4"
6124        id="cart-drawer-heading"
6125      >
6126        Your cart is empty
6127      </h2>
6128
6129      <div class="cart-drawer__items">
6130        
6131
6132
6133
6134
6135
6136
6137
6138
6139
6140<script
6141  src="//islamiccharts.com/cdn/shop/t/20/assets/component-cart-items.js?v=14476580701730542761788706330"
6142  type="module"
6143  fetchpriority="low"
6144></script>
vendor: 1 bytes, line 6144
6144
6145<script
6146  src="//islamiccharts.com/cdn/shop/t/20/assets/component-cart-quantity-selector.js?v=168493463479860323171788706330"
6147  type="module"
6148  fetchpriority="low"
6149></script>
vendor: 1 bytes, line 6149
6149
6150<script
6151  src="//islamiccharts.com/cdn/shop/t/20/assets/volume-pricing-info.js?v=150538418000149674651788706330"
6152  type="module"
6153  fetchpriority="low"
6154></script>
6154
6155
6156
6157
6158
6159<div
6160  
6161  class="cart-items__wrapper cart-items__wrapper--drawer-empty"
6162  
6163    data-cart-drawer-empty
6164  
6165  style=""
6166>
6167  
6168<a
6169      class="button cart-items__empty-button"
6170      href="/collections/all"
6171    >
6172      <span class="button-text">
6173        Continue shopping
6174      </span>
6175    </a></div>
6176
6177
6178
6179      </div>
6180    </div>
6181  
6182        </template>
6183
6184        <div
6185          class="cart-drawer__inner cart-drawer--empty"
6186          data-hydration-key="cart-drawer-inner"
6187        ><div class="theme-drawer__header">
6188              <button
6189                on:click="#cart-drawer/close"
6190                class="theme-drawer__close-button cart-drawer__close-button--empty"
6191                type="button"
6192                aria-label="Close"
6193              >
6194                <span class="svg-wrapper"><svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
6195<path d="M11.1765 12.025C11.4108 12.2594 11.7907 12.2594 12.025 12.025C12.2594 11.7907 12.2594 11.4108 12.025 11.1765L8.84931 8.00078L12.025 4.82505C12.2594 4.59073 12.2594 4.21083 12.025 3.97652C11.7907 3.7422 11.4108 3.7422 11.1765 3.97652L8.00078 7.15225L4.82505 3.97652C4.59073 3.7422 4.21083 3.7422 3.97652 3.97652C3.7422 4.21083 3.7422 4.59073 3.97652 4.82505L7.15225 8.00078L3.97652 11.1765C3.7422 11.4108 3.7422 11.7907 3.97652 12.025C4.21083 12.2594 4.59073 12.2594 4.82505 12.025L8.00078 8.84931L11.1765 12.025Z" fill="currentColor"/>
6196</svg>
6197</span>
6198              </button>
6199            </div>
6200          
6201
6202<cart-items-component
6203  class="cart-items-component"
6204  
6205    data-drawer
6206    view-event-trigger="dialog"
6207  
6208  data-section-id="cart-drawer-section"
6209  
6210  view-event-payload="{&quot;context&quot;:null,&quot;cart&quot;:null}"
6211  
6212>
6213  
6214
6215    <div
6216      class="cart-drawer__content"
6217      aria-label="Cart"
6218    >
6219      <h2
6220        class="theme-drawer__title h4"
6221        id="cart-drawer-heading"
6222      >
6223        Your cart is empty
6224      </h2>
6225
6226      <div class="cart-drawer__items">
6227        
6228
6229
6230
6231
6232
6233
6234
6235
6236
6237<script
6238  src="//islamiccharts.com/cdn/shop/t/20/assets/component-cart-items.js?v=14476580701730542761788706330"
6239  type="module"
6240  fetchpriority="low"
6241></script>
vendor: 1 bytes, line 6241
6241
6242<script
6243  src="//islamiccharts.com/cdn/shop/t/20/assets/component-cart-quantity-selector.js?v=168493463479860323171788706330"
6244  type="module"
6245  fetchpriority="low"
6246></script>
vendor: 1 bytes, line 6246
6246
6247<script
6248  src="//islamiccharts.com/cdn/shop/t/20/assets/volume-pricing-info.js?v=150538418000149674651788706330"
6249  type="module"
6250  fetchpriority="low"
6251></script>
6251
6252
6253
6254
6255
6256<div
6257  
6258  class="cart-items__wrapper cart-items__wrapper--drawer-empty"
6259  
6260    data-cart-drawer-empty
6261  
6262  style=""
6263>
6264  
6265<a
6266      class="button cart-items__empty-button"
6267      href="/collections/all"
6268    >
6269      <span class="button-text">
6270        Continue shopping
6271      </span>
6272    </a></div>
6273
6274
6275
6276      </div>
6277    </div>
6278  
6279
6280</cart-items-component>
6281
6282
6283
6284        </div>
6285      </cart-drawer-component>
6286    </dialog>
6287  </theme-drawer>
6288
6289  
6290    </div>
6291  
6292
6293
6294    
6295
6296
6297
6298
6299
6300
6301<script
6302  type="module"
6303  src="//islamiccharts.com/cdn/shop/t/20/assets/theme-drawer.js?v=69307657216630184831788706330"
6304  fetchpriority="low"
6305></script>
6305
6306
6307<script>
6308  /* Runs synchronously during HTML parsing — opens the correct drawer on first
6309     paint if navigation state was saved, so it renders with the rest of the page. */
6310  (function () {
6311    var drawerIds = (sessionStorage.getItem('theme-drawer-open') || '').split(',').filter(Boolean);
6312    if (!drawerIds.length) return;
6313
6314    // Only restore on wide viewports (squeeze mode). On narrow viewports the
6315    // drawer is a modal overlay — let it start closed after navigation rather
6316    // than re-opening a fullscreen dialog the user may have left behind.
6317    if (!window.matchMedia('(min-width: 990px)').matches) return;
6318
6319    var dialogs = [];
6320    for (var i = 0; i < drawerIds.length; i++) {
6321      var drawer = document.getElementById(drawerIds[i]);
6322      if (!drawer) continue;
6323
6324      drawer.setAttribute('open', '');
6325
6326      // Set [open] directly so the CSS slide-in applies without triggering
6327      // the browser's dialog focusing steps — on wide viewports the drawer is
6328      // a sidebar, not a modal, so focus should stay where it is.
6329      // The instant class suppresses the slide-in transition for the initial restore.
6330      // Set --drawer-stack-order so z-index layering matches the original order.
6331      drawer.style.setProperty('--drawer-stack-order', String(i + 1));
6332
6333      var dialog = drawer.querySelector('dialog');
6334      if (dialog) {
6335        dialog.setAttribute('open', '');
6336        dialog.classList.add('theme-drawer__dialog-instant');
6337        dialogs.push(dialog);
6338      }
6339
6340      // Let each drawer type handle its own restore (e.g. shopify-chat mode).
6341      // Synchronous dispatch — listeners attached during earlier parsing run immediately.
6342      drawer.dispatchEvent(new CustomEvent('theme-drawer:restoring'));
6343    }
6344
6345    // Apply squeeze immediately, bypassing the margin transition.
6346    // Only squeeze if at least one drawer was actually restored — saved
6347    // drawer IDs may not exist on every page (e.g. cart-drawer on /cart).
6348    var pageWrapper = document.querySelector('.page-wrapper');
6349    if (pageWrapper && dialogs.length > 0) {
6350      pageWrapper.style.transition = 'none';
6351      pageWrapper.classList.add('page-wrapper--drawer-open');
6352    }
6353
6354    // Re-enable transitions after one paint so the instant state is rendered first.
6355    requestAnimationFrame(function () {
6356      requestAnimationFrame(function () {
6357        if (pageWrapper) pageWrapper.style.transition = '';
6358        for (var j = 0; j < dialogs.length; j++) {
6359          dialogs[j].classList.remove('theme-drawer__dialog-instant');
6360        }
6361      });
6362    });
6363  })();
6364</script>
6364
6365
6366<script
6367  type="module"
6368>
6369  const pageWrapper = document.querySelector('.page-wrapper');
6370  const squeezeQuery = window.matchMedia('(min-width: 990px)');
6371
6372  // ── Squeeze coordination ──
6373  // Listens to all drawers. Only squeezes on wide viewports.
6374  document.addEventListener('theme-drawer:open', () => {
6375    if (squeezeQuery.matches) {
6376      pageWrapper?.classList.add('page-wrapper--drawer-open');
6377    }
6378  });
6379
6380  document.addEventListener('theme-drawer:close', () => {
6381    const openDrawer = document.querySelector('theme-drawer[open]');
6382    if (!openDrawer) {
6383      pageWrapper?.classList.remove('page-wrapper--drawer-open');
6384    }
6385  });
6386
6387  squeezeQuery.addEventListener('change', () => {
6388    const openDrawer = document.querySelector('theme-drawer[open]');
6389    pageWrapper?.classList.toggle('page-wrapper--drawer-open', Boolean(openDrawer) && squeezeQuery.matches);
6390  });
6391
6392  // ── State persistence ──
6393  // Store open drawer IDs sorted by their visual stack order so
6394  // the restore script can recreate the same z-index layering.
6395  function persistDrawerState() {
6396    const openDrawers = Array.from(document.querySelectorAll('theme-drawer[open]:not([no-persist])'));
6397    if (!openDrawers.length) {
6398      sessionStorage.removeItem('theme-drawer-open');
6399      return;
6400    }
6401
6402    openDrawers.sort((a, b) => {
6403      const orderA = Number(a.style.getPropertyValue('--drawer-stack-order') || 0);
6404      const orderB = Number(b.style.getPropertyValue('--drawer-stack-order') || 0);
6405      return orderA - orderB;
6406    });
6407
6408    sessionStorage.setItem('theme-drawer-open', openDrawers.map((d) => d.id).join(','));
6409  }
6410
6411  document.addEventListener('theme-drawer:open', persistDrawerState);
6412  document.addEventListener('theme-drawer:close', persistDrawerState);
6413</script>
6413
6414
6415
6416    
6417
6418
6419
6420
6421
6422
6423
6424
6425
6426
6427<script
6428  src="//islamiccharts.com/cdn/shop/t/20/assets/dialog.js?v=144816527575655702281788706330"
6429  type="module"
6430></script>
6430
6431
6432<script
6433  src="//islamiccharts.com/cdn/shop/t/20/assets/predictive-search.js?v=162722252387887966571788706330"
6434  type="module"
6435  fetchpriority="low"
6436></script>
6436
6437
6438<dialog-component
6439  id="search-modal"
6440  class="search-modal"
6441  
6442>
6443  <dialog
6444    ref="dialog"
6445    on:click="/closeDialogOnClickOutside"
6446    on:keydown="/closeDialogOnEscapePress"
6447    class="search-modal__content dialog-modal"
6448    scroll-lock
6449    aria-labelledby="search-modal-heading"
6450  >
6451    <h2
6452      id="search-modal-heading"
6453      class="visually-hidden"
6454    >
6455      Search
6456    </h2>
6457    <predictive-search-component
6458      class="predictive-search color-custom-popover"
6459      style="--product-corner-radius: 10px; --card-corner-radius: 10px;"
6460      data-section-id="predictive-search"
6461      data-testid="search-component--modal"
6462      role="search"
6463      aria-label="Search"
6464    >
6465      <form
6466        action="/search"
6467        method="get"
6468        role="search"
6469        class="predictive-search-form"
6470        ref="form"
6471        on:keydown="/onSearchKeyDown"
6472      >
6473        <div
6474          class="predictive-search-form__header"
6475        >
6476          <div class="predictive-search-form__header-inner">
6477            <label
6478              for="cmdk-input"
6479              class="visually-hidden"
6480            >Search</label>
6481            <input
6482              class="search-input"
6483              id="cmdk-input"
6484              type="search"
6485              name="q"
6486              role="combobox"
6487              aria-expanded="false"
6488              aria-owns="predictive-search-results"
6489              aria-controls="predictive-search-results"
6490              aria-haspopup="listbox"
6491              aria-autocomplete="list"
6492              autocomplete="off"
6493              placeholder="Search"
6494              ref="searchInput"
6495              on:input="/search"
6496              on:keydown="/onSearchKeyDown"
6497            >
6498            <input
6499              name="options[prefix]"
6500              type="hidden"
6501              value="last"
6502            >
6503            <span class="svg-wrapper predictive-search__icon">
6504              <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><circle cx="9" cy="9" r="4.75" stroke="currentColor" stroke-width="var(--icon-stroke-width)"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="var(--icon-stroke-width)" d="m12.5 12.5 3.25 3.25"/></svg>
6505
6506            </span>
6507            <button
6508              type="button"
6509              class="button-unstyled predictive-search__reset-button"
6510              ref="resetButton"
6511              hidden
6512              on:click="/resetSearch"
6513            >
6514              Clear
6515            </button>
6516          </div>
6517          <button
6518            type="button"
6519            class="button predictive-search__close-modal-button"
6520            aria-label="Close dialog"
6521            on:click="dialog-component/closeDialog"
6522            ref="closeModalButton"
6523          >
6524            <span class="svg-wrapper">
6525              <svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
6526<path d="M11.1765 12.025C11.4108 12.2594 11.7907 12.2594 12.025 12.025C12.2594 11.7907 12.2594 11.4108 12.025 11.1765L8.84931 8.00078L12.025 4.82505C12.2594 4.59073 12.2594 4.21083 12.025 3.97652C11.7907 3.7422 11.4108 3.7422 11.1765 3.97652L8.00078 7.15225L4.82505 3.97652C4.59073 3.7422 4.21083 3.7422 3.97652 3.97652C3.7422 4.21083 3.7422 4.59073 3.97652 4.82505L7.15225 8.00078L3.97652 11.1765C3.7422 11.4108 3.7422 11.7907 3.97652 12.025C4.21083 12.2594 4.59073 12.2594 4.82505 12.025L8.00078 8.84931L11.1765 12.025Z" fill="currentColor"/>
6527</svg>
6528
6529            </span>
6530          </button>
6531        </div>
6532
6533        <div class="predictive-search-form__content-wrapper">
6534          <div
6535            class="predictive-search-form__content"
6536            ref="predictiveSearchResults"
6537            on:click="/handleModalClick"
6538          >
6539            
6540
6541<div
6542  id="predictive-search-results"
6543  class="predictive-search-dropdown"
6544  role="listbox"
6545  aria-expanded="true"
6546  style="--color-shadow: rgb(var(--color-foreground-rgb) / 0.1);"
6547>
6548  
6549    <div class="predictive-search-results__inner">
6550      
6551      
6552        
6553        
6554        
6555          <div
6556  id="predictive-search-products"
6557  class="predictive-search-results__products"
6558  
6559    data-testid="products-list-default--modal"
6560  
6561>
6562  
6563    <h4 class="predictive-search-results__title">
6564      Products
6565    </h4>
6566    <ul
6567      class="predictive-search-results__list predictive-search-results__wrapper-products list-unstyled"
6568    >
6569      
6570      
6571        <li
6572          class="predictive-search-results__card predictive-search-results__card--product"
6573          ref="resultsItems[]"
6574        >
6575          
6576<product-component
6577    class="resource-card__wrapper"
6578    
6579    
6580    view-event-payload="{&quot;product&quot;:{&quot;id&quot;:8121301008674,&quot;title&quot;:&quot;Prophets Family Tree&quot;,&quot;handle&quot;:&quot;prophets-family-tree-poster&quot;,&quot;selectedVariant&quot;:null},&quot;context&quot;:&quot;search&quot;,&quot;selectedOptions&quot;:[]}"
6581    
6582  ><div
6583  class="resource-card"
6584  data-resource-type="product"
6585>
6586  <a
6587    class="resource-card__link"
6588    href="/products/prophets-family-tree-poster"
6589  >
6590    <span class="visually-hidden">
6591      Prophets Family Tree
6592    </span>
6593  </a>
6594  <div
6595    class="resource-card__media"
6596    style="--resource-card-aspect-ratio: 4 / 5;"
6597    
6598  >
6599      
6600      
6601
6602        <img src="//islamiccharts.com/cdn/shop/files/Family_Tree_of_Islamic_Prophets_Poster.jpg?v=1789229210&amp;width=500" alt="" srcset="//islamiccharts.com/cdn/shop/files/Family_Tree_of_Islamic_Prophets_Poster.jpg?v=1789229210&amp;width=240 240w, //islamiccharts.com/cdn/shop/files/Family_Tree_of_Islamic_Prophets_Poster.jpg?v=1789229210&amp;width=352 352w" width="500" height="746" loading="lazy" class="resource-card__image" sizes="auto" ref="" style="object-position: 50.0% 50.0%;">
6603
6604          <img src="//islamiccharts.com/cdn/shop/files/All_25_Prophets_Complete_Genealogy_Family_Tree_Educational_Chart_Poster.png?v=1789228852&amp;width=500" alt="Prophets Family Tree" srcset="//islamiccharts.com/cdn/shop/files/All_25_Prophets_Complete_Genealogy_Family_Tree_Educational_Chart_Poster.png?v=1789228852&amp;width=240 240w, //islamiccharts.com/cdn/shop/files/All_25_Prophets_Complete_Genealogy_Family_Tree_Educational_Chart_Poster.png?v=1789228852&amp;width=352 352w" width="500" height="750" loading="lazy" class="resource-card__image resource-card__image--secondary" sizes="auto" ref="" data-media-id="56056413684002" style="object-position: 50.0% 50.0%;">
6605</div>
6606
6607  <div class="resource-card__content">
6608    <p class="resource-card__title paragraph">Prophets Family Tree</p>
6609
6610    
6611      
6612
6613<div ref="priceContainer">
6614  
6615    
6616    
6617      
6618        <span class="price-item__group price-item--regular compare-at-price">
6619          <span class="visually-hidden">Regular price&nbsp;</span>Rs.7,000.00</span>
6620        <span class="price-item__group price">
6621          <span class="visually-hidden">Sale price&nbsp;</span>
6622          Rs.4,999.00
6623        </span>
6624      
6625    
6626  
6627</div>
6628    
6629  </div>
6630</div></product-component>
6631
6632        </li>
6633      
6634    </ul>
6635  
6636</div>
6637
6638        
6639      
6640    </div>
6641  
6642</div>
6643
6644          </div>
6645
6646          <div class="predictive-search-form__footer">
6647            <button
6648              class="button predictive-search__search-button"
6649              ref="viewAllButton"
6650            >
6651              View all
6652            </button>
6653          </div>
6654        </div>
6655      </form>
6656    </predictive-search-component>
6657  </dialog>
6658</dialog-component>
6659
6660
6661
6662
6663    
6664      
6664<script
6665  src="//islamiccharts.com/cdn/shop/t/20/assets/gift-card-recipient-form.js?v=170482155849799299241788706330"
6666  type="module"
6667  fetchpriority="low"
6668></script>
6668
6669
6670
6671
6672
6673<quick-add-dialog id="quick-add-dialog">
6674  <dialog
6675    class="quick-add-modal dialog-modal color-custom-popover"
6676    ref="dialog"
6677    scroll-lock
6678  >
6679    <button
6680      ref="closeButton"
6681      on:click="/closeDialog"
6682      class="button button-unstyled close-button quick-add-modal__close"
6683      aria-label="Close dialog"
6684    ><svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
6685<path d="M11.1765 12.025C11.4108 12.2594 11.7907 12.2594 12.025 12.025C12.2594 11.7907 12.2594 11.4108 12.025 11.1765L8.84931 8.00078L12.025 4.82505C12.2594 4.59073 12.2594 4.21083 12.025 3.97652C11.7907 3.7422 11.4108 3.7422 11.1765 3.97652L8.00078 7.15225L4.82505 3.97652C4.59073 3.7422 4.21083 3.7422 3.97652 3.97652C3.7422 4.21083 3.7422 4.59073 3.97652 4.82505L7.15225 8.00078L3.97652 11.1765C3.7422 11.4108 3.7422 11.7907 3.97652 12.025C4.21083 12.2594 4.59073 12.2594 4.82505 12.025L8.00078 8.84931L11.1765 12.025Z" fill="currentColor"/>
6686</svg>
6687</button>
6688
6689    <product-component
6690      id="quick-add-modal-content"
6691      class="quick-add-modal__content"
6692      view-event-trigger="dialog"
6693    ></product-component>
6694  </dialog>
6695</quick-add-dialog>
6696
6697
6698
6699
6700
6701
6702
6703
6704
6705
6706
6707
6708
6709
6710    
6711  <style>  </style>
6712<div id="shopify-block-AUGV6TmRvUFBCVHVCM__11674196072004505311" class="shopify-block shopify-app-block">
6713
6714<div id="wfb-widget-container" data-test="4" data-shop="bawa-toni-shah-shop.myshopify.com" style="display: none;"></div>
6715
6716<!-- Hidden Templates -->
6717<template id="wfb-tpl-wrapper">
6718<div class="wfb-wrapper" id="wfb-wrapper">
6719<div class="wfb-buttons"></div>
6720<div class="wfb-toggle wfb-item">
6721<span class="wfb-icon wfb-icon-open"></span>
6722<span class="wfb-icon wfb-icon-close wfb-hidden"></span>
6723</div>
6724</div>
6725</template>
6726
6727<template id="wfb-tpl-btn-link">
6728<a target="_blank" rel="noopener" class="wfb-field wfb-platform-btn">
6729<div class="wfb-tooltip"></div>
6730<div class="wfb-item wfb-platform-item"><span class="wfb-icon"></span></div>
6731</a>
6732</template>
6733
6734<template id="wfb-tpl-btn-div">
6735<div class="wfb-field wfb-platform-btn wfb-ha">
6736<div class="wfb-tooltip"></div>
6737<div class="wfb-item wfb-platform-item"><span class="wfb-icon"></span></div>
6738</div>
6739</template>
6740
6741<template id="wfb-tpl-agent-popup">
6742<div class="wfb-agent-popup">
6743<div class="wfb-agent-popup-header">
6744<h3></h3><p>How can we help?</p>
6745<button class="wfb-agent-popup-close"></button>
6746</div>
6747<div class="wfb-agent-list"></div>
6748</div>
6749</template>
6750
6751<template id="wfb-tpl-agent-item">
6752<a target="_blank" rel="noopener" class="wfb-agent-item">
6753<div class="wfb-agent-info">
6754<p class="wfb-agent-name"></p>
6755<p class="wfb-agent-role"></p>
6756</div>
6757</a>
6758</template>
6759
6760<template id="wfb-tpl-chat">
6761<div class="wfb-chat-container" id="wfb-chat-container">
6762<div class="wfb-chat">
6763<div class="wfb-chat-header">
6764<div class="wfb-chat-info"><h3 class="wfb-chat-title"></h3><p class="wfb-chat-subtitle"></p></div>
6765<button class="wfb-chat-close"></button>
6766</div>
6767<div class="wfb-chat-body">
6768<div class="wfb-chat-bubble">
6769<p class="wfb-chat-msg"></p>
6770<div class="wfb-chat-time"></div>
6771</div>
6772</div>
6773<div class="wfb-chat-footer">
6774<input type="text" class="wfb-chat-input">
6775<button class="wfb-chat-send"></button>
6776</div>
6777</div>
6778<button class="wfb-chat-toggle"></button>
6779</div>
6780</template>
6781
6782
6783</div><div id="shopify-block-AZFd6aGFnS21FS1hVa__13768625480086291342" class="shopify-block shopify-app-block">
6783<script>
6784  window['ShopifyForms'] = {
6785    ...window['ShopifyForms'],
6786    currentPageType: "page"
6787  };
6788</script>
6788
6789
6790
6791</div><div id="shopify-block-AeWtjZE1LT2Irb3pva__7079518687644006178" class="shopify-block shopify-app-block">
6791<script>
6792  (function () {
6793    const cartAttributes = {};
6794
6795    // Helper function to retrieve the UTM from Url
6796    function getUTMFromUrl() {
6797      const url_string = window.location.href;
6798      const url = new URL(url_string);
6799
6800      const utm_id = url.searchParams.get("utm_id");
6801      const utm_source = url.searchParams.get("utm_source");
6802      const utm_medium = url.searchParams.get("utm_medium");
6803      const utm_campaign = url.searchParams.get("utm_campaign");
6804      const utm_term = url.searchParams.get("utm_term");
6805      const ref = url.searchParams.get("ref");
6806
6807      if (!utm_id && !utm_source && !utm_medium && !utm_campaign && !ref) {
6808        return null;
6809      }
6810
6811      let utmParameters = {};
6812      
6813        if (utm_id) {
6814          utmParameters.utm_id = utm_id;
6815        }
6816        if (utm_source) {
6817          utmParameters.utm_source = utm_source;
6818        }
6819        if (utm_medium) {
6820          utmParameters.utm_medium = utm_medium;
6821        }
6822        if (utm_campaign) {
6823          utmParameters.utm_campaign = utm_campaign;
6824        }
6825        if (utm_term) {
6826          utmParameters.utm_term = utm_term;
6827        }
6828        if (ref) {
6829          utmParameters.ref = ref;
6830        }
6831      
6832
6833      return Object.keys(utmParameters).length === 0
6834        ? null
6835        : utmParameters;
6836    }
6837
6838    // Helper function to retrieve the UTM from Cookie
6839    function getUTMAttributes() {
6840      const urlUtmParams = getUTMFromUrl();
6841
6842      if (urlUtmParams) {
6843          return urlUtmParams;
6844      }
6845
6846      // No longer reading from deprecated Shopify cookies
6847      return undefined;
6848    }
6849
6850    function saveUtmParameters() {
6851      const utmParams = getUTMAttributes();
6852      if (utmParams) {
6853        const cartHasUtmAttributes = Object.keys(cartAttributes).find(attributeKey => attributeKey.startsWith("utm_") || attributeKey === "ref");
6854        if (cartHasUtmAttributes) {
6855          // Don't call API if it already contains our UTM parameters
6856          return;
6857        }
6858
6859        // Handle both Shopify.routes.root and routes.root_url for better compatibility
6860        var rootUrl = (window.Shopify && window.Shopify.routes && window.Shopify.routes.root) 
6861          || (window.routes && window.routes.root_url) 
6862          || '/';
6863        
6864        var updateCart = fetch(rootUrl + 'cart/update.js',
6865        {
6866          headers: {
6867            'Content-Type': 'application/json',
6868          },
6869          method: "POST",
6870          body: JSON.stringify({
6871            attributes: {
6872              ...utmParams
6873            },
6874          })
6875        })
6876        .then(response => response.json())
6877        .then(data => {
6878          return data
6879        });
6880      }
6881    }
6882
6883    saveUtmParameters();
6884  })();
6885</script>
6885
6886
6887
6888
6889
6890</div><div id="shopify-block-AK00yV0RCaWYxUGltU__13766566558402285670" class="shopify-block shopify-app-block">
6891
6892
6893
6894
6895<script type="text/javascript" data-cookieconsent="ignore">
6896  window.$prDoranInit = window.$prDoranInit || {};
6897  window.$prDoranInit.sdkRequested = true;
6898  window.$prDoranInit.shop = 'islamiccharts.com';
6899  window.$prDoranInit.language = window.$prDoranInit.language || 'en';
6900  window.$prDoranInit.supportedLanguages = window.$prDoranInit.supportedLanguages || [];
6901  
6902    
6903  
6904  window.$prDoranInit.sdkURL = window.$prDoranInit.sdkURL || "https://cdn.shopify.com/extensions/01a06a4c-d8d4-72bf-ad54-105a8b9eb96d/doran-product-reviews-1788489800/assets/pr-sdk.js";
6905  
6906</script>
6906
6907
6908
6909
6910<script type="text/javascript" data-cookieconsent="ignore">
6911  window.$prDoranInit = window.$prDoranInit || {};
6912  window.$prDoranInit.ratingBadgeWidget = window.$prDoranInit.ratingBadgeWidget || {
6913    ratingIcon: 'Star',
6914    iconSpacing: 4,
6915    ratingIconColor: '#008068',
6916    translations: [],
6917    fontFamily: 'Default',
6918    customCSS: ''
6919  };
6920  
6921</script>
6921
6922
6923
6924
6925<script type="text/javascript" data-cookieconsent="ignore">
6926  window.$prDoranInit = window.$prDoranInit || {};
6927  window.$prDoranInit.ratingWidget = window.$prDoranInit.ratingWidget || {
6928    ratingIcon: 'Star',
6929    questionIcon: 'Question',
6930    iconSpacing: 4,
6931    ratingIconColor: '#008068',
6932    translations: [],
6933    fontFamily: 'Default',
6934    customCSS: ''
6935  };
6936  
6937    window.$prDoranInit.ratingWidget = Object.assign(
6938      window.$prDoranInit.ratingWidget,
6939      {"customCSS":null,"ratingIcon":"Star","customRatingIcon":null,"ratingIconColor":"#008068","questionIcon":"Question","customQuestionIcon":null,"translations":[{"language":"en","item":{"reviewsCount_zero":"No reviews","reviewsCount_one":"{{reviewsCount}} review","reviewsCount_other":"{{reviewsCount}} reviews","baseOnReviewsCount_zero":"No reviews","baseOnReviewsCount_one":"Base on {{reviewsCount}} review","baseOnReviewsCount_other":"Base on {{reviewsCount}} reviews","questionsCount_zero":"No questions","questionsCount_one":"{{questionsCount}} question","questionsCount_other":"{{questionsCount}} questions"}}],"fontFamily":"Default","iconSpacing":4,"isDarkMode":false,"darkTextColor":"#ffffff","darkButtonBackground":"#1c1c1c","darkButtonTextColor":"#ffffff","darkCardBackground":"#000000","darkBorderColor":"#1c1c1c","darkPopupBackground":"#1c1c1c"}
6940    );
6941  
6942</script>
6942
6943
6944
6945
6946<script type="text/javascript" data-cookieconsent="ignore">
6947  window.$prDoranInit = window.$prDoranInit || {};
6948  window.$prDoranInit.shopAverageRating = window.$prDoranInit.shopAverageRating || {};
6949  window.$prDoranInit.shopAverageRating.averageRating = 4.9;
6950  window.$prDoranInit.shopAverageRating.reviewsCount = 205;
6951  window.$prDoranInit.shopAverageRating.stars1 = 0;
6952  window.$prDoranInit.shopAverageRating.stars2 = 0;
6953  window.$prDoranInit.shopAverageRating.stars3 = 0;
6954  window.$prDoranInit.shopAverageRating.stars4 = 11;
6955  window.$prDoranInit.shopAverageRating.stars5 = 194;
6956  window.$prDoranInit.shopAverageRating.shopReviewsCount = 0;
6957  window.$prDoranInit.shopAverageRating.productReviewsCount = 205;
6958  window.$prDoranInit.shopReview = window.$prDoranInit.shopReview || {
6959    hasNextPage: false,
6960    startAfter: null,
6961    nodes: []
6962  };
6963  
6964</script>
6964
6965
6966
6967
6968
6969
6970
6971
6972<script type="text/javascript" data-cookieconsent="ignore">
6973  window.$prDoranInit = window.$prDoranInit || {}; 
6974  window.$prDoranInit.showcasePage = window.$prDoranInit.showcasePage || {
6975    ratingIcon: 'Star',
6976    isDisplayAuthor: true,
6977    fontFamily: 'Default',
6978    ratingIconColor: '#008068',
6979    translations: [],
6980    borderRadius: 4,
6981    iconSpacing: 4,
6982    isViewProduct: true,
6983    isSecureAuthorName: false,
6984    isDisplayFilters: false,
6985    isAverageRating: false,
6986    isDisplayCountry: false,
6987    source: 'Latest',
6988    customCSS: ''
6989  };
6990  
6991</script>
6991
6992
6993
6994
6995
6996
6997
6998
6999
7000  <style type="text/css">
7001    
7002  </style>
7003
7004
7005
7006</div>
7006<script src="https://cdn.shopify.com/storefront/standard-actions.js" type="module" data-source-attribution="shopify.standard_actions"></script>
7006
7007</body>
7008</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.