/* =========================================================
   UDLESS SERVICE ENGINE
   SERVICE CARDS
   ========================================================= */


/* =========================================================
   CARD ACCENT COLORS
   Repeats every 6 cards
   ========================================================= */

/* Card 01 */
.blob-wrapper-cards
.elementor-loop-container
> .e-loop-item:nth-of-type(6n + 1) {

	--udless-card-accent: #00ff99;

}


/* Card 02 */
.blob-wrapper-cards
.elementor-loop-container
> .e-loop-item:nth-of-type(6n + 2) {

	--udless-card-accent: #3525c5;

}


/* Card 03 */
.blob-wrapper-cards
.elementor-loop-container
> .e-loop-item:nth-of-type(6n + 3) {

	--udless-card-accent: #cc9751;

}


/* Card 04 */
.blob-wrapper-cards
.elementor-loop-container
> .e-loop-item:nth-of-type(6n + 4) {

	--udless-card-accent: #ff4fd8;

}


/* Card 05 */
.blob-wrapper-cards
.elementor-loop-container
> .e-loop-item:nth-of-type(6n + 5) {

	--udless-card-accent: #00d9ff;

}


/* Card 06 */
.blob-wrapper-cards
.elementor-loop-container
> .e-loop-item:nth-of-type(6n + 6) {

	--udless-card-accent: #8b5cf6;

}


/* =========================================================
   BLOB
   ========================================================= */

.blob-wrapper-cards
.e-loop-item
.card-blob
.blob {

	background-color:
		var(--udless-card-accent) !important;

}


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

.blob-wrapper-cards
.e-loop-item
.udless-service-svg {

	color:
		var(--udless-card-accent) !important;

}


/* SVG + SVG SHAPES */

.blob-wrapper-cards
.e-loop-item
.udless-service-svg svg,

.blob-wrapper-cards
.e-loop-item
.udless-service-svg svg path,

.blob-wrapper-cards
.e-loop-item
.udless-service-svg svg circle,

.blob-wrapper-cards
.e-loop-item
.udless-service-svg svg rect,

.blob-wrapper-cards
.e-loop-item
.udless-service-svg svg polygon,

.blob-wrapper-cards
.e-loop-item
.udless-service-svg svg polyline {

	fill:
		var(--udless-card-accent) !important;

	color:
		var(--udless-card-accent) !important;

}


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

.blob-wrapper-cards
.udless-service-svg {

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

}

.blob-wrapper-cards
.udless-service-svg svg {

	display: block;

	width: 100%;
	height: 100%;

}