/* ========================= FONTS ========================= */

@import url("https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300;400;500;600;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crimson&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;500;600;700&display=swap');




/* ========================= FONTS ========================= */
/* Headings */
h1,
h2,
h3,
h4 {
	font-family: "Playfair Display", sans-serif;
	font-weight: 700;
	/* medium-bold for headings */
	line-height: 1.3;
	/* elegant spacing */
	margin-bottom: 0.5em;
	color: var(--cream);
	letter-spacing: 0.02em;
}

body, p, li, span, a, div:not(.hero-overlay) {
  font-family: "Lato", sans-serif;
  font-weight: 400; /* or whatever you prefer */
}

.hero-overlay h1,
.hero-overlay p,
.hero-overlay a {
  font-family: "Playfair Display", serif; /* or inherit if already correct */
  color: #fefae0; /* keeps the white */
}

.hero-overlay a.btn {
  font-family: "Lato", sans-serif;
}

.oranged {color: #bc6c25;}

.playfair-para {font-family:  "Playfair Display", serif; }

a {
  color: #bc6c25;
  text-decoration: none;
}

#footer-button {margin-top: 0.7rem;}

/* ========================= RESET & BASE ========================= */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
  height: 100%;
  min-height: 100vh;
}


html {
	scroll-behavior: smooth;
	font-size: 18px;
	/* slightly larger base size */
	line-height: 1.7;
	/* elegant spacing */
	color: var(--cream);
}

body {
	font-family: "Playfair Display", sans-serif;
	font-weight: 300;
	margin: 0;
	background: #fefae0;
	color: #2b2b2b;
	line-height: 1.6;
}

/*================GENERIC SPACERS===================*/

.bottom-spacer {padding-bottom: 1.5rem !important;}

.top-spacer {padding-top: 1rem !important;}

.topper-spacer {padding-top: 2rem !important;}

/* ========================= COLOUR PALETTE (Autumnal) Deep Green #283618 Forest #606c38 Burnt Orange #bc6c25 Deep Red #8b2e2e Cream #fefae0 ========================= */
/* ========================= NAVBAR ============= */

#ecg {width: 180px;
padding: 0; margin: 0; display: block;}

#ecg2 {width: 180px;
padding-bottom: 1rem; margin-top: -3rem; display: block; margin: 0  auto;}

.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, #0b3d0b, #283618);
	color: #fff;
	position: sticky;
	top: 0;
	z-index: 1000;
	border-bottom: 3px solid #bc6c25;
border-top: 3px solid #bc6c25;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

.logo {
	font-size: 1.75rem;
	font-weight: 700;
	font-family: "Libre Franklin", sans-serif;
	letter-spacing: 1px;
	color: #fefae0;
	text-transform: uppercase;
}

.nav-links {
	list-style: none;
	display: flex;
	gap: 1rem;
text-decoration: none;
}

.nav-links a {
	color: #fefae0;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	/* pill shape */
	font-weight: 500;
	transition: background 0.3s, transform 0.2s;
text-decoration: none;
}

.nav-links a:hover,
.nav-links a.active {
	background: rgba(255, 255, 255, 0.2);
	transform: translateY(-2px);
}

.nav-toggle {
	display: none;
	background: none;
	border: none;
	color: #fefae0;
	font-size: 1.8rem;
	cursor: pointer;
}

/* Mobile */
@media (max-width: 768px) {
	.nav-links {
		flex-direction: column;
		background: #0b3d0b;
		position: absolute;
		top: 89px;
		right: 0;
		width: 150px;
		padding: 1rem;
		border-radius: 0 0 0 10px;
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
		transform: translateX(100%);
		transition: transform 0.3s ease-in-out;
    text-align: center;
    /* Add these lines: */
    border-left: 3px solid #bc6c25;
    border-bottom: 3px solid #bc6c25;
	}

#ecg {width: 120px;
padding: 0; margin: 0; display: block;}

	.nav-links.show {
		transform: translateX(0);
	}

	.nav-toggle {
		display: block;
	}

	body,
	html {
		overflow-x: hidden;
	}
}

#leaf {height: auto;
width: 20%;
transform: scaleY(-1);
transform: translateY(-20px);}

