/* ==========================================================================
   SSI CONTACT PAGE
   ========================================================================== */

.ssi-contact-page {
	overflow: hidden;

	background:
		#ffffff;

	color:
		#0b1f3a;
}


/* ==========================================================================
   HERO
   ========================================================================== */

.ssi-contact-hero {
	position:
		relative;

	overflow:
		hidden;

	padding:
		85px
		0
		90px;

	background:
		radial-gradient(
			circle at 82% 28%,
			rgba(
				59,
				130,
				246,
				0.14
			),
			transparent 35%
		),
		radial-gradient(
			circle at 10% 80%,
			rgba(
				220,
				162,
				56,
				0.10
			),
			transparent 28%
		),
		linear-gradient(
			135deg,
			#f3f6fb,
			#eaf0f8 52%,
			#e6edf8
		);
}


.ssi-contact-hero__background {
	position:
		absolute;

	inset:
		0;

	pointer-events:
		none;
}


.ssi-contact-hero__grid {
	position:
		absolute;

	inset:
		0;

	opacity:
		0.14;

	background-image:
		linear-gradient(
			rgba(
				15,
				23,
				42,
				0.04
			)
			1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(
				15,
				23,
				42,
				0.04
			)
			1px,
			transparent 1px
		);

	background-size:
		48px
		48px;
}


.ssi-contact-hero__glow {
	position:
		absolute;

	border-radius:
		50%;

	filter:
		blur(18px);
}


.ssi-contact-hero__glow--one {
	width:
		500px;

	height:
		500px;

	right:
		-180px;

	top:
		-190px;

	background:
		radial-gradient(
			circle,
			rgba(
				59,
				130,
				246,
				0.15
			),
			transparent 70%
		);

	animation:
		ssiContactGlow
		12s
		ease-in-out
		infinite
		alternate;
}


.ssi-contact-hero__glow--two {
	width:
		380px;

	height:
		380px;

	left:
		-180px;

	bottom:
		-220px;

	background:
		radial-gradient(
			circle,
			rgba(
				220,
				162,
				56,
				0.10
			),
			transparent 70%
		);

	animation:
		ssiContactGlow
		16s
		ease-in-out
		infinite
		alternate-reverse;
}


.ssi-contact-hero__layout {
	position:
		relative;

	z-index:
		2;

	display:
		grid;

	grid-template-columns:
		minmax(
			0,
			1fr
		)
		minmax(
			400px,
			0.72fr
		);

	gap:
		65px;

	align-items:
		center;
}


.ssi-contact-hero__content {
	max-width:
		800px;
}


.ssi-contact-hero__eyebrow {
	display:
		inline-flex;

	align-items:
		center;

	gap:
		10px;

	margin-bottom:
		18px;

	color:
		#2457d6;

	font-size:
		0.66rem;

	font-weight:
		800;

	letter-spacing:
		0.10em;

	text-transform:
		uppercase;
}


.ssi-contact-hero__eyebrow > span {
	width:
		29px;

	height:
		2px;

	background:
		#dca238;
}


.ssi-contact-hero h1 {
	margin:
		0;

	font-family:
		"Manrope",
		sans-serif;

	font-size:
		clamp(
			3.4rem,
			6vw,
			6rem
		);

	line-height:
		0.96;

	letter-spacing:
		-0.065em;

	font-weight:
		800;

	color:
		#0b1f3a;
}


.ssi-contact-hero h1 span {
	display:
		block;

	background:
		linear-gradient(
			135deg,
			#2457d6,
			#a38d7d,
			#dca238
		);

	-webkit-background-clip:
		text;

	background-clip:
		text;

	color:
		transparent;
}


.ssi-contact-hero__content > p {
	max-width:
		710px;

	margin:
		27px
		0
		28px;

	color:
		#687b91;

	font-size:
		0.82rem;

	line-height:
		1.85;
}


/* --------------------------------------------------------------------------
   Hero buttons
   -------------------------------------------------------------------------- */

.ssi-contact-hero__actions {
	display:
		flex;

	flex-wrap:
		wrap;

	align-items:
		center;

	gap:
		12px;
}


