/* HEADER SOCIAL ICONS */
.header-social3 {
	display: flex !important;
	border-left: 1px solid #e6e3e9 !important;
}

.header-social3 a {
	display: inline-flex !important;
	width: 50px !important;
	height: 40px !important;
	justify-content: center !important;
	align-items: center !important;
	border-right: 1px solid #e6e3e9 !important;
	color: #3853a4 !important;
	transition: all 300ms ease-in !important;
	background-color: transparent !important;
	text-decoration: none !important;
	position: relative !important;
}

.header-social3 a i {
	color: inherit !important;
	font-size: 16px !important;
	transition: color 300ms ease-in !important;
}

/* Procore icon using ::before for proper layer handling */
.header-social3 .procore-icon::before {
	content: "" !important;
	width: 18px !important;
	height: 18px !important;
	background-image: url('https://mdm.qswebdev.us/Portals/0/ThemePluginPro/uploads/2025/7/14/Procore-Icon.png') !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	display: block !important;
	filter: none !important;
	transition: filter 300ms ease-in !important;
}

/* All icons: change background and text on hover */
.header-social3 a:hover {
	color: #ffffff !important;
	background-color: #3853a4 !important;
}

/* Procore: on hover, change PNG to white */
.header-social3 .procore-icon:hover::before {
	filter: brightness(0) invert(1) !important;
}