/* ==========================================================================
   Service Card Component
   ========================================================================== */

/* Base Styles
   ========================================================================== */

.service-card {
	padding: 3rem;
	padding-left: 12rem;
	transition: 0.15s ease-out;
}
@media screen and (max-width: 1025px) {
	.service-card {
		padding: var(--gap-xs4);
		padding-top: 7rem;
	}
}

.service-card a {
	outline: 0;
}

.service-card p {
	margin-top: var(--gap-xs5);
	max-width: 450px;
}
@media screen and (max-width: 1025px) {
	.service-card p {
		margin-top: var(--gap-xs7);
	}
}
/* Counter
   ========================================================================== */

.service-card__counter {
	position: absolute;
	top: 6px;
	left: 30px;
	transform: translateY(27px);
}

@media screen and (max-width: 1025px) {
	.service-card__counter {
		left: 32px;
	}
}
@media screen and (min-width:1026px) {
	.service-card h3{
		padding-right:60px;
	}
}
/* SVG Icon
   ========================================================================== */

.service-card__svg {
	position: absolute;
	top: 4px;
	right: 30px;
	transform: translateY(22px);
	pointer-events:none;
}
@media screen and (max-width: 1025px) {
	.service-card__svg {
		right: 32px;
	}
}

/* Transitions
   ========================================================================== */

.service-card h3,
.service-card p,
.service-card span,
.service-card svg * {
	transition: 0.15s ease-out;
}


/* Hover States
   ========================================================================== */

/* Reset other items when one is hovered */
@media screen and (min-width: 1026px) {
	/* Active hovered item */
	.service-card:has(a.clickable-parent:is(:hover, :focus-visible)) {
		background: var(--primary) !important;
	}

	.service-card:has(a.clickable-parent:is(:hover, :focus-visible)) * {
		color: white;
	}

	.service-card:has(a.clickable-parent:is(:hover, :focus-visible)) svg path,
	.service-card:has(a.clickable-parent:is(:hover, :focus-visible)) svg rect {
		stroke: white;
	}
}

@media screen and (max-width: 1025px) {
	.service-card-list {
		margin-top: var(--gap-xs4);
	}
}