/* =========================================================
   ROK SERVICE FEATURES
========================================================= */

.rok-service-features {
	width: 100%;
	box-sizing: border-box;
}

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


/* =========================================================
   HEADING
========================================================= */

.rok-service-features-heading-wrap {
	width: 100%;
	max-width: 850px;
	margin: 0 auto 28px;
	text-align: center;
}

.rok-service-features-eyebrow {
	display: block;
	margin: 0 0 8px;
	padding: 0;

	color: #FE7D02;

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

	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.rok-service-features-heading {
	margin: 0;
	padding: 0;

	color: #111111;

	font-size: 42px;
	font-weight: 700;
	line-height: 1.15;
}

.rok-service-features-heading-highlight {
	color: #FE7D02;
}


/* =========================================================
   GRID
========================================================= */

.rok-service-features-grid {
	display: grid;

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

	gap: 12px;

	width: 100%;
	align-items: stretch;
}


/* =========================================================
   CARD
========================================================= */

.rok-service-feature-card {
	position: relative;

	display: flex;
	flex-direction: column;

	width: 100%;
	min-width: 0;
	min-height: 100%;

	margin: 0;
	padding: 0;

	background: #ffffff;

	border: 1px solid rgba(254, 125, 2, 0.20);
	border-radius: 12px;

	overflow: hidden;

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		border-color 0.25s ease;
}

.rok-service-feature-card:hover {
	transform: translateY(-4px);

	border-color: rgba(254, 125, 2, 0.40);

	box-shadow:
		0 12px 30px rgba(0, 0, 0, 0.08);
}


/* =========================================================
   CARD INNER
========================================================= */

.rok-service-feature-card-inner {
	display: flex;
	flex-direction: column;
	align-items: center;

	width: 100%;
	height: 100%;
	min-height: 100%;

	padding: 24px 20px;

	text-align: center;
}


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

.rok-service-feature-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;

	margin: 0 0 18px;
	padding: 0;

	color: #FE7D02;

	line-height: 1;

	flex-shrink: 0;
}

.rok-service-feature-icon i {
	display: inline-block;

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

	color: #FE7D02;
}

.rok-service-feature-icon svg {
	display: block;

	width: 75px;
	height: 75px;

	fill: #FE7D02;
}


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

.rok-service-feature-image-icon {
	display: block;
	width: 150px;
	height: 150px;
	max-width: 100%;
	margin: 0 auto;
	object-fit: contain;
	object-position: center;
	flex-shrink: 0;
}


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

.rok-service-feature-text-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	min-width: 70px;
	min-height: 70px;

	padding: 10px;

	border-radius: 50%;

	background: #FE7D02;

	color: #ffffff;

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

	line-height: 1;
}


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

.rok-service-feature-title {
	width: 100%;

	margin: 0 0 10px;
	padding: 0;

	color: #111111;

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

	flex-shrink: 0;
}


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

.rok-service-feature-description {
	width: 100%;

	margin: 0;
	padding: 0;

	color: #222222;

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

	flex-shrink: 0;
}

.rok-service-feature-description br {
	display: block;
}


/* =========================================================
   LINK
========================================================= */

.rok-service-feature-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 7px;

	width: fit-content;

	margin-top: auto;
	padding-top: 18px;

	color: #FE7D02;

	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;

	text-decoration: none;

	flex-shrink: 0;
}

.rok-service-feature-link:hover {
	color: #FE7D02;
	text-decoration: none;
}

.rok-service-feature-link-arrow {
	font-size: 17px;
	line-height: 1;

	transition: transform 0.2s ease;
}

.rok-service-feature-link:hover
.rok-service-feature-link-arrow {
	transform: translateX(4px);
}


/* =========================================================
   ELEMENTOR EDITOR
========================================================= */

.elementor-editor-active
.rok-service-features-grid {
	display: grid !important;
}

.elementor-editor-active
.rok-service-feature-card {
	display: flex !important;
	flex-direction: column !important;
}

.elementor-editor-active
.rok-service-feature-card-inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;

	width: 100% !important;
	height: 100% !important;
	min-height: 100% !important;
}

.elementor-editor-active
.rok-service-feature-icon {
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;

	order: 1 !important;
}

.elementor-editor-active
.rok-service-feature-title {
	order: 2 !important;
}

.elementor-editor-active
.rok-service-feature-description {
	order: 3 !important;
}

.elementor-editor-active
.rok-service-feature-link {
	order: 4 !important;
}


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

@media (max-width: 1024px) {

	.rok-service-features-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rok-service-features-heading {
		font-size: 36px;
	}

}


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

@media (max-width: 767px) {

	.rok-service-features-grid {
		grid-template-columns: 1fr;
	}

	.rok-service-features-heading-wrap {
		margin-bottom: 22px;
	}

	.rok-service-features-heading {
		font-size: 30px;
	}

	.rok-service-feature-card-inner {
		padding: 22px 18px;
	}

	.rok-service-feature-image-icon {
		width: 120px;
		height: 120px;
	}

}