/* ============================================
   Elias Landscaping — additions on top of style.css
   Keeps the original template palette (#6aaf08 green,
   #333 charcoal, Open Sans) and adds:
   1) a real playing video hero
   2) roll-on grass / garden supply cards
   3) installation process timeline
   4) floating WhatsApp / call buttons
   ============================================ */

.brand-accent { color: #6aaf08; }

/* ---- Hero (static background image) ---- */
.intro {
	padding-top: 40px; /* nudges the hero content down a little below the nav */
}
@media (max-width: 767px) {
	.intro { padding-top: 20px; }
}
.intro .btn-outline-custom {
	background-color: transparent;
	border: 2px solid #fff;
	margin-left: 10px;
}
.intro .btn-outline-custom:hover {
	background-color: #fff;
	color: #333;
}
@media (max-width: 767px) {
	.intro .btn-custom { display: block; margin: 15px auto 0; max-width: 280px; }
	.intro .btn-outline-custom { margin-left: auto; }
}
/* ---- Roll-On Grass Section ---- */
#grass {
	padding: 100px 0 80px 0;
	background: #fff;
}
.grass-row { margin-top: 20px; }
.grass-card {
	background: #f6f6f6;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 30px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.06);
	transition: all 0.3s;
}
.grass-card:hover {
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
	transform: translateY(-4px);
}
.grass-media img { width: 100%; height: 190px; object-fit: cover; display: block; }
.grass-body { padding: 20px; text-align: center; }
.grass-body h3 { margin-top: 0; color: #333; font-weight: 600; }
.grass-features {
	list-style: none;
	padding: 0;
	margin: 15px 0 20px;
	text-align: left;
}
.grass-features li {
	font-size: 14px;
	color: #666;
	padding: 4px 0 4px 24px;
	position: relative;
}
.grass-features li:before {
	content: "\f00c";
	font-family: FontAwesome;
	position: absolute;
	left: 0;
	color: #6aaf08;
	font-size: 12px;
}
.btn-custom.btn-sm {
	padding: 8px 16px;
	font-size: 13px;
	border-radius: 4px;
	margin-top: 0;
}

/* ---- Services CTA card & process timeline ---- */
.service-cta-block { display: flex; align-items: center; justify-content: center; }
.service-cta-inner {
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.25);
	border-radius: 8px;
	padding: 30px 20px;
	text-align: center;
}
.service-cta-inner h3 { color: #fff; }
.service-cta-inner p { color: rgba(255,255,255,0.85); }

.process-row { margin-top: 100px; }
#services .process-row .section-title h2,
#services .process-row .section-title p { color: #fff; }
.process-timeline {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 40px;
}
.process-step {
	flex: 1 1 15%;
	min-width: 140px;
	text-align: center;
	padding: 10px;
}
.process-number {
	width: 50px;
	height: 50px;
	line-height: 50px;
	border-radius: 50%;
	background: #fff;
	color: #6aaf08;
	font-weight: 700;
	font-size: 20px;
	margin: 0 auto 15px;
}
.process-step h4 { color: #fff; font-size: 15px; }

/* ---- Garden Supplies Section ---- */
#supplies {
	padding: 100px 0;
	background: #f6f6f6;
}
.supplies-row { margin-top: 20px; }
.supply-card {
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 30px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.06);
	transition: all 0.3s;
}
.supply-card:hover {
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
	transform: translateY(-4px);
}
.supply-media img { width: 100%; height: 190px; object-fit: cover; display: block; }
.supply-body { padding: 20px; text-align: center; }
.supply-body h3 { margin-top: 0; color: #333; font-weight: 600; }
.supply-body p { font-size: 14px; margin-bottom: 15px; }

/* ---- Map placeholder ---- */
.map-placeholder {
	background: #e6e6e6;
	border: 2px dashed #ccc;
	border-radius: 6px;
	padding: 60px 20px;
	margin: 20px 0 50px;
	text-align: center;
	color: #777;
}
.map-placeholder .fa { font-size: 36px; color: #6aaf08; margin-bottom: 10px; display: block; }

/* ---- Footer additions ---- */
.footer-logo { font-size: 22px; font-weight: 600; color: #eee; }
.footer-desc { color: #888; margin: 10px 0 20px; }
.footer-links { margin-bottom: 10px; }
.footer-links li { display: inline-block; margin: 0 12px 10px; }
.footer-links li a { color: #999; text-transform: uppercase; font-size: 13px; letter-spacing: 1px; }
.footer-links li a:hover { color: #6aaf08; }

/* ---- Floating WhatsApp button ---- */
.whatsapp-float {
	position: fixed;
	right: 25px;
	bottom: 25px;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	text-align: center;
	line-height: 58px;
	font-size: 28px;
	box-shadow: 0 4px 14px rgba(0,0,0,0.3);
	z-index: 999;
	transition: all 0.3s;
}
.whatsapp-float:hover { background: #1ebe57; color: #fff; transform: scale(1.08); }

/* =====================================================
   Mobile structure (<= 767px)
   Overrides desktop-heavy padding, type sizes and layout
   ===================================================== */
@media (max-width: 767px) {
	/* Global type scale */
	h2 { font-size: 26px; line-height: 1.25; }
	h3, h4 { font-size: 18px; }
	.section-title { margin-bottom: 40px; }
	.section-title p { font-size: 15px; }

	/* Nav */
	#menu { padding: 10px 0; }
	#menu a.navbar-brand { font-size: 20px; padding-left: 15px; }
	#menu .navbar-toggle { margin-right: 15px; margin-top: 10px; }
	#menu.navbar-default .navbar-nav > li > a {
		margin: 0;
		padding: 12px 20px;
		text-align: center;
	}
	#menu .navbar-collapse {
		background-color: rgba(51,51,51,0.97);
		border-top: 1px solid rgba(255,255,255,0.08);
		max-height: 70vh;
	}

	/* Hero */
	header .intro-text {
		padding-top: 140px;
		padding-bottom: 100px;
	}
	.intro h1 { font-size: 30px; letter-spacing: 0; line-height: 1.2; }
	.intro p { font-size: 16px; line-height: 24px; margin-top: 15px; margin-bottom: 25px; }
	.intro .btn-custom.btn-lg { font-size: 15px; padding: 12px 18px; }

	/* Section vertical rhythm */
	#about,
	#grass,
	#services,
	#portfolio,
	#supplies,
	#contact { padding: 60px 0; }
	#about { padding-top: 60px; }

	/* About stacks cleanly */
	#about .about-text,
	#about .about-desc { margin-bottom: 25px; text-align: center; }
	#about hr { margin-left: auto; margin-right: auto; margin-bottom: 25px; }
	#about .btn { margin-top: 20px; }
	#about .about-media img { max-width: 320px; margin: 0 auto; }

	/* Grass + supply cards spacing */
	.grass-card, .supply-card { margin-bottom: 20px; }
	.grass-media img, .supply-media img { height: 170px; }
	.grass-features { max-width: 220px; margin-left: auto; margin-right: auto; }

	/* Services (circular thumbs) */
	#services { padding-bottom: 40px; }
	#services .service-media img {
		width: 160px;
		height: 160px;
		border-width: 6px;
	}
	#services .service-desc { margin: 5px 10px 30px; }
	#services h3 { font-size: 19px; }
	.service-cta-block { margin-top: 10px; }
	.service-cta-inner { padding: 25px 15px; }

	/* Installation process — single column, left-aligned inline row */
	.process-row { margin-top: 40px; }
	.process-timeline {
		display: block;
		margin-bottom: 20px;
	}
	.process-step {
		display: flex;
		align-items: center;
		gap: 15px;
		text-align: left;
		min-width: 0;
		padding: 8px 10px;
	}
	.process-number {
		width: 40px;
		height: 40px;
		line-height: 40px;
		font-size: 16px;
		margin: 0;
		flex-shrink: 0;
	}
	.process-step h4 { margin: 0; font-size: 15px; }

	/* Portfolio filter chips wrap tidily */
	ol.type li { margin: 0 4px 15px; }
	ol.type li a { font-size: 13px; padding: 6px 12px; }
	.portfolio-item { margin: 8px 0; }

	/* Contact form spacing */
	#contact { padding-bottom: 60px; }
	#contact form { margin-top: 20px; }
	#contact .form-control { padding: 14px 15px; font-size: 15px; }
	#contact .contact-info { margin-top: 30px; }

	/* Footer readability */
	#footer { text-align: center; padding: 25px 0 15px; }
	.footer-links li { margin: 0 8px 8px; }

	/* Keep floating WhatsApp button out of the way of thumbs on small screens */
	.whatsapp-float {
		right: 18px;
		bottom: 18px;
		width: 52px;
		height: 52px;
		line-height: 52px;
		font-size: 24px;
	}

	/* Prevent horizontal overflow */
	body, html { overflow-x: hidden; }
	img { max-width: 100%; height: auto; }
}

/* Small tablet tweaks */
@media (min-width: 768px) and (max-width: 991px) {
	.intro h1 { font-size: 44px; }
	header .intro-text { padding-top: 220px; padding-bottom: 140px; }
	#services .service-media img { width: 180px; height: 180px; }
}

/* =====================================================
   Scroll Header (grey bar with big logo)
   ===================================================== */
#scroll-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: #e9e9e9;
	border-bottom: 1px solid #d5d5d5;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	z-index: 1050;
	transform: translateY(-100%);
	transition: transform 0.4s ease;
	padding: 10px 0;
}
#scroll-header.visible { transform: translateY(0); }
#scroll-header .container { text-align: center; }
.scroll-header-logo { display: inline-block; }
.scroll-header-logo img {
	height: 110px;
	width: auto;
	display: block;
	margin: 0 auto;
}
@media (max-width: 767px) {
	#scroll-header { padding: 8px 0; }
	.scroll-header-logo img { height: 70px; }
}

/* Hero text: move up right below header (about 2cm ~ 75px gap) */
header .intro-text {
	padding-top: 160px !important;
	padding-bottom: 160px !important;
}
@media (max-width: 767px) {
	header .intro-text {
		padding-top: 110px !important;
		padding-bottom: 90px !important;
	}
}

/* =====================================================
   Reveal / Slide-in Animations
   ===================================================== */
.reveal {
	opacity: 0;
	transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
	will-change: opacity, transform;
}
.reveal-left   { transform: translateX(-60px); }
.reveal-right  { transform: translateX(60px); }
.reveal-top    { transform: translateY(-40px); }
.reveal-bottom { transform: translateY(40px); }
.reveal.in-view {
	opacity: 1;
	transform: translate(0, 0);
}

/* =====================================================
   Gallery Section
   ===================================================== */
#gallery {
	padding: 100px 0;
	background: #fff;
}
.gallery-grid { margin-top: 20px; }
.gallery-item {
	overflow: hidden;
	border-radius: 6px;
	margin-bottom: 25px;
	box-shadow: 0 3px 12px rgba(0,0,0,0.08);
	background: #f6f6f6;
}
.gallery-item img {
	width: 100%;
	height: 240px;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}
.gallery-item:hover img { transform: scale(1.06); }
@media (max-width: 767px) {
	#gallery { padding: 60px 0; }
	.gallery-item img { height: 200px; }
}

/* Void Labs credit */
.void-credit {
	margin-top: 10px;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #888;
}
.void-credit a {
	color: #6aaf08;
	font-weight: 600;
}
.void-credit a:hover { color: #fff; }

/* =====================================================
   Main Nav — white header with logo on the left
   ===================================================== */
#menu.navbar-default,
#menu.navbar-default.scrolled {
	background-color: #ffffff !important;
	border-bottom: 1px solid #e5e5e5;
	box-shadow: 0 2px 10px rgba(0,0,0,0.08);
	padding: 0;
	transition: background-color 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease, border-color 0.4s ease;
}
#menu.navbar-default .navbar-header { position: relative; }
#menu.navbar-default .navbar-brand {
	padding: 2px 0 2px 0;
	margin-left: 0 !important;
	height: auto;
	display: flex;
	align-items: center;
}
/* Pull the container/brand hard-left so the logo sits at the edge */
#menu.navbar-default > .container { padding-left: 6px; padding-right: 15px; }
#menu .navbar-logo {
	height: 92px;
	width: auto;
	display: block;
	object-fit: contain;
	transition: transform 0.4s cubic-bezier(.2,.7,.2,1), height 0.4s ease, filter 0.4s ease;
	transform-origin: left center;
}
#menu.navbar-default.scrolled .navbar-logo {
	height: 68px;
}
#menu .navbar-logo:hover { transform: scale(1.04); }
#menu.navbar-default .navbar-nav > li > a {
	color: #333;
	font-weight: 600;
	position: relative;
	transition: color 0.3s ease;
}
#menu.navbar-default .navbar-nav > li > a::after {
	content: "";
	position: absolute;
	left: 15px; right: 15px; bottom: 8px;
	height: 2px;
	background: #6aaf08;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.35s cubic-bezier(.2,.7,.2,1);
}
#menu.navbar-default .navbar-nav > li > a:hover,
#menu.navbar-default .navbar-nav > li > a:focus {
	color: #6aaf08;
	background-color: transparent;
}
#menu.navbar-default .navbar-nav > li > a:hover::after,
#menu.navbar-default .navbar-nav > li > a:focus::after,
#menu.navbar-default .navbar-nav > .active > a::after {
	transform: scaleX(1);
	transform-origin: left center;
}
#menu.navbar-default .navbar-nav > .active > a,
#menu.navbar-default .navbar-nav > .active > a:hover,
#menu.navbar-default .navbar-nav > .active > a:focus {
	color: #6aaf08;
	background-color: transparent;
}
#menu.navbar-default .navbar-toggle {
	border-color: #6aaf08;
	margin-top: 22px;
}
#menu.navbar-default .navbar-toggle .icon-bar { background-color: #333; transition: background-color 0.3s ease; }
#menu.navbar-default .navbar-toggle:hover,
#menu.navbar-default .navbar-toggle:focus {
	background-color: #6aaf08;
}
#menu.navbar-default .navbar-toggle:hover .icon-bar,
#menu.navbar-default .navbar-toggle:focus .icon-bar { background-color: #fff; }

