/* =========================================
   ROK PROCESS
========================================= */

.rok-process {
	width: 100%;
	padding: 70px 20px;
	background: #eef7ff;
	overflow: hidden;
}

.rok-process *,
.rok-process *::before,
.rok-process *::after {
	box-sizing: border-box;
}

.rok-process__inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}


/* =========================================
   EYEBROW
========================================= */

.rok-process__eyebrow-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-bottom: 12px;
}

.rok-process__eyebrow {
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 1.5px;
	color: #fe7d02;
	white-space: nowrap;
}

.rok-process__eyebrow-line {
	width: 22px;
	height: 2px;
	background: #fe7d02;
	border-radius: 20px;
}


/* =========================================
   HEADER
========================================= */

.rok-process__header {
	max-width: 760px;
	margin: 0 auto;
}

.rok-process__title {
	margin: 0 0 8px;

	font-size: clamp(30px, 3.2vw, 42px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -1px;

	color: #12376b;
}

.rok-process__description {
	max-width: 680px;
	margin: 0 auto;

	font-size: 14px;
	font-weight: 400;
	line-height: 1.55;

	color: #68778f;
}


/* =========================================
   PROCESS ITEMS
========================================= */

.rok-process__items {
	display: flex;
	align-items: flex-start;
	justify-content: center;

	width: 100%;

	margin-top: 42px;
}

.rok-process__item {
	position: relative;

	flex: 1 1 0;

	min-width: 0;

	padding: 0 18px;

	text-align: center;

	opacity: 0;
	transform: translateY(40px);

	transition:
		opacity 0.65s ease,
		transform 0.65s ease;

	transition-delay: var(
		--rok-process-delay,
		0s
	);
}

.rok-process__item.rok-process-visible {
	opacity: 1;
	transform: translateY(0);
}


/* =========================================
   ITEM TOP
========================================= */

.rok-process__item-top {
	position: relative;

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

	min-height: 65px;
}


/* =========================================
   ICON
========================================= */

.rok-process__icon-wrap {
	position: relative;
	z-index: 2;

	width: 58px;
	height: 58px;

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

	border: 2px solid #c7dcfa;
	border-radius: 50%;

	background: #ffffff;

	box-shadow:
		0 4px 15px rgba(35, 91, 160, 0.08);

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

.rok-process__icon {
	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 24px;
	line-height: 1;

	color: #0455e0;
}

.rok-process__icon svg {
	width: 24px;
	height: 24px;

	fill: currentColor;
}


/* =========================================
   NUMBER
========================================= */

.rok-process__number {
	position: absolute;

	right: -5px;
	bottom: -2px;

	z-index: 3;

	width: 25px;
	height: 25px;

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

	border-radius: 50%;

	background: #0455e0;
	color: #ffffff;

	font-size: 9px;
	font-weight: 700;
	line-height: 1;
}


/* =========================================
   HOVER
========================================= */

.rok-process__item:hover
.rok-process__icon-wrap {
	transform: translateY(-5px) scale(1.05);

	box-shadow:
		0 10px 25px rgba(35, 91, 160, 0.15);
}


/* =========================================
   ARROW
========================================= */

.rok-process__arrow {
	position: absolute;

	top: 50%;
	right: -4px;

	z-index: 1;

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

	width: 30px;

	transform: translate(50%, -50%);

	color: #8295b0;

	font-size: 18px;

	pointer-events: none;
}


/* =========================================
   STEP TITLE
========================================= */

.rok-process__item-title {
	margin: 15px 0 7px;

	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;

	color: #173d70;
}


/* =========================================
   STEP DESCRIPTION
========================================= */

.rok-process__item-description {
	max-width: 190px;

	margin: 0 auto;

	font-size: 11px;
	font-weight: 400;
	line-height: 1.5;

	color: #68778f;
}


/* =========================================
   ICON REVEAL ANIMATION
========================================= */

.rok-process__item.rok-process-visible
.rok-process__icon-wrap {
	animation: rokProcessIcon 0.7s ease;
}

@keyframes rokProcessIcon {

	0% {
		transform: scale(0.75);
	}

	60% {
		transform: scale(1.08);
	}

	100% {
		transform: scale(1);
	}

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1024px) {

	.rok-process {
		padding: 60px 20px;
	}

	.rok-process__item {
		padding: 0 10px;
	}

	.rok-process__arrow {
		right: -2px;
	}

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

	.rok-process {
		padding: 55px 18px;
	}

	.rok-process__eyebrow {
		font-size: 10px;
		letter-spacing: 1.2px;
	}

	.rok-process__title {
		font-size: 30px;
	}

	.rok-process__description {
		font-size: 13px;
	}

	.rok-process__items {
		flex-direction: column;

		margin-top: 35px;
	}

	.rok-process__item {
		width: 100%;

		flex: none;

		padding: 0 0 48px;
	}

	.rok-process__item:last-child {
		padding-bottom: 0;
	}

	.rok-process__item-top {
		min-height: 65px;
	}

	.rok-process__item-title {
		margin-top: 15px;
	}

	.rok-process__item-description {
		max-width: 280px;
	}

	/*
	 * Turn horizontal arrow
	 * into vertical arrow.
	 */

	.rok-process__arrow {
		top: auto;
		right: auto;
		bottom: 10px;
		left: 50%;

		width: auto;

		transform:
			translateX(-50%)
			rotate(90deg);
	}

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

	.rok-process {
		padding: 45px 16px;
	}

	.rok-process__title {
		font-size: 27px;
	}

	.rok-process__eyebrow-line {
		width: 16px;
	}

}


/* =========================================
   REDUCED MOTION
========================================= */

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

	.rok-process__item {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.rok-process__item.rok-process-visible
	.rok-process__icon-wrap {
		animation: none;
	}

}