/******************************** Font Family Css Start **********************************/
 h1, h2, h3, h4, h5, h6 {
     margin-bottom: 20px;
     font-family: "Poppins", sans-serif;
     color: #121212;
}

 .header.sticky {
     position: fixed;
}

section.instagram-sec {
    overflow: hidden;
    z-index: 11;
    position: relative;
    background: #fff;
    padding-bottom: 60px;
    padding-top: 0;
}
section.better_garden_sec_.title_only {
    position: relative;
    background: #cdffa2;
    z-index: 111;
}
section.review-container.client {
    background: #CDFFA2;
    padding-top: 0px;
}
 h4 p {
     margin-bottom: 40px;
}
section {
     padding: 60px 0px 0px;
}



section.instagram-sec h2.main-heading {
    max-width: 900px;
    width: 100%;
    margin: 0px auto 50px;
}

h2.main-heading {
    font-size: 48px;
    font-weight: 600;
    color: #121212;
    line-height: 1.2em;
    letter-spacing: 1px;
    width: 100%;
    max-width: 600px !important;
}

.sub-heading {
    color: #1E7B0C;
    font-size: 16px;
    font-weight: 400;
}

 p.sub_heading {
     text-align: center;
     font-family: DM Sans, sans-serif;
     font-size: 20px;
     font-weight: 500;
     line-height: 150%;
     margin-bottom: 30px;
     color: #fff;
}

h5.fw-bold.mb-4 {
    font-size: 25px;
    font-weight: 700;
    font-family: "Lato", Sans-serif;
    color: #1d5010;
}
 footer.footer {
     color: #121212;
     position: relative;
     z-index: 111;
     background: #f5f5f5;
}
 ul.list-unstyled li a {
     color: #121212;
}
 p {
     font-family: DM Sans, sans-serif;
}
 @media (min-width: 1400px) {
     .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
         max-width: 1470px;
    }
}
/******************************** header Css Start *************************************/
/*  body {
     background: rgba(29, 80, 16, 1) !important;
} */
 header.header {
     position: absolute;
     width: 100%;
     z-index: 1111;
}
 a.btn.btn-primary-custom i.fa-solid.fa-phone {
     padding-left: 10px;
}
 ul.navbar-nav.mx-auto li {
     padding-left: 20px;
}
 ul.navbar-nav.mx-auto li a {
     font-family: "Lato", Sans-serif;
     font-size: 20px;
     font-weight: 500;
     text-transform: capitalize;
     line-height: 23px;
     color: #FFFFFF;
     border-radius: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
}
 a.btn.btn-primary-custom:hover {
     background-color: rgba(29, 80, 16, 1);
     color: #fff;
     box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.5);
}
 .user-icon {
     border: 1px solid #fff;
     border-radius: 50%;
     padding: 8px 15px 8px 15px;
     color: #fff;
     font-size: 20px;
     cursor: pointer;
     transition: background 0.3s ease, color 0.3s ease;
}
 .user-icon:hover {
     background-color: #FFFFFF;
     color: #61CE70;
}
 a.nav-link {
     font-size: 22px;
     color: #fff;
     font-weight: 400;
}
.btn-primary-custom {
    background-color: #1E7B0CB2;
    font-size: 20px;
    font-weight: 400;
    color: #ffffff;
    line-height: 24px;
    transition-duration: 0.5s;
    border-style: none;
    border-radius: 16px;
    padding: 16px 20px 16px 20px;
    font-family: "Poppins", sans-serif;
}
 .btn-outline-custom:hover {
     background-color: rgba(29, 80, 16, 1);
     color: #fff;
}
 .btn-outline-custom {
     background-color: #1E7B0CCC;
     font-size: 18px;
     font-weight: 400;
     color: #ffffff;
     line-height: 24px;
     transition-duration: 0.5s;
     border-style: none;
     border-radius: 16px;
     padding: 14px 20px 14px 20px;
     font-family: "Poppins", sans-serif;
}
 .btn-outline-custom i.fa-solid.fa-arrow-right, .btn-primary-custom i.fa.fa-arrow-right {
     margin-left: 10px;
}
/************************************ Header Css End ********************************************/


/************************************ Hero Section Css Start ********************************************/

/* HERO */
.hero-section {
    position: relative;
    min-height: 800px;
    overflow: hidden;
    display: flex;
    align-items: self-start;
    justify-content: center;
   /*  padding-top: 80px; /* space for header */ 
}

