/* =========================================================
   CONTACT MAIN SECTION
========================================================= */

.contact-main {
	--contact-brand: #a5003d;
	--contact-brand-dark: #78002f;
	--contact-heading: #171923;
	--contact-text: #69646d;
	--contact-border: rgba(124, 75, 90, 0.12);

	position: relative;

	width: 100%;

	padding:
		64px
		0
		74px;

	background:
		#ffffff;
}


/* =========================================================
   BOXED CONTAINER
========================================================= */

.contact-main__container {
	width: min(
		calc(100% - 80px),
		1380px
	);

	margin-inline: auto;
}


/* =========================================================
   MAIN BOX
========================================================= */

.contact-main__box {
	position: relative;

	display: grid;

	grid-template-columns:
		minmax(0, 1.05fr)
		minmax(500px, 0.95fr);

	gap: 48px;

	padding:
		64px
		62px
		54px;

	overflow: hidden;

	border:
		1px solid
		rgba(120, 73, 87, 0.12);

	border-radius: 21px;

	background:
		linear-gradient(
			135deg,
			#fffdfa 0%,
			#fff8f5 54%,
			#fcebea 100%
		);

	box-shadow:
		0
		24px
		60px
		rgba(82, 42, 55, 0.07);
}


/* =========================================================
   BACKGROUND SHAPES
========================================================= */

.contact-main__shape {
	position: absolute;

	border-radius: 50%;

	pointer-events: none;
}


.contact-main__shape--top {
	top: -250px;
	right: -90px;

	width: 500px;
	height: 500px;

	background:
		radial-gradient(
			circle,
			rgba(165, 0, 61, 0.11),
			rgba(165, 0, 61, 0.035) 52%,
			transparent 70%
		);
}


.contact-main__shape--bottom {
	left: -230px;
	bottom: -300px;

	width: 650px;
	height: 650px;

	border:
		1px solid
		rgba(165, 0, 61, 0.13);
}


/* =========================================================
   TOP ECG
========================================================= */

.contact-main__ecg-top {
	position: absolute;

	z-index: 1;

	top: 16px;
	right: 0;

	width: 270px;

	color:
		rgba(165, 0, 61, 0.55);
}


.contact-main__ecg-top svg {
	display: block;

	width: 100%;
	height: auto;
}


/* =========================================================
   LEFT
========================================================= */

.contact-main__left {
	position: relative;

	z-index: 3;
}


/* =========================================================
   EYEBROW
========================================================= */

.contact-main__eyebrow {
	display: flex;

	align-items: center;

	gap: 14px;

	margin-bottom: 21px;

	color:
		var(--contact-brand);

	font-size: 10px;

	font-weight: 700;

	letter-spacing: 3.2px;

	text-transform: uppercase;
}


.contact-main__eyebrow i {
	display: block;

	width: 37px;
	height: 1px;

	background:
		var(--contact-brand);
}


/* =========================================================
   TITLE
========================================================= */

.contact-main__title {
	display: flex;

	gap: 13px;

	flex-wrap: wrap;

	margin:
		0
		0
		15px;

	color:
		var(--contact-heading);

	font-family:
		"Playfair Display",
		Georgia,
		serif;

	font-size:
		clamp(
			54px,
			5vw,
			72px
		);

	font-weight: 400;

	line-height: 0.98;

	letter-spacing:
		-2.7px;
}


.contact-main__title-brand {
	color:
		var(--contact-brand);
}


/* =========================================================
   INTRO
========================================================= */

.contact-main__intro {
	max-width: 570px;

	margin:
		0
		0
		28px;

	color:
		var(--contact-text);

	font-size: 15px;

	line-height: 1.55;
}


/* =========================================================
   INFO GRID
========================================================= */

.contact-main__info-grid {
	display: grid;

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

	gap: 12px;
}


/* =========================================================
   INFO CARD
========================================================= */

.contact-main__info-card {
	min-height: 130px;

	display: flex;

	flex-direction: column;

	align-items: flex-start;

	padding:
		15px
		16px;

	border:
		1px solid
		rgba(126, 77, 91, 0.10);

	border-radius: 13px;

	color:
		var(--contact-text);

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

	text-decoration: none;

	box-shadow:
		0
		5px
		18px
		rgba(89, 46, 58, 0.025);

	transition:
		transform 0.35s cubic-bezier(.22,1,.36,1),
		box-shadow 0.35s ease,
		border-color 0.35s ease;
}


