/* ==========================================================================
   AI Solutions New — Page Template Styles
   Brand colors:  Blue #1E66AB | Red #BD332D | Yellow #EFBE13 | Green #96C121
   ========================================================================== */

:root {
	--ais-blue:   #1E66AB;
	--ais-red:    #BD332D;
	--ais-yellow: #EFBE13;
	--ais-green:  #96C121;
	--ais-dark:   #2D2A4E;
	--ais-text:   #4a4a55;
	--ais-max:    90%;
}

/* ---------- base ---------- */
.ais-page * { box-sizing: border-box; }

.ais-container {
	width: 100%;
	max-width: var(--ais-max);
	margin: 0 auto;
	padding: 0 24px;
}

/* every image: object-fit inside its wrapper */
.ais-img-wrap {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.ais-img-wrap .ais-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.ais-hero {
	position: relative;
	overflow: hidden;
	background: #ffffff;
	min-height: 620px;
	display: flex;
	align-items: center;
}

/* ---------- background video ---------- */
.ais-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.ais-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0.3;
}

/* ---------- layout ---------- */
.ais-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.5fr 0.8fr;
	align-items: center;
	gap: 32px;
	width: 100%;
	padding-top: 60px;
	padding-bottom: 60px;
}

/* ---------- text column ---------- */
.ais-hero__col--text {
	max-width: 900px;
}

.ais-hero__title {
	margin: 0 0 26px;
	font-weight: 800;
	line-height: 1.04;
	
}
.ais-hero__title-gradient,
.ais-hero__title-dark {
	display: block;
	white-space: nowrap;
}

/* line 1 — gradient text (max specificity + !important to beat any theme) */
#ais-page .ais-hero h1.ais-hero__title span.ais-hero__title-gradient {
	font-size: clamp(2rem, 4.4vw, 3.4rem);
	margin-bottom: 6px;
	display: inline-block;
	white-space: nowrap;
	background: none !important;
	background-color: transparent !important;
	background-image: linear-gradient(90deg, #96C121 0%, #1E66AB 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
}

/* line 2 — dark navy */
.ais-hero__title-dark {
	font-size: clamp(2rem, 4.4vw, 3.4rem);
	color: var(--ais-dark);
}

.ais-hero__desc {
	margin: 0 0 38px;
	max-width: 440px;
	font-size: clamp(1rem, 1.4vw, 1.0625rem);
	line-height: 1.6;
	color: var(--ais-text);
}

/* ---------- gradient button ---------- */
.ais-btn {
	display: inline-block;
	font-weight: 700;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.ais-btn--gradient {
	padding: 18px 38px;
	font-size: 1.0625rem;
	color: #fff;
	border-radius: 40px;
	background: linear-gradient(90deg, var(--ais-green) 0%, var(--ais-blue) 100%);
	box-shadow: 0 10px 24px rgba(30, 102, 171, 0.25);
}
.ais-btn--gradient:hover {
	transform: translateY(-2px);
	filter: brightness(1.05);
	box-shadow: 0 14px 30px rgba(30, 102, 171, 0.32);
}

/* ---------- media column (mascot) ---------- */
.ais-hero__col--media {
	display: flex;
	justify-content: center;
}
.ais-hero__img-wrap {
	max-width: 520px;
	aspect-ratio: 4 / 3;
	background: transparent;
}

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

/* ==========================================================================
   PROBLEMS WE SOLVE
   ========================================================================== */
.ais-problems {
	padding: 80px 0;
	background: #ffffff;
}

/* tag line */
.ais-problems__tag {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}
.ais-problems__tag-text {
	font-size: 1rem;
	font-weight: 600;
	color: var(--ais-blue);
	font-style: normal;
	white-space: nowrap;
}
.ais-problems__tag-line {
	display: inline-block;
	width: 60px;
	height: 3px;
	background: var(--ais-blue);
	border-radius: 2px;
}

/* section heading */
.ais-problems__heading {
	font-size: clamp(1.8rem, 3.6vw, 2.8rem);
	font-weight: 800;
	color: var(--ais-dark);
	margin: 0 0 48px;
	line-height: 1.2;
}
#ais-page .ais-problems__heading .ais-problems__heading-gradient {
	background: none !important;
	background-color: transparent !important;
	background-image: linear-gradient(90deg, #96C121 0%, #1E66AB 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
	font-style:normal;
}

/* 2-column grid */
.ais-problems__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: stretch;
}

/* ---------- left: list items ---------- */
.ais-problems__list {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}

.ais-problems__item {
	padding: 10px 0;
	position: relative;
}

/* bottom border (progress bar style) */
.ais-problems__item-border {
	height: 3px;
	background: #e0e4ea;
	border-radius: 2px;
	margin-top: 15px;
	position: relative;
	overflow: hidden;
}
.ais-problems__item-border::after {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 0;
	background: linear-gradient(90deg, var(--ais-green), var(--ais-blue));
	border-radius: 2px;
	transition: width 0s;
}

/* active state: heading turns blue, border fills */
.ais-problems__item.is-active .ais-problems__item-title {
	color: var(--ais-blue);
}
.ais-problems__item.is-active .ais-problems__item-border::after {
	width: 100%;
	transition: width 3s linear;
}

/* title */
.ais-problems__item-title {
	font-size: clamp(1rem, 1.6vw, 1.15rem);
	font-weight: 700;
	color: var(--ais-dark);
	margin: 0 0 8px;
	transition: color 0.3s ease;
}

/* description */
.ais-problems__item-desc {
	font-size: 0.94rem;
	line-height: 1.6;
	color: var(--ais-text);
	margin: 0;
	max-width: 420px;
}

/* ---------- right: image ---------- */
.ais-problems__media {
	display: flex;
	justify-content: center;
	align-items: stretch;
	min-height: 400px;
}
.ais-problems__img-wrap {
	width: 100%;
	border-radius: 12px;
	background: transparent;
}
.ais-problems__img-wrap .ais-img {
	object-fit: contain;
	width: 100%;
	height: 100%;
	border-radius: 12px;
    padding: 10px;
}


