:root {
    /* Paste the exact hero image URL below, or drop a local file and update path */
    --hero-url: url('../img/homepagelawn.jpg');
    --brand: #067519;
    --brand-dark: #0b5a15;
}
.hero{
  min-height: 70vh;
  background-image: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)), var(--hero-url);
  background-size: cover;
  background-position: center;
}
.navbar .nav-link.active{
  color: var(--brand) !important;
}
.card:hover{ transform: translateY(-2px); }
/* Footer with grass image + green/sepia overlay */
.custom-footer {
    color: #fff;
    /* overlay first, then image */
    background: linear-gradient(rgba(10,80,40,.55), rgba(10,80,40,.55)), url('../img/grass-footer.jpg') center/cover no-repeat;
    /* extra polish */
    filter: saturate(.95) sepia(.15);
    min-height: 180px; /* make the image visible */
    display: flex;
    align-items: center; /* vertically center content */
}

    /* ensures links/icons are readable on the image */
    .custom-footer a {
        color: #fff;
        text-decoration: none;
    }

        .custom-footer a:hover {
            text-decoration: underline;
        }
.services-last {
    margin-top: 2px; /* smaller than Bootstrap’s mt-2 (which is 0.5rem = 8px by default, but you can tweak) */
}
html {
    scroll-behavior: smooth; /* optional, nice smooth scroll */
}

.service-section {
    scroll-margin-top: 100px; /* adjust this number to match your header height */
}