@font-face {
    font-family: "SNN";
    src: url("font/SNN.eot"); /* IE9 Compat Modes */
    src: url("font/SNN.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("font/SNN.otf") format("opentype"), /* Open Type Font */ url("font/SNN.svg") format("svg"), /* Legacy iOS */ url("font/SNN.ttf") format("truetype"), /* Safari, Android, iOS */ url("font/SNN.woff") format("woff"), /* Modern Browsers */ url("font/SNN.woff2") format("woff2"); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}



:root{
  --container: 1200px;
  --gap: 38px;
  --title-size: 34px;
  --accent: #f4a320;
  --text: #141414;
  --muted: #666;
  --card-bg: #fff;
  --line: #e6e0d3;
  --shadow: 0 8px 22px rgba(0,0,0,.08);
}
a { text-decoration:none; color:#000}
a:hover { color:#1a2a8f}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:#ffffff;
  color:var(--text);
     font-family: "SNN", "Noto Sans Arabic", "Tahoma", system-ui, sans-serif;
}

.page{padding: 26px 0 38px}
.container{width:min(var(--container), calc(100% - 46px)); margin-inline:auto}

.grid-3{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--gap);
  align-items:start;
}
.clearfix { clear:both}

.cols-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items:start;
}
.cols-2 .ad{grid-column: 1 / -1;}

.col{display:flex; flex-direction:column; gap: 26px}

/* Section header */
.section-title{
  text-align:center;
  margin: 0 0 2px;
  font-size: var(--title-size);
  font-weight: 800;
  letter-spacing: .2px;
}
.underline{
  width: 92px;
  height: 3px;
  margin: 12px auto 0;
  background: transparent;
  position: relative;
}
.underline:before{
  content:"";
  position:absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: #e9e6de;
}
.underline:after{
  content:"";
  position:absolute;
  width: 28px;
  height: 4px;
  left: 50%;
  transform: translateX(-50%);
  top: -1px;
  background: var(--accent);
  border-radius: 999px;
}

/* Common cards */
.card{
  background: var(--card-bg);
  border-radius: 2px;
  box-shadow: none;
  overflow:hidden;
}

/* Left column: author cards */
.author-card{
  width: 100%;
}
.author-banner{
  height: 186px;
  background: url("assets/banner.jpg") center/cover no-repeat;
  position:relative;
}
.author-banner a {color:#fff }
.author-banner a:hover {color:aquamarine }
.author-banner::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.35);
}
.author-text{
  position:absolute;
  inset: 0;
  padding: 18px 18px 40px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  text-align:center;
  z-index:1;
  color:#fff;
  font-size: 18px;
  line-height: 1.65;
  font-weight: 700;
}
.author-avatar{
  width: 104px;
  height: 104px;
  border-radius: 999px;
  border: 6px solid #fff;
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -52px;
  z-index:2;
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}
.author-avatar img {
   width: 104px;
  height: 104px;
  border-radius: 999px;
  border: 0 solid #fff;
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom:-6px;
  z-index:2;
  box-shadow: 0 10px 20px rgba(0,0,0,.18);

}

.author-name{
  padding-top: 64px;
  padding-bottom: 14px;
  text-align:center;
  font-size: 20px;
  font-weight: 700;
}

/* Middle/Right: top image */
.top-image{
    width:360px!important;
  height: 230px!important;

/*  object-fit:cover;
  display:block;*/
}

.top-image img{   
    width:360px!important;
  height: 230px!important; }

/* Middle/Right: list cards */
.list-card{
  background: #fbf6ea url("assets/pattern.jpg") no-repeat;
  background-size: 320px 320px;
  padding: 14px 16px 10px;
  border: 1px solid #f2ead7;
}

.list-item{
  padding: 12px 0;
  text-align:right;
  font-weight: 650;
  font-size: 18px;
  line-height: 1.75;
}
.list-item + .list-item{
  border-top: 1px solid #eadfca;
}
.list-item .mini-line{
  width: 92px;
  height: 0;
  margin: 12px auto 0;
  background: #f0d9a0;
}

/* Ad banner spanning columns 2-3 */
.ad{

  color:#fff;
  height: 74px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 700;
  letter-spacing:.3px;
  margin-top: 10px;
}
.ad img {width:776px;  height: 120px; }

/* Make it look like screenshot spacing */
.section{padding-top: 6px}

/* Responsive */
@media (max-width: 1100px){
  .grid-3{grid-template-columns: 1fr}
}
@media (max-width: 720px){
  .grid-3{grid-template-columns: 1fr}
  .cols-2{grid-template-columns: 1fr}
  .section-title{font-size: 30px}

  .top-image img{   
    width:100%!important;
   }
  .ad img {width:100%;  height: 122px!important; }
}
/* ====== Top Banner (matches provided screenshot) ====== */
.site-banner{width:100%}

.top-strip{
  height: 40px;
  background: #1a2a8f url("assets/pattern.png") repeat;
  color:#fff;
  display:flex;
  align-items:center;
  font-size: 16px;
}
.top-strip .inner{
  width:min(var(--container), calc(100% - 46px));
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.top-strip a{color:#fff; text-decoration:none; opacity:.95}
.top-strip a:hover{opacity:1}
.top-left{
  display:flex; align-items:center; gap:12px;
}
.social{
  display:flex; align-items:center; gap:8px;
}
.social a{
  width:28px; height:28px;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,.35);
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.08);
}
.social svg{width:16px; height:16px; fill:#fff}
.email{font-weight:700; letter-spacing:.2px}

.top-right{
  display:flex; align-items:center; gap:16px;
  font-weight:700;
}
.top-right a{padding:4px 6px; border-radius:6px}
.top-right a:hover{background: rgba(255,255,255,.10)}

.brand-strip{
  height: 160px;
  background: #f3f1ec url("assets/header-pattern.png") repeat;
  position:relative;
  overflow:hidden;
}
.brand-strip .inner{
  width:min(var(--container), calc(100% - 46px));
  margin-inline:auto;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
}
.brand-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex: 0 0 auto;
}
.brand-right img{
  height: 120px;
  width:auto;
  display:block;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}
.brand-left{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex: 1 1 auto;
}
.brand-left img{
  height: 120px;
  width:auto;
  display:block;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.10));
}

