/* =========================================================
   ROK SERVICES
   ========================================================= */

.rok-services {
	width: 100%;
}


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

.rok-services-grid {
	display: grid;

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

	gap: 25px;

	width: 100%;
}


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

.rok-service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background: #ffffff;
	box-sizing: border-box;
	overflow: hidden;
	transition:
		transform 0.35s ease,
		box-shadow 0.35s ease;
}


.rok-service-card:hover {
	transform: translateY(-6px);
}


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

.rok-service-image {
	position: relative;

	width: 100%;

	overflow: hidden;

	line-height: 0;

	background: #eeeeee;
}


.rok-service-image img {
	display: block;

	width: 100%;

	height: 280px;

	object-fit: cover;

	transition: transform 0.5s ease;
}


.rok-service-card:hover .rok-service-image img {
	transform: scale(1.05);
}


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

.rok-service-icon {
	position: absolute;

	right: 26px;
	top: 235px;

	width: 92px;
	height: 92px;

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

	background: #ffffff;

	z-index: 5;

	box-sizing: border-box;

	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);

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


.rok-service-icon i {
	font-size: 42px;

	color: #FE7D02;

	line-height: 1;

	transition: color 0.3s ease;
}


.rok-service-icon svg {
	width: 42px;
	height: 42px;

	fill: #FE7D02;

	transition: fill 0.3s ease;
}


.rok-service-card:hover .rok-service-icon {
	transform: translateY(-5px);

	background: #FE7D02;
}


.rok-service-card:hover .rok-service-icon i {
	color: #ffffff;
}


.rok-service-card:hover .rok-service-icon svg {
	fill: #ffffff;
}


/* =========================================================
   CONTENT
   ========================================================= */

.rok-service-content {
	position: relative;

	display: flex;
	flex-direction: column;

	flex: 1;

	box-sizing: border-box;

	padding: 50px 45px 40px;
}


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

.rok-service-title {
	margin: 0 0 22px;

	font-size: 27px;
	line-height: 1.2;

	font-weight: 700;

	color: #252525;

	transition: color 0.3s ease;
}


.rok-service-card:hover .rok-service-title {
	color: #FE7D02;
}


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

.rok-service-description {
	margin: 0 0 25px;

	font-size: 16px;

	line-height: 1.9;

	color: #737373;
}


.rok-service-description p {
	margin: 0;
}


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

.rok-service-link {
	display: inline-flex;

	align-items: center;

	gap: 8px;

	margin-top: auto;

	width: fit-content;

	color: #FE7D02;

	font-size: 15px;

	font-weight: 600;

	line-height: 1;

	text-decoration: none;

	transition:
		color 0.3s ease,
		gap 0.3s ease;
}


.rok-service-link:hover {
	color: #252525;

	gap: 13px;
}


.rok-service-link-icon {
	display: inline-flex;

	align-items: center;

	justify-content: center;

	line-height: 1;
}


.rok-service-link-icon i {
	font-size: 14px;

	line-height: 1;
}


.rok-service-link-icon svg {
	width: 14px;
	height: 14px;
}


/* =========================================================
   BOTTOM ACCENT
   ========================================================= */

.rok-service-card::after {
	content: "";

	position: absolute;

	left: 0;
	right: 0;
	bottom: 0;

	height: 3px;

	background: #FE7D02;

	transform: scaleX(0);

	transform-origin: left;

	transition: transform 0.35s ease;
}


.rok-service-card:hover::after {
	transform: scaleX(1);
}


/* =========================================================
   IMAGE OVERLAY
   ========================================================= */

.rok-service-image::after {
	content: "";

	position: absolute;

	inset: 0;

	background: rgba(0, 0, 0, 0);

	pointer-events: none;

	transition: background 0.35s ease;
}


.rok-service-card:hover .rok-service-image::after {
	background: rgba(0, 0, 0, 0.06);
}


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

@media (max-width: 1024px) {

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

	.rok-service-image img {
		height: 250px;
	}

	.rok-service-icon {
		top: 205px;

		width: 82px;
		height: 82px;
	}

	.rok-service-icon i {
		font-size: 36px;
	}

	.rok-service-icon svg {
		width: 36px;
		height: 36px;
	}

	.rok-service-content {
		padding: 45px 30px 35px;
	}

	.rok-service-title {
		font-size: 24px;
	}

}


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

@media (max-width: 767px) {

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

	.rok-service-image img {
		height: 240px;
	}

	.rok-service-icon {
		top: 195px;
		right: 20px;

		width: 78px;
		height: 78px;
	}

	.rok-service-icon i {
		font-size: 34px;
	}

	.rok-service-icon svg {
		width: 34px;
		height: 34px;
	}

	.rok-service-content {
		padding: 45px 25px 30px;
	}

	.rok-service-title {
		font-size: 23px;

		margin-bottom: 16px;
	}

	.rok-service-description {
		font-size: 15px;

		line-height: 1.75;
	}

}


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

@media (max-width: 480px) {

	.rok-services-grid {
		gap: 20px;
	}

	.rok-service-image img {
		height: 220px;
	}

	.rok-service-icon {
		top: 175px;

		right: 15px;

		width: 72px;
		height: 72px;
	}

	.rok-service-content {
		padding: 42px 20px 28px;
	}

	.rok-service-title {
		font-size: 21px;
	}

}