It looks like this is a web page, not a feed. I looked for a feed associated with this page, but couldn't find one. Please enter the address of your feed to validate.

Source: https://www.scriling.com

  1. <!DOCTYPE html>
  2. <html lang="en-US">
  3. <head>
  4.    <meta charset="UTF-8">
  5.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.    <link rel="profile" href="http://gmpg.org/xfn/11">
  7.    
  8.    <!-- PWA Manifest -->
  9.    <link rel="manifest" href="https://scriling.com/wp-content/themes/Theme1/manifest.json">
  10.    <meta name="theme-color" content="#3b82f6">
  11.    <meta name="mobile-web-app-capable" content="yes">
  12.    <meta name="apple-mobile-web-app-status-bar-style" content="default">
  13.    <meta name="apple-mobile-web-app-title" content="Niriv Notes">
  14.    
  15.    <title>Niriv</title>
  16. <meta name='robots' content='max-image-preview:large' />
  17. <style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style>
  18. <link rel='dns-prefetch' href='//unpkg.com' />
  19. <link rel='dns-prefetch' href='//www.googletagmanager.com' />
  20. <link rel='stylesheet' id='wp-block-library-css' href='https://scriling.com/wp-includes/css/dist/block-library/style.min.css?ver=6.8.3' type='text/css' media='all' />
  21. <style id='classic-theme-styles-inline-css' type='text/css'>
  22. /*! This file is auto-generated */
  23. .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}
  24. </style>
  25. <style id='global-styles-inline-css' type='text/css'>
  26. :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}
  27. :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}
  28. :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}
  29. :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;}
  30. </style>
  31. <link rel='stylesheet' id='niriv-style-css' href='https://scriling.com/wp-content/themes/Theme1/style.css?ver=1759408719' type='text/css' media='all' />
  32. <style id='niriv-style-inline-css' type='text/css'>
  33. :root {
  34.        --brand-color: #1847ea;
  35.        --brand-color-rgb: 24, 71, 234;
  36.        --brand-color-10: #1847ea1a;
  37.        --brand-color-20: #1847ea33;
  38.        --brand-color-40: #1847ea66;
  39.    }
  40. </style>
  41. <link rel='stylesheet' id='dashicons-css' href='https://scriling.com/wp-includes/css/dashicons.min.css?ver=6.8.3' type='text/css' media='all' />
  42. <link rel='stylesheet' id='niriv-sidebar-css' href='https://scriling.com/wp-content/themes/Theme1/assets/css/sidebar.css?ver=1.0.3' type='text/css' media='all' />
  43. <link rel='stylesheet' id='niriv-cursor-fix-css' href='https://scriling.com/wp-content/themes/Theme1/cursor-fix.css?ver=1759410444' type='text/css' media='all' />
  44. <link rel='stylesheet' id='niriv-apple-style-css' href='https://scriling.com/wp-content/themes/Theme1/assets/css/apple-style.css?ver=1.0.1' type='text/css' media='all' />
  45. <link rel='stylesheet' id='niriv-follow-system-css' href='https://scriling.com/wp-content/themes/Theme1/assets/css/follow-system.css?ver=1.0.1' type='text/css' media='all' />
  46. <link rel='stylesheet' id='niriv-border-radius-css' href='https://scriling.com/wp-content/themes/Theme1/assets/css/custom-styles.css?ver=1.0.1' type='text/css' media='all' />
  47. <link rel='stylesheet' id='niriv-border-radius-fix-css' href='https://scriling.com/wp-content/themes/Theme1/assets/css/border-radius-fix.css?ver=1.0.1' type='text/css' media='all' />
  48. <link rel='stylesheet' id='niriv-mobile-footer-menu-css' href='https://scriling.com/wp-content/themes/Theme1/assets/css/mobile-footer-menu.css?ver=1.0.0' type='text/css' media='all' />
  49. <link rel='stylesheet' id='niriv-new-home-style-css' href='https://scriling.com/wp-content/themes/Theme1/assets/css/new-home.css?ver=1.0.0' type='text/css' media='all' />
  50. <link rel='stylesheet' id='niriv-white-background-css' href='https://scriling.com/wp-content/themes/Theme1/white-background.css?ver=1.0.0' type='text/css' media='all' />
  51. <link rel='stylesheet' id='niriv-custom-alerts-css' href='https://scriling.com/wp-content/themes/Theme1/assets/css/custom-alerts.css?ver=1.0.0' type='text/css' media='all' />
  52. <link rel='stylesheet' id='tailwind-css-css' href='https://scriling.com/wp-content/themes/Theme1/assets/css/tailwind-output.css?ver=1759379620' type='text/css' media='all' />
  53. <link rel='stylesheet' id='niriv-comment-modal-css' href='https://scriling.com/wp-content/themes/Theme1/assets/css/comment-modal.css?ver=1759323448' type='text/css' media='all' />
  54. <link rel='stylesheet' id='niriv-toast-css-css' href='https://scriling.com/wp-content/themes/Theme1/assets/css/niriv-toast.css?ver=1759230243' type='text/css' media='all' />
  55. <link rel='stylesheet' id='niriv-heart-animation-css-css' href='https://scriling.com/wp-content/themes/Theme1/assets/css/niriv-heart-animation.css?ver=1759203568' type='text/css' media='all' />
  56. <script type="text/javascript" id="jquery-core-js-extra">
  57. /* <![CDATA[ */
  58. var niriv_ajax = {"ajaxurl":"https:\/\/scriling.com\/wp-admin\/admin-ajax.php","nonce":"2fc23b9260"};
  59. /* ]]> */
  60. </script>
  61. <script type="text/javascript" src="https://scriling.com/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script>
  62. <script type="text/javascript" src="https://scriling.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id="jquery-migrate-js"></script>
  63. <link rel="https://api.w.org/" href="https://scriling.com/wp-json/" /><link rel="alternate" title="JSON" type="application/json" href="https://scriling.com/wp-json/wp/v2/pages/95" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://scriling.com/xmlrpc.php?rsd" />
  64. <link rel="canonical" href="https://scriling.com/" />
  65. <link rel='shortlink' href='https://scriling.com/' />
  66. <link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://scriling.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fscriling.com%2F" />
  67. <link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://scriling.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fscriling.com%2F&#038;format=xml" />
  68. <link rel="icon" href="https://scriling.com/wp-content/uploads/2025/09/cropped-Favicon-32x32.png" sizes="32x32" />
  69. <link rel="icon" href="https://scriling.com/wp-content/uploads/2025/09/cropped-Favicon-192x192.png" sizes="192x192" />
  70. <link rel="apple-touch-icon" href="https://scriling.com/wp-content/uploads/2025/09/cropped-Favicon-180x180.png" />
  71. <meta name="msapplication-TileImage" content="https://scriling.com/wp-content/uploads/2025/09/cropped-Favicon-270x270.png" />
  72. </head>
  73. <body class="home wp-singular page-template page-template-page-newhome page-template-page-newhome-php page page-id-95 wp-theme-Theme1 text-gray-900 bg-slate-50 front-page">
  74. <style>
  75. .max-w-1024 {
  76.    max-width: 1000px;
  77. }
  78. </style>
  79.  
  80.  
  81.  
  82. <div id="sidebar-overlay" class="fixed inset-0 bg-opacity-50 z-40 hidden transition-all duration-300 ease-in-out backdrop-blur-sm will-change-[opacity]"></div>
  83.  
  84. <aside id="sidebar"
  85.       class="fixed inset-0 z-50 bg-gray-50 flex flex-col transition-all duration-300 ease-in-out transform -translate-x-full w-screen md:max-w-[1180px] md:mx-auto h-screen opacity-0 will-change-[transform,opacity]"
  86.       aria-label="Main Navigation"
  87.       aria-modal="true"
  88.       role="dialog"
  89.       inert>
  90.    <!-- Sidebar content -->
  91.    <div class="flex items-center justify-between h-16 w-full shrink-0 bg-white custom-shadow">
  92.        <div class="w-full lg:mx-auto lg:max-w-[1180px] px-2 sm:px-6">
  93.            <div class="flex items-center justify-between">
  94.                <div class="flex items-center space-x-2 lg:space-x-4">
  95.                    <a href="https://scriling.com/" title="Niriv" class="mr-2 lg:mr-3">
  96.                                                                                <img src="/images/Nirivicon.svg" alt="Niriv" class="w-8 h-8 rounded">
  97.                                            </a>
  98.                    <h2 class="text-lg font-semibold">Shortcuts</h2>
  99.                </div>
  100.                <button id="sidebar-close-btn"
  101.                        class="focus:outline-none p-2 hover:bg-gray-100 rounded-lg"
  102.                        aria-label="Close menu">
  103.                    <i data-lucide="x" class="w-6 h-6 text-gray-700"></i>
  104.                </button>
  105.            </div>
  106.        </div>
  107.    </div>
  108.    <div class="grow px-4 sm:px-8 lg:px-16 overflow-y-auto no-scrollbar">
  109.        <div class="w-full lg:mx-auto lg:max-w-[1180px] py-4 sm:py-8 lg:py-16">
  110.        <div class="bg-white custom-shadow mb-6 rounded-lg">
  111.            <h4 class="sidebar-heading font-semibold text-base text-gray-800 text-left">Core Services</h4>
  112.            <div class="grid grid-cols-4 gap-2 p-2">
  113.                <a href="#" class="flex flex-col items-center space-y-2 group p-2 rounded-xl hover:bg-gray-50 transition-colors">
  114.                    <div class="p-2 rounded-lg flex items-center justify-center bg-white shadow-sm group-hover:shadow-md transition-shadow">
  115.                        <i data-lucide="search" class="w-5 h-5 text-blue-600"></i>
  116.                    </div>
  117.                    <span class="text-xs font-medium text-gray-600">Search</span>
  118.                </a>
  119.                <a href="#" class="flex flex-col items-center space-y-2 group p-2 rounded-xl hover:bg-gray-50 transition-colors">
  120.                    <div class="p-2 rounded-lg flex items-center justify-center bg-white shadow-sm group-hover:shadow-md transition-shadow">
  121.                        <i data-lucide="credit-card" class="w-5 h-5 text-green-600"></i>
  122.                    </div>
  123.                    <span class="text-xs font-medium text-gray-600">Pay</span>
  124.                </a>
  125.                <a href="#" class="flex flex-col items-center space-y-2 group p-2 rounded-xl hover:bg-gray-50 transition-colors">
  126.                    <div class="p-2 rounded-lg flex items-center justify-center bg-white shadow-sm group-hover:shadow-md transition-shadow">
  127.                        <i data-lucide="list" class="w-5 h-5 text-purple-600"></i>
  128.                    </div>
  129.                    <span class="text-xs font-medium text-gray-600">Listings</span>
  130.                </a>
  131.                <a href="/miti" class="flex flex-col items-center space-y-2 group p-2 rounded-xl hover:bg-gray-50 transition-colors">
  132.                    <div class="p-2 rounded-lg flex items-center justify-center bg-white shadow-sm group-hover:shadow-md transition-shadow">
  133.                        <i data-lucide="calendar-days" class="w-5 h-5 text-yellow-600"></i>
  134.                    </div>
  135.                    <span class="text-xs font-medium text-gray-600">Miti</span>
  136.                </a>
  137.                <a href="/horoscope" class="flex flex-col items-center space-y-2 group p-2 rounded-xl hover:bg-gray-50 transition-colors">
  138.                    <div class="p-2 rounded-lg flex items-center justify-center bg-white shadow-sm group-hover:shadow-md transition-shadow">
  139.                        <i data-lucide="star" class="w-5 h-5 text-orange-500"></i>
  140.                    </div>
  141.                    <span class="text-xs font-medium text-gray-600">Horoscope</span>
  142.                </a>
  143.                <a href="#" class="flex flex-col items-center space-y-2 group p-2 rounded-xl hover:bg-gray-50 transition-colors">
  144.                    <div class="p-2 rounded-lg flex items-center justify-center bg-white shadow-sm group-hover:shadow-md transition-shadow">
  145.                        <i data-lucide="shopping-bag" class="w-5 h-5 text-indigo-600"></i>
  146.                    </div>
  147.                    <span class="text-xs font-medium text-gray-600">Shopping</span>
  148.                </a>
  149.                <a href="/news" class="flex flex-col items-center space-y-2 group p-2 rounded-xl hover:bg-gray-50 transition-colors">
  150.                    <div class="p-2 rounded-lg flex items-center justify-center bg-white shadow-sm group-hover:shadow-md transition-shadow">
  151.                        <i data-lucide="newspaper" class="w-5 h-5 text-red-600"></i>
  152.                    </div>
  153.                    <span class="text-xs font-medium text-gray-600">News</span>
  154.                </a>
  155.                <a href="#" class="flex flex-col items-center space-y-2 group p-2 rounded-xl hover:bg-gray-50 transition-colors">
  156.                    <div class="p-2 rounded-lg flex items-center justify-center bg-white shadow-sm group-hover:shadow-md transition-shadow">
  157.                        <i data-lucide="file-text" class="w-5 h-5 text-pink-600"></i>
  158.                    </div>
  159.                    <span class="text-xs font-medium text-gray-600">Blog</span>
  160.                </a>
  161.            </div>
  162.        </div>
  163.        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
  164.            <div class="space-y-4">
  165.                <div class="bg-white rounded-lg custom-shadow">
  166.                    <h4 class="sidebar-heading font-semibold text-sm text-gray-600">Content & Media</h4>
  167.                    <div class="p-4">
  168.                        <div class="grid grid-cols-2 gap-4">
  169.                            <a href="/content/entertainment/music/" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  170.                                <i data-lucide="music-2" class="w-5 h-5 text-(--brand-color)"></i>
  171.                                <span class="font-semibold text-[13px]">Music</span>
  172.                            </a>
  173.                            <a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  174.                                <i data-lucide="video" class="w-5 h-5 text-(--brand-color)"></i>
  175.                                <span class="font-semibold text-[13px]">Video</span>
  176.                            </a>
  177.                            <a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  178.                                <i data-lucide="radio-tower" class="w-5 h-5 text-(--brand-color)"></i>
  179.                                <span class="font-semibold text-[13px]">Radio</span>
  180.                            </a>
  181.                            <a href="/cinema" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  182.                                <i data-lucide="film" class="w-5 h-5 text-(--brand-color)"></i>
  183.                                <span class="font-semibold text-[13px]">Cinema</span>
  184.                            </a>
  185.                            <a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  186.                                <i data-lucide="book-open" class="w-5 h-5 text-(--brand-color)"></i>
  187.                                <span class="font-semibold text-[13px]">Books</span>
  188.                            </a>
  189.                            <a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  190.                                <i data-lucide="file-text" class="w-5 h-5 text-(--brand-color)"></i>
  191.                                <span class="font-semibold text-[13px]">Blogs</span>
  192.                            </a>
  193.                            <a href="/trending" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  194.                                <i data-lucide="trending-up" class="w-5 h-5 text-(--brand-color)"></i>
  195.                                <span class="font-semibold text-[13px]">Trend</span>
  196.                            </a>
  197.                        </div>
  198.                    </div>
  199.                </div>
  200.                <div class="bg-white rounded-lg custom-shadow">
  201.                    <h4 class="sidebar-heading font-semibold text-sm text-gray-600">Productivity & Tools</h4>
  202.                    <div class="p-4">
  203.                        <div class="grid grid-cols-2 gap-4">
  204.                            <a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  205.                                <i data-lucide="mail" class="w-5 h-5 text-(--brand-color)"></i>
  206.                                <span class="font-semibold text-[13px]">Mail</span>
  207.                            </a>
  208.                            <a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  209.                                <i data-lucide="calendar" class="w-5 h-5 text-(--brand-color)"></i>
  210.                                <span class="font-semibold text-[13px]">Calendar</span>
  211.                            </a>
  212.                            <a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  213.                                <i data-lucide="notebook" class="w-5 h-5 text-(--brand-color)"></i>
  214.                                <span class="font-semibold text-[13px]">Notes</span>
  215.                            </a>
  216.                            <a href="/tools" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  217.                                <i data-lucide="wrench" class="w-5 h-5 text-(--brand-color)"></i>
  218.                                <span class="font-semibold text-[13px]">Tools</span>
  219.                            </a>
  220.                            <a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  221.                                <i data-lucide="bell" class="w-5 h-5 text-(--brand-color)"></i>
  222.                                <span class="font-semibold text-[13px]">Alerts</span>
  223.                            </a>
  224.                            <a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  225.                                <i data-lucide="contact" class="w-5 h-5 text-(--brand-color)"></i>
  226.                                <span class="font-semibold text-[13px]">Directory</span>
  227.                            </a>
  228.                        </div>
  229.                    </div>
  230.                </div>
  231.                <div class="bg-white rounded-lg custom-shadow">
  232.                    <h4 class="sidebar-heading font-semibold text-sm text-gray-600">Finance & Data</h4>
  233.                    <div class="p-4">
  234.                        <div class="grid grid-cols-2 gap-3">
  235.                            <a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  236.                                <i data-lucide="wallet" class="w-5 h-5 text-(--brand-color)"></i>
  237.                                <span class="font-semibold text-[13px]">Wallet</span>
  238.                            </a>
  239.                            <a href="/content/finance" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  240.                                <i data-lucide="area-chart" class="w-5 h-5 text-(--brand-color)"></i>
  241.                                <span class="font-semibold text-[13px]">Finance</span>
  242.                            </a>
  243.                            <a href="/markets" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  244.                                <i data-lucide="bar-chart-3" class="w-5 h-5 text-(--brand-color)"></i>
  245.                                <span class="font-semibold text-[13px]">Stocks</span>
  246.                            </a>
  247.                            <a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  248.                                <i data-lucide="truck" class="w-5 h-5 text-(--brand-color)"></i>
  249.                                <span class="font-semibold text-[13px]">Transport</span>
  250.                            </a>
  251.                        </div>
  252.                    </div>
  253.                </div>
  254.            </div>
  255.            <div class="space-y-4">
  256.                <div class="bg-white rounded-lg custom-shadow">
  257.                    <h4 class="sidebar-heading font-semibold text-sm text-gray-600">Social & Community</h4>
  258.                    <div class="p-4">
  259.                        <div class="grid grid-cols-2 gap-3">
  260.                            <a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  261.                                <i data-lucide="message-square" class="w-5 h-5 text-(--brand-color)"></i>
  262.                                <span class="font-semibold text-[13px]">Chat</span>
  263.                            </a>
  264.                            <a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  265.                                <i data-lucide="users" class="w-5 h-5 text-(--brand-color)"></i>
  266.                                <span class="font-semibold text-[13px]">Groups</span>
  267.                            </a>
  268.                            <a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  269.                                <i data-lucide="messages-square" class="w-5 h-5 text-(--brand-color)"></i>
  270.                                <span class="font-semibold text-[13px]">Forums</span>
  271.                            </a>
  272.                            <a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  273.                                <i data-lucide="bar-chart-2" class="w-5 h-5 text-(--brand-color)"></i>
  274.                                <span class="font-semibold text-[13px]">Polls</span>
  275.                            </a>
  276.                            <a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  277.                                <i data-lucide="vote" class="w-5 h-5 text-(--brand-color)"></i>
  278.                                <span class="font-semibold text-[13px]">Vote</span>
  279.                            </a>
  280.                            <a href="/special-events" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  281.                                <i data-lucide="calendar-plus" class="w-5 h-5 text-(--brand-color)"></i>
  282.                                <span class="font-semibold text-[13px]">Events</span>
  283.                            </a>
  284.                        </div>
  285.                    </div>
  286.                </div>
  287.                <div class="bg-white rounded-lg custom-shadow">
  288.                    <h4 class="sidebar-heading font-semibold text-sm text-gray-600">Lifestyle & Daily Use</h4>
  289.                    <div class="p-4">
  290.                        <div class="grid grid-cols-2 gap-3">
  291.                            <a href="/content/lifestyle/travel" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  292.                                <i data-lucide="send" class="w-5 h-5 text-(--brand-color)"></i>
  293.                                <span class="font-semibold text-[13px]">Travel</span>
  294.                            </a>
  295.                            <a href="/content/lifestyle/food" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  296.                                <i data-lucide="utensils" class="w-5 h-5 text-(--brand-color)"></i>
  297.                                <span class="font-semibold text-[13px]">Food</span>
  298.                            </a>
  299.                            <a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  300.                                <i data-lucide="store" class="w-5 h-5 text-(--brand-color)"></i>
  301.                                <span class="font-semibold text-[13px]">Market</span>
  302.                            </a>
  303.                            <a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  304.                                <i data-lucide="tag" class="w-5 h-5 text-(--brand-color)"></i>
  305.                                <span class="font-semibold text-[13px]">Deals</span>
  306.                            </a>
  307.                            <a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  308.                                <i data-lucide="gift" class="w-5 h-5 text-(--brand-color)"></i>
  309.                                <span class="font-semibold text-[13px]">Offers</span>
  310.                            </a>
  311.                            <a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  312.                                <i data-lucide="briefcase" class="w-5 h-5 text-(--brand-color)"></i>
  313.                                <span class="font-semibold text-[13px]">Jobs</span>
  314.                            </a>
  315.                            <a href="/content/lifestyle/health" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  316.                                <i data-lucide="heart-pulse" class="w-5 h-5 text-(--brand-color)"></i>
  317.                                <span class="font-semibold text-[13px]">Health</span>
  318.                            </a>
  319.                            <a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  320.                                <i data-lucide="graduation-cap" class="w-5 h-5 text-(--brand-color)"></i>
  321.                                <span class="font-semibold text-[13px]">Learning</span>
  322.                            </a>
  323.                        </div>
  324.                    </div>
  325.                </div>
  326.                <div class="bg-white rounded-lg custom-shadow">
  327.                    <h4 class="sidebar-heading font-semibold text-sm text-gray-600">Discovery & Engagement</h4>
  328.                    <div class="p-4">
  329.                        <div class="grid grid-cols-2 gap-3">
  330.                            <a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  331.                                <i data-lucide="map" class="w-5 h-5 text-(--brand-color)"></i>
  332.                                <span class="font-semibold text-[13px]">Maps</span>
  333.                            </a>
  334.                            <a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  335.                                <i data-lucide="compass" class="w-5 h-5 text-(--brand-color)"></i>
  336.                                <span class="font-semibold text-[13px]">Explore</span>
  337.                            </a>
  338.                            <a href="/games" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  339.                                <i data-lucide="gamepad-2" class="w-5 h-5 text-(--brand-color)"></i>
  340.                                <span class="font-semibold text-[13px]">Games</span>
  341.                            </a>
  342.                            <a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-lg hover:bg-gray-50 transition-colors">
  343.                                <i data-lucide="image" class="w-5 h-5 text-(--brand-color)"></i>
  344.                                <span class="font-semibold text-[13px]">Photos</span>
  345.                            </a>
  346.                        </div>
  347.                    </div>
  348.                </div>
  349.            </div>
  350.        </div>
  351.    </div>
  352. </aside>
  353.  
  354. <div id="main-content" class="w-full">
  355.    <header class="z-30 w-full new-home-header">
  356.        <!-- Full-width header background -->
  357.        <div class=" w-full">
  358.            <!-- Constrained content container -->
  359.            <div class="w-full mx-auto px-2 sm:px-6 max-w-1180">
  360.                <div class="flex items-center justify-between h-16">
  361.                    <div class="flex items-center left-icons space-x-1">
  362.                        <button id="menu-toggle-btn" class="mobile-menu-toggle p-1.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors focus:outline-none focus:ring-0 focus:border-0">
  363.                            <i data-lucide="grip" class="w-6 h-6"></i>
  364.                        </button>
  365.                        <a href="#" class="p-1.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
  366.                            <i data-lucide="wallet" class="w-6 h-6"></i>
  367.                        </a>
  368.                        <a href="#" class="p-1.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
  369.                            <i data-lucide="store" class="w-6 h-6"></i>
  370.                        </a>
  371.                    </div>
  372.  
  373.                    <!-- Header Logo - Desktop shows default logo, mobile shows custom header logo -->
  374.                    <!-- Hide logo on new homepage and index page since there's already a big logo before search form -->
  375.                    
  376.                    <div class="flex items-center right-icons space-x-1">
  377.                        <a href="#" class="p-1.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
  378.                            <i data-lucide="message-circle-more" class="w-6 h-6"></i>
  379.                        </a>
  380.                        <div class="relative">
  381.                            <button id="notification-button" class="p-1.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors relative">
  382.                                <i data-lucide="bell" class="w-6 h-6"></i>
  383.                                <span class="absolute top-0 right-0 flex h-2 w-2 items-center justify-center rounded-full bg-red-500 text-[6px] text-white blink-dot z-10"></span>
  384.                            </button>
  385.                            
  386.                            <!-- Notification Dropdown -->
  387.                            <div id="notification-dropdown" class="hidden absolute right-0 mt-2 w-80 bg-white rounded-xl shadow-2xl border border-gray-200/50 z-50 opacity-0 scale-95 translate-y-1 pointer-events-none transition-all duration-200 ease-out">
  388.                                <!-- Tab Headers -->
  389.                                <div class="flex border-b border-gray-100">
  390.                                    <button id="new-posts-tab" class="flex-1 py-3 px-4 text-sm font-medium text-center text-blue-600 border-b-2 border-blue-600">
  391.                                        New Posts
  392.                                    </button>
  393.                                    <button id="notifications-tab" class="flex-1 py-3 px-4 text-sm font-medium text-center text-gray-500 hover:text-gray-700">
  394.                                        Notifications
  395.                                    </button>
  396.                                </div>
  397.                                
  398.                                <!-- Tab Content -->
  399.                                <div class="max-h-96 overflow-y-auto">
  400.                                    <!-- New Posts Tab Content -->
  401.                                    <div id="new-posts-content" class="p-4">
  402.                                                                                    <div class="space-y-3">
  403.                                                                                                    <a href="https://scriling.com/news/youth-protest-against-internet-restrictions-in-nepal/" class="flex items-start p-3 rounded-lg hover:bg-gray-50 transition-colors">
  404.                                                        <div class="shrink-0 mt-1">
  405.                                                            <div class="w-2 h-2 bg-green-500 rounded-full blink-animation"></div>
  406.                                                        </div>
  407.                                                        <div class="ml-3">
  408.                                                            <p class="text-sm font-medium text-gray-900">Youth protest against internet restrictions in Nepal</p>
  409.                                                            <p class="text-xs text-gray-500">Published 1 week ago</p>
  410.                                                        </div>
  411.                                                    </a>
  412.                                                                                                    <a href="https://scriling.com/news/students-protest-rising-tuition-fees-in-nepali-colleges/" class="flex items-start p-3 rounded-lg hover:bg-gray-50 transition-colors">
  413.                                                        <div class="shrink-0 mt-1">
  414.                                                            <div class="w-2 h-2 bg-green-500 rounded-full blink-animation"></div>
  415.                                                        </div>
  416.                                                        <div class="ml-3">
  417.                                                            <p class="text-sm font-medium text-gray-900">Students protest rising tuition fees in Nepali colleges</p>
  418.                                                            <p class="text-xs text-gray-500">Published 1 week ago</p>
  419.                                                        </div>
  420.                                                    </a>
  421.                                                                                                    <a href="https://scriling.com/news/gen-z-takes-to-the-streets-in-kathmandu-demanding-climate-action/" class="flex items-start p-3 rounded-lg hover:bg-gray-50 transition-colors">
  422.                                                        <div class="shrink-0 mt-1">
  423.                                                            <div class="w-2 h-2 bg-green-500 rounded-full blink-animation"></div>
  424.                                                        </div>
  425.                                                        <div class="ml-3">
  426.                                                            <p class="text-sm font-medium text-gray-900">Gen Z takes to the streets in Kathmandu demanding climate action</p>
  427.                                                            <p class="text-xs text-gray-500">Published 1 week ago</p>
  428.                                                        </div>
  429.                                                    </a>
  430.                                                                                                    <a href="https://scriling.com/news/deserunt-ut-delectus-in/" class="flex items-start p-3 rounded-lg hover:bg-gray-50 transition-colors">
  431.                                                        <div class="shrink-0 mt-1">
  432.                                                            <div class="w-2 h-2 bg-green-500 rounded-full blink-animation"></div>
  433.                                                        </div>
  434.                                                        <div class="ml-3">
  435.                                                            <p class="text-sm font-medium text-gray-900">Deserunt ut delectus in</p>
  436.                                                            <p class="text-xs text-gray-500">Published 2 weeks ago</p>
  437.                                                        </div>
  438.                                                    </a>
  439.                                                                                            </div>
  440.                                                                            </div>
  441.                                    
  442.                                    <!-- Notifications Tab Content -->
  443.                                    <div id="notifications-content" class="p-4 hidden">
  444.                                        <div class="space-y-3">
  445.                                            <!-- Weather Notification -->
  446.                                            <div class="flex items-start p-3 rounded-lg bg-blue-50">
  447.                                                <div class="shrink-0 mt-1">
  448.                                                    <i data-lucide="sun" class="w-6 h-6 text-blue-500"></i>
  449.                                                </div>
  450.                                                <div class="ml-3">
  451.                                                    <p class="text-sm font-medium text-gray-900">Weather Today</p>
  452.                                                    <p class="text-xs text-gray-500">Sunny, 25°C - Perfect day for outdoor activities!</p>
  453.                                                </div>
  454.                                            </div>
  455.                                            
  456.                                            <!-- Sample Notifications -->
  457.                                            <div class="flex items-start p-3 rounded-lg hover:bg-gray-50 transition-colors">
  458.                                                <div class="shrink-0 mt-1">
  459.                                                    <i data-lucide="calendar" class="w-6 h-6 text-purple-500"></i>
  460.                                                </div>
  461.                                                <div class="ml-3">
  462.                                                    <p class="text-sm font-medium text-gray-900">Meeting Reminder</p>
  463.                                                    <p class="text-xs text-gray-500">Team meeting in 30 minutes</p>
  464.                                                </div>
  465.                                            </div>
  466.                                            <div class="flex items-start p-3 rounded-lg hover:bg-gray-50 transition-colors">
  467.                                                <div class="shrink-0 mt-1">
  468.                                                    <i data-lucide="message-square" class="w-6 h-6 text-green-500"></i>
  469.                                                </div>
  470.                                                <div class="ml-3">
  471.                                                    <p class="text-sm font-medium text-gray-900">New Message</p>
  472.                                                    <p class="text-xs text-gray-500">You have a new message from John</p>
  473.                                                </div>
  474.                                            </div>
  475.                                            <div class="flex items-start p-3 rounded-lg hover:bg-gray-50 transition-colors">
  476.                                                <div class="shrink-0 mt-1">
  477.                                                    <i data-lucide="user-plus" class="w-6 h-6 text-orange-500"></i>
  478.                                                </div>
  479.                                                <div class="ml-3">
  480.                                                    <p class="text-sm font-medium text-gray-900">Friend Request</p>
  481.                                                    <p class="text-xs text-gray-500">Jane sent you a friend request</p>
  482.                                                </div>
  483.                                            </div>
  484.                                        </div>
  485.                                    </div>
  486.                                </div>
  487.                                
  488.                                <!-- Footer -->
  489.                                <div class="border-t border-gray-100 p-3">
  490.                                    <a href="https://scriling.com/leaf/" class="text-xs text-blue-600 hover:text-blue-800 font-medium">View all notifications</a>
  491.                                </div>
  492.                            </div>
  493.                        </div>
  494.                        
  495.                            <script>
  496.                                // Notification dropdown functionality
  497.                                document.addEventListener('DOMContentLoaded', function() {
  498.                                    const notificationButton = document.getElementById('notification-button');
  499.                                    const notificationDropdown = document.getElementById('notification-dropdown');
  500.                                    const newPostsTab = document.getElementById('new-posts-tab');
  501.                                    const notificationsTab = document.getElementById('notifications-tab');
  502.                                    const newPostsContent = document.getElementById('new-posts-content');
  503.                                    const notificationsContent = document.getElementById('notifications-content');
  504.  
  505.                                    // Helper functions for smooth dropdown animations
  506.                                    // (Now defined in global scope above)
  507.  
  508.                                    // Toggle dropdown with smooth animation
  509.                                    notificationButton.addEventListener('click', function(e) {
  510.                                        e.stopPropagation();
  511.  
  512.                                        // Close user dropdown if open
  513.                                        const userDropdown = document.getElementById('user-dropdown');
  514.                                        if (userDropdown && !userDropdown.classList.contains('hidden')) {
  515.                                            closeDropdown(userDropdown);
  516.                                        }
  517.  
  518.                                        // Toggle notification dropdown
  519.                                        if (notificationDropdown.classList.contains('hidden')) {
  520.                                            openDropdown(notificationDropdown);
  521.                                        } else {
  522.                                            closeDropdown(notificationDropdown);
  523.                                        }
  524.                                    });
  525.                                
  526.                                // Switch to new posts tab
  527.                                newPostsTab.addEventListener('click', function(e) {
  528.                                    e.stopPropagation(); // Prevent dropdown from closing
  529.                                    
  530.                                    // Set active tab styles
  531.                                    newPostsTab.classList.remove('text-gray-500', 'hover:text-gray-700');
  532.                                    newPostsTab.classList.add('text-blue-600', 'border-b-2', 'border-blue-600');
  533.  
  534.                                    // Set inactive tab styles - remove all borders and active styling
  535.                                    notificationsTab.classList.remove('text-blue-600', 'border-b-2', 'border-blue-600');
  536.                                    notificationsTab.classList.add('text-gray-500', 'hover:text-gray-700');
  537.  
  538.                                    // Switch content
  539.                                    newPostsContent.classList.remove('hidden');
  540.                                    notificationsContent.classList.add('hidden');
  541.                                });
  542.  
  543.                                // Switch to notifications tab
  544.                                notificationsTab.addEventListener('click', function(e) {
  545.                                    e.stopPropagation(); // Prevent dropdown from closing
  546.                                    
  547.                                    // Set active tab styles
  548.                                    notificationsTab.classList.remove('text-gray-500', 'hover:text-gray-700');
  549.                                    notificationsTab.classList.add('text-blue-600', 'border-b-2', 'border-blue-600');
  550.  
  551.                                    // Set inactive tab styles - remove all borders and active styling
  552.                                    newPostsTab.classList.remove('text-blue-600', 'border-b-2', 'border-blue-600');
  553.                                    newPostsTab.classList.add('text-gray-500', 'hover:text-gray-700');
  554.  
  555.                                    // Switch content
  556.                                    notificationsContent.classList.remove('hidden');
  557.                                    newPostsContent.classList.add('hidden');
  558.                                });
  559.                            });
  560.                        </script>
  561.                        
  562.                        <style>
  563.                            /* Blink animation for new posts */
  564.                            @keyframes blink {
  565.                                0% { opacity: 1; }
  566.                                50% { opacity: 0; }
  567.                                100% { opacity: 1; }
  568.                            }
  569.                            
  570.                            .blink-animation {
  571.                                animation: blink 2s infinite;
  572.                            }
  573.                            
  574.                            /* Blink animation for notification dot */
  575.                            @keyframes blink-dot {
  576.                                0% { opacity: 1; }
  577.                                50% { opacity: 0.3; }
  578.                                100% { opacity: 1; }
  579.                            }
  580.                            
  581.                            .blink-dot {
  582.                                animation: blink-dot 1.5s infinite;
  583.                                width: 8px;
  584.                                height: 8px;
  585.                                border-radius: 50%;
  586.                            }
  587.                            
  588.                            /* Add a small arrow pointing to the notification icon */
  589.                            #notification-dropdown::before {
  590.                                content: '';
  591.                                position: absolute;
  592.                                top: -6px;
  593.                                right: 14px;
  594.                                width: 0;
  595.                                height: 0;
  596.                                border-left: 6px solid transparent;
  597.                                border-right: 6px solid transparent;
  598.                                border-bottom: 6px solid white;
  599.                                filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.1));
  600.                                z-index: 60;
  601.                            }
  602.  
  603.                            /* Add a small arrow pointing to the user icon */
  604.                            #user-dropdown::before {
  605.                                content: '';
  606.                                position: absolute;
  607.                                top: -6px;
  608.                                right: 14px;
  609.                                width: 0;
  610.                                height: 0;
  611.                                border-left: 6px solid transparent;
  612.                                border-right: 6px solid transparent;
  613.                                border-bottom: 6px solid white;
  614.                                filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.1));
  615.                                z-index: 60;
  616.                            }
  617.  
  618.  
  619.                        </style>
  620.                        
  621.                                                    <a href="https://scriling.com/nid/?redirect_to=https%3A%2F%2Fscriling.com%2F" class="p-1.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
  622.                                <i data-lucide="user-circle-2" class="w-6 h-6"></i>
  623.                            </a>
  624.                                            </div>
  625.                </div>
  626.            </div>
  627.        </div>
  628.    </header>
  629.    
  630.    <!-- Navigation Menu Items -->
  631.        
  632.    <script>
  633.        // Helper functions for smooth dropdown animations (global scope)
  634.        function openDropdown(dropdown) {
  635.            dropdown.classList.remove('hidden');
  636.            // Force reflow
  637.            dropdown.offsetHeight;
  638.            dropdown.classList.remove('opacity-0', 'scale-95', 'translate-y-1', 'pointer-events-none');
  639.            dropdown.classList.add('opacity-100', 'scale-100', 'translate-y-0', 'pointer-events-auto');
  640.        }
  641.  
  642.        function closeDropdown(dropdown) {
  643.            dropdown.classList.remove('opacity-100', 'scale-100', 'translate-y-0', 'pointer-events-auto');
  644.            dropdown.classList.add('opacity-0', 'scale-95', 'translate-y-1', 'pointer-events-none');
  645.            setTimeout(() => {
  646.                dropdown.classList.add('hidden');
  647.            }, 200);
  648.        }
  649.  
  650.        // Global click handler to close all dropdowns when clicking outside
  651.        document.addEventListener('click', function(e) {
  652.            const notificationDropdown = document.getElementById('notification-dropdown');
  653.            const userDropdown = document.getElementById('user-dropdown');
  654.            const notificationButton = document.getElementById('notification-button');
  655.            const userButton = document.getElementById('user-menu-button');
  656.  
  657.            // Close notification dropdown if clicking outside
  658.            if (notificationDropdown && !notificationDropdown.classList.contains('hidden') &&
  659.                (!notificationButton || !notificationButton.contains(e.target))) {
  660.                closeDropdown(notificationDropdown);
  661.            }
  662.  
  663.            // Close user dropdown if clicking outside
  664.            if (userDropdown && !userDropdown.classList.contains('hidden') &&
  665.                (!userButton || !userButton.contains(e.target))) {
  666.                closeDropdown(userDropdown);
  667.            }
  668.        });
  669.    </script>
  670.  
  671.    <main>
  672.  
  673. <!-- Alpine.js for mobile search overlay -->
  674. <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
  675.  
  676.    <svg class="absolute w-0 h-0">
  677.      <defs>
  678.        <clipPath id="heading-clip-shape" clipPathUnits="objectBoundingBox">
  679.          <path d="M0,0 H1,0 V0.8 Q0.5,1 0,0.8 Z"></path>
  680.        </clipPath>
  681.      </defs>
  682.    </svg>
  683.  
  684.    <!-- Mobile Sticky Search Bar -->
  685.    <div id="mobile-sticky-search" class="md:hidden fixed top-0 left-0 right-0 z-30 p-2 bg-gradient-to-b from-blue-100 to-blue-200 shadow-md transform -translate-y-full transition-transform duration-300 ease-in-out">
  686.        <form action="/search.html" method="GET" class="relative">
  687.            <div class="relative">
  688.                <input type="search" name="q" placeholder="Search..." class="w-full py-2 pl-10 pr-16 text-base bg-white focus:outline-none" required autocomplete="off">
  689.                <div class="absolute inset-y-0 left-0 flex items-center pl-3">
  690.                    <i data-lucide="search" class="w-4 h-4 text-gray-500"></i>
  691.                </div>
  692.                <div class="absolute inset-y-0 right-0 flex items-center pr-2 space-x-1">
  693.                    <button type="button" id="mobile-search-cancel" class="text-sm font-medium text-blue-600">Close</button>
  694.                </div>
  695.            </div>
  696.        </form>
  697.    </div>
  698.  
  699.    <!-- Mobile Search Overlay with Alpine.js -->
  700.    <div x-data="mobileSearch()" x-init="init()"
  701.         @open-mobile-search.window="openOverlay()"
  702.         class="md:hidden">
  703.        <!-- Full Screen Overlay -->
  704.        <div
  705.            x-show="isOpen"
  706.            x-transition:enter="transition transform duration-300 ease-out"
  707.            x-transition:enter-start="translate-y-full"
  708.            x-transition:enter-end="translate-y-0"
  709.            x-transition:leave="transition transform duration-300 ease-in"
  710.            x-transition:leave-start="translate-y-0"
  711.            x-transition:leave-end="translate-y-full"
  712.            class="fixed inset-0 z-50 bg-white"
  713.        >
  714.            <!-- Top Bar -->
  715.            <div class="flex items-center p-4">
  716.                <button @click="closeOverlay()" class="p-2">
  717.                    <i data-lucide="arrow-left" class="w-5 h-5 text-gray-600"></i>
  718.                </button>
  719.                <div class="relative flex-grow ml-4">
  720.                    <input
  721.                        type="search"
  722.                        placeholder="please enter search term"
  723.                        class="w-full bg-transparent outline-none py-1.5 text-xl"
  724.                        x-ref="overlaySearchInput"
  725.                        x-model="searchQuery"
  726.                        @keyup.enter="performSearch()"
  727.                        @input="onSearchInput()"
  728.                        autocomplete="off"
  729.                    >
  730.                </div>
  731.                <button @click="performSearch()" class="p-2 ml-4">
  732.                    <i data-lucide="search" class="w-5 h-5" style="color: #1847ea;"></i>
  733.                </button>
  734.            </div>
  735.  
  736.            <!-- Blue Separator Line -->
  737.            <hr class="border-0 h-px mb-2 mt-0.5" style="height: 1.5px; background-color: #1847ea;">
  738.  
  739.            <!-- Overlay Content -->
  740.            <div class="p-0 overflow-y-auto max-h-[70vh]">
  741.                <!-- Recent Searches -->
  742.                <div x-show="recentSearches.length > 0" class="mb-6 px-4">
  743.                    <h3 class="text-base font-semibold text-gray-600 mb-3">Recent Searches</h3>
  744.                    <div class="flex flex-wrap gap-2">
  745.                        <template x-for="search in recentSearches" :key="search">
  746.                            <button
  747.                                @click="searchFromRecent(search)"
  748.                                class="px-4 py-2 bg-white text-gray-700 rounded-full text-sm hover:bg-gray-50 transition-colors duration-200 border border-gray-200"
  749.                            >
  750.                                <span x-text="search"></span>
  751.                            </button>
  752.                        </template>
  753.                    </div>
  754.                </div>
  755.  
  756.                <!-- Trending Searches -->
  757.                <div class="mb-6 px-4">
  758.                    <h3 class="text-base font-semibold text-gray-600 mb-3">Trending Searches</h3>
  759.                    <div class="flex flex-wrap gap-2">
  760.                        <template x-for="search in trendingSearches" :key="search.query">
  761.                            <button
  762.                                @click="performSearch(search.query)"
  763.                                class="px-4 py-2 bg-white text-gray-700 rounded-full text-sm hover:bg-gray-50 transition-colors duration-200 border border-gray-200"
  764.                            >
  765.                                <span x-text="search.query"></span>
  766.                                <span class="ml-2 text-xs opacity-75" x-text="'(' + search.count + ')'"></span>
  767.                            </button>
  768.                        </template>
  769.                    </div>
  770.                </div>
  771.  
  772.                <!-- Trending Tags -->
  773.                <div class="mb-6 px-4">
  774.                    <h3 class="text-base font-semibold text-gray-600 mb-3">Trending Tags</h3>
  775.                    <div class="flex flex-wrap gap-2">
  776.                        <template x-for="tag in trendingTags" :key="tag.slug">
  777.                            <a
  778.                                :href="'/tag/' + tag.slug"
  779.                                class="px-4 py-2 bg-white text-gray-700 rounded-full text-sm hover:bg-gray-50 transition-colors duration-200 border border-gray-200"
  780.                            >
  781.                                <span x-text="tag.name"></span>
  782.                            </a>
  783.                        </template>
  784.                    </div>
  785.                </div>
  786.                <div class="px-4 pb-6">
  787.                    <h3 class="text-base font-semibold text-gray-600 mb-3">Quick Actions</h3>
  788.                    <div class="grid grid-cols-2 gap-3">
  789.                        <a href="/tools"
  790.                            class="p-4 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-all duration-200 text-left group shadow-sm"
  791.                        >
  792.                            <i data-lucide="wrench" class="w-5 h-5 text-blue-600 mb-2"></i>
  793.                            <div class="text-sm font-medium text-gray-900">Tools</div>
  794.                            <div class="text-xs text-gray-600">PDF, Converter & More</div>
  795.                        </a>
  796.                        <a href="/news"
  797.                            class="p-4 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-all duration-200 text-left group shadow-sm"
  798.                        >
  799.                            <i data-lucide="newspaper" class="w-5 h-5 text-red-600 mb-2"></i>
  800.                            <div class="text-sm font-medium text-gray-900">News</div>
  801.                            <div class="text-xs text-gray-600">Latest Updates</div>
  802.                        </a>
  803.                        <a href="/forex"
  804.                            class="p-4 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-all duration-200 text-left group shadow-sm"
  805.                        >
  806.                            <i data-lucide="trending-up" class="w-5 h-5 text-green-600 mb-2"></i>
  807.                            <div class="text-sm font-medium text-gray-900">Forex</div>
  808.                            <div class="text-xs text-gray-600">Exchange Rates</div>
  809.                        </a>
  810.                        <button
  811.                            @click="performSearch('weather')"
  812.                            class="p-4 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-all duration-200 text-left group shadow-sm"
  813.                        >
  814.                            <i data-lucide="sun" class="w-5 h-5 text-yellow-600 mb-2"></i>
  815.                            <div class="text-sm font-medium text-gray-900">Weather</div>
  816.                            <div class="text-xs text-gray-600">Current Conditions</div>
  817.                        </button>
  818.                    </div>
  819.                </div>
  820.            </div>
  821.        </div>
  822.    </div>
  823.  
  824.    <script>
  825.        function mobileSearch() {
  826.            return {
  827.                isOpen: false,
  828.                searchQuery: '',
  829.                recentSearches: [],
  830.                trendingSearches: [],
  831.                trendingTags: [],
  832.  
  833.                init() {
  834.                    this.loadRecentSearches();
  835.                    this.loadTrendingSearches();
  836.                    this.loadTrendingTags();
  837.                },
  838.  
  839.                openOverlay() {
  840.                    this.isOpen = true;
  841.                    document.body.style.overflow = 'hidden';
  842.                    document.body.style.position = 'fixed';
  843.                    document.body.style.width = '100%';
  844.                    // Focus the overlay search input after a short delay
  845.                    setTimeout(() => {
  846.                        this.$refs.overlaySearchInput.focus();
  847.                    }, 100);
  848.                },
  849.  
  850.                closeOverlay() {
  851.                    this.isOpen = false;
  852.                    document.body.style.overflow = '';
  853.                    document.body.style.position = '';
  854.                    document.body.style.width = '';
  855.                    this.searchQuery = '';
  856.                },
  857.  
  858.                performSearch(query = null) {
  859.                    const searchTerm = query || this.searchQuery.trim();
  860.                    if (searchTerm) {
  861.                        this.addToRecentSearches(searchTerm);
  862.                        // Navigate to search results
  863.                        window.location.href = `/search.html?q=${encodeURIComponent(searchTerm)}&from=web`;
  864.                    }
  865.                },
  866.  
  867.                searchFromRecent(search) {
  868.                    this.searchQuery = search;
  869.                    this.performSearch(search);
  870.                },
  871.  
  872.                loadTrendingSearches() {
  873.                    // Fallback data in case of any errors
  874.                    const fallbackTrends = [
  875.                        { query: 'Nepal news', count: 25 },
  876.                        { query: 'Kathmandu weather', count: 18 },
  877.                        { query: 'Nepali movies', count: 15 },
  878.                        { query: 'Forex rates', count: 12 },
  879.                        { query: 'Travel Nepal', count: 10 },
  880.                        { query: 'NEPSE', count: 8 },
  881.                        { query: 'Gold price', count: 6 },
  882.                        { query: 'IPL 2025', count: 5 }
  883.                    ];
  884.                    
  885.                    // Set fallback data immediately in case the request fails
  886.                    this.trendingSearches = [...fallbackTrends];
  887.                    
  888.                    // Fetch trending searches from WordPress via AJAX
  889.                    fetch('/wp-json/niriv/v1/trending-searches?limit=8')
  890.                        .then(response => {
  891.                            if (!response.ok) {
  892.                                throw new Error(`HTTP error! status: ${response.status}`);
  893.                            }
  894.                            return response.json();
  895.                        })
  896.                        .then(data => {
  897.                            // Validate the response data
  898.                            if (Array.isArray(data) && data.length > 0) {
  899.                                this.trendingSearches = data.map(item => ({
  900.                                    query: item.query_text || item.search_query || 'search',
  901.                                    count: item.search_count || item.count || 1
  902.                                }));
  903.                            } else {
  904.                                // If no valid data, use fallback
  905.                                console.warn('No valid trending searches data received, using fallback');
  906.                            }
  907.                        })
  908.                        .catch(error => {
  909.                            console.error('Error loading trending searches:', error);
  910.                            // Fallback data is already set, so just log the error
  911.                        });
  912.                },
  913.  
  914.                loadTrendingTags() {
  915.                    // Fetch trending tags from WordPress via AJAX
  916.                    fetch('/wp-json/wp/v2/tags?per_page=4&orderby=count&order=desc&_fields=id,name,slug,count')
  917.                        .then(response => response.json())
  918.                        .then(data => {
  919.                            this.trendingTags = data.map(tag => ({
  920.                                name: tag.name,
  921.                                slug: tag.slug,
  922.                                count: tag.count
  923.                            }));
  924.                        })
  925.                        .catch(error => {
  926.                            console.error('Error loading trending tags:', error);
  927.                            // Fallback to some common tags
  928.                            this.trendingTags = [
  929.                                { name: 'Nepal', slug: 'nepal' },
  930.                                { name: 'Kathmandu', slug: 'kathmandu' },
  931.                                { name: 'News', slug: 'news' },
  932.                                { name: 'Travel', slug: 'travel' },
  933.                                { name: 'Culture', slug: 'culture' },
  934.                                { name: 'Politics', slug: 'politics' },
  935.                                { name: 'Sports', slug: 'sports' },
  936.                                { name: 'Technology', slug: 'technology' }
  937.                            ];
  938.                        });
  939.                },
  940.  
  941.                onSearchInput() {
  942.                    // Add debounced search suggestions here if needed
  943.                },
  944.  
  945.                addToRecentSearches(search) {
  946.                    // Remove if already exists
  947.                    this.recentSearches = this.recentSearches.filter(item => item !== search);
  948.                    // Add to beginning
  949.                    this.recentSearches.unshift(search);
  950.                    // Keep only 5 recent searches
  951.                    this.recentSearches = this.recentSearches.slice(0, 5);
  952.                    // Save to localStorage
  953.                    localStorage.setItem('nirivRecentSearches', JSON.stringify(this.recentSearches));
  954.                },
  955.  
  956.                loadRecentSearches() {
  957.                    const saved = localStorage.getItem('nirivRecentSearches');
  958.                    if (saved) {
  959.                        this.recentSearches = JSON.parse(saved);
  960.                    }
  961.                },
  962.  
  963.                clearRecentSearches() {
  964.                    this.recentSearches = [];
  965.                    localStorage.removeItem('nirivRecentSearches');
  966.                }
  967.            }
  968.        }
  969.    </script>
  970.  
  971.  
  972.  
  973.    <div id="main-content" class="w-full">
  974.        <main class="w-full">
  975.        <div class="w-full mx-auto pt-2 sm:pt-4 px-2 sm:px-6 pb-12">
  976.  
  977.                                
  978.                                
  979.                <!-- Main Search Section with Weather Bar and Menu Icons -->
  980.                <div class="my-2" style="margin-top: 25px;">
  981.                <!-- Weather Bar moved above search form -->
  982.                <section class="flex flex-col sm:flex-row justify-between items-center py-0.5 sm:py-1 z-10 relative max-w-[590px] mx-auto px-4 sm:px-2" style="max-width: 590px !important;">
  983.                    <div class="flex items-center gap-4">
  984.                        <span id="greeting" class="font-semibold text-gray-700 text-sm flex items-center gap-1">
  985.                            <i data-lucide="smile" class="w-3 h-3 text-blue-600"></i>
  986.                            <span></span>
  987.                        </span>
  988.                        <span id="weather" class="font-semibold text-gray-600 text-sm flex items-center gap-1">
  989.                            <i data-lucide="sun" class="w-3 h-3 text-yellow-500"></i>
  990.                            <span></span>
  991.                        </span>
  992.                    </div>
  993.                    <div class="flex items-center gap-4 mt-1 sm:mt-0">
  994.                        <div id="air-quality" class="flex items-center gap-2">
  995.                            <div class="w-2 h-2 rounded-full bg-green-500 shadow-sm"></div>
  996.                            <span class="text-sm font-medium text-gray-700">
  997.                                <span class="hidden sm:inline">Air: </span>
  998.                                <span class="font-semibold text-green-600">Good</span>
  999.                                <span class="text-xs text-gray-500 ml-1">(AQI 1)</span>
  1000.                            </span>
  1001.                        </div>
  1002.                        <!-- Removed humidity and temperature widgets as requested -->
  1003.                    </div>
  1004.                    <script>
  1005.                    document.addEventListener('DOMContentLoaded', function() {
  1006.                        // Function to get weather and air quality data from OpenWeather API
  1007.                        function updateWeatherAndAirQuality() {
  1008.                            // Get the API key from WordPress settings
  1009.                            const apiKey = '192e28089f823552c08370d6537d1f31';
  1010.                            
  1011.                            if (!apiKey) {
  1012.                                // Fallback to mock data if API key is not set
  1013.                                updateWeatherAndAirQualityMock();
  1014.                                return;
  1015.                            }
  1016.                            
  1017.                            // For demo purposes, we'll use a fixed location (Kathmandu)
  1018.                            const lat = 27.7172; // Kathmandu latitude
  1019.                            const lon = 85.3240; // Kathmandu longitude
  1020.                            
  1021.                            // First get location name using reverse geocoding
  1022.                            fetch('http://api.openweathermap.org/geo/1.0/reverse?lat=' + lat + '&lon=' + lon + '&limit=1&appid=' + apiKey)
  1023.                            .then(response => response.json())
  1024.                            .then(locationData => {
  1025.                                let locationName = 'Kathmandu';
  1026.                                if (locationData && locationData[0]) {
  1027.                                    locationName = locationData[0].name || 'Kathmandu';
  1028.                                }
  1029.                                
  1030.                                // Make API request to OpenWeather One Call API for weather data
  1031.                                return fetch('https://api.openweathermap.org/data/3.0/onecall?lat=' + lat + '&lon=' + lon + '&appid=' + apiKey + '&units=metric&exclude=minutely,hourly,daily,alerts')
  1032.                                .then(response => response.json())
  1033.                                .then(weatherData => {
  1034.                                    if (weatherData && weatherData.current) {
  1035.                                        const current = weatherData.current;
  1036.                                        const temp = Math.round(current.temp);
  1037.                                        const humidity = current.humidity;
  1038.                                        const condition = current.weather && current.weather[0] ? current.weather[0].main : 'Clear';
  1039.                                        
  1040.                                        // Update weather display with location
  1041.                                        const weatherEl = document.getElementById('weather');
  1042.                                        weatherEl.innerHTML = '<i data-lucide="sun" class="w-3 h-3 text-yellow-500"></i><span>' + locationName + ': ' + temp + '°C, ' + condition + '</span>';
  1043.                                    
  1044.                                    // Make API request to OpenWeather Air Pollution API for air quality data
  1045.                                    return fetch('http://api.openweathermap.org/data/2.5/air_pollution?lat=' + lat + '&lon=' + lon + '&appid=' + apiKey);
  1046.                                } else {
  1047.                                    // Fallback to mock data if API fails
  1048.                                    updateWeatherAndAirQualityMock();
  1049.                                }
  1050.                            })
  1051.                        })
  1052.                                    } else {
  1053.                                        // Fallback to mock data if API fails
  1054.                                        updateWeatherAndAirQualityMock();
  1055.                                    }
  1056.                                })
  1057.                            })
  1058.                            .then(response => {
  1059.                                if (response) {
  1060.                                    return response.json();
  1061.                                }
  1062.                            })
  1063.                            .then(airQualityData => {
  1064.                                if (airQualityData && airQualityData.list && airQualityData.list[0]) {
  1065.                                    const aqiData = airQualityData.list[0];
  1066.                                    const aqi = aqiData.main ? aqiData.main.aqi : 1;
  1067.                                    const components = aqiData.components || {};
  1068.                                    
  1069.                                    let quality, color, dotColor;
  1070.                                    
  1071.                                    // Determine air quality category based on AQI
  1072.                                    switch (aqi) {
  1073.                                        case 1:
  1074.                                            quality = 'Good';
  1075.                                            color = 'text-green-600';
  1076.                                            dotColor = 'bg-green-500';
  1077.                                            break;
  1078.                                        case 2:
  1079.                                            quality = 'Fair';
  1080.                                            color = 'text-yellow-600';
  1081.                                            dotColor = 'bg-yellow-500';
  1082.                                            break;
  1083.                                        case 3:
  1084.                                            quality = 'Moderate';
  1085.                                            color = 'text-orange-600';
  1086.                                            dotColor = 'bg-orange-500';
  1087.                                            break;
  1088.                                        case 4:
  1089.                                            quality = 'Poor';
  1090.                                            color = 'text-red-600';
  1091.                                            dotColor = 'bg-red-500';
  1092.                                            break;
  1093.                                        case 5:
  1094.                                            quality = 'Very Poor';
  1095.                                            color = 'text-purple-600';
  1096.                                            dotColor = 'bg-purple-500';
  1097.                                            break;
  1098.                                        default:
  1099.                                            quality = 'Good';
  1100.                                            color = 'text-green-600';
  1101.                                            dotColor = 'bg-green-500';
  1102.                                    }
  1103.                                    
  1104.                                    const airQualityEl = document.getElementById('air-quality');
  1105.                                    airQualityEl.innerHTML = '<div class="w-2 h-2 rounded-full ' + dotColor + ' shadow-sm"></div><span class="text-xs font-medium text-gray-700"><span class="hidden sm:inline">Air: </span><span class="font-semibold ' + color + '">' + quality + '</span><span class="text-[10px] text-gray-500 ml-1">(AQI ' + aqi + ')</span></span>';
  1106.                                } else {
  1107.                                    // Fallback to mock data if API fails
  1108.                                    updateWeatherAndAirQualityMock();
  1109.                                }
  1110.                            })
  1111.                            .catch(error => {
  1112.                                console.error('Error fetching weather and air quality data:', error);
  1113.                                // Fallback to mock data if API fails
  1114.                                updateWeatherAndAirQualityMock();
  1115.                            });
  1116.                        }
  1117.                        
  1118.                        // Mock function as fallback
  1119.                        function updateWeatherAndAirQualityMock() {
  1120.                            // Mock weather data
  1121.                            const temp = Math.floor(Math.random() * 10) + 20; // Random temp between 20-30°C
  1122.                            const conditions = ['Sunny', 'Cloudy', 'Partly Cloudy', 'Clear'];
  1123.                            const condition = conditions[Math.floor(Math.random() * conditions.length)];
  1124.                            
  1125.                            const weatherEl = document.getElementById('weather');
  1126.                            weatherEl.innerHTML = '<i data-lucide="sun" class="w-3 h-3 text-yellow-500"></i><span>Kathmandu: ' + temp + '°C, ' + condition + '</span>';
  1127.                            
  1128.                            // Mock air quality data
  1129.                            const aqi = Math.floor(Math.random() * 4) + 1; // Random AQI between 1-5
  1130.                            let quality, color, dotColor;
  1131.                            
  1132.                            switch (aqi) {
  1133.                                case 1:
  1134.                                    quality = 'Good';
  1135.                                    color = 'text-green-600';
  1136.                                    dotColor = 'bg-green-500';
  1137.                                    break;
  1138.                                case 2:
  1139.                                    quality = 'Fair';
  1140.                                    color = 'text-yellow-600';
  1141.                                    dotColor = 'bg-yellow-500';
  1142.                                    break;
  1143.                                case 3:
  1144.                                    quality = 'Moderate';
  1145.                                    color = 'text-orange-600';
  1146.                                    dotColor = 'bg-orange-500';
  1147.                                    break;
  1148.                                case 4:
  1149.                                    quality = 'Poor';
  1150.                                    color = 'text-red-600';
  1151.                                    dotColor = 'bg-red-500';
  1152.                                    break;
  1153.                                default:
  1154.                                    quality = 'Good';
  1155.                                    color = 'text-green-600';
  1156.                                    dotColor = 'bg-green-500';
  1157.                            }
  1158.                            
  1159.                            const airQualityEl = document.getElementById('air-quality');
  1160.                            airQualityEl.innerHTML = '<div class="w-2 h-2 rounded-full ' + dotColor + ' shadow-sm"></div><span class="text-xs font-medium text-gray-700"><span class="hidden sm:inline">Air: </span><span class="font-semibold ' + color + '">' + quality + '</span><span class="text-[10px] text-gray-500 ml-1">(AQI ' + aqi + ')</span></span>';
  1161.                        }
  1162.                        
  1163.                        // Initial update
  1164.                        updateWeatherAndAirQuality();
  1165.                        
  1166.                        // Update every 5 minutes (300000ms)
  1167.                        setInterval(updateWeatherAndAirQuality, 300000);
  1168.                    });
  1169.                    </script>
  1170.                </section>
  1171.  
  1172.              
  1173.  
  1174.  
  1175.              
  1176.  
  1177.            
  1178.  
  1179.                <!-- Promotional Banner Above Search -->
  1180.                
  1181.                <!-- Search Form Section -->          
  1182.                <section class="flex flex-col items-center my-6 relative z-40 max-w-[590px] mx-auto" style="margin-top: 20px; max-width: 590px !important;">
  1183.                    <form action="/search.html" method="GET" class="w-full relative px-4 sm:px-2" style="max-width: 590px !important;" id="main-search-form" x-data="{}" @submit="logSearch($event)">
  1184.                        <div class="relative">
  1185.                            <div class="absolute inset-y-0 left-0 flex items-center pl-4 z-20">
  1186.                                <button type="button" id="radial-menu-trigger" class="p-2 rounded-full hover:bg-blue-50 transition-colors hidden md:block">
  1187.                                    <img src="/images/Nirivicon.svg" alt="Niriv Services Menu" class="w-8 h-8">
  1188.                                </button>
  1189.                            </div>
  1190.                            <input type="search" name="q" id="main-search-input" placeholder="Start typing..." class="w-full py-4 pl-16 pr-36 text-base bg-white rounded-2xl focus:outline-none transition-all duration-200 shadow-sm border-0" required autocomplete="off" @focus="if (window.innerWidth < 768) { $dispatch('open-mobile-search'); }">
  1191.                            <input type="hidden" name="from" id="search-from" value="web">
  1192.                            
  1193.                        <!-- N icon is now the trigger button again -->
  1194.                        <div class="absolute inset-y-0 left-0 flex items-center pl-4 z-30">
  1195.                            <button type="button" id="radial-menu-trigger" class="p-2 rounded-full hover:bg-blue-50 transition-colors">
  1196.                                <img src="/images/Nirivicon.svg" alt="Niriv Services Menu" class="w-8 h-8">
  1197.                            </button>
  1198.                        </div>
  1199.                            <div class="absolute inset-y-0 right-0 flex items-center pr-2.5">
  1200.                                <button type="submit" class="h-9 w-9 rounded-full text-white flex items-center justify-center bg-[#1847ea] hover:bg-blue-700 transition-colors font-bold shadow-sm" title="Search">
  1201.                                    <i data-lucide="search" class="w-5 h-5"></i>
  1202.                                </button>
  1203.                            </div>
  1204.                        </div>
  1205.                        <div id="autocomplete-results" class="absolute left-0 right-0 top-full mt-2 bg-white rounded-lg shadow-lg z-[9999] hidden"></div>
  1206.                    </form>
  1207.                </section>
  1208.  
  1209.                <!-- Search Logging Script -->
  1210.                <script>
  1211.                function logSearch(event) {
  1212.                    const form = event.target;
  1213.                    const queryInput = form.querySelector('input[name="q"]');
  1214.                    const query = queryInput ? queryInput.value.trim() : '';
  1215.  
  1216.                    if (query) {
  1217.                        // Send search log via AJAX (don't block form submission)
  1218.                        fetch('/wp-admin/admin-ajax.php', {
  1219.                            method: 'POST',
  1220.                            headers: {
  1221.                                'Content-Type': 'application/x-www-form-urlencoded',
  1222.                            },
  1223.                            body: new URLSearchParams({
  1224.                                action: 'niriv_log_search',
  1225.                                query: query
  1226.                            })
  1227.                        }).catch(error => {
  1228.                            console.log('Search logging failed:', error);
  1229.                        });
  1230.                    }
  1231.                }
  1232.                </script>
  1233.                <!-- Service Icons Section -->
  1234.                <div id="service-icons-section" class="max-w-[590px] mx-auto px-4 sm:px-2 mt-8 mb-8 relative" style="max-width: 590px !important; z-index: 1;">
  1235.                    <div class="grid grid-cols-5 sm:grid-cols-8 gap-2 text-center">
  1236.                        <a href="#" class="flex flex-col items-center space-y-1 group"><div class="p-2 rounded-full flex items-center justify-center bg-white shadow-sm hover-lift"><i data-lucide="search" class="w-5 h-5 text-blue-600"></i></div><span class="text-xs font-medium text-gray-600">Search</span></a>
  1237.                        <a href="#" class="flex flex-col items-center space-y-1 group"><div class="p-2 rounded-full flex items-center justify-center bg-white shadow-sm hover-lift"><i data-lucide="mail" class="w-5 h-5 text-teal-600"></i></div><span class="text-xs font-medium text-gray-600">Mail</span></a>
  1238.                        <a href="/news" class="flex flex-col items-center space-y-1 group"><div class="p-2 rounded-full flex items-center justify-center bg-white shadow-sm hover-lift"><i data-lucide="newspaper" class="w-5 h-5 text-red-600"></i></div><span class="text-xs font-medium text-gray-600">News</span></a>
  1239.                        <a href="#" class="flex flex-col items-center space-y-1 group"><div class="p-2 rounded-full flex items-center justify-center bg-white shadow-sm hover-lift"><i data-lucide="shopping-bag" class="w-5 h-5 text-indigo-600"></i></div><span class="text-xs font-medium text-gray-600">Shopping</span></a>
  1240.                        <a href="/all-services" class="flex sm:hidden flex-col items-center space-y-1 group"><div class="p-2 rounded-full flex items-center justify-center bg-white shadow-sm hover-lift"><i data-lucide="more-horizontal" class="w-5 h-5 text-gray-500"></i></div><span class="text-xs font-medium text-gray-600">More</span></a>
  1241.                        <a href="#" class="hidden sm:flex flex-col items-center space-y-1 group"><div class="p-2 rounded-full flex items-center justify-center bg-white shadow-sm hover-lift"><i data-lucide="calendar-days" class="w-5 h-5 text-blue-600"></i></div><span class="text-xs font-medium text-gray-600">Tithi</span></a>
  1242.                        <a href="#" class="hidden sm:flex flex-col items-center space-y-1 group"><div class="p-2 rounded-full flex items-center justify-center bg-white shadow-sm hover-lift"><i data-lucide="coffee" class="w-5 h-5 text-green-600"></i></div><span class="text-xs font-medium text-gray-600">Cafe</span></a>
  1243.                        <a href="#" class="hidden sm:flex flex-col items-center space-y-1 group"><div class="p-2 rounded-full flex items-center justify-center bg-white shadow-sm hover-lift"><i data-lucide="trending-up" class="w-5 h-5 text-green-600"></i></div><span class="text-xs font-medium text-gray-600">Economy</span></a>
  1244.                        <a href="/all-services" class="hidden sm:flex flex-col items-center space-y-1 group"><div class="p-2 rounded-full flex items-center justify-center bg-white shadow-sm hover-lift"><i data-lucide="more-horizontal" class="w-5 h-5 text-gray-500"></i></div><span class="text-xs font-medium text-gray-600">More</span></a>
  1245.                    </div>
  1246.                </div>
  1247.  
  1248. <!-- Trending Searches Section -->
  1249.                <div class="w-full max-w-[590px] mx-auto px-4 sm:px-2 relative" style="padding-top: 30px; margin-bottom: 160px; max-width: 590px !important;">
  1250.                    <h3 class="text-xl sm:text-lg text-[18px] font-bold text-gray-600 mb-6 flex items-center">
  1251.                        <i data-lucide="trending-up" class="w-5 h-5 text-blue-600 mr-2"></i>
  1252.                        What people are searching now
  1253.                    </h3>
  1254.                    <div class="w-16 h-0.5 bg-gradient-to-r from-blue-500 to-blue-600 rounded-full mb-4"></div>
  1255.                    <div class="flex flex-wrap gap-3" id="trending-searches-container">
  1256.                                                    <a href="/search.html?q=Nepal+news&from=web"
  1257.                               class="px-3 py-1.5 text-xs md:text-[13px] bg-blue-100 text-blue-700 hover:bg-blue-200 rounded-full transition-colors duration-200 flex items-center animate-pulse">
  1258.                                Nepal news                                <span class="ml-1 text-xs opacity-75">(25)</span>
  1259.                                <span class="text-green-500">
  1260.                                    <i data-lucide="trending-up" class="w-4 h-4 ml-1"></i>                                </span>
  1261.                            </a>
  1262.                                                    <a href="/search.html?q=Kathmandu+weather&from=web"
  1263.                               class="px-3 py-1.5 text-xs md:text-[13px] bg-blue-100 text-blue-700 hover:bg-blue-200 rounded-full transition-colors duration-200 flex items-center animate-pulse">
  1264.                                Kathmandu weather                                <span class="ml-1 text-xs opacity-75">(18)</span>
  1265.                                <span class="text-green-500">
  1266.                                    <i data-lucide="trending-up" class="w-4 h-4 ml-1"></i>                                </span>
  1267.                            </a>
  1268.                                                    <a href="/search.html?q=Nepali+movies&from=web"
  1269.                               class="px-3 py-1.5 text-xs md:text-[13px] bg-blue-100 text-blue-700 hover:bg-blue-200 rounded-full transition-colors duration-200 flex items-center animate-pulse">
  1270.                                Nepali movies                                <span class="ml-1 text-xs opacity-75">(15)</span>
  1271.                                <span class="text-green-500">
  1272.                                    <i data-lucide="trending-up" class="w-4 h-4 ml-1"></i>                                </span>
  1273.                            </a>
  1274.                                                    <a href="/search.html?q=Forex+rates&from=web"
  1275.                               class="px-3 py-1.5 text-xs md:text-[13px] bg-blue-100 text-blue-700 hover:bg-blue-200 rounded-full transition-colors duration-200 flex items-center animate-pulse">
  1276.                                Forex rates                                <span class="ml-1 text-xs opacity-75">(12)</span>
  1277.                                <span class="text-green-500">
  1278.                                    <i data-lucide="trending-up" class="w-4 h-4 ml-1"></i>                                </span>
  1279.                            </a>
  1280.                                            </div>
  1281.                </div>
  1282.                
  1283.  
  1284.  
  1285.  
  1286.  
  1287.                <section class="bg-linear-to-r from-blue-600 to-blue-700 text-white rounded-2xl p-6 mb-8 mt-8 max-w-[590px] w-full mx-auto px-4 sm:px-2" style="max-width: 590px !important;">
  1288.                    <div class="flex items-center justify-between">
  1289.                        <div class="flex items-center gap-4">
  1290.                            <div class="w-12 h-12 rounded-xl bg-white/20 flex items-center justify-center">
  1291.                                <i data-lucide="plane" class="w-5 h-5"></i>
  1292.                            </div>
  1293.                            <div>
  1294.                                                                    <h3 class="font-bold text-lg">Australia Visa Offer</h3>
  1295.                                                                                                    <p class="text-sm opacity-90">Special visa processing for Nepali citizens</p>
  1296.                                                            </div>
  1297.                        </div>
  1298.                        <button class="bg-white text-blue-600 w-10 h-10 rounded-full flex items-center justify-center shrink-0 font-semibold hover:bg-gray-100 transition-colors">
  1299.                            <i data-lucide="arrow-right" class="w-5 h-5"></i>
  1300.                        </button>
  1301.                    </div>
  1302.                </section>
  1303.                
  1304.  
  1305.                    
  1306.                    <div class="w-full grid grid-cols-1 lg:grid-cols-3 gap-6">
  1307.                            <!-- Middle Column - Featured News and Other Content -->
  1308.                            <div class="col-span-1 lg:col-span-2">
  1309.                                <div class="bg-white rounded-2xl shadow-sm p-6 mb-8">
  1310.                                                                        <!-- Featured Article -->
  1311.                                    <div class="relative mb-8 group">
  1312.                                                                                    <img width="1024" height="621" src="https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-1024x621.png" class="w-full h-64 object-cover rounded-lg group-hover:opacity-90 transition-opacity wp-post-image" alt="Nirivdefault" decoding="async" fetchpriority="high" srcset="https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-1024x621.png 1024w, https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-300x182.png 300w, https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-768x466.png 768w, https://scriling.com/wp-content/uploads/2025/09/Nirivdefault.png 1200w" sizes="(max-width: 1024px) 100vw, 1024px" />                                                                                
  1313.                                                                                    <div class="absolute top-4 left-4">
  1314.                                                <a href="https://scriling.com/content/national/society/" class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-medium hover:bg-red-600 transition-colors">
  1315.                                                    Society                                                </a>
  1316.                                            </div>
  1317.                                                                                
  1318.                                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6 rounded-b-lg">
  1319.                                            <h2 class="text-white text-xl font-bold mb-2 group-hover:underline">
  1320.                                                <a href="https://scriling.com/news/youth-protest-against-internet-restrictions-in-nepal/">Youth protest against internet restrictions in Nepal</a>
  1321.                                            </h2>
  1322.                                            <div class="flex items-center justify-between">
  1323.                                                <div class="flex items-center text-sm text-gray-300">
  1324.                                                    <span>September 28, 2025</span>
  1325.                                                    <span class="mx-2">•</span>
  1326.                                                    <span>1</span>
  1327.                                                </div>
  1328.                                                <div class="flex items-center gap-2">
  1329.                                                    <button class="text-white hover:text-gray-300 transition-colors">
  1330.                                                        <i data-lucide="chevron-left" class="w-5 h-5"></i>
  1331.                                                    </button>
  1332.                                                    <button class="text-white hover:text-gray-300 transition-colors">
  1333.                                                        <i data-lucide="chevron-right" class="w-5 h-5"></i>
  1334.                                                    </button>
  1335.                                                </div>
  1336.                                            </div>
  1337.                                        </div>
  1338.                                    </div>
  1339.  
  1340.                                    <!-- Article Grid -->
  1341.                                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
  1342.                                                                            <div class="group overflow-hidden">
  1343.                                            <a href="https://scriling.com/news/students-protest-rising-tuition-fees-in-nepali-colleges/">
  1344.                                                <div class="aspect-w-16 aspect-h-9 w-full">
  1345.                                                                                                            <img width="300" height="182" src="https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-300x182.png" class="w-full h-full object-cover rounded-lg group-hover:opacity-90 transition-opacity wp-post-image" alt="Nirivdefault" decoding="async" srcset="https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-300x182.png 300w, https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-1024x621.png 1024w, https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-768x466.png 768w, https://scriling.com/wp-content/uploads/2025/09/Nirivdefault.png 1200w" sizes="(max-width: 300px) 100vw, 300px" />                                                                                                    </div>
  1346.                                                <div class="mt-3">
  1347.                                                    <h3 class="text-sm text-gray-800 font-medium leading-tight group-hover:text-blue-600 transition-colors">
  1348.                                                        Students protest rising tuition fees in Nepali colleges                                                    </h3>
  1349.                                                                                                            <div class="mt-2">
  1350.                                                            <span class="inline-block text-xs text-gray-600 bg-gray-50 px-2 py-1 rounded">
  1351.                                                                Society                                                            </span>
  1352.                                                        </div>
  1353.                                                                                                    </div>
  1354.                                            </a>
  1355.                                        </div>
  1356.                                                                            <div class="group overflow-hidden">
  1357.                                            <a href="https://scriling.com/news/gen-z-takes-to-the-streets-in-kathmandu-demanding-climate-action/">
  1358.                                                <div class="aspect-w-16 aspect-h-9 w-full">
  1359.                                                                                                            <img width="300" height="182" src="https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-300x182.png" class="w-full h-full object-cover rounded-lg group-hover:opacity-90 transition-opacity wp-post-image" alt="Nirivdefault" decoding="async" srcset="https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-300x182.png 300w, https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-1024x621.png 1024w, https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-768x466.png 768w, https://scriling.com/wp-content/uploads/2025/09/Nirivdefault.png 1200w" sizes="(max-width: 300px) 100vw, 300px" />                                                                                                    </div>
  1360.                                                <div class="mt-3">
  1361.                                                    <h3 class="text-sm text-gray-800 font-medium leading-tight group-hover:text-blue-600 transition-colors">
  1362.                                                        Gen Z takes to the streets in Kathmandu demanding climate action                                                    </h3>
  1363.                                                                                                            <div class="mt-2">
  1364.                                                            <span class="inline-block text-xs text-gray-600 bg-gray-50 px-2 py-1 rounded">
  1365.                                                                Society                                                            </span>
  1366.                                                        </div>
  1367.                                                                                                    </div>
  1368.                                            </a>
  1369.                                        </div>
  1370.                                                                            <div class="group overflow-hidden">
  1371.                                            <a href="https://scriling.com/news/deserunt-ut-delectus-in/">
  1372.                                                <div class="aspect-w-16 aspect-h-9 w-full">
  1373.                                                                                                            <img width="300" height="182" src="https://scriling.com/wp-content/uploads/2025/09/ade56d26-d1d2-3dee-9b35-adf64cbb1acd-300x182.jpg" class="w-full h-full object-cover rounded-lg group-hover:opacity-90 transition-opacity wp-post-image" alt="" decoding="async" srcset="https://scriling.com/wp-content/uploads/2025/09/ade56d26-d1d2-3dee-9b35-adf64cbb1acd-300x182.jpg 300w, https://scriling.com/wp-content/uploads/2025/09/ade56d26-d1d2-3dee-9b35-adf64cbb1acd-1024x621.jpg 1024w, https://scriling.com/wp-content/uploads/2025/09/ade56d26-d1d2-3dee-9b35-adf64cbb1acd-768x466.jpg 768w, https://scriling.com/wp-content/uploads/2025/09/ade56d26-d1d2-3dee-9b35-adf64cbb1acd.jpg 1200w" sizes="(max-width: 300px) 100vw, 300px" />                                                                                                    </div>
  1374.                                                <div class="mt-3">
  1375.                                                    <h3 class="text-sm text-gray-800 font-medium leading-tight group-hover:text-blue-600 transition-colors">
  1376.                                                        Deserunt ut delectus in                                                    </h3>
  1377.                                                                                                            <div class="mt-2">
  1378.                                                            <span class="inline-block text-xs text-gray-600 bg-gray-50 px-2 py-1 rounded">
  1379.                                                                quia                                                            </span>
  1380.                                                        </div>
  1381.                                                                                                    </div>
  1382.                                            </a>
  1383.                                        </div>
  1384.                                                                </div> </div>
  1385.  
  1386.                            <!-- Categories Widget -->
  1387.                            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-4">
  1388.                                <h4 class="text-sm font-semibold text-gray-800 mb-3">Other Categories</h4>
  1389.                                <div class="grid grid-cols-2 gap-2">
  1390.                                    <a href="https://scriling.com/content/at/" class="flex items-center gap-3 p-2 hover:bg-gray-50 rounded-lg transition-colors"><i data-lucide="folder" class="w-4 h-4 text-gray-500"></i><span class="text-sm text-gray-700">at</span></a><a href="https://scriling.com/content/aut/" class="flex items-center gap-3 p-2 hover:bg-gray-50 rounded-lg transition-colors"><i data-lucide="folder" class="w-4 h-4 text-gray-500"></i><span class="text-sm text-gray-700">aut</span></a><a href="https://scriling.com/content/incidunt/" class="flex items-center gap-3 p-2 hover:bg-gray-50 rounded-lg transition-colors"><i data-lucide="folder" class="w-4 h-4 text-gray-500"></i><span class="text-sm text-gray-700">incidunt</span></a><a href="https://scriling.com/content/national/" class="flex items-center gap-3 p-2 hover:bg-gray-50 rounded-lg transition-colors"><i data-lucide="folder" class="w-4 h-4 text-gray-500"></i><span class="text-sm text-gray-700">National</span></a><a href="https://scriling.com/content/niriv/" class="flex items-center gap-3 p-2 hover:bg-gray-50 rounded-lg transition-colors"><i data-lucide="folder" class="w-4 h-4 text-gray-500"></i><span class="text-sm text-gray-700">Niriv</span></a><a href="https://scriling.com/content/quia/" class="flex items-center gap-3 p-2 hover:bg-gray-50 rounded-lg transition-colors"><i data-lucide="folder" class="w-4 h-4 text-gray-500"></i><span class="text-sm text-gray-700">quia</span></a><a href="https://scriling.com/content/repudiandae/" class="flex items-center gap-3 p-2 hover:bg-gray-50 rounded-lg transition-colors"><i data-lucide="folder" class="w-4 h-4 text-gray-500"></i><span class="text-sm text-gray-700">repudiandae</span></a><a href="https://scriling.com/content/national/society/" class="flex items-center gap-3 p-2 hover:bg-gray-50 rounded-lg transition-colors"><i data-lucide="folder" class="w-4 h-4 text-gray-500"></i><span class="text-sm text-gray-700">Society</span></a>                                    <div class="flex items-center gap-3 p-2 hover:bg-gray-50 rounded-lg cursor-pointer transition-colors">
  1391.                                        <i data-lucide="heart" class="w-4 h-4 text-gray-500"></i>
  1392.                                        <span class="text-sm text-gray-700">Lifestyle</span>
  1393.                                    </div>
  1394.                                </div>
  1395.  
  1396.                                
  1397.                            </div>
  1398. <!-- What's Happening Section -->
  1399. <section class="mt-8 mb-10 space-y-6">
  1400.    <!-- Daily Top 5 -->
  1401.    <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
  1402.        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center">
  1403.            <i data-lucide="flame" class="w-5 h-5 text-red-500 mr-2"></i>
  1404.            Trending Today
  1405.        </h3>
  1406.        <hr class="border-gray-200 mb-4">
  1407.        <div class="space-y-3">
  1408.                            <div class="text-center py-4">
  1409.                    <i data-lucide="clock" class="w-8 h-8 text-gray-400 mx-auto mb-2"></i>
  1410.                    <p class="text-gray-500 text-sm">No trending posts today. Check back later!</p>
  1411.                </div>
  1412.                    </div>
  1413.    </div>
  1414.  
  1415.    <!-- Weekly Top 5 -->
  1416.    <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
  1417.        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center">
  1418.            <i data-lucide="trending-up" class="w-5 h-5 text-blue-500 mr-2"></i>
  1419.            This Week's Top Picks
  1420.        </h3>
  1421.        <hr class="border-gray-200 mb-4">
  1422.        <div class="space-y-3">
  1423.                            <p class="text-gray-500 text-sm">No trending posts this week. Check back later!</p>
  1424.                    </div>
  1425.    </div>
  1426. </section>
  1427.  
  1428.  
  1429. <section class="mb-8">
  1430.                    <div class="flex justify-between items-center mb-3 px-2">
  1431.                        <h2 class="text-xl font-bold text-gray-700 flex items-center">
  1432.                            <i data-lucide="film" class="w-5 h-5 mr-2 text-blue-600"></i>
  1433.                            Upcoming Movies
  1434.                        </h2>
  1435.                        <a href="/cinema" class="text-sm font-medium text-blue-600 hover:text-blue-800 flex items-center transition-colors">
  1436.                            View All <i data-lucide="arrow-right" class="w-4 h-4 ml-1"></i>
  1437.                        </a>
  1438.                    </div>
  1439.                    <div id="upcoming-movies-container" class="px-2 py-4 overflow-x-auto overflow-y-hidden">
  1440.                        <!-- Movies will be loaded here by upcoming-movies.js -->
  1441.                    </div>
  1442.                </section>
  1443.  
  1444. <!-- Calendar Section - Full Width -->
  1445. <div class="calendar-section bg-white rounded-xl shadow-md overflow-hidden mb-8">
  1446.                    <!-- Calendar Header with Forex-style Gradient -->
  1447.                    <div class="bg-linear-to-r from-blue-600 to-blue-700 text-white p-6">
  1448.                        <div class="flex justify-between items-center">
  1449.                            <!-- Calendar Icon in Header -->
  1450.                            <div class="flex items-center">
  1451.                                <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  1452.                                    <path stroke-linecap="round" stroke-linecap="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
  1453.                                </svg>
  1454.                                <!-- Left Section - Date/Time Information -->
  1455.                                <div class="text-white">
  1456.                                    <h2 class="text-4xl sm:text-5xl font-bold mb-1" id="current-nepali-date">
  1457.                                        Loading...
  1458.                                    </h2>
  1459.                                    <p class="text-base text-blue-100" id="current-date-details">
  1460.                                        Loading...
  1461.                                    </p>
  1462.                                    <p class="text-xs text-blue-200" id="current-tithi">
  1463.                                        Loading...
  1464.                                    </p>
  1465.                                </div>
  1466.                            </div>
  1467.                            <!-- Right Section - Greeting and Weather -->
  1468.                            <div class="text-white text-right">
  1469.                                <p class="text-base font-semibold" id="time-greeting">Loading...</p>
  1470.                                <div class="flex items-center justify-end mt-1" id="weather-info">
  1471.                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
  1472.                                        <path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zm0 14a6 6 0 110-12 6 6 0 010 12z" clip-rule="evenodd" />
  1473.                                    </svg>
  1474.                                    <span class="text-base" id="current-weather">Loading...</span>
  1475.                                </div>
  1476.                            </div>
  1477.                        </div>
  1478.  
  1479.                        <span class="absolute bottom-2 right-2 text-xs bg-white/20 px-2 py-1 rounded-full text-white">More Forecast</span>
  1480.                    </div>
  1481.                    
  1482.                    <!-- Calendar Grid -->
  1483.                    <div class="p-4">
  1484.                        <!-- Days of Week -->
  1485.                        <div class="grid grid-cols-7 gap-1 text-center mb-2">
  1486.                            <div class="text-gray-600">Su</div>
  1487.                            <div class="text-gray-600">Mo</div>
  1488.                            <div class="text-gray-600">Tu</div>
  1489.                            <div class="text-gray-600">We</div>
  1490.                            <div class="text-gray-600">Th</div>
  1491.                            <div class="text-gray-600">Fr</div>
  1492.                            <div class="text-gray-600">Sa</div>
  1493.                        </div>
  1494.                        
  1495.                        <!-- Calendar Dates -->
  1496.                        <div class="grid grid-cols-7 gap-1 text-center" id="calendar-days">
  1497.                            <!-- Calendar days will be populated by JavaScript -->
  1498.                            <div class="col-span-7 flex justify-center items-center h-32 text-gray-500">
  1499.                                <div class="text-center">
  1500.                                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
  1501.                                    <p>Loading calendar...</p>
  1502.                                </div>
  1503.                            </div>
  1504.                        </div>
  1505.                    </div>
  1506.                    
  1507.                    <!-- Upcoming Events Section -->
  1508.                    <div class="border-t border-gray-200 p-4">
  1509.                        <div class="flex items-center mb-4">
  1510.                            <div class="bg-red-500 rounded-md p-2 mr-3">
  1511.                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" viewBox="0 0 20 20" fill="currentColor">
  1512.                                    <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
  1513.                                </svg>
  1514.                            </div>
  1515.                            <div class="flex-1">
  1516.                                <h3 class="text-lg font-bold" id="upcoming-event-title">Loading events...</h3>
  1517.                                <p class="text-sm text-gray-500" id="upcoming-event-date"></p>
  1518.                            </div>
  1519.                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-4 text-gray-400 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
  1520.                                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
  1521.                            </svg>
  1522.                        </div>
  1523.                        
  1524.                        <!-- Quick Links -->
  1525.                        <div class="grid grid-cols-3 gap-4 mt-6">
  1526.                            <a href="/notes" class="flex flex-col items-center justify-center p-4 bg-gray-100 rounded-lg hover:bg-gray-200 transition">
  1527.                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  1528.                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
  1529.                                </svg>
  1530.                                <span class="text-sm font-medium">Notes</span>
  1531.                            </a>
  1532.                            <a href="/holidays" class="flex flex-col items-center justify-center p-4 bg-gray-100 rounded-lg hover:bg-gray-200 transition">
  1533.                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  1534.                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
  1535.                                </svg>
  1536.                                <span class="text-sm font-medium">Holidays</span>
  1537.                            </a>
  1538.                            <a href="/miti" class="flex flex-col items-center justify-center p-4 bg-gray-100 rounded-lg hover:bg-gray-200 transition">
  1539.                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  1540.                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
  1541.                                </svg>
  1542.                                <span class="text-sm font-medium">Calendar</span>
  1543.                            </a>
  1544.                        </div>
  1545.                        
  1546.                        <!-- View All Button -->
  1547.                        <div class="mt-4 text-center">
  1548.                            <a href="/miti" class="inline-flex items-center text-sm font-medium text-blue-600 hover:text-blue-800">
  1549.                                <span>View Full Calendar</span>
  1550.                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor">
  1551.                                    <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
  1552.                                </svg>
  1553.                            </a>
  1554.                        </div>
  1555.                    </div>
  1556.                </div>
  1557.  
  1558.                 <!-- NEPSE Market Widget - Moved before Special Events -->
  1559.                <section class="mb-8">
  1560.                    <div class="bg-white rounded-2xl widget-shadow flex flex-col h-full overflow-hidden">
  1561.                        <div class="bg-linear-to-r from-blue-500 to-indigo-600 text-white p-4 rounded-t-lg">
  1562.                            <h3 class="font-bold text-lg flex items-center"><i data-lucide="activity" class="w-5 h-5 mr-2"></i>NEPSE Market</h3>
  1563.                            <p class="text-xs text-blue-100 mt-1">Nepal Stock Exchange Live</p>
  1564.                        </div>
  1565.                        <div class="p-5 space-y-4 flex-1">
  1566.                            <div class="flex justify-between items-center pb-3 border-b border-gray-100">
  1567.                                <div>
  1568.                                    <p class="font-medium text-gray-700">NEPSE Index</p>
  1569.                                    <p class="text-xs text-gray-500">Current Value</p>
  1570.                                </div>
  1571.                                <div class="text-right">
  1572.                                    <p class="font-semibold text-gray-900 text-lg">1,845.72</p>
  1573.                                    <p class="text-xs text-green-600">+25.42 (1.39%)</p>
  1574.                                </div>
  1575.                            </div>
  1576.                            <div class="space-y-3">
  1577.                                <div class="flex justify-between items-center">
  1578.                                    <span class="text-sm text-gray-600">Volume</span>
  1579.                                    <span class="text-sm font-medium">12.5M</span>
  1580.                                </div>
  1581.                                <div class="flex justify-between items-center">
  1582.                                    <span class="text-sm text-gray-600">Turnover</span>
  1583.                                    <span class="text-sm font-medium">Nrs. 4.2B</span>
  1584.                                </div>
  1585.                                <div class="flex justify-between items-center">
  1586.                                    <span class="text-sm text-gray-600">Advances</span>
  1587.                                    <span class="text-sm font-medium text-green-600">124</span>
  1588.                                </div>
  1589.                                <div class="flex justify-between items-center">
  1590.                                    <span class="text-sm text-gray-600">Declines</span>
  1591.                                    <span class="text-sm font-medium text-red-600">42</span>
  1592.                                </div>
  1593.                            </div>
  1594.                            <a href="/markets" class="text-center text-sm font-semibold text-blue-600 hover:text-blue-800 mt-4 pt-3 border-t border-gray-100 block">View Market Details →</a>
  1595.                        </div>
  1596.                    </div>
  1597.                </section>
  1598.  
  1599.                <!-- Special Events Section - RESTORED AS PER REQUEST (Government Services) -->
  1600.                <section class="mb-14 w-full">
  1601.                    <div class="w-full mx-auto px-4 sm:px-6" style="max-width: 960px;">
  1602.                        <div class="flex justify-between items-center mb-4">
  1603.                            <h2 class="mb-0 text-xl font-bold text-gray-800">Special Events</h2>
  1604.                            <a href="/special-events" class="text-sm font-semibold text-blue-600 hover:text-blue-800 transition-colors flex items-center">
  1605.                                View All <i data-lucide="arrow-right" class="w-4 h-4 ml-1"></i>
  1606.                            </a>
  1607.                        </div>
  1608.                    </div>
  1609.                    <div class="w-full overflow-x-auto">
  1610.                        <div class="px-4 sm:px-6 w-full" style="min-width: 100%;">
  1611.                            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 w-full" style="max-width: 960px; margin: 0 auto;">
  1612.                                                                    <a href="https://scriling.com/special-events/tihar/" class="bg-white rounded-2xl widget-shadow overflow-hidden group block card-enhanced apple-card">
  1613.                                                                                    <img width="300" height="182" src="https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-300x182.png" class="w-full h-32 object-cover group-hover:scale-105 transition-transform rounded-t-2xl wp-post-image" alt="Nirivdefault" decoding="async" srcset="https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-300x182.png 300w, https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-1024x621.png 1024w, https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-768x466.png 768w, https://scriling.com/wp-content/uploads/2025/09/Nirivdefault.png 1200w" sizes="(max-width: 300px) 100vw, 300px" />                                                                                <div class="p-4">
  1614.                                                                                            <p class="text-xs font-bold text-blue-600">Oct 20 - Oct 24</p>
  1615.                                                                                        <h4 class="font-bold mt-1 group-hover:text-blue-600 transition-colors">Tihar Festival</h4>
  1616.                                                                                            <p class="text-sm text-gray-500 truncate">Tihar, also known as...</p>
  1617.                                                                                    </div>
  1618.                                    </a>
  1619.                                                                        <a href="https://scriling.com/special-events/holi/" class="bg-white rounded-2xl widget-shadow overflow-hidden group block card-enhanced apple-card">
  1620.                                                                                    <img width="300" height="182" src="https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-300x182.png" class="w-full h-32 object-cover group-hover:scale-105 transition-transform rounded-t-2xl wp-post-image" alt="Nirivdefault" decoding="async" srcset="https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-300x182.png 300w, https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-1024x621.png 1024w, https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-768x466.png 768w, https://scriling.com/wp-content/uploads/2025/09/Nirivdefault.png 1200w" sizes="(max-width: 300px) 100vw, 300px" />                                                                                <div class="p-4">
  1621.                                                                                            <p class="text-xs font-bold text-blue-600">Nov 28</p>
  1622.                                                                                        <h4 class="font-bold mt-1 group-hover:text-blue-600 transition-colors">Holi</h4>
  1623.                                                                                            <p class="text-sm text-gray-500 truncate">Holi is the festival...</p>
  1624.                                                                                    </div>
  1625.                                    </a>
  1626.                                                                        <a href="https://scriling.com/special-events/maghe-sankranti/" class="bg-white rounded-2xl widget-shadow overflow-hidden group block card-enhanced apple-card">
  1627.                                                                                    <img width="300" height="182" src="https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-300x182.png" class="w-full h-32 object-cover group-hover:scale-105 transition-transform rounded-t-2xl wp-post-image" alt="Nirivdefault" decoding="async" srcset="https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-300x182.png 300w, https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-1024x621.png 1024w, https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-768x466.png 768w, https://scriling.com/wp-content/uploads/2025/09/Nirivdefault.png 1200w" sizes="(max-width: 300px) 100vw, 300px" />                                                                                <div class="p-4">
  1628.                                                                                            <p class="text-xs font-bold text-blue-600">Jan 1</p>
  1629.                                                                                        <h4 class="font-bold mt-1 group-hover:text-blue-600 transition-colors">Maghe Sankranti</h4>
  1630.                                                                                            <p class="text-sm text-gray-500 truncate">Maghe Sankranti is a...</p>
  1631.                                                                                    </div>
  1632.                                    </a>
  1633.                                                                </div>
  1634.                        </div>
  1635.                    </div>
  1636.                </section>
  1637.  
  1638.            <!-- Nabil Bank Offer -->
  1639.            <section class="mb-8">
  1640.                <div class="bg-linear-to-r from-blue-600 to-blue-800 rounded-3xl p-6 flex items-center justify-between text-white relative overflow-hidden">
  1641.                    <div class="flex items-center space-x-4">
  1642.                        <div class="relative">
  1643.                            <div class="w-20 h-12 bg-blue-500 rounded-lg transform -rotate-12 relative flex items-center justify-center">
  1644.                                <i data-lucide="credit-card" class="w-8 h-8 text-white"></i>
  1645.                            </div>
  1646.                        </div>
  1647.                        <div>
  1648.                            <p class="font-semibold text-lg">Nabil Bank Offer</p>
  1649.                            <p class="font-bold text-xl">10% cashback on payments!</p>
  1650.                        </div>
  1651.                    </div>
  1652.                    <button class="bg-white text-blue-600 w-10 h-10 rounded-full flex items-center justify-center shrink-0 font-semibold hover:bg-gray-100 transition-colors">
  1653.                        <i data-lucide="chevron-right" class="w-5 h-5"></i>
  1654.                    </button>
  1655.                </div>
  1656.            </section>
  1657.  
  1658.            <!-- Gold/Silver Widget - Moved before For You Section -->
  1659.            <section class="mb-8">
  1660.                <div class="bg-white rounded-2xl widget-shadow flex flex-col h-full overflow-hidden">
  1661.                    <div class="bg-linear-to-r from-yellow-500 to-amber-600 text-white p-4 rounded-t-lg">
  1662.                        <h3 class="font-bold text-lg flex items-center"><i data-lucide="gem" class="w-5 h-5 mr-2"></i>Gold & Silver</h3>
  1663.                        <p class="text-xs text-yellow-100 mt-1">Precious metal rates per tola</p>
  1664.                    </div>
  1665.                    <div class="p-5 space-y-4 flex-1">
  1666.                        <div class="flex justify-between items-center pb-3 border-b border-gray-100">
  1667.                            <div class="flex items-center">
  1668.                                <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center mr-3">
  1669.                                    <i data-lucide="circle" class="w-5 h-5 text-yellow-600"></i>
  1670.                                </div>
  1671.                                <div>
  1672.                                    <p class="font-medium text-gray-700">Gold (1 Tola)</p>
  1673.                                    <p class="text-xs text-gray-500">24K</p>
  1674.                                </div>
  1675.                            </div>
  1676.                            <div class="text-right">
  1677.                                <p class="font-semibold text-gray-900">Nrs. 1,95,000</p>
  1678.                                <p class="text-xs text-green-600">+1,000</p>
  1679.                            </div>
  1680.                        </div>
  1681.                        <div class="flex justify-between items-center pb-3 border-b border-gray-100">
  1682.                            <div class="flex items-center">
  1683.                                <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mr-3">
  1684.                                    <i data-lucide="circle" class="w-5 h-5 text-gray-400"></i>
  1685.                                </div>
  1686.                                <div>
  1687.                                    <p class="font-medium text-gray-700">Silver (1 Tola)</p>
  1688.                                    <p class="text-xs text-gray-500">Standard</p>
  1689.                                </div>
  1690.                            </div>
  1691.                            <div class="text-right">
  1692.                                <p class="font-semibold text-gray-900">Nrs. 2,500</p>
  1693.                                <p class="text-xs text-red-600">-50</p>
  1694.                            </div>
  1695.                        </div>
  1696.                        <div class="flex justify-between items-center">
  1697.                            <div class="flex items-center">
  1698.                                <div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center mr-3">
  1699.                                    <i data-lucide="circle" class="w-5 h-5 text-orange-500"></i>
  1700.                                </div>
  1701.                                <div>
  1702.                                    <p class="font-medium text-gray-700">Gold (1 Gram)</p>
  1703.                                    <p class="text-xs text-gray-500">24K</p>
  1704.                                </div>
  1705.                            </div>
  1706.                            <div class="text-right">
  1707.                                <p class="font-semibold text-gray-900">Nrs. 5,260</p>
  1708.                                <p class="text-xs text-green-600">+30</p>
  1709.                            </div>
  1710.                        </div>
  1711.                        <a href="/gold-silver-rates" class="text-center text-sm font-semibold text-blue-600 hover:text-blue-800 mt-4 pt-3 border-t border-gray-100 block">View Detailed Rates →</a>
  1712.                    </div>
  1713.                </div>
  1714.            </section>
  1715.  
  1716.            <!-- For You Section -->
  1717.            <section class="mb-8">
  1718.                <div class="bg-white rounded-xl shadow-sm p-6">
  1719.                    <div class="flex justify-between items-center mb-6">
  1720.                        <h2 class="text-xl font-semibold">For You</h2>
  1721.                        <a href="/for-you" class="text-sm font-medium text-blue-600 hover:text-blue-800">See More →</a>
  1722.                    </div>
  1723.                    
  1724.                    <!-- Posts Container -->
  1725.                    <div id="for-you-posts" class="space-y-4">
  1726.                                                <article class="group flex flex-row h-48 rounded-xl overflow-hidden transition-all duration-300 border-b border-gray-100 pb-4">
  1727.                            <a href="https://scriling.com/news/youth-protest-against-internet-restrictions-in-nepal/" class="block w-12/35 flex-shrink-0">
  1728.                                                                    <img width="300" height="182" src="https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-300x182.png" class="w-full h-full object-cover wp-post-image" alt="Nirivdefault" decoding="async" srcset="https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-300x182.png 300w, https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-1024x621.png 1024w, https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-768x466.png 768w, https://scriling.com/wp-content/uploads/2025/09/Nirivdefault.png 1200w" sizes="(max-width: 300px) 100vw, 300px" />                                                            </a>
  1729.                            
  1730.                            <div class="p-4 flex-1 flex flex-col">
  1731.                                                                    <div class="mb-2">
  1732.                                        <a href="https://scriling.com/content/national/society/" class="inline-block px-2 py-1 text-xs font-medium text-blue-600 bg-blue-50 rounded-full hover:bg-blue-100">
  1733.                                            Society                                        </a>
  1734.                                    </div>
  1735.                                                                
  1736.                                <h3 class="text-lg font-semibold text-gray-900 mb-2 line-clamp-1 leading-tight">
  1737.                                    <a href="https://scriling.com/news/youth-protest-against-internet-restrictions-in-nepal/" class="hover:text-blue-600 transition-colors">
  1738.                                        Youth protest against internet restrictions in Nepal                                    </a>
  1739.                                </h3>
  1740.                                
  1741.                                <div class="text-sm text-gray-600 mb-3 line-clamp-2">
  1742.                                    Dozens of young activists rallied outside the Nepal Telecommunications Authority office in Kathmandu to oppose new proposals on internet regulation. Protesters said the rules would increase surveillance, limit online expression, and harm young creators who rely on digital platforms. The protest was organized largely through social media, with hashtags like #SaveTheInternet trending among Nepali youth....                                </div>
  1743.                                
  1744.                                <!-- Post metadata removed -->
  1745.                            </div>
  1746.                        </article>
  1747.                                                <article class="group flex flex-row h-48 rounded-xl overflow-hidden transition-all duration-300 border-b border-gray-100 pb-4">
  1748.                            <a href="https://scriling.com/news/students-protest-rising-tuition-fees-in-nepali-colleges/" class="block w-12/35 flex-shrink-0">
  1749.                                                                    <img width="300" height="182" src="https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-300x182.png" class="w-full h-full object-cover wp-post-image" alt="Nirivdefault" decoding="async" srcset="https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-300x182.png 300w, https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-1024x621.png 1024w, https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-768x466.png 768w, https://scriling.com/wp-content/uploads/2025/09/Nirivdefault.png 1200w" sizes="(max-width: 300px) 100vw, 300px" />                                                            </a>
  1750.                            
  1751.                            <div class="p-4 flex-1 flex flex-col">
  1752.                                                                    <div class="mb-2">
  1753.                                        <a href="https://scriling.com/content/national/society/" class="inline-block px-2 py-1 text-xs font-medium text-blue-600 bg-blue-50 rounded-full hover:bg-blue-100">
  1754.                                            Society                                        </a>
  1755.                                    </div>
  1756.                                                                
  1757.                                <h3 class="text-lg font-semibold text-gray-900 mb-2 line-clamp-1 leading-tight">
  1758.                                    <a href="https://scriling.com/news/students-protest-rising-tuition-fees-in-nepali-colleges/" class="hover:text-blue-600 transition-colors">
  1759.                                        Students protest rising tuition fees in Nepali colleges                                    </a>
  1760.                                </h3>
  1761.                                
  1762.                                <div class="text-sm text-gray-600 mb-3 line-clamp-2">
  1763.                                    Gen Z students staged a coordinated walkout in several colleges in Kathmandu Valley to protest rising tuition and admission fees. Many held banners demanding affordable education and saying that higher costs are forcing young people from low-income families out of classrooms. The protest, which started at Tribhuvan University, spread to private institutions where students say...                                </div>
  1764.                                
  1765.                                <!-- Post metadata removed -->
  1766.                            </div>
  1767.                        </article>
  1768.                                                <article class="group flex flex-row h-48 rounded-xl overflow-hidden transition-all duration-300 border-b border-gray-100 pb-4">
  1769.                            <a href="https://scriling.com/news/gen-z-takes-to-the-streets-in-kathmandu-demanding-climate-action/" class="block w-12/35 flex-shrink-0">
  1770.                                                                    <img width="300" height="182" src="https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-300x182.png" class="w-full h-full object-cover wp-post-image" alt="Nirivdefault" decoding="async" srcset="https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-300x182.png 300w, https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-1024x621.png 1024w, https://scriling.com/wp-content/uploads/2025/09/Nirivdefault-768x466.png 768w, https://scriling.com/wp-content/uploads/2025/09/Nirivdefault.png 1200w" sizes="(max-width: 300px) 100vw, 300px" />                                                            </a>
  1771.                            
  1772.                            <div class="p-4 flex-1 flex flex-col">
  1773.                                                                    <div class="mb-2">
  1774.                                        <a href="https://scriling.com/content/national/society/" class="inline-block px-2 py-1 text-xs font-medium text-blue-600 bg-blue-50 rounded-full hover:bg-blue-100">
  1775.                                            Society                                        </a>
  1776.                                    </div>
  1777.                                                                
  1778.                                <h3 class="text-lg font-semibold text-gray-900 mb-2 line-clamp-1 leading-tight">
  1779.                                    <a href="https://scriling.com/news/gen-z-takes-to-the-streets-in-kathmandu-demanding-climate-action/" class="hover:text-blue-600 transition-colors">
  1780.                                        Gen Z takes to the streets in Kathmandu demanding climate action                                    </a>
  1781.                                </h3>
  1782.                                
  1783.                                <div class="text-sm text-gray-600 mb-3 line-clamp-2">
  1784.                                    Hundreds of young people, mostly from Gen Z, gathered in Kathmandu on Saturday calling for stronger climate policies. Carrying placards that read “Act Now” and “Save Our Future,” the protesters said Nepal’s leaders were not doing enough to fight pollution and protect natural resources The march moved from Maitighar Mandala to New Baneshwor, a symbolic...                                </div>
  1785.                                
  1786.                                <!-- Post metadata removed -->
  1787.                            </div>
  1788.                        </article>
  1789.                                                <article class="group flex flex-row h-48 rounded-xl overflow-hidden transition-all duration-300 border-b border-gray-100 pb-4">
  1790.                            <a href="https://scriling.com/news/deserunt-ut-delectus-in/" class="block w-12/35 flex-shrink-0">
  1791.                                                                    <img width="300" height="182" src="https://scriling.com/wp-content/uploads/2025/09/ade56d26-d1d2-3dee-9b35-adf64cbb1acd-300x182.jpg" class="w-full h-full object-cover wp-post-image" alt="" decoding="async" srcset="https://scriling.com/wp-content/uploads/2025/09/ade56d26-d1d2-3dee-9b35-adf64cbb1acd-300x182.jpg 300w, https://scriling.com/wp-content/uploads/2025/09/ade56d26-d1d2-3dee-9b35-adf64cbb1acd-1024x621.jpg 1024w, https://scriling.com/wp-content/uploads/2025/09/ade56d26-d1d2-3dee-9b35-adf64cbb1acd-768x466.jpg 768w, https://scriling.com/wp-content/uploads/2025/09/ade56d26-d1d2-3dee-9b35-adf64cbb1acd.jpg 1200w" sizes="(max-width: 300px) 100vw, 300px" />                                                            </a>
  1792.                            
  1793.                            <div class="p-4 flex-1 flex flex-col">
  1794.                                                                    <div class="mb-2">
  1795.                                        <a href="https://scriling.com/content/quia/" class="inline-block px-2 py-1 text-xs font-medium text-blue-600 bg-blue-50 rounded-full hover:bg-blue-100">
  1796.                                            quia                                        </a>
  1797.                                    </div>
  1798.                                                                
  1799.                                <h3 class="text-lg font-semibold text-gray-900 mb-2 line-clamp-1 leading-tight">
  1800.                                    <a href="https://scriling.com/news/deserunt-ut-delectus-in/" class="hover:text-blue-600 transition-colors">
  1801.                                        Deserunt ut delectus in                                    </a>
  1802.                                </h3>
  1803.                                
  1804.                                <div class="text-sm text-gray-600 mb-3 line-clamp-2">
  1805.                                    Eos facere sequi eveniet. Dignissimos deserunt delectus sapiente odit tempore accusamus. Quam magni et dignissimos quia qui iusto                                </div>
  1806.                                
  1807.                                <!-- Post metadata removed -->
  1808.                            </div>
  1809.                        </article>
  1810.                                                <article class="group flex flex-row h-48 rounded-xl overflow-hidden transition-all duration-300 border-b border-gray-100 pb-4">
  1811.                            <a href="https://scriling.com/news/modi-et-exercitationem-consequatur/" class="block w-12/35 flex-shrink-0">
  1812.                                                                    <div class="w-full h-full bg-gradient-to-br from-blue-50 to-gray-100 flex items-center justify-center">
  1813.                                        <i data-lucide="newspaper" class="w-10 h-10 text-gray-300"></i>
  1814.                                    </div>
  1815.                                                            </a>
  1816.                            
  1817.                            <div class="p-4 flex-1 flex flex-col">
  1818.                                                                    <div class="mb-2">
  1819.                                        <a href="https://scriling.com/content/at/" class="inline-block px-2 py-1 text-xs font-medium text-blue-600 bg-blue-50 rounded-full hover:bg-blue-100">
  1820.                                            at                                        </a>
  1821.                                    </div>
  1822.                                                                
  1823.                                <h3 class="text-lg font-semibold text-gray-900 mb-2 line-clamp-1 leading-tight">
  1824.                                    <a href="https://scriling.com/news/modi-et-exercitationem-consequatur/" class="hover:text-blue-600 transition-colors">
  1825.                                        Modi et exercitationem consequatur                                    </a>
  1826.                                </h3>
  1827.                                
  1828.                                <div class="text-sm text-gray-600 mb-3 line-clamp-2">
  1829.                                    Consectetur facere quis deserunt necessitatibus doloremque. Fugit aut dolores ut quas. Repellendus dolor eos sequi odit. Autem sint et excepturi itaque aperiam provident sed consequuntur. Repudiandae sint non quis quis sint explicabo maxime id Optio perferendis magnam minima et aut                                </div>
  1830.                                
  1831.                                <!-- Post metadata removed -->
  1832.                            </div>
  1833.                        </article>
  1834.                                                <article class="group flex flex-row h-48 rounded-xl overflow-hidden transition-all duration-300 border-b border-gray-100 pb-4">
  1835.                            <a href="https://scriling.com/news/voluptatum-nemo-ea-numquam/" class="block w-12/35 flex-shrink-0">
  1836.                                                                    <div class="w-full h-full bg-gradient-to-br from-blue-50 to-gray-100 flex items-center justify-center">
  1837.                                        <i data-lucide="newspaper" class="w-10 h-10 text-gray-300"></i>
  1838.                                    </div>
  1839.                                                            </a>
  1840.                            
  1841.                            <div class="p-4 flex-1 flex flex-col">
  1842.                                                                    <div class="mb-2">
  1843.                                        <a href="https://scriling.com/content/at/" class="inline-block px-2 py-1 text-xs font-medium text-blue-600 bg-blue-50 rounded-full hover:bg-blue-100">
  1844.                                            at                                        </a>
  1845.                                    </div>
  1846.                                                                
  1847.                                <h3 class="text-lg font-semibold text-gray-900 mb-2 line-clamp-1 leading-tight">
  1848.                                    <a href="https://scriling.com/news/voluptatum-nemo-ea-numquam/" class="hover:text-blue-600 transition-colors">
  1849.                                        Voluptatum nemo ea numquam                                    </a>
  1850.                                </h3>
  1851.                                
  1852.                                <div class="text-sm text-gray-600 mb-3 line-clamp-2">
  1853.                                    Eum reprehenderit ipsa iste. Nihil et magnam qui sed fugiat. repellat veniam ea error voluptas. Error repellendus velit accusamus et in aliquam harum. est perferendis nulla quam. Voluptate natus Enim vel fugit porro id deleniti Aut reiciendis commodi voluptas inventore. Quos nemo illum sit aut ea vero. neque numquam necessitatibus enim culpa Sit impedit aspernatur...                                </div>
  1854.                                
  1855.                                <!-- Post metadata removed -->
  1856.                            </div>
  1857.                        </article>
  1858.                                            </div>
  1859.                    
  1860.                    <!-- Load More Button -->
  1861.                    <div id="load-more-container" class="mt-8 text-center col-span-1 md:col-span-2">
  1862.                        <button id="load-more-posts" class="px-8 py-3 bg-white text-blue-600 rounded-full hover:bg-blue-50 transition-colors text-sm font-medium border border-blue-200 hover:border-blue-300 shadow-sm">
  1863.                            Load More Articles
  1864.                        </button>
  1865.                        <div id="loading-indicator" class="hidden mt-6">
  1866.                            <div class="inline-flex items-center justify-center space-x-2">
  1867.                                <div class="animate-spin rounded-full h-5 w-5 border-2 border-blue-600 border-t-transparent"></div>
  1868.                                <span class="text-gray-600">Loading more articles...</span>
  1869.                            </div>
  1870.                        </div>
  1871.                    </div>
  1872.                </div>
  1873.            </section>
  1874.            
  1875.            <script>
  1876.            document.addEventListener('DOMContentLoaded', function() {
  1877.                let page = 1;
  1878.                const postsContainer = document.getElementById('for-you-posts');
  1879.                const loadMoreBtn = document.getElementById('load-more-posts');
  1880.                const loadingIndicator = document.getElementById('loading-indicator');
  1881.                let isLoading = false;
  1882.                
  1883.                // Function to load more posts
  1884.                async function loadMorePosts() {
  1885.                    if (isLoading) return;
  1886.                    
  1887.                    isLoading = true;
  1888.                    loadMoreBtn.classList.add('hidden');
  1889.                    loadingIndicator.classList.remove('hidden');
  1890.                    
  1891.                    try {
  1892.                        page++;
  1893.                        const response = await fetch(`/wp-json/wp/v2/posts?page=${page}&per_page=5&_embed`);
  1894.                        
  1895.                        if (!response.ok) {
  1896.                            throw new Error('Failed to load posts');
  1897.                        }
  1898.                        
  1899.                        const posts = await response.json();
  1900.                        
  1901.                        if (posts.length === 0) {
  1902.                            loadMoreBtn.remove();
  1903.                            return;
  1904.                        }
  1905.                        
  1906.                        // Process and append new posts
  1907.                        posts.forEach(post => {
  1908.                            const featuredImage = post._embedded?.['wp:featuredmedia']?.[0]?.source_url || '';
  1909.                            const category = post._embedded?.['wp:term']?.[0]?.[0] || {};
  1910.                            const timeAgo = getTimeAgo(new Date(post.date_gmt + 'Z'));
  1911.                            
  1912.                            const postElement = document.createElement('article');
  1913.                            postElement.className = 'group flex gap-4 items-center hover:bg-gray-50 p-3 rounded-lg transition-colors for-you-post';
  1914.                            postElement.innerHTML = `
  1915.                                ${featuredImage ? `
  1916.                                <div class="w-20 h-16 flex-shrink-0">
  1917.                                    <img src="${featuredImage}" alt="${post.title.rendered}" class="w-full h-full object-cover rounded-md">
  1918.                                </div>
  1919.                                ` : `
  1920.                                <div class="w-20 h-16 flex-shrink-0 bg-gray-100 rounded-md flex items-center justify-center">
  1921.                                    <i data-lucide="newspaper" class="w-6 h-6 text-gray-400"></i>
  1922.                                </div>
  1923.                                `}
  1924.                                <div class="flex-1 min-w-0">
  1925.                                    <h3 class="text-sm font-medium text-gray-800 group-hover:text-blue-600 line-clamp-2">
  1926.                                        <a href="${post.link}">${post.title.rendered}</a>
  1927.                                    </h3>
  1928.                                    <div class="flex items-center gap-2 mt-1">
  1929.                                        ${category.name ? `
  1930.                                        <a href="${category.link || '#'}" class="text-xs font-medium text-blue-600 hover:underline">
  1931.                                            ${category.name}
  1932.                                        </a>
  1933.                                        <span class="text-gray-300">•</span>
  1934.                                        ` : ''}
  1935.                                        <span class="text-xs text-gray-500">${timeAgo} ago</span>
  1936.                                    </div>
  1937.                                </div>
  1938.                            `;
  1939.                            
  1940.                            postsContainer.appendChild(postElement);
  1941.                        });
  1942.                        
  1943.                        // Reinitialize Lucide icons for new content
  1944.                        if (window.lucide) {
  1945.                            window.lucide.createIcons();
  1946.                        }
  1947.                        
  1948.                        // Show load more button if there might be more posts
  1949.                        if (posts.length < 5) {
  1950.                            loadMoreBtn.remove();
  1951.                        } else {
  1952.                            loadMoreBtn.classList.remove('hidden');
  1953.                        }
  1954.                        
  1955.                    } catch (error) {
  1956.                        console.error('Error loading posts:', error);
  1957.                        const errorElement = document.createElement('p');
  1958.                        errorElement.className = 'text-red-500 text-center py-2';
  1959.                        errorElement.textContent = 'Failed to load more posts. Please try again.';
  1960.                        postsContainer.appendChild(errorElement);
  1961.                    } finally {
  1962.                        isLoading = false;
  1963.                        loadingIndicator.classList.add('hidden');
  1964.                    }
  1965.                }
  1966.                
  1967.                // Helper function to format time ago
  1968.                function getTimeAgo(date) {
  1969.                    const seconds = Math.floor((new Date() - date) / 1000);
  1970.                    
  1971.                    let interval = Math.floor(seconds / 31536000);
  1972.                    if (interval >= 1) return interval + ' year' + (interval === 1 ? '' : 's');
  1973.                    
  1974.                    interval = Math.floor(seconds / 2592000);
  1975.                    if (interval >= 1) return interval + ' month' + (interval === 1 ? '' : 's');
  1976.                    
  1977.                    interval = Math.floor(seconds / 86400);
  1978.                    if (interval >= 1) return interval + ' day' + (interval === 1 ? '' : 's');
  1979.                    
  1980.                    interval = Math.floor(seconds / 3600);
  1981.                    if (interval >= 1) return interval + ' hour' + (interval === 1 ? '' : 's');
  1982.                    
  1983.                    interval = Math.floor(seconds / 60);
  1984.                    if (interval >= 1) return interval + ' minute' + (interval === 1 ? '' : 's');
  1985.                    
  1986.                    return 'just now';
  1987.                }
  1988.                
  1989.                // Event listeners
  1990.                if (loadMoreBtn) {
  1991.                    loadMoreBtn.addEventListener('click', loadMorePosts);
  1992.                }
  1993.                
  1994.                // Infinite scroll
  1995.                let ticking = false;
  1996.                window.addEventListener('scroll', function() {
  1997.                    if (ticking) return;
  1998.                    
  1999.                    ticking = true;
  2000.                    
  2001.                    window.requestAnimationFrame(function() {
  2002.                        const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
  2003.                        const scrollThreshold = 300; // pixels from bottom
  2004.                        
  2005.                        if (scrollTop + clientHeight >= scrollHeight - scrollThreshold && !isLoading) {
  2006.                            loadMorePosts();
  2007.                        }
  2008.                        
  2009.                        ticking = false;
  2010.                    });
  2011.                });
  2012.            });
  2013.            </script>
  2014.  
  2015.                </div>
  2016.  
  2017.                <!-- Right Sidebar - Weather Info -->
  2018.                <div class="col-span-1 lg:col-span-1">
  2019.                            <!-- Weather Widget -->
  2020.                            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-4 mb-6">
  2021.                                <div class="flex items-center justify-between mb-4">
  2022.                                    <h3 class="font-semibold text-gray-800">Weather Info</h3>
  2023.                                    <button class="text-blue-600 hover:text-blue-700 transition-colors">
  2024.                                        <i data-lucide="settings" class="w-4 h-4"></i>
  2025.                                    </button>
  2026.                                </div>
  2027.                                <div class="space-y-3">
  2028.                                    <div class="flex items-center gap-3">
  2029.                                        <i data-lucide="sun" class="w-5 h-5 text-yellow-500"></i>
  2030.                                        <div>
  2031.                                            <div class="font-medium text-gray-800">Kathmandu</div>
  2032.                                            <div class="text-sm text-gray-600">24°C, Sunny</div>
  2033.                                        </div>
  2034.                                    </div>
  2035.                                    <div class="flex items-center gap-3">
  2036.                                        <i data-lucide="droplets" class="w-5 h-5 text-blue-500"></i>
  2037.                                        <div>
  2038.                                            <div class="text-sm text-gray-700">Humidity: 65%</div>
  2039.                                        </div>
  2040.                                    </div>
  2041.                                    <div class="flex items-center gap-3">
  2042.                                        <i data-lucide="wind" class="w-5 h-5 text-gray-500"></i>
  2043.                                        <div>
  2044.                                            <div class="text-sm text-gray-700">Wind: 12 km/h</div>
  2045.                                        </div>
  2046.                                    </div>
  2047.                                </div>
  2048.                            </div>
  2049.                            
  2050.                            <!-- Location Selector -->
  2051.                            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-4 mb-6">
  2052.                                <div class="flex items-center justify-between mb-4">
  2053.                                    <h3 class="font-semibold text-gray-800">Set location</h3>
  2054.                                    <button class="text-blue-600 hover:text-blue-700 transition-colors">
  2055.                                        <i data-lucide="settings" class="w-4 h-4"></i>
  2056.                                    </button>
  2057.                                </div>
  2058.                                <div class="space-y-2">
  2059.                                    <div class="flex items-center gap-2 p-2 hover:bg-gray-50 rounded-lg cursor-pointer transition-colors">
  2060.                                        <div class="w-2 h-2 bg-blue-600 rounded-full"></div>
  2061.                                        <span class="text-sm text-gray-700">Set automatically</span>
  2062.                                    </div>
  2063.                                    <p class="text-xs text-gray-500 px-4">The weather in your area is not available. Please correct your location.</p>
  2064.                                </div>
  2065.                            </div>
  2066.                            <!-- Useful Tools Section -->
  2067.                            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-4 mb-6">
  2068.                                <div class="flex items-center justify-between mb-4">
  2069.                                    <h3 class="font-semibold text-gray-800">Useful Tools</h3>
  2070.                                    <span class="text-xs text-gray-500">Essential productivity tools</span>
  2071.                                </div>
  2072.                                <div class="space-y-2">
  2073.                                    <a href="/tools/preeti-converter" class="flex items-center gap-2 p-2 hover:bg-gray-50 rounded-lg transition-colors">
  2074.                                        <i data-lucide="type" class="w-4 h-4 text-blue-600"></i>
  2075.                                        <span class="text-sm text-gray-700">Preeti Converter</span>
  2076.                                    </a>
  2077.                                    <a href="/tools/panchang" class="flex items-center gap-2 p-2 hover:bg-gray-50 rounded-lg transition-colors">
  2078.                                        <i data-lucide="calendar" class="w-4 h-4 text-amber-600"></i>
  2079.                                        <span class="text-sm text-gray-700">Panchang</span>
  2080.                                    </a>
  2081.                                    <a href="/tools/text-to-speech" class="flex items-center gap-2 p-2 hover:bg-gray-50 rounded-lg transition-colors">
  2082.                                        <i data-lucide="volume-2" class="w-4 h-4 text-green-600"></i>
  2083.                                        <span class="text-sm text-gray-700">Text to Speech</span>
  2084.                                    </a>
  2085.                                    <a href="/tools/word-counter" class="flex items-center gap-2 p-2 hover:bg-gray-50 rounded-lg transition-colors">
  2086.                                        <i data-lucide="file-text" class="w-4 h-4 text-purple-600"></i>
  2087.                                        <span class="text-sm text-gray-700">Word Counter</span>
  2088.                                    </a>
  2089.                                    <a href="/tools/nepali-keyboard" class="flex items-center gap-2 p-2 hover:bg-gray-50 rounded-lg transition-colors">
  2090.                                        <i data-lucide="keyboard" class="w-4 h-4 text-red-600"></i>
  2091.                                        <span class="text-sm text-gray-700">Nepali Keyboard</span>
  2092.                                    </a>
  2093.                                    <a href="/tools/pdf-tools" class="flex items-center gap-2 p-2 hover:bg-gray-50 rounded-lg transition-colors">
  2094.                                        <i data-lucide="file-text" class="w-4 h-4 text-indigo-600"></i>
  2095.                                        <span class="text-sm text-gray-700">PDF Tools</span>
  2096.                                    </a>
  2097.                                    <a href="/tools/age-calculator" class="flex items-center gap-2 p-2 hover:bg-gray-50 rounded-lg transition-colors">
  2098.                                        <i data-lucide="calculator" class="w-4 h-4 text-teal-600"></i>
  2099.                                        <span class="text-sm text-gray-700">Age Calculator</span>
  2100.                                    </a>
  2101.                                    <a href="/tools/spell-checker" class="flex items-center gap-2 p-2 hover:bg-gray-50 rounded-lg transition-colors">
  2102.                                        <i data-lucide="spell-check-2" class="w-4 h-4 text-pink-600"></i>
  2103.                                        <span class="text-sm text-gray-700">Spell Checker</span>
  2104.                                    </a>
  2105.                                </div>
  2106.                            </div>
  2107.  
  2108.                            <!-- Sticky Container for Sidebar Widgets -->
  2109.                            <div class="sticky top-6 space-y-6">
  2110.                                <!-- Premium Banner -->
  2111.                                <div class="bg-gradient-to-r from-indigo-600 via-purple-600 to-blue-600 rounded-2xl p-5 relative overflow-hidden">
  2112.                                    <div class="absolute top-0 right-0 w-24 h-24 bg-white bg-opacity-10 rounded-full transform translate-x-12 -translate-y-12"></div>
  2113.                                    <div class="absolute bottom-0 left-0 w-20 h-20 bg-white bg-opacity-10 rounded-full transform -translate-x-10 translate-y-10"></div>
  2114.                                    <div class="relative z-10">
  2115.                                        <div class="flex items-center mb-2">
  2116.                                            <div class="bg-yellow-400 text-black px-2 py-0.5 rounded-2xl text-xs font-bold mr-2">PREMIUM</div>
  2117.                                            <span class="text-yellow-300 font-semibold text-sm">Special Offer</span>
  2118.                                        </div>
  2119.                                        <h3 class="text-lg font-bold text-white mb-1">Subscribe to Premium</h3>
  2120.                                        <p class="text-blue-100 text-xs mb-3">Get exclusive features, ad-free experience, and special discounts.</p>
  2121.                                        <div class="flex items-end justify-between">
  2122.                                            <div>
  2123.                                                <div class="text-xl font-bold text-white">NPR 299</div>
  2124.                                                <div class="text-xs text-blue-100 line-through">NPR 499/month</div>
  2125.                                            </div>
  2126.                                            <button class="bg-white text-indigo-600 font-semibold text-sm py-2 px-4 rounded-xl hover:bg-gray-100 transition-colors">
  2127.                                                Subscribe Now
  2128.                                            </button>
  2129.                                        </div>
  2130.                                    </div>
  2131.                                </div>
  2132.  
  2133.                                <!-- Forex Widget -->
  2134.                                <div class="bg-white rounded-2xl widget-shadow flex flex-col overflow-hidden">
  2135.                                    <div class="bg-linear-to-r from-green-500 to-emerald-600 text-white p-4 rounded-t-2xl">
  2136.                                        <h3 class="font-bold text-lg flex items-center"><i data-lucide="trending-up" class="w-5 h-5 mr-2"></i>Forex Rates</h3>
  2137.                                        <p class="text-xs text-green-100 mt-1">Latest currency exchange rates in NPR</p>
  2138.                                    </div>
  2139.                                    <div class="p-5 space-y-3 text-sm flex-1">
  2140.                                                                                    <div class="flex justify-between items-center border-b border-gray-100 pb-2">
  2141.                                                <span class="font-medium text-gray-600">🇮🇳 INR</span>
  2142.                                                <span class="font-semibold">Nrs. 160.00</span>
  2143.                                            </div>
  2144.                                                                                        <div class="flex justify-between items-center border-b border-gray-100 pb-2">
  2145.                                                <span class="font-medium text-gray-600">🇺🇸 USD</span>
  2146.                                                <span class="font-semibold">Nrs. 141.76</span>
  2147.                                            </div>
  2148.                                                                                        <div class="flex justify-between items-center border-b border-gray-100 pb-2">
  2149.                                                <span class="font-medium text-gray-600">🇪🇺 EUR</span>
  2150.                                                <span class="font-semibold">Nrs. 165.49</span>
  2151.                                            </div>
  2152.                                                                                        <div class="flex justify-between items-center border-b border-gray-100 pb-2">
  2153.                                                <span class="font-medium text-gray-600">🇬🇧 GBP</span>
  2154.                                                <span class="font-semibold">Nrs. 190.36</span>
  2155.                                            </div>
  2156.                                                                                    <a href="/forex" class="text-center text-sm font-semibold text-blue-600 hover:text-blue-800 mt-4 pt-3 border-t border-gray-100 block">View All Exchange Rates →</a>
  2157.                                    </div>
  2158.                                </div>
  2159.  
  2160.                                <!-- On This Day Widget -->
  2161.                                <div class="bg-white rounded-2xl widget-shadow flex flex-col overflow-hidden">
  2162.                                    <div class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white p-4">
  2163.                                        <h3 class="font-bold text-lg flex items-center"><i data-lucide="calendar" class="w-5 h-5 mr-2"></i>On This Day</h3>
  2164.                                        <p class="text-xs text-indigo-100 mt-1">Historical events and facts</p>
  2165.                                    </div>
  2166.                                    <div class="p-4">
  2167.                                        <p class="text-sm text-gray-600">In 1953, Tenzing Norgay and Edmund Hillary became the first to reach the summit of Mount Everest.</p>
  2168.                                    <a href="#" class="mt-3 pt-2 border-t border-gray-100 block text-center text-xs font-semibold text-blue-600 hover:text-blue-800 transition-colors">Learn More History</a>
  2169.                                </div>
  2170.                            </div>
  2171.  
  2172.                            <!-- Daily Horoscope Widget -->
  2173.                            <div class="bg-white rounded-2xl widget-shadow flex flex-col overflow-hidden mb-6">
  2174.                                <div class="bg-gradient-to-r from-purple-500 to-violet-600 text-white p-4">
  2175.                                    <h3 class="font-bold text-lg flex items-center"><i data-lucide="star" class="w-5 h-5 mr-2"></i>Daily Horoscope</h3>
  2176.                                    <p class="text-xs text-purple-100 mt-1">Astrological insights for today</p>
  2177.                                </div>
  2178.                                <div class="p-4">
  2179.                                    <div class="bg-yellow-50 rounded-xl p-4 text-center"><p class="text-sm text-yellow-800">No horoscopes found for today.</p><p class="text-xs text-yellow-700 mt-1">Please check back later or view previous horoscopes.</p><a href="https://scriling.com/horoscope" class="mt-2 inline-block text-xs font-medium text-white bg-purple-600 hover:bg-purple-700 py-1.5 px-3 rounded-full transition-colors">View All Horoscopes</a></div>                                </div>
  2180.                            </div>
  2181.  
  2182.                            <!-- Daily Inspiration Widget -->
  2183.                            <div class="bg-white rounded-2xl widget-shadow flex flex-col h-full overflow-hidden mb-6">
  2184.                                <div class="bg-gradient-to-r from-pink-500 to-rose-600 text-white p-4 rounded-t-lg">
  2185.                                    <h3 class="font-bold text-lg flex items-center"><i data-lucide="quote" class="w-5 h-5 mr-2"></i>Daily Inspiration</h3>
  2186.                                    <p class="text-xs text-pink-100 mt-1">Words to motivate your day</p>
  2187.                                </div>
  2188.                                <div class="p-5 grow flex flex-col justify-center text-center py-4">
  2189.                                                                        <div class="bg-gradient-to-br from-pink-50 to-rose-50 rounded-xl p-4 mb-4 border border-pink-100">
  2190.                                        <p id="quote-text" class="text-sm font-medium italic text-gray-800 mb-2">Innovation distinguishes between a leader and a follower.</p>
  2191.                                        <p id="quote-author" class="text-xs font-semibold text-pink-600">- Steve Jobs</p>
  2192.                                    </div>
  2193.                                    <button onclick="refreshQuote()" class="text-xs font-medium text-pink-600 bg-white hover:bg-pink-50 py-2 px-4 rounded-full transition-colors self-center border border-pink-200">
  2194.                                        New Quote
  2195.                                    </button>
  2196.                                </div>
  2197.                            </div>
  2198.  
  2199.                            <script>
  2200.                            // JavaScript for refreshing quotes
  2201.                            const quotes = [{"text":"The only way to do great work is to love what you do.","author":"Steve Jobs"},{"text":"Innovation distinguishes between a leader and a follower.","author":"Steve Jobs"},{"text":"Life is what happens to you while you're busy making other plans.","author":"John Lennon"},{"text":"The future belongs to those who believe in the beauty of their dreams.","author":"Eleanor Roosevelt"},{"text":"It is during our darkest moments that we must focus to see the light.","author":"Aristotle"},{"text":"Success is not final, failure is not fatal: it is the courage to continue that counts.","author":"Winston Churchill"},{"text":"The way to get started is to quit talking and begin doing.","author":"Walt Disney"},{"text":"Don't let yesterday take up too much of today.","author":"Will Rogers"},{"text":"You learn more from failure than from success.","author":"Unknown"},{"text":"If you are working on something that you really care about, you don't have to be pushed.","author":"Steve Jobs"}];
  2202.  
  2203.                            function refreshQuote() {
  2204.                                const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
  2205.                                document.getElementById('quote-text').textContent = randomQuote.text;
  2206.                                document.getElementById('quote-author').textContent = '- ' + randomQuote.author;
  2207.                            }
  2208.                            </script>
  2209.                        </div>
  2210.                    </div>
  2211.                </section>
  2212.  
  2213.                
  2214.  
  2215.                </section>
  2216.  
  2217.              
  2218.                <!-- 3-Column Market Widgets Section - Widgets will be moved to their new locations -->
  2219.                
  2220.  
  2221.  
  2222.  
  2223.                
  2224.                
  2225.  
  2226.                
  2227.  
  2228.                
  2229.                
  2230.                
  2231.              
  2232.                
  2233.  
  2234.                
  2235.                
  2236.                
  2237.  
  2238.  
  2239.  
  2240.  
  2241.  
  2242.            <!-- Premium Banner has been moved to the right sidebar -->
  2243.  
  2244.        </main>
  2245.    </div>
  2246.  
  2247.  
  2248.  
  2249.  
  2250.  
  2251.  
  2252.  
  2253.  
  2254. <!-- TMDB API Configuration -->
  2255. <script>
  2256.    window.nirivTmdbApiKey = '96e9b7d7d9fb5d4eb2d261ca5a68e10e';
  2257.    
  2258.    // Menu toggle functionality
  2259.    document.addEventListener('DOMContentLoaded', function() {
  2260.        // Get all menu toggle buttons
  2261.        const menuToggleBtns = document.querySelectorAll('.menu-toggle-btn');
  2262.        const sidebar = document.getElementById('sidebar');
  2263.        const sidebarOverlay = document.getElementById('sidebar-overlay');
  2264.        
  2265.        // Function to open sidebar
  2266.        function openSidebar() {
  2267.            sidebar.classList.remove('-translate-x-full', 'opacity-0');
  2268.            sidebar.classList.add('translate-x-0', 'opacity-100');
  2269.            sidebarOverlay.classList.remove('hidden');
  2270.            document.body.style.overflow = 'hidden';
  2271.            sidebar.removeAttribute('inert');
  2272.        }
  2273.        
  2274.        // Add click event to all menu toggle buttons
  2275.        menuToggleBtns.forEach(btn => {
  2276.            btn.addEventListener('click', function(e) {
  2277.                e.preventDefault();
  2278.                openSidebar();
  2279.            });
  2280.        });
  2281.    });
  2282. </script>
  2283.  
  2284. <!-- Load Upcoming Movies Script -->
  2285. <script src="https://scriling.com/wp-content/themes/Theme1/js/upcoming-movies.js" defer></script>
  2286. </main>
  2287.  
  2288.    <footer class="bg-white footer-brand-border w-full">
  2289.        <div class="w-full mx-auto py-12 px-2 sm:px-6" style="max-width: 1000px;">
  2290.            <div class="grid grid-cols-1 md:grid-cols-3 gap-10 items-start">
  2291.                <!-- Privacy Section -->
  2292.                <div class="text-center md:text-left">
  2293.                    <h3 class="text-sm font-semibold text-gray-900 mb-3 uppercase tracking-wider">Privacy First</h3>
  2294.                    <p class="text-sm text-gray-600 mb-3">Learn more about how to be private online.</p>
  2295.                    <a href="https://scriling.com/privacy" class="inline-flex items-center text-blue-600 font-medium hover:underline text-sm">
  2296.                        Visit our privacy blog                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  2297.                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
  2298.                        </svg>
  2299.                    </a>
  2300.                </div>
  2301.  
  2302.                <!-- Logo & Navigation -->
  2303.                <div class="flex flex-col items-center">
  2304.                    <a href="https://scriling.com/" class="mb-4">
  2305.                                                    <img src="https://scriling.com/wp-content/uploads/2025/09/Favicon.png" alt="Favicon" class="w-16 h-auto">
  2306.                                            </a>
  2307.                    <nav class="flex flex-wrap justify-center gap-x-6 gap-y-2 text-sm">
  2308.                        <a href="https://scriling.com/privacy" class="text-gray-600 hover:text-blue-600 transition-colors">Privacy Policy</a>
  2309.                        <a href="https://scriling.com/about" class="text-gray-600 hover:text-blue-600 transition-colors">About Us</a>
  2310.                        <a href="https://scriling.com/press" class="text-gray-600 hover:text-blue-600 transition-colors">Press</a>
  2311.                    </nav>
  2312.                </div>
  2313.  
  2314.                <!-- Social Media -->
  2315.                <div class="text-center md:text-right">
  2316.                    <h3 class="text-sm font-semibold text-gray-900 mb-4 uppercase tracking-wider">Connect With Us</h3>
  2317.                    <div class="flex justify-center md:justify-end space-x-3">
  2318.                        <a href="https://facebook.com/nirivhq" target="_blank" rel="noopener nofollow" class="w-10 h-10 bg-gray-50 hover:bg-blue-50 rounded-xl flex items-center justify-center text-gray-500 hover:text-blue-600 transition-all duration-200 transform hover:-translate-y-0.5 shadow-sm hover:shadow" aria-label="Facebook">
  2319.                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-facebook"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
  2320.                        </a>
  2321.                        <a href="https://www.instagram.com/nirivhq" target="_blank" rel="noopener nofollow" class="w-10 h-10 bg-gray-50 hover:bg-pink-50 rounded-xl flex items-center justify-center text-pink-500 hover:text-pink-600 transition-all duration-200 transform hover:-translate-y-0.5 shadow-sm hover:shadow" aria-label="Instagram">
  2322.                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-instagram"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
  2323.                        </a>
  2324.                        <a href="https://twitter.com/nirivhq" target="_blank" rel="noopener nofollow" class="w-10 h-10 bg-gray-50 hover:bg-blue-50 rounded-xl flex items-center justify-center text-blue-400 hover:text-blue-500 transition-all duration-200 transform hover:-translate-y-0.5 shadow-sm hover:shadow" aria-label="Twitter">
  2325.                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-twitter"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg>
  2326.                        </a>
  2327.                        <a href="https://www.linkedin.com/company/niriv" target="_blank" rel="noopener nofollow" class="w-10 h-10 bg-gray-50 hover:bg-blue-50 rounded-xl flex items-center justify-center text-blue-600 hover:text-blue-700 transition-all duration-200 transform hover:-translate-y-0.5 shadow-sm hover:shadow" aria-label="LinkedIn">
  2328.                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-linkedin"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
  2329.                        </a>
  2330.                    </div>
  2331.                </div>
  2332.            </div>
  2333.            
  2334.            <!-- Widgets Area -->
  2335.                        
  2336.            <!-- Copyright -->
  2337.            <div class="mt-8 pt-6 border-t border-gray-100">
  2338.                <p class="text-xs text-gray-500 text-center">&copy; 2025 Niriv. All rights reserved.</p>
  2339.            </div>
  2340.        </div>
  2341.    </footer>
  2342. </div>
  2343.  
  2344. <script type="speculationrules">
  2345. {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/Theme1\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
  2346. </script>
  2347.    <div id="niriv-comment-overlay" class="niriv-comment-overlay" aria-hidden="true" hidden>
  2348.        <div class="niriv-comment-modal" role="dialog" aria-modal="true" aria-labelledby="niriv-comment-modal-title">
  2349.            <div class="niriv-comment-modal__header">
  2350.                <div class="niriv-comment-modal__title">
  2351.                    <i data-lucide="message-circle" class="w-4 h-4"></i>
  2352.                    <h3 id="niriv-comment-modal-title">Comments</h3>
  2353.                </div>
  2354.                <button type="button" class="niriv-comment-modal__close" aria-label="Close">&times;</button>
  2355.            </div>
  2356.            <div class="niriv-comment-modal__body">
  2357.                <div id="niriv-comment-list"></div>
  2358.                <div id="niriv-comment-login-prompt" class="niriv-comment-login-prompt" hidden>
  2359.                    <div class="niriv-login-card">
  2360.                        <div class="niriv-login-text">Please log in to comment.</div>
  2361.                        <a id="niriv-login-btn" href="#" class="niriv-login-btn">Log in or Register</a>
  2362.                    </div>
  2363.                </div>
  2364.                <div id="niriv-comment-modal-content"></div>
  2365.                <div class="niriv-comment-modal__composer">
  2366.                    <form id="niriv-comment-composer" class="niriv-composer-form" action="#" method="post">
  2367.                        <div class="niriv-composer-inner">
  2368.                            <div class="niriv-composer-avatar"></div>
  2369.                            <button type="button" class="niriv-composer-emoji" aria-label="Emoji">😊</button>
  2370.                            <input type="text" id="niriv-composer-text" name="comment" placeholder="Post your comment" autocomplete="off" />
  2371.                            <button type="submit" class="niriv-composer-send" aria-label="Send">➤</button>
  2372.                            <div id="niriv-emoji-popover" class="niriv-emoji-popover" hidden>
  2373.                                <div class="niriv-emoji-grid" role="listbox" aria-label="Insert emoji">
  2374.                                    <button type="button" class="niriv-emoji-item" role="option">😀</button><button type="button" class="niriv-emoji-item" role="option">😁</button><button type="button" class="niriv-emoji-item" role="option">😂</button><button type="button" class="niriv-emoji-item" role="option">😊</button><button type="button" class="niriv-emoji-item" role="option">😍</button><button type="button" class="niriv-emoji-item" role="option">🤩</button><button type="button" class="niriv-emoji-item" role="option">😎</button><button type="button" class="niriv-emoji-item" role="option">😇</button><button type="button" class="niriv-emoji-item" role="option">🥹</button><button type="button" class="niriv-emoji-item" role="option">😢</button><button type="button" class="niriv-emoji-item" role="option">😮</button><button type="button" class="niriv-emoji-item" role="option">👍</button><button type="button" class="niriv-emoji-item" role="option">👏</button><button type="button" class="niriv-emoji-item" role="option">🔥</button><button type="button" class="niriv-emoji-item" role="option">💯</button><button type="button" class="niriv-emoji-item" role="option">❤️</button><button type="button" class="niriv-emoji-item" role="option">🙏</button><button type="button" class="niriv-emoji-item" role="option">🙌</button><button type="button" class="niriv-emoji-item" role="option">🎉</button><button type="button" class="niriv-emoji-item" role="option">🇳🇵</button>                                </div>
  2375.                            </div>
  2376.                        </div>
  2377.                        <input type="hidden" name="comment_post_ID" id="niriv-composer-post-id" value="0" />
  2378.                        <input type="hidden" name="comment_parent" id="niriv-composer-parent" value="0" />
  2379.                    </form>
  2380.                </div>
  2381.            </div>
  2382.        </div>
  2383.    </div>
  2384.    <script type="text/javascript" src="https://unpkg.com/lucide@latest" id="lucide-js"></script>
  2385. <script type="text/javascript" id="lucide-js-after">
  2386. /* <![CDATA[ */
  2387.  
  2388.        document.addEventListener("DOMContentLoaded", function() {
  2389.            if (typeof lucide !== "undefined") {
  2390.                lucide.createIcons();
  2391.            }
  2392.        });
  2393.    
  2394. /* ]]> */
  2395. </script>
  2396. <script type="text/javascript" src="https://unpkg.com/lucide@latest" id="lucide-icons-js"></script>
  2397. <script type="text/javascript" id="lucide-icons-js-after">
  2398. /* <![CDATA[ */
  2399. document.addEventListener("DOMContentLoaded", function() { if (typeof lucide !== "undefined") { lucide.createIcons(); } });
  2400. /* ]]> */
  2401. </script>
  2402. <script type="text/javascript" src="https://www.googletagmanager.com/gtag/js?id=G-JLMNQMWH32" id="google-gtag-js"></script>
  2403. <script type="text/javascript" id="google-gtag-js-after">
  2404. /* <![CDATA[ */
  2405. window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-JLMNQMWH32');
  2406. /* ]]> */
  2407. </script>
  2408. <script type="text/javascript" src="https://scriling.com/wp-content/themes/Theme1/js/niriv-main.js?ver=1.0.2" id="niriv-main-js-js"></script>
  2409. <script type="text/javascript" src="https://scriling.com/wp-content/themes/Theme1/js/niriv-load-more.js?ver=1.0.0" id="niriv-load-more-js"></script>
  2410. <script type="text/javascript" id="niriv-follow-system-js-extra">
  2411. /* <![CDATA[ */
  2412. var niriv_ajax = {"ajaxurl":"https:\/\/scriling.com\/wp-admin\/admin-ajax.php","nonce":"3bd7a70f7c","logged_in":"0","login_url":"https:\/\/scriling.com\/nid\/?redirect_to=https%3A%2F%2Fscriling.com%2F","debug":"0"};
  2413. var niriv_ajax = {"ajaxurl":"https:\/\/scriling.com\/wp-admin\/admin-ajax.php","nonce":"de2651b3ad","logged_in":"0","login_url":"https:\/\/scriling.com\/nid\/?redirect_to=https%3A%2F%2Fscriling.com%2F","debug":"0"};
  2414. /* ]]> */
  2415. </script>
  2416. <script type="text/javascript" src="https://scriling.com/wp-content/themes/Theme1/js/follow-system.js?ver=1.0.0" id="niriv-follow-system-js"></script>
  2417. <script type="text/javascript" id="niriv-new-home-js-js-extra">
  2418. /* <![CDATA[ */
  2419. var niriv_ajax = {"ajaxurl":"https:\/\/scriling.com\/wp-admin\/admin-ajax.php","nonce":"de2651b3ad","home_url":"https:\/\/scriling.com\/","is_front_page":"1","is_search":"0"};
  2420. /* ]]> */
  2421. </script>
  2422. <script type="text/javascript" src="https://scriling.com/wp-content/themes/Theme1/js/new-home.js?ver=1.0.0" id="niriv-new-home-js-js"></script>
  2423. <script type="text/javascript" src="https://scriling.com/wp-content/themes/Theme1/js/external-link-handler.js?ver=1759034657" id="niriv-external-link-handler-js"></script>
  2424. <script type="text/javascript" src="https://scriling.com/wp-content/themes/Theme1/js/custom-alerts.js?ver=1.0.0" id="niriv-custom-alerts-js"></script>
  2425. <script type="text/javascript" id="niriv-comment-modal-js-extra">
  2426. /* <![CDATA[ */
  2427. var nirivComment = {"ajaxurl":"https:\/\/scriling.com\/wp-admin\/admin-ajax.php","nonce":"3eb4521f7c","logged_in":"0","user_name":"","strings":{"loading":"Loading comments...","error":"Something went wrong. Please try again.","login_to_comment":"Log in to comment"},"login_url":"https:\/\/scriling.com\/nid\/?redirect_to=https%3A%2F%2Fscriling.com%2F","login_base":"https:\/\/scriling.com\/nid"};
  2428. /* ]]> */
  2429. </script>
  2430. <script type="text/javascript" src="https://scriling.com/wp-content/themes/Theme1/js/comment-modal.js?ver=1759379621" id="niriv-comment-modal-js"></script>
  2431. <script type="text/javascript" src="https://scriling.com/wp-content/themes/Theme1/js/niriv-toast.js?ver=1759203569" id="niriv-toast-js-js"></script>
  2432. <script type="text/javascript" src="https://scriling.com/wp-content/themes/Theme1/js/niriv-heart-animation.js?ver=1759203569" id="niriv-heart-animation-js-js"></script>
  2433. <script type="text/javascript" id="niriv-like-system-js-js-extra">
  2434. /* <![CDATA[ */
  2435. var nirivAjax = {"ajaxurl":"https:\/\/scriling.com\/wp-admin\/admin-ajax.php","nonce":"2fc23b9260"};
  2436. /* ]]> */
  2437. </script>
  2438. <script type="text/javascript" src="https://scriling.com/wp-content/themes/Theme1/js/niriv-like-system.js?ver=1759203569" id="niriv-like-system-js-js"></script>
  2439. <script type="text/javascript" src="https://scriling.com/wp-content/themes/Theme1/js/login-redirect.js?ver=1759203569" id="niriv-login-redirect-js"></script>
  2440.  
  2441.  
  2442. <!-- Gemini AI Modal -->
  2443. <div id="quick-answer-modal" class="gemini-modal fixed inset-0 z-250 hidden pointer-events-none flex items-center justify-center p-4">
  2444.    <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" id="quick-answer-overlay"></div>
  2445.    <div class="gemini-modal-content w-full max-w-2xl bg-white rounded-2xl shadow-2xl flex flex-col max-h-[80vh] transform transition-all duration-300 ease-in-out opacity-0 scale-95" id="gemini-modal-content">
  2446.        <div class="shrink-0 flex items-center justify-between p-4 border-b">
  2447.            <div class="flex items-center space-x-3">
  2448.                <div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center">
  2449.                    <i data-lucide="sparkles" class="w-4 h-4 text-white"></i>
  2450.                </div>
  2451.                <h3 class="font-medium text-gray-900">Niriv AI Assistant</h3>
  2452.            </div>
  2453.            <button type="button" data-close-modal class="p-1.5 rounded-full hover:bg-gray-100 transition-colors" aria-label="Close modal">
  2454.                <i data-lucide="x" class="w-5 h-5 text-gray-500"></i>
  2455.            </button>
  2456.        </div>
  2457.        <div class="flex-1 overflow-y-auto p-4" id="gemini-chat">
  2458.            <!-- Welcome message -->
  2459.            <div class="flex justify-start mb-6">
  2460.                <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center shrink-0">
  2461.                    <i data-lucide="sparkles" class="w-4 h-4 text-blue-600"></i>
  2462.                </div>
  2463.                <div class="ml-3 max-w-[80%] sm:max-w-[70%]">
  2464.                    <div class="bg-gray-100 rounded-lg p-4 text-sm">
  2465.                        <p class="font-medium text-gray-900 mb-1">Hello! I&#039;m your Niriv AI Assistant</p>
  2466.                        <p class="text-gray-700 mb-2">How can I help you today? You can ask me anything and I&#039;ll do my best to assist you.</p>
  2467.                        <div class="mt-2 space-y-1">
  2468.                            <p class="text-xs text-gray-500">Try asking:</p>
  2469.                            <button type="button" class="text-xs text-blue-600 hover:underline focus:outline-none" data-suggested-question>
  2470.                                What is the latest news in Nepal?                            </button>
  2471.                            <br>
  2472.                            <button type="button" class="text-xs text-blue-600 hover:underline focus:outline-none" data-suggested-question>
  2473.                                Tell me about Nepali culture                            </button>
  2474.                        </div>
  2475.                    </div>
  2476.                </div>
  2477.            </div>
  2478.            <!-- Chat messages will be inserted here -->
  2479.        </div>
  2480.        <div class="p-4 border-t">
  2481.            <form id="gemini-chat-form" class="relative">
  2482.                <input type="hidden" id="gemini_nonce" name="gemini_nonce" value="757835a247" /><input type="hidden" name="_wp_http_referer" value="/" />                <input type="text"
  2483.                       id="gemini-chat-input"
  2484.                       placeholder="Ask me anything..."
  2485.                       class="w-full pl-4 pr-12 py-3 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
  2486.                       autocomplete="off"
  2487.                       aria-label="Type your question">
  2488.                <button type="submit" class="absolute right-2 top-1/2 transform -translate-y-1/2 p-2 text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-full transition-colors" aria-label="Send message">
  2489.                    <i data-lucide="send" class="w-5 h-5"></i>
  2490.                </button>
  2491.            </form>
  2492.        </div>
  2493.            <p class="text-xs text-gray-500 mt-2 text-center">
  2494.                Niriv AI may produce inaccurate information. Check important info.            </p>
  2495.        </div>
  2496.    </div>
  2497. </div>
  2498. <div id="mobile-footer-menu" class="fixed bottom-0 left-0 right-0 bg-white shadow-2xl lg:hidden z-40">
  2499.    <!-- Main Menu -->
  2500.    <div id="main-menu" class="flex items-stretch relative" style="padding: 0.25rem 0 0.35rem;">
  2501.        <ul class="w-full flex"><li class="flex-1 flex items-center justify-center"><a href="/" class="flex flex-col items-center justify-center w-full py-2 transition-all duration-200 hactive"><i data-lucide="house-plus" class="w-6 h-6 mb-1"></i><span class="text-[10px] font-medium">Home</span></a></li></li>
  2502. <li class="flex-1 flex items-center justify-center"><a href="https://scriling.com/pulse/for-you/" class="flex flex-col items-center justify-center w-full py-2 transition-all duration-200 text-gray-700 hover:text-blue-600"><i data-lucide="combine" class="w-6 h-6 mb-1"></i><span class="text-[10px] font-medium">For You</span></a></li></li>
  2503. <li class="flex-1 flex items-center justify-center"><a href="/miti" class="fab-menu-item flex flex-col items-center justify-center w-full py-2 transition-all duration-200 text-gray-700 hover:text-blue-600"><i data-lucide="calendar-days" class="fab-icon"></i><span class="text-[0px] font-medium">Miti</span></a></li></li>
  2504. <li class="flex-1 flex items-center justify-center"><a href="/news" class="flex flex-col items-center justify-center w-full py-2 transition-all duration-200 text-gray-700 hover:text-blue-600"><i data-lucide="newspaper" class="w-6 h-6 mb-1"></i><span class="text-[10px] font-medium">News</span></a></li></li>
  2505. <li class="flex-1 flex items-center justify-center"><a href="https://scriling.com/profile/" class="flex flex-col items-center justify-center w-full py-2 transition-all duration-200 text-gray-700 hover:text-blue-600"><i data-lucide="user-round-check" class="w-6 h-6 mb-1"></i><span class="text-[10px] font-medium">Profile</span></a></li></li>
  2506. </ul>    </div>
  2507. </div>
  2508.  
  2509. <script>
  2510. document.addEventListener('DOMContentLoaded', function() {
  2511.    // Initialize Lucide Icons
  2512.    if (typeof lucide !== 'undefined') {
  2513.        lucide.createIcons();
  2514.    }
  2515.    
  2516.    // Add scroll event for frosted glass effect
  2517.    const mobileFooter = document.getElementById('mobile-footer-menu');
  2518.    let lastScrollTop = 0;
  2519.    let ticking = false;
  2520.  
  2521.    window.addEventListener('scroll', function() {
  2522.        lastScrollTop = window.scrollY;
  2523.        
  2524.        if (!ticking) {
  2525.            window.requestAnimationFrame(function() {
  2526.                if (lastScrollTop > 10) {
  2527.                    mobileFooter.classList.add('scrolled');
  2528.                } else {
  2529.                    mobileFooter.classList.remove('scrolled');
  2530.                }
  2531.                ticking = false;
  2532.            });
  2533.            ticking = true;
  2534.        }
  2535.    });
  2536.  
  2537.    // Main Sidebar Toggle Logic
  2538.    const sidebar = document.getElementById('sidebar');
  2539.    const sidebarOverlay = document.getElementById('sidebar-overlay');
  2540.    const sidebarCloseBtn = document.getElementById('sidebar-close-btn');
  2541.    const mobileMenuToggle = document.querySelector('.mobile-menu-toggle'); // This is the button in header.php
  2542.  
  2543.    function openSidebar() {
  2544.        sidebar.classList.remove('-translate-x-full', 'opacity-0');
  2545.        sidebar.classList.add('translate-x-0', 'opacity-100');
  2546.        sidebarOverlay.classList.remove('hidden');
  2547.        document.body.style.overflow = 'hidden'; // Prevent body scroll
  2548.    }
  2549.  
  2550.    function closeSidebar() {
  2551.        sidebar.classList.remove('translate-x-0', 'opacity-100');
  2552.        sidebar.classList.add('-translate-x-full', 'opacity-0');
  2553.        sidebarOverlay.classList.add('hidden');
  2554.        document.body.style.overflow = ''; // Restore body scroll
  2555.    }
  2556.  
  2557.    if (mobileMenuToggle) {
  2558.        mobileMenuToggle.addEventListener('click', function(e) {
  2559.            e.preventDefault();
  2560.            e.stopPropagation();
  2561.            openSidebar();
  2562.        });
  2563.    }
  2564.  
  2565.    if (sidebarCloseBtn) {
  2566.        sidebarCloseBtn.addEventListener('click', function(e) {
  2567.            e.preventDefault();
  2568.            closeSidebar();
  2569.        });
  2570.    }
  2571.  
  2572.    if (sidebarOverlay) {
  2573.        sidebarOverlay.addEventListener('click', function(e) {
  2574.            e.preventDefault();
  2575.            closeSidebar();
  2576.        });
  2577.    }
  2578. });
  2579.  
  2580. // Re-initialize Lucide Icons after AJAX or dynamic content loads
  2581. document.addEventListener('lucide:update', function() {
  2582.    if (typeof lucide !== 'undefined') {
  2583.        lucide.createIcons();
  2584.    }
  2585. });
  2586. </script>
  2587.  
  2588. <style>
  2589. /* Mobile footer menu container */
  2590. #mobile-footer-menu {
  2591.    position: fixed;
  2592.    bottom: 0;
  2593.    left: 0;
  2594.    right: 0;
  2595.    background: white;
  2596.    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  2597.    padding: 0.5rem 0;
  2598.    z-index: 40;
  2599.    border-top: 1px solid rgba(0, 0, 0, 0.05);
  2600.    border-top-left-radius: 1.5rem;
  2601.    border-top-right-radius: 1.5rem;
  2602. }
  2603.  
  2604. /* Frosted glass effect on scroll */
  2605. #mobile-footer-menu.scrolled {
  2606.    background: rgba(255, 255, 255, 0.95);
  2607.    backdrop-filter: blur(12px);
  2608.    -webkit-backdrop-filter: blur(12px);
  2609.    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  2610.    border-top: 1px solid rgba(0, 0, 0, 0.05);
  2611. }
  2612.  
  2613. #mobile-footer-menu.scrolled .cloud-shape {
  2614.    opacity: 0.9;
  2615. }
  2616.  
  2617. /* Cloud shapes on scroll */
  2618. #mobile-footer-menu.scrolled .relative.h-6 > div > svg {
  2619.    transform: translateY(1px);
  2620.    transition: transform 0.3s ease-out;
  2621.    opacity: 0.9;
  2622. }
  2623.  
  2624. /* Menu items container */
  2625. #mobile-footer-menu > div {
  2626.    width: 100%;
  2627.    position: relative;
  2628. }
  2629.  
  2630. #mobile-footer-menu ul {
  2631.    display: flex;
  2632.    justify-content: space-between;
  2633.    align-items: stretch;
  2634.    margin: 0;
  2635.    padding: 0 0.5rem;
  2636.    list-style: none;
  2637.    position: relative;
  2638.    z-index: 15;
  2639. }
  2640.  
  2641. /* Menu items */
  2642. #mobile-footer-menu li {
  2643.    flex: 1;
  2644.    display: flex;
  2645.    justify-content: center;
  2646.    align-items: center;
  2647.    position: relative;
  2648.    padding: 0.15rem 0;
  2649. }
  2650.  
  2651. /* Regular menu links */
  2652. #mobile-footer-menu a {
  2653.    display: flex;
  2654.    flex-direction: column;
  2655.    align-items: center;
  2656.    padding: 0.15rem 0.1rem;
  2657.    font-size: 0.7rem;
  2658.    line-height: 1.1;
  2659.    font-weight: 500;
  2660.    color: #374151;
  2661.    text-decoration: none;
  2662.    transition: all 0.2s ease;
  2663.    position: relative;
  2664.    z-index: 1;
  2665.    width: 100%;
  2666. }
  2667.  
  2668. #mobile-footer-menu a i[data-lucide] {
  2669.    width: 1.25rem;
  2670.    height: 1.25rem;
  2671.    margin-bottom: 0.15rem;
  2672.    color: #4b5563;
  2673.    transition: all 0.2s ease;
  2674.    stroke-width: 1.75;
  2675. }
  2676.  
  2677. /* Hover states */
  2678. #mobile-footer-menu a:hover,
  2679. .mobile-menu-toggle:hover {
  2680.    color: #315EFB;
  2681. }
  2682.  
  2683. /* Solid Color FAB with Search Icon */
  2684. #mobile-footer-menu .fab-menu-item {
  2685.    transition: all 0.2s ease !important;
  2686.    position: relative !important;
  2687.    z-index: 10 !important;
  2688.    margin-top: -3rem !important;
  2689.    width: 3.75rem !important;
  2690.    height: 3.75rem !important;
  2691.    min-width: 3.75rem !important;
  2692.    min-height: 3.75rem !important;
  2693.    border: none !important;
  2694.    background: #1847ea !important;
  2695.    color: white !important;
  2696.    border-radius: 50% !important;
  2697.    box-shadow: 0 2px 8px rgba(24, 71, 234, 0.25) !important;
  2698.    transition: all 0.2s ease !important;
  2699.    display: flex !important;
  2700.    align-items: center !important;
  2701.    justify-content: center !important;
  2702.    padding: 0 !important;
  2703.    margin-left: auto !important;
  2704.    margin-right: auto !important;
  2705.    overflow: visible !important;
  2706. }
  2707.  
  2708. /* Search icon with sparkle animation */
  2709. #mobile-footer-menu .fab-menu-item .fab-icon {
  2710.    width: 1.75rem !important;
  2711.    height: 1.75rem !important;
  2712.    margin: 0 !important;
  2713.    color: white !important;
  2714.    stroke: white !important;
  2715.    stroke-width: 2.25 !important;
  2716.    position: relative;
  2717.    z-index: 2;
  2718.    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  2719.    animation: sparkle 8s infinite;
  2720. }
  2721.  
  2722. /* Sparkle animation */
  2723. @keyframes sparkle {
  2724.    0%, 100% {
  2725.        filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  2726.        transform: scale(1) rotate(0deg);
  2727.    }
  2728.    5% {
  2729.        filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  2730.    }
  2731.    10% {
  2732.        filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8))
  2733.                drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
  2734.        transform: scale(1.1) rotate(5deg);
  2735.    }
  2736.    15% {
  2737.        filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  2738.        transform: scale(1) rotate(0deg);
  2739.    }
  2740. }
  2741.  
  2742. /* Sparkle particles */
  2743. .fab-menu-item::after {
  2744.    content: '✦';
  2745.    position: absolute;
  2746.    color: white;
  2747.    font-size: 0.5rem;
  2748.    opacity: 0;
  2749.    pointer-events: none;
  2750.    animation: sparkleParticles 8s infinite;
  2751. }
  2752.  
  2753. @keyframes sparkleParticles {
  2754.    0%, 100% {
  2755.        opacity: 0;
  2756.        transform: translate(0, 0) scale(0.5);
  2757.    }
  2758.    10% {
  2759.        opacity: 0;
  2760.    }
  2761.    12% {
  2762.        opacity: 0.8;
  2763.    }
  2764.    20% {
  2765.        opacity: 0;
  2766.        transform: translate(
  2767.            calc((Math.random() * 30) - 15) * 1px,
  2768.            calc((Math.random() * 30) - 15) * 1px
  2769.        ) scale(1.5);
  2770.    }
  2771. }
  2772.  
  2773. /* Hover and active states */
  2774. #mobile-footer-menu .fab-menu-item:hover {
  2775.    transform: translateY(-3px);
  2776.    box-shadow: 0 5px 15px rgba(24, 71, 234, 0.4) !important;
  2777. }
  2778.  
  2779. #mobile-footer-menu .fab-menu-item:active {
  2780.    transform: translateY(0);
  2781.    box-shadow: 0 2px 5px rgba(24, 71, 234, 0.3) !important;
  2782.    background: #133fcc !important;
  2783. }
  2784.  
  2785. #mobile-footer-menu .fab-menu-item:hover .fab-icon {
  2786.    animation: sparkle 2s infinite;
  2787. }
  2788.  
  2789. /* Hover effect */
  2790. #mobile-footer-menu .fab-menu-item::before {
  2791.    content: '';
  2792.    position: absolute;
  2793.    top: 0;
  2794.    left: 0;
  2795.    right: 0;
  2796.    bottom: 0;
  2797.    background: rgba(255, 255, 255, 0.1);
  2798.    border-radius: 50%;
  2799.    opacity: 0;
  2800.    transition: opacity 0.2s ease;
  2801. }
  2802.  
  2803. #mobile-footer-menu .fab-menu-item:hover::before {
  2804.    opacity: 1;
  2805. }
  2806.  
  2807. #mobile-footer-menu .fab-menu-item span {
  2808.    display: none; /* Hide text for FAB */
  2809. }
  2810.  
  2811. #mobile-footer-menu .fab-menu-item:hover {
  2812.    transform: translateY(-3px);
  2813.    box-shadow: 0 6px 16px rgba(24, 71, 234, 0.4);
  2814. }
  2815.  
  2816. #mobile-footer-menu .fab-menu-item:active {
  2817.    transform: translateY(0);
  2818.    box-shadow: 0 2px 8px rgba(24, 71, 234, 0.3);
  2819. }
  2820.  
  2821. /* Active menu item */
  2822. #mobile-footer-menu .hactive,
  2823. #mobile-footer-menu a.hactive {
  2824.    color: #1847ea !important; /* Brand color for active items */
  2825.    position: relative;
  2826.    transform: translateY(-4px); /* Slight lift for active item */
  2827. }
  2828.  
  2829. #mobile-footer-menu .hactive i,
  2830. #mobile-footer-menu a.hactive i {
  2831.    color: #1847ea !important; /* Brand color for active icon */
  2832.    stroke: #1847ea !important;
  2833.    width: 1.25rem;
  2834.    height: 1.25rem;
  2835.    position: relative;
  2836.    z-index: 2;
  2837. }
  2838.  
  2839. /* Cloud animation keyframes */
  2840. @keyframes float {
  2841.    0%, 100% { transform: translateY(0); }
  2842.    50% { transform: translateY(-3px); }
  2843. }
  2844.  
  2845. /* Active menu item */
  2846. #mobile-footer-menu .hactive,
  2847. #mobile-footer-menu a.hactive {
  2848.    color: #1847ea !important;
  2849.    position: relative;
  2850.    transition: all 0.2s ease;
  2851. }
  2852.  
  2853. #mobile-footer-menu .hactive i,
  2854. #mobile-footer-menu a.hactive i {
  2855.    color: #1847ea !important;
  2856.    stroke: #1847ea !important;
  2857.    transition: all 0.2s ease;
  2858. }
  2859.  
  2860. /* Hover effect */
  2861. #mobile-footer-menu .hactive:hover,
  2862. #mobile-footer-menu a.hactive:hover {
  2863.    transform: translateY(-0.15rem);
  2864. }
  2865.  
  2866. /* Active state for icon */
  2867. #mobile-footer-menu .hactive i[data-lucide],
  2868. #mobile-footer-menu a.hactive i[data-lucide] {
  2869.    transform: scale(1.1);
  2870.    transition: all 0.2s ease;
  2871.    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
  2872.    transition: transform 0.2s ease;
  2873.    stroke-width: 2.25px;
  2874. }
  2875.  
  2876. #mobile-footer-menu .current-menu-item a:hover i[data-lucide] {
  2877.    transform: translateY(-2px);
  2878.    filter: drop-shadow(0 3px 6px rgba(49, 94, 251, 0.2));
  2879. }
  2880.  
  2881. #mobile-footer-menu .current-menu-item a i[data-lucide] {
  2882.    color: #2563eb; /* brand blue */
  2883.    stroke-width: 2.25px;
  2884. }
  2885.  
  2886. /* Center button styles */
  2887. #mobile-footer-menu .menu-item-center {
  2888.    flex: 0 0 auto;
  2889.    position: relative;
  2890.    z-index: 10;
  2891. }
  2892.  
  2893. #mobile-footer-menu .menu-item-center a {
  2894.    background: #2563eb;
  2895.    color: white;
  2896.    border-radius: 16px;
  2897.    width: 3.25rem;
  2898.    height: 3.25rem;
  2899.    display: flex;
  2900.    align-items: center;
  2901.    justify-content: center;
  2902.    margin-top: -1.5rem;
  2903.    box-shadow: 0 4px 20px -5px rgba(37, 99, 235, 0.4);
  2904.    border: 2px solid white;
  2905.    transition: all 0.2s ease;
  2906.    transition: all 0.2s ease;
  2907. }
  2908.  
  2909. #mobile-footer-menu .menu-item-center a:hover {
  2910.    transform: translateY(-2px);
  2911.    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3), 0 4px 6px -2px rgba(59, 130, 246, 0.1);
  2912. }
  2913. </style>
  2914.  
  2915. <!-- Go to Top Button - REMOVED TO FIX BLUR ISSUE -->
  2916.  
  2917. <!-- Scroll Progress Bar Script -->
  2918. <script>
  2919. (function() {
  2920.    'use strict';
  2921.    
  2922.    // Initialize scroll progress bar
  2923.    function initScrollProgress() {
  2924.        const scrollProgressBar = document.getElementById('scroll-progress-bar');
  2925.        
  2926.        if (!scrollProgressBar) {
  2927.            console.warn('Scroll progress bar not found');
  2928.            return;
  2929.        }
  2930.        
  2931.        // Update progress bar width based on scroll position
  2932.        function updateScrollProgress() {
  2933.            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  2934.            const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  2935.            const scrollProgress = (scrollTop / scrollHeight) * 100;
  2936.            
  2937.            scrollProgressBar.style.width = scrollProgress + '%';
  2938.        }
  2939.        
  2940.        // Event listeners
  2941.        window.addEventListener('scroll', updateScrollProgress, { passive: true });
  2942.        window.addEventListener('resize', updateScrollProgress);
  2943.        
  2944.        // Initial update
  2945.        updateScrollProgress();
  2946.        
  2947.        console.log('Scroll progress bar initialized successfully');
  2948.    }
  2949.    
  2950.    // Initialize when DOM is ready
  2951.    if (document.readyState === 'loading') {
  2952.        document.addEventListener('DOMContentLoaded', initScrollProgress);
  2953.    } else {
  2954.        initScrollProgress();
  2955.    }
  2956. })();
  2957. </script>
  2958.  
  2959. <!-- Service Worker Registration -->
  2960. <script>
  2961. // Register service worker for PWA functionality
  2962. if ('serviceWorker' in navigator) {
  2963.    window.addEventListener('load', () => {
  2964.        navigator.serviceWorker.register('https://scriling.com/wp-content/themes/Theme1/sw.js')
  2965.            .then(registration => {
  2966.                console.log('ServiceWorker registration successful');
  2967.                
  2968.                // Check for updates
  2969.                registration.addEventListener('updatefound', () => {
  2970.                    const newWorker = registration.installing;
  2971.                    newWorker.addEventListener('statechange', () => {
  2972.                        if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
  2973.                            // New content available, show update notification
  2974.                            console.log('New content available, please refresh.');
  2975.                        }
  2976.                    });
  2977.                });
  2978.  
  2979.                // Register for background sync if available
  2980.                if ('sync' in registration) {
  2981.                    registration.sync.register('sync-notes')
  2982.                        .then(() => {
  2983.                            console.log('Background sync registered successfully');
  2984.                        })
  2985.                        .catch(err => {
  2986.                            console.log('Background sync registration failed:', err);
  2987.                        });
  2988.                }
  2989.            })
  2990.            .catch(err => {
  2991.                console.log('ServiceWorker registration failed: ', err);
  2992.            });
  2993.    });
  2994. }
  2995. </script>
  2996.  
  2997. </body>
  2998. </html>
  2999.  

Home · About · News · Docs · Terms

 
Copyright © 2002-9 Sam Ruby, Mark Pilgrim, Joseph Walton, and Phil Ringnalda