.contact-main__info-card:hover {
	border-color:
		rgba(165,0,61,0.23);

	transform:
		translateY(-4px);

	box-shadow:
		0
		14px
		30px
		rgba(90, 34, 54, 0.075);
}


/* =========================================================
   INFO ICON
========================================================= */

.contact-main__info-icon {
	width: 44px;
	height: 44px;

	display: inline-flex;

	align-items: center;

	justify-content: center;

	margin-bottom: 10px;

	border-radius: 50%;

	color:
		var(--contact-brand);

	background:
		#fbe9ee;
}


.contact-main__info-icon svg {
	width: 22px;
	height: 22px;
}


/* =========================================================
   INFO LABEL
========================================================= */

.contact-main__info-label {
	margin-bottom: 4px;

	color:
		var(--contact-brand);

	font-size: 9px;

	font-weight: 700;

	letter-spacing: 1.8px;

	text-transform: uppercase;
}


.contact-main__info-card strong {
	color:
		#403a3e;

	font-size: 13px;

	font-weight: 500;

	line-height: 1.42;

	overflow-wrap: anywhere;
}


/* =========================================================
   ECG DIVIDER
========================================================= */

.contact-main__divider {
	display: grid;

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

	align-items: center;

	margin:
		23px
		0
		17px;

	color:
		rgba(165,0,61,0.60);
}


.contact-main__divider span {
	height: 1px;

	background:
		rgba(165,0,61,0.30);
}


.contact-main__divider svg {
	width: 50px;
	height: auto;
}


/* =========================================================
   LOCATIONS TITLE
========================================================= */

.contact-main__locations > h3 {
	margin:
		0
		0
		4px;

	color:
		var(--contact-heading);

	font-family:
		"Playfair Display",
		Georgia,
		serif;

	font-size: 28px;

	font-weight: 400;
}


.contact-main__locations > p {
	margin:
		0
		0
		14px;

	color:
		var(--contact-text);

	font-size: 13px;
}


/* =========================================================
   LOCATION GRID
========================================================= */

.contact-main__location-grid {
	display: grid;

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

	gap: 12px;
}


/* =========================================================
   LOCATION CARD
========================================================= */

.contact-main__location-card {
	position: relative;

	min-height: 155px;

	overflow: hidden;

	padding:
		13px
		14px;

	border:
		1px solid
		rgba(126,77,91,0.10);

	border-radius: 12px;

	background:
		linear-gradient(
			135deg,
			rgba(255,255,255,0.80),
			rgba(255,247,248,0.75)
		);

	transition:
		transform 0.35s cubic-bezier(.22,1,.36,1),
		box-shadow 0.35s ease,
		border-color 0.35s ease;
}


.contact-main__location-card:hover {
	border-color:
		rgba(165,0,61,0.22);

	transform:
		translateY(-4px);

	box-shadow:
		0
		14px
		30px
		rgba(91,35,54,0.07);
}


/* =========================================================
   LOCATION TOP
========================================================= */

.contact-main__location-top {
	position: relative;

	z-index: 3;

	display: flex;

	align-items: flex-start;

	gap: 10px;
}


.contact-main__location-icon {
	flex:
		0
		0
		39px;

	width: 39px;
	height: 39px;

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 50%;

	color:
		var(--contact-brand);

	background:
		#fbe8ed;
}


.contact-main__location-icon svg {
	width: 19px;
	height: 19px;
}


.contact-main__location-top strong {
	display: block;

	margin-bottom: 3px;

	color:
		var(--contact-brand);

	font-family:
		"Playfair Display",
		Georgia,
		serif;

	font-size: 17px;

	font-weight: 600;
}


.contact-main__location-top p {
	margin: 0;

	color:
		#6b6266;

	font-size: 12px;

	line-height: 1.42;
}


/* =========================================================
   HOSPITAL ART
========================================================= */

.contact-main__hospital-art {
	position: absolute;

	left: 4px;
	right: 32px;
	bottom: 0;

	height: 70px;

	color:
		rgba(190, 112, 77, 0.30);
}


.contact-main__hospital-art svg {
	width: 100%;
	height: 100%;
}


/* =========================================================
   LOCATION ARROW
========================================================= */

