:root {
      --prh-green: #0b4e32;
      --prh-green-dark: #073321;
      --prh-gold: #c5a059;
      --prh-gold-hover: #a8833d;
      --prh-bg: #f4f6f8;
    }

   @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap');
body {
  /*font-family: 'Noto Kufi Arabic', sans-serif;*/
   font-family: "IBM Plex Sans Arabic", sans-serif;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  direction: rtl;
}
h1, h2, h3, h4, h5, h6{font-weight: inherit !important;line-height: 1.4;}

    /* TOP BAR */
    .top-bar {
      background-color: var(--prh-green-dark);
      color: #ffffff;
      padding: 6px 0;
      font-size: 12px;
      border-bottom: 1px solid rgba(197, 160, 89, 0.3);
    }
    .top-bar .gov-tag { color: var(--prh-gold); font-weight: 700; }
    .top-bar a { color: #e2e8f0; margin-right: 15px; text-decoration: none; }

    /* MAIN HEADER */
    .main-header {
      background-color: #ffffff;
      border-bottom: 4px solid var(--prh-gold);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      position: relative;
      z-index: 100;
    }

    .header-logo-container { display: flex; align-items: center; padding: 12px 0; text-decoration: none !important; }
    .header-logo-icon img {
      height: auto !important;
      max-height: 110px;
    }
    .header-logo-text h1 { color: #ffffff; font-size: 18px; font-weight: 800; margin: 0; line-height: 1.2; }
    .header-logo-text span { color: var(--prh-gold); font-size: 12px; font-weight: 600; display: block; margin-top: 2px; }

    .prh-navbar { background: transparent; border: none; margin-bottom: 0; min-height: auto; }
    .prh-navbar .nav > li > a {transition: all 0.3s ease;display: inline-block;font-size: 16px;padding: 10px 15px;margin: 0px;color: #111;cursor: pointer;font-weight: 500;font-family: "IBM Plex Sans Arabic", sans-serif;}
    .prh-navbar .nav > li > a:hover,
    .prh-navbar .nav > li > a:focus,
    .prh-navbar .nav > li.active > a {color: #4a796e;}

    .prh-navbar .dropdown-menu { background-color: var(--prh-green-dark); border: 1px solid var(--prh-gold); border-radius: 0 0 6px 6px; box-shadow: 0 6px 12px rgba(0,0,0,0.2); text-align: right; }
    .prh-navbar .dropdown-menu > li > a { color: #ffffff; font-weight: 600; padding: 10px 18px; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .prh-navbar .dropdown-menu > li > a:hover { background-color: var(--prh-gold); color: #ffffff; }

    .btn-search-trigger { background: var(--prh-gold); color: #ffffff; border: none; padding: 8px 16px; border-radius: 4px; font-weight: 700; font-size: 13px; transition: all 0.3s ease; }
    .btn-search-trigger:hover { background: var(--prh-gold-hover); color: #ffffff; }

    /* MENU MOBILE OFF-CANVAS */
    #mobileDrawer{display:none}
    @media (max-width: 991px) {
	   #mobileDrawer{display:inherit}
      .mobile-menu-drawer {
        position: fixed; top: 0; right: 0; width: 280px; height: 100%;
        background-color: var(--prh-green-dark); z-index: 9999;
        transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: -5px 0 25px rgba(0,0,0,0.5); overflow-y: auto; padding: 20px 0;
      }
      .mobile-menu-drawer.open { transform: translateX(0); }
      .mobile-menu-header { display: flex; align-items: center; justify-content: space-between; padding: 0 20px 20px 20px; border-bottom: 1px solid rgba(197, 160, 89, 0.3); }
      .mobile-menu-header h3 { color: var(--prh-gold); font-size: 16px; font-weight: 800; margin: 0; }
      .close-drawer-btn { background: none; border: none; color: #ffffff; font-size: 24px; cursor: pointer; }
      .mobile-menu-drawer .nav { padding: 10px 0; }
      .mobile-menu-drawer .nav > li > a { color: #ffffff; font-weight: 700; font-size: 15px; padding: 14px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
      .mobile-menu-drawer .nav > li > a:hover,
      .mobile-menu-drawer .nav > li.active > a { background-color: var(--prh-green); color: var(--prh-gold); }
      .mobile-menu-drawer .dropdown-menu { position: relative; float: none; background-color: rgba(0, 0, 0, 0.2); box-shadow: none; border: none; padding: 0; }
      .mobile-menu-drawer .dropdown-menu > li > a { padding-right: 35px; color: #d1d5db; }
      .menu-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px); z-index: 9998; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
      .menu-overlay.open { opacity: 1; visibility: visible; }
    }

    /* SLIDER */
    .custom-hero-slider { position: relative; background: #1b8354;
    clear: both;
    overflow: hidden;
    position: relative;
    height: 640px;
    z-index: 1;
    display: block;}
.custom-hero-slider .custom-slide .hero-overlay:before {
      content: url(../rightslide.png);
      position: absolute;
      top: 0;
      right: 0;
}
    .custom-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out; background-size: cover; background-position: center; z-index: 1; }
    .custom-slide.active { opacity: 1; visibility: visible; z-index: 2; }
    .hero-overlay {position: absolute;top: 0;left: 0;right: 0;bottom: 0;display: flex;align-items: center;height: 100%;background: #1b8354;}
    .slide-flex-container { display: flex; align-items: center; justify-content: space-between; height: 100%; }
    .slider-content-right { color: #ffffff; padding: 20px 0; text-align: right; }
    .slider-content-right .badge-tag { background-color: var(--prh-gold); color: #ffffff; font-weight: 700; font-size: 13px; padding: 6px 14px; border-radius: 4px; display: inline-block; margin-bottom: 12px; }
    .slider-content-right h2 { font-weight: 800; font-size: 32px; color: #ffffff; margin-top: 0; margin-bottom: 15px; line-height: 1.3; }
    .slider-content-right p { font-size: 16px; color: #e2e8f0; margin-bottom: 25px; line-height: 1.6; }
    .slider-person-left { text-align: center; display: flex; justify-content: center; align-items: center; }
    .person-img-wrapper {position: relative;overflow: hidden;}
    .person-img-wrapper img { width: 100%; height: 100%; object-fit: cover; }
    .person-caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(7, 51, 33, 0.95), transparent); color: #ffffff; padding: 12px 8px 8px 8px; font-size: 13px; font-weight: 700; }
    .person-caption span { display: block; color: var(--prh-gold); font-size: 11px; font-weight: 600; }

    .btn-gold { background-color: var(--prh-gold); color: #ffffff !important; font-weight: 700; font-size: 14px; padding: 10px 24px; border-radius: 4px; border: none; transition: all 0.3s ease; display: inline-block; text-decoration: none !important; }
    .btn-gold:hover { background-color: var(--prh-gold-hover); transform: translateY(-2px); }

    .slider-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: rgba(0, 0, 0, 0.3); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.2); width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; }
    .slider-nav-btn:hover { background: var(--prh-gold); }
    .slider-nav-btn.prev { right: 20px; }
    .slider-nav-btn.next { left: 20px; }
    .slider-dots { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 8px; }
    .dot { width: 12px; height: 12px; border: 2px solid var(--prh-gold); border-radius: 50%; cursor: pointer; transition: all 0.3s ease; }
    .dot.active { background-color: var(--prh-gold); width: 28px; border-radius: 6px; }

    /* TICKER */
    .ticker-wrapper { background: #ffffff; border-bottom: 1px solid #e0e0e0; padding: 10px 0; margin-bottom: 35px; }
    .ticker-btn { background: var(--prh-green); color: var(--prh-gold); font-weight: 700; font-size: 13px; padding: 5px 12px; border-radius: 4px; }
    .marquee-style { color: var(--prh-green); font-weight: 700; font-size: 14px; }

    /* BLOCS VILLES */
    .city-block {border-radius: 8px;margin-bottom: 45px;overflow: hidden;}
    .city-header {color: #4a796e;padding: 15px 25px;font-weight: 800;font-size: 19px;}

    /* BLOC NEWS COL-MD-8 (À DROITE, 3 CÔTÉ À CÔTÉ) */
    .city-news-panel {padding: 20px;height: 100%;}
    .panel-title-news { 
          color: #1b8354;
    text-align: right;
    font-size: 26px;
    font-style: normal;
    line-height: 1.2;
    font-weight: 500 !important;
    font-family: "IBM Plex Sans Arabic", sans-serif;
    }
    
    .news-card-grid {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      margin-bottom: 15px;
    }
    .news-card-grid:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 15px rgba(0,0,0,0.08);
    }
    .news-card-grid .news-thumb {
      width: 100%;
      height: 110px;
      overflow: hidden;
    }
    .news-card-grid .news-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .news-card-grid .news-body {
      padding: 12px;
    }
    .news-card-grid .news-body h5 {
      margin: 0 0 8px 0;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.4;
      height: 36px;
      overflow: hidden;
    }
    .news-card-grid .news-body h5 a {
      color: #2d3748;
      text-decoration: none;
    }
    .news-card-grid .news-body h5 a:hover {
      color: var(--prh-gold);
    }
    .news-card-grid .news-date {
      font-size: 11px;
      color: #888888;
      display: block;
    }

    /* BLOC TABS COL-MD-4 (À GAUCHE) */
    .sub-tabs { background-color: #f8faf9; border-bottom: 1px solid #e2e8f0; }
    .sub-tabs > li > a { color: #555555; font-weight: 700; padding: 10px 8px; border-radius: 0; font-size: 12px; text-align: center; }
    .sub-tabs > li.active > a { color: var(--prh-green) !important; background-color: #ffffff !important; border-bottom: 3px solid var(--prh-gold) !important; }
    
    .prayer-box { background: #fdfdfd; border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px 4px; text-align: center; margin-bottom: 10px; }
    .prayer-box.active { background-color: var(--prh-green); color: #ffffff; border-color: var(--prh-gold); }
    .prayer-box.active small { color: var(--prh-gold) !important; }
    .prayer-box .time { font-size: 14px; font-weight: 800; margin-top: 2px; }
    .custom-card { background: #f8faf9; border: 1px solid #e2e8f0; border-right: 4px solid var(--prh-gold); padding: 12px; margin-bottom: 10px; }

    .prh-footer {color: #a0aec0;font-size: 13px;border-top: 4px solid var(--prh-gold);margin-top: 50px;}