.form-group,
.form-row {
	margin-bottom: 25px
}

.btn.primary-btn,
.contact-info a {
	font-size: clamp(14px, 2vw, 16px)
}

.contact-info a,
.form-control,
.section-title h2 {
	transform: translateZ(0)
}

:root {
	--primary-gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
	--card-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
	--hover-transform: translateY(-5px);
	--transition-speed: 0.3s ease;
	--section-padding: clamp(40px, 6vw, 80px) 0;
	--card-padding: clamp(20px, 4vw, 40px)
}

.contact-page {
	background-color: var(--bg-color-light);
	contain: content;
	content-visibility: auto
}

.section-common {
	padding: var(--section-padding);
	background: var(--bg-color-light);
	position: relative;
	contain: layout style paint
}

.section-common::before {
	content: '';
	position: absolute;
	inset: 0;
	background-repeat: repeat;
	opacity: .05;
	z-index: 0;
	will-change: opacity
}

.section-title {
	contain: layout style
}

.section-title h2 {
	line-height: 1.2;
	color: var(--gray-900)
}

.contact-card-content p,
.section-title p {
	color: var(--gray-700)
}

.get-in-touch-section {
	background: linear-gradient(135deg, var(--white) 0, var(--bg-color-light) 100%)
}

.contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: clamp(20px, 3vw, 30px)
}

.contact-card {
	background: var(--white);
	border: 1px solid var(--gray-100);
	display: flex;
	align-items: flex-start;
	gap: clamp(15px, 3vw, 25px)
}

.contact-card-icon {
	background: var(--primary-color-light);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.contact-card-icon i,
.section-title h2 span {
	color: var(--primary-color)
}

.contact-card-content {
	flex: 1;
	min-width: 0
}

.contact-card-content h3 {
	color: var(--gray-900)
}

.contact-info {
	display: flex;
	flex-direction: column;
	gap: 8px
}

.contact-info a {
	color: var(--primary-color);
	display: flex;
	align-items: center;
	transition: color .3s;
	word-break: break-word
}

.contact-card-content .contact-info a:hover,
.contact-info a:hover {
	color: var(--secondary-color)
}

.btn.primary-btn,
.contact-card:hover .contact-card-icon i {
	color: var(--white)
}

.contact-info i {
	font-size: clamp(14px, 2vw, 18px);
	flex-shrink: 0
}

.form-control,
.form-group label {
	font-size: clamp(14px, 2vw, 15px)
}

.contact-form-section {
	padding: 60px 0;
	contain: content;
	content-visibility: auto
}

.contact-form-container {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 40px;
	align-items: start;
	contain: layout style
}

.contact-form-content {
	background: var(--white);
	padding: clamp(20px, 4vw, 40px);
	border-radius: 20px;
	box-shadow: 0 15px 40px rgba(0, 0, 0, .08);
	border: 1px solid var(--gray-100)
}

.form-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	gap: clamp(20px, 3vw, 25px)
}

.form-group label {
	display: block;
	margin-bottom: 10px;
	font-weight: 600;
	color: var(--gray-800)
}

.form-control {
	border: 2px solid var(--gray-200);
	font-family: var(--font-family);
	color: var(--gray-800);
	transition: .3s;
	background-color: var(--white)
}

.form-control:focus {
	border-color: var(--primary-color);
	outline: 0;
	box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .1)
}

.form-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 15px;
	background: var(--gray-50);
	border-radius: 12px;
	margin: 25px 0
}

.btn.primary-btn {
	width: 100%;
	padding: clamp(16px, 3vw, 18px) clamp(24px, 4vw, 32px);
	font-weight: 600;
	background: var(--primary-gradient);
	border: none;
	border-radius: 12px;
	cursor: pointer;
	transition: .3s;
	text-align: center;
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: .5px
}

.hours-card,
.map-container {
	border-radius: 20px;
	box-shadow: var(--card-shadow)
}

.btn.primary-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 20px rgba(var(--primary-rgb), .2)
}

.map-section {
	height: 400px;
	position: relative
}

.map-container {
	width: 100%;
	height: 100%;
	overflow: hidden
}

.office-hours-section {
	padding: 80px 0;
	background: linear-gradient(135deg, var(--bg-color-light) 0, var(--white) 100%)
}

.hours-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	margin-top: 50px
}

.hours-card {
	background: var(--white);
	padding: 30px;
	border: 1px solid var(--gray-100)
}

.hours-card h3 {
	font-size: 20px;
	margin-bottom: 20px;
	color: var(--gray-800)
}

.hours-list {
	list-style: none;
	padding: 0
}

.hours-list li {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid var(--gray-100)
}

.hours-list li:last-child {
	border-bottom: none
}

@media (max-width:1200px) {
	.contact-form-container {
		grid-template-columns: 1fr;
		max-width: 800px
	}

	.contact-form-image {
		display: none
	}
}

