@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
/* ============================================================
   Darul Ifta (دار الافتاء) — fatwa template styles
   Palette extracted from the reference design assets:
     teal   #487890   gold #a87838   button-orange #c08840
     heading-gold #b08038   red #881818   header-bg #916226
   Urdu font: Jameel Noori Nastaleeq (loaded site-wide by the font plugin)
   ============================================================ */

.difta-wrap{
	/* colors matched to the live /darul-ifta/ landing page */
	--teal:#487890;
	--teal-dark:#3c6579;
	--gold:#af7f38;        /* landing page topic-title gold */
	--btn:#c49244;         /* landing page search-button gold */
	--btn-dark:#a87838;
	--heading:#af7f38;
	--red:#8a1818;
	--header-bg:#916226;
	--ink:#1a1a1a;
	--paper:#ffffff;
	--urdu:'Jameel Noori Nastaleeq','Hussaini Nastaleeq','Mehr Nastaliq Web',Nafees,Verdana,sans-serif;

	direction:rtl;
	text-align:right;
	font-family:var(--urdu);
	color:var(--ink);
	/* same white damask pattern the /darul-ifta/ landing page uses behind content */
	background:#f4f4f6 url('https://maahadulkhalil.com/wp-content/uploads/2026/04/Asset-96-1-scaled.png') top center repeat;
	line-height:2.1;
	overflow-x:hidden;
}
.difta-wrap *{box-sizing:border-box}

/* ---------- Header banner (matches the /darul-ifta/ landing page exactly) ---------- */
.difta-header{
	background:var(--header-bg) url('../img/header-bg.png') center/cover no-repeat;
	padding:34px 16px;
	text-align:center;
}
.difta-header-inner{max-width:1000px;margin:0 auto}
.difta-logo{max-width:620px;width:90%;height:auto;display:inline-block}

/* The exact banner image used on the landing page (full calligraphy on brown).
   Image is 1600x269 (aspect ~5.95). Use full width + matching aspect so the
   دار الافتاء calligraphy is always fully visible and never cropped. */
.difta-header-banner{
	background:url('https://maahadulkhalil.com/wp-content/uploads/2026/05/%D8%AF%D8%A7%D8%B1-%D8%A7%D9%84%D8%A7%D9%81%D8%AA%D8%A7%D8%A1-page.psd-scaled.png') center center no-repeat;
	background-size:100% 100%;      /* fill width & the aspect-matched height exactly */
	padding:0;
	width:100%;
	aspect-ratio:1600 / 269;        /* keeps the calligraphy proportion, no crop */
	display:flex;align-items:center;justify-content:center;
}
/* White دار الافتاء | معہد الخلیل calligraphy overlaid on the texture.
   The source art is thin gold outline; make it solid white (like the landing
   page) with a filter, plus a soft shadow for legibility on the texture. */
