/* ==========================================================================
   FTG Max Mega Menu
   ========================================================================== */

:root {
	--ftg-red: #ea1c2d;
	--ftg-red-dark: #c71624;
	--ftg-ink: #000f23;
	--ftg-mist: #cbd5e1;
	--ftg-off: #f7f8fa;
	--ftg-font-head: "Open Sans", sans-serif;
}

/* --------------------------------------------------------------------------
   View All Services
   -------------------------------------------------------------------------- */

#mega-menu-wrap-primary
#mega-menu-primary
li.mm-viewall {
	width: 100% !important;
	float: none !important;
	clear: both;
	margin: 0 !important;
}

#mega-menu-wrap-primary
#mega-menu-primary
li.mm-viewall > a.mega-menu-link {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	padding: 16px 20px !important;
	border-top: 1px solid var(--ftg-mist) !important;
	background: var(--ftg-off) !important;
	color: var(--ftg-ink) !important;
	font-family: var(--ftg-font-head) !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.08em !important;
	text-align: center !important;
	text-transform: uppercase !important;
}

#mega-menu-wrap-primary
#mega-menu-primary
li.mm-viewall > a.mega-menu-link::after {
	content: "→";
	display: inline-block;
	transition: transform 0.15s ease;
}

#mega-menu-wrap-primary
#mega-menu-primary
li.mm-viewall > a.mega-menu-link:hover,
#mega-menu-wrap-primary
#mega-menu-primary
li.mm-viewall > a.mega-menu-link:focus {
	background: var(--ftg-off) !important;
	color: var(--ftg-red) !important;
}

#mega-menu-wrap-primary
#mega-menu-primary
li.mm-viewall > a.mega-menu-link:hover::after,
#mega-menu-wrap-primary
#mega-menu-primary
li.mm-viewall > a.mega-menu-link:focus::after {
	transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   View All Projects
   -------------------------------------------------------------------------- */

@media only screen and (min-width: 769px) {
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mm-arrow-link
	> a.mega-menu-link {
		border-bottom: 1px solid transparent !important;
		font-family: var(--ftg-font-head) !important;
		font-weight: 700 !important;
		letter-spacing: 0.04em !important;
		text-transform: uppercase !important;
	}

	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mm-arrow-link
	> a.mega-menu-link::after {
		content: "→";
		display: inline-block;
		margin-left: 6px;
		transition: transform 0.15s ease;
	}

	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mm-arrow-link
	> a.mega-menu-link:hover,
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mm-arrow-link
	> a.mega-menu-link:focus {
		border-bottom-color: var(--ftg-red) !important;
		color: var(--ftg-red) !important;
	}

	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mm-arrow-link
	> a.mega-menu-link:hover::after,
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mm-arrow-link
	> a.mega-menu-link:focus::after {
		transform: translateX(4px);
	}
}

/* --------------------------------------------------------------------------
   Request a Quote
   -------------------------------------------------------------------------- */

@media only screen and (min-width: 769px) {
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mm-cta-button {
		margin-left: 12px !important;
	}

	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mm-cta-button
	> a.mega-menu-link {
		height: auto !important;
		margin-top: 7px !important;
		padding: 12px 22px !important;
		border-radius: 3px !important;
		background: var(--ftg-red) !important;
		color: #fff !important;
		font-family: var(--ftg-font-head) !important;
		font-size: 13px !important;
		font-weight: 700 !important;
		line-height: 1.4 !important;
		letter-spacing: 0.05em !important;
		text-transform: uppercase !important;
		transition:
			background-color 0.15s ease,
			transform 0.15s ease;
	}

	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mm-cta-button
	> a.mega-menu-link:hover,
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mm-cta-button
	> a.mega-menu-link:focus {
		background: var(--ftg-red-dark) !important;
		color: #fff !important;
		transform: translateY(-1px);
	}
}

/* Mobile CTA */

@media only screen and (max-width: 768px) {
	#mega-menu-wrap-primary
	#mega-menu-primary
	li.mm-cta-button
	> a.mega-menu-link {
		margin: 12px 10px !important;
		padding: 13px 18px !important;
		border-radius: 3px !important;
		background: var(--ftg-red) !important;
		color: #fff !important;
		text-align: center !important;
	}
}

/* ==========================================================================
   Desktop navigation alignment
   Keep the complete menu centered inside the screen.
   ========================================================================== */

@media only screen and (min-width: 922px) {

	/* Allow the navigation to use the full header width */
	.main-header-bar .ast-container {
		width: 100%;
		max-width: 100%;
		padding-right: 20px;
		padding-left: 20px;
	}

	.ast-main-header-bar-alignment,
	.main-header-bar-navigation,
	#mega-menu-wrap-primary {
		width: 100% !important;
		margin-right: 0 !important;
		margin-left: 0 !important;
	}

	/* Center all top-level menu items */
	#mega-menu-wrap-primary #mega-menu-primary {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		white-space: nowrap;
	}

	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-menu-item {
		display: block !important;
		flex: 0 0 auto;
		float: none !important;
	}

	/* Consistent navigation height */
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-menu-item
	> a.mega-menu-link {
		display: flex !important;
		align-items: center;
		height: 48px !important;
		padding: 0 16px !important;
		line-height: 48px !important;
	}

	/* Keep the quote button vertically centered */
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mm-cta-button
	> a.mega-menu-link {
		height: auto !important;
		margin: 0 0 0 12px !important;
		padding: 12px 22px !important;
		line-height: 1.4 !important;
	}
}