@media print {
	.contact-card {
		break-inside: avoid;
		box-shadow: none;
		border: 1px solid var(--gray-200)
	}

	.map-section,
	.submit-btn {
		display: none
	}
}

.get-in-touch-section {
	padding: 80px 0;
	background: linear-gradient(135deg, var(--white) 0, var(--bg-color-light) 100%);
	position: relative;
	overflow: hidden
}

.get-in-touch-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: .05;
	z-index: 0
}

.get-in-touch-container {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px
}

.section-title {
	text-align: center;
	margin-bottom: 50px
}

.section-title h2 {
	font-size: 36px;
	font-weight: 700;
	color: var(--gray-900);
	margin-bottom: 15px
}

.section-title p {
	font-size: 18px;
	color: var(--gray-700);
	max-width: 600px;
	margin: 0 auto;
	line-height: 1.6
}

.contact-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	margin-top: 40px
}

.contact-card {
	background: var(--white);
	padding: 40px;
	border-radius: 20px;
	box-shadow: 0 15px 40px rgba(0, 0, 0, .08);
	border: 1px solid var(--gray-100);
	transition: .3s;
	display: flex;
	align-items: flex-start;
	gap: 25px
}

.contact-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, .12)
}

.contact-card-icon {
	width: 60px;
	height: 60px;
	background: var(--primary-color-light);
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: .3s
}

.contact-card:hover .contact-card-icon {
	background: var(--primary-color)
}

.contact-card-icon i {
	font-size: 24px;
	color: var(--primary-color);
	transition: .3s
}

.contact-card-content {
	flex: 1
}

.contact-card-content h3 {
	font-size: 22px;
	font-weight: 600;
	color: var(--gray-900);
	margin-bottom: 12px
}

.contact-card-content p {
	font-size: 16px;
	color: var(--gray-700);
	line-height: 1.6;
	margin-bottom: 15px
}

.contact-card-content .contact-info a,
.contact-info a {
	color: var(--primary-color);
	font-weight: 500;
	text-decoration: none;
	display: flex
}

.contact-card-content .contact-info {
	display: flex;
	flex-direction: column;
	gap: 10px
}

.contact-card-content .contact-info a {
	font-size: 16px;
	align-items: center;
	gap: 10px;
	transition: .3s
}

.contact-card-content .contact-info i {
	font-size: 18px
}

@media (max-width:992px) {
	.contact-grid {
		grid-template-columns: 1fr;
		gap: 25px
	}

	.contact-card {
		padding: 30px
	}

	.section-title h2 {
		font-size: 32px
	}
}

@media (max-width:768px) {

	.contact-form-section,
	.get-in-touch-section {
		padding: 40px 0
	}

	.contact-form-content {
		padding: 30px
	}

	.contact-form-content .section-header h2,
	.section-title h2 {
		font-size: 28px
	}

	.contact-form-content .section-header p,
	.section-title p {
		font-size: 16px
	}

	.form-row {
		grid-template-columns: 1fr;
		gap: 20px
	}

	.form-group label {
		font-size: 14px
	}

	.form-group input,
	.form-group select,
	.form-group textarea {
		padding: 12px 16px;
		font-size: 14px
	}

	.section-title {
		margin-bottom: 40px
	}

	.contact-card {
		padding: 20px;
		gap: 20px
	}

	.contact-card-icon {
		width: 50px;
		height: 50px
	}

	.contact-card-content h3,
	.contact-card-icon i {
		font-size: 20px
	}

	.contact-card-content p {
		font-size: 15px
	}
}

@media (max-width:576px) {
	.contact-form-content {
		padding: 20px
	}

	.contact-form-content .section-header h2,
	.section-title h2 {
		font-size: 24px
	}

	.form-group.form-checkbox {
		padding: 12px
	}

	.contact-form .btn.primary-btn {
		padding: 16px 24px;
		font-size: 14px
	}

	.get-in-touch-section {
		padding: 30px 0
	}

	.contact-card {
		padding: 15px;
		flex-direction: column;
		align-items: center;
		text-align: center
	}

	.contact-card-content .contact-info a {
		justify-content: center
	}
}

@media (min-width:577px) {
	.contact-card:hover {
		transform: var(--hover-transform);
		box-shadow: 0 20px 40px rgba(0, 0, 0, .12)
	}

	.contact-card-icon {
		transition: background var(--transition-speed)
	}

	.contact-card:hover .contact-card-icon {
		background: var(--primary-color)
	}

	.contact-card:hover .contact-card-icon i {
		color: var(--white)
	}
}

.contact-info a {
	align-items: center;
	gap: 8px;
	backface-visibility: hidden
}

.contact-form-container {
	display: grid;
	grid-template-columns: 1fr;
	max-width: 800px;
	margin: 0 auto;
	contain: layout style
}

.form-control {
	width: 100%;
	padding: clamp(12px, 2vw, 15px);
	border: 2px solid var(--gray-200);
	border-radius: 12px;
	background-color: var(--white)
}