#leaf3 {height: auto;
width: 20%;}

#leaf2 {height: auto;
width: 20%;
transform: scaleY(-1);
transform: translateY(-40px); display: block;  margin: 0 auto;}

@media (max-width: 769px) {#leaf, #leaf2 {width: 45%;}}

.features h2.needs-pull, .about h2.needs-pull {margin-bottom: 1rem;
margin-top: -1rem;}

.needs-pull, .newfade, #leaf {
  opacity: 0;
  animation: fadeIn 1.5s ease-in forwards;

animation: slideInRight 1.5s forwards ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.needs-pull2 {
  opacity: 0;
  animation: fadeIn 1.5s ease-in forwards;}

.nav-links a.active {
  transition: background 0.2s ease;
}

/* Remove blue highlight box on tap */
.nav-links a {
  -webkit-tap-highlight-color: transparent; /* removes blue flash on mobile */
  outline: none;
}

.nav-links a:focus {
  outline: none;
  box-shadow: none;
}


/* ========================= HERO SECTION ========================= */
@media (min-width: 769px) {
	.right-entrance {
		/* animation */
		opacity: 0;
		transform: translateX(100vw);
		/* start off to the right */
		animation: slideInRight 1.5s forwards ease-out;
	}
}

@media (max-width: 768px) {
	.right-entrance-mob {
		/* animation */
		opacity: 0;
		transform: translateX(100vw);
		/* start off to the right */
		animation: slideInRight 1.5s forwards ease-out;
	}
}

.hero {
	position: relative;
	height: calc(var(--vh) * 90);
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	overflow: hidden;
}

.hero img.hero-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(65%);
	z-index: 0;
	animation: zoomIn 22s ease-in-out infinite alternate;
}

.hero-overlay {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 0 1rem;
	animation: fadeInUp 1.2s ease;
}

.hero-overlay h1 {
	font-size: clamp(2rem, 5vw, 3rem);
	margin-bottom: 1rem;
	font-weight: 700;
	color: #fefae0;
}

.hero-overlay p {
	font-size: 1.2rem;
	margin-bottom: 1.5rem;
}

.btn {
	background: #bc6c25;
	color: #fff;
	padding: 0.75rem 1.5rem;
	border-radius: 8px;
	font-weight: 600;
	transition: background 0.3s, transform 0.2s;
	display: inline-block;
	text-decoration: none;
}

.btn:hover {
	background: #8b2e2e;
	transform: translateY(-2px);
}

.btn-light {
	background: #fefae0;
	color: #283618;
}

.btn-light:hover {
	background: #e7dec9;
}


button.btn {
  all: unset; /* wipe default button styles */
  display: inline-block;
  background: #bc6c25;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  transition: background 0.3s, transform 0.2s;
  font-family: "Lato", sans-serif;
  cursor: pointer;
  text-align: center;
}

button.btn:hover {
  background: #8b2e2e;
  transform: translateY(-2px);
}


/* Animations */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes zoomIn {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.1);
	}
}

.left-entrance {
	/* animation */
	opacity: 0;
	transform: translateX(-100vw);
	/* start off to the right */
	animation: slideInLeft 1.5s forwards ease-out;
}

@media (min-width: 769px) {.left-entrance-big {
	/* animation */
	opacity: 0;
	transform: translateX(-100vw);
	/* start off to the right */
	animation: slideInLeft 1.5s forwards ease-out;
  }}

/* ========================= FEATURES / CARDS ========================= */
.features {
	background: #fefae0;
	padding: 3rem 1rem;
	text-align: center;
}

.features h2 {
	font-size: 2rem;
	margin-bottom: 2rem;
	color: #283618;
}

.card-grid {
	display: grid;
	gap: 1.5rem;
}

.card {
	background: #fff;
	padding: 1.5rem;
	border-radius: 12px;
	border-left: 6px solid #bc6c25;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transition: transform 0.3s, border-color 0.3s;
}

.card:hover {
	transform: translateY(-4px);
	border-color: #8b2e2e;
}

.feature-card .check {
	font-size: 2rem;
	color: #bc6c25;
	margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
	.card-grid {
		grid-template-columns: repeat(3, 1fr);
		max-width: 1100px;
		margin: 0 auto;
	}
}