.difta-header-calligraphy{
	max-width:70%;
	max-height:74%;
	width:auto;height:auto;
	object-fit:contain;
	filter:brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

/* ---------- Container ---------- */
.difta-container{
	max-width:960px;
	margin:0 auto;
	background:var(--paper);
	padding:40px 46px 60px;
	box-shadow:0 0 22px rgba(0,0,0,.06);
}

/* ---------- Title ---------- */
.difta-title{
	text-align:center;
	color:var(--ink);
	font-family:var(--urdu);
	font-size:34px;
	font-weight:400;
	line-height:1.9;
	margin:10px 0 6px;
}
.difta-ornament{
	width:100%;max-width:620px;height:22px;margin:18px auto 34px;
	background:url('../img/ornament.png') center/contain no-repeat;
}
.difta-ornament-top{margin:6px auto 26px}

/* ---------- Section badges (سوال / جواب) — exact design images ---------- */
.difta-section{margin:0 0 26px}
.difta-badge{
	/* The original design badge (gold circle + teal bar) is the background image
	   (150x56). The circle sits on the RIGHT ~37%; the teal bar is the left ~63%.
	   Width matches the image exactly so positioning is predictable. */
	background-repeat:no-repeat;
	background-position:center center;
	background-size:100% 100%;
	width:150px;
	height:56px;
	position:relative;
	margin-bottom:16px;
}
.difta-badge-text{
	color:#fff;font-size:20px;font-family:var(--urdu);line-height:1;
	white-space:nowrap;
	position:absolute;
	/* center the word over the teal bar: teal spans right:37%..left. Its middle is ~68% from right. */
	top:50%;right:36%;
	transform:translate(50%,-52%);
}

/* ---------- Body text ---------- */
.difta-body{
	font-family:var(--urdu);
	font-size:22px;
	line-height:2.35;
	color:#222;
	text-align:justify;
}
.difta-body p{margin:0 0 14px}
/* Arabic citations (indented, colored) */
.difta-body .ar_writing,
.difta-body .indent{
	display:block;
	color:#1f4a5a;
	font-size:20px;
	line-height:2.2;
	margin:10px 0;
	padding-right:10px;
}

/* ---------- Fatwa number / reference ---------- */
.difta-meta{
	display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
	margin:34px 0 8px;
	font-family:var(--urdu);
	font-size:22px;
	color:var(--red);
}
.difta-number{font-weight:400}
.difta-ref{font-weight:400}

/* ---------- Action buttons (exact design image buttons) ---------- */
.difta-actions{
	display:flex;justify-content:center;flex-wrap:wrap;gap:18px;margin:30px 0 10px;
}
.difta-imgbtn{
	background:none;border:none;padding:0;cursor:pointer;
	transition:transform .12s,filter .12s;line-height:0;
}
.difta-imgbtn img{height:46px;width:auto;display:block}
.difta-imgbtn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.difta-imgbtn:active{transform:translateY(0)}

/* ---------- Related fatwas ---------- */
.difta-related{margin:46px 0 10px}
.difta-related-heading{
	text-align:center;color:var(--heading);
	font-family:var(--urdu);font-size:30px;font-weight:400;
	margin:0 0 26px;
}
.difta-related-list{list-style:none;margin:0;padding:0}
.difta-related-list li{border-bottom:1px solid #e3e3e3}
.difta-related-list a{
	display:flex;align-items:center;gap:14px;
	padding:14px 6px;text-decoration:none;color:var(--ink);
	font-family:var(--urdu);font-size:22px;
	transition:color .15s;
}
.difta-related-list a:hover{color:var(--teal)}
.difta-star{width:22px;height:22px;flex:0 0 auto;object-fit:contain}
.difta-related-text{flex:1}

/* ---------- Footer CTA ---------- */
.difta-cta{
	margin-top:50px;
	background:var(--header-bg) url('../img/cta-bg.png') center/cover no-repeat;
	padding:40px 20px;
}
.difta-cta-inner{
	max-width:960px;margin:0 auto;
	display:flex;align-items:center;gap:24px;flex-wrap:wrap;
	justify-content:flex-end;
	background:rgba(255,255,255,.94);
	border-radius:14px;padding:26px 30px;
}
.difta-cta-icons{flex:0 0 auto;width:96px;height:auto;object-fit:contain}
.difta-cta-text{flex:1;min-width:240px;text-align:right}
.difta-cta-text h3{
	margin:0 0 8px;color:var(--gold);
	font-family:var(--urdu);font-size:26px;font-weight:400;
}
.difta-cta-text p{
	margin:0;color:#555;font-family:var(--urdu);font-size:18px;line-height:2;
}
.difta-ask-btn{
	flex:0 0 auto;line-height:0;text-decoration:none;
	transition:transform .12s,filter .12s;
}
.difta-ask-btn img{height:52px;width:auto;display:block}
.difta-ask-btn:hover{transform:translateY(-2px);filter:brightness(1.05)}

/* ---------- Responsive ---------- */

/* Tablet */
@media (max-width:1024px){
	.difta-container{max-width:94%;padding:34px 34px 50px}
}

/* Phone */
@media (max-width:768px){
	.difta-container{padding:24px 16px 40px}
	.difta-title{font-size:24px;line-height:1.8}
	.difta-ornament{max-width:88%;height:18px;margin:14px auto 26px}
	.difta-body{font-size:19px;line-height:2.15}
	.difta-body .ar_writing,.difta-body .indent{font-size:18px;line-height:2}

	/* fatwa number + reference: stack neatly instead of cramping on one row */
	.difta-meta{flex-direction:column;gap:4px;font-size:19px;margin:26px 0 6px}

	/* buttons: full-width, larger tap targets, stacked */
	.difta-actions{gap:12px;flex-direction:column;align-items:center}
	.difta-imgbtn{width:100%;max-width:280px}
	.difta-imgbtn img{height:44px;margin:0 auto}

	.difta-badge{width:132px;height:48px}
	.difta-badge-text{font-size:18px}

	.difta-related-heading{font-size:24px}
	.difta-related-list a{font-size:19px;padding:12px 4px}

	/* footer CTA: stack cleanly, centered */
	.difta-cta{padding:28px 14px}
	.difta-cta-inner{flex-direction:column;justify-content:center;text-align:center;gap:14px;padding:22px 18px}
	.difta-cta-text{text-align:center;min-width:0}
	.difta-cta-text h3{font-size:22px}
	.difta-cta-text p{font-size:16px}
	.difta-ask-btn img{height:46px}
}

/* Small phone */
@media (max-width:400px){
	.difta-title{font-size:21px}
	.difta-body{font-size:18px}
}

/* ---------- Print styles ---------- */
@media print{
	.difta-actions,.difta-cta,.difta-related,
	.difta-maz-actions,.difta-ask-actions,.difta-maz-back,
	.difta-maz-btn,.difta-ask-btn,.difta-qask,
	#wpadminbar,header:not(.difta-header),footer,nav{display:none !important}
	.difta-container{box-shadow:none;max-width:100%}
	.difta-wrap{background:#fff}
	/* Chrome prints the target of every link after its text; suppress it. */
	a[href]:after,a[href]:before{content:none !important}
}

/* ============================================================
   LANDING PAGE (darul_ifta_home)
   ============================================================ */
.difta-home-container{padding-top:30px}

/* ---- Search bar ---- */
.difta-search-wrap{
	background:#efefef url('../img/header-bg.png') center/cover;
	background-blend-mode:soft-light;
	padding:26px 16px;
}
.difta-search{
	max-width:960px;margin:0 auto;
	background:#fff;border-radius:14px;
	display:flex;align-items:center;flex-wrap:wrap;gap:12px;
	padding:16px 22px;box-shadow:0 3px 12px rgba(0,0,0,.08);
}
.difta-search-label{
	font-family:var(--urdu);font-size:24px;color:var(--teal);
	display:flex;align-items:center;gap:8px;font-weight:400;
}
.difta-search input[type=text],
.difta-search .difta-select{
	flex:1;min-width:140px;
	border:1px solid #d8dde3;border-radius:8px;
	background:#e9edf1;
	padding:10px 14px;font-family:var(--urdu);font-size:17px;
	direction:rtl;color:#333;
}
.difta-search-btn{
	background:var(--gold);color:#fff;border:none;cursor:pointer;
	font-family:var(--urdu);font-size:18px;
	padding:10px 22px;border-radius:8px;
	display:flex;align-items:center;gap:8px;
	transition:background .15s;
}
.difta-search-btn:hover{background:var(--btn-dark)}
.difta-search-icon{font-size:16px}

/* ---- Two columns ---- */
.difta-cols{
	display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:30px 0 40px;
}
.difta-col-head{
	background:var(--teal);color:#fff;text-align:center;
	font-family:var(--urdu);font-size:24px;
	padding:12px;border-radius:8px 8px 0 0;
}
.difta-row{
	display:flex;align-items:center;gap:12px;
	background:#fff;border:1px solid #e6e6e6;border-top:none;
	padding:14px 16px;text-decoration:none;color:var(--ink);
	font-family:var(--urdu);font-size:19px;
	transition:background .12s;
}
.difta-row:hover{background:#f6f8fa;color:var(--teal)}
.difta-row-plus{
	color:var(--gold);font-size:24px;font-weight:700;flex:0 0 auto;line-height:1;
}
.difta-row-text{flex:1}
.difta-row-empty{justify-content:center;color:#999}

/* ---- Topic grid ---- */
.difta-topic-grid{
	display:grid;grid-template-columns:repeat(3,1fr);gap:30px 40px;margin:10px 0 30px;
}
.difta-topic-title{
	color:var(--heading);font-family:var(--urdu);font-size:24px;font-weight:400;
	margin:0 0 12px;border-bottom:2px solid var(--gold);padding-bottom:8px;
}
.difta-topic-item{
	display:flex;align-items:flex-start;gap:8px;
	padding:8px 0;text-decoration:none;color:#444;
	font-family:var(--urdu);font-size:17px;line-height:1.9;
	border-bottom:1px dashed #e2e2e2;
}
.difta-topic-item:hover{color:var(--teal)}
.difta-star-sm{color:var(--teal);font-size:15px;flex:0 0 auto;margin-top:4px}
.difta-topic-more{
	display:inline-block;margin-top:12px;
	color:var(--gold);text-decoration:none;font-family:var(--urdu);font-size:17px;
}
.difta-topic-more:hover{text-decoration:underline}

@media (max-width:768px){
	.difta-cols{grid-template-columns:1fr}
	.difta-topic-grid{grid-template-columns:1fr}
	.difta-search{flex-direction:column;align-items:stretch}
}

/* ---- Search results block (on the /darul-ifta/ page) ---- */
.difta-search-results-block .difta-container{padding:30px 40px 40px;margin-bottom:30px}
.difta-search-results-block .difta-related-heading{margin-bottom:20px}
.difta-search-results-block .difta-related-list a{padding:12px 6px;font-size:20px}

/* ---- Search widget: mobile responsiveness (widget keeps its desktop design) ---- */
@media (max-width:768px){
	.widget-body .search-icon-img{ width:40px !important; height:40px !important; }
	.widget-body .title-block{ display:flex; align-items:center; gap:8px; justify-content:flex-start; }
	.widget-body .fields-row-1{ display:flex; flex-direction:column; gap:10px; }
	.widget-body .field-box-half{ width:100% !important; }
	.widget-body .fields-row-2{ display:flex; flex-direction:column; gap:10px; }
	.widget-body .button-align-right,
	.widget-body .select-align-left{ width:100%; }
	.widget-body .input-element{ width:100% !important; box-sizing:border-box; font-size:16px; }
	.widget-body .search-submit-btn{ width:100%; justify-content:center; align-items:center; height:48px; padding:0 18px; gap:8px; }
	.widget-body .search-submit-btn .btn-icon{ width:20px !important; height:20px !important; flex:0 0 auto; }
	.widget-body .search-icon-img{ flex:0 0 auto; }
}

/* Search widget icon sizes — constrain on ALL viewports (title icon + button icon).
   (The title SVG has no intrinsic size; without this it fills its container.) */
.widget-body .title-block{display:flex;align-items:center;gap:10px}
.widget-body .search-icon-img{width:34px !important;height:34px !important;flex:0 0 auto}
.widget-body .search-submit-btn .btn-icon{width:20px !important;height:20px !important;flex:0 0 auto}

/* ============================================================
   SEARCH WIDGET — full layout (desktop grid, matches original design)
   ============================================================ */
.widget-body{max-width:1000px;margin:0 auto;direction:rtl}
.widget-body .title-block{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.widget-body .title-text{
	font-family:'Jameel Noori Nastaleeq',sans-serif;
	font-size:30px;color:#1a1a1a;margin:0;font-weight:400;
}
.widget-body .fields-row-1{
	display:flex;gap:16px;margin-bottom:14px;
}
.widget-body .field-box-half{flex:1}
.widget-body .input-element{
	width:100%;box-sizing:border-box;
	background:#5b8ea3;color:#fff;
	border:none;border-radius:6px;
	padding:12px 16px;font-size:16px;
	font-family:'Jameel Noori Nastaleeq',sans-serif;
	direction:rtl;
}
.widget-body .input-element::placeholder{color:#eaf2f5;opacity:.9}
.widget-body select.input-element{background:#5b8ea3;cursor:pointer}
.widget-body select.input-element option{color:#1a1a1a;background:#fff}
.widget-body .fields-row-2{
	display:flex;align-items:center;gap:16px;
}
.widget-body .button-align-right{flex:0 0 auto}
.widget-body .select-align-left{flex:1}
.widget-body .search-submit-btn{
	display:inline-flex;align-items:center;gap:8px;
	background:#c49244;color:#fff;border:none;cursor:pointer;
	border-radius:6px;padding:11px 26px;
	font-family:'Jameel Noori Nastaleeq',sans-serif;font-size:17px;
	transition:background .15s;
}
.widget-body .search-submit-btn:hover{background:#b07f34}

/* Search widget — mobile */
@media (max-width:768px){
	.widget-body .fields-row-1{flex-direction:column;gap:10px}
	.widget-body .fields-row-2{flex-direction:column;align-items:stretch;gap:10px}
	.widget-body .button-align-right{width:100%}
	.widget-body .search-submit-btn{width:100%;justify-content:center;height:48px}
	.widget-body .title-text{font-size:26px}
}

/* ============================================================
   نئے / منتخب سوالات SECTION (matches design images 07 & 08)
   ============================================================ */
.difta-qwrap{ direction:rtl; font-family:var(--urdu,'Jameel Noori Nastaleeq',sans-serif); max-width:1100px; margin:30px auto; padding:0 16px; }
.difta-qbox{
	display:flex;
	background:#fff;
	border-radius:18px;
	overflow:hidden;
	box-shadow:0 6px 24px rgba(0,0,0,.10);
}
.difta-qcol{ flex:1; display:flex; flex-direction:column; }
.difta-qcol-selected{ border-left:1px solid #d8d8d8; }  /* divider between the two columns */

.difta-qhead{
	text-align:center; color:#fff; font-size:26px; font-family:var(--urdu,'Jameel Noori Nastaleeq',sans-serif);
	padding:14px 10px; font-weight:400;
}
.difta-qhead-brown{ background:#6b461a; }
.difta-qhead-tan{ background:#dda66b; }

.difta-qbody{ padding:22px 26px; }

.difta-qitem{ padding:14px 0; border-bottom:1px solid #e3ddd2; }
.difta-qitem:last-child{ border-bottom:none; }
.difta-qtitle{
	display:block; color:#2a2a2a; text-decoration:none;
	font-size:21px; line-height:1.9; font-family:var(--urdu,'Jameel Noori Nastaleeq',sans-serif);
	transition:color .15s;
}
.difta-qtitle:hover{ color:#6b461a; }
.difta-qmore{
	display:inline-block; margin-top:6px;
	color:#af7f38; text-decoration:none; font-size:18px;
	font-family:var(--urdu,'Jameel Noori Nastaleeq',sans-serif);
}
.difta-qmore:hover{ text-decoration:underline; }
.difta-qmore-arrow{ font-weight:700; }

/* Expanded top item (نئے سوالات) — bigger title + preview text */
.difta-qitem-expanded .difta-qtitle{ font-size:26px; color:#5b3d16; margin-bottom:8px; }
.difta-qpreview{
	margin:6px 0 8px; color:#555; font-size:17px; line-height:2;
	font-family:var(--urdu,'Jameel Noori Nastaleeq',sans-serif); text-align:justify;
}
.difta-qempty{ color:#999; text-align:center; }

/* Responsive: stack the two columns on mobile */
@media (max-width:768px){
	.difta-qbox{ flex-direction:column; }
	.difta-qcol-selected{ border-left:none; border-bottom:1px solid #d8d8d8; }
	.difta-qhead{ font-size:22px; }
	.difta-qbody{ padding:16px 18px; }
	.difta-qtitle{ font-size:19px; }
	.difta-qitem-expanded .difta-qtitle{ font-size:22px; }
}

/* ============================================================
   تعارف (About) pages — معہد کا تعارف (design taruf-04)
   ============================================================ */
.difta-taruf{ direction:rtl; font-family:var(--urdu,'Jameel Noori Nastaleeq',sans-serif); }
/* design hero band (client's original calligraphy artwork) */
.difta-taruf-hero{ width:100%; line-height:0; }
.difta-taruf-hero .difta-hero-img{ display:block; width:100%; height:auto; }
.difta-taruf-header{
	background:#487890; text-align:center; padding:22px 16px;
}
.difta-taruf-title{
	color:#fff; font-family:var(--urdu,'Jameel Noori Nastaleeq',sans-serif);
	font-size:42px; font-weight:400; margin:0; line-height:1.7;
}
.difta-taruf-body{
	max-width:1040px; margin:0 auto; padding:40px 48px 56px;
	background:#fff;
}
.difta-taruf-intro{
	font-size:27px; line-height:2.35; color:#2a2a2a; text-align:justify;
	margin:0 0 30px; font-family:var(--urdu,'Jameel Noori Nastaleeq',sans-serif);
}
.difta-taruf-sec{ margin:0 0 26px; }
.difta-taruf-heading{
	background:#487890; color:#fff;
	font-family:var(--urdu,'Jameel Noori Nastaleeq',sans-serif);
	font-size:30px; font-weight:400; margin:0 0 14px;
	padding:9px 28px; border-radius:5px;
	display:inline-block; min-width:240px;
}
.difta-taruf-content{
	font-size:26px; line-height:2.3; color:#2a2a2a; text-align:justify;
	margin:0; font-family:var(--urdu,'Jameel Noori Nastaleeq',sans-serif);
}

@media (max-width:768px){
	.difta-taruf-title{ font-size:30px; }
	.difta-taruf-body{ padding:24px 18px 40px; }
	.difta-taruf-intro{ font-size:22px; line-height:2.2; }
	.difta-taruf-heading{ font-size:25px; min-width:0; width:100%; }
	.difta-taruf-content{ font-size:22px; line-height:2.2; }
}

/* بانی معہد page extras */
.difta-taruf-header-bani{ padding:26px 16px; }
.difta-taruf-subtitle{ color:#e8eef1; font-size:20px; margin:6px 0 0; font-family:var(--urdu,'Jameel Noori Nastaleeq',sans-serif); }
.difta-taruf-btnrow{ text-align:center; margin:36px 0 6px; }
.difta-taruf-btn{
	display:inline-block; background:#af7f38; color:#fff; text-decoration:none;
	font-family:var(--urdu,'Jameel Noori Nastaleeq',sans-serif); font-size:22px;
	padding:12px 40px; border-radius:8px; transition:background .15s,transform .12s;
	box-shadow:0 3px 10px rgba(0,0,0,.15);
}
.difta-taruf-btn:hover{ background:#946a2c; color:#fff; transform:translateY(-2px); }

/* ============================================================
   شاخیں و شعبہ جات page (design taruf-02)
   ============================================================ */
.difta-shakhen{ direction:rtl; font-family:var(--urdu,'Jameel Noori Nastaleeq',sans-serif); }
.difta-shakhen-body{
	max-width:1080px; margin:0 auto; padding:34px 34px 50px;
	background:#fff url('https://maahadulkhalil.com/wp-content/uploads/2026/04/Asset-96-1-scaled.png') top center repeat;
}
.difta-shakhen-secttl{
	text-align:center; color:#fff; background:#5b7d8c;
	font-family:var(--urdu,'Jameel Noori Nastaleeq',sans-serif);
	font-size:26px; font-weight:400; margin:10px auto 26px; padding:8px 30px;
	border-radius:8px; display:inline-block; width:auto; min-width:280px;
}
.difta-shakhen-body{ text-align:center; }

/* Branch cards */
.difta-branch-grid{
	display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:0 auto 40px; text-align:right;
}
.difta-branch-card{
	background:#487890; color:#fff; text-decoration:none;
	border-radius:12px; padding:20px 18px; display:flex; flex-direction:column;
	align-items:center; justify-content:center; text-align:center; min-height:110px;
	transition:transform .12s, box-shadow .12s; box-shadow:0 3px 10px rgba(0,0,0,.12);
}
.difta-branch-card:hover{ transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,0,0,.2); color:#fff; }
.difta-branch-name{ font-size:30px; font-family:var(--urdu,'Jameel Noori Nastaleeq',sans-serif); line-height:1.5; }
.difta-branch-loc{ font-size:18px; margin-top:8px; color:#e8eef1; }
.difta-pin{ color:#d9a441; }

/* Department grid (2 columns, numbered) */
.difta-dept-grid{
	display:grid; grid-template-columns:1fr 1fr; gap:10px 26px; text-align:right;
	max-width:1000px; margin:0 auto;
}
.difta-dept-item{
	display:flex; align-items:center; gap:12px;
	text-decoration:none; color:#2a2a2a; padding:10px 8px;
	border-bottom:1px dashed #d8d8d8; transition:color .12s, background .12s;
	font-family:var(--urdu,'Jameel Noori Nastaleeq',sans-serif);
}
.difta-dept-item:hover{ color:#487890; background:#f6f9fb; }
.difta-dept-num{
	flex:0 0 auto; background:#5b7d8c; color:#fff; font-size:16px;
	width:36px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:4px;
}
.difta-dept-name{ font-size:23px; line-height:1.8; }

@media (max-width:768px){
	.difta-shakhen-body{ padding:22px 16px 36px; }
	.difta-branch-grid{ grid-template-columns:1fr; gap:14px; }
	.difta-dept-grid{ grid-template-columns:1fr; }
	.difta-shakhen-secttl{ font-size:22px; min-width:0; width:100%; }
	.difta-branch-name{ font-size:22px; }
	.difta-dept-name{ font-size:18px; }
}

/* ============================================================
   ARABIC FONT — Amiri (Naskh) for Arabic passages.
   Urdu Nastaliq is wrong for Arabic; Arabic citations/quotes use Amiri.
   ============================================================ */

/* Client-specified Arabic font: Zahra Arabic */
@font-face{
	font-family:'Zahra Arabic';
	font-style:normal; font-weight:400; font-display:swap;
	src:url('https://maahadulkhalil.com/wp-content/uploads/fonts/zahra-arabic-400.woff2') format('woff2'),
	    url('https://maahadulkhalil.com/wp-content/uploads/fonts/zahra-arabic-400.ttf') format('truetype');
}

@font-face{
	font-family:'Amiri';
	font-style:normal; font-weight:400; font-display:swap;
	src:url('https://maahadulkhalil.com/wp-content/uploads/fonts/amiri-arabic-400.woff2') format('woff2');
	unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}
@font-face{
	font-family:'Amiri';
	font-style:normal; font-weight:700; font-display:swap;
	src:url('https://maahadulkhalil.com/wp-content/uploads/fonts/amiri-arabic-700.woff2') format('woff2');
	unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}

/* Arabic citations inside a fatwa answer — use Amiri, not Nastaliq. */
.difta-body .ar_writing,
.difta-body .indent,
.difta-arabic{
	font-family:'Zahra Arabic','Amiri','Traditional Arabic','Scheherazade New',serif !important;
	font-size:23px;
	line-height:2.05;
	color:#1f4a5a;
	direction:rtl;
	text-align:right;
}
@media (max-width:768px){
	.difta-body .ar_writing,
	.difta-body .indent,
	.difta-arabic{ font-size:20px; line-height:1.95; }
}

/* ============================================================
   MOBILE HEADER LOGO FIX
   The site logo was overflowing/clipping on the right on phones.
   Constrain it and center it inside the header row.
   ============================================================ */
@media (max-width:768px){
	/* Elementor theme-site-logo widget + common logo wrappers */
	.elementor-widget-theme-site-logo,
	.elementor-widget-image.site-logo,
	header .elementor-widget-theme-site-logo{
		width:100% !important;
		max-width:100% !important;
		text-align:center !important;
	}
	.elementor-widget-theme-site-logo .elementor-widget-container,
	.elementor-widget-theme-site-logo figure,
	.elementor-widget-theme-site-logo a{
		display:block !important;
		width:100% !important;
		text-align:center !important;
		margin:0 auto !important;
	}
	.elementor-widget-theme-site-logo img,
	header .elementor-widget-theme-site-logo img{
		max-width:78% !important;
		width:auto !important;
		height:auto !important;
		margin:0 auto !important;
		display:block !important;
		object-fit:contain !important;
	}
	/* Horizontal overflow guard.
	   overflow-x:hidden forces overflow-y:auto, which turns the header into a
	   clipping box and traps the mobile dropdown inside it. Scope it away from
	   the header so the menu can escape. */
	.elementor-container{
		overflow-x:hidden !important;
	}
}

/* ============================================================
   دعوتی سرگرمیاں — magazines (سلوک و احسان / المجد), media, contact
   Palette: teal #487890 (سلوک) | gold #c08840 (المجد)
   ============================================================ */
.difta-mag,.difta-media,.difta-contact{
	direction:rtl;
	font-family:var(--urdu,'Jameel Noori Nastaleeq',sans-serif);
	background:#fff;
}
/* Arabic (المجد) uses the client's Zahra Arabic font */
.difta-arabic-txt{
	font-family:'Zahra Arabic','Amiri','Traditional Arabic',serif !important;
}

/* ---- design hero banner (client's original artwork: calligraphy + covers + damask) ---- */
.difta-hero{ position:relative; width:100%; line-height:0; }
.difta-hero-img{ display:block; width:100%; height:auto; }
/* media page: english caption overlaid on the grey social-cube banner */
.difta-hero-media{ line-height:normal; }
.difta-hero-media .difta-hero-cap{
	position:absolute; inset:0; display:flex; flex-direction:column;
	align-items:flex-end; justify-content:center; text-align:right;
	padding:0 7% 0 4%; gap:4px;
}
.difta-hero-media .difta-media-title{ margin:0; color:#333; font-size:clamp(26px,4vw,52px); font-weight:400; line-height:1.5; }
.difta-hero-media .difta-media-en{ margin:0; color:#666; letter-spacing:2px; font-size:clamp(12px,1.4vw,19px); font-weight:600; padding-inline-end:4px; }

/* ---- magazine header (legacy fallback, only if no hero image) ---- */
.difta-mag-header{ background:#487890; color:#fff; text-align:center; padding:26px 16px; }
.difta-mag-title{ margin:0; font-size:44px; font-weight:400; line-height:1.6; color:#fff; }
.difta-mag-sub{ margin:6px 0 0; font-size:19px; color:#e6eef2; }
.difta-mag-body{ max-width:1080px; margin:0 auto; padding:28px 34px 50px; }

/* ---- top bar + PDF button ---- */
.difta-mag-bar{
	display:flex; align-items:center; justify-content:space-between; gap:14px;
	border-radius:12px 12px 0 0; padding:12px 22px; color:#fff; flex-wrap:wrap;
}
.difta-mag-bar-teal{ background:#487890; }
.difta-mag-bar-gold{ background:#c08840; }
.difta-mag-bar-ttl{ font-size:30px; }
.difta-mag-pdf,.difta-mag-btn{
	display:inline-flex; align-items:center; gap:8px;
	background:rgba(255,255,255,.16); color:#fff; text-decoration:none;
	border:1px solid rgba(255,255,255,.5); border-radius:8px;
	padding:8px 18px; font-size:19px; transition:background .15s;
}
.difta-mag-pdf:hover{ background:rgba(255,255,255,.3); color:#fff; }
.difta-mag-ico{ font-size:17px; }

/* ---- grid: contents + cover/side ---- */
.difta-mag-grid{
	display:grid; grid-template-columns:1fr 320px; gap:26px;
	align-items:start; /* cover + list both top-aligned (no dead gap) */
	background:#f3f3f3; border-radius:0 0 12px 12px; padding:26px;
}
.difta-mag-main{ min-width:0; }
.difta-mag-contents-ttl{
	font-size:28px; font-weight:400; color:#2a2a2a; margin:0 0 16px; text-align:center;
}
.difta-mag-list{ list-style:none; margin:0; padding:0; }
.difta-mag-list li{
	display:flex; align-items:flex-start; gap:10px;
	padding:11px 4px; border-bottom:1px solid #e2e2e2; font-size:22px; line-height:1.9;
}
.difta-mag-dot{ color:#c08840; font-size:14px; flex:0 0 auto; margin-top:6px; }
.difta-mag-item{ flex:1; }
.difta-mag-empty{ color:#888; text-align:center; font-size:20px; }

.difta-mag-side{ text-align:center; }
.difta-mag-cover{ width:100%; max-width:280px; height:auto; border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,.18); }
.difta-mag-cover-ph{
	display:flex; align-items:center; justify-content:center;
	height:340px; background:#e6e6e6; color:#999; font-size:20px; border-radius:6px;
}
.difta-mag-side .difta-mag-btn{ margin-top:16px; background:#487890; border-color:#487890; color:#fff; }
.difta-mag-side .difta-mag-btn:hover{ background:#3c6579; }
.difta-mag-btn-off{ opacity:.55; cursor:not-allowed; }

/* ---- المجد subscriptions box ---- */
.difta-subs{ margin-top:22px; background:#fafafa; border-radius:10px; overflow:hidden; text-align:right; }
.difta-subs-head{ background:#487890; color:#fff; text-align:center; padding:8px; font-size:20px; }
.difta-subs-row{ padding:10px 16px; font-size:19px; text-align:center; }
.difta-subs-list{ list-style:none; margin:0; padding:12px 16px; font-size:18px; }
.difta-subs-list li{ padding:5px 0; }
.difta-subs-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:#c08840; margin-left:6px; }

/* ============================================================
   سوشل میڈیا / الخلیل میڈیا
   ============================================================ */
.difta-media-header{ background:#487890; text-align:center; padding:30px 16px; color:#fff; }
.difta-media-title{ margin:0; font-size:44px; font-weight:400; color:#fff; }
.difta-media-en{ margin:4px 0 0; font-size:18px; letter-spacing:3px; color:#dce8ee; font-family:Arial,sans-serif; }
.difta-media-body{ max-width:1000px; margin:0 auto; padding:30px 30px 50px; }
.difta-media-card{ background:#f2f2f2; border-radius:14px; padding:24px 28px; }
.difta-media-cardttl{
	display:inline-block; background:#5b8ea3; color:#fff;
	font-size:24px; font-weight:400; margin:0 0 14px; padding:7px 22px; border-radius:5px;
}
.difta-media-text{ font-size:24px; line-height:2.2; color:#333; text-align:justify; }
.difta-media-join{ text-align:center; margin-top:38px; }
/* fancy cursive 'Join Us On' like the design */
.difta-media-jointtl{ font-size:52px; font-weight:400; margin:0 0 22px; font-family:'Brush Script MT','Segoe Script','Lucida Handwriting',cursive; color:#222; }
.difta-media-icons{ display:flex; justify-content:center; align-items:flex-end; gap:34px; flex-wrap:wrap; }
/* glossy 3D icons are the client's own artwork images — no coloured circle */
.difta-soc{
	display:inline-flex; align-items:center; justify-content:center;
	transition:transform .13s; text-decoration:none; background:none !important;
	width:auto; height:auto; border-radius:0; box-shadow:none;
}
.difta-soc:hover{ transform:translateY(-5px); }
.difta-soc-img{ width:86px; height:86px; display:block; }
.difta-soc-off{ opacity:.45; cursor:not-allowed; }
.difta-media-bar{
	display:inline-block; margin-top:26px; background:#5b8ea3; color:#fff;
	font-family:Arial,sans-serif; font-weight:700; letter-spacing:2px;
	font-size:26px; padding:10px 44px; border-radius:8px;
}

/* ============================================================
   رابطہ جات — Contact
   ============================================================ */
.difta-map{ position:relative; width:100%; height:380px; background:#e9e9e9; display:block; }
.difta-map iframe{ width:100%; height:100%; border:0; display:block; }
.difta-map-open{
	position:absolute; bottom:14px; right:14px;
	background:#fff; color:#1a1a1a; text-decoration:none;
	padding:9px 18px; border-radius:8px; font-size:18px;
	box-shadow:0 3px 10px rgba(0,0,0,.22);
}
.difta-map-linkonly{
	position:static; display:block; text-align:center; height:auto;
	padding:22px; background:#eef3f5; font-size:22px; color:#1a1a1a; text-decoration:none;
}
.difta-pin{ color:#e04a3f; }

.difta-contact-banner{ line-height:0; }
.difta-contact-banner img{ display:block; width:100%; height:auto; }
.difta-contact-banner p{ margin:0; font-size:26px; line-height:1.9; }
.difta-contact-body{ max-width:1080px; margin:0 auto; padding:28px 30px 50px; }
.difta-c-head{
	display:block; background:#a87838; color:#fff; text-align:center;
	font-size:28px; font-weight:400; margin:22px 0 18px; padding:9px 22px; border-radius:26px;
}

/* department phone rows */
.difta-dept-phones{ display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; }
.difta-dph{
	display:flex; align-items:center; gap:10px;
	background:#f2f2f2; border-radius:26px; padding:8px 14px;
}
.difta-dph-num{
	flex:0 0 auto; width:30px; height:30px; border-radius:50%;
	background:#487890; color:#fff; font-size:14px;
	display:flex; align-items:center; justify-content:center; font-family:Arial,sans-serif;
}
.difta-dph-name{ flex:1; font-size:19px; }
.difta-dph-wa{
	display:inline-flex; align-items:center; gap:7px;
	text-decoration:none; color:#1a1a1a; font-family:Arial,sans-serif; font-size:17px; font-weight:700;
}
.difta-dph-wa:hover{ color:#128C7E; }
.difta-wa-ico{
	width:22px; height:22px; flex:0 0 auto; background:#25D366; border-radius:50%;
	display:inline-block;
}

/* bank / طریقہ تعاون */
.difta-bank{ background:#fafafa; border-radius:10px; overflow:hidden; }
.difta-bank-row{
	display:flex; align-items:center; gap:14px;
	padding:13px 18px; border-bottom:1px solid #e6e6e6; font-size:20px;
}
.difta-bank-row:last-child{ border-bottom:none; }
.difta-bank-lbl{ flex:0 0 190px; color:#444; }
.difta-bank-val{ flex:1; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.difta-mono{ font-family:Consolas,Menlo,monospace; font-size:19px; letter-spacing:.4px; }
.difta-copy{
	background:#487890; color:#fff; border:none; cursor:pointer;
	border-radius:6px; padding:5px 14px; font-size:16px;
	font-family:var(--urdu,'Jameel Noori Nastaleeq',sans-serif); transition:background .15s;
}
.difta-copy:hover{ background:#3c6579; }
.difta-copy.copied{ background:#25a35a; }

/* ---------- responsive ---------- */
@media (max-width:900px){
	.difta-mag-grid{ grid-template-columns:1fr; }
	.difta-mag-side{ order:-1; }
	.difta-dept-phones{ grid-template-columns:1fr; }
}
@media (max-width:768px){
	.difta-mag-title,.difta-media-title{ font-size:30px; }
	.difta-mag-body,.difta-media-body,.difta-contact-body{ padding:20px 16px 40px; }
	.difta-mag-bar{ justify-content:center; text-align:center; }
	.difta-mag-bar-ttl{ font-size:25px; }
	.difta-mag-list li{ font-size:20px; }
	.difta-media-text{ font-size:21px; }
	.difta-media-jointtl{ font-size:40px; }
	.difta-soc-img{ width:64px; height:64px; }
	.difta-media-icons{ gap:20px; }
	.difta-contact-banner p{ font-size:21px; }
	.difta-c-head{ font-size:24px; }
	.difta-map{ height:280px; }
	.difta-bank-row{ flex-direction:column; align-items:flex-start; gap:6px; font-size:18px; }
	.difta-bank-lbl{ flex:none; font-weight:700; }
}

/* PDF button disabled state (shown even when no PDF uploaded yet) */
.difta-mag-pdf-off{ opacity:.55; cursor:not-allowed; }

/* ============================================================
   Mobile menu FIX: when the hamburger is active, actually show the
   dropdown. (The theme's show-on-active rule wasn't applying, so the
   menu opened in state but stayed display:none.)
   ============================================================ */
.elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown,
.elementor-menu-toggle.elementor-active ~ .elementor-nav-menu--dropdown{
	display:block !important;
}

/* ============================================================
   Nav dropdown: force RTL so Urdu sub-menu items align right
   (theme menu is LTR by default, which pushed Urdu text to the left)
   ============================================================ */
.elementor-nav-menu .sub-menu,
.elementor-nav-menu--dropdown,
ul.sub-menu.elementor-nav-menu--dropdown{
	direction:rtl !important;
	text-align:right !important;
}
.elementor-nav-menu .sub-menu li,
.elementor-nav-menu--dropdown li{ text-align:right !important; }
.elementor-nav-menu .sub-menu li a,
.elementor-nav-menu--dropdown li a{
	direction:rtl !important;
	text-align:right !important;
	justify-content:flex-start !important;
}


/* ============================================================
   Mobile dropdown must escape the header and paint over the page.
   ============================================================ */
@media (max-width: 767px){
	header, header .e-con, header .e-con-inner,
	header .elementor-element, .elementor-location-header,
	.elementor-location-header .e-con, .elementor-location-header .e-con-inner{
		overflow: visible !important;
	}
	.elementor-nav-menu--dropdown.elementor-nav-menu__container{
		z-index: 99999 !important;
		background: #ffffff;
		box-shadow: 0 14px 30px rgba(0,0,0,.35);
	}
	.elementor-menu-toggle{ position: relative !important; z-index: 100000 !important; }
	.elementor-nav-menu--dropdown a.elementor-item{
		padding: 14px 20px !important;
		font-size: 23px !important;
		border-bottom: 1px solid rgba(0,0,0,.08);
	}
}


/* ============================================================
   Mobile sub-menu: align flush to the right like the parent items,
   with a small indent so the hierarchy still reads.
   ============================================================ */
@media (max-width: 767px){
	.elementor-nav-menu--dropdown .sub-menu,
	.elementor-nav-menu--dropdown ul.sub-menu{
		direction: rtl !important;
		text-align: right !important;
		padding-right: 0 !important;
		margin-right: 0 !important;
	}
	.elementor-nav-menu--dropdown .sub-menu li{
		text-align: right !important;
		direction: rtl !important;
	}
	.elementor-nav-menu--dropdown .sub-menu li a.elementor-item,
	.elementor-nav-menu--dropdown .sub-menu li a.elementor-sub-item{
		direction: rtl !important;
		text-align: right !important;
		justify-content: flex-start !important;
		padding-right: 34px !important;
		padding-left: 20px !important;
		font-size: 15.5px !important;
	}
}


/* ============================================================
   Mobile menu items must sit on the RIGHT (Urdu / RTL).
   Elementor lays these out with flexbox, so text-align alone does
   nothing -- the flex direction and justification decide the side.
   ============================================================ */
@media (max-width: 767px){
	.elementor-nav-menu--dropdown,
	.elementor-nav-menu--dropdown ul,
	.elementor-nav-menu--dropdown li{
		direction: rtl !important;
	}
	.elementor-nav-menu--dropdown a.elementor-item,
	.elementor-nav-menu--dropdown a.elementor-sub-item{
		display: flex !important;
		flex-direction: row !important;
		justify-content: flex-start !important;
		align-items: center !important;
		text-align: right !important;
		direction: rtl !important;
	}
	/* the little dropdown arrow goes to the far left of the row */
	.elementor-nav-menu--dropdown .sub-arrow{
		margin-right: auto !important;
		margin-left: 0 !important;
	}
}


/* ============================================================
   FOOTER MENU on mobile.
   The footer nav is vertical, so its sub-menus fly out sideways with
   position:absolute -- in RTL that lands them off the left edge of the
   screen (measured x:-83). Stack them underneath the parent instead.
   ============================================================ */
@media (max-width: 767px){
	footer .elementor-nav-menu--main .sub-menu,
	.elementor-location-footer .elementor-nav-menu--main .sub-menu,
	footer .elementor-nav-menu .sub-menu,
	.elementor-location-footer .elementor-nav-menu .sub-menu{
		position: static !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		box-shadow: none !important;
		background: transparent !important;
		transform: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	footer .elementor-nav-menu .sub-menu li,
	.elementor-location-footer .elementor-nav-menu .sub-menu li{
		width: 100% !important;
		direction: rtl !important;
		text-align: right !important;
	}
	footer .elementor-nav-menu .sub-menu a,
	.elementor-location-footer .elementor-nav-menu .sub-menu a{
		direction: rtl !important;
		text-align: right !important;
		justify-content: flex-start !important;
		padding-right: 26px !important;
		padding-left: 10px !important;
		font-size: 15px !important;
		opacity: .9;
		white-space: normal !important;
	}
	/* keep the footer itself from being clipped or scrolled sideways */
	footer, .elementor-location-footer{
		overflow-x: hidden !important;
	}
}


/* ============================================================
   Footer sub-items: match the parents' right alignment.
   The parents resolve text-align:start under RTL; the sub-items were
   getting justify-content:flex-start with an LTR direction, which put
   them on the left. Force RTL on the row so flex-start means "right".
   ============================================================ */
@media (max-width: 767px){
	footer .elementor-nav-menu .sub-menu a,
	.elementor-location-footer .elementor-nav-menu .sub-menu a,
	footer .elementor-nav-menu .sub-menu a.elementor-sub-item,
	.elementor-location-footer .elementor-nav-menu .sub-menu a.elementor-sub-item{
		direction: rtl !important;
		text-align: start !important;
		justify-content: flex-start !important;
	}
	footer .elementor-nav-menu .sub-menu,
	.elementor-location-footer .elementor-nav-menu .sub-menu{
		direction: rtl !important;
	}
}


/* ============================================================
   Footer sub-items: pull them out to the same right edge as the
   parent rows (the earlier 26px indent read as "centred" against the
   larger parent text). Keep a small 12px step for hierarchy.
   ============================================================ */
@media (max-width: 767px){
	footer .elementor-nav-menu .sub-menu a,
	.elementor-location-footer .elementor-nav-menu .sub-menu a,
	footer .elementor-nav-menu .sub-menu a.elementor-sub-item,
	.elementor-location-footer .elementor-nav-menu .sub-menu a.elementor-sub-item{
		padding-right: 12px !important;
		padding-left: 4px !important;
		font-size: 16px !important;
		opacity: 1 !important;
	}
}


/* ============================================================
   Footer sub-items were 16px against 27px parents, which read as
   "centred" even though both are right-aligned (measured: parent text
   ends at 328px, sub at 321px). Size them closer to the parents.
   ============================================================ */
@media (max-width: 767px){
	footer .elementor-nav-menu .sub-menu a,
	.elementor-location-footer .elementor-nav-menu .sub-menu a,
	footer .elementor-nav-menu .sub-menu a.elementor-sub-item,
	.elementor-location-footer .elementor-nav-menu .sub-menu a.elementor-sub-item{
		font-size: 23px !important;
		line-height: 1.9 !important;
		padding-right: 10px !important;
		padding-top: 2px !important;
		padding-bottom: 2px !important;
	}
}


/* ============================================================
   DARUL IFTA SEARCH — row 2 alignment.
   In RTL the submit button belongs at the right, next to the category
   select, not pushed out to the far edge. The select was flex:1 and ate
   the whole row (measured 858px of a 1000px row), stranding the button.
   ============================================================ */
.widget-body .fields-row-2{
	display: flex !important;
	flex-direction: row !important;
	direction: rtl !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 16px !important;
	flex-wrap: nowrap !important;
}
.widget-body .fields-row-2 .button-align-right,
.widget-body .fields-row-2 .search-submit-btn{
	order: 0 !important;
	flex: 0 0 auto !important;
}
.widget-body .fields-row-2 .select-align-left{
	order: 1 !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
}
.widget-body .search-submit-btn{
	white-space: nowrap !important;
	justify-content: center !important;
}

/* Row 1 keeps both inputs equal and RTL. */
.widget-body .fields-row-1{
	display: flex !important;
	flex-direction: row !important;
	direction: rtl !important;
	gap: 16px !important;
}
.widget-body .fields-row-1 .field-box-half{
	flex: 1 1 0 !important;
	min-width: 0 !important;
}

/* Mobile: stack them, full width. */
@media (max-width: 768px){
	.widget-body .fields-row-1,
	.widget-body .fields-row-2{
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px !important;
	}
	.widget-body .fields-row-2 .button-align-right,
	.widget-body .fields-row-2 .select-align-left{
		width: 100% !important;
	}
	.widget-body .search-submit-btn{ width: 100% !important; height: 48px !important; }
}


/* ============================================================
   منتخب / نئے سوالات — column order.
   The markup says: "منتخب سوالات (right in DOM -> shows on the LEFT
   via order)", but no order rule was ever written, so under the box's
   direction:rtl the first DOM child landed on the RIGHT instead.
   Put them where the markup intends.
   ============================================================ */
.difta-qbox{
	display: flex;
	direction: rtl;
}
.difta-qcol-selected{ order: 1; }
.difta-qcol-new{ order: 2; }
.difta-qcol-selected{ border-right: none; border-left: 1px solid #d8d8d8; }

@media (max-width: 768px){
	.difta-qbox{ flex-direction: column; }
	.difta-qcol-selected{ order: 1; border-left: none; border-bottom: 1px solid #d8d8d8; }
	.difta-qcol-new{ order: 2; }
}


/* ============================================================
   نئے سوالات — questions only, no answers.
   The first item was rendered "expanded" with the answer preview
   inline. This list should show the question; the answer belongs
   behind the تفصیل link.
   ============================================================ */
.difta-qpreview{ display: none !important; }
.difta-qitem-expanded .difta-qtitle{
	font-size: 21px !important;
	color: #2a2a2a !important;
	margin-bottom: 0 !important;
}


/* ============================================================
   Line the سوالات panels up with the search box above them.
   The search sits in .widget-body (max-width:1000px, 60px side margins
   -> 107..1107). The panels live in a separate Elementor widget that is
   only 847px wide, so a max-width alone could not stretch them.
   Give that widget the same 1000px box and centre it.
   ============================================================ */
.elementor-widget-html:has(.difta-qwrap){
	width: 100% !important;
	max-width: 1000px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	box-sizing: content-box !important;
}
.difta-qwrap{
	width: 100% !important;
	max-width: 1000px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	box-sizing: border-box !important;
}
.difta-qbox{
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
}
.difta-qcol{ flex: 1 1 0 !important; min-width: 0 !important; }

@media (max-width: 768px){
	.elementor-widget-html:has(.difta-qwrap),
	.difta-qwrap{ max-width: 100% !important; }
}


/* Nudge: the panels container inherits 70px of Elementor side margin
   while the search box uses 60px, leaving a 3px offset between the two
   sections. Centre both on the same 1000px axis. */
.elementor-widget-html:has(.difta-qwrap){
	margin-left: auto !important;
	margin-right: auto !important;
	float: none !important;
}
.elementor-element:has(> .elementor-widget-container > .difta-qwrap),
.elementor-element:has(> .difta-qwrap){
	display: flex !important;
	justify-content: center !important;
}


/* ============================================================
   Drop the empty space under the سوالات panels.
   The Elementor section holds min-height:816px from when the answer
   preview was rendered inline; the content is now 756px, leaving a
   ~60px dead gap before the next section.
   ============================================================ */
.elementor-element:has(.difta-qwrap){
	min-height: 0 !important;
}
.elementor-element:has(> .e-con-inner > .elementor-widget:has(.difta-qwrap)){
	min-height: 0 !important;
	padding-bottom: 0 !important;
}
.difta-qwrap{ margin-bottom: 0 !important; }
.difta-qbox{ margin-bottom: 0 !important; }

/* ...but keep a comfortable breathing space before the next section.
   (Applied on the wrapper itself; the :has() chain on the Elementor
   section did not match, so the gap stayed at 0.) */
.difta-qwrap{ padding-bottom: 56px !important; }
@media (max-width: 768px){
	.difta-qwrap{ padding-bottom: 34px !important; }
}


/* ============================================================
   "مطلوبہ سوال موجود نہیں ہے؟" — font mismatch.
   An inline Elementor rule sets `.wp-clean-heading { font-family:
   'Noto Nastaliq Urdu' !important }` and loads AFTER this file, so a
   plain `.wp-clean-heading` override ties on specificity and loses.
   Raise specificity so the site font wins.
   ============================================================ */
html body .wp-clean-heading,
html body .wp-clean-description,
html body .wp-clean-heading *,
html body .wp-clean-description *,
body .elementor .wp-clean-heading,
body .elementor .wp-clean-description,
html body .elementor-widget-heading .elementor-heading-title,
html body .elementor-widget-text-editor,
html body .elementor-widget-text-editor *,
html body .elementor-widget-button .elementor-button-text{
	font-family: 'Jameel Noori Nastaleeq', 'Hussaini Nastaleeq',
	             'Mehr Nastaliq Web', 'Nafees', sans-serif !important;
}


/* ============================================================
   تمام سوالات — separate paginated section under the نئے/منتخب box.
   ============================================================ */
.difta-allwrap{
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 0 56px;
	direction: rtl;
	box-sizing: border-box;
}
.difta-allhead{
	background: #6b461a;
	color: #fff;
	text-align: center;
	font-family: 'Jameel Noori Nastaleeq', 'Hussaini Nastaleeq', sans-serif;
	font-size: 26px;
	padding: 12px 10px;
	border-radius: 8px 8px 0 0;
}
.difta-allbody{
	background: #fbf9f5;
	border: 1px solid #e3ddd2;
	border-top: none;
	border-radius: 0 0 8px 8px;
	padding: 10px 26px 18px;
}
.difta-allgrid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 34px;
}
.difta-allitem{
	padding: 14px 0;
	border-bottom: 1px solid #e3ddd2;
	overflow: hidden;
}
.difta-allitem .difta-qtitle{
	display: block;
	text-align: right !important;
	direction: rtl !important;
	font-size: 21px;
	line-height: 1.9;
}
.difta-allitem .difta-qmore{
	display: inline-block !important;
	float: right !important;
	clear: both !important;
	margin-top: 4px !important;
}

/* Pagination */
.difta-pagination{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: 24px 0 0;
	direction: rtl;
}
.difta-page{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border: 1px solid #d8cdb8;
	border-radius: 6px;
	background: #fff;
	color: #6b461a;
	text-decoration: none;
	font-family: 'Jameel Noori Nastaleeq', 'Hussaini Nastaleeq', sans-serif;
	font-size: 19px;
	line-height: 1;
	transition: background .15s, border-color .15s;
}
.difta-page:hover{ background: #f3ece0; border-color: #c49244; }
.difta-page-current{
	background: #c49244;
	border-color: #c49244;
	color: #fff;
	cursor: default;
}
.difta-page-dots{ border: none; background: none; min-width: 22px; padding: 0; color: #9a8c76; }
.difta-page-prev, .difta-page-next{ padding: 0 18px; }

@media (max-width: 768px){
	.difta-allwrap{ max-width: 100%; padding-bottom: 34px; }
	.difta-allgrid{ grid-template-columns: 1fr; gap: 0; }
	.difta-allbody{ padding: 8px 18px 14px; }
	.difta-allhead{ font-size: 22px; }
	.difta-page{ min-width: 38px; height: 38px; padding: 0 11px; font-size: 17px; }
	.difta-page-prev, .difta-page-next{ padding: 0 14px; }
}


/* ============================================================
   Hide the theme's page title block.
   Hello Elementor prints .page-header > h1.entry-title above every
   page, which duplicated the banner heading already designed in
   Elementor (e.g. "شاخیں و شعبہ جات" showing twice).
   Kept in the accessibility tree for screen readers.
   ============================================================ */
.page-header{
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}


/* ============================================================
   Branch cards rendered as the supplied artwork (calligraphy PNGs).
   The card becomes a plain image link: no background, no padding,
   no underline — the artwork already carries the panel, the name
   and the location pin.
   ============================================================ */
.difta-branch-card--art{
	display: block !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	box-shadow: none !important;
	text-decoration: none !important;
	line-height: 0;
	border-radius: 12px;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}
.difta-branch-card--art:hover{
	transform: translateY(-3px);
	box-shadow: 0 10px 22px rgba(0,0,0,.16);
}
.difta-branch-art{
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}
/* name/location kept for screen readers and search engines only */
.difta-branch-sr{
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}


/* ============================================================
   Section headings (فروعات اور شاخیں / معہد کے شعبہ جات)
   Compact pill with a decorative star on each side, matching the
   supplied design: smaller, tighter, lighter than the wide bar.
   ============================================================ */
.difta-shakhen-secttl{
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: 0 !important;
	width: auto !important;
	background: #5b7d8c !important;
	color: #fff !important;
	font-size: 30px !important;
	line-height: 1.6 !important;
	padding: 4px 22px !important;
	margin: 8px auto 20px !important;
	border-radius: 6px !important;
	box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.difta-shakhen-secttl::before,
.difta-shakhen-secttl::after{
	content: '✦';
	font-family: inherit;
	font-size: 16px;
	line-height: 1;
	opacity: .85;
	transform: translateY(-1px);
}

@media (max-width: 768px){
	.difta-shakhen-secttl{
		font-size: 24px !important;
		padding: 4px 18px !important;
		gap: 10px;
	}
	.difta-shakhen-secttl::before,
	.difta-shakhen-secttl::after{ font-size: 14px; }
}


/* ============================================================
   شعبہ جات list: plain text rows, not links.
   The markup is now a <div>, so kill any inherited link styling
   (underline, pointer, hover colour) that made them look clickable.
   ============================================================ */
.difta-dept-item,
.difta-dept-item:hover,
.difta-dept-item:focus{
	text-decoration: none !important;
	cursor: default !important;
	color: inherit !important;
	background: transparent !important;
}
.difta-dept-item .difta-dept-name,
.difta-dept-item .difta-dept-num{
	text-decoration: none !important;
	border-bottom: none !important;
}


/* ============================================================
   Breathing room under the شعبہ جات list.
   The section ended flush against the footer (measured gap: 0px),
   so the last rows looked wedged into it.
   ============================================================ */
.difta-shakhen{
	padding-bottom: 70px !important;
}
.difta-shakhen-body{
	padding-bottom: 20px !important;
}
.difta-dept-grid{
	margin-bottom: 0 !important;
}

@media (max-width: 768px){
	.difta-shakhen{ padding-bottom: 44px !important; }
	.difta-shakhen-body{ padding-bottom: 12px !important; }
}


/* ============================================================
   شعبہ جات number badge: blue -> gold (#AA7833)
   ============================================================ */
.difta-dept-num{
	background: #AA7833 !important;
	color: #fff !important;
}


/* ============================================================
   Menu items were rendering at 17px, too small against the rest of
   the site. Match the requested 23px for both levels.
   ============================================================ */
.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item,
.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item,
.elementor-nav-menu--dropdown a.elementor-item,
.elementor-nav-menu--dropdown a.elementor-sub-item{
	font-size: 23px !important;
	line-height: 1.9 !important;
}
footer .elementor-nav-menu .sub-menu a,
.elementor-location-footer .elementor-nav-menu .sub-menu a{
	font-size: 23px !important;
}


/* ============================================================
   Full-width plugin pages.
   Hello Elementor caps .site-main at max-width:1140px, which boxed in
   the pages this plugin renders (المجد، سلوک و احسان، شاخیں و شعبہ جات).
   Elementor-built pages bypass that wrapper, so only these needed it.
   Applied only where a difta-* block is present, so ordinary posts and
   pages keep the theme's readable measure.
   ============================================================ */
.site-main:has(.difta-mag),
.site-main:has(.difta-shakhen),
.site-main:has(.difta-wrap),
.site-main:has(.difta-allwrap),
.site-main:has(.difta-qwrap){
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.site-main:has(.difta-mag) > .page-content,
.site-main:has(.difta-shakhen) > .page-content,
.site-main:has(.difta-wrap) > .page-content{
	max-width: 100% !important;
	width: 100% !important;
}

/* the hero banners should span edge to edge on those pages */
.difta-mag .difta-hero-img,
.difta-shakhen .difta-hero-img,
.difta-taruf-hero img{
	width: 100% !important;
	max-width: 100% !important;
	height: auto;
	display: block;
}

/* but keep the reading content itself within a comfortable measure */
.difta-mag-body,
.difta-shakhen-body,
.difta-wrap > .difta-body{
	max-width: 1240px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}

@media (max-width: 768px){
	.difta-mag-body,
	.difta-shakhen-body,
	.difta-wrap > .difta-body{
		padding-left: 14px;
		padding-right: 14px;
	}
}


/* ============================================================
   المجد layout — match the design.
   The grid was 1fr/320px in DOM order, so under RTL the cover column
   (.difta-mag-side, first in DOM) took the wide 1fr track and the
   articles list was squeezed to 320px — the reverse of the artwork.
   Pin each column to its own track instead of relying on source order.
   ============================================================ */
.difta-mag-grid{
	display: grid !important;
	grid-template-columns: 1fr 340px !important;
	gap: 30px !important;
	align-items: start !important;
	direction: rtl;
}
.difta-mag-main{            /* يتضمن هذا العدد — wide, on the right */
	grid-column: 1 !important;
	min-width: 0 !important;
}
.difta-mag-side{            /* cover + الاشتراكات — narrow, on the left */
	grid-column: 2 !important;
	min-width: 0 !important;
}

.difta-mag-cover{
	display: block;
	width: 100% !important;
	max-width: 340px;
	height: auto;
	margin: 0 auto 16px;
}
.difta-mag-btn{
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	margin: 0 auto 22px;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
}
.difta-subs{
	width: 100%;
	box-sizing: border-box;
	margin-top: 0 !important;
}

@media (max-width: 900px){
	.difta-mag-grid{ grid-template-columns: 1fr !important; }
	.difta-mag-main{ grid-column: 1 !important; }
	.difta-mag-side{ grid-column: 1 !important; order: -1; }
	.difta-mag-cover{ max-width: 300px; }
}


/* ============================================================
   المجد — built from the supplied artwork.
   Asset 103/104 = the two buttons, Asset 118 = the ✦ bullet,
   Asset 124 = the panel (gold bar + grey body + 16 ruled rows).
   The rules are always drawn, filled or not, as in the design.
   ============================================================ */
.difta-mag-pdf-art,
.difta-mag-btn-art{
	display: block !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	box-shadow: none !important;
	line-height: 0 !important;
	text-decoration: none !important;
}
.difta-mag-pdf-art img{ display:block; width:auto; height:54px; max-width:100%; }
.difta-mag-btn-art{ margin:0 auto 22px !important; width:100%; max-width:340px; }
.difta-mag-btn-art img{ display:block; width:100%; height:auto; }
.difta-mag-pdf-off, .difta-mag-btn-off{ opacity:.55; cursor:not-allowed; }

/* contents list */
.difta-mag-list{
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	background: transparent;
}
.difta-mag-row{
	display: block;
	border-bottom: 1px solid #dcdcdc;
	min-height: 52px;
}
.difta-mag-row:first-child{ border-top: 1px solid #dcdcdc; }

.difta-mag-row > a,
.difta-mag-row > span.difta-mag-dot{ text-decoration: none; }

.difta-mag-link,
.difta-mag-row > .difta-mag-dot{
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 52px;
	padding: 0 10px;
	direction: rtl;
	color: #2a2a2a;
	text-decoration: none !important;
	transition: background .14s;
}
.difta-mag-link:hover{ background:#f0f4f6; color:#1c5566; }

.difta-mag-dot{
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background: url('../img/majd/bullet.webp') center/contain no-repeat;
}
/* rows that are only text (no link) still need the flex row */
.difta-mag-row:not(:has(.difta-mag-link)){
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 10px;
	direction: rtl;
}
.difta-mag-item{
	font-size: 21px;
	line-height: 1.85;
	text-align: right;
}
.difta-mag-row-empty .difta-mag-item{ min-height: 1px; }

.difta-mag-contents-ttl{
	text-align: right !important;
	margin: 0 0 12px !important;
	font-size: 30px !important;
}
.difta-mag-cover{
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

@media (max-width: 900px){
	.difta-mag-item{ font-size: 18px; }
	.difta-mag-row, .difta-mag-link{ min-height: 46px; }
	.difta-mag-pdf-art img{ height: 44px; }
}


/* Both columns start at the top, as in the artwork (the list was
   dropping to the bottom of its grid track). */
.difta-mag-grid{
	align-items: start !important;
}
/* pin BOTH to row 1 — pinning only the columns let the browser give
   each item its own row, stacking the list under the cover */
.difta-mag-main{
	grid-row: 1 !important;
	align-self: start !important;
	justify-self: stretch;
}
.difta-mag-side{
	grid-row: 1 !important;
	align-self: start !important;
}


/* ============================================================
   المجد — proportions taken off the artwork.
   Measured on the 8000px design: panel width 1159u, list column
   spans 75.2% of it, cover column ~22%, and each ruled row is 75u
   tall (= 78px at a 1200px panel).
   ============================================================ */
.difta-mag-grid{
	grid-template-columns: 75.2% 1fr !important;
	gap: 2.6% !important;
	padding: 26px 22px !important;
}

/* rows: taller, matching the artwork's rhythm */
.difta-mag-row{ min-height: 78px !important; }
.difta-mag-link,
.difta-mag-row:not(:has(.difta-mag-link)){
	min-height: 78px !important;
	gap: 18px !important;
	padding: 0 14px !important;
}
.difta-mag-dot{ width: 22px !important; height: 22px !important; }
.difta-mag-item{ font-size: 23px !important; }

/* cover fills its column like the design */
.difta-mag-side{ padding-top: 4px; }
.difta-mag-cover{
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 18px !important;
}

/* archive button sits under the cover at the same width */
.difta-mag-btn-art{
	max-width: 100% !important;
	margin: 0 0 20px !important;
}

/* subscriptions card */
.difta-subs{
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid #e0e0e0;
	background: #fff;
}
.difta-subs-head{
	background: #47788c !important;
	color: #fff !important;
	text-align: center;
	padding: 9px 10px !important;
	font-size: 21px !important;
}
.difta-subs-row{
	text-align: center;
	padding: 9px 10px !important;
	font-size: 19px !important;
	background: #fff;
}
.difta-subs-list{
	margin: 0 !important;
	padding: 12px 18px !important;
	list-style: none !important;
	background: #fafafa;
}
.difta-subs-list li{
	display: flex;
	align-items: center;
	gap: 9px;
	justify-content: flex-start;
	direction: rtl;
	font-size: 18px;
	line-height: 2.1;
}
.difta-subs-dot{
	flex: 0 0 auto;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: #c08840;
}

.difta-mag-contents-ttl{ font-size: 32px !important; margin: 0 0 6px !important; }

@media (max-width: 900px){
	.difta-mag-grid{ grid-template-columns: 1fr !important; gap: 22px !important; }
	.difta-mag-row, .difta-mag-link{ min-height: 60px !important; }
	.difta-mag-item{ font-size: 19px !important; }
	.difta-mag-cover{ max-width: 320px !important; margin: 0 auto 16px !important; }
	.difta-mag-btn-art{ max-width: 320px !important; margin: 0 auto 18px !important; }
}


/* ============================================================
   المجد — final proportions.
   Cover measured at 30.1% of the panel in the artwork; the column was
   too narrow, so force it. Also add the gold rule under the
   "يتضمن هذا العدد" heading.
   ============================================================ */
.difta-mag-grid{
	grid-template-columns: 66% 31% !important;
	gap: 3% !important;
}

/* cover — force it large, fill the column */
.difta-mag-side .difta-mag-cover{
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	height: auto !important;
	margin: 0 0 20px !important;
	display: block !important;
}

.difta-mag-contents-ttl{
	margin: 0 0 8px !important;
	border-bottom: none !important;
}

@media (max-width: 900px){
	.difta-mag-grid{ grid-template-columns: 1fr !important; }
	.difta-mag-side .difta-mag-cover{ max-width: 340px !important; margin: 0 auto 18px !important; }
}


/* ============================================================
   Nav dropdown items were inheriting Elementor's accent typography
   variable (--e-global-typography-accent-font-family), which is not
   the site's Urdu face. Pin them to Jameel Noori Nastaleeq.
   ============================================================ */
html body .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item,
html body .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item,
html body .elementor-nav-menu--dropdown .elementor-item,
html body .elementor-nav-menu--dropdown .elementor-sub-item,
html body .elementor-nav-menu--main .elementor-item,
html body .elementor-nav-menu--main .elementor-sub-item{
	font-family: 'Jameel Noori Nastaleeq', 'Hussaini Nastaleeq',
	             'Mehr Nastaliq Web', 'Nafees', sans-serif !important;
	font-weight: 400 !important;
	font-size: 23px !important;
}


/* ============================================================
   المجد — sizes taken off the artwork.
   Cover 30.1% of the panel; the الأعداد السابقة button under it is
   only 42px tall in the design (it was rendering far taller).
   ============================================================ */
.difta-mag-side .difta-mag-cover{
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 10px !important;
}

/* archive button: same width as the cover, but short */
.difta-mag-btn-art{
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 18px !important;
	line-height: 0 !important;
}
.difta-mag-btn-art img{
	display: block;
	width: 100%;
	height: 46px !important;
	object-fit: contain;
	object-position: center;
}

/* no rule under the contents heading (not in the design) */
.difta-mag-contents-ttl{ border-bottom: none !important; }

@media (max-width: 900px){
	.difta-mag-btn-art img{ height: 42px !important; }
}


/* ============================================================
   المجد — column balance: narrow the bullet list, widen the cover.
   ============================================================ */
.difta-mag-grid{
	grid-template-columns: 58% 39% !important;
	gap: 3% !important;
}


/* ============================================================
   المجد (Arabic magazine) ONLY — its bullet rows use the same Arabic
   face as its headings (Zahra Arabic).
   سلوک و احسان is the Urdu magazine, so its rows must stay in
   Jameel Noori Nastaleeq — hence the .difta-mag-almajd scoping.
   ============================================================ */
.difta-mag-almajd .difta-mag-item,
.difta-mag-almajd .difta-mag-link .difta-mag-item,
html body .difta-mag-almajd .difta-mag-list .difta-mag-item,
.difta-arabic-txt .difta-mag-item{
	font-family: 'Zahra Arabic', 'Noto Naskh Arabic', 'Traditional Arabic', serif !important;
}
/* سلوک و احسان (Urdu) — keep the Nastaleeq face on its rows */
.difta-mag-sulook .difta-mag-item,
html body .difta-mag-sulook .difta-mag-list .difta-mag-item{
	font-family: 'Jameel Noori Nastaleeq', 'Hussaini Nastaleeq', 'Mehr Nastaliq Web', Nafees, Arial, sans-serif !important;
}

/* ============================================================
   المجد — responsive. Nothing overlaps at any width; the two
   columns stack, the cover centres, and every block keeps its own
   line with room to breathe.
   ============================================================ */
.difta-mag-body{ overflow-x: hidden; }
.difta-mag-grid{ box-sizing: border-box; }
.difta-mag-grid > *{ min-width: 0; }          /* let grid children shrink */
.difta-mag-item{ overflow-wrap: anywhere; }   /* long titles never spill */

/* tablets and small laptops: keep two columns but even them out */
@media (max-width: 1100px){
	.difta-mag-grid{
		grid-template-columns: 56% 40% !important;
		gap: 4% !important;
		padding: 22px 18px !important;
	}
	.difta-mag-item{ font-size: 20px !important; }
	.difta-mag-contents-ttl{ font-size: 27px !important; }
}

/* stack below 900px */
@media (max-width: 900px){
	.difta-mag-grid{
		display: block !important;
		padding: 20px 16px !important;
	}
	.difta-mag-main,
	.difta-mag-side{
		grid-column: auto !important;
		grid-row: auto !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	.difta-mag-side{ margin-bottom: 26px; }     /* cover block first, then the list */
	.difta-mag-main{ margin-top: 4px; }
	.difta-mag-cover{
		width: 100% !important;
		max-width: 360px !important;
		margin: 0 auto 14px !important;
	}
	.difta-mag-btn-art{
		max-width: 360px !important;
		margin: 0 auto 20px !important;
	}
	.difta-subs{ max-width: 360px; margin: 0 auto; }
	.difta-mag-contents-ttl{ text-align: right !important; font-size: 26px !important; }
	.difta-mag-row, .difta-mag-link{ min-height: 58px !important; }
	.difta-mag-item{ font-size: 19px !important; }

	/* the gold bar wraps instead of squashing the PDF button */
	.difta-mag-bar{
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 12px 16px !important;
	}
	.difta-mag-bar-ttl{ font-size: 25px !important; }
	.difta-mag-pdf-art img{ height: 42px !important; }
}

/* phones */
@media (max-width: 600px){
	.difta-mag-grid{ padding: 16px 12px !important; }
	.difta-mag-bar{ justify-content: center; text-align: center; }
	.difta-mag-bar-ttl{ width: 100%; text-align: center; font-size: 23px !important; }
	.difta-mag-pdf-art{ margin: 0 auto !important; }
	.difta-mag-pdf-art img{ height: 38px !important; }
	.difta-mag-cover, .difta-mag-btn-art, .difta-subs{ max-width: 100% !important; }
	.difta-mag-contents-ttl{ font-size: 23px !important; }
	.difta-mag-row, .difta-mag-link{
		min-height: 52px !important;
		gap: 12px !important;
		padding: 0 8px !important;
	}
	.difta-mag-dot{ width: 17px !important; height: 17px !important; }
	.difta-mag-item{ font-size: 17px !important; line-height: 1.75 !important; }
	.difta-subs-head{ font-size: 18px !important; }
	.difta-subs-row{ font-size: 16px !important; }
	.difta-subs-list li{ font-size: 15px !important; }
}

/* very narrow phones */
@media (max-width: 380px){
	.difta-mag-item{ font-size: 15.5px !important; }
	.difta-mag-contents-ttl{ font-size: 21px !important; }
	.difta-mag-bar-ttl{ font-size: 20px !important; }
}


/* ============================================================
   Breathing room before the footer on the plugin pages.
   Content was ending ~82px above the footer, which read as if it
   were wedged into it (same fix already applied to شاخیں و شعبہ جات).
   ============================================================ */
.difta-taruf,
.difta-mag,
.difta-media,
.difta-contact,
.difta-wrap{
	padding-bottom: 80px !important;
}

@media (max-width: 768px){
	.difta-taruf,
	.difta-mag,
	.difta-media,
	.difta-contact,
	.difta-wrap{
		padding-bottom: 48px !important;
	}
}


/* darul-ifta is an Elementor page (no difta-* wrapper), so give the
   last section its own breathing room before the footer. */
.elementor-location-footer{ margin-top: 0; }
body:has(.difta-qwrap) .elementor-location-footer,
body:has(.difta-allwrap) .elementor-location-footer{
	margin-top: 40px;
}


/* ============================================================
   Mobile header: centre the logo.
   The logo widget (.elementor-element-ab1a2f6) is absolutely
   positioned inside a half-width flex track (.elementor-element-7d008a3,
   185px of a 390px header), so it rendered right of centre (measured
   centre-x 287 instead of 195). Centre it against the header itself.
   ============================================================ */
@media (max-width: 767px){
	.elementor-location-header .elementor-element-9892e78 > .e-con-inner{
		position: relative !important;
	}
	.elementor-location-header .elementor-element-7d008a3{
		position: static !important;
	}
	.elementor-location-header .elementor-element-ab1a2f6{
		position: absolute !important;
		left: 50% !important;
		right: auto !important;
		top: 50% !important;
		transform: translate(-50%, -50%) !important;
		margin: 0 !important;
		width: auto !important;
		max-width: 60vw !important;
		z-index: 1 !important;
	}
	.elementor-location-header .elementor-element-ab1a2f6 img{
		display: block !important;
		margin: 0 auto !important;
	}
	.elementor-location-header .elementor-menu-toggle{
		position: relative !important;
		z-index: 3 !important;
	}
}


/* ============================================================
   سلوک و احسان — same treatment as المجد, with this page's own
   artwork: teal bar, golden ✦ bullet (Asset 6), Urdu buttons.
   ============================================================ */
.difta-mag-sulook .difta-mag-dot-gold{
	background-image: url('../img/sulook/bullet.webp') !important;
}
.difta-mag-sulook .difta-mag-pdf-art img,
.difta-mag-sulook .difta-mag-btn-art img{
	display: block;
	width: 100%;
	height: auto;
}
.difta-mag-sulook .difta-mag-pdf-art{
	display: block !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	box-shadow: none !important;
	line-height: 0 !important;
	max-width: 230px;
}
.difta-mag-sulook .difta-mag-pdf-art img{ height: 54px !important; width: auto; }

.difta-mag-sulook .difta-mag-btn-art{
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 18px !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	line-height: 0 !important;
}
.difta-mag-sulook .difta-mag-btn-art img{ height: 46px !important; object-fit: contain; }

/* the Urdu list keeps the site's Urdu face (not the Arabic one) */
.difta-mag-sulook .difta-mag-item{
	font-family: 'Jameel Noori Nastaleeq', 'Hussaini Nastaleeq', sans-serif !important;
}

@media (max-width: 900px){
	.difta-mag-sulook .difta-mag-pdf-art img{ height: 42px !important; }
	.difta-mag-sulook .difta-mag-btn-art{ max-width: 360px !important; margin: 0 auto 18px !important; }
}
@media (max-width: 600px){
	.difta-mag-sulook .difta-mag-pdf-art img{ height: 38px !important; }
}


/* ============================================================
   "Join Us On" — the design sets this in an English script face.
   It was inheriting Jameel Noori Nastaleeq (the Urdu family), which
   renders Latin text as a plain serif.
   ============================================================ */

.difta-media-jointtl{
	font-family: 'Great Vibes', 'Segoe Script', 'Brush Script MT', cursive !important;
	font-weight: 400 !important;
	font-size: 58px !important;
	line-height: 1.45 !important;
	letter-spacing: .01em;
	color: #2a2a2a !important;
}

@media (max-width: 768px){
	.difta-media-jointtl{ font-size: 44px !important; }
}
@media (max-width: 480px){
	.difta-media-jointtl{ font-size: 36px !important; }
}


/* ============================================================
   ماہانہ و ہفتہ واری اصلاحی مجلس
   Built from the supplied artwork: hero, poster+text cards, the
   gold "ماہانہ اصلاحی بیانات" bar with بیانات buttons, and the
   two-column bayanat list on the inner page.
   ============================================================ */
.difta-islahi{ direction: rtl; padding-bottom: 80px; }
.difta-islahi .difta-hero-img{ display:block; width:100%; height:auto; }

.difta-islahi-body{
	max-width: 1240px;
	margin: 0 auto;
	padding: 34px 20px 0;
	box-sizing: border-box;
}

/* poster + intro card */
.difta-islahi-card{
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 34px;
	align-items: start;
	background: #f1f1f1;
	border-radius: 14px;
	padding: 26px;
	margin: 0 0 40px;
}
.difta-islahi-card-flip{ grid-template-columns: 1fr 340px; }
.difta-islahi-card-flip .difta-islahi-poster{ order: 2; }
.difta-islahi-card-flip .difta-islahi-text{ order: 1; }

.difta-islahi-poster img{
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}
.difta-islahi-text{
	font-family: 'Jameel Noori Nastaleeq', 'Hussaini Nastaleeq', sans-serif;
	font-size: 21px;
	line-height: 2.15;
	text-align: justify;
	color: #2a2a2a;
}
.difta-islahi-text p{ margin: 0 0 14px; }

/* gold section title (artwork) */
.difta-islahi-secttl{
	display: block;
	text-align: center;
	margin: 0 0 26px;
	line-height: 0;
}
.difta-islahi-secttl img{
	display: inline-block;
	max-width: 100%;
	height: 54px;
	width: auto;
}

/* bayanat buttons — 4 per row like the design */
.difta-islahi-btns{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin: 0 auto 44px;
	max-width: 900px;
}
.difta-islahi-btn{
	display: flex;
	align-items: center;
	gap: 12px;
	background: #4f7f93;
	color: #fff !important;
	text-decoration: none !important;
	border-radius: 6px;
	padding: 11px 18px;
	font-family: 'Jameel Noori Nastaleeq', sans-serif;
	font-size: 20px;
	transition: background .15s, transform .15s;
}
.difta-islahi-btn:hover{ background: #3f6a7c; transform: translateY(-2px); }
.difta-islahi-play{
	flex: 0 0 auto;
	width: 22px; height: 22px;
	border-radius: 3px;
	background: #fff;
	position: relative;
}
.difta-islahi-play::after{
	content: '';
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%,-50%);
	border-left: 8px solid #4f7f93;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}
.difta-islahi-btn-lbl{ line-height: 1.4; }

/* ---------- inner page: bayanat list ---------- */
.difta-bayanat-panel{
	background: #efefef;
	border-radius: 14px;
	padding: 26px 30px;
	margin: 0 0 20px;
}
.difta-bayanat-list{
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 46px;
}
.difta-bayanat-row{ margin: 0; }
.difta-bayanat-link,
.difta-bayanat-row > .difta-bayanat-dot{
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 4px;
	text-decoration: none !important;
	color: #2a2a2a !important;
	direction: rtl;
	transition: color .14s;
}
.difta-bayanat-link:hover{ color: #8a6320 !important; }
.difta-bayanat-dot{
	flex: 0 0 auto;
	width: 17px; height: 17px;
	background: url('../img/islahi/bullet.webp') center/contain no-repeat;
}
.difta-bayanat-lbl{
	font-family: 'Jameel Noori Nastaleeq', 'Hussaini Nastaleeq', sans-serif;
	font-size: 21px;
	line-height: 1.9;
}

/* ---------- responsive ---------- */
@media (max-width: 1000px){
	.difta-islahi-btns{ grid-template-columns: repeat(3, 1fr); }
	.difta-islahi-text{ font-size: 19px; }
}
@media (max-width: 860px){
	.difta-islahi-card,
	.difta-islahi-card-flip{ grid-template-columns: 1fr !important; gap: 22px; }
	.difta-islahi-card-flip .difta-islahi-poster,
	.difta-islahi-card-flip .difta-islahi-text{ order: 0; }
	.difta-islahi-poster{ max-width: 340px; margin: 0 auto; }
	.difta-bayanat-list{ grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 600px){
	.difta-islahi-body{ padding: 22px 14px 0; }
	.difta-islahi-card{ padding: 18px; margin-bottom: 28px; }
	.difta-islahi-btns{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.difta-islahi-btn{ font-size: 18px; padding: 10px 14px; }
	.difta-islahi-secttl img{ height: 42px; }
	.difta-islahi-text{ font-size: 18px; line-height: 2; }
	.difta-bayanat-panel{ padding: 18px 16px; }
	.difta-bayanat-lbl{ font-size: 18px; }
	.difta-islahi{ padding-bottom: 48px; }
}
@media (max-width: 400px){
	.difta-islahi-btns{ grid-template-columns: 1fr; }
	.difta-islahi-secttl img{ height: 36px; }
}


/* ============================================================
   اصلاحی مجلس — measured off the artwork.
   Gold title bar: 28.9% wide, flush to the RIGHT edge, 76px tall.
   Bayanat buttons: 66.1% wide block, centred.
   Cards: 91.4% of the page width.
   ============================================================ */
.difta-islahi-body{ max-width: 1240px; }

.difta-islahi-card,
.difta-islahi-card-flip{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.difta-islahi-secttl{
	display: block;
	background: #b58234;
	border-radius: 6px 0 0 6px;
	width: 29%;
	margin: 0 0 30px auto !important;   /* flush right */
	padding: 0 !important;
	height: 76px;
	line-height: 0;
	text-align: center;
}
.difta-islahi-secttl img{
	height: 46px;
	width: auto;
	max-width: 90%;
	margin-top: 15px;
}

.difta-islahi-btns{
	max-width: 66%;
	margin: 0 auto 46px !important;
}

@media (max-width: 900px){
	.difta-islahi-secttl{ width: 46%; height: 62px; }
	.difta-islahi-secttl img{ height: 36px; margin-top: 13px; }
	.difta-islahi-btns{ max-width: 90%; }
}
@media (max-width: 600px){
	.difta-islahi-secttl{ width: 72%; height: 54px; border-radius: 6px; margin: 0 auto 24px !important; }
	.difta-islahi-secttl img{ height: 30px; margin-top: 12px; }
	.difta-islahi-btns{ max-width: 100%; }
}


/* ============================================================
   اصلاحی مجلس — card orientation fixed to the artwork:
   poster on the LEFT, text on the RIGHT, white rounded panel.
   (RTL was placing the first grid child on the right.)
   ============================================================ */
.difta-islahi-card{
	display: grid !important;
	grid-template-columns: 1fr 330px !important;
	direction: rtl;
	background: #fff !important;
	border-radius: 16px !important;
	box-shadow: 0 2px 14px rgba(0,0,0,.07);
	padding: 30px 34px !important;
	gap: 38px !important;
	align-items: center !important;
}
.difta-islahi-card .difta-islahi-text{
	grid-column: 1 !important;   /* right under RTL */
	order: 0 !important;
}
.difta-islahi-card .difta-islahi-poster{
	grid-column: 2 !important;   /* left under RTL */
	order: 0 !important;
}
.difta-islahi-card-flip{
	grid-template-columns: 330px 1fr !important;
}
.difta-islahi-card-flip .difta-islahi-poster{ grid-column: 1 !important; }
.difta-islahi-card-flip .difta-islahi-text{ grid-column: 2 !important; }

.difta-islahi-text{
	font-size: 22px !important;
	line-height: 2.25 !important;
	color: #1f1f1f !important;
	text-align: justify !important;
}
.difta-islahi-poster img{
	box-shadow: 0 6px 18px rgba(0,0,0,.18);
	border-radius: 6px;
}

@media (max-width: 860px){
	.difta-islahi-card,
	.difta-islahi-card-flip{
		grid-template-columns: 1fr !important;
		padding: 22px 18px !important;
		gap: 20px !important;
	}
	.difta-islahi-card .difta-islahi-poster,
	.difta-islahi-card .difta-islahi-text,
	.difta-islahi-card-flip .difta-islahi-poster,
	.difta-islahi-card-flip .difta-islahi-text{ grid-column: 1 !important; }
	.difta-islahi-card .difta-islahi-poster{ order: 1 !important; }
	.difta-islahi-card .difta-islahi-text{ order: 2 !important; }
	.difta-islahi-text{ font-size: 19px !important; line-height: 2.05 !important; }
}


/* text block sits centred against the poster, not dropped below it */
.difta-islahi-card{ align-items: center !important; }
.difta-islahi-card .difta-islahi-text{
	align-self: center !important;
	margin: 0 !important;
}
.difta-islahi-card .difta-islahi-text p:last-child{ margin-bottom: 0 !important; }
.difta-islahi-card .difta-islahi-poster{ align-self: center !important; }


/* Pin both children to grid row 1 — column pinning alone let the
   browser give each its own row, stacking text under the poster. */
.difta-islahi-card > .difta-islahi-poster,
.difta-islahi-card > .difta-islahi-text,
.difta-islahi-card-flip > .difta-islahi-poster,
.difta-islahi-card-flip > .difta-islahi-text{
	grid-row: 1 !important;
}

@media (max-width: 860px){
	.difta-islahi-card > .difta-islahi-poster,
	.difta-islahi-card > .difta-islahi-text,
	.difta-islahi-card-flip > .difta-islahi-poster,
	.difta-islahi-card-flip > .difta-islahi-text{
		grid-row: auto !important;
	}
}


/* ============================================================
   اصلاحی مجلس card — exact values off the artwork (Asset 8/11):
   fill #EAEAEA, 2.62:1 panel, subtle radius, poster overlapping
   the panel's left edge as in the design.
   ============================================================ */
.difta-islahi-card,
.difta-islahi-card-flip{
	background: #EAEAEA !important;
	border-radius: 14px !important;
	box-shadow: none !important;
	padding: 26px 40px !important;
	gap: 44px !important;
	align-items: center !important;
}
.difta-islahi-card .difta-islahi-poster img,
.difta-islahi-card-flip .difta-islahi-poster img{
	box-shadow: 0 8px 22px rgba(0,0,0,.22);
	border-radius: 4px;
}
.difta-islahi-text{
	font-size: 21px !important;
	line-height: 2.15 !important;
	color: #1a1a1a !important;
}


/* The poster artwork already carries its own drop shadow; the extra
   CSS shadow/radius drew a visible box behind it. */
.difta-islahi-poster,
.difta-islahi-poster img,
.difta-islahi-card .difta-islahi-poster img,
.difta-islahi-card-flip .difta-islahi-poster img{
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
}


/* ============================================================
   اصلاحی مجلس — the poster breaks out of the grey panel, as in the
   artwork: measured at 141% of the card height, overhanging 30%
   above, 12% below and ~40px past the left edge.
   ============================================================ */
.difta-islahi-card,
.difta-islahi-card-flip{
	overflow: visible !important;
	position: relative;
	margin-top: 70px !important;      /* room for the overhang */
	margin-bottom: 60px !important;
}
.difta-islahi-card .difta-islahi-poster,
.difta-islahi-card-flip .difta-islahi-poster{
	position: relative;
	z-index: 2;
	margin-top: -70px !important;     /* ~30% of the card height */
	margin-bottom: -30px !important;  /* ~12% */
	margin-left: -40px !important;
}
.difta-islahi-card-flip .difta-islahi-poster{
	margin-left: 0 !important;
	margin-right: -40px !important;
}
.difta-islahi-poster img{
	width: 100% !important;
	height: auto !important;
	display: block;
}

@media (max-width: 860px){
	.difta-islahi-card,
	.difta-islahi-card-flip{
		margin-top: 54px !important;
		margin-bottom: 44px !important;
	}
	.difta-islahi-card .difta-islahi-poster,
	.difta-islahi-card-flip .difta-islahi-poster{
		margin-top: -54px !important;
		margin-bottom: -14px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		max-width: 300px;
	}
}


/* Scale the poster up so it reaches the artwork's 141% of the card
   height (it was rendering at 112% because the column capped it). */
.difta-islahi-card,
.difta-islahi-card-flip{
	margin-top: 95px !important;
	margin-bottom: 70px !important;
	padding-top: 26px !important;
	padding-bottom: 26px !important;
}
.difta-islahi-card .difta-islahi-poster,
.difta-islahi-card-flip .difta-islahi-poster{
	margin-top: -120px !important;   /* 30% of a ~404px card */
	margin-bottom: -48px !important; /* 12% */
	width: 360px !important;
	max-width: none !important;
}

@media (max-width: 860px){
	.difta-islahi-card,
	.difta-islahi-card-flip{
		margin-top: 60px !important;
		margin-bottom: 40px !important;
	}
	.difta-islahi-card .difta-islahi-poster,
	.difta-islahi-card-flip .difta-islahi-poster{
		margin-top: -60px !important;
		margin-bottom: -18px !important;
		width: 300px !important;
	}
}


/* ============================================================
   اصلاحی مجلس card — final values measured off the artwork:
   card 404h; poster 151% of that (40% above, 12% below), poster
   column 52% of the card, text column 54%, ~49px line height.
   ============================================================ */
.difta-islahi-card,
.difta-islahi-card-flip{
	grid-template-columns: 54% 42% !important;
	gap: 4% !important;
	padding: 22px 30px !important;
	margin-top: 120px !important;
	margin-bottom: 80px !important;
	align-items: center !important;
	overflow: visible !important;
}
.difta-islahi-card-flip{ grid-template-columns: 42% 54% !important; }

.difta-islahi-card .difta-islahi-poster,
.difta-islahi-card-flip .difta-islahi-poster{
	width: 100% !important;
	max-width: none !important;
	margin-top: -160px !important;    /* 40% of a 404px card */
	margin-bottom: -48px !important;  /* 12% */
	margin-left: -34px !important;
	align-self: center !important;
}
.difta-islahi-card-flip .difta-islahi-poster{
	margin-left: 0 !important;
	margin-right: -34px !important;
}

.difta-islahi-text{
	font-size: 25px !important;
	line-height: 1.95 !important;
}

@media (max-width: 1100px){
	.difta-islahi-text{ font-size: 22px !important; }
}
@media (max-width: 860px){
	.difta-islahi-card,
	.difta-islahi-card-flip{
		grid-template-columns: 1fr !important;
		margin-top: 70px !important;
		margin-bottom: 46px !important;
		padding: 18px !important;
	}
	.difta-islahi-card .difta-islahi-poster,
	.difta-islahi-card-flip .difta-islahi-poster{
		width: 300px !important;
		margin: -70px auto -20px !important;
	}
	.difta-islahi-text{ font-size: 19px !important; line-height: 2 !important; }
}


/* ============================================================
   اصلاحی مجلس card — locked to the artwork's proportions.
   Card 404h in the design; poster is 151% of that (40% above,
   12% below) and 52% of the card width. Height is set explicitly
   so the poster cannot balloon past the panel.
   ============================================================ */
.difta-islahi-card{
	grid-template-columns: 44% 52% !important;
	gap: 4% !important;
	min-height: 300px;
	align-items: center !important;
	margin-top: 110px !important;
	margin-bottom: 70px !important;
	padding: 24px 30px !important;
	overflow: visible !important;
}
.difta-islahi-card-flip{ grid-template-columns: 52% 44% !important; }

.difta-islahi-card .difta-islahi-poster,
.difta-islahi-card-flip .difta-islahi-poster{
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	align-self: center !important;
	position: relative;
	z-index: 2;
}
.difta-islahi-poster img{
	display: block;
	width: 100%;
	height: auto;
	/* 151% of the card: the panel is ~300px, so cap the artwork
	   around 450px and let it hang out equally top and bottom */
	max-height: 452px;
	object-fit: contain;
	margin-top: -76px;
	margin-bottom: -34px;
	margin-right: -30px;
}
.difta-islahi-card-flip .difta-islahi-poster img{
	margin-right: 0;
	margin-left: -30px;
}

@media (max-width: 860px){
	.difta-islahi-card,
	.difta-islahi-card-flip{
		grid-template-columns: 1fr !important;
		margin-top: 66px !important;
		margin-bottom: 44px !important;
		min-height: 0;
	}
	.difta-islahi-poster img{
		max-height: 380px;
		margin: -66px auto -18px !important;
		width: auto;
		max-width: 300px;
	}
	.difta-islahi-poster{ text-align: center; }
}


/* Shrink the grey panel so the poster overhangs it the way the
   artwork does (151% of the card, 40% above / 12% below).
   Card 300px + poster 452px gives exactly those ratios. */
.difta-islahi-card,
.difta-islahi-card-flip{
	min-height: 0 !important;
	height: 300px !important;
	padding: 0 30px !important;
	align-items: center !important;
}
.difta-islahi-poster img{
	max-height: 452px !important;
	margin-top: -120px !important;   /* 40% of 300 */
	margin-bottom: -36px !important; /* 12% of 300 */
}
.difta-islahi-text{
	max-height: 270px;
	overflow: hidden;
	font-size: 22px !important;
	line-height: 1.85 !important;
}

@media (max-width: 1100px){
	.difta-islahi-card,
	.difta-islahi-card-flip{ height: auto !important; padding: 22px 24px !important; }
	.difta-islahi-text{ max-height: none; font-size: 20px !important; }
	.difta-islahi-poster img{ margin-top: -90px !important; margin-bottom: -26px !important; }
}
@media (max-width: 860px){
	.difta-islahi-card,
	.difta-islahi-card-flip{ height: auto !important; }
	.difta-islahi-poster img{ margin: -66px auto -18px !important; max-height: 380px !important; }
}


/* Poster centred on the panel: it overhangs by the same amount top
   and bottom instead of leaning out of the top. Card 300px, artwork
   452px -> 76px past each edge. */
.difta-islahi-poster img{
	margin-top: -76px !important;
	margin-bottom: -76px !important;
}

@media (max-width: 1100px){
	.difta-islahi-poster img{ margin-top: -60px !important; margin-bottom: -60px !important; }
}
@media (max-width: 860px){
	.difta-islahi-poster img{ margin: -50px auto !important; }
}


/* ============================================================
   اصلاحی مجلس card — larger text, taller panel.
   Card 380px with a 520px poster keeps the artwork's ~137% ratio
   and leaves 70px of overhang on each side.
   ============================================================ */
.difta-islahi-card,
.difta-islahi-card-flip{
	height: 380px !important;
	padding: 0 36px !important;
}
.difta-islahi-poster img{
	max-height: 520px !important;
	margin-top: -70px !important;
	margin-bottom: -70px !important;
}
.difta-islahi-text{
	font-size: 26px !important;
	line-height: 1.95 !important;
	max-height: 350px;
}

@media (max-width: 1100px){
	.difta-islahi-card,
	.difta-islahi-card-flip{ height: auto !important; padding: 24px !important; }
	.difta-islahi-text{ font-size: 22px !important; max-height: none; }
	.difta-islahi-poster img{ max-height: 440px !important; margin-top: -56px !important; margin-bottom: -56px !important; }
}
@media (max-width: 860px){
	.difta-islahi-text{ font-size: 20px !important; line-height: 2 !important; }
	.difta-islahi-poster img{ max-height: 380px !important; margin: -46px auto !important; }
}


/* ============================================================
   اصلاحی مجلس card — rebuilt from precise artwork measurements.
   Grey panel: 59% of the page, sitting on the RIGHT (x435..1149 of
   1200). Poster: 50% of the page, 195% of the panel height, hanging
   48% above and 48% below, its right half over the panel.
   The panel is no longer a grid — the poster is positioned over it.
   ============================================================ */
.difta-islahi-card,
.difta-islahi-card-flip{
	display: block !important;
	position: relative !important;
	width: 59% !important;
	margin-left: auto !important;
	margin-right: 0 !important;
	margin-top: 130px !important;
	margin-bottom: 130px !important;
	height: auto !important;
	min-height: 300px;
	padding: 34px 40px 34px 0 !important;
	background: #EAEAEA !important;
	border-radius: 14px !important;
	overflow: visible !important;
}
/* text sits inside the panel, clear of the poster */
.difta-islahi-card .difta-islahi-text,
.difta-islahi-card-flip .difta-islahi-text{
	width: auto !important;
	margin: 0 40px 0 0 !important;
	font-size: 24px !important;
	line-height: 2 !important;
	max-height: none !important;
}
/* poster hangs off the panel's left edge, vertically centred */
.difta-islahi-card .difta-islahi-poster,
.difta-islahi-card-flip .difta-islahi-poster{
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	left: -46% !important;      /* ~half of it clears the panel */
	right: auto !important;
	width: 84% !important;
	margin: 0 !important;
	z-index: 2;
}
.difta-islahi-poster img{
	display: block;
	width: 100%;
	height: auto;
	max-height: none !important;
	margin: 0 !important;
}

/* the mirrored card puts the panel left and the poster off its right */
.difta-islahi-card-flip{
	margin-left: 0 !important;
	margin-right: auto !important;
	padding: 34px 0 34px 40px !important;
}
.difta-islahi-card-flip .difta-islahi-text{ margin: 0 0 0 40px !important; }
.difta-islahi-card-flip .difta-islahi-poster{
	left: auto !important;
	right: -46% !important;
}

@media (max-width: 1000px){
	.difta-islahi-card,
	.difta-islahi-card-flip{
		display: block !important;
		width: 100% !important;
		margin: 70px auto 50px !important;
		padding: 24px !important;
		text-align: center;
	}
	.difta-islahi-card .difta-islahi-poster,
	.difta-islahi-card-flip .difta-islahi-poster{
		position: static !important;
		transform: none !important;
		width: 300px !important;
		margin: -80px auto 18px !important;
		left: auto !important; right: auto !important;
	}
	.difta-islahi-card .difta-islahi-text,
	.difta-islahi-card-flip .difta-islahi-text{
		margin: 0 !important;
		font-size: 20px !important;
		text-align: justify;
	}
}


/* Poster was covering the text: pull it back so only its right edge
   overlaps the panel, and keep the text clear of it. */
.difta-islahi-card .difta-islahi-poster,
.difta-islahi-card-flip .difta-islahi-poster{
	width: 56% !important;
	left: -30% !important;
}
.difta-islahi-card-flip .difta-islahi-poster{
	left: auto !important;
	right: -30% !important;
}
.difta-islahi-card .difta-islahi-text{
	margin: 0 34px 0 26% !important;   /* keep clear of the poster */
	font-size: 23px !important;
	line-height: 1.95 !important;
}
.difta-islahi-card-flip .difta-islahi-text{
	margin: 0 26% 0 34px !important;
}

@media (max-width: 1000px){
	.difta-islahi-card .difta-islahi-poster,
	.difta-islahi-card-flip .difta-islahi-poster{
		width: 300px !important; left: auto !important; right: auto !important;
	}
	.difta-islahi-card .difta-islahi-text,
	.difta-islahi-card-flip .difta-islahi-text{ margin: 0 !important; font-size: 20px !important; }
}


/* ============================================================
   اصلاحی مجلس card — matched to the artwork side-by-side.
   Grey panel runs the FULL width; the poster sits hard against the
   left edge, larger, overhanging the panel top and bottom; the text
   occupies the right ~58% of the panel.
   ============================================================ */
.difta-islahi-card,
.difta-islahi-card-flip{
	display: block !important;
	position: relative !important;
	width: 100% !important;
	margin: 120px auto 110px !important;
	padding: 40px 46px 40px 0 !important;
	min-height: 330px;
	background: #EAEAEA !important;
	border-radius: 16px !important;
	overflow: visible !important;
}

.difta-islahi-card .difta-islahi-poster,
.difta-islahi-card-flip .difta-islahi-poster{
	position: absolute !important;
	left: 2% !important;
	right: auto !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 34% !important;
	margin: 0 !important;
	z-index: 2;
}
.difta-islahi-poster img{
	display: block;
	width: 100%;
	height: auto;
	max-height: none !important;
	margin: 0 !important;
}

.difta-islahi-card .difta-islahi-text{
	width: 58% !important;
	margin: 0 0 0 auto !important;   /* right side under RTL */
	font-size: 25px !important;
	line-height: 2.05 !important;
	max-height: none !important;
	text-align: justify !important;
}

/* mirrored card: poster on the right, text on the left */
.difta-islahi-card-flip{ padding: 40px 0 40px 46px !important; }
.difta-islahi-card-flip .difta-islahi-poster{
	left: auto !important;
	right: 2% !important;
}
.difta-islahi-card-flip .difta-islahi-text{
	width: 58% !important;
	margin: 0 auto 0 0 !important;
}

@media (max-width: 1000px){
	.difta-islahi-card,
	.difta-islahi-card-flip{
		margin: 70px auto 50px !important;
		padding: 24px !important;
		min-height: 0;
		text-align: center;
	}
	.difta-islahi-card .difta-islahi-poster,
	.difta-islahi-card-flip .difta-islahi-poster{
		position: static !important;
		transform: none !important;
		width: 300px !important;
		margin: -80px auto 18px !important;
		left: auto !important; right: auto !important;
	}
	.difta-islahi-card .difta-islahi-text,
	.difta-islahi-card-flip .difta-islahi-text{
		width: 100% !important;
		margin: 0 !important;
		font-size: 20px !important;
	}
}


/* Final trim: the artwork's poster is a touch larger and overhangs
   the panel more; the panel itself is slightly shorter. */
.difta-islahi-card,
.difta-islahi-card-flip{
	min-height: 300px !important;
	padding-top: 34px !important;
	padding-bottom: 34px !important;
}
.difta-islahi-card .difta-islahi-poster,
.difta-islahi-card-flip .difta-islahi-poster{
	width: 38% !important;
	left: 1% !important;
}
.difta-islahi-card-flip .difta-islahi-poster{
	left: auto !important;
	right: 1% !important;
}
.difta-islahi-card .difta-islahi-text,
.difta-islahi-card-flip .difta-islahi-text{
	width: 55% !important;
}

@media (max-width: 1000px){
	.difta-islahi-card .difta-islahi-poster,
	.difta-islahi-card-flip .difta-islahi-poster{ width: 300px !important; left: auto !important; right: auto !important; }
	.difta-islahi-card .difta-islahi-text,
	.difta-islahi-card-flip .difta-islahi-text{ width: 100% !important; }
}


/* Larger body text on the cards; the panel grows with it so nothing
   spills, and the poster scales up to keep the artwork's balance. */
.difta-islahi-card .difta-islahi-text,
.difta-islahi-card-flip .difta-islahi-text{
	font-size: 32px !important;
	line-height: 2.05 !important;
	width: 58% !important;
}
.difta-islahi-card,
.difta-islahi-card-flip{
	min-height: 480px !important;
	padding-top: 44px !important;
	padding-bottom: 44px !important;
}
.difta-islahi-card .difta-islahi-poster,
.difta-islahi-card-flip .difta-islahi-poster{
	width: 40% !important;
}

@media (max-width: 1200px){
	.difta-islahi-card .difta-islahi-text,
	.difta-islahi-card-flip .difta-islahi-text{ font-size: 26px !important; }
	.difta-islahi-card,
	.difta-islahi-card-flip{ min-height: 420px !important; }
}
@media (max-width: 1000px){
	.difta-islahi-card .difta-islahi-text,
	.difta-islahi-card-flip .difta-islahi-text{ font-size: 21px !important; width: 100% !important; }
	.difta-islahi-card,
	.difta-islahi-card-flip{ min-height: 0 !important; padding: 24px !important; }
}


/* ============================================================
   اصلاحی مجلس — mobile: poster fills the width, buttons 3 per row
   (2 per row where 3 no longer fit).
   ============================================================ */
@media (max-width: 1000px){
	.difta-islahi-card .difta-islahi-poster,
	.difta-islahi-card-flip .difta-islahi-poster{
		width: 100% !important;
		max-width: 100% !important;
		margin: -80px 0 20px !important;
	}
	.difta-islahi-poster img{
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
	}
	.difta-islahi-btns{
		grid-template-columns: repeat(3, 1fr) !important;
		max-width: 100% !important;
		gap: 12px !important;
	}
	.difta-islahi-btn{ font-size: 18px !important; padding: 10px 12px !important; }
}

@media (max-width: 620px){
	.difta-islahi-btns{ grid-template-columns: repeat(2, 1fr) !important; }
	.difta-islahi-btn{ font-size: 17px !important; padding: 10px !important; gap: 8px !important; }
	.difta-islahi-play{ width: 19px; height: 19px; }
	.difta-islahi-card .difta-islahi-poster,
	.difta-islahi-card-flip .difta-islahi-poster{ margin: -60px 0 16px !important; }
}


/* Poster edge-to-edge on mobile: cancel the panel's side padding for
   it so it fills the full card width (it was capped at ~90%). */
@media (max-width: 1000px){
	.difta-islahi-card,
	.difta-islahi-card-flip{
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.difta-islahi-card .difta-islahi-poster,
	.difta-islahi-card-flip .difta-islahi-poster{
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	/* keep the text inset even though the panel padding is gone */
	.difta-islahi-card .difta-islahi-text,
	.difta-islahi-card-flip .difta-islahi-text{
		padding: 0 20px !important;
		box-sizing: border-box;
	}
	.difta-islahi-btns{ padding: 0 16px; box-sizing: border-box; }
}


/* 3 buttons per row on phones too (the label is short, so they fit). */
@media (max-width: 620px){
	.difta-islahi-btns{
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 9px !important;
		padding: 0 12px;
	}
	.difta-islahi-btn{
		font-size: 15px !important;
		padding: 8px 6px !important;
		gap: 6px !important;
		justify-content: center;
	}
	.difta-islahi-play{ width: 16px !important; height: 16px !important; }
	.difta-islahi-play::after{
		border-left-width: 6px;
		border-top-width: 4px;
		border-bottom-width: 4px;
	}
}
@media (max-width: 380px){
	.difta-islahi-btns{ gap: 7px !important; padding: 0 10px; }
	.difta-islahi-btn{ font-size: 14px !important; padding: 7px 4px !important; }
}


/* ============================================================
   بیانات list — bullet and label on ONE line.
   Rows without a link were rendering as list-item, so the ✦ (a flex
   box) dropped onto its own line above the text.
   ============================================================ */
.difta-bayanat-row{
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 9px 4px !important;
	direction: rtl !important;
	list-style: none !important;
	border-bottom: none !important;
}
.difta-bayanat-row > .difta-bayanat-dot{
	display: block !important;
	flex: 0 0 auto !important;
	width: 16px !important;
	height: 16px !important;
	padding: 0 !important;
	margin: 0 !important;
}
.difta-bayanat-link{
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 0 !important;
	flex: 1 1 auto;
}
.difta-bayanat-link .difta-bayanat-dot{
	display: block !important;
	flex: 0 0 auto !important;
	width: 16px !important;
	height: 16px !important;
}
.difta-bayanat-lbl{
	font-size: 22px !important;
	line-height: 1.7 !important;
	white-space: nowrap;
}
.difta-bayanat-list{
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 0 70px !important;
}
.difta-bayanat-panel{ padding: 30px 44px !important; }

@media (max-width: 860px){
	.difta-bayanat-list{ grid-template-columns: 1fr !important; gap: 0 !important; }
	.difta-bayanat-lbl{ font-size: 19px !important; white-space: normal; }
	.difta-bayanat-panel{ padding: 20px 18px !important; }
}


/* ============================================================
   بیانات panel — measured off the artwork: 91.4% of the page,
   centred (4.3% margin each side), 35px labels.
   ============================================================ */
.difta-bayanat-panel{
	width: 91.4% !important;
	max-width: 91.4% !important;
	margin: 0 auto !important;
	padding: 34px 40px !important;
	background: #EAEAEA !important;
	border-radius: 16px !important;
	box-sizing: border-box;
}
.difta-bayanat-lbl{
	font-size: 35px !important;
	line-height: 1.7 !important;
	white-space: nowrap;
}
.difta-bayanat-dot{
	width: 20px !important;
	height: 20px !important;
}
.difta-bayanat-row{ padding: 7px 4px !important; }
.difta-bayanat-list{ gap: 0 60px !important; }

@media (max-width: 1100px){
	.difta-bayanat-lbl{ font-size: 27px !important; }
	.difta-bayanat-panel{ padding: 26px 28px !important; }
}
@media (max-width: 860px){
	.difta-bayanat-panel{ width: 94% !important; max-width: 94% !important; padding: 20px 18px !important; }
	.difta-bayanat-lbl{ font-size: 21px !important; white-space: normal; }
	.difta-bayanat-dot{ width: 16px !important; height: 16px !important; }
}


/* Centre the bayanat grid and its rows inside the panel. */
.difta-bayanat-list{
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 0 70px !important;
	align-content: center !important;
	justify-content: center !important;
	align-items: center !important;
	justify-items: center !important;
}
.difta-bayanat-row{
	width: auto !important;
	justify-content: center !important;
}

@media (max-width: 860px){
	.difta-bayanat-list{ grid-template-columns: 1fr !important; gap: 0 !important; }
}


/* Keep the bayanat list two-up on phones as well, shrinking the type
   so both columns stay on one line. */
@media (max-width: 860px){
	.difta-bayanat-list{
		grid-template-columns: 1fr 1fr !important;
		gap: 0 22px !important;
	}
	.difta-bayanat-lbl{ font-size: 17px !important; white-space: nowrap !important; }
	.difta-bayanat-dot{ width: 13px !important; height: 13px !important; }
	.difta-bayanat-row{ padding: 6px 2px !important; gap: 8px !important; }
	.difta-bayanat-panel{ padding: 18px 12px !important; width: 96% !important; max-width: 96% !important; }
}
@media (max-width: 480px){
	.difta-bayanat-list{ gap: 0 12px !important; }
	.difta-bayanat-lbl{ font-size: 14.5px !important; }
	.difta-bayanat-dot{ width: 11px !important; height: 11px !important; }
	.difta-bayanat-row{ gap: 6px !important; padding: 5px 1px !important; }
	.difta-bayanat-panel{ padding: 14px 8px !important; }
}
@media (max-width: 380px){
	.difta-bayanat-lbl{ font-size: 13px !important; }
	.difta-bayanat-list{ gap: 0 8px !important; }
}


/* Larger labels on phones, with the gap tightened so both columns
   still fit on one line. */
@media (max-width: 480px){
	.difta-bayanat-lbl{ font-size: 20.5px !important; }
	.difta-bayanat-list{ gap: 0 8px !important; }
	.difta-bayanat-row{ gap: 5px !important; padding: 6px 0 !important; }
	.difta-bayanat-dot{ width: 12px !important; height: 12px !important; }
	.difta-bayanat-panel{ padding: 16px 6px !important; width: 98% !important; max-width: 98% !important; }
}
@media (max-width: 380px){
	.difta-bayanat-lbl{ font-size: 18px !important; }
	.difta-bayanat-list{ gap: 0 6px !important; }
}


/* ============================================================
   اصلاحی اعتکاف — reuses the اصلاحی مجلس card; adds the golden
   registration button centred beneath it.
   ============================================================ */
.difta-aitikaf-cta{
	text-align: center;
	margin: 10px 0 20px;
}
.difta-aitikaf-btn{
	display: inline-block;
	line-height: 0;
	text-decoration: none !important;
	transition: transform .15s;
}
.difta-aitikaf-btn:hover{ transform: translateY(-2px); }
.difta-aitikaf-btn img{
	display: block;
	height: 62px;
	width: auto;
	max-width: 100%;
}
.difta-aitikaf-btn-off{ opacity: .6; cursor: not-allowed; }

@media (max-width: 860px){
	.difta-aitikaf-btn img{ height: 52px; }
}
@media (max-width: 480px){
	.difta-aitikaf-btn img{ height: 44px; }
	.difta-aitikaf-cta{ margin: 6px 0 14px; }
}


/* ============================================================
   داخلہ جات — one block per course, reusing the اصلاحی مجلس card.
   The heading artwork sits above its paragraph; the button follows
   each card, centred like the design.
   ============================================================ */
.difta-adm-block{ margin-bottom: 40px; }
.difta-adm-ttl{
	display: block;
	height: 62px;
	width: auto;
	max-width: 100%;
	margin: 0 0 16px auto;   /* right-aligned under RTL */
}
.difta-islahi-card-flip .difta-adm-ttl{ margin: 0 auto 16px 0; }

.difta-adm-cta{
	text-align: center;
	margin: -30px 0 0;
	position: relative;
	z-index: 3;
}
.difta-admission .difta-aitikaf-btn img{ height: 46px; }

@media (max-width: 1000px){
	.difta-adm-ttl{ height: 50px; margin: 0 auto 14px !important; }
	.difta-adm-block{ margin-bottom: 26px; }
	.difta-adm-cta{ margin: 8px 0 0; }
}
@media (max-width: 600px){
	.difta-adm-ttl{ height: 40px; }
	.difta-admission .difta-aitikaf-btn img{ height: 38px; }
}


/* ============================================================
   اعلانات — poster centred over its soft circle, then the WhatsApp
   mark and the gold contact button, as in the artwork.
   ============================================================ */
.difta-elanat .difta-islahi-body{ text-align: center; padding-top: 46px; }

.difta-elanat-poster{
	position: relative;
	display: inline-block;
	max-width: 560px;
	width: 100%;
	margin: 0 auto 30px;
}
.difta-elanat-circle{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 118%;
	height: auto;
	z-index: 0;
	opacity: .9;
	pointer-events: none;
}
.difta-elanat-img{
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	transform: rotate(-2deg);
}

.difta-elanat-cta{ margin: 10px 0 30px; }
.difta-elanat-wa{
	display: block;
	line-height: 0;
	margin: 0 auto 14px;
	transition: transform .15s;
}
.difta-elanat-wa:hover{ transform: translateY(-2px); }
.difta-elanat-wa img{ display: inline-block; height: 74px; width: auto; }

.difta-elanat-btn{
	display: inline-block;
	line-height: 0;
	text-decoration: none !important;
	transition: transform .15s;
}
.difta-elanat-btn:hover{ transform: translateY(-2px); }
.difta-elanat-btn img{ display: block; height: 60px; width: auto; max-width: 100%; }

@media (max-width: 860px){
	.difta-elanat .difta-islahi-body{ padding-top: 30px; }
	.difta-elanat-poster{ max-width: 90%; }
	.difta-elanat-wa img{ height: 60px; }
	.difta-elanat-btn img{ height: 48px; }
}
@media (max-width: 480px){
	.difta-elanat-poster{ max-width: 96%; margin-bottom: 20px; }
	.difta-elanat-circle{ width: 112%; }
	.difta-elanat-wa img{ height: 52px; }
	.difta-elanat-btn img{ height: 40px; }
}


/* The contact button carries the gold panel from the artwork (Asset 7)
   behind its text, and stays fully opaque. */
.difta-elanat-btn{
	background: #b58234;
	border-radius: 8px;
	padding: 10px 34px;
	opacity: 1 !important;
}
.difta-elanat-btn img{ height: 44px; }
.difta-elanat-btn.difta-aitikaf-btn-off{ opacity: .75 !important; }

@media (max-width: 860px){
	.difta-elanat-btn{ padding: 9px 24px; }
	.difta-elanat-btn img{ height: 36px; }
}
@media (max-width: 480px){
	.difta-elanat-btn{ padding: 8px 16px; }
	.difta-elanat-btn img{ height: 30px; }
}


/* ============================================================
   اعلانات — WhatsApp mark and contact button at the artwork's size:
   the mark is 10.2% of the page (~102px), the gold button 39.7%
   wide and 67px tall.
   ============================================================ */
.difta-elanat-wa img{
	height: auto !important;
	width: 102px !important;
	max-width: 12vw;
}
.difta-elanat-wa{ margin-bottom: 18px !important; }

.difta-elanat-btn{
	background: #b58234;
	border-radius: 8px;
	padding: 0 !important;
	width: 40%;
	max-width: 420px;
	min-width: 260px;
	height: 67px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	opacity: 1 !important;
}
.difta-elanat-btn img{
	height: 40px !important;
	width: auto !important;
	max-width: 88%;
}

@media (max-width: 860px){
	.difta-elanat-wa img{ width: 84px !important; max-width: 20vw; }
	.difta-elanat-btn{ width: 66%; height: 58px; min-width: 220px; }
	.difta-elanat-btn img{ height: 34px !important; }
}
@media (max-width: 480px){
	.difta-elanat-wa img{ width: 70px !important; }
	.difta-elanat-btn{ width: 86%; height: 50px; min-width: 0; }
	.difta-elanat-btn img{ height: 28px !important; }
}


/* ============================================================
   اعلانات — everything on one centre line, sized off the artwork:
   the pale circle is 48.5% of the page, the poster sits centred on
   it, and the WhatsApp mark and button line up beneath.
   ============================================================ */
.difta-elanat .difta-islahi-body{
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
}

.difta-elanat-poster{
	position: relative;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 52%;
	max-width: 520px;
	margin: 0 auto 26px !important;
}
.difta-elanat-circle{
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 96%;
	height: auto;
	z-index: 0;
	opacity: .85;
}
.difta-elanat-img{
	position: relative;
	z-index: 1;
	display: block;
	width: 88%;
	margin: 0 auto;
	height: auto;
	transform: rotate(-2deg);
}

.difta-elanat-cta{
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100%;
	margin: 0 0 34px !important;
}
.difta-elanat-wa{ margin: 0 0 16px !important; }
.difta-elanat-btn{ margin: 0 auto !important; }

@media (max-width: 860px){
	.difta-elanat-poster{ width: 78%; max-width: 420px; }
}
@media (max-width: 480px){
	.difta-elanat-poster{ width: 92%; }
	.difta-elanat-circle{ width: 100%; }
}


/* WhatsApp mark scales with the viewport. */
.difta-elanat-wa img{
	height: auto !important;
	width: 100% !important;
	max-width: 15vw !important;
}
.difta-elanat-wa{
	display: block !important;
	width: auto !important;
	line-height: 0;
}

@media (max-width: 860px){
	.difta-elanat-wa img{ max-width: 22vw !important; }
}
@media (max-width: 480px){
	.difta-elanat-wa img{ max-width: 28vw !important; }
}


/* ============================================================
   رابطہ جات — matched to the artwork: map on top, banner under it,
   gold section bars, then the phone rows two-up and the bank table.
   ============================================================ */
.difta-map-art{
	display: block;
	width: 100%;
	line-height: 0;
	margin: 0;
}
.difta-map-art img{ display: block; width: 100%; height: auto; }
.difta-contact-banner img{ display: block; width: 100%; height: auto; }

/* gold section bars carry the heading artwork */
.difta-c-head-art{
	background: #b58234 !important;
	border-radius: 30px;
	text-align: center;
	padding: 12px 20px !important;
	margin: 34px auto 22px !important;
	max-width: 1000px;
	line-height: 0;
}
.difta-c-head-art img{
	display: inline-block;
	height: 34px;
	width: auto;
	max-width: 80%;
}

/* department phone rows: two per line, pill shaped */
.difta-dept-phones{
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 12px 18px !important;
	max-width: 1000px;
	margin: 0 auto;
}
.difta-dph{
	display: flex !important;
	align-items: center;
	gap: 12px;
	background: #efefef;
	border-radius: 30px;
	padding: 8px 14px;
	direction: rtl;
	min-height: 52px;
	box-sizing: border-box;
}
.difta-dph-num{
	flex: 0 0 auto;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: #47788c;
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 16px;
	font-family: Arial, sans-serif;
}
.difta-dph-name{
	flex: 1 1 auto;
	font-family: 'Jameel Noori Nastaleeq', sans-serif;
	font-size: 19px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.difta-dph-wa{
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none !important;
	color: #1a1a1a !important;
}
.difta-wa-ico{
	width: 22px; height: 22px;
	border-radius: 50%;
	background: #25d366;
	position: relative;
	flex: 0 0 auto;
}
.difta-wa-ico::after{
	content: '';
	position: absolute; inset: 5px;
	background: #fff;
	clip-path: polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%);
	border-radius: 2px;
}
.difta-dph-phone{
	font-family: Arial, sans-serif;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: .2px;
	white-space: nowrap;
}

/* bank table */
.difta-bank{ max-width: 1000px; margin: 0 auto 30px; }
.difta-bank-row{
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	background: #efefef;
	border-radius: 30px;
	margin-bottom: 10px;
	min-height: 52px;
	padding: 6px 18px;
	direction: rtl;
}
.difta-bank-lbl{
	font-family: 'Jameel Noori Nastaleeq', sans-serif;
	font-size: 20px;
	text-align: center;
	border-left: 1px solid #d5d5d5;
}
.difta-bank-val{
	font-family: Arial, sans-serif;
	font-weight: 700;
	font-size: 18px;
	text-align: center;
}

@media (max-width: 860px){
	.difta-dept-phones{ grid-template-columns: 1fr !important; }
	.difta-c-head-art img{ height: 26px; }
	.difta-dph-name{ font-size: 17px; }
	.difta-dph-phone{ font-size: 15px; }
	.difta-bank-lbl{ font-size: 17px; }
	.difta-bank-val{ font-size: 15px; }
}
@media (max-width: 480px){
	.difta-dph{ padding: 7px 10px; gap: 8px; min-height: 46px; }
	.difta-dph-num{ width: 28px; height: 28px; font-size: 14px; }
	.difta-dph-name{ font-size: 15px; }
	.difta-dph-phone{ font-size: 13.5px; }
	.difta-c-head-art{ padding: 9px 14px !important; }
	.difta-c-head-art img{ height: 22px; }
}


/* ============================================================
   رابطہ جات — rows matched to the artwork: the real WhatsApp mark,
   larger bold numerals, larger department names, bold bank table.
   ============================================================ */
.difta-wa-ico{
	width: 26px !important;
	height: 26px !important;
	background: url('../img/contact/wa.webp') center/contain no-repeat !important;
	border-radius: 0 !important;
}
.difta-wa-ico::after{ content: none !important; }

.difta-dph{ min-height: 58px; padding: 8px 16px; gap: 14px; }
.difta-dph-num{
	width: 38px; height: 38px;
	font-size: 18px;
	font-weight: 700;
}
.difta-dph-name{
	font-size: 22px !important;
	line-height: 1.6;
}
.difta-dph-phone{
	font-size: 21px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
}
.difta-dph-wa{ gap: 10px !important; }

/* bank table: bold labels and values, as in the artwork */
.difta-bank-row{ min-height: 58px; }
.difta-bank-lbl{
	font-size: 23px !important;
	font-weight: 600 !important;
}
.difta-bank-val{
	font-size: 21px !important;
	font-weight: 700 !important;
}

@media (max-width: 860px){
	.difta-dph-name{ font-size: 18px !important; }
	.difta-dph-phone{ font-size: 17px !important; }
	.difta-bank-lbl{ font-size: 19px !important; }
	.difta-bank-val{ font-size: 17px !important; }
	.difta-wa-ico{ width: 22px !important; height: 22px !important; }
}
@media (max-width: 480px){
	.difta-dph-name{ font-size: 15.5px !important; }
	.difta-dph-phone{ font-size: 15px !important; }
	.difta-dph-num{ width: 30px; height: 30px; font-size: 15px; }
	.difta-bank-lbl{ font-size: 16px !important; }
	.difta-bank-val{ font-size: 14.5px !important; }
}


/* ============================================================
   رابطہ جات — final trim to the artwork:
   no copy buttons (not in the design), the Meezan mark beside the
   bank name, and the page runs full width like the other pages.
   ============================================================ */
.difta-contact .difta-copy{ display: none !important; }

.difta-bank-brand{
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 12px;
}
.difta-bank-logo{
	height: 34px;
	width: auto;
	display: block;
}

/* full-width page */
.site-main:has(.difta-contact){
	max-width: 100% !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}
.site-main:has(.difta-contact) > .page-content{
	max-width: 100% !important;
	width: 100% !important;
}
.difta-contact{ width: 100%; }
.difta-map, .difta-map-art, .difta-contact-banner{ width: 100%; }
.difta-contact-body{
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px 70px;
	box-sizing: border-box;
}

@media (max-width: 860px){
	.difta-bank-logo{ height: 26px; }
	.difta-contact-body{ padding: 0 14px 44px; }
}


/* The Meezan asset already contains its wordmark, so the row shows the
   artwork alone rather than the image plus a duplicate label. */
.difta-bank-logo{ height: 40px !important; }
.difta-bank-brand{ gap: 0 !important; }

@media (max-width: 860px){ .difta-bank-logo{ height: 30px !important; } }
@media (max-width: 480px){ .difta-bank-logo{ height: 25px !important; } }


/* Meezan mark beside its name, and larger department names. */
.difta-bank-brand{ gap: 12px !important; }
.difta-bank-logo{ height: 36px !important; }
.difta-bank-name{
	font-family: 'Jameel Noori Nastaleeq', sans-serif;
	font-size: 23px;
	font-weight: 600;
}

.difta-dph-name{
	font-size: 35px !important;
	line-height: 1.6 !important;
}
.difta-dph{ min-height: 74px; }
.difta-dph-phone{ font-size: 24px !important; }
.difta-dph-num{ width: 44px; height: 44px; font-size: 20px; }
.difta-wa-ico{ width: 30px !important; height: 30px !important; }

@media (max-width: 1100px){
	.difta-dph-name{ font-size: 26px !important; }
	.difta-dph-phone{ font-size: 20px !important; }
	.difta-dph{ min-height: 64px; }
}
@media (max-width: 860px){
	.difta-dph-name{ font-size: 21px !important; }
	.difta-dph-phone{ font-size: 17px !important; }
	.difta-bank-name{ font-size: 19px; }
	.difta-bank-logo{ height: 28px !important; }
}
@media (max-width: 480px){
	.difta-dph-name{ font-size: 17px !important; }
	.difta-dph-phone{ font-size: 14.5px !important; }
	.difta-dph-num{ width: 30px; height: 30px; font-size: 15px; }
	.difta-wa-ico{ width: 22px !important; height: 22px !important; }
	.difta-bank-name{ font-size: 16px; }
	.difta-bank-logo{ height: 22px !important; }
}


/* Meezan roundel beside the bank name. */
.difta-bank-logo{ height: 42px !important; width: auto; }

/* Small copy buttons on the account number and IBAN rows only. */
.difta-contact .difta-bank-row:nth-child(3) .difta-copy,
.difta-contact .difta-bank-row:nth-child(4) .difta-copy{
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	margin-right: 10px;
	padding: 3px 12px;
	border: 1px solid #c9c9c9;
	border-radius: 14px;
	background: #fff;
	color: #4a4a4a;
	font-family: 'Jameel Noori Nastaleeq', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	cursor: pointer;
	transition: background .15s, border-color .15s;
	vertical-align: middle;
}
.difta-contact .difta-bank-row .difta-copy:hover{
	background: #f0f5f7;
	border-color: #47788c;
	color: #1c5566;
}
.difta-contact .difta-bank-val{
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

@media (max-width: 860px){
	.difta-bank-logo{ height: 32px !important; }
	.difta-contact .difta-bank-row .difta-copy{ font-size: 12.5px; padding: 2px 9px; }
}
@media (max-width: 480px){
	.difta-bank-logo{ height: 26px !important; }
	.difta-contact .difta-bank-row .difta-copy{ font-size: 11.5px; padding: 2px 7px; margin-right: 6px; }
}


/* The Meezan roundel was rendering at 42px — too small to read.
   Give it a proper size next to the bank name. */
.difta-contact .difta-bank-logo{
	height: 74px !important;
	width: auto !important;
	max-width: none !important;
	flex: 0 0 auto;
}
.difta-contact .difta-bank-brand{
	gap: 16px !important;
	min-height: 84px;
}
.difta-contact .difta-bank-row:first-child{ min-height: 96px; }
.difta-bank-name{ font-size: 26px !important; }

@media (max-width: 860px){
	.difta-contact .difta-bank-logo{ height: 54px !important; }
	.difta-contact .difta-bank-row:first-child{ min-height: 74px; }
	.difta-bank-name{ font-size: 20px !important; }
}
@media (max-width: 480px){
	.difta-contact .difta-bank-logo{ height: 42px !important; }
	.difta-contact .difta-bank-row:first-child{ min-height: 60px; }
	.difta-bank-name{ font-size: 16px !important; }
	.difta-contact .difta-bank-brand{ gap: 10px !important; }
}


/* Meezan roundel at 35px, per the client's setting. */
.difta-contact .difta-bank-logo{
	height: 35px !important;
	width: auto !important;
	max-width: none !important;
	display: inline-block !important;
	flex: 0 0 auto;
	vertical-align: middle;
}
.difta-contact .difta-bank-row:first-child{ min-height: 58px; }
.difta-contact .difta-bank-brand{ gap: 12px !important; min-height: 0; }
.difta-bank-name{ font-size: 23px !important; }

@media (max-width: 860px){
	.difta-contact .difta-bank-logo{ height: 28px !important; }
	.difta-bank-name{ font-size: 19px !important; }
}
@media (max-width: 480px){
	.difta-contact .difta-bank-logo{ height: 22px !important; }
	.difta-bank-name{ font-size: 16px !important; }
}


/* ============================================================
   رابطہ جات — mobile: keep the phone list two-up (four items per
   screen row is unreadable at this width, so the grid stays 2 and
   the type shrinks), and keep each bank value on ONE line with its
   copy button beside it instead of wrapping underneath.
   ============================================================ */
@media (max-width: 860px){
	/* bank value + copy button share a line */
	.difta-contact .difta-bank-val{
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 8px !important;
		min-width: 0;
	}
	.difta-contact .difta-copytxt{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		min-width: 0;
	}
	.difta-contact .difta-bank-row .difta-copy{
		flex: 0 0 auto !important;
		margin-right: 0 !important;
	}
	.difta-bank-row{
		grid-template-columns: 0.8fr 1.2fr !important;
		padding: 6px 12px !important;
	}
}

@media (max-width: 620px){
	/* two phone pills per row on phones */
	.difta-dept-phones{
		grid-template-columns: 1fr 1fr !important;
		gap: 8px !important;
	}
	.difta-dph{
		padding: 6px 8px !important;
		gap: 6px !important;
		min-height: 42px;
	}
	.difta-dph-num{ width: 24px !important; height: 24px !important; font-size: 12px !important; }
	.difta-dph-name{ font-size: 13px !important; line-height: 1.4 !important; }
	.difta-dph-phone{ font-size: 12.5px !important; }
	.difta-wa-ico{ width: 16px !important; height: 16px !important; }
	.difta-dph-wa{ gap: 5px !important; }

	.difta-bank-lbl{ font-size: 14px !important; }
	.difta-bank-val, .difta-contact .difta-copytxt{ font-size: 13px !important; }
	.difta-contact .difta-bank-row .difta-copy{ font-size: 10.5px !important; padding: 2px 6px !important; }
}

@media (max-width: 400px){
	.difta-dph-name{ font-size: 11.5px !important; }
	.difta-dph-phone{ font-size: 11px !important; }
	.difta-dph-num{ width: 21px !important; height: 21px !important; font-size: 11px !important; }
	.difta-contact .difta-copytxt{ font-size: 11.5px !important; }
}


/* ============================================================
   رابطہ جات — one phone pill per row on phones, so nothing is
   truncated: the name, the WhatsApp mark and the number all fit.
   ============================================================ */
@media (max-width: 620px){
	.difta-dept-phones{
		grid-template-columns: 1fr !important;
		gap: 10px !important;
	}
	.difta-dph{
		padding: 8px 14px !important;
		gap: 12px !important;
		min-height: 52px;
	}
	.difta-dph-num{ width: 32px !important; height: 32px !important; font-size: 15px !important; }
	.difta-dph-name{ font-size: 19px !important; line-height: 1.55 !important; }
	.difta-dph-phone{ font-size: 17px !important; }
	.difta-wa-ico{ width: 22px !important; height: 22px !important; }
	.difta-dph-wa{ gap: 8px !important; }
}

@media (max-width: 400px){
	.difta-dph{ padding: 7px 11px !important; gap: 9px !important; }
	.difta-dph-name{ font-size: 16.5px !important; }
	.difta-dph-phone{ font-size: 15px !important; }
	.difta-dph-num{ width: 28px !important; height: 28px !important; font-size: 13.5px !important; }
	.difta-wa-ico{ width: 19px !important; height: 19px !important; }
}


/* ============================================================
   Mobile header: the burger belongs hard against the LEFT edge,
   the logo centred on the header. Measured on a 412px Pixel 6a the
   burger was sitting at x=92 — pulled toward the middle by the
   centred flex row — so pin it absolutely like the logo.
   ============================================================ */
@media (max-width: 767px){
	.elementor-location-header .elementor-element-9892e78 > .e-con-inner{
		position: relative !important;
		min-height: 62px;
	}
	.elementor-location-header .elementor-element-9892e78 .elementor-widget-nav-menu{
		position: static !important;
	}
	.elementor-location-header .elementor-menu-toggle{
		position: absolute !important;
		left: 16px !important;
		right: auto !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		margin: 0 !important;
		z-index: 5 !important;
	}
}
@media (max-width: 400px){
	.elementor-location-header .elementor-menu-toggle{ left: 12px !important; }
}


/* ============================================================
   Mobile dropdown spans the full screen width (it was rendering
   ~76% wide, leaving the page visible down the left side).
   ============================================================ */
@media (max-width: 767px){
	.elementor-nav-menu--dropdown.elementor-nav-menu__container{
		width: 100vw !important;
		max-width: 100vw !important;
		left: 0 !important;
		right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box !important;
	}
	.elementor-nav-menu--dropdown .elementor-nav-menu{
		width: 100% !important;
	}
	.elementor-nav-menu--dropdown a.elementor-item,
	.elementor-nav-menu--dropdown a.elementor-sub-item{
		width: 100% !important;
		box-sizing: border-box !important;
	}
}


/* ============================================================
   رفاہی خدمات — built as real rows (not a flat image), so each
   service is selectable text with its own icon from the artwork.
   ============================================================ */
.difta-rafahi{ padding-bottom: 80px; }
.difta-rafahi .difta-hero-img{ display: block; width: 100%; height: auto; }
.difta-rafahi .difta-islahi-body{
	max-width: 1240px;
	margin: 0 auto;
	padding: 40px 20px 0;
	box-sizing: border-box;
}

.difta-rafahi-panel{
	background: #EFEFEF;
	border-radius: 18px;
	padding: 40px 44px 46px;
	box-sizing: border-box;
}

/* intro card */
.difta-rafahi-intro{
	background: #fff;
	border-radius: 12px;
	padding: 26px 34px;
	margin: 0 auto 40px;
	max-width: 76%;
	box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.difta-rafahi-intro p{
	margin: 0;
	font-family: 'Jameel Noori Nastaleeq', 'Hussaini Nastaleeq', sans-serif;
	font-size: 25px;
	line-height: 2.1;
	text-align: center;
	color: #1f1f1f;
}

/* the ten services, two per row */
.difta-rafahi-grid{
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 30px;
	direction: rtl;
}
.difta-rafahi-item{
	display: flex;
	align-items: center;
	gap: 16px;
	background: #fff;
	border-radius: 60px;
	padding: 8px 10px 8px 24px;
	min-height: 78px;
	box-shadow: 0 3px 10px rgba(0,0,0,.10);
	position: relative;
	overflow: hidden;
}
/* teal cap behind the number, as in the artwork */
.difta-rafahi-item::before{
	content: '';
	position: absolute;
	top: 0; bottom: 0; right: 0;
	width: 96px;
	background: #4f7f93;
	border-radius: 60px 0 0 60px;
	z-index: 0;
}
.difta-rafahi-num{
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	width: 54px;
	text-align: center;
	color: #fff;
	font-family: Arial, sans-serif;
	font-weight: 700;
	font-size: 22px;
	letter-spacing: .5px;
}
.difta-rafahi-ico{
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	width: 62px; height: 62px;
	line-height: 0;
}
.difta-rafahi-ico img{
	width: 100%; height: 100%;
	object-fit: contain;
	display: block;
}
.difta-rafahi-name{
	flex: 1 1 auto;
	font-family: 'Jameel Noori Nastaleeq', 'Hussaini Nastaleeq', sans-serif;
	font-size: 25px;
	line-height: 1.6;
	color: #1a1a1a;
	text-align: center;
	padding-left: 8px;
}

@media (max-width: 1000px){
	.difta-rafahi-panel{ padding: 30px 24px 34px; }
	.difta-rafahi-intro{ max-width: 94%; padding: 20px 22px; }
	.difta-rafahi-intro p{ font-size: 21px; line-height: 2; }
	.difta-rafahi-name{ font-size: 21px; }
	.difta-rafahi-ico{ width: 52px; height: 52px; }
	.difta-rafahi-item{ min-height: 68px; }
}
@media (max-width: 700px){
	.difta-rafahi-grid{ grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 600px){
	.difta-rafahi .difta-islahi-body{ padding: 24px 12px 0; }
	.difta-rafahi-panel{ padding: 20px 12px 24px; border-radius: 14px; }
	.difta-rafahi-intro{ max-width: 100%; padding: 16px 14px; margin-bottom: 24px; }
	.difta-rafahi-intro p{ font-size: 18px; line-height: 1.95; }
	.difta-rafahi-item{ min-height: 60px; padding: 6px 8px 6px 16px; gap: 10px; }
	.difta-rafahi-item::before{ width: 74px; }
	.difta-rafahi-num{ width: 42px; font-size: 18px; }
	.difta-rafahi-ico{ width: 44px; height: 44px; }
	.difta-rafahi-name{ font-size: 18px; }
	.difta-rafahi{ padding-bottom: 48px; }
}
@media (max-width: 380px){
	.difta-rafahi-name{ font-size: 16px; }
	.difta-rafahi-ico{ width: 38px; height: 38px; }
	.difta-rafahi-item::before{ width: 66px; }
	.difta-rafahi-num{ width: 36px; font-size: 16px; }
}


/* ============================================================
   رفاہی خدمات — logo over the hero, a heading in the site's own
   gold-bar style (matching شعبہ جات / طریقہ تعاون), and each service
   opens its Urdu description on click.
   ============================================================ */
.difta-rafahi-hero{ position: relative; }
.difta-rafahi-logo{
	position: absolute;
	top: 50%;
	right: 6%;
	transform: translateY(-50%);
	height: 62%;
	width: auto;
	max-width: 42%;
	z-index: 2;
}

/* heading — same gold bar the rest of the site uses */
.difta-rafahi-ttl{
	background: #b58234;
	color: #fff;
	border-radius: 30px;
	text-align: center;
	font-family: 'Jameel Noori Nastaleeq', 'Hussaini Nastaleeq', sans-serif;
	font-size: 30px;
	font-weight: 400;
	line-height: 1.7;
	padding: 10px 34px;
	margin: 4px auto 30px;
	max-width: 460px;
}

/* the pills become buttons */
.difta-rafahi-item{
	display: block;
	padding: 0;
	overflow: visible;
	background: transparent;
	box-shadow: none;
	min-height: 0;
}
.difta-rafahi-item::before{ content: none; }

.difta-rafahi-btn{
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	background: #fff;
	border: none;
	border-radius: 60px;
	padding: 8px 10px 8px 24px;
	min-height: 78px;
	box-shadow: 0 3px 10px rgba(0,0,0,.10);
	position: relative;
	overflow: hidden;
	cursor: pointer;
	text-align: right;
	transition: box-shadow .16s, transform .16s;
}
.difta-rafahi-btn::before{
	content: '';
	position: absolute;
	top: 0; bottom: 0; right: 0;
	width: 96px;
	background: #4f7f93;
	border-radius: 60px 0 0 60px;
	z-index: 0;
}
.difta-rafahi-btn:hover{ box-shadow: 0 6px 16px rgba(0,0,0,.16); transform: translateY(-2px); }
.difta-rafahi-item.is-open .difta-rafahi-btn{
	border-radius: 60px 60px 18px 18px;
	box-shadow: 0 6px 16px rgba(0,0,0,.14);
}

/* description panel */
.difta-rafahi-desc{
	background: #fff;
	border-radius: 0 0 18px 18px;
	margin: -6px 0 0;
	padding: 18px 30px 22px;
	box-shadow: 0 6px 14px rgba(0,0,0,.10);
}
.difta-rafahi-desc p{
	margin: 0;
	font-family: 'Jameel Noori Nastaleeq', 'Hussaini Nastaleeq', sans-serif;
	font-size: 21px;
	line-height: 2.05;
	text-align: justify;
	color: #2a2a2a;
	direction: rtl;
}

@media (max-width: 1000px){
	.difta-rafahi-ttl{ font-size: 25px; padding: 9px 26px; max-width: 380px; }
	.difta-rafahi-logo{ height: 56%; max-width: 48%; right: 5%; }
	.difta-rafahi-desc p{ font-size: 19px; }
}
@media (max-width: 600px){
	.difta-rafahi-logo{
		position: static;
		transform: none;
		display: block;
		height: auto;
		width: 62%;
		max-width: 62%;
		margin: -16% auto 10px;
	}
	.difta-rafahi-hero{ text-align: center; }
	.difta-rafahi-ttl{ font-size: 21px; padding: 8px 18px; max-width: 84%; }
	.difta-rafahi-btn{ min-height: 60px; padding: 6px 8px 6px 16px; gap: 10px; }
	.difta-rafahi-btn::before{ width: 74px; }
	.difta-rafahi-desc{ padding: 14px 16px 18px; }
	.difta-rafahi-desc p{ font-size: 17px; line-height: 1.95; }
}
@media (max-width: 380px){
	.difta-rafahi-ttl{ font-size: 18px; }
	.difta-rafahi-desc p{ font-size: 15.5px; }
}


/* The <button> was picking up theme styles that broke the pill layout
   (stacked children, oversized icons). Reset it hard and restore the
   horizontal row: number cap, icon, then the name. */
.difta-rafahi-grid{
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 18px 28px !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	direction: rtl;
}
.difta-rafahi-item{
	display: block !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	border: none !important;
}

.difta-rafahi-btn{
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	/* background handled by the v3 image-pill block below (do NOT force #fff here) */
	border: none !important;
	margin: 0 !important;
	height: auto !important;
	color: #1a1a1a !important;
	font: inherit !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	cursor: pointer;
	position: relative;
}
.difta-rafahi-btn:focus{ outline: 2px solid #4f7f93; outline-offset: 2px; }

.difta-rafahi-btn > .difta-rafahi-num{
	position: relative; z-index: 2;
	flex: 0 0 auto !important;
	width: 56px !important;
	height: auto !important;
	display: block !important;
	text-align: center;
	color: #fff !important;
	font-family: Arial, sans-serif !important;
	font-weight: 700 !important;
	font-size: 22px !important;
	line-height: 1.2 !important;
	background: none !important;
	border-radius: 0 !important;
}
.difta-rafahi-btn > .difta-rafahi-ico{
	position: relative; z-index: 2;
	flex: 0 0 auto !important;
	width: 62px !important;
	height: 62px !important;
	display: block !important;
	line-height: 0 !important;
	background: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.difta-rafahi-btn > .difta-rafahi-ico img{
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: contain !important;
	display: block !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.difta-rafahi-btn > .difta-rafahi-name{
	flex: 1 1 auto !important;
	min-width: 0 !important;
	display: block !important;
	font-family: 'Jameel Noori Nastaleeq', 'Hussaini Nastaleeq', sans-serif !important;
	font-size: 24px !important;
	line-height: 1.55 !important;
	text-align: center !important;
	color: #1a1a1a !important;
	padding: 0 6px !important;
	white-space: normal !important;
}

@media (max-width: 1000px){
	.difta-rafahi-btn > .difta-rafahi-name{ font-size: 20px !important; }
	.difta-rafahi-btn > .difta-rafahi-ico{ width: 52px !important; height: 52px !important; }
	.difta-rafahi-btn{ min-height: 68px !important; }
}
@media (max-width: 700px){
	.difta-rafahi-grid{ grid-template-columns: 1fr !important; gap: 12px !important; }
}
@media (max-width: 600px){
	.difta-rafahi-btn{ min-height: 60px !important; padding: 6px 4px 6px 14px !important; gap: 9px !important; }
	.difta-rafahi-btn::before{ width: 74px !important; }
	.difta-rafahi-btn > .difta-rafahi-num{ width: 44px !important; font-size: 18px !important; }
	.difta-rafahi-btn > .difta-rafahi-ico{ width: 44px !important; height: 44px !important; }
	.difta-rafahi-btn > .difta-rafahi-name{ font-size: 17px !important; }
}
@media (max-width: 380px){
	.difta-rafahi-btn > .difta-rafahi-name{ font-size: 15px !important; }
	.difta-rafahi-btn > .difta-rafahi-ico{ width: 38px !important; height: 38px !important; }
	.difta-rafahi-btn::before{ width: 64px !important; }
	.difta-rafahi-btn > .difta-rafahi-num{ width: 38px !important; font-size: 16px !important; }
}

/* ============================================================
   RAFAHI v2 layout — banner + grey panel (Asset 17) holding the
   intro card (Asset 12 copy artwork) and the ten pill services.
   All the client's own artwork; fully responsive.
   ============================================================ */
.difta-rafahi-v2{ width:100%; }
.difta-rafahi-banner-wrap{ width:100%; margin:0; line-height:0; }
.difta-rafahi-banner{ display:block; width:100%; height:auto; max-width:100%; }

/* grey rounded panel behind everything below the banner */
.difta-rafahi-v2 .difta-rafahi-panel{
	background: #ececec url('../img/rafahi/panel.webp') no-repeat top center;
	background-size: 100% 100%;
	max-width: 1340px;
	margin: 30px auto 40px;
	padding: 40px clamp(18px, 4.5vw, 70px) 50px;
	border-radius: 26px;
	box-sizing: border-box;
}

/* intro text card — white box artwork with the paragraph overlaid */
.difta-rafahi-v2 .difta-rafahi-intro{
	background: url('../img/rafahi/introbox.webp') no-repeat top center;
	background-size: 100% 100%;
	max-width: 900px;
	margin: 0 auto 34px;
	padding: clamp(26px, 4vw, 52px) clamp(30px, 6vw, 90px) clamp(40px, 6vw, 74px);
	box-sizing: border-box;
}
.difta-rafahi-v2 .difta-rafahi-intro p{
	margin: 0;
	font-family: 'Jameel Noori Nastaleeq', 'Hussaini Nastaleeq', sans-serif;
	font-size: clamp(22px, 2.8vw, 43px);
	line-height: 2.15;
	text-align: center;
	color: #1a1a1a;
	direction: rtl;
}

/* ============================================================
   RAFAHI v3 — client's original EMPTY pill artwork as the button
   background (white bar + teal number badge + glossy icon baked in),
   with the service NAME overlaid as real HTML text on the white bar.
   Pill art aspect ratio = 1000 : 240.
   ============================================================ */
.difta-rafahi-grid{ gap: 22px 30px !important; align-items: start !important; }
.difta-rafahi-item{ display:block !important; }

.difta-rafahi-btn{
	display:flex !important;
	align-items:center !important;
	width:100% !important;
	aspect-ratio: 1000 / 240;
	/* the pill artwork is set inline via background-image; here only size/repeat */
	background-color:transparent !important;
	background-repeat:no-repeat !important;
	background-position:center !important;
	background-size:100% 100% !important;
	box-shadow:none !important; border:0 !important; border-radius:0 !important;
	padding:0 !important; margin:0 !important;
	min-height:0 !important; height:auto !important;
	overflow:visible !important;
	transition: transform .14s ease;
}
.difta-rafahi-btn::before{ content:none !important; }
.difta-rafahi-btn:hover{ transform: translateY(-2px); }
.difta-rafahi-item.is-open .difta-rafahi-btn{ transform:none; }

/* the service name sits on the WHITE-BAR side (opposite the badge+icon,
   which together occupy ~34% of the pill on their side). */
.difta-rafahi-btn > .difta-rafahi-name{
	display:flex !important; align-items:center !important; justify-content:center !important;
	box-sizing:border-box !important;
	font-family:'Jameel Noori Nastaleeq','Hussaini Nastaleeq',sans-serif !important;
	font-size:clamp(20px, 2.4vw, 32px) !important;
	line-height:1.35 !important; color:#1a1a1a !important;
	text-align:center !important; white-space:normal !important;
	background:none !important; margin:0 !important;
	width:60% !important; height:100% !important; flex:0 0 auto !important;
	overflow:hidden !important;
}
/* long names (like #09) get a slightly smaller size so two lines fit cleanly */
.difta-rafahi-item[data-key="yateem"] .difta-rafahi-name{ font-size:clamp(17px, 2vw, 26px) !important; }
/* badge+icon occupy ~36% on their side; the name gets the other ~62%,
   pinned to the far edge away from the icon so they never overlap. */
.difta-rafahi-btn > .difta-rafahi-name{ position:absolute !important; top:0 !important; }
/* badge+icon on RIGHT (odd 01,03,05,07,09): name pinned to the LEFT */
.difta-rafahi-btn--badgeR > .difta-rafahi-name{ left:2% !important; right:auto !important; width:60% !important; padding:0 2% !important; }
/* badge+icon on LEFT (even 02,04,06,08,10): name pinned to the RIGHT */
.difta-rafahi-btn--badgeL > .difta-rafahi-name{ right:2% !important; left:auto !important; width:60% !important; padding:0 2% !important; }

/* description panel sits under its pill, slightly inset */
.difta-rafahi-desc{ margin: 8px 14px 0 !important; border-radius: 14px !important; }
.difta-rafahi-desc p{ font-size: clamp(18px, 2vw, 24px) !important; line-height: 1.95 !important; }

@media (max-width: 700px){
	.difta-rafahi-grid{ grid-template-columns: 1fr !important; gap: 16px !important; }
	/* bigger pill text on mobile too — let the pill grow taller so nothing clips */
	.difta-rafahi-btn{ aspect-ratio: auto !important; min-height: 84px !important; background-size: 100% 100% !important; }
	.difta-rafahi-btn > .difta-rafahi-name{ font-size: clamp(20px, 5.5vw, 30px) !important; }
	.difta-rafahi-item[data-key="yateem"] .difta-rafahi-name{ font-size: clamp(16px, 4.4vw, 24px) !important; }
	.difta-rafahi-v2 .difta-rafahi-intro p{ font-size: clamp(20px, 5.5vw, 32px); }
	.difta-rafahi-desc p{ font-size: clamp(17px, 4.5vw, 22px) !important; }
}
@media (max-width: 420px){
	.difta-rafahi-btn{ min-height: 74px !important; }
	.difta-rafahi-btn > .difta-rafahi-name{ font-size: 22px !important; }
	.difta-rafahi-v2 .difta-rafahi-intro p{ font-size: 20px; }
	.difta-rafahi-desc p{ font-size: 17px !important; }
}

/* ============================================================
   ELANAT announcement SLIDER — one slide at a time, the rest blurred
   behind it. Load + every slide change plays a "round" (rotate) fade-in.
   ============================================================ */
.difta-elanat-slider{
	position: relative;
	display: flex; align-items: center; justify-content: center;
	width: 58%; max-width: 540px;
	margin: 0 auto 54px;             /* room for the dots (~34px below) + a clean gap before the CTA */
	aspect-ratio: 3 / 4;              /* keeps the stage height stable */
}
/* the soft grey circle sits behind the cover, larger than it so it clearly shows */
.difta-elanat-slider .difta-elanat-circle{
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 138%; height: auto; z-index: 0; opacity: 1;
	pointer-events: none;
}
.difta-elanat-track{
	position: relative; z-index: 1;
	width: 100%; height: 100%;
}
/* every slide is stacked in the same spot — just the cover, no background */
.difta-elanat-slide{
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	opacity: 0;
	filter: blur(7px) saturate(.9);
	transform: scale(.88);
	transition: opacity .5s ease, filter .5s ease, transform .5s ease;
	pointer-events: none;
}
.difta-elanat-slide .difta-elanat-img{
	position: relative; z-index: 1; display: block;
	width: 86%; max-width: 100%; height: auto; margin: 0 auto;
	border-radius: 6px;
	box-shadow: none;
}
/* active slide: sharp, upright, on top */
.difta-elanat-slider.is-ready .difta-elanat-slide.is-active{
	opacity: 1;
	filter: none;
	transform: scale(1) rotate(0deg);
	pointer-events: auto;
	z-index: 2;
	animation: difta-elanat-in 1s cubic-bezier(.16,.8,.3,1) both;
}
/* the FULL-ROTATION entrance (used on load + every slide change):
   the cover spins a full 360° while fading in from a blur. */
@keyframes difta-elanat-in{
	0%   { opacity: 0; transform: scale(.35) rotate(-360deg); filter: blur(10px); }
	55%  { opacity: 1; filter: blur(0); }
	100% { opacity: 1; transform: scale(1) rotate(0deg); filter: none; }
}
@media (prefers-reduced-motion: reduce){
	.difta-elanat-slide{ transition: opacity .3s ease; transform: none; filter: none; }
	.difta-elanat-slider.is-ready .difta-elanat-slide.is-active{ animation: none; }
}

/* ---- modern glass nav arrows ---- */
.difta-elanat-nav{
	position: absolute !important; top: 50%; transform: translateY(-50%);
	z-index: 3; width: 54px !important; height: 54px !important; border-radius: 50% !important;
	border: 1px solid rgba(255,255,255,.55) !important; cursor: pointer;
	background: linear-gradient(135deg, rgba(72,120,144,.92), rgba(45,88,110,.92)) !important;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	color: #fff !important; font-size: 26px !important; font-weight: 700; line-height: 1;
	display: flex !important; align-items: center; justify-content: center;
	padding: 0 !important; min-width: 0 !important;
	box-shadow: 0 8px 22px rgba(45,88,110,.38), inset 0 1px 0 rgba(255,255,255,.35) !important;
	transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s, background .22s;
}
.difta-elanat-nav svg{ display: block; width: 22px; height: 22px; direction: ltr; transform: none !important; }
/* lock arrow direction to physical screen side so RTL can't flip them:
   the button on the LEFT always shows a left chevron, the RIGHT one a right chevron. */
.difta-elanat-nav{ direction: ltr !important; }
.difta-elanat-nav::before{
	content: ""; position: absolute; inset: -3px; border-radius: 50%;
	background: conic-gradient(from 0deg, #6fb0c9, #487890, #c79a4e, #487890, #6fb0c9);
	z-index: -1; opacity: 0; transition: opacity .25s; filter: blur(3px);
}
.difta-elanat-nav:hover{
	transform: translateY(-50%) scale(1.12);
	box-shadow: 0 12px 30px rgba(45,88,110,.5), inset 0 1px 0 rgba(255,255,255,.5);
}
.difta-elanat-nav:hover::before{ opacity: .9; }
.difta-elanat-nav:active{ transform: translateY(-50%) scale(.96); }
.difta-elanat-prev{ right: -18px; }   /* RTL: prev on the right */
.difta-elanat-next{ left: -18px; }

/* ---- modern pill dots ---- */
.difta-elanat-dots{
	position: absolute; bottom: -34px; left: 0; right: 0; z-index: 3;
	display: flex; gap: 10px; justify-content: center; align-items: center;
}
.difta-elanat-dot{
	width: 10px !important; height: 10px !important; border-radius: 50% !important;
	border: none !important; cursor: pointer;
	background: #cdd6db !important; padding: 0 !important; min-width: 0 !important;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.05) !important;
	transition: width .3s cubic-bezier(.34,1.56,.64,1), background .25s, box-shadow .25s;
}
.difta-elanat-dot:hover{ background: #9fb2bb !important; }
.difta-elanat-dot.is-active{
	width: 32px !important; border-radius: 6px !important;
	background: linear-gradient(90deg, #487890, #6fb0c9) !important;
	box-shadow: 0 3px 8px rgba(72,120,144,.45) !important;
}

@media (max-width: 860px){ .difta-elanat-slider{ width: 78%; max-width: 440px; } }
@media (max-width: 480px){
	.difta-elanat-slider{ width: 94%; }
	.difta-elanat-nav{ width: 44px; height: 44px; font-size: 22px; }
	.difta-elanat-prev{ right: -6px; } .difta-elanat-next{ left: -6px; }
	.difta-elanat-dots{ bottom: -28px; }
}

/* ============================================================
   CONTACT dept-phone rows — never let name+number spill outside the pill.
   The row wraps if needed; name shrinks and truncates gracefully.
   ============================================================ */
.difta-dph{
	box-sizing: border-box !important;
	flex-wrap: wrap !important;            /* number drops below the name if space is tight */
	align-items: center !important;
	overflow: hidden !important;
	max-width: 100% !important;
}
.difta-dph-num{ flex: 0 0 auto !important; }
.difta-dph-name{
	flex: 1 1 auto !important; min-width: 0 !important;
	overflow-wrap: anywhere !important; word-break: break-word !important;
}
.difta-dph-wa{
	flex: 0 0 auto !important; max-width: 100% !important;
	white-space: nowrap !important;
}
.difta-dph-phone{ white-space: nowrap !important; }
/* a touch smaller so both columns fit comfortably on tablets */
@media (max-width: 1100px){
	.difta-dph-name{ font-size: 18px !important; }
	.difta-dph-phone{ font-size: 17px !important; }
	.difta-dph-num{ width: 34px !important; height: 34px !important; font-size: 16px !important; }
}


/* ============================================================
   مضامین (Articles) — category/list page + single article.
   Gold hero, teal sidebar, grey rows — pixel-matched to the artwork.
   Colours: gold #c08840 / #b07a34, teal #4c7d92, grey #ececec.
   ============================================================ */
.difta-maz{ direction:rtl; font-family:'Jameel Noori Nastaleeq','Hussaini Nastaleeq',sans-serif; }
/* break the hero out of the theme container so it is truly edge-to-edge */
.difta-maz-hero{
	width:100vw; max-width:100vw; line-height:0;
	position:relative; left:50%; right:50%;
	margin-left:-50vw; margin-right:-50vw;
}
.difta-maz-hero-img{ display:block; width:100%; height:auto; }
.difta-maz-body{ max-width:none; width:100%; margin:0; padding:34px clamp(16px,4vw,70px) 60px; box-sizing:border-box; }

/* two-column grid: articles (left, wide) + categories (right, narrow) */
.difta-maz-grid{
	display:grid; grid-template-columns:250px 1fr; gap:44px; align-items:start;
}

/* ---- categories sidebar ---- */
.difta-maz-cats{ grid-column:1; background:#ededed; border-radius:6px; overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,.08); }
.difta-maz-cats-head{
	display:flex; align-items:center; justify-content:center; gap:9px;
	background:#4c7d92; color:#fff; font-size:19px; padding:10px 12px; font-weight:400;
}
.difta-maz-cats-ico{ display:inline-flex; color:#fff; }
.difta-maz-cats-list{ list-style:none; margin:0; padding:0; }
.difta-maz-cat{ border-bottom:1px solid #e0e0e0; background:#efefef; }
.difta-maz-cat:nth-child(even){ background:#e8e8e8; }
.difta-maz-cat a{
	display:flex; align-items:center; gap:8px; padding:6px 12px;
	color:#2a2a2a; text-decoration:none; font-size:15px; line-height:1.75;
	white-space:nowrap; transition:background .15s,color .15s;
}
.difta-maz-cat a:hover{ background:#fff; color:#b07a34; }
.difta-maz-cat.is-active a{ background:#fff; color:#b07a34; font-weight:600; }
.difta-maz-diam{
	width:9px; height:9px; flex:0 0 auto; transform:rotate(45deg);
	background:#c08840;
}
.difta-maz-diam-teal{ background:#4c7d92; width:11px; height:11px; }
.difta-maz-cat-name{ flex:1; }

/* ---- article titles list ---- */
.difta-maz-articles{ grid-column:2; min-width:0; }
.difta-maz-titles{ list-style:none; margin:0; padding:0; }
.difta-maz-title-row{ border-bottom:1px solid #dcdcdc; }
.difta-maz-title-row a{
	display:flex; align-items:center; gap:14px; padding:11px 6px;
	color:#1c1c1c; text-decoration:none; font-size:20px; line-height:1.85;
	transition:color .15s;
}
.difta-maz-title-row a:hover{ color:#4c7d92; }
.difta-maz-title-row a:hover .difta-maz-title-txt{ text-decoration:underline; text-underline-offset:6px; }
.difta-maz-title-txt{ flex:1; }
.difta-maz-empty{ color:#888; font-size:20px; text-align:center; padding:30px 10px; }

/* ============================================================
   Single مضمون (inner article) — design 1
   ============================================================ */
.difta-maz-article{ max-width:1300px; margin:0 auto; padding:40px 40px 60px; }
.difta-maz-heading{
	text-align:center; font-size:44px; font-weight:400; color:#1a1a1a;
	margin:6px 0 18px; line-height:1.7;
}
.difta-maz-divider{ text-align:center; line-height:0; margin:0 0 26px; }
.difta-maz-divider img{ display:inline-block; width:100%; height:auto; }
.difta-maz-intro{
	text-align:right; font-size:24px; font-weight:600; color:#2a2a2a;
	margin:0 0 26px; line-height:1.9;
}
.difta-maz-content{ font-size:24px; line-height:2.25; color:#222; text-align:justify; }
.difta-maz-content p{ margin:0 0 18px; }
.difta-maz-content h2,.difta-maz-content h3{ color:#b07a34; font-weight:600; margin:26px 0 12px; }

/* action buttons (print / share / pdf) */
.difta-maz-actions{
	display:flex; flex-wrap:wrap; gap:18px; justify-content:center; margin:44px 0 10px;
}
.difta-maz-btn{
	display:inline-flex; align-items:center; justify-content:center;
	background:none !important; border:0 !important; padding:0 !important; cursor:pointer;
	transition:transform .14s; text-decoration:none;
}
.difta-maz-btn:hover{ transform:translateY(-3px); }
.difta-maz-btn img{ display:block; height:56px; width:auto; }
.difta-maz-btn-off{ opacity:.55; cursor:not-allowed; }
.difta-maz-back{ text-align:center; margin-top:26px; }
.difta-maz-back a{ color:#4c7d92; font-size:22px; text-decoration:none; }
.difta-maz-back a:hover{ text-decoration:underline; }

/* ---- responsive ---- */
@media (max-width:900px){
	.difta-maz-grid{ grid-template-columns:1fr; gap:24px; }
	.difta-maz-cats{ order:-1; }           /* categories on top on mobile */
	.difta-maz-heading{ font-size:32px; }
	.difta-maz-content,.difta-maz-title-row a{ font-size:21px; }
	.difta-maz-intro{ font-size:20px; }
}
@media (max-width:520px){
	.difta-maz-body{ padding:22px 14px 44px; }
	.difta-maz-article{ padding:26px 16px 44px; }
	.difta-maz-heading{ font-size:26px; }
	.difta-maz-content{ font-size:18px; line-height:2.05; }
	.difta-maz-title-row a{ font-size:18px; }
	.difta-maz-cat a{ font-size:18px; }
	.difta-maz-btn img{ height:44px; }
}


/* ============================================================
   شعبہ جات کا تعارف (single department) — matches the artwork:
   teal hero → big name → brown photo band → grey panel w/ teal heads.
   ============================================================ */
.difta-shuba{ direction:rtl; font-family:'Jameel Noori Nastaleeq','Hussaini Nastaleeq',sans-serif; }

/* hero: full-bleed teal band with the building + title calligraphy */
.difta-shuba-hero{
	position:relative; width:100vw; max-width:100vw; line-height:0;
	left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
	overflow:hidden;
}
.difta-shuba-hero-bg{ display:block; width:100%; height:auto; transform:scaleX(-1); }
.difta-shuba-hero-ttl{
	position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
	width:min(560px,42%); height:auto; z-index:2;
}

/* department name */
.difta-shuba-name{
	text-align:center; margin:26px auto 14px; max-width:1200px;
	font-size:clamp(32px,4.8vw,66px); font-weight:400; color:#1a1a1a; line-height:1.75;
	letter-spacing:.5px; word-spacing:.18em; padding:0 18px;
}

/* brown/gold band holding the three tilted photos */
.difta-shuba-band{
	position:relative; width:100vw; max-width:100vw;
	left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
	background:url('../img/shuba/band.webp') no-repeat center center;
	background-size:100% 100%;
	padding:clamp(53px,13vw,171px) clamp(12px,4vw,60px);
	display:flex; align-items:center; justify-content:center;
	box-sizing:border-box;
}
.difta-shuba-photos{ display:block; width:min(1100px,94%); height:auto; }

/* grey content panel */
.difta-shuba-panel{
	direction:rtl; text-align:right;
	background:#efefef; border-radius:22px;
	max-width:1180px; margin:38px auto 60px;
	padding:38px clamp(18px,4vw,58px) 48px; box-sizing:border-box;
}
/* teal section heading bar (also applied to <h2> written in the editor) */
.difta-shuba-head,
.difta-shuba-content h2{
	display:block; background:#4c7d92; color:#fff;
	font-family:'Jameel Noori Nastaleeq','Hussaini Nastaleeq',sans-serif;
	font-size:clamp(20px,2.4vw,32px); font-weight:400; line-height:1.75;
	text-align:center; border-radius:6px;
	margin:30px auto 22px; padding:8px 28px; max-width:640px;
}
.difta-shuba-head:first-child{ margin-top:0; }
/* the bold lead line under a heading */
.difta-shuba-lead,
.difta-shuba-content > p:first-child{
	font-size:clamp(18px,2.1vw,27px); font-weight:600; color:#1c1c1c;
	line-height:2.1; text-align:right; direction:rtl; margin:0 0 22px;
}
.difta-shuba-content{
	font-size:clamp(16px,1.85vw,23px); line-height:2.2; color:#232323;
	direction:rtl; text-align:right; unicode-bidi:isolate;
}
.difta-shuba-content p{ margin:0 0 18px; text-align:right; }
.difta-shuba-content ul,.difta-shuba-content ol{ text-align:right; padding-right:1.4em; padding-left:0; margin:0 0 18px; }
.difta-shuba-back{ text-align:center; margin-top:30px; }
.difta-shuba-back a{ color:#4c7d92; font-size:clamp(16px,1.8vw,22px); text-decoration:none; }
.difta-shuba-back a:hover{ text-decoration:underline; }

@media (max-width:700px){
	.difta-shuba-hero-ttl{ width:60%; }
	.difta-shuba-band{ padding:26px 12px 30px; }
	.difta-shuba-panel{ border-radius:16px; margin:24px 12px 44px; padding:24px 16px 32px; }
	.difta-shuba-name{ margin:22px auto 18px; }
}


/* department buttons on the شاخیں page link to their شعبہ جات کا تعارف page */
.difta-dept-link{
	text-decoration:none !important; color:inherit !important;
	cursor:pointer; transition:transform .14s, box-shadow .14s, background .14s;
}
.difta-dept-link:hover{
	transform:translateY(-2px);
	box-shadow:0 6px 16px rgba(0,0,0,.14);
}
.difta-dept-link:hover .difta-dept-name{ color:#3f7f96; }


/* ---- شعبہ panel: force RTL right alignment (theme was overriding it) ---- */
.difta-shuba-panel,
.difta-shuba-panel *{ direction:rtl !important; }
.difta-shuba-lead{ text-align:right !important; }
.difta-shuba-content,
.difta-shuba-content p,
.difta-shuba-content li,
.difta-shuba-content div,
.difta-shuba-content span{
	text-align:right !important;
	direction:rtl !important;
}
/* keep the teal heading bars centred */
.difta-shuba-head,
.difta-shuba-content h2,
.difta-shuba-content h3{ text-align:center !important; }
.difta-shuba-back{ text-align:center !important; }


/* the bracketed part of a شعبہ name is teal, the rest stays black */
.difta-shuba-name-sub{ color:#3f7f96; }
/* trim the empty gap between the name and the torn band */
.difta-shuba-band{ margin-top:6px !important; }
.difta-shuba-band{ padding-top:clamp(30px,7vw,86px) !important; padding-bottom:clamp(30px,7vw,86px) !important; }


/* ============================================================
   شعبہ panel — match the artwork exactly:
   • teal heading bar sits on the RIGHT, sized to its text (not centred/full)
   • every paragraph starts hard against the right edge (true RTL)
   ============================================================ */
.difta-shuba-head,
.difta-shuba-content h2,
.difta-shuba-content h3{
	display:inline-block !important;
	width:auto !important; max-width:100% !important;
	margin:26px 0 18px auto !important;   /* pushes the bar to the right in RTL */
	margin-right:0 !important;
	text-align:center !important;
	padding:7px 34px !important;
	font-size:clamp(17px,2vw,26px) !important;
	border-radius:5px !important;
}
/* the bar must sit on its own line, hugging the right edge */
.difta-shuba-panel .difta-shuba-head,
.difta-shuba-content h2,
.difta-shuba-content h3{ float:none !important; }
.difta-shuba-head-wrap{ text-align:right; }

/* paragraphs: hard right, no justify stretching */
.difta-shuba-lead,
.difta-shuba-content,
.difta-shuba-content p,
.difta-shuba-content li{
	text-align:right !important;
	direction:rtl !important;
	text-justify:none !important;
}
.difta-shuba-content p{ margin:0 0 16px !important; }


/* ============================================================
   شاخ کا تعارف (single branch) — map, teal name card, band, panel
   ============================================================ */
.difta-shakh{ direction:rtl; font-family:'Jameel Noori Nastaleeq','Hussaini Nastaleeq',sans-serif; }

/* map strip, full-bleed like the artwork */
.difta-shakh-map{
	position:relative; width:100vw; max-width:100vw; height:clamp(220px,26vw,420px);
	left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
	overflow:hidden; line-height:0; background:#e8eaec;
}
.difta-shakh-map iframe{ width:100%; height:100%; border:0; display:block; }
.difta-shakh-map-open{
	position:absolute; bottom:14px; inset-inline-start:16px; z-index:3;
	background:rgba(255,255,255,.94); color:#2a2a2a; text-decoration:none;
	font-size:clamp(14px,1.6vw,19px); padding:7px 16px; border-radius:22px;
	box-shadow:0 4px 12px rgba(0,0,0,.18); line-height:1.6;
}
.difta-shakh-map-open:hover{ background:#fff; }

/* teal name card — same language as the شاخیں page cards */
.difta-shakh-card{
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
	background:#4c7d92; color:#fff; border-radius:14px;
	width:fit-content; max-width:92%;
	margin:-34px auto 0; position:relative; z-index:4;
	padding:16px clamp(26px,4vw,54px) 14px;
	box-shadow:0 8px 22px rgba(0,0,0,.18);
}
.difta-shakh-card-img{ display:block; width:auto; max-width:100%; height:clamp(46px,5vw,74px); }
.difta-shakh-card-name{ font-size:clamp(24px,3.2vw,44px); line-height:1.5; color:#fff; text-align:center; }
.difta-shakh-card-area{ font-size:clamp(15px,1.8vw,23px); color:#fff; line-height:1.7; text-align:center; }
.difta-shakh-card .difta-pin{ color:#eab54e; }

/* the band sits right under the card */
.difta-shakh-band{ margin-top:18px !important; }

/* ribbon heading inside the panel */
.difta-shakh-ribbon{
	display:inline-block; background:#4c7d92; color:#fff;
	font-family:'Jameel Noori Nastaleeq','Hussaini Nastaleeq',sans-serif;
	font-size:clamp(17px,2vw,27px); font-weight:400; line-height:1.75;
	border-radius:5px; padding:7px 34px; margin:0 0 20px auto;
	text-align:center;
}
.difta-shakh-panel{ margin-top:30px; }

@media (max-width:700px){
	.difta-shakh-card{ margin-top:-24px; padding:12px 20px 11px; border-radius:11px; }
	.difta-shakh-map{ height:220px; }
}/* ============================================================
   Pattern stays on the page background,
but NEVER directly behind
   body text — inner text blocks sit on a solid surface instead.
   ============================================================ */
.difta-taruf-body,
.difta-qbox,
.difta-mag,
.difta-media,
.difta-contact,
.difta-maz-body,
.difta-maz-article,
.difta-taruf-sec,
.difta-taruf-content,
.difta-taruf-intro,
.difta-shuba-panel,
.difta-shakh-panel,
.difta-rafahi-intro,
.difta-rafahi-desc,
.difta-shuba-content,
.difta-shuba-lead{
	background-image:none !important;
}
/* keep those blocks readable on their own solid surface */
.difta-taruf-body{ background-color:#fff !important; }
.difta-qbox{ background-color:#fff !important; }
.difta-mag, .difta-media, .difta-contact{ background-color:#fff !important; }
.difta-maz-body, .difta-maz-article{ background-color:transparent !important; }


/* the branch calligraphy image already includes the area line — avoid duplication */
.difta-shakh-card:has(.difta-shakh-card-img) .difta-shakh-card-area{ display:none; }
/* size the calligraphy card art like the شاخیں page cards */
.difta-shakh-card-img{ height:auto !important; width:min(340px,80vw) !important; }


/* ============================================================
   اشاعتِ خاص بانیٔ معہد — same layout on desktop and mobile
   gold hero → teal header → grey list → two gold cards
   ============================================================ */
.difta-ishaat{ direction:rtl; font-family:'Jameel Noori Nastaleeq','Hussaini Nastaleeq',sans-serif; }
.difta-ishaat-hero{ width:100%; line-height:0; }
.difta-ishaat-hero-img{ display:block; width:100%; height:auto; }
.difta-ishaat-body{ max-width:1240px; margin:0 auto; padding:30px clamp(14px,3vw,34px) 60px; }

/* main list panel */
.difta-ishaat-panel{
	background:#ededed; border-radius:8px; overflow:hidden;
	box-shadow:0 4px 14px rgba(0,0,0,.08); margin:0 0 34px;
}
.difta-ishaat-head{
	background:#4c7d92; color:#fff; text-align:center;
	font-size:clamp(17px,2.1vw,28px); line-height:1.8; padding:13px 18px;
}
.difta-ishaat-list{ list-style:none; margin:0; padding:0; }
.difta-ishaat-row{ border-bottom:1px solid #e2e2e2; background:#f2f2f2; }
.difta-ishaat-row:nth-child(even){ background:#e9e9e9; }
/* a row is a flex line whether or not it wraps a link */
.difta-ishaat-row,
.difta-ishaat-row > a{
	display:flex; align-items:center; gap:12px;
	padding:9px 22px; color:#2a2a2a; text-decoration:none;
	font-size:clamp(15px,1.7vw,21px); line-height:1.8;
}
.difta-ishaat-row > a{ padding:0; flex:1; }
.difta-ishaat-row:hover{ background:#fff; }
.difta-ishaat-row > a:hover .difta-ishaat-txt{ color:#b07a34; }
.difta-ishaat-diam{
	width:11px; height:11px; flex:0 0 auto; transform:rotate(45deg); background:#c08840;
}
.difta-ishaat-diam-teal{ background:#4c7d92; }
.difta-ishaat-txt{ flex:1; }

/* the two gold-headed cards — side by side on desktop, stacked on phones */
.difta-ishaat-cards{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.difta-ishaat-card{
	background:#fff; border:1px solid #e3e3e3; border-radius:10px; overflow:hidden;
	box-shadow:0 4px 14px rgba(0,0,0,.07);
}
.difta-ishaat-card-head{
	background:#a87838; color:#fff; text-align:center;
	font-size:clamp(15px,1.8vw,23px); line-height:1.8; padding:10px 16px;
}
.difta-ishaat-card-list{ list-style:none; margin:0; padding:10px 0 14px; }
.difta-ishaat-card-list li{ border-bottom:1px solid #e6e6e6; }
.difta-ishaat-card-list li:last-child{ border-bottom:0; }
.difta-ishaat-card-list li,
.difta-ishaat-card-list li > a{
	display:flex; align-items:center; gap:12px;
	text-decoration:none; color:#1f1f1f;
	padding:11px 20px; font-size:clamp(14px,1.6vw,20px); line-height:1.85;
}
.difta-ishaat-card-list li > a{ padding:0; flex:1; }
.difta-ishaat-card-list a:hover .difta-ishaat-txt{ text-decoration:underline; text-underline-offset:5px; color:#4c7d92; }

@media (max-width:820px){
	.difta-ishaat-cards{ grid-template-columns:1fr; gap:20px; }
}


/* ============================================================
   سوال پوچھیں — question form
   ============================================================ */
.difta-ask{ direction:rtl; font-family:'Jameel Noori Nastaleeq','Hussaini Nastaleeq',sans-serif; }
.difta-ask-banner{
	width:100vw; max-width:100vw; line-height:0;
	position:relative; left:50%; right:50%;
	margin-left:-50vw; margin-right:-50vw;
}
.difta-ask-banner img{ display:block; width:100%; height:auto; }
.difta-ask-body{ max-width:none; width:100%; margin:0; padding:30px clamp(16px,4vw,70px) 60px; box-sizing:border-box; }

/* success + error notices */
.difta-ask-ok{
	background:#eaf6ee; border:1px solid #bfe3cc; border-radius:10px;
	padding:20px 24px; margin:0 0 24px; text-align:center;
}
.difta-ask-ok h2{ margin:0 0 6px; color:#1f7a43; font-size:clamp(20px,2.4vw,30px); font-weight:400; }
.difta-ask-ok p{ margin:0; font-size:clamp(15px,1.7vw,21px); color:#2b2b2b; }
.difta-ask-err{
	background:#fdecea; border:1px solid #f5c2bd; border-radius:10px;
	padding:14px 22px; margin:0 0 22px;
}
.difta-ask-err ul{ margin:0; padding-inline-start:20px; }
.difta-ask-err li{ font-size:clamp(15px,1.6vw,20px); color:#a3271b; line-height:1.9; }

/* rules block (from the artwork) */
.difta-ask-rules{
	background:#fff; border:1px solid #e6e6e6; border-radius:12px;
	padding:22px clamp(16px,3vw,34px) 24px; margin:0 0 28px;
	box-shadow:0 3px 12px rgba(0,0,0,.06);
}
.difta-ask-salam{
	text-align:center; color:#1f6b46; font-size:clamp(19px,2.3vw,30px);
	line-height:1.9; padding-bottom:12px; margin-bottom:14px;
	border-bottom:2px solid #e8d9a8;
}
.difta-ask-rules ul{ list-style:none; margin:0; padding:0; }
.difta-ask-rules li{
	display:flex; gap:12px; align-items:flex-start;
	font-size:clamp(15px,1.75vw,22px); line-height:2.05; color:#242424;
	padding:7px 0; text-align:right;
}
.difta-ask-diam{
	width:10px; height:10px; flex:0 0 auto; margin-top:.65em;
	transform:rotate(45deg); background:#d5a44a;
}

/* the form */
.difta-ask-form{
	background:#f5f5f5; border:1px solid #e4e4e4; border-radius:12px;
	padding:26px clamp(16px,3vw,32px) 28px;
}
.difta-ask-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 22px; }
.difta-ask-full{ grid-column:1 / -1; }
.difta-ask-field{ display:flex; flex-direction:column; gap:7px; }
.difta-ask-lbl{
	font-size:clamp(15px,1.7vw,21px); color:#1f1f1f; line-height:1.8;
}
.difta-ask-lbl b{ color:#c0392b; }
.difta-ask-lbl small{ color:#666; font-size:.82em; }
.difta-ask-field input[type="text"],
.difta-ask-field input[type="email"],
.difta-ask-field textarea{
	width:100%; box-sizing:border-box;
	font-family:inherit; font-size:clamp(15px,1.7vw,20px); line-height:1.9;
	color:#1c1c1c; background:#fff;
	border:1px solid #cfd6d9; border-radius:8px; padding:10px 14px;
	direction:rtl; text-align:right;
	transition:border-color .15s, box-shadow .15s;
}
.difta-ask-field input:focus,
.difta-ask-field textarea:focus{
	outline:none; border-color:#4c7d92; box-shadow:0 0 0 3px rgba(76,125,146,.15);
}
.difta-ask-field input[type="file"]{
	font-family:inherit; font-size:15px; background:#fff;
	border:1px dashed #b9c4c9; border-radius:8px; padding:12px 14px;
}
/* radio row */
.difta-ask-radios{ display:flex; flex-wrap:wrap; gap:10px 22px; }
.difta-ask-radio{
	display:inline-flex; align-items:center; gap:8px; cursor:pointer;
	background:#fff; border:1px solid #cfd6d9; border-radius:24px;
	padding:8px 18px; font-size:clamp(14px,1.6vw,20px); line-height:1.7;
	transition:border-color .15s, background .15s;
}
.difta-ask-radio:hover{ border-color:#4c7d92; }
.difta-ask-radio input{ accent-color:#4c7d92; }
.difta-ask-radio:has(input:checked){ background:#eaf1f4; border-color:#4c7d92; }

.difta-ask-actions{ text-align:center; margin-top:24px; }
.difta-ask-btn{
	background:#4c7d92; color:#fff; border:0; cursor:pointer;
	font-family:inherit; font-size:clamp(17px,2vw,26px); line-height:1.7;
	padding:11px 52px; border-radius:30px;
	box-shadow:0 6px 18px rgba(76,125,146,.35);
	transition:transform .15s, box-shadow .15s, background .15s;
}
.difta-ask-btn:hover{ background:#3c6579; transform:translateY(-2px); box-shadow:0 9px 24px rgba(76,125,146,.45); }
.difta-ask-btn:active{ transform:translateY(0); }

/* spam trap stays invisible */
.difta-ask-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

@media (max-width:720px){
	.difta-ask-grid{ grid-template-columns:1fr; }
}


/* the theme styles form buttons — force our submit button's look */
.difta-ask .difta-ask-btn,
.difta-ask button.difta-ask-btn,
.difta-ask button[type="submit"].difta-ask-btn{
	background:#4c7d92 !important; color:#fff !important;
	border:0 !important; border-radius:30px !important;
	font-family:'Jameel Noori Nastaleeq','Hussaini Nastaleeq',sans-serif !important;
	font-size:clamp(17px,2vw,26px) !important; line-height:1.7 !important;
	padding:11px 52px !important; width:auto !important; min-width:0 !important;
	box-shadow:0 6px 18px rgba(76,125,146,.35) !important;
	text-transform:none !important; letter-spacing:normal !important;
}
.difta-ask .difta-ask-btn:hover{ background:#3c6579 !important; }


/* ============================================================
   رفاہی خدمات — the intro text must sit on a clean white card,
   never directly on the patterned panel behind it.
   ============================================================ */
.difta-rafahi-v2 .difta-rafahi-intro,
.difta-rafahi .difta-rafahi-intro{
	background-color:#fff !important;
	background-image:none !important;
	border-radius:14px;
	box-shadow:0 3px 12px rgba(0,0,0,.07);
}
/* the pill descriptions too — text on a clean surface */
.difta-rafahi-desc{
	background-color:#fff !important;
	background-image:none !important;
}


/* ============================================================
   MOBILE — the magazine covers / posters were filling ~half the
   screen. Cap them so they stay proportionate on phones.
   ============================================================ */
@media (max-width: 700px){
	/* higher specificity than ".difta-mag-side .difta-mag-cover{width:100%!important}" */
	html body .difta-mag-side .difta-mag-cover,
	html body .difta-mag-side img,
	.difta-mag-cover,
	.difta-mag-side img{
		max-width: 220px !important;
		max-height: 300px !important;
		width: auto !important;
		height: auto !important;
		margin-inline: auto !important;
	}
	.difta-mag-side{ text-align:center !important; }

	/* the اعلانات slider cover as well */
	.difta-elanat-slider{ width: 78% !important; max-width: 320px !important; }

	/* رفاہی / شعبہ photo bands shouldn't dominate either */
	.difta-shuba-band, .difta-shakh-band{
		padding-top: clamp(20px,6vw,44px) !important;
		padding-bottom: clamp(20px,6vw,44px) !important;
	}
}
@media (max-width: 420px){
	html body .difta-mag-side .difta-mag-cover,
	html body .difta-mag-side img,
	.difta-mag-cover,
	.difta-mag-side img{ max-width: 190px !important; max-height: 260px !important; width:auto !important; }
	.difta-elanat-slider{ width: 84% !important; max-width: 280px !important; }
}


/* ============================================================
   FATWA Arabic citations (.ar_writing) — the client asked for a
   Majalla-style Naskh face here instead of Zahra.
   Sakkal Majalla itself is a licensed Microsoft/Ascender font and may
   not be redistributed, so we self-host Noto Naskh Arabic (SIL OFL,
   free for commercial use) — the same modulated Naskh style — and
   still name Sakkal Majalla first so it is used on machines that
   legitimately have it installed.
   ============================================================ */
@font-face{
	font-family:'Noto Naskh Arabic';
	font-style:normal; font-weight:400; font-display:swap;
	src:url('https://maahadulkhalil.com/wp-content/uploads/fonts/noto-naskh-arabic-400.woff2') format('woff2');
	unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FBB2-FBC1;
}

.ar_writing,
.difta-fatwa .ar_writing,
html body .difta-body .ar_writing,
html body .difta-body .indent,
html body .ar_writing{
	font-family:'Sakkal Majalla','Noto Naskh Arabic','Amiri','Traditional Arabic',serif !important;
	line-height:2.05 !important;
}


/* ============================================================
   Sakkal Majalla — the client's own licensed copy, self-hosted.
   Used for the Arabic citations in fatwas (.ar_writing).
   ============================================================ */
@font-face{
	font-family:'Sakkal Majalla';
	font-style:normal; font-weight:400; font-display:swap;
	src:url('https://maahadulkhalil.com/wp-content/uploads/fonts/sakkal-majalla-400.woff2') format('woff2'),
	    url('https://maahadulkhalil.com/wp-content/uploads/fonts/sakkal-majalla-400.ttf') format('truetype');
	unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FBB2-FBC1;
}


/* ============================================================
   SAFETY GUARD — images that sit as raw <img> in page content
   (outside any Elementor widget) must never exceed their column.
   The دار الافتاء calligraphy (Asset-77, 2197px wide) rendered at
   full natural size and broke the layout once Elementor Pro was
   restored, because nothing else constrains bare content images.
   ============================================================ */
.elementor-widget-theme-post-content img,
.entry-content img,
.page-content img,
.elementor-widget-text-editor img{
	max-width: 100% !important;
	height: auto !important;
}


/* ============================================================
   POST-RESTORE FIXES (Aug 2026) — after Elementor Pro was repaired.

   1) دار الافتاء: the page content holds bare <img> tags with no
      wrapper at all (Asset-77 is 2197px wide). Nothing constrained
      them once Pro's widget wrappers were gone, so the calligraphy
      rendered at full natural size. Constrain by src, which is the
      only stable hook these images have.
   2) المجد: the image-based PDF / archive buttons were shrinking on
      the narrower column because max-width:100% won against their
      fixed height. Give them a floor so they keep their real size.
   ============================================================ */

/* --- 1) oversized bare content images --- */
img[src*="Asset-77"],
img[src*="Asset-237"]{
	max-width: 100% !important;
	height: auto !important;
	display: block;
	margin-inline: auto;
}
/* the دار الافتاء calligraphy should read as a heading, not a billboard */
img[src*="Asset-77"]{
	width: min(560px, 88%) !important;
}

/* --- 2) المجد image buttons: never shrink below a usable size --- */
.difta-mag-pdf-art img{
	height: 54px !important;
	width: auto !important;
	max-width: none !important;
}
.difta-mag-btn-art{
	max-width: 340px !important;
	margin-inline: auto !important;
}
.difta-mag-btn-art img{
	width: 100% !important;
	min-width: 240px !important;
	height: auto !important;
	max-width: none !important;
}
@media (max-width: 768px){
	.difta-mag-pdf-art img{ height: 46px !important; }
	.difta-mag-btn-art{ max-width: 300px !important; }
	.difta-mag-btn-art img{ min-width: 200px !important; }
	img[src*="Asset-77"]{ width: 92% !important; }
}


/* ============================================================
   PHASE 1 — client feedback, 18-19 Aug 2026
   Every selector below was verified against the live DOM before
   being written; item numbers refer to the client's list.
   ============================================================ */

/* ---- item 8: drop the شعبہ جات pill on /rabta-jat/ ---------
   Client: "iski zarorat nhi". That page has two .difta-c-head-art pills —
   target this one by its artwork file so reordering the page cannot make the
   rule hide طریقہ تعاون instead. */
.difta-c-head-art:has(img[src*="ttl-shuba"]){ display: none !important; }

/* ---- item 5: طریقہ تعاون pill too big on phones ------------
   The heading is artwork, so the image height drives the pill size.
   Desktop keeps its 34px; only small screens come down. */
@media (max-width: 860px){
	html body .difta-c-head-art img{ height: 22px !important; }
	html body .difta-c-head-art{ padding: 10px 16px !important; margin: 26px auto 18px !important; }
}
@media (max-width: 480px){
	html body .difta-c-head-art img{ height: 18px !important; }
	html body .difta-c-head-art{ padding: 8px 12px !important; margin: 20px auto 14px !important; }
}

/* ---- item 13: فروعات اور شاخیں cards too big on phones -----
   Verified in the live DOM: the cards are .difta-branch-card--art and their
   whole body is one artwork image (.difta-branch-art) measured 347x169 at a
   390px viewport, 5 to a screen. There is no padding to trim, so the image
   width is what drives the height. Client asked for "thora chota", so this
   comes down about a fifth and the calligraphy stays readable. */
@media (max-width: 700px){
	html body .difta-branch-card--art{ min-height: 0 !important; }
	html body .difta-branch-art{ width: 78% !important; height: auto !important; margin-inline: auto; }
	.difta-branch-grid{ gap: 10px; }
}
@media (max-width: 420px){
	html body .difta-branch-art{ width: 84% !important; }
}

/* ---- item 14: underline under the اشاعتِ خاص button --------
   Verified: .difta-taruf-btn on /bani-mehd-taruf/ computes to
   text-decoration-line: underline from the theme's link styles.
   The sibling artwork buttons are covered too, so this cannot resurface. */
.difta-taruf-btn, .difta-taruf-btn:hover, .difta-taruf-btn:focus, .difta-taruf-btn:visited,
.difta-mag-btn-art, .difta-mag-btn-art:hover,
.difta-mag-pdf-art, .difta-mag-pdf-art:hover,
.difta-qmore, .difta-qmore:hover{
	text-decoration: none !important;
}

/* ---- item 10: المجد subscription rows in the wrong face ----
   Verified on the live page: الاشتراكات, ثمن النسخة and يتضمن هذا العدد all
   render in Zahra Arabic, but the three .difta-subs-list rows fell back to
   Jameel Noori Nastaleeq — .difta-subs-list li outranks the .difta-arabic-txt
   class sitting on the <ul>. Matching that specificity fixes it. */
html body .difta-subs-list li,
html body .difta-subs.difta-arabic-txt .difta-subs-list li{
	font-family: 'Zahra Arabic', 'Amiri', 'Traditional Arabic', serif !important;
}

/* ---- item 19: Bebas Neue on the Latin button ---------------
   Verified: the button is .difta-media-bar on /social-media/, text straight
   inside the div. Bebas Neue is condensed, so MAAHAD UL KHALIL fits on one
   line without shrinking it — which is item 11's complaint as well.
   Caps-only, so it is kept off anything holding an email or account number. */
.difta-media-bar{
	font-family: 'Bebas Neue', 'Arial Narrow', sans-serif !important;
	letter-spacing: .06em;
	white-space: nowrap;
}
/* item 11a: keep MAAHAD UL KHALIL on one line.
   Measured on a 390px screen: the text needs 286px but the 44px side padding
   left only 238px of content box, so it wrapped despite white-space:nowrap.
   Trimming the padding is enough — the font size stays at 26px. */
@media (max-width: 700px){
	html body .difta-media-bar{
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
}
@media (max-width: 380px){
	html body .difta-media-bar{
		padding-left: 10px !important;
		padding-right: 10px !important;
		font-size: 23px !important;
	}
}

/* ---- item 3: mobile centring on /darul-ifta/ ---------------
   Measured at 390px wide: تلاش sat 319px from the left and 35px from the
   right because text-align:start pins it to the right edge in RTL.
   Verified classes: .difta-qwrap / .difta-qbox / .difta-qcol / .difta-qhead. */
@media (max-width: 700px){
	/* .title-block is a flex row and justify-content:flex-start means the RIGHT
	   edge in RTL, so text-align alone could not move it — the 36px text box was
	   already centred inside itself while sitting hard against the right edge
	   (measured L=429 / R=35). Centring the flex line is what actually moves it. */
	html body .title-block{ justify-content: center !important; }
	html body .title-block .title-text,
	html body .difta-qhead{ text-align: center !important; }
	html body .difta-qcol{ padding-left: 12px !important; padding-right: 12px !important; }
	html body .difta-qbox{ padding-left: 8px !important; padding-right: 8px !important; }
}


/* ============================================================
   PHASE 2 — client feedback, 18-19 Aug 2026
   ============================================================ */

/* ---- item 1: رفاہی خدمات link on /rabta-jat/ --------------
   The welfare wing runs its own site (alkhalilwelfare.org); the client asked
   for a button under the bank details pointing at it. Styled to match the
   golden pill headings already on the page rather than inventing a new look. */
.difta-welfare{
	max-width: 1000px;
	margin: 6px auto 34px;
	text-align: center;
}
.difta-welfare-btn{
	display: inline-block;
	background: #b58234;
	color: #fff !important;
	font-size: 21px;
	line-height: 1.6;
	padding: 12px 34px;
	border-radius: 30px;
	text-decoration: none !important;
	box-shadow: 0 4px 14px rgba(176,130,56,.32);
	transition: background .2s ease, transform .2s ease;
}
.difta-welfare-btn:hover,
.difta-welfare-btn:focus{
	background: #9c6d28;
	color: #fff !important;
	transform: translateY(-1px);
	text-decoration: none !important;
}
@media (max-width: 860px){
	.difta-welfare-btn{ font-size: 18px; padding: 11px 26px; }
	.difta-welfare{ margin-bottom: 26px; }
}
@media (max-width: 480px){
	.difta-welfare-btn{ font-size: 16px; padding: 10px 20px; }
}

/* ---- item 4: official mailboxes on /rabta-jat/ ------------
   Five addresses the client supplied; same row rhythm as the bank block so the
   page reads as one system. Left-to-right for the addresses themselves, since
   they are Latin text sitting in an RTL page. */
.difta-c-head-plain{
	max-width: 1000px;
	margin: 34px auto 14px;
	text-align: center;
	font-size: 26px;
	/* The shared .difta-c-head brings a golden pill background with it, which
	   swallowed dark text. Use the site's teal instead of that golden: white on
	   #b58234 measures 3.38:1, below the 4.5 readability floor, while white on
	   #47788c measures 4.85:1 — and this teal already appears on the bank
	   headings and branch cards, so it is not a new colour. */
	background: #47788c !important;
	color: #fff !important;
	border-radius: 30px;
	padding: 10px 22px !important;
}
.difta-emails{
	max-width: 1000px;
	margin: 0 auto 30px;
	background: #fafafa;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	overflow: hidden;
}
.difta-email-row{
	display: flex; align-items: center; gap: 14px;
	padding: 13px 18px;
	border-bottom: 1px solid #e6e6e6;
	font-size: 20px;
}
.difta-email-row:last-child{ border-bottom: none; }
.difta-email-lbl{ flex: 0 0 190px; color: #444; }
.difta-email-val{ flex: 1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.difta-email-link{
	direction: ltr;
	unicode-bidi: embed;
	font-family: Consolas, Menlo, monospace;
	font-size: 17px;
	color: #2b6b84;
	text-decoration: none !important;
	word-break: break-all;
}
.difta-email-link:hover{ color: #b58234; text-decoration: underline !important; }
@media (max-width: 860px){
	.difta-c-head-plain{ font-size: 21px; margin-top: 26px; }
	.difta-email-row{ flex-direction: column; align-items: stretch; gap: 6px; padding: 11px 14px; font-size: 17px; }
	.difta-email-lbl{ flex: none; font-weight: 600; }
	.difta-email-link{ font-size: 15px; }
}
@media (max-width: 480px){
	.difta-c-head-plain{ font-size: 19px; }
	.difta-email-link{ font-size: 14px; }
}

/* ---- item 26: مطلوبہ سوال موجود نہیں ہے؟ panel ------------
   The client designed this section and asked for their version. Their layout is
   a dark-gold frame around a cream card, contents stacked and centred.

   Two things found while checking the live page rather than assuming:
   1. This section is built in Elementor with wp-clean-* classes — the plugin's
      own .difta-cta markup exists but no page uses that shortcode, so styling it
      would have changed nothing.
   2. The stacking order (heading, text, button, bubbles) is already correct on
      mobile, so only the frame and card colours were actually missing.

   Colours sampled from the client's screenshot, not guessed:
     frame  rgb(143,93,32)  = #8f5d20
     card   rgb(244,237,229) = #f4ede5
   No frame artwork exists — all 211 files in the assets folder were checked — so
   it is built from the shapes it is made of. */
.wp-clean-fullwidth-container{
	/* One cream card inside one gold frame. Styling every child (> *) instead
	   split it into two cards — text in one, bubbles in another — so the frame
	   lives on the Elementor container that wraps this one. */
	background: #f4ede5 !important;
	border-radius: 20px !important;
	padding: 26px 22px !important;
	box-shadow: none !important;
}
.wp-clean-fullwidth-container:has(.wp-clean-heading){
	/* nothing extra — kept as a hook if the layout gains siblings later */
}
/* the gold frame: the Elementor container immediately around the card */
.elementor-element:has(> .e-con-inner > .elementor-element > .wp-clean-fullwidth-container),
.elementor-element:has(> .wp-clean-fullwidth-container){
	background: #8f5d20 !important;
	border-radius: 30px !important;
	padding: 14px !important;
}

@media (max-width: 860px){
	.wp-clean-fullwidth-container{ padding: 20px 16px !important; border-radius: 16px !important; }
	.elementor-element:has(> .wp-clean-fullwidth-container){ padding: 10px !important; border-radius: 22px !important; }
}
@media (max-width: 480px){
	.wp-clean-fullwidth-container{ padding: 18px 13px !important; }
	.elementor-element:has(> .wp-clean-fullwidth-container){ padding: 8px !important; }
}

/* ---- item 12: السلام علیکم line needs the Arabic face ------
   The line is .difta-ask-salam on /ask-question/ and was rendering in
   Jameel Noori Nastaleeq — the Urdu Nastaliq stack — even though the text is
   Arabic, so it did not match the Arabic typography elsewhere on the site.
   The Urdu instructions directly below it keep their Nastaliq face; only this
   line changes. (It is written with full diacritics — السَّلامُ عَلَيْكُمْ — which is
   why a plain-text search for it came up empty at first.) */
html body .difta-ask-salam{
	font-family: 'Zahra Arabic', 'Sakkal Majalla', 'Noto Naskh Arabic', 'Traditional Arabic', serif !important;
	line-height: 1.9;
}
/* ---- item 25: background art zoomed in on phones -----------
   Client: "بیک گراؤنڈ پر جو ہم نے امیجز لگائی ہوئی تھیں وہ بہت زیادہ بڑی بڑی ہو گئی
   ہیں … بہت واضح زوم ہو گئی ہیں".

   Measured on the live page rather than guessed. The art is Asset-96-1-scaled.png
   at 2560x305 — a wide, thin strip (8.4:1) — sitting in a 470x731 box (0.64:1)
   with background-size:cover. cover has to satisfy the taller side, so it scales
   the strip x2.40 and only 8% of its width stays visible: hence the zoom.
   background-position was also pushed to -190px, sliding it further off.

   The element already sets background-repeat:repeat, so this art is a pattern,
   not a photo. Sizing it to its natural width and letting it tile keeps the
   detail at 1:1 instead of magnifying it. contain was rejected: it would render
   a 55px strip and leave the rest of the box empty. */
@media (max-width: 860px){
	html body .elementor-element:has(> [style*="Asset-96-1"]),
	html body [style*="Asset-96-1"],
	html body .elementor-element-aca236a{
		background-size: auto !important;
		background-position: center top !important;
		background-repeat: repeat !important;
	}
}


/* ============================================================
   Client feedback — 20 Aug 2026
   ============================================================ */

/* ---- item 29: WhatsApp icon should sit on the left ---------
   Client: "is mein jo WhatsApp ka icon hai woh right pe hai. Agar usko left pe
   kar dein, toh zyada acha lagega sab mein."

   The markup already puts the icon before the number, but the row is an RTL
   inline-flex, so "first" renders on the RIGHT. Reversing the flex direction
   moves the icon to the left while leaving the markup order — and therefore the
   reading order for screen readers — untouched. */
html body .difta-dph-wa{
	flex-direction: row-reverse !important;
}

/* ---- item 32: Latin numbers drifting in RTL text ----------
   Belt and braces for the <bdi> wrapping added in taruf.php: any digit run left
   bare elsewhere still gets isolated, so a year like 2013ء cannot be dragged to
   the end of an Urdu sentence. */
.difta-taruf-intro bdi,
.difta-taruf-content bdi{
	unicode-bidi: isolate;
}
/* keep دامت برکاتہم from breaking across two lines */
.difta-taruf-intro,
.difta-taruf-content{
	text-wrap: pretty;
}
/* ---- item 24: welfare photo strip -------------------------
   Sits under the ready-made banner (which carries the logo and name, so it
   stays). Same treatment the شعبہ pages give their photo bands. */
.difta-rafahi-photos{
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 14px;
	line-height: 0;
}
.difta-rafahi-photos img{
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}
@media (max-width: 860px){
	.difta-rafahi-photos{ padding: 0 8px; }
}

/* ---- item 28: سوال پوچھیں button under the home questions ----
   Zain: "sawal pouchen wala section nhi hai yahan" — the button lived only on
   the دار الافتاء page, not in this block on the home page. Matches the golden
   button used elsewhere so it reads as part of the same design. */
.difta-qask{
	margin: 22px auto 4px;
	text-align: center;
}
.difta-qask-btn{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #b58234;
	color: #fff !important;
	font-family: 'Jameel Noori Nastaleeq', serif;
	font-size: 22px;
	line-height: 1.7;
	padding: 10px 34px;
	border-radius: 8px;
	text-decoration: none !important;
	box-shadow: 0 4px 14px rgba(176,130,56,.30);
	transition: background .2s ease, transform .2s ease;
}
.difta-qask-btn:hover,
.difta-qask-btn:focus{
	background: #9c6d28;
	color: #fff !important;
	transform: translateY(-1px);
	text-decoration: none !important;
}
.difta-qask-arrow{
	font-size: 26px;
	line-height: 1;
	/* the chevron is a Latin glyph in an RTL button — keep it pointing the
	   same way regardless of the surrounding direction */
	direction: ltr;
	display: inline-block;
}
@media (max-width: 860px){
	.difta-qask-btn{ font-size: 19px; padding: 9px 26px; }
	.difta-qask{ margin-top: 18px; }
}
@media (max-width: 480px){
	.difta-qask-btn{ font-size: 17px; padding: 8px 20px; }
}

/* ============================================================
   شمارے — magazine issue archive and single issue
   ============================================================ */

/* ---- گزشتہ شمارے listing ---- */
.difta-sm-archive{
	max-width: 1200px;
	margin: 0 auto;
	padding: 28px 16px 40px;
}
.difta-sm-archive-ttl{
	text-align: center;
	background: #47788c;
	color: #fff;
	font-size: 26px;
	padding: 10px 22px;
	border-radius: 30px;
	max-width: 420px;
	margin: 0 auto 26px;
}
.difta-sm-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 22px;
}
.difta-sm-card{
	position: relative;
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 12px;
	padding: 14px;
	text-align: center;
	box-shadow: 0 2px 10px rgba(0,0,0,.05);
	transition: transform .18s ease, box-shadow .18s ease;
}
.difta-sm-card:hover{
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(0,0,0,.10);
}
.difta-sm-card-latest{ border-color: #b58234; }
.difta-sm-badge{
	position: absolute;
	top: 10px;
	inset-inline-start: 10px;
	background: #b58234;
	color: #fff;
	font-size: 13px;
	padding: 3px 11px;
	border-radius: 20px;
}
.difta-sm-cover{ display: block; line-height: 0; }
.difta-sm-cover img{
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 3px 12px rgba(0,0,0,.14);
}
.difta-sm-card-ttl{
	font-size: 17px;
	line-height: 1.9;
	margin: 12px 0 8px;
}
.difta-sm-card-ttl a{
	color: #2b6b84;
	text-decoration: none !important;
}
.difta-sm-card-ttl a:hover{ color: #b58234; }
.difta-sm-card-links{
	display: flex;
	gap: 8px;
	justify-content: center;
}
.difta-sm-link{
	font-size: 14px;
	padding: 5px 14px;
	border-radius: 6px;
	background: #eef3f5;
	color: #2b6b84 !important;
	text-decoration: none !important;
}
.difta-sm-link:hover{ background: #dce7ec; }
.difta-sm-link-pdf{
	background: #b58234;
	color: #fff !important;
}
.difta-sm-link-pdf:hover{ background: #9c6d28; }
.difta-sm-empty{
	text-align: center;
	color: #777;
	padding: 24px 0;
}

/* ---- single issue ---- */
.difta-sm-single{ padding: 0 0 44px; }
.difta-sm-single-body{
	max-width: 1100px;
	margin: 0 auto;
	padding: 26px 16px 0;
}
.difta-sm-crumb{ margin-bottom: 12px; font-size: 16px; }
.difta-sm-crumb a{
	color: #2b6b84;
	text-decoration: none !important;
}
.difta-sm-crumb a:hover{ color: #b58234; }
.difta-sm-single-ttl{
	font-size: 27px;
	line-height: 1.9;
	color: #2b6b84;
	margin: 0 0 22px;
}
.difta-sm-single-grid{
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 30px;
	align-items: start;
}
.difta-sm-single-cover{
	width: 100%;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 6px 20px rgba(0,0,0,.16);
}
.difta-sm-pdf-btn{
	display: block;
	margin-top: 14px;
	text-align: center;
	background: #b58234;
	color: #fff !important;
	font-size: 18px;
	padding: 10px 16px;
	border-radius: 8px;
	text-decoration: none !important;
}
.difta-sm-pdf-btn:hover{ background: #9c6d28; }
.difta-sm-contents-ttl{
	background: #47788c;
	color: #fff;
	font-size: 21px;
	text-align: center;
	padding: 9px 14px;
	border-radius: 8px;
	margin: 0 0 16px;
}
.difta-sm-articles{
	list-style: none;
	margin: 0;
	padding: 0;
}
.difta-sm-articles li{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 6px;
	border-bottom: 1px solid #ececec;
	font-size: 18px;
	line-height: 1.9;
}
.difta-sm-articles li:last-child{ border-bottom: none; }
.difta-sm-articles a{
	color: #2b6b84;
	text-decoration: none !important;
}
.difta-sm-articles a:hover{ color: #b58234; }
.difta-sm-dot{
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	transform: rotate(45deg);
	background: #47788c;
}

@media (max-width: 860px){
	.difta-sm-single-grid{ grid-template-columns: 1fr; gap: 22px; }
	.difta-sm-single-side{ max-width: 260px; margin: 0 auto; }
	.difta-sm-single-ttl{ font-size: 22px; }
	.difta-sm-archive-ttl{ font-size: 21px; }
	.difta-sm-grid{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
	.difta-sm-card-ttl{ font-size: 15px; }
	.difta-sm-articles li{ font-size: 16px; }
}
@media (max-width: 480px){
	.difta-sm-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.difta-sm-card{ padding: 10px; }
	.difta-sm-card-ttl{ font-size: 14px; line-height: 1.7; }
	.difta-sm-link{ font-size: 13px; padding: 4px 10px; }
}

/* ---- item 41: footer menu columns render bottom-up -------
   Measured on the live footer: the vertical nav lists compute to
   flex-direction: column-reverse, so سرِ ورق — first in the DOM and first in
   the header — appeared LAST, and the whole column read upside down. The order
   in WordPress was already correct; only the visual direction was inverted. */
[data-elementor-type="footer"] .elementor-nav-menu.sm-vertical{
	flex-direction: column !important;
}

/* ---- item 35: header menu items sit flush against each other ----
   Measured on the live header: the gap between adjacent top-level items is 0px,
   because the link padding computes to "10px 0" — nothing on the sides. That is
   why رفاہی خدمات and دار الافتاء read as one run of text. Adding horizontal
   padding spaces them without changing the type size or the icons. */
[data-elementor-type="header"] .elementor-nav-menu > li > a{
	padding-inline: 13px !important;
}
@media (max-width: 1200px){
	[data-elementor-type="header"] .elementor-nav-menu > li > a{
		padding-inline: 9px !important;
	}
}
/* dropdown items keep their own spacing — only the top row needed this */
[data-elementor-type="header"] .elementor-nav-menu .sub-menu > li > a{
	padding-inline: 16px !important;
}

/* ---- item 37: photo strip on معہد کا تعارف ----------------
   Sits under the opening paragraphs, before the section headings. Same
   treatment the شعبہ pages and رفاہی خدمات give their strips. */
.difta-taruf-photos{
	margin: 22px auto 6px;
	line-height: 0;
	text-align: center;
}
.difta-taruf-photos img{
	display: block;
	width: 100%;
	max-width: 1100px;
	height: auto;
	margin-inline: auto;
}
@media (max-width: 860px){
	.difta-taruf-photos{ margin: 16px auto 4px; }
}

/* ---- header navs rendering left-to-right ------------------
   Measured on the live header: two of the six nav lists compute to
   direction: ltr while the rest are rtl. In LTR the first item in the DOM sits
   on the LEFT, so an Urdu menu reads backwards — سرِ ورق ended up beside the
   logo instead of at the right edge, and the whole row ran the wrong way.
   The markup order was already correct; only the direction was wrong. */
[data-elementor-type="header"] .elementor-nav-menu{
	direction: rtl !important;
}
/* dropdown panels follow their parent */
[data-elementor-type="header"] .elementor-nav-menu .sub-menu{
	direction: rtl !important;
}

/* ---- one سوال پوچھیں button per page ---------------------
   The button was added under the questions block because the home page had
   none. But /darul-ifta/ already carries one inside the مطلوبہ سوال panel, so
   that page ended up showing two. Hide the added one wherever the panel is
   present; the home page has no panel, so its button stays. */
body:has(.wp-clean-fullwidth-container) .difta-qask{
	display: none !important;
}

/* ---------------------------------------------------------------------------
   Home page تعارفِ معہد — force RTL on the intro text widget.

   This copy of the intro lives in the page's Elementor data, not in the
   plugin, so difta_intro_paragraphs() never sees it. Elementor renders the
   widget with direction:ltr, which pushed 2013ء roughly 343px away from the
   right edge even though it is the first word of its paragraph. Elementor
   strips <bdi> from stored markup, so the isolation has to come from CSS.
   Scoped to the one widget id so no other block on the page is affected.
   --------------------------------------------------------------------------- */
html body .elementor-28 .elementor-element-41bc113,
html body .elementor-28 .elementor-element-41bc113 p,
html body .elementor-28 .elementor-element-41bc113 span {
	direction: rtl;
	text-align: right;
}

/* ---------------------------------------------------------------------------
   Home page — centre the دار الافتاء banner on mobile.

   Elementor's generated post-28.css sets margin:0 9px 0 0 on this image widget
   under max-width:767px. That 9px right margin shifted the calligraphy 9px to
   the left of centre (34px left vs 43px right) while the سوالات box below it
   sat centred, so the two looked misaligned. Zero the side margins and centre
   the image itself.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
	html body .elementor-28 .elementor-element.elementor-element-7d204f4 {
		margin-right: 0;
		margin-left: 0;
		text-align: center;
	}
	html body .elementor-28 .elementor-element.elementor-element-7d204f4 img {
		margin-left: auto;
		margin-right: auto;
	}
}

/* ---------------------------------------------------------------------------
   Home page — دار الافتاء banner sat against the right edge on real phones.

   The container (5ce0908) is a column flexbox with align-items:flex-end, which
   on a column axis pins children to the RIGHT edge. The banner widget is
   narrower than the container (215px inside 392px), so it hugged that edge —
   186px of space on the left against 29px on the right.

   Margins could never fix this: the shift came from flex alignment, not from
   margin. Centre the container's children and let the image fill the width the
   way the سوالات box below it does.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
	html body .elementor-28 .elementor-element.elementor-element-5ce0908 {
		align-items: center;
	}
	html body .elementor-28 .elementor-element.elementor-element-7d204f4 {
		width: 100%;
		max-width: 100%;
		align-self: center;
	}
	html body .elementor-28 .elementor-element.elementor-element-7d204f4 img {
		width: 100%;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ---------------------------------------------------------------------------
   Home page — بانی معہد intro paragraph only.

   The paragraph ran direction:ltr while its script reads RTL, so 1947ء was
   dragged to the start of its line (0px from the right edge) and 1939ء pushed
   115px out of place — the same fault as the 2013 case.

   Scoped to this one widget id. Other widgets on the page have the same ltr
   setting, but changing them was not asked for.
   --------------------------------------------------------------------------- */
html body .elementor-28 .elementor-element.elementor-element-252a086,
html body .elementor-28 .elementor-element.elementor-element-252a086 p,
html body .elementor-28 .elementor-element.elementor-element-252a086 span {
	direction: rtl;
}

/* Turning that widget RTL changed what text-align:end resolves to: under ltr it
   meant 'left', under rtl it means 'right', which threw the final short line
   ('پوری زندگی کا سرمایہ بنے۔') over to the right on its own. Keep the block
   justified and pin the last line to the left, matching the rest of the text. */
html body .elementor-28 .elementor-element.elementor-element-252a086,
html body .elementor-28 .elementor-element.elementor-element-252a086 p {
	text-align: justify;
	text-align-last: left;
}


/* ---- دار الافتاء calligraphy off-centre on phones -----------
   Measured at 390px: the calligraphy sat 33px from the left but 57px from the
   right — 24px adrift, while معہد الخلیل الاسلامی below it looked centred.

   Two things were pushing it:
     1. the widget wrapping the image carries margin-right: 9px
     2. the whole Elementor column renders 375px wide inside a 390px viewport,
        leaving a 15px bias to one side

   Centring the image on its own axis fixes it regardless of what the wrapper
   inherits, so this holds even if the column padding changes later. */
@media (max-width: 767px) {
	html body .elementor-429 .elementor-element img[src*="Asset-77"],
	html body .elementor-429 .elementor-element img[src*="Asset-237"] {
		display: block !important;
		margin-left: auto !important;
		margin-right: auto !important;
		float: none !important;
	}

	/* the widget itself must not keep its own side margin, or the image
	   centres inside a box that is already off-centre */
	html body .elementor-429 .elementor-element-f02381e,
	html body .elementor-429 .elementor-element-380997b {
		margin-left: 0 !important;
		margin-right: 0 !important;
		text-align: center !important;
	}
}

/* ---------- Article & category lists: no underline ---------- */
html body .difta-maz-cat a,
html body .difta-maz-cats-list a,
html body .difta-maz-title-row a,
html body .difta-maz-titles a{
	text-decoration:none !important;
}
html body .difta-maz-cat a:hover,
html body .difta-maz-cats-list a:hover,
html body .difta-maz-title-row a:hover,
html body .difta-maz-titles a:hover{
	text-decoration:none !important;
}

/* ============================================================
   PRINTED FATWA - official Dar-ul-Ifta letterhead
   Source A4 210x297mm: header band 51.1mm, footer band 19.2mm.

   Chrome anchors fixed elements to the viewport rather than the
   page box, so with a zero page margin the two bands sit flush at
   the sheet edge and repeat on every sheet.

   Reserving room for them is a separate problem, because padding
   applies only to the first sheet. A real thead/tfoot pair repeats
   on each sheet, so the body is wrapped in an actual <table> and
   those rows carry the band heights. Divs with display:table-*
   do NOT get this treatment - the markup has to be a real table.
   ============================================================ */

/* On screen the wrapper table must be completely inert. */
table.difta-lh-spacer{
	display:block; width:100%; border:0; border-collapse:collapse;
	margin:0; padding:0; background:none;
}
table.difta-lh-spacer > thead.difta-lh-spacer-head,
table.difta-lh-spacer > tfoot.difta-lh-spacer-foot{ display:none; }
table.difta-lh-spacer > tbody.difta-lh-spacer-body,
table.difta-lh-spacer > tbody > tr,
table.difta-lh-spacer > tbody > tr > td{
	display:block; width:auto; padding:0; margin:0; border:0; background:none;
}
.difta-lh{ display:none; }

@media print{
	@page{ size:A4 portrait; margin:0; }

	html,body{ background:#fff !important; margin:0 !important; padding:0 !important; }

	.difta-lh{
		display:block !important;
		position:fixed; left:0; right:0; width:100%;
		margin:0; padding:0; z-index:9999;
	}
	.difta-lh img{ display:block; width:100%; height:auto; margin:0; padding:0; border:0; }
	.difta-lh-head{ top:0; }
	.difta-lh-foot{ bottom:0; }

	/* The on-screen banner repeats the letterhead artwork; drop it. */
	.difta-header,.difta-header-banner{ display:none !important; }

	.difta-wrap{ margin:0 !important; padding:0 !important; background:#fff !important; }
	.difta-container{
		max-width:100% !important; width:100% !important;
		margin:0 !important; padding:0 !important;
		box-shadow:none !important; background:#fff !important; border-radius:0 !important;
	}

	/* Restore true table behaviour so thead/tfoot repeat per sheet. */
	table.difta-lh-spacer{
		display:table !important; width:100% !important;
		border-collapse:collapse !important;
	}
	table.difta-lh-spacer > thead.difta-lh-spacer-head{ display:table-header-group !important; }
	table.difta-lh-spacer > tfoot.difta-lh-spacer-foot{ display:table-footer-group !important; }
	table.difta-lh-spacer > tbody.difta-lh-spacer-body{ display:table-row-group !important; }
	table.difta-lh-spacer > thead > tr,
	table.difta-lh-spacer > tfoot > tr,
	table.difta-lh-spacer > tbody > tr{ display:table-row !important; }
	table.difta-lh-spacer > thead > tr > td,
	table.difta-lh-spacer > tfoot > tr > td,
	table.difta-lh-spacer > tbody > tr > td{ display:table-cell !important; }

	/* The reserved bands, plus the side margins for the text column. */
	table.difta-lh-spacer > thead > tr > td{ height:56mm !important; padding:0 !important; }
	table.difta-lh-spacer > tfoot > tr > td{ height:24mm !important; padding:0 !important; }
	table.difta-lh-spacer > tbody > tr > td{ padding:0 14mm !important; }

	/* The wrapper table is structural only - never draw it. */
	table.difta-lh-spacer,
	table.difta-lh-spacer > thead > tr,
	table.difta-lh-spacer > tfoot > tr,
	table.difta-lh-spacer > tbody > tr,
	table.difta-lh-spacer > thead > tr > td,
	table.difta-lh-spacer > tfoot > tr > td,
	table.difta-lh-spacer > tbody > tr > td{
		border:0 !important; outline:0 !important;
		background:transparent !important; box-shadow:none !important;
	}

	/* Avoid orphaned headings when a fatwa runs onto a second sheet. */
	.difta-badge,.difta-title{ break-after:avoid; }
	.difta-meta{ break-before:avoid; }
}

/* ============================================================
   Fatwa page: two small corrections
   ============================================================ */

/* 1. The theme reset paints a pink background on every button in
      :hover and :focus. These buttons are just artwork, so keep
      them transparent and let the plugin lift/brighten stand. */
html body .difta-imgbtn,
html body .difta-imgbtn:hover,
html body .difta-imgbtn:focus,
html body .difta-imgbtn:active,
html body .difta-maz-btn,
html body .difta-maz-btn:hover,
html body .difta-maz-btn:focus,
html body .difta-maz-btn:active{
	background:none !important;
	background-color:transparent !important;
	border:0 !important;
	box-shadow:none !important;
	outline:0 !important;
}

/* 2. The site header already carries the institute calligraphy, so
      the plugin banner underneath reads as a second one. Drop the
      banner on a single fatwa; the archive keeps its own. */
body.single-fatwa .difta-header-banner{ display:none !important; }

/* ============================================================
   Fatwa panel: one continuous grey, and room around the text.

   The reading panel used to be white on a grey page, so the two
   met in a hard edge that the justified Urdu ran straight into.
   The panel now takes the same grey as the page, and the text
   column is inset further so nothing touches an edge.
   ============================================================ */
html body.single-fatwa .difta-wrap{
	background-color:#f4f4f6 !important;
}
html body.single-fatwa .difta-container{
	background:#f4f4f6 !important;
	box-shadow:none !important;
	padding:40px 70px 60px !important;
}

/* Breathing room between the justified text and the panel edge. */
html body.single-fatwa .difta-body{
	padding:0 10px !important;
}

/* The rules above sit inside the panel, so keep them off the edge too. */
html body.single-fatwa .difta-ornament{
	margin-left:10px !important;
	margin-right:10px !important;
}

@media (max-width:767px){
	html body.single-fatwa .difta-container{
		padding:28px 20px 44px !important;
	}
	html body.single-fatwa .difta-body{
		padding:0 4px !important;
	}
}

/* Citations that sit inside an Urdu paragraph, split only by <br>,
   are wrapped in a span rather than given their own <p>. */
html body .difta-body span.ar_writing{
	font-family:'Sakkal Majalla','Noto Naskh Arabic','Amiri','Traditional Arabic',serif !important;
	line-height:2.05 !important;
}

/* ============================================================
   Inheritance tables inside a fatwa

   Meeras answers carry a division table - one column per heir,
   with the share underneath. Nothing styled tables before, so a
   pasted one arrived with no rules and in the wrong reading
   order. These follow the printed fatwa: light rules, centred
   figures, and right-to-left column order.
   ============================================================ */
html body .difta-body table{
	border-collapse:collapse !important;
	width:auto !important;
	max-width:100%;
	margin:22px auto !important;
	direction:rtl !important;
	font-family:var(--urdu);
	font-size:19px;
	background:#fff;
}
html body .difta-body table th,
html body .difta-body table td{
	border:1px solid #b9b9b9 !important;
	padding:8px 18px !important;
	text-align:center !important;
	vertical-align:middle !important;
	line-height:1.9;
	white-space:nowrap;
}
html body .difta-body table th{
	font-weight:600;
	background:#f7f5f0;
}

/* The heir names sit in the first row; give them a little weight. */
html body .difta-body table tr:first-child td{
	font-weight:600;
	background:#f7f5f0;
}

/* Latin digits inside an Urdu cell must not flip. */
html body .difta-body table td bdi{ unicode-bidi:isolate; }

/* A wide table scrolls on its own rather than stretching the page. */
html body .difta-body .difta-table-scroll{
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
	margin:22px 0;
}
html body .difta-body .difta-table-scroll table{
	margin:0 auto !important;
}

@media (max-width:600px){
	html body .difta-body table{ font-size:17px; }
	html body .difta-body table th,
	html body .difta-body table td{ padding:6px 10px !important; }
}

/* Printed fatwas keep the table, and it must not break across sheets. */
@media print{
	html body .difta-body table{ break-inside:avoid; page-break-inside:avoid; }
	html body .difta-body .difta-table-scroll{ overflow:visible !important; }
}

/* A division table may carry a row per measure — share, percentage, amount —
   and a column per heir plus a total, so it can run well past a handful of
   columns. Tighten the cells as it widens rather than forcing a scroll. */
html body .difta-body table{
	table-layout:auto;
}
html body .difta-body table td,
html body .difta-body table th{
	white-space:nowrap;
}

/* From about eight columns on, the generous padding is what pushes the
   table off the page; trim it so more fits before scrolling starts. */
html body .difta-body table tr:first-child > *:nth-child(n+8),
html body .difta-body table tr > *:nth-child(n+8){
	padding-left:10px !important;
	padding-right:10px !important;
}
html body .difta-body table:has(tr > *:nth-child(8)) td,
html body .difta-body table:has(tr > *:nth-child(8)) th{
	padding:7px 11px !important;
	font-size:18px;
}
html body .difta-body table:has(tr > *:nth-child(11)) td,
html body .difta-body table:has(tr > *:nth-child(11)) th{
	padding:6px 8px !important;
	font-size:17px;
}

/* ============================================================
   Citations: heading, quoted text, and source

   A citation in a fatwa is three things, and they read as one
   because nothing distinguishes them:

     فتاویٰ عالمگیریہ میں ہے:          <- the heading
     "وإن نشزت فلا نفقة لها..."        <- the quoted text
     (كتاب الطلاق، 1/ 545، ط: دار الفكر) <- the source

   The heading introduces, the quotation carries the ruling, and
   the source is a bracketed reference. Each now looks like what
   it is: the heading set apart above, the quotation indented
   and a little larger, the source smaller and quieter.
   ============================================================ */

/* The quoted Arabic: inset from the margin so the block reads
   as a quotation rather than as body text. */
html body .difta-body p.indent:has(> .ar_writing),
html body .difta-body p.ar_writing{
	padding-right:26px !important;
	padding-left:26px !important;
	border-right:3px solid #d9cbb2;
	margin:14px 0 !important;
}

/* The source line — a bracketed reference. Smaller and softer,
   and never given the quotation's rule. */
html body .difta-body p.indent:has(> .ar_writing:only-child):has(> .ar_writing) {
	/* placeholder kept narrow; the source rule follows below */
}
html body .difta-body p[style*="text-align:left"] > .ar_writing,
html body .difta-body p[style*="text-align: left"] > .ar_writing{
	font-size:19px !important;
	color:#5d5d5d;
}
html body .difta-body p[style*="text-align:left"]:has(> .ar_writing),
html body .difta-body p[style*="text-align: left"]:has(> .ar_writing){
	border-right:0 !important;
	padding-right:26px !important;
	margin:4px 0 18px !important;
}

/* The Urdu heading that introduces a citation - "… میں ہے:" -
   gets room above it so each citation starts as its own block. */
html body .difta-body p:not(.indent):not(.ar_writing){
	margin-bottom:14px;
}

@media (max-width:600px){
	html body .difta-body p.indent:has(> .ar_writing),
	html body .difta-body p.ar_writing{
		padding-right:14px !important;
		padding-left:14px !important;
	}
	html body .difta-body p[style*="text-align:left"] > .ar_writing,
	html body .difta-body p[style*="text-align: left"] > .ar_writing{
		font-size:17px !important;
	}
}

/* "فقط والله أعلم" closes the fatwa; it is not a source line, so it must
   not inherit the quieter treatment given to bracketed references. The
   source lines all start with an opening bracket, which is what separates
   them — :has() cannot test text, so the closing line is named instead. */
html body .difta-body p.difta-faqat > .ar_writing{
	font-size:23px !important;
	color:#1f4a5a !important;
}
html body .difta-body p.difta-faqat{
	text-align:center !important;
	padding:0 !important;
	border-right:0 !important;
	margin:22px 0 6px !important;
}

/* ============================================================
   آئینۂ مضامین — a contents page, not a dump

   An issue can hold a hundred articles or more. As one column
   it ran nearly 7,000px and read as raw output. It now sits in
   columns, numbered, with a count, a filter, and a screenful
   shown at a time.
   ============================================================ */

html body .difta-sm-toolbar{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	flex-wrap:wrap;
	margin:0 0 18px;
	padding-bottom:14px;
	border-bottom:1px solid #e3ddd1;
}
html body .difta-sm-count{
	font-family:var(--urdu);
	font-size:18px;
	color:#7b6a4e;
	white-space:nowrap;
}
html body .difta-sm-filter{
	flex:1 1 220px;
	max-width:320px;
	font-family:var(--urdu);
	font-size:17px;
	direction:rtl;
	padding:9px 16px;
	border:1px solid #ddd5c6;
	border-radius:10px;
	background:#fff;
	color:#333;
	outline:none;
	transition:border-color .15s, box-shadow .15s;
}
html body .difta-sm-filter:focus{
	border-color:#c9b489;
	box-shadow:0 0 0 3px rgba(201,180,137,.18);
}

/* Two columns on a wide screen; the eye travels far less. */
html body ol.difta-sm-articles{
	list-style:none;
	margin:0;
	padding:0;
	columns:2;
	column-gap:38px;
}
html body ol.difta-sm-articles > li{
	break-inside:avoid;
	display:flex;
	align-items:flex-start;
	gap:12px;
	padding:11px 0;
	border-bottom:1px solid #ece7dc;
	font-family:var(--urdu);
	font-size:19px;
	line-height:1.9;
}
html body ol.difta-sm-articles > li.is-hidden{ display:none; }

/* A quiet serial number keeps a long list navigable. */
html body .difta-sm-num{
	flex:0 0 auto;
	min-width:26px;
	text-align:center;
	font-size:14px;
	color:#b3a488;
	background:#f6f2e9;
	border-radius:6px;
	padding:2px 0;
	margin-top:5px;
	font-family:system-ui, sans-serif;
}
html body ol.difta-sm-articles a{
	color:#2f5d72;
	text-decoration:none;
	transition:color .15s;
}
html body ol.difta-sm-articles a:hover{ color:#b58234; }

html body .difta-sm-more{
	display:block;
	margin:22px auto 0;
	font-family:var(--urdu);
	font-size:18px;
	color:#6b5630;
	background:#f6f2e9;
	border:1px solid #e0d6c2;
	border-radius:10px;
	padding:10px 30px;
	cursor:pointer;
	transition:background .15s, border-color .15s;
}
html body .difta-sm-more:hover{
	background:#efe8da;
	border-color:#cdbfa3;
}
html body .difta-sm-noresult{
	text-align:center;
	font-family:var(--urdu);
	font-size:18px;
	color:#8a7a5e;
	margin:18px 0 0;
}

@media (max-width:900px){
	html body ol.difta-sm-articles{ columns:1; }
}
@media (max-width:600px){
	html body ol.difta-sm-articles > li{ font-size:17px; padding:9px 0; }
	html body .difta-sm-toolbar{ gap:10px; }
	html body .difta-sm-filter{ max-width:none; }
}

/* Printing wants the whole list, in one plain column. */
@media print{
	html body .difta-sm-toolbar,
	html body .difta-sm-more{ display:none !important; }
	html body ol.difta-sm-articles{ columns:1 !important; }
	html body ol.difta-sm-articles > li.is-hidden{ display:flex !important; }
}

/* ============================================================
   Citation headings: bold, in the Naskh face

   The line that introduces a citation — "المبسوط للسرخسی میں ہے:"
   or "لما في صحيح البخاري (2/771):" — was set exactly like the
   quotation it introduces. The client asked for it bold and in
   the same Arabic face already used for the citations, so the
   three parts read as heading, text, and source.
   ============================================================ */

html body .difta-body p.difta-cite-head,
html body .difta-body p.difta-cite-head > .ar_writing{
	font-family:'Sakkal Majalla','Noto Naskh Arabic','Amiri','Traditional Arabic',serif !important;
	font-weight:700 !important;
	font-size:21px !important;
	color:#1f4a5a !important;
	line-height:2 !important;
}
html body .difta-body p.difta-cite-head{
	margin:26px 0 10px !important;
	padding:0 !important;
	border-right:0 !important;
}

@media (max-width:600px){
	html body .difta-body p.difta-cite-head,
	html body .difta-body p.difta-cite-head > .ar_writing{
		font-size:19px !important;
	}
}

/* Print keeps the same distinction. */
@media print{
	html body .difta-body p.difta-cite-head{ break-after:avoid; }
}

/* ============================================================
   آئینۂ مضامین — the اشاعتِ خاص design

   The client drew this panel: a teal head, alternating grey
   rows, a gold diamond on each line, white on hover. The
   contents list now follows it, while keeping the two columns
   and the reveal button that hold a 114-entry issue in check.
   ============================================================ */

html body .difta-sm-panel{
	background:#ededed;
	border-radius:8px;
	overflow:hidden;
	box-shadow:0 4px 14px rgba(0,0,0,.08);
	margin:0 0 34px;
}
html body .difta-sm-panel .difta-sm-contents-ttl{
	background:#4c7d92;
	color:#fff;
	text-align:center;
	font-family:var(--urdu);
	font-size:clamp(17px,2.1vw,28px);
	line-height:1.8;
	padding:13px 18px;
	margin:0;
	border:0;
}

/* The toolbar sits on the panel, above the rows. */
html body .difta-sm-panel .difta-sm-toolbar{
	margin:0;
	padding:12px 22px;
	border-bottom:1px solid #e2e2e2;
	background:#f7f7f7;
}

/* Rows: alternating, exactly as the design shows. Columns are kept, so
   the stripes run down each column rather than across the pair. */
html body ol.difta-sm-articles{
	columns:2;
	column-gap:0;
	margin:0;
	padding:0;
	list-style:none;
}
html body ol.difta-sm-articles > li{
	display:flex;
	align-items:center;
	gap:12px;
	padding:9px 22px;
	border-bottom:1px solid #e2e2e2;
	background:#f2f2f2;
	font-family:var(--urdu);
	font-size:clamp(15px,1.7vw,21px);
	line-height:1.8;
	break-inside:avoid;
	transition:background .12s;
}
html body ol.difta-sm-articles > li:nth-child(even){ background:#e9e9e9; }
html body ol.difta-sm-articles > li:hover{ background:#fff; }

html body .difta-sm-diam{
	width:11px;
	height:11px;
	flex:0 0 auto;
	transform:rotate(45deg);
	background:#c08840;
}
html body ol.difta-sm-articles a,
html body .difta-sm-txt{
	flex:1;
	color:#2a2a2a;
	text-decoration:none;
}
html body ol.difta-sm-articles a:hover{ color:#b07a34; }

/* The reveal button belongs to the panel, not the page. */
html body .difta-sm-panel .difta-sm-more{
	display:block;
	width:100%;
	margin:0;
	border:0;
	border-top:1px solid #e2e2e2;
	border-radius:0;
	background:#f7f7f7;
	padding:12px 20px;
}
html body .difta-sm-panel .difta-sm-more:hover{ background:#fff; }
html body .difta-sm-panel .difta-sm-noresult{ padding:18px 22px; margin:0; }
html body .difta-sm-panel .difta-sm-empty{ padding:22px; margin:0; text-align:center; }

@media (max-width:900px){
	html body ol.difta-sm-articles{ columns:1; }
}
@media (max-width:600px){
	html body ol.difta-sm-articles > li{ padding:9px 14px; }
	html body .difta-sm-panel .difta-sm-toolbar{ padding:10px 14px; }
}

@media print{
	html body .difta-sm-panel{ box-shadow:none; }
	html body ol.difta-sm-articles{ columns:1 !important; }
}

/* A long title wraps to two lines and pushes its column out of step with
   the other, so the stripes stop lining up across the pair. Fixing the row
   height keeps both columns on the same rhythm; the title itself is
   trimmed with an ellipsis and stays readable in full on hover. */
html body ol.difta-sm-articles > li{
	height:46px;
	box-sizing:border-box;
	overflow:hidden;
}
html body ol.difta-sm-articles a,
html body .difta-sm-txt{
	display:block;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

@media (max-width:600px){
	html body ol.difta-sm-articles > li{ height:42px; }
}

/* Print shows every title in full, wrapped, with no fixed height. */
@media print{
	html body ol.difta-sm-articles > li{ height:auto; overflow:visible; }
	html body ol.difta-sm-articles a,
	html body .difta-sm-txt{ white-space:normal; }
}

/* ============================================================
   اشاعتِ خاص list: no underline, and room for the toolbar

   The theme's reset declares "a, a:visited { underline }" and
   loads after the plugin, so an equally specific rule here lost
   and every entry carried a line under it.
   ============================================================ */
html body .difta-ishaat-row a,
html body .difta-ishaat-row a:hover,
html body .difta-ishaat-row a:visited,
html body .difta-ishaat-card-list a,
html body .difta-ishaat-card-list a:hover,
html body .difta-ishaat-card-list a:visited{
	text-decoration:none !important;
}

html body .difta-ishaat-toolbar{
	margin:0;
	padding:12px 22px;
	border-bottom:1px solid #e2e2e2;
	background:#f7f7f7;
}
html body .difta-ishaat-row.is-hidden{ display:none !important; }

html body .difta-ishaat-more{
	display:block;
	width:100%;
	margin:0;
	border:0;
	border-top:1px solid #e2e2e2;
	border-radius:0;
	background:#f7f7f7;
	padding:12px 20px;
	font-family:var(--urdu);
	font-size:18px;
	color:#6b5630;
	cursor:pointer;
}
html body .difta-ishaat-more:hover{ background:#fff; }
html body .difta-ishaat-panel .difta-sm-noresult{ padding:18px 22px; margin:0; }

@media (max-width:600px){
	html body .difta-ishaat-toolbar{ padding:10px 14px; }
}

@media print{
	html body .difta-ishaat-toolbar,
	html body .difta-ishaat-more{ display:none !important; }
	html body .difta-ishaat-row.is-hidden{ display:flex !important; }
}

/* ============================================================
   "مزید مضامین دیکھیں" — make it read as a button

   Faint brown text on a near-white strip the full width of the
   panel reads as an empty box, not a control. On a phone the
   client saw the text vanish and thought the button had gone,
   while the strip still responded to taps. It now carries the
   panel's teal, centred, with a chevron.
   ============================================================ */
html body .difta-sm-more,
html body .difta-ishaat-more{
	display:flex !important;
	align-items:center;
	justify-content:center;
	gap:10px;
	width:auto !important;
	min-width:220px;
	margin:16px auto !important;
	padding:12px 34px !important;
	border:0 !important;
	border-radius:999px !important;
	background:#4c7d92 !important;
	color:#fff !important;
	font-family:var(--urdu);
	font-size:19px !important;
	line-height:1.6;
	cursor:pointer;
	box-shadow:0 2px 8px rgba(76,125,146,.28);
	transition:background .15s, box-shadow .15s;
}
html body .difta-sm-more:hover,
html body .difta-ishaat-more:hover{
	background:#3d6778 !important;
	box-shadow:0 3px 12px rgba(76,125,146,.38);
}
html body .difta-sm-more:active,
html body .difta-ishaat-more:active{
	box-shadow:0 1px 4px rgba(76,125,146,.3);
}

/* A chevron that turns once the whole list is open. */
html body .difta-sm-more::after,
html body .difta-ishaat-more::after{
	content:"";
	width:8px;
	height:8px;
	border-right:2px solid currentColor;
	border-bottom:2px solid currentColor;
	transform:rotate(45deg) translateY(-2px);
	transition:transform .15s;
}
html body .difta-sm-more.is-open::after,
html body .difta-ishaat-more.is-open::after{
	transform:rotate(-135deg) translateY(-2px);
}

@media (max-width:600px){
	html body .difta-sm-more,
	html body .difta-ishaat-more{
		width:calc(100% - 28px) !important;
		min-width:0;
		margin:16px 14px !important;
		font-size:18px !important;
	}
}

/* ============================================================
   مضمون: series → title → writer

   The printed magazine announces the regular feature above the
   headline and credits the writer below it, so a reader knows
   which series they are in before they start. The page follows
   that order.
   ============================================================ */
html body .difta-maz-series{
	text-align:center;
	margin:0 0 14px;
	line-height:1;
}
html body .difta-maz-series-badge{
	display:inline-block;
	padding:7px 22px;
	border-radius:999px;
	background:#4c7d92;
	color:#fff !important;
	font-family:var(--urdu,'Jameel Noori Nastaleeq',sans-serif);
	font-size:19px;
	line-height:1.7;
	text-decoration:none !important;
	box-shadow:0 2px 8px rgba(76,125,146,.26);
	transition:background .15s;
}
html body a.difta-maz-series-badge:hover{ background:#3d6778; }
/* Arabic series names need the Naskh face, at a size that matches it. */
html body .difta-maz-series-badge.ar_writing{
	font-family:'Sakkal Majalla','Noto Naskh Arabic','Amiri',serif !important;
	font-size:21px;
}

html body .difta-maz-writer{
	text-align:center;
	margin:10px 0 0;
	color:#6b5630;
	font-family:var(--urdu,'Jameel Noori Nastaleeq',sans-serif);
	font-size:19px;
}
html body .difta-maz-writer.ar_writing{
	font-family:'Sakkal Majalla','Noto Naskh Arabic','Amiri',serif !important;
	font-size:20px;
}
html body .difta-maz-pen{
	color:#b99a5b;
	margin-left:6px;
	font-size:.9em;
}

/* An Arabic headline must not inherit the site-wide Nastaliq face — its
   words run together and the line loses its spacing. */
html body .difta-maz-heading.ar_writing{
	font-family:'Sakkal Majalla','Noto Naskh Arabic','Amiri',serif !important;
	line-height:1.75;
}
html body .difta-maz-intro.ar_writing{
	font-family:'Sakkal Majalla','Noto Naskh Arabic','Amiri',serif !important;
}

@media (max-width:600px){
	html body .difta-maz-series-badge{ font-size:17px; padding:6px 18px; }
	html body .difta-maz-series-badge.ar_writing{ font-size:19px; }
	html body .difta-maz-writer{ font-size:17px; }
	html body .difta-maz-writer.ar_writing{ font-size:18px; }
}

@media print{
	html body .difta-maz-series-badge{
		background:transparent !important;
		color:#4c7d92 !important;
		box-shadow:none;
		border:1px solid #4c7d92;
	}
}

/* The writer's credit read as a caption rather than a byline — too small
   and too faint beside a large heading. The magazine gives it weight and a
   rule of its own, so it reads as part of the masthead block. */
html body .difta-maz-writer{
	display:inline-flex;
	align-items:center;
	gap:8px;
	margin:14px auto 0;
	padding:5px 18px 6px;
	border-top:1px solid #e0d6c2;
	border-bottom:1px solid #e0d6c2;
	color:#5c4a28;
	font-size:21px;
	font-weight:600;
}
html body .difta-maz-writer.ar_writing{ font-size:22px; }
html body .difta-maz-pen{ color:#b99a5b; margin:0; font-size:.95em; }

@media (max-width:600px){
	html body .difta-maz-writer{ font-size:19px; padding:4px 14px 5px; }
	html body .difta-maz-writer.ar_writing{ font-size:20px; }
}

/* The byline is inline-flex, so it shrinks to its text — a parent rule has
   to centre it; margin auto does not apply to an inline-level box. */
html body .difta-maz-article > .difta-maz-writer{ display:flex; width:max-content; margin-left:auto; margin-right:auto; }

/* ============================================================
   Division tables that are wider than the sheet

   An inheritance table carries a column per heir — this one has
   thirteen — so at reading size it measures about 1300px against
   a printable width near 660px. On screen it scrolls; on paper
   there is nowhere to scroll to, so it was simply cut off at
   both edges. Shrink it to fit instead of clipping it.
   ============================================================ */
@media print{
	/* Let the table settle at its natural width first, then scale the
	   whole block down to the sheet. Scaling keeps every column readable
	   in proportion, where narrowing columns alone would stack the text. */
	html body .difta-body .difta-table-scroll{
		overflow:visible !important;
		width:100% !important;
		display:flex;
		justify-content:center;
	}

	html body .difta-body table{
		font-size:13px !important;
		max-width:100% !important;
	}
	html body .difta-body table td,
	html body .difta-body table th{
		padding:4px 6px !important;
		white-space:nowrap;
		word-break:keep-all;
	}

	/* Numbers carry the meaning here; let them stay on one line and let
	   the heir labels wrap if they must. */
	html body .difta-body table td{ font-variant-numeric:tabular-nums; }
}

/* On screen the same table should not force the reader sideways on a
   phone — it may scroll, but it should start readable. */
@media (max-width:600px){
	html body .difta-body .difta-table-scroll table{
		font-size:15px !important;
	}
	html body .difta-body .difta-table-scroll table td,
	html body .difta-body .difta-table-scroll table th{
		padding:5px 8px !important;
		white-space:nowrap;
	}
}

/* ============================================================
   Print: keep the sheet's own width

   A division table wider than the sheet was not merely clipped —
   it pushed its ancestors wider too, so the letterhead wrapper
   measured 1423px against a 1265px page and the whole block sat
   at −228px. Every edge then printed cut off, not just the table.

   Holding each container to the page and letting the table alone
   shrink keeps the text where it belongs.
   ============================================================ */
@media print{
	html body .difta-wrap,
	html body .difta-container,
	html body table.difta-lh-spacer,
	html body table.difta-lh-spacer > tbody > tr > td,
	html body .difta-section,
	html body .difta-body{
		max-width:100% !important;
		width:100% !important;
		overflow:hidden !important;
	}

	/* table-layout:fixed makes the columns share the width available
	   instead of each demanding its content's natural size. */
	html body .difta-body .difta-table-scroll{
		display:block !important;
		width:100% !important;
		max-width:100% !important;
		overflow:hidden !important;
	}
	html body .difta-body .difta-table-scroll table{
		width:100% !important;
		max-width:100% !important;
		table-layout:fixed !important;
		font-size:11px !important;
	}
	html body .difta-body .difta-table-scroll table td,
	html body .difta-body .difta-table-scroll table th{
		padding:3px 2px !important;
		white-space:normal !important;
		word-break:break-word;
		overflow-wrap:anywhere;
	}
}

/* ============================================================
   شاخ page headings

   The page's own inline styles give these headings a deep-teal
   colour, but the site-wide reset lands after them with
   `color: inherit`, so every heading fell back to plain black
   and read as body text. Restate the colour where it cannot be
   overtaken.
   ============================================================ */
html body .difta-shakh-panel .content-section h2,
html body .difta-shakh-panel .content-section h3,
html body .difta-shuba-panel .content-section h2,
html body .difta-shuba-panel .content-section h3{
	color:#0f4054 !important;
	background:transparent !important;
}

/* Inside the filled mission box the heading stays white — the box is
   already dark, and black on dark is what the client reported. */
html body .difta-shakh-panel .mission-box h2,
html body .difta-shuba-panel .mission-box h2,
html body .difta-shakh-panel .mission-box h3,
html body .difta-shuba-panel .mission-box h3{
	color:#fff !important;
	background:transparent !important;
}