.psw-wrapper {
	width: 100%;
}

.psw-steps {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 30px;
	width: 100%;
}

.psw-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	flex: 1 1 0;
	min-width: 140px;
}

.psw-circle {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background-color: #1c1c28;
	margin-bottom: 20px;
	flex-shrink: 0;
}

.psw-circle-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ec1e79;
	font-weight: 700;
	line-height: 1;
}

.psw-circle-inner svg,
.psw-circle-inner i {
	width: 1em;
	height: 1em;
	font-size: 24px;
}

.psw-title {
	margin: 0;
	color: #ffffff;
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 10px;
}

.psw-description {
	margin: 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: 14px;
	line-height: 1.6;
	max-width: 260px;
}

/* Connector line — sits behind the circles, spans from the middle of one
   circle to the middle of the next. Drawn on every step except the last. */
.psw-connector-solid .psw-step:not(:last-child)::after,
.psw-connector-dashed .psw-step:not(:last-child)::after,
.psw-connector-dotted .psw-step:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 40px; /* half of default circle size — Elementor JS updates this if size changes */
	left: 50%;
	width: 100%;
	border-top-width: 1px;
	border-top-color: rgba(255, 255, 255, 0.25);
	z-index: 1;
}

.psw-connector-solid .psw-step:not(:last-child)::after {
	border-top-style: solid;
}

.psw-connector-dashed .psw-step:not(:last-child)::after {
	border-top-style: dashed;
}

.psw-connector-dotted .psw-step:not(:last-child)::after {
	border-top-style: dotted;
}

.psw-connector-none .psw-step::after {
	display: none;
}

/* Vertical / column layout: hide the horizontal connector automatically,
   since a horizontal line doesn't make sense stacked vertically. */
.psw-steps[style*='column'] .psw-step:not(:last-child)::after {
	display: none;
}

@media (max-width: 767px) {
	.psw-steps {
		flex-direction: column;
	}
	.psw-step:not(:last-child)::after {
		display: none;
	}
}

/* =========================================================
 * HOVER EFFECTS — fully customizable from Elementor Style tab
 * ======================================================= */
.psw-wrapper {
	--psw-scale-amount: 1.15;
	--psw-lift-distance: 10px;
	--psw-rotate-degrees: 15deg;
	--psw-shake-intensity: 6px;
	--psw-transition-duration: 300ms;
	--psw-transition-easing: ease;
	--psw-glow-color: rgba(236, 30, 121, 0.6);
	--psw-glow-size: 20px;
}

.psw-step,
.psw-circle,
.psw-circle-inner,
.psw-title,
.psw-description {
	transition-duration: var(--psw-transition-duration);
	transition-timing-function: var(--psw-transition-easing);
}

.psw-step {
	transition-property: background-color, border-radius, box-shadow, transform;
	will-change: transform;
}

.psw-circle {
	transition-property: background-color, border-color, box-shadow, transform;
	will-change: transform;
}

.psw-circle-inner {
	transition-property: color;
}

.psw-title {
	transition-property: color;
}

.psw-description {
	transition-property: color;
}

/* ---- Scale ---- */
.psw-hover-circle.psw-anim-scale-up .psw-step:hover .psw-circle,
.psw-hover-circle.psw-anim-scale-glow .psw-step:hover .psw-circle {
	transform: scale(var(--psw-scale-amount));
}
.psw-hover-circle.psw-anim-scale-down .psw-step:hover .psw-circle {
	transform: scale(calc(2 - var(--psw-scale-amount)));
}
.psw-hover-step.psw-anim-scale-up .psw-step:hover,
.psw-hover-step.psw-anim-scale-glow .psw-step:hover {
	transform: scale(var(--psw-scale-amount));
}
.psw-hover-step.psw-anim-scale-down .psw-step:hover {
	transform: scale(calc(2 - var(--psw-scale-amount)));
}

/* ---- Lift ---- */
.psw-hover-circle.psw-anim-lift .psw-step:hover .psw-circle,
.psw-hover-circle.psw-anim-lift-glow .psw-step:hover .psw-circle {
	transform: translateY(calc(-1 * var(--psw-lift-distance)));
}
.psw-hover-step.psw-anim-lift .psw-step:hover,
.psw-hover-step.psw-anim-lift-glow .psw-step:hover {
	transform: translateY(calc(-1 * var(--psw-lift-distance)));
}

/* ---- Rotate ---- */
.psw-hover-circle.psw-anim-rotate .psw-step:hover .psw-circle {
	transform: rotate(var(--psw-rotate-degrees));
}
.psw-hover-step.psw-anim-rotate .psw-step:hover {
	transform: rotate(var(--psw-rotate-degrees));
}

/* ---- Pulse ---- */
.psw-hover-circle.psw-anim-pulse .psw-step:hover .psw-circle {
	animation: psw-pulse var(--psw-transition-duration) ease-in-out infinite;
}
.psw-hover-step.psw-anim-pulse .psw-step:hover {
	animation: psw-pulse var(--psw-transition-duration) ease-in-out infinite;
}
@keyframes psw-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(var(--psw-scale-amount)); }
}

/* ---- Bounce ---- */
.psw-hover-circle.psw-anim-bounce .psw-step:hover .psw-circle {
	animation: psw-bounce var(--psw-transition-duration) ease-in-out;
}
.psw-hover-step.psw-anim-bounce .psw-step:hover {
	animation: psw-bounce var(--psw-transition-duration) ease-in-out;
}
@keyframes psw-bounce {
	0%, 100% { transform: translateY(0); }
	30% { transform: translateY(calc(-1 * var(--psw-lift-distance))); }
	60% { transform: translateY(calc(-0.4 * var(--psw-lift-distance))); }
}

/* ---- Shake ---- */
.psw-hover-circle.psw-anim-shake .psw-step:hover .psw-circle {
	animation: psw-shake var(--psw-transition-duration) ease-in-out;
}
.psw-hover-step.psw-anim-shake .psw-step:hover {
	animation: psw-shake var(--psw-transition-duration) ease-in-out;
}
@keyframes psw-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(calc(-1 * var(--psw-shake-intensity))); }
	40% { transform: translateX(var(--psw-shake-intensity)); }
	60% { transform: translateX(calc(-0.6 * var(--psw-shake-intensity))); }
	80% { transform: translateX(calc(0.6 * var(--psw-shake-intensity))); }
}

/* ---- Glow ---- */
.psw-anim-glow .psw-step:hover .psw-circle,
.psw-anim-scale-glow .psw-step:hover .psw-circle,
.psw-anim-lift-glow .psw-step:hover .psw-circle {
	box-shadow: 0 0 var(--psw-glow-size) var(--psw-glow-color);
}

/* Respect users who've asked their OS to reduce motion */
@media (prefers-reduced-motion: reduce) {
	.psw-step,
	.psw-circle,
	.psw-circle-inner,
	.psw-title,
	.psw-description {
		transition: none !important;
		animation: none !important;
	}
}