/* ========================= CTA SECTION ========================= */
.cta {
	background: #0b3d0b;
	color: #fefae0;
	text-align: center;
	padding: 1rem 1rem;
padding-bottom: 1rem;
margin-top: 0;
margin-bottom: 0px;
	border-bottom: 3px solid #bc6c25;
border-top: 3px solid #bc6c25;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

.cta h2 {
	font-size: 2rem;
	margin-bottom: 1rem;
color: #fefae0;
}

#grow {margin-top: -0.9rem; padding-bottom: 0.5rem;;}

/* ========================= SERVICES ==================== */

#pricingpull, #areapull {margin-top: -2rem;}

.spaced-leaf {margin-bottom: 1.6rem;}

#service,
#pricing,
#area, #gardener {
  flex: 0 0 30%;   /* enforce 30% width, never shrink or grow */
}
#service-text,
#pricing-text,
#area-text {
  flex: 0 0 70%;   /* enforce 70% width */
  min-width: 0;    /* prevent overflow from pushing layout */
}

#about-container {
  display: flex;
  align-items: center;       /* vertical centering */
  gap: 1.5rem; flex: 1;
}

#about-container .circled {
  flex: 0 0 auto;            /* fixed size circle */
}

#about-container .feature-card {
  flex: 1;                   /* always fills remaining space */
  display: flex;
  flex-direction: column;
  justify-content: center;   /* centers text vertically */
  text-align: center;        /* centers text horizontally */
}


@media (min-width: 769px) {
  #about-container .feature-card {
    max-width: 850px;   /* cap card width */
    margin: 0 auto;     /* center it in the space */
  }

  #about-container {
    justify-content: center; /* keep image + card nicely balanced */
  }
  #about-text {padding-left: 5rem; padding-right: 5rem;}

}

.service-card {padding-top: 2rem; padding-bottom: 2rem;}

/* ========================= PRICING IMAGE REORDER (MOBILE) ========================= */
@media (max-width: 768px) {
  /* Only target the pricing section's container */
  #about-container:has(#price) {
    flex-direction: column-reverse;
  }


  /* Center the text card below */
  #about-container:has(#price) .feature-card {
    text-align: center;
  }
}

/* ========================= GALLERY ========================= */
/* Swipe hint - mobile only */
/* MOBILE FIRST SWIPE HINT - overlay on main gallery image */
@media (max-width: 768px) {

.preview,
#next-btn {
  display: none !important;
}

#prev-btn {
  display: none !important;
}

	.gallery-container {
		position: relative !important;
		/* parent for absolute positioning */
		flex-direction: column;
		align-items: center;
		gap: 0;
		max-width: 100% !important;
	}

	#gallery-img {
		    width: 70% !important;
    max-width: 70% !important; /* override global 50% */
    flex: none !important; 
	}

	/* swipe hint container - overlay on image */
	.swipe-hint {
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
		pointer-events: none;
		z-index: 10;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
		opacity: 1;
		animation: fadeInOut 2s ease-in-out infinite;
	}

	/* ripple effect behind the hand */
	.ripple {
position: relative;
		width: 80px;
		height: 80px;
top: 65px;
left: 50px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.6);
box-shadow: 0 0 25px 10px rgba(255, 255, 255, 0.3);
		animation: rippleOpacity 1s infinite ease-in-out,
             rippleMove 2s infinite ease-in-out;
	}

.hand-loop {
    position: relative; /* allows us to move it */
    left: 46px; /* static nudge to the right */
}

	/* hand image */
	.hand-loop img {
		width: 50px;
		height: auto;
left: 100px; /* nudge right into ripple center */
		animation: handSwipe 2s infinite ease-in-out;
	}


	/* animations */

	@keyframes rippleMove {
		0% {
			opacity: 0.6;
		}

		50% {transform: translateX(-100px);
			opacity: 0.3;
		}

		100% {
			opacity: 0.6;
		}
  }

	@keyframes rippleOpacity {
		0% {
			transform: scale(1);
			opacity: 0.6;
		}

		50% {
			transform: scale(1.4);
			
			opacity: 0.3;
		}

		100% {
			transform: scale(1);
			opacity: 0.6;
		}
	}

	@keyframes handSwipe {
		0% {
			transform: translateX(0px);
			opacity: 0.5;
		}

		50% {
			transform: translateX(-100px);
			opacity: 0.5;
		}

		100% {
			transform: translateX(0);
			opacity: 0.5;
		}
	}
	.gallery-img.next-swipe {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 9;
		max-width: 20% !important;
		border-radius: 12px;
		transform: translateX(100%);
		/* start off to right */
		transition: transform 0.3s ease;
	}
  #handy {opacity: 0.6 !important;}
}