/* Background */
.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Blue overlay */
.hero-section .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 2;
}

/* Inner content */
.hero-inner {
    position: relative;
    z-index: 3;
}

.hero-title {
    color: #ffffff;
    font-weight: 700;
    font-size: 120px;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    padding-top: 80px;
}
 .container.hero-inner {
    position: relative;
} 
/* Center image (man) */
.hero-center-img {
    margin: 10px auto 20px;
    max-width: 600px;        /* adjust to your taste */
}

.hero-center-img img {
    width: 100%;
    height: auto;
}
.container.hero-inner .hero-center-img {
    position: absolute;
    z-index: 1;
     bottom: 0; 
    left: 0;
    right: 0;
    top: 0;
}

/* Middle CTA button */
.hero-main-btn {
    margin-top: 25px;
    z-index: 11;
    position: relative;
    color: #fff;
    background: #1E7B0CCC;
}

/* Flowers at bottom */
.hero-bottom-img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 2;
}

.hero-bottom-img img {
    width: 100%;
    display: block;
}


/************************************ Service for you Section Css Start ********************************************/

section.landscaping.container-fluid img {
    background: #8BC26633;
    border-radius: 20px;
}
.service-for-you {
    max-width: 980px;
    margin: 0px auto;
}
.service-for-you p {
    font-size: 18px;
    font-weight: 600;
    color: #101828;
	margin-top:10px;
}


/************************************ Service for you Section Css Start ********************************************/



/************************************ Service Section Css Start ********************************************/

section.services-sec {
     display: flex;
     flex-direction: column;
     gap: 60px;
     background: #fff;
     position: relative;
     z-index: 11;
}
.single_service {
    position: relative;
}
 .single_service h2.main-heading {
     font-size: 48px;
     z-index: 1;
     position: relative;
     margin: 0px 0px 30px;
	 color: #fff;
}
.service_content {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    vertical-align: middle;
    bottom: 0;
    max-width: 620px;
    padding: 50px;
}
 .single_service img {
     max-height: 600px;
     width: 100%;
     object-fit: cover;
}
.single_service .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 32%);
    z-index: 0;
}
.single_service .sdf img {
    border-radius: 40px;
}
.service_content p {
    color: #fff !important;
}
.service_content .sub-heading {
    color: #CDFFA2;
    font-size: 16px;
    font-weight: 400;
}
.sdf .overlay {
    border-radius: 40px !important;
}

/************************************ Service Section Css End ********************************************/



/************************************ After Before Section Css Start ********************************************/

section.before-after-container h2.main-heading {
     max-width: 1080px;
     margin: 0px auto 50px;
     font-size: 48px !important;
}
.slick-prev:before {
    content: '←';
    background: rgb(29 80 16);
    padding: 14px;
    border-radius: 20px;
    width: 24px;
    z-index: 111111;
    color: #ffffff !important;
}
/*  .slick-prev {
     left: -55px;
} */
 .slick-next:before {
     content: '→';
     background: rgb(29 80 16);
     padding: 14px;
     border-radius: 20px;
     width: 24px;
     z-index: 111111;
     color: #ffffff !important;
}

/************************************ After Before Section Css End  ********************************************/


/************************************ About Section Css Star ********************************************/

 .box-sec_inner {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
}
.feature_box_ {
    padding: 0px 10px 0px 10px;
    border-radius: 40px;
    background: #8BC26633;
    text-align: center;
}
.about-img img {
    width: 100%;
    padding: 30px;
}
.about-content p {
    max-width: 400px;
    margin-bottom: 30px;
    color: #4A5565;
    font-size: 14px;
	text-align: left;
}
.feature-title {
    color: #101828;
    font-size: 24px;
    text-align: left;
    font-weight: 600;
}


/************************************ About Section Css End ********************************************/


/************************************ Estimate Section Css Star ********************************************/
section.estimate-cost {
    background: url('../images/dream.jpg');
    margin-top: 80px;
    background-size: cover;
    background-position: center;
    padding-bottom: 80px;
	position: relative;
}

.estimate-wrapper.container h2, .estimate-wrapper.container p {
    color: #fff !important;
}
.estimate-cost .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 2;
}
.estimate-wrapper.container {
    z-index: 1111111111;
    position: relative;
}
.estimate-wrapper {
      max-width: 980px;
      margin: 40px auto;
      padding: 0 16px;
    }

