* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-decoration: none;
	overflow-x: hidden;
}

/* barebones */

h1 {
	padding-bottom: 25px;
	font-family: "Lexend", sans-serif;
	font-weight: 400;
	font-size: 50px;
	color: #071409;
}

h2 {
	font-family: "Lexend", sans-serif;
	font-weight: 400;
	font-size: 30px;
	color: #071409;
}

h3 {
	font-family: "Lexend", sans-serif;
	font-weight: 400;
	font-size: 15px;
	color: white;
}

p {
 	padding-top: 25px;
	font-family: "Lexend", sans-serif;
	font-weight: 400;
	font-size: 15px;
	color: white;

 }

 form {
	display: flex;
	flex-direction: column;
	gap: 25px;
	max-width: 800px;
	width: 100%;
	margin-top: 75px;
	padding: 50px;
	border-radius: 15px;
	background-color: #e0e0e0;
	border: 2px solid black;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #737373;
}

input, textarea {
	font-family: "Lexend", sans-serif;
	font-weight: 400;
	font-size: 18px;
	color: black;
	width: 100%;
	background: #f2f2f0;
	padding: 8px;
	outline: none;

	border-radius: 10px;
	border: 2px solid #6e9c62;
}

input:focus,
textarea:focus {
	outline: none;
	border-color: #2e7d19;
}

button {
	margin-left: auto;
	padding: 10px 28px;
	border-radius: 10px;
	border: none;
	background-color: #6e9c62;

	font-family: "Lexend", sans-serif;
	font-weight: 400;
	font-size: 18px;
	color: white;
}

button:hover {
	background-color: #2e7d19;
}

button:active {
	background-color: #2e7d19;
	color: black;
}

.wrapper {
  z-index: 1;
  display: flex;
  align-items: center;
  text-align: center;
  margin: 0 auto;
  align-items: stretch;
  justify-content: center;
  color: #e3a74d;
}

.padding-top {
	padding-top: 75px;
}

.padding-bottom {
	padding-bottom: 75px;
}


/* navigation */
.navstyle {
	z-index: 3;
	width: 100%;
	background:#b3b3b3; /*this is the color of the nav bar */
	position: fixed;
	height: 80px;
	box-shadow: 0px 5px 4px 0 rgba(0,0,0,.3);
}

.navbar {
	display: flex;
	align-items: center;
	margin-top: 10px;
	padding: 0 25px;
	justify-content: space-between;
}

.nav-menu {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 60px;
}

.nav-link {
	transition: 0.7s ease;
}

.nav-link:hover {
	color: #12ba00; /*navigation link color on hover */
}

.nav-branding {
	font-family: "Besley", sans-serif;
	font-weight: 600;
	font-size: 35px;
	font-style: normal;
	color: white; /*text color for business name*/
	text-shadow: 1px 1px 2px black;
}

/* hamburger nav on mobile; you can see this by resizing your browser window */

.hamburger {
	display: none;
	cursor: pointer;
}

.bar {
	display: block;
	width: 25px;
	height: 3px;
	margin: 5px auto;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	background-color: white;
}


.nav-menu li {
	list-style: none;
	font-family: "Lexend", sans-serif;
	font-weight: 400;
	font-size: 20px;
}

.nav-menu li a {
	color: #595959; /* default state nav menu colors */
	text-decoration: none;
}


/*end nav */


/* section 2 (imaged) wrapper */
.bg-wrapper {
  z-index: 1;
  margin-top: 80px;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 60vh;          /* optional: full viewport height */
  text-align: center;
  align-items: stretch;
  justify-content: center;
  background: url("../images/bg2.jpg") no-repeat center center fixed;
  background-size: cover;
  box-shadow: inset 0 -2px 5px #1f1f1f;
}


/* section 2 headline */
.bg-wrapper h2 {
	width: 100%;
	font-family: "Besley", sans-serif;
	font-weight: 400;
	font-size: 35px;
	color: white;
	text-shadow: 2px 2px 8px black;
	text-align: left;
}

.bg-wrapper p {
 	padding-top: 25px;
	font-family: "Lexend", sans-serif;
	font-weight: 400;
	font-size: 15px;
	color: white;

 }