/* ==========================================================================
   STATS BAR
   ========================================================================== */
.ais-stats {
	padding: 40px 0;
	background: #ffffff;
}

.ais-stats__bar {
	display: flex;
	align-items: stretch;
	background: linear-gradient(135deg, #eef2fb 0%, #f4f6fc 50%, #eaf0fa 100%);
	border-radius: 24px;
	padding: 48px 30px;
	box-shadow: 0 18px 40px rgba(30, 102, 171, 0.06);
}

.ais-stats__item {
	flex: 1;
	text-align: center;
	padding: 0 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

/* NUMBER — one line, tight spacing, minimal reserved height */
.ais-stats__number {
	display: block;
	font-size: clamp(2rem, 3.2vw, 2.75rem);
	font-weight: 800;
	color: var(--ais-blue);
	line-height: 1;
	letter-spacing: -0.02em;
	min-height: 2.75rem;
	margin-bottom: 6px;
}

/* HEADING — smaller, cleaner, reserves 2 tidy lines */
.ais-stat-h {
	margin: 0 0 8px !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.01em;
	color: var(--ais-blue) !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ais-stats__label {
	margin: 0 auto;
	font-size: 0.875rem;
	line-height: 1.5;
	color: #3d4250;
	max-width: 180px;
}

/* DIVIDER — full-height wrapper, 70% visible line centred inside */
.ais-stats__divider {
	width: 2px;
	align-self: stretch;
	flex-shrink: 0;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ais-stats__divider::before {
	content: "";
	width: 2px;
	height: 70%;
	background: linear-gradient(180deg, var(--ais-green) 0%, var(--ais-blue) 100%);
	border-radius: 2px;
}


/* ==========================================================================
   WHO WE WORK WITH
   ========================================================================== */
.ais-work {
	padding: 80px 0;
	background: #ffffff;
}

/* tag line */
.ais-work__tag {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}
.ais-work__tag-text {
	font-size: 1rem;
	font-weight: 600;
	color: var(--ais-blue);
	font-style: normal;
	white-space: nowrap;
}
.ais-work__tag-line {
	display: inline-block;
	width: 60px;
	height: 3px;
	background: var(--ais-blue);
	border-radius: 2px;
}

/* heading */
.ais-work__heading {
	font-size: clamp(1.8rem, 3.6vw, 2.8rem);
	font-weight: 800;
	color: var(--ais-dark);
	margin: 0 0 48px;
	line-height: 1.2;
}
#ais-page .ais-work__heading .ais-work__heading-gradient {
	background: none !important;
	background-color: transparent !important;
	background-image: linear-gradient(90deg, #96C121 0%, #1E66AB 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
	font-style: normal;
}

/* grid: image left, items right */
.ais-work__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: stretch;
}

/* left image */
.ais-work__media {
	display: flex;
	align-items: stretch;
}
.ais-work__img-wrap {
	width: 100%;
    max-height: 420px;
	border-radius: 16px;
	background: #f5f7fa;
}
.ais-work__img-wrap .ais-work__img {
	object-fit: contain;
	width: 100%;
	height: 100%;
	border-radius: 16px;
	transition: opacity 0.25s ease;
    padding: 10px;
}

/* right list */
.ais-work__list {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}
.ais-work__item {
	padding: 10px 0;
	position: relative;
}
.ais-work__item-title {
	font-size: clamp(1.05rem, 1.7vw, 1.25rem);
	font-weight: 700;
	color: var(--ais-dark);
	margin: 0 0 10px;
	transition: color 0.3s ease;
}
.ais-work__item-desc {
	font-size: 0.94rem;
	line-height: 1.6;
	color: var(--ais-text);
	margin: 0;
	max-width: 440px;
}

/* bottom border progress */
.ais-work__item-border {
	height: 3px;
	background: #e0e4ea;
	border-radius: 2px;
	margin-top: 15px;
	position: relative;
	overflow: hidden;
}
.ais-work__item-border::after {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 0;
	background: linear-gradient(90deg, var(--ais-green), var(--ais-blue));
	border-radius: 2px;
	transition: width 0s;
}

/* active state */
.ais-work__item.is-active .ais-work__item-title {
	color: var(--ais-blue);
}
.ais-work__item.is-active .ais-work__item-border::after {
	width: 100%;
	transition: width 3s linear;
}


/* ==========================================================================
   OUR SERVICES
   ========================================================================== */
.ais-services {
	position: relative;
	padding: 80px 0;
	background: #ffffff;
	overflow: hidden;
}
/* background image band — a contained rounded box that does NOT touch screen edges.
   bottom edge anchored above section bottom so it lands at the cards' vertical middle,
   making each card half-on-background, half-on-white */
.ais-services__bg {
	position: absolute;
	top: 24px;
	bottom: 230px;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - 48px);
	max-width: calc(var(--ais-max) + 48px);
	z-index: 0;
	border-radius: 20px;
	overflow: hidden;
	background-image: url('https://rsk-bsl.com/wp-content/uploads/2025/06/background-scaled.png');
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
}
/* white wash over the image so the network pattern stays faint */
.ais-services__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.82);
}
.ais-services__inner {
	position: relative;
	z-index: 1;
}

/* tag */
.ais-services__tag {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}
.ais-services__tag-text {
	font-size: 1rem;
	font-weight: 600;
	color: var(--ais-blue);
	font-style: normal;
	white-space: nowrap;
}
.ais-services__tag-line {
	display: inline-block;
	width: 60px;
	height: 3px;
	background: var(--ais-blue);
	border-radius: 2px;
}

/* heading */
.ais-services__heading {
	font-size: clamp(1.9rem, 4vw, 3rem);
	font-weight: 800;
	color: var(--ais-dark);
	margin: 0 0 52px;
	line-height: 1.2;
	max-width: 640px;
}
#ais-page .ais-services__heading .ais-services__heading-gradient {
	background: none !important;
	background-color: transparent !important;
	background-image: linear-gradient(90deg, #96C121 0%, #1E66AB 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
}

