//custom-contact-form
.custom-contact-form {
	padding: 65px 30px 65px 100px;
	.cion {
		width: 36px;
		height: 36px;
		i {
			color: $white;
		}
	}
	.box {
		max-width: 624px;
	}
	@include breakpoint(max-xxl) {
		padding: 60px 24px;
	}
	@include breakpoint(max-xxl) {
		padding: 60px 24px;
		.box {
			max-width: 100%;
		}
	}
}
.form-grp {
	input,
	textarea {
		border-radius: 10px;
		border: 1px solid rgba(3, 23, 64, 0.15);
		padding: 12px 27px;
		color: $pra;
		font-size: 16px;
		width: 100%;
		background: $bg-color-2;
	}
	::placeholder {
		color: $pra;
	}
}
//custom-contact-form

//Not Use bottom Code

//Contact
.contact-forms {
	border-radius: 20px;
	background: #efefef;
	box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.05);
	padding: 40px 40px;
	.nice-select,
	input,
	textarea {
		width: 100%;
		border-radius: 20px;
		border: 2px solid #ddd;
		padding: 10px 20px;
		outline: none;
		color: $pra;
		background: transparent;
	}
	::placeholder {
		color: $pra;
	}
	@include breakpoint(max-md) {
		padding: 30px 20px;
	}
}

//contact-help-box
.map-area {
	iframe {
		width: 100%;
		height: 640px;
	}
	@include breakpoint(max-xxl) {
		iframe {
			height: 470px;
		}
	}
	@include breakpoint(max-md) {
		iframe {
			height: 370px;
		}
	}
	@include breakpoint(max-sm) {
		iframe {
			height: 300px;
		}
	}
}
.contact-help-box {
	padding: 80px 80px;
	background: $white;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	margin-top: -300px;
	position: relative;
	z-index: 1;
	.pragraph {
		max-width: 500px;
	}
	.contact-from-grp {
		input,
		textarea {
			width: 100%;
			border-radius: 10px;
			border: 1px solid rgba(3, 23, 64, 0.1);
			background: #fff;
			font-size: 16px;
			color: $pra;
			padding: 16px 26px;
			outline: none;
		}
		::placeholder {
			color: $pra;
		}
	}
	@include breakpoint(max-xxl) {
		padding: 50px 50px;
		margin-top: 40px;
	}
	@include breakpoint(max-xl) {
		padding: 30px 30px;
	}
	@include breakpoint(max-sm) {
		padding: 28px 24px;
	}
}
.contact-from-grp {
	input,
	textarea {
		width: 100%;
		border-radius: 10px;
		border: 1px solid rgba(3, 23, 64, 0.1);
		background: #fff;
		font-size: 16px;
		color: $pra;
		padding: 16px 26px;
		outline: none;
	}
	::placeholder {
		color: $pra;
	}
}
//Map area

//contact-info-content
.contact-info-content {
	display: flex;
	align-items: center;
	gap: 60px;
	.thumb {
		max-width: 510px;
		img {
			width: 100%;
		}
	}
	.content {
		max-width: 230px;
	}
	@include breakpoint(max-lg) {
		gap: 24px;
	}
	@include breakpoint(max-md) {
		gap: 24px;
		flex-wrap: wrap;
	}
}
.contact-info-tabs {
	display: grid;
	gap: 14px;
	.nav-item {
		.nav-link {
			background: #f0f4fd;
			border-radius: 10px;
			font-size: 18px;
			font-weight: 500;
			color: $black;
			padding: 11px 26px;
			border: unset;
			width: 100%;
			text-align: start;
			transition: all 0.4s;
			&.active,
			&:hover {
				background: $p1-clr;
				color: $white;
			}
		}
	}
}
//contact-info-content