.ssi-contact-hero__primary,
.ssi-contact-hero__secondary {
	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	gap:
		8px;

	min-height:
		50px;

	padding:
		0
		22px;

	border-radius:
		999px;

	font-size:
		0.64rem;

	font-weight:
		800;

	transition:
		transform 240ms ease,
		box-shadow 240ms ease;
}


.ssi-contact-hero__primary {
	background:
		#efb63b;

	color:
		#0b1f3a;

	box-shadow:
		0
		12px
		28px
		rgba(
			220,
			162,
			56,
			0.16
		);
}


.ssi-contact-hero__secondary {
	border:
		1px solid
		#cbd7e7;

	background:
		rgba(
			255,
			255,
			255,
			0.52
		);

	color:
		#0b1f3a;
}


.ssi-contact-hero__primary:hover,
.ssi-contact-hero__secondary:hover {
	transform:
		translateY(-4px);
}


/* ==========================================================================
   HERO VISUAL
   ========================================================================== */

.ssi-contact-hero__visual {
	position:
		relative;

	width:
		450px;

	height:
		450px;

	margin:
		0
		auto;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;
}


.ssi-contact-hero__visual-ring {
	position:
		absolute;

	left:
		50%;

	top:
		50%;

	transform:
		translate(
			-50%,
			-50%
		);

	border:
		1px solid
		rgba(
			36,
			87,
			214,
			0.13
		);

	border-radius:
		50%;
}


.ssi-contact-hero__visual-ring--one {
	width:
		390px;

	height:
		390px;

	animation:
		ssiContactRotate
		28s
		linear
		infinite;
}


.ssi-contact-hero__visual-ring--two {
	width:
		280px;

	height:
		280px;

	border-color:
		rgba(
			220,
			162,
			56,
			0.15
		);

	animation:
		ssiContactRotateReverse
		22s
		linear
		infinite;
}


.ssi-contact-hero__visual-core {
	position:
		relative;

	z-index:
		5;

	width:
		220px;

	height:
		220px;

	display:
		flex;

	flex-direction:
		column;

	align-items:
		center;

	justify-content:
		center;

	text-align:
		center;

	border-radius:
		50%;

	background:
		radial-gradient(
			circle,
			#ffffff,
			#edf3fc
		);

	box-shadow:
		0
		25px
		60px
		rgba(
			15,
			23,
			42,
			0.12
		);
}


.ssi-contact-hero__visual-core span {
	color:
		#2457d6;

	font-size:
		0.56rem;

	font-weight:
		800;

	letter-spacing:
		0.18em;
}


.ssi-contact-hero__visual-core strong {
	margin-top:
		7px;

	color:
		#0b1f3a;

	font-family:
		"Manrope",
		sans-serif;

	font-size:
		1.65rem;

	font-weight:
		800;

	letter-spacing:
		-0.04em;
}


.ssi-contact-hero__visual-core small {
	margin-top:
		7px;

	color:
		#8290a1;

	font-size:
		0.46rem;

	font-weight:
		700;
}


/* --------------------------------------------------------------------------
   Floating contact cards
   -------------------------------------------------------------------------- */

.ssi-contact-hero__floating-card {
	position:
		absolute;

	z-index:
		7;

	display:
		flex;

	align-items:
		center;

	gap:
		10px;

	padding:
		11px
		13px;

	border:
		1px solid
		rgba(
			255,
			255,
			255,
			0.86
		);

	border-radius:
		15px;

	background:
		rgba(
			255,
			255,
			255,
			0.88
		);

	box-shadow:
		0
		16px
		32px
		rgba(
			15,
			23,
			42,
			0.09
		);

	backdrop-filter:
		blur(
			12px
		);

	animation:
		ssiContactFloat
		5s
		ease-in-out
		infinite
		alternate;
}


.ssi-contact-hero__floating-card > span {
	width:
		34px;

	height:
		34px;

	display:
		grid;

	place-items:
		center;

	border-radius:
		10px;

	background:
		#edf3ff;

	color:
		#2457d6;

	font-size:
		0.68rem;

	font-weight:
		800;
}


.ssi-contact-hero__floating-card > div {
	display:
		flex;

	flex-direction:
		column;
}


.ssi-contact-hero__floating-card strong {
	color:
		#0b1f3a;

	font-size:
		0.58rem;

	font-weight:
		800;
}