/* ---------- slider ---------- */
.ais-services__slider {
	overflow: hidden;
	width: 100%;
	padding-top: 50px;   /* room for overlapping icon */
}
.ais-services__track {
	display: flex;
	gap: 40px;
	width: max-content;
	animation: ais-marquee 28s linear infinite;
}
.ais-services__slider:hover .ais-services__track {
	animation-play-state: paused;
}
@keyframes ais-marquee {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* ---------- card ---------- */
.ais-svc-card {
	position: relative;
	flex: 0 0 290px;
	width: 290px;
	background: linear-gradient(180deg, #f4f7fc 0%, #eef2f9 100%);
	border-radius: 14px;
	padding: 70px 26px 34px;
	margin-top: 50px;
}
/* circular icon overlapping top */
.ais-svc-card__icon {
	position: absolute;
	top: -50px;
	left: 28px;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
}
.ais-svc-card__icon .ais-img-wrap {
	width: 100%;
	height: 100%;
	border-radius: 0;
	overflow: visible;
}
.ais-svc-card__icon .ais-img {
	object-fit: contain;
	width: 100%;
	height: 100%;
}

.ais-svc-card__title {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--ais-blue);
	margin: 0 0 12px;
}
.ais-svc-card__line {
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, var(--ais-green), var(--ais-blue));
	border-radius: 2px;
	margin-bottom: 18px;
}
.ais-svc-card__desc {
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--ais-text);
	margin: 0 0 26px;
	min-height: 84px;
}
.ais-svc-card__btn {
	padding: 13px 26px;
	font-size: 0.95rem;
}
.ais-svc-card__btn:hover {
	
    color: #ffffff;
}
.ais-btn--gradient,
.ais-btn--gradient:link,
.ais-btn--gradient:visited,
.ais-btn--gradient:hover,
.ais-btn--gradient:focus,
.ais-btn--gradient:active {
	color: #ffffff !important;
	text-decoration: none !important;
}
/* ==========================================================================
   WHY BUSINESSES CHOOSE US
   ========================================================================== */
.ais-why {
	padding: 80px 0;
	background: #ffffff;
}

/* tag */
.ais-why__tag {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}
.ais-why__tag-text {
	font-size: 1rem;
	font-weight: 600;
	color: var(--ais-blue);
	font-style: normal;
	white-space: nowrap;
}
.ais-why__tag-line {
	display: inline-block;
	width: 60px;
	height: 3px;
	background: var(--ais-blue);
	border-radius: 2px;
}

/* heading */
.ais-why__heading {
	font-size: clamp(1.9rem, 4vw, 3rem);
	font-weight: 800;
	color: var(--ais-dark);
	margin: 0 0 40px;
	line-height: 1.2;
}
.ais-why__heading-gradient { display: block; }
#ais-page .ais-why__heading .ais-why__heading-gradient {
	background: none !important;
	background-color: transparent !important;
	background-image: linear-gradient(90deg, #96C121 0%, #1E66AB 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
}

/* grid: 2 columns
   row1: intro (L)  | logos (R)
   row2: bullets (L)| image (R, spans down)
   row3: button (L) | (image continues) */
.ais-why__grid {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	grid-template-areas:
		"intro  logos"
		"list   media"
		"btn    media";
	column-gap: 48px;
	row-gap: 28px;
	align-items: start;
}
.ais-why__grid > * { min-width: 0; }
.ais-why__intro-cell { grid-area: intro; }
.ais-why__logos-cell { grid-area: logos; align-self: center; min-width: 0; }
.ais-why__list-cell  { grid-area: list; }
.ais-why__media-cell { grid-area: media; align-self: stretch; }
.ais-why__btn-cell   { grid-area: btn; align-self: end; }

/* ---------- intro ---------- */
.ais-why__intro {
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--ais-text);
	margin: 0;
	max-width: 400px;
}

/* ---------- bullets ---------- */
.ais-why__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 36px;
}
.ais-why__list li {
	position: relative;
	padding-left: 26px;
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--ais-dark);
}
.ais-why__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--ais-green);
}
.ais-why__btn {
	padding: 16px 34px;
	font-size: 1rem;
}

/* ---------- logo auto-slider ---------- */
.ais-why__logos-cell {
	overflow: hidden;
}
.ais-why__logos {
	overflow: hidden;
	width: 100%;
}
.ais-why__logos-track {
	display: flex;
	gap: 20px;
	width: max-content;
	animation: ais-marquee 22s linear infinite;
}
.ais-why__logos:hover .ais-why__logos-track {
	animation-play-state: paused;
}
.ais-why__logo {
	flex: 0 0 auto;
	width: 160px;
	height: 84px;
	background: #ffffff;
	border: 1px solid #e2e6ee;
	border-radius: 10px;
	padding: 14px 18px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ais-why__logo .ais-img-wrap {
	width: 100%;
	height: 100%;
}
.ais-why__logo .ais-img {
	object-fit: contain;
}

/* ---------- illustration ---------- */
.ais-why__media-cell {
	display: flex;
}
.ais-why__img-wrap {
	width: 100%;
	min-height: 280px;
	border-radius: 16px;
	background: #f5f7fa;
}
.ais-why__img-wrap .ais-img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	border-radius: 16px;
}


/* ==========================================================================
   USE CASES (expanding slider)
   ========================================================================== */
.ais-uc {
	padding: 80px 0;
	background: #ffffff;
}

/* tag */
.ais-uc__tag {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}
.ais-uc__tag-text {
	font-size: 1rem;
	font-weight: 600;
	color: var(--ais-blue);
	font-style: normal;
	white-space: nowrap;
}
.ais-uc__tag-line {
	display: inline-block;
	width: 60px;
	height: 3px;
	background: var(--ais-blue);
	border-radius: 2px;
}