/* line under headline */
.bg-wrapper hr {
	width: auto;
	color: white;
	border-color: white;
	background-color: white;
	height: 5px;
}

.logo1 {
	max-height: 250px;
	filter: drop-shadow(0 0 0.75rem rgb(255, 217, 0));
}


/*these align the icon and text beside each other */

 .bg-item1 {
 	margin-top: 75px;
 	margin-bottom: 50px;
 	padding-left: 25%;
 	padding-right: 0;
 	margin-right: 0;
 	padding-bottom: 20px;
 	padding-top: 20px;
 	width: 50%;
 }

 .bg-item2 {
 	margin-top: 50px;
 	margin-bottom: 50px;
 	margin-left: 0;
 	margin-right: 0;
 	padding-left: 0;
 	padding-right: 25%;
 	padding-bottom: 20px;
 	padding-top: 20px;
 	width: 50%;
 }

/* -------------------------------------------------------
   1.  Landscape hero – stop content sticking to the left
   ------------------------------------------------------- */
@media (orientation: landscape) and (max-width: 1024px) {
  .bg-wrapper {
    flex-direction: row !important;      /* keep side-by-side layout */
    justify-content: center !important;  /* centre the two items */
    align-items: center;
    gap: 2rem;                           /* space between logo & text */
    padding: 1rem;
  }

  .bg-item1,
  .bg-item2 {
    width: auto;                         /* shrink-wrap content */
    max-width: 45%;                      /* never bigger than 45 % each */
    padding: 0;
    margin: 0;
    text-align: center;
  }

  /* kill the horizontal translate once animation is done */
  .bg-item1.show,
  .bg-item2.show {
    transform: translateX(0) !important;
  }
}

/* -------------------------------------------------------
   2.  Keep hamburger alive in landscape (≤ 1024 px)
   ------------------------------------------------------- */
@media (max-width: 1024px) {
  .hamburger {
    display: block !important;   /* force show */
  }

  .nav-menu {
    position: fixed;
    left: -100%;
    top: 80px;
    width: 100%;
    height: 100vh;
    flex-direction: column;
    background-color: #dfdac6;
    transition: left 0.3s ease;
  }

  .nav-menu.active {
    left: 0;
  }
}

/* -------------------------------------------------------
   3.  (Optional) tighten up the nav bar height on small
       landscape tablets/phones
   ------------------------------------------------------- */
@media (max-width: 1024px) {
  .navstyle {
    height: 60px;
  }
  .nav-branding {
    font-size: 28px;
  }
}

/* sections */
.text-box {
	width: 75%;
	justify-content: center;
}

.text-box hr {
	margin: auto;
	align: center;
	width: 100px;
	height: 5px;
	color: black;
	background-color: black;
	border-color: black;
}


/* FIRST BODY SECTION */
.section-A {
	width: 100%;
	background-color: #fffff;
}

/*Section A text colors*/

.section-A h1 {
	color: black;
}

.section-A p {
	color: black;
}

/* SECOND BODY SECTION */

.section-B {
	width: 100%;
	background-color: #5c5c5c;
}

/*Section B text colors*/

.section-B h1 {
	color: white;
}


.section-B p {
	color: white;
}

/* info box (those 3 boxes) wrapper */
.info-box-wrapper {
	z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: center;
  margin: 0 auto;
  padding-top: 10px;
  align-items: stretch;
  justify-content: center;
  color: white;
}

.info-box {
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 350px;
	height: 250px;
	background-color: #7a7a7a;
	border-radius: 30px;
	padding: 25px;
	margin: 10px;
	box-shadow:  10px 10px 10px rgba(0, 0, 0, 0.6);


	transform: translateX(-100%);
	transition: 1s;
}

.info-box p {
  font-size: clamp(14px, 1.8vw, 17px);   /* 14-17px depending on screen width */
  line-height: 1.35;                     /* tighter leading */
  word-break: break-word;                /* prevents long words from spilling */
  padding: 0 0.5rem;                     /* tiny side padding so text isn’t flush */
}



.info-box:nth-child(2) {
		transition-delay: 200ms;
}

.info-box:nth-child(3) {
		transition-delay: 400ms;
}

.info-box-content-check {
  display: flex;
  align-items: center;
}