.ssi-contact-hero__floating-card small {
	margin-top:
		2px;

	color:
		#8390a0;

	font-size:
		0.46rem;
}


.ssi-contact-hero__floating-card--one {
	right:
		-10px;

	top:
		80px;
}


.ssi-contact-hero__floating-card--two {
	left:
		-5px;

	bottom:
		70px;

	animation-delay:
		-1s;
}


/* ==========================================================================
   MAIN CONTACT AREA
   ========================================================================== */

.ssi-contact-main {
	padding:
		90px
		0
		105px;

	background:
		#ffffff;
}


.ssi-contact-main__layout {
	display:
		grid;

	grid-template-columns:
		minmax(
			0,
			1.12fr
		)
		minmax(
			340px,
			0.72fr
		);

	gap:
		22px;

	align-items:
		start;
}


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

.ssi-contact-form-card {
	padding:
		30px;

	border:
		1px solid
		#dce5f0;

	border-radius:
		24px;

	background:
		#ffffff;

	box-shadow:
		0
		18px
		45px
		rgba(
			15,
			23,
			42,
			0.055
		);
}


.ssi-contact-form-card__eyebrow {
	color:
		#2457d6;

	font-size:
		0.58rem;

	font-weight:
		800;

	letter-spacing:
		0.09em;
}


.ssi-contact-form-card h2 {
	margin:
		10px
		0
		5px;

	font-family:
		"Manrope",
		sans-serif;

	font-size:
		1.7rem;

	line-height:
		1;

	letter-spacing:
		-0.04em;
}


.ssi-contact-form-card__intro {
	margin:
		0
		0
		25px;

	color:
		#8a98a9;

	font-size:
		0.59rem;
}


.ssi-contact-form {
	display:
		flex;

	flex-direction:
		column;

	gap:
		15px;
}


.ssi-contact-form__row {
	display:
		grid;

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

	gap:
		11px;
}


.ssi-contact-field {
	display:
		flex;

	flex-direction:
		column;

	gap:
		7px;
}


.ssi-contact-field label {
	color:
		#0b1f3a;

	font-size:
		0.50rem;

	font-weight:
		800;
}


.ssi-contact-field input,
.ssi-contact-field select,
.ssi-contact-field textarea {
	width:
		100%;

	border:
		1px solid
		#dbe4ef;

	border-radius:
		11px;

	background:
		#f8fafc;

	color:
		#0b1f3a;

	font-family:
		inherit;

	font-size:
		0.59rem;

	outline:
		none;

	transition:
		border-color 220ms ease,
		box-shadow 220ms ease,
		background 220ms ease;
}


.ssi-contact-field input,
.ssi-contact-field select {
	height:
		42px;

	padding:
		0
		12px;
}


.ssi-contact-field textarea {
	min-height:
		130px;

	padding:
		12px;

	resize:
		vertical;
}


.ssi-contact-field input::placeholder,
.ssi-contact-field textarea::placeholder {
	color:
		#9aa8b7;
}


.ssi-contact-field input:focus,
.ssi-contact-field select:focus,
.ssi-contact-field textarea:focus {
	border-color:
		#91ace0;

	background:
		#ffffff;

	box-shadow:
		0
		0
		0
		4px
		rgba(
			36,
			87,
			214,
			0.07
		);
}


.ssi-contact-form__footer {
	display:
		flex;

	align-items:
		center;

	justify-content:
		space-between;

	gap:
		20px;

	padding-top:
		12px;

	border-top:
		1px solid
		#edf1f5;
}


.ssi-contact-form__footer small {
	max-width:
		250px;

	color:
		#98a4b2;

	font-size:
		0.43rem;

	line-height:
		1.6;
}


.ssi-contact-form__submit {
	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	gap:
		8px;

	min-height:
		43px;

	padding:
		0
		17px;

	border:
		none;

	border-radius:
		999px;

	background:
		#0b1f3a;

	color:
		#ffffff;

	font-family:
		inherit;

	font-size:
		0.56rem;

	font-weight:
		800;

	cursor:
		pointer;

	transition:
		transform 220ms ease,
		background 220ms ease,
		box-shadow 220ms ease;
}


