/*================================================
GLOBAL STYLES (ALL DEVICES)
================================================*/

header {
	position: sticky;
	top: 0;
	z-index: 1000;
}

/*////////////Sticky header////////////////*/

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content {
	font-family: 'Raleway', sans-serif !important;
}

/*/////Adds font to navigation in header////*/

.service-card {
	overflow: hidden;
	transition: transform .3s ease;
}

.service-card:hover {
	transform: scale(1.03);
}

/*Creates effect for blocks with service card class */

.cover-block-1,
.cover-block-2,
.cover-block-3 {
	cursor: pointer !important;
}

/*//////Shows pointer cursor on clickable covers//*/


/*================================================
DESKTOP STYLES (769px+)
================================================*/

@media (min-width: 769px) {

	.hero-btn .wp-block-button__link {
		font-size: 20px !important;
		border-radius: 5px !important;
	}

	/*//////Controls both hero buttons desktop/////*/

	.hero-section .wp-block-buttons {
		gap: 5px !important;
		justify-content: flex-start !important;
	}

	/*////////Gap + align hero buttons desktop//////*/

	.hero-section {
		padding-right: 60% !important;
	}

	/*//////Shifts hero content left desktop////////*/

	.hero-section .wp-block-cover__background {
		-webkit-mask-image: linear-gradient(
			to right,
			rgba(0,0,0,1) 50%,
			rgba(0,0,0,0) 100%
		) !important;

		mask-image: linear-gradient(
			to right,
			rgba(0,0,0,1) 40%,
			rgba(0,0,0,0) 50%
		) !important;
	}

	/*//////Hero overlay fades left to right////////*/
}


/*================================================
MOBILE STYLES (768px and below)
================================================*/

@media (max-width: 768px) {

	.wp-block-navigation__responsive-container-open {
		background: #3D3D3D !important;
		border-radius: 8px !important;
		padding: 10px 22px !important;
		border: none !important;
		min-width: 64px !important;
		min-height: 44px !important;
	}

	/*///////Adjusts hamburger button//////*/

	.wp-block-navigation__responsive-container-open svg {
		display: none !important;
	}

	/*///hides default hamburger icon to swap//*/

	.wp-block-navigation__responsive-container-open::before {
		content: '';
		display: block;
		width: 25px;
		height: 2px;
		background: #ffffff;
		box-shadow: 0 7px 0 #ffffff, 0 14px 0 #ffffff;
	}

	/*/////////////Our hamburger icon///////////*/

	.wp-block-navigation__responsive-container.is-menu-open {
		background: #3D3D3D !important;
	}

	/*//////////Hamburger menu background///////*/

	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
		font-family: 'Montserrat', sans-serif !important;
		color: #ffffff !important;
		font-size: 26px !important;
		padding: 18px 20px !important;
		border-bottom: 1px solid rgba(255,255,255,0.1) !important;
		text-align: center !important;
		justify-content: center !important;
		display: flex !important;
	}

	/*//adjusts text inside the hamburger menu//*/

	.wp-block-navigation__responsive-container-close {
		color: #ffffff !important;
	}

	/*////////X close button on burger menu/////*/

	.hero-btn .wp-block-button__link {
		font-size: 15px !important;
		padding: 12px !important;
		border-radius: 1px !important;
	}

	/*//////Controls both hero buttons mobile/////*/

	.hero-section .wp-block-buttons {
		gap: 5px !important;
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
	}

	/*////////Gap + side by side hero buttons mobile*/

	.hero-section {
		padding-right: 5% !important;
	}

	/*//////Shifts hero content left mobile////////*/

}

/*================================================
END
================================================*/