/* heading */
.ais-uc__heading {
	font-size: clamp(1.9rem, 4vw, 3rem);
	font-weight: 800;
	color: var(--ais-dark);
	margin: 0 0 16px;
	line-height: 1.2;
}
#ais-page .ais-uc__heading .ais-uc__heading-gradient {
	background: none !important;
	background-color: transparent !important;
	background-image: linear-gradient(90deg, #96C121 0%, #1E66AB 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
}
.ais-uc__intro {
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--ais-text);
	margin: 0 0 48px;
	max-width: 440px;
}

/* ---------- slider ---------- */
.ais-uc__slider {
	display: flex;
	gap: 24px;
	align-items: stretch;
}

/* card base (collapsed) */
.ais-uc__card {
	flex: 1 1 0;
	min-width: 0;
	border: 2px solid #e0e4ea;
	border-radius: 16px;
	background: #ffffff;
	padding: 26px 24px;
	transition: flex-grow 0.6s ease, background 0.4s ease;
}
/* active card (expanded) */
.ais-uc__card.is-active {
	flex-grow: 2.4;
}

/* per-color borders */
.ais-uc__card[data-color="blue"]   { border-color: var(--ais-blue); }
.ais-uc__card[data-color="green"]  { border-color: var(--ais-green); }
.ais-uc__card[data-color="red"]    { border-color: var(--ais-red); }
.ais-uc__card[data-color="yellow"] { border-color: var(--ais-yellow); }

/* active background tints */
.ais-uc__card.is-active[data-color="blue"]   { background: #f1f7fd; }
.ais-uc__card.is-active[data-color="green"]  { background: #f4faea; }
.ais-uc__card.is-active[data-color="red"]    { background: #fdf2f1; }
.ais-uc__card.is-active[data-color="yellow"] { background: #fef9e6; }

/* ---------- top area ---------- */
.ais-uc__top {
	display: flex;
	flex-direction: column;     /* collapsed: image on top, title below */
	margin-bottom: 20px;
}
.ais-uc__img {
	order: -1;                  /* collapsed: image first */
	width: 100%;
	height: 130px;
	border-radius: 10px;
	margin-bottom: 16px;
}
.ais-uc__img .ais-img {
	object-fit: contain;
}
.ais-uc__title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ais-blue);
	margin: 0;
	line-height: 1.35;
}
.ais-uc__underline {
	display: none;
	width: 110px;
	height: 3px;
	background: linear-gradient(90deg, var(--ais-green), var(--ais-blue));
	border-radius: 2px;
	margin-top: 14px;
}

/* ---------- active top layout: title left, image right ---------- */
.ais-uc__card.is-active .ais-uc__top {
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
}
.ais-uc__card.is-active .ais-uc__img {
	order: 1;
	width: 240px;
	height: 180px;
	margin-bottom: 0;
	flex-shrink: 0;
}
.ais-uc__card.is-active .ais-uc__head {
	padding-top: 24px;
}
.ais-uc__card.is-active .ais-uc__title {
	font-size: clamp(1.3rem, 2vw, 1.7rem);
}
.ais-uc__card.is-active .ais-uc__underline {
	display: block;
}

/* ---------- content ---------- */
.ais-uc__content p {
	font-size: 0.82rem;
	line-height: 1.55;
	color: var(--ais-text);
	margin: 0 0 16px;
}
.ais-uc__content p:last-child { margin-bottom: 0; }
.ais-uc__label {
	font-style: italic;
	font-weight: 600;
	color: var(--ais-blue);
}
/* active content slightly larger */
.ais-uc__card.is-active .ais-uc__content {
	max-width: 560px;
}
.ais-uc__card.is-active .ais-uc__content p {
	font-size: 0.95rem;
	line-height: 1.65;
	margin-bottom: 20px;
}


/* ==========================================================================
   CTA BANNER
   ========================================================================== */
.ais-cta {
	padding: 60px 0 80px;
	background: #ffffff;
}
.ais-cta__box {
	position: relative;
	overflow: hidden;
	border-radius: 26px;
	background-image: url('https://rsk-bsl.com/wp-content/uploads/2026/06/Group-698.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 360px;
	display: flex;
	align-items: center;
}
/* dark tint so the white text stays readable */
.ais-cta__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(30,33,55,0.78) 0%, rgba(30,33,55,0.45) 60%, rgba(30,33,55,0.30) 100%);
	z-index: 0;
}
.ais-cta__content {
	position: relative;
	z-index: 1;
	padding: 56px 60px;
	max-width: 760px;
}
.ais-cta__title {
	font-size: clamp(1.8rem, 3.6vw, 2.9rem);
	font-weight: 800;
	color: #ffffff;
	line-height: 1.15;
	margin: 0 0 22px;
	max-width: 700px;
}
.ais-cta__desc {
	font-size: clamp(1rem, 1.5vw, 1.1rem);
	line-height: 1.6;
	color: rgba(255,255,255,0.92);
	margin: 0 0 34px;
	max-width: 640px;
}
.ais-cta__btn {
	padding: 16px 34px;
	font-size: 1rem;
}


/* ==========================================================================
   RESPONSIVE — all sections
   ========================================================================== */

@media (max-width: 991px) {
	.ais-hero { min-height: auto; }
	.ais-hero__inner {
		grid-template-columns: 1fr;
		gap: 24px;
		text-align: center;
		padding-top: 48px;
		padding-bottom: 48px;
	}
	.ais-hero__col--text { max-width: 100%; }
	.ais-hero__title-gradient,
	.ais-hero__title-dark { white-space: normal; }
	.ais-hero__desc { margin-left: auto; margin-right: auto; }
	.ais-hero__col--media { order: -1; }
	.ais-hero__img-wrap { max-width: 380px; }

	/* problems */
	.ais-problems { padding: 60px 0; }
	.ais-problems__grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.ais-problems__media { order: -1; }
	.ais-problems__img-wrap { max-width: 400px; }

	/* stats */
	.ais-stats__bar {
		flex-wrap: wrap;
		gap: 24px;
		padding: 32px 20px;
	}
	.ais-stats__item { flex: 1 1 40%; }
	.ais-stats__divider { display: none; }

	/* work */
	.ais-work { padding: 60px 0; }
	.ais-work__grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.ais-work__media { order: -1; }
	.ais-work__img-wrap { max-width: 460px; margin: 0 auto; }

	/* use cases — stack all cards, all expanded */
	.ais-uc { padding: 60px 0; }
	.ais-uc__slider {
		flex-direction: column;
		gap: 20px;
	}
	.ais-uc__card,
	.ais-uc__card.is-active { flex: 1 1 auto; }
	/* show every card in expanded layout on stack */
	.ais-uc__card .ais-uc__top {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: 20px;
	}
	.ais-uc__card .ais-uc__img {
		order: 1;
		width: 180px;
		height: 150px;
		margin-bottom: 0;
		flex-shrink: 0;
	}
	.ais-uc__card .ais-uc__underline { display: block; }

	/* cta */
	.ais-cta { padding: 40px 0 60px; }
	.ais-cta__content { padding: 44px 40px; }
}

@media (max-width: 600px) {
	.ais-container { padding: 0 18px; }
	.ais-hero__title { margin-bottom: 20px; }
	.ais-hero__desc { margin-bottom: 30px; }
	.ais-btn--gradient { padding: 15px 30px; font-size: 1rem; }
	.ais-hero__img-wrap { max-width: 300px; }

	/* problems */
	.ais-problems { padding: 48px 0; }
	.ais-problems__heading { margin-bottom: 32px; }
	.ais-problems__item { padding: 14px 0; }
	.ais-problems__img-wrap { max-width: 300px; }

	/* stats */
	.ais-stats { padding: 24px 0; }
	.ais-stats__bar {
		flex-direction: column;
		gap: 28px;
		padding: 28px 18px;
	}
	.ais-stats__item { flex: 1 1 100%; }

	/* work */
	.ais-work { padding: 48px 0; }
	.ais-work__heading { margin-bottom: 32px; }
	.ais-work__item { padding: 12px 0; }
	.ais-work__img-wrap { max-width: 320px; }

	/* services */
	.ais-services { padding: 56px 0; }
	.ais-services__heading { margin-bottom: 40px; }
	.ais-svc-card { flex: 0 0 270px; width: 270px; }

	/* why */
	.ais-why { padding: 60px 0; }
	.ais-why__grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"intro"
			"logos"
			"media"
			"list"
			"btn";
		row-gap: 32px;
	}
	.ais-why__intro { max-width: 100%; }

	/* use cases */
	.ais-uc { padding: 48px 0; }
	.ais-uc__heading { margin-bottom: 14px; }
	.ais-uc__intro { margin-bottom: 32px; }
	.ais-uc__card .ais-uc__top {
		flex-direction: column;
	}
	.ais-uc__card .ais-uc__img {
		order: -1;
		width: 100%;
		height: 160px;
		margin-bottom: 16px;
	}

	/* cta */
	.ais-cta { padding: 32px 0 48px; }
	.ais-cta__box { min-height: 0; }
	.ais-cta__content { padding: 36px 24px; }
}


