/*************************************************
* Main CSS file for the APS child theme
* All custom CSS is contained here
* Note:  Any styles that can be set in the theme
*		  customizer or page builder are.
*************************************************/
/* @font-face {
    font-family: 'Aboreto';
    src: url('fonts/Aboreto-Regular.woff2') format('woff2'),
         url('fonts/Aboreto-Regular.woff') format('woff'),
         url('fonts/Aboreto-Regular.ttf') format('truetype');
} */
/*************************************************
* General - sitewide
* ***********************************************/
/* :root {
	--vg-yellow: 244, 190, 97;
	--vg-deep-blue: 23, 44, 85;
	--vg-dark-green: 19, 93, 48;
	--vg-lime: 151, 201, 59;
	--vg-river: 24, 161, 212;
} */
#content.site-content, .hero-group .wp-block-group__inner-container{
	padding:  0 !important;
}
.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .one-container .container, .separate-containers .paging-navigation, .inside-page-header {
	background-color: var(--vg-yellow) !important;
}
.hero-group .wp-block-columns, #home-services-group .wp-block-group__inner-container, .outer-group, #footer-widgets > .footer-widgets-container, #services-services > .wp-block-group__inner-container, #services-memberships > .wp-block-group__inner-container {
	margin: auto;
	max-width: 1200px;
}
.copyright-bar {
	display: none;
}
p {
	font-size: 20px !important;
}
p.large-p {
	font-size: 1.5em !important;
}
/*************************************************
* Hero groups
* ***********************************************/
.hero-group .wp-block-column.text-col {
	padding: 30px;
    margin: -100px 30px 30px;
    background: rgba(151, 201, 59, 0.9);
    border-radius: 50px;
    box-shadow: 0 0 10px black;
    z-index: 11;
}
.hero-group h1 {
	color: black;
	font-size: 2em;
}
.hero-group p {
	color:  var(--contrast);
	font-size: 24px;
}
/*************************************************
* Buttons
* ***********************************************/
.wp-block-buttons a.wp-block-button__link {
	background-color: var(--vg-yellow) !important;
	color: black !important;
	box-shadow: 0 5px 0 rgba(0,0,0,0.8);
}
#about-group .wp-block-button, #policy-group .wp-block-button {
	width: 100%;
	margin: 10px 0 50px;
}
#about-group .wp-block-button a, #policy-group .wp-block-button a {
	background-color: var(--vg-deep-blue) !important;
	color: white !important;
	border-radius: 25px;
	width: 100%;
	max-width: 500px;
	height: 70px;
	box-shadow: 0 5px 0 whitesmoke;
}
.service-btn {
	width: 100%;
    max-width: 500px;
    margin: 1.25em 0 calc(3em + 10px) !important;
}
.service-btn a.wp-block-button__link {
	border: 5px solid var(--vg-dark-green);
    background-color: var(--vg-lime) !important;
    color: black !important;
    font-weight: bold;
    height: 100px;
    border-radius: 25px;
    box-shadow: 0 10px 0 rgba(0, 0, 0, 0.85)
}
.service-btn a:hover {
	background: rgba(151, 201, 59, 0.9) !important;
}
/*************************************************
* Homepage
* ***********************************************/
#mission-group::after {
	content: "";
	border-style: none none solid none;
	filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.5));
	position: absolute;
	height: 200px;
	width: 40%;
	min-width: 200px;
	left: 30px;
	top: -10px;
	background: url('https://villagegrooming.springcreekwebdesign.com/wp-content/uploads/2026/07/dog-person-graphic-holding-hands.png') bottom left / 150px 125px no-repeat;
}
#mission-group  {
	position: relative;
	max-width: 1200px;
	margin: auto;
	background: url('https://villagegrooming.springcreekwebdesign.com/wp-content/uploads/2026/07/man-walking-with-dog-green.png') 99% 100% / 125px 150px no-repeat;
	padding:  200px 0 100px;
}
#mission-group p {
	font-size: 32px;
}
#testimonials-group {
	border: 15px solid white;
	margin-left: 30px;
	margin-right: 30px;
	transform: translateY(-20px);
    background: var(--base);
    border-radius: 50px;
    box-shadow: 0 0 10px black;
}
#testimonials-group .ti-inner {
	box-shadow: 0 2px 5px rgba(0,0,0,0.5);
	border: 2px dashed var(--vg-lime) !important;
}
#home-services-group {
	background-color: var(--vg-dark-green);
}
#home-services-group .wp-block-buttons {
	position: absolute;
	bottom: 30px;
	width: 100%;
}
#home-services-group h2, #home-services-group h3, #home-services-group p {
	color:  var(--vg-yellow);
}
.sub-heading {
	font-size: 1em !important;
}
#home-services-group .service-col {
	position: relative;
    border-radius: 50px;
    box-shadow: 0 0 10px black;
}
#home-services-group img {
	border: 15px solid white;
	max-height: 600px;
    width: 100%;
    object-fit: cover;
}
#home-services-group figure, #home-services-group img {
	border-radius: 50px;
	height: 100%;
	object-fit: cover;
}
#home-services-group h4 {
	position: absolute;
	font-size: 16px;
	top: 30px;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	padding: 5px 8px;
	width: 80%;
	box-shadow: 0 0 4px rgba(0,0,0,0.5);
	background: var(--vg-lime);
	border-radius: 50px;
}
/*************************************************
* About
* ***********************************************/
.about-img img {
	border: 5px solid var(--vg-deep-blue);
	border-radius: 25px;
}
#about-group, .about-sub-group {
	margin-top: 5em;
}
#about-group ul, #policy-group ul {
	margin: 0 0 1.5em 1.5em;
}
#about-group .wp-block-group > .wp-block-group__inner-container {
	padding: 0;
}
/*************************************************
* Policies
* ***********************************************/
#policy-group .wp-block-group > .wp-block-group__inner-container {
	padding: 0;
}
#policy-group .wp-block-group:nth-child(odd) {
	background: white;
	padding: 30px;
	border: 5px solid var(--vg-yellow);
	border-radius: 50px;
	box-shadow: 0 0 10px black;
	margin: 4em 0 5em;
}
#policy-group h3 {
	color: var(--vg-deep-blue);
}
/*************************************************
* Services
* ***********************************************/
body.page-id-17 .container {
	background-color: var(--vg-yellow) !important;
}
#services-services {
	background: var(--base);
	padding:  3em 0;
	margin-top: 200px;
	position: relative;
}
#services-memberships {
	background: linear-gradient(180deg, var(--vg-deep-blue) 66%, rgba(23, 44, 85, 0) 100%);
	padding: 3em 0 5em;
	position: relative;
}
#services-memberships h2 {
	color: var(--vg-yellow);
}
.service-group h2 {
	margin: 0 0 1.75em;
}
.service-group h3 {
	font-size: 1.5em !important;
	color: white;
}
.service-group .wp-block-column {
	padding: 30px;
	border: 5px solid var(--vg-yellow);
	border-radius: 25px;
	background-color: var(--vg-deep-blue);
	color: white;
	box-shadow: 0 0 10px black;
}
.service-group .wp-block-column.add-on-service h3 {
	color: black;
}
.service-group .wp-block-column.add-on-service {
	background-color: var(--vg-yellow);
	color: black;
	border: 5px solid var(--vg-deep-blue);
}
.service-group .wp-block-column.membership-option h3 {
	color: var(--vg-deep-blue);
}
.service-group .wp-block-column.membership-option {
	background: var(--base-2);
	color: black;
}
.service-group ul {
	margin: 0 0 1.5em 1.5em;
}
#services-services::after {
	content: "";
	filter: drop-shadow(0 -3px 2px rgba(0,0,0,0.25));
	position: absolute;
	height: 200px;
	width: 100%;
	min-width: 200px;
	left: 0;
	top: -200px;
	background: url('https://villagegrooming.springcreekwebdesign.com/wp-content/uploads/2026/07/man-touching-dog-grass.png') 99% 100% / 210px 100px no-repeat;
}
#services-memberships::after {
	content: "";
	filter: drop-shadow(0 -3px 2px rgba(0,0,0,0.25));
	position: absolute;
	height: 200px;
	width: 100%;
	min-width: 200px;
	left: 0;
	bottom: 0;
	background: url('https://villagegrooming.springcreekwebdesign.com/wp-content/uploads/2026/07/dog-person-graphic-holding-hands-blue.png') 99% 100% / 150px 125px no-repeat;
}
/*************************************************
* Footer
* ***********************************************/
#footer-widgets {
	background-color: var(--vg-deep-blue);
	color: white;
}
#footer-widgets h2, #footer-widgets h3, #footer-widgets a {
	color: var(--vg-yellow);
}
.footer-bar {
	width: 100%;
	max-width: 1200px;
	margin: auto;
	padding: 0 30px;
}
.footer-bar .wp-block-group {
	justify-content: space-between;
}
.footer-bar p, .footer-bar {
	margin: 0;
}
.footer-widget-2 aside, .footer-widget-2 {
	display: flex;
	align-items: center;
	flex-direction: column;
}
.footer-widget-3 img {
	height: 300px;
	width: auto;
}
.footer-widget-3 a {
	float: right;
}
/*************************************************
* Media Queries
* ***********************************************/
@media(min-width: 430px) {
	#home-services-group h4 {
		font-size: 20px;
	}
}
@media(min-width: 600px) {
	#home-services-group h4 {
		font-size: 24px;
	}
}
@media(min-width: 782px) {
	.site-logo img {
		position: absolute;
	    z-index: 10;
	    top: 0;
	    filter: drop-shadow(2px 4px 6px black);
	}
	h1 {
		font-size: 4em !important;
	}
	h2 {
		font-size: 4em !important;
	} 
	h3 {
		font-size: 3em !important;
	}
	#mission-group {
		padding: 200px 100px 100px 0;
	}
	.hero-group .wp-block-column.text-col {
	    margin: 100px 30px;
	    background: rgba(151, 201, 59, 0.8);
	    border: 15px solid white;
	}
	.mobile-cover-img {
		display: none;
	}
	#home-hero {
		background: url('https://villagegrooming.springcreekwebdesign.com/wp-content/uploads/2026/07/home-hero-background-lab-dog-1400w.jpg') 90% 100% / cover no-repeat;
	}
	#about-hero {
		margin: 0;
		background: url('https://villagegrooming.springcreekwebdesign.com/wp-content/uploads/2026/07/about-hero-background-dog-tile-village-grooming-1400w.jpg') center center / cover no-repeat;
	}
	#service-hero {
		margin: 0;
		background: url('https://villagegrooming.springcreekwebdesign.com/wp-content/uploads/2026/07/services-hero-background-white-dog-village-grooming.jpg') left center / cover no-repeat;
	}
	#policy-hero {
		margin: 0;
		background: url('https://villagegrooming.springcreekwebdesign.com/wp-content/uploads/2026/07/policies-hero-background-long-hair-dog-village-grooming.jpg') center center / cover no-repeat;
	}
	#services-services::after {
		content: none;
	}
	#services-services {
		margin-top: 0;
		background: radial-gradient(white, var(--vg-yellow));
	}
	#services-services h2, #services-memberships h2 {
		text-align: center;
	}
}