/* Nav strip (red) */
.nav-strip{
  height: 62px;
  background: #7a0c0c url("assets/pattern.png") repeat;
  color:#fff;
  border-top: 3px solid rgba(0,0,0,.25);
  border-bottom: 3px solid rgba(0,0,0,.25);
}
.nav-strip .inner{
  width:min(var(--container), calc(100% - 46px));
  margin-inline:auto;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.main-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap: 14px;
  font-size: 18px;
  font-weight: 800;
}
.main-nav a{
  color:#fff;
  text-decoration:none;
  padding: 6px 4px;
}
.main-nav a:hover{opacity:.9}
.dot{
  width: 6px;
  height: 6px;
  background: rgba(255,255,255,.65);
  border-radius: 999px;
  display:inline-block;
  transform: translateY(1px);
}

/* Keep content separated from banner */
.after-banner{padding-top: 18px}

/* Responsive */
@media (max-width: 720px){
  .brand-strip{height: 140px}
  .brand-right img{height: 100px}
  .brand-left img{
  height: 120px;
  width:auto;
  display:block;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.10));
}
  .main-nav{font-size: 16px; gap: 10px}
  .top-strip{height:auto; padding:8px 0}
  .top-strip .inner{flex-direction:column; align-items:flex-start}
  .top-right{flex-wrap:wrap}
}

/* MegaMenu */
/* ====== MegaMenu + Responsive ====== */
.nav-strip .inner{position:relative}
.menu{list-style:none; margin:0; padding:0; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap: 12px}
.menu > li{position:relative; display:flex; align-items:center}
.menu > li + li::before{
  content:"";
  width:6px; height:6px;
  border-radius:999px;
  background: rgba(255,255,255,.65);
  margin-inline: 8px 10px;
  display:inline-block;
  transform: translateY(1px);
}
.menu a{
  color:#fff;
  text-decoration:none;
  padding: 8px 4px;
  font-weight: 800;
  display:inline-flex;
  align-items:center;
}
.menu a:focus-visible{outline:2px solid rgba(255,255,255,.7); outline-offset:4px; border-radius:6px}