/* Slightly compact the menu on smaller laptops */
@media only screen and (min-width: 922px) and (max-width: 1200px) {

	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-menu-item
	> a.mega-menu-link {
		padding-right: 10px !important;
		padding-left: 10px !important;
		font-size: 12px !important;
	}

	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mm-cta-button
	> a.mega-menu-link {
		margin-left: 6px !important;
		padding: 10px 15px !important;
		font-size: 12px !important;
	}
}

/* Clean up the About FTG dropdown */
@media only screen and (min-width: 922px) {

	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-menu-flyout
	> ul.mega-sub-menu {
		width: 330px !important;
	}

	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-menu-flyout
	> ul.mega-sub-menu
	> li.mega-menu-item
	> a.mega-menu-link {
		padding: 12px 20px !important;
		font-size: 15px !important;
		line-height: 1.4 !important;
	}
}

/* ==========================================================================
   Full-width FTG navigation bar
   ========================================================================== */

@media only screen and (min-width: 922px) {

	/* Break the black menu bar out of Astra's constrained container */
	#mega-menu-wrap-primary {
		position: relative;
		left: 50%;
		width: 100vw !important;
		max-width: none !important;
		margin-right: -50vw !important;
		margin-left: -50vw !important;
		background: #1d1d1d !important;
		box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
	}

	/* Center menu contents within the full-width bar */
	#mega-menu-wrap-primary #mega-menu-primary {
		display: flex !important;
		align-items: stretch;
		justify-content: center;
		width: min(100%, 1240px) !important;
		min-height: 58px;
		margin: 0 auto !important;
		padding: 0 20px !important;
		white-space: nowrap;
	}

	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-menu-item {
		position: relative;
		display: flex !important;
		align-items: stretch;
		float: none !important;
		margin: 0 !important;
	}

	/* Top-level navigation links */
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-menu-item
	> a.mega-menu-link {
		position: relative;
		display: flex !important;
		align-items: center;
		height: 58px !important;
		padding: 0 20px !important;
		border: 0 !important;
		background: transparent !important;
		color: #fff !important;
		font-family: "Open Sans", sans-serif !important;
		font-size: 13px !important;
		font-weight: 700 !important;
		line-height: 1.3 !important;
		letter-spacing: 0.07em !important;
		text-transform: uppercase !important;
		transition:
			color 0.2s ease,
			background-color 0.2s ease;
	}

	/* Subtle separation between navigation items */
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-menu-item:not(:first-child):not(.mm-cta-button)::before {
		position: absolute;
		top: 18px;
		bottom: 18px;
		left: 0;
		width: 1px;
		background: rgba(255, 255, 255, 0.13);
		content: "";
	}

	/* Red animated underline */
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-menu-item:not(.mm-cta-button)
	> a.mega-menu-link::before {
		position: absolute;
		right: 20px;
		bottom: 0;
		left: 20px;
		display: block !important;
		height: 3px;
		background: var(--ftg-red);
		content: "";
		transform: scaleX(0);
		transform-origin: center;
		transition: transform 0.2s ease;
	}

	/* Top-level hover and active states */
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-menu-item:not(.mm-cta-button)
	> a.mega-menu-link:hover,
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-menu-item:not(.mm-cta-button)
	> a.mega-menu-link:focus,
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-menu-item.mega-toggle-on
	> a.mega-menu-link,
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-current-menu-item
	> a.mega-menu-link,
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-current-menu-ancestor
	> a.mega-menu-link {
		background: rgba(255, 255, 255, 0.08) !important;
		color: #fff !important;
	}

	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-menu-item:not(.mm-cta-button)
	> a.mega-menu-link:hover::before,
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-menu-item:not(.mm-cta-button)
	> a.mega-menu-link:focus::before,
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-menu-item.mega-toggle-on
	> a.mega-menu-link::before,
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-current-menu-item
	> a.mega-menu-link::before,
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-current-menu-ancestor
	> a.mega-menu-link::before {
		transform: scaleX(1);
	}

	/* Dropdown indicator */
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-menu-item-has-children
	> a.mega-menu-link
	> .mega-indicator {
		margin-left: 8px;
		opacity: 0.75;
	}

	/* Request a Quote button */
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mm-cta-button {
		align-items: center;
		margin-left: 14px !important;
	}

	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mm-cta-button
	> a.mega-menu-link {
		height: auto !important;
		margin: 0 !important;
		padding: 12px 24px !important;
		border: 2px solid var(--ftg-red) !important;
		border-radius: 3px !important;
		background: var(--ftg-red) !important;
		color: #fff !important;
		line-height: 1.3 !important;
		box-shadow: 0 3px 8px rgba(234, 28, 45, 0.24);
	}

	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mm-cta-button
	> a.mega-menu-link:hover,
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mm-cta-button
	> a.mega-menu-link:focus {
		border-color: var(--ftg-red-dark) !important;
		background: var(--ftg-red-dark) !important;
		color: #fff !important;
		transform: translateY(-1px);
	}
}

