/*************************************************
* Main CSS file for the Spring Creek Web Design child theme
* All custom CSS is contained here
* Note:  Any styles that can be set in the theme
*		  customizer or page builder are.
*************************************************/
:root {
	--green-rgb:  169,197,47;
	--blue-rgb:  34, 136, 150;
	--contrast-rgb:  34, 34, 34;
}
html {
	scroll-behavior: smooth;
}
/*********
* Spacing
* *******/
.wp-block-group > .wp-block-group__inner-container, #content {
	padding: 0 !important;
}
#hero-group > .wp-block-group__inner-container, .outer-group > .wp-block-group__inner-container,
.footer-widgets-container.grid-container, .inside-site-info.grid-container, .wp-block-columns.outer-group {
	max-width:  1024px;
	margin:  auto;
	padding: 5rem 40px !important;
}
.outer-group.pb0 > .wp-block-group__inner-container {
	padding: 5rem 40px 0 !important;
}
#featured-group > .wp-block-group__inner-container, #portfolio-all > .wp-block-group__inner-container, 
.outer-group.seo-services > .wp-block-group__inner-container, .outer-group.dev-design-services-group > .wp-block-group__inner-container {
	max-width: 2400px;
}
#hero-group > .wp-block-group__inner-container {
	margin: 5rem auto;
}
@media(max-width:  768px) {
	#hero-group > .wp-block-group__inner-container, .outer-group > .wp-block-group__inner-container,
	.footer-widgets-container.grid-container, .inside-site-info.grid-container, .wp-block-columns.outer-group {
		padding: 5rem 30px !important;
	}
	.outer-group.pb0 > .wp-block-group__inner-container {
		padding: 5rem 30px 0 !important;
	}
}
/*********
* Hide elements
* *******/
.copyright-bar {
	display: none;
}
/*********
* Buttons
* *******/
.wp-block-button a, div.wpforms-container-full button[type='submit'] {
	background: #55555e radial-gradient(circle, transparent 1%, #55555e 1%) center/100% !important;
	background-color: #55555e !important;
	box-shadow: 5px 5px 5px var(--contrast-3) !important;
	border: 2px solid #55555e !important;
	border-radius: 5px !important;
	font-family: 'Kalam' !important;
	transition: transform 0.5s linear, box-shadow 0.5s linear !important;
}
.wp-block-button.hollow a {
	background: rgba(0,0,0,0) radial-gradient(circle, transparent 1%, rgba(0,0,0,0) 1%) center/100% !important;
	color:  #55555e !important;
}
.wp-block-button a:hover, div.wpforms-container-full button[type='submit']:hover {
	background-color: var(--accent) !important;
	background-size: 15000% !important;
	background-position: center !important;
	transition: background 0.75s !important;
	border-color: transparent !important;
}
.wp-block-button a:active, button[type='submit']:active {
	box-shadow: 0px 0px 0px !important;
	transform: translate(5px, 5px) !important;
}
.wp-block-button.hollow a:hover {
	color:  white !important;
}
.hero-btn-text-row .p-link-next-to-btn a {
	font-family: 'Kalam';
	padding-left: 40px;
	font-size: 19px;
	text-decoration: none;
	color: var(--contrast) !important;
}
.hero-btn-text-row .p-link-next-to-btn a:hover {
	color: var(--accent) !important;
}
@media(max-width: 768px) {
	.hero-btn-text-row {
		justify-content: center;
		padding: 20px;
		flex-wrap: wrap !important;
		text-align: center;
	}
	.hero-btn-text-row .wp-block-buttons {
		width: 100%;
	}
	.hero-btn-text-row .p-link-next-to-btn {
		margin-top: 20px;
	}
	.hero-btn-text-row .p-link-next-to-btn a {
		padding: 0;
	}
}
/*************************************************
* Header
* ***********************************************/
header {
	background-color: var(--contrast-2);
}
header > .inside-header {
	position: relative;
	max-width: 1064px;
	margin: auto;
	padding:  55px 0px;
}
@media(min-width: 768px) and (max-width: 1064px) {
	header > .inside-header{
		padding:  40px 20px;
	}
}
header #site-navigation {
	margin-left: 0 !important;
	z-index: 1;
}
header a {
	color:  var(--contrast) !important;
	font-weight: 700;
}
header a:hover {
	color: var(--accent) !important;
}
.site-logo {
	position: absolute;
	top: 20px;
	right: 50%;
	transform: translateX(50%);
	z-index: 2;
}
header ul, header #site-navigation, header #primary-menu {
	width:  100%;
}
header ul {
	justify-content: space-between;
}
header ul.menu > li:nth-child(3) {
	visibility: hidden;
}
@media(max-width: 768px) {
	header ul.menu > li:nth-child(3) {
		display: none;
	}
}
@media(max-width: 768px) {
	.site-logo {
		top: 60px;
	}
	#mobile-menu-control-wrapper {
		position: absolute;
		top: 0;
		right: 0;
	}
	.main-navigation {
		background-color: transparent !important;
	}
	#site-navigation {
	    background-color: #f5f5f5 !important;
	    box-shadow: 0 0 10px inset rgba(0, 0, 0, 0.5);
	    justify-content: center;
	    display: flex;
	    z-index: 5 !important;
	    margin: 0 !important;
	}
	.inside-header.grid-container {
		padding: 55px 0 0 !important;
	}
}
/*************************************************
* Footer
* ***********************************************/
.site-footer .footer-widgets-container .inside-footer-widgets {
	margin-left: 0 !important;
}
.footer-widget-1, .footer-widget-2 {
	padding: 1rem;
}
.footer-widget-1 {
	padding: 1rem 5rem 1rem 0;
}
.footer-widget-2 {
	background:	linear-gradient(55deg, rgba(var(--green-rgb), 0.15), rgba(var(--green-rgb), 0.65), rgba(var(--green-rgb), 0.85)),
				linear-gradient(0deg, white, white);
	color: var(--contrast) !important;
	border-radius: 10px;
}
.widget_nav_menu {
	padding:  30px 0 !important;
	border-style: solid none solid none;
	border-width:  1px;
	border-color: var(--contrast-2);
}
.footer-bar .widget_nav_menu .current-menu-item a {
	color: var(--contrast-2) !important;
}
.footer-widget-2 form input {
	border-color: var(--accent) !important;
	background-color: whitesmoke !important;
}
.footer-widget-1 aside, .footer-widget-2 aside{
	padding: 0 !important;
}
footer .footer-bar, footer #footer-row {
	width: 100%;
}
footer #footer-row {
	display: inline-flex;
	justify-content: space-around;
	padding:  5rem 0 0;
}
.footer-bar .widget_nav_menu>div>ul {
	justify-content: space-between;
}
@media(max-width: 768px) {
	.footer-bar .widget_nav_menu>div>ul, #footer-row {
		flex-direction: column;
	}
}
/*************************************************
* Home Page
* ***********************************************/
#hero-group {
	background: linear-gradient(180deg, rgba(var(--green-rgb, 1)), rgba(245,245,245,1));
	padding: 40px 0px 80px;
	position: relative;
	border-style:  none none solid none;
	border-color: var(--accent);
}
#hero-group > .wp-block-group__inner-container {
	position: relative;
	z-index: 3;
}
#hero-group::after {
	content:  url('');
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 300px;
	background: url('https://springcreekwebdesign.com/wp-content/uploads/2025/10/mist-horizontal-background.png');
	background-size: cover;
}
@media(max-width:  1023px) {
	#hero-group h2 {
		font-size: 36px;
	}
	#hero-group h2::after {
		display: none;
	}
}
@media(max-width: 782px) {
	html.mobile-menu-open #hero-group {
		padding: 1px 30px 50px;
	}
	.mockup-col {
		text-align: center;
	}
	#hero-group .mockup-col figure {
		position: relative;
		display: inline-flex;
	}
	#hero-group .mockup-col img {
		max-width: 300px;
	}
	#hero-group .wp-block-buttons, #hero-group .mockup-col figure {
		justify-content: center;
	}
}
.hero-check-row img {
	width:  30px;
	margin:  10px;
	height: auto;
}
.hero-check-row p {
	font-style: italic;
	font-size: 14px;
}
.check-group {
	padding-right:  25px;
}
@media(max-width: 500px) {
	.hero-check-row {
		flex-wrap:  wrap !important;
	}
}
/*
* BELOW THE FOLD
*/
#third-group .service-col {
	position: relative;
}
p.service-link, p.service-link a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: transparent;
}
#third-group img {
	height: 125px;
	width: auto;
	margin: auto;
	margin: 0 0 2rem;
}
@media(max-width: 782px) {
	#third-group > .wp-block-group__inner-container {
		padding: 0 30px 3rem !important;
	}
}
#reviews-group {
	margin:  100px 0 0;
	position: relative;
	background: var(--accent);
	z-index: 3;
}
#reviews-group::before {
	content: "";
	position: absolute;
	top: -100px;
	left: 0;
	width: 100%;
	height: 101px;
    background-image: radial-gradient(110% 100% at bottom, rgba(var(--blue-rgb), 1) 0%, rgba(var(--blue-rgb), 1) 49.5%, rgba(255,255,255,0) 50.5%, rgba(255,255,255,0) 100%);;
}
#reviews-group > .wp-block-group__inner-container {
	overflow-x: hidden;
}
#reviews-group h2 {
	color: white;
}
#reviews-group .wp-block-columns {
	margin: 5rem 0 0;
}
@media(max-width: 782px) {
	#reviews-group .wp-block-columns {
		flex-direction: row;
		flex-wrap: nowrap !important;
	}
	#reviews-group .wp-block-column {
		flex: 1 0 100%;
	}
}
h2.consult-header {
	position: absolute;
	bottom: 50px;
	left: 50%;
	transform: translateX(-50%);
	width: 500px;
	max-width: 100%;
	z-index: 2;
	padding: 0 20px;
}
h2.consult-header a {
	width: 100%;
	height: 100%;
	display: block;
	padding: 0 0 10px;
	color: white;
	text-decoration: none;
	border-style: none none solid none;
	border-color:  white;
	border-width: 2px;
	transition: border-color 0.5s linear;
}
h2.consult-header:hover a {
	border-color: var(--contrast-2);
}
sub.free {
	font-size: 12px;
}
.featured-col {
	padding:  8rem 2rem;
	border-radius:  10px;
	color: whitesmoke;
	position: relative;
	background: url('https://springcreekwebdesign.com/wp-content/uploads/2025/10/villafact-featured-site-background.png') no-repeat center / cover;
}
.featured-col.cardinal-bros {
	background: url('https://springcreekwebdesign.com/wp-content/uploads/2025/10/cardinal-bros-featured-background.jpg') no-repeat center / cover;
}
.featured-col.celebrating-biodiversity {
	background: url('https://springcreekwebdesign.com/wp-content/uploads/2025/10/celbrating-bio-background.jpg') no-repeat center / cover;
}
.featured-col.kakes {
	background: url('https://springcreekwebdesign.com/wp-content/uploads/2025/10/dark-smoke-background-kakes.jpg') no-repeat center / cover;
}
.featured-col.woihanble {
	background: url('https://springcreekwebdesign.com/wp-content/uploads/2025/10/woihanble-background.jpg') no-repeat center / cover;
}
.featured-col.seen {
	background: url('https://springcreekwebdesign.com/wp-content/uploads/2025/10/seen-background.jpg') no-repeat center / cover;
}
.featured-col.supplements {
	background: url('https://springcreekwebdesign.com/wp-content/uploads/2025/10/supplements-background.jpg') no-repeat center / cover;
}
.featured-col.wood {
	background: url('https://springcreekwebdesign.com/wp-content/uploads/2025/10/metal-background.jpg') no-repeat center / cover;
}
.featured-col.boon {
	background: url('https://springcreekwebdesign.com/wp-content/uploads/2025/10/boondock-background.jpg') no-repeat center / cover;
}
.featured-col.qtc {
	background: url('https://springcreekwebdesign.com/wp-content/uploads/2025/10/qtc-background.jpg') no-repeat center / cover;
}
.featured-col.daggett {
	background: url('https://springcreekwebdesign.com/wp-content/uploads/2025/10/daggett-background.jpg') no-repeat center / cover;
}
.featured-col.septic {
	background: url('https://springcreekwebdesign.com/wp-content/uploads/2025/10/madison-septic-background.jpg') no-repeat center / cover;
}
.featured-col img {
	box-shadow: 0px 0px 10px rgba(0,0,0,0.7);
}
#featured-group h2 {
	font-size: 66px;
	margin-bottom: 5rem;
}
@media(max-width: 768px) {
	#featured-group h2 {
		font-size: 36px;
	}
}
.featured-col h3 {
	position: absolute;
	bottom: 0px;
	left: 2rem;
}
.jump-btn-group {
	margin: 5rem 0;
}
.jump-btn-group .wp-block-button {
	width: 1000px;
	max-width: 100%;
	height: 100px;
}
.jump-btn-group .wp-block-button a {
	border-radius: 100% !important;
	line-height: 100%;
	font-size: 54px;
	border-color: var(--accent);
	background: var(--accent) radial-gradient(circle, transparent 1%, var(--accent) 1%) center/100% !important;
	background-color: transparent; !important;
}
.jump-btn-group .wp-block-button a:hover {
	background-color: rgba(var(--blue-rgb), 0.85) !important;
	background-size: 15000% !important;
	background-position: center !important;
	transition: background 1.15s !important;
	border-color: var(--accent) !important;
}
.jump-btn-group .wp-block-button a:active {
	background-color: var(--accent) !important;
}
@media(max-width: 1023px) {
	.jump-btn-group .wp-block-button a {
		font-size: 24px;
	}
}
/*************************************************
* Sub page general styling BACKGROUNDS
* ***********************************************/
#hero-group.sub-page.seo, #hero-group.sub-page.contact {
	border-style: none;
}
#hero-group.sub-page.about {
	border-color: var(--contrast-2);
}
#hero-group.sub-page.design::after, #hero-group.sub-page.about::after {
	background: url('https://springcreekwebdesign.com/wp-content/uploads/2025/10/flower-background.png') repeat-x bottom / contain;
	height: 200px;
}
#hero-group.sub-page.seo::after, #hero-group.sub-page.contact::after {
	background: url('https://springcreekwebdesign.com/wp-content/uploads/2025/10/cloudy-horizontal-background.png') repeat-x bottom / contain;
	height: 200px;
}
#hero-group.sub-page.ads::after {
	background: url('https://springcreekwebdesign.com/wp-content/uploads/2025/10/man-watering-plants-bg.png') no-repeat bottom right / contain;
	height: 300px;
}
@media(max-width:  1200px) {
	#hero-group.sub-page.ads {
		padding-right: 40%;
	}
}
@media(max-width:  782px) {
	#hero-group.sub-page.ads {
		padding-bottom: 100px;
		padding-right: 30px;
	}
	#hero-group.sub-page.ads::after {
		background: url('https://springcreekwebdesign.com/wp-content/uploads/2025/10/man-watering-plants-bg.png') no-repeat bottom / contain;
		height: 200px;
	}
}
/*************************************************
* Sub page general styling 
* ***********************************************/
.contact-col {
	padding: 1rem;
    background: rgb(var(--green-rgb));
    border-radius: 10px;
    border: 2px solid whitesmoke;
    box-shadow: 14px 4px 10px rgba(245,245,245, 0.8);
    max-width: 500px;
}
.contact-col input {
	border: 1px solid var(--contrast);
}
#contactpage-all > .wp-block-group__inner-container {
	padding-bottom: 0!important;
}
#contactpage-all {
	margin-bottom: -80px;
}
#contactpage-all .wp-block-column:nth-child(1) {
	padding-right: 60px;
}
@media(max-width:  782px) {
	.contact-col {
		margin: 5rem auto !important;
	}
	#contactpage-all .wp-block-column:nth-child(1) {
		padding-right: 0px;
		order: 2;
	}
	#contactpage-all .wp-block-column:nth-child(2) {
		order:  1;
	}
}
.wordpress-cols .wp-block-column:nth-child(2) img {
	filter: drop-shadow(10px 10px 5px rgba(0,0,0,0.5));
}
.industry-row {
	justify-content: center;
	padding-bottom: 120px;
	flex-wrap: wrap !important;
	align-items: stretch;
	gap: 1rem;
}
.industry-row .wp-block-group {
	flex: 1;
	display: flex;
	align-items: center;
	min-width: 150px;
	min-height: 150px;
	padding:  2rem;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	transition: all 0.25s linear;
}
@media(max-width: 900px) and (min-width: 720px) {
	.industry-row .wp-block-group {
		min-width: 45%;
	}
}
.industry-row .wp-block-group:hover {
	box-shadow: 0 0 10px rgba(0,0,0,0.25);
	filter: brightness(1.25);
}
.industry-row .wp-block-group:nth-child(2), .industry-row .wp-block-group:nth-child(4) {
	transform: translateY(40px);
}
.industry-row .wp-block-group:nth-child(3) {
	transform: translateY(80px);
	background-color: #794490;
}
body.error404 .group-404 {
	margin: auto;
	max-width: 1024px;
	padding: 10rem 40px;
}
@media(max-width:  1024px) {
	.industry-row .wp-block-group {
		transform: translateY(0px) !important;
	}
}
@media(max-width:  768px) {
	body.error404 .group-404 {
		padding: 40px;
	}
}
.ppc-cols.outer-group.wp-block-columns, .responsive-little-cols.outer-group.wp-block-columns {
	gap: 3rem;
	padding: 0 30px 5rem !important;
}
.ppc-cols img, .responsive-little-cols img, .seo-service-row .wp-block-group img {
	padding: 0 0 2rem;
	height: 300px;
	width: auto;
	object-fit: contain;
}
.seo-service-row {
	align-items: stretch;
	justify-content: center;
	gap: 3rem;
}
.seo-service-row .wp-block-group {
	width: 22.5%;
}
@media(max-width: 1024px) {
	.seo-service-row {
		flex-wrap: wrap !important;
	}
	.seo-service-row .wp-block-group {
		width: 45%;
	}
}
@media(max-width: 782px) {
	.seo-service-row .wp-block-group {
		width: 95%;
	}
}
.seo-service-row .wp-block-group img {
	height: 200px;
}
@media(max-width: 768px) {
	.ppc-cols .wp-block-column, .responsive-little-cols .wp-block-column, .seo-service-row .wp-block-group {
		padding: 1rem;
	}
}
/* 
 FLOW CARDS ANIMATION FOR DESIGN PAGE
*/
.flow-container {
	position: relative;
}
.flow-card { 
	position: sticky;
	top: 5rem;
}
.flow-card.bordered {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: whitesmoke;
	border: 2px solid black;
	border-radius: 10px;
	margin: 0 0 5rem;
	padding: 2rem;
	box-shadow: 0 10px 10px rgba(0,0,0,0.5);
}
.flow-card:nth-child(2) {
	top: calc(5rem + 40px);
}
.flow-card:nth-child(3) {
	top: calc(5rem + 80px);
}
.flow-card:nth-child(4) {
	top: calc(5rem + 120px);
}
@media(max-width: 768px) {
	.flow-card {
		top: 1rem;
	}
	.flow-card:nth-child(2) {
		top: calc(1rem + 20px);
	}
	.flow-card:nth-child(3) {
		top: calc(1rem + 40px);
	}
	.flow-card:nth-child(4) {
		top: calc(1rem + 60px);
	}
}
.design-question-group img {
	width: 400px;
	max-width: 100%;
	height: auto;
	margin: auto;
}
.outer-group.plan-details > .wp-block-group__inner-container {
	max-width: 2400px;
}
#prices-list {
	padding: 1rem;
}
#prices-list li {
	line-height: normal;
}
.package-cols {
	max-width: 944px; /* Line it up with the group above (1024 - 80 = 944) */
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	padding: 2rem;
	margin: auto;
	background: linear-gradient(-80deg, rgba(var(--green-rgb), 1), #D3ED65), 
				linear-gradient(0deg, whitesmoke, whitesmoke);
}
.package-cols.business {
	background: linear-gradient(-80deg, #D3ED65, #99D7DF);
	box-shadow: 0 0 20px rgba(0,0,0,0.69);
	z-index: 3;
	position: relative;
	max-width: 1200px;
}
.package-cols.business-plus {
	background: linear-gradient(-80deg, #99D7DF, whitesmoke);
}
.package-cols h2 {
	font-style: italic;
	font-size: 3em;
}
.package-cols img {
	min-width: 20px;
	width: 20px;
}
.package-cols .plan-price-text {
	font-family: "Kalam";
	font-size: 24px;
	font-weight: 300;
	padding: 0 20px 0 0;
	transform: rotate(-15deg);
	color: var(--accent);
}
.package-cols .price-heading-stack {
	gap: 0;
}
.package-cols .summary {
		margin: 1.5rem 0 !important;
	}
.plan-features-cols {
	height: 100%;
	margin: 0;
}
.plan-features-cols > .wp-block-column > div {
		padding: 0 0 15px;
	}
@media(max-width: 900px) {
	.package-cols {
		flex-wrap: wrap !important;
	}
	.package-cols > .wp-block-column {
		flex-basis: content !important;
	}
}
@media(max-width: 782px) {
	.package-cols {
		gap:  0 !important;
		margin: 2rem auto;
	}
	.plan-features-cols {
		flex-wrap: nowrap !important;
	}
}
@media(max-width: 600px) {
	.plan-features-cols {
		flex-wrap: wrap !important;
		gap: 0 !important;
	}
	.package-cols {
		padding: 1rem;
	}
	.package-cols h2 {
		font-style: italic;
		font-size: 1.5em;
	}
}
#prices-list > .wp-block-group__inner-container {
	padding:  0 30px !important;
}
#prices-list ol li {
	padding: 5rem 0 0;
}
#prices-list ol li::marker {
	font-size: 50px;
	font-family: "Kalam";
	line-height: 0.1;
}
#client-list img {
	max-height: 400px;
	width: auto;
}
.case-study-cta-cols {
	border-radius: 10px;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
	background-color: var(--contrast);
}
@media(max-width: 782px) {
	.flip-content-mobile .wp-block-column:nth-child(1){
		order: 2;
	}
	.flip-content-mobile .wp-block-column:nth-child(2){
		order: 1;
	}
}
.case-study-cta-cols h2 {
	color: whitesmoke;
}
.case-study-services-row {
	margin-bottom: 20px;
	flex-wrap: wrap !important;
}
.case-study-services-row p {
	margin: 0;
	font-family: "Kalam", sans-serif;
	background: var(--contrast-2);
	padding: 5px 10px;
	border-radius: 5px;
	box-shadow: 2px 4px 4px rgba(0,0,0,0.5);
}
.case-study-group h3.p35 {
	padding-top: 1.5rem;
}
.case-study-image {
	box-shadow: 0px 0px 10px rgba(0,0,0,0.33);
	max-width: 600px;
}
.case-study-image, .case-study-image img {
	border-radius: 10px;
}
.case-study-image:hover {
	box-shadow: 0px 0px 10px rgba(22,22,22, 0.95);
}