/* ========================================
   Global Reset & Variables
   ======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: Arial, sans-serif;
  color: black;
  line-height: 1.5;
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  display: block;
}
.container {
  margin: 0 auto;
  padding: 0 2px;
}

/* ========================================
   Header & Navigation
   ======================================== */
.site-header {
background: #283c86;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #45a247, #283c86);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #45a247, #283c86); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  padding: 5px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
}
.main-nav {
  display: flex;
  justify-content: center;
  gap: 30px;
}
.main-nav a {
  color: white;
  font-weight: bold;
}
.main-nav .active {
  text-decoration: underline;
  color: yellow;
}
.mobile-nav-toggle {
  display: none;
  background: none;
  border: none;
  color: white;
  font-size: 4px;
  cursor: pointer;
}
.logo {
  color: yellow;
  font-size: 30px;
  text-align: center;
  margin-bottom: 5px;
  font-weight: bold;
}

/* ========================================
   Hero Section
   ======================================== */
.hero {
  background-image: url('./image/lawnworker4.jpg'); /* hero background jpg */
  background-size: cover;
  background-position: center;
  text-align: center;
  color: white;
  padding: 4rem 1rem;
}
.hero-specials {
  background-image: url('./image/grassclean01.jpg');
  background-size: cover;
  background-position: center;
  width: 70%;
  height: 300px;
  margin: auto;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  border-radius: 12px; 
}
.hero-specials p {
  font-style: italic;
  color:rgb(231, 235, 41); /* having a hard time finding a color that matches the background image*/
  font-weight: bold;
  font-size: 30px;
}
.hero-features {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}
.hero-features li {
  background: rgba(0,0,0,0.4);
  padding: 0.5rem 1rem;
  border-radius: 1rem;
}
.btn {
  display: inline-block;
  background: #314e22;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 1rem;
  margin-top: 1rem;
  font-weight: bold;
}

/* ========================================
   Sections & Layout
   ======================================== */
section {
  padding: 2rem 0;
}
.why-choose-us {
  background: rgb(205, 205, 205);
  color: black;
  text-align: center;
  padding: 10px 15px;
}
.why-choose-us h2 {
    padding-top: 20px;
    padding-bottom: 20px;
}
.awards {
  background-image: url('./image/awardslawn.JPG');
  background-size: contain;
  background-position: center;
  object-fit: cover;
  width: 100%;
  height: 250px;
  border: 1px solid black;
}

/* ========================================
   Services Page Styles
   ======================================== */
