/* ==========================================================================
   AFFANECOM - closing CTA panel

   Used on the home page (heading + shortcode line + one button) and on About
   (heading + text + a row container holding two buttons). The descendant
   selectors below are deliberately child-scoped: an unscoped
   ".affan-cta .elementor-widget { width:100% }" reached inside the About
   button row and stretched both buttons onto their own lines.
   ========================================================================== */

.affan-cta.e-con{
	display:flex !important;
	flex-direction:column !important;
	align-items:center !important;
	justify-content:center !important;
	gap:0 !important;
	background-color:#F47C20 !important;
	border-radius:20px !important;
	padding:clamp(38px,4.2vw,58px) clamp(24px,4vw,48px) !important;
	text-align:center;
	overflow:hidden;
}

/* Direct children only. */
.affan-cta > .elementor-widget{
	margin-bottom:0 !important;
	width:100% !important;
}

.affan-cta .elementor-widget-heading .elementor-heading-title{
	color:#fff !important;
	margin:0 auto !important;
	/* No max-width: a ch cap forced this headline onto two lines. */
	max-width:none !important;
	text-wrap:balance;
}

.affan-cta > .elementor-widget-shortcode{ margin-top:14px !important; }
.affan-cta > .elementor-widget-text-editor{ margin-top:14px !important; }

.affan-cta__line,
.affan-cta .elementor-widget-text-editor p{
	margin:0 auto !important;
	max-width:56ch;
	font-family:"Inter",sans-serif;
	font-size:17px;
	line-height:1.65;
	color:rgba(255,255,255,.92) !important;
	text-align:center;
}

/* Single button (home). */
.affan-cta > .elementor-widget-button{ margin-top:26px !important; }

/* Button row (About). Elementor's width:100% on the child container is
   released so the row hugs its buttons and stays centred. */
.affan-cta > .e-con{
	width:auto !important;
	max-width:none !important;
	margin:26px 0 0 !important;
	padding:0 !important;
	gap:14px !important;
}
.affan-cta > .e-con .elementor-widget{
	width:auto !important;
	margin:0 !important;
}

.affan-cta .elementor-widget-button .elementor-button{
	border-radius:999px !important;
	box-shadow:0 10px 26px rgba(37,37,37,.22);
	transition:background-color .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.affan-cta .elementor-widget-button .elementor-button:hover,
.affan-cta .elementor-widget-button .elementor-button:focus-visible{
	background-color:#111111 !important;
	border-color:#111111 !important;
	color:#fff !important;
	transform:translateY(-1px);
	box-shadow:0 14px 30px rgba(37,37,37,.30);
}
.affan-cta .elementor-widget-button .elementor-button:focus-visible{
	outline:3px solid #fff;
	outline-offset:3px;
}

@media (max-width:640px){
	.affan-cta__line,
	.affan-cta .elementor-widget-text-editor p{ font-size:15.5px; }
	.affan-cta > .e-con{ width:100% !important; flex-direction:column !important; }
	.affan-cta > .e-con .elementor-widget{ width:100% !important; }
}

@media (prefers-reduced-motion:reduce){
	.affan-cta .elementor-widget-button .elementor-button{ transition:none; }
	.affan-cta .elementor-widget-button .elementor-button:hover{ transform:none; }
}

/* Button alignment.
   Elementor's button "align" control emits no CSS when it resolves to the
   default, so the wrapper was falling back to Astra's left alignment and the
   CTA button sat off to one side under centred text. Centred explicitly. */
.affan-cta > .elementor-widget-button,
.affan-cta > .elementor-widget-button .elementor-widget-container,
.affan-cta > .elementor-widget-button .elementor-button-wrapper{
	text-align:center !important;
}
.affan-cta > .e-con{
	justify-content:center !important;
	align-items:center !important;
}