/* =====================================================
   ModArt Renov Framework
--------------------------------------------------------
   File        : services.css
   Description : Services Section
   Version     : 1.0.0
   Author      : Ayhan TACAR & Atlas
===================================================== */


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

.services{

	position:relative;

	overflow:hidden;

	background:var(--color-surface);

}

.services::before{

	content:"";

	position:absolute;

	inset:0;

	pointer-events:none;

	background:
		radial-gradient(
			circle at top right,
			rgba(212,175,55,.05),
			transparent 45%
		);

}


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

.services-grid{

	position:relative;

	display:grid;

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

	gap:30px;

}


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

.service-card{

	position:relative;

	display:flex;

	flex-direction:column;

	height:100%;

	padding:45px 32px;

	overflow:hidden;

	background:var(--color-card);

	border:1px solid var(--color-border);

	border-radius:var(--radius-md);

	-webkit-backdrop-filter:blur(10px);

	backdrop-filter:blur(10px);

	transition:
		transform var(--transition),
		border-color var(--transition),
		box-shadow var(--transition);

}

.service-card::before{

	content:"";

	position:absolute;

	top:0;

	left:0;

	width:100%;

	height:4px;

	background:var(--color-primary);

	transform:scaleX(0);

	transform-origin:left;

	transition:transform var(--transition);

}

.service-card::after{

	content:"";

	position:absolute;

	inset:0;

	opacity:0;

	pointer-events:none;

	background:
		linear-gradient(
			180deg,
			rgba(255,255,255,.03),
			transparent
		);

	transition:opacity var(--transition);

}

.service-card:hover{

	transform:translateY(-12px);

	border-color:rgba(212,175,55,.35);

	box-shadow:var(--shadow);

}

.service-card:hover::before{

	transform:scaleX(1);

}

.service-card:hover::after{

	opacity:1;

}


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

.service-icon{

	display:flex;

	align-items:center;

	justify-content:center;

	width:72px;

	height:72px;

	margin-bottom:28px;

	border-radius:50%;

	background:rgba(212,175,55,.08);

	font-size:38px;

	transition:
		transform var(--transition),
		background-color var(--transition);

}

.service-card:hover .service-icon{

	transform:scale(1.08) rotate(4deg);

	background:rgba(212,175,55,.14);

}


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

.service-card h3{

	margin-bottom:18px;

	font-size:26px;

	line-height:1.3;

	text-wrap:balance;

}

.service-card p{

	flex:1;

	color:var(--color-text-muted);

	line-height:1.85;

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width:1200px){

	.services-grid{

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

	}

}

@media (max-width:768px){

	.services-grid{

		grid-template-columns:1fr;

		gap:24px;

	}

	.service-card{

		padding:36px 28px;

	}

	.service-card h3{

		font-size:24px;

	}

}


/* =====================================================
   PERFORMANCE
===================================================== */

.service-card{

	will-change:transform;

}

.service-card::before,
.service-card::after{

	backface-visibility:hidden;

}


/* =====================================================
   ACCESSIBILITY
===================================================== */

@media (prefers-reduced-motion:reduce){

	.service-card,
	.service-card::before,
	.service-card::after,
	.service-icon{

		animation:none !important;

		transition:none !important;

		transform:none !important;

	}

}

/* =====================================================
   PREMIUM OVERRIDES
===================================================== */

.services::after{
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	background:linear-gradient(180deg,rgba(255,255,255,.015),transparent 22%,transparent 78%,rgba(212,175,55,.04));
}

.service-card{
	background:linear-gradient(180deg,rgba(18,18,18,.92),rgba(10,10,10,.88));
	border-color:rgba(212,175,55,.14);
	box-shadow:0 16px 38px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.04);
}

.service-card:hover{
	transform:translateY(-10px);
	border-color:rgba(212,175,55,.34);
	box-shadow:0 24px 52px rgba(0,0,0,.3),0 0 0 1px rgba(212,175,55,.08) inset;
}

.service-card::after{
	background:linear-gradient(150deg,rgba(255,229,164,.06),transparent 35%,transparent 70%,rgba(212,175,55,.05));
	opacity:.8;
}

.service-icon{
	border:1px solid rgba(212,175,55,.2);
	background:radial-gradient(circle at 30% 25%,rgba(255,236,188,.14),rgba(212,175,55,.06));
	box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
	color:#f2d690;
}

.service-card h3{
	color:#f6ebd5;
	letter-spacing:-.02em;
}

.service-card p{
	color:#d4cab7;
	line-height:1.9;
}