<!DOCTYPE html><html dir="rtl" lang="ur" data-theme="books"><head> <meta charset="utf-8"> <meta name="google-site-verification" content="V47Gk7016Q0YQGLflcALRq7bpOPIGq32atC3-UhJj7Q" /> <meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=5, minimum-scale=1, width=device-width"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <link rel="icon" href="https://www.darulifta.info/public/images/icon/96.png" type="image/png"> <meta property="og:image" content="https://www.darulifta.info/public/images/og.icon.png"> <meta property="og:image:width" content="96"> <meta property="og:image:height" content="96"> <meta name="description" content="دار الافتاء انفو ایک مفت اسلامی ویب سائٹ ہے جو مفت فتاوی، اسلامی مضامین، اور دینی معلومات فراہم کرتی ہے۔ یہاں آپ کو مختلف موضوعات پر مستند اسلامی رہنمائی ملے گی۔"> <meta name="keywords" content="دار الافتاء, فتاوی, اسلامی مضامین, دینی معلومات, مفت فتاوی, اسلامی ویب سائٹ, شرعی مسائل, اسلامی تعلیمات, قرآن و حدیث, اسلامی رہنمائی"> <title>دار الافتاء . انفو | Darulifta.info</title> <link rel="stylesheet" href="https://www.darulifta.info/public/build/web/assets/web-CQdcThB0.css"><script type="module" src="https://www.darulifta.info/public/build/web/assets/web-C_r3nzUa.js"></script> <!-- Alpine.js for interactive components --> <!-- Critical CSS for faster rendering --> <style> @font-face{ font-family:'meher'; font-style:normal; font-weight:400; src:url('https://www.darulifta.info/public/fonts/mehr_nastaliq_web.ttf') format('truetype'); font-display: swap; } .font-ur { font-family: "meher", "jameel noori nastaliq", "Noto Sans Arabic", sans-serif; } /* Critical above-fold styles */ body { font-family: "meher", sans-serif; } .hero-gradient { background: linear-gradient(135deg, #059669 0%, #065f46 100%); } .loading-skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } </style> <!--head-str --> </head><body class="font-ur min-h-screen flex flex-col bg-gray-50 dark:bg-gray-950 transition-colors duration-300"> <!-- Modern Header with Auto-hide --> <header id="main-header" class="sticky top-0 z-50 w-full border-b shadow-sm transition-all duration-300 bg-white/90 border-green-100 backdrop-blur-md dark:bg-gray-900/90 dark:border-gray-800"> <div class="container mx-auto px-2 sm:px-4"> <nav class="navbar py-1 sm:py-2 flex items-center justify-between"> <!-- Mobile Menu Toggle --> <button onclick="toggleMobileMenu()" class=" btn btn-ghost btn-circle text-green-700 dark:text-green-300 hover:bg-green-100 dark:hover:bg-gray-800 transition-all p-1"> <span id="menu-icon" class="icon-[mdi--menu] text-2xl sm:text-3xl"></span> </button><a href="https://www.darulifta.info" class="flex items-center mx-1 sm:mx-2 md:mx-0"> <img src="https://www.darulifta.info/public/images/nav-bar-logo.png" class="h-9 sm:h-7 drop-shadow-md" alt="Logo" > </a> <!-- Desktop Links --> <div class="hidden lg:flex items-center gap-1 xl:gap-2"> <a href="https://www.darulifta.info/dars" class="nav-link text-sm xl:text-base"> <span class="icon-[mdi--list-box-outline] text-base xl:text-lg"></span> فتاوی </a> <a href="https://www.darulifta.info/ask" class="nav-link text-sm xl:text-base"> <span class="icon-[mdi--help-circle-outline] text-base xl:text-lg"></span> سوال پوچھیں </a> <a href="https://www.darulifta.info/about" class="nav-link text-sm xl:text-base"> <span class="icon-[mdi--information-outline] text-base xl:text-lg"></span> تعارف </a> </div> <!-- Controls --> <div class="navbar-end gap-2"> <a href="https://www.darulifta.info/search" class="btn btn-ghost btn-circle text-green-700 dark:text-green-300 hover:bg-green-100 dark:hover:bg-gray-800 transition-all p-1"> <span class="icon-[mdi--search] text-xl sm:text-2xl"></span> </a> </div> </nav> </div> </header> <!-- Mobile Menu Overlay --> <div id="mobile-overlay" class="fixed inset-0 bg-black/40 dark:bg-black/60 backdrop-blur-sm z-[9998] transition-opacity duration-300 opacity-0 pointer-events-none"></div> <!-- Mobile Menu Drawer --> <aside id="mobile-menu" class="fixed top-0 right-0 h-full w-72 shadow-2xl z-[9999] bg-white dark:bg-gray-900 border-l border-gray-200 dark:border-gray-800 transition-transform duration-300 flex flex-col translate-x-full"> <div class="p-4 flex-shrink-0 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between"> <a href="https://www.darulifta.info" class="flex items-center gap-3"> <img src="https://www.darulifta.info/public/images/nav-bar-logo.png" class="h-10 drop-shadow-md" alt="Logo" > </a> <button onclick="closeMobileMenu()" class="btn btn-ghost btn-circle"> <span class="icon-[mdi--close] text-2xl"></span> </button> </div> <nav class="flex-1 overflow-y-auto p-4 space-y-2"> <a href="https://www.darulifta.info" class="mobile-link text-green-800 dark:text-white hover:text-green-900 dark:hover:text-white"> <span class="icon-[mdi--home-variant-outline] text-xl text-green-700 dark:text-green-400"></span> سرورق </a> <a href="https://www.darulifta.info/dars" class="mobile-link text-green-800 dark:text-white hover:text-green-900 dark:hover:text-white"> <span class="icon-[mdi--list-box-outline] text-xl text-green-700 dark:text-green-400"></span> فتاوی </a> <div class="border-t my-2 border-gray-200 dark:border-gray-700"></div> <h2 class="text-base text-gray-300 dark:text-white text-center">مفید خدمات اور لنکس</h2> <a href="https://www.darulifta.info/zakat-calculator" class="mobile-link text-green-800 dark:text-white hover:text-green-900 dark:hover:text-white"> <span class="icon-[mdi--calculator-variant-outline] text-xl text-green-700 dark:text-green-400"></span> زکوۃ کیلکولیٹر </a> <a href="https://www.darulifta.info/edda-calculator" class="mobile-link text-green-800 dark:text-white hover:text-green-900 dark:hover:text-white"> <span class="icon-[mdi--calendar-clock-outline] text-xl text-green-700 dark:text-green-400"></span> عدت وفات کیلکولیٹر </a> <a href="https://www.darulifta.info/fidya-calculator" class="mobile-link text-green-800 dark:text-white hover:text-green-900 dark:hover:text-white"> <span class="icon-[mdi--hand-coin-outline] text-xl text-green-700 dark:text-green-400"></span> فدیہ کیلکولیٹر </a> <a href="https://www.darulifta.info/awzan-calculator" class="mobile-link text-green-800 dark:text-white hover:text-green-900 dark:hover:text-white"> <span class="icon-[mdi--scale-balance] text-xl text-green-700 dark:text-green-400"></span> اوزان شرعیہ کیلکولیٹر </a> <a href="https://t.me/FatwaBot" target="_blank" rel="noopener" class="mobile-link text-green-800 dark:text-white hover:text-green-900 dark:hover:text-white"> <span class="icon-[mdi--robot-happy-outline] text-xl text-green-700 dark:text-green-400"></span> تلاش فتویٰ ٹیلی گرام بوٹ </a> <div class="border-t my-2 border-gray-200 dark:border-gray-700"></div> <a href="https://www.darulifta.info/ask" class="mobile-link text-green-800 dark:text-white hover:text-green-900 dark:hover:text-white"> <span class="icon-[mdi--help-circle-outline] text-xl text-green-700 dark:text-green-400"></span> سوال پوچھیں </a> <a href="https://www.darulifta.info/about" class="mobile-link text-green-800 dark:text-white hover:text-green-900 dark:hover:text-white"> <span class="icon-[mdi--information-outline] text-xl text-green-700 dark:text-green-400"></span> تعارف </a> <a href="https://www.darulifta.info/contact-us" class="mobile-link text-green-800 dark:text-white hover:text-green-900 dark:hover:text-white"> <span class="icon-[mdi--phone-outline] text-xl text-green-700 dark:text-green-400"></span> رابطہ کریں </a> </nav> </aside> <!-- Main Content --> <main class="flex-grow"> <div class="min-h-[60vh]"> <!-- Modern Hero Section with Clean Design --> <section class="bg-gradient-to-b from-green-50 to-white dark:from-gray-900 dark:to-gray-800 py-8 md:py-16 lg:py-20"> <div class="container px-3 sm:px-4 mx-auto"> <!-- Clean Counter Text --> <div class="text-center mb-6 sm:mb-8"> <p class="text-base sm:text-lg md:text-xl mb-8 px-2"> <span class="text-green-600 dark:text-green-400 font-bold animate-pulse"> 190159 </span> <span class="text-gray-700 dark:text-gray-300"> مستند فتاوی جات میں تلاش کی سہولت </span> </p> </div> <!-- Modern Search Form Component --> <div class="max-w-4xl mx-auto mb-8 sm:mb-12 relative z-10"> <div class="w-full" x-data="searchForm(null)"> <form method="GET" action="search" class="w-full" @submit="handleSubmit"> <div class="bg-white/90 backdrop-blur-xl dark:bg-gray-800/90 rounded-xl p-3 sm:p-4 shadow-lg border border-gray-200 dark:border-gray-700"> <!-- Main Search with Autocomplete --> <div class="flex flex-col sm:flex-row sm:items-stretch mb-3 sm:mb-4 gap-2 sm:gap-3"> <div class="relative flex-grow"> <div class="flex items-center bg-gray-50/80 dark:bg-gray-700/80 border border-gray-200 dark:border-gray-600 rounded-lg focus-within:border-green-500 dark:focus-within:border-green-400 focus-within:ring-2 focus-within:ring-green-200 dark:focus-within:ring-green-800 transition-all backdrop-blur-sm"> <span class="icon-[mdi--magnify] text-green-600 dark:text-green-400 text-lg sm:text-xl mr-2 sm:mr-3 ml-2 sm:ml-3 flex-shrink-0"></span> <input x-ref="searchInput" type="search" name="q" x-model="searchQuery" @input="handleInput" @keydown="handleKeydown" @focus="handleFocus" @blur="handleBlur" placeholder="تلاش کے الفاظ۔۔۔" class="flex-grow px-2 sm:px-3 py-2.5 sm:py-3 text-base sm:text-lg border-0 focus:outline-none bg-transparent text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 min-w-0" autocomplete="off" /> <!-- Loading indicator --> <span x-show="isLoading" class="icon-[mdi--loading] w-4 h-4 animate-spin text-gray-400 mr-2 flex-shrink-0"></span> </div> <!-- Autocomplete Dropdown --> <div x-show="isOpen && suggestions.length > 0" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute top-full left-0 right-0 mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-2xl max-h-64 overflow-y-auto z-50" > <template x-for="(suggestion, index) in suggestions" :key="index"> <div @mousedown.prevent="selectSuggestion(suggestion)" @mouseenter="hoveredIndex = index" @mouseleave="hoveredIndex = -1" x-bind:class="{ 'px-4 py-3 cursor-pointer transition-colors duration-150 flex items-center text-right relative': true, 'bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-300': index === selectedIndex || index === hoveredIndex, 'hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300': index !== selectedIndex && index !== hoveredIndex }" > <span class="icon-[mdi--magnify] w-4 h-4 ml-3 text-gray-400 dark:text-gray-500 flex-shrink-0"></span> <span class="flex-grow font-medium" x-html="highlightMatch(suggestion.text || suggestion, searchQuery)"></span> <span class="icon-[mdi--arrow-top-right] w-3 h-3 text-gray-400 dark:text-gray-500 opacity-50 flex-shrink-0"></span> </div> </template> </div> </div> <button type="submit" x-bind:disabled="isSubmitting" x-show="!isAdvancedOpen" class="bg-green-600 hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-white px-4 py-2.5 sm:py-3 rounded-lg font-semibold transition-all duration-200 flex items-center justify-center min-w-[3rem] hover:shadow-md" > <span x-show="!isSubmitting" class="icon-[mdi--magnify] text-lg sm:text-xl"></span> <span x-show="isSubmitting" class="icon-[mdi--loading] text-lg sm:text-xl animate-spin"></span> </button> </div> <!-- Advanced Search Toggle --> <button type="button" @click="isAdvancedOpen = !isAdvancedOpen" class="text-green-600 dark:text-green-400 text-sm hover:text-green-700 dark:hover:text-green-300 flex items-center transition-colors relative" > <span x-bind:class="isAdvancedOpen ? 'icon-[mdi--close]' : 'icon-[mdi--tune-variant]'" class="mr-2"></span> تفصیلی تلاش <!-- Active indicator with count --> <span x-show="hasActiveAdvancedFields" x-text="activeFieldsCount" x-bind:class="isAdvancedOpen ? '-top-1 -right-6' : '-top-1 -right-2'" class="absolute min-w-[1rem] h-4 bg-green-500 text-white text-xs font-bold rounded-full flex items-center justify-center shadow-sm transition-all duration-200" title="فعال فیلڈز کی تعداد" ></span> </button> <!-- Advanced Search Panel --> <div x-show="isAdvancedOpen" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 max-h-0" x-transition:enter-end="opacity-100 max-h-96" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 max-h-96" x-transition:leave-end="opacity-0 max-h-0" class="overflow-hidden" > <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-600"> <!-- Search engine selector --> <div class="mb-4"> <div class="flex items-center gap-4"> <label class="inline-flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300"> <input type="radio" name="search_engine" value="google" x-model="searchEngine" class="text-green-600 focus:ring-green-500" /> <span>گوگل</span> </label> <label class="inline-flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300"> <input type="radio" name="search_engine" value="internal" x-model="searchEngine" class="text-green-600 focus:ring-green-500" /> <span>اندرونی سرچ انجن</span> </label> </div> </div> <div x-show="searchEngine === 'internal'" class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">دار الافتاء</label> <div class="relative"> <select name="dar_id" x-model="selectedDar" x-bind:disabled="searchEngine === 'google'" class="w-full px-3 py-2 pr-8 border border-gray-300 dark:border-gray-600 rounded-lg bg-white/80 dark:bg-gray-700/80 text-gray-800 dark:text-white focus:ring-2 focus:ring-green-200 dark:focus:ring-green-800 focus:border-green-500 dark:focus:border-green-400 transition-all text-base backdrop-blur-sm" > <option value="">تمام دار الافتاء</option> <option value="1">دار الافتاء دار العلوم دیوبند</option> <option value="7">دار الافتاء دار العلوم (وقف) دیوبند </option> <option value="2">دار الافتاء دار العلوم کراچی</option> <option value="3">دار الافتاء جامعۃ العلوم الاسلامیۃ بنوری ٹاؤن</option> <option value="8">دار الافتاء جامعہ فاروقیہ</option> <option value="12">دار الافتاء اشرف المدارس کراچی</option> <option value="15">دار الافتاء جامعہ حقانیہ اکوڑہ خٹک</option> <option value="16">دار الافتاء خیر المدارس ملتان</option> <option value="4">دار الافتاء جامعۃ الرشید کراچی</option> <option value="5">دار الافتاء جامعہ بنوریہ کراچی</option> <option value="6">دار الافتاء جامعہ اشرفیہ لاہور</option> <option value="20">دار الافتاء جامعہ عثمانیہ پشاور</option> </select> <!-- Clear button for dar selection --> <button type="button" x-show="selectedDar && selectedDar !== ''" @click="selectedDar = ''" class="absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors" title="صاف کریں" > <span class="icon-[mdi--close] w-4 h-4"></span> </button> </div> </div> <div> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">فتوی نمبر</label> <div class="relative"> <input type="search" name="fatwa_no" x-model="fatwaNo" x-bind:disabled="searchEngine === 'google'" dir="ltr" class="w-full px-3 py-2 pr-8 border border-gray-300 dark:border-gray-600 rounded-lg bg-white/80 dark:bg-gray-700/80 text-gray-800 dark:text-white focus:ring-2 focus:ring-green-200 dark:focus:ring-green-800 focus:border-green-500 dark:focus:border-green-400 transition-all text-base backdrop-blur-sm" placeholder="مثال: ۲۳۴۵" /> <!-- Clear button for fatwa number --> <button type="button" x-show="fatwaNo && fatwaNo.trim() !== ''" @click="fatwaNo = ''" class="absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors" title="صاف کریں" > <span class="icon-[mdi--close] w-4 h-4"></span> </button> </div> </div> </div> <div class="mt-4 text-center"> <button type="submit" x-bind:disabled="isSubmitting" class="bg-green-600 hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-white px-8 py-2.5 rounded-lg font-semibold transition-colors hover:shadow-lg hover:scale-105 duration-300" > <span class="flex items-center gap-2"> <span class="icon-[mdi--magnify] w-5 h-5"></span> <span></span> </span> </button> </div> </div> </div> </div> </form></div> <script>function searchForm() { const initialDarId = null; const initialFatwaNo = ""; const initialQuery = ""; const initialSearchEngine = "google"; return { searchQuery: initialQuery || '', selectedDar: (initialDarId) ? String(initialDarId) : '', fatwaNo: initialFatwaNo || '', searchEngine: initialSearchEngine || 'google', isAdvancedOpen: false, isLoading: false, isSubmitting: false, isOpen: false, suggestions: [], selectedIndex: -1, hoveredIndex: -1, debounceTimer: null, lastSearchTime: 0, // Computed property to check if any advanced fields are active get hasActiveAdvancedFields() { if (this.searchEngine !== 'internal') return false; return (this.selectedDar && this.selectedDar !== '') || (this.fatwaNo && this.fatwaNo.trim() !== ''); }, // Computed property to count active advanced fields get activeFieldsCount() { if (this.searchEngine !== 'internal') return 0; let count = 0; if (this.selectedDar && this.selectedDar !== '') count++; if (this.fatwaNo && this.fatwaNo.trim() !== '') count++; return count; }, init() { // If a dar_id prop was provided but advanced panel is not shown, // ensure it's kept in a hidden input so form submits it. // (UI select will also show the selection when panel is opened) }, handleInput(event) { const value = event.target.value; this.searchQuery = value; // Simple autocomplete simulation (you can replace with actual API calls) if (value.length >= 3 && false) { this.debounceSearch(value); } else { this.closeAutocomplete(); } }, debounceSearch(query) { clearTimeout(this.debounceTimer); this.debounceTimer = setTimeout(() => { this.performSearch(query); }, 500); }, async performSearch(query) { const now = Date.now(); if (now - this.lastSearchTime < 1000) return; // Rate limiting this.lastSearchTime = now; this.isLoading = true; try { const response = await fetch(`/search/autocomplete?q=${encodeURIComponent(query)}`, { method: 'GET', headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' } }); if (response.ok) { const data = await response.json(); this.suggestions = data.suggestions || []; this.isOpen = this.suggestions.length > 0; } else { throw new Error('Network response was not ok'); } } catch (error) { console.error('Search error:', error); // Fallback to mock suggestions if API fails this.suggestions = [ ].slice(0, 3); this.isOpen = this.suggestions.length > 0; } finally { this.isLoading = false; } }, handleKeydown(event) { if (!this.isOpen) return; switch (event.key) { case 'ArrowDown': event.preventDefault(); this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1); this.hoveredIndex = -1; break; case 'ArrowUp': event.preventDefault(); this.selectedIndex = Math.max(this.selectedIndex - 1, -1); this.hoveredIndex = -1; break; case 'Enter': event.preventDefault(); if (this.selectedIndex >= 0) { this.selectSuggestion(this.suggestions[this.selectedIndex]); } else { this.submitForm(); } break; case 'Escape': this.closeAutocomplete(); this.$refs.searchInput.blur(); break; } }, handleFocus() { if (this.searchQuery.length >= 3 && this.suggestions.length > 0) { this.isOpen = true; } }, handleBlur() { // Delay closing to allow clicking on suggestions setTimeout(() => { this.closeAutocomplete(); }, 200); }, selectSuggestion(suggestion) { this.searchQuery = suggestion.text || suggestion; this.closeAutocomplete(); // Auto-submit after selection setTimeout(() => { this.submitForm(); }, 100); }, closeAutocomplete() { this.isOpen = false; this.selectedIndex = -1; this.hoveredIndex = -1; }, highlightMatch(text, query) { if (!query.trim()) return text; const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi'); return text.replace(regex, '<strong class="font-semibold">$1</strong>'); }, handleSubmit(event) { // Let the form submit naturally for now this.isSubmitting = true; // Reset after a delay setTimeout(() => { this.isSubmitting = false; }, 2000); }, submitForm() { this.$el.querySelector('form').submit(); } }}</script> </div> <!-- Professional Quick Access Grid --> <div class="flex flex-wrap justify-center gap-3 sm:gap-4 max-w-4xl mx-auto relative z-10"> <a href="https://www.darulifta.info/dars" class="flex flex-col items-center p-2 sm:p-3 min-w-[100px] sm:min-w-[120px] bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-md group transition-all duration-200 border border-gray-200 dark:border-gray-700 hover:border-green-300 dark:hover:border-green-600"> <span class="icon-[mdi--list-box-outline] text-3xl sm:text-4xl text-green-600 dark:text-green-400 mb-1 sm:mb-2 group-hover:text-green-700 dark:group-hover:text-green-300 transition-colors"></span> <span class="text-xs sm:text-sm text-gray-700 dark:text-gray-300 text-center group-hover:text-green-700 dark:group-hover:text-green-300 font-medium"> فتاوی </span> </a> <a href="https://www.darulifta.info/zakat-calculator" class="flex flex-col items-center p-2 sm:p-3 min-w-[100px] sm:min-w-[120px] bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-md group transition-all duration-200 border border-gray-200 dark:border-gray-700 hover:border-green-300 dark:hover:border-green-600"> <span class="icon-[mdi--calculator-variant-outline] text-3xl sm:text-4xl text-green-600 dark:text-green-400 mb-1 sm:mb-2 group-hover:text-green-700 dark:group-hover:text-green-300 transition-colors"></span> <span class="text-xs sm:text-sm text-gray-700 dark:text-gray-300 text-center group-hover:text-green-700 dark:group-hover:text-green-300 font-medium">زکوٰۃ کیلکولیٹر</span> </a> <a href="https://www.darulifta.info/edda-calculator" class="flex flex-col items-center p-2 sm:p-3 min-w-[100px] sm:min-w-[120px] bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-md group transition-all duration-200 border border-gray-200 dark:border-gray-700 hover:border-green-300 dark:hover:border-green-600"> <span class="icon-[mdi--calendar-clock-outline] text-3xl sm:text-4xl text-green-600 dark:text-green-400 mb-1 sm:mb-2 group-hover:text-green-700 dark:group-hover:text-green-300 transition-colors"></span> <span class="text-xs sm:text-sm text-gray-700 dark:text-gray-300 text-center group-hover:text-green-700 dark:group-hover:text-green-300 font-medium">عدت کیلکولیٹر</span> </a> <a href="https://www.darulifta.info/fidya-calculator" class="flex flex-col items-center p-2 sm:p-3 min-w-[100px] sm:min-w-[120px] bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-md group transition-all duration-200 border border-gray-200 dark:border-gray-700 hover:border-green-300 dark:hover:border-green-600"> <span class="icon-[mdi--hand-coin-outline] text-3xl sm:text-4xl text-green-600 dark:text-green-400 mb-1 sm:mb-2 group-hover:text-green-700 dark:group-hover:text-green-300 transition-colors"></span> <span class="text-xs sm:text-sm text-gray-700 dark:text-gray-300 text-center group-hover:text-green-700 dark:group-hover:text-green-300 font-medium">فدیہ کیلکولیٹر</span> </a> <a href="https://www.darulifta.info/awzan-calculator" class="flex flex-col items-center p-2 sm:p-3 min-w-[100px] sm:min-w-[120px] bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-md group transition-all duration-200 border border-gray-200 dark:border-gray-700 hover:border-green-300 dark:hover:border-green-600"> <span class="icon-[mdi--scale-balance] text-3xl sm:text-4xl text-green-600 dark:text-green-400 mb-1 sm:mb-2 group-hover:text-green-700 dark:group-hover:text-green-300 transition-colors"></span> <span class="text-xs sm:text-sm text-gray-700 dark:text-gray-300 text-center group-hover:text-green-700 dark:group-hover:text-green-300 font-medium">اوزانِ شرعیہ</span> </a> </div> </div> </section> <!-- Main Content Area --> <section class="bg-gray-50 dark:bg-gray-900 py-8 sm:py-12"> <div class="container mx-auto px-3 sm:px-4"> <div class="flex flex-col md:flex-row gap-4 sm:gap-6"> <!-- First column (Fihrist Dar ul-Ifta) --> <div class="w-full md:w-2/5 order-2 md:order-1"> <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-3 sm:p-4 shadow-md"> <!-- Dar list --> <div class="space-y-1"> <a href="https://www.darulifta.info/d/deoband" class="flex items-center py-2 sm:py-2.5 px-2 sm:px-3 text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-700/20 rounded-lg group transition-all duration-200"> <span class="icon-[mdi--mosque-outline] text-base sm:text-lg ml-2 sm:ml-3 text-green-500 dark:text-green-400 group-hover:text-green-600 dark:group-hover:text-green-300 flex-shrink-0"></span> <span class="flex-grow text-sm sm:text-base font-medium group-hover:text-green-700 dark:group-hover:text-green-200 truncate"> دار الافتاء دار العلوم دیوبند </span> <span class="icon-[mdi--chevron-left] text-gray-400 dark:text-gray-500 opacity-50 group-hover:opacity-100 group-hover:text-green-600 dark:group-hover:text-green-300 flex-shrink-0"></span> </a> <a href="https://www.darulifta.info/d/deobandw" class="flex items-center py-2 sm:py-2.5 px-2 sm:px-3 text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-700/20 rounded-lg group transition-all duration-200"> <span class="icon-[mdi--mosque-outline] text-base sm:text-lg ml-2 sm:ml-3 text-green-500 dark:text-green-400 group-hover:text-green-600 dark:group-hover:text-green-300 flex-shrink-0"></span> <span class="flex-grow text-sm sm:text-base font-medium group-hover:text-green-700 dark:group-hover:text-green-200 truncate"> دار الافتاء دار العلوم (وقف) دیوبند </span> <span class="icon-[mdi--chevron-left] text-gray-400 dark:text-gray-500 opacity-50 group-hover:opacity-100 group-hover:text-green-600 dark:group-hover:text-green-300 flex-shrink-0"></span> </a> <a href="https://www.darulifta.info/d/darululoomkarachi" class="flex items-center py-2 sm:py-2.5 px-2 sm:px-3 text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-700/20 rounded-lg group transition-all duration-200"> <span class="icon-[mdi--mosque-outline] text-base sm:text-lg ml-2 sm:ml-3 text-green-500 dark:text-green-400 group-hover:text-green-600 dark:group-hover:text-green-300 flex-shrink-0"></span> <span class="flex-grow text-sm sm:text-base font-medium group-hover:text-green-700 dark:group-hover:text-green-200 truncate"> دار الافتاء دار العلوم کراچی </span> <span class="icon-[mdi--chevron-left] text-gray-400 dark:text-gray-500 opacity-50 group-hover:opacity-100 group-hover:text-green-600 dark:group-hover:text-green-300 flex-shrink-0"></span> </a> <a href="https://www.darulifta.info/d/banuritown" class="flex items-center py-2 sm:py-2.5 px-2 sm:px-3 text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-700/20 rounded-lg group transition-all duration-200"> <span class="icon-[mdi--mosque-outline] text-base sm:text-lg ml-2 sm:ml-3 text-green-500 dark:text-green-400 group-hover:text-green-600 dark:group-hover:text-green-300 flex-shrink-0"></span> <span class="flex-grow text-sm sm:text-base font-medium group-hover:text-green-700 dark:group-hover:text-green-200 truncate"> دار الافتاء جامعۃ العلوم الاسلامیۃ بنوری ٹاؤن </span> <span class="icon-[mdi--chevron-left] text-gray-400 dark:text-gray-500 opacity-50 group-hover:opacity-100 group-hover:text-green-600 dark:group-hover:text-green-300 flex-shrink-0"></span> </a> <a href="https://www.darulifta.info/d/farooqia" class="flex items-center py-2 sm:py-2.5 px-2 sm:px-3 text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-700/20 rounded-lg group transition-all duration-200"> <span class="icon-[mdi--mosque-outline] text-base sm:text-lg ml-2 sm:ml-3 text-green-500 dark:text-green-400 group-hover:text-green-600 dark:group-hover:text-green-300 flex-shrink-0"></span> <span class="flex-grow text-sm sm:text-base font-medium group-hover:text-green-700 dark:group-hover:text-green-200 truncate"> دار الافتاء جامعہ فاروقیہ </span> <span class="icon-[mdi--chevron-left] text-gray-400 dark:text-gray-500 opacity-50 group-hover:opacity-100 group-hover:text-green-600 dark:group-hover:text-green-300 flex-shrink-0"></span> </a> <a href="https://www.darulifta.info/d/ashrafulmadaris" class="flex items-center py-2 sm:py-2.5 px-2 sm:px-3 text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-700/20 rounded-lg group transition-all duration-200"> <span class="icon-[mdi--mosque-outline] text-base sm:text-lg ml-2 sm:ml-3 text-green-500 dark:text-green-400 group-hover:text-green-600 dark:group-hover:text-green-300 flex-shrink-0"></span> <span class="flex-grow text-sm sm:text-base font-medium group-hover:text-green-700 dark:group-hover:text-green-200 truncate"> دار الافتاء اشرف المدارس کراچی </span> <span class="icon-[mdi--chevron-left] text-gray-400 dark:text-gray-500 opacity-50 group-hover:opacity-100 group-hover:text-green-600 dark:group-hover:text-green-300 flex-shrink-0"></span> </a> <a href="https://www.darulifta.info/d/haqqania" class="flex items-center py-2 sm:py-2.5 px-2 sm:px-3 text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-700/20 rounded-lg group transition-all duration-200"> <span class="icon-[mdi--mosque-outline] text-base sm:text-lg ml-2 sm:ml-3 text-green-500 dark:text-green-400 group-hover:text-green-600 dark:group-hover:text-green-300 flex-shrink-0"></span> <span class="flex-grow text-sm sm:text-base font-medium group-hover:text-green-700 dark:group-hover:text-green-200 truncate"> دار الافتاء جامعہ حقانیہ اکوڑہ خٹک </span> <span class="icon-[mdi--chevron-left] text-gray-400 dark:text-gray-500 opacity-50 group-hover:opacity-100 group-hover:text-green-600 dark:group-hover:text-green-300 flex-shrink-0"></span> </a> </div> <div class="flex justify-center mt-4 pt-3 border-t border-gray-200 dark:border-gray-700"> <a href="https://www.darulifta.info/dars" class="inline-flex items-center px-3 sm:px-4 py-2 text-sm font-medium text-green-700 dark:text-green-300 hover:text-green-800 dark:hover:text-green-200 bg-green-100 dark:bg-green-700/30 hover:bg-green-200 dark:hover:bg-green-600/40 rounded-lg transition-all duration-200"> تمام دارالافتاء <span class="icon-[mdi--arrow-left] mr-1 sm:mr-2 text-sm sm:text-base"></span> </a> </div> </div> </div> <!-- Second column (Selected Fatawa) --> <div class="w-full md:w-3/5 order-1 md:order-2 space-y-6"> <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-4 sm:p-5 shadow-md"> <h2 class="pb-3 mb-4 text-xl text-gray-800 dark:text-white border-b border-gray-200 dark:border-gray-700 flex items-center"> <span class="icon-[mdi--star-check-outline] text-yellow-500 mr-3 dark:text-yellow-400"></span> ان دنوں زیادہ دیکھے گئے فتاوی </h2> <div class="space-y-0"> <!-- Small Fatwa List Item Component --><div class="py-2.5 px-2 border-b border-gray-100 text-gray-700 hover:bg-gray-50 rounded-md transition-colors duration-150 group"> <a href="https://www.darulifta.info/question/ciIC/baad-ghyr-mslm-mmalk-my-msagd-mhdod-on-aor-nmazyo-ky-kthyr-taadad-k-pysh-nthr-ayk-msgd-my-kyy-gmaaaty-kran-ky-shraay-hythyt" class="block"> <div class="flex items-start gap-2"> <i class="icon-[mdi--book-open-variant] text-green-500 mt-1 flex-shrink-0 group-hover:text-green-600"></i> <div class="flex-grow min-w-0"> <h3 class="font-medium text-gray-800 group-hover:text-green-700"> بعض غیر مسلم ممالک میں مساجد محدود ہونے اور نمازیوں کی کثیر تعداد کے پیش نظر ایک مسجد میں کئی جماعتیں کرانے کی شرعی حیثیت </h3> <div class="flex items-center gap-2 mt-1 text-sm text-gray-500"> <span> فتاوی عثمانی جلد 2 - یونیکوڈ - غیر موافق للمطبوع • صفحہ 757 </span> </div> </div> </div> </a></div> <!-- Small Fatwa List Item Component --><div class="py-2.5 px-2 border-b border-gray-100 text-gray-700 hover:bg-gray-50 rounded-md transition-colors duration-150 group"> <a href="https://www.darulifta.info/d/usmaniapsh/fatwa/z7a/nisab-e-zakat-mein-zam-baal-ajza-ka-aasaan-tareeqa" class="block"> <div class="flex items-start gap-2"> <i class="icon-[mdi--file-document-outline] text-green-500 mt-1 flex-shrink-0 group-hover:text-green-600"></i> <div class="flex-grow min-w-0"> <h3 class="font-medium text-gray-800 group-hover:text-green-700"> نصاب زكوة ميں ضم بالاجزاء كا آسان طريقہ </h3> <div class="flex items-center gap-2 mt-1 text-sm text-gray-500"> <span>جامعہ عثمانیہ پشاور</span> <span>• فتویٰ: 1442700</span> </div> </div> </div> </a></div> <!-- Small Fatwa List Item Component --><div class="py-2.5 px-2 border-b border-gray-100 text-gray-700 hover:bg-gray-50 rounded-md transition-colors duration-150 group"> <a href="https://www.darulifta.info/d/banuritown/fatwa/sGC/adat-e-wafat-ke-dauran-shohar-ke-ghar-ke-ek-kamar-se-dusre-kamar-mein-shift-hone-ka-hukum" class="block"> <div class="flex items-start gap-2"> <i class="icon-[mdi--file-document-outline] text-green-500 mt-1 flex-shrink-0 group-hover:text-green-600"></i> <div class="flex-grow min-w-0"> <h3 class="font-medium text-gray-800 group-hover:text-green-700"> عدتِ وفات کے دوران شوہر کے گھر کے ایک کمرے سے دوسرے کمرے میں شفٹ ہونے کا حکم </h3> <div class="flex items-center gap-2 mt-1 text-sm text-gray-500"> <span>جامعہ بنوری ٹاؤن</span> <span>• فتویٰ: 144204200260</span> </div> </div> </div> </a></div> <!-- Small Fatwa List Item Component --><div class="py-2.5 px-2 border-b border-gray-100 text-gray-700 hover:bg-gray-50 rounded-md transition-colors duration-150 group"> <a href="https://www.darulifta.info/d/banuritown/fatwa/zj3/fajr-ki-namaz-se-pehle-100-marraba-subhanallah-wa-bihamdihi-subhanallah-al-azeem-astaghfirullah-parhna" class="block"> <div class="flex items-start gap-2"> <i class="icon-[mdi--file-document-outline] text-green-500 mt-1 flex-shrink-0 group-hover:text-green-600"></i> <div class="flex-grow min-w-0"> <h3 class="font-medium text-gray-800 group-hover:text-green-700"> حدیث صبح صادق سے فجر کی نماز تک سو (100) مرتبہ </h3> <div class="flex items-center gap-2 mt-1 text-sm text-gray-500"> <span>جامعہ بنوری ٹاؤن</span> <span>• فتویٰ: 144212202374</span> </div> </div> </div> </a></div> <!-- Small Fatwa List Item Component --><div class="py-2.5 px-2 border-b border-gray-100 text-gray-700 hover:bg-gray-50 rounded-md transition-colors duration-150 group"> <a href="https://www.darulifta.info/d/onlinefatawa/fatwa/mmi/adhan-ke-waqt-masjid-mein-record-shuda-adhan-chalana" class="block"> <div class="flex items-start gap-2"> <i class="icon-[mdi--file-document-outline] text-green-500 mt-1 flex-shrink-0 group-hover:text-green-600"></i> <div class="flex-grow min-w-0"> <h3 class="font-medium text-gray-800 group-hover:text-green-700"> اذان کے وقت مسجد میں ریکارڈ شدہ اذان چلانا </h3> <div class="flex items-center gap-2 mt-1 text-sm text-gray-500"> <span>جامعہ بنوریہ</span> <span>• فتویٰ: 27241</span> </div> </div> </div> </a></div> <!-- Small Fatwa List Item Component --><div class="py-2.5 px-2 border-b border-gray-100 text-gray-700 hover:bg-gray-50 rounded-md transition-colors duration-150 group"> <a href="https://www.darulifta.info/d/deoband/fatwa/wVt/al-firaqu-ashadd-min-al-mawt-kya-yeh-hadith-hai" class="block"> <div class="flex items-start gap-2"> <i class="icon-[mdi--file-document-outline] text-green-500 mt-1 flex-shrink-0 group-hover:text-green-600"></i> <div class="flex-grow min-w-0"> <h3 class="font-medium text-gray-800 group-hover:text-green-700"> اَلْفِراقُ اَشَدُّ مِنَ الْمَوتِ‏، كیا یہ حدیث ہے؟ </h3> <div class="flex items-center gap-2 mt-1 text-sm text-gray-500"> <span>دار العلوم دیوبند</span> <span>• فتویٰ: 604537</span> </div> </div> </div> </a></div> <!-- Small Fatwa List Item Component --><div class="py-2.5 px-2 border-b border-gray-100 text-gray-700 hover:bg-gray-50 rounded-md transition-colors duration-150 group"> <a href="https://www.darulifta.info/d/deoband/fatwa/dQm/agar-imam-sahab-fajr-ki-namaz-mein-wa-idha-raaw-tijara-aw-lahuwan-unfidu-ilaihi-ki-jagah-ilay-allah-padhe-to-namaz-ka-kya-hukum-hai" class="block"> <div class="flex items-start gap-2"> <i class="icon-[mdi--file-document-outline] text-green-500 mt-1 flex-shrink-0 group-hover:text-green-600"></i> <div class="flex-grow min-w-0"> <h3 class="font-medium text-gray-800 group-hover:text-green-700"> اگر امام صاحب فجر کی نماز میں وإذا رأوا تجارة أو لہوا انفضوا الیہا کی جگہ الی اللہ پڑھے تو نماز کا کیا حکم ہے؟ </h3> <div class="flex items-center gap-2 mt-1 text-sm text-gray-500"> <span>دار العلوم دیوبند</span> <span>• فتویٰ: 68820</span> </div> </div> </div> </a></div> <!-- Small Fatwa List Item Component --><div class="py-2.5 px-2 border-b border-gray-100 text-gray-700 hover:bg-gray-50 rounded-md transition-colors duration-150 group"> <a href="https://www.darulifta.info/d/banuritown/fatwa/zji/marha-naam-rakhna" class="block"> <div class="flex items-start gap-2"> <i class="icon-[mdi--file-document-outline] text-green-500 mt-1 flex-shrink-0 group-hover:text-green-600"></i> <div class="flex-grow min-w-0"> <h3 class="font-medium text-gray-800 group-hover:text-green-700"> مرحا نام رکھنا </h3> <div class="flex items-center gap-2 mt-1 text-sm text-gray-500"> <span>جامعہ بنوری ٹاؤن</span> <span>• فتویٰ: 144209200364</span> </div> </div> </div> </a></div> <!-- Small Fatwa List Item Component --><div class="py-2.5 px-2 border-b border-gray-100 text-gray-700 hover:bg-gray-50 rounded-md transition-colors duration-150 group"> <a href="https://www.darulifta.info/d/jamiaturrasheed/fatwa/5Im/medical-store-kholne-ke-liye-pharmacy-degree-ko-ijarah-par-dene-ka-hukm" class="block"> <div class="flex items-start gap-2"> <i class="icon-[mdi--file-document-outline] text-green-500 mt-1 flex-shrink-0 group-hover:text-green-600"></i> <div class="flex-grow min-w-0"> <h3 class="font-medium text-gray-800 group-hover:text-green-700"> میڈکل سٹور کھولنے کے لیے فارمیسی ڈگری کو اجارہ پر دینے کا حکم </h3> <div class="flex items-center gap-2 mt-1 text-sm text-gray-500"> <span>جامعۃ الرشید</span> <span>• فتویٰ: 81820</span> </div> </div> </div> </a></div> <!-- Small Fatwa List Item Component --><div class="py-2.5 px-2 border-b border-gray-100 text-gray-700 hover:bg-gray-50 rounded-md transition-colors duration-150 group"> <a href="https://www.darulifta.info/d/banuritown/fatwa/xAA/forex-trading-ka-hukm" class="block"> <div class="flex items-start gap-2"> <i class="icon-[mdi--file-document-outline] text-green-500 mt-1 flex-shrink-0 group-hover:text-green-600"></i> <div class="flex-grow min-w-0"> <h3 class="font-medium text-gray-800 group-hover:text-green-700"> فاریکس ٹریڈنگ (forex trading) کا حکم </h3> <div class="flex items-center gap-2 mt-1 text-sm text-gray-500"> <span>جامعہ بنوری ٹاؤن</span> <span>• فتویٰ: 144204200810</span> </div> </div> </div> </a></div> <!-- Small Fatwa List Item Component --><div class="py-2.5 px-2 border-b border-gray-100 text-gray-700 hover:bg-gray-50 rounded-md transition-colors duration-150 group"> <a href="https://www.darulifta.info/d/banuritown/fatwa/3Nn/kya-zamal-naam-rakhna-durust-hai" class="block"> <div class="flex items-start gap-2"> <i class="icon-[mdi--file-document-outline] text-green-500 mt-1 flex-shrink-0 group-hover:text-green-600"></i> <div class="flex-grow min-w-0"> <h3 class="font-medium text-gray-800 group-hover:text-green-700"> کیا زمل نام رکھنا درست ہے ؟ </h3> <div class="flex items-center gap-2 mt-1 text-sm text-gray-500"> <span>جامعہ بنوری ٹاؤن</span> <span>• فتویٰ: 144403100992</span> </div> </div> </div> </a></div> <!-- Small Fatwa List Item Component --><div class="py-2.5 px-2 border-b border-gray-100 text-gray-700 hover:bg-gray-50 rounded-md transition-colors duration-150 group"> <a href="https://www.darulifta.info/question/cif0/hdrt-aaly-ko-krm-all-og-kyo-kt-y" class="block"> <div class="flex items-start gap-2"> <i class="icon-[mdi--book-open-variant] text-green-500 mt-1 flex-shrink-0 group-hover:text-green-600"></i> <div class="flex-grow min-w-0"> <h3 class="font-medium text-gray-800 group-hover:text-green-700"> حضرت علی کو ’’کرم اللہ وجہہ‘‘ کیوں کہتے ہیں؟ </h3> <div class="flex items-center gap-2 mt-1 text-sm text-gray-500"> <span> کتاب النوازل جلد 2 - یونیکوڈ - غیر موافق للمطبوع • صفحہ 324 </span> </div> </div> </div> </a></div> <!-- Small Fatwa List Item Component --><div class="py-2.5 px-2 border-b border-gray-100 text-gray-700 hover:bg-gray-50 rounded-md transition-colors duration-150 group"> <a href="https://www.darulifta.info/d/jamiaturrasheed/fatwa/ylO/meri-taraf-farigh-ho-talaq-deta-hun-aur-aazad-ho-kehne-ka-hukm" class="block"> <div class="flex items-start gap-2"> <i class="icon-[mdi--file-document-outline] text-green-500 mt-1 flex-shrink-0 group-hover:text-green-600"></i> <div class="flex-grow min-w-0"> <h3 class="font-medium text-gray-800 group-hover:text-green-700"> میری طرف فارغ ہو، طلاق دیتا ہوں اور آزاد ہو کہنے کا حکم </h3> <div class="flex items-center gap-2 mt-1 text-sm text-gray-500"> <span>جامعۃ الرشید</span> <span>• فتویٰ: 70518</span> </div> </div> </div> </a></div> <!-- Small Fatwa List Item Component --><div class="py-2.5 px-2 border-b border-gray-100 text-gray-700 hover:bg-gray-50 rounded-md transition-colors duration-150 group"> <a href="https://www.darulifta.info/d/jamiaturrasheed/fatwa/ngb/nikah-mein-ijaab-wa-qabool-ka-sahih-tareeqa" class="block"> <div class="flex items-start gap-2"> <i class="icon-[mdi--file-document-outline] text-green-500 mt-1 flex-shrink-0 group-hover:text-green-600"></i> <div class="flex-grow min-w-0"> <h3 class="font-medium text-gray-800 group-hover:text-green-700"> نکاح میں ایجا ب وقبول کا صحیح طریقہ </h3> <div class="flex items-center gap-2 mt-1 text-sm text-gray-500"> <span>جامعۃ الرشید</span> <span>• فتویٰ: 56589</span> </div> </div> </div> </a></div> <!-- Small Fatwa List Item Component --><div class="py-2.5 px-2 border-b border-gray-100 text-gray-700 hover:bg-gray-50 rounded-md transition-colors duration-150 group"> <a href="https://www.darulifta.info/d/jamiaturrasheed/fatwa/5TM/crypto-currency-mein-spot-trading-ka-hukum" class="block"> <div class="flex items-start gap-2"> <i class="icon-[mdi--file-document-outline] text-green-500 mt-1 flex-shrink-0 group-hover:text-green-600"></i> <div class="flex-grow min-w-0"> <h3 class="font-medium text-gray-800 group-hover:text-green-700"> کرپٹو کرنسی میں اسپاٹ ٹریڈنگ کا حکم </h3> <div class="flex items-center gap-2 mt-1 text-sm text-gray-500"> <span>جامعۃ الرشید</span> <span>• فتویٰ: 80493</span> </div> </div> </div> </a></div> </div> <div class="flex justify-center mt-4 pt-3 border-t border-gray-200 dark:border-gray-700"> <a href="https://www.darulifta.info/selected_fatawa" class="inline-flex items-center px-4 py-2 text-sm font-medium text-blue-600 hover:text-blue-700 bg-blue-100 hover:bg-blue-200 rounded-lg transition-all duration-200 dark:text-blue-400 dark:hover:text-blue-300 dark:bg-blue-700/30 dark:hover:bg-blue-600/40"> مزید <span class="icon-[mdi--arrow-left] mr-2 text-sm"></span> </a> </div> </div> </div> </div> </div> </section> <!-- Enhanced Counter Animation Script --> <script> document.addEventListener('DOMContentLoaded', function() { var countElements = document.querySelectorAll('.count'); countElements.forEach(function(element) { var counter = 0; var targetCount = parseInt(element.textContent.replace(/,/g, ''), 10); var duration = 2000; var jumpAmount = Math.ceil(targetCount / (duration / 50)); var animation = setInterval(function() { counter += jumpAmount; if (counter >= targetCount) { counter = targetCount; clearInterval(animation); } element.textContent = formatNumberWithCommas(counter); }, 50); }); function formatNumberWithCommas(number) { return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } }); </script> </div> </main> <!-- Scroll to Top Button --> <button id="scroll-top" class="fixed left-4 bottom-4 z-50 w-12 h-12 rounded-full shadow-lg flex items-center justify-center transition-all duration-300 hover:shadow-xl hover:-translate-y-1 bg-green-600 dark:bg-green-700 text-white dark:text-green-50 opacity-0 pointer-events-none"> <span class="icon-[mdi--arrow-up] text-xl"></span> </button> <!-- Modern Footer --> <footer class="bg-gradient-to-br from-gray-900 to-gray-950 dark:from-gray-950 dark:to-black text-gray-200 border-t-2 border-green-600 dark:border-green-500"> <div class="max-w-7xl mx-auto py-8 px-4"> <!-- Main Grid --> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <!-- About Section --> <div class="space-y-6"> <div class="flex items-center justify-start gap-3"> <img src="https://www.darulifta.info/public/images/nav-bar-logo.png" class="h-10" alt="Logo" > <h4 class="text-xl font-bold text-white">دار الافتاء ڈاٹ انفو</h4> </div> <ul class="space-y-3"> <li class="flex items-start gap-3 group"> <span class="icon-[mdi--check-circle] text-green-400 mt-1 group-hover:scale-110 transition-transform flex-shrink-0"></span> <span class="text-gray-300 text-sm">مختلف دار الافتاؤں کے فتاوی سے استفادہ کرنے کے لئے ایک منفرد سرچ انجن</span> </li> <li class="flex items-start gap-3 group"> <span class="icon-[mdi--check-circle] text-green-400 mt-1 group-hover:scale-110 transition-transform flex-shrink-0"></span> <span class="text-gray-300 text-sm">دنیا بھر کے دار الافتاؤں کی ویب سائٹس پر موجود فتاوی یکجا</span> </li> <li class="flex items-start gap-3 group"> <span class="icon-[mdi--check-circle] text-green-400 mt-1 group-hover:scale-110 transition-transform flex-shrink-0"></span> <span class="text-gray-300 text-sm">یونیکوڈ، پی ڈی ایف فارمیٹ میں دستیاب</span> </li> <li class="flex items-start gap-3 group"> <span class="icon-[mdi--check-circle] text-green-400 mt-1 group-hover:scale-110 transition-transform flex-shrink-0"></span> <span class="text-gray-300 text-sm">مستند با حوالہ فتاوی</span> </li> </ul> </div> <!-- Quick Links --> <div class="space-y-6"> <h4 class="text-lg text-white flex items-center gap-2"> <span class="icon-[mdi--link-variant] text-green-400"></span> مفید لنکس اور خدمات </h4> <div class="grid grid-cols-1"> <a href="https://www.darulifta.info/zakat-calculator" class="flex items-center gap-3 text-gray-300 hover:text-green-400 transition-all group p-2 rounded-lg hover:bg-gray-800/50"> <span class="icon-[mdi--calculator-variant] text-lg text-green-400 group-hover:scale-110 transition-transform flex-shrink-0"></span> <span class="text-sm">زکوۃ کیلکولیٹر</span> </a> <a href="https://www.darulifta.info/edda-calculator" class="flex items-center gap-3 text-gray-300 hover:text-green-400 transition-all group p-2 rounded-lg hover:bg-gray-800/50"> <span class="icon-[mdi--calendar-clock] text-lg text-green-400 group-hover:scale-110 transition-transform flex-shrink-0"></span> <span class="text-sm">عدت وفات کیلکولیٹر</span> </a> <a href="https://www.darulifta.info/fidya-calculator" class="flex items-center gap-3 text-gray-300 hover:text-green-400 transition-all group p-2 rounded-lg hover:bg-gray-800/50"> <span class="icon-[mdi--hand-coin] text-lg text-green-400 group-hover:scale-110 transition-transform flex-shrink-0"></span> <span class="text-sm">فدیہ کیلکولیٹر</span> </a> <a href="https://www.darulifta.info/awzan-calculator" class="flex items-center gap-3 text-gray-300 hover:text-green-400 transition-all group p-2 rounded-lg hover:bg-gray-800/50"> <span class="icon-[mdi--scale-balance] text-lg text-green-400 group-hover:scale-110 transition-transform flex-shrink-0"></span> <span class="text-sm">اوزان شرعیہ کیلکولیٹر</span> </a> <a href="https://t.me/FatwaBot" target="_blank" rel="noopener" class="flex items-center gap-3 text-gray-300 hover:text-green-400 transition-all group p-2 rounded-lg hover:bg-gray-800/50"> <span class="icon-[mdi--robot-happy] text-lg text-green-400 group-hover:scale-110 transition-transform flex-shrink-0"></span> <span class="text-sm">تلاش فتوی ٹیلی گرام بوٹ</span> </a> </div> </div> <!-- Contact Form --> <div class="space-y-6"> <h4 class="text-lg text-white flex items-center gap-2"> <span class="icon-[mdi--message-text] text-green-400"></span> تعارف ورابطہ </h4> <div class="grid grid-cols-1"> <a href="https://www.darulifta.info/about" class="flex items-center gap-3 text-gray-300 hover:text-green-400 transition-all group p-2 rounded-lg hover:bg-gray-800/50"> <span class="icon-[mdi--information] text-lg text-green-400 group-hover:scale-110 transition-transform flex-shrink-0"></span> <span class="text-sm">تعارف</span> </a> <a href="https://www.darulifta.info/contact-us" class="flex items-center gap-3 text-gray-300 hover:text-green-400 transition-all group p-2 rounded-lg hover:bg-gray-800/50"> <span class="icon-[mdi--email] text-lg text-green-400 group-hover:scale-110 transition-transform flex-shrink-0"></span> <span class="text-sm">رابطہ کریں</span> </a> <a href="https://www.darulifta.info/ask" class="flex items-center gap-3 text-gray-300 hover:text-green-400 transition-all group p-2 rounded-lg hover:bg-gray-800/50"> <span class="icon-[mdi--help-circle] text-lg text-green-400 group-hover:scale-110 transition-transform flex-shrink-0"></span> <span class="text-sm">سوال پوچھیں</span> </a> </div> <div class="pt-4"> <a href="https://play.google.com/store/apps/details?id=info.darulifta.lite" target="_blank" rel="noopener" class="inline-block"> <img class="h-8 hover:scale-105 transition-transform" src="https://www.darulifta.info/public/images/google_play_icon.png" alt="Darulifta.info Google Play" > </a> </div> </div> </div> <!-- Bottom Section --> <div class="mt-8 pt-6 border-t border-gray-800 dark:border-gray-700 space-y-4"> <!-- Social Links --> <div class="flex justify-center gap-4"> <a href="https://t.me/darulifta_info" target="_blank" rel="noopener" class="text-gray-400 hover:text-green-400 transition-colors duration-200"> <span class="icon-[mdi--telegram] text-2xl"></span> </a> <a href="https://fb.com/darulifta.info" target="_blank" rel="noopener" class="text-gray-400 hover:text-green-400 transition-colors duration-200"> <span class="icon-[mdi--facebook] text-2xl"></span> </a> <a href="https://whatsapp.com/channel/0029VaeVp2pEgGfWO6raqX2J" target="_blank" rel="noopener" class="text-gray-400 hover:text-green-400 transition-colors duration-200"> <span class="icon-[mdi--whatsapp] text-2xl"></span> </a> </div> <!-- Description --> <div class="max-w-4xl mx-auto text-center"> <p class="text-gray-400 text-sm leading-relaxed"> دار الافتاء ڈاٹ انفو کا بنیادی مقصد اسلامی علوم، خاص طور پر فقہی مسائل اور فتاوی کو زیادہ سے زیادہ لوگوں تک پہنچانا ہے۔ ہمارا پلیٹ فارم مکمل طور پر غیر منافع بخش ہے۔ ہم کسی بھی مواد کو مالی فائدے کے لیے استعمال نہیں کرتے۔ تفصیل کے لئے <a href="https://www.darulifta.info/about" class="text-green-400 hover:text-green-300 underline decoration-dotted underline-offset-4">تعارف کا صفحہ</a> دیکھیں۔ </p> </div> <!-- Copyright --> <div class="text-center pt-4"> <p class="text-gray-500 text-xs"> Powered by <a href="https://www.darulifta.info" class="text-green-400 hover:text-green-300">Darulifta.info</a> </p> </div> </div> </div> </footer> <!-- Modern JavaScript for Enhanced UX --> <script> // Mobile Menu Functions let mobileMenuOpen = false; let showScrollTop = false; let showHeader = true; let lastScroll = 0; function toggleMobileMenu() { mobileMenuOpen = !mobileMenuOpen; const overlay = document.getElementById('mobile-overlay'); const menu = document.getElementById('mobile-menu'); const menuIcon = document.getElementById('menu-icon'); if (mobileMenuOpen) { overlay.classList.remove('opacity-0', 'pointer-events-none'); overlay.classList.add('opacity-100'); menu.classList.remove('translate-x-full'); menu.classList.add('translate-x-0'); menuIcon.className = 'icon-[mdi--close] text-2xl sm:text-3xl'; document.body.style.overflow = 'hidden'; } else { closeMobileMenu(); } } function closeMobileMenu() { if (mobileMenuOpen) { mobileMenuOpen = false; const overlay = document.getElementById('mobile-overlay'); const menu = document.getElementById('mobile-menu'); const menuIcon = document.getElementById('menu-icon'); overlay.classList.add('opacity-0', 'pointer-events-none'); overlay.classList.remove('opacity-100'); menu.classList.add('translate-x-full'); menu.classList.remove('translate-x-0'); menuIcon.className = 'icon-[mdi--menu] text-2xl sm:text-3xl'; document.body.style.overflow = ''; } } // Scroll Management function scrollToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); } function handleScroll() { const scrollTop = window.pageYOffset || document.documentElement.scrollTop; const scrollButton = document.getElementById('scroll-top'); const header = document.getElementById('main-header'); // Show/hide scroll to top button if (scrollTop > 300 && !showScrollTop) { showScrollTop = true; scrollButton.classList.remove('opacity-0', 'pointer-events-none'); scrollButton.classList.add('opacity-100'); } else if (scrollTop <= 300 && showScrollTop) { showScrollTop = false; scrollButton.classList.add('opacity-0', 'pointer-events-none'); scrollButton.classList.remove('opacity-100'); } // Auto-hide header on scroll if (scrollTop <= 60) { showHeader = true; } else if (scrollTop < lastScroll) { showHeader = true; } else { showHeader = false; } if (showHeader) { header.classList.remove('-translate-y-full'); header.classList.add('translate-y-0'); } else { header.classList.add('-translate-y-full'); header.classList.remove('translate-y-0'); } lastScroll = scrollTop <= 0 ? 0 : scrollTop; } // Event Listeners document.addEventListener('DOMContentLoaded', function() { // Scroll events window.addEventListener('scroll', handleScroll, { passive: true }); // Resize handler for mobile menu window.addEventListener('resize', function() { if (window.innerWidth >= 1024 && mobileMenuOpen) { closeMobileMenu(); } }); // Click scroll to top document.getElementById('scroll-top').addEventListener('click', scrollToTop); // Click outside mobile menu to close document.getElementById('mobile-overlay').addEventListener('click', closeMobileMenu); // ESC key to close mobile menu document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && mobileMenuOpen) { closeMobileMenu(); } }); }); </script> <!-- Additional CSS Styles --> <style> /* Navigation Styles */ .nav-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.75rem; font-weight: 500; color: #166534; background: transparent; transition: all 0.2s ease; } .nav-link:hover { background: #dcfce7; color: #15803d; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(34, 197, 94, 0.2); } .mobile-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: 0.75rem; font-weight: 500; background: transparent; transition: all 0.2s ease; width: 100%; text-align: right; } .mobile-link:hover { background: #dcfce7; transform: translateX(-4px); } /* Dark mode styles */ @media (prefers-color-scheme: dark) { .nav-link { color: #6ee7b7; } .nav-link:hover { background: #1e293b; color: #bbf7d0; box-shadow: 0 4px 8px rgba(20, 83, 74, 0.3); } .mobile-link:hover { background: #1e293b; } } /* Performance optimizations */ .backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Smooth transitions */ header { will-change: transform; } /* Print styles */ @media print { header, footer, #mobile-overlay, #mobile-menu, #scroll-top { display: none !important; } main { margin-top: 0 !important; padding-top: 0 !important; } } </style> <!-- Performance CSS --> <link rel="stylesheet" href="https://www.darulifta.info/public/css/performance.css" media="print" onload="this.media='all'"> <!-- Service Worker Registration --> <script> // Register service worker for offline support and caching if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/sw.js') .then(function(registration) { console.log('SW registered: ', registration); }) .catch(function(registrationError) { console.log('SW registration failed: ', registrationError); }); }); } // Add to home screen prompt let deferredPrompt; window.addEventListener('beforeinstallprompt', (e) => { deferredPrompt = e; }); </script> <!-- Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-726VLKZHYB"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-726VLKZHYB'); </script> </body></html> 