.service-title {
    text-align: center;
    margin-bottom:25px ;
}  
.service-description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
} 
.service-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 4px;
}
.service-item {
  flex: 1;
min-width: 30%;
  background: #ced9c6;
  padding: 1rem;
  border-radius: 0.5rem;
  text-align: center;
}
.service-img-1 {
  width: 100%;
  height: 200px;
  background-image: url('./image/weedcontrol1.jpg');
  background-size: cover;
   background-position: center bottom;
  margin-bottom: 5px;
}
.service-img-2 {
  width: 100%;
  height: 200px;
  background-image: url('./image/grubcontrol.jpg');
  background-size: cover;
  margin-bottom: 5px;
}
.service-img-3 {
  width: 100%;
  height: 200px;
  background-image: url('./image/deeproot.jpg');
  background-size: cover;
  background-position: center bottom -100px;
  margin-bottom: 5px;
}
.service-img-4 {
  width: 100%;
  height: 200px;
  background-image: url('./image/lawnaeration.jpg');
  background-size: cover;
  margin-bottom: 5px;
}
.service-img-5 {
  width: 100%;
  height: 200px;
  background-image: url('./image/soilrejenavation.jpg');
  background-size: cover;
  background-position: center bottom -100px;
  margin-bottom: 5px;
}
.service-img-6 {
  width: 100%;
  height: 200px;
  background-image: url('./image/dethaching.jpg');
  background-size:cover;
  background-position: center bottom -100px;
  margin-bottom: 5px;
}
.cost {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.package-section-title {
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}
.packages {
  display: flex;
  gap: 1rem;
  justify-content: center;
  background-color: #ced9c6;
}
.package-1 {
  display: flex;
  flex-direction: column;
  gap: 25px;
  justify-content: space-between;
  background-image: url('./image/lawnworker4.jpg');
  background-size: cover;
  padding: 1rem;
  border-radius: 20%;
  text-align: center;
  height: 450px;;
}
.package-1 ul {
    list-style-type: none; 
    padding-top: 10px;
    padding-bottom: 10px;
}
.package-1 ul li{
    list-style-type: none; 
    padding-top: 10px;
    padding-bottom: 10px;
}
.package-2 {
  display: flex;
  flex-direction: column;
  gap: 25px;
  justify-content: space-between;
  background-image: url('./image/lawnworker4.jpg');
  background-size: cover;
  padding: 1rem;
  border-radius: 20%;
  text-align: center;
}
.package-2 ul {
    list-style-type: none; 
     padding-top: 10px;
    padding-bottom: 10px;
}
.package-2 ul li{
    list-style-type: none; 
    padding-top: 10px;
    padding-bottom: 10px;
}
.package-3 {
  display: flex;
  flex-direction: column;
  gap: 25px;
  justify-content: space-between;
  background-image: url('./image/lawnworker4.jpg');
  background-size: cover;
  padding: 1rem;
  border-radius: 20%;
  text-align: center;
}
.package-3 ul {
    list-style-type: none; 
     padding-top: 10px;
    padding-bottom: 10px;
}
.package-3 ul li{
    list-style-type: none; 
    padding-top: 10px;
    padding-bottom: 10px;
}
.package-title {
    color: white;
    font-weight: bolder;
    font-size: 24px;
}
.package-description {
    color: white;
    font-weight: bolder;
}
.package-price {
    font-weight: bolder;
    font-size: large;
}
.cost-btn {
  display: inline-block;
  background: rgb(103, 147, 103);
  color: yellow;
  padding: 0.75rem 1.5rem;
  border-radius: 1rem;
  margin-top: 1rem;
  font-weight: bold;
  width: 50%;
  margin: auto;
}
.guarantee {
  display: flex;
  gap: 2rem;
  justify-content: center;
  text-align: center;
  padding: 2rem 1rem;
  padding-top: 25px;
  padding-bottom: 20px;
  margin-top: 25px;
  margin-bottom: 25px;
}
.guarantee .item {
  flex: 1;
}
.guarantee-title {
    font-weight: bolder;
    color: rgb(103, 147, 103);
    text-align: center;
}

/* ========================================
   About Page Styles
   ======================================== */
.about-intro h1{
    text-align: center;
    margin-top: 20px;
    margin-bottom: 15px;
}

.team-section {
   text-align: center;
   background-color: #d6dad5;
    
}

.aboutusp{ /* I had to add this because the text did not want to center with the bigger container, weird?*/
     text-align: center;
}
.team-section h2 {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 15px; 
}
.team {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}
/* Team grid layout */
.team-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 25px;
}
.team-member {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 30%;
  text-align: center;
}
.team-1 {
  background-image: url('./image/andrew.jpg');
  height: 300px;
  width: 80%;
  margin: auto;
  background-size: cover;
}
.team-2 {
  background-image: url('./image/brooke.jpg');
  height: 300px;
  width: 80%;
  margin: auto;
  background-size: cover;
}
.team-3 {
  background-image: url('./image/elie.jpg');
  height: 300px;
  width: 80%;
  margin: auto;
  background-size: cover;
}
.team-4 {
  background-image: url('./image/fineasjpg.jpg');
  height: 300px;
  width: 80%;
  margin: auto;
  background-size: cover;
}
.team-5 {
  background-image: url('./image/greg.jpg');
  height: 300px;
  width: 80%;
  margin: auto;
  background-size: cover;
}
.team-6 {
  background-image: url('./image/ian.jpg');
  height: 300px;
  width: 80%;
  margin: auto;
  background-size: cover;
}
.team-7 {
  background-image: url('./image/matheus.jpg');
  height: 300px;
  width: 80%;
  margin: auto;
  background-size: cover;
}
.team-8 {
  background-image: url('./image/praja.jpg');
  height: 300px;
  width: 80%;
  margin: auto;
  background-size: cover;
}
.team-9 {
  background-image: url('./image/warren.jpg');
  height: 300px;
  width: 80%;
  margin: auto;
  background-size: cover;
}
.team-member {
  flex: 1 1 calc(33% - 2rem);
  text-align: center;
}
.team-member img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
}
.testimonials {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: 2rem 0;
}
.testimonial {
  flex: 1 1 calc(33% - 1rem);
  background: #ced9c6;
  padding: 1rem;
  border-radius: 0.5rem;
  text-align: center;
}
/* Testimonials layout */
.testimonial-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.testimonial {
  flex: 1 1 calc(33% - 1rem);
  background: #ced9c6;
  padding: 1rem;
  border-radius: 0.5rem;
}
.testimonial p{
    font-weight: bolder;
}
.testimonial span{
    font-weight: bolder;
    color: green;
}
.stars-placeholder {
  width: 100px;
  height: 20px;
  background-color: #ccc;
  margin: 0.5rem auto 0;
}
.estimate-form h2 {
    color: green;
}
.client {
    text-align: center;
    margin-top: 25px;
    margin-bottom: 25px;
}