/* Compact desktop styling for smaller screens */
@media only screen and (min-width: 922px) and (max-width: 1150px) {

	#mega-menu-wrap-primary #mega-menu-primary {
		padding-right: 10px !important;
		padding-left: 10px !important;
	}

	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-menu-item
	> a.mega-menu-link {
		padding-right: 12px !important;
		padding-left: 12px !important;
		font-size: 14.5px !important;
		letter-spacing: 0.04em !important;
	}

	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mm-cta-button
	> a.mega-menu-link {
		padding: 10px 15px !important;
	}
}
/* Vertically center top-level dropdown carets */
@media only screen and (min-width: 922px) {

	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-menu-item-has-children
	> a.mega-menu-link
	> span.mega-indicator {
		position: static !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		align-self: center;
		height: 18px !important;
		margin: 0 0 0 8px !important;
		line-height: 18px !important;
		vertical-align: middle !important;
	}

	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-menu-item-has-children
	> a.mega-menu-link
	> span.mega-indicator::after {
		position: static !important;
		display: block;
		margin: 0 !important;
		line-height: 1 !important;
		transform: translateY(1px);
	}
}
#astra-widget-social-profiles-4 {
    font-size: 31px;
    margin-bottom:0 !important;
}

/* ==========================================================================
   FTG outlined top-level navigation tabs
   ========================================================================== */

