/* =========================================================
   ABOUT (premium)
   Objectivo: manter o estilo do site, mas tornar o About mais "agência".
   ========================================================= */

.about-hero{
	padding-top: 140px;
	padding-bottom: 10px;
}

.about-kicker{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.14);
	color: rgba(153,204,255,.98);
	letter-spacing: .28em;
	text-transform: uppercase;
	font-size: .75rem;
}

.about-hero h1{
	margin-top: 14px;
	margin-bottom: 14px;
	line-height: 1.05;
}

.about-hero .about-lead{
	max-width: 920px;
	line-height: 1.85;
	opacity: .92;
}

.about-hero .about-ctas{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 16px;
}

.about-badges{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.about-badge{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 999px;
	background: rgba(0,0,0,.25);
	border: 1px solid rgba(255,255,255,.14);
	color: rgba(255,255,255,.9);
	font-size: 13px;
	letter-spacing: .08em;
}

.about-badge i{
	width: 9px;
	height: 9px;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--brand-blue-strong), var(--brand-blue-deep));
	display: inline-block;
	box-shadow: 0 10px 30px rgba(77,163,255,.25);
}

.about-split{
	border-radius: 16px;
	border: 1px solid rgba(255,255,255,.12);
	background: rgba(255,255,255,.06);
	padding: 22px;
}

.about-split h4{
	margin-bottom: 10px;
}

.about-split p{
	margin-bottom: 0;
	opacity: .93;
	line-height: 1.85;
}

/* Ajuste breadcrumbs */
.breadcrumb a{ color: rgba(255,255,255,.9); }
.breadcrumb .breadcrumb-item.active{ color: rgba(255,255,255,.7); }

@media (max-width: 991px){
	.about-hero{ padding-top: 120px; }
	.about-hero .about-ctas{ justify-content: center; }
	.about-badges{ justify-content: center; }
}