.affan-footer{background:#252525;color:rgba(255,255,255,.72);font-family:Inter,sans-serif;font-size:14.5px;line-height:1.6}
.affan-footer a{color:rgba(255,255,255,.72);text-decoration:none}
.affan-footer a:hover{color:#F47C20}
.affan-footer__inner{max-width:1240px;margin-inline:auto;padding:46px 20px 34px;display:grid;grid-template-columns:1.7fr 1fr 1.15fr 1.5fr;gap:38px}

.affan-f-logo{display:inline-flex;align-items:center;gap:12px;margin-bottom:14px}
.affan-f-logo img{width:44px;height:44px}
.affan-f-word{display:flex;flex-direction:column;line-height:1}
.affan-f-word b{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:24px;letter-spacing:-.02em;color:#fff;text-transform:uppercase}
.affan-f-word small{font-size:9px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:4px}
.affan-f-brand p{margin:0 0 18px;max-width:40ch;line-height:1.62}

.affan-f-social{display:flex;gap:10px}
.affan-f-social a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;transition:background .18s ease,transform .18s ease,color .18s ease}
.affan-f-social a:hover{background:#F47C20;color:#fff;transform:translateY(-3px)}
.affan-f-social .affan-f-ico{width:18px;height:18px}

.affan-footer h4{font-family:'Plus Jakarta Sans',sans-serif;color:#fff;font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin:0 0 15px}

.affan-f-links{list-style:none;margin:0;padding:0}
.affan-f-links li{margin-bottom:9px}
.affan-f-links a{display:inline-block;transition:padding-left .16s ease,color .16s ease}
.affan-f-links a:hover{padding-left:4px}

.affan-f-contactlist{list-style:none;margin:0 0 20px;padding:0}
.affan-f-contactlist li{display:flex;gap:11px;align-items:flex-start;margin-bottom:10px;line-height:1.55}
.affan-f-contactlist .affan-f-ico{width:18px;height:18px;flex:none;margin-top:4px;color:#F47C20}
.affan-f-newshead{margin-top:0}

/* The earlier inline-pill newsletter block was removed here: it duplicated
   the footer newsletter rules further down this file and its !important
   display:flex was beating the newer grid layout. */

.affan-footer__bar{
  max-width:1240px;margin-inline:auto;padding:16px 20px;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:14px;
}
.affan-pays{display:flex;gap:9px;flex-wrap:wrap}
.affan-pay{
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);
  border-radius:6px;padding:8px 13px;font-size:11px;font-weight:800;
  letter-spacing:.06em;color:#fff;text-transform:uppercase;white-space:nowrap;
}

/* ==========================================================================
   Elementor layout columns.
   Elementor writes width:100% onto every child container, which overrides the
   flex-basis and makes side-by-side columns stack. This releases the width so
   the flex-basis in the page data actually governs.
   ========================================================================== */
.affan-col{ width:auto !important; max-width:none !important; }
@media (max-width:767px){
  .affan-col{ flex-basis:100% !important; }
}

/* Images inside a column fill it, keep the 16px card radius and a shadow
   tinted to the ground rather than pure black. */
.affan-col > .elementor-widget-image,
.affan-col > .elementor-widget-image .elementor-widget-container,
.affan-col > .elementor-widget-image figure,
.affan-col > .elementor-widget-image a{ width:100%; margin:0; }
.affan-col > .elementor-widget-image img{
  width:100%;
  display:block;
  border-radius:16px;
  box-shadow:0 14px 44px rgba(37,37,37,.13);
  /* Source images vary from 2:3 portrait to 3:2 landscape. Crop them to one
     landscape ratio so a tall image cannot dwarf the text beside it. */
  aspect-ratio:4 / 3;
  height:auto;
  object-fit:cover;
  object-position:center;
}
@media (max-width:767px){
  .affan-col > .elementor-widget-image img{ aspect-ratio:16 / 10; }
}

/* Columns beside an image start at the top, not vertically centred */
.affan-col{ align-self:flex-start; }

/* ...except a column flagged to fill, where the image runs the full height of
   the row so it balances a tall timeline beside it. */
.affan-col--fill{ align-self:stretch !important; display:flex; flex-direction:column; }
.affan-col--fill > .elementor-widget-image{ flex:1; display:flex; }
.affan-col--fill > .elementor-widget-image .elementor-widget-container,
.affan-col--fill > .elementor-widget-image figure,
.affan-col--fill > .elementor-widget-image a{ flex:1; display:flex; width:100%; }
.affan-col--fill > .elementor-widget-image img{
  aspect-ratio:auto !important;
  height:100% !important;
  min-height:520px;
  max-height:840px;
  object-fit:cover;
}
@media (max-width:1024px){
  .affan-col--fill > .elementor-widget-image img{ min-height:380px; max-height:none; }
}
@media (max-width:767px){
  .affan-col--fill > .elementor-widget-image img{
    aspect-ratio:16 / 10 !important;
    height:auto !important;
    min-height:0;
  }
}

/* Column rhythm: generous gap between a text column and its image */
.affan-col > .elementor-widget:not(:last-child){ margin-bottom:0; }
.affan-col > .elementor-widget-heading + .elementor-widget-text-editor{ margin-top:6px; }
.affan-col > .elementor-widget-text-editor p:last-child{ margin-bottom:0; }

/* Intro paragraph under a page H1 should not run the full container width */
.elementor-widget-text-editor.affan-lede{ max-width:64ch; }

/* ---- Process timeline: orange dot on a connecting rule ---- */
.affan-step{ position:relative; }
.affan-step::before{
  content:""; position:absolute; left:-25px; top:7px;
  width:11px; height:11px; border-radius:50%;
  background:var(--af-accent); z-index:2;
}
.affan-step::after{
  content:""; position:absolute; left:-20px; top:8px; bottom:-8px;
  width:1px; background:var(--af-border); z-index:1;
}
.affan-step:last-child::after{ display:none; }

/* ---- Review cards ---- */
.affan-rv-grid{ display:flex; flex-wrap:wrap; gap:24px; }
.affan-rv{
  flex:1 1 calc(33.333% - 16px); min-width:260px;
  background:#fff; border:1px solid var(--af-border); border-radius:10px;
  padding:28px 26px; display:flex; flex-direction:column; gap:16px;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.affan-rv:hover{ border-color:var(--af-accent); transform:translateY(-4px); box-shadow:0 8px 26px rgba(37,37,37,.09); }
.affan-rv__stars{ display:inline-flex; gap:3px; }
.affan-rv__star{ width:15px; height:15px; fill:#DCDCD6; }
.affan-rv__star.is-on{ fill:#F5A623; }
.affan-rv__body{ font-family:Inter,sans-serif; font-size:15px; line-height:1.75; color:#4A4A4A; margin:0; flex:1; }
.affan-rv__who{ display:flex; align-items:center; gap:12px; }
.affan-rv__av{
  width:42px; height:42px; border-radius:50%; flex:none;
  background:#FDF0E6; color:var(--af-accent-text); display:grid; place-items:center;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:15px;
}
.affan-rv__meta{ display:flex; flex-direction:column; line-height:1.3; }
.affan-rv__meta b{ font-family:'Plus Jakarta Sans',sans-serif; font-size:14.5px; color:var(--af-ink); }
.affan-rv__meta small{ font-size:12.5px; color:var(--af-muted); }
.affan-rv__verified{ margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-family:Inter,sans-serif; font-size:11.5px; font-weight:800; color:#1F8A52; }
.affan-rv__verified svg{ width:13px; height:13px; }
.affan-rv-empty{ background:#fff; border:1px dashed var(--af-border); border-radius:10px; padding:44px 28px; text-align:center; }
.affan-rv-empty p{ font-family:Inter,sans-serif; font-size:15.5px; color:var(--af-muted); max-width:56ch; margin:0 auto 20px; }
.affan-rv-empty__btn{ display:inline-block; background:var(--af-accent); color:var(--af-ink) !important; font-family:Inter,sans-serif; font-weight:700; font-size:15px; padding:14px 30px; border-radius:6px; text-decoration:none; }
.affan-rv-empty__btn:hover{ background:#e06e15; }
@media (max-width:900px){ .affan-rv{ flex:1 1 100%; } }

/* ---- CTA band: rounded orange panel with pill buttons ---- */
.affan-cta{ border-radius:16px !important; }
.affan-cta .elementor-button{ border-radius:999px !important; padding:18px 38px !important; font-size:16px !important; }

/* Step blocks in the About process timeline sit flush, not centred */
.affan-col .elementor-widget-heading + .elementor-widget-text-editor{ margin-top:2px; }

@media (max-width:1024px){
  .affan-footer__inner{grid-template-columns:1fr 1fr;gap:36px;padding:52px 20px 40px}
}
@media (max-width:640px){
  .affan-footer__inner{grid-template-columns:1fr;gap:32px;padding:44px 16px 34px}
  .affan-footer__bar{flex-direction:column;text-align:center;padding:20px 16px}
  .affan-pays{justify-content:center}
}


/* ==========================================================================
   Trust cards: fill the row edge to edge and align with the section heading.
   affan-cols.css previously forced flex:0 1 22% on these, which left the row
   at 88% and, being centred, indented it away from the heading.
   ========================================================================== */
.affan-trust-row{ justify-content:flex-start !important; align-items:stretch !important; }
.affan-trust-card{
  width:auto !important; max-width:none !important;
  flex:1 1 0 !important; min-width:224px;
  padding:32px 28px 34px !important;
  border-radius:14px !important;
  border-color:#EAEAE6 !important;
  box-shadow:0 1px 2px rgba(37,37,37,.03);
}
@media (min-width:768px) and (max-width:1024px){
  .affan-trust-card{ flex:1 1 calc(50% - 12px) !important; padding:26px 24px 28px !important; }
}
@media (max-width:767px){
  .affan-trust-card{ flex:1 1 100% !important; padding:26px 22px 28px !important; }
}
.affan-trust-card:hover{
  border-color:var(--af-accent) !important;
  transform:translateY(-5px);
  box-shadow:0 14px 34px rgba(37,37,37,.10);
}
.affan-trust-card .elementor-icon{ width:54px; height:54px; border-radius:14px !important; display:grid !important; place-items:center; }
.affan-trust-card .elementor-icon-box-icon{ margin-bottom:22px !important; }
.affan-trust-card .elementor-icon-box-title{ letter-spacing:-.01em; }
.affan-trust-card .elementor-icon-box-description{ line-height:1.72 !important; }

/* --- Section header 'See all' link: orange rule under the label --- */
.affan-seeall{
  display:inline-block;
  color:#252525 !important;
  text-decoration:none !important;
  font-family:Inter,sans-serif; font-weight:700; font-size:16px;
  padding-bottom:6px;
  border-bottom:2px solid #F47C20;
  transition:color .18s ease, border-color .18s ease, gap .18s ease;
}
.affan-seeall:hover{ color:#B85A0E !important; border-bottom-color:#B85A0E; }
.affan-seeall span{ display:inline-block; transition:transform .18s ease; margin-left:4px; }
.affan-seeall:hover span{ transform:translateX(4px); }
.affan-seeall-col p{ margin:0; }
@media (max-width:767px){
  .affan-seeall-col{ align-items:flex-start !important; }
  .affan-seeall-col .elementor-widget-text-editor{ text-align:left !important; }
}

/* ==========================================================================
   Section header rhythm. Elementor's global 20px widget spacing stacks on
   top of the container flex gap, which double-spaced heading -> subtitle ->
   grid. Gap is now 0 and the spacing is set explicitly here.
   ========================================================================== */
.affan-sec > .e-con-inner > .elementor-widget,
.affan-sec > .elementor-widget{ margin-bottom:0 !important; }
.affan-sec .elementor-widget-heading{ margin-bottom:0 !important; }
.affan-sec .elementor-widget-heading + .elementor-widget-text-editor{ margin-top:10px !important; }
.affan-sec .elementor-widget-text-editor p{ margin:0 !important; }
/* space before the card grid or product grid */
.affan-sec > .e-con-inner > .elementor-widget-text-editor + .e-con,
.affan-sec > .e-con-inner > .elementor-widget-text-editor + .elementor-widget-shortcode,
.affan-sec > .e-con-inner > .elementor-widget-heading + .e-con,
.affan-sec > .e-con-inner > .e-con + .elementor-widget-shortcode{ margin-top:34px !important; }
/* the split header block (heading left, See all right) */
.affan-sec .affan-col .elementor-widget-heading + .elementor-widget-text-editor{ margin-top:8px !important; }
.affan-sec .affan-col > .elementor-widget{ margin-bottom:0 !important; }

/* ==========================================================================
   Footer newsletter
   The same WPForms form (ID 71) is embedded in the home page band and here.
   affan-newsletter.css only scopes to .affan-nl, so this footer instance was
   rendering with WPForms' raw defaults. These rules are the footer's copy.
   ========================================================================== */

.affan-f-news .wpforms-container,
.affan-f-news .wpforms-container-full{
	margin:0 !important;
	padding:0 !important;
}
.affan-f-news .wpforms-field{
	padding:0 !important;
	margin:0 !important;
}
.affan-f-news .wpforms-head-container,
.affan-f-news .wpforms-title,
.affan-f-news .wpforms-description,
.affan-f-news .wpforms-field-label.wpforms-label-hide,
.affan-f-news legend.wpforms-label-hide,
.affan-f-news .wpforms-required-label{
	display:none !important;
}

.affan-f-news .wpforms-form{
	display:grid;
	grid-template-columns:minmax(0,1fr) auto;
	grid-template-areas:"fields submit";
	align-items:start;
	column-gap:10px;
}
.affan-f-news .wpforms-field-container{
	grid-area:fields;
	display:flex;
	flex-direction:column;
	gap:10px;
}
.affan-f-news .wpforms-submit-container{
	grid-area:submit;
	padding:0 !important;
	margin:0 !important;
}

.affan-f-news .wpforms-field-email input[type=email]{
	box-sizing:border-box !important;
	width:100% !important;
	height:50px !important;
	min-height:50px !important;
	max-height:50px !important;
	padding:0 20px !important;
	margin:0 !important;
	border:1px solid rgba(255,255,255,.16) !important;
	border-radius:999px !important;
	background:rgba(255,255,255,.06) !important;
	color:#fff !important;
	font-family:"Inter",sans-serif !important;
	font-size:.92rem !important;
	line-height:normal !important;
	box-shadow:none !important;
}
.affan-f-news .wpforms-field-email input[type=email]::placeholder{
	color:rgba(255,255,255,.42) !important;
	opacity:1;
}
.affan-f-news .wpforms-field-email input[type=email]:focus{
	border-color:#F47C20 !important;
	background:rgba(255,255,255,.10) !important;
	outline:none !important;
}

.affan-f-news button.wpforms-submit{
	box-sizing:border-box !important;
	height:50px !important;
	min-height:50px !important;
	max-height:50px !important;
	padding:0 26px !important;
	margin:0 !important;
	border:0 !important;
	border-radius:999px !important;
	background:#F47C20 !important;
	color:#fff !important;
	font-family:"Inter",sans-serif !important;
	font-size:.9rem !important;
	font-weight:700 !important;
	line-height:1 !important;
	white-space:nowrap;
	cursor:pointer;
	transition:background-color .18s ease;
}
.affan-f-news button.wpforms-submit:hover,
.affan-f-news button.wpforms-submit:focus-visible{
	background:#dd6a12 !important;
}

/* Consent line */
.affan-f-news .wpforms-field-checkbox fieldset{ border:0 !important; padding:0 !important; margin:0 !important; }
.affan-f-news .wpforms-field-checkbox ul{ margin:0 !important; padding:0 !important; list-style:none !important; }
.affan-f-news .wpforms-field-checkbox li{
	display:flex !important;
	align-items:flex-start;
	gap:8px;
	margin:0 !important;
}
.affan-f-news .wpforms-field-checkbox input[type=checkbox]{
	-webkit-appearance:none !important;
	appearance:none !important;
	box-sizing:border-box !important;
	position:relative;
	flex:0 0 auto !important;
	width:16px !important;
	height:16px !important;
	min-width:16px !important;
	max-width:16px !important;
	min-height:16px !important;
	max-height:16px !important;
	margin:1px 0 0 !important;
	padding:0 !important;
	border:1px solid rgba(255,255,255,.3) !important;
	border-radius:4px !important;
	background:rgba(255,255,255,.06) !important;
	cursor:pointer;
}
.affan-f-news .wpforms-field-checkbox input[type=checkbox]::before{ content:none !important; }
.affan-f-news .wpforms-field-checkbox input[type=checkbox]:checked{
	background:#F47C20 !important;
	border-color:#F47C20 !important;
}
.affan-f-news .wpforms-field-checkbox input[type=checkbox]:checked::after{
	content:"" !important;
	position:absolute;
	left:4.5px;
	top:1px;
	width:4px;
	height:9px;
	border:solid #252525;
	border-width:0 2px 2px 0;
	transform:rotate(43deg);
}
.affan-f-news .wpforms-field-checkbox label,
.affan-f-news .wpforms-field-checkbox .wpforms-field-label-inline{
	margin:0 !important;
	padding:0 !important;
	font-family:"Inter",sans-serif !important;
	font-size:.76rem !important;
	font-weight:400 !important;
	line-height:1.5 !important;
	color:rgba(255,255,255,.48) !important;
	cursor:pointer;
}

.affan-f-news .wpforms-error,
.affan-f-news label.wpforms-error,
.affan-f-news em.wpforms-error{
	display:block;
	color:#FFB4A2 !important;
	font-size:.76rem !important;
	font-style:normal !important;
	margin-top:5px !important;
}
.affan-f-news .wpforms-confirmation-container-full{
	margin:0 !important;
	padding:16px 18px !important;
	border:1px solid rgba(244,124,32,.4) !important;
	border-radius:12px !important;
	background:rgba(244,124,32,.12) !important;
}
.affan-f-news .wpforms-confirmation-container-full p{
	margin:0 !important;
	color:rgba(255,255,255,.9) !important;
	font-family:"Inter",sans-serif;
	font-size:.85rem;
	line-height:1.6;
}

@media (max-width:520px){
	.affan-f-news .wpforms-form{
		grid-template-columns:minmax(0,1fr);
		grid-template-areas:"fields" "submit";
		row-gap:10px;
	}
	.affan-f-news button.wpforms-submit{ width:100%; }
}

/* ==========================================================================
   Trust card rows - equal heights
   The row already carries --align-items:stretch from Elementor, but the card
   containers each get --flex-grow/--flex-shrink written onto .e-con, and the
   resulting align-self resolution left them sizing to their own content, so a
   three-line card sat shorter than a four-line one. Stretch is asserted on the
   card itself, which is the property that actually governs it.
   ========================================================================== */
.affan-trust-card{
	align-self:stretch !important;
	height:auto !important;
}
.affan-trust-row{
	align-items:stretch !important;
}

/* Six-card rows go three across rather than trying to fit six on one line and
   wrapping into an orphan. */
.affan-trust-row--3 > .affan-trust-card{
	flex:0 1 calc(33.333% - 16px) !important;
}
@media (max-width:1024px){
	.affan-trust-row--3 > .affan-trust-card{ flex:0 1 calc(50% - 12px) !important; }
}
@media (max-width:767px){
	.affan-trust-row--3 > .affan-trust-card{ flex:1 1 100% !important; }
}

/* ==========================================================================
   Hero trust strip
   Elementor's icon-box in "left" position aligns the icon to the top of the
   content block rather than to the text, which reads as misaligned on a
   single-line label. The row is re-declared as a centred flex pair and the
   glyph's line-height is zeroed so it sits on its own optical centre instead
   of a text baseline.
   ========================================================================== */
.affan-hero-trust .elementor-icon-box-wrapper{
	display:flex !important;
	align-items:center !important;
	justify-content:flex-start !important;
	gap:11px;
	text-align:left !important;
}
.affan-hero-trust .elementor-icon-box-icon{
	flex:none !important;
	margin:0 !important;
	display:flex !important;
	align-items:center;
	line-height:0;
}
.affan-hero-trust .elementor-icon{
	display:block;
	line-height:0;
}
.affan-hero-trust .elementor-icon svg,
.affan-hero-trust .elementor-icon i{
	width:19px;
	height:19px;
	font-size:19px;
	display:block;
	fill:currentColor;
}
.affan-hero-trust .elementor-icon-box-content{
	text-align:left !important;
	min-width:0;
}
.affan-hero-trust .elementor-icon-box-title{
	margin:0 !important;
	line-height:1.3 !important;
	white-space:nowrap;
}
.affan-hero-trust .elementor-icon-box-description{ display:none; }

@media (max-width:600px){
	.affan-hero-trust .elementor-icon-box-title{ white-space:normal; }
}