
.ispro-section{
	--ispro-bg:#031427;
	--ispro-orange:#ff6b00;
	--ispro-card:#071d36;
	--ispro-muted:#d5dce6;
	position:relative;
	overflow:hidden;
	padding:78px 20px 94px;
	background:
		radial-gradient(circle at 14% 27%,rgba(19,52,89,.24),transparent 28%),
		radial-gradient(circle at 83% 75%,rgba(18,48,81,.18),transparent 32%),
		linear-gradient(180deg,#04182d,var(--ispro-bg));
	color:#fff;
	font-family:"Tajawal","Cairo",Arial,sans-serif;
	isolation:isolate;
}
.ispro-section *{box-sizing:border-box}
.ispro-pattern{
	position:absolute;
	inset:0;
	z-index:-1;
	opacity:.34;
	background-image:
		radial-gradient(circle,rgba(255,107,0,.45) 1px,transparent 1.6px),
		linear-gradient(30deg,transparent 48.7%,rgba(255,107,0,.08) 49.1%,transparent 49.6%),
		linear-gradient(-30deg,transparent 48.7%,rgba(255,107,0,.07) 49.1%,transparent 49.6%);
	background-size:17px 17px,145px 145px,145px 145px;
	mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.55) 14%,transparent 36%,transparent 66%,rgba(0,0,0,.6) 84%,#000 100%);
}
.ispro-container{width:min(1180px,100%);margin:auto;position:relative;z-index:2}
.ispro-header{text-align:center;max-width:830px;margin:0 auto 58px}
.ispro-kicker{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:16px}
.ispro-kicker span{display:block;width:190px;height:1px;background:linear-gradient(90deg,transparent,var(--ispro-orange))}
.ispro-kicker span:last-child{transform:scaleX(-1)}
.ispro-kicker b{display:grid;place-items:center;min-width:48px;height:34px;padding:0 13px;border:1px solid var(--ispro-orange);border-radius:12px;color:var(--ispro-orange);font-size:19px;line-height:1}
.ispro-header h2{margin:0;font-size:46px;line-height:1.3;font-weight:800}
.ispro-header h2 span,.ispro-header h2 strong{display:block}
.ispro-header h2 strong{color:var(--ispro-orange)}
.ispro-header p{margin:19px auto 0;color:var(--ispro-muted);font-size:15px;line-height:1.9;max-width:760px}
.ispro-timeline{position:relative;display:grid;gap:26px;padding:8px 0 4px}
.ispro-line{position:absolute;top:0;bottom:0;left:50%;width:2px;background:rgba(255,107,0,.26);transform:translateX(-50%);overflow:hidden}
.ispro-line i{display:block;width:100%;height:0;background:linear-gradient(180deg,#ff8c22,var(--ispro-orange));box-shadow:0 0 16px rgba(255,107,0,.65);transition:height .12s linear}
.ispro-card{position:relative;width:calc(50% - 58px)}
.ispro-left{justify-self:start}
.ispro-right{justify-self:end}
.ispro-node{position:absolute;top:50%;width:23px;height:23px;border:3px solid var(--ispro-orange);border-radius:50%;background:var(--ispro-bg);box-shadow:0 0 0 5px rgba(255,107,0,.1),0 0 20px rgba(255,107,0,.26);transform:translateY(-50%)}
.ispro-left .ispro-node{right:-70px}
.ispro-right .ispro-node{left:-70px}
.ispro-card-inner{
	position:relative;
	display:grid;
	grid-template-columns:auto auto 1fr;
	align-items:center;
	gap:22px;
	min-height:130px;
	padding:25px 27px;
	background:linear-gradient(135deg,rgba(11,34,61,.96),rgba(4,21,40,.98));
	border:1px solid rgba(167,190,216,.38);
	border-radius:14px;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 18px 45px rgba(0,0,0,.24);
	transition:transform .38s cubic-bezier(.2,.8,.2,1),border-color .38s ease,box-shadow .38s ease;
}
.ispro-card-inner:after{
	content:"";
	position:absolute;
	top:50%;
	width:17px;height:17px;
	background:#071c34;
	border-top:1px solid rgba(167,190,216,.38);
	border-right:1px solid rgba(167,190,216,.38);
	transform:translateY(-50%) rotate(45deg);
}
.ispro-left .ispro-card-inner:after{right:-9px}
.ispro-right .ispro-card-inner:after{left:-9px;transform:translateY(-50%) rotate(225deg)}
.ispro-card:hover .ispro-card-inner{
	transform:translateY(-7px);
	border-color:rgba(255,107,0,.72);
	box-shadow:0 22px 52px rgba(0,0,0,.35),0 0 28px rgba(255,107,0,.08);
}
.ispro-number{color:var(--ispro-orange);font-size:29px;font-weight:800;line-height:1}
.ispro-icon{width:68px;height:68px;border:2px solid var(--ispro-orange);border-radius:12px;display:grid;place-items:center;color:var(--ispro-orange);flex:0 0 68px}
.ispro-icon svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ispro-card-copy h3{margin:0;color:#fff;font-size:23px;line-height:1.3}
.ispro-card-copy h4{margin:8px 0 0;color:#fff;font-size:15px;line-height:1.55;font-weight:700}
.ispro-card-copy p{margin:8px 0 0;color:var(--ispro-muted);font-size:13px;line-height:1.7}
.ispro-cta{text-align:center;margin-top:38px}
.ispro-cta a{display:inline-flex;align-items:center;justify-content:center;gap:15px;min-width:170px;padding:14px 26px;border-radius:5px;background:linear-gradient(90deg,#ff8b1d,var(--ispro-orange));color:#fff!important;text-decoration:none!important;font-weight:800;font-size:16px;box-shadow:0 16px 38px rgba(255,107,0,.22);transition:transform .35s ease,box-shadow .35s ease}
.ispro-cta a:hover{transform:translateY(-4px);box-shadow:0 22px 48px rgba(255,107,0,.34)}
.ispro-cta b{font-size:23px;line-height:1;font-weight:400}
.ispro-brush{position:absolute;left:-25px;bottom:-18px;width:380px;height:150px;z-index:1;background:linear-gradient(164deg,transparent 0 19%,var(--ispro-orange) 20% 31%,transparent 32% 39%,var(--ispro-orange) 40% 58%,transparent 59% 68%,var(--ispro-orange) 69% 82%,transparent 83%);transform:skewX(-7deg);filter:drop-shadow(0 12px 18px rgba(0,0,0,.22))}
.ispro-reveal{opacity:1;transform:none}
@keyframes isproSafeReveal{from{opacity:.01;transform:translateY(24px)}to{opacity:1;transform:none}}
.ispro-animate .ispro-reveal{opacity:1;transform:none;animation:isproSafeReveal .8s cubic-bezier(.2,.8,.2,1) both}
.ispro-animate .ispro-reveal.ispro-visible{opacity:1;transform:none}

@media(max-width:900px){
	.ispro-header h2{font-size:38px}
	.ispro-line{left:28px;transform:none}
	.ispro-card{width:calc(100% - 72px);justify-self:end!important}
	.ispro-left .ispro-node,.ispro-right .ispro-node{left:-55px;right:auto}
	.ispro-left .ispro-card-inner:after,.ispro-right .ispro-card-inner:after{left:-9px;right:auto;transform:translateY(-50%) rotate(225deg)}
	.ispro-kicker span{width:120px}
}
@media(max-width:600px){
	.ispro-section{padding:60px 14px 78px}
	.ispro-header{margin-bottom:42px}
	.ispro-header h2{font-size:31px}
	.ispro-header p{font-size:14px}
	.ispro-kicker span{width:70px}
	.ispro-line{left:12px}
	.ispro-card{width:calc(100% - 38px)}
	.ispro-left .ispro-node,.ispro-right .ispro-node{left:-38px;width:19px;height:19px}
	.ispro-card-inner{grid-template-columns:auto 1fr;gap:15px;padding:21px 18px;min-height:0}
	.ispro-number{grid-row:1 / span 2;font-size:23px}
	.ispro-icon{width:54px;height:54px}
	.ispro-icon svg{width:34px;height:34px}
	.ispro-card-copy{grid-column:2}
	.ispro-card-copy h3{font-size:20px}
	.ispro-card-copy h4{font-size:14px}
	.ispro-card-copy p{font-size:12px}
	.ispro-brush{width:250px;height:110px}
}
@media(prefers-reduced-motion:reduce){
	.ispro-reveal,.ispro-card-inner,.ispro-cta a{transition:none!important}
}

.ispro-brush.ispro-custom-shape{
	background:none!important;
	filter:none;
	transform:none;
}
.ispro-brush.ispro-custom-shape img{
	display:block;
	width:100%;
	height:100%;
	object-fit:contain;
	object-position:center;
}
