/* =========================================================
   ROK CORE
   WHY THIS WORKS PROCESS WIDGET
   ========================================================= */

/* ---------------------------------------------------------
   ROOT
   --------------------------------------------------------- */

.rok-why-this-works {
	--rok-accent: #FE7D02;
	--rok-dark: #101820;
	--rok-text: #303840;
	--rok-white: #ffffff;

	position: relative;
	width: 100%;

	overflow: hidden;
	color: var(--rok-text);
}



/* ---------------------------------------------------------
   MAIN CONTAINER
   --------------------------------------------------------- */

.rok-why-this-inner {
	position: relative;

	z-index: 2;

	width: 100%;
	max-width: 1340px;

	margin-left: auto;
	margin-right: auto;

	padding: 45px 15px 50px;

	box-sizing: border-box;
}


/* ---------------------------------------------------------
   EYEBROW
   --------------------------------------------------------- */

.rok-why-this-eyebrow {
	margin: 0 0 2px;

	text-align: center;

	color: var(--rok-accent);

	font-size: 16px;
	font-weight: 900;
	line-height: 1.4;
	letter-spacing: 1px;
	text-transform: uppercase;
	display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}



.rok-why-this-eyebrow::before, .rok-why-this-eyebrow::after {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  background: var( --e-global-color-primary );
  flex: 0 0 auto;

}
/* ---------------------------------------------------------
   MAIN HEADING
   --------------------------------------------------------- */

.rok-why-this-heading {
	width: 100%;
	max-width: 900px;

	margin: 0 auto 0px;

	padding: 0;

	text-align: center;
	font-size: 50px;
	font-weight: 700;
	line-height: 1.12;
}

.rok-why-this-heading span{
	
	color: var(--rok-accent);
}
/* ---------------------------------------------------------
   MAIN DESCRIPTION
   --------------------------------------------------------- */

.rok-why-this-description {
	width: 100%;
	max-width: 900px;

	margin: 0 auto;

	padding: 0;

	text-align: center;

	font-size: 16px;
	font-weight: 400;

	line-height: 24px;
}

.rok-why-this-description p {
	margin: 0;
}

.rok-why-this-description strong {
	font-weight: 700;
}


/* ---------------------------------------------------------
   PROCESS WRAPPER
   --------------------------------------------------------- */

.rok-why-this-process {
	position: relative;

	display: grid;

	grid-template-columns: repeat(4, minmax(0, 1fr));

	gap: 24px;

	width: 100%;

	margin-top: 25px;
}


/* ---------------------------------------------------------
   CONNECTING LINE
   --------------------------------------------------------- */

.rok-why-this-line {
	position: absolute;

	top: 29px;

	left: 10%;
	right: 10%;

	width: auto;
	height: 2px;

	margin: 0;

	background: var(--rok-accent);

	transform: scaleX(0);

	transform-origin: left center;

	transition:
		transform 1.5s cubic-bezier(0.65, 0, 0.35, 1);

	z-index: 1;

	pointer-events: none;
}


/*
 * Activated connector
 */

.rok-why-this-animated.is-active .rok-why-this-line {
	transform: scaleX(1);
}


/* ---------------------------------------------------------
   PROCESS STEP
   --------------------------------------------------------- */

.rok-why-this-step {
	position: relative;

	z-index: 2;

	min-width: 0;

	min-height: 250px;

	padding: 0;

	text-align: center;

	opacity: 0;

	transform: translateY(30px);

	transition:
		opacity var(--rok-animation-duration, 700ms) ease,
		transform var(--rok-animation-duration, 700ms) ease;

	box-sizing: border-box;
}


/*
 * Static version
 */

.rok-why-this-static .rok-why-this-step {
	opacity: 1;

	transform: translateY(0);
}


/*
 * Animated step
 */

.rok-why-this-step.is-visible {
	opacity: 1;

	transform: translateY(0);
}


/* ---------------------------------------------------------
   CARD BACKGROUND
   --------------------------------------------------------- */

.rok-why-this-step::after {
	content: "";

	position: absolute;

	top: 65px;
	right: 0;
	bottom: 0;
	left: 0;

	background: rgba(255, 255, 255, 0.94);

	border-radius: 8px;

	box-shadow:
		0 8px 25px rgba(0, 0, 0, 0.12);

	z-index: -1;

	pointer-events: none;
}


/* ---------------------------------------------------------
   NUMBER CIRCLE
   --------------------------------------------------------- */

.rok-why-this-number {
	position: relative;

	z-index: 10;

	display: flex;

	align-items: center;
	justify-content: center;

	width: 60px;
	height: 60px;

	margin: 0 auto;

	padding: 0;

	box-sizing: border-box;

	border: 3px solid var(--rok-accent);

	border-radius: 50%;

	background: #101820;

	color: var(--rok-accent);

	font-size: 19px;
	font-weight: 700;

	line-height: 1;

	box-shadow:
		0 0 0 3px rgba(255, 255, 255, 0.18);

	transition:
		transform 0.3s ease,
		background 0.3s ease,
		color 0.3s ease,
		box-shadow 0.3s ease;
}


/* ---------------------------------------------------------
   ICON
   --------------------------------------------------------- */

