@import "@{parenturl}/less/mixins.less";
@import "@{themeurl}/less/vars.less";

body {
	background-image:url('/wp-content/uploads/2021/10/background.jpg');
	background-size:cover;
	background-position:center;
	background-attachment:fixed;
}

.button {
	display:block;
	.font(Montserrat, 600, 24px);
	letter-spacing:.1em;
	.margin-sides(auto);
	text-align:center;
	text-transform:uppercase;
	padding:.5em 1em;
	width:fit-content;
	.hover();
	.blur(5px);
	border:1px solid @orange;
	background-color:@orange;
	color:#fff;
	&:hover {
		background-color:fade(#fff, 25);
		color:@orange;
	}
}

#before-footer {
	background-image:url('/wp-content/uploads/2021/10/footer.jpg');
	background-size:cover;
	background-position:center;
	.dcmo_block {
		.padding-ends(50px);
	}
}

#footer-info {
	align-self:center;
	justify-self:center;
	text-align:center;
	color:@blue;
	.font(Montserrat, 500, 28px);
	text-align:center;
	* {
		.inherit();
		.font();
	}
	img {
		margin-bottom:50px;
	}
	address {
		text-align:center;
		margin-bottom:10px;
	}
}
#contact-us {
	h5 {
		color:@blue;
		.font(Montserrat, 400, 54px);
		.max({ font-size:36px; });
		margin:0 auto 25px;
		text-align:center;
		text-transform:uppercase;
	}
	.better-input {
		.max-width(720px);
		display:grid;
		grid-gap:0 25px;
		@media (min-width:769px) {
			grid-template-columns:1fr 1fr;
			.your-message {
				grid-column:2;
				grid-row:1 / span 3;
			}
			> div:last-child { grid-column:1 / span 2; }
		}
	}

}

/**** Full BORDER Color ****/
.wpcf7 {
	> .wpcf7-form-control-wrap {
		position: relative;
		background-color:fade(@blue, 80);
		border:none;
		margin-bottom:0;
		display:block;
		margin-top: 1.75em;
		color:#fff;
		.font(Montserrat, 400, 16px);
		.blur(5px);
	}
	form > div {
		margin-bottom: 10px;
		.inherit();
		.font();

		*::placeholder { color: rgba(0,0,0,0); opacity: 0; }
		*:-ms-input-placeholder { color: rgba(0,0,0,0); }
		*::-ms-input-placeholder { color: rgba(0,0,0,0); }
		*:-moz-input-placeholder { color: rgba(0,0,0,0); }
		*::-moz-input-placeholder { color: rgba(0,0,0,0); }

		* {
			color:inherit;
			border:0;
			padding: 1px 2px;
			background: transparent;
			resize:none;
		}

		input:not([type=radio],[type=checkbox],[type=submit]), select, textarea {
			color:inherit;
			font-size:inherit;
			font-weight:inherit;
			font-family:inherit;
			padding:.7em;
			width:98%;
			box-shadow: 6px 6px 10px 0px #58595b;
			&:focus {
				outline:none;
			}
		}
		.wpcf7-not-valid-tip {
			margin-top: 10px;
		}
		textarea {
			height:150px;
		}
		select {
			display:block;
			width:100%;
			margin-bottom:5px;
		}

		label {
			display: block;
			color: #003768;
			font-size: 1.2em;
			line-height: 1.2em;
		}
		.req {
			color:#FF4136;
			.transition(.3s, color, @easing);
		}

		*:focus:not(:placeholder-shown) + label,
		*:focus + label,
		*:focus:not(:placeholder-shown) + label .req,
		*:focus + label .req {
			color:@orange; // Inputting
		}
		*:not(:placeholder-shown) + label,
		*:not(:placeholder-shown) + label .req {
			color:@blue; // Inputted
		}
		*:focus + label,
		*:not(:placeholder-shown) + label {
			transform: translateY(-1.3em);
			font-size: .8em;
		}
	}
	input[type="checkbox"] {
		margin:0;
		background-color:transparent;
		color:#313131;
	}
	input[type="submit"] {
		.button;
		margin-top:25px;
	}
}

#socials {
	background-color:fade(#58595b, 85);
	padding:25px;

	color:#fff;
	.font(Montserrat, 400, 32px);
	.max({ font-size:24px; });
	text-transform:uppercase;
	display:grid;
	align-items:center;
	justify-items:center;
	grid-gap:25px;
	> div {
		.vertAlign;
		gap:.5em;
	}
	@media (min-width:1281px) {
		grid-template-columns:1fr 2px 1fr;
		> div {
			&:first-child { justify-self:end; }
			&:last-child { justify-self:start; }
		}
	}
	@media (max-width:1280px) {
		grid-template-rows:auto 2px auto;
	}

	h4 {
		display:inline-block;
		margin-right:.5em;
	}

	svg {
		height:1.2em;
		width:auto;
		fill:currentcolor;
	}

	hr {
		width:100%;
		height:100%;
		margin:0;
	}

	* {
		.inherit();
		.font();
	}
}

#footer {
	background-color:#bbbdbf;
	padding:50px 25px 10px;
	> * {
		.max-width(1280px);
		&:not(:last-child) {
			margin-bottom:25px;
		}
	}
	ul.footer-menu {
		display:grid;
		@media (min-width:769px) {
			grid-template-columns:1fr 2fr 1fr;
		}
		grid-gap:25px;
		> li {
			> a {
				.font(inherit, 700, 1.5em);
				display:block;
				text-transform:uppercase;
				border-bottom:1px solid #fff;
				padding:.25em .5em;
			}
		}
		ul {
			margin:10px 15px;
		}
		> li:nth-child(2) {
			ul {
				columns:200px 2;
			}
		}
	}
}