body {
font-family: 'Roboto', sans-serif;
margin: 0px; }

.navbar {
background-color: #94c341; }

.nav-link {
color: white !important; }

.nav-link:hover {
background-color: #a2d844; }

.nav-link-special {
background-color: #e31e25; }

.nav-link-special:hover {
background-color: #fa2d34; }

.hero {
position: relative;
z-index: 800; }

#parallax h1 {
font-weight: bold; }

.m {
position: absolute;
height: auto; }

#m1 {
left: 65%; top: 45%;
z-index: 30; }

#m2 {
left: 15%;
top: 35%;
z-index: 31;
filter:blur(5px);
transform: rotate(20deg);
max-width: 100px; }

#m3 {
left: 33%;
z-index: 32;
filter:blur(1px);
transform: rotate(40deg);
max-width: 130px; }

#m4 {
left: 5%;
top: 5%;
z-index: 33;
opacity: 0.5;
filter:blur(8px);
transform: rotate(-14deg);
max-width: 90px; }

#m5 {
left: 60%;
top: 5%;
z-index: 34;
opacity: 0.8;
filter:blur(3px);
transform: rotate(17deg);
max-width: 110px; }

#m6 {
left: 30%;
top: 65%;
z-index: 35;
opacity: 0.2;
filter:blur(6px);
transform: rotate(67deg);
max-width: 120px; }

#m7 {
left: 55%;
top: 75%;
z-index: 36;
opacity: 0.9;
filter:blur(12px);
transform: rotate(-5deg);
max-width: 85px; }

#m8 {
left: 7%;
top: 62%;
z-index: 37;
opacity: 0.75;
filter:blur(8px);
transform: rotate(-35deg);
max-width: 112px; }

#grass {
position: relative;
width: 100%;
height: auto; }

#down {
transform: translateX(-50%);
z-index: 500;
position: absolute;
bottom: 0%;
left: 50%; }

.green-bg {
color: white;
background-color: #94c341; }

.service {
aspect-ratio: 2/1;
background-size: cover;
background-position: center;
background-repeat: no-repeat; }

.service-big {
aspect-ratio: 2/0.5; }

.service a, .service h1 {
text-decoration: none;
background-color: #94c341;
color: white; }

.service a:hover  {
color: white;
background-color: #a2d844; }

.service1 {
background-image: url('../img/service1.jpg'); }

.service2 {
background-image: url('../img/service2.jpg'); }

.service3 {
background-image: url('../img/service3.jpg'); }

.service4 {
background-image: url('../img/service4.jpg'); }

.clients-logo {
grid-template-columns: 1fr 1fr;
display: grid; }

.client-logo img {
max-width: 90%;
height: auto; }

.product-more {
display: none; }

.products img {
margin: 0 auto; }

#contact a {
color: white;
text-decoration: none;
border-bottom: 1px dotted white; }

#footer {
color: white;
background-color: #808080; }

#footer a {
color: white;
text-decoration: none;
border-bottom: 1px dotted white; }

#top {
width: 60px;
height: 60px;
line-height: 50px;
z-index: 600;
position: fixed;
bottom: 20px;
right: 20px;
display: none; }

#top:hover {
cursor: pointer; }

#top img {
max-width: 100%;
height: auto; }

button {
color: white !important; }

button:hover {
background-color: #b2dc67 !important; }

.button {
display: inline-block;
padding: 8px 20px;
text-decoration: none;
background-color: #94c341;
color: white; }

.button:hover {
color: white;
background-color: #a2d844; }

#map {
width: 100%;
height: 90%; }

.form-control:focus {
color: white !important; }

@media only screen and (min-width: 768px) {
    .clients-logo {
    grid-template-columns: 1fr 1fr 1fr; }
}

@media only screen and (min-width: 992px) {
    .clients-logo {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
}