.ssi-contact-form__submit:hover {
	transform:
		translateY(-3px);

	background:
		#2457d6;

	box-shadow:
		0
		12px
		25px
		rgba(
			36,
			87,
			214,
			0.18
		);
}


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

.ssi-contact-details {
	display:
		flex;

	flex-direction:
		column;

	gap:
		14px;
}


.ssi-contact-details__card {
	padding:
		27px;

	border-radius:
		23px;

	background:
		linear-gradient(
			145deg,
			#071a31,
			#12385f
		);

	color:
		#ffffff;

	box-shadow:
		0
		18px
		45px
		rgba(
			15,
			23,
			42,
			0.13
		);
}


.ssi-contact-details__eyebrow {
	color:
		#f4c766;

	font-size:
		0.55rem;

	font-weight:
		800;

	letter-spacing:
		0.09em;
}


.ssi-contact-details__card h2 {
	margin:
		9px
		0
		20px;

	font-family:
		"Manrope",
		sans-serif;

	font-size:
		1.35rem;

	line-height:
		1.1;

	letter-spacing:
		-0.035em;
}


.ssi-contact-details__list {
	display:
		flex;

	flex-direction:
		column;

	gap:
		8px;
}


.ssi-contact-detail {
	display:
		grid;

	grid-template-columns:
		38px
		1fr
		auto;

	gap:
		10px;

	align-items:
		center;

	min-height:
		56px;

	padding:
		8px;

	border:
		1px solid
		rgba(
			255,
			255,
			255,
			0.09
		);

	border-radius:
		12px;

	background:
		rgba(
			255,
			255,
			255,
			0.045
		);

	color:
		#ffffff;

	transition:
		transform 240ms ease,
		background 240ms ease;
}


a.ssi-contact-detail:hover {
	transform:
		translateX(
			4px
		);

	background:
		rgba(
			255,
			255,
			255,
			0.08
		);
}


.ssi-contact-detail__icon {
	width:
		36px;

	height:
		36px;

	display:
		grid;

	place-items:
		center;

	border-radius:
		10px;

	background:
		#15385f;

	color:
		#f4c766;

	font-size:
		0.63rem;
}


.ssi-contact-detail div {
	display:
		flex;

	flex-direction:
		column;

	min-width:
		0;
}


.ssi-contact-detail small {
	color:
		rgba(
			255,
			255,
			255,
			0.42
		);

	font-size:
		0.43rem;
}


.ssi-contact-detail strong {
	margin-top:
		3px;

	color:
		#ffffff;

	font-size:
		0.57rem;

	font-weight:
		800;

	line-height:
		1.45;
}


.ssi-contact-detail__arrow {
	color:
		#f4c766;

	font-size:
		0.62rem;
}


.ssi-contact-details__whatsapp {
	display:
		flex;

	align-items:
		center;

	justify-content:
		space-between;

	min-height:
		44px;

	margin-top:
		14px;

	padding:
		0
		15px;

	border-radius:
		999px;

	background:
		#efb63b;

	color:
		#0b1f3a;

	font-size:
		0.56rem;

	font-weight:
		800;
}


/* ==========================================================================
   MAP
   ========================================================================== */

.ssi-contact-map-card {
	overflow:
		hidden;

	border:
		1px solid
		#dce5f0;

	border-radius:
		23px;

	background:
		#ffffff;

	box-shadow:
		0
		16px
		35px
		rgba(
			15,
			23,
			42,
			0.055
		);
}


.ssi-contact-map-card__header {
	padding:
		18px
		20px
		15px;
}


.ssi-contact-map-card__header span {
	color:
		#2457d6;

	font-size:
		0.50rem;

	font-weight:
		800;

	letter-spacing:
		0.08em;
}


.ssi-contact-map-card__header h3 {
	margin:
		6px
		0
		0;

	color:
		#0b1f3a;

	font-size:
		0.78rem;

	font-weight:
		800;
}


.ssi-contact-map {
	position:
		relative;

	height:
		190px;
}


.ssi-contact-map iframe {
	display:
		block;

	width:
		100%;

	height:
		100%;

	border:
		0;

	filter:
		saturate(
			0.78
		);
}