.contact-main__location-arrow {
	position: absolute;

	z-index: 4;

	right: 11px;
	bottom: 13px;

	width: 34px;
	height: 34px;

	display: flex;

	align-items: center;

	justify-content: center;

	border:
		1px solid
		rgba(165,0,61,0.12);

	border-radius: 50%;

	color:
		var(--contact-brand);

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


.contact-main__location-arrow svg {
	width: 15px;
	height: 15px;
}


/* =========================================================
   FORM SIDE
========================================================= */

.contact-main__form-wrap {
	position: relative;

	z-index: 4;

	display: flex;

	align-items: center;
}


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

.contact-main__form-card {
	width: 100%;

	padding:
		36px
		38px
		31px;

	border:
		1px solid
		rgba(103, 75, 82, 0.08);

	border-radius: 16px;

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

	box-shadow:
		0
		22px
		55px
		rgba(80,42,52,0.10);

	-webkit-backdrop-filter:
		blur(10px);

	backdrop-filter:
		blur(10px);
}


/* =========================================================
   FORM EYEBROW
========================================================= */

.contact-main__form-eyebrow {
	display: flex;

	align-items: center;

	gap: 13px;

	margin-bottom: 17px;

	color:
		var(--contact-brand);

	font-size: 10px;

	font-weight: 700;

	letter-spacing: 3px;

	text-transform: uppercase;
}


.contact-main__form-eyebrow i {
	width: 35px;
	height: 1px;

	background:
		var(--contact-brand);
}


/* =========================================================
   FORM TITLE
========================================================= */

.contact-main__form-title {
	margin:
		0
		0
		8px;

	color:
		var(--contact-heading);

	font-family:
		"Playfair Display",
		Georgia,
		serif;

	font-size:
		clamp(
			37px,
			3.2vw,
			48px
		);

	font-weight: 400;

	line-height: 1.03;

	letter-spacing:
		-1.5px;
}


/* =========================================================
   FORM DESCRIPTION
========================================================= */

.contact-main__form-description {
	max-width: 520px;

	margin:
		0
		0
		22px;

	color:
		var(--contact-text);

	font-size: 14px;

	line-height: 1.5;
}


/* =========================================================
   FORM GRID
========================================================= */

.contact-enquiry-form__grid {
	display: grid;

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

	gap: 12px;
}


/* =========================================================
   FIELD
========================================================= */

.contact-enquiry-form__field {
	position: relative;

	height: 49px;

	display: flex;

	align-items: center;

	border:
		1px solid
		rgba(76,58,64,0.14);

	border-radius: 6px;

	background:
		#ffffff;

	transition:
		border-color 0.3s ease,
		box-shadow 0.3s ease;
}


.contact-enquiry-form__field:focus-within {
	border-color:
		rgba(165,0,61,0.50);

	box-shadow:
		0
		0
		0
		3px
		rgba(165,0,61,0.05);
}


.contact-enquiry-form__field--full {
	grid-column:
		1 / -1;
}


/* =========================================================
   ICON
========================================================= */

.contact-enquiry-form__icon {
	position: absolute;

	z-index: 2;

	left: 13px;
	top: 50%;

	width: 20px;
	height: 20px;

	color:
		var(--contact-brand);

	transform:
		translateY(-50%);

	pointer-events: none;
}


.contact-enquiry-form__icon svg {
	width: 100%;
	height: 100%;
}


/* =========================================================
   INPUT
========================================================= */

.contact-enquiry-form__field input,
.contact-enquiry-form__field select,
.contact-enquiry-form__field textarea {
	width: 100%;

	border: 0;

	outline: 0;

	color:
		#625b60;

	background:
		transparent;

	font-family:
		Arial,
		Helvetica,
		sans-serif;

	font-size: 13px;
}


.contact-enquiry-form__field input,
.contact-enquiry-form__field select {
	height: 100%;

	padding:
		0
		38px
		0
		48px;
}


.contact-enquiry-form__field input::placeholder,
.contact-enquiry-form__field textarea::placeholder {
	color:
		#787176;

	opacity: 1;
}


/* =========================================================
   TEXTAREA
========================================================= */

.contact-enquiry-form__field--textarea {
	height: 96px;

	align-items:
		flex-start;
}


.contact-enquiry-form__field--textarea
.contact-enquiry-form__icon {
	top: 15px;

	transform: none;
}


.contact-enquiry-form__field textarea {
	height: 100%;

	padding:
		15px
		15px
		15px
		48px;

	resize:
		vertical;
}


/* =========================================================
   CONSENT
========================================================= */

.contact-enquiry-form__consent {
	display: flex;

	align-items: flex-start;

	gap: 10px;

	margin:
		13px
		0
		17px;

	color:
		#716a6e;

	font-size: 11px;

	line-height: 1.4;

	cursor: pointer;
}


.contact-enquiry-form__consent input {
	flex:
		0
		0
		17px;

	width: 17px;
	height: 17px;

	margin-top: 1px;

	accent-color:
		var(--contact-brand);
}


/* =========================================================
   BUTTON
========================================================= */

.contact-enquiry-form__submit {
	position: relative;

	width: 100%;
	height: 54px;

	display: flex;

	align-items: center;

	justify-content: center;

	gap: 20px;

	overflow: hidden;

	border: 0;

	border-radius: 6px;

	color:
		#ffffff;

	background:
		linear-gradient(
			135deg,
			#b30045,
			#a0003d 55%,
			#830032
		);

	font-size: 16px;

	font-weight: 600;

	cursor: pointer;

	box-shadow:
		0
		12px
		27px
		rgba(165,0,61,0.20);

	transition:
		transform 0.35s cubic-bezier(.22,1,.36,1),
		box-shadow 0.35s ease;
}


.contact-enquiry-form__submit::before {
	content: "";

	position: absolute;

	top: -180%;
	left: -40%;

	width: 30%;
	height: 450%;

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(255,255,255,0.25),
			transparent
		);

	transform:
		rotate(20deg)
		translateX(-260%);

	transition:
		transform 0.75s ease;
}