.info-box-content {
	width: 90%;
}


/* service list */

.service-container {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 60%;
	height: auto;
	padding-top: 10px;
	margin: 0;
}

.service-box {
	margin: 25px;
	border: 2px solid black;
	background-color: white;
	border-radius: 30px;
	width: 300px;
	height: 50px;
	box-shadow:  10px 10px 10px rgba(0, 0, 0, 0.6);

	transform: translateY(-100%);
	transition: 1s;
}

.service-box p {
	font-size: 20px;
	color: green;
	margin: 0;
	padding: 10px;
}

.service-box:nth-child(4),
.service-box:nth-child(5),
.service-box:nth-child(6) {
		transition-delay: 200ms;
}



/*footer stuff */

.footer-style {
	z-index: 3;
	margin: 0;
	padding-bottom: 25px;
	width: 100%;
	flex-direction: column;
	align-items: center;
	background:black; /*this is the color of the nav bar */
	height: auto;
}

.footer {
	display: flex;
	align-items: center;
	margin-top: 25px;
	padding: 0 25px;
	justify-content: space-between;
}

.footer > *:not(:first-child) {
  border-left: solid gray 2px;
}

.line-box {
	width: 100%;
}



.footer-item-1 {
	width: 50%;
	text-align: right;
	padding-right: 30px;
}
.footer-item-2 {
	width: 50%;
	text-align: left;
	padding-left: 30px;

}

.copyright hr {
	width: auto;
	margin: auto;
	max-width: 800px;
}
.copyright {
	color: white;
	align-items: center;
	text-align: center;
}




.logo2 {
	max-height: 100px;
	padding-left: 50;
}

/*text editing */
.green-color {
	color: #12ba00;
}

/* transition properties */
.hidden {
	opacity: 0;
	filter: blur(5px);
}

.show {
	opacity: 1;
	filter: blur(0);
	transform: translateX(0) translateY(0);
}


@media (max-width: 600px), (max-height: 500px) and (orientation: landscape) {

  
	.navstyle {
		padding: 5px;
		margin-top: 0;
		border-radius: 0;
		background: #b3b3b3;
		height: auto;

	}
  .navbar {
  	flex-direction: row;
  	flex-wrap: wrap;
  }

  .hamburger {
  	display: block;
  }

  .hamburger.active .bar:nth-child(2) {
  	opacity: 0;
  }

  .hamburger.active .bar:nth-child(1) {
  	transform: translateY(8px) rotate(45deg);
  }

  .hamburger.active .bar:nth-child(3) {
  	transform: translateY(-8px) rotate(-45deg);
  }
}
  .nav-menu {
  	position: fixed;
  	left: -100%;
  	top: 80px;
  	gap: 0;
  	flex-direction: column;
  	background-color: #b3b3b3;
  	width: 100%;
  	text-align:center;
  	transition: 0.3s;
  }

  .nav-item {
  	margin: 16px 0;
  }

  .nav-menu.active {
  	left: 0;

  }

  .nav-menu li {
  	display: block;
  	text-align: center;
  	margin-bottom: 5px;
  }


	.nav-logo {
  	max-height: 25px;
  	object-fit: contain;
  }

  .bg-wrapper {
  	margin-top: 79px;
  	height: auto;
  	flex-direction: column;
  	background-size: cover;
  	background-position: 25% 75%;
  }

  .bg-wrapper h2 {
  	font-weight: 700;
  	text-align: center;
  	text-shadow: 4px 4px 10px black;
  	-webkit-text-stroke: 0.5px #3d3d3d;

  }

  .bg-wrapper p {
  	text-shadow: 4px 4px 10px black;
  	/* -webkit-text-stroke: 0.5px #3d3d3d; */
  }

  .green-color {
  	color: #00de51;
  }




  .logo1 {
  	max-height: 150px;
  }

  .info-box-wrapper {
  	flex-direction: column;
  }

  .info-box {
  	margin: auto;
  	margin-top: 10px;
  }

  .services {
  width: 100%
}

	.service-container {
		width: 100%;
	}

	.service-box {
		width: 250px;
		margin: 25px 5px;
	}

	.service-box:nth-child(2),
	.service-box:nth-child(3) {
		transition-delay: 200ms;
	}

	.leftAlign {
	padding: 0;
}
	form {
		width: 90%;
	}
}


}

