/* ==========================================================
   CONTACT PAGE 2027
========================================================== */

.contact2027-page{

	background:#F8FAFC;

	overflow:hidden;

}

.contact2027-wrap{

	max-width:1500px;

	margin:auto;

	padding-left:25px;
	padding-right:25px;

}

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

.contact2027-hero{

	padding:90px 0 70px;

	background:
	linear-gradient(
		135deg,
		#07111F 0%,
		#0F172A 50%,
		#172554 100%
	);

	position:relative;

	overflow:hidden;

}

.contact2027-hero:before{

	content:"";

	position:absolute;

	width:700px;
	height:700px;

	right:-250px;
	top:-250px;

	border-radius:50%;

	background:
	radial-gradient(
		circle,
		rgba(37,99,235,.18),
		transparent
	);

}

.contact2027-heading{

	max-width:900px;

	margin:auto;

	text-align:center;

	position:relative;

	z-index:2;

}

.contact2027-heading span{

	display:inline-flex;

	padding:10px 18px;

	border-radius:999px;

	background:
	rgba(255,255,255,.08);

	border:
	1px solid rgba(255,255,255,.12);

	color:#fff;

	font-size:13px;

	font-weight:700;

	letter-spacing:.8px;

}

.contact2027-heading h1{

	font-size:72px;

	font-weight:900;

	line-height:1.05;

	color:#fff;

	margin:25px 0;

}

.contact2027-heading p{

	font-size:18px;

	line-height:1.9;

	color:#CBD5E1;

	max-width:850px;

	margin:auto;

}

/* ==========================================================
   COMMAND CENTER
========================================================== */

.contact-command-center{

	margin-top:-40px;

	position:relative;

	z-index:5;

	padding-bottom:90px;

}

.command-grid{

	display:grid;

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

	gap:20px;

}

.command-card{

	background:#fff;

	padding:30px;

	border-radius:28px;

	text-decoration:none;

	border:1px solid #E2E8F0;

	transition:.3s;

}

.command-card:hover{

	transform:
	translateY(-8px);

	box-shadow:
	0 25px 70px rgba(15,23,42,.08);

}

.command-card strong{

	display:block;

	font-size:20px;

	color:#07111F;

	margin-bottom:8px;

}

.command-card span{

	font-size:14px;

	color:#64748B;

}

/* ==========================================================
   FORM ZONE
========================================================== */

.contact-form-zone{

	padding:0 0 100px;

}

.form-zone-grid{

	display:grid;

	grid-template-columns:
	480px
	1fr;

	gap:35px;

	align-items:start;

}

.form-content{

	background:#fff;

	padding:40px;

	border-radius:32px;

	border:1px solid #E2E8F0;

	position:sticky;

	top:30px;

}

.form-content h2{

	font-size:38px;

	font-weight:800;

	color:#07111F;

	margin-bottom:18px;

	line-height:1.15;

}

.form-content p{

	font-size:15px;

	line-height:2;

	color:#64748B;

	margin-bottom:25px;

}

.promise-list{

	display:grid;

	grid-template-columns:
	1fr;

	gap:14px;

}

.promise-list div{

	padding:14px 18px;

	border-radius:14px;

	background:#F8FAFC;

	font-size:14px;

	font-weight:700;

	color:#07111F;

}

.contact-form-box{

	background:#fff;

	padding:40px;

	border-radius:32px;

	border:1px solid #E2E8F0;

}

/* ==========================================================
   FLUENT FORM
========================================================== */

.contact-form-box .ff-el-group{

	margin-bottom:18px;

}

.contact-form-box input,
.contact-form-box select,
.contact-form-box textarea{

	width:100%;

	border:1px solid #CBD5E1 !important;

	border-radius:14px !important;

	padding:14px 16px !important;

	font-size:14px !important;

	box-shadow:none !important;

}

.contact-form-box textarea{

	min-height:140px;

}

.contact-form-box .ff-btn-submit{

	height:56px !important;

	padding:0 30px !important;

	border:none !important;

	border-radius:16px !important;

	font-size:15px !important;

	font-weight:800 !important;

	background:
	linear-gradient(
		135deg,
		#2563EB,
		#06B6D4
	) !important;

}

/* ==========================================================
   DEPARTMENTS
========================================================== */

.contact-departments{

	padding:100px 0;

	background:#fff;

}

.contact-departments h2{

	text-align:center;

	font-size:48px;

	font-weight:800;

	color:#07111F;

	margin-bottom:50px;

}

.department-grid{

	display:grid;

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

	gap:20px;

}

.department-box{

	padding:35px;

	border-radius:28px;

	background:
	linear-gradient(
		135deg,
		#07111F,
		#0F172A
	);

}

.department-box h3{

	color:#fff;

	font-size:22px;

	margin-bottom:12px;

}

.department-box p{

	color:#CBD5E1;

	font-size:14px;

	line-height:1.8;

}

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

.services-directory{

	padding:100px 0;

	background:#F8FAFC;

}