/* Mega panel */
.mega{
  position:absolute;
  right: 0;
  top: 100%;
  width: min(980px, calc(100vw - 46px));
  margin-top: 10px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  border-radius: 10px;
  display:none;
  overflow:hidden;
  z-index: 40;
}
.mega::before{
  content:"";
  position:absolute;
  top:-8px;
  right: 22px;
  width: 14px;
  height: 14px;
  background:#fff;
  transform: rotate(45deg);
  border-left: 1px solid rgba(0,0,0,.12);
  border-top: 1px solid rgba(0,0,0,.12);
}
.mega-inner{
  display:grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 18px;
  padding: 18px 18px 16px;
}
.mega-col h4{
  margin:0 0 10px;
  font-size: 18px;
  font-weight: 900;
  color:#111;
}
.mega-col a{
  color:#111;
  padding: 7px 0;
  font-weight: 700;
  display:block;
}
.mega-col a:hover{color:#7a0c0c}
.mega-feature{
  border-radius: 10px;
  border:1px solid #eee;
  background: #faf7ee;
  padding: 14px;
}
.mf-title{font-weight: 900; margin-bottom: 6px; color:#111}
.mf-desc{color:#444; font-weight: 650; font-size: 14px; line-height:1.7}
.mf-link{
  display:inline-flex;
  margin-top: 10px;
  background: #7a0c0c;
  color:#fff !important;
  padding: 9px 12px;
  border-radius: 8px;
  width: fit-content;
}
.mf-link:hover{opacity:.95}

/* Open behavior (desktop hover) */
@media (min-width: 901px){
  .has-mega:hover > .mega{display:block}
  .has-mega:focus-within > .mega{display:block}
}

/* Burger */
.menu-toggle{
  display:none;
  width: 44px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.10);
  border-radius: 8px;
  cursor:pointer;
}
.menu-toggle span{
  display:block;
  height:2px;
  background:#fff;
  margin:6px 9px;
  opacity:.95;
}

/* Mobile menu overlay */
.mobile-menu{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  display:none;
  z-index: 70;
}
.mobile-menu.open{display:block}
.mm-panel{
  position:absolute;
  top:0;
  right:0;
  height:100%;
  width: min(360px, 92vw);
  background: #ffffff;
  padding: 14px 14px 16px;
  overflow:auto;
}
.mm-head{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align:center;
  padding: 10px 0 22px;
}
.mm-title{font-weight: 900; font-size: 18px; color:#111}
.mm-close{
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background: #f7f7f7;
  cursor:pointer;
}
.mm-list{list-style:none; margin:0; padding:0; display:grid; gap: 6px}
.mm-list a, .mm-btn{
  width:100%;
  text-align:right;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fbfbfb;
  color:#111;
  font-weight: 800;
  text-decoration:none;
  cursor:pointer;
}

/* =========================================================
   About page (scoped) – original implementation
   ========================================================= */
.about-page{background:#fff}

.ab-crumb{
  background: #f3f1ec url("assets/pattern.png") repeat;
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding: 26px 0 24px;
}
.ab-crumb-inner{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 16px;
}
.ab-title{
  margin:0;
  font-size: 34px;
  font-weight: 900;
  color:#111;
}
.ab-breadcrumb{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 800;
  color:#222;
}
.ab-breadcrumb a{color:#7a0c0c; text-decoration:none}
.ab-breadcrumb a:hover{text-decoration:underline}
.ab-sep{opacity:.55}

.ab-about{padding: 46px 0 22px}
.ab-grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 28px;
  align-items:stretch;
}
.ab-media{position:relative; min-height: 340px}
.ab-photo{
  background: linear-gradient(135deg, #dae2ef, #ead9b3);
  background-size: cover;
  background-position:center;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.14);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}
.ab-photo--main{height: 340px}
.ab-photo--sub{
  position:absolute;
  left: 18px;
  bottom: -18px;
  width: 48%;
  height: 180px;
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(0,0,0,.18);
}

.ab-kicker{margin:0 0 6px; font-weight: 900; color:#7a0c0c}
.ab-h2{margin:0 0 10px; font-size: 28px; font-weight: 950; color:#111; line-height:1.25}
.ab-p{margin:0; color:#333; font-weight: 650; line-height: 1.9}

.ab-points{
  list-style:none;
  margin: 14px 0 0;
  padding:0;
  display:grid;
  gap: 8px;
  color:#222;
  font-weight: 750;
}
.ab-points li{position:relative; padding-right: 24px}
.ab-points li::before{
  content:"✓";
  position:absolute;
  right:0;
  top: 1px;
  width: 18px;
  height: 18px;
  display:grid;
  place-items:center;
  background: rgba(122,12,12,.12);
  color:#7a0c0c;
  border-radius: 6px;
  font-size: 12px;
}

.ab-stats{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.ab-stat{
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 12px 12px;
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
}
.ab-num{font-size: 22px; font-weight: 1000; color:#111}
.ab-lbl{font-weight: 750; color:#555; margin-top: 3px}

.ab-actions{margin-top: 16px; display:flex; gap: 10px; flex-wrap:wrap}
.ab-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 10px;
  background:#7a0c0c;
  color:#fff;
  text-decoration:none;
  font-weight: 900;
}
.ab-btn:hover{opacity:.95}
.ab-btn--ghost{background:transparent; color:#7a0c0c; border: 2px solid rgba(122,12,12,.35)}
.ab-btn--ghost:hover{background: rgba(122,12,12,.08)}

.ab-sec-head{display:flex; flex-direction:column; align-items:center; gap: 10px; margin-bottom: 18px}
.ab-sec-title{margin:0; font-size: 30px; font-weight: 950; color:#111}

.ab-features{padding: 34px 0 18px}
.ab-cards{display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px}
.ab-card{
  background:#fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 16px;
  padding: 16px 16px;
  box-shadow: 0 14px 28px rgba(0,0,0,.06);
}
.ab-ic{
  width: 44px; height: 44px;
  border-radius: 14px;
  background: rgba(122,12,12,.10);
  color:#7a0c0c;
  display:grid; place-items:center;
  font-weight: 1000;
  margin-bottom: 10px;
}
.ab-card h3{margin:0 0 6px; font-size: 20px; font-weight: 950}
.ab-card p{margin:0; color:#444; font-weight: 650; line-height: 1.8}

.ab-team{padding: 34px 0 18px}
.ab-team-grid{display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px}
.ab-person{
  background:#fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 16px;
  padding: 14px;
  display:flex;
  align-items:center;
  gap: 12px;
  box-shadow: 0 14px 28px rgba(0,0,0,.06);
}
.ab-avatar{
  width: 54px; height: 54px;
  border-radius: 18px;
  background: #0a2a5a;
  color:#fff;
  display:grid; place-items:center;
  font-weight: 1000;
  font-size: 22px;
  flex: 0 0 auto;
}
.ab-person-meta h3{margin:0; font-size: 18px; font-weight: 950}
.ab-person-meta p{margin:4px 0 0; color:#555; font-weight: 700}

.ab-testimonials{padding: 34px 0 54px}
.ab-quotes{display:grid; grid-template-columns: 1fr 1fr; gap: 14px}
.ab-quote{
  margin:0;
  background: #faf7ee;
  border:1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  padding: 16px 16px;
}
.ab-quote p{margin:0; font-weight: 800; color:#222; line-height: 1.9}
.ab-quote cite{display:block; margin-top: 10px; color:#666; font-style:normal; font-weight: 750}

@media (max-width: 980px){
  .ab-grid{grid-template-columns: 1fr}
  .ab-media{min-height: 300px}
  .ab-photo--main{height: 300px}
  .ab-photo--sub{position:absolute; left: 14px; bottom: -16px; width: 56%; height: 160px}
  .ab-team-grid{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 680px){
  .ab-crumb-inner{flex-direction:column; align-items:flex-start}
  .ab-title{font-size: 30px}
  .ab-stats{grid-template-columns: 1fr;}
  .ab-cards{grid-template-columns: 1fr;}
  .ab-team-grid{grid-template-columns: 1fr}
  .ab-quotes{grid-template-columns: 1fr}
}
.mm-list a:hover, .mm-btn:hover{background:#f2f2f2}
.mm-sub{
  display:none;
  padding: 6px 8px 10px;
  margin-top: 4px;
  border-radius: 10px;
  border: 1px dashed rgba(0,0,0,.14);
  background: #fff;
}
.mm-sub a{
  display:block;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.08);
  background: #faf7ee;
  margin-top: 6px;
  font-weight: 750;
}
.mm-group.open .mm-sub{display:block}
.mm-caret{opacity:.8}

/* Responsive breakpoints */
@media (max-width: 900px){
  .main-nav{display:none}
  .menu-toggle{display:block}
  .menu > li + li::before{display:none}
  .nav-strip .inner{justify-content:space-between}
}

/* ====== Hero Slider ====== */
.hero-slider{
  width:100%;
  background:#111;
}
.hs-inner{
  width:min(var(--container), 100%);
  margin-inline:auto;
  position:relative;
  height: 520px;
  overflow:hidden;
}
.hs-slides{position:relative; height:100%}

.hs-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform: scale(1.035);
  transition: opacity .9s ease, transform 1.6s ease;
  will-change: opacity, transform;
}
.hs-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter: saturate(1.04) contrast(1.02);
}
.hs-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(1200px 500px at 50% 20%, rgba(0,0,0,.08), rgba(0,0,0,.30));
  pointer-events:none;
}
.hs-slide.is-active{
  opacity:1;
  transform: scale(1);
  z-index:2;
}
.hs-slide.is-active img{
  animation: kenburns 9s ease-in-out forwards;
}
@keyframes kenburns{
  from{transform: scale(1.04) translateY(0px)}
  to{transform: scale(1.10) translateY(-8px)}
}

/* Caption bar like screenshot */
.hs-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  height: 120px;
  background: rgba(20, 34, 120, .58);
  backdrop-filter: blur(2px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px 18px;
  text-align:center;
}
.hs-caption h2{
  margin:0;
  color:#fff;
  font-weight: 900;
  font-size: 34px;
  line-height: 1.35;
  text-shadow: 0 8px 16px rgba(0,0,0,.35);
}
.hs-caption h2 a{
text-decoration:none; color:white
}
.hs-caption h2 a:hover{
text-decoration:none; color:aquamarine
}

/* Nav buttons */
.hs-nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.25);
  color:#fff;
  font-size: 32px;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index: 6;
  transition: transform .2s ease, background .2s ease;
}
.hs-nav:hover{background: rgba(0,0,0,.35); transform: translateY(-50%) scale(1.03)}
.hs-prev{right: 14px}
.hs-next{left: 14px}

/* Dots */
.hs-dots{
  position:absolute;
  left: 0; right: 0;
  bottom: 132px;
  display:flex;
  justify-content:center;
  gap: 10px;
  z-index: 6;
}
.hs-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.22);
  cursor:pointer;
  transition: transform .2s ease, background .2s ease;
}
.hs-dot.is-active{background:#fff; transform: scale(1.2)}

/* Responsive */
@media (max-width: 1100px){
  .hs-inner{height: 460px}
  .hs-caption h2{font-size: 30px}
}
@media (max-width: 720px){
  .hs-inner{height: 360px}
  .hs-caption{height: 108px}
  .hs-caption h2{font-size: 22px}
  .hs-dots{bottom: 120px}
  .hs-nav{width: 40px; height: 40px; font-size: 28px}
}

.page.after-banner{padding-top: 18px}

/* ====== Research Section ====== */
.section-head{padding: 10px 0 22px}
.section-title.blue{color:#111}
.underline.blue:after{background:#1a2a8f}

.research-section{
  padding: 38px 0 58px;
  background: #ffffff url("assets/twezhinawa-bg.png") no-repeat top center;
  background-size: 1400px auto;
}
.health-section{
  padding: 38px 0 58px;
  background: #ffffff url("assets/health-bg.png") no-repeat top center;
  background-size: 1400px auto;
}
.research-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 46px;
  align-items:start;
}
.research-card{
  background:#ffffff;
  overflow:hidden;
  border-radius: 2px;
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
}
.rc-media{
  position:relative;
  height: 248px;
  overflow:hidden;
}
.rc-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.rc-label{
  position:absolute;
  top: 12px;
  left: 12px; /* like screenshot */
  background: #2f7b2f;
  color:#fff;
  font-weight: 900;
  font-size: 16px;
  padding: 6px 12px;
  border-radius: 6px;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}
.rc-body{
  background: #f3efe6;
  padding: 22px 18px 26px;
  text-align:center;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.7;
  color:#111;
  min-height: 108px;
  display:flex;
  align-items:center;
  justify-content:center;
}


@media (max-width: 1100px){
  .research-grid{grid-template-columns: 1fr 1fr; gap: 28px}
  .rc-media{height: 220px}
}
@media (max-width: 720px){
  .research-section{background-size: 980px auto}
  .research-grid{grid-template-columns: 1fr}
  .rc-body{font-size: 18px}
}

/* ====== Meju (History) Section ====== */
.meju-section{
  padding: 34px 0 0;
  color:#fff;
  position:relative;
  background: transparent;
}
.meju-section::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%;
  transform: translateX(-50%);
  width: 100vw;
  background: rgba(0,0,0,.50);
  pointer-events:none;
  z-index:1;
}

.meju-section::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%;
  transform: translateX(-50%);
  width: 100vw;
  background: #1b1b1b url("assets/meju-bg.png") no-repeat top center;
  background-size: cover;
  z-index:0;
}
.meju-section > *{position:relative; z-index:2}

.meju-inner{
  width:min(var(--container), calc(100% - 46px));
  margin-inline:auto;
  min-height: 340px;
}
.meju-head{
  display:flex;
  align-items:center;
  gap: 10px;
  width: 100%;
  direction: rtl;
  justify-content: flex-start; /* in RTL: start = right */
  padding: 6px 2px 18px; 
  font-weight: 900;
  font-size: 30px;
}
.meju-icon{
  width:40px;
  height:40px;
  display:block;
  opacity:.95;
}

.meju-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
  align-items:start;
  padding-bottom: 70px; /* leaves room for torn edge inside bg image */
}
.meju-card{background:transparent}
.mc-media{
  position:relative;
  height: 210px;
  overflow:hidden;
  border-radius: 2px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.mc-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.mc-label{
  position:absolute;
  top: 12px;
  left: 12px;
  background: #2f7b2f;
  color:#fff;
  font-weight: 900;
  font-size: 15px;
  padding: 6px 12px;
  border-radius: 6px;
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
}
.mc-text{
  padding: 14px 0 0;
  text-align:center;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.65;
  text-shadow: 0 10px 16px rgba(0,0,0,.35);
}
.mc-text a { color:#fff}
.mc-text a:hover { color:aquamarine}

/* ====== Multimedia Section ====== */
.multimedia-section{
  padding: 40px 0 70px;
  background: #ffffff url("assets/twezhinawa-bg.png") no-repeat top center;
  background-size: 1400px auto;
}
.mm-head{
  text-align:center;
  padding: 10px 0 22px;
}
.mm-icon{
  width:54px;
  height:54px;
  display:inline-block;
  margin-bottom: 8px;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.12));
}
.mm-title{
  margin: 0;
  font-size: 30px;
  font-weight: 900;
  color:#f4a320;
}
.mm-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 42px;
}
.mm-item{text-align:center}
.mm-item img{
  width: 100%;
  height: 210px;
  object-fit:cover;
  display:block;
  border-radius: 2px;
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}
.mm-caption{
  margin-top: 14px;
  font-weight: 900;
  font-size: 18px;
  color:#111;
  line-height:1.65;
}

/* Responsive */
@media (max-width: 1100px){
  .meju-grid{grid-template-columns: 1fr 1fr}
  .mm-grid{grid-template-columns: 1fr 1fr; gap: 26px}
}
@media (max-width: 720px){
  .meju-head{font-size: 26px}
  .meju-grid{grid-template-columns: 1fr; padding-bottom: 56px}
  .mc-media{height: 200px}
  .multimedia-section{background-size: 980px auto}
  .mm-grid{grid-template-columns: 1fr}
  .mm-item img{height: 200px}
}

/* ====== Adab & Honar Section ====== */
.adab-section{
  position: relative;
  background: #1d7d72 url("assets/adab_bg.png") no-repeat center;
  background-size: cover;
  padding: 0;
}

.adab-wrap{
  width: min(var(--container), calc(100% - 46px));
  margin-inline: auto;
  min-height: 350px;
  position: relative;
}

.adab-meta{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 22px;
  z-index: 3;
}

.adab-title{
  color: #ffffff;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: .3px;
  line-height: 1.25;
  text-align: right;
}

.adab-icon{
  width: 115px;
  height: auto;
  opacity: 0.95;
}

.adab-card{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(920px, calc(100% - 320px));
  max-width: 920px;
  z-index: 2;

  /* allow us to place the list on the right side of the white box */
  direction: ltr;
}

.adab-card-inner{
  width: min(430px, 100%);
  margin-left: auto;
  margin-right: 430px;
  padding: 24px 0;

  /* the white box is already part of adab_bg.png */
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;

  direction: rtl;
}

.adab-items{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.adab-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0,0,0,0.09);
}
.adab-item:last-child{ border-bottom: 0; }

.adab-item img{
  width: 132px;
  height: 70px;
  object-fit: cover;
  border-radius: 4px;
}

.adab-item .ai-text{
  flex: 1 1 auto;
  color: #151515;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.7;
  text-align: right;
}

/* ====== End Adab Section ====== */


/* ====== Footer ====== */
.site-footer{
  background: #fff url("assets/footer_bg.jpg") repeat-x center;
  position:relative;
  padding: 200px 0 22px; height:530px;
}
.site-footer .footer-overlay{
  position:relative;
}
.site-footer::before{
  content:"";
  position:absolute;
  inset:0;
 
  pointer-events:none;
}
.footer-inner{
  position:relative;
  z-index:1;
  width:min(var(--container), calc(100% - 46px));
  margin-inline:auto;
  color:#fff;
}
.footer-logo{
  display:flex;
  justify-content:center;
  margin-bottom: 22px;
}
.footer-logo img{
  width: 130px;
  height: auto;
  display:block;
}
.footer-nav{
  display:flex;
  flex-wrap: wrap;
  justify-content:center;
  gap: 28px;
  font-weight: 900;
  padding-bottom: 22px;
}
.footer-nav a{
  color:#fff;
  text-decoration:none;
  opacity:.95;
}
.footer-nav a:hover{opacity:1}
.footer-line{
  height: 1px;
  background: rgba(255,255,255,.35);
  margin: 10px 0 18px;
}
.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}
.site-footer .social{
  display:flex;
  gap: 10px;
}
.site-footer .social a{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.site-footer .social svg{
  width: 18px;
  height: 18px;
  fill:#fff;
}
.footer-copy{
  font-weight: 700;
  font-size: 14px;
  opacity:.95;
}

/* Responsive */
@media (max-width: 980px){
  .adab-section{ padding: 36px 0; }
  .adab-wrap{ min-height: auto; }

  .adab-meta{
    position: static;
    transform: none;
    justify-content: center;
    margin-bottom: 18px;
  }
  .adab-title{ text-align: center; }

  .adab-card{
    position: static;
    transform: none;
    width: 100%;
    max-width: 100%;
    direction: rtl;
  }
  .adab-card-inner{
    margin: 0 auto;
    width: min(560px, 100%);
    padding: 18px 16px;
    background: rgba(255,255,255,.96);
    border-radius: 22px;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
  }

  .footer-bottom{ flex-direction: column; justify-content: center; }
}

/* ====== Post image hover effect (non-slider) ====== */
/* Wrap for multimedia thumbs so hover effect doesn't clip shadows */
.mm-thumb{
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}
/* Keep sizing from existing .mm-item img rules; only override the parts that would clip */
.mm-thumb > img{
  border-radius: 0;
  box-shadow: none;
  transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .35s ease;
  will-change: transform;
}

/* Shared hover effect (inspired by https://codepen.io/nefejames/pen/ogvNgJq) */
:is(.rc-media, .mc-media, .mm-thumb){
  position: relative;
  overflow: hidden;
  isolation: isolate; /* keeps blend modes contained */
}
:is(.rc-media, .mc-media, .mm-thumb) img{
  transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .35s ease;
  will-change: transform;
}
:is(.rc-media, .mc-media, .mm-thumb)::before{
  content: "";
  position: absolute;
  inset: -55%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,.30) 48%,
    rgba(0,255,255,.16) 55%,
    rgba(255,255,255,0) 70%
  );
  transform: translate(-40%,-30%) rotate(12deg);
  opacity: 0;
  transition: opacity .25s ease, transform .9s ease;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2;
}
:is(.rc-media, .mc-media, .mm-thumb)::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 260px at 40% 20%, rgba(255,255,255,.22), transparent 55%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 2;
}
:is(.rc-media, .mc-media, .mm-thumb):hover::before{
  opacity: 1;
  transform: translate(10%,10%) rotate(12deg);
}
:is(.rc-media, .mc-media, .mm-thumb):hover::after{ opacity: 1; }
:is(.rc-media, .mc-media, .mm-thumb):hover img{
  transform: scale(1.08);
  filter: saturate(1.05) contrast(1.02);
}

/* Keep labels above the hover shine */
.rc-label, .mc-label{ z-index: 3; }

@media (prefers-reduced-motion: reduce){
  :is(.rc-media, .mc-media, .mm-thumb) img{ transition: none; }
  :is(.rc-media, .mc-media, .mm-thumb)::before,
  :is(.rc-media, .mc-media, .mm-thumb)::after{ transition: none; }
}



/* ==========================================================
   Top navigation (codepen-inspired) - NO logo
   ========================================================== */

.bz-navbar{
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 62px;
}

.bz-menu-btn{
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.bz-menu-icon{
  display: inline-block;
  width: 26px;
  height: 2px;
  background: #fff;
  position: relative;
  border-radius: 2px;
}
.bz-menu-icon::before,
.bz-menu-icon::after{
  content: "";
  position: absolute;
  left: 0;
  width: 26px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}
.bz-menu-icon::before{ top: -8px; }
.bz-menu-icon::after{ top: 8px; }

.bz-nav-links{
  flex: 1;
  display: flex;
  justify-content: center;
}

.bz-sidebar-head{
  display: none;
}

.bz-links{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}

.bz-links > li{
  position: relative;
  display: flex;
  align-items: center;
}

.bz-links > li > a{
  color: rgba(255,255,255,0.95);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 6px 2px;
}

.bz-links > li:not(:last-child)::after{
  content: "•";
  color: rgba(255,255,255,0.7);
  margin-inline: 10px;
  font-weight: 700;
}

.bz-links > li > a:hover{
  color: #fff;
}

.has-sub > .bz-arrow{
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  margin-inline-start: 4px;
}

.has-sub > .bz-arrow::before{
  content: "";
  position: absolute;
  top: 50%;
  right: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(255,255,255,0.85);
  border-bottom: 2px solid rgba(255,255,255,0.85);
  transform: translate(50%, -50%) rotate(45deg);
}

.sub-menu{
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 220px;
  padding: 10px 0;
  margin: 0;
  list-style: none;
  background: rgba(92, 6, 6, 0.95);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 12px 22px rgba(0,0,0,0.22);
  z-index: 50;
}

.sub-menu li a{
  display: block;
  padding: 10px 14px;
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  font-size: 14px;
}
.sub-menu li a:hover{
  background: rgba(255,255,255,0.08);
  color: #fff;
}

@media (hover:hover){
  .has-sub:hover > .sub-menu{
    display: block;
  }
}

/* Mobile: slide-in menu */
.bz-backdrop{
  display: none;
}

html.nav-lock,
html.nav-lock body{
  overflow: hidden;
}

@media (max-width: 860px){
  .bz-menu-btn{
    display: inline-flex;
  }

  .bz-backdrop{
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 999;
  }
  .bz-backdrop.is-show{
    opacity: 1;
    pointer-events: auto;
  }

  .bz-nav-links{
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(320px, 86vw);
    background: #7a0c0c url("assets/pattern.png") repeat;
    transform: translateX(100%);
    transition: transform .28s ease;
    z-index: 1000;
    flex-direction: column;
    justify-content: flex-start;
    padding: 14px 14px 18px;
  }
  .bz-nav-links.is-open{
    transform: translateX(0);
  }

  .bz-sidebar-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.18);
    margin-bottom: 8px;
  }
  .bz-sidebar-title{
    color: #fff;
    font-weight: 800;
    font-size: 16px;
  }
  .bz-close-btn{
    width: 40px;
    height: 40px;
    border: 0;
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
  }

  .bz-links{
    display: block;
    white-space: normal;
    overflow-y: auto;
    padding: 8px 2px 0;
  }

  .bz-links > li{
    display: block;
    padding: 6px 0;
  }

  .bz-links > li:not(:last-child)::after{
    content: "";
    display: none;
  }

  .bz-links > li > a{
    display: block;
    padding: 10px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
  }

  .has-sub > .bz-arrow{
    position: absolute;
    left: 10px;
    top: 10px;
    margin: 0;
    width: 38px;
    height: 38px;
  }

  .sub-menu{
    position: static;
    min-width: auto;
    padding: 0;
    margin-top: 8px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .has-sub.sub-open > .sub-menu{
    display: block;
  }

  .sub-menu li a{
    padding: 10px 12px;
    margin: 6px 10px 0;
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
  }
}


/* Scroll reveal (load box-by-box on scroll) */
.reveal{
  opacity: 0;
  transform: translateY(26px);
  filter: blur(2px);
  transition:
    opacity .70s cubic-bezier(.2,.9,.2,1),
    transform .70s cubic-bezier(.2,.9,.2,1),
    filter .70s cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform, filter;
}
.reveal.reveal-visible{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}



/* Animate.css scroll reveal helpers */
.js .sa-reveal{opacity:0;}
.sa-reveal.animate__animated{opacity:1;}
@media (prefers-reduced-motion: reduce){
  .js .sa-reveal{opacity:1 !important;}
}

/* =========================
   About page
   ========================= */
.page-content{background:#fff}

.breadcrumb-bar{
  position: relative;
  padding: 26px 0 18px;
  background: #fbf7ef;
  border-bottom: 1px solid rgba(0,0,0,.06);
  overflow:hidden;
}
.breadcrumb-bar::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("assets/pattern.png") repeat;
  opacity:.08;
  pointer-events:none;
}
.breadcrumb-row{
  position: relative;
  z-index: 1;
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.page-title{
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: .2px;
}
.breadcrumb{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 700;
  color:#444;
}
.breadcrumb a{
  color:#444;
  text-decoration:none;
}
.breadcrumb a:hover{color:#111}
.breadcrumb .sep{opacity:.7}
.breadcrumb .current{color:#111}

.about-detail{
  padding: 34px 0 70px;
  background:#fff;
}
.about-grid{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap: 22px;
  align-items: start;
}
.about-card,
.side-box{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
}
.about-card{
  padding: 22px 22px 18px;
}
.about-card h2{
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 900;
}
.about-card p{
  margin: 0 0 12px;
  line-height: 1.95;
  color:#222;
}
.about-points{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 16px;
}
.point{
  background: #fbf7ef;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  padding: 14px 14px 10px;
}
.point h3{
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 900;
}
.point p{margin:0; color:#333; line-height:1.85}
.point ul{margin:0; padding:0 18px 0 0}
.point li{margin: 6px 0; color:#333}

.about-side{
  display:flex;
  flex-direction: column;
  gap: 16px;
}
.side-box{
  padding: 16px 16px 14px;
}
.side-box h3{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 900;
}
.kv{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.kv li{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(0,0,0,.12);
}
.kv li:last-child{border-bottom:none; padding-bottom:0}
.kv span:first-child{
  color:#666;
  font-weight: 800;
  white-space: nowrap;
}
.kv a{color:#111; text-decoration:none}
.kv a:hover{text-decoration: underline}

.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  background: #b91c1c;
  color:#fff;
  border-radius: 10px;
  text-decoration:none;
  font-weight: 900;
  width: fit-content;
}
.btn-primary:hover{filter: brightness(.95)}

@media (max-width: 980px){
  .about-grid{grid-template-columns: 1fr}
  .about-points{grid-template-columns: 1fr}
  .breadcrumb-row{justify-content: flex-start}
}

/* Article card */
.bd-article{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  overflow:hidden;
}
.bd-hero img{
  width:45%;
  height: 380px;
  object-fit: cover;
  display:block; float:left!important; margin:0 20px 20px 0; border-right:1px #ccc solid; padding-right:10px; border-bottom:1px #ccc solid; padding-bottom:10px;
}
.bd-body{padding: 18px 18px 16px}

.bd-meta{
  display:flex;
  align-items:center;
  flex-wrap: wrap;
  gap: 10px;
  color:#555;
  font-weight: 800;
  font-size: 13px;
}
.bd-chip{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(244,163,32,.16);
  color:#111;
  border: 1px solid rgba(244,163,32,.35);
}
.bd-dot{opacity:.65}

.bd-title{
  margin: 10px 0 10px;
  font-size: 30px;
  font-weight: 950;
  line-height: 1.25;
}
.bd-content{
  color:#1a1a1a;
  line-height: 2.05;
  font-size: 16px;
}
.bd-content p{margin: 0 0 14px}
.bd-content h3{
  margin: 18px 0 10px;
  font-size: 20px;
  font-weight: 950;
}
.bd-list{
  margin: 0 0 14px;
  padding: 0 18px 0 0;
}
.bd-list li{margin: 8px 0}

.bd-quote{
  margin: 16px 0;
  padding: 14px 14px 12px;
  background: #fbf7ef;
  border-right: 5px solid var(--accent);
  border-radius: 12px;
  font-weight: 900;
  color:#222;
}

.bd-tags-share{
  display:flex;
  align-items:center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.08);
  margin-top: 16px;
}
.bd-tags{display:flex; flex-wrap:wrap; gap: 8px}
.bd-tag{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background:#fff;
  color:#111;
  font-weight: 900;
}
.bd-tag:hover{border-color: rgba(0,0,0,.20)}
.bd-share{display:flex; align-items:center; gap: 8px}
.bd-share-title{font-weight: 900; color:#333}
.bd-share-btn{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.10);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  color:#111;
  background:#fff;
}
.bd-share-btn:hover{border-color: rgba(0,0,0,.22)}

/* Author */
.bd-author{
  display:flex;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  margin-top: 18px;
  background: #fff;
}
.bd-author-avatar{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(244,163,32,.35), rgba(185,28,28,.20));
  border: 1px solid rgba(0,0,0,.08);
  flex: 0 0 auto;
}
.bd-author-name{font-weight: 950; margin-bottom: 4px}
.bd-author-bio{color:#333; line-height: 1.9}

/* Comments */
.bd-comments{margin-top: 22px}
.bd-sec-title{
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 950;
}
.bd-comment{
  display:flex;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background:#fff;
  margin-bottom: 12px;
}
.bd-c-avatar{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #fbf7ef;
  border: 1px solid rgba(0,0,0,.08);
  flex: 0 0 auto;
}
.bd-c-head{
  display:flex;
  align-items: baseline;
  gap: 12px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.bd-c-name{font-weight: 950}
.bd-c-date{color:#666; font-weight: 800; font-size: 13px}
.bd-c-body p{margin: 8px 0 0; color:#222; line-height: 1.95}
.bd-reply{
  display:inline-flex;
  margin-top: 8px;
  color:#111;
  font-weight: 950;
  border-bottom: 2px solid rgba(244,163,32,.65);
}

/* Form */
.bd-form{margin-top: 22px}
.bd-form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.bd-field label{
  display:block;
  margin-bottom: 6px;
  font-weight: 900;
  color:#333;
}
.bd-field input,
.bd-field textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  outline: none;
  font: inherit;
  background:#fff;
}
.bd-field input:focus,
.bd-field textarea:focus{
  border-color: rgba(244,163,32,.70);
  box-shadow: 0 0 0 4px rgba(244,163,32,.16);
}
.bd-field--full{grid-column: 1 / -1}
.bd-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 12px;
  border: 0;
  background: #b91c1c;
  color:#fff;
  font-weight: 950;
  cursor:pointer;
  width: fit-content;
}
.bd-btn:hover{filter: brightness(.95)}

/* Sidebar */
.bd-side{display:flex; flex-direction: column; gap: 16px}
.bd-box{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  padding: 14px;
}
.bd-box-title{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 950;
}
.bd-search{
  display:flex;
  gap: 10px;
}
.bd-search input{
  flex:1;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  font: inherit;
}
.bd-search button{
  width: 44px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background:#fff;
  cursor:pointer;
}
.bd-search button:hover{border-color: rgba(0,0,0,.22)}

.bd-cats{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.bd-cats li{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(0,0,0,.12);
}
.bd-cats li:last-child{border-bottom:none; padding-bottom:0}
.bd-cats a{color:#111; font-weight: 900}
.bd-cats span{color:#666; font-weight: 900}

.bd-recent{display:flex; flex-direction: column; gap: 12px}
.bd-r-item{
  display:flex;
  gap: 10px;
  align-items:center;
}
.bd-r-thumb{
  width: 56px;
  height: 48px;
  border-radius: 12px;
  background: #fbf7ef url("assets/pattern.png") repeat;
  border: 1px solid rgba(0,0,0,.08);
  flex: 0 0 auto;
}
.bd-r-title{display:block; color:#111; font-weight: 950; line-height:1.4}
.bd-r-date{display:block; color:#666; font-weight: 800; font-size: 13px; margin-top: 4px}

.bd-tags-cloud{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bd-tags-cloud a{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background:#fff;
  color:#111;
  font-weight: 900;
}
.bd-tags-cloud a:hover{border-color: rgba(0,0,0,.22)}

.bd-box--ad{padding: 12px}
.bd-ad{
  height: 130px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(244,163,32,.20), rgba(185,28,28,.10));
  border: 1px dashed rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  color:#111;
}

/* Responsive */
@media (max-width: 980px){
  .bd-grid{grid-template-columns: 1fr}
  .bd-hero img{height: 260px; width:100%!important}
  .bd-form-grid{grid-template-columns: 1fr}
  .bd-crumb-row{justify-content: flex-start}
  .bd-hero img{border-right:0 #ccc solid; padding-right:0; border-bottom:0 #ccc solid; padding-bottom:0;}
}



  .imgnewsarticle{
  width: 104px;
  height: 104px;
  border-radius: 999px;
  border: 6px solid #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}


  /* wrapper */
.media-thumb{
  position: relative;
  display: block;
  overflow: hidden;
}

/* optional: dark overlay */
.media-thumb.is-video::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.18);
  opacity: .15;
  transition: opacity .25s ease;
  pointer-events:none;
}

/* play badge container */
.media-thumb .video-play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none; /* clickable stays on the link */
}

/* circle */
.media-thumb .video-play::before{
  content:"";
  width:78px;
  height:78px;
  border:4px solid #fff;
  border-radius:50%;
  box-shadow: 0 0 0 0 rgba(255,255,255,.35);
  transition: transform .25s ease;
}

/* triangle */
.media-thumb .video-play::after{
  content:"";
  position:absolute;
  margin-left:6px;
  width:0;
  height:0;
  border-top:14px solid transparent;
  border-bottom:14px solid transparent;
  border-left:22px solid #fff;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
  transition: transform .25s ease;
}

/* hover effect */
.media-thumb.is-video:hover::before{
  opacity: .35;
}

.media-thumb.is-video:hover .video-play::before{
  transform: scale(1.08);
  animation: videoPulse 1.4s infinite;
}

.media-thumb.is-video:hover .video-play::after{
  transform: scale(1.08);
}

/* pulse animation */
@keyframes videoPulse{
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.35); }
  70%  { box-shadow: 0 0 0 18px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}



.PagerButtonCSS { padding: 10px 17px; background-color:red; width: 65px; height: 43px; font-size: 20px; }
.PagerButtonCSS:hover { padding: 10px 17px; background-color:red; border: 0; width: 65px; height: 43px; cursor: pointer; font-size: 20px; }

.NumericButtonCSS { padding: 10px 17px; background: url(../images/pagbg.jpg) no-repeat; font-size: 20px; }
.NumericButtonCSS:hover { padding: 10px 17px; background: url(../images/pagbg1.jpg) no-repeat; font-size: 20px; }
.CurrentPageLabelCSS { padding: 10px 17px; background: url(../images/pagbg.jpg) no-repeat; color: #000; font-weight: bold; font-size: 20px; }
.NextPreviousButtonCSS { padding: 10px 17px; background: url(../images/pagbg.jpg) no-repeat; }


.paginationcls { width: 95%; }
div.pager { width: 100%; margin-top: 5px; text-align: center; background-color: #0815B5!important; padding: 10px; color: #000; }
/* pager links */
div.pager a { border: 0 solid #fff; color: #fff !important; background: #AC6358; padding: 2px 14px; display: inline-block; text-decoration: none; margin: auto 2px; }
/* current page */
div.pager span span { color: #fff; padding: 3px 15px; display: inline-block; margin: auto 2px; background: #AC6358; }
.current { color: #000; padding: 3px 5px;}
.numeric { color: #000;padding: 3px 5px; }
.next { color: #000; padding: 3px 5px;}

 .copyrightdv { width: 100%; text-align: center; color: #fff; padding: 10px; background-color: #901814; margin: 0 auto; }

 .biruradv { width: 371px; height: 124px; margin-top: 20px; }
 .biruradvRR { width: 371px; height: 124px; margin-top: 20px; float: right; margin: 0 0 20px 10px }
 .biruradv1 { width: 271px; height: 124px; float: right; }
 .biruradv2 { width: 100px; height: 124px; float: left; }
 .biruradv1T { width: 271px; height: 93px; font-size: 18px; }
 .biruradv1B { width: 266px; height: 26px; text-align: left; padding: 5px 5px 0 10px; color: #901421; background: -moz-linear-gradient(left, rgba(210,218,222,1) 0%, rgba(210,218,222,0.97) 3%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(left, rgba(210,218,222,1) 0%,rgba(210,218,222,0.97) 3%,rgba(255,255,255,0) 100%); background: linear-gradient(to right, rgba(210,218,222,1) 0%,rgba(210,218,222,0.97) 3%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2dade', endColorstr='#00ffffff',GradientType=1 ); }
 .ArchiveDiv { width: 100%; height: 45px; padding-top: 7px; background-color: #B51807; padding-right: 10px; margin-bottom: 10px; color: #fff; }
 .ArticleList1 { width: 140px; float: right; color: #000; padding-top: 5px; }
 .ArticleList2 { width: 160px; float: right; padding-top: 5px; }
 .ArticleList3 { width: 220px; float: right; padding-right:80px; padding-top: 3px; }


    /* DataPager style (RTL, red bar) */
        .bz-pager-wrap{margin:22px 0; text-align:center; clear:both; background-color:#eee; padding:10px; color:blue!important}
      

        /* wrapper */
.bz-dp { direction: rtl; text-align: center;color:#fff!important }
.bz-dp table { margin: 0 auto; border-collapse: separate; border-spacing: 3px;color:#fff!important }

/* buttons (numbers + prev/next) */
.bz-dp a, .bz-dp span {
  display: inline-block;
  min-width: 34px;
  padding: 8px 10px;
  background: #b30000;
  color: #fff!important;
  text-decoration: none;
  border: 2px solid #fff;
  font-weight: 700;
  line-height: 1;
}
        .num { padding:0 5px!important; background-color:#ccc}
         .num:hover { padding:0 5px!important; background-color:#0815B5; color:#fff}
/* current page */
.bz-dp .active, .bz-dp .current {
  background-color: red!important;color:#fff!important
}

/* prev/next */
.bz-dp .nav { min-width: 60px;color:#fff!important }

/* disabled (label/span instead of link) */
.bz-dp span.nav,
.bz-dp span { opacity: .55; cursor: default; color:#fff!important }


.dropdown {
  position: relative;
  display: inline-block;

  font-size: 18px;
  background-color: #fff;
  border-radius: 4px;
  width: 220px;
  text-align: right;
}

.dropdown > a,
.dropdown > span {

  font-size: 20px;
  padding: 15px 25px 15px 15px;
  display: inline-block;
  color: white;
  text-decoration: none;
  cursor: pointer;
}

.dropdown > a:before,
.dropdown > span:before {
  position: absolute;
  right: 20px;
  top: 25px;
  content: " ";
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid white;
  cursor: none;
}

.dropdown input[type="checkbox"] {
  position: absolute;
  display: block;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  margin: 0px;
  opacity: 0;
  cursor: pointer;
}

.dropdown input[type="checkbox"]:checked {
  position: fixed;
  z-index: +0;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}
.dropdown label {
  width: 100%;
}
.dropdown ul {
  text-align: left;
  position: absolute;
  top: 36px;
  border: 1px solid #ccc;
  border-radius: 3px;
  left: 0px;
  list-style: none;
  padding: 4px 0px;
  display: none;
  background-color: white;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.175);
  width: 220px;
}

.dropdown input[type="checkbox"]:checked + ul {
  display: block;
}

.dropdown ul li {
  display: block;
  padding: 6px 20px;
  white-space: nowrap;
  min-width: 100px;
}

.dropdown ul li:hover {
  background-color: #f5f5f5;
  cursor: pointer;
}

.dropdown ul li a {
  text-decoration: none;
  display: block;
  color: black;
}
.dropdown .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
  font-size: 1px;
  padding: 0;
}
.dropdown:hover {
  background-position: right center;
}