.ssi-contact-map__button {
	position:
		absolute;

	left:
		14px;

	top:
		14px;

	display:
		inline-flex;

	align-items:
		center;

	gap:
		6px;

	min-height:
		34px;

	padding:
		0
		12px;

	border-radius:
		999px;

	background:
		rgba(
			11,
			31,
			58,
			0.91
		);

	color:
		#ffffff;

	font-size:
		0.48rem;

	font-weight:
		800;

	backdrop-filter:
		blur(
			8px
		);

	transition:
		transform 220ms ease,
		background 220ms ease;
}


.ssi-contact-map__button:hover {
	transform:
		translateY(
			-2px
		);

	background:
		#2457d6;
}


/* ==========================================================================
   QUICK CTA
   ========================================================================== */

.ssi-contact-quick-cta {
	position:
		relative;

	overflow:
		hidden;

	padding:
		95px
		0
		100px;

	background:
		radial-gradient(
			circle at 76% 25%,
			rgba(
				59,
				130,
				246,
				0.17
			),
			transparent 35%
		),
		linear-gradient(
			145deg,
			#06182e,
			#12385f
		);

	color:
		#ffffff;

	text-align:
		center;
}


.ssi-contact-quick-cta__glow {
	position:
		absolute;

	width:
		500px;

	height:
		500px;

	left:
		-230px;

	bottom:
		-280px;

	border-radius:
		50%;

	background:
		radial-gradient(
			circle,
			rgba(
				220,
				162,
				56,
				0.10
			),
			transparent 70%
		);

	filter:
		blur(
			20px
		);
}


.ssi-contact-quick-cta__content {
	position:
		relative;

	z-index:
		2;

	max-width:
		800px;

	margin:
		0
		auto;
}


.ssi-contact-quick-cta__content > span {
	color:
		#f4c766;

	font-size:
		0.59rem;

	font-weight:
		800;

	letter-spacing:
		0.09em;
}


.ssi-contact-quick-cta__content h2 {
	margin:
		14px
		0
		16px;

	font-family:
		"Manrope",
		sans-serif;

	font-size:
		clamp(
			2.6rem,
			4.8vw,
			4.5rem
		);

	line-height:
		1;

	letter-spacing:
		-0.055em;
}


.ssi-contact-quick-cta__content h2 strong {
	color:
		#f4c766;
}


.ssi-contact-quick-cta__content p {
	max-width:
		620px;

	margin:
		0
		auto
		28px;

	color:
		rgba(
			255,
			255,
			255,
			0.60
		);

	font-size:
		0.74rem;

	line-height:
		1.8;
}


.ssi-contact-quick-cta__actions {
	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	flex-wrap:
		wrap;

	gap:
		12px;
}


.ssi-contact-quick-cta__primary,
.ssi-contact-quick-cta__secondary {
	min-height:
		50px;

	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	gap:
		8px;

	padding:
		0
		22px;

	border-radius:
		999px;

	font-size:
		0.64rem;

	font-weight:
		800;

	transition:
		transform 230ms ease,
		box-shadow 230ms ease;
}


.ssi-contact-quick-cta__primary {
	background:
		#efb63b;

	color:
		#0b1f3a;

	box-shadow:
		0
		12px
		30px
		rgba(
			220,
			162,
			56,
			0.18
		);
}


.ssi-contact-quick-cta__secondary {
	border:
		1px solid
		rgba(
			255,
			255,
			255,
			0.18
		);

	background:
		rgba(
			255,
			255,
			255,
			0.06
		);

	color:
		#ffffff;
}


.ssi-contact-quick-cta__primary:hover,
.ssi-contact-quick-cta__secondary:hover {
	transform:
		translateY(-4px);
}


/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes ssiContactGlow {

	from {
		transform:
			translate(
				-1%,
				-1%
			)
			scale(1);
	}

	to {
		transform:
			translate(
				2%,
				2%
			)
			scale(
				1.06
			);
	}
}


@keyframes ssiContactRotate {

	from {
		transform:
			translate(
				-50%,
				-50%
			)
			rotate(
				0deg
			);
	}

	to {
		transform:
			translate(
				-50%,
				-50%
			)
			rotate(
				360deg
			);
	}
}


