/* ==========================================================================
   Contact page (templates/page-epikoinonia.php) – full-width halves, as on
   the old Elementor page. Form fields: main.css §13.
   1. Split (details / form)  2. Offices + map  3. FAQ spacing
   ========================================================================== */


/* 1. Split ---------------------------------------------------------------- */
.be_contact {
	display: flex;
	min-height: 830px;
}

.be_contact-info {
	position: relative;
	display: flex;
	flex: 0 0 50%;
	flex-direction: column;
	justify-content: center;
	gap: 30px;
	max-width: 50%;
	padding: 0 10%;
	overflow: hidden;
	background: #f3f5f8;
}

/* Photo under the old white overlay (opacity .88) */
.be_contact-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left top;
	opacity: 0.12;
}

.be_contact-head,
.be_contact-blocks {
	position: relative;
}

.be_contact-title {
	margin: 0 0 5px;
	color: var(--be-navy);
	font: 300 73px/1 var(--be-font);
}

.be_contact-lead {
	margin: 0 0 0.9rem;
	color: #324a6d;
	font: 300 16px/24px var(--be-font);
}

.be_contact-blocks {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.be_contact-subtitle {
	margin: 0 0 5px;
	color: #1c244b;
	font: 600 22px/1.5 var(--be-font-alt);
}

.be_contact-lines {
	color: #324a6d;
	font: 300 16px/24px var(--be-font);
	text-align: right;
}

.be_contact-lines p {
	margin: 0;
}

.be_contact-lines a {
	color: #324a6d;
}

.be_contact-lines a:hover {
	color: var(--be-red);
}

.be_contact-form {
	display: flex;
	flex: 0 0 50%;
	flex-direction: column;
	justify-content: center;
	gap: 15px;
	max-width: 50%;
	padding: 0 10%;
}

.be_contact-form-intro {
	margin: 0 0 0.9rem;
	padding: 0 20%;
	color: #324a6d;
	font: 300 16px/24px var(--be-font);
	text-align: center;
}

@media (max-width: 1024px) {
	.be_contact {
		display: block;
		min-height: 0;
	}

	.be_contact-info,
	.be_contact-form {
		max-width: none;
		padding: 8% 5%;
	}

	.be_contact-info {
		gap: 15px;
	}
}

@media (max-width: 767px) {
	.be_contact-info,
	.be_contact-form {
		padding: 15% 5%;
	}

	.be_contact-title {
		font-size: 45px;
	}

	.be_contact-form-intro {
		padding: 0;
	}
}


/* 2. Offices + map -------------------------------------------------------- */
.be_contact-map {
	display: flex;
	align-items: center;
	gap: 15%;
}

.be_contact-map-frame {
	flex: 0 0 50%;
	max-width: 50%;
	height: 606px;
}

.be_contact-map-frame iframe {
	filter: brightness(91%) contrast(107%) saturate(93%);
}

.be_contact-offices {
	display: flex;
	flex: 0 0 35%;
	flex-direction: column;
	align-items: flex-end;
	gap: 15px;
	min-width: 0;
	text-align: right;
}

.be_contact-office-title {
	margin: 0 0 15px;
	color: #1c244b;
	font: 300 32px/1 var(--be-font);
}

.be_contact-office-subtitle {
	margin: 8px 0 16px;
	color: #1c244b;
	font: 600 22px/1.2 var(--be-font-alt);
}

.be_contact-office-text {
	margin: 0;
	color: #324a6d;
	font: 300 16px/24px var(--be-font);
}

@media (max-width: 1024px) {
	.be_contact-map {
		flex-direction: column;
		gap: 30px;
		padding-top: 40px;
	}

	.be_contact-map-frame {
		flex: none;
		width: 100%;
		max-width: none;
		height: 420px;
	}

	.be_contact-offices {
		align-items: center;
		padding: 0 5%;
		text-align: center;
	}
}


/* 3. FAQ ------------------------------------------------------------------ */
.be_contact-map + .be_faq-section {
	margin-top: 0;
}