/* icon shiz */

.icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  color: white;
  text-shadow: 0 0 6px rgba(0,0,0,0.8);
  pointer-events: auto;
cursor: pointer;
opacity: 50%;

  z-index: 9999;
}

/* Invisible buffer around the icon */
.prev-img .icon::before,
.next-img .icon::before,
.prev-img-2 .icon::before,
.next-img-2 .icon::before {
  content: "";
  position: absolute;
  top: -80px;
  bottom: -80px;
  left: -30px;
  right: -30px;
  pointer-events: auto;    /* ensure clicks pass through */
}

.icon:hover {
  transform: translate(-50%, -53%);
  opacity: 0.8;
}

/* Hide icons only on screens <= 768px */
@media (max-width: 768px) {
  .preview .icon {
    display: none !important;
  }
}

/* button shiz */
#next-btn,
#prev-btn,
.prev-img,
.next-img {
	display: none !important;
}

}

.gallery-grid {
	display: grid;
	gap: 1rem;
	padding: 2rem 1rem;
}



.gallery-grid img:hover {
	transform: scale(1.05);
}

@media (min-width: 768px) {

  .preview img {
    max-width: 30vh; /* adjust this to taste */
    height: auto;     /* keeps proportions */
    border-radius: 8px;
  }

.prev-img-2 img,
.next-img-2 img {
}


	.gallery-grid {
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		max-width: 1800px;
    margin: 0 auto;}

  .gallery-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center;
    align-items: center;
    gap: clamp(1rem, 2vw, 3rem); /* gap grows with viewport */
    max-width: none;       
    width: fit-content;
    margin: 2rem auto;
  }

  #gallery-img {
    flex: none !important;
    max-height: 70vh !important;
object-fit: contain !important; 
    border-radius: 12px;

  }

 

  #next-btn,
  #prev-btn,
  .prev-img,
  .next-img {
    display: inline-block !important;
  }


  .swipe-hint {
    display: none !important;
  }

  #next-btn,
  #prev-btn {
    display: inline-block !important;
cursor: pointer;
  }
  }
}



.gallery-img.fade-out {
	opacity: 0;
}

.gallery-img.fade-in {
	opacity: 1;
}

#next-btn {
	display: inline-block;
	/* forces it onto its own line */
  margin: 1rem auto 0;
margin-left: 1rem;}


#prev-btn {
	display: inline-block;
	/* forces it onto its own line */
  margin: 1rem auto 0;}

	/* centers it and adds space above */
	/* mobile swipe overlay animation */
	#gallery-img {
		position: relative;
		z-index: 1;
		transition: transform 0.3s ease;
		/* slide transition */
	}


/* Performance tweak: stabilize fade transitions */
#gallery-img,
.preview img {
  will-change: opacity, transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}


/* ========================= ABOUT SECTION ========================= */
#about-container {
	display: flex;
	align-items: center;
	/* vertically center text next to image */
	gap: 1.5rem;
}

.circled {
	width: 30%;
	/* set size */
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	/* ensures image fills the circle nicely */
	left: 30px;
	/* animation */
	opacity: 0;
	transform: translateX(100vw);
	/* start off to the left */
	animation: slideInLeft 1.5s forwards ease-out;
max-width: 300px;
}

@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(100vw);
	}

	to {
		opacity: 1;
		transform: translateX(0vw);
	}
}

@keyframes slideInLeft {
	from {
		opacity: 0;
		transform: translateX(-100vw);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

#about-text {
	/* animation */
	opacity: 0;
	transform: translateX(100vw);
	/* start off to the right */
	animation: slideInBottom 1.5s forwards ease-out;
}

#service-text {
	/* animation */
	opacity: 0;
	transform: translateX(100vw);
	/* start off to the right */
	animation: slideInBottom 1.5s forwards ease-out;
}

