@use "../utils" as *;

/*----------------------------------------*/
/*  CONTACT CSS START
/*----------------------------------------*/
.contact-info-item {
	padding: 40px 40px;
	box-shadow: 0px 4px 25px 0px #0000000f;
	@media #{$xxs} {
		padding: 30px 30px;
	}
}
.contact-info-icon {
	margin-bottom: 20px;
	span {
		height: 80px;
		width: 80px;
		background: var(--clr-theme-primary);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 30px;
		color: var(--clr-common-white);
		border-radius: 50%;
	}
}
.contact-info-content {
	p {
		margin-bottom: 0;
		a {
			&:hover {
				color: var(--clr-theme-secondary);
			}
		}
	}
	h4 {
		margin-bottom: 10px;
		font-size: 20px;
	}
	span {
		display: block;
		a {
			&:hover {
				color: var(--clr-theme-secondary);
			}
		}
	}
}
.contact-map {
	iframe {
		height: 655px;
		width: 100%;
		mix-blend-mode: luminosity;
	}
}
.contact-from {
	background: var(--clr-theme-primary);
	padding: 60px 60px;
	@media #{$xs, $sm, $lg, $xl} {
		padding: 40px 40px;
	}
	@media #{$md} {
		padding: 50px 50px;
	}
	@media #{$xxs} {
		padding: 25px 20px;
	}
}

.contact {
	&__from {
		&-input {
			margin-bottom: 30px;
			input {
				width: 100%;
				height: 59px;
				@include flexbox();
				align-items: center;
				justify-content: center;
				padding: 0 23px;
				background-color: var(--clr-common-white);
				font-size: 15px;
				border: none;
				color: var(--clr-text-body);
				outline: none;
			}
			textarea {
				width: 100%;
				background-color: var(--clr-common-white);
				border: none;
				padding: 0px 25px;
				outline: 0;
				min-height: 185px;
				color: #777a7e;
				resize: none;
				@extend %bd-transition;
			}
		}
	}
	&__select {
		position: relative;
		&:after {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			content: "";
			width: 0;
			height: 0;
			border-left: 7px solid transparent;
			border-right: 7px solid transparent;
			border-top: 8px solid var(--clr-theme-primary);
			right: 15px;
		}
		select {
			height: 60px;
			padding: 0 23px;
			line-height: 60px;
			width: 100%;
			background-color: var(--clr-common-white);
			border: 0 !important; /*Removes border*/
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			text-overflow: "";
			text-indent: 0.01px; /* Removes default arrow from firefox*/
			text-overflow: ""; /*Removes default arrow from firefox*/
			color: var(--clr-common-placeholder);
			&::-ms-expand {
				display: none;
			}
		}
	}
}
.contact__info-icon {
	span {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		height: 50px;
		width: 50px;
		background: var(--clr-bg-4);
		border-radius: 5px;
	}
}
.contact__info-item {
	text-align: center;
}
.contact__info-text {
	padding: 60px 27px 35px 27px;
	box-shadow: 0px 4.8px 24.4px 0px rgba(19, 16, 34, 0.1);
	margin-top: -25px;
	background: var(--clr-common-white);
	border-radius: 5px;
	h4 {
		font-weight: 700;
		margin-bottom: 5px;
	}
	span {
		color: var(--clr-text-2);
		font-weight: 500;
		a {
			&:hover {
				color: var(--clr-theme-primary);
			}
		}
	}
}
.contact__info-main {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	position: relative;
	z-index: 11;
	max-width: 860px;
	margin: 0 auto;
	@media #{$md,$sm} {
		grid-template-columns: repeat(2, 1fr);
	}
	@media #{$xs} {
		grid-template-columns: repeat(1, 1fr);
	}
}