.rok-why-this-icon {
	position: relative;

	z-index: 5;

	display: flex;

	align-items: center;
	justify-content: center;

	width: 48px;
	height: 48px;

	margin: 27px auto 7px;

	padding: 0;

	box-sizing: border-box;

	color: var(--rok-accent);

	font-size: 40px;

	line-height: 1;

	transition:
		transform 0.3s ease,
		background 0.3s ease;
}


/*
 * Elementor icon SVG
 */

.rok-why-this-icon svg {
	width: 40px;
	height: 40px;

	fill: currentColor;
}


/* ---------------------------------------------------------
   STEP TITLE
   --------------------------------------------------------- */

.rok-why-this-title {
	position: relative;

	z-index: 5;

	width: 100%;

	margin: 0 auto 12px;

	padding: 0 10px;

	box-sizing: border-box;

	color: var(--rok-dark) !important;

	font-size: 18px;

	font-weight: 800;

	line-height: 1.25;

	text-align: center;

	text-transform: uppercase;

	letter-spacing: 0;
}


/*
 * Highlighted last word
 */

.rok-why-this-title .rok-accent {
	color: var(--rok-accent) !important;
}


/* ---------------------------------------------------------
   STEP DESCRIPTION
   --------------------------------------------------------- */

.rok-why-this-step-description {
	position: relative;

	z-index: 5;

	width: 100%;
	min-height: 0;

	margin: 0 auto;

	padding: 0 15px 24px;

	box-sizing: border-box;
	font-size: 16px;

	font-weight: 400;

	line-height: 23px;

	text-align: center;
}


/*
 * Elementor / theme overrides
 */

.rok-why-this-this-works
.rok-why-this-step-description,

.rok-why-this-this-works
.rok-why-this-step-description p,

.rok-why-this-this-works
.rok-why-this-step-description span {

	color: var(--rok-text) !important;
}


/*
 * Paragraph reset
 */

.rok-why-this-step-description p {
	margin: 0;
}


/* ---------------------------------------------------------
   HOVER EFFECT
   --------------------------------------------------------- */

.rok-why-this-step:hover .rok-why-this-number {
	transform: translateY(-3px);

	background: var(--rok-white);

	color: var(--rok-accent);

	box-shadow:
		0 0 0 4px rgba(254, 125, 2, 0.15);
}


.rok-why-this-step:hover .rok-why-this-icon {
	transform: translateY(-3px);

	background: #fff7ef;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1024px) {

	.rok-why-this-inner {
		padding: 65px 20px 70px;
	}


	.rok-why-this-heading {
		font-size: 38px;
	}


	.rok-why-this-description {
		font-size: 15px;
	}


	.rok-why-this-process {
		gap: 16px;

		margin-top: 65px;
	}


	.rok-why-this-step {
		min-height: 245px;
	}


	.rok-why-this-title {
		font-size: 15px;

		padding-left: 8px;
		padding-right: 8px;
	}


	.rok-why-this-step-description {
		max-width: 220px;

		padding-left: 8px;
		padding-right: 8px;

		font-size: 12px;
	}

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

	.rok-why-this-inner {
		padding: 55px 18px 65px;
	}


	.rok-why-this-eyebrow {
		font-size: 12px;

		letter-spacing: 1.8px;
	}


	.rok-why-this-heading {
		font-size: 31px;

		line-height: 1.18;
	}


	.rok-why-this-description {
		font-size: 15px;

		line-height: 1.65;
	}


	/* Process becomes vertical */

	.rok-why-this-process {
		display: flex;

		flex-direction: column;

		gap: 42px;

		margin-top: 60px;
	}


	/* Vertical connector */

	.rok-why-this-line {
		top: 29px;
		bottom: 29px;

		left: 50%;
		right: auto;

		width: 2px;
		height: auto;

		transform: scaleY(0);

		transform-origin: top center;
	}


	.rok-why-this-animated.is-active .rok-why-this-line {
		transform: scaleY(1);
	}


	.rok-why-this-step {
		width: 100%;

		min-height: 0;
	}


	.rok-why-this-step::after {
		top: 29px;
	}


	.rok-why-this-number {
		width: 58px;
		height: 58px;

		font-size: 18px;
	}


	.rok-why-this-icon {
		width: 48px;
		height: 48px;

		margin-top: 27px;
	}


	.rok-why-this-title {
		font-size: 17px;
	}


	.rok-why-this-step-description {
		max-width: 320px;

		padding-bottom: 28px;

		font-size: 13px;
	}

}


/* ---------------------------------------------------------
   SMALL MOBILE
   --------------------------------------------------------- */

@media (max-width: 480px) {

	.rok-why-this-inner {
		padding-left: 15px;
		padding-right: 15px;
	}


	.rok-why-this-heading {
		font-size: 28px;
	}


	.rok-why-this-process {
		gap: 38px;
	}


	.rok-why-this-title {
		font-size: 16px;
	}


	.rok-why-this-step-description {
		font-size: 13px;

		line-height: 1.55;
	}

}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.rok-why-this-step {
		opacity: 1 !important;

		transform: none !important;

		transition: none !important;
	}


	.rok-why-this-line {
		transform: scale(1) !important;

		transition: none !important;
	}


	.rok-why-this-number,
	.rok-why-this-icon {
		transition: none !important;
	}

}