@keyframes slideInBottom {
	from {
		opacity: 0;
		transform: translateY(100vh);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Mobile adjustments */
@media (max-width: 768px) {
	#about-container {
		flex-direction: column;
		/* stack image above text */
		gap: 1rem;
	}

	.circled {
		width: 50%;
		/* bigger on mobile */
		min-width: 150px;
	}

	#about-text {
		text-align: center;
		/* center text under image */ padding-left: 0.75rem;
padding-right: 0.75rem;}

	#service-text {
    text-align: center;}
	
}

@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(100vw);
	}

	to {
		opacity: 1;
		transform: translateX(0vw);
	}
}

@keyframes slideInSlight {
	from {
		opacity: 0;
		transform: translateX(100vw);
	}

	to {
		opacity: 1;
		transform: translateX(12vw);
	}
}

@media (min-width: 768px) {
  #slight, .slight {animation: slideInSlight 1.5s forwards ease-out !important;}}

/* ========================= GALLERY PAGE SPECIFIC ========================= */


.preview {
position: relative;
	flex: 1 1 0;
	/* previews grow/shrink equally */
	max-width: 25%;
	/* prevent previews from becoming huge */
}

.preview img {
	width: 100%;
	/* fill the preview container */
	height: auto;
	border-radius: 8px;
}

#gallery-img {
	flex: 2 1 auto;
	/* main image takes more space */
	max-width: 50%;
	/* don't exceed half container */
	height: auto;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transition: opacity 0.5s ease;
}

/* Ensure the Next button sits below */
#next-btn {
	margin-top: 1rem;
	display: inline-block;
}

#prev-btn {
	margin-top: 1rem;
	display: inline-block;
}

/* Fade out animation class */
.fade-out {
	opacity: 0;
}

/* Fade in animation class */
.fade-in {
	opacity: 1;
}

/* ========================= CONTACT FORM ========================= */


.contact-form {
	display: grid;
	gap: 1rem;
	padding: 2rem 1rem;
  padding-top: 0;
	max-width: 600px;
	margin: 0 auto;
background-color: #0b3d0b;
}

.contact-form label {
font-size: 1.1rem;
	display: flex;
	flex-direction: column;
	font-weight: 600;
	margin-bottom: 0.5rem;
color: #fefae0;
text-align: center;
gap: 0.5rem;
}

.contact-form input,
.contact-form textarea {
	padding: 0.75rem;
	border: 1px solid #bbb;
	border-radius: 8px;
	font-size: 1rem;
font-family: "Lato", sans-serif;
}

.contact-form a {
	justify-self: center;
}

#contact-tagline {margin-bottom: 1.5rem;}

/* ========================= CONTACT PAGE SPECIFIC ========================= */
.contact-intro {
	text-align: center;
	padding: 2rem 1rem;
	background: #fefae0;
	color: #283618;
}

.phone, .email {text-decoration: none !important;}

.contact-intro h2 {
	font-size: 2rem;
	margin-bottom: 1rem;
}

.contact-intro p a {
	color: #bc6c25;
	text-decoration: underline;
}

.contact-form-section {
	padding: 2rem 1rem;
	background: #0b3d0b;
	border-top: 4px solid #bc6c25;
	border-bottom: 4px solid #bc6c25;
	margin: 0 auto 3rem;
	max-width: 650px;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
padding-bottom: 0px;
margin-bottom: 5rem;
}

#contact-button {margin-top: 0.5rem;}

/* ========================= FOOTER ========================= */
footer {
	text-align: center;
	padding: 0.25rem 1rem;
	background: #fefae0;
	color: #1a3a12;
	margin-top: 0.5rem;
	font-size: 0.9rem;
}

.foot {color: #bc6c25;
font-size: 0.9rem;
display: block;
margin-top: 1rem;
margin-bottom: -0.75rem;
text-decoration: none;}

@media (max-width: 768px) {
  .foot {font-size: 14px;} #footfixer {font-size: 0.75rem !important;}  #gardenfixer {font-size: 13px !important;}
}