@keyframes ssiContactRotateReverse {

	from {
		transform:
			translate(
				-50%,
				-50%
			)
			rotate(
				360deg
			);
	}

	to {
		transform:
			translate(
				-50%,
				-50%
			)
			rotate(
				0deg
			);
	}
}


@keyframes ssiContactFloat {

	from {
		transform:
			translateY(
				-3px
			);
	}

	to {
		transform:
			translateY(
				5px
			);
	}
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1000px) {

	.ssi-contact-hero__layout {
		grid-template-columns:
			1fr;
	}

	.ssi-contact-hero__visual {
		margin:
			0
			auto;
	}

	.ssi-contact-main__layout {
		grid-template-columns:
			1fr;
	}

}


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

@media (max-width: 600px) {

	.ssi-contact-hero {
		padding:
			68px
			0
			72px;
	}

	.ssi-contact-hero h1 {
		font-size:
			3rem;
	}

	.ssi-contact-hero__visual {
		width:
			340px;

		height:
			340px;
	}

	.ssi-contact-hero__visual-ring--one {
		width:
			300px;

		height:
			300px;
	}

	.ssi-contact-hero__visual-ring--two {
		width:
			220px;

		height:
			220px;
	}

	.ssi-contact-hero__visual-core {
		width:
			175px;

		height:
			175px;
	}

	.ssi-contact-hero__floating-card {
		transform:
			scale(
				0.82
			);
	}

	.ssi-contact-hero__floating-card--one {
		right:
			-35px;
	}

	.ssi-contact-hero__floating-card--two {
		left:
			-35px;
	}

	.ssi-contact-main {
		padding:
			70px
			0
			78px;
	}

	.ssi-contact-form-card {
		padding:
			22px;
	}

	.ssi-contact-form__row {
		grid-template-columns:
			1fr;
	}

	.ssi-contact-form__footer {
		align-items:
			flex-start;

		flex-direction:
			column;
	}

	.ssi-contact-form__submit {
		width:
			100%;
	}

	.ssi-contact-map {
		height:
			210px;
	}

	.ssi-contact-quick-cta {
		padding:
			78px
			0
			82px;
	}

	.ssi-contact-quick-cta__content h2 {
		font-size:
			2.7rem;
	}

	.ssi-contact-quick-cta__primary,
	.ssi-contact-quick-cta__secondary {
		width:
			100%;

		max-width:
			270px;
	}
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

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

	.ssi-contact-hero__glow,
	.ssi-contact-hero__visual-ring,
	.ssi-contact-hero__floating-card {
		animation:
			none !important;
	}
}

/* ==========================================================================
   CONTACT FORM — FINAL POLISH
   ========================================================================== */

.ssi-contact-form-card {
	background:
		radial-gradient(
			circle at 92% 8%,
			rgba(91, 124, 224, 0.15),
			transparent 30%
		),
		radial-gradient(
			circle at 8% 90%,
			rgba(220, 162, 56, 0.10),
			transparent 28%
		),
		linear-gradient(
			145deg,
			#ffffff 0%,
			#f3f7ff 55%,
			#eef4ff 100%
		);

	border-color: #d7e2f0;
}


.ssi-contact-form-card h2 {
	font-size: 2rem;
}


.ssi-contact-form-card__intro {
	font-size: 0.67rem;
}


.ssi-contact-field label {
	font-size: 0.58rem;
}


.ssi-contact-field input,
.ssi-contact-field select,
.ssi-contact-field textarea {
	font-size: 0.67rem;
}


.ssi-contact-field input,
.ssi-contact-field select {
	height: 45px;
}


.ssi-contact-field textarea {
	min-height: 135px;
}


.ssi-contact-form__footer small {
	font-size: 0.48rem;
}

/* ==========================================================================
   CONTACT DETAILS — TYPOGRAPHY
   ========================================================================== */

.ssi-contact-details__card h2 {
	font-size: 1.55rem;
}


.ssi-contact-detail small {
	font-size: 0.48rem;
}


.ssi-contact-detail strong {
	font-size: 0.64rem;
	line-height: 1.5;
}


.ssi-contact-details__whatsapp {
	font-size: 0.61rem;
}


.ssi-contact-map-card__header h3 {
	font-size: 0.84rem;
}


/* ==========================================================================
   CONTACT HERO — SSI LOGO
   ========================================================================== */