/* Since the main nav now shows the logo, hide the duplicate scroll-header */
#scroll-header { display: none !important; }

/* Hero background image override */
.intro {
	background-image: url(../img/uploads/hero-bg.jpg) !important;
	background-position: center center !important;
	background-size: cover !important;
}

/* Mobile: hero fills the viewport so next section doesn't peek */
@media (max-width: 767px) {
	header#header .intro {
		min-height: 100vh;
		display: flex;
		align-items: center;
	}
	header#header .intro > .container { width: 100%; }
	header#header .intro-text {
		padding-top: 80px !important;
		padding-bottom: 40px !important;
	}
}

/* Push hero content down so it clears the smaller white nav with logo */
header .intro-text {
	padding-top: 130px !important;
}

@media (max-width: 767px) {
	#menu .navbar-logo { height: 62px; }
	#menu.navbar-default.scrolled .navbar-logo { height: 52px; }
	/* Mobile: always-visible white header */
	#menu.navbar-default,
	#menu.navbar-default.scrolled {
		background-color: #ffffff !important;
		border-bottom: 1px solid #e5e5e5;
		box-shadow: 0 2px 8px rgba(0,0,0,0.08);
		padding: 0;
	}
	#menu.navbar-default > .container { padding-left: 4px; }
	#menu.navbar-default .navbar-brand { padding: 2px 0; }
	#menu.navbar-default .navbar-toggle { margin-top: 10px; margin-right: 12px; }
	#menu .navbar-collapse,
	#menu.navbar-default.scrolled .navbar-collapse {
		background-color: #ffffff;
		border-top: 1px solid #e5e5e5;
	}
	#menu.navbar-default .navbar-nav > li > a,
	#menu.navbar-default.scrolled .navbar-nav > li > a {
		color: #333;
		text-shadow: none;
		text-align: left;
		padding: 12px 20px;
		border-bottom: 1px solid rgba(0,0,0,0.06);
	}
	#menu.navbar-default .navbar-toggle .icon-bar,
	#menu.navbar-default.scrolled .navbar-toggle .icon-bar {
		background-color: #333;
	}
	/* Push hero content below the now-solid mobile header */
	header .intro-text {
		padding-top: 100px !important;
	}
}