.estimate-card {
    background: rgba(255, 255, 255, 0.2); /* translucent background */
    border-radius: 28px;
    padding: 32px 32px 40px;
    backdrop-filter: blur(12px); /* blur effect */
    -webkit-backdrop-filter: blur(12px); /* Safari support */
    border: 1px solid rgba(255, 255, 255, 0.25); /* optional glass border */
}


.estimate-card label {
      font-weight: 600;
      font-size: 1rem;
      margin-bottom: 6px;
	  color:#fff;
    }

.estimate-card .form-control,
.estimate-card .form-select {
      border-radius: 12px;
      border-color: #e0e0e0;
      padding: 10px 14px;
      font-size: 0.95rem;
    }

.estimate-card .upload-box {
      border: 2px dashed #d0d0d0;
      border-radius: 12px;
      background: #ececec;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.95rem;
      cursor: pointer;
      color: #555;
    }
	
.estimate-wrapper h2.main-heading {
		font-size: 48px;
		font-weight: 600;
	}

.estimate-card .upload-box span {
      margin-left: 6px;
    }

.services-title {
      font-weight: 600;
      margin-bottom: 12px;
	  color:#fff;
    }

.service-list .form-check {
      margin-bottom: 8px;
    }

    /* Custom checkbox look */
.service-list .form-check-input {
      width: 18px;
      height: 18px;
      border-radius: 4px;
      border: 1px solid #bcbcbc;
      cursor: pointer;
    }

.service-list .form-check-input:checked {
      background-color: #27ae60;
      border-color: #27ae60;
    }

.service-list .form-check-label {
      margin-left: 4px;
      font-size: 0.95rem;
    }
	
.estimate-actions  button {
     width: 100%;
     background: #ACFF64;
     font-size: 18px;
     font-weight: 800;
     border: none;
     border-radius: 10px;
     padding: 12px 16px;
     color: #1D5010;
     font-family: 'DM Sans';
     display: flex;
     justify-content: center;
     gap: 10px;
     align-items: center;
}
.estimate-actions {
      margin-top: 28px;
      position: relative;
    }
	
.lawn-cta-inner .newsletter-box {
    max-width: 420px;
    margin: 0px auto;
}

 @media (max-width: 767.98px) {
    .estimate-card {
        padding: 24px 20px 32px;
    }
.lawncare-sec h3.main-heading {
	color: #fff;
    font-size: 28px;
}
h1.lawn-heading {
    font-size: 28px;
    color: #121212;
}
}

/************************************ Estimate Section Css End ********************************************/


/************************************ Testimonial Section Css Start ********************************************/

section.testimonial-sec {
    overflow: hidden;
    padding-bottom: 60px;
}
 section.testimonial-sec h2.main-heading {
     max-width: 900px !important;
     width: 100%;
     margin: 0px auto 50px;
	 font-size:48px;
}
.avtar_info {
     display: flex;
     align-items: center;
     gap: 20px;
     justify-content: center;
     margin-top: 60px;
}
.bottom .avtar img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 50px;
}
.testimonial-slide .feature-item_ img {
    width: auto;
    margin-bottom: 10px;
}
img.testi_top_img {
    background: #8BC26633;
    border-radius: 20px;
	margin-bottom: 20px;
}
.bottom .avtar {
    display: flex;
    gap: 6px;
}
 .testimonial-feed button.slick-arrow {
     display: none !important;
}
 .testimonial-feed .slick-slide {
     margin: 0 10px;
    /* Adjust gap as needed */
}
 .testimonial-feed .slick-list {
     margin: 0 -10px;
    /* Negative margin to compensate for added slide margin */
}
 .testimonial-feed .feature-item_ {
     border: 0px solid #cdcdcd;
}
.testimonial-slide {
     border: 1px solid #cdcdcd;
	 border-radius:15px;
}
.testimonial-feed .feature-item_ img {
     width: 100%;
     border-radius: 32px;
}
.testimonial-slide.slick-slide {
    background: #f6f6f6;
    padding: 15px;
    border-radius: 15px;
}
.slick-slide img {
    display: block;
    border-radius: 31px !important;
    width: 100%;
}

/************************************ Testimonial Section Css End ********************************************/


/************************************ Instagram Section Css Start ********************************************/