.info-box {
  flex-direction: column;        /* stack icon above text */
  align-items: center;           /* center the column */
  text-align: center;            /* center the text itself */
}

.info-box-content-check {
  font-size: 2.4rem;             /* make check-mark bigger */
  margin: 0 0 0.75rem 0;         /* space under icon */
  line-height: 1;
  width: auto;                   /* remove old 10 % width */
}

.info-box-content {
  width: 100%;                   /* let text use full width again */
  padding-top: 0;                /* remove extra top spacing */
}

.info-box p,
.service-box p {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 1.25rem 0.5rem 1.25rem; /* equal top & bottom padding */
}

/* --- Services section same fixed background as Home --- */
#services,
.section-B {
  background: url("../images/bg2.jpg") no-repeat center center fixed;
  background-size: cover;
}

/* --- keep the original dark overlay if you still want it --- */
.section-B {
  background-color: transparent;   /* remove the solid #5c5c5c */
}

.bg-item2 h2 {
  text-align: center;
}

.nav-branding {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Besley", sans-serif;
  font-weight: 600;
  font-size: 35px;
  color: white;
  text-shadow: 1px 1px 2px black;
}

.nav-logo {
  height: 40px;
  width: auto;
}

.wrapper.section-B .service-box {
  font-size: 1.30rem;
  font-weight: 600;
  padding: .7rem 0;      /* equal top & bottom padding inside each box */
  line-height: 1;
}

/* --- slide-in animations --- */
@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* apply to logo */
.bg-item1 {
  animation: slideInLeft 1s ease-out forwards;
}

/* apply to text block */
.bg-item2 {
  animation: slideInRight 1s ease-out 0.2s forwards; /* 0.2 s delay */
}
/* apply to logo */
.bg-item1 {
  opacity: 0;
  animation: slideInLeft 2s ease-out 0.2s forwards paused;
}

/* apply to text block */
.bg-item2 {
  opacity: 0;
  animation: slideInRight 2.5s ease-out 0.2s forwards paused; /* 0.2 s delay */
}

/* =========================================================
   =  DROP-IN MOBILE FIXES  =
   ========================================================= */

/* 1. Stop horizontal overflow everywhere */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* 2. Hero: full-width, stacked, centered text */
@media only screen and (max-width: 600px) {
  .bg-wrapper {
    flex-direction: column !important;
    height: auto;
    padding: 2rem 1rem;
  }

  .bg-item1,
  .bg-item2 {
    width: 100%;
    padding: 1rem 0;
    text-align: center;
  }

  .bg-item1 {
    order: -1;              
  }

  .bg-item2 {
    order: 0;
  }
}

/* 3. Service tiles: 1 column, centered */
@media only screen and (max-width: 600px) {
  .service-container {
    grid-template-columns: 1fr !important;
    gap: 1rem;
    padding: 0 1rem;
  }

  .service-box {
    width: 100%;
    max-width: 280px;
    margin: 0 auto 1rem;
  }
}

/* 4. Info boxes full-width instead of 3-column */
@media only screen and (max-width: 600px) {
  .info-box {
    width: 90%;
    margin: 0 auto 1.5rem;
  }
}

/* --- Give the contact info at the bottom some breathing room --- */
@media only screen and (max-width: 600px) {
  .footer {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 0;
  }

  .footer-item-1,
  .footer-item-2 {
    width: 100%;
    text-align: center;
    padding: 0;
    border-left: none;
  }
}

/* --- Scalable Hero Text --- */
.bg-wrapper h2 + p {
  font-size: clamp(2rem, 5vw, 3rem);
  text-shadow: 0 0 10px rgba(0,0,0,.35);
}
.bg-wrapper h2 + p .green-color {
  text-shadow: 0 0 8px rgba(18,186,0,.6);
}

/* --- green color gradiant on button hover --- */
button {
  background: linear-gradient(135deg, #6e9c62 0%, #2e7d19 100%);
  transition: transform .2s;
}
button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,.25);
}

