body {
  font-family: "Archivo Narrow", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

h1 {
  font-family: "Archivo Black", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #fdfefd;
  text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.322);
}
h2 {
  font-family: "Archivo Black", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #76c92c;
  text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.322); 
}
h3 {
    color:#fdfefd;
}
.navbar-nav {
    color: #2d3d2d;
    font-size: 1.25rem;
    
}
.nav-item {
    background-color: #fdfefd;
    color: #2d3d2d;
    width: 200px;
    border-radius: 3px;
}
.nav-item:hover {
    background-color: #d6ffca;
    color:#2d3d2d;
}
.dropdown-item {
    font-size: 1rem;
    background-color: #fdfefd;
}
.dropdown-item:hover {
    background-color: #d6ffca;
}

.animatebg {
    height: 100%;
    width: 100%;
    background-image: linear-gradient(45deg, #76c92c, #93b065, #3d611b);
    background-size: 200% 150%;
    animation: bganimate 12s infinite linear;
}
.index {
    background-size: 2000% 1500%;
    align-content: center;
    min-height: 800px;
   

    
}
@keyframes bganimate{
    0% {
        background-position: 0 85%;
    }
    50% {
        background-position: 100% 20%
    }
    100% {
        background-position: 0% 85%;
    }
}
hr {
     border: 5px solid #fdfefd;
    margin-top: 0rem;
    margin-bottom: 0em;
} 

button.nav-item.btn {
    font-size: 1.25rem;
}
    .background-image {
        width: 100%;
        min-height: 500px;
        background-image: url(images/greenlawn.jpg);
        background-size: cover;
        align-content: center;
    }

    .services {
        background-image: url(images/GreenServices.jpg);
    }
    .about {
        background-image: url(images/About.jpg);
    }
    .quote {
        background-image: url(images/Quote.jpg);
    }

.cardtop {
    /* background-color: azure; */
    background-image: url(images/LawnMowing.jpg);
    background-size: cover; 
    background-position: center;
    min-height: 250px;
    width: 100%;
    color: #fdfefd;
    text-align: center;
    align-content: center;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.3), -5px -5px 10px rgba(255,255,255,0.5);
    padding-bottom: 5px;
    margin-bottom: 0px;
    overflow: hidden;
}

.card2 {
     background-image: url(images/Aeration.jpg);
}
.card3 {
     background-image: url(images/MulchPineStraw.jpg);
}
.card4 {
     background-image: url(images/seasonal.jpg);
}
.card5 {
     background-image: url(images/pruning.jpg);
    
}
.card6 {
     background-image: url(images/flowerbed.jpg);
     
}


.cardtop:hover {
  transform: scale(1.2); 
  transition: transform 0.5s ease; 
}

.cardbottom ul {
    line-height: 1.5rem;
}
.contact .lead {
    color: #76c92c;
}
.contact p {
    color:#fdfefd;
}
.email {
    text-decoration: none;
    color:#fdfefd;
}
.email:hover {
    text-decoration: underline;
}
i {
   color:#fdfefd; 
   font-size: 2.5rem;
}
i:hover {
    color:#d6ffca;
}

.card-header i {
    font-size: 1.5rem;
    color: #d0ab5a;
}
.card .card-header {
    background-color: #fdfefd;
}
.card-body {
    min-height: 485px;
}
.hero {
    background-image: url(images/GreenIsGood.jpg);
    background-size: cover; 
    background-position: center;
    min-height: 750px; 
}
.commercial {
    background-image: url(images/commercial.jpg);
}
.HOA {
    background-image: url(images/HOA.jpg);
}
.herotext {
    background-color: #d6ffca;
    align-content: center;
}
.herotext h1 {
    font-family: "Archivo", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: #2d3d2d;
    text-shadow: none; 

}
.box2 {
    background-color:#2d3d2d;
    align-content: center;
}
.box2 h1 {
    font-family: "Archivo", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: #d6ffca;
    text-shadow: none; 
}
.box2 p {
    color: #d6ffca;
}


    @keyframes fade-in-on-scroll {
        0% { 
            opacity: 0%;
            transform: translateX(100px); 
        
        }
        30% {
            opacity: 100%;
            transform: translateX(50px); 

        }
        100% { 
            opacity: 100%;
            transform: translateX(0); 
        }
    }

     .fadeleft {
        animation: fade-in-on-scroll;
        animation-duration: auto;
        animation-timeline: view(); /* or scroll(root block) */
        animation-range: entry 0% cover 50%; /* Adjust range as needed */
    }


    @keyframes fade-in-on-scroll-right {
        0% { 
            opacity: 0%;
            transform: translateX(-100px); 
        
        }
        30% {
            opacity: 100%;
            transform: translateX(-50px); 

        }
        100% { 
            opacity: 100%;
            transform: translateX(0); 
        }
    }

     .faderight {
        animation: fade-in-on-scroll-right;
        animation-duration: auto;
        animation-timeline: view(); /* or scroll(root block) */
        animation-range: entry 0% cover 50%; /* Adjust range as needed */
    }
.inputwrapper {
    color:#fdfefd;
}
.footer {
    display: flex;
    background-color: #88bc88;
    min-height: 50px;
    color:#fdfefd; 
    padding: 20px 50px 10px;
}
.footer a {
    color:#fdfefd; 
}





/* Tablet View */
@media (max-width: 768px) {
    
     .footer {
        display: block;
        text-align: center;
    }
    
    .navbar-nav {
        position: absolute; right: 0;
        z-index: 2;
        padding-bottom: 0px;
    }

    .hero {
        min-height: 350px;

    }
    .card-body {
    min-height: 200px;
}
}