/**********************************************************
// Footer 
**********************************************************/

.Footer {
	background: url('../Images/Footer-BG.webp');
	background-size: cover;
	background-position: top center; 
	padding: 100px 30px 50px;
}

.Footer-Inner {
	display: flex;
	margin: 0 auto;
	max-width: 1100px;
	gap: 3em;
	justify-content: space-between;
}

.Footer-Contact-Info {
	flex-basis: 42%;
}

.Footer-Contact-Info .Icon {
	display: flex;
	gap: 1em;
	font-weight: bold;
	margin: 25px 0;
	font-size: 16px;
	line-height: 1.5em;
}

.Footer-Contact-Info a.Icon:hover { color: var(--Alt); }
.Footer-Contact-Info a.Icon { color: var(--Dark); }

.Footer-Social { margin-bottom: 40px; }
.Footer-Social li a:hover { color: var(--Alt); }
.Footer-Social li a { color: var(--Dark); font-size: 30px; }

.Footer-Nav h3 { margin-bottom: 30px; }

.Footer-Nav ul li { display: block; margin: 20px 0; }
.Footer-Nav ul li a {
	color: var(--Dark);
	font-weight: bold;
	font-size: 16px;
}

.Footer-Nav ul li a:hover { color: var(--Alt); }

/**********************************************************
// ICON LINKS
**********************************************************/

.Icon { position: relative; }
.Icon:before {
	content: "\f0e0";
	font-family: "Font Awesome 5 Pro";
	font-weight: 700;
	font-size: 25px;
	flex-basis: 28px;
}

.Icon.Icon-Phone:before { content: "\f095"; }
.Icon.Icon-Location:before { content: "\f041"; }

/**********************************************************
// Footer >> Meta
**********************************************************/
.Footer-Meta a { color: var(--Dark); }
.Footer-Meta a:hover { color: var(--Alt); }
.Footer-Meta {
	max-width: 1100px;
	margin: 80px auto 0;
	width: 100%;
	line-height: 1.5em;
	text-align: left;
	text-transform: uppercase;
	color: var(--Dark);
	font-weight: 700;
	font-size: 10px;
	}

/**********************************************************
// Media Queries
**********************************************************/
@media
all and (max-width: 950px),
all and (max-device-width: 950px)
{
	
	.Footer { padding-top: 70px; }
	.Footer-Inner { flex-direction: column; gap: 2em; text-align: center; }
	.Footer-Contact-Info .Icon { justify-content: center; }
	.Footer-Meta { text-align: center; }
}

@media
all and (max-width: 500px),
all and (max-device-width: 500px)
{
	.Footer { padding-top: 50px; }
	.Footer-Contact-Info .Icon { flex-direction: column; gap: .25em; }
}