.contact-enquiry-form__submit:hover::before {
	transform:
		rotate(20deg)
		translateX(780%);
}


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

	box-shadow:
		0
		18px
		35px
		rgba(165,0,61,0.27);
}


.contact-enquiry-form__submit span,
.contact-enquiry-form__submit svg {
	position: relative;

	z-index: 2;
}


.contact-enquiry-form__submit svg {
	width: 18px;
	height: 18px;

	transition:
		transform 0.3s ease;
}


.contact-enquiry-form__submit:hover svg {
	transform:
		translateX(5px);
}


/* =========================================================
   HONEYPOT
========================================================= */

.contact-enquiry-form__honeypot {
	position: absolute !important;

	left: -99999px !important;

	width: 1px !important;
	height: 1px !important;

	overflow: hidden !important;
}


/* =========================================================
   NOTICE
========================================================= */

.contact-main__notice {
	margin:
		0
		0
		15px;

	padding:
		10px
		13px;

	border-radius: 6px;

	font-size: 12px;

	line-height: 1.4;
}


.contact-main__notice--success {
	color:
		#28603d;

	background:
		#edf8f1;

	border:
		1px solid
		rgba(40,96,61,0.13);
}


.contact-main__notice--error {
	color:
		#8d1e35;

	background:
		#fff1f4;

	border:
		1px solid
		rgba(165,0,61,0.11);
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1200px) {

	.contact-main__container {
		width:
			calc(100% - 60px);
	}


	.contact-main__box {
		grid-template-columns:
			minmax(0, 1fr)
			470px;

		gap: 35px;

		padding:
			50px
			44px;
	}


	.contact-main__info-grid {
		gap: 9px;
	}


	.contact-main__form-card {
		padding:
			31px
			30px;
	}

}


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

@media (max-width: 900px) {

	.contact-main {
		padding:
			55px
			0;
	}


	.contact-main__container {
		width:
			calc(100% - 40px);
	}


	.contact-main__box {
		grid-template-columns:
			1fr;

		gap:
			42px;

		padding:
			44px
			35px;
	}


	.contact-main__left {
		max-width:
			none;
	}


	.contact-main__form-wrap {
		display: block;
	}


	.contact-main__form-card {
		max-width:
			none;
	}

}


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

@media (max-width: 600px) {

	.contact-main {
		padding:
			42px
			0;
	}


	.contact-main__container {
		width:
			calc(100% - 30px);
	}


	.contact-main__box {
		padding:
			32px
			18px
			25px;

		border-radius:
			15px;
	}


	.contact-main__title {
		font-size:
			clamp(
				46px,
				14vw,
				60px
			);
	}


	.contact-main__intro {
		font-size:
			14px;
	}


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


	.contact-main__info-card {
		min-height:
			0;
	}


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


	.contact-main__form-card {
		padding:
			27px
			17px;

		border-radius:
			13px;
	}


	.contact-main__form-title {
		font-size:
			38px;
	}


	.contact-enquiry-form__grid {
		grid-template-columns:
			1fr;
	}


	.contact-enquiry-form__field--full {
		grid-column:
			auto;
	}


	.contact-main__ecg-top {
		width:
			170px;

		opacity:
			0.55;
	}

}