/* home */

    /* ==============================
       المتغيّرات
    ============================== */
    :root {
      --azhar-navy: #0b1b2a;
      --azhar-navy-dark: #0a1621;
      --azhar-teal: #0f766e;
      --azhar-teal-hover: #0d5f59;
      --azhar-bg: #f3f4f6;
      --azhar-light: #f0f4f3;
      --azhar-white: #fefefe;
    }

    /* ==============================
       الإعدادات الأساسية
    ============================== */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    body {
      font-family: 'Amiri', 'Tahoma', 'Segoe UI', Arial, sans-serif;
      background-color: var(--azhar-bg);
      color: #333;
    }

    /* ==============================
       Navbar
    ============================== */
    .navbar-azhar {
      background: var(--azhar-navy);
      padding: 0.8rem 0;
    }

    .navbar-azhar .navbar-brand {
      color: var(--azhar-white);
      font-weight: 700;
      font-size: 1.05rem;
      display: flex;
      align-items: center;
    }

    .navbar-azhar .nav-link {
      color: rgba(255, 255, 255, 0.95);
      font-size: 0.95rem;
      padding: 0.5rem 1rem;
      border-radius: 4px;
      transition: background 0.2s;
    }

    .navbar-azhar .nav-link:hover,
    .navbar-azhar .nav-link.active {
      color: #fff;
      background: rgba(255, 255, 255, 0.1);
    }

    .navbar-azhar .dropdown-menu {
      border: none;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    /* ==============================
       Hero Section
    ============================== */
      .hero-section {
          background: linear-gradient(rgba(11, 27, 42, 0.75), rgba(11, 27, 42, 0.7)), url('images/FatawaBankBanner.png') center / cover no-repeat;
          padding: 4rem 0 3rem;
          min-height: 250px;
      }

    .hero-title {
      color: #fff;
      font-size: 2.2rem;
      font-weight: 700;
      margin-bottom: 1.5rem;
      text-align: center;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    }

    .hero-title+p {
      color: rgba(255, 255, 255, 0.95);
      font-size: 1.5rem;
      font-weight: 600;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    }


    .search-box {
      max-width: 600px;
      margin: 0 auto 1rem;
      border-radius: 30px;
    }

    .search-box .form-control {
      background: rgba(255, 255, 255, 0.95);
      border: 1px solid rgba(255, 255, 255, 0.9);
      border-radius: 8px;
      padding: 0.75rem 1rem;
      color: #333;
    }

    .search-box .btn-search {
      background: var(--azhar-navy);
      color: var(--azhar-white);
      border: none;
      border-radius: 8px;
      padding: 0.75rem 2rem;
      font-weight: 600;
      transition: background 0.2s;
    }

    .search-box .btn-search:hover {
      background: var(--azhar-navy-dark);
    }

    /* ==============================
       أزرار عامة
    ============================== */
    .btn-azhar {
      background: var(--azhar-navy);
      border: 2px solid var(--azhar-navy);
      color: var(--azhar-white);
      font-weight: 600;
      border-radius: 8px;
      transition: all 0.2s;
    }

    .btn-azhar:hover {
      background: var(--azhar-navy-dark);
      border-color: var(--azhar-navy-dark);
      color: var(--azhar-white);
      transform: translateY(-1px);
    }

    /* ==============================
       Sidebar
    ============================== */
    .sidebar-actions {
      position: static;
      top: 1rem;
    }

    .sidebar-actions .btn {
      width: 100%;
      text-align: right;
      padding: 0.8rem 1.2rem;
      margin-bottom: 0.8rem;
      border-radius: 8px;
      font-size: 0.95rem;
      font-weight: 600;
      border: 2px solid #96804d;
      color: var(--azhar-white);
      background: #96804d;
      transition: all 0.2s;
    }

    .sidebar-actions .btn:hover {
      background: #7f6b3f;
      border-color: #7f6b3f;
    }

    .sidebar-actions .btn i {
      margin-left: 0.5rem;
    }

    /* ==============================
       عنوان الأقسام
    ============================== */
    .section-title {
      color: var(--azhar-teal);
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 1.5rem;
      padding-bottom: 0.5rem;
      border-bottom: 3px solid var(--azhar-teal);
      display: block;
    }

    /* ==============================
   Carousel
============================== */
    .carousel-section {
      position: relative;
      background:
        radial-gradient(circle at top left, rgba(15, 118, 110, 0.16), transparent 40%),
        linear-gradient(135deg, #ffffff 0%, #f3f8f7 100%);
      border: 1px solid rgba(15, 118, 110, 0.18);
      border-radius: 24px;
      padding: 1.5rem;
      margin-bottom: 2rem;
      box-shadow: 0 18px 40px rgba(11, 27, 42, 0.08);
      overflow: hidden;
    }

    .carousel-section::before {
      content: "";
      position: absolute;
      inset: 0 auto auto 0;
      width: 140px;
      height: 140px;
      background: radial-gradient(circle, rgba(11, 27, 42, 0.1), transparent 70%);
      pointer-events: none;
    }

    .carousel-header {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 1.25rem;
    }

    .carousel-kicker {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      color: var(--azhar-teal);
      background: rgba(15, 118, 110, 0.1);
      border: 1px solid rgba(15, 118, 110, 0.16);
      border-radius: 999px;
      padding: 0.38rem 0.85rem;
      font-size: 0.84rem;
      font-weight: 700;
      margin-bottom: 0.85rem;
    }

    .carousel-header-copy {
      max-width: 620px;
    }

    .carousel-header-copy .section-title {
      margin-bottom: 0.65rem;
      border-bottom: none;
      padding-bottom: 0;
      color: var(--azhar-navy);
      font-size: 1.85rem;
    }

    .carousel-header-copy p {
      margin: 0;
      color: #5b6774;
      line-height: 1.9;
      font-size: 0.98rem;
    }

    .carousel-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.6rem 0.95rem;
      border-radius: 16px;
      background: var(--azhar-navy);
      color: #fff;
      font-size: 0.92rem;
      font-weight: 700;
      box-shadow: 0 12px 24px rgba(11, 27, 42, 0.16);
      white-space: nowrap;
    }

    .carousel-fullwidth {
      position: relative;
      width: 100%;
      z-index: 1;
    }

    .carousel-fullwidth .carousel-inner {
      border-radius: 22px;
      overflow: hidden;
    }

    .carousel-fatwa {
      position: relative;
      background:
        linear-gradient(135deg, rgba(11, 27, 42, 0.98), rgba(11, 27, 42, 0.82)),
        linear-gradient(120deg, rgba(15, 118, 110, 0.25), transparent 55%);
      color: #fff;
      border-radius: 22px;
      padding: 2.2rem 5.25rem 2rem;
      min-height: 260px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .carousel-fatwa::after {
      content: "";
      position: absolute;
      inset: auto 2rem 2rem auto;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(15, 118, 110, 0.22), transparent 68%);
      pointer-events: none;
    }

    .carousel-fatwa h5 {
      color: #fff;
      font-size: 1.55rem;
      line-height: 1.7;
      font-weight: 700;
      margin-bottom: 0.9rem;
      max-width: 85%;
    }

    .carousel-fatwa .category-tag {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      width: fit-content;
      background: rgba(255, 255, 255, 0.12);
      color: rgba(255, 255, 255, 0.92);
      border: 1px solid rgba(255, 255, 255, 0.14);
      padding: 0.45rem 0.95rem;
      border-radius: 999px;
      font-size: 0.84rem;
      margin-bottom: 1rem;
      backdrop-filter: blur(8px);
    }

    .carousel-fatwa p {
      color: rgba(255, 255, 255, 0.84);
      line-height: 2;
      font-size: 1rem;
      margin-bottom: 1.35rem;
      max-width: 78%;
    }

    .carousel-fatwa .btn-azhar {
      align-self: flex-start;
      background: #fff;
      border-color: #fff;
      color: var(--azhar-navy);
      padding: 0.72rem 1.15rem;
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
    }

    .carousel-fatwa .btn-azhar:hover {
      background: var(--azhar-light);
      border-color: var(--azhar-light);
      color: var(--azhar-navy);
    }

    .carousel-fullwidth .carousel-control-prev,
    .carousel-fullwidth .carousel-control-next {
      width: 48px;
      height: 48px;
      background: rgba(255, 255, 255, 0.14);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 16px;
      top: 50%;
      transform: translateY(-50%);
      opacity: 1;
      backdrop-filter: blur(8px);
      transition: transform 0.2s, background 0.2s, border-color 0.2s;
    }

    .carousel-fullwidth .carousel-control-prev:hover,
    .carousel-fullwidth .carousel-control-next:hover {
      background: rgba(255, 255, 255, 0.22);
      border-color: rgba(255, 255, 255, 0.26);
      transform: translateY(-50%) scale(1.04);
    }

    .carousel-fullwidth .carousel-control-prev-icon,
    .carousel-fullwidth .carousel-control-next-icon {
      width: 1rem;
      height: 1rem;
    }

    .carousel-fullwidth .carousel-control-prev {
      right: 1.25rem;
      left: auto;
    }

    .carousel-fullwidth .carousel-control-next {
      left: 1.25rem;
      right: auto;
    }

    @media (max-width: 991px) {
      .carousel-header {
        flex-direction: column;
        align-items: stretch;
      }

      .carousel-badge {
        width: fit-content;
      }

      .carousel-fatwa {
        padding: 2rem 4.5rem 1.9rem;
      }

      .carousel-fatwa h5,
      .carousel-fatwa p {
        max-width: 100%;
      }
    }

    @media (max-width: 768px) {
      .carousel-section {
        border-radius: 20px;
        padding: 1.15rem;
      }

      .carousel-header-copy .section-title {
        font-size: 1.45rem;
      }

      .carousel-fatwa {
        min-height: auto;
        padding: 1.55rem 1.35rem 4.5rem;
      }

      .carousel-fullwidth .carousel-control-prev,
      .carousel-fullwidth .carousel-control-next {
        width: 42px;
        height: 42px;
        top: auto;
        bottom: 1rem;
        transform: none;
      }

      .carousel-fullwidth .carousel-control-prev:hover,
      .carousel-fullwidth .carousel-control-next:hover {
        transform: scale(1.04);
      }

      .carousel-fullwidth .carousel-control-prev {
        right: 1rem;
      }

      .carousel-fullwidth .carousel-control-next {
        left: 1rem;
      }
    }


    /* ==============================
       تصنيفات الفتاوى
    ============================== */
    .category-card {
      background: #fff;
      border: 2px solid #e0e0e0;
      border-radius: 10px;
      padding: 1.5rem;
      text-align: center;
      transition: all 0.3s;
      height: 100%;
    }

    .category-card:hover {
      border-color: var(--azhar-teal);
      transform: translateY(-5px);
      box-shadow: 0 5px 15px rgba(15, 118, 110, 0.2);
    }

    .category-card h3 {
      color: var(--azhar-teal);
      font-size: 1.1rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
    }

    .category-card p {
      color: #777;
      font-size: 0.9rem;
      margin: 0;
    }

    /* ==============================
   Footer
============================== */
    .footer-azhar-new {
      background: var(--azhar-navy);
      color: rgba(255, 255, 255, 0.88);
      font-size: 0.93rem;
    }

    .footer-main {
      padding: 3rem 0 2rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* عناوين الأعمدة */
    .footer-col-title {
      color: var(--azhar-teal);
      font-size: 1.25rem;
      font-weight: 700;
      margin-bottom: 1.25rem;
      font-family: 'Amiri', serif;
    }

    /* الرقم / كلمة بارزة */
    .footer-phone {
      color: var(--azhar-teal);
      font-size: 2rem;
      font-weight: 700;
      letter-spacing: 2px;
      margin-bottom: 1.5rem;
      display: block;
    }

    /* روابط الفوتر */
    .footer-links-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .footer-links-list li {
      margin-bottom: 0.55rem;
    }

    .footer-links-list a {
      color: rgba(255, 255, 255, 0.82);
      text-decoration: none;
      transition: color 0.2s;
    }

    .footer-links-list a:hover {
      color: #fff;
    }

    /* أيقونات السوشيال */
    .footer-social {
      display: flex;
      gap: 0.9rem;
      margin-top: 0.5rem;
    }

    .footer-social a {
      width: 40px;
      height: 40px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.85);
      font-size: 1.1rem;
      text-decoration: none;
      transition: all 0.2s;
    }

    .footer-social a:hover {
      background: var(--azhar-teal);
      border-color: var(--azhar-teal);
      color: #fff;
    }

    /* الشريط السفلي */
    .footer-bottom {
      background: var(--azhar-teal);
      padding: 0.7rem 1rem;
      text-align: center;
    }

    .footer-bottom p {
      color: rgba(255, 255, 255, 0.95);
      margin: 0;
      font-size: 0.88rem;
    }

    /* Responsive */
    @media (max-width: 767px) {
      .footer-col-title {
        font-size: 1.1rem;
      }

      .footer-phone {
        font-size: 1.6rem;
      }
    }


    /* ==============================
       Responsive
    ============================== */
    @media (max-width: 991px) {
      .sidebar-actions {
        position: static;
        margin-bottom: 2rem;
      }

      .carousel-fullwidth .carousel-control-prev {
        right: 5px;
      }

      .carousel-fullwidth .carousel-control-next {
        left: 5px;
      }
    }

    /* ==============================
   بطاقة مواقيت الصلاة
============================== */
    .prayer-card {
      border-radius: 10px;
      overflow: hidden;
      border: 2px solid var(--azhar-navy);
      background: #fff;
    }

    .prayer-card-header {
      background: var(--azhar-navy);
      color: #fff;
      font-weight: 700;
      font-size: 1rem;
      padding: 0.75rem 1rem;
      text-align: right;
    }

    .prayer-card-body {
      padding: 0.4rem 0;
    }

    .prayer-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.45rem 1rem;
      font-size: 0.92rem;
      border-bottom: 1px solid #f0f0f0;
      transition: background 0.2s;
    }

    .prayer-row:last-child {
      border-bottom: none;
    }

    .prayer-row .prayer-name {
      color: #444;
      font-weight: 600;
    }

    .prayer-row .prayer-time {
      color: var(--azhar-teal);
      font-weight: 700;
      font-family: 'Amiri', serif;
      font-size: 0.95rem;
      direction: ltr;
    }

    /* الصلاة الحالية */
    .prayer-row.active-prayer {
      background: var(--azhar-navy);
      border-radius: 6px;
      margin: 0 0.4rem;
      padding: 0.45rem 0.6rem;
    }

    .prayer-row.active-prayer .prayer-name {
      color: #fff;
    }

    .prayer-row.active-prayer .prayer-time {
      color: var(--azhar-teal);
    }
  