/* --- Service box hover tint --- */
.service-box {
  border-radius: 12px;
  transition: background .3s, transform .2s;
}
.service-box:hover {
  background: #f0f0f0;
  transform: scale(1.03);
}

/* --- Lighter info box border --- */
.info-box {
  background: #e8e8e8;
  border: 1px solid #ccc;
}

/* --- Footer breathing room --- */
.footer {
  padding: 2rem 1rem;
}
.footer > *:not(:first-child) {
  border-left: solid #444 1px;
}

/* --- Smooth scroll --- */
html {
  scroll-behavior: smooth;
}

/* --- header color & text color --- */
.navstyle,
.nav-menu,
.nav-branding,
.nav-menu li a {
  background-color: #dfdac6 !important;
  color: #49602f !important;
}

/* dark overlay behind text on mobile & desktop */
.bg-item2 {
  position: relative;
}
.bg-item2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);   /* 45 % black */
  border-radius: 8px;
  z-index: 1;
}
.bg-item2 > * {          /* text sits above overlay */
  position: relative;
  z-index: 2;
}



@media only screen and (max-width: 600px) {
  .section-B .text-box {
    padding-bottom: 2rem; /* extra space above the service boxes */
  }
}


/* dark, hero-matching shadow box for Services text */
.section-B .text-box {
  position: relative;
  background: rgba(0, 0, 0, 0.45);  /* 45 % black (same as hero) */
  border-radius: 12px;
  padding: 2rem 1.5rem;
  box-shadow: inset 0 0 10px rgba(0,0,0,.5);
  max-width: 800px;
  margin: 0 auto 2rem;
}

/* --- Shrink hr line in hero text --- */
.bg-wrapper hr {
  width: 75%;      /* 3/4 the default length */
  margin: 0 auto;  /* keep it centered */
}

/* iOS-only overrides – paste at bottom */
@supports (-webkit-touch-callout: default) {
  html { -webkit-text-size-adjust: 100%;
  #services,
  .section-B {
    background-attachment: scroll !important; /* remove fixed */
    background-size: cover;
  }
    
}

  /* kill broken fixed background */
  .bg-wrapper, .section-B {
    background-attachment: scroll;
    background-size: cover;
  }

  /* stop flex collapse */
  .logo1, .nav-logo {
    flex-shrink: 0;
    max-width: 100%;
  }

  /* lock font scale */
  :root { font-size: 16px; }
}

/* prevent header logo overflow on iOS */
.nav-logo {
  height: 40px;
  max-width: 100%;
  object-fit: contain;
  flex-shrink: 0;
}

/* Keep side-by-side in landscape phones & tablets */
@media (max-width: 1024px) and (orientation: landscape) {
  .bg-wrapper {
    flex-direction: row !important;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 1rem;
  }

  .bg-item1,
  .bg-item2 {
    width: auto;           /* shrink-wrap content */
    max-width: 45%;        /* never overflow */
    padding: 0;            /* remove big left/right paddings */
    margin: 0;
  }

  /* keep the shadow box only as wide as the text inside */
  .bg-item2 {
    display: inline-block;
  }
}

/* desktop narrow-window guard */
@media (min-width: 601px) and (max-width: 1400px) {
  .bg-wrapper {
    flex-direction: row !important;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 1rem;
  }

  .bg-item1,
  .bg-item2 {
    width: auto;          /* shrink to content */
    max-width: 45%;       /* never exceed half the row */
    padding: 0;           /* clear the 25 % paddings */
    margin: 0;
  }

  /* keep shadow box only as wide as the text */
  .bg-item2 {
    display: inline-block;
  }
}

/* --------------------------------------------------
   DESKTOP – hero logo & text always side-by-side
   -------------------------------------------------- */
@media (min-width: 1025px) {
  .bg-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2rem;                      /* space between logo & text */
    height: 60vh !important;
  }

  .bg-item1,
  .bg-item2 {
    width: auto !important;         /* shrink-wrap content */
    max-width: 45% !important;      /* never exceed half the row */
    padding: 0 !important;          /* remove the 25 % paddings */
    margin: 0 !important;
  }
}

@media (min-width: 1025px) {
  .logo1 {
    filter: none;                       /* remove the sharp drop-shadow */
    position: relative;
  }