@media only screen and (min-width: 922px) {

	/* Add breathing room between top-level items */
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-menu-item:not(.mm-cta-button) {
		align-items: center;
		margin: 0 4px !important;
	}

	/* Faded outlined tabs */
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-menu-item:not(.mm-cta-button)
	> a.mega-menu-link {
		position: relative;
		height: 44px !important;
		padding: 0 18px !important;
		border-radius: 4px !important;
		background:
			linear-gradient(
				135deg,
				rgba(255, 255, 255, 0.07),
				rgba(255, 255, 255, 0.015)
			) !important;
		box-shadow:
			inset 0 0 0 1px rgba(255, 255, 255, 0.17),
			0 1px 2px rgba(0, 0, 0, 0.18);
		color: rgba(255, 255, 255, 0.92) !important;
		overflow: hidden;
		transition:
			color 0.2s ease,
			background 0.2s ease,
			box-shadow 0.2s ease,
			transform 0.2s ease !important;
	}

	/* Soft highlight along the top edge */
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-menu-item:not(.mm-cta-button)
	> a.mega-menu-link {
		border-top: 1px solid rgba(255, 255, 255, 0.13) !important;
	}

	/* Hover and keyboard focus */
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-menu-item:not(.mm-cta-button)
	> a.mega-menu-link:hover,
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-menu-item:not(.mm-cta-button)
	> a.mega-menu-link:focus {
		background:
			linear-gradient(
				135deg,
				rgba(234, 28, 45, 0.24),
				rgba(234, 28, 45, 0.07)
			) !important;
		box-shadow:
			inset 0 0 0 1px rgba(234, 28, 45, 0.75),
			0 4px 12px rgba(0, 0, 0, 0.25);
		color: #fff !important;
		transform: translateY(-2px);
	}

	/* Open dropdown and current-page states */
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-menu-item.mega-toggle-on:not(.mm-cta-button)
	> a.mega-menu-link,
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-current-menu-item:not(.mm-cta-button)
	> a.mega-menu-link,
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-current-menu-ancestor:not(.mm-cta-button)
	> a.mega-menu-link {
		background:
			linear-gradient(
				135deg,
				rgba(234, 28, 45, 0.32),
				rgba(234, 28, 45, 0.10)
			) !important;
		box-shadow:
			inset 0 0 0 1px var(--ftg-red),
			0 3px 10px rgba(0, 0, 0, 0.23);
		color: #fff !important;
	}

	/* Keep carets bright and properly centered */
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-menu-item-has-children
	> a.mega-menu-link
	> span.mega-indicator {
		color: rgba(255, 255, 255, 0.8) !important;
		transition:
			color 0.2s ease,
			transform 0.2s ease;
	}

	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-menu-item-has-children:hover
	> a.mega-menu-link
	> span.mega-indicator,
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-toggle-on
	> a.mega-menu-link
	> span.mega-indicator {
		color: #fff !important;
	}

	/* Rotate the caret slightly when its dropdown is open */
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-toggle-on
	> a.mega-menu-link
	> span.mega-indicator {
		transform: rotate(180deg);
	}

	/* The CTA remains solid red */
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mm-cta-button {
		margin-left: 8px !important;
	}
}

#mega-menu-wrap-primary
#mega-menu-primary
> li.mega-menu-item:not(:first-child):not(.mm-cta-button)::before {
	display: none !important;
}

/* Position first-level submenus below the 58px black menu bar */
@media only screen and (min-width: 922px) {

	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-menu-item
	> ul.mega-sub-menu {
		top: 58px !important;
		margin-top: 0 !important;
		transform-origin: top center;
	}

	/* Services mega menu */
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-menu-megamenu
	> ul.mega-sub-menu {
		top: 58px !important;
	}

	/* About FTG flyout */
	#mega-menu-wrap-primary
	#mega-menu-primary
	> li.mega-menu-flyout
	> ul.mega-sub-menu {
		top: 58px !important;
	}
}