/* search */

    :root {
      --azhar-navy: #0b1b2a;
      --azhar-navy-dark: #0a1621;
      --azhar-teal: #0f766e;
      --azhar-teal-hover: #0d5f59;
      --azhar-bg: #f3f4f6;
      --azhar-light: #f0f4f3;
      --azhar-white: #fefefe;
    }

    *, *::before, *::after { box-sizing: border-box; }

    body {
      font-family: 'Amiri', 'Tahoma', 'Segoe UI', Arial, sans-serif;
      background-color: var(--azhar-bg);
      color: #333;
    }

    /* Navbar */
    .navbar-azhar { background: var(--azhar-navy); padding: 0.8rem 0; }
    .navbar-azhar .navbar-brand { color: var(--azhar-white); font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; }
    .navbar-azhar .nav-link { color: rgba(255,255,255,0.95); font-size: 0.95rem; padding: 0.5rem 1rem; border-radius: 4px; transition: background 0.2s; }
    .navbar-azhar .nav-link:hover, .navbar-azhar .nav-link.active { color: #fff; background: rgba(255,255,255,0.1); }
    .navbar-azhar .dropdown-menu { border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

    /* Search Hero Bar */
    .search-hero {
      background: var(--azhar-navy);
      padding: 2rem 0;
    }
    .search-hero .form-control {
      border-radius: 8px;
      padding: 0.8rem 1.1rem;
      font-size: 1rem;
      border: none;
    }
    .search-hero .btn-search {
      background: var(--azhar-teal);
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 0.8rem 2rem;
      font-weight: 600;
      font-size: 1rem;
      transition: background 0.2s;
    }
    .search-hero .btn-search:hover { background: var(--azhar-teal-hover); }
    .search-hero .search-label {
      color: rgba(255,255,255,0.85);
      font-size: 0.95rem;
      margin-bottom: 0.6rem;
    }

    /* Section Title */
    .section-title {
      color: var(--azhar-teal);
      font-size: 1.3rem;
      font-weight: 700;
      margin-bottom: 1.2rem;
      padding-bottom: 0.5rem;
      border-bottom: 3px solid var(--azhar-teal);
    }

    /* Results Info Bar */
    .results-bar {
      background: #fff;
      border-radius: 8px;
      padding: 0.75rem 1.2rem;
      margin-bottom: 1.2rem;
      border: 1px solid #e0e0e0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    .results-bar .results-count {
      color: #555;
      font-size: 0.95rem;
    }
    .results-bar .results-count strong { color: var(--azhar-teal); }
    .results-bar .sort-select {
      border: 1px solid #ddd;
      border-radius: 6px;
      padding: 0.3rem 0.7rem;
      font-size: 0.88rem;
      color: #444;
      cursor: pointer;
    }

    /* Fatwa Result Card */
    .fatwa-card {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      padding: 1.4rem 1.6rem;
      margin-bottom: 1rem;
      transition: box-shadow 0.25s, border-color 0.25s;
      cursor: pointer;
      text-decoration: none;
      display: block;
      color: inherit;
    }
    .fatwa-card:hover {
      box-shadow: 0 4px 16px rgba(15,118,110,0.13);
      border-color: var(--azhar-teal);
      color: inherit;
    }
    .fatwa-card .fatwa-title {
      color: var(--azhar-navy);
      font-size: 1.1rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      line-height: 1.5;
    }
    .fatwa-card .fatwa-title mark {
      background: rgba(15,118,110,0.15);
      color: var(--azhar-teal);
      padding: 0 2px;
      border-radius: 3px;
    }
    .fatwa-card .fatwa-excerpt {
      color: #666;
      font-size: 0.93rem;
      line-height: 1.7;
      margin-bottom: 0.8rem;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .fatwa-card .fatwa-meta {
      display: flex;
      align-items: center;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .fatwa-card .category-badge {
      background: var(--azhar-light);
      color: var(--azhar-teal);
      border: 1px solid rgba(15,118,110,0.25);
      padding: 0.2rem 0.7rem;
      border-radius: 20px;
      font-size: 0.82rem;
      font-weight: 600;
    }
    .fatwa-card .fatwa-date {
      color: #aaa;
      font-size: 0.82rem;
    }
    .fatwa-card .fatwa-arrow {
      margin-right: auto;
      color: var(--azhar-teal);
      font-size: 1.1rem;
      opacity: 0;
      transition: opacity 0.2s;
    }
    .fatwa-card:hover .fatwa-arrow { opacity: 1; }

    /* Sidebar Categories */
    .sidebar-box {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 1.2rem;
    }
    .sidebar-box-header {
      background: var(--azhar-navy);
      color: #fff;
      font-weight: 700;
      font-size: 0.97rem;
      padding: 0.75rem 1.1rem;
    }
    .sidebar-box-body { padding: 0.3rem 0; }

    .category-filter-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.55rem 1.1rem;
      border-bottom: 1px solid #f5f5f5;
      cursor: pointer;
      transition: background 0.15s;
      text-decoration: none;
      color: #444;
      font-size: 0.93rem;
    }
    .category-filter-item:last-child { border-bottom: none; }
    .category-filter-item:hover { background: var(--azhar-light); color: var(--azhar-teal); }
    .category-filter-item.active { background: var(--azhar-light); color: var(--azhar-teal); font-weight: 700; }
    .category-filter-item .cat-count {
      background: #f0f0f0;
      color: #888;
      border-radius: 20px;
      padding: 0.1rem 0.55rem;
      font-size: 0.78rem;
    }
    .category-filter-item.active .cat-count {
      background: rgba(15,118,110,0.15);
      color: var(--azhar-teal);
    }

    /* Pagination */
    .pagination-azhar .page-item .page-link {
      color: var(--azhar-navy);
      border-color: #e0e0e0;
      border-radius: 6px !important;
      margin: 0 2px;
      font-size: 0.9rem;
      padding: 0.45rem 0.8rem;
    }
    .pagination-azhar .page-item.active .page-link {
      background: var(--azhar-teal);
      border-color: var(--azhar-teal);
      color: #fff;
    }
    .pagination-azhar .page-item .page-link:hover {
      background: var(--azhar-light);
      color: var(--azhar-teal);
      border-color: var(--azhar-teal);
    }

    /* No Results */
    .no-results {
      text-align: center;
      padding: 3rem 1rem;
      color: #aaa;
    }
    .no-results i { font-size: 3rem; margin-bottom: 1rem; display: block; }
    .no-results p { font-size: 1rem; color: #888; }

    /* Footer */
    .footer-azhar-new { background: var(--azhar-navy); color: rgba(255,255,255,0.88); font-size: 0.93rem; }
    .footer-main { padding: 3rem 0 2rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .footer-col-title { color: var(--azhar-teal); font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; font-family: 'Amiri', serif; }
    .footer-phone { color: var(--azhar-teal); font-size: 1.8rem; font-weight: 700; letter-spacing: 2px; margin-bottom: 1rem; display: block; }
    .footer-links-list { list-style: none; padding: 0; margin: 0; }
    .footer-links-list li { margin-bottom: 0.5rem; }
    .footer-links-list a { color: rgba(255,255,255,0.82); text-decoration: none; transition: color 0.2s; }
    .footer-links-list a:hover { color: #fff; }
    .footer-social { display: flex; gap: 0.8rem; margin-top: 0.5rem; }
    .footer-social a { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,0.3); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.85); font-size: 1rem; text-decoration: none; transition: all 0.2s; }
    .footer-social a:hover { background: var(--azhar-teal); border-color: var(--azhar-teal); color: #fff; }
    .footer-bottom { background: var(--azhar-teal); padding: 0.7rem 1rem; text-align: center; }
    .footer-bottom p { color: rgba(255,255,255,0.95); margin: 0; font-size: 0.88rem; }

    @media (max-width: 991px) {
      .sidebar-sticky { position: static !important; }
    }
  
/* detail */

    :root {
      --azhar-navy: #0b1b2a;
      --azhar-navy-dark: #0a1621;
      --azhar-teal: #0f766e;
      --azhar-teal-hover: #0d5f59;
      --azhar-bg: #f3f4f6;
      --azhar-light: #f0f4f3;
      --azhar-white: #fefefe;
    }

    *, *::before, *::after { box-sizing: border-box; }

    body {
      font-family: 'Amiri', 'Tahoma', 'Segoe UI', Arial, sans-serif;
      background-color: var(--azhar-bg);
      color: #333;
    }

    /* Navbar */
    .navbar-azhar { background: var(--azhar-navy); padding: 0.8rem 0; }
    .navbar-azhar .navbar-brand { color: var(--azhar-white); font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; }
    .navbar-azhar .nav-link { color: rgba(255,255,255,0.95); font-size: 0.95rem; padding: 0.5rem 1rem; border-radius: 4px; transition: background 0.2s; }
    .navbar-azhar .nav-link:hover, .navbar-azhar .nav-link.active { color: #fff; background: rgba(255,255,255,0.1); }
    .navbar-azhar .dropdown-menu { border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

    /* Breadcrumb */
    .breadcrumb-bar {
      background: #fff;
      border-bottom: 1px solid #e5e7eb;
      padding: 0.65rem 0;
    }
    .breadcrumb-bar .breadcrumb {
      margin: 0;
      font-size: 0.88rem;
    }
    .breadcrumb-bar .breadcrumb-item a { color: var(--azhar-teal); text-decoration: none; }
    .breadcrumb-bar .breadcrumb-item a:hover { text-decoration: underline; }
    .breadcrumb-bar .breadcrumb-item.active { color: #888; }
    .breadcrumb-bar .breadcrumb-item+.breadcrumb-item::before { content: "›"; }

    /* Fatwa Header Card */
    .fatwa-header-card {
      background: #fff;
      border-radius: 12px;
      padding: 2rem 2.2rem;
      border: 1px solid #e5e7eb;
      margin-bottom: 1.5rem;
    }
    .fatwa-header-card .fatwa-category-badge {
      display: inline-block;
      background: var(--azhar-light);
      color: var(--azhar-teal);
      border: 1px solid rgba(15,118,110,0.3);
      padding: 0.25rem 0.85rem;
      border-radius: 20px;
      font-size: 0.85rem;
      font-weight: 600;
      margin-bottom: 1rem;
    }
    .fatwa-header-card .fatwa-main-title {
      font-size: 1.55rem;
      font-weight: 700;
      color: var(--azhar-navy);
      line-height: 1.6;
      margin-bottom: 1rem;
    }
    .fatwa-header-card .fatwa-meta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 1.2rem;
      align-items: center;
      font-size: 0.88rem;
      color: #888;
      padding-top: 0.75rem;
      border-top: 1px solid #f0f0f0;
    }
    .fatwa-header-card .fatwa-meta-row span { display: flex; align-items: center; gap: 0.3rem; }
    .fatwa-header-card .fatwa-meta-row i { color: var(--azhar-teal); }

    /* Section Title */
    .section-label {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--azhar-navy);
      margin-bottom: 0.8rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .section-label::after {
      content: "";
      flex: 1;
      height: 2px;
      background: var(--azhar-light);
      border-radius: 2px;
    }
    .section-label i { color: var(--azhar-teal); font-size: 1.1rem; }

    /* Summary Answer Box */
    .answer-summary {
      background: var(--azhar-light);
      border-right: 4px solid var(--azhar-teal);
      border-radius: 0 10px 10px 0;
      padding: 1.4rem 1.6rem;
      margin-bottom: 1.5rem;
    }
    .answer-summary p {
      color: #2a2a2a;
      font-size: 1.05rem;
      line-height: 1.9;
      margin: 0;
    }
    .rich-answer-inline p,
    .rich-answer-inline div { display: inline; margin: 0; }
    .rich-answer-inline a,
    .fatwa-rich-text a {
      color: var(--azhar-teal);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.15rem;
      word-break: break-word;
    }
    .rich-answer-inline a:hover,
    .fatwa-rich-text a:hover { color: var(--azhar-teal-hover); }
    .rich-answer-inline strong,
    .fatwa-rich-text strong {
      color: var(--azhar-navy);
      font-weight: 700;
    }

    /* Detailed Answer Box */
    .answer-detail {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      padding: 1.6rem 1.8rem;
      margin-bottom: 1.5rem;
    }
    .answer-detail p {
      color: #444;
      font-size: 1rem;
      line-height: 2;
      margin-bottom: 1rem;
    }
    .answer-detail p:last-child { margin-bottom: 0; }
    .answer-detail .quran-verse {
      background: var(--azhar-navy);
      color: #fff;
      border-radius: 8px;
      padding: 1rem 1.4rem;
      text-align: center;
      font-size: 1.2rem;
      line-height: 2.2;
      margin: 1.2rem 0;
    }
    .answer-detail .quran-verse .verse-ref {
      font-size: 0.82rem;
      color: rgba(255,255,255,0.7);
      margin-top: 0.3rem;
    }
    .answer-detail .hadith-box {
      background: #f8f9fa;
      border: 1px dashed #ccc;
      border-radius: 8px;
      padding: 1rem 1.4rem;
      margin: 1.2rem 0;
      font-style: italic;
    }
    .answer-detail .hadith-box .hadith-ref {
      font-size: 0.82rem;
      color: #888;
      margin-top: 0.4rem;
      font-style: normal;
    }

    /* Tags */
    .fatwa-tags { margin-bottom: 1.5rem; }
    .fatwa-tags .tag {
      display: inline-block;
      background: #f0f0f0;
      color: #555;
      border-radius: 20px;
      padding: 0.25rem 0.85rem;
      font-size: 0.82rem;
      margin: 0.2rem;
      text-decoration: none;
      transition: all 0.2s;
    }
    .fatwa-tags .tag:hover { background: var(--azhar-light); color: var(--azhar-teal); }

    /* Share & Actions */
    .fatwa-actions {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      padding: 1rem 1.4rem;
      margin-bottom: 1.5rem;
      display: flex;
      align-items: center;
      gap: 0.8rem;
      flex-wrap: wrap;
    }
    .fatwa-actions .action-label { color: #888; font-size: 0.88rem; margin-left: auto; }
    .fatwa-actions .btn-action {
      border: 1px solid #ddd;
      background: #fff;
      color: #555;
      border-radius: 7px;
      padding: 0.4rem 0.9rem;
      font-size: 0.88rem;
      display: flex;
      align-items: center;
      gap: 0.35rem;
      transition: all 0.2s;
      cursor: pointer;
    }
    .fatwa-actions .btn-action:hover { border-color: var(--azhar-teal); color: var(--azhar-teal); background: var(--azhar-light); }
    .btn-print { }

    /* Related Fatwas */
    .related-card {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      padding: 1rem 1.2rem;
      margin-bottom: 0.75rem;
      text-decoration: none;
      display: block;
      color: inherit;
      transition: box-shadow 0.2s, border-color 0.2s;
    }
    .related-card:hover { box-shadow: 0 3px 10px rgba(15,118,110,0.12); border-color: var(--azhar-teal); color: inherit; }
    .related-card .related-title { font-size: 0.95rem; font-weight: 700; color: var(--azhar-navy); margin-bottom: 0.3rem; }
    .related-card .related-cat { font-size: 0.8rem; color: var(--azhar-teal); }

    /* Sidebar Boxes */
    .sidebar-box {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 1.2rem;
    }
    .sidebar-box-header {
      background: var(--azhar-navy);
      color: #fff;
      font-weight: 700;
      font-size: 0.97rem;
      padding: 0.75rem 1.1rem;
    }
    .sidebar-box-body { padding: 1rem 1.1rem; }

    /* TOC Nav */
    .toc-nav { list-style: none; padding: 0; margin: 0; }
    .toc-nav li { margin-bottom: 0.5rem; }
    .toc-nav a {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      color: #555;
      text-decoration: none;
      font-size: 0.9rem;
      padding: 0.35rem 0.6rem;
      border-radius: 6px;
      transition: all 0.15s;
    }
    .toc-nav a:hover { background: var(--azhar-light); color: var(--azhar-teal); }
    .toc-nav a i { color: var(--azhar-teal); font-size: 0.85rem; }

    /* Print */
    @media print {
      .navbar-azhar, .breadcrumb-bar, aside, .fatwa-actions, footer, .related-section { display: none !important; }
      .col-lg-8 { width: 100% !important; }
      .answer-detail, .answer-summary { border: 1px solid #ccc !important; }
    }

    /* Footer */
    .footer-azhar-new { background: var(--azhar-navy); color: rgba(255,255,255,0.88); font-size: 0.93rem; }
    .footer-main { padding: 3rem 0 2rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .footer-col-title { color: var(--azhar-teal); font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; font-family: 'Amiri', serif; }
    .footer-phone { color: var(--azhar-teal); font-size: 1.8rem; font-weight: 700; letter-spacing: 2px; margin-bottom: 1rem; display: block; }
    .footer-links-list { list-style: none; padding: 0; margin: 0; }
    .footer-links-list li { margin-bottom: 0.5rem; }
    .footer-links-list a { color: rgba(255,255,255,0.82); text-decoration: none; transition: color 0.2s; }
    .footer-links-list a:hover { color: #fff; }
    .footer-social { display: flex; gap: 0.8rem; margin-top: 0.5rem; }
    .footer-social a { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,0.3); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.85); font-size: 1rem; text-decoration: none; transition: all 0.2s; }
    .footer-social a:hover { background: var(--azhar-teal); border-color: var(--azhar-teal); color: #fff; }
    .footer-bottom { background: var(--azhar-teal); padding: 0.7rem 1rem; text-align: center; }
    .footer-bottom p { color: rgba(255,255,255,0.95); margin: 0; font-size: 0.88rem; }

    /* Tabs */
    .answer-tabs .nav-link {
      color: #666;
      font-weight: 600;
      border-radius: 8px 8px 0 0;
      padding: 0.6rem 1.4rem;
      font-size: 0.95rem;
      border: none;
    }
    .answer-tabs .nav-link.active {
      background: var(--azhar-navy);
      color: #fff;
    }
    .answer-tabs .nav-link:hover:not(.active) {
      background: var(--azhar-light);
      color: var(--azhar-teal);
    }
    .tab-content-box {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 0 0 10px 10px;
      padding: 1.6rem 1.8rem;
      margin-bottom: 1.5rem;
    }
    .tab-content-box p {
      color: #444;
      font-size: 1rem;
      line-height: 2;
      margin-bottom: 1rem;
    }
    .fatwa-rich-text > *:last-child { margin-bottom: 0; }
    .fatwa-rich-text ul,
    .fatwa-rich-text ol {
      color: #444;
      line-height: 2.1;
      padding-right: 1.4rem;
      margin-bottom: 1rem;
    }
    .fatwa-rich-text li { margin-bottom: 0.35rem; }
    .fatwa-rich-text blockquote {
      background: var(--azhar-light);
      border-right: 4px solid var(--azhar-teal);
      border-radius: 0 8px 8px 0;
      margin: 1rem 0;
      padding: 1rem 1.2rem;
      color: #23403b;
    }

    /* ==============================
       FatwaBank Theme Override
    ============================== */
    :root {
      --azhar-navy: #d7c7b2;
      --azhar-navy-dark: #c5b296;
      --azhar-teal: #6b5848;
      --azhar-teal-hover: #564a3b;
      --azhar-bg: #f6f1ea;
      --azhar-light: #e9dfd2;
      --azhar-white: #fefefe;
    }

    .hero-section {
      background:
        linear-gradient(rgba(255, 255, 255, 0.88), rgba(247, 245, 240, 0.82)),
        url('images/FatawaBankBanner.png') center / cover no-repeat;
    }

    .carousel-section {
      background:
        radial-gradient(circle at top left, rgba(0, 0, 0, 0.03), transparent 40%),
        linear-gradient(135deg, #ffffff 0%, #f8f8f6 100%);
      border-color: rgba(0, 0, 0, 0.08);
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
    }

    .carousel-section::before {
      background: radial-gradient(circle, rgba(0, 0, 0, 0.05), transparent 70%);
    }

    .carousel-kicker {
      background: rgba(0, 0, 0, 0.04);
      border-color: rgba(0, 0, 0, 0.08);
      color: var(--azhar-teal);
    }

    .carousel-badge,
    .answer-detail .quran-verse,
    .prayer-row.active-prayer {
      background: var(--azhar-teal);
      box-shadow: 0 12px 24px rgba(86, 74, 59, 0.18);
    }

    .carousel-fatwa {
      background:
        linear-gradient(135deg, #ffffff, #f6f5f2);
      color: #3f3f3f;
      border: 1px solid rgba(0, 0, 0, 0.06);
    }

    .carousel-fatwa::after {
      background: radial-gradient(circle, rgba(0, 0, 0, 0.04), transparent 68%);
    }

    .navbar-azhar {
      background: #ffffff;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    }

    .search-hero,
    .prayer-card-header,
    .sidebar-box-header,
    .answer-tabs .nav-link.active {
      background: #f4f4f1;
      color: #4d4d4d;
      border-color: rgba(0, 0, 0, 0.08);
      box-shadow: none;
    }

    .search-hero {
      border-top: 1px solid rgba(0, 0, 0, 0.05);
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .breadcrumb-bar {
      background: #f3eee5;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .answer-summary {
      background: #ffffff;
      border-right: 4px solid #d9d9d9;
      color: #444;
    }

    .answer-summary .fatwa-rich-text {
      font-size: 1.28rem;
      line-height: 2.2;
      font-weight: 600;
      color: #4b4339;
    }

    .answer-summary .fatwa-rich-text p,
    .answer-summary .fatwa-rich-text li {
      font-size: inherit;
      line-height: inherit;
    }

    .hero-shell {
      position: relative;
      overflow: hidden;
      color: #fff;
      background: url("images/FatawaBankBanner.png") center/cover no-repeat;
      padding: 4.5rem 0 3.5rem;
      margin-bottom: 0;
    }

    .hero-shell-inner {
      min-height: 220px;
    }

    .hero-shell-content {
      padding: 1.5rem 0 0.75rem;
    }

    .hero-shell-content-inner {
      
      margin: 0 auto;
      row-gap: 1.5rem;
    }

    .hero-shell-copy {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hero-shell-verse-image {
      display: block;
      width: min(100%, 840px);
      height: auto;
      filter: none;
    }

    .hero-shell-content .search-box {
      margin-bottom: 0;
    }

    .hero-shell-verse {
      color: #f4e6b2;
      font-size: 3.1rem;
      font-weight: 700;
      text-shadow: 0 1px 5px rgba(0, 0, 0, 0.20);
      line-height: 1.85;
      margin-bottom: 0;
      text-align: center;
    }

    .hero-shell-search-col {
      display: flex;
      justify-content: flex-start;
      padding-left: 0;
    }

    .hero-search-box {
      max-width: 100%;
      width: 100%;
      margin: 0;
    }

    .hero-search-box .input-group {
      background: rgba(255, 255, 255, 0.14);
      border: 2px solid rgba(150, 128, 77, 0.32);
      border-radius: 18px;
      padding: 0.45rem;
      box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
      backdrop-filter: blur(3px);
    }

    .hero-search-box .form-control {
      flex: 1 1 auto;
      background: rgba(255, 252, 247, 0.98);
      border: 2px solid rgba(150, 128, 77, 0.42);
      border-left: 0;
      border-radius: 14px 0 0 14px;
      min-height: 58px;
      font-size: 1.08rem;
      color: #4b4138;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .hero-search-box .form-control::placeholder {
      color: #8f7e63;
    }

    .hero-search-box .form-control:focus {
      border-color: rgba(150, 128, 77, 0.8);
      box-shadow: 0 0 0 0.22rem rgba(150, 128, 77, 0.18);
    }

    .hero-search-box .btn-search {
      flex: 0 0 96px;
      min-width: 96px;
      min-height: 58px;
      border: 2px solid var(--azhar-teal);
      border-radius: 0 14px 14px 0;
      font-size: 1.08rem;
      font-weight: 700;
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
    }

    @media (max-width: 991px) {
      .hero-shell {
        padding: 3.25rem 0 2.75rem;
      }

      .hero-shell-inner {
        min-height: 180px;
      }

      .hero-shell-content-inner {
        text-align: center;
      }

      .hero-shell-copy,
      .hero-search-box {
        max-width: 100%;
      }

      .hero-shell-verse-image {
        width: min(100%, 760px);
      }

      .hero-shell-search-col {
        justify-content: center;
        padding-left: calc(var(--bs-gutter-x) * 0.5);
      }

      .hero-search-box {
        margin: 0;
      }

      .hero-shell-verse {
        font-size: 2.8rem;
        line-height: 1.8;
        text-align: center;
      }
    }

    @media (max-width: 767px) {
      .hero-shell {
        padding: 2.5rem 0 2.25rem;
      }

      .hero-shell-inner {
        min-height: 140px;
      }

      .hero-shell-verse {
        font-size: 2rem;
        line-height: 1.7;
      }

      .hero-shell-verse-image {
        width: 100%;
        max-width: 100%;
      }

      .hero-search-box .input-group {
        padding: 0.35rem;
      }

      .hero-search-box .form-control,
      .hero-search-box .btn-search {
        min-height: 52px;
        font-size: 1rem;
      }

      .hero-search-box .form-control {
        border-radius: 12px 0 0 12px;
      }

      .hero-search-box .btn-search {
        flex-basis: 92px;
        min-width: 92px;
        border-radius: 0 12px 12px 0;
      }
    }

    section.py-4 {
      background: transparent !important;
    }

    #summary-tab,
    #detail-tab {
      background: #f4f4f1;
      color: #4d4d4d;
      border: 1px solid rgba(0, 0, 0, 0.08);
    }

    #summary-tab.active,
    #detail-tab.active {
      background: #ffffff;
      color: #333333;
      border-color: #d9d9d9;
      box-shadow: none;
    }

    .sidebar-box-header {
      background: #f3eee5;
      color: #4d4d4d;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .navbar-azhar .navbar-brand,
    .navbar-azhar .nav-link,
    .navbar-azhar .dropdown-toggle {
      color: #4b4138;
    }

    .navbar-azhar .nav-link:hover,
    .navbar-azhar .nav-link.active {
      color: #3f342c;
      background: rgba(107, 88, 72, 0.10);
    }

    .navbar-azhar .dropdown-menu {
      background: #fffdf7;
      border: 1px solid rgba(107, 88, 72, 0.10);
    }

    .navbar-azhar .dropdown-item {
      color: #4b4138;
    }

    .navbar-azhar .dropdown-item:hover,
    .navbar-azhar .dropdown-item:focus {
      background: var(--azhar-light);
      color: var(--azhar-teal);
    }

    .navbar-toggler-azhar {
      border-color: rgba(107, 88, 72, 0.25);
    }

    .navbar-light .navbar-toggler-icon {
      filter: sepia(30%) saturate(120%) hue-rotate(5deg);
    }

    .category-card:hover,
    .fatwa-card:hover,
    .related-card:hover {
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    }

    .fatwa-card .fatwa-title mark {
      background: rgba(0, 0, 0, 0.06);
      color: var(--azhar-teal);
    }

    .fatwa-card .category-badge,
    .fatwa-header-card .fatwa-category-badge,
    .category-filter-item.active .cat-count {
      background: #f4f4f1;
      border-color: rgba(0, 0, 0, 0.10);
      color: var(--azhar-teal);
    }

    .footer-azhar-new {
      background: #ffffff;
      color: #5a5a5a;
      border-top: 1px solid #e7e2d9;
    }

    .footer-main {
      border-bottom: 1px solid #e7e2d9;
    }

    .footer-col-title,
    .footer-phone {
      color: var(--azhar-teal);
    }

    .footer-links-list a {
      color: #6a6257;
    }

    .footer-links-list a:hover {
      color: var(--azhar-teal);
    }

    .footer-social a {
      border-color: rgba(107, 88, 72, 0.18);
      color: #6a6257;
    }

    .footer-bottom,
    .footer-social a:hover {
      background: #f3eee5;
      border-color: var(--azhar-navy-dark);
    }

    .footer-bottom p {
      color: #5b5246;
    }

    .carousel-header-copy .section-title,
    .fatwa-card .fatwa-title,
    .fatwa-header-card .fatwa-main-title,
    .section-label,
    .rich-answer-inline strong,
    .fatwa-rich-text strong {
      color: #4b4138;
    }

    .carousel-fatwa h5,
    .carousel-fatwa p {
      color: #4d4d4d;
    }

    .carousel-fatwa .category-tag {
      background: #f2f2ef;
      color: #5a5a5a;
      border-color: rgba(0, 0, 0, 0.08);
    }

    .carousel-fatwa .btn-azhar {
      background: var(--azhar-teal);
      border-color: var(--azhar-teal);
      color: #fff;
    }

    .carousel-fatwa .btn-azhar:hover {
      background: var(--azhar-teal-hover);
      border-color: var(--azhar-teal-hover);
      color: #fff;
    }