.services-directory h2{

	text-align:center;

	font-size:48px;

	font-weight:800;

	color:#07111F;

	margin-bottom:50px;

}

.services-directory-grid{

	display:grid;

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

	gap:16px;

}

.services-directory-grid span{

	padding:18px;

	text-align:center;

	border-radius:18px;

	background:#fff;

	border:1px solid #E2E8F0;

	font-size:14px;

	font-weight:700;

	color:#07111F;

}

/* ==========================================================
   PROCESS
========================================================== */

.consultation-process{

	padding:100px 0;

	background:#fff;

}

.consultation-process h2{

	text-align:center;

	font-size:48px;

	font-weight:800;

	color:#07111F;

	margin-bottom:50px;

}

.process-grid{

	display:grid;

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

	gap:18px;

}

.process-grid div{

	padding:30px;

	text-align:center;

	border-radius:24px;

	background:#F8FAFC;

	border:1px solid #E2E8F0;

}

.process-grid strong{

	display:flex;

	width:60px;
	height:60px;

	margin:auto auto 15px;

	align-items:center;
	justify-content:center;

	border-radius:50%;

	background:
	linear-gradient(
		135deg,
		#2563EB,
		#06B6D4
	);

	color:#fff;

	font-size:18px;

}

.process-grid h3{

	font-size:16px;

	font-weight:700;

	color:#07111F;

}

/* ==========================================================
   FAQ
========================================================== */

.contact-faq{

	padding:100px 0;

	background:#F8FAFC;

}

.contact-faq h2{

	text-align:center;

	font-size:48px;

	font-weight:800;

	color:#07111F;

	margin-bottom:50px;

}

.faq-list{

	max-width:1000px;

	margin:auto;

	display:grid;

	gap:18px;

}

.faq-item{

	background:#fff;

	padding:30px;

	border-radius:24px;

	border:1px solid #E2E8F0;

}

.faq-item h3{

	font-size:20px;

	color:#07111F;

	margin-bottom:12px;

}

.faq-item p{

	font-size:14px;

	line-height:1.9;

	color:#64748B;

}

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

@media(max-width:1200px){

	.command-grid,
	.department-grid,
	.services-directory-grid{

		grid-template-columns:
		1fr 1fr;

	}

	.form-zone-grid{

		grid-template-columns:
		1fr;

	}

	.process-grid{

		grid-template-columns:
		1fr 1fr 1fr;

	}

}

@media(max-width:768px){

	.contact2027-wrap{

		padding-left:18px;
		padding-right:18px;

	}

	.contact2027-heading h1{

		font-size:38px;

	}

	.contact2027-heading p{

		font-size:15px;

	}

	.command-grid,
	.department-grid,
	.services-directory-grid,
	.process-grid{

		grid-template-columns:
		1fr 1fr;

		gap:12px;

	}

	.command-card,
	.department-box,
	.process-grid div{

		padding:20px;

		border-radius:18px;

	}

	.form-content,
	.contact-form-box{

		padding:22px;

		border-radius:20px;

	}

	.contact-departments h2,
	.services-directory h2,
	.consultation-process h2,
	.contact-faq h2{

		font-size:30px;

	}

	.form-content h2{

		font-size:28px;

	}

	.services-directory-grid span{

		padding:14px;

		font-size:13px;

	}

	.process-grid strong{

		width:45px;
		height:45px;

		font-size:14px;

	}

	.faq-item{

		padding:20px;

		border-radius:18px;

	}

	.faq-item h3{

		font-size:16px;

	}

}



/* ==========================================================
   CONTACT JS CLASSES
========================================================== */

.command-card,
.department-box,
.services-directory-grid span,
.process-grid div,
.faq-item,
.form-content,
.contact-form-box{

	opacity:0;

	transform:translateY(25px);

	transition:all .6s ease;

}

.contact-visible{

	opacity:1 !important;

	transform:translateY(0) !important;

}

.faq-item{

	cursor:pointer;

}

.faq-open{

	border-color:#2563EB;

	box-shadow:
	0 15px 40px rgba(37,99,235,.08);

}

.contact-mobile-bar{

	position:fixed;

	left:10px;

	right:10px;

	bottom:12px;

	z-index:9999;

	display:grid;

	grid-template-columns:
	1fr 1fr 1fr;

	gap:8px;

	padding:8px;

	border-radius:18px;

	background:
	rgba(7,17,31,.96);

	backdrop-filter:blur(18px);

	box-shadow:
	0 15px 40px rgba(0,0,0,.20);

}

.contact-mobile-bar a{

	height:48px;

	display:flex;

	align-items:center;

	justify-content:center;

	text-decoration:none;

	border-radius:12px;

	font-size:13px;

	font-weight:800;

	color:#fff;

	background:
	linear-gradient(
		135deg,
		#2563EB,
		#06B6D4
	);

}

@media(min-width:769px){

	.contact-mobile-bar{

		display:none;

	}

}