/* ================= HOW WE WORK ================= */
/* ================= HOW WE WORK ================= */
.how-we-work {
  padding: 20px 0;
}

.how-header {
  width: 85%;
  max-width: 92%;
  margin: 0 auto 60px;
}

.how-label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 600;
  color: #1E66AB;
}

.how-label::after {
  content: "";
  width: 120px;
  height: 2px;
  background: #1E66AB;
}

.how-title {
  margin-top: 24px;
  font-size: 42px;
  line-height: 54px;
  font-weight: 800;
  color: #2e2f44;
}

.how-title span {
  background: linear-gradient(90deg, #96C121, #1E66AB);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* GREY BOX */
.how-container {
  width: 85%;
  margin: auto;
  background: #f2f5f7;
  border-radius: 40px;
  padding: 50px;
}

/* IMAGE */
.how-image {
  background: #ffffff;
  border: 2px solid #1E66AB;
  border-radius: 28px;
  padding: 24px;
  box-shadow: 0 16px 36px rgba(31,120,193,0.12);
}

.how-image img {
  width: 100%;
  height: 360px;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

/* ===== PROGRESS ===== */
.progress-wrapper {
  position: relative;
  margin-top: 60px;      /* spacing via MARGIN, not padding */
  padding-bottom: 20px;
}

/* LINE — locked to the dot centre (dot 22px → centre 11px) */
.progress-bar {
  position: absolute;
  top: 9px;              /* 11px dot-centre − 2px half line-height */
  left: 0;
  right: 0;
  height: 4px;
  background: #1E66AB;
  border-radius: 4px;
  z-index: 1;
}

.progress-fill {
  height: 100%;
  width: 0;
  background: #96C121;
  border-radius: 4px;
  transition: width 0.8s ease;
  z-index: 1;
}

/* STEPS — normal flow, dots pinned to top */
.progress-steps {
  position: relative;    /* was absolute + translateY(-50%)  ← the bug */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;   /* every dot stays on the same line */
  z-index: 3;
}

/* STEP */
.p-step {
  width: 20%;
  display: flex;
  flex-direction: column;
}

/* DOT (fixed size, sits on the line) */
.dott {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;       /* masks line */
  border: 4px solid #1E66AB;
  box-sizing: border-box;
  margin-bottom: 26px;       /* gap between dot and text */
  position: relative;
  z-index: 6;                /* above line + fill */
  flex: 0 0 auto;            /* never shrink */
}

/* ACTIVE */
.p-step.active .dott {
  border-color: #1E66AB;
}

.p-step.completed .dott {
  border-color: #96C121;
}

.p-step.completed .dott::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 8px;
  border-right: 2px solid #96C121;
  border-bottom: 2px solid #96C121;
  transform: translate(-50%, -55%) rotate(45deg);
}

/* TEXT */
.p-step small {
  font-size: 12px;
  color: #6b6f6c;
  font-weight: 600;
}

.p-step h4 {
  margin: 6px 0;
  font-size: 15px;
  font-weight: 700;
  color: #1E66AB;
  line-height: 1.3rem;
}

.p-step p {
  font-size: 13px;
  line-height: 22px;
  color: #2e2f44;
  padding-right: 20px;
}
.contact-section {
  padding: 40px 0;
}

/* ---------- FULL WIDTH HEADER ---------- */

.contact-header {
  margin-left: 100px;
}

.contact-label {
  font-size: 14px;
  font-weight: 600;
  color: #1E66AB;
  display: flex;
  align-items: center;
  gap: 14px;
}
.cc-l{
  width: 70%;
    max-width: 80%;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: start;
    text-align: left;
}
.contact-label span {
  width: 90px;
  height: 2px;
  background: #1E66AB;
}

.contact-title {
  margin-top: 24px;
  font-size: 44px;
  line-height: 56px;
  font-weight: 800;
  color: #2e2f44;
  text-align: center;
}

.contact-title .green {
  background: linear-gradient(90deg, #8dc63f, #1E66AB);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.contact-subtitle {
  margin-top: 16px;
  font-size: 16px;
  color: #333;
  text-align: center;
}

/* ---------- TWO COLUMN BOX ---------- */

.contact-container {
  width: 85%;
  max-width: 92%;
  margin: auto;
  border-radius: 30px;
  display: grid;
  grid-template-columns: 0.4fr 1.0fr;
  gap: 30px;
}

/* ---------- LEFT ---------- */

.location-image img {
  width: 150px;
  margin-bottom:0px;
  margin-right: 90px;
}
.contact-left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: -98px;
}
.location-cards {
  display: grid;
  gap: 10px;
}
.location-card h4{
    font-size: 16px;
    color: #1E66AB;
    margin-bottom: 0px;
}
.location-card p{
    font-size: 14px;
}
.location-card {
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.5;
}

/* border colors */
.location-card.gre { border: 1px solid #96C121; background-color: white; }
.location-card.blue { border: 1px solid #1E66AB; background-color: white; }
.location-card.red { border: 1px solid #BD332D; background-color: white; }
.location-card.yellow { border: 1px solid #EFBE13; background-color: white; }
.location-card.purple { border: 1px solid #3F3D56; background-color: white; }

/* ---------- RIGHT ---------- */

.contact-right {
  border: 2px solid #1E66AB;
  border-radius: 22px;
  padding-top: 40px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: white;
  margin-top: 40px;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 991px) {
  .contact-header {
    margin-bottom: 40px;
  }

  .contact-container {
    grid-template-columns: 1fr;
    padding: 4px 4px;
  }
}
/* CONTACT */
  .contact-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .main-container-contact {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

}
@media (max-width: 991px) {
  .animate-slide-up,
  .animate-slide-down,
  .animate-slide-left,
  .animate-slide-right {
    transform: none !important;
    opacity: 1 !important;
  }
}

.ais-uc__card.is-active {
	background: #f4f7fa !important;
}

/* =========================================================
   RSK - FAQ SECTION
   ========================================================= */

.rsk-faq{
    padding:110px 0 120px;
    opacity:1;
    transform:none;
}

.fq{
    background:#f6f7f9;
    padding:40px;
    border-radius:15px;
    box-shadow:0 18px 45px rgba(0,0,0,.08);
}

/* Title */
.rsk-faq-main-title{
    text-align:center;
    font-size:44px;
    font-weight:700;
    margin-bottom:60px;
    color:#3d3a53;
}

/* Grid */
.rsk-faq-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:60px;
    align-items:flex-start;
}

/* Accordion */
.rsk-faq-item{
    margin-bottom:22px;
}

.rsk-faq-question{
    padding:20px 22px;
    display:flex;
    align-items:center;
    gap:14px;
    cursor:pointer;
    position:relative;
    background:linear-gradient(145deg,#e3e8ee 0%,#eef2f6 55%,#fafcfe 100%);
    border-radius:6px;
    transition:.25s;
}

.rsk-faq-question:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 14px rgba(0,0,0,.06);
}

.rsk-faq-item.active .rsk-faq-question{
    background:linear-gradient(145deg,#dde4ea 0%,#eef3f7 60%,#ffffff 100%);
}

.faq-square{
    width:14px;
    height:14px;
    background:#96C121;
    flex-shrink:0;
}

.rsk-faq-question h3{
    margin:0;
    flex:1;
    font-size:19px;
    line-height:1.4;
    font-weight:600;
    color:#1E66AB;
}

.faq-icon{
    width:18px;
    transition:.3s;
}

.rsk-faq-item.active .faq-icon{
    transform:rotate(180deg);
}

/* Answer */
.rsk-faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s ease;
    padding:0 22px;
}

.rsk-faq-answer p{
    padding:18px 0 10px;
    margin:0;
    color:#222;
    line-height:1.7;
    font-size:15px;
}

.rsk-faq-item.active .rsk-faq-answer{
    max-height:300px;
}

/* Form */
.rsk-faq-form{
    background:#fff;
    border:1px solid #96C121;
    border-radius:14px;
    padding:30px 28px;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.rsk-form-title{
    text-align:center;
    font-size:24px;
    margin-bottom:25px;
    color:#1E66AB;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:768px){

    .rsk-faq{
        padding:30px 0;
    }

    .fq{
        padding:20px 15px;
    }

    .rsk-faq-main-title{
        font-size:30px;
        line-height:1.25;
        margin-bottom:20px;
    }

    .rsk-faq-grid{
        display:block;
    }

    .rsk-faq-form{
        margin-top:28px;
        padding:18px 14px;
        border-radius:20px;
    }

    .rsk-faq-item{
        margin-bottom:12px;
        border-radius:18px;
        overflow:hidden;
        background:#eef1f5;
    }

    .rsk-faq-question{
        padding:16px 14px;
        gap:10px;
    }

    .rsk-faq-question h3{
        font-size:16px;
    }

    .faq-square{
        width:12px;
        height:12px;
    }

    .faq-icon{
        width:18px;
        height:18px;
    }

    .rsk-faq-answer{
        padding:0 14px 16px 36px;
    }

    .rsk-form-title{
        font-size:22px;
        margin-bottom:14px;
    }
}

/* ==========================================================================
   CONSULTATION POPUP — layout (does NOT change per page)
   ========================================================================== */
.cpop, .cpop *, .cpop *::before, .cpop *::after { box-sizing: border-box; -webkit-font-smoothing: antialiased; }

@keyframes cpop-in    { from{opacity:0;} to{opacity:1;} }
@keyframes cpop-pop   { 0%{opacity:0;transform:translateY(24px) scale(.94);} 60%{opacity:1;} 100%{opacity:1;transform:translateY(0) scale(1);} }
@keyframes cpop-blob  { 0%,100%{transform:translate(0,0) scale(1);} 33%{transform:translate(28px,-34px) scale(1.12);} 66%{transform:translate(-22px,20px) scale(.92);} }
@keyframes cpop-blob2 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-30px,28px) scale(1.15);} }
@keyframes cpop-drift { 0%{background-position:0 0;} 100%{background-position:34px 34px;} }
@keyframes cpop-dash  { to{stroke-dashoffset:-240;} }
@keyframes cpop-node  { 0%,100%{opacity:.35;} 50%{opacity:1;} }
@keyframes cpop-grad  { 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }
@keyframes cpop-check { 0%{transform:scale(0) rotate(-25deg);} 60%{transform:scale(1.18) rotate(0);} 100%{transform:scale(1);} }
@keyframes cpop-wave  { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }

.cpop { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 34px 18px; background: rgba(6,16,32,.62); backdrop-filter: blur(9px) saturate(1.1); -webkit-backdrop-filter: blur(9px) saturate(1.1); animation: cpop-in .4s ease both; font-family: 'Poppins', sans-serif; }
.cpop.hidden { display: none !important; }

.cpop__modal { position: relative; display: flex; align-items: stretch; width: min(1040px, 100%); max-height: 92vh; overflow: hidden auto; border-radius: 24px; background: #fff; box-shadow: 0 44px 120px -30px rgba(4,12,28,.75), 0 0 0 1px rgba(255,255,255,.55) inset; animation: cpop-pop .55s cubic-bezier(.16,1,.3,1) both; }

.cpop__close { position: absolute; top: 16px; right: 16px; z-index: 40; width: 40px; height: 40px; border: none; border-radius: 12px; background: rgba(255,255,255,.55); color: #3a4a60; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .35s cubic-bezier(.4,0,.2,1); box-shadow: 0 4px 14px -6px rgba(0,0,0,.25); }
.cpop__close:hover { background: rgba(15,40,70,.12); transform: rotate(90deg); color: #1E66AB; }

.cpop__left { position: relative; overflow: hidden; color: #fff; flex: 0 0 45%; padding: 38px 40px; display: flex; flex-direction: column; background: linear-gradient(160deg,#0b2038 0%, #123a63 55%, #0e2c47 100%); }
.cpop__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cpop__blob { position: absolute; border-radius: 50%; }
.cpop__blob--1 { width: 340px; height: 340px; top: -90px; left: -80px; background: radial-gradient(circle at 30% 30%, rgba(30,102,171,.85), transparent 70%); filter: blur(38px); animation: cpop-blob 16s ease-in-out infinite; }
.cpop__blob--2 { width: 300px; height: 300px; bottom: -70px; right: -60px; background: radial-gradient(circle at 60% 40%, rgba(150,193,33,.6), transparent 70%); filter: blur(42px); animation: cpop-blob2 19s ease-in-out infinite; }
.cpop__blob--3 { width: 200px; height: 200px; top: 38%; left: 45%; background: radial-gradient(circle, rgba(80,170,220,.35), transparent 70%); filter: blur(34px); animation: cpop-blob 22s ease-in-out infinite reverse; }
.cpop__dots { position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(rgba(255,255,255,.16) 1.1px, transparent 1.2px); background-size: 34px 34px; animation: cpop-drift 9s linear infinite; }
.cpop__net { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.cpop__wave { position: absolute; bottom: -2px; left: 0; width: 200%; height: 90px; opacity: .28; animation: cpop-wave 14s linear infinite; }

.cpop__left-inner { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; }
.cpop__badge { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 7px 14px 7px 10px; border-radius: 100px; margin-bottom: 20px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.cpop__badge-ic { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; align-items: center; justify-content: center; background: linear-gradient(135deg,#1E66AB,#96C121); }
.cpop__heading { margin: 0; font-size: 32px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.cpop__grad { background: linear-gradient(105deg,#1E66AB,#96C121); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: cpop-grad 6s ease infinite; }
.cpop__sub { margin: 13px 0 20px; font-size: 15px; line-height: 1.55; color: rgba(233,241,250,.82); max-width: 38ch; }
.cpop__benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.cpop__benefits li { display: flex; align-items: center; gap: 13px; padding: 11px 14px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); transition: all .35s cubic-bezier(.4,0,.2,1); font-size: 14.5px; font-weight: 600; color: #eef4fb; }
.cpop__benefits li:hover { transform: translateY(-3px); background: rgba(255,255,255,.13); border-color: rgba(150,193,33,.5); box-shadow: 0 16px 34px -18px rgba(0,0,0,.5); }
.cpop__b-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; transition: transform .35s; }
.cpop__benefits li:hover .cpop__b-ic { transform: rotate(-6deg) scale(1.08); }
.cpop__trust { margin-top: auto; padding-top: 22px; display: flex; align-items: center; gap: 10px; color: rgba(210,224,240,.75); font-size: 12.5px; font-weight: 500; }
.cpop__avatars { display: flex; }
.cpop__avatars i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #0e2c47; }
.cpop__avatars i + i { margin-left: -9px; }

.cpop__right { flex: 1 1 auto; min-width: 0; padding: 36px 40px; display: flex; align-items: center; background: linear-gradient(180deg,#fbfdff 0%, #f2f6fb 100%); }
.cpop__card { width: 100%; }
.cpop__title { margin: 0 0 6px; font-size: 23px; font-weight: 800; letter-spacing: -.01em; color: #0f2846; }
.cpop__desc  { margin: 0 0 22px; font-size: 13.8px; line-height: 1.55; color: #5f7085; }
.cpop__secure { margin: 12px 0 0; text-align: center; font-size: 11.5px; color: #8493a5; display: flex; align-items: center; justify-content: center; gap: 6px; }
.cpop__success { display: none; flex-direction: column; align-items: center; text-align: center; padding: 34px 10px 30px; }
.cpop__ring { width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#1E66AB,#96C121); box-shadow: 0 16px 36px -12px rgba(150,193,33,.6); animation: cpop-check .6s cubic-bezier(.16,1,.3,1) both; }
.cpop__success h4 { margin: 20px 0 6px; font-size: 19px; font-weight: 800; color: #0f2846; }
.cpop__success p  { margin: 0; font-size: 14px; color: #5f7085; max-width: 30ch; line-height: 1.55; }

@media (max-width: 860px) {
  .cpop__modal { flex-direction: column; }
  .cpop__left  { flex: 0 0 auto; order: 2; padding: 34px 28px; }
  .cpop__right { order: 1; }
  .cpop__heading { font-size: 28px; }
}
/* ==========================================================================
   POPUP FORM  —  Gravity Form #57   (find-replace 57 -> your form id)
   ========================================================================== */
#gform_wrapper_57 { margin: 0 !important; }
#gform_wrapper_57 form { display: flex; flex-direction: column; gap: 14px; }
#gform_wrapper_57 .gform_fields { display: flex; flex-direction: column; gap: 14px; grid-gap: 14px; }
#gform_wrapper_57 .gfield { margin: 0 !important; padding: 0 !important; }

/* labels */
#gform_wrapper_57 .gfield_label { display: block; margin: 0 0 6px; font: 600 12px 'Poppins', sans-serif; letter-spacing: .02em; color: #0f2846; }
#gform_wrapper_57 .gfield_required { color: #e0655b; }

/* inputs + textarea (no fixed height — padding controls size) */
#gform_wrapper_57 input[type=text],
#gform_wrapper_57 input[type=email],
#gform_wrapper_57 input[type=tel],
#gform_wrapper_57 input[type=url],
#gform_wrapper_57 input[type=number],
#gform_wrapper_57 select,
#gform_wrapper_57 textarea {
  width: 100% !important; padding: 14px 16px;
  border: 1.5px solid rgba(15,40,70,.12); border-radius: 14px;
  background: rgba(255,255,255,.65);
  font: 400 15px 'Poppins', sans-serif; color: #0f2846;
  outline: none; transition: border-color .3s, box-shadow .3s, background .3s;
}
#gform_wrapper_57 textarea { resize: none; line-height: 1.5; }

#gform_wrapper_57 input:hover, #gform_wrapper_57 textarea:hover, #gform_wrapper_57 select:hover { border-color: rgba(30,102,171,.4); }
#gform_wrapper_57 input:focus, #gform_wrapper_57 textarea:focus, #gform_wrapper_57 select:focus {
  border-color: #1E66AB; background: #fff;
  box-shadow: 0 0 0 4px rgba(30,102,171,.13), 0 8px 22px -12px rgba(30,102,171,.4);
}

/* field description */
#gform_wrapper_57 .gfield_description { font-size: 12px; color: #74849a; margin-top: 5px; }

/* validation */
#gform_wrapper_57 .gfield_error input, #gform_wrapper_57 .gfield_error textarea { border-color: #e0655b !important; background: #fff7f6; }
#gform_wrapper_57 .validation_message, #gform_wrapper_57 .gfield_validation_message { color: #d9483d; font-size: 12px; font-weight: 600; margin-top: 5px; padding: 0; background: none; border: none; }
#gform_wrapper_57 .gform_validation_errors { background: #fdeeec; border: 1px solid #f3c6c1; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; box-shadow: none; }
#gform_wrapper_57 .gform_validation_errors h2 { color: #c8382e; font-size: 13.5px; margin: 0; }

/* submit button = gradient CTA */
#gform_wrapper_57 .gform_footer { margin: 4px 0 0 !important; padding: 0 !important; }
#gform_submit_button_57,
#gform_wrapper_57 .gform_footer input[type=submit],
#gform_wrapper_57 .gform_footer button {
  width: 100%; padding: 16px 26px; border: none; border-radius: 100px; cursor: pointer; color: #fff !important;
  font-family: 'Poppins', sans-serif; font-size: 15.5px; font-weight: 700; letter-spacing: .01em;
  background: linear-gradient(105deg,#1E66AB 0%, #2b86c9 45%, #96C121 100%); background-size: 200% auto;
  box-shadow: 0 14px 30px -12px rgba(30,102,171,.6);
  transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s;
}
#gform_submit_button_57:hover, #gform_wrapper_57 .gform_footer input[type=submit]:hover {
  transform: translateY(-3px); box-shadow: 0 22px 44px -14px rgba(30,102,171,.7), 0 0 40px -6px rgba(150,193,33,.5);
}

/* ajax spinner + hide default confirmation (we show our own success block) */
#gform_wrapper_57 .gform_ajax_spinner { margin-left: 12px; vertical-align: middle; }
#gform_confirmation_wrapper_57, #gform_wrapper_57 .gform_confirmation_message { display: none; }