.ssi-contact-hero__visual-core {
	width: 235px;
	height: 235px;

	padding: 20px;
}


.ssi-contact-hero__logo {
	display: block;

	width: 82px;
	height: 82px;

	object-fit: contain;

	margin-bottom: 10px;

	transition:
		transform 350ms ease;
}


.ssi-contact-hero__visual-core:hover
.ssi-contact-hero__logo {
	transform:
		scale(1.06);
}


.ssi-contact-hero__visual-core strong {
	font-size: 1.55rem;
}


.ssi-contact-hero__visual-core small {
	font-size: 0.48rem;
}

/* ==========================================================================
   FULL WIDTH MAP
   ========================================================================== */

.ssi-contact-map-fullwidth {
	width: 100%;

	margin-top: 22px;
}


.ssi-contact-map-fullwidth
.ssi-contact-map-card {
	width: 100%;
}


.ssi-contact-map-fullwidth
.ssi-contact-map {
	height: 190px;
}

/* ==========================================================================
   CONTACT FINAL CTA — VISIBILITY FIX
   ========================================================================== */

.ssi-contact-quick-cta__content h2 {
	color:
		#ffffff !important;

	-webkit-text-fill-color:
		#ffffff !important;
}


.ssi-contact-quick-cta__content h2 strong {
	color:
		#f4c766 !important;

	-webkit-text-fill-color:
		#f4c766 !important;

	background:
		none !important;
}

/* ==========================================================================
   CONTACT MAP — REDUCE BOTTOM SPACE
   ========================================================================== */

.ssi-contact-map-fullwidth {
	margin-top: 22px;
	margin-bottom: 0;
}


.ssi-contact-map-fullwidth .ssi-contact-map-card {
	margin-bottom: 0;
}


.ssi-contact-map-fullwidth .ssi-contact-map {
	height: 300px;
}


/* Pull the next section closer */
.ssi-contact-main {
	padding-bottom: 45px;
}


/* ==========================================================================
   CONTACT MIDDLE SECTION — CONNECTED GRADIENT
   ========================================================================== */

.ssi-contact-main {
	position: relative;
	overflow: hidden;

	background:
		linear-gradient(
			180deg,
			#eef3fb 0%,
			#f5f8fc 24%,
			#f8fafc 48%,
			#eef3f9 72%,
			#dbe5f2 100%
		) !important;
}


/* Soft upper blue glow */

.ssi-contact-main::before {
	content: "";

	position: absolute;

	top: -180px;
	left: 8%;

	width: 620px;
	height: 420px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(91, 124, 224, 0.13),
			transparent 72%
		);

	filter: blur(25px);

	pointer-events: none;
}


/* Soft lower navy transition */

.ssi-contact-main::after {
	content: "";

	position: absolute;

	left: 0;
	right: 0;
	bottom: -170px;

	height: 380px;

	background:
		radial-gradient(
			ellipse at 50% 100%,
			rgba(11, 31, 58, 0.16),
			transparent 72%
		);

	filter: blur(20px);

	pointer-events: none;
}


/* Keep actual content above the gradient */

.ssi-contact-main .ssi-container {
	position: relative;
	z-index: 2;
}

/* ==========================================================================
   CONTACT FORM STATUS
   ========================================================================== */

.ssi-contact-status {
	position: relative;
	z-index: 20;

	width: min(1100px, calc(100% - 40px));

	margin: 20px auto 0;

	padding: 15px 20px;

	border-radius: 14px;

	display: flex;
	align-items: center;
	gap: 12px;

	box-shadow:
		0 12px 30px
		rgba(15,23,42,.07);

	font-size: .68rem;
}


.ssi-contact-status strong {
	font-weight: 800;
}


.ssi-contact-status span {
	opacity: .78;
}


.ssi-contact-status--success {
	border: 1px solid #b9e5ce;

	background: #effbf4;

	color: #17613a;
}


.ssi-contact-status--error {
	border: 1px solid #f0c4c4;

	background: #fff4f4;

	color: #9a2525;
}


@media (max-width: 600px) {

	.ssi-contact-status {
		width: calc(100% - 30px);

		flex-direction: column;
		align-items: flex-start;

		font-size: .62rem;
	}
}