/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.5.1768943396
Updated: 2026-01-20 14:09:56

*/

:root {
	--logo-url: url("/wp-content/uploads/2026/01/Guardian-Pest-Control-Logo-300x81.png");
	--phone-default: url("data:image/svg+xml,%3Csvg                  xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M160.2 25C152.3 6.1 131.7-3.9 112.1 1.4l-5.5 1.5c-64.6 17.6-119.8 80.2-103.7 156.4 37.1 175 174.8 312.7 349.8 349.8 76.3 16.2 138.8-39.1 156.4-103.7l1.5-5.5c5.4-19.7-4.7-40.3-23.5-48.1l-97.3-40.5c-16.5-6.9-35.6-2.1-47 11.8l-38.6 47.2C233.9 335.4 177.3 277 144.8 205.3L189 169.3c13.9-11.3 18.6-30.4 11.8-47L160.2 25z'/%3E%3C/svg%3E");
	--phone-green:   url("data:image/svg+xml,%3Csvg fill='%23a4c427' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M160.2 25C152.3 6.1 131.7-3.9 112.1 1.4l-5.5 1.5c-64.6 17.6-119.8 80.2-103.7 156.4 37.1 175 174.8 312.7 349.8 349.8 76.3 16.2 138.8-39.1 156.4-103.7l1.5-5.5c5.4-19.7-4.7-40.3-23.5-48.1l-97.3-40.5c-16.5-6.9-35.6-2.1-47 11.8l-38.6 47.2C233.9 335.4 177.3 277 144.8 205.3L189 169.3c13.9-11.3 18.6-30.4 11.8-47L160.2 25z'/%3E%3C/svg%3E");
}

body {

	strong {
		font-weight: bold;
	}

}




/*******************************************  HEADER  *****************************************************/

@media screen and (max-width: 1024px) {
	header.elementor-location-header > div.elementor-element:has(ul.elementor-nav-menu)::before {
		content: '';
		display: block;
		position: absolute;
		transform: translateY(-50%);
		left: 20px;
		top: 50%;
		width: 100%;
		max-width: calc(100% - 90px);
		height: calc(100% - 8px);
		background: transparent no-repeat left center / contain var(--logo-url);
		border: none;
	}
}

@media screen and (min-width: 1025px) {
	header.elementor-location-header ul.elementor-nav-menu {
		li.logo > a {
			position: relative;
			color: transparent !important;
			min-width: 220px;
			margin: 10px 15px 6px;

			&::after {
				content: '';
				display: block;
				position: absolute;
				opacity: 1 !important;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: transparent no-repeat center center / contain var(--logo-url);
			}
		}
	}
}

header.elementor-location-header ul.elementor-nav-menu {

	li.button > a {
		position: relative;
		white-space: nowrap;

		&::before {
			content: '';
			display: block;
			position: absolute;
			opacity: 1 !important;
			transform: translateX(-50%) translateY(-50%);
			left: 50%;
			top: 50%;
			width: 95%;
			height: 2em;
			border-radius: 2em;
			background-color: #a4c427;
			z-index: -1;
		}

		&:hover::before {
			background-color: #1f232b;
		}
	}

	li.phone > a {
		position: relative;
		margin-left: 20px;

		&::before {
			content: '';
			display: block;
			position: absolute;
			opacity: 1 !important;
			transform: translateY(calc(-50% + 1px));
			left: 0;
			top: 50%;
			width: 20px;
			height: 100%;
			background: transparent var(--phone-default) no-repeat center center / contain;
		}

		&:hover::before {
			transform: translateY(calc(-50%)) rotateY(180deg);
		}
		
	}
	
}

@media screen and (max-width: 1024px) {
	header.elementor-location-header ul.elementor-nav-menu {
		
		li.logo {
			display: none;
		}

		li.button > a {
			color: #1e232c !important;
			font-weight: bold !important;

			&:hover {
				background-color: initial !important;
				color: #fff !important;
			}
	
			/* &::before {
				background-color: #fff;
			} */

			&:hover::before {
				background-color: #a4c427;
			}
		}

		li.phone > a {
			padding-left: 30px;
			font-weight: bold !important;

			&:hover {
				background-color: initial !important;
			}
			
			&::before {
				background-image: var(--phone-green);
			}
		}
		
	}
}

/*******************************************  END HEADER  *****************************************************/








/*******************************************  QUICK CONTACT HIGHLIGHT EFFECT  *****************************************************/

.jump-highlight {
	position: relative;
	overflow: hidden;
	animation: jump-glow 0.4s ease-out;
}

.jump-highlight::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		110deg,
		transparent 0%,
		transparent 35%,
		rgba(255, 255, 255, 0.9) 48%,
		rgba(255, 255, 255, 0.5) 52%,
		transparent 65%,
		transparent 100%
	);
	transform: translateX(-100%);
	animation: jump-light-sweep 0.4s ease-out forwards;
}

@keyframes jump-light-sweep {
	from { transform: translateX(-100%); }
	to   { transform: translateX( 100%); }
}

@keyframes jump-glow {
	0%   { filter: brightness(1);    }
	20%  { filter: brightness(1.8);  }
	45%  { filter: brightness(1.35); }
	100% { filter: brightness(1);    }
}

/*******************************************  END QUICK CONTACT HIGHLIGHT EFFECT  *****************************************************/