html,body {
    font-family: 'Montserrat', sans-serif;
    font-family: 'Sora', sans-serif;
    scroll-behavior: smooth;
    scroll-padding-top: 30vh;
    overflow-y: scroll;
    
}

/* nav links hover line animation */

.navbar .navbar-nav .nav-item {
    position: relative;
  }
  .navbar .navbar-nav .nav-item::after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    content: "";
    background-color: #0B4C18;
    width: 0%;
    height: 4px;
    transition: all 0.5s;
  }
  .navbar .navbar-nav .nav-item:hover::after {
    width: 90%;
  }
  

/* End of nav link animation */

.navbar .nav-link {
    font-size: 1.2rem;
    font-weight: 700;
}

.navbar .navbar-toggler {
    color: white !important;
    border-color: white !important;
    }

/* Prevent phone numbers from appearing blue and underlined on mobile devices */
a[href^="tel"] {
    color: inherit !important;
    text-decoration: none !important;
    font-weight: inherit !important;
}

/* Offcanvas close (X) button: white and 1rem size on all pages */
.offcanvas .btn-close {
    filter: invert(1) brightness(2);
    width: 1rem;
    height: 1rem;
    background-size: 1rem;
}

.hero {
    margin-top: 5rem;
    height: 80vh;
    position: relative;
    background-color: black;
    overflow: hidden;
}

.hero::before {
    content: '';
    background-image: url(Lawn.png);
    background-size: cover;
    position: absolute;
    inset: 0;
    opacity: 0.7;
}

.offcanvas .offcanvas-end {
    width: 90%
}

.display-4 {
    font-size: 4rem;
}

.display-4, .hero-p, .btn {
    font-weight: 700;
    color: white;
    isolation: isolate;
}
/* Three cards */

.three-cards {
    padding: 5rem 0;
    overflow: hidden;
}

.card-h3 {
    color: black;
}

.three-cards .text-header h3 {
    font-size: 2.5rem;
    font-weight: 700;
}

.card-header {
    color: #0B4C18;
    font-size: 1.5rem;
    font-weight: 600;
    padding-bottom: 1rem;
}

.card-paragraph {
    color: black;
    font-weight: 300;
}

.bi {
    font-size: 6rem;
}

.Our-services {
    overflow: hidden;
    
}

.card-service-title {
    color: #0B4C18;
}

.offcanvas .btn-close {
    filter: invert(1) brightness(2);
    width: 1rem;
    height: 1rem;
    background-size: 1rem;
}

/* garden cta */

.garden-cta {
    height: 30vh;
    position: relative;
    background-color: black;
    overflow: hidden;
}

.garden-cta::before {
    content: '';
    background-image: url(garden.png);
    background-size: cover;
    position: absolute;
    inset: 0;
    opacity: 0.7;
}

/* end of garden */
/* Location */
.Location {
    overflow: hidden;
}s
/* .AddressText {
    display: flex;
    justify-content: center;
} */

/* End of location */
/* Start of footer */
.footer {
    position: absolute;
}

.page-footer {
    overflow: hidden;
}

/* gallery */

.gallery {
    overflow: hidden;
    margin-top: 10rem;
}

/* Gallery Item Styles */
.gallery-item {
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: translateY(-5px);
}

.gallery-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

/* .container{
    max-width: 1200px;
    
    margin: auto;
} */

.grid{
    margin: 0 auto;
}


.grid .grid-item{
    width: calc(33.333% - 20px);
    margin-bottom: 1em;
}


/* end of gallery */
/* Contact page */

.contact-cta {
    margin-top: 10rem;
    height: 40vh;
    position: relative;
    background-color: black;
    overflow: hidden;
}

.contact-cta::before {
    content: '';
    background-image: url(/backgroundPictures/paver3.png);
    background-size: cover;
    position: absolute;
    inset: 0;
    opacity: 0.6;
}
/* End of Contact page */
/* form */

/* end of form */
/* services */
/* Contact page */

.services-cta {
    margin-top: 10rem;
    height: 30vh;
    position: relative;
    background-color: black;
    overflow: hidden;
}

.services-cta::before {
    content: '';
    background-image: url(/backgroundPictures/Sod.png);
    background-size: cover;
    position: absolute;
    inset: 0;
    opacity: 0.6;
}

.card-img-top {
    width: 100%;
    height: 230px;
    object-fit:cover;
}

.phone-number .p {
    color: aliceblue;
}

/* End of Contact page */
/* end of services */


@media (max-width:768px){
    .grid .grid-item{
        width: calc(100%- 20px);
    }

    #AddressText{
        flex-direction: column;
    }
}

@media (max-width: 574px) {
    .grid .grid-item{
        width: calc(100%);    
    }
}

/* Responsive text size for mobile device */
@media screen and (max-width:767px) {
    .display-4 {
        font-size: 2rem;
    }

    .offcanvas-body, .offcanvas-header {
        background-color: red
    }
    .navbar .navbar-nav .nav-item::after {
        background-color: white;
    }

    .nav-link {
        color: white !important;
    }

    .display-4, p, .btn {
        /* font-weight: 700; */
        isolation: isolate;
    }    

    /* Center align offcanvas menu links while keeping them stacked */
    .offcanvas .navbar-nav {
        align-items: center;
        flex-direction: column;
        display: flex;
    }
    .offcanvas .nav-item {
        width: 100%;
        text-align: center;
    }
    .offcanvas .nav-link {
        display: block;
        width: 100%;
        text-align: center;
    }
}
    


/* Responsive text size for tablets */
@media screen and (max-width: 991px) {
    

    .offcanvas .nav-link {
        font-size: clamp(40px, 5vw, 40px);
    }
            /* Make offcanvas close (X) button white and larger */
            .offcanvas .btn-close {
                filter: invert(1) brightness(2);
                width: 1rem;
                height: 1rem;
                background-size: 2.5rem;
            }

    .navbar .navbar-nav .nav-item:hover::after {
        width: 50%;
    }

      .offcanvas-body, .offcanvas-header {
        background-color: #02340C
    }
    .navbar .navbar-nav .nav-item::after {
        background-color: white;
    }

    .nav-link {
        color: white !important;
    }

    .gallery-item img {
        height: 50vh;
    }
}


/* Force Our-services section to one column below Bootstrap lg breakpoint */
@media (max-width: 991.98px) {
    .Our-services .row {
        flex-direction: column !important;
    }
    .Our-services .row > [class*='col-'] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        display: block !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}