/* =========================================================
   UDLESS SERVICE ENGINE
   Process Blob Colors
   ========================================================= */

.udless-service-process
> .udless-elementor-repeater-item:nth-child(1)
.card-blob
.blob {

	background-color: #00ff99 !important;

}


.udless-service-process
> .udless-elementor-repeater-item:nth-child(2)
.card-blob
.blob {

	background-color: #3525c5 !important;

}


.udless-service-process
> .udless-elementor-repeater-item:nth-child(3)
.card-blob
.blob {

	background-color: #cc9751 !important;

}


.udless-service-process
> .udless-elementor-repeater-item:nth-child(4)
.card-blob
.blob {

	background-color: #ff4fd8 !important;

}


.udless-service-process
> .udless-elementor-repeater-item:nth-child(5)
.card-blob
.blob {

	background-color: #00d9ff !important;

}


.udless-service-process
> .udless-elementor-repeater-item:nth-child(6)
.card-blob
.blob {

	background-color: #8b5cf6 !important;

}

/* =========================================================
   UDLESS SERVICE ENGINE
   Process Layout
   ========================================================= */


/* =========================================================
   Base / Desktop
   5 Columns
   ========================================================= */

.udless-service-process {

	position: relative;

	display: grid;

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

	gap: 24px;

	width: 100%;

	align-items: stretch;

}


/* =========================================================
   Process Item
   ========================================================= */

.udless-service-process
> .udless-elementor-repeater-item {

	position: relative;

	min-width: 0;

	width: 100%;

	height: 100%;

	z-index: 1;

	display: flex;

}


.udless-service-process
> .udless-elementor-repeater-item
> * {

	width: 100%;

	height: 100%;

}


/* =========================================================
   Desktop Connector
   01 → 02 → 03 → 04 → 05
   ========================================================= */

.udless-service-process
> .udless-elementor-repeater-item:not(:last-child)::after {

	content: "";

	position: absolute;

	top: 62px;

	left: 100%;

	width: 24px;

	height: 2px;

	background: repeating-linear-gradient(
		to right,
		rgba(255,255,255,0.28) 0,
		rgba(255,255,255,0.28) 7px,
		transparent 7px,
		transparent 14px
	);

	z-index: 0;

	pointer-events: none;

}


/* =========================================================
   1360px
   4 Columns

   01 → 02 → 03 → 04
                       ↓
                       05
   ========================================================= */

@media (max-width: 1360px) and (min-width: 1201px) {

	.udless-service-process {

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

		gap: 24px;

	}


	/*
	 * Remove the default 5-column connectors.
	 */

	.udless-service-process
	> .udless-elementor-repeater-item::after {

		display: none;

	}


	/*
	 * 01 → 02
	 * 02 → 03
	 * 03 → 04
	 */

	.udless-service-process
	> .udless-elementor-repeater-item:nth-child(-n+3)::after {

		display: block;

		top: 62px;

		left: 100%;

		width: 24px;

		height: 2px;

		background: repeating-linear-gradient(
			to right,
			rgba(255,255,255,0.28) 0,
			rgba(255,255,255,0.28) 7px,
			transparent 7px,
			transparent 14px
		);

	}


	/*
	 * 04 ↓ 05
	 *
	 * Start at the bottom of card 04.
	 */

	.udless-service-process
	> .udless-elementor-repeater-item:nth-child(4)::after {

		display: block;

		top: 100%;

		left: 50%;

		width: 2px;

		height: 24px;

		background: repeating-linear-gradient(
			to bottom,
			rgba(255,255,255,0.28) 0,
			rgba(255,255,255,0.28) 7px,
			transparent 7px,
			transparent 14px
		);

	}

}


@media (max-width: 1360px) and (min-width: 1201px) {

	.udless-service-process {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 24px;
	}

	/* 05 goes under 04 */
	.udless-service-process
	> .udless-elementor-repeater-item:nth-child(5) {
		grid-column: 4;
	}

}


/* =========================================================
   1200px
   3 Columns

   01 → 02 → 03
               ↓
   04 → 05
   ========================================================= */

