/* Landing custom overrides (minimal restored version)
	This file provides hero and pricing tweaks only.
	Removed icon-box centering/animation and related hover transforms.
*/
:root{
	--hero-grad-1: #ffd166;
	--hero-grad-2: #ff8a00;
}
.landing-hero{
	background: linear-gradient(135deg,var(--hero-grad-1),var(--hero-grad-2));
	color: #111;
}
.hero .btn-get-started{
	background:#ff7a00;
	color:#fff;
	border-radius:8px;
	padding:12px 22px;
	box-shadow:0 6px 18px rgba(255,122,0,0.18);
}
.pricing-grid{
	display:flex;
	gap:18px;
	flex-wrap:wrap;
}
.pricing-grid .card{
	border-radius:10px;
	padding:18px;
	box-shadow:0 8px 30px rgba(9,30,66,0.06);
}
/* Landing page custom adjustments to better match main site */
.hero{padding:48px 0;background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);} 
.hero .btn-get-started{background:#0d6efd;color:#fff;padding:10px 18px;border-radius:6px;display:inline-block;border:none}
.hero .btn-get-started:hover{background:#0b5ed7}
.pricing-grid{display:flex;gap:20px;flex-wrap:wrap;margin-top:16px}
.pricing-grid .card{flex:1 1 280px;background:#fff;border-radius:10px;padding:20px;box-shadow:0 8px 20px rgba(13,38,76,0.06);border:1px solid rgba(13,38,76,0.03)}
.pricing-grid .card h3{margin-top:0}
.clients-logos img{max-height:44px;margin-right:12px;opacity:0.95}
body{background:#fff;color:#222}
footer{background:transparent}
/* responsive */
@media (max-width:768px){.pricing-grid{flex-direction:column}.hero{padding:28px 0}}

/* First icon: yellow square with white icon and dark title (match example) */
.about .icon-box:first-of-type{display:flex;align-items:center;gap:12px}
.about .icon-box:first-of-type i{
	background:#ffc107;color:#fff;border-radius:8px;width:56px;height:56px;display:inline-flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 6px 18px rgba(13,38,76,0.08);
}
.about .icon-box:first-of-type h4{color:#123047;font-weight:700;margin:0}
.about .icon-box:first-of-type p{margin:4px 0 0 0}

/* Make all icon-boxes centered inside their column, add entry animation and hover effect */
.about .icon-box{
	display:flex;
	align-items:center;
	gap:16px;
	padding:12px 8px;
	margin:12px auto;
	max-width:520px;
	transition:transform .28s ease, box-shadow .28s ease;
	will-change:transform;
	animation:fadeUp .6s ease both;
}
.about .icon-box i{
	background:#fff0; /* default transparent, first-of-type overrides */
	color:#123047;
	border-radius:8px;
	width:56px;height:56px;display:inline-flex;align-items:center;justify-content:center;font-size:28px;
	transition:transform .28s ease, box-shadow .28s ease, background .28s ease;
}
.about .icon-box h4{margin:0;color:#123047;font-weight:700}
.about .icon-box p{margin:4px 0 0 0;color:#6b7785}
.about .icon-box:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(13,38,76,0.08)}
.about .icon-box:hover i{transform:scale(1.06);box-shadow:0 8px 20px rgba(13,38,76,0.08)}

@keyframes fadeUp{
	from{opacity:0;transform:translateY(12px)}
	to{opacity:1;transform:translateY(0)}
}

/* Responsive: make icon-box full width on small screens */
@media (max-width:768px){
	.about .icon-box{max-width:100%;padding:10px 6px}
	.about .icon-box i{width:48px;height:48px;font-size:22px}
}