/* ========================================
   Blog Page Styles
   ======================================== */
.blog-section h1 {
    text-align: center;
    margin-top: 25px;
    margin-bottom: 25px;
}
.blog-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
  justify-content: center;
  margin-bottom: 35px;
}
.blog-post {
  flex: 1 1 calc(33% - 2rem);
  background: #ced9c6;
  padding: 1rem;
  border-radius: 0.5rem;
  text-align: center;
}
.blog-post img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
}
.blog-1 {
  background-image: url('./image/lawnworker2.jpg');
  height: 300px;
  width: 80%;
  margin: auto;
  background-size: cover;
}
.blog-2 {
  background-image: url('./image/grasshouseclean2.jpg');
  height: 300px;
  width: 80%;
  margin: auto;
  background-size: cover;
}
.blog-3 {
  background-image: url('./image/landscapeclean1.jpg');
  height: 300px;
  width: 80%;
  margin: auto;
  background-size: cover;
}
.blog-4 {
  background-image: url('./image/lawnworker3.jpg');
  height: 300px;
  width: 80%;
  margin: auto;
  background-size: cover;
}
.blog-5 {
  background-image: url('./image/rainlawn.jpg');
  height: 300px;
  width: 80%;
  margin: auto;
  background-size: cover;
   background-position: center bottom -100px;
}
.blog-6 {
  background-image: url('./image/lawnweed.jpg');
  height: 300px;
  width: 80%;
  margin: auto;
  background-size: cover;
   background-position: center bottom -50px;
}
.read-more {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: bold;
  color: #314e22
}

/* ========================================
   Contact Page Styles
   ======================================== */
.contact-info {
  text-align: center;
  margin-bottom: 2rem;
}
.details {
  display: flex;
  flex-direction: column;
  padding: 25px;
  margin: auto;
  margin-top: 25px;
  margin-bottom: 25px;
  border: 1px dotted gray;
  width: 50%;
  border-radius: 10px;
}
.details-info {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 25px;
}
.details div {
  margin: 0.5rem 0;
}
.map {
  width: 80%;
  height: 500px;
  background-image: url('./image/map.jpeg');
  background-size: cover;
  margin: auto;
}
.contact-form {
  width: 60%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  border: 1px solid gray;
  background-color: rgb(230, 251, 230);
  gap: 1rem;
  padding: 50px;
}
.contact-form input {
  padding: 0.5rem;
  border: 1px solid #999;
  border-radius: 0.25rem;
}
.contact-form button {
  background: rgb(99, 164, 99);
  color: white;
  width: 50%;
  margin: auto;
  padding: 0.75rem;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
}

.estimate-form h2 {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* ========================================
   Footer Styles
   ======================================== */
.site-footer {
  background: rgb(167, 167, 167);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 1rem;
  flex-wrap: wrap;
  height: 300px;
  font-weight: bolder;
  font-size: large;
}
.footer-contact div {
  margin: 0.25rem 0;
}
.footer-address {
  text-align: right;
}

/* ========================================
   Responsive: Mobile Iphone 14 Pro Max (430 x 932)
   ======================================== */
@media (max-width: 430px) {
  .main-nav {
    display: none;
    flex-direction: column;
    background: #314e22;
    width: 100%;
    text-align: center;
  }
  .main-nav.open {
    display: flex;
  }
  .hero-specials {
    display: none;
  }
  .awards {
    background-size: cover;
    width: 430px;
    height: 165px;
  }
  .service-description {
    padding: 20px;
    color: rgb(24, 94, 24);
    font-weight: 400;
  }
  .packages {
    flex-direction: column;
  }
  .package-1{
    width: 80%;
    margin: auto;
  }
  .package-2{
    width: 80%;
    margin: auto;
  }
  .package-3{
    width: 80%;
    margin: auto;
    padding: 15px;
  }
  .blog-picture {
    border-radius: 50%;
  }
  .details {
    width: 80%;
  }
  .map-container {
    background-color: #b2b0b0;
    padding: 10px;
  }
  .map {
    width: 80%;
    border-radius: 20px;
  }
  .mobile-nav-toggle {
    display: block;
    position: absolute;
    top: 1rem;
    right: 1rem;
  }
  .service-item, .package, .team-member, .blog-post, .testimonial {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100%;
  }
  .hero-features {
    flex-direction: column;
  }
  .guarantee {
    flex-direction: column;
  }
  .site-footer {
    flex-direction: column;
    text-align: center;
    align-items: center ;
    justify-content: center;
    font-size: medium;
  }
}