section.instagram-sec {
    overflow: hidden;
    padding-bottom: 60px;
}
 section.instagram-sec h2.main-heading {
     max-width: 900px !important;
     width: 100%;
     margin: 0px auto 50px;
	 font-size:48px;
}
.avtar_info {
     display: flex;
     align-items: center;
     gap: 20px;
     justify-content: center;
     margin-top: 60px;
}
.bottom .avtar img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 50px;
}
.bottom .avtar {
    display: flex;
    gap: 6px;
}
 .insta-feed button.slick-arrow {
     display: none !important;
}
 .insta-feed .slick-slide {
     margin: 0 10px;
    /* Adjust gap as needed */
}
 .insta-feed .slick-list {
     margin: 0 -10px;
    /* Negative margin to compensate for added slide margin */
}
 .insta-feed .feature-item_ {
     border: 0px solid #cdcdcd;
}
.insta-feed .feature-item_ img {
     width: 100%;
     border-radius: 32px;
}
.insta-slide .feature-item_ img {
    max-height: 300px;
    min-height: 300px;
    object-fit: cover;
}
/************************************ Instagram Section Css End ********************************************/


/************************************ Footer Styles ********************************************/
 .footer {
     color: #1d5010;
     padding: 60px 0 30px;
}
 .social-icon {
     color: #1d5010;
     font-size: 1.5rem;
     margin-right: 15px;
     transition: color 0.3s ease;
}
 .social-icon:hover {
     color: var(--accent);
}
.newsletter-box {
    max-width: 420px;
}

.newsletter-input {
    height: 55px;
    border-radius: 15px;
    padding-left: 20px;
    font-size: 15px;
}
form.newsletter-box.d-flex {
    position: relative;
}
.newsletter-btn {
    height: 45px;
    padding: 0 25px;
    border-radius: 15px;
    background-color: #b4ff3b; /* neon green like screenshot */
    font-weight: 600;
    color: #000;
    border: none;
}

.newsletter-btn:hover {
    background-color: #a7ff1f;
    color: #000;
}
button.btn.newsletter-btn.ms-2 {
    position: absolute;
    right: 5px;
    top: 5px;
}
/************************************ Media Queries ********************************************/
 @media screen and (max-width: 767px) {
	 section.families-sec-title .container.fours {
    position: relative;
}
     .slick-dots li button:before {
         font-size: 10px;
    }
     .header {
         max-width: 100%;
         width: 100%;
    }
     .header div#navbarNav {
         background: #000;
         z-index: 1 !important;
    }
     header.header .container {
         padding: 0;
    }
     a.navbar-brand {
         margin-left: 15px;
    }
     button.navbar-toggler {
         margin-right: 15px;
    }
     .container.fours {
         position: relative;
         margin: 0px auto;
    }
     .hero-section h1 {
         font-size: 40px;
         font-weight: 600;
         line-height: 45px;
         margin: 0px auto 20px;
         letter-spacing: 0;
    }
     .hero-section h1 span {
         font-size: 26px;
    }
     .hero-section p {
         font-size: 12px;
         font-weight: 400;
         line-height: 25px;
         margin-top: 20px;
    }
     h2.main-heading, .rooted-title {
         font-size: 30px;
         line-height: 40px;
         margin-bottom: 0px;
         letter-spacing: 0px;
    }
     form.plants_form h3 {
         font-size: 22px;
    }
     h4.before-heading, .rooted-subtitle {
         font-size: 24px;
         margin-bottom: 5px;
    }
     p.sub_heading, .lead, .rooted-description {
         font-size: 16px;
         line-height: 25px;
         margin-bottom: 10px;
    }
     .tab_description {
         padding: 10px 3px;
         font-size: 13px;
    }
     .tab_description h3 {
         font-size: 18px;
         margin-bottom: 5px;
    }
     section {
         padding: 20px 0px;
    }
     .logo-sec {
         width: 90%;
         margin: 0px auto;
         gap: 10px;
         display: grid;
         grid-template-columns: 1fr 1fr;
    }
     .logo_sec {
         padding: 30px 20px;
         border: 1px solid #ededed;
    }
     .button_sec {
         flex-wrap: wrap;
         gap: 0px !important;
    }
     ul.navbar-nav.mx-auto {
         gap: 15px;
         margin-bottom: 25px;
    }
     div#navbarNav {
         padding: 12px !important;
    }
     .btn-primary-custom {
         font-size: 13px;
         margin-bottom: 20px;
         padding: 8px 12px 8px 12px;
    }
     .feature_box {
         padding: 14px 8px;
    }
     .feature_box .feature-title {
         font-size: 18px;
    }
     .green_space_sec .feature-icon svg {
         width: 50px;
         height: 50px;
    }
     .col-md-4.second_box {
         border-top: 1px solid #8ea888;
         border-bottom: 1px solid #8ea888;
         border-left: none;
         border-right: none;
         padding: 10px;
         margin-bottom:10px;
    }
     .families_sec {
         margin-top: 0px;
		 margin-bottom: 30px;
}
	
    
     .feature-icon {
         width: 20px;
         height: 20px;
    }
     .feature-title {
         font-size: 20px;
    }
     p.feature-text_ {
         font-size: 16px;
    }
     .company-section .col-lg-2.col-md-6.mb-3.mb-lg-0.col-xs-6 {
         width: 50%;
    }