@media (max-width: 1200px) and (min-width: 1025px) {

	.udless-service-process {

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

		gap: 24px;

	}


	/*
	 * Remove all previous connectors.
	 */

	.udless-service-process
	> .udless-elementor-repeater-item::after {

		display: none;

	}


	/*
	 * 01 → 02
	 * 02 → 03
	 */

	.udless-service-process
	> .udless-elementor-repeater-item:nth-child(1)::after,
	.udless-service-process
	> .udless-elementor-repeater-item:nth-child(2)::after {

		display: block;

		top: 62px;

		left: 100%;

		width: 24px;

		height: 2px;

		background: repeating-linear-gradient(
			to right,
			rgba(255,255,255,0.28) 0,
			rgba(255,255,255,0.28) 7px,
			transparent 7px,
			transparent 14px
		);

	}


	/*
	 * 03 ↓ 04
	 *
	 * Starts exactly at the bottom of
	 * card 03 and crosses only the gap.
	 */

	.udless-service-process
	> .udless-elementor-repeater-item:nth-child(3)::after {

		display: block;

		top: 100%;

		left: 50%;

		width: 2px;

		height: 24px;

		background: repeating-linear-gradient(
			to bottom,
			rgba(255,255,255,0.28) 0,
			rgba(255,255,255,0.28) 7px,
			transparent 7px,
			transparent 14px
		);

	}


	/*
	 * 04 → 05
	 */

	.udless-service-process
	> .udless-elementor-repeater-item:nth-child(4)::after {

		display: block;

		top: 62px;

		left: 100%;

		width: 24px;

		height: 2px;

		background: repeating-linear-gradient(
			to right,
			rgba(255,255,255,0.28) 0,
			rgba(255,255,255,0.28) 7px,
			transparent 7px,
			transparent 14px
		);

	}

}


@media (max-width: 1200px) and (min-width: 1025px) {

	.udless-service-process {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}

	/* 04 goes under 03 */
	.udless-service-process
	> .udless-elementor-repeater-item:nth-child(4) {
		grid-column: 3;
	}

	/* 05 goes under 02 */
	.udless-service-process
	> .udless-elementor-repeater-item:nth-child(5) {
		grid-column: 2;
	}

}


/* =========================================================
   Tablet
   2 Columns

   01 → 02
         ↓
   03 → 04
         ↓
   05
   ========================================================= */

@media (max-width: 1024px) and (min-width: 768px) {

	.udless-service-process {

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

		gap: 24px;

	}


	/*
	 * Remove all default connectors.
	 */

	.udless-service-process
	> .udless-elementor-repeater-item::after {

		display: none;

	}


	/*
	 * 01 → 02
	 * 03 → 04
	 */

	.udless-service-process
	> .udless-elementor-repeater-item:nth-child(odd)::after {

		display: block;

		top: 62px;

		left: 100%;

		width: 24px;

		height: 2px;

		background: repeating-linear-gradient(
			to right,
			rgba(255,255,255,0.28) 0,
			rgba(255,255,255,0.28) 7px,
			transparent 7px,
			transparent 14px
		);

	}


	/*
	 * 02 ↓ 03
	 * 04 ↓ 05
	 *
	 * IMPORTANT:
	 * The connector starts at the bottom of
	 * the card instead of inside the card.
	 */

	.udless-service-process
	> .udless-elementor-repeater-item:nth-child(even)::after {

		display: block;

		top: 100%;

		left: 50%;

		width: 2px;

		height: 24px;

		background: repeating-linear-gradient(
			to bottom,
			rgba(255,255,255,0.28) 0,
			rgba(255,255,255,0.28) 7px,
			transparent 7px,
			transparent 14px
		);

	}

}


@media (max-width: 1200px) and (min-width: 1025px) {

	.udless-service-process {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}

	/* 04 under 03 */
	.udless-service-process
	> .udless-elementor-repeater-item:nth-child(4) {
		grid-column: 3;
	}

	/* 05 to the left of 04 */
	.udless-service-process
	> .udless-elementor-repeater-item:nth-child(5) {
		grid-column: 2;
	}

}


/* =========================================================
   Mobile
   1 Column

   01
   ↓
   02
   ↓
   03
   ↓
   04
   ↓
   05
   ========================================================= */

@media (max-width: 767px) {

	.udless-service-process {

		grid-template-columns: 1fr;

		gap: 24px;

	}


	/*
	 * Remove tablet connectors.
	 */

	.udless-service-process
	> .udless-elementor-repeater-item::after {

		display: none;

	}


	/*
	 * Vertical connector between every card.
	 *
	 * Starts at the bottom of the card
	 * and only occupies the gap.
	 */

	.udless-service-process
	> .udless-elementor-repeater-item:not(:last-child)::after {

		display: block;

		top: 100%;

		left: 52px;

		width: 2px;

		height: 24px;

		background: repeating-linear-gradient(
			to bottom,
			rgba(255,255,255,0.28) 0,
			rgba(255,255,255,0.28) 7px,
			transparent 7px,
			transparent 14px
		);

	}

}