.hero-section {
    min-height: 400px;
    padding-bottom: 0;
}
.service-for-you .text-center.p-4 {
    padding: 10px !important;
}
.single_service h2.main-heading {
    margin: 0px 0px 10px;
}
.service_content {
    padding: 10px;
}
.single_service img {

    height: 300px;
}
.single_service .sdf img {
    border-radius: 10px;
}
section.services-sec {
    gap: 20px;
}
.container.hero-inner .hero-center-img {
    position: relative;

}
.hero-center-img {
    margin: 10px auto 20px;
    max-width: 300px;
}
     h2 {
         font-size: 30px !important;
         font-weight: 700;
         line-height: 40px;
         letter-spacing: 0px;
    }
     .families_sec {
         margin-top: 0px;
    }
     section.box-sec.clip-bottom_ {
         position: relative;
         padding-top: 0px;
    }
     section.better_garden_sec .container.text-center h2.main-heading {
         margin: 0px auto 16px;
    }
     section.better_garden_sec .container.text-center {
         top: 0px;
    }
     .better_garden img {
         padding-top: 30px;
    }
     section.landscaping.container-fluid {
         padding-top: 40px;
    }
     .svg-sec svg {
         top: -27px;
    }
     .svg-sec_trusted svg {
         position: absolute;
         top: 70px;
    }
     section.families-sec-title h2.main-heading {
         margin: 0px auto 0;
         top: 30px;
    }
     section.review-container h2.main-heading {
         margin: 20px auto 50px;
    }
     section.box-sec.clip-bottom_ .form-sec {
         padding-top: 00px;
    }
	  .form-sec {
         padding-top: 50px;
    }
     .form-sec h2.main-heading {
         margin-bottom: 30px;
         text-align: center;
    }
     .box-sec_inner {
         grid-template-columns: repeat(2, 1fr);
         width: 100%;
         margin: 0px auto;
    }
    .feature_box_ {
    padding: 0px 5px 0px 6px;
}
    .feature_box_title_sec .feature-title {
    font-size: 20px;
    text-align: center;
}
.feature_box_title_sec p {
  
    text-align: center;
}
section.estimate-cost {

    margin-top: 20px;
}
.service_content .sub-heading {
    margin-bottom: 0px;
}
.hero-inner .btn-primary-custom {
    margin-top: 0;
}
    section.before-after-container h2.main-heading {
         margin: 0px auto 30px;
         font-size: 30px !important;
    }
     .testimonial_inner_slide.slick-slide {
         padding: 20px 15px;
         margin: 0 10px 20px;
    }
     .avtar_info {
         gap: 9px;
         margin-top: 30px;
    }
     .avtar_name {
         font-size: 16px;
    }
     .avtar_img img {
         width: 40px !important;
         height: 40px;
    }
     button.slick-arrow {
         display: none !important;
    }
     .testimonial_inner_slide.slick-slide h3 {
         font-size: 16px;
         margin-bottom: 10px !important;
    }
     section.better_garden_sec {
         padding-top: 0px;
    }
}
 .footer {
     color: #1d5010;
     padding: 60px 0 30px;
}
 .social-icon {
     color: #1d50102;
     font-size: 1.5rem;
     margin-right: 15px;
     transition: color 0.3s ease;
}
 .